im0o
23aa28fbea
走内核的 provider healthcheck：逐条 URLTest，测通与否和延迟一起记进历史 （adapter/provider/healthcheck.go:123-189）。用的是订阅自己的 health-check.url——这个接口不收 url 参数，设置页那个测速地址传不进去。 它是同步的，测完全部线路才回话，一批 10 条、每条最多 5 秒 （healthcheck.go:132、181、201），线路多又都测不通时远超透传默认的 15 秒，所以 proxyGet 的超时改成可传，健康检查这条路径放到 120 秒。
318 lines
7.5 KiB
Vue
318 lines
7.5 KiB
Vue
<script setup lang="ts">
|
|
/**
|
|
* 选中那个订阅的详情：地址、更新间隔，和它带来的线路。
|
|
*
|
|
* 健康检查不在字段区展示，只是右上角一个开关动作：默认就是开着的，
|
|
* 值得占一行的只有「被谁关掉了」这件事，而按钮文案本身已经说明了状态。
|
|
*
|
|
* 线路列表只读。这些线路不在内核的全局名字表里，不能被入站直接引用，
|
|
* 只能经策略组的 `use:` 整批引入，所以这里没有「换线」可点。
|
|
*/
|
|
import { computed } from 'vue'
|
|
import type { Subscription } from '@shared/providers.ts'
|
|
import { latestDelay } from '../api'
|
|
import type { ProviderInfo } from '../api'
|
|
import IconEdit from '~icons/ri/edit-line'
|
|
import IconDelete from '~icons/ri/delete-bin-line'
|
|
import IconRefresh from '~icons/ri/refresh-line'
|
|
import IconOffline from '~icons/ri/cloud-off-line'
|
|
import IconPulse from '~icons/ri/pulse-line'
|
|
import IconSync from '~icons/ri/loop-right-line'
|
|
import IconLoad from '~icons/ri/loader-4-line'
|
|
|
|
const props = defineProps<{
|
|
subscription: Subscription
|
|
/** 运行时数据：当前有哪些线路、上次更新时间。内核没连接时是 undefined */
|
|
info: ProviderInfo | undefined
|
|
online: boolean
|
|
/** 正在等内核重新拉取 */
|
|
refreshing: boolean
|
|
/** 正在等内核测完这个订阅的线路 */
|
|
checking: boolean
|
|
/** 配置正在保存 */
|
|
saving: boolean
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
edit: []
|
|
remove: []
|
|
/** 让内核立刻重新拉取。运行时动作，不写配置文件 */
|
|
refresh: []
|
|
/** 让内核立刻测一遍这个订阅的线路。运行时动作，不写配置文件 */
|
|
check: []
|
|
/** 开关健康检查。写配置文件，走保存链路 */
|
|
toggleHealthCheck: []
|
|
}>()
|
|
|
|
const lines = computed(() => props.info?.proxies ?? [])
|
|
|
|
function delayClass(ms: number | null): string {
|
|
if (ms === null) return ''
|
|
if (ms < 200) return 'd-ok'
|
|
if (ms < 500) return 'd-warn'
|
|
return ''
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<aside class="detail">
|
|
<header class="top">
|
|
<div class="title">
|
|
<span class="name">{{ subscription.name }}</span>
|
|
<div class="acts">
|
|
<button type="button" :disabled="saving" @click="emit('toggleHealthCheck')">
|
|
<IconPulse /> {{ subscription.healthCheck ? '关闭健康检查' : '开启健康检查' }}
|
|
</button>
|
|
<button type="button" :disabled="!online || refreshing" @click="emit('refresh')">
|
|
<IconRefresh /> {{ refreshing ? '更新中' : '更新订阅' }}
|
|
</button>
|
|
<button type="button" :disabled="saving" @click="emit('edit')">
|
|
<IconEdit /> 编辑
|
|
</button>
|
|
<button type="button" class="danger" :disabled="saving" @click="emit('remove')">
|
|
<IconDelete /> 删除
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<dl class="facts">
|
|
<template v-if="subscription.type === 'file'">
|
|
<dt>文件</dt>
|
|
<dd class="mono url">{{ subscription.path ?? '—' }}</dd>
|
|
</template>
|
|
<template v-else>
|
|
<dt>地址</dt>
|
|
<dd class="mono url">{{ subscription.url }}</dd>
|
|
<dt>自动更新</dt>
|
|
<dd class="mono">
|
|
{{ subscription.interval !== null ? `每 ${subscription.interval} 秒` : '已关闭' }}
|
|
</dd>
|
|
</template>
|
|
</dl>
|
|
</header>
|
|
|
|
<section class="block">
|
|
<h3>
|
|
线路
|
|
<button
|
|
type="button"
|
|
class="check"
|
|
:title="checking ? '检查中' : '检查全部线路的延迟'"
|
|
:disabled="!online || checking || lines.length === 0"
|
|
@click="emit('check')"
|
|
>
|
|
<IconLoad v-if="checking" class="spin" />
|
|
<IconSync v-else />
|
|
</button>
|
|
</h3>
|
|
|
|
<p v-if="!online" class="hint"><IconOffline /> 内核未连接</p>
|
|
<p v-else-if="lines.length === 0" class="hint">这个订阅现在没有线路</p>
|
|
<ol v-else class="lines">
|
|
<li v-for="line in lines" :key="line.name" class="row">
|
|
<span class="line-name">{{ line.name }}</span>
|
|
<span class="line-type mono">{{ line.type }}</span>
|
|
<span :class="['line-delay mono', delayClass(latestDelay(line))]">
|
|
{{ latestDelay(line) !== null ? `${latestDelay(line)} ms` : '—' }}
|
|
</span>
|
|
</li>
|
|
</ol>
|
|
</section>
|
|
</aside>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.detail {
|
|
border: 1px solid var(--c-border);
|
|
border-radius: var(--r-md);
|
|
background: var(--c-surface);
|
|
padding: var(--s-4) var(--s-5) var(--s-5);
|
|
align-self: start;
|
|
position: sticky;
|
|
top: var(--s-6);
|
|
}
|
|
|
|
.top {
|
|
padding-bottom: var(--s-4);
|
|
border-bottom: 1px solid var(--c-border);
|
|
}
|
|
|
|
.title {
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: var(--s-3);
|
|
margin-bottom: var(--s-3);
|
|
}
|
|
|
|
.name {
|
|
font-size: var(--t-xl);
|
|
font-weight: 600;
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.acts {
|
|
display: flex;
|
|
gap: var(--s-2);
|
|
margin-left: auto;
|
|
}
|
|
|
|
.acts button {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--s-1);
|
|
padding: var(--s-1) var(--s-2);
|
|
border: none;
|
|
border-radius: var(--r-sm);
|
|
background: none;
|
|
color: var(--c-text-soft);
|
|
font-size: var(--t-sm);
|
|
white-space: nowrap;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.acts button:hover:not(:disabled) {
|
|
background: var(--c-surface-sunken);
|
|
color: var(--c-text);
|
|
}
|
|
|
|
.acts button.danger:hover:not(:disabled) {
|
|
color: var(--c-danger);
|
|
}
|
|
|
|
.acts button:disabled {
|
|
color: var(--c-text-faint);
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.facts {
|
|
display: grid;
|
|
grid-template-columns: auto 1fr;
|
|
gap: var(--s-1) var(--s-4);
|
|
margin: 0;
|
|
font-size: var(--t-sm);
|
|
}
|
|
|
|
.facts dt {
|
|
color: var(--c-text-faint);
|
|
}
|
|
|
|
.facts dd {
|
|
margin: 0;
|
|
min-width: 0;
|
|
}
|
|
|
|
.url {
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.block {
|
|
padding-top: var(--s-4);
|
|
}
|
|
|
|
h3 {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: var(--t-sm);
|
|
font-weight: 600;
|
|
color: var(--c-text);
|
|
letter-spacing: 0.02em;
|
|
margin-bottom: var(--s-3);
|
|
}
|
|
|
|
.check {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-left: auto;
|
|
width: 22px;
|
|
height: 22px;
|
|
border: none;
|
|
border-radius: var(--r-sm);
|
|
background: none;
|
|
color: var(--c-text-faint);
|
|
cursor: pointer;
|
|
}
|
|
.check:hover:not(:disabled) {
|
|
background: var(--c-surface-sunken);
|
|
color: var(--c-text);
|
|
}
|
|
.check:disabled {
|
|
opacity: 0.35;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.spin {
|
|
animation: spin 0.9s linear infinite;
|
|
}
|
|
|
|
@keyframes spin {
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
.hint {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--s-2);
|
|
color: var(--c-text-faint);
|
|
font-size: var(--t-sm);
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.lines {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
max-height: 420px;
|
|
overflow-y: auto;
|
|
/* 细杆加透明轨道，别让系统滚动条压在延迟列上；gutter 常驻，
|
|
线路数跨过滚动阈值时右缘不横跳 */
|
|
scrollbar-width: thin;
|
|
scrollbar-color: var(--c-border-strong) transparent;
|
|
scrollbar-gutter: stable;
|
|
padding-right: var(--s-2);
|
|
}
|
|
|
|
.row {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) auto 4.5rem;
|
|
align-items: baseline;
|
|
gap: var(--s-3);
|
|
padding: var(--s-1) 0;
|
|
font-size: var(--t-sm);
|
|
}
|
|
|
|
.row + .row {
|
|
border-top: 1px solid var(--c-border);
|
|
}
|
|
|
|
.line-name {
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.line-type {
|
|
color: var(--c-text-faint);
|
|
font-size: var(--t-xs);
|
|
}
|
|
|
|
.line-delay {
|
|
text-align: right;
|
|
font-variant-numeric: tabular-nums;
|
|
color: var(--c-text-faint);
|
|
}
|
|
|
|
.d-ok {
|
|
color: var(--c-ok);
|
|
}
|
|
.d-warn {
|
|
color: var(--c-warn);
|
|
}
|
|
</style>
|