搭出前端骨架和入站列表

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

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

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

.gitignore

@@ -1,7 +1,7 @@
 node_modules/
 dist/
+web-dist/
 .output/
-.nuxt/
 .vite/
 *.log
 

scripts/api-smoke.ts

@@ -11,7 +11,7 @@
  * 用法：bun run scripts/api-smoke.ts [令牌]
  * 不给令牌就从配置文件旁边的 .patchbay-token 读。
  */
-import { readFile } from 'node:fs/promises'
+import { copyFile, readFile } from 'node:fs/promises'
 import { dirname, join } from 'node:path'
 import { readEnv } from '../server/env.ts'
 import type { ConfigObject } from '../vendor/config-editor/index.ts'
@@ -22,6 +22,10 @@ const token =
   process.argv[2] ??
   (await readFile(join(dirname(env.configPath), '.patchbay-token'), 'utf8')).trim()
 
+// 每次从模板重置。不重置的话第二次运行会写入和上次完全相同的内容，
+// 而「内容没变就不重载」是刻意的行为，会让「内核已重载」这一项看起来失败。
+await copyFile('./dev/config.yaml', env.configPath)
+
 let failures = 0
 function check(name: string, actual: unknown, expected: unknown) {
   if (JSON.stringify(actual) === JSON.stringify(expected)) {
@@ -56,7 +60,12 @@ check(
 )
 check('白名单外的透传被拒', (await call('GET', '/api/kernel/configs/geo')).status, 403)
 check('不存在的接口', (await call('GET', '/api/nope')).status, 404)
-check('非 api 路径', (await call('GET', '/index.html')).status, 404)
+// 静态文件不要令牌：它只是个空壳，所有数据都要带令牌才拿得到。
+check(
+  '前端页面不需要令牌',
+  (await fetch(`${base}/`)).status,
+  200,
+)
 
 // ── 配置读写 ────────────────────────────────────────────
 const snapshot = await call('GET', '/api/config')

server/routes.ts

@@ -42,12 +42,31 @@ function applyFailureStatus(stage: string): number {
   return 500 // write / reload：服务端或内核的问题
 }
 
+/** 打包后的前端。开发时前端由 Vite 提供并把 /api 转发过来，走不到这里。 */
+const WEB_DIST = new URL('../web-dist/', import.meta.url).pathname.replace(/^\/([A-Za-z]:)/, '$1')
+
+/**
+ * 静态文件不需要令牌——它们只是一个空壳，所有数据都要带令牌才拿得到。
+ * 单页应用的路由由前端接管，所以找不到的路径一律回 index.html。
+ */
+async function serveStatic(path: string): Promise<Response> {
+  const target = Bun.file(WEB_DIST + (path === '/' ? 'index.html' : path.slice(1)))
+  if (await target.exists()) return new Response(target)
+
+  const shell = Bun.file(`${WEB_DIST}index.html`)
+  if (await shell.exists()) return new Response(shell)
+  return new Response('前端还没打包。先运行 bun run build，或者开发时用 bun run dev:web。', {
+    status: 404,
+    headers: { 'Content-Type': 'text/plain; charset=utf-8' },
+  })
+}
+
 export function createRouter(env: Env, token: string) {
   return async function handle(req: Request): Promise<Response> {
     const url = new URL(req.url)
     const path = url.pathname
 
-    if (!path.startsWith('/api/')) return json({ error: '没有这个接口' }, 404)
+    if (!path.startsWith('/api/')) return serveStatic(path)
 
     if (!tokenMatches(token, tokenFromRequest(req))) {
       return json({ error: '令牌不对。它在配置文件旁边的 .patchbay-token 里。' }, 401)

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')
+  })
+})

shared/inbounds.ts

@@ -0,0 +1,143 @@
+/**
+ * 把配置文件里两套写法的入站合并成界面上的一张表。
+ *
+ * mihomo 有新旧两套声明入站的方式：
+ *   旧：顶层的 mixed-port / port / socks-port / redir-port / tproxy-port，
+ *       每种只能有一个，而且没法给它单独指定出站
+ *   新：listeners 数组，数量不限，每个都能有自己的出站和附加规则
+ *
+ * 界面上必须两边都画。只画 listeners 的话，一台只用 mixed-port 的机器打开是空板——
+ * 而实际上那个端口正在跑，这等于对用户撒谎。
+ */
+import type { ConfigObject } from '../vendor/config-editor/index.ts'
+
+/** 内核自带、不需要配置就存在的出站。 */
+export const BUILTIN_OUTBOUNDS = [
+  'DIRECT',
+  'REJECT',
+  'REJECT-DROP',
+  'PASS',
+  'PASS-RULE',
+  'COMPATIBLE',
+  'GLOBAL',
+] as const
+
+/** 旧写法的顶层端口字段，以及它们各自等价于哪种入站类型。 */
+const LEGACY_PORTS: Array<{ key: string; type: string; label: string }> = [
+  { key: 'mixed-port', type: 'mixed', label: 'HTTP 和 SOCKS5 共用' },
+  { key: 'port', type: 'http', label: 'HTTP' },
+  { key: 'socks-port', type: 'socks', label: 'SOCKS5' },
+  { key: 'redir-port', type: 'redir', label: '透明代理（REDIRECT）' },
+  { key: 'tproxy-port', type: 'tproxy', label: '透明代理（TPROXY）' },
+]
+
+/** 一路入站的出站去向。四选一，对应界面上那个下拉框。 */
+export type OutboundMode =
+  | { kind: 'rules' } // 没写 proxy，流量进分流规则
+  | { kind: 'direct' } // proxy: DIRECT
+  | { kind: 'global' } // proxy: GLOBAL
+  | { kind: 'named'; name: string } // proxy: 某个策略组或自有线路
+
+export interface Inbound {
+  /** 界面上用来定位这一行 */
+  id: string
+  name: string
+  type: string
+  /** 端口。旧写法一定是单个数字，新写法可以是 "200,302" 或 "401-429" 这类写法 */
+  port: string
+  listen: string | null
+  outbound: OutboundMode
+  /** 挂在这路入站上的附加规则组名，没有就是 null */
+  ruleSet: string | null
+  /** 旧写法声明的入站。界面上不可删除，也不能单独指定出站 */
+  isDefault: boolean
+  /** 旧写法对应的顶层字段名，用于写回。新写法为 null */
+  legacyKey: string | null
+  /** 在 listeners 数组里的下标，用于写回。旧写法为 null */
+  listenerIndex: number | null
+  /** 给人看的一句话说明，主要是给默认入站解释它为什么不能改出站 */
+  note: string | null
+}
+
+function outboundOf(proxy: unknown): OutboundMode {
+  if (typeof proxy !== 'string' || proxy === '') return { kind: 'rules' }
+  if (proxy === 'DIRECT') return { kind: 'direct' }
+  if (proxy === 'GLOBAL') return { kind: 'global' }
+  return { kind: 'named', name: proxy }
+}
+
+/** 把出站去向写回成配置里 proxy 字段该有的值。返回 undefined 表示不写这个字段。 */
+export function outboundToProxyField(mode: OutboundMode): string | undefined {
+  if (mode.kind === 'rules') return undefined
+  if (mode.kind === 'direct') return 'DIRECT'
+  if (mode.kind === 'global') return 'GLOBAL'
+  return mode.name
+}
+
+export function collectInbounds(data: ConfigObject): Inbound[] {
+  const result: Inbound[] = []
+
+  for (const { key, type, label } of LEGACY_PORTS) {
+    const raw = data[key]
+    const port = typeof raw === 'number' ? raw : Number(raw)
+    // 0 和缺省都表示没启用这个端口
+    if (!Number.isFinite(port) || port <= 0) continue
+    result.push({
+      id: `legacy:${key}`,
+      name: label,
+      type,
+      port: String(port),
+      listen: null,
+      outbound: { kind: 'rules' },
+      ruleSet: null,
+      isDefault: true,
+      legacyKey: key,
+      listenerIndex: null,
+      note: `由配置文件顶层的 ${key} 声明。这种写法没法单独指定出站，流量一律走分流规则。想让这个端口固定走某个出站，要把它改成命名入站。`,
+    })
+  }
+
+  const listeners = Array.isArray(data.listeners) ? data.listeners : []
+  listeners.forEach((entry, index) => {
+    if (typeof entry !== 'object' || entry === null) return
+    const item = entry as Record<string, unknown>
+    result.push({
+      id: `listener:${String(index)}`,
+      name: typeof item.name === 'string' ? item.name : `第 ${String(index + 1)} 个入站`,
+      type: typeof item.type === 'string' ? item.type : '',
+      port: item.port === undefined || item.port === null ? '' : String(item.port),
+      listen: typeof item.listen === 'string' ? item.listen : null,
+      outbound: outboundOf(item.proxy),
+      ruleSet: typeof item.rule === 'string' && item.rule ? item.rule : null,
+      isDefault: false,
+      legacyKey: null,
+      listenerIndex: index,
+      note: null,
+    })
+  })
+
+  return result
+}
+
+/**
+ * 所有可以被入站的出站字段引用的名字。
+ *
+ * 订阅带来的线路**不在这里**——内核按名字找出站时查的是一张由内置出站、顶层 proxies
+ * 和 proxy-groups 构成的表，订阅线路住在订阅对象里，不在表上。想让入站固定走订阅里的
+ * 某条线路，得先建一个只装它的策略组。
+ */
+export function collectOutboundNames(data: ConfigObject): {
+  builtins: string[]
+  groups: string[]
+  ownProxies: string[]
+} {
+  const groups = (Array.isArray(data['proxy-groups']) ? data['proxy-groups'] : [])
+    .map((g) => (typeof g === 'object' && g !== null ? (g as Record<string, unknown>).name : null))
+    .filter((n): n is string => typeof n === 'string')
+
+  const ownProxies = (Array.isArray(data.proxies) ? data.proxies : [])
+    .map((p) => (typeof p === 'object' && p !== null ? (p as Record<string, unknown>).name : null))
+    .filter((n): n is string => typeof n === 'string')
+
+  return { builtins: [...BUILTIN_OUTBOUNDS], groups, ownProxies }
+}

tsconfig.json

@@ -22,8 +22,17 @@
     "baseUrl": ".",
     "paths": {
       "~/*": ["./web/*"],
+      "@shared/*": ["./shared/*"],
       "@config-editor": ["./vendor/config-editor/index.ts"]
     }
   },
-  "include": ["server/**/*.ts", "web/**/*.ts", "web/**/*.vue", "vendor/**/*.ts", "*.ts"]
+  "include": [
+    "server/**/*.ts",
+    "web/**/*.ts",
+    "web/**/*.vue",
+    "shared/**/*.ts",
+    "vendor/**/*.ts",
+    "scripts/**/*.ts",
+    "*.ts"
+  ]
 }

vite.config.ts

@@ -0,0 +1,31 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import { fileURLToPath, URL } from 'node:url'
+
+/**
+ * 开发时前端跑在 5173，后端跑在 7580，接口请求转发过去。
+ * 打包后前端是纯静态文件，由后端一起提供，不存在跨域问题。
+ */
+export default defineConfig({
+  root: 'web',
+  plugins: [vue()],
+  resolve: {
+    alias: {
+      '~': fileURLToPath(new URL('./web', import.meta.url)),
+      '@shared': fileURLToPath(new URL('./shared', import.meta.url)),
+    },
+  },
+  server: {
+    port: 5173,
+    proxy: {
+      '/api': {
+        target: 'http://127.0.0.1:7580',
+        changeOrigin: false,
+      },
+    },
+  },
+  build: {
+    outDir: '../web-dist',
+    emptyOutDir: true,
+  },
+})

web/App.vue

@@ -0,0 +1,197 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue'
+import { ApiError, api, getToken, setToken } from './api'
+import type { ConfigSnapshot } from './api'
+import InboundList from './views/InboundList.vue'
+import TokenGate from './views/TokenGate.vue'
+
+const snapshot = ref<ConfigSnapshot | null>(null)
+const kernel = ref<{ online: boolean; version?: string }>({ online: false })
+const needsToken = ref(!getToken())
+const loadError = ref('')
+const loading = ref(false)
+
+async function load() {
+  loading.value = true
+  loadError.value = ''
+  try {
+    const [config, status] = await Promise.all([api.readConfig(), api.kernel()])
+    snapshot.value = config
+    kernel.value = status
+    needsToken.value = false
+  } catch (error) {
+    if (error instanceof ApiError && error.unauthorized) {
+      needsToken.value = true
+    } else {
+      loadError.value = error instanceof Error ? error.message : String(error)
+    }
+  } finally {
+    loading.value = false
+  }
+}
+
+function submitToken(value: string) {
+  setToken(value)
+  void load()
+}
+
+onMounted(() => {
+  if (!needsToken.value) void load()
+})
+
+const problems = computed(
+  () => snapshot.value?.diagnostics.filter((d) => d.severity === 'error') ?? [],
+)
+</script>
+
+<template>
+  <TokenGate v-if="needsToken" @submit="submitToken" />
+
+  <div v-else class="shell">
+    <header class="bar">
+      <div class="brand">
+        <span class="mark" aria-hidden="true"></span>
+        <span class="name">Patchbay</span>
+      </div>
+      <div class="status">
+        <span :class="['dot', kernel.online ? 'dot-ok' : 'dot-off']" aria-hidden="true"></span>
+        <span>{{ kernel.online ? `内核 ${kernel.version ?? ''}` : '内核未连接' }}</span>
+      </div>
+    </header>
+
+    <main class="page">
+      <p v-if="loading" class="hint">读取配置中…</p>
+
+      <div v-else-if="loadError" class="panel panel-bad">
+        <h2>读不到配置</h2>
+        <p>{{ loadError }}</p>
+      </div>
+
+      <template v-else-if="snapshot">
+        <div v-if="problems.length" class="panel panel-bad">
+          <h2>配置里有 {{ problems.length }} 处问题</h2>
+          <ul>
+            <li v-for="(p, i) in problems" :key="i">
+              <code>{{ p.path.join('.') }}</code> {{ p.message }}
+            </li>
+          </ul>
+        </div>
+
+        <InboundList :data="snapshot.data" :kernel-online="kernel.online" />
+      </template>
+    </main>
+  </div>
+</template>
+
+<style scoped>
+.shell {
+  display: flex;
+  flex-direction: column;
+  min-height: 100%;
+}
+
+.bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--s-4);
+  padding: var(--s-3) var(--s-6);
+  border-bottom: 1px solid var(--c-border);
+  background: var(--c-surface);
+}
+
+.brand {
+  display: flex;
+  align-items: center;
+  gap: var(--s-3);
+}
+
+/* 插线板的意象：两个接口加一条线 */
+.mark {
+  width: 22px;
+  height: 10px;
+  border: 1.5px solid var(--c-accent);
+  border-radius: 999px;
+  position: relative;
+}
+.mark::before,
+.mark::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  width: 4px;
+  height: 4px;
+  margin-top: -2px;
+  border-radius: 50%;
+  background: var(--c-accent);
+}
+.mark::before {
+  left: 2px;
+}
+.mark::after {
+  right: 2px;
+}
+
+.name {
+  font-size: var(--t-lg);
+  font-weight: 600;
+  letter-spacing: 0.01em;
+}
+
+.status {
+  display: flex;
+  align-items: center;
+  gap: var(--s-2);
+  color: var(--c-text-soft);
+  font-size: var(--t-sm);
+}
+
+.dot {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+}
+.dot-ok {
+  background: var(--c-ok);
+}
+.dot-off {
+  background: var(--c-text-faint);
+}
+
+.page {
+  flex: 1;
+  width: 100%;
+  max-width: 880px;
+  margin: 0 auto;
+  padding: var(--s-7) var(--s-6);
+}
+
+.hint {
+  color: var(--c-text-soft);
+}
+
+.panel {
+  border: 1px solid var(--c-border);
+  border-radius: var(--r-md);
+  padding: var(--s-4) var(--s-5);
+  margin-bottom: var(--s-5);
+}
+
+.panel-bad {
+  border-color: color-mix(in srgb, var(--c-danger) 35%, var(--c-border));
+  background: var(--c-danger-soft);
+}
+
+.panel h2 {
+  font-size: var(--t-base);
+  font-weight: 600;
+  margin-bottom: var(--s-2);
+}
+
+.panel ul {
+  margin: 0;
+  padding-left: 1.2em;
+  color: var(--c-text-soft);
+  font-size: var(--t-sm);
+}
+</style>

web/api.ts

@@ -0,0 +1,94 @@
+/**
+ * 后端接口的客户端。
+ *
+ * 令牌存在 localStorage 里。它等同于密码，但这个页面本来就只有能访问 127.0.0.1
+ * （或者持有 SSH 隧道）的人才打得开，存在浏览器里不额外扩大暴露面。
+ */
+import type { ConfigDiagnostic, ConfigObject } from '../vendor/config-editor/index.ts'
+
+const TOKEN_KEY = 'patchbay.token'
+
+export function getToken(): string {
+  return localStorage.getItem(TOKEN_KEY) ?? ''
+}
+
+export function setToken(value: string): void {
+  localStorage.setItem(TOKEN_KEY, value.trim())
+}
+
+export function clearToken(): void {
+  localStorage.removeItem(TOKEN_KEY)
+}
+
+/** 接口报错时抛这个，界面据此决定是提示重填令牌还是显示错误内容。 */
+export class ApiError extends Error {
+  constructor(
+    readonly status: number,
+    readonly payload: Record<string, unknown>,
+  ) {
+    super(typeof payload.message === 'string' ? payload.message : `请求失败（${String(status)}）`)
+    this.name = 'ApiError'
+  }
+
+  get unauthorized(): boolean {
+    return this.status === 401
+  }
+}
+
+async function request<T>(method: string, path: string, body?: unknown): Promise<T> {
+  const res = await fetch(path, {
+    method,
+    headers: {
+      Authorization: `Bearer ${getToken()}`,
+      ...(body === undefined ? {} : { 'Content-Type': 'application/json' }),
+    },
+    body: body === undefined ? undefined : JSON.stringify(body),
+  })
+  const text = await res.text()
+  const payload = text ? (JSON.parse(text) as Record<string, unknown>) : {}
+  if (!res.ok) throw new ApiError(res.status, payload)
+  return payload as T
+}
+
+export interface ConfigSnapshot {
+  data: ConfigObject
+  yaml: string
+  revision: string
+  diagnostics: ConfigDiagnostic[]
+}
+
+export interface ApplySuccess {
+  ok: true
+  snapshot: ConfigSnapshot
+  reloaded: boolean
+  reloadMessage: string
+}
+
+export interface ApplyFailure {
+  ok: false
+  stage: 'stale' | 'self-check' | 'kernel-check' | 'write' | 'reload'
+  message: string
+  hint: string
+  restored: boolean
+}
+
+export const api = {
+  readConfig: () => request<ConfigSnapshot>('GET', '/api/config'),
+
+  applyConfig: (data: ConfigObject, baseRevision: string) =>
+    request<ApplySuccess>('PUT', '/api/config', { data, baseRevision }),
+
+  listBackups: () => request<{ backups: string[] }>('GET', '/api/config/backups'),
+
+  restoreBackup: (name: string) =>
+    request<ApplySuccess>('POST', `/api/config/backups/${encodeURIComponent(name)}/restore`),
+
+  kernel: () => request<{ online: boolean; version?: string }>('GET', '/api/kernel'),
+
+  /** 订阅里当前有哪些线路。配置文件给不出这个答案，只能问运行中的内核。 */
+  providers: () =>
+    request<{ providers: Record<string, { vehicleType: string; proxies: { name: string }[] }> }>(
+      'GET',
+      '/api/kernel/providers/proxies',
+    ),
+}

web/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="color-scheme" content="light dark" />
+    <title>Patchbay</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="./main.ts"></script>
+  </body>
+</html>

web/main.ts

@@ -0,0 +1,5 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+import './styles/tokens.css'
+
+createApp(App).mount('#app')

web/styles/tokens.css

@@ -0,0 +1,143 @@
+/*
+ * 设计基调。
+ *
+ * 三条规则，其余都是它们的推论：
+ *   1. 层次靠底色深浅和一像素描边，不靠投影
+ *   2. 不要卡片套卡片。一屏最多两层容器，再深就换成分割线
+ *   3. 信息密度偏低。行高、间距给足，宁可多滚动也不要挤
+ *
+ * 颜色只留一个强调色，用在「当前选中」和「主要操作」上。状态色（成功/警告/危险）
+ * 只在真的表示状态时用，不拿来装饰。
+ */
+
+: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-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-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);
+}

web/views/InboundList.vue

@@ -0,0 +1,207 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { collectInbounds } from '@shared/inbounds.ts'
+import type { Inbound, OutboundMode } from '@shared/inbounds.ts'
+import type { ConfigObject } from '../../vendor/config-editor/index.ts'
+
+const props = defineProps<{ data: ConfigObject; kernelOnline: boolean }>()
+
+const inbounds = computed(() => collectInbounds(props.data))
+
+/** 出站去向在表格里怎么显示。「跟着规则走」是弱化的，因为它是默认状态而非用户的选择。 */
+function outboundLabel(mode: OutboundMode): { text: string; muted: boolean } {
+  if (mode.kind === 'rules') return { text: '跟着规则走', muted: true }
+  if (mode.kind === 'direct') return { text: '直连', muted: false }
+  if (mode.kind === 'global') return { text: '全局', muted: false }
+  return { text: mode.name, muted: false }
+}
+
+function typeLabel(inbound: Inbound): string {
+  if (inbound.type === 'mixed') return 'HTTP + SOCKS5'
+  if (inbound.type === 'http') return 'HTTP'
+  if (inbound.type === 'socks') return 'SOCKS5'
+  if (inbound.type === 'redir') return '透明代理'
+  if (inbound.type === 'tproxy') return '透明代理'
+  return inbound.type
+}
+</script>
+
+<template>
+  <section>
+    <header class="head">
+      <div>
+        <h2>入站</h2>
+        <p class="sub">每一路进来的流量，以及它从哪里出去。</p>
+      </div>
+      <button class="add" type="button" disabled title="下一步做">新增</button>
+    </header>
+
+    <ol class="rows">
+      <li v-for="inbound in inbounds" :key="inbound.id" class="row">
+        <div class="port">
+          <span class="num">{{ inbound.port }}</span>
+          <span class="type">{{ typeLabel(inbound) }}</span>
+        </div>
+
+        <div class="mid">
+          <div class="name">
+            {{ inbound.name }}
+            <span v-if="inbound.isDefault" class="tag">默认</span>
+          </div>
+          <div v-if="inbound.listen" class="listen mono">{{ inbound.listen }}</div>
+        </div>
+
+        <div class="wire" aria-hidden="true"></div>
+
+        <div class="out">
+          <span :class="['out-text', outboundLabel(inbound.outbound).muted && 'is-muted']">
+            {{ outboundLabel(inbound.outbound).text }}
+          </span>
+          <span v-if="inbound.ruleSet" class="ruleset">附加规则 {{ inbound.ruleSet }}</span>
+        </div>
+      </li>
+    </ol>
+
+    <p v-if="inbounds.length === 0" class="empty">
+      这份配置里没有任何入站。mihomo 不会监听任何端口。
+    </p>
+
+    <p v-if="inbounds.some((i) => i.isDefault)" class="footnote">
+      标着「默认」的入站由配置文件顶层的端口字段声明，这种写法没法单独指定出站，流量一律走分流规则。
+    </p>
+  </section>
+</template>
+
+<style scoped>
+.head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--s-4);
+  margin-bottom: var(--s-5);
+}
+
+h2 {
+  font-size: var(--t-xl);
+  font-weight: 600;
+  letter-spacing: -0.01em;
+}
+
+.sub {
+  color: var(--c-text-soft);
+  font-size: var(--t-sm);
+  margin-top: var(--s-1);
+}
+
+.add {
+  padding: var(--s-2) var(--s-4);
+  border: 1px solid var(--c-border-strong);
+  border-radius: var(--r-sm);
+  background: var(--c-surface);
+  cursor: pointer;
+}
+.add:disabled {
+  color: var(--c-text-faint);
+  cursor: not-allowed;
+}
+
+/* 一层容器，内部用分割线分行——不做卡片套卡片 */
+.rows {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  border: 1px solid var(--c-border);
+  border-radius: var(--r-md);
+  background: var(--c-surface);
+  overflow: hidden;
+}
+
+.row {
+  display: grid;
+  grid-template-columns: 7.5rem 1fr 3rem minmax(8rem, auto);
+  align-items: center;
+  gap: var(--s-4);
+  padding: var(--s-4) var(--s-5);
+}
+
+.row + .row {
+  border-top: 1px solid var(--c-border);
+}
+
+.port {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.num {
+  font-family: var(--f-mono);
+  font-size: var(--t-lg);
+  font-variant-numeric: tabular-nums;
+}
+
+.type {
+  font-size: var(--t-xs);
+  color: var(--c-text-faint);
+}
+
+.name {
+  display: flex;
+  align-items: center;
+  gap: var(--s-2);
+}
+
+.tag {
+  padding: 1px var(--s-2);
+  border: 1px solid var(--c-border-strong);
+  border-radius: 999px;
+  font-size: var(--t-xs);
+  color: var(--c-text-soft);
+  line-height: 1.5;
+}
+
+.listen {
+  font-size: var(--t-xs);
+  color: var(--c-text-faint);
+}
+
+/* 插线板的那根线。它承载的信息是「左边这个口通向右边那个出口」 */
+.wire {
+  height: 1px;
+  background: linear-gradient(
+    to right,
+    var(--c-border-strong),
+    color-mix(in srgb, var(--c-accent) 55%, transparent)
+  );
+}
+
+.out {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 2px;
+  text-align: right;
+}
+
+.out-text {
+  font-weight: 500;
+}
+
+.out-text.is-muted {
+  font-weight: 400;
+  color: var(--c-text-faint);
+}
+
+.ruleset {
+  font-size: var(--t-xs);
+  color: var(--c-text-faint);
+}
+
+.empty,
+.footnote {
+  color: var(--c-text-faint);
+  font-size: var(--t-sm);
+  margin-top: var(--s-4);
+  line-height: 1.7;
+}
+</style>

web/views/TokenGate.vue

@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const emit = defineEmits<{ submit: [token: string] }>()
+const value = ref('')
+</script>
+
+<template>
+  <div class="gate">
+    <form class="box" @submit.prevent="emit('submit', value)">
+      <h1>Patchbay</h1>
+      <p class="lead">输入访问令牌。</p>
+      <input
+        v-model="value"
+        class="field mono"
+        type="password"
+        autocomplete="off"
+        spellcheck="false"
+        placeholder="令牌"
+        autofocus
+      />
+      <button class="go" type="submit" :disabled="!value.trim()">进入</button>
+      <p class="where">
+        令牌在服务端配置文件旁边的 <code>.patchbay-token</code> 里，启动时也会打印在控制台上。
+      </p>
+    </form>
+  </div>
+</template>
+
+<style scoped>
+.gate {
+  display: grid;
+  place-items: center;
+  min-height: 100%;
+  padding: var(--s-6);
+}
+
+.box {
+  width: 100%;
+  max-width: 360px;
+  display: flex;
+  flex-direction: column;
+  gap: var(--s-3);
+}
+
+h1 {
+  font-size: var(--t-2xl);
+  font-weight: 600;
+  letter-spacing: -0.01em;
+}
+
+.lead {
+  color: var(--c-text-soft);
+  margin-bottom: var(--s-2);
+}
+
+.field {
+  width: 100%;
+  padding: var(--s-3) var(--s-4);
+  border: 1px solid var(--c-border-strong);
+  border-radius: var(--r-sm);
+  background: var(--c-surface);
+}
+
+.field:focus {
+  border-color: var(--c-accent);
+  outline: none;
+}
+
+.go {
+  padding: var(--s-3) var(--s-4);
+  border: 1px solid transparent;
+  border-radius: var(--r-sm);
+  background: var(--c-accent);
+  color: #fff;
+  font-weight: 500;
+  cursor: pointer;
+}
+
+.go:disabled {
+  background: var(--c-surface-sunken);
+  color: var(--c-text-faint);
+  border-color: var(--c-border);
+  cursor: not-allowed;
+}
+
+.where {
+  color: var(--c-text-faint);
+  font-size: var(--t-sm);
+  line-height: 1.6;
+  margin-top: var(--s-2);
+}
+</style>