按审查结论重构：先补测试网，再搬代码

顺序是刻意的。前端一行测试都没有，直接挪代码挪坏了 bun test 不会红，所以先把纯逻辑抽到能被测试的位置并补上用例，最后才动组件。测试从 37 条增加到 77 条。抽出来的四块： - shared/outbound-chain.ts 「这个端口现在走哪条线」的链路解析，带防环，9 条测试 - web/delay-test.ts 延迟测试失败时说什么，6 个分支原本一条测试都没有 - web/runtime.ts 运行时状态的模块级单例，照 prefs.ts 已有的模式 - web/components/InboundList.vue 入站列表出站的文本原本散成四份（读一份、显示一份、写回一份、表单又抄一份），加一种出站模式要同时改四处，漏一个就是显示与写回不一致。合并成 OUTBOUND_PRESETS 一张表。给认证和透传白名单补了 20 条测试。两者都是安全边界、都是纯函数、都不需要内核在线，之前却只靠需要活内核的冒烟脚本间接覆盖。其中「形似但不是健康检查的路径」几条确认了正则没写松。另外：配置快照不再把整份文件原文下发（前端从不读，白白让响应体积翻倍）； yaml-cosmetics 的测试改走生产路径，之前它自己拼了一遍三步流程，落盘链路漏掉其中一步测试照样会绿。
2026-08-10 18:21:23 +08:00
parent 6b208847a2
commit c5ac59ecf9
19 changed files with 781 additions and 355 deletions
@@ -8,8 +8,9 @@
 */
 import { computed } from 'vue'
 import type { Inbound, OutboundMode } from '@shared/inbounds.ts'
+import { lastSwitchableGroup, resolveChain } from '@shared/outbound-chain.ts'
 import { latestDelay } from '../api'
-import type { ProxyInfo } from '../api'
+import { kernel, providerLines, runtime } from '../runtime'
 import OutboundCard from '../components/OutboundCard.vue'
 import IconOffline from '~icons/ri/cloud-off-line'
 import IconEdit from '~icons/ri/edit-line'
@@ -19,11 +20,8 @@ const props = defineProps<{
  inbound: Inbound
  groups: string[]
  ownProxies: string[]
-  providerLines: string[]
-  runtime: Record<string, ProxyInfo>
  /** 流量最终交给哪个出站。走规则的入站要查到规则表末尾的 MATCH */
  destination: string | null
-  kernelOnline: boolean
  /** 正在提交的那个出站的名字。只有它显示忙碌，其余照常能点 */
  pendingOutbound: string | null
  /** 正在测延迟的线路 */
@@ -42,39 +40,16 @@ const emit = defineEmits<{
 const locked = computed(() => props.inbound.isDefault)

 function describe(name: string): string {
-  const info = props.runtime[name]
+  const info = runtime.value[name]
  if (!info) return ''
  return info.now ? `${info.type}(${info.now})` : info.type
 }

-const delayOf = (name: string) => latestDelay(props.runtime[name])
+const delayOf = (name: string) => latestDelay(runtime.value[name])
 const isTesting = (name: string) => props.testing.includes(name)

-/**
- * 从落脚的出站一路跟着「当前选中」往下走，直到走到一条真正的线路。
- *
- * 策略组可以选中另一个策略组，所以「这个端口现在走哪条线」往往要跳好几层。
- * 只显示第一层等于没回答问题。
- */
-const chain = computed(() => {
-  const hops: string[] = []
-  let cursor = props.destination
-  while (cursor && !hops.includes(cursor)) {
-    hops.push(cursor)
-    cursor = props.runtime[cursor]?.now ?? null
-  }
-  return hops
-})
-
-/** 链条上最后一个还是策略组的环节——用户能在这里换选中。 */
-const switchable = computed(() => {
-  for (let i = chain.value.length - 1; i >= 0; i -= 1) {
-    const name = chain.value[i]!
-    const info = props.runtime[name]
-    if (info?.all?.length) return { group: name, members: info.all, now: info.now ?? '' }
-  }
-  return null
-})
+const chain = computed(() => resolveChain(runtime.value, props.destination))
+const switchable = computed(() => lastSwitchableGroup(runtime.value, chain.value))

 function isCurrentOutbound(mode: OutboundMode): boolean {
  const now = props.inbound.outbound
@@ -205,7 +180,7 @@ const NO_PROXY_FIELD = '该入站没有 proxy 字段'
      </template>

      <h4 :class="locked && 'is-dim'">订阅线路</h4>
-      <p v-if="!kernelOnline" class="hint">
+      <p v-if="!kernel.online" class="hint">
        <IconOffline />
        内核未连接，无法获取订阅线路
      </p>
@@ -1,37 +1,35 @@
 <script setup lang="ts">
+/**
+ * 路由页：一张「端口 → 出站」的表，加上选中那一路的详情。
+ *
+ * 这里只做编排——把配置数据、运行时状态和三个子组件接起来，并守住一条：
+ * 所有改配置文件的动作都从 commit() 走，失败时按停在哪一步说不同的话。
+ * 运行时动作（切换选中、测延迟）不经过它，因为它们不写文件也不需要校验。
+ */
 import { computed, onMounted, ref, watch } from 'vue'
 import {
  collectInbounds,
  collectOutboundNames,
+  outboundLabel,
  outboundToProxyField,
  resolveDestination,
 } from '@shared/inbounds.ts'
 import type { Inbound, OutboundMode } from '@shared/inbounds.ts'
 import type { ConfigObject } from '../../vendor/config-editor/index.ts'
 import { ApiError, api } from '../api'
-import type { ListenerFields, ProxyInfo } from '../api'
+import type { ListenerFields } from '../api'
+import { lineProvider, optimisticSelect, providerLines, reloadRuntime } from '../runtime'
+import { useDelayTest } from '../delay-test'
 import { density } from '../prefs'
+import InboundList from '../components/InboundList.vue'
 import InboundDetail from './InboundDetail.vue'
 import InboundForm from './InboundForm.vue'
 import IconAdd from '~icons/ri/add-line'

-const props = defineProps<{
-  data: ConfigObject
-  revision: string
-  kernelOnline: boolean
-  providerLines: string[]
-  /** 订阅线路 → 所属订阅 */
-  lineProvider: Record<string, string>
-  runtime: Record<string, ProxyInfo>
-}>()
+const props = defineProps<{ data: ConfigObject; revision: string }>()

-const emit = defineEmits<{
-  /** 配置文件变了，需要重读整份配置 */
-  saved: []
-  /** 只有内核的运行时状态变了，不用重读配置 */
-  runtimeChanged: []
-  optimisticSelect: [group: string, member: string]
-}>()
+/** 配置文件变了，需要重读整份配置。运行时的变化不走这里。 */
+const emit = defineEmits<{ saved: [] }>()

 const inbounds = computed(() => collectInbounds(props.data))
 const outbounds = computed(() => collectOutboundNames(props.data))
@@ -48,8 +46,13 @@ const formOpen = ref(false)
 const formEditing = ref<Inbound | null>(null)
 /** 正在提交的那个出站的名字。只有它显示忙碌，其余卡片照常能点 */
 const pendingOutbound = ref<string | null>(null)
-/** 正在测延迟的线路 */
-const testing = ref<string[]>([])
+
+const { testing, test } = useDelayTest(
+  () => void reloadRuntime(),
+  (message) => {
+    notice.value = message
+  },
+)

 onMounted(async () => {
  try {
@@ -71,28 +74,9 @@ watch(
 const selected = computed(() => inbounds.value.find((i) => i.id === selectedId.value) ?? null)
 const takenNames = computed(() => inbounds.value.map((i) => i.name))

-const TYPE_LABEL: Record<string, string> = {
-  mixed: 'HTTP + SOCKS5',
-  http: 'HTTP',
-  socks: 'SOCKS5',
-  redir: 'REDIR',
-  tproxy: 'TPROXY',
-}
-
-function typeLabel(inbound: Inbound): string {
-  return TYPE_LABEL[inbound.type] ?? inbound.type.toUpperCase()
-}
-
-function outboundLabel(mode: OutboundMode): { text: string; muted: boolean } {
-  if (mode.kind === 'rules') return { text: 'RULE', muted: true }
-  if (mode.kind === 'direct') return { text: 'DIRECT', muted: false }
-  if (mode.kind === 'global') return { text: 'GLOBAL', muted: false }
-  return { text: mode.name, muted: false }
-}
-
 const clone = () => JSON.parse(JSON.stringify(props.data)) as ConfigObject

-/** 所有改动都走这一条路：落盘失败时按停在哪一步说不同的话。 */
+/** 所有改配置文件的动作都从这里走。 */
 async function commit(next: ConfigObject, success: string) {
  saving.value = true
  failure.value = null
@@ -115,7 +99,7 @@ async function commit(next: ConfigObject, success: string) {
 async function pickOutbound(mode: OutboundMode) {
  const target = selected.value
  if (!target || target.listenerIndex === null || pendingOutbound.value) return
-  pendingOutbound.value = outboundLabel(mode).text
+  pendingOutbound.value = outboundLabel(mode)

  const next = clone()
  const entry = (next.listeners as ConfigObject[])[target.listenerIndex]!
@@ -125,7 +109,7 @@ async function pickOutbound(mode: OutboundMode) {
  else entry.proxy = proxy

  try {
-    await commit(next, `${target.name} 的出站已设为 ${outboundLabel(mode).text}`)
+    await commit(next, `${target.name} 的出站已设为 ${outboundLabel(mode)}`)
  } finally {
    pendingOutbound.value = null
  }
@@ -136,7 +120,6 @@ function openAdd() {
  formOpen.value = true
 }

-
 function openEdit() {
  if (!selected.value || selected.value.isDefault) return
  formEditing.value = selected.value
@@ -159,17 +142,16 @@ async function submitForm(entry: ConfigObject) {
  if (editingIndex === null) selectedId.value = `listener:${String(listeners.length - 1)}`
 }

-/** 切换策略组当前选中谁。运行时动作，不写配置文件，所以不走那条落盘链路。 */
+/** 切换策略组当前选中谁。运行时动作，不写配置文件，所以不走 commit()。 */
 async function selectMember(group: string, member: string) {
  if (saving.value) return
-  // 先本地改掉，别让点击等一个往返。失败了随后的刷新会纠正回来。
-  emit('optimisticSelect', group, member)
+  optimisticSelect(group, member)
  failure.value = null
  done.value = ''
  notice.value = ''
  try {
    await api.selectProxy(group, member)
-    emit('runtimeChanged')
+    await reloadRuntime()
  } catch (error) {
    failure.value = {
      message: error instanceof ApiError ? error.message : String(error),
@@ -178,52 +160,6 @@ async function selectMember(group: string, member: string) {
  }
 }

-/** 延迟测试用的超时，毫秒。也用在失败提示里，让「超时」这个词有具体含义。 */
-const TEST_TIMEOUT_MS = 5000
-
-/**
- * 把内核的延迟测试结果翻译成一句说明原因的话。
- *
- * 内核的语义是精确的（hub/route/proxies.go:122-145）：
- *   504 在给定超时内没有完成
- *   503 连接建立失败，或者测得的延迟为 0
- * 笼统说一句「测不通」会把这两种情况混在一起，而它们要查的地方不一样。
- */
-function describeTestFailure(name: string, error: unknown): string {
-  if (!(error instanceof ApiError)) return `${name} 延迟测试失败：${String(error)}`
-
-  const seconds = String(TEST_TIMEOUT_MS / 1000)
-  if (error.status === 504) return `${name} 延迟测试超时，${seconds} 秒内没有取到测试地址`
-
-  const detail = String(error.payload.message ?? '')
-  const generic = detail === '' || detail === 'An error occurred in the delay test'
-  if (error.status === 404) {
-    return `${name} 不在内核的出站表里，无法测试。订阅线路需要从所属订阅进去测。`
-  }
-  if (error.status === 503) {
-    return generic
-      ? `${name} 无法建立连接，线路可能已失效，或本机到该服务器的网络不通`
-      : `${name} 无法建立连接：${detail}`
-  }
-  return `${name} 延迟测试失败（HTTP ${String(error.status)}）${generic ? '' : `：${detail}`}`
-}
-
-/** 测一条线路的延迟。纯读操作，不影响任何配置，所以不禁用任何东西。 */
-async function testLine(name: string) {
-  if (testing.value.includes(name)) return
-  testing.value = [...testing.value, name]
-  try {
-    await api.testLine(name, props.lineProvider[name], TEST_TIMEOUT_MS)
-    emit('runtimeChanged')
-  } catch (error) {
-    // 测不通是关于线路的结论，不是 Patchbay 出了故障。既不该用错误框，
-    // 也不该用成功的绿色——它需要第三种中性的样子。
-    notice.value = describeTestFailure(name, error)
-  } finally {
-    testing.value = testing.value.filter((n) => n !== name)
-  }
-}
-
 async function removeSelected() {
  const target = selected.value
  if (!target || target.listenerIndex === null || saving.value) return
@@ -272,42 +208,21 @@ async function removeSelected() {
    <p v-else-if="notice" class="notice">{{ notice }}</p>

    <div class="split">
-      <ol class="rows">
-        <li v-for="inbound in inbounds" :key="inbound.id">
-          <button
-            type="button"
-            :class="['line', selectedId === inbound.id && 'is-on']"
-            @click="selectedId = inbound.id"
-          >
-            <span class="port mono">{{ inbound.port }}</span>
-            <span class="type">{{ typeLabel(inbound) }}</span>
-            <span class="name">
-              {{ inbound.name }}
-              <span v-if="inbound.isDefault" class="tag">默认</span>
-            </span>
-            <span :class="['out', outboundLabel(inbound.outbound).muted && 'is-muted']">
-              {{ outboundLabel(inbound.outbound).text }}
-            </span>
-          </button>
-        </li>
-      </ol>
+      <InboundList v-model:selected="selectedId" :inbounds="inbounds" />

      <InboundDetail
        v-if="selected"
        :inbound="selected"
        :groups="outbounds.groups"
        :own-proxies="outbounds.ownProxies"
-        :provider-lines="providerLines"
        :destination="resolveDestination(data, selected)"
-        :runtime="runtime"
-        :kernel-online="kernelOnline"
+        :pending-outbound="pendingOutbound"
+        :testing="testing"
        @pick="pickOutbound"
        @edit="openEdit"
        @remove="removeSelected"
        @select="selectMember"
-        @test="testLine"
-        :testing="testing"
-        :pending-outbound="pendingOutbound"
+        @test="(name: string) => test(name, lineProvider[name])"
      />
    </div>

@@ -414,81 +329,6 @@ async function removeSelected() {
  }
 }

-.rows {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  border: 1px solid var(--c-border);
-  border-radius: var(--r-md);
-  background: var(--c-surface);
-  overflow: hidden;
-}
-
-.rows li + li {
-  border-top: 1px solid var(--c-border);
-}
-
-.line {
-  width: 100%;
-  display: grid;
-  grid-template-columns: 4.5rem 6.5rem 1fr minmax(5rem, auto);
-  align-items: center;
-  gap: var(--s-3);
-  padding: var(--s-3) var(--s-4);
-  border: none;
-  background: none;
-  cursor: pointer;
-  text-align: left;
-}
-
-.line:hover {
-  background: var(--c-surface-sunken);
-}
-
-.line.is-on {
-  background: var(--c-accent-soft);
-}
-
-.port {
-  font-size: var(--t-lg);
-  font-variant-numeric: tabular-nums;
-}
-
-.type {
-  font-size: var(--t-xs);
-  color: var(--c-text-faint);
-}
-
-.name {
-  display: flex;
-  align-items: center;
-  gap: var(--s-2);
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.tag {
-  flex: none;
-  padding: 0 var(--s-2);
-  border: 1px solid var(--c-border-strong);
-  border-radius: 999px;
-  font-size: var(--t-xs);
-  color: var(--c-text-soft);
-  line-height: 1.6;
-}
-
-.out {
-  font-family: var(--f-mono);
-  font-size: var(--t-sm);
-  text-align: right;
-}
-
-.out.is-muted {
-  color: var(--c-text-faint);
-}
-
 .empty {
  color: var(--c-text-faint);
  font-size: var(--t-sm);