搭出前端骨架和入站列表

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

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

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

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