From 69ae918e7c33134a87a3948f86d8a29e2b1a7b26 Mon Sep 17 00:00:00 2001
From: im0o <0ojixueseno0@gmail.com>
Date: Mon, 10 Aug 2026 12:09:03 +0800
Subject: [PATCH] =?UTF-8?q?=E5=87=BA=E7=AB=99=E9=80=89=E9=A1=B9=E6=94=B9?=
 =?UTF-8?q?=E6=88=90=E5=8D=A1=E7=89=87=EF=BC=8C=E5=B8=A6=E5=8D=8F=E8=AE=AE?=
 =?UTF-8?q?=E5=92=8C=E5=BB=B6=E8=BF=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

参照 fl-clash：一张卡三行——名字、协议（策略组显示「类型(当前选中)」）、最近一次延迟。
延迟按 200/500 毫秒分三档着色，没测过就留空而不是显示 0。
这些数据配置文件里都没有，全部来自内核的 /proxies。

另外主区最大宽度从 960 提到 1600，去掉选中行的左侧高亮条。
---
 web/App.vue                 |  16 ++-
 web/api.ts                  |  23 ++++
 web/views/InboundDetail.vue | 261 +++++++++++++++++++++++++-----------
 web/views/RouterPage.vue    |   5 +-
 4 files changed, 225 insertions(+), 80 deletions(-)

diff --git a/web/App.vue b/web/App.vue
index 53aebff..7a61cc5 100644
--- a/web/App.vue
+++ b/web/App.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, onMounted, ref } from 'vue'
 import { ApiError, api, getToken, setToken } from './api'
-import type { ConfigSnapshot } from './api'
+import type { ConfigSnapshot, ProxyInfo } from './api'
 import { NAV } from './nav'
 import { density, toggleDensity } from './prefs'
 import RouterPage from './views/RouterPage.vue'
@@ -12,6 +12,7 @@ import IconUnfold from '~icons/ri/sidebar-unfold-line'
 const snapshot = ref<ConfigSnapshot | null>(null)
 const kernel = ref<{ online: boolean; version?: string }>({ online: false })
 const providerLines = ref<string[]>([])
+const runtime = ref<Record<string, ProxyInfo>>({})
 const needsToken = ref(!getToken())
 const loadError = ref('')
 const loading = ref(false)
@@ -28,6 +29,7 @@ async function load() {
     // 订阅里有哪些线路只有运行中的内核知道，配置文件里只有一个订阅地址。
     // 拿不到不算错误——界面照常能编辑，只是订阅线路那一档不可选。
     providerLines.value = status.online ? await readProviderLines() : []
+    runtime.value = status.online ? await readRuntime() : {}
   } catch (error) {
     if (error instanceof ApiError && error.unauthorized) {
       needsToken.value = true
@@ -51,6 +53,15 @@ async function readProviderLines(): Promise<string[]> {
   }
 }
 
+/** 出站的运行时状态：协议类型、策略组当前选中了谁、最近一次延迟。 */
+async function readRuntime(): Promise<Record<string, ProxyInfo>> {
+  try {
+    return (await api.proxies()).proxies
+  } catch {
+    return {}
+  }
+}
+
 function submitToken(value: string) {
   setToken(value)
   void load()
@@ -131,6 +142,7 @@ const current = computed(() => NAV.find((n) => n.key === active.value))
           :revision="snapshot.revision"
           :kernel-online="kernel.online"
           :provider-lines="providerLines"
+          :runtime="runtime"
           @changed="load"
         />
 
@@ -316,7 +328,7 @@ const current = computed(() => NAV.find((n) => n.key === active.value))
 /* ── 主区 ───────────────────────────────────── */
 .main {
   padding: var(--s-6) var(--s-6) var(--s-7);
-  max-width: 960px;
+  max-width: 1600px;
 }
 
 .note {
diff --git a/web/api.ts b/web/api.ts
index 7d56e6f..6388925 100644
--- a/web/api.ts
+++ b/web/api.ts
@@ -72,6 +72,23 @@ export interface ApplyFailure {
   restored: boolean
 }
 
+export interface ProxyInfo {
+  /** 协议类型（Vmess、Vless…）或策略组类型（Selector、URLTest…） */
+  type: string
+  /** 策略组当前选中的成员。不是策略组就没有这个字段 */
+  now?: string
+  /** 策略组的成员列表 */
+  all?: string[]
+  /** 延迟测试记录，最后一条是最近一次。delay 为 0 表示测失败 */
+  history?: { delay: number }[]
+}
+
+/** 最近一次延迟。没测过或测失败都返回 null。 */
+export function latestDelay(info: ProxyInfo | undefined): number | null {
+  const last = info?.history?.at(-1)?.delay
+  return last === undefined || last === 0 ? null : last
+}
+
 export const api = {
   readConfig: () => request<ConfigSnapshot>('GET', '/api/config'),
 
@@ -85,6 +102,12 @@ export const api = {
 
   kernel: () => request<{ online: boolean; version?: string }>('GET', '/api/kernel'),
 
+  /**
+   * 所有出站的运行时状态：协议类型、策略组当前选中了谁、最近一次延迟。
+   * 这些配置文件里都没有，只能问运行中的内核。
+   */
+  proxies: () => request<{ proxies: Record<string, ProxyInfo> }>('GET', '/api/kernel/proxies'),
+
   /** 订阅里当前有哪些线路。配置文件给不出这个答案，只能问运行中的内核。 */
   providers: () =>
     request<{ providers: Record<string, { vehicleType: string; proxies: { name: string }[] }> }>(
diff --git a/web/views/InboundDetail.vue b/web/views/InboundDetail.vue
index ad48ea8..813d83f 100644
--- a/web/views/InboundDetail.vue
+++ b/web/views/InboundDetail.vue
@@ -1,39 +1,107 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import type { Inbound, OutboundMode } from '@shared/inbounds.ts'
+import { latestDelay } from '../api'
+import type { ProxyInfo } from '../api'
 import IconLock from '~icons/ri/lock-line'
 import IconOffline from '~icons/ri/cloud-off-line'
 
 const props = defineProps<{
   inbound: Inbound
-  /** 策略组名字 */
   groups: string[]
-  /** 顶层 proxies 里手写的线路 */
   ownProxies: string[]
-  /** 订阅带来的线路。只有内核在线时才拿得到 */
   providerLines: string[]
+  /** 运行时状态，键是出站名字。内核没连接时是空的 */
+  runtime: Record<string, ProxyInfo>
   kernelOnline: boolean
   saving: boolean
 }>()
 
 const emit = defineEmits<{ pick: [mode: OutboundMode] }>()
 
-const BUILTINS: Array<{ mode: OutboundMode; label: string; hint: string }> = [
-  { mode: { kind: 'rules' }, label: 'RULE', hint: '不指定出站，流量走分流规则' },
-  { mode: { kind: 'direct' }, label: 'DIRECT', hint: '不经过任何代理' },
-  { mode: { kind: 'global' }, label: 'GLOBAL', hint: '跟随 GLOBAL 组当前选中的出站' },
-]
+interface Option {
+  key: string
+  mode: OutboundMode
+  label: string
+  /** 卡片第二行。策略组显示「类型(当前选中)」，线路显示协议 */
+  sub: string
+  delay: number | null
+  disabled: boolean
+  /** 不可选时的原因，鼠标悬停显示 */
+  reason?: string
+}
 
-const current = computed(() => props.inbound.outbound)
+/** 默认入站没有 proxy 字段可写，整块都不可选。 */
+const locked = computed(() => props.inbound.isDefault)
+
+function describe(name: string): { sub: string; delay: number | null } {
+  const info = props.runtime[name]
+  if (!info) return { sub: '', delay: null }
+  const sub = info.now ? `${info.type}(${info.now})` : info.type
+  return { sub, delay: latestDelay(info) }
+}
+
+const builtins = computed<Option[]>(() =>
+  (
+    [
+      { mode: { kind: 'rules' } as OutboundMode, label: 'RULE', sub: '走分流规则' },
+      { mode: { kind: 'direct' } as OutboundMode, label: 'DIRECT', sub: '不经过代理' },
+      { mode: { kind: 'global' } as OutboundMode, label: 'GLOBAL', sub: '跟随全局选择' },
+    ] as const
+  ).map((b) => ({
+    key: b.label,
+    mode: b.mode,
+    label: b.label,
+    sub: b.sub,
+    delay: null,
+    disabled: locked.value,
+  })),
+)
+
+function named(names: string[]): Option[] {
+  return names.map((name) => {
+    const { sub, delay } = describe(name)
+    return {
+      key: name,
+      mode: { kind: 'named', name } as OutboundMode,
+      label: name,
+      sub,
+      delay,
+      disabled: locked.value,
+    }
+  })
+}
+
+const groupOptions = computed(() => named(props.groups))
+const ownOptions = computed(() => named(props.ownProxies))
+
+const lineOptions = computed<Option[]>(() =>
+  props.providerLines.map((name) => {
+    const { sub, delay } = describe(name)
+    return {
+      key: name,
+      mode: { kind: 'named', name } as OutboundMode,
+      label: name,
+      sub,
+      delay,
+      disabled: true,
+      reason: '订阅线路不能被直接引用，选中它需要自动建一个筛选组——这部分还没做',
+    }
+  }),
+)
 
 function isCurrent(mode: OutboundMode): boolean {
-  const now = current.value
+  const now = props.inbound.outbound
   if (now.kind !== mode.kind) return false
   return now.kind !== 'named' || now.name === (mode as { name: string }).name
 }
 
-/** 默认入站没有 proxy 字段可写，出站只能是 RULE。 */
-const locked = computed(() => props.inbound.isDefault)
+function delayClass(ms: number | null): string {
+  if (ms === null) return 'd-none'
+  if (ms < 200) return 'd-ok'
+  if (ms < 500) return 'd-warn'
+  return 'd-bad'
+}
 </script>
 
 <template>
@@ -56,73 +124,85 @@ const locked = computed(() => props.inbound.isDefault)
     <section class="pick">
       <h3>出站</h3>
 
-      <p v-if="locked" class="locked">
+      <p v-if="locked" class="aside-note">
         <IconLock />
-        由 <code>{{ inbound.legacyKey }}</code> 声明，这种写法没有 proxy 字段，只能走 RULE
+        由 <code>{{ inbound.legacyKey }}</code> 声明，没有 proxy 字段，只能走 RULE
       </p>
 
-      <div class="chips">
+      <div class="grid">
         <button
-          v-for="b in BUILTINS"
-          :key="b.label"
+          v-for="opt in builtins"
+          :key="opt.key"
           type="button"
-          :class="['chip', isCurrent(b.mode) && 'is-on']"
-          :disabled="locked || saving"
-          :title="b.hint"
-          @click="emit('pick', b.mode)"
+          :class="['card', isCurrent(opt.mode) && 'is-on']"
+          :disabled="opt.disabled || saving"
+          @click="emit('pick', opt.mode)"
         >
-          {{ b.label }}
+          <span class="card-name">{{ opt.label }}</span>
+          <span class="card-sub">{{ opt.sub }}</span>
         </button>
       </div>
 
-      <template v-if="groups.length">
+      <template v-if="groupOptions.length">
         <h4>策略组</h4>
-        <div class="chips">
+        <div class="grid">
           <button
-            v-for="g in groups"
-            :key="g"
+            v-for="opt in groupOptions"
+            :key="opt.key"
             type="button"
-            :class="['chip', isCurrent({ kind: 'named', name: g }) && 'is-on']"
-            :disabled="locked || saving"
-            @click="emit('pick', { kind: 'named', name: g })"
+            :class="['card', isCurrent(opt.mode) && 'is-on']"
+            :disabled="opt.disabled || saving"
+            @click="emit('pick', opt.mode)"
           >
-            {{ g }}
+            <span class="card-name">{{ opt.label }}</span>
+            <span class="card-sub">{{ opt.sub || '—' }}</span>
+            <span :class="['card-delay', delayClass(opt.delay)]">
+              {{ opt.delay === null ? '' : `${opt.delay} ms` }}
+            </span>
           </button>
         </div>
       </template>
 
-      <template v-if="ownProxies.length">
+      <template v-if="ownOptions.length">
         <h4>自有线路</h4>
-        <div class="chips">
+        <div class="grid">
           <button
-            v-for="p in ownProxies"
-            :key="p"
+            v-for="opt in ownOptions"
+            :key="opt.key"
             type="button"
-            :class="['chip', isCurrent({ kind: 'named', name: p }) && 'is-on']"
-            :disabled="locked || saving"
-            @click="emit('pick', { kind: 'named', name: p })"
+            :class="['card', isCurrent(opt.mode) && 'is-on']"
+            :disabled="opt.disabled || saving"
+            @click="emit('pick', opt.mode)"
           >
-            {{ p }}
+            <span class="card-name">{{ opt.label }}</span>
+            <span class="card-sub">{{ opt.sub || '—' }}</span>
+            <span :class="['card-delay', delayClass(opt.delay)]">
+              {{ opt.delay === null ? '' : `${opt.delay} ms` }}
+            </span>
           </button>
         </div>
       </template>
 
       <h4>订阅线路</h4>
-      <p v-if="!kernelOnline" class="unavailable">
+      <p v-if="!kernelOnline" class="aside-note">
         <IconOffline />
-        内核未连接。订阅里有哪些线路只有运行中的内核知道，配置文件里只有订阅地址
+        内核未连接。订阅里有哪些线路只有运行中的内核知道
       </p>
-      <p v-else-if="providerLines.length === 0" class="unavailable">订阅里没有线路</p>
-      <div v-else class="chips">
+      <p v-else-if="lineOptions.length === 0" class="aside-note">订阅里没有线路</p>
+      <div v-else class="grid">
         <button
-          v-for="line in providerLines"
-          :key="line"
+          v-for="opt in lineOptions"
+          :key="opt.key"
           type="button"
-          class="chip is-todo"
+          class="card"
           disabled
-          title="选中会自动建一个只装这条线路的筛选组——这部分还没做"
+          :title="opt.reason"
         >
-          {{ line }}
+          <span class="card-name">{{ opt.label }}</span>
+          <span class="card-sub">{{ opt.sub || '—' }}</span>
+          <span :class="['card-delay', delayClass(opt.delay)]">
+            {{ opt.delay === null ? '' : `${opt.delay} ms` }}
+          </span>
         </button>
       </div>
     </section>
@@ -196,54 +276,83 @@ h4 {
   font-size: var(--t-xs);
   font-weight: 500;
   color: var(--c-text-faint);
-  margin: var(--s-4) 0 var(--s-2);
+  margin: var(--s-5) 0 var(--s-2);
 }
 
-.chips {
-  display: flex;
-  flex-wrap: wrap;
+.grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
   gap: var(--s-2);
 }
 
-.chip {
-  padding: var(--s-1) var(--s-3);
-  border: 1px solid var(--c-border-strong);
+.card {
+  display: flex;
+  flex-direction: column;
+  gap: var(--s-1);
+  min-width: 0;
+  padding: var(--s-3);
+  border: 1px solid var(--c-border);
   border-radius: var(--r-sm);
-  background: var(--c-surface);
-  font-family: var(--f-mono);
-  font-size: var(--t-sm);
+  background: var(--c-surface-sunken);
+  text-align: left;
   cursor: pointer;
-  max-width: 100%;
+}
+
+.card:hover:not(:disabled) {
+  border-color: var(--c-accent);
+}
+
+.card.is-on {
+  border-color: var(--c-accent);
+  background: var(--c-accent-soft);
+}
+
+.card:disabled {
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+
+.card-name {
+  font-size: var(--t-sm);
+  font-weight: 500;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.chip:hover:not(:disabled) {
-  border-color: var(--c-accent);
+.card.is-on .card-name {
   color: var(--c-accent-text);
 }
 
-.chip.is-on {
-  background: var(--c-accent-soft);
-  border-color: var(--c-accent);
-  color: var(--c-accent-text);
-  font-weight: 500;
-}
-
-.chip:disabled {
-  cursor: not-allowed;
+.card-sub {
+  font-size: var(--t-xs);
   color: var(--c-text-faint);
-  border-color: var(--c-border);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-.chip.is-on:disabled {
-  color: var(--c-accent-text);
-  border-color: color-mix(in srgb, var(--c-accent) 45%, transparent);
+.card-delay {
+  font-family: var(--f-mono);
+  font-size: var(--t-xs);
+  font-variant-numeric: tabular-nums;
+  min-height: 1.2em;
 }
 
-.locked,
-.unavailable {
+.d-ok {
+  color: var(--c-ok);
+}
+.d-warn {
+  color: var(--c-warn);
+}
+.d-bad {
+  color: var(--c-danger);
+}
+.d-none {
+  color: transparent;
+}
+
+.aside-note {
   display: flex;
   align-items: center;
   gap: var(--s-2);
@@ -253,7 +362,7 @@ h4 {
   line-height: 1.6;
 }
 
-.locked code {
+.aside-note code {
   color: var(--c-text-soft);
 }
 </style>
diff --git a/web/views/RouterPage.vue b/web/views/RouterPage.vue
index 98dcc6c..f9fe30a 100644
--- a/web/views/RouterPage.vue
+++ b/web/views/RouterPage.vue
@@ -4,6 +4,7 @@ import { collectInbounds, collectOutboundNames, outboundToProxyField } from '@sh
 import type { Inbound, OutboundMode } from '@shared/inbounds.ts'
 import type { ConfigObject } from '../../vendor/config-editor/index.ts'
 import { ApiError, api } from '../api'
+import type { ProxyInfo } from '../api'
 import { density } from '../prefs'
 import InboundDetail from './InboundDetail.vue'
 import IconAdd from '~icons/ri/add-line'
@@ -13,6 +14,7 @@ const props = defineProps<{
   revision: string
   kernelOnline: boolean
   providerLines: string[]
+  runtime: Record<string, ProxyInfo>
 }>()
 
 const emit = defineEmits<{ changed: [] }>()
@@ -145,6 +147,7 @@ async function pickOutbound(mode: OutboundMode) {
         :groups="outbounds.groups"
         :own-proxies="outbounds.ownProxies"
         :provider-lines="providerLines"
+        :runtime="runtime"
         :kernel-online="kernelOnline"
         :saving="saving"
         @pick="pickOutbound"
@@ -251,7 +254,6 @@ async function pickOutbound(mode: OutboundMode) {
   gap: var(--s-3);
   padding: var(--s-3) var(--s-4);
   border: none;
-  border-left: 2px solid transparent;
   background: none;
   cursor: pointer;
   text-align: left;
@@ -263,7 +265,6 @@ async function pickOutbound(mode: OutboundMode) {
 
 .line.is-on {
   background: var(--c-accent-soft);
-  border-left-color: var(--c-accent);
 }
 
 .port {