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

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;