原本换一条线要改 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。
157 lines
3.3 KiB
CSS
157 lines
3.3 KiB
CSS
/*
|
|
* 设计基调。
|
|
*
|
|
* 三条规则,其余都是它们的推论:
|
|
* 1. 层次靠底色深浅和一像素描边,不靠投影
|
|
* 2. 不要卡片套卡片。一屏最多两层容器,再深就换成分割线
|
|
* 3. 信息密度偏低。行高、间距给足,宁可多滚动也不要挤
|
|
*
|
|
* 颜色只留一个强调色,用在「当前选中」和「主要操作」上。状态色(成功/警告/危险)
|
|
* 只在真的表示状态时用,不拿来装饰。
|
|
*
|
|
* 唯一的例外是链式代理那一组色(--c-chain-*)。同一屏上有两种「当前选中」——流量最后
|
|
* 从哪出去,和流量先经过哪——它们必须一眼分得开,这是含义不是装饰。挑靛蓝是因为它在
|
|
* 这套色板里不表示任何状态,红绿琥珀都被状态占了。别把它当成通用的第二强调色。
|
|
*/
|
|
|
|
:root {
|
|
/* 中性色阶。带一点点冷调,避免纯灰的死板 */
|
|
--c-bg: #fbfbfc;
|
|
--c-surface: #ffffff;
|
|
--c-surface-sunken: #f4f5f7;
|
|
--c-border: #e4e6ea;
|
|
--c-border-strong: #d0d3d9;
|
|
|
|
--c-text: #1c1e21;
|
|
--c-text-soft: #5c6169;
|
|
--c-text-faint: #8b9098;
|
|
|
|
/* 强调色:偏青的蓝,冷静,不抢戏 */
|
|
--c-accent: #2b7a78;
|
|
--c-accent-soft: #e6f2f1;
|
|
--c-accent-text: #1f5c5a;
|
|
|
|
/* 链式代理的「当前选中」。靛蓝,和强调色的青绿色相拉得够开 */
|
|
--c-chain: #5145cd;
|
|
--c-chain-soft: #eeedfb;
|
|
--c-chain-text: #4038a8;
|
|
|
|
--c-danger: #b3261e;
|
|
--c-danger-soft: #fdedec;
|
|
--c-warn: #8a6100;
|
|
--c-warn-soft: #fdf5e3;
|
|
--c-ok: #1f6b3a;
|
|
--c-ok-soft: #e9f5ed;
|
|
|
|
/* 间距。低密度的来源,别调小 */
|
|
--s-1: 4px;
|
|
--s-2: 8px;
|
|
--s-3: 12px;
|
|
--s-4: 16px;
|
|
--s-5: 24px;
|
|
--s-6: 32px;
|
|
--s-7: 48px;
|
|
|
|
--r-sm: 6px;
|
|
--r-md: 10px;
|
|
--r-lg: 14px;
|
|
|
|
--f-sans:
|
|
system-ui, -apple-system, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC',
|
|
sans-serif;
|
|
--f-mono: ui-monospace, 'Cascadia Code', 'JetBrains Mono', Consolas, monospace;
|
|
|
|
--t-xs: 12px;
|
|
--t-sm: 13px;
|
|
--t-base: 14px;
|
|
--t-lg: 16px;
|
|
--t-xl: 20px;
|
|
--t-2xl: 26px;
|
|
|
|
--line: 1.7;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--c-bg: #16181c;
|
|
--c-surface: #1d2025;
|
|
--c-surface-sunken: #121417;
|
|
--c-border: #2b2f36;
|
|
--c-border-strong: #3a3f48;
|
|
|
|
--c-text: #e6e8eb;
|
|
--c-text-soft: #9ba1a9;
|
|
--c-text-faint: #6c727a;
|
|
|
|
--c-accent: #4db6ac;
|
|
--c-accent-soft: #1b3330;
|
|
--c-accent-text: #7fd4cb;
|
|
|
|
--c-chain: #8b83f0;
|
|
--c-chain-soft: #241f4a;
|
|
--c-chain-text: #a9a2f7;
|
|
|
|
--c-danger: #f2b8b5;
|
|
--c-danger-soft: #3a1f1e;
|
|
--c-warn: #e8c37a;
|
|
--c-warn-soft: #33290f;
|
|
--c-ok: #86d6a0;
|
|
--c-ok-soft: #16301f;
|
|
}
|
|
}
|
|
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html,
|
|
body,
|
|
#app {
|
|
height: 100%;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
background: var(--c-bg);
|
|
color: var(--c-text);
|
|
font-family: var(--f-sans);
|
|
font-size: var(--t-base);
|
|
line-height: var(--line);
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
p,
|
|
figure {
|
|
margin: 0;
|
|
}
|
|
|
|
button,
|
|
input,
|
|
select,
|
|
textarea {
|
|
font: inherit;
|
|
color: inherit;
|
|
}
|
|
|
|
code,
|
|
kbd,
|
|
.mono {
|
|
font-family: var(--f-mono);
|
|
font-size: 0.92em;
|
|
}
|
|
|
|
:focus-visible {
|
|
outline: 2px solid var(--c-accent);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
::selection {
|
|
background: var(--c-accent-soft);
|
|
color: var(--c-accent-text);
|
|
}
|