im0o/mihomo-patchbay
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 4 Wiki Activity

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

Browse Source 
原本换一条线要改 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。
This commit is contained in:
im0o
2026-08-11 03:10:38 +08:00
parent afe53b9790
commit e9e2eb555d
19 changed files with 1807 additions and 567 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/App.vue
+8
View File
@@ -146,7 +146,15 @@ const current = computed(() => NAV.find((n) => n.key === active.value))
}
/* ── 侧栏 ───────────────────────────────────── */
/*
* 钉在视口里。不加 sticky 的话它会被网格行撑到和主区一样高，页面一长，
* 导航就跟着滚出屏幕外，而它是全局导航，任何时候都该够得着。
*/
.side {
position: sticky;
top: 0;
align-self: start;
height: 100vh;
display: flex;
flex-direction: column;
gap: var(--s-5);
web/components/InboundList.vue
+15 -2
View File
@@ -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
+28 -6
View File
@@ -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
+157
View File
@@ -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>
web/runtime.ts
+87 -6
View File
@@ -10,11 +10,21 @@
import { ref } from 'vue'
import { api } from './api'
import type { ProxyInfo } from './api'
import { isGenerated } from '@shared/inbound-groups.ts'
/** 出站名字 → 运行时信息。内核没连接时是空的。 */
/**
* 出站名字 → 运行时信息。内核没连接时是空的。
*
* 合并了内核全局名字表和用户订阅里的线路。Patchbay 自己生成的订阅副本**不并进来**：
* 副本里的线路和原版同名（决策记录 0007 里那套复制订阅声明的做法），并进来只会互相
* 覆盖。要看副本里那一份，用下面的 `providers`。
*/
export const runtime = ref<Record<string, ProxyInfo>>({})
/** 订阅带来的线路，按订阅返回的顺序。 */
/** 订阅名 → 它当前提供的线路。含 Patchbay 生成的副本，按订阅隔开所以不会撞。 */
export const providers = ref<Record<string, ProxyInfo[]>>({})
/** 用户自己的订阅带来的线路，按订阅返回的顺序。不含生成的副本。 */
export const providerLines = ref<string[]>([])
/** 订阅线路 → 它所属的订阅名。测它的延迟必须从所属订阅进去。 */
@@ -26,8 +36,7 @@ export const kernel = ref<{ online: boolean; version?: string }>({ online: false
* 重新读一遍运行时状态。
*
* 要读两处：`/proxies` 只包含内核全局名字表里的东西（内置出站、自有线路、策略组），
* 订阅线路不在那张表上，它们的协议和延迟只能从 `/providers/proxies` 拿。合成一张表
* 之后，界面就不用关心某个名字是从哪来的了。
* 订阅线路不在那张表上，它们的协议和延迟只能从 `/providers/proxies` 拿。
*
* 任何一处取不到都不算错误——界面照常显示，只是少了延迟数字。内核没起来的时候正是
* 最需要这个界面的时候。
@@ -36,6 +45,7 @@ export async function reloadRuntime(): Promise<void> {
kernel.value = await api.kernel().catch(() => ({ online: false }))
if (!kernel.value.online) {
runtime.value = {}
providers.value = {}
providerLines.value = []
lineProvider.value = {}
return
@@ -48,13 +58,16 @@ export async function reloadRuntime(): Promise<void> {
// 拿不到就当没有
}
const byProvider: Record<string, ProxyInfo[]> = {}
const lines: string[] = []
const owner: Record<string, string> = {}
try {
const { providers } = await api.providers()
for (const [name, provider] of Object.entries(providers)) {
const result = await api.providers()
for (const [name, provider] of Object.entries(result.providers)) {
// 内核会给每个用了 proxies 的策略组造一个内部 provider，那些不是订阅
if (provider.vehicleType === 'Compatible') continue
byProvider[name] = provider.proxies
if (isGenerated(name)) continue
for (const line of provider.proxies) {
merged[line.name] = line
lines.push(line.name)
@@ -66,10 +79,78 @@ export async function reloadRuntime(): Promise<void> {
}
runtime.value = merged
providers.value = byProvider
providerLines.value = lines
lineProvider.value = owner
}
/**
* 界面渲染一个策略组需要知道的最少信息。
*
* `uses` 来自配置文件，`now` 来自内核，两边缺一不可：光有名字查不到它从哪取成员，
* 而开了链式代理之后同名线路有两份，不知道来源就分不清该显示哪一份。
*/
export interface GroupView {
name: string
uses: string[]
}
/** 一条线路在界面上要显示的样子，外加测它的延迟该从哪个订阅进去。 */
export interface LineEntry {
name: string
/** 它来自哪个订阅。测延迟必须带上 */
provider: string
info: ProxyInfo | undefined
}
/**
* 这条线路是不是来自 Patchbay 生成的订阅副本。
*
* 副本整份挂着 `dialer-proxy`，所以来自副本就一定经过入口。点名加进组里的成员
* （`DIRECT`、AUTO 和 FALLBACK 那两个组）不属于任何订阅，不在副本里。
*/
export function isChainedLine(name: string): boolean {
return Object.entries(providers.value).some(
([provider, lines]) => isGenerated(provider) && lines.some((line) => line.name === name),
)
}
/**
* 这几个订阅里一共有哪些线路。
*
* 只给高级配置里那个「匹配到几条」的预览用：那时用户选的来源还没保存，内核也还不知道
* 有这么个组，只能自己按来源算一遍。已经存在的组要用下面的 `membersOf`。
*/
export function linesFrom(uses: string[]): string[] {
const seen = new Set<string>()
for (const provider of uses) {
for (const line of providers.value[provider] ?? []) seen.add(line.name)
}
return [...seen]
}
/**
* 一个策略组的成员，按内核给的顺序。
*
* 成员名单直接用内核算好的（`/proxies` 里那个 `all`），不自己从来源订阅里推——组上的
* `filter` 已经在内核那边生效过了，重推一遍就是把同一条规则实现两次，两边一旦不一致
* 界面显示的就是假的。
*
* 每个成员还要标出它来自哪个订阅，因为测延迟得从所属订阅进去。顺着组自己的 `use:` 找而
* 不是全局按名字查：开了链式代理之后同一个线路名在原订阅和副本里各有一份，只有顺着来源
* 才知道该用哪一份。副本那份挂着 `dialer-proxy`，测出来是走完两跳的延迟，这正是这一路
* 真实的延迟。点名加进来的成员（DIRECT、别的策略组）不属于任何订阅，`provider` 是空串。
*/
export function membersOf(view: GroupView): LineEntry[] {
return (runtime.value[view.name]?.all ?? []).map((name) => {
for (const provider of view.uses) {
const line = (providers.value[provider] ?? []).find((item) => item.name === name)
if (line) return { name, provider, info: line }
}
return { name, provider: '', info: runtime.value[name] }
})
}
/**
* 切换策略组选中谁时先在本地改掉，不等内核回话。
*
web/styles/tokens.css
+13
View File
@@ -8,6 +8,10 @@
*
* 颜色只留一个强调色，用在「当前选中」和「主要操作」上。状态色（成功/警告/危险）
* 只在真的表示状态时用，不拿来装饰。
*
* 唯一的例外是链式代理那一组色（--c-chain-*）。同一屏上有两种「当前选中」——流量最后
* 从哪出去，和流量先经过哪——它们必须一眼分得开，这是含义不是装饰。挑靛蓝是因为它在
* 这套色板里不表示任何状态，红绿琥珀都被状态占了。别把它当成通用的第二强调色。
*/
:root {
@@ -27,6 +31,11 @@
--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;
@@ -78,6 +87,10 @@
--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;
web/views/InboundDetail.vue
+511 -167
View File
@@ -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
+66 -86
View File
@@ -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>