合并配置页（task/config-page）

# Conflicts:
#	web/api.ts

web/api.ts

@@ -100,6 +100,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[]'
@@ -200,6 +207,15 @@ export const api = {
   /** 断开所有连接。 */
   closeAllConnections: () => request<{ message?: string }>('DELETE', '/api/kernel/connections'),
 
+  /**
+   * 让内核立刻重新拉取某个订阅。
+   *
+   * 运行时动作，不写配置文件，所以不走 applyConfig 那条校验重载链路。成功时内核回
+   * 204 空响应，拉取失败回 503 带错误消息（内核源码 hub/route/provider.go:52-60）。
+   */
+  refreshProvider: (name: string) =>
+    request<unknown>('PUT', `/api/kernel/providers/proxies/${encodeURIComponent(name)}`),
+
   /**
    * 订阅及其线路。配置文件里只有订阅地址，有哪些线路只有运行中的内核知道。
    *
@@ -207,8 +223,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'),
 }

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>

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>

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>

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>