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

图标用 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);

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 { collectInbounds } from '@shared/inbounds.ts'
+import { computed, ref } from 'vue'
+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 === 'direct') return { text: '直连', muted: false }
-  if (mode.kind === 'global') return { text: '全局', muted: false }
+  if (mode.kind === 'rules') return { text: 'RULE', muted: true }
+  if (mode.kind === 'direct') return { text: 'DIRECT', 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'
-  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
+  return TYPE_LABEL[inbound.type] ?? inbound.type.toUpperCase()
 }
 </script>
 
 <template>
   <section>
+    <!-- 概览 -->
     <header class="head">
-      <div>
-        <h2>入站</h2>
-        <p class="sub">每一路进来的流量，以及它从哪里出去。</p>
+      <div class="sums">
+        <div class="sum">
+          <span class="sum-n">{{ inbounds.length }}</span>
+          <span class="sum-k">入站</span>
+        </div>
+        <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 title="下一步做">新增</button>
+
+      <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">
-          <span class="num">{{ inbound.port }}</span>
+        <button
+          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">
-          <div class="name">
+          <span 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>
+            <span v-if="inbound.isDefault" class="tag" title="由配置顶层的端口字段声明，不可删除">
+              默认
+            </span>
+          </span>
 
-        <div class="wire" aria-hidden="true"></div>
+          <span class="wire" aria-hidden="true"></span>
 
-        <div class="out">
-          <span :class="['out-text', outboundLabel(inbound.outbound).muted && 'is-muted']">
+          <span :class="['out', 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">
-      这份配置里没有任何入站。mihomo 不会监听任何端口。
-    </p>
-
-    <p v-if="inbounds.some((i) => i.isDefault)" class="footnote">
-      标着「默认」的入站由配置文件顶层的端口字段声明，这种写法没法单独指定出站，流量一律走分流规则。
-    </p>
+    <p v-if="inbounds.length === 0" class="empty">没有入站。mihomo 不会监听任何端口。</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 {
-  font-size: var(--t-xl);
-  font-weight: 600;
-  letter-spacing: -0.01em;
+.sums {
+  display: flex;
+  gap: var(--s-6);
 }
 
-.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 {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
+.line {
+  width: 100%;
+  display: grid;
+  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 {
-  font-family: var(--f-mono);
+.line:hover {
+  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;
-  flex-direction: column;
-  align-items: flex-end;
-  gap: 2px;
+  font-family: var(--f-mono);
+  font-size: var(--t-sm);
   text-align: right;
 }
 
-.out-text {
-  font-weight: 500;
-}
-
-.out-text.is-muted {
-  font-weight: 400;
+.out.is-muted {
   color: var(--c-text-faint);
 }
 
-.ruleset {
-  font-size: var(--t-xs);
+.detail {
+  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,
-.footnote {
+dd {
+  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>