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

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

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

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">
-    <header class="bar">
+  <div v-else :class="['shell', density === 'compact' && 'is-compact']">
+    <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">
-        <span :class="['dot', kernel.online ? 'dot-ok' : 'dot-off']" aria-hidden="true"></span>
-        <span>{{ kernel.online ? `内核 ${kernel.version ?? ''}` : '内核未连接' }}</span>
+
+      <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 class="kernel-text mono">{{ kernel.online ? kernel.version : 'offline' }}</span>
+        </div>
+        <button
+          type="button"
+          class="densify"
+          :title="density === 'full' ? '只显示图标' : '显示图标和文字'"
+          @click="toggleDensity"
+        >
+          <IconFold v-if="density === 'full'" />
+          <IconUnfold v-else />
+        </button>
       </div>
-    </header>
+    </nav>
 
-    <main class="page">
-      <p v-if="loading" class="hint">读取配置中…</p>
+    <main class="main">
+      <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">
-          <h2>配置里有 {{ problems.length }} 处问题</h2>
+        <div v-if="problems.length" class="alert">
+          <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;
-  flex-direction: column;
+  display: grid;
+  grid-template-columns: 184px 1fr;
   min-height: 100%;
 }
 
-.bar {
+.shell.is-compact {
+  grid-template-columns: 56px 1fr;
+}
+
+/* ── 侧栏 ───────────────────────────────────── */
+.side {
   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);
+  flex-direction: column;
+  gap: var(--s-5);
+  padding: var(--s-4) var(--s-3);
+  border-right: 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 {
-  font-size: var(--t-lg);
+.brand-name {
   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);
-  font-size: var(--t-sm);
+  min-width: 0;
+  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 {
-  flex: 1;
-  width: 100%;
-  max-width: 880px;
-  margin: 0 auto;
-  padding: var(--s-7) var(--s-6);
+.kernel-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
-.hint {
-  color: var(--c-text-soft);
+.densify {
+  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 {
-  border-color: color-mix(in srgb, var(--c-danger) 35%, var(--c-border));
-  background: var(--c-danger-soft);
-}
-
-.panel h2 {
+.alert 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);