改成左右布局，接上图标，措辞换成配置里的原词

图标用 unplugin-icons 在打包时内联成 SVG，运行时不发网络请求——目标机器可能没外网，
而且一个图标一次请求对 2 核的机器不划算。autoInstall 关掉，不让构建过程偷偷联网装东西。

出站显示从「跟着规则走」改成 RULE，其余解释性长句删掉或收进 title。
新增了紧凑模式（只显示图标），默认关：这工具是隔一阵子才动一次的，纯图标对偶尔来的人不友好。

bun.lock

@@ -9,15 +9,20 @@
         "yaml": "^2.9.0",
       },
       "devDependencies": {
+        "@iconify-json/ri": "^1.2.10",
+        "@iconify/utils": "^3.1.4",
         "@types/bun": "latest",
         "@vitejs/plugin-vue": "^6.0.0",
         "typescript": "^5.7.3",
+        "unplugin-icons": "^23.0.1",
         "vite": "^7.0.0",
         "vue-tsc": "^3.0.0",
       },
     },
   },
   "packages": {
+    "@antfu/install-pkg": ["@antfu/install-pkg@1.1.0", "", { "dependencies": { "package-manager-detector": "^1.3.0", "tinyexec": "^1.0.1" } }, "sha512-MGQsmw10ZyI+EJo45CdSER4zEb+p31LpDAFp2Z3gkSd1yqVZGi0Ebx++YTEMonJy4oChEMLsxZ64j8FH6sSqtQ=="],
+
     "@babel/helper-string-parser": ["@babel/helper-string-parser@7.29.7", "", {}, "sha512-Pb5ijPrZ89GDH8223L4UP8i6QApWxs04RbPQJTeWDV0/keR2E36MeKnyr6LYmUUvqRRI+Iv87SuF1W6ErINzYw=="],
 
     "@babel/helper-validator-identifier": ["@babel/helper-validator-identifier@7.29.7", "", {}, "sha512-qehxGkRj55h/ff8EMaJ+cYhyaKlHIxqYDn682wQD7RNp9UujOQsHog2uS0r2vzr4pW+sXf90NeeayjcNaX3fFg=="],
@@ -78,8 +83,22 @@
 
     "@esbuild/win32-x64": ["@esbuild/win32-x64@0.28.2", "", { "os": "win32", "cpu": "x64" }, "sha512-5ebpxr3nWMzrL/rnUI755Jkuee0bHL/Gq0WTF9lvcpv73wAp5eu8MfBUgWK9bhWvZjj7yX8etf/8tI8Ney695g=="],
 
+    "@iconify-json/ri": ["@iconify-json/ri@1.2.10", "", { "dependencies": { "@iconify/types": "*" } }, "sha512-WWMhoncVVM+Xmu9T5fgu2lhYRrKTEWhKk3Com0KiM111EeEsRLiASjpsFKnC/SrB6covhUp95r2mH8tGxhgd5Q=="],
+
+    "@iconify/types": ["@iconify/types@2.0.0", "", {}, "sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg=="],
+
+    "@iconify/utils": ["@iconify/utils@3.1.4", "", { "dependencies": { "@antfu/install-pkg": "^1.1.0", "@iconify/types": "^2.0.0", "import-meta-resolve": "^4.2.0" } }, "sha512-b1S7B1k9ohZ+iNTi2ATxbRYG9fTrJmUT0rc46bvVnNxqNRGW7dyo/vRREwyniI5IRN2RSJHDcm+s3BjWrSAjHw=="],
+
+    "@jridgewell/gen-mapping": ["@jridgewell/gen-mapping@0.3.13", "", { "dependencies": { "@jridgewell/sourcemap-codec": "^1.5.0", "@jridgewell/trace-mapping": "^0.3.24" } }, "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA=="],
+
+    "@jridgewell/remapping": ["@jridgewell/remapping@2.3.5", "", { "dependencies": { "@jridgewell/gen-mapping": "^0.3.5", "@jridgewell/trace-mapping": "^0.3.24" } }, "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ=="],
+
+    "@jridgewell/resolve-uri": ["@jridgewell/resolve-uri@3.1.2", "", {}, "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw=="],
+
     "@jridgewell/sourcemap-codec": ["@jridgewell/sourcemap-codec@1.5.5", "", {}, "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og=="],
 
+    "@jridgewell/trace-mapping": ["@jridgewell/trace-mapping@0.3.31", "", { "dependencies": { "@jridgewell/resolve-uri": "^3.1.0", "@jridgewell/sourcemap-codec": "^1.4.14" } }, "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw=="],
+
     "@napi-rs/lzma-linux-x64-gnu": ["@napi-rs/lzma-linux-x64-gnu@1.5.1", "", { "os": "linux", "cpu": "x64" }, "sha512-oTXEIha4SsuXdTA4Iyskj0kpdx2yVXdhd75c2v3xGrHFfVMsbhTPZU/nMPL4sWKo4pBHm3aucLaqGlF696dTyQ=="],
 
     "@rolldown/pluginutils": ["@rolldown/pluginutils@1.0.1", "", {}, "sha512-2j9bGt5Jh8hj+vPtgzPtl72j0yRxHAyumoo6TNfAjsLB04UtpSvPbPcDcBMxz7n+9CYB0c1GxQFxYRg2jimqGw=="],
@@ -168,10 +187,14 @@
 
     "@vue/shared": ["@vue/shared@3.5.41", "", {}, "sha512-IOnwSCma8j+9xJT6b8H0dEYidC80NsYmNMlZxRsukYcSoGaDBohog5hDxzeUXdFeGWFA++vWvxqOmrr96VlqMA=="],
 
+    "acorn": ["acorn@8.18.0", "", { "bin": { "acorn": "bin/acorn" } }, "sha512-lGq+9yr1/GuAWaVYIHRjvvySG5/4VfKIvC8EWxStPdcDh/Ka7FG3twP6v4d5BkravUilhIAsG4Qj83t02LWUPQ=="],
+
     "alien-signals": ["alien-signals@3.2.1", "", {}, "sha512-I8FjmltrfnDFoZedi5CG8DghVYNhzb/Ijluz7tCSJH0xpd0484Kowhbb1XDYOxfJpU1p5wnM2X54dA+IfGyD1g=="],
 
     "bun-types": ["bun-types@1.3.14", "", { "dependencies": { "@types/node": "*" } }, "sha512-4N0ig0fEomHt5R0KCFWjovxow98rIoRwKolrYdCcknNwMekCXRnWEUvgu5soYV8QXtVsrUD8B95MBOZGPvr6KQ=="],
 
+    "confbox": ["confbox@0.2.4", "", {}, "sha512-ysOGlgTFbN2/Y6Cg3Iye8YKulHw+R2fNXHrgSmXISQdMnomY6eNDprVdW9R5xBguEqI954+S6709UyiO7B+6OQ=="],
+
     "csstype": ["csstype@3.2.3", "", {}, "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ=="],
 
     "entities": ["entities@7.0.1", "", {}, "sha512-TWrgLOFUQTH994YUyl1yT4uyavY5nNB5muff+RtWaqNVCAK408b5ZnnbNAUEWLTCpum9w6arT70i1XdQ4UeOPA=="],
@@ -180,34 +203,60 @@
 
     "estree-walker": ["estree-walker@2.0.2", "", {}, "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="],
 
+    "exsolve": ["exsolve@1.1.1", "", {}, "sha512-9U/jZUgjnSGyntRr6y5Muu1MJcwFl6kPu7k8qLF0IMNfLqvw0NZ4nnVDq0RVoZ0RvCyumib4Ez3KYrVfilrw+g=="],
+
     "fdir": ["fdir@6.5.0", "", { "peerDependencies": { "picomatch": "^3 || ^4" }, "optionalPeers": ["picomatch"] }, "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg=="],
 
     "fsevents": ["fsevents@2.3.3", "", { "os": "darwin" }, "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw=="],
 
+    "import-meta-resolve": ["import-meta-resolve@4.2.0", "", {}, "sha512-Iqv2fzaTQN28s/FwZAoFq0ZSs/7hMAHJVX+w8PZl3cY19Pxk6jFFalxQoIfW2826i/fDLXv8IiEZRIT0lDuWcg=="],
+
+    "local-pkg": ["local-pkg@1.2.1", "", { "dependencies": { "mlly": "^1.7.4", "pkg-types": "^2.3.0", "quansync": "^0.2.11" } }, "sha512-++gUqRDEvcnN6Zhqrr+y/CkVEHhlrR96vZn3nZZPYzMcBUyBtTKzB9NadClFIsIVSsu+3i9tfk/erqy9kAmt7Q=="],
+
     "magic-string": ["magic-string@0.30.21", "", { "dependencies": { "@jridgewell/sourcemap-codec": "^1.5.5" } }, "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ=="],
 
+    "mlly": ["mlly@1.8.2", "", { "dependencies": { "acorn": "^8.16.0", "pathe": "^2.0.3", "pkg-types": "^1.3.1", "ufo": "^1.6.3" } }, "sha512-d+ObxMQFmbt10sretNDytwt85VrbkhhUA/JBGm1MPaWJ65Cl4wOgLaB1NYvJSZ0Ef03MMEU/0xpPMXUIQ29UfA=="],
+
     "muggle-string": ["muggle-string@0.4.1", "", {}, "sha512-VNTrAak/KhO2i8dqqnqnAHOa3cYBwXEZe9h+D5h/1ZqFSTEFHdM65lR7RoIqq3tBBYavsOXV84NoHXZ0AkPyqQ=="],
 
     "nanoid": ["nanoid@3.3.18", "", { "bin": { "nanoid": "bin/nanoid.cjs" } }, "sha512-DTg4MJbGMWkfi6VZFdNt2/caMbQy4Ou+Op/hJQvGEWcnVfoA1QA+xzRKAzw9jD6+GVOOeYr/mIcuDSdug6F6+w=="],
 
+    "obug": ["obug@2.1.4", "", {}, "sha512-4a+OsYv9UktOJKE+l1A4OufDgdRF9PifWj+tJnHURo/P+WOxpG4GzUFL9qCalmWauao6ogiG+QvnCovwPoyAWA=="],
+
+    "package-manager-detector": ["package-manager-detector@1.8.0", "", {}, "sha512-yQA4H19AmPEoMUeavPMDIe1higySl/gH/yaQrkT/s07Qp+7pp2hYz30N3z2l5BkjVkF9Ow6o0wjJamm2y7Sn0A=="],
+
     "path-browserify": ["path-browserify@1.0.1", "", {}, "sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g=="],
 
+    "pathe": ["pathe@2.0.3", "", {}, "sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w=="],
+
     "picocolors": ["picocolors@1.1.1", "", {}, "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA=="],
 
     "picomatch": ["picomatch@4.0.5", "", {}, "sha512-RvwwcruNjI1ncT5xRakeyS9Lf8lcItv34KD+aif+VH9kduAyfYBipGh12274xtenIPZ119/R9BdTBa8gAwSh0A=="],
 
+    "pkg-types": ["pkg-types@2.3.1", "", { "dependencies": { "confbox": "^0.2.4", "exsolve": "^1.0.8", "pathe": "^2.0.3" } }, "sha512-y+ichcgc2LrADuhLNAx8DFjVfgz91pRxfZdI3UDhxHvcVEZsenLO+7XaU5vOp0u/7V/wZ+plyuQxtrDlZJ+yeg=="],
+
     "postcss": ["postcss@8.5.26", "", { "dependencies": { "nanoid": "^3.3.17", "picocolors": "^1.1.1", "source-map-js": "^1.2.1" } }, "sha512-u82N74LFzG8ca+dD8puPnplTXoGH4fTPpVGuIbt36G3qvNlkvfD0lEAZSxaly3KX8TS/L1A1gsCEmvKmBcVbkQ=="],
 
+    "quansync": ["quansync@0.2.11", "", {}, "sha512-AifT7QEbW9Nri4tAwR5M/uzpBuqfZf+zwaEM/QkzEjj7NBuFD2rBuy0K3dE+8wltbezDV7JMA0WfnCPYRSYbXA=="],
+
     "rollup": ["rollup@4.62.4", "", { "dependencies": { "@types/estree": "1.0.9" }, "optionalDependencies": { "@napi-rs/lzma-linux-x64-gnu": "1.5.1", "@rollup/rollup-android-arm-eabi": "4.62.4", "@rollup/rollup-android-arm64": "4.62.4", "@rollup/rollup-darwin-arm64": "4.62.4", "@rollup/rollup-darwin-x64": "4.62.4", "@rollup/rollup-freebsd-arm64": "4.62.4", "@rollup/rollup-freebsd-x64": "4.62.4", "@rollup/rollup-linux-arm-gnueabihf": "4.62.4", "@rollup/rollup-linux-arm-musleabihf": "4.62.4", "@rollup/rollup-linux-arm64-gnu": "4.62.4", "@rollup/rollup-linux-arm64-musl": "4.62.4", "@rollup/rollup-linux-loong64-gnu": "4.62.4", "@rollup/rollup-linux-loong64-musl": "4.62.4", "@rollup/rollup-linux-ppc64-gnu": "4.62.4", "@rollup/rollup-linux-ppc64-musl": "4.62.4", "@rollup/rollup-linux-riscv64-gnu": "4.62.4", "@rollup/rollup-linux-riscv64-musl": "4.62.4", "@rollup/rollup-linux-s390x-gnu": "4.62.4", "@rollup/rollup-linux-x64-gnu": "4.62.4", "@rollup/rollup-linux-x64-musl": "4.62.4", "@rollup/rollup-openbsd-x64": "4.62.4", "@rollup/rollup-openharmony-arm64": "4.62.4", "@rollup/rollup-win32-arm64-msvc": "4.62.4", "@rollup/rollup-win32-ia32-msvc": "4.62.4", "@rollup/rollup-win32-x64-gnu": "4.62.4", "@rollup/rollup-win32-x64-msvc": "4.62.4", "fsevents": "~2.3.2" }, "bin": { "rollup": "dist/bin/rollup" } }, "sha512-RXOqwaPsBGjMNMa4sQjDjHieHEZDFoj/Rdr46l2MU5DfEs16wHJPC2RPTPHWhNl+M3aI472LLqFkFKut4SblOg=="],
 
     "source-map-js": ["source-map-js@1.2.1", "", {}, "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA=="],
 
+    "tinyexec": ["tinyexec@1.3.0", "", {}, "sha512-QKAl9m8gWWGHV8jZcPeym6j+XULi6tOf1mT83WYJ4Lk2ytW/uwAWkrP0uFsdoYMdueVJ0qs26wZ+23xeB4ibNQ=="],
+
     "tinyglobby": ["tinyglobby@0.2.17", "", { "dependencies": { "fdir": "^6.5.0", "picomatch": "^4.0.4" } }, "sha512-wXR/dYpcqKmfWpEdZjiKJOwCNFndD0DMnrW/cYjVGttEkBfVgcLFHoNrlj47mjOVic9yyNu65alsgF4NQyTa2g=="],
 
     "typescript": ["typescript@5.9.3", "", { "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" } }, "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw=="],
 
+    "ufo": ["ufo@1.6.4", "", {}, "sha512-JFNbkD1Svwe0KvGi8GOeLcP4kAWQ609twvCdcHxq1oSL8svv39ZuSvajcD8B+5D0eL4+s1Is2D/O6KN3qcTeRA=="],
+
     "undici-types": ["undici-types@8.3.0", "", {}, "sha512-j375ScV60dom+YkPFIfTLcOiPxkN/buHz5GobjLhixFuANaNs3C9l4GmrWqejgXWJ7BbJcFYpTEUkS1Ge8bpZQ=="],
 
+    "unplugin": ["unplugin@2.3.11", "", { "dependencies": { "@jridgewell/remapping": "^2.3.5", "acorn": "^8.15.0", "picomatch": "^4.0.3", "webpack-virtual-modules": "^0.6.2" } }, "sha512-5uKD0nqiYVzlmCRs01Fhs2BdkEgBS3SAVP6ndrBsuK42iC2+JHyxM05Rm9G8+5mkmRtzMZGY8Ct5+mliZxU/Ww=="],
+
+    "unplugin-icons": ["unplugin-icons@23.0.1", "", { "dependencies": { "@antfu/install-pkg": "^1.1.0", "@iconify/utils": "^3.1.0", "local-pkg": "^1.1.2", "obug": "^2.1.1", "unplugin": "^2.3.11" }, "peerDependencies": { "@svgr/core": ">=7.0.0", "@svgx/core": "^1.0.1", "@vue/compiler-sfc": "^3.0.2", "svelte": "^3.0.0 || ^4.0.0 || ^5.0.0" }, "optionalPeers": ["@svgr/core", "@svgx/core", "@vue/compiler-sfc", "svelte"] }, "sha512-rv0XEJepajKzDLvRUWASM8K+8+/CCfZn2jtogXqg6RIp7kpatRc/aFrVJn8ANQA09e++lPEEv9yX8cC9enc+QQ=="],
+
     "vite": ["vite@7.3.6", "", { "dependencies": { "esbuild": "^0.27.0 || ^0.28.0", "fdir": "^6.5.0", "picomatch": "^4.0.3", "postcss": "^8.5.6", "rollup": "^4.43.0", "tinyglobby": "^0.2.15" }, "optionalDependencies": { "fsevents": "~2.3.3" }, "peerDependencies": { "@types/node": "^20.19.0 || >=22.12.0", "jiti": ">=1.21.0", "less": "^4.0.0", "lightningcss": "^1.21.0", "sass": "^1.70.0", "sass-embedded": "^1.70.0", "stylus": ">=0.54.8", "sugarss": "^5.0.0", "terser": "^5.16.0", "tsx": "^4.8.1", "yaml": "^2.4.2" }, "optionalPeers": ["@types/node", "jiti", "less", "lightningcss", "sass", "sass-embedded", "stylus", "sugarss", "terser", "tsx", "yaml"], "bin": { "vite": "bin/vite.js" } }, "sha512-4XP60spRGjSZFf1qYH+dJIkK2znL3zQfl9KkOV9MkkRR/3Dls0dxaBsQPTloEc5BLXWPL9vsOxopxyKoMmDueg=="],
 
     "vscode-uri": ["vscode-uri@3.1.0", "", {}, "sha512-/BpdSx+yCQGnCvecbyXdxHDkuk55/G3xwnC0GqY4gmQ3j+A+g8kzzgB4Nk/SINjqn6+waqw3EgbVF2QKExkRxQ=="],
@@ -216,6 +265,12 @@
 
     "vue-tsc": ["vue-tsc@3.3.9", "", { "dependencies": { "@volar/typescript": "2.4.28", "@vue/language-core": "3.3.9" }, "peerDependencies": { "typescript": ">=5.0.0" }, "bin": { "vue-tsc": "bin/vue-tsc.js" } }, "sha512-TS3Y1ux/IRoE8OCP2PpACAeOseuIs0UvWrcr7u+w3PmfY+SlCfEf8zjrBgnQksHUgLpthi5vHlffcQTQTdPBZA=="],
 
+    "webpack-virtual-modules": ["webpack-virtual-modules@0.6.2", "", {}, "sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ=="],
+
     "yaml": ["yaml@2.9.0", "", { "bin": { "yaml": "bin.mjs" } }, "sha512-2AvhNX3mb8zd6Zy7INTtSpl1F15HW6Wnqj0srWlkKLcpYl/gMIMJiyuGq2KeI2YFxUPjdlB+3Lc10seMLtL4cA=="],
+
+    "mlly/pkg-types": ["pkg-types@1.3.1", "", { "dependencies": { "confbox": "^0.1.8", "mlly": "^1.7.4", "pathe": "^2.0.1" } }, "sha512-/Jm5M4RvtBFVkKWRu2BLUTNP8/M2a+UwuAX+ae4770q1qVGtfjG+WTCupoZixokjmHiry8uI+dlY8KXYV5HVVQ=="],
+
+    "mlly/pkg-types/confbox": ["confbox@0.1.8", "", {}, "sha512-RMtmw0iFkeR4YV+fUOSucriAQNb9g8zFR52MWCtl+cCZOFRNL6zeB395vPzFhEjjn4fMxXudmELnl/KF/WrK6w=="],
   }
 }

package.json

@@ -20,9 +20,12 @@
     "vue": "^3.5.13"
   },
   "devDependencies": {
+    "@iconify-json/ri": "^1.2.10",
+    "@iconify/utils": "^3.1.4",
     "@types/bun": "latest",
     "@vitejs/plugin-vue": "^6.0.0",
     "typescript": "^5.7.3",
+    "unplugin-icons": "^23.0.1",
     "vite": "^7.0.0",
     "vue-tsc": "^3.0.0"
   }

tsconfig.json

@@ -4,7 +4,7 @@
     "module": "ESNext",
     "moduleResolution": "bundler",
     "lib": ["ESNext", "DOM", "DOM.Iterable"],
-    "types": ["bun", "vite/client"],
+    "types": ["bun", "vite/client", "unplugin-icons/types/vue"],
 
     "strict": true,
     "noUncheckedIndexedAccess": true,

vite.config.ts

@@ -1,5 +1,6 @@
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
+import Icons from 'unplugin-icons/vite'
 import { fileURLToPath, URL } from 'node:url'
 
 /**
@@ -8,7 +9,13 @@ import { fileURLToPath, URL } from 'node:url'
  */
 export default defineConfig({
   root: 'web',
-  plugins: [vue()],
+  plugins: [
+    vue(),
+    // 图标在打包时作为内联 SVG 编进产物，运行时不发任何网络请求——
+    // 目标机器可能没有外网，而且一个图标一次请求对 2 核的机器也不划算。
+    // autoInstall 关掉：要用哪套图标必须显式装进 package.json，不让构建过程偷偷联网。
+    Icons({ compiler: 'vue3', autoInstall: false }),
+  ],
   resolve: {
     alias: {
       '~': fileURLToPath(new URL('./web', import.meta.url)),

web/App.vue

@@ -2,14 +2,19 @@
 import { computed, onMounted, ref } from 'vue'
 import { ApiError, api, getToken, setToken } from './api'
 import type { ConfigSnapshot } from './api'
+import { NAV } from './nav'
+import { density, toggleDensity } from './prefs'
 import InboundList from './views/InboundList.vue'
 import TokenGate from './views/TokenGate.vue'
+import IconFold from '~icons/ri/sidebar-fold-line'
+import IconUnfold from '~icons/ri/sidebar-unfold-line'
 
 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)
+const active = ref('router')
 
 async function load() {
   loading.value = true
@@ -42,34 +47,61 @@ onMounted(() => {
 const problems = computed(
   () => snapshot.value?.diagnostics.filter((d) => d.severity === 'error') ?? [],
 )
+const current = computed(() => NAV.find((n) => n.key === active.value))
 </script>
 
 <template>
   <TokenGate v-if="needsToken" @submit="submitToken" />
 
-  <div v-else class="shell">
+  <div v-else :class="['shell', density === 'compact' && 'is-compact']">
-    <header class="bar">
+    <nav class="side">
       <div class="brand">
         <span class="mark" aria-hidden="true"></span>
-        <span class="name">Patchbay</span>
+        <span class="brand-name">Patchbay</span>
       </div>
-      <div class="status">
+
+      <ul class="nav">
+        <li v-for="item in NAV" :key="item.key">
+          <button
+            type="button"
+            :class="['nav-item', active === item.key && 'is-active']"
+            :title="item.label"
+            @click="active = item.key"
+          >
+            <component :is="item.icon" class="nav-icon" />
+            <span class="nav-label">{{ item.label }}</span>
+          </button>
+        </li>
+      </ul>
+
+      <div class="side-foot">
+        <div class="kernel" :title="kernel.online ? kernel.version : '内核未连接'">
           <span :class="['dot', kernel.online ? 'dot-ok' : 'dot-off']" aria-hidden="true"></span>
-        <span>{{ kernel.online ? `内核 ${kernel.version ?? ''}` : '内核未连接' }}</span>
+          <span class="kernel-text mono">{{ kernel.online ? kernel.version : 'offline' }}</span>
         </div>
-    </header>
+        <button
+          type="button"
+          class="densify"
+          :title="density === 'full' ? '只显示图标' : '显示图标和文字'"
+          @click="toggleDensity"
+        >
+          <IconFold v-if="density === 'full'" />
+          <IconUnfold v-else />
+        </button>
+      </div>
+    </nav>
 
-    <main class="page">
+    <main class="main">
-      <p v-if="loading" class="hint">读取配置中…</p>
+      <p v-if="loading" class="note">读取中</p>
 
-      <div v-else-if="loadError" class="panel panel-bad">
+      <div v-else-if="loadError" class="alert">
         <h2>读不到配置</h2>
         <p>{{ loadError }}</p>
       </div>
 
       <template v-else-if="snapshot">
-        <div v-if="problems.length" class="panel panel-bad">
+        <div v-if="problems.length" class="alert">
-          <h2>配置里有 {{ problems.length }} 处问题</h2>
+          <h2>{{ problems.length }} 处问题</h2>
           <ul>
             <li v-for="(p, i) in problems" :key="i">
               <code>{{ p.path.join('.') }}</code> {{ p.message }}
@@ -77,7 +109,12 @@ const problems = computed(
           </ul>
         </div>
 
-        <InboundList :data="snapshot.data" :kernel-online="kernel.online" />
+        <InboundList v-if="active === 'router'" :data="snapshot.data" />
+
+        <div v-else class="note">
+          <component :is="current?.icon" class="note-icon" />
+          <p>{{ current?.label }}还没做</p>
+        </div>
       </template>
     </main>
   </div>
@@ -85,18 +122,22 @@ const problems = computed(
 
 <style scoped>
 .shell {
-  display: flex;
+  display: grid;
-  flex-direction: column;
+  grid-template-columns: 184px 1fr;
   min-height: 100%;
 }
 
-.bar {
+.shell.is-compact {
+  grid-template-columns: 56px 1fr;
+}
+
+/* ── 侧栏 ───────────────────────────────────── */
+.side {
   display: flex;
-  align-items: center;
+  flex-direction: column;
-  justify-content: space-between;
+  gap: var(--s-5);
-  gap: var(--s-4);
+  padding: var(--s-4) var(--s-3);
-  padding: var(--s-3) var(--s-6);
+  border-right: 1px solid var(--c-border);
-  border-bottom: 1px solid var(--c-border);
   background: var(--c-surface);
 }
 
@@ -104,10 +145,11 @@ const problems = computed(
   display: flex;
   align-items: center;
   gap: var(--s-3);
+  padding: var(--s-2) var(--s-2);
 }
 
-/* 插线板的意象：两个接口加一条线 */
 .mark {
+  flex: none;
   width: 22px;
   height: 10px;
   border: 1.5px solid var(--c-accent);
@@ -132,21 +174,73 @@ const problems = computed(
   right: 2px;
 }
 
-.name {
+.brand-name {
-  font-size: var(--t-lg);
   font-weight: 600;
   letter-spacing: 0.01em;
+  white-space: nowrap;
 }
 
-.status {
+.nav {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  flex: 1;
+}
+
+.nav-item {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: var(--s-3);
+  padding: var(--s-2) var(--s-2);
+  border: 1px solid transparent;
+  border-radius: var(--r-sm);
+  background: none;
+  color: var(--c-text-soft);
+  cursor: pointer;
+  text-align: left;
+  white-space: nowrap;
+}
+
+.nav-item:hover {
+  background: var(--c-surface-sunken);
+  color: var(--c-text);
+}
+
+.nav-item.is-active {
+  background: var(--c-accent-soft);
+  border-color: color-mix(in srgb, var(--c-accent) 25%, transparent);
+  color: var(--c-accent-text);
+}
+
+.nav-icon {
+  flex: none;
+  width: 18px;
+  height: 18px;
+}
+
+.side-foot {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--s-2);
+  padding: 0 var(--s-2);
+}
+
+.kernel {
   display: flex;
   align-items: center;
   gap: var(--s-2);
-  color: var(--c-text-soft);
+  min-width: 0;
-  font-size: var(--t-sm);
+  color: var(--c-text-faint);
+  font-size: var(--t-xs);
 }
 
 .dot {
+  flex: none;
   width: 7px;
   height: 7px;
   border-radius: 50%;
@@ -158,37 +252,78 @@ const problems = computed(
   background: var(--c-text-faint);
 }
 
-.page {
+.kernel-text {
-  flex: 1;
+  overflow: hidden;
-  width: 100%;
+  text-overflow: ellipsis;
-  max-width: 880px;
-  margin: 0 auto;
-  padding: var(--s-7) var(--s-6);
 }
 
-.hint {
+.densify {
-  color: var(--c-text-soft);
+  flex: none;
+  display: grid;
+  place-items: center;
+  width: 26px;
+  height: 26px;
+  border: 1px solid transparent;
+  border-radius: var(--r-sm);
+  background: none;
+  color: var(--c-text-faint);
+  cursor: pointer;
+}
+.densify:hover {
+  background: var(--c-surface-sunken);
+  color: var(--c-text);
 }
 
-.panel {
+/* 紧凑模式：文字收起来，只留图标 */
-  border: 1px solid var(--c-border);
+.is-compact .brand-name,
+.is-compact .nav-label,
+.is-compact .kernel-text {
+  display: none;
+}
+.is-compact .brand,
+.is-compact .nav-item {
+  justify-content: center;
+  padding-left: 0;
+  padding-right: 0;
+}
+.is-compact .side-foot {
+  flex-direction: column;
+}
+
+/* ── 主区 ───────────────────────────────────── */
+.main {
+  padding: var(--s-6) var(--s-6) var(--s-7);
+  max-width: 960px;
+}
+
+.note {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--s-3);
+  color: var(--c-text-faint);
+}
+
+.note-icon {
+  width: 24px;
+  height: 24px;
+}
+
+.alert {
+  border: 1px solid color-mix(in srgb, var(--c-danger) 35%, var(--c-border));
   border-radius: var(--r-md);
+  background: var(--c-danger-soft);
   padding: var(--s-4) var(--s-5);
   margin-bottom: var(--s-5);
 }
 
-.panel-bad {
+.alert h2 {
-  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 {
+.alert ul {
   margin: 0;
   padding-left: 1.2em;
   color: var(--c-text-soft);

web/nav.ts

@@ -0,0 +1,30 @@
+/**
+ * 左侧导航。
+ *
+ * 顺序按使用频率排：路由是这个工具存在的理由，放在最上面；仪表盘和连接是「看一眼」
+ * 类的，中间；设置很少动，垫底。
+ */
+import IconRoute from '~icons/ri/route-line'
+import IconDashboard from '~icons/ri/dashboard-line'
+import IconConfig from '~icons/ri/file-list-3-line'
+import IconRequests from '~icons/ri/pulse-line'
+import IconConnections from '~icons/ri/links-line'
+import IconSettings from '~icons/ri/settings-3-line'
+import type { Component } from 'vue'
+
+export interface NavItem {
+  key: string
+  label: string
+  icon: Component
+  /** 还没做的页面标 true，导航上显示但点进去是占位 */
+  pending?: boolean
+}
+
+export const NAV: NavItem[] = [
+  { key: 'router', label: '路由', icon: IconRoute },
+  { key: 'dashboard', label: '仪表盘', icon: IconDashboard, pending: true },
+  { key: 'config', label: '配置', icon: IconConfig, pending: true },
+  { key: 'requests', label: '请求', icon: IconRequests, pending: true },
+  { key: 'connections', label: '连接', icon: IconConnections, pending: true },
+  { key: 'settings', label: '设置', icon: IconSettings, pending: true },
+]

web/prefs.ts

@@ -0,0 +1,23 @@
+/**
+ * 界面偏好，存在 localStorage 里。
+ *
+ * 目前只有一项：工具栏和导航是只显示图标，还是图标加文字。
+ * 默认是「完整」——这个工具是隔一阵子才动一次的，纯图标对偶尔来一次的人不友好；
+ * 想要紧凑的人自己去设置里切。
+ */
+import { ref, watch } from 'vue'
+
+export type Density = 'full' | 'compact'
+
+const KEY = 'patchbay.density'
+
+const stored = localStorage.getItem(KEY)
+export const density = ref<Density>(stored === 'compact' ? 'compact' : 'full')
+
+watch(density, (value) => {
+  localStorage.setItem(KEY, value)
+})
+
+export function toggleDensity(): void {
+  density.value = density.value === 'full' ? 'compact' : 'full'
+}

web/views/InboundList.vue

@@ -1,100 +1,162 @@
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
-import { collectInbounds } from '@shared/inbounds.ts'
+import { collectInbounds, collectOutboundNames } from '@shared/inbounds.ts'
 import type { Inbound, OutboundMode } from '@shared/inbounds.ts'
 import type { ConfigObject } from '../../vendor/config-editor/index.ts'
+import { density } from '../prefs'
+import IconAdd from '~icons/ri/add-line'
+import IconExpand from '~icons/ri/arrow-right-s-line'
+import IconEdit from '~icons/ri/edit-line'
+import IconDelete from '~icons/ri/delete-bin-line'
 
-const props = defineProps<{ data: ConfigObject; kernelOnline: boolean }>()
+const props = defineProps<{ data: ConfigObject }>()
 
 const inbounds = computed(() => collectInbounds(props.data))
+const outbounds = computed(() => collectOutboundNames(props.data))
+const expanded = ref<string | null>(null)
 
-/** 出站去向在表格里怎么显示。「跟着规则走」是弱化的，因为它是默认状态而非用户的选择。 */
+function toggle(id: string) {
+  expanded.value = expanded.value === id ? null : id
+}
+
+/** 出站在行上怎么显示。RULE 是未指定时的默认状态，弱化处理。 */
 function outboundLabel(mode: OutboundMode): { text: string; muted: boolean } {
-  if (mode.kind === 'rules') return { text: '跟着规则走', muted: true }
+  if (mode.kind === 'rules') return { text: 'RULE', muted: true }
-  if (mode.kind === 'direct') return { text: '直连', muted: false }
+  if (mode.kind === 'direct') return { text: 'DIRECT', muted: false }
-  if (mode.kind === 'global') return { text: '全局', muted: false }
+  if (mode.kind === 'global') return { text: 'GLOBAL', muted: false }
   return { text: mode.name, muted: false }
 }
 
+const TYPE_LABEL: Record<string, string> = {
+  mixed: 'HTTP + SOCKS5',
+  http: 'HTTP',
+  socks: 'SOCKS5',
+  redir: 'REDIR',
+  tproxy: 'TPROXY',
+}
+
 function typeLabel(inbound: Inbound): string {
-  if (inbound.type === 'mixed') return 'HTTP + SOCKS5'
+  return TYPE_LABEL[inbound.type] ?? inbound.type.toUpperCase()
-  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>
+      <div class="sums">
-        <h2>入站</h2>
+        <div class="sum">
-        <p class="sub">每一路进来的流量，以及它从哪里出去。</p>
+          <span class="sum-n">{{ inbounds.length }}</span>
+          <span class="sum-k">入站</span>
         </div>
-      <button class="add" type="button" disabled title="下一步做">新增</button>
+        <div class="sum">
+          <span class="sum-n">{{ outbounds.groups.length }}</span>
+          <span class="sum-k">策略组</span>
+        </div>
+        <div class="sum">
+          <span class="sum-n">{{ outbounds.ownProxies.length }}</span>
+          <span class="sum-k">自有线路</span>
+        </div>
+      </div>
+
+      <button class="add" type="button" disabled>
+        <IconAdd />
+        <span v-if="density === 'full'">新增</span>
+      </button>
     </header>
 
+    <!-- 明细 -->
     <ol class="rows">
       <li v-for="inbound in inbounds" :key="inbound.id" class="row">
-        <div class="port">
+        <button
-          <span class="num">{{ inbound.port }}</span>
+          type="button"
+          :class="['line', expanded === inbound.id && 'is-open']"
+          @click="toggle(inbound.id)"
+        >
+          <IconExpand class="caret" />
+
+          <span class="port mono">{{ inbound.port }}</span>
           <span class="type">{{ typeLabel(inbound) }}</span>
-        </div>
 
-        <div class="mid">
+          <span class="name">
-          <div class="name">
             {{ inbound.name }}
-            <span v-if="inbound.isDefault" class="tag">默认</span>
+            <span v-if="inbound.isDefault" class="tag" title="由配置顶层的端口字段声明，不可删除">
-          </div>
+              默认
-          <div v-if="inbound.listen" class="listen mono">{{ inbound.listen }}</div>
+            </span>
-        </div>
+          </span>
 
-        <div class="wire" aria-hidden="true"></div>
+          <span class="wire" aria-hidden="true"></span>
 
-        <div class="out">
+          <span :class="['out', outboundLabel(inbound.outbound).muted && 'is-muted']">
-          <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>
+        </button>
+
+        <div v-if="expanded === inbound.id" class="detail">
+          <dl>
+            <dt>类型</dt>
+            <dd class="mono">{{ inbound.type }}</dd>
+            <dt>监听</dt>
+            <dd class="mono">{{ inbound.listen ?? '0.0.0.0' }}</dd>
+            <dt>出站</dt>
+            <dd class="mono">{{ outboundLabel(inbound.outbound).text }}</dd>
+            <dt>附加规则</dt>
+            <dd class="mono">{{ inbound.ruleSet ?? '—' }}</dd>
+            <dt v-if="inbound.legacyKey">来源</dt>
+            <dd v-if="inbound.legacyKey" class="mono">{{ inbound.legacyKey }}</dd>
+          </dl>
+
+          <div class="acts">
+            <button type="button" disabled><IconEdit /> 编辑</button>
+            <button type="button" disabled :title="inbound.isDefault ? '默认入站不可删除' : ''">
+              <IconDelete /> 删除
+            </button>
+          </div>
         </div>
       </li>
     </ol>
 
-    <p v-if="inbounds.length === 0" class="empty">
+    <p v-if="inbounds.length === 0" class="empty">没有入站。mihomo 不会监听任何端口。</p>
-      这份配置里没有任何入站。mihomo 不会监听任何端口。
-    </p>
-
-    <p v-if="inbounds.some((i) => i.isDefault)" class="footnote">
-      标着「默认」的入站由配置文件顶层的端口字段声明，这种写法没法单独指定出站，流量一律走分流规则。
-    </p>
   </section>
 </template>
 
 <style scoped>
 .head {
   display: flex;
-  align-items: flex-start;
+  align-items: center;
   justify-content: space-between;
   gap: var(--s-4);
   margin-bottom: var(--s-5);
 }
 
-h2 {
+.sums {
-  font-size: var(--t-xl);
+  display: flex;
-  font-weight: 600;
+  gap: var(--s-6);
-  letter-spacing: -0.01em;
 }
 
-.sub {
+.sum {
+  display: flex;
+  align-items: baseline;
+  gap: var(--s-2);
+}
+
+.sum-n {
+  font-size: var(--t-2xl);
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  letter-spacing: -0.02em;
+}
+
+.sum-k {
   color: var(--c-text-soft);
   font-size: var(--t-sm);
-  margin-top: var(--s-1);
 }
 
 .add {
-  padding: var(--s-2) var(--s-4);
+  display: flex;
+  align-items: center;
+  gap: var(--s-2);
+  padding: var(--s-2) var(--s-3);
   border: 1px solid var(--c-border-strong);
   border-radius: var(--r-sm);
   background: var(--c-surface);
@@ -105,7 +167,6 @@ h2 {
   cursor: not-allowed;
 }
 
-/* 一层容器，内部用分割线分行——不做卡片套卡片 */
 .rows {
   list-style: none;
   margin: 0;
@@ -116,26 +177,39 @@ h2 {
   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 {
+.line {
-  display: flex;
+  width: 100%;
-  flex-direction: column;
+  display: grid;
-  gap: 2px;
+  grid-template-columns: 16px 4.5rem 7rem 1fr 2.5rem minmax(6rem, auto);
+  align-items: center;
+  gap: var(--s-3);
+  padding: var(--s-3) var(--s-4);
+  border: none;
+  background: none;
+  cursor: pointer;
+  text-align: left;
 }
 
-.num {
+.line:hover {
-  font-family: var(--f-mono);
+  background: var(--c-surface-sunken);
+}
+
+.caret {
+  width: 16px;
+  height: 16px;
+  color: var(--c-text-faint);
+  transition: transform 0.12s ease;
+}
+
+.line.is-open .caret {
+  transform: rotate(90deg);
+}
+
+.port {
   font-size: var(--t-lg);
   font-variant-numeric: tabular-nums;
 }
@@ -149,23 +223,18 @@ h2 {
   display: flex;
   align-items: center;
   gap: var(--s-2);
+  min-width: 0;
 }
 
 .tag {
-  padding: 1px var(--s-2);
+  padding: 0 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;
+  line-height: 1.6;
 }
 
-.listen {
-  font-size: var(--t-xs);
-  color: var(--c-text-faint);
-}
-
-/* 插线板的那根线。它承载的信息是「左边这个口通向右边那个出口」 */
 .wire {
   height: 1px;
   background: linear-gradient(
@@ -176,32 +245,66 @@ h2 {
 }
 
 .out {
-  display: flex;
+  font-family: var(--f-mono);
-  flex-direction: column;
+  font-size: var(--t-sm);
-  align-items: flex-end;
-  gap: 2px;
   text-align: right;
 }
 
-.out-text {
+.out.is-muted {
-  font-weight: 500;
-}
-
-.out-text.is-muted {
-  font-weight: 400;
   color: var(--c-text-faint);
 }
 
-.ruleset {
+.detail {
-  font-size: var(--t-xs);
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--s-5);
+  padding: var(--s-2) var(--s-4) var(--s-4) calc(16px + var(--s-3) + var(--s-4));
+  background: var(--c-surface-sunken);
+  border-top: 1px solid var(--c-border);
+}
+
+dl {
+  display: grid;
+  grid-template-columns: auto auto;
+  gap: var(--s-1) var(--s-4);
+  margin: 0;
+  font-size: var(--t-sm);
+}
+
+dt {
   color: var(--c-text-faint);
 }
 
-.empty,
+dd {
-.footnote {
+  margin: 0;
+}
+
+.acts {
+  display: flex;
+  gap: var(--s-2);
+}
+
+.acts button {
+  display: flex;
+  align-items: center;
+  gap: var(--s-1);
+  padding: var(--s-1) var(--s-3);
+  border: 1px solid var(--c-border-strong);
+  border-radius: var(--r-sm);
+  background: var(--c-surface);
+  font-size: var(--t-sm);
+  cursor: pointer;
+}
+
+.acts button:disabled {
+  color: var(--c-text-faint);
+  cursor: not-allowed;
+}
+
+.empty {
   color: var(--c-text-faint);
   font-size: var(--t-sm);
   margin-top: var(--s-4);
-  line-height: 1.7;
 }
 </style>