de3a4c9bcdf66747b290d15f0ef7ced6ccca9d8c
基调是简单快速:hover 颜色 0.15s 过渡(全局规则,只过渡颜色不碰布局)、 对话框入场淡入加 6px 上移、tab 下划线改成共享的一条并在切换时滑动、tab 内容 out-in 淡切、配置折叠箭头居右随展开旋转 90 度、订阅下拉 0.12s 出入场。 不引 animate.css:这些效果各自十几行 CSS,引库只多不少。 配置展开和拨开链式代理时,若详情底部长出窗口则平滑滚进视野;tab 切换 不触发,来回切时页面跟着跳只会晕。二次确认对话框点遮罩可关闭,内边距 挪进内层,否则点在 dialog 自己的 padding 上也会被当成遮罩。新增入站的 表单不做遮罩关闭:误点会丢掉填了一半的内容。对话框标题改为「新增路由」 「编辑路由」。select 换自绘箭头,原生箭头贴边且位置调不了。
Patchbay
一个跑在服务器上的网页,用来编辑那台机器上 mihomo 的 config.yaml 并让改动生效。
核心动作是把某一路入站接到某一个出站上——名字取自录音棚的插线板。典型用途是给每个容器开一个端口,各自指定走哪条线路。
聚合订阅不在范围内(那是 Sub-Store 的活),安装升级内核也不在(那是 mihomo-up.sh 的活)。
术语以 CONTEXT.md 为准。为什么这么设计记在仓库外面的 docs/adr/。
跑起来
需要 Bun 1.3 以上。
bun install
cp .env.example .env # 按里面的注释填
bun run start # 打包前端并启动,默认 http://127.0.0.1:7580
首次启动会生成一个访问令牌,打印在控制台上,同时存到配置文件旁边的 .patchbay-token。
内核不在线也能用,只是看不到订阅里有哪些线路、也没法让改动立刻生效。这是有意的——配置写坏导致内核起不来的时候,正是最需要这个界面的时候。
开发
改代码的时候用这个,前后端都不用重启:
bun run dev:kernel # 终端 1:本地测试内核,开着不用管
bun run dev:all # 终端 2:后端 + 前端,改了自动生效
然后访问 http://localhost:5173(不是 7580)。后端代码改动由 Bun 的 --hot 重载,
界面改动由 Vite 直接更新浏览器。
bun run start 不具备这个能力——它把前端打成静态文件再由后端提供,代码一改就得重新
打包重启。那种方式适合最终验证和部署。
本地测试内核的配置由模板生成(dev/config.yaml 进 git,订阅地址从 .env 取,
生成的 dev/home/config.yaml 不进 git):
bun run dev:reset # 第一次,或想把测试配置恢复成模板时
检查
bun test # 单元测试,不需要内核
bun run smoke # 接口冒烟测试,需要内核和后端都在跑
bun run typecheck
另有两个一次性脚本:scripts/roundtrip.ts 验证改一处配置之后 diff 里只出现那一处,scripts/safety-net.ts 验证配置写坏时能不能把用户救回来。
目录
server/ 后端。config-store.ts 是核心,那条保护链路在里面
web/ 前端。styles/tokens.css 顶部写着设计基调的三条规则
shared/ 两边共用的领域逻辑,纯函数,带测试
vendor/ 从别的项目复制来的代码,来源和本地改动记在各自的 ORIGIN.md
scripts/ 验证用的脚本,不参与打包
dev/ 本地测试内核的配置