每路入站配一组专属策略组，换线不再改配置文件

原本换一条线要改 config.yaml、跑校验、等内核重载，几秒起步；而换线恰恰是这个工具
最高频的动作，把它放在最重的路径上方向就错了。现在每一路配一个 select 组加 AUTO、
FALLBACK 两个，入站的 proxy 永久指向 select，换线只是调一次内核接口。这样做的前提是
选中不会丢：内核把它写进 cache 文件，重启后由 patchSelectGroup 恢复，而
profile.store-selected 默认为真。

链式代理靠给来源订阅复制一份声明、挂上 override.dialer-proxy 实现，因为这个字段写在
策略组上内核只会打条日志然后忽略。副本是 type: file 读原订阅已经落盘的缓存，而不是
自己再拉一次：自己拉的话订阅地址一不可达副本就是空的，那一路入站会一条线都不剩，
表现是端口还在监听却没有任何出口。

顺带把 shared/outbound-chain.ts 里「只有 Selector 接受手动选择」那条断言删了，它是
错的（内核检查的是 SelectAble 接口，URLTest 和 Fallback 也实现了）。界面仍然只让
Selector 可点，但理由换成了另外两种的手动指定会被它们自己撤销。

完整取舍见工作区决策记录 0007。

web/views/InboundDetail.vue

@@ -2,79 +2,145 @@
 /**
  * 选中那一路入站的详情。
  *
- * 分两块，因为它们是两种不同性质的动作，不该长得一样也不该给一样的反馈：
- *   流量去向 —— 换策略组当前选中谁。不写配置文件，点了立刻变。日常点的就是这个。
- *   出站     —— 换这路入站指向哪个出站。要改配置文件，走校验和重载，要等几秒。
+ * 上下两半，界限就是高级配置上面那条分割线：
+ *   上半  点卡片立刻生效。换的是策略组当前选中谁，不写配置文件（决策记录 0007）
+ *   下半  高级配置。改的是组从哪些订阅取成员，写配置文件，要校验和重载
+ *
+ * 两半的反馈方式必须不一样。它们长得一样的时候，用户分不清哪个动作要等、哪个不用。
  */
-import { computed } from 'vue'
-import type { Inbound, OutboundMode } from '@shared/inbounds.ts'
-import { lastSwitchableGroup, resolveChain } from '@shared/outbound-chain.ts'
-import { generatedGroupName } from '@shared/filter-groups.ts'
+import { computed, ref, watch } from 'vue'
+import type { Inbound } from '@shared/inbounds.ts'
+import { displayName, linesMatching } from '@shared/inbound-groups.ts'
+import type { OutboundSetup, PanelGroup } from '@shared/inbound-groups.ts'
+import { resolveChain } from '@shared/outbound-chain.ts'
 import { latestDelay } from '../api'
-import { kernel, providerLines, runtime } from '../runtime'
+import type { GroupView } from '../runtime'
+import { isChainedLine, kernel, linesFrom, membersOf, runtime } from '../runtime'
 import OutboundCard from '../components/OutboundCard.vue'
-import IconOffline from '~icons/ri/cloud-off-line'
+import SourcePicker from '../components/SourcePicker.vue'
 import IconEdit from '~icons/ri/edit-line'
 import IconDelete from '~icons/ri/delete-bin-line'
+import IconDown from '~icons/ri/arrow-down-s-line'
+import IconUp from '~icons/ri/arrow-up-s-line'
+import IconOffline from '~icons/ri/cloud-off-line'
 
 const props = defineProps<{
   inbound: Inbound
-  groups: string[]
-  ownProxies: string[]
-  /** 流量最终交给哪个出站。走规则的入站要查到规则表末尾的 MATCH */
-  destination: string | null
-  /** 正在提交的那个出站的名字。只有它显示忙碌，其余照常能点 */
-  pendingOutbound: string | null
+  /** 能操作哪些策略组、各自能不能点。groups 为空表示这一路没有能点的组 */
+  panel: { groups: PanelGroup[]; shared: boolean }
+  /** 链式代理的入口组。null 表示没开 */
+  chain: GroupView | null
+  /** 配置里定义过的订阅，高级配置里从这里挑来源 */
+  subscriptions: string[]
+  /** 当前的来源和筛选，高级配置的表单初值 */
+  setup: OutboundSetup | null
   /** 正在测延迟的线路 */
   testing: string[]
+  /** 高级配置正在保存 */
+  saving: boolean
 }>()
 
 const emit = defineEmits<{
-  pick: [mode: OutboundMode]
   edit: []
   remove: []
+  /** 切换某个策略组当前选中谁 */
   select: [group: string, member: string]
-  test: [name: string]
-  /** 把这一路入站固定到某条订阅线路 */
-  pin: [line: string]
+  test: [name: string, provider: string]
+  /** 保存高级配置 */
+  save: [setup: OutboundSetup]
+  /** 把这一路改成专属代理组模式 */
+  adopt: []
 }>()
 
-/**
- * 默认入站由配置顶层的端口字段声明，没有 proxy 字段可写，也不能删。
- * 它的「出站」和编辑删除按钮都不显示。
- */
+/** 默认入站由配置顶层的端口字段声明，没有 proxy 字段可写，也不能删。 */
 const locked = computed(() => props.inbound.isDefault)
 
-function describe(name: string): string {
-  const info = runtime.value[name]
-  if (!info) return ''
-  return info.now ? `${info.type}(${info.now})` : info.type
-}
+const activeTab = ref('')
+watch(
+  () => props.panel.groups,
+  (list) => {
+    if (!list.some((t) => t.name === activeTab.value)) activeTab.value = list[0]?.name ?? ''
+  },
+  { immediate: true },
+)
 
-const delayOf = (name: string) => latestDelay(runtime.value[name])
+const activeGroup = computed(
+  () => props.panel.groups.find((g) => g.name === activeTab.value) ?? null,
+)
+
+/**
+ * 表单里开了链式代理但还没保存。
+ *
+ * 这时内核里还没有入口组，卡片点不了，但候选线路是知道的，先按只读画出来。开关拨完
+ * 一片空白、要按了保存才看得见东西，会让人以为开关没生效。
+ */
+const chainPreview = computed(() =>
+  props.chain === null && form.value.chain ? linesFrom(form.value.chain.sources) : [],
+)
+const proxyLines = computed(() => (activeGroup.value ? membersOf(activeGroup.value) : []))
+const chainLines = computed(() => (props.chain ? membersOf(props.chain) : []))
+
+const nowOf = (group: { name: string } | null) =>
+  group ? (runtime.value[group.name]?.now ?? '') : ''
 const isTesting = (name: string) => props.testing.includes(name)
 
-const chain = computed(() => resolveChain(runtime.value, props.destination))
-const switchable = computed(() => lastSwitchableGroup(runtime.value, chain.value))
+/**
+ * 流量最终走到哪。
+ *
+ * 从代理组当前选中的那个开始一路跟着「当前选中」查下去。选中的是一条线路就到此为止，
+ * 选中的是 `AUTO` 这种自动测速组就还要再查一层，否则只显示一个组名等于没回答。
+ */
+const exitChain = computed(() =>
+  resolveChain(runtime.value, nowOf(props.panel.groups[0] ?? null) || null),
+)
 
+/**
+ * 这一路当前这条出口是不是真的经过入口。
+ *
+ * 开了链式代理不等于每条出口都走中转：`DIRECT` 是点名加进代理组的成员，不属于任何订阅，
+ * 身上没有 `dialer-proxy`，选中它就是直连。这时画一跳入口是在骗人。
+ */
+const throughChain = computed(() => {
+  const exit = exitChain.value.at(-1)
+  return exit !== undefined && props.chain !== null && isChainedLine(exit)
+})
 
-function isCurrentOutbound(mode: OutboundMode): boolean {
-  const now = props.inbound.outbound
-  if (now.kind !== mode.kind) return false
-  return now.kind !== 'named' || now.name === (mode as { name: string }).name
+// ── 高级配置 ────────────────────────────────────────────────
+const open = ref(false)
+const form = ref<OutboundSetup>({ proxy: { sources: [], filter: null }, chain: null })
+
+function reset() {
+  form.value = props.setup
+    ? (JSON.parse(JSON.stringify(props.setup)) as OutboundSetup)
+    : { proxy: { sources: [...props.subscriptions], filter: null }, chain: null }
 }
 
-const BUILTINS: Array<{ mode: OutboundMode; label: string; sub: string }> = [
-  { mode: { kind: 'rules' }, label: 'RULE', sub: '由规则决定' },
-  { mode: { kind: 'direct' }, label: 'DIRECT', sub: '直接连接' },
-  { mode: { kind: 'global' }, label: 'GLOBAL', sub: '跟随 GLOBAL 组' },
-]
+// 切到别的入站时表单要跟着换，否则会把上一路的设置保存到这一路上
+watch(() => [props.inbound.id, props.setup], reset, { immediate: true, deep: true })
 
-/** 这一路入站是不是已经固定在某条订阅线路上。 */
-function isPinnedTo(line: string): boolean {
-  const mode = props.inbound.outbound
-  return mode.kind === 'named' && mode.name === generatedGroupName(line)
+const chainOn = computed({
+  get: () => form.value.chain !== null,
+  set: (on: boolean) => {
+    form.value.chain = on ? { sources: [...props.subscriptions], filter: null } : null
+  },
+})
+
+/** 当前筛选条件会留下几条线路。写错了 kept 是 null，界面据此提示而不是显示错的数字。 */
+function preview(spec: { sources: string[]; filter: string | null }) {
+  const names = linesFrom(spec.sources)
+  return { total: names.length, kept: linesMatching(spec.filter, names)?.length ?? null }
 }
+
+const dirty = computed(() => JSON.stringify(form.value) !== JSON.stringify(props.setup))
+/**
+ * 至少要选一个订阅。AUTO 和 FALLBACK 只有 `use:` 没有点名成员，一个订阅都不选就是空组，
+ * 内核会直接拒绝整份配置（内核源码 adapter/outboundgroup/parser.go:117-119）。
+ * 在这里拦住，比让用户按下保存再读一段内核报错好。
+ */
+const filled = (spec: { sources: string[] }) => spec.sources.length > 0
+const complete = computed(
+  () => filled(form.value.proxy) && (form.value.chain === null || filled(form.value.chain)),
+)
 </script>
 
 <template>
@@ -83,11 +149,12 @@ function isPinnedTo(line: string): boolean {
       <div class="title">
         <span class="port mono">{{ inbound.port }}</span>
         <span class="name">{{ inbound.name }}</span>
-      </div>
-
-      <div v-if="!locked" class="acts">
-        <button type="button" @click="emit('edit')"><IconEdit /> 编辑</button>
-        <button type="button" class="danger" @click="emit('remove')"><IconDelete /> 删除</button>
+        <div v-if="!locked" class="acts">
+          <button type="button" @click="emit('edit')"><IconEdit /> 编辑</button>
+          <button type="button" class="danger" @click="emit('remove')">
+            <IconDelete /> 删除
+          </button>
+        </div>
       </div>
 
       <dl class="facts">
@@ -99,115 +166,198 @@ function isPinnedTo(line: string): boolean {
           <dt>附加规则</dt>
           <dd class="mono">{{ inbound.ruleSet }}</dd>
         </template>
+
+        <template v-if="exitChain.length">
+          <dt>流量去向</dt>
+          <dd class="flow mono">
+            <template v-if="throughChain">
+              <span class="hop is-chain">{{ displayName(nowOf(chain)) || '未选择' }}</span>
+              <span class="arrow">→</span>
+            </template>
+            <template v-for="(hop, i) in exitChain" :key="hop">
+              <span v-if="i" class="arrow">→</span>
+              <span :class="['hop', i === exitChain.length - 1 && 'is-proxy']">{{
+                displayName(hop)
+              }}</span>
+            </template>
+          </dd>
+        </template>
       </dl>
     </header>
 
-    <!-- 运行时：换线路。不写文件，点了立刻变 -->
-    <section v-if="chain.length" class="block">
-      <h3>流量去向</h3>
-      <p class="chain mono">
-        <template v-for="(hop, i) in chain" :key="hop">
-          <span v-if="i" class="arrow">→</span>
-          <span :class="i === chain.length - 1 && 'tail'">{{ hop }}</span>
-        </template>
-      </p>
-
-      <template v-if="switchable">
-        <h4>{{ switchable.group }} 的当前选中</h4>
-        <div class="grid">
-          <OutboundCard
-            v-for="m in switchable.members"
-            :key="m"
-            :name="m"
-            :sub="describe(m)"
-            :delay="delayOf(m)"
-            :selected="m === switchable.now"
-            :testing="isTesting(m)"
-            testable
-            @pick="emit('select', switchable.group, m)"
-            @test="emit('test', m)"
-          />
-        </div>
-      </template>
+    <!-- 链条上一个能点的组都没有：只能说明现状 -->
+    <section v-if="panel.groups.length === 0" class="block">
+      <p class="hint">没有可切换的策略组。</p>
+      <button v-if="!locked" type="button" class="adopt" :disabled="saving" @click="emit('adopt')">
+        改成逐条选线路
+      </button>
     </section>
 
-    <!--
-      配置：换这路入站指向谁。要写文件、要校验。
-      默认入站没有 proxy 字段可写，整块不显示——画一排点不了的卡片只会让人以为是坏了。
-    -->
-    <section v-if="!locked" class="block">
-      <h3>出站</h3>
+    <template v-else>
+      <section class="block">
+        <h3>
+          代理
+          <span
+            v-if="panel.shared"
+            class="tag"
+            :title="`换的是 ${panel.groups[0]?.name}，所有走分流规则的入站共用它`"
+            >共用</span
+          >
+        </h3>
 
-      <div class="grid">
-        <OutboundCard
-          v-for="b in BUILTINS"
-          :key="b.label"
-          :name="b.label"
-          :sub="b.sub"
-          :delay="null"
-          :selected="isCurrentOutbound(b.mode)"
-          :pending="pendingOutbound === b.label"
-          @pick="emit('pick', b.mode)"
-        />
-      </div>
-
-      <template v-if="groups.length">
-        <h4>策略组</h4>
-        <div class="grid">
+        <div v-if="panel.groups.length > 1" class="tabs">
+          <button
+            v-for="t in panel.groups"
+            :key="t.name"
+            type="button"
+            :class="['tab', activeTab === t.name && 'is-on']"
+            @click="activeTab = t.name"
+          >
+            {{ t.label }}
+          </button>
+        </div>
+        <p v-if="!kernel.online" class="hint"><IconOffline /> 内核未连接</p>
+        <p v-else-if="proxyLines.length === 0" class="hint">这个策略组现在没有成员</p>
+        <div v-else class="grid">
           <OutboundCard
-            v-for="g in groups"
-            :key="g"
-            :name="g"
-            :sub="describe(g)"
-            :delay="delayOf(g)"
-            :selected="isCurrentOutbound({ kind: 'named', name: g })"
-            :pending="pendingOutbound === g"
-            :testing="isTesting(g)"
+            v-for="line in proxyLines"
+            :key="line.name"
+            :name="displayName(line.name)"
+            :sub="line.info?.type ?? ''"
+            :delay="latestDelay(line.info)"
+            :selected="line.name === nowOf(activeGroup)"
+            :disabled-reason="activeGroup?.pickable ? undefined : '这个组自己决定用哪条'"
+            :testing="isTesting(line.name)"
             testable
-            @pick="emit('pick', { kind: 'named', name: g })"
-            @test="emit('test', g)"
+            tone="proxy"
+            @pick="emit('select', activeTab, line.name)"
+            @test="emit('test', line.name, line.provider)"
           />
         </div>
-      </template>
+      </section>
 
-      <template v-if="ownProxies.length">
-        <h4>自有线路</h4>
-        <div class="grid">
+      <section v-if="chain || chainPreview.length" class="block">
+        <h3>
+          链式代理
+          <span v-if="!chain" class="tag">未保存</span>
+        </h3>
+
+        <div v-if="!chain" class="grid">
           <OutboundCard
-            v-for="p in ownProxies"
-            :key="p"
-            :name="p"
-            :sub="describe(p)"
-            :delay="delayOf(p)"
-            :selected="isCurrentOutbound({ kind: 'named', name: p })"
-            :pending="pendingOutbound === p"
-            :testing="isTesting(p)"
-            testable
-            @pick="emit('pick', { kind: 'named', name: p })"
-            @test="emit('test', p)"
+            v-for="name in chainPreview"
+            :key="name"
+            :name="name"
+            sub=""
+            :delay="null"
+            :selected="false"
+            disabled-reason="保存之后才能选"
+            tone="chain"
           />
         </div>
-      </template>
 
-      <h4>订阅线路</h4>
-      <p v-if="!kernel.online" class="hint"><IconOffline /> 内核未连接</p>
-      <p v-else-if="providerLines.length === 0" class="hint">订阅中没有线路</p>
-      <div v-else class="grid">
-        <OutboundCard
-          v-for="line in providerLines"
-          :key="line"
-          :name="line"
-          :sub="describe(line)"
-          :delay="delayOf(line)"
-          :selected="isPinnedTo(line)"
-          :pending="pendingOutbound === generatedGroupName(line)"
-          :testing="isTesting(line)"
-          testable
-          @pick="emit('pin', line)"
-          @test="emit('test', line)"
-        />
-      </div>
-    </section>
+        <div v-else class="grid">
+          <OutboundCard
+            v-for="line in chainLines"
+            :key="line.name"
+            :name="line.name"
+            :sub="line.info?.type ?? ''"
+            :delay="latestDelay(line.info)"
+            :selected="line.name === nowOf(chain)"
+            :testing="isTesting(line.name)"
+            testable
+            tone="chain"
+            @pick="emit('select', chain.name, line.name)"
+            @test="emit('test', line.name, line.provider)"
+          />
+        </div>
+      </section>
+
+      <!-- 共用的组只能换选中，改不了它的成员来源：那是别人的组 -->
+      <section v-if="panel.shared && !locked" class="block">
+        <button type="button" class="adopt" :disabled="saving" @click="emit('adopt')">
+          改成逐条选线路
+        </button>
+      </section>
+
+      <section v-if="!panel.shared" class="block advanced">
+        <button type="button" class="toggle" @click="open = !open">
+          <span>高级配置</span>
+          <component :is="open ? IconUp : IconDown" />
+        </button>
+
+        <div v-if="open" class="form">
+          <h4>代理</h4>
+
+          <div class="row">
+            <span class="label">订阅</span>
+            <SourcePicker v-model="form.proxy.sources" :options="subscriptions" />
+          </div>
+
+          <div class="row">
+            <span class="label">筛选</span>
+            <div class="field">
+              <input v-model="form.proxy.filter" placeholder="正则，留空表示全部保留" />
+              <p class="count">
+                <template v-if="preview(form.proxy).kept === null">筛选条件写法有误</template>
+                <template v-else>
+                  {{ preview(form.proxy).total }} 条线路里匹配到 {{ preview(form.proxy).kept }} 条
+                </template>
+              </p>
+            </div>
+          </div>
+
+          <div class="row">
+            <span class="label">链式代理</span>
+            <div class="field">
+              <button
+                type="button"
+                role="switch"
+                :aria-checked="chainOn"
+                :class="['switch', chainOn && 'is-on']"
+                @click="chainOn = !chainOn"
+              >
+                <span class="knob"></span>
+              </button>
+            </div>
+          </div>
+
+          <template v-if="form.chain">
+            <h4>链式代理</h4>
+
+            <div class="row">
+              <span class="label">订阅</span>
+              <SourcePicker v-model="form.chain!.sources" :options="subscriptions" />
+            </div>
+
+            <div class="row">
+              <span class="label">筛选</span>
+              <div class="field">
+                <input v-model="form.chain.filter" placeholder="正则，建议筛到作为中转的那一条" />
+                <p class="count">
+                  <template v-if="preview(form.chain).kept === null">筛选条件写法有误</template>
+                  <template v-else>
+                    {{ preview(form.chain).total }} 条线路里匹配到
+                    {{ preview(form.chain).kept }} 条
+                  </template>
+                </p>
+              </div>
+            </div>
+          </template>
+
+          <div class="form-acts">
+            <button type="button" :disabled="!dirty || saving" @click="reset">取消</button>
+            <button
+              type="button"
+              class="primary"
+              :disabled="!dirty || !complete || saving"
+              @click="emit('save', form)"
+            >
+              {{ saving ? '保存中' : '保存' }}
+            </button>
+          </div>
+        </div>
+      </section>
+    </template>
   </aside>
 </template>
 
@@ -250,7 +400,7 @@ function isPinnedTo(line: string): boolean {
 .acts {
   display: flex;
   gap: var(--s-2);
-  margin-bottom: var(--s-3);
+  margin-left: auto;
 }
 
 .acts button {
@@ -289,6 +439,33 @@ function isPinnedTo(line: string): boolean {
 
 .facts dd {
   margin: 0;
+  min-width: 0;
+}
+
+.flow {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--s-2);
+}
+
+.arrow {
+  color: var(--c-text-faint);
+}
+
+.hop {
+  color: var(--c-text-soft);
+}
+
+/* 两跳用两种颜色，和下面卡片的选中态对得上 */
+.hop.is-proxy {
+  color: var(--c-accent-text);
+  font-weight: 500;
+}
+
+.hop.is-chain {
+  color: var(--c-chain-text);
+  font-weight: 500;
 }
 
 .block {
@@ -301,37 +478,50 @@ function isPinnedTo(line: string): boolean {
 }
 
 h3 {
-  font-size: var(--t-sm);
-  font-weight: 600;
-  color: var(--c-text-soft);
-  margin-bottom: var(--s-3);
-}
-
-h4 {
-  font-size: var(--t-xs);
-  font-weight: 500;
-  color: var(--c-text-faint);
-  margin: var(--s-5) 0 var(--s-2);
-}
-
-.chain {
   display: flex;
-  flex-wrap: wrap;
   align-items: center;
   gap: var(--s-2);
   font-size: var(--t-sm);
-  color: var(--c-text-soft);
-  margin-bottom: var(--s-2);
+  font-weight: 600;
+  color: var(--c-text);
+  letter-spacing: 0.02em;
+  margin-bottom: var(--s-4);
 }
 
-.chain .arrow {
+.tag {
+  padding: 0 var(--s-2);
+  border: 1px solid var(--c-border-strong);
+  border-radius: 999px;
+  font-size: var(--t-xs);
+  font-weight: 400;
   color: var(--c-text-faint);
+  cursor: help;
 }
 
+.tabs {
+  display: flex;
+  gap: var(--s-4);
+  margin-bottom: var(--s-4);
+}
 
-.chain .tail {
-  color: var(--c-accent-text);
-  font-weight: 500;
+/* 选中态是一条离文字有距离的下划线，不画边框 */
+.tab {
+  padding: 0 0 var(--s-2);
+  border: none;
+  border-bottom: 2px solid transparent;
+  background: none;
+  color: var(--c-text-faint);
+  font-size: var(--t-sm);
+  cursor: pointer;
+}
+
+.tab:hover {
+  color: var(--c-text-soft);
+}
+
+.tab.is-on {
+  border-bottom-color: var(--c-accent);
+  color: var(--c-text);
 }
 
 .grid {
@@ -349,8 +539,162 @@ h4 {
   line-height: 1.6;
 }
 
-.hint code {
-  color: var(--c-text-soft);
+.adopt {
+  padding: var(--s-1) var(--s-4);
+  border: 1px solid var(--c-border-strong);
+  border-radius: var(--r-sm);
+  background: var(--c-surface);
+  font-size: var(--t-sm);
+  cursor: pointer;
 }
 
+.adopt:hover:not(:disabled) {
+  border-color: var(--c-accent);
+  color: var(--c-accent-text);
+}
+
+.adopt:disabled {
+  color: var(--c-text-faint);
+  cursor: not-allowed;
+}
+
+/* ── 高级配置 ───────────────────────────────── */
+.toggle {
+  display: flex;
+  align-items: center;
+  gap: var(--s-2);
+  padding: 0;
+  border: none;
+  background: none;
+  color: var(--c-text-soft);
+  font-size: var(--t-sm);
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.toggle:hover {
+  color: var(--c-text);
+}
+
+/* 表单不套盒子，靠小标题和一条分割线分段（设计基调第 2 条：不要卡片套卡片） */
+.form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--s-3);
+  margin-top: var(--s-4);
+}
+
+.form h4 {
+  font-size: var(--t-xs);
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  color: var(--c-text-faint);
+}
+
+.form h4:not(:first-child) {
+  margin-top: var(--s-4);
+}
+
+.row {
+  display: grid;
+  grid-template-columns: 4.5em minmax(0, 1fr);
+  align-items: start;
+  gap: var(--s-3);
+}
+
+/* 标签和第一行控件对齐。控件本身高 34px，所以标签也按 34px 居中 */
+.label {
+  display: flex;
+  align-items: center;
+  min-height: 34px;
+  color: var(--c-text-faint);
+  font-size: var(--t-sm);
+}
+
+.field {
+  display: flex;
+  min-height: 34px;
+  flex-direction: column;
+  justify-content: center;
+}
+
+select,
+input {
+  height: 34px;
+  padding: 0 var(--s-3);
+  border: 1px solid var(--c-border-strong);
+  border-radius: var(--r-sm);
+  background: var(--c-surface);
+  font-size: var(--t-base);
+}
+
+input {
+  width: 100%;
+  font-family: var(--f-mono);
+}
+
+.count {
+  margin-top: var(--s-1);
+  color: var(--c-text-faint);
+  font-size: var(--t-xs);
+}
+
+.switch {
+  flex: none;
+  align-self: flex-start;
+  width: 38px;
+  height: 22px;
+  padding: 2px;
+  border: 1px solid var(--c-border-strong);
+  border-radius: 999px;
+  background: var(--c-surface-sunken);
+  cursor: pointer;
+}
+
+.switch .knob {
+  display: block;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: var(--c-text-faint);
+  transition:
+    transform 0.15s ease,
+    background 0.15s ease;
+}
+
+.switch.is-on {
+  border-color: var(--c-chain);
+  background: var(--c-chain-soft);
+}
+
+.switch.is-on .knob {
+  background: var(--c-chain);
+  transform: translateX(16px);
+}
+
+.form-acts {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--s-2);
+}
+
+.form-acts button {
+  padding: var(--s-1) var(--s-4);
+  border: 1px solid var(--c-border-strong);
+  border-radius: var(--r-sm);
+  background: var(--c-surface);
+  font-size: var(--t-sm);
+  cursor: pointer;
+}
+
+.form-acts button:disabled {
+  color: var(--c-text-faint);
+  cursor: not-allowed;
+}
+
+.form-acts .primary:not(:disabled) {
+  border-color: var(--c-accent);
+  background: var(--c-accent-soft);
+  color: var(--c-accent-text);
+}
 </style>

web/views/RouterPage.vue

@@ -7,24 +7,24 @@
  * 运行时动作（切换选中、测延迟）不经过它，因为它们不写文件也不需要校验。
  */
 import { computed, onMounted, ref, watch } from 'vue'
+import { collectInbounds } from '@shared/inbounds.ts'
+import type { Inbound } from '@shared/inbounds.ts'
 import {
-  collectInbounds,
-  collectOutboundNames,
-  outboundLabel,
-  outboundToProxyField,
-  resolveDestination,
-} from '@shared/inbounds.ts'
-import type { Inbound, OutboundMode } from '@shared/inbounds.ts'
+  applySetup,
+  chainGroupName,
+  groupUses,
+  panelGroups,
+  pruneGenerated,
+  syncGenerated,
+  readSetup,
+  userProviders,
+} from '@shared/inbound-groups.ts'
+import type { OutboundSetup } from '@shared/inbound-groups.ts'
 import type { ConfigObject } from '../../vendor/config-editor/index.ts'
 import { ApiError, api } from '../api'
 import type { ListenerFields } from '../api'
-import {
-  generatedGroupName,
-  isGeneratedGroup,
-  makeFilterGroup,
-  pruneGeneratedGroups,
-} from '@shared/filter-groups.ts'
-import { lineProvider, optimisticSelect, providerLines, reloadRuntime } from '../runtime'
+import type { GroupView } from '../runtime'
+import { optimisticSelect, providerLines, reloadRuntime, runtime } from '../runtime'
 import { useDelayTest } from '../delay-test'
 import { density } from '../prefs'
 import InboundList from '../components/InboundList.vue'
@@ -38,11 +38,12 @@ const props = defineProps<{ data: ConfigObject; revision: string }>()
 const emit = defineEmits<{ saved: [] }>()
 
 const inbounds = computed(() => collectInbounds(props.data))
-const outbounds = computed(() => {
-  const names = collectOutboundNames(props.data)
-  // 生成的筛选组不出现在可选列表里：它们是「固定到某条线路」的实现细节，
-  // 用户从没建过，让他在策略组那一栏看到只会莫名其妙。
-  return { ...names, groups: names.groups.filter((g) => !isGeneratedGroup(g)) }
+const subscriptions = computed(() => userProviders(props.data))
+
+/** 刚接管一路入站时给它什么：订阅全给上，不筛。三个组由 applySetup 一并建出来。 */
+const defaultSetup = (): OutboundSetup => ({
+  proxy: { sources: [...subscriptions.value], filter: null },
+  chain: null,
 })
 
 const selectedId = ref<string | null>(null)
@@ -55,8 +56,6 @@ const notice = ref('')
 const fields = ref<ListenerFields | null>(null)
 const formOpen = ref(false)
 const formEditing = ref<Inbound | null>(null)
-/** 正在提交的那个出站的名字。只有它显示忙碌，其余卡片照常能点 */
-const pendingOutbound = ref<string | null>(null)
 
 const { testing, test } = useDelayTest(
   () => void reloadRuntime(),
@@ -85,13 +84,32 @@ watch(
 const selected = computed(() => inbounds.value.find((i) => i.id === selectedId.value) ?? null)
 const takenNames = computed(() => inbounds.value.map((i) => i.name))
 
+/** 面板上能操作哪些策略组、各自能不能点。这个问题只在 panelGroups 里回答一次。 */
+const panel = computed(() =>
+  selected.value
+    ? panelGroups(props.data, runtime.value, selected.value)
+    : { groups: [], shared: false },
+)
+
+/** 共用的组是别人的，改不了它的来源，所以高级配置也不给。 */
+const setup = computed<OutboundSetup | null>(() =>
+  selected.value && !panel.value.shared ? readSetup(props.data, selected.value.name) : null,
+)
+
+const chainView = computed<GroupView | null>(() => {
+  const target = selected.value
+  if (!target || !setup.value?.chain) return null
+  const name = chainGroupName(target.name)
+  return { name, uses: groupUses(props.data, name) ?? [] }
+})
+
 const clone = () => JSON.parse(JSON.stringify(props.data)) as ConfigObject
 
 /** 所有改配置文件的动作都从这里走。 */
 async function commit(raw: ConfigObject, success: string) {
-  // 顺手清掉没人再引用的生成组。不清理的话，改几次出站文件里就攒下一堆
-  // 用户从没主动建过、也不知道是干嘛的组。
-  const next = pruneGeneratedGroups(raw)
+  // 先把生成的东西按当前规则重建一遍，再清掉没人再引用的。不清理的话，改几次文件里就
+  // 攒下一堆用户从没主动建过的东西，而没人用的订阅副本还会按 interval 继续联网。
+  const next = pruneGenerated(syncGenerated(raw, collectInbounds(raw)))
   saving.value = true
   failure.value = null
   done.value = ''
@@ -110,62 +128,18 @@ async function commit(raw: ConfigObject, success: string) {
   }
 }
 
-async function pickOutbound(mode: OutboundMode) {
+/** 保存高级配置：改的是这一路的组从哪些订阅取成员、筛掉哪些。 */
+async function saveSetup(next: OutboundSetup) {
   const target = selected.value
-  if (!target || target.listenerIndex === null || pendingOutbound.value) return
-  pendingOutbound.value = outboundLabel(mode)
-
-  const next = clone()
-  const entry = (next.listeners as ConfigObject[])[target.listenerIndex]!
-  const proxy = outboundToProxyField(mode)
-  // RULE 是「没有这个字段」而不是「字段为空」，所以是删掉而不是置空。
-  if (proxy === undefined) delete entry.proxy
-  else entry.proxy = proxy
-
-  try {
-    await commit(next, `${target.name} 的出站已设为 ${outboundLabel(mode)}`)
-  } finally {
-    pendingOutbound.value = null
-  }
+  if (!target || saving.value) return
+  await commit(applySetup(clone(), target.name, next), `${target.name} 的代理配置已保存`)
 }
 
-/**
- * 把当前这一路入站固定到某条订阅线路。
- *
- * 订阅线路不能被入站直接引用，所以要先建一个只装它的策略组再指过去（决策记录 0005）。
- * 这一步对用户是透明的：他看到的只是「这个口固定走这条线」。
- */
-async function pinLine(line: string) {
+/** 把一路还没接管的入站改成专属代理组模式。 */
+async function adopt() {
   const target = selected.value
-  if (!target || target.listenerIndex === null || pendingOutbound.value) return
-
-  const provider = lineProvider.value[line]
-  if (!provider) {
-    notice.value = `找不到 ${line} 属于哪个订阅，无法固定`
-    return
-  }
-
-  const group = makeFilterGroup(line, provider)
-  if (!group) {
-    notice.value = `${line} 的名字里含反引号，内核会把它当成筛选条件的分隔符，无法固定`
-    return
-  }
-
-  const groupName = generatedGroupName(line)
-  pendingOutbound.value = groupName
-
-  const next = clone()
-  const groups = Array.isArray(next['proxy-groups']) ? (next['proxy-groups'] as ConfigObject[]) : []
-  // 同一条线路被两路入站固定时共用一个组，不重复建
-  if (!groups.some((g) => g.name === groupName)) groups.push(group)
-  next['proxy-groups'] = groups
-  ;(next.listeners as ConfigObject[])[target.listenerIndex]!.proxy = groupName
-
-  try {
-    await commit(next, `${target.name} 已固定走 ${line}`)
-  } finally {
-    pendingOutbound.value = null
-  }
+  if (!target || saving.value) return
+  await commit(applySetup(clone(), target.name, defaultSetup()), `${target.name} 已改为逐条选线路`)
 }
 
 function openAdd() {
@@ -188,7 +162,12 @@ async function submitForm(entry: ConfigObject) {
   else listeners[editingIndex] = entry
   next.listeners = listeners
 
-  await commit(next, editingIndex === null ? `已新增 ${String(entry.name)}` : '已保存')
+  // 新增的入站直接进专属组模式。否则新建完看到的是一块「这一路不由 Patchbay 管理」
+  // 的提示，还得再点一次才能用。
+  const name = String(entry.name)
+  const withGroup = editingIndex === null ? applySetup(next, name, defaultSetup()) : next
+
+  await commit(withGroup, editingIndex === null ? `已新增 ${name}` : '已保存')
   // 失败时不能关对话框——关了再打开就是空表单，用户填的名称、端口、类型全没了
   if (failure.value) return
   formOpen.value = false
@@ -238,8 +217,8 @@ async function removeSelected() {
           <span class="sum-k">入站</span>
         </div>
         <div class="sum">
-          <span class="sum-n">{{ outbounds.groups.length }}</span>
-          <span class="sum-k">策略组</span>
+          <span class="sum-n">{{ subscriptions.length }}</span>
+          <span class="sum-k">订阅</span>
         </div>
         <div class="sum">
           <span class="sum-n">{{ providerLines.length }}</span>
@@ -266,17 +245,18 @@ async function removeSelected() {
       <InboundDetail
         v-if="selected"
         :inbound="selected"
-        :groups="outbounds.groups"
-        :own-proxies="outbounds.ownProxies"
-        :destination="resolveDestination(data, selected)"
-        :pending-outbound="pendingOutbound"
+        :panel="panel"
+        :chain="chainView"
+        :subscriptions="subscriptions"
+        :setup="setup"
         :testing="testing"
-        @pick="pickOutbound"
+        :saving="saving"
         @edit="openEdit"
         @remove="removeSelected"
         @select="selectMember"
-        @test="(name: string) => test(name, lineProvider[name])"
-        @pin="pinLine"
+        @test="test"
+        @save="saveSetup"
+        @adopt="adopt"
       />
     </div>