抽屉菜单打磨：面板收窄到 min(66vw,250px)，字重 800→500 配 Phosphor 图标，当前项改淡色胶囊高亮（引入 @phosphor-icons/vue 按需引入）

frontend/package.json

@@ -16,6 +16,7 @@
     "@codemirror/state": "^6.7.6",
     "@codemirror/view": "^6.43.13",
     "@milkdown/crepe": "^7.22.1",
+    "@phosphor-icons/vue": "^2.2.1",
     "dompurify": "^3.1.6",
     "vue": "^3.4.0",
     "vue-router": "^4.4.0"

frontend/pnpm-lock.yaml

@@ -26,6 +26,9 @@ importers:
       '@milkdown/crepe':
         specifier: ^7.22.1
         version: 7.22.1(prosemirror-model@1.25.11)(prosemirror-state@1.4.4)(prosemirror-view@1.42.4)(typescript@5.9.3)
+      '@phosphor-icons/vue':
+        specifier: ^2.2.1
+        version: 2.2.1(vue@3.5.40(typescript@5.9.3))
       dompurify:
         specifier: ^3.1.6
         version: 3.4.12
@@ -444,6 +447,12 @@ packages:
   '@ocavue/utils@1.8.0':
     resolution: {integrity: sha512-BD1ro+6Kllkmr/at+o32kvnLrVooUbk9gw3JAPaoAZXx+A5GhZ6Laa+UA38ifhG3vaamx+jcgEwX22BmTSMUVA==}
 
+  '@phosphor-icons/vue@2.2.1':
+    resolution: {integrity: sha512-3RNg1utc2Z5RwPKWFkW3eXI/0BfQAwXgtFxPUPeSzi55jGYUq16b+UqcgbKLazWFlwg5R92OCLKjDiJjeiJcnA==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      vue: '>=3.2.39'
+
   '@rollup/rollup-android-arm-eabi@4.62.3':
     resolution: {integrity: sha512-c0wdcekXtQvvn5Tsrk/+op/gUArrbWaFduBnTLP2l1cKLSQs4diMWjJw3m6A0DdzT8dAAX95KpkJ3qynCePbmw==}
     cpu: [arm]
@@ -1850,6 +1859,10 @@ snapshots:
 
   '@ocavue/utils@1.8.0': {}
 
+  '@phosphor-icons/vue@2.2.1(vue@3.5.40(typescript@5.9.3))':
+    dependencies:
+      vue: 3.5.40(typescript@5.9.3)
+
   '@rollup/rollup-android-arm-eabi@4.62.3':
     optional: true
 

frontend/src/ui/yohaku/YohakuTop.vue

@@ -4,6 +4,13 @@ import { RouterLink, useRoute } from 'vue-router'
 import { site } from '../../site'
 import NavBurger from '../../components/NavBurger.vue'
 import AuthorAvatar from '../../components/AuthorAvatar.vue'
+import {
+  PhHouse,
+  PhArchiveBox,
+  PhTag,
+  PhSquaresFour,
+  PhUserCircle
+} from '@phosphor-icons/vue'
 
 // 余白顶栏。对应设计稿的 <header class="top">：品牌 / 导航 / 操作三块，
 // 滚动过 8px 加 .scrolled（设计稿的「四态里的第一态」）。
@@ -21,11 +28,11 @@ const burger = ref(null)
 const drawerEl = ref(null)
 
 const links = [
-  { to: '/', label: '时间线' },
-  { to: '/archive', label: '归档' },
-  { to: '/tags', label: '标签' },
-  { to: '/projects', label: '作品' },
-  { to: '/about', label: '关于' }
+  { to: '/', label: '时间线', icon: PhHouse },
+  { to: '/archive', label: '归档', icon: PhArchiveBox },
+  { to: '/tags', label: '标签', icon: PhTag },
+  { to: '/projects', label: '作品', icon: PhSquaresFour },
+  { to: '/about', label: '关于', icon: PhUserCircle }
 ]
 
 const title = () => site.site_title?.split(/[·|]/)[0]?.trim() || 'ONE'
@@ -148,7 +155,10 @@ function toggleTheme() {
             :key="l.to"
             :to="l.to"
             :class="{ on: isOn(l) }"
-          >{{ l.label }}</RouterLink>
+          >
+            <component :is="l.icon" class="ic" aria-hidden="true" />
+            <span>{{ l.label }}</span>
+          </RouterLink>
         </nav>
         <div class="drawer-foot">
           <button class="chip" type="button" @click="toggleTheme">◐ 切换明暗</button>

frontend/src/ui/yohaku/chrome.css

@@ -77,7 +77,7 @@ html[data-ui='vivid'] .drawer-root {position:fixed;inset:0;z-index:110;}
 html[data-ui='vivid'] .drawer-root .scrim {position:absolute;inset:0;
   background:color-mix(in srgb,var(--ink) 32%,transparent);}
 html[data-ui='vivid'] .drawer {position:absolute;top:0;right:0;bottom:0;
-  width:min(80vw, 320px);
+  width:min(66vw, 250px);
   border-left:1px solid var(--line);
   border-radius:24px 0 0 24px;
   background:color-mix(in srgb,var(--card) 92%,transparent);
@@ -91,16 +91,20 @@ html[data-ui='vivid'] .drawer {position:absolute;top:0;right:0;bottom:0;
   scrollbar-width:none;}
 html[data-ui='vivid'] .drawer:focus {outline:none}
 html[data-ui='vivid'] .drawer-nav {display:flex;flex-direction:column;}
-html[data-ui='vivid'] .drawer-nav a {position:relative;display:block;
-  padding:15px 4px;font-size:24px;font-weight:800;letter-spacing:-.02em;
-  line-height:1.25;color:var(--soft);
-  transition:color .3s var(--ease);}
-html[data-ui='vivid'] .drawer-nav a.on {color:var(--accent)}
+html[data-ui='vivid'] .drawer-nav a {position:relative;display:flex;align-items:center;gap:12px;
+  padding:12px 8px;font-size:16.5px;font-weight:500;letter-spacing:.01em;
+  line-height:1.3;color:var(--soft);border-radius:10px;
+  transition:color .3s var(--ease),background-color .3s var(--ease);}
+html[data-ui='vivid'] .drawer-nav a .ic {width:21px;height:21px;flex:none;
+  color:var(--soft);
+  opacity:.75;
+  transition:color .3s var(--ease),opacity .3s var(--ease);}
+html[data-ui='vivid'] .drawer-nav a.on {color:var(--accent);
+  background:color-mix(in srgb,var(--accent) 8%,transparent);}
+html[data-ui='vivid'] .drawer-nav a.on .ic {color:var(--accent);opacity:1}
 /* 当前项的左缘短杠：面板内边距 22px，杠落在离屏边 10px 处 */
-html[data-ui='vivid'] .drawer-nav a.on::before {content:"";position:absolute;left:-18px;top:50%;
-  width:3px;height:18px;border-radius:2px;background:var(--accent);
-  transform:translateY(-50%);}
-html[data-ui='vivid'] .drawer-nav a:active {color:var(--accent)}
+html[data-ui='vivid'] .drawer-nav a:active {color:var(--accent);
+  background:color-mix(in srgb,var(--accent) 8%,transparent);}
 html[data-ui='vivid'] .drawer-foot {margin-top:auto;padding-top:16px;
   display:flex;flex-direction:column;align-items:flex-start;gap:10px;}
 html[data-ui='vivid'] .drawer-foot .chip {padding:6px 14px;border-radius:999px;