搭出前端骨架和入站列表

设计基调定为：层次靠底色和一像素描边而不是投影，一屏最多两层容器，间距给足。
tokens.css 顶部写了这三条规则，后面的组件都是它们的推论。

入站列表把两套写法合并成一张表：老式顶层端口字段（mixed-port 这些）和 listeners 数组。
只画 listeners 的话，一台只用 mixed-port 的机器打开会是空板，而那个端口正在跑——
这等于对用户撒谎。合并逻辑在 shared/inbounds.ts，带 10 个测试。

后端顺带能提供打包后的静态文件了，一个进程就能跑起来。

shared/inbounds.test.ts

@@ -0,0 +1,86 @@
+import { describe, expect, it } from 'bun:test'
+import { readFileSync } from 'node:fs'
+import { join } from 'node:path'
+import { openDocument } from '../vendor/config-editor/index.ts'
+import { collectInbounds, collectOutboundNames, outboundToProxyField } from './inbounds.ts'
+
+const fixture = openDocument(
+  readFileSync(join(import.meta.dir, '__fixtures__', 'config-with-comments.yaml'), 'utf8'),
+).data
+
+describe('合并两套写法的入站', () => {
+  it('只有旧写法时也能列出来，不会是空表', () => {
+    const list = collectInbounds(fixture)
+    expect(list).toHaveLength(1)
+    expect(list[0]!.port).toBe('7777')
+    expect(list[0]!.type).toBe('mixed')
+    expect(list[0]!.isDefault).toBe(true)
+    expect(list[0]!.legacyKey).toBe('mixed-port')
+  })
+
+  it('端口写 0 表示没启用，不该出现在表里', () => {
+    const list = collectInbounds({ 'mixed-port': 7777, 'socks-port': 0, port: 0 })
+    expect(list.map((i) => i.legacyKey)).toEqual(['mixed-port'])
+  })
+
+  it('新旧两套同时存在时都要列出来', () => {
+    const list = collectInbounds({
+      'mixed-port': 7777,
+      listeners: [{ name: '容器A', type: 'mixed', port: 7778, proxy: 'AUTO' }],
+    })
+    expect(list.map((i) => i.name)).toEqual(['HTTP 和 SOCKS5 共用', '容器A'])
+    expect(list[0]!.isDefault).toBe(true)
+    expect(list[1]!.isDefault).toBe(false)
+    expect(list[1]!.listenerIndex).toBe(0)
+  })
+
+  it('默认入站的出站永远是「跟着规则走」，因为旧写法没处写', () => {
+    expect(collectInbounds({ 'mixed-port': 7777 })[0]!.outbound).toEqual({ kind: 'rules' })
+  })
+})
+
+describe('出站去向的四种形态', () => {
+  const of = (proxy?: string) => {
+    // 用扩展而不是直接写 proxy: undefined —— 配置里「没有这个键」和「这个键是空」
+    // 是两回事，测试要还原真实的文件形状。
+    const listener = { name: 'x', type: 'mixed', port: 1, ...(proxy === undefined ? {} : { proxy }) }
+    return collectInbounds({ listeners: [listener] })[0]!.outbound
+  }
+
+  it('没写 proxy 就是跟着规则走', () => {
+    expect(of()).toEqual({ kind: 'rules' })
+    expect(of('')).toEqual({ kind: 'rules' })
+  })
+
+  it('DIRECT 和 GLOBAL 是内核自带的，单独成一类', () => {
+    expect(of('DIRECT')).toEqual({ kind: 'direct' })
+    expect(of('GLOBAL')).toEqual({ kind: 'global' })
+  })
+
+  it('其余都是指名道姓的出站', () => {
+    expect(of('AUTO')).toEqual({ kind: 'named', name: 'AUTO' })
+  })
+
+  it('写回时能还原成原来的字段值', () => {
+    expect(outboundToProxyField({ kind: 'rules' })).toBeUndefined()
+    expect(outboundToProxyField({ kind: 'direct' })).toBe('DIRECT')
+    expect(outboundToProxyField({ kind: 'global' })).toBe('GLOBAL')
+    expect(outboundToProxyField({ kind: 'named', name: 'AUTO' })).toBe('AUTO')
+  })
+})
+
+describe('能被入站引用的出站名字', () => {
+  it('列出内置出站、策略组和自有线路', () => {
+    const names = collectOutboundNames(fixture)
+    expect(names.groups).toEqual(['PROXY', 'AUTO'])
+    expect(names.builtins).toContain('DIRECT')
+    expect(names.builtins).toContain('GLOBAL')
+  })
+
+  it('订阅带来的线路不在其中——它们不在内核的名字表上', () => {
+    const names = collectOutboundNames(fixture)
+    // 样本里唯一的订阅是 subs，它带来的线路无法被按名字引用
+    expect(names.ownProxies).toEqual([])
+    expect([...names.groups, ...names.ownProxies, ...names.builtins]).not.toContain('subs')
+  })
+})