im0o
e9e2eb555d
原本换一条线要改 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。
158 lines
3.7 KiB
Vue
158 lines
3.7 KiB
Vue
<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>
|