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

原本换一条线要改 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/components/InboundList.vue

@@ -5,11 +5,24 @@
  * 只管显示和选中，不碰任何数据。
  */
 import { inboundTypeLabel, isUnsetOutbound, outboundLabel } from '@shared/inbounds.ts'
-import { displayOutboundName } from '@shared/filter-groups.ts'
+import { displayName, isGenerated } from '@shared/inbound-groups.ts'
 import type { Inbound } from '@shared/inbounds.ts'
+import { runtime } from '../runtime'
 
 defineProps<{ inbounds: Inbound[] }>()
 const selected = defineModel<string | null>('selected', { required: true })
+
+/**
+ * 这一行右侧显示什么。
+ *
+ * 指向 Patchbay 自动创建的代理组时显示那个组当前选中的线路，而不是组名——组名是
+ * 「patchbay:」加入站名，和左边的名字列完全重复，等于一列没有信息。
+ */
+function outboundOf(inbound: Inbound): string {
+  const mode = inbound.outbound
+  if (mode.kind !== 'named' || !isGenerated(mode.name)) return outboundLabel(mode)
+  return displayName(runtime.value[mode.name]?.now ?? '') || '未选择'
+}
 </script>
 
 <template>
@@ -27,7 +40,7 @@ const selected = defineModel<string | null>('selected', { required: true })
           <span v-if="inbound.isDefault" class="tag">默认</span>
         </span>
         <span :class="['out mono', isUnsetOutbound(inbound.outbound) && 'is-muted']">
-          {{ displayOutboundName(outboundLabel(inbound.outbound)) }}
+          {{ outboundOf(inbound) }}
         </span>
       </button>
     </li>

web/components/OutboundCard.vue

@@ -23,6 +23,11 @@ defineProps<{
   testing?: boolean
   /** 能不能测延迟。内置出站没得测 */
   testable?: boolean
+  /**
+   * 选中态用哪一组颜色。同一屏上有两种「当前选中」，一种是流量最后从哪出去，
+   * 一种是流量先经过哪，不区分颜色就分不清哪张卡属于哪一件事。
+   */
+  tone?: 'proxy' | 'chain'
 }>()
 
 const emit = defineEmits<{ pick: []; test: [] }>()
@@ -36,7 +41,15 @@ function delayClass(ms: number | null): string {
 </script>
 
 <template>
-  <div :class="['card', selected && 'is-on', disabledReason && 'is-off', pending && 'is-pending']">
+  <div
+    :class="[
+      'card',
+      tone === 'chain' && 'tone-chain',
+      selected && 'is-on',
+      disabledReason && 'is-off',
+      pending && 'is-pending',
+    ]"
+  >
     <button
       type="button"
       class="hit"
@@ -70,6 +83,9 @@ function delayClass(ms: number | null): string {
 
 <style scoped>
 .card {
+  --tone: var(--c-accent);
+  --tone-soft: var(--c-accent-soft);
+  --tone-text: var(--c-accent-text);
   display: flex;
   flex-direction: column;
   min-width: 0;
@@ -78,13 +94,19 @@ function delayClass(ms: number | null): string {
   background: var(--c-surface-sunken);
 }
 
+.card.tone-chain {
+  --tone: var(--c-chain);
+  --tone-soft: var(--c-chain-soft);
+  --tone-text: var(--c-chain-text);
+}
+
 .card.is-on {
-  border-color: var(--c-accent);
-  background: var(--c-accent-soft);
+  border-color: var(--tone);
+  background: var(--tone-soft);
 }
 
 .card:not(.is-off):hover {
-  border-color: var(--c-accent);
+  border-color: var(--tone);
 }
 
 .card.is-off {
@@ -120,7 +142,7 @@ function delayClass(ms: number | null): string {
 }
 
 .card.is-on .name {
-  color: var(--c-accent-text);
+  color: var(--tone-text);
 }
 
 .sub {
@@ -157,7 +179,7 @@ function delayClass(ms: number | null): string {
 
 .delay:hover:not(:disabled) {
   background: var(--c-surface);
-  color: var(--c-accent-text);
+  color: var(--tone-text);
 }
 
 .delay:disabled {

web/components/SourcePicker.vue

@@ -0,0 +1,157 @@
+<script setup lang="ts">
+/**
+ * 挑几个订阅。已选的是一排 tag，末尾一个加号，点开是还没选的那些。
+ *
+ * 不用原生 select：它在已选项旁边显示的是「当前值」，而这里要表达的是「已经选了这几个」，
+ * 两种语义。之前用 select 拼出来的那版，加号和 tag 的对齐、宽度、选中后的复位都得单独调，
+ * 全是在跟控件本身的默认行为较劲。
+ */
+import { ref } from 'vue'
+import IconAdd from '~icons/ri/add-line'
+import IconRemove from '~icons/ri/close-line'
+
+defineProps<{ options: string[] }>()
+const chosen = defineModel<string[]>({ required: true })
+
+const open = ref(false)
+const root = ref<HTMLElement | null>(null)
+
+function add(name: string) {
+  chosen.value = [...chosen.value, name]
+  open.value = false
+}
+
+function remove(name: string) {
+  chosen.value = chosen.value.filter((item) => item !== name)
+}
+
+/** 焦点离开整块时收起。判断新焦点还在不在里面，否则点列表里的按钮会先把自己关掉。 */
+function onFocusOut(event: FocusEvent) {
+  const next = event.relatedTarget
+  if (next instanceof Node && root.value?.contains(next)) return
+  open.value = false
+}
+</script>
+
+<template>
+  <div ref="root" class="picker" @focusout="onFocusOut">
+    <span v-for="name in chosen" :key="name" class="tag">
+      {{ name }}
+      <button type="button" :title="`移除 ${name}`" @click="remove(name)">
+        <IconRemove />
+      </button>
+    </span>
+
+    <div v-if="options.some((o) => !chosen.includes(o))" class="add">
+      <button type="button" class="plus" title="添加订阅" @click="open = !open">
+        <IconAdd />
+      </button>
+
+      <ul v-if="open" class="menu">
+        <template v-for="name in options" :key="name">
+          <li v-if="!chosen.includes(name)">
+            <button type="button" @click="add(name)">{{ name }}</button>
+          </li>
+        </template>
+      </ul>
+    </div>
+
+    <span v-else-if="chosen.length === 0" class="empty">没有可选的订阅</span>
+  </div>
+</template>
+
+<style scoped>
+.picker {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--s-2);
+}
+
+.tag {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--s-1);
+  height: 34px;
+  padding: 0 var(--s-1) 0 var(--s-3);
+  border: 1px solid var(--c-border-strong);
+  border-radius: var(--r-sm);
+  background: var(--c-surface-sunken);
+  font-size: var(--t-sm);
+}
+
+.tag button {
+  display: grid;
+  place-items: center;
+  width: 22px;
+  height: 22px;
+  border: none;
+  border-radius: var(--r-sm);
+  background: none;
+  color: var(--c-text-faint);
+  cursor: pointer;
+}
+
+.tag button:hover {
+  background: var(--c-surface);
+  color: var(--c-danger);
+}
+
+.add {
+  position: relative;
+}
+
+.plus {
+  display: grid;
+  place-items: center;
+  width: 34px;
+  height: 34px;
+  border: 1px dashed var(--c-border-strong);
+  border-radius: var(--r-sm);
+  background: none;
+  color: var(--c-text-faint);
+  cursor: pointer;
+}
+
+.plus:hover {
+  border-style: solid;
+  border-color: var(--c-accent);
+  color: var(--c-accent-text);
+}
+
+/* 浮在上面，不能把下面几行顶下去 */
+.menu {
+  position: absolute;
+  z-index: 1;
+  top: calc(34px + var(--s-1));
+  left: 0;
+  min-width: 10em;
+  list-style: none;
+  margin: 0;
+  padding: var(--s-1);
+  border: 1px solid var(--c-border-strong);
+  border-radius: var(--r-md);
+  background: var(--c-surface);
+}
+
+.menu button {
+  width: 100%;
+  padding: var(--s-2) var(--s-3);
+  border: none;
+  border-radius: var(--r-sm);
+  background: none;
+  text-align: left;
+  font-size: var(--t-sm);
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.menu button:hover {
+  background: var(--c-surface-sunken);
+}
+
+.empty {
+  color: var(--c-text-faint);
+  font-size: var(--t-sm);
+}
+</style>