From 0eef680fbaa79fb4bfd3b96ac36cf6eded293075 Mon Sep 17 00:00:00 2001
From: Jz0ojiang <hi@im0o.top>
Date: Tue, 11 Aug 2026 18:50:13 +0800
Subject: [PATCH] =?UTF-8?q?=E9=85=8D=E7=BD=AE=E9=A1=B5=EF=BC=9A=E8=AE=A2?=
 =?UTF-8?q?=E9=98=85=E7=9A=84=E5=A2=9E=E5=88=A0=E6=94=B9=E5=92=8C=E7=AB=8B?=
 =?UTF-8?q?=E5=88=BB=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

写配置的纯逻辑在 shared/providers.ts。删除前 subscriptionReferences 同时查
直接 use 和经订阅副本（共用缓存文件 path）的间接引用，有被引用的就拦下并列出
策略组。订阅不允许改名：名字被 use: 和副本引用，同步所有引用不如删了重建。

页面还没挂进 App.vue 的导航，由集成者统一加。
---
 shared/providers.test.ts         | 161 ++++++++++++++
 shared/providers.ts              | 146 +++++++++++++
 web/api.ts                       |  21 +-
 web/components/ProviderList.vue  | 111 ++++++++++
 web/views/ConfigPage.vue         | 355 +++++++++++++++++++++++++++++++
 web/views/SubscriptionDetail.vue | 250 ++++++++++++++++++++++
 web/views/SubscriptionForm.vue   | 241 +++++++++++++++++++++
 7 files changed, 1281 insertions(+), 4 deletions(-)
 create mode 100644 shared/providers.test.ts
 create mode 100644 shared/providers.ts
 create mode 100644 web/components/ProviderList.vue
 create mode 100644 web/views/ConfigPage.vue
 create mode 100644 web/views/SubscriptionDetail.vue
 create mode 100644 web/views/SubscriptionForm.vue

diff --git a/shared/providers.test.ts b/shared/providers.test.ts
new file mode 100644
index 0000000..ea36151
--- /dev/null
+++ b/shared/providers.test.ts
@@ -0,0 +1,161 @@
+import { describe, expect, it } from 'bun:test'
+import {
+  DEFAULT_INTERVAL,
+  addSubscription,
+  listSubscriptions,
+  providerNames,
+  removeSubscription,
+  subscriptionReferences,
+  updateSubscription,
+} from './providers.ts'
+import { applySetup, chainProviderName } from './inbound-groups.ts'
+import type { OutboundSetup } from './inbound-groups.ts'
+import type { ConfigObject } from '../vendor/config-editor/index.ts'
+
+const URL = 'http://127.0.0.1:3001/token/download/V2House'
+
+/** 一份带一个订阅的配置，形状仿照目标机器上那份。 */
+function base(): ConfigObject {
+  return {
+    'proxy-providers': {
+      subs: {
+        type: 'http',
+        url: URL,
+        path: './providers/subs.yaml',
+        interval: 86400,
+        'health-check': { enable: true, url: 'https://www.gstatic.com/generate_204', interval: 300 },
+      },
+    },
+    'proxy-groups': [{ name: 'PROXY', type: 'select', proxies: ['DIRECT'], use: ['subs'] }],
+  }
+}
+
+const chainedSetup: OutboundSetup = {
+  proxy: { sources: ['subs'], filter: null },
+  chain: { sources: ['subs'], filter: null },
+}
+
+describe('读出订阅列表', () => {
+  it('读出地址、间隔和健康检查', () => {
+    expect(listSubscriptions(base())).toEqual([
+      {
+        name: 'subs',
+        url: URL,
+        interval: 86400,
+        healthCheck: { url: 'https://www.gstatic.com/generate_204', interval: 300 },
+      },
+    ])
+  })
+
+  it('健康检查没写或没开都算未开启', () => {
+    const data = base()
+    const subs = (data['proxy-providers'] as ConfigObject).subs as ConfigObject
+    delete subs['health-check']
+    expect(listSubscriptions(data)[0]?.healthCheck).toBeNull()
+    subs['health-check'] = { enable: false, url: 'https://example.com', interval: 60 }
+    expect(listSubscriptions(data)[0]?.healthCheck).toBeNull()
+  })
+
+  it('不含 Patchbay 生成的订阅副本', () => {
+    const data = applySetup(
+      { ...base(), listeners: [{ name: 'test1', type: 'mixed', port: 7778 }] },
+      'test1',
+      chainedSetup,
+    )
+    expect(listSubscriptions(data).map((s) => s.name)).toEqual(['subs'])
+    // 副本还在，只是不列出来
+    expect(providerNames(data)).toContain(chainProviderName('test1', 'subs'))
+  })
+
+  it('没有 proxy-providers 段时是空列表', () => {
+    expect(listSubscriptions({ mode: 'rule' })).toEqual([])
+  })
+})
+
+describe('新增订阅', () => {
+  it('自动生成缓存路径和默认间隔', () => {
+    const next = addSubscription({}, 'subs2', URL)
+    expect(next['proxy-providers']).toEqual({
+      subs2: {
+        type: 'http',
+        url: URL,
+        path: './providers/subs2.yaml',
+        interval: DEFAULT_INTERVAL,
+      },
+    })
+  })
+
+  it('不动已有的订阅', () => {
+    const data = base()
+    const next = addSubscription(data, 'subs2', URL)
+    expect((next['proxy-providers'] as ConfigObject).subs).toEqual(
+      (data['proxy-providers'] as ConfigObject).subs,
+    )
+  })
+})
+
+describe('编辑订阅', () => {
+  it('只改地址和间隔，其余字段原样保留', () => {
+    const next = updateSubscription(base(), 'subs', 'http://example.com/new', 3600)
+    const entry = (next['proxy-providers'] as ConfigObject).subs as ConfigObject
+    expect(entry.url).toBe('http://example.com/new')
+    expect(entry.interval).toBe(3600)
+    expect(entry.path).toBe('./providers/subs.yaml')
+    expect(entry['health-check']).toEqual({
+      enable: true,
+      url: 'https://www.gstatic.com/generate_204',
+      interval: 300,
+    })
+  })
+
+  it('订阅不存在时不做改动', () => {
+    const data = base()
+    expect(updateSubscription(data, 'ghost', URL, 1)).toBe(data)
+  })
+})
+
+describe('删除订阅', () => {
+  it('从映射里去掉', () => {
+    const data = addSubscription(base(), 'subs2', URL)
+    const next = removeSubscription(data, 'subs2')
+    expect(providerNames(next)).toEqual(['subs'])
+  })
+
+  it('删到最后一个时整个键去掉，不留空映射', () => {
+    const next = removeSubscription(base(), 'subs')
+    expect('proxy-providers' in next).toBe(false)
+  })
+
+  it('订阅不存在时不做改动', () => {
+    const data = base()
+    expect(removeSubscription(data, 'ghost')).toBe(data)
+  })
+})
+
+describe('删除前的引用检查', () => {
+  it('找出 use 它的策略组', () => {
+    expect(subscriptionReferences(base(), 'subs')).toEqual(['PROXY'])
+  })
+
+  it('没人在用时是空列表', () => {
+    const data = base()
+    ;(data['proxy-groups'] as ConfigObject[])[0] = { name: 'PROXY', type: 'select', proxies: ['DIRECT'] }
+    expect(subscriptionReferences(data, 'subs')).toEqual([])
+  })
+
+  it('链式代理的专属组 use 的是副本，也算引用原订阅', () => {
+    const data = applySetup(
+      { ...base(), listeners: [{ name: 'test1', type: 'mixed', port: 7778 }] },
+      'test1',
+      chainedSetup,
+    )
+    const refs = subscriptionReferences(data, 'subs')
+    // 入口组直接 use 原订阅，三个专属组 use 副本，两边都要认出来
+    expect(refs).toContain('patchbay:test1 链式')
+    expect(refs).toContain('patchbay:test1')
+  })
+
+  it('订阅不存在时是空列表', () => {
+    expect(subscriptionReferences(base(), 'ghost')).toEqual([])
+  })
+})
diff --git a/shared/providers.ts b/shared/providers.ts
new file mode 100644
index 0000000..e09e115
--- /dev/null
+++ b/shared/providers.ts
@@ -0,0 +1,146 @@
+/**
+ * 订阅的读写。
+ *
+ * 配置文件里的 `proxy-providers` 段：一个名字对一份声明，内核定时从地址拉回一批线路。
+ * 这段里除了用户自己加的订阅，还有 Patchbay 为链式代理生成的副本（带 `patchbay:` 前缀）。
+ * 这个模块只操作用户订阅；副本的增删由 `inbound-groups.ts` 的 applySetup/pruneGenerated 负责，
+ * 写配置的链路（页面里的 commit）每次都会跑它们，所以这里改完不用补同步。
+ *
+ * 订阅不提供改名：名字被策略组的 `use:` 和生成的副本引用，改名等于改一个被引用的
+ * 标识符，要同步更新所有引用，漏一处就是断引用。删了重建更简单。
+ */
+import type { ConfigObject } from '../vendor/config-editor/index.ts'
+import { isGenerated, providerCachePath } from './inbound-groups.ts'
+
+/** 新增订阅时的默认更新间隔，秒。一天一次。 */
+export const DEFAULT_INTERVAL = 86400
+
+/** 一个用户订阅在界面上的样子。只读配置文件的 `proxy-providers` 段（决策记录 0004）。 */
+export interface Subscription {
+  name: string
+  url: string
+  /** 更新间隔，秒。null 表示配置里没写 */
+  interval: number | null
+  /** 健康检查。没写或 enable 不是 true 都算未开启 */
+  healthCheck: { url: string | null; interval: number | null } | null
+}
+
+function isPlainObject(value: unknown): value is ConfigObject {
+  return typeof value === 'object' && value !== null && !Array.isArray(value)
+}
+
+function providersOf(data: ConfigObject): ConfigObject {
+  return isPlainObject(data['proxy-providers']) ? data['proxy-providers'] : {}
+}
+
+function groupsOf(data: ConfigObject): ConfigObject[] {
+  return (Array.isArray(data['proxy-groups']) ? data['proxy-groups'] : []).filter(isPlainObject)
+}
+
+function stringList(value: unknown): string[] {
+  return Array.isArray(value) ? value.filter((item): item is string => typeof item === 'string') : []
+}
+
+/** 所有用户订阅，按配置里的顺序。不含生成的副本。 */
+export function listSubscriptions(data: ConfigObject): Subscription[] {
+  const result: Subscription[] = []
+  for (const [name, entry] of Object.entries(providersOf(data))) {
+    if (isGenerated(name) || !isPlainObject(entry)) continue
+    const hc = isPlainObject(entry['health-check']) ? entry['health-check'] : null
+    result.push({
+      name,
+      url: typeof entry.url === 'string' ? entry.url : '',
+      interval: typeof entry.interval === 'number' ? entry.interval : null,
+      healthCheck:
+        hc !== null && hc.enable === true
+          ? {
+              url: typeof hc.url === 'string' ? hc.url : null,
+              interval: typeof hc.interval === 'number' ? hc.interval : null,
+            }
+          : null,
+    })
+  }
+  return result
+}
+
+/**
+ * `proxy-providers` 里的所有名字，含生成的副本。
+ * 新增订阅挡重名要用全部键：它是映射，和用户看不见的副本撞名也会被静默丢掉。
+ */
+export function providerNames(data: ConfigObject): string[] {
+  return Object.keys(providersOf(data))
+}
+
+/**
+ * 新增一个订阅。
+ *
+ * `path` 自动给出确定的缓存文件路径，不让用户填：不写的话内核按 url 哈希自己生成一个，
+ * 那个路径 Patchbay 算不出来，链式代理的副本就没法靠「读同一个缓存文件」认来源
+ * （见 inbound-groups.ts 的 applySetup）。
+ */
+export function addSubscription(data: ConfigObject, name: string, url: string): ConfigObject {
+  const next = { ...data }
+  next['proxy-providers'] = {
+    ...providersOf(data),
+    [name]: { type: 'http', url, path: providerCachePath(name), interval: DEFAULT_INTERVAL },
+  }
+  return next
+}
+
+/** 改订阅的地址和更新间隔。其余字段（缓存路径、健康检查、筛选）原样保留。 */
+export function updateSubscription(
+  data: ConfigObject,
+  name: string,
+  url: string,
+  interval: number,
+): ConfigObject {
+  const entry = providersOf(data)[name]
+  if (!isPlainObject(entry)) return data
+  const next = { ...data }
+  next['proxy-providers'] = {
+    ...providersOf(data),
+    [name]: { ...entry, url, interval },
+  }
+  return next
+}
+
+/** 删除一个订阅。删到最后一个时把整个键去掉，不在文件里留空映射。 */
+export function removeSubscription(data: ConfigObject, name: string): ConfigObject {
+  const providers = { ...providersOf(data) }
+  if (!(name in providers)) return data
+  delete providers[name]
+  const next = { ...data }
+  if (Object.keys(providers).length === 0) delete next['proxy-providers']
+  else next['proxy-providers'] = providers
+  return next
+}
+
+/**
+ * 哪些策略组在引用这个订阅。删除前必须先查：被引用的订阅删了，那些组的 `use:` 就空了，
+ * 而空组会让指向它的入站无路可走。
+ *
+ * 引用有两种，第二种容易漏：
+ *   直接  组的 `use:` 里有这个订阅。链式代理的入口组就是这么引原订阅的
+ *   间接  开了链式代理的入站，它的专属组 `use:` 的是订阅副本；副本靠和原订阅
+ *         共用缓存文件（`path` 相同）认来源，名字不可靠解析（见 inbound-groups.ts）
+ */
+export function subscriptionReferences(data: ConfigObject, name: string): string[] {
+  const target = providersOf(data)[name]
+  if (!isPlainObject(target)) return []
+
+  const copies = new Set<string>()
+  if (typeof target.path === 'string') {
+    for (const [copyName, entry] of Object.entries(providersOf(data))) {
+      if (isGenerated(copyName) && isPlainObject(entry) && entry.path === target.path) {
+        copies.add(copyName)
+      }
+    }
+  }
+
+  return groupsOf(data)
+    .filter((group) => {
+      const use = stringList(group.use)
+      return use.includes(name) || use.some((u) => copies.has(u))
+    })
+    .map((group) => String(group.name))
+}
diff --git a/web/api.ts b/web/api.ts
index 7714233..059ec8d 100644
--- a/web/api.ts
+++ b/web/api.ts
@@ -99,6 +99,13 @@ export function latestDelay(info: ProxyInfo | undefined): number | null {
   return last === undefined || last === 0 ? null : last
 }
 
+/** 一个订阅的运行时状态。updatedAt 是上次拉取成功的时刻，没拉过是 Go 的零值时间。 */
+export interface ProviderInfo {
+  vehicleType: string
+  updatedAt?: string
+  proxies: ProxyInfo[]
+}
+
 export interface FieldSpec {
   key: string
   type: 'string' | 'number' | 'boolean' | 'string[]' | 'number[]' | 'object' | 'object[]'
@@ -158,6 +165,15 @@ export const api = {
     return request<{ delay: number }>('GET', path)
   },
 
+  /**
+   * 让内核立刻重新拉取某个订阅。
+   *
+   * 运行时动作，不写配置文件，所以不走 applyConfig 那条校验重载链路。成功时内核回
+   * 204 空响应，拉取失败回 503 带错误消息（内核源码 hub/route/provider.go:52-60）。
+   */
+  refreshProvider: (name: string) =>
+    request<unknown>('PUT', `/api/kernel/providers/proxies/${encodeURIComponent(name)}`),
+
   /**
    * 订阅及其线路。配置文件里只有订阅地址，有哪些线路只有运行中的内核知道。
    *
@@ -165,8 +181,5 @@ export const api = {
    * 全局名字表里，这是拿到它们类型和延迟的唯一途径。
    */
   providers: () =>
-    request<{ providers: Record<string, { vehicleType: string; proxies: ProxyInfo[] }> }>(
-      'GET',
-      '/api/kernel/providers/proxies',
-    ),
+    request<{ providers: Record<string, ProviderInfo> }>('GET', '/api/kernel/providers/proxies'),
 }
diff --git a/web/components/ProviderList.vue b/web/components/ProviderList.vue
new file mode 100644
index 0000000..6215c91
--- /dev/null
+++ b/web/components/ProviderList.vue
@@ -0,0 +1,111 @@
+<script setup lang="ts">
+/**
+ * 订阅列表。每行一个订阅：名字、当前线路数、上次更新时间、健康检查开没开。
+ *
+ * 只管显示和选中，不碰任何数据。
+ */
+
+defineProps<{
+  /** 一行要显示的东西，由页面按配置和运行时数据拼好 */
+  rows: Array<{
+    name: string
+    /** 当前有多少条线路。null 表示内核没给数据（没连接，或这个订阅还没拉取过） */
+    lines: number | null
+    /** 上次拉取成功的时刻。null 表示不知道或从没拉取过 */
+    updated: Date | null
+    /** 健康检查开没开 */
+    healthCheck: boolean
+  }>
+}>()
+const selected = defineModel<string | null>('selected', { required: true })
+
+const pad = (n: number) => String(n).padStart(2, '0')
+
+function formatUpdated(at: Date): string {
+  return `${pad(at.getMonth() + 1)}-${pad(at.getDate())} ${pad(at.getHours())}:${pad(at.getMinutes())}`
+}
+</script>
+
+<template>
+  <ol class="rows">
+    <li v-for="row in rows" :key="row.name">
+      <button
+        type="button"
+        :class="['line', selected === row.name && 'is-on']"
+        @click="selected = row.name"
+      >
+        <span class="name">{{ row.name }}</span>
+        <span class="lines mono">
+          <template v-if="row.lines !== null">{{ row.lines }} 条</template>
+          <template v-else>—</template>
+        </span>
+        <span class="updated mono">{{ row.updated ? formatUpdated(row.updated) : '—' }}</span>
+        <span :class="['hc', !row.healthCheck && 'is-off']">
+          {{ row.healthCheck ? '健康检查' : '—' }}
+        </span>
+      </button>
+    </li>
+  </ol>
+</template>
+
+<style scoped>
+.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: minmax(0, 1fr) 4rem 6.5rem 4.5rem;
+  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);
+}
+
+.name {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.lines,
+.updated {
+  text-align: right;
+  font-size: var(--t-sm);
+  font-variant-numeric: tabular-nums;
+  color: var(--c-text-soft);
+}
+
+.hc {
+  text-align: right;
+  font-size: var(--t-xs);
+  color: var(--c-text-soft);
+}
+
+.hc.is-off {
+  color: var(--c-text-faint);
+}
+</style>
diff --git a/web/views/ConfigPage.vue b/web/views/ConfigPage.vue
new file mode 100644
index 0000000..825cf49
--- /dev/null
+++ b/web/views/ConfigPage.vue
@@ -0,0 +1,355 @@
+<script setup lang="ts">
+/**
+ * 配置页：订阅的导入和管理。左列表右详情，同路由页的主从布局。
+ *
+ * 编排守的分工和路由页一样：增删改订阅都走 commit()，带校验和重载，失败按
+ * message/hint 说；「立刻更新」是让内核重新拉取的运行时动作，不写配置文件，
+ * 不走 commit()，也没有保存那种等待感。
+ */
+import { computed, onMounted, ref, watch } from 'vue'
+import { collectInbounds } from '@shared/inbounds.ts'
+import { pruneGenerated, syncGenerated } from '@shared/inbound-groups.ts'
+import {
+  addSubscription,
+  listSubscriptions,
+  providerNames,
+  removeSubscription,
+  subscriptionReferences,
+  updateSubscription,
+} from '@shared/providers.ts'
+import type { Subscription } from '@shared/providers.ts'
+import type { ConfigObject } from '../../vendor/config-editor/index.ts'
+import { ApiError, api } from '../api'
+import type { ProviderInfo } from '../api'
+import { kernel, providerLines, reloadRuntime } from '../runtime'
+import ConfirmDialog from '../components/ConfirmDialog.vue'
+import ProviderList from '../components/ProviderList.vue'
+import SubscriptionDetail from './SubscriptionDetail.vue'
+import SubscriptionForm from './SubscriptionForm.vue'
+import IconAdd from '~icons/ri/add-line'
+
+const props = defineProps<{ data: ConfigObject; revision: string }>()
+
+/** 配置文件变了，需要重读整份配置。运行时的变化不走这里。 */
+const emit = defineEmits<{ saved: [] }>()
+
+const subscriptions = computed(() => listSubscriptions(props.data))
+
+const selectedName = ref<string | null>(null)
+const saving = ref(false)
+const failure = ref<{ message: string; hint: string } | null>(null)
+/** 成功的结果，绿色 */
+const done = ref('')
+const formOpen = ref(false)
+const formEditing = ref<Subscription | null>(null)
+/** 待确认删除的那个订阅。非 null 时确认对话框打开着 */
+const removing = ref<Subscription | null>(null)
+/** 正在等内核重新拉取的订阅名 */
+const refreshing = ref<string | null>(null)
+
+/**
+ * 每个订阅的运行时数据：当前线路、上次更新时间。
+ *
+ * 配置文件里只有地址和间隔，这些只有运行中的内核知道。runtime.ts 那份合并视图
+ * 没有 updatedAt，而它归路由页共用、不归这个页面改，所以这里自己留一份。
+ * 内核没连接时就是空的，页面照常显示配置里有的东西（决策记录 0004）。
+ */
+const providerInfo = ref<Record<string, ProviderInfo>>({})
+
+async function reloadProviders() {
+  if (!kernel.value.online) {
+    providerInfo.value = {}
+    return
+  }
+  providerInfo.value = await api
+    .providers()
+    .then((result) => result.providers)
+    .catch(() => ({}))
+}
+
+onMounted(() => void reloadProviders())
+// 保存成功后父组件重读配置，data 换了就顺带把运行时数据也换新的
+watch(() => props.data, () => void reloadProviders())
+
+// 默认选中第一行。空面板没有信息量，不如直接展示一个订阅。
+watch(
+  subscriptions,
+  (list) => {
+    if (!list.some((s) => s.name === selectedName.value)) selectedName.value = list[0]?.name ?? null
+  },
+  { immediate: true },
+)
+
+const selected = computed(
+  () => subscriptions.value.find((s) => s.name === selectedName.value) ?? null,
+)
+
+/** 新增表单挡重名要用全部键：和用户看不见的订阅副本撞名也会被静默丢掉 */
+const takenNames = computed(() => providerNames(props.data))
+
+/** Go 零值时间（0001-01-01）表示从没拉取过，按没有处理 */
+function parseUpdated(at: string | undefined): Date | null {
+  if (!at) return null
+  const d = new Date(at)
+  return Number.isNaN(d.getTime()) || d.getFullYear() < 2000 ? null : d
+}
+
+const rows = computed(() =>
+  subscriptions.value.map((s) => {
+    const info = providerInfo.value[s.name]
+    return {
+      name: s.name,
+      lines: info ? info.proxies.length : null,
+      updated: parseUpdated(info?.updatedAt),
+      healthCheck: s.healthCheck !== null,
+    }
+  }),
+)
+
+const clone = () => JSON.parse(JSON.stringify(props.data)) as ConfigObject
+
+/** 所有改配置文件的动作都从这里走。 */
+async function commit(raw: ConfigObject, success: string) {
+  // 先把生成的东西按当前规则重建一遍，再清掉没人再引用的。订阅副本的来源被改地址时
+  // 靠这一步保持和原订阅一致，删订阅前已由 subscriptionReferences 挡住有引用的情形。
+  const next = pruneGenerated(syncGenerated(raw, collectInbounds(raw)))
+  saving.value = true
+  failure.value = null
+  done.value = ''
+  try {
+    const result = await api.applyConfig(next, props.revision)
+    // 没重载有两种情况（内容没有变化、内核不在线只写了文件），都要如实说，不能只报成功
+    done.value = result.reloaded ? success : `${success}（${result.reloadMessage}）`
+    emit('saved')
+  } catch (error) {
+    failure.value =
+      error instanceof ApiError
+        ? { message: error.message, hint: error.hint }
+        : { message: String(error), hint: '' }
+  } finally {
+    saving.value = false
+  }
+}
+
+function openAdd() {
+  formEditing.value = null
+  formOpen.value = true
+}
+
+function openEdit() {
+  if (!selected.value || saving.value) return
+  formEditing.value = selected.value
+  formOpen.value = true
+}
+
+async function submitForm(draft: { name: string; url: string; interval: number }) {
+  const editing = formEditing.value
+  const next = editing
+    ? updateSubscription(clone(), editing.name, draft.url, draft.interval)
+    : addSubscription(clone(), draft.name, draft.url)
+  await commit(next, editing ? '已保存' : `已新增 ${draft.name}`)
+  // 失败时不能关对话框——关了再打开就是空表单，填的名称、地址、间隔全没了
+  if (failure.value) return
+  formOpen.value = false
+  if (!editing) selectedName.value = draft.name
+}
+
+function askRemove() {
+  const target = selected.value
+  if (!target || saving.value) return
+  // 被引用的订阅不能删：那些组的 use: 一空，指向它们的入站就无路可走
+  const refs = subscriptionReferences(props.data, target.name)
+  if (refs.length > 0) {
+    failure.value = { message: `无法删除 ${target.name}：${refs.join('、')} 在引用它`, hint: '' }
+    return
+  }
+  removing.value = target
+}
+
+async function removeConfirmed() {
+  const target = removing.value
+  removing.value = null
+  if (!target || saving.value) return
+  selectedName.value = null
+  await commit(removeSubscription(clone(), target.name), `已删除 ${target.name}`)
+}
+
+/** 让内核立刻重新拉取。运行时动作，不写配置文件，所以不走 commit()。 */
+async function refresh() {
+  const target = selected.value
+  if (!target || refreshing.value !== null) return
+  refreshing.value = target.name
+  failure.value = null
+  done.value = ''
+  try {
+    await api.refreshProvider(target.name)
+    await Promise.all([reloadRuntime(), reloadProviders()])
+    done.value = `已更新 ${target.name}`
+  } catch (error) {
+    failure.value = {
+      message: error instanceof ApiError ? error.message : String(error),
+      hint: '该操作仅修改内核运行状态，配置文件未被修改。',
+    }
+  } finally {
+    refreshing.value = null
+  }
+}
+</script>
+
+<template>
+  <div class="page">
+    <header class="head">
+      <div class="sums">
+        <div class="sum">
+          <span class="sum-n">{{ subscriptions.length }}</span>
+          <span class="sum-k">订阅</span>
+        </div>
+        <div class="sum">
+          <span class="sum-n">{{ providerLines.length }}</span>
+          <span class="sum-k">订阅线路</span>
+        </div>
+      </div>
+
+      <button class="add" type="button" :disabled="saving" @click="openAdd">
+        <IconAdd />
+        <span>新增</span>
+      </button>
+    </header>
+
+    <div v-if="failure" class="failure">
+      <strong>{{ failure.message }}</strong>
+      <span v-if="failure.hint">{{ failure.hint }}</span>
+    </div>
+    <p v-else-if="done" class="done">{{ done }}</p>
+
+    <div class="split">
+      <ProviderList v-model:selected="selectedName" :rows="rows" />
+
+      <SubscriptionDetail
+        v-if="selected"
+        :subscription="selected"
+        :info="providerInfo[selected.name]"
+        :online="kernel.online"
+        :refreshing="refreshing === selected.name"
+        :saving="saving"
+        @edit="openEdit"
+        @remove="askRemove"
+        @refresh="refresh"
+      />
+    </div>
+
+    <p v-if="subscriptions.length === 0" class="empty">没有订阅。</p>
+
+    <SubscriptionForm
+      :open="formOpen"
+      :editing="formEditing"
+      :taken-names="takenNames"
+      :saving="saving"
+      @close="formOpen = false"
+      @submit="submitForm"
+    />
+
+    <ConfirmDialog
+      :open="removing !== null"
+      :message="removing ? `删除订阅「${removing.name}」？` : ''"
+      action="删除"
+      @close="removing = null"
+      @confirm="removeConfirmed"
+    />
+  </div>
+</template>
+
+<style scoped>
+.head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--s-4);
+  margin-bottom: var(--s-5);
+}
+
+.sums {
+  display: flex;
+  gap: var(--s-6);
+}
+
+.sum {
+  display: flex;
+  align-items: baseline;
+  gap: var(--s-2);
+}
+
+.sum-n {
+  font-size: var(--t-2xl);
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  letter-spacing: -0.02em;
+}
+
+.sum-k {
+  color: var(--c-text-soft);
+  font-size: var(--t-sm);
+}
+
+.add {
+  display: flex;
+  align-items: center;
+  gap: var(--s-2);
+  padding: var(--s-2) var(--s-3);
+  border: 1px solid var(--c-border-strong);
+  border-radius: var(--r-sm);
+  background: var(--c-surface);
+  cursor: pointer;
+}
+.add:hover:not(:disabled) {
+  border-color: var(--c-accent);
+  color: var(--c-accent-text);
+}
+.add:disabled {
+  color: var(--c-text-faint);
+  cursor: not-allowed;
+}
+
+.failure {
+  display: flex;
+  flex-direction: column;
+  gap: var(--s-1);
+  border: 1px solid color-mix(in srgb, var(--c-danger) 35%, var(--c-border));
+  border-radius: var(--r-md);
+  background: var(--c-danger-soft);
+  padding: var(--s-3) var(--s-4);
+  margin-bottom: var(--s-4);
+  font-size: var(--t-sm);
+}
+
+.done {
+  color: var(--c-ok);
+  font-size: var(--t-sm);
+  margin-bottom: var(--s-4);
+}
+
+/* 左列表右详情。窄时改成上下，详情不再吸顶 */
+.split {
+  display: grid;
+  grid-template-columns: minmax(0, 1.35fr) minmax(300px, 1fr);
+  gap: var(--s-5);
+  align-items: start;
+}
+
+/* 按内容区宽度切换而不是按视口：侧栏能收拢，同一个视口宽度下内容区可宽可窄 */
+.page {
+  container-type: inline-size;
+}
+
+@container (max-width: 900px) {
+  .split {
+    grid-template-columns: 1fr;
+  }
+}
+
+.empty {
+  color: var(--c-text-faint);
+  font-size: var(--t-sm);
+  margin-top: var(--s-4);
+}
+</style>
diff --git a/web/views/SubscriptionDetail.vue b/web/views/SubscriptionDetail.vue
new file mode 100644
index 0000000..d0ffc28
--- /dev/null
+++ b/web/views/SubscriptionDetail.vue
@@ -0,0 +1,250 @@
+<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'
+
+const props = defineProps<{
+  subscription: Subscription
+  /** 运行时数据：当前有哪些线路、上次更新时间。内核没连接时是 undefined */
+  info: ProviderInfo | undefined
+  online: boolean
+  /** 正在等内核重新拉取 */
+  refreshing: boolean
+  /** 配置正在保存 */
+  saving: boolean
+}>()
+
+const emit = defineEmits<{
+  edit: []
+  remove: []
+  /** 让内核立刻重新拉取。运行时动作，不写配置文件 */
+  refresh: []
+}>()
+
+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="!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">
+        <dt>地址</dt>
+        <dd class="mono url">{{ subscription.url }}</dd>
+        <dt>更新间隔</dt>
+        <dd class="mono">
+          {{ subscription.interval !== null ? `${subscription.interval} 秒` : '未设置' }}
+        </dd>
+        <dt>健康检查</dt>
+        <dd class="mono">
+          <template v-if="subscription.healthCheck">
+            {{ subscription.healthCheck.url
+            }}{{ subscription.healthCheck.interval !== null ? `，每 ${subscription.healthCheck.interval} 秒` : '' }}
+          </template>
+          <template v-else>未开启</template>
+        </dd>
+      </dl>
+    </header>
+
+    <section class="block">
+      <h3>线路</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-3);
+  border: 1px solid var(--c-border-strong);
+  border-radius: var(--r-sm);
+  background: var(--c-surface);
+  font-size: var(--t-sm);
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.acts button:hover:not(:disabled) {
+  border-color: var(--c-accent);
+  color: var(--c-accent-text);
+}
+
+.acts button.danger:hover:not(:disabled) {
+  border-color: var(--c-danger);
+  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 {
+  font-size: var(--t-sm);
+  font-weight: 600;
+  color: var(--c-text);
+  letter-spacing: 0.02em;
+  margin-bottom: var(--s-3);
+}
+
+.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;
+}
+
+.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>
diff --git a/web/views/SubscriptionForm.vue b/web/views/SubscriptionForm.vue
new file mode 100644
index 0000000..530f5e9
--- /dev/null
+++ b/web/views/SubscriptionForm.vue
@@ -0,0 +1,241 @@
+<script setup lang="ts">
+/**
+ * 新增或编辑一个订阅。
+ *
+ * 原生 <dialog>，同 InboundForm。缓存路径不写进表单：它由名字自动生成，
+ * 让用户填只会填出和链式代理对不上的路径。订阅不能改名——名字被策略组的 `use:`
+ * 和生成的副本引用，改名要同步所有引用，所以编辑时名字只是静态展示，想换名就删了重建。
+ */
+import { computed, ref, watch } from 'vue'
+import { DEFAULT_INTERVAL } from '@shared/providers.ts'
+import type { Subscription } from '@shared/providers.ts'
+import { GENERATED_PREFIX } from '@shared/inbound-groups.ts'
+import IconClose from '~icons/ri/close-line'
+
+const props = defineProps<{
+  open: boolean
+  /** 传了就是编辑，没传就是新增 */
+  editing: Subscription | null
+  /** proxy-providers 里的所有名字（含生成的副本），用来挡重名 */
+  takenNames: string[]
+  saving: boolean
+}>()
+
+const emit = defineEmits<{
+  close: []
+  /** 编辑时 name 是被编辑那个订阅的原名 */
+  submit: [draft: { name: string; url: string; interval: number }]
+}>()
+
+const dialog = ref<HTMLDialogElement | null>(null)
+const name = ref('')
+const url = ref('')
+const interval = ref(String(DEFAULT_INTERVAL))
+
+watch(
+  () => props.open,
+  (open) => {
+    if (open) {
+      name.value = props.editing?.name ?? ''
+      url.value = props.editing?.url ?? ''
+      interval.value = String(props.editing?.interval ?? DEFAULT_INTERVAL)
+      dialog.value?.showModal()
+    } else {
+      dialog.value?.close()
+    }
+  },
+)
+
+const nameError = computed(() => {
+  const n = name.value.trim()
+  if (n === '') return ''
+  // 带这个前缀的会被当成 Patchbay 生成物：列表里不显示，pruneGenerated 还会把它清掉
+  if (n.startsWith(GENERATED_PREFIX)) return `名称不能以 ${GENERATED_PREFIX} 开头`
+  if (props.takenNames.includes(n)) return '名称已存在'
+  return ''
+})
+
+const intervalInvalid = computed(() => {
+  const raw = interval.value.trim()
+  return raw === '' || !/^\d+$/.test(raw) || Number(raw) < 1
+})
+
+const canSubmit = computed(
+  () =>
+    url.value.trim() !== '' &&
+    !intervalInvalid.value &&
+    (props.editing !== null || (name.value.trim() !== '' && nameError.value === '')) &&
+    !props.saving,
+)
+
+function submit() {
+  if (!canSubmit.value) return
+  emit('submit', {
+    name: props.editing?.name ?? name.value.trim(),
+    url: url.value.trim(),
+    interval: Number(interval.value.trim()),
+  })
+}
+</script>
+
+<template>
+  <dialog ref="dialog" class="dlg" @close="emit('close')" @cancel.prevent="emit('close')">
+    <form method="dialog" @submit.prevent="submit">
+      <header class="dlg-head">
+        <h2>{{ editing ? `编辑订阅 ${editing.name}` : '新增订阅' }}</h2>
+        <button type="button" class="x" @click="emit('close')"><IconClose /></button>
+      </header>
+
+      <div class="body">
+        <label v-if="!editing" class="row">
+          <span class="k">名称</span>
+          <span class="v">
+            <input v-model="name" type="text" placeholder="subs" autocomplete="off" />
+            <span v-if="nameError" class="bad">{{ nameError }}</span>
+          </span>
+        </label>
+
+        <label class="row">
+          <span class="k">地址</span>
+          <span class="v">
+            <input v-model="url" class="mono" type="text" placeholder="https://…" autocomplete="off" />
+          </span>
+        </label>
+
+        <label class="row">
+          <span class="k">更新间隔</span>
+          <span class="v">
+            <input v-model="interval" class="mono" type="text" inputmode="numeric" autocomplete="off" />
+            <span v-if="intervalInvalid" class="bad">正整数，单位秒</span>
+          </span>
+        </label>
+      </div>
+
+      <footer class="dlg-foot">
+        <button type="button" class="btn" @click="emit('close')">取消</button>
+        <button type="submit" class="btn btn-go" :disabled="!canSubmit">
+          {{ saving ? '保存中' : '保存' }}
+        </button>
+      </footer>
+    </form>
+  </dialog>
+</template>
+
+<style scoped>
+.dlg {
+  width: min(520px, calc(100vw - 2 * var(--s-5)));
+  padding: 0;
+  border: 1px solid var(--c-border-strong);
+  border-radius: var(--r-lg);
+  background: var(--c-surface);
+  color: var(--c-text);
+}
+
+.dlg::backdrop {
+  background: rgb(0 0 0 / 0.45);
+}
+
+.dlg-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--s-4) var(--s-5);
+  border-bottom: 1px solid var(--c-border);
+}
+
+.dlg-head h2 {
+  font-size: var(--t-lg);
+  font-weight: 600;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.x {
+  flex: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border: 1px solid transparent;
+  border-radius: var(--r-sm);
+  background: none;
+  color: var(--c-text-faint);
+  cursor: pointer;
+}
+.x:hover {
+  background: var(--c-surface-sunken);
+  color: var(--c-text);
+}
+
+.body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--s-4);
+  padding: var(--s-5);
+}
+
+.row {
+  display: grid;
+  grid-template-columns: 5rem 1fr;
+  gap: var(--s-4);
+  align-items: baseline;
+}
+
+.k {
+  color: var(--c-text-soft);
+  font-size: var(--t-sm);
+}
+
+.v {
+  display: flex;
+  flex-direction: column;
+  gap: var(--s-1);
+  min-width: 0;
+}
+
+input {
+  width: 100%;
+  padding: var(--s-2) var(--s-3);
+  border: 1px solid var(--c-border-strong);
+  border-radius: var(--r-sm);
+  background: var(--c-bg);
+}
+
+.bad {
+  font-size: var(--t-xs);
+  color: var(--c-danger);
+}
+
+.dlg-foot {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--s-2);
+  padding: var(--s-4) var(--s-5);
+  border-top: 1px solid var(--c-border);
+}
+
+.btn {
+  padding: var(--s-2) var(--s-4);
+  border: 1px solid var(--c-border-strong);
+  border-radius: var(--r-sm);
+  background: var(--c-surface);
+  cursor: pointer;
+}
+
+.btn-go {
+  background: var(--c-accent);
+  border-color: transparent;
+  color: #fff;
+  font-weight: 500;
+}
+
+.btn-go:disabled {
+  background: var(--c-surface-sunken);
+  border-color: var(--c-border);
+  color: var(--c-text-faint);
+  cursor: not-allowed;
+}
+</style>