From 2c69b3f1c3b983d64f1775b4ff3108060c5ba64c Mon Sep 17 00:00:00 2001
From: youzi <2410633923@qq.com>
Date: Tue, 4 Aug 2026 17:33:45 +0800
Subject: [PATCH] =?UTF-8?q?=E6=95=B4=E4=BD=93=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 AGENTS.md                         |  44 ++
 auto-imports.d.ts                 |   1 +
 components.d.ts                   |   1 +
 env.d.ts                          |  19 +-
 package.json                      |   2 +-
 src/Index.vue                     |  37 +-
 src/components/Gallery.vue        |   9 -
 src/components/Login.vue          |  40 +-
 src/components/aplayer.vue        | 109 ++--
 src/components/backTop.vue        |  24 +-
 src/components/homeSide.vue       | 194 +++++--
 src/components/menuH.vue          |  34 +-
 src/config/index.ts               |  11 +-
 src/lib/components/LazyImg.vue    |  10 +-
 src/lib/components/Waterfall.vue  |   2 +-
 src/main.ts                       |   4 +
 src/router/index.ts               |  31 +-
 src/stores/log.ts                 |  16 +-
 src/stores/nav.ts                 |  13 +-
 src/util/index.ts                 |  56 +-
 src/util/request.ts               |  28 +-
 src/util/theme.ts                 |  28 +-
 src/views/Gallery.vue             | 139 ++++-
 src/views/Plink.vue               |  32 +-
 src/views/Widget.vue              |   2 +-
 src/views/blog/[bid].vue          | 637 ++++++++++++++++------
 src/views/blog/index.vue          |  30 +-
 src/views/{Home.vue => index.vue} | 848 +++++++++++++++++++++++++-----
 tsconfig.app.json                 |   2 +-
 typed-router.d.ts                 | 173 ++++--
 vite.config.ts                    |   5 +-
 yarn.lock                         | 274 +++++++++-
 32 files changed, 2212 insertions(+), 643 deletions(-)
 create mode 100644 AGENTS.md
 rename src/views/{Home.vue => index.vue} (54%)

diff --git a/AGENTS.md b/AGENTS.md
new file mode 100644
index 0000000..4b82776
--- /dev/null
+++ b/AGENTS.md
@@ -0,0 +1,44 @@
+# AGENTS.md — 博客前端项目
+
+Vue 3 + TypeScript + Vite 7 博客前端（后端 API 为 `https://www.hxyouzi.com/api`）。UI：naive-ui + UnoCSS + vue-devui(Tag) + md-editor-v3。风格为暖色玻璃拟态（主色 `#ec66ab`）。
+
+## 常用命令
+
+| 命令                 | 用途                                                      |
+| -------------------- | --------------------------------------------------------- |
+| `npm run dev`        | 开发服务器（端口 8989，路径 base `/blog/`，首页 `/home`） |
+| `npm run type-check` | vue-tsc 类型检查（**改完代码必跑**）                      |
+| `npm run b`          | type-check + build                                        |
+| `npm run build-only` | 仅构建                                                    |
+
+## 全局约定（勿重复 import / 注册）
+
+- 全局变量直接使用、**无需 import**（类型在 `env.d.ts`）：`$http`（API）、`$msg`（naive message）、`$store`（pinia）、`$cookies`、`$modal`（弹窗，参数 `{title, content, contType: 'text'|'input', ...}`）。
+- 组合式 API 已自动导入（`ref/computed/watch/useRoute/defineStore/useMessage` 等，见 `auto-imports.d.ts`），**不要重复 import**。
+- `src/components/` 下组件与 naive-ui `<n-xxx>` 自动注册（`components.d.ts`），模板直接用。
+- 图标：`src/icon/` 顶层 svg 注册为 `<icon-<name> />`；`icon/menu/`、`icon/plink/` 子目录**不自动注册**，需手动 import（vite-svg-loader）。
+- API 模块：新建 `src/api/<name>/index.ts` 即自动挂到 `$http.<name>`（`import.meta.glob`）。**新增 icon/api/store 文件后需重启 dev server**（glob 构建时静态分析）。
+
+## 架构速览
+
+- **路由**：unplugin-vue-router 文件系统路由（`src/views/`），视图用 `definePage()`；`src/router/index.ts` 中 `/` 重定向到 `/home`，带 NProgress 守卫。
+- **API 调用**：`$http.<模块>.<函数>()` → 请求层 `src/util/request.ts`（baseURL `https://www.hxyouzi.com/api`，token 从 cookie 自动带 Bearer，响应拦截直接返回 `response.data`）。
+- **Stores**：`src/stores/` setup 风格；`nav.ts` 提供 `navH`（导航栏高度，页面布局需减它）、`log.ts` 提供 `isLogin`。访问：`$store.nav.useNavStore()`。
+- **UnoCSS**：重度使用 arbitrary values（`bg-[...]`、`shadow-[...]`）；卡片类优先用 `uno.config.ts` 的 shortcuts（`blog-list-panel`、`blog-detail-card`、`blog-detail-card-soft`、`home-glass-surface` 等）。
+- **Less**：vite 已全局注入 `@primary: #ec66ab` 等变量，less 块内直接用。字体：霞鹜文楷（正文）+ Fira Code（代码）。
+- **页面背景模板**：所有视图沿用统一背景 — 暖色径向渐变 + 两个 blur 圆 + 网格 overlay（参考 `src/views/Home.vue` 顶部）。
+
+## 常见陷阱
+
+- `console.log` 在 build 时会被 esbuild 删除（`pure: ["console.log"]`），调试用 dev 模式。
+- 登录态：cookie `userinfo` 存在即视为已登录。
+- `$http.mix.getHoli()` 后端 500 不可用，必须 try/catch 防御式处理（失败静默隐藏）。
+- 内部滚动容器用 naive-ui `n-scrollbar` 时监听 `@scroll`，**不要监听 window scroll**（内部滚动不冒泡）。
+- `Waterfall` 组件需传 `row-key="filepath"`（GalleryItem 无 id 字段）。
+- 阴影规范：三层体系（接触 `rgba(97,121,146,0.05)` + 主体 `0.08-0.13` + 暖色 `rgba(178,128,88,*)` + `inset 0 1px 0 rgba(255,255,255,0.7)` 高光），避免纯冷灰 `rgba(86,111,137,*)`。
+- 修改 `Home.vue` 导航卡片动画时先阅读 `/memories/repo/blog-nav.md`（FLIP 动画有特殊约束）。
+
+## 相关资料
+
+- 导航首页细节（FLIP 动画、侧边栏、画廊约定）：仓库记忆 `/memories/repo/blog-nav.md`
+- UI 截图批量转 Vue 组件：技能 `.agents/skills/ui/SKILL.md`
diff --git a/auto-imports.d.ts b/auto-imports.d.ts
index 36b6df4..2d4643f 100644
--- a/auto-imports.d.ts
+++ b/auto-imports.d.ts
@@ -70,6 +70,7 @@ declare global {
   const useCssVars: typeof import('vue')['useCssVars']
   const useDialog: typeof import('naive-ui')['useDialog']
   const useId: typeof import('vue')['useId']
+  const useLink: typeof import('vue-router')['useLink']
   const useLoadingBar: typeof import('naive-ui')['useLoadingBar']
   const useMessage: typeof import('naive-ui')['useMessage']
   const useModel: typeof import('vue')['useModel']
diff --git a/components.d.ts b/components.d.ts
index 039b34b..a9ca12b 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -45,6 +45,7 @@ declare module 'vue' {
     NPagination: typeof import('naive-ui')['NPagination']
     NScrollbar: typeof import('naive-ui')['NScrollbar']
     NSelect: typeof import('naive-ui')['NSelect']
+    NSpin: typeof import('naive-ui')['NSpin']
     NTabPane: typeof import('naive-ui')['NTabPane']
     NTabs: typeof import('naive-ui')['NTabs']
     NUpload: typeof import('naive-ui')['NUpload']
diff --git a/env.d.ts b/env.d.ts
index 554aeb2..d42d78c 100644
--- a/env.d.ts
+++ b/env.d.ts
@@ -1,24 +1,29 @@
 /// <reference types="vite/client" />
 /// <reference types="axios" />
+/// <reference types="vue-router/auto" />
 
+// 全局变量：由 src/config/index.ts 的 useConfig() 与 src/Index.vue 注册，
+// 使用时不需 import（均挂载在 window 上）
 declare global {
+  // API 聚合对象：$http.<模块>.<函数>()，模块见 src/api/*/index.ts
   let $http: any;
+  // vue3-cookies 封装：$cookies.get/set/remove
   let $cookies: any;
+  // naive-ui useMessage 实例：$msg.success/warning/error/info
   let $msg: any;
-  let $store:any;
-  let $modal :any
+  // pinia store 聚合：$store.nav.useNavStore() / $store.log.useLogStore()
+  let $store: any;
+  // 全局弹窗：$modal({ title, content, contType: 'text'|'input', ... })
+  let $modal: any;
   interface Window {
     // 扩展Windows环境下的全局$http对象
     $http: any;
     $cookies: any;
     $msg: any;
-    $store:any
-    $modal:any
+    $store: any;
+    $modal: any;
   }
 }
 
-
-
-
 export { };
 
diff --git a/package.json b/package.json
index 24b1f94..3a552dc 100644
--- a/package.json
+++ b/package.json
@@ -31,7 +31,7 @@
     "unplugin-vue-router": "^0.15.0",
     "vite-svg-loader": "^5.1.0",
     "vue": "^3.6.0-alpha.2",
-    "vue-router": "^4.5.1",
+    "vue-router": "^5.2.0",
     "vue3-cookies": "^1.0.6"
   },
   "devDependencies": {
diff --git a/src/Index.vue b/src/Index.vue
index f1b29d7..f197cb9 100644
--- a/src/Index.vue
+++ b/src/Index.vue
@@ -7,7 +7,7 @@
       <router-view />
     </n-layout-content>
     <n-layout-footer v-show="route.path == '/home'" class="flex justify-center">
-      <div class="beian" ref="footer">
+      <div class="beian">
         <a class="text-primary" href="https://beian.miit.gov.cn" target="_blank">皖ICP备2021017362号-1</a>
         <a class="swag text-primary" target="_blank" href="https://www.hxyouzi.com/swag">api文档</a>
       </div>
@@ -36,8 +36,20 @@
 </template>
 
 <script setup lang="ts">
+interface NmodalItem {
+  visible: boolean
+  title: string
+  content: string
+  contType?: string
+  placeholder?: string
+  cancelText?: string
+  submitText?: string
+  handdleCancel?: () => void
+  handdleSubmit?: () => void
+  handdleInputChange: (e: any) => void
+}
+
 const route = useRoute()
-const footer = ref<HTMLElement | null>(null)
 window.$msg = useMessage()
 const modal: NmodalItem = reactive({
   visible: false,
@@ -51,18 +63,6 @@ const modal: NmodalItem = reactive({
   handdleSubmit: () => { },
   handdleInputChange: (e: any) => { }
 })
-interface NmodalItem {
-  visible: boolean
-  title: string
-  content: string
-  contType?: string
-  placeholder?: string
-  cancelText?: string
-  submitText?: string
-  handdleCancel?: () => void
-  handdleSubmit?: () => void
-  handdleInputChange: (e: any) => void
-}
 //mark method
 function comemodal(mv: NmodalItem) {
   if (!mv) return
@@ -93,15 +93,6 @@ function comemodal(mv: NmodalItem) {
 }
 
 window.$modal = comemodal
-onMounted(() => {
-  // 计算footer的高度
-  const footerHeight = footer.value?.clientHeight || 0;
-  console.log('footerHeight', footerHeight);
-
-  document.addEventListener('resize', () => {
-    
-  })
-})
 </script>
 
 <style scoped lang="less">
diff --git a/src/components/Gallery.vue b/src/components/Gallery.vue
index 1307c90..8a2a28d 100644
--- a/src/components/Gallery.vue
+++ b/src/components/Gallery.vue
@@ -83,7 +83,6 @@ function resetWaterfall() {
   columnHeights.value = Array(columnCount.value).fill(0);
   // 重新分配图片
   fileList.value.forEach(async (item:any) =>await addToWaterfall(item));
-  console.log('>>> --> resetWaterfall --> fileList:', fileList.value)
 }
 
 // 添加图片到瀑布流
@@ -94,8 +93,6 @@ async function addToWaterfall(item: any) {
   // 找到高度最小的列
   let minHeight = Math.min(...columnHeights.value);
   let minIndex = columnHeights.value.indexOf(minHeight);
-  console.log('>>> --> addToWaterfall --> item:', item)
-  console.log('>>> --> addToWaterfall --> minIndex:', minIndex)
   // 添加到该列
   columns.value[minIndex].push(item);
   // 估算列高 - 实际高度会在图片加载后更新
@@ -181,18 +178,13 @@ async function getFileList() {
 
 // 监听滚动事件
 const handleScroll: any = throttle((e: any) => {
-  console.log('>>> --> handleScroll --> loading:', e)
   if (loading.value) return;
   const scrollTop = e.target.scrollTop
-  console.log('>>> --> handleScroll --> scrollTop:', scrollTop)
   const scrollHeight = e.target.scrollHeight
-  // console.log('>>> --> handleScroll --> scrollHeight:', scrollHeight)
   const clientHeight = e.target.offsetHeight;
 
   // 当滚动到距离底部20%时加载更多
-  // console.log('>>> --> clientHeight --> clientHeight:', clientHeight)
   if (scrollTop + clientHeight >= scrollHeight * 0.8) {
-    console.log('>>> --> handleScroll --> 加载更多')
     pn.value++;
     getFileList();
   }
@@ -203,7 +195,6 @@ function onSearch() {
 }
 
 function downloadFile(url: string) {
-  console.log('>>> --> downloadFile --> url:', url)
   // 创建临时a标签
   const link = document.createElement('a');
   // 设置下载链接
diff --git a/src/components/Login.vue b/src/components/Login.vue
index fbae8a6..7af8a1e 100644
--- a/src/components/Login.vue
+++ b/src/components/Login.vue
@@ -178,30 +178,38 @@ async function login() {
   const isValid = await validateForm(formLogin.value)
   if (!isValid) return
 
-  const res = await $http.user.login(loginData) as ApiResponse<UserInfo>
-  if (res?.code !== 200) {
-    $msg.error('登录失败')
-    return
-  }
+  try {
+    const res = await $http.user.login(loginData) as ApiResponse<UserInfo>
+    if (res?.code !== 200) {
+      $msg.error('登录失败')
+      return
+    }
 
-  persistLogin(res.data)
-  $msg.success(res.msg)
+    persistLogin(res.data)
+    $msg.success(res.msg)
+  } catch {
+    $msg.error('登录失败，请检查网络或账号密码')
+  }
 }
 
 async function register() {
   const isValid = await validateForm(formReg.value)
   if (!isValid) return
 
-  const res = await $http.user.register(regData) as ApiResponse
-  if (res?.code !== 200) {
-    $msg.error('注册失败')
-    return
-  }
+  try {
+    const res = await $http.user.register(regData) as ApiResponse
+    if (res?.code !== 200) {
+      $msg.error('注册失败')
+      return
+    }
 
-  $msg.success(res.msg)
-  tid.value = 'tab1'
-  loginData.username = regData.username
-  resetRegister()
+    $msg.success(res.msg)
+    tid.value = 'tab1'
+    loginData.username = regData.username
+    resetRegister()
+  } catch {
+    $msg.error('注册失败，请检查网络或稍后再试')
+  }
 }
 
 function validateUsername(_rule: unknown, value: string) {
diff --git a/src/components/aplayer.vue b/src/components/aplayer.vue
index 7ceb8b4..18be9ae 100644
--- a/src/components/aplayer.vue
+++ b/src/components/aplayer.vue
@@ -5,10 +5,8 @@
 
 <script setup lang="ts">
 // https://aplayer.js.org/#/zh-Hans/
-// import Hls from 'hls.js/dist/hls.min.js';
 import APlayer from "aplayer"; // 引入音乐插件
 import "aplayer/dist/APlayer.min.css"; // 引入音乐插件的样式
-import { onMounted, reactive } from "vue";
 
 // window.Hls = Hls;
 const data: any = reactive({
@@ -29,64 +27,61 @@ const data: any = reactive({
 
 
 onMounted(async () => {
-  // 8834041785
-  // const res = await fetch("https://met.hxyouzi.com/meting-api/?server=tencent&type=playlist&id=7567066822")
-  // const res = await fetch("https://api.moeyao.cn/meting/?server=tencent&type=playlist&id=8834041785")
-  // const mlist = await res.json()
-  const metto = 'youzi'
-  const server = 'tencent'
-  const gdid = '7567066822'
-  let ck = 'RK=beuVmBI+x3; ptcz=08924c0c66c35b66361f002fb0b3005ff0f2144404f548f8728b167ffb3dc25d; pgv_pvid=2605897556; fqm_pvqid=c38eee7f-1f49-4867-8fb4-8dbb764cb93b; ts_uid=4584087650; pac_uid=0_xXEQBtbyPnKSj; omgid=0_SK8mZi6ZyjtN4; _qimei_q32=d611a6803057686110470945b0c17a21; _qimei_q36=fcef018f916225c22be032db30001e219617; _qimei_h38=e8d664cf2171af215382857302000000719801; eas_sid=I1j7m5e9o2O188P6Y4P7D745Z4; fqm_sessionid=f2c44c43-4d85-4dcb-99c0-cef6d6e2b0cb; pgv_info=ssid=s1311374400; ts_last=y.qq.com/; ts_refer=cn.bing.com/; _qpsvr_localtk=0.1390152059728047; login_type=1; psrf_access_token_expiresAt=1765271149; psrf_qqopenid=DE4C1520CB81DEEF7C0BE8E9B0FD2783; wxrefresh_token=; music_ignore_pskey=202306271436Hn@vBj; wxunionid=; euin=owv5oeCioiEAoz**; wxopenid=; tmeLoginType=2; psrf_qqrefresh_token=A9707E145813679F3654C6E051AA3E2F; psrf_qqaccess_token=C0591D34DF4A719D28815DBA71122DC5; psrf_musickey_createtime=1760087149; psrf_qqunionid=AD81CE40E407AFA9A2F984D05F7F5CD6; uin=2410633923; qm_keyst=Q_H_L_63k3NMFc5RtmTBDyGhskoc5AjaymIKYUZThRS2bJfh0AHztt8D10MRy1XN-MEAUtIkdF_oauym2Y51IbgjNvw1Wu8hZECDA; qqmusic_key=Q_H_L_63k3NMFc5RtmTBDyGhskoc5AjaymIKYUZThRS2bJfh0AHztt8D10MRy1XN-MEAUtIkdF_oauym2Y51IbgjNvw1Wu8hZECDA'
-  const res = await fetch(`https://met.hxyouzi.com/api?server=${server}&type=playlist&id=${gdid}`)
-  let mlist: any = await res.json()
-  data.audio = []
-  mlist.forEach((i: any) => {
-    data.audio.push({
-      title: i.title,
-      author: i.author,
-      url: i.url,
-      pic: i.pic,
-      lrc: i.lrc,
+  try {
+    const server = 'tencent'
+    const gdid = '7567066822'
+    const res = await fetch(`https://met.hxyouzi.com/api?server=${server}&type=playlist&id=${gdid}`)
+    const mlist: any = await res.json()
+    data.audio = []
+    mlist.forEach((i: any) => {
+      data.audio.push({
+        title: i.title,
+        author: i.author,
+        url: i.url,
+        pic: i.pic,
+        lrc: i.lrc,
+      });
     });
-    // console.log('>>>>>',data.audio);
 
-  });
+    // 创建一个音乐播放器实例，并挂载到DOM上，同时进行相关配置
+    const ap = new APlayer({
+      container: document.getElementById("aplayer"),
+      audio: data.audio, // 音乐信息
+      ...data.info, // 其他配置信息
+    });
+    const d: HTMLElement | null = document.querySelector("#aplayer > div.aplayer-body > div.aplayer-miniswitcher > button");
+    let flag = true;
+    const app: HTMLElement | null = document.querySelector("#aplayer > div.aplayer-lrc");
+    const apic: HTMLElement | null = document.querySelector("#aplayer div.aplayer-body");
+    if (!d || !app || !apic) return;
+    app.style.display = "block";
+    app.style.transform = "translateY(50px)";
+    apic.style.transform = "translateX(-66px)";
+    d.addEventListener("click", () => {
+      if (flag) {
+        app.style.transform = "translateY(0)";
+        ap.lrc.show();
+        apic.style.transform = "translateX(0)";
+        flag = false;
+        
+      } else {
+        app.style.transform = "translateY(50px)";
+        ap.lrc.hide();
+        ap.list.hide();
+        apic.style.transform = "translateX(-66px)";
+        flag = true;
+      }
+    });
+    document.querySelector(".aplayer-list > ol")?.addEventListener("mousewheel", (e) => {
+      e.stopPropagation();
+    })
 
-  // 创建一个音乐播放器实例，并挂载到DOM上，同时进行相关配置
-  const ap = new APlayer({
-    container: document.getElementById("aplayer"),
-    audio: data.audio, // 音乐信息
-    ...data.info, // 其他配置信息
-  });
-  const d: any = document.querySelector("#aplayer > div.aplayer-body > div.aplayer-miniswitcher > button");
-  let flag = true;
-  const app: any = document.querySelector("#aplayer > div.aplayer-lrc");
-  const apic: any = document.querySelector("#aplayer div.aplayer-body");
-  app.style.display = "block";
-  app.style.transform = "translateY(50px)";
-  apic.style.transform = "translateX(-66px)";
-  d.addEventListener("click", () => {
-    if (flag) {
-      app.style.transform = "translateY(0)";
-      ap.lrc.show();
-      apic.style.transform = "translateX(0)";
-      flag = false;
-      
-    } else {
-      app.style.transform = "translateY(50px)";
-      ap.lrc.hide();
-      ap.list.hide();
-      apic.style.transform = "translateX(-66px)";
-      flag = true;
-    }
-  });
-  document.querySelector(".aplayer-list > ol")?.addEventListener("mousewheel", (e) => {
-    e.stopPropagation();
-  })
-
-  // 获取当前屏幕宽度
-  const width = document.documentElement.clientWidth; // 获取屏幕宽度
-  if (width < 767) d.click();
+    // 获取当前屏幕宽度
+    const width = document.documentElement.clientWidth; // 获取屏幕宽度
+    if (width < 767) d.click();
+  } catch (error) {
+    console.error('音乐列表加载失败:', error)
+  }
 });
 </script>
 <style lang="less" scoped>
diff --git a/src/components/backTop.vue b/src/components/backTop.vue
index 45d0459..6acff37 100644
--- a/src/components/backTop.vue
+++ b/src/components/backTop.vue
@@ -10,37 +10,35 @@
 
 <script setup lang="ts">
 import { throttle } from 'es-toolkit/function';
-const scrollTop: any = ref(null)
+const scrollTop = ref(0)
 const visiable = ref(false)
-const scrollElement: any = document.querySelector('.n-scrollbar .n-scrollbar-container')
+const scrollElement = document.querySelector<HTMLElement>('.n-scrollbar .n-scrollbar-container')
 const handleScroll = throttle(() => {
-  scrollTop.value = scrollElement.scrollTop
+  scrollTop.value = scrollElement?.scrollTop || 0
   visiable.value = scrollTop.value > 200;
 },1000)
 function handleScrollTop() {
-  let timer: any = null;
-  cancelAnimationFrame(timer);
-  timer = requestAnimationFrame(function fn() {
+  let timer = 0
+  const fn = () => {
     if (scrollTop.value > 0) {
       scrollTop.value -= 50;
-      scrollElement.scrollTop = document.documentElement.scrollTop = scrollTop.value;
+      if (scrollElement) scrollElement.scrollTop = scrollTop.value;
       timer = requestAnimationFrame(fn);
     } else {
       cancelAnimationFrame(timer);
       visiable.value = false;
     }
-  });
+  };
+  timer = requestAnimationFrame(fn);
 }
 
 onMounted(() => {
   scrollElement?.addEventListener('scroll', handleScroll);
 })
-onBeforeMount(() => {
-  window.removeEventListener('scroll', handleScroll);
+// 修复：原来用 onBeforeMount 且移除的是 window 的监听，导致卸载时滚动监听泄漏
+onUnmounted(() => {
+  scrollElement?.removeEventListener('scroll', handleScroll);
 })
-
-
-
 </script>
 
 <style scoped lang="less">
diff --git a/src/components/homeSide.vue b/src/components/homeSide.vue
index a3457fb..b1f3d6f 100644
--- a/src/components/homeSide.vue
+++ b/src/components/homeSide.vue
@@ -2,7 +2,8 @@
   <div class="pl-6 pr-6 !bg-transparent">
     <n-card
       embedded
-      class="side-glass-card side-glass-card--tint mt-4 overflow-hidden rounded-[24px]"
+      class="side-glass-card side-glass-card--tint mt-2 overflow-hidden rounded-[24px]"
+      :style="{ '--side-i': 0 }"
     >
       <template #header>
         <div class="flex items-center font-semibold text-slate-700">
@@ -11,20 +12,49 @@
         </div>
       </template>
       <template #default>
-        <div class="w-full pr-20 text-center text-4xl font-[yj] font-[500] tracking-[0.04em] text-[#ec66ab] drop-shadow-[0_8px_20px_rgba(236,102,171,0.14)]">
-          {{ t  }}        </div>
-        <div class="mt-3 flex justify-between text-[15px] text-slate-500">
-          <span>今年已过 {{ jq.dayOfYear }} 天</span>
-          {{ d }}
+        <div class="flex items-center justify-between gap-3">
+          <div class="min-w-0">
+            <div
+              class="text-3xl font-[yj] font-[500] leading-[1.15] tracking-[0.04em] text-[#ec66ab] drop-shadow-[0_8px_20px_rgba(236,102,171,0.14)]"
+            >
+              {{ t }}
+            </div>
+            <div class="mt-1 text-[14px] text-slate-500">{{ d }}</div>
+          </div>
+          <img
+            v-if="jq.type != 0"
+            class="pointer-events-none w-[88px] shrink-0 drop-shadow-[0_10px_22px_rgba(236,160,102,0.18)]"
+            src="@/assets/images/offwork.png"
+            alt="offwork"
+          >
+          <img
+            v-else
+            class="pointer-events-none w-[88px] shrink-0 drop-shadow-[0_10px_22px_rgba(102,160,236,0.18)]"
+            src="@/assets/images/onwork.png"
+            alt="onwork"
+          >
+        </div>
+        <div class="mt-2">
+          <div class="flex items-center justify-between text-[13px] text-slate-500">
+            <span>今年已过 {{ jq.dayOfYear }} 天</span>
+            <span>{{ yearProgress }}%</span>
+          </div>
+          <div
+            class="mt-1 h-1 overflow-hidden rounded-full bg-white/70 shadow-[inset_0_1px_2px_rgba(97,121,146,0.14)]"
+          >
+            <div
+              class="h-full rounded-full bg-[linear-gradient(90deg,#f2b077,#ec66ab)] shadow-[0_0_10px_rgba(236,102,171,0.4)] transition-[width] duration-700"
+              :style="{ width: yearProgress + '%' }"
+            ></div>
+          </div>
         </div>
-        <img v-if="jq.type != 0" class="absolute right-4 -top-15" width="120" src="@/assets/images/offwork.png" alt="offwork">
-        <img v-else class="absolute right-4 -top-15" width="120" src="@/assets/images/onwork.png" alt="onwork">
       </template>
     </n-card>
 
     <n-card
       embedded
-      class="side-glass-card mt-4 overflow-hidden rounded-[24px]"
+      class="side-glass-card mt-2 overflow-hidden rounded-[24px]"
+      :style="{ '--side-i': 1 }"
     >
       <template #header>
         <div class="flex items-center font-semibold text-slate-700">
@@ -35,21 +65,27 @@
       <template #default>
         <div class="py-1" v-for="i in bdNews" :key="i.id">
           <a
-            class="flex justify-between truncate rounded-xl border border-transparent px-2 text-[#526ecc] no-underline transition-colors duration-200 hover:border-white/80 hover:bg-white/65 hover:text-primary"
+            class="group flex items-center justify-between gap-2 rounded-xl border border-transparent px-2 py-0.5 text-[#526ecc] no-underline transition-[background-color,border-color,box-shadow,transform] duration-200 hover:-translate-y-px hover:border-white/80 hover:bg-white/65 hover:shadow-[0_2px_8px_rgba(97,121,146,0.08),inset_0_1px_0_rgba(255,255,255,0.6)]"
             :href="i.url"
             target="_blank"
           >
-            <span class="flex items-center truncate">
-              {{ i.index }}. {{ i.title }}
-              <icon-hot v-show="i.index < 4" class="ml-2 inline-block w-4 text-[red]"></icon-hot>
+            <span class="flex min-w-0 items-center truncate">
+              <span
+                class="mr-2 inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-md text-[11px] font-bold"
+                :class="i.index <= 3
+                  ? 'bg-[linear-gradient(135deg,#ec66ab,#f48a6f)] text-white shadow-[0_3px_8px_rgba(236,102,171,0.28)]'
+                  : 'bg-slate-700/6 text-slate-400'"
+              >{{ i.index }}</span>
+              <span class="truncate transition-colors duration-200 group-hover:text-primary">{{ i.title }}</span>
+              <icon-hot v-show="i.index < 4" class="ml-2 inline-block w-4 shrink-0 text-[red]"></icon-hot>
             </span>
-            <span class="ml-3 shrink-0 text-primary">{{ i.hot }}</span>
+            <span class="shrink-0 text-[13px] font-medium text-primary/85">{{ i.hot }}</span>
           </a>
         </div>
-        <div class="mt-2 flex items-center justify-between">
+        <div class="mt-1.5 flex items-center justify-between">
           <div class="h-px w-2/5 bg-gradient-to-r from-transparent via-[#ec66ab] to-[#ec66ab]/40"></div>
           <a
-            class="flex items-center font-medium text-[#ec66ab] no-underline"
+            class="flex items-center font-medium text-[#ec66ab] no-underline transition-transform duration-200 hover:scale-105"
             href="https://www.baidu.com/s?ie=utf-8&wd=百度新闻"
             target="_blank"
           >
@@ -63,26 +99,41 @@
 
     <n-card
       embedded
-      class="side-glass-card mt-4 overflow-hidden rounded-[24px]"
+      class="side-glass-card mt-2 overflow-hidden rounded-[24px]"
+      :style="{ '--side-i': 2 }"
     >
       <template #header>
         <div class="flex items-center font-semibold text-slate-700">
           <icon-date class="mr-2 h-[20px] w-5"></icon-date>
           农历节气
-          <div class="ml-12 font-semibold text-[#ec66ab]">{{ jq.yearTips }}年 {{ jq.lunarCalendar }}</div>
+          <div class="ml-8 font-semibold text-[#ec66ab]">{{ jq.yearTips }}年 {{ jq.lunarCalendar }}</div>
         </div>
       </template>
       <template #default>
-        <div class="mx-[5%] truncate text-sm text-slate-600">
-          宜：{{ jq.suit }}
+        <div class="mx-1 flex items-center gap-1.5 text-sm text-slate-600">
+          <icon-star class="w-4 shrink-0 text-[#7fb69a]"></icon-star>
+          <span class="truncate">宜：{{ jq.suit }}</span>
         </div>
-        <div class="mx-[5%] truncate text-sm text-slate-600">
-          忌：{{ jq.avoid }}
+        <div class="mx-1 mt-1.5 flex items-center gap-1.5 text-sm text-slate-600">
+          <icon-lock class="w-4 shrink-0 text-[#d99a9a]"></icon-lock>
+          <span class="truncate">忌：{{ jq.avoid }}</span>
         </div>
         <div class="flex w-full justify-center">
-          <img class="mt-3 w-[90%] rounded-2xl border border-white/80 bg-white/70 shadow-[0_12px_26px_rgba(102,129,156,0.12)]" :src="jqImg" alt="节气图">
+          <img
+            class="mt-2 w-[82%] rounded-2xl border border-white/80 bg-white/70 shadow-[0_1px_3px_rgba(97,121,146,0.05),0_10px_22px_rgba(97,121,146,0.1),0_28px_54px_rgba(178,128,88,0.07),inset_0_1px_0_rgba(255,255,255,0.7)]"
+            :src="jqImg"
+            alt="节气图"
+          >
+        </div>
+        <div class="mt-1.5 text-center font-medium text-slate-600">{{ jq.solarTerms }}</div>
+        <div
+          v-if="holiName && holiDays !== null"
+          class="mx-auto mt-2 flex w-fit items-center gap-1.5 rounded-full border border-white/70 bg-[linear-gradient(135deg,rgba(255,240,246,0.85),rgba(255,233,223,0.8))] px-3.5 py-0.5 text-[13px] font-medium text-[#c2558e] shadow-[0_2px_8px_rgba(236,102,171,0.12),inset_0_1px_0_rgba(255,255,255,0.7)]"
+        >
+          <icon-date class="w-3.5"></icon-date>
+          距 <b class="font-bold">{{ holiName }}</b> 还有
+          <b class="font-bold">{{ holiDays }}</b> 天
         </div>
-        <div class="mt-3 text-center font-medium text-slate-600">{{ jq.solarTerms }}</div>
       </template>
     </n-card>
   </div>
@@ -97,6 +148,25 @@ let timer: any = null
 const jq = ref<any>('')
 const jqImg = ref<any>('')
 const bdNews = ref<any>([])
+const holi = ref<any>(null)
+
+// 今年进度百分比
+const yearProgress = computed(() => {
+  const now = new Date()
+  const start = new Date(now.getFullYear(), 0, 1)
+  const end = new Date(now.getFullYear() + 1, 0, 1)
+  const pct = ((now.getTime() - start.getTime()) / (end.getTime() - start.getTime())) * 100
+  return Math.min(100, Math.max(0, pct)).toFixed(1)
+})
+
+// 下一个节假日（防御式解析多种字段名）
+const holiName = computed(() => holi.value?.name || holi.value?.holiday || '')
+const holiDays = computed(() => {
+  const v = holi.value
+  if (!v) return null
+  const raw = v.days ?? v.countdown ?? v.day ?? null
+  return typeof raw === 'number' ? raw : null
+})
 
 function getTime() {
   const date = new Date()
@@ -105,24 +175,43 @@ function getTime() {
 }
 
 async function getJq() {
-  const res = await $http.mix.getJq({
-    date: formatTime(new Date(), 'YYYYMMDD')
-  })
-  jq.value = res.data
-  const j = res.data.solarTerms.slice(0, 2)
-  const timestamp = new Date().getTime()
-  jqImg.value = `https://www.hxyouzi.com/img/jq/${j}.png?${timestamp}`
+  try {
+    const res = await $http.mix.getJq({
+      date: formatTime(new Date(), 'YYYYMMDD')
+    })
+    jq.value = res.data
+    const j = res.data.solarTerms.slice(0, 2)
+    const timestamp = new Date().getTime()
+    jqImg.value = `https://www.hxyouzi.com/img/jq/${j}.png?${timestamp}`
+  } catch {
+    // 接口失败时静默处理，保持空状态
+  }
 }
 
 async function getBdhot() {
-  const res = await $http.mix.getBdhot()
-  bdNews.value = res.data.slice(0, 5)
+  try {
+    const res = await $http.mix.getBdhot()
+    bdNews.value = res.data.slice(0, 5)
+  } catch {
+    bdNews.value = []
+  }
+}
+
+async function getHoli() {
+  try {
+    const res = await $http.mix.getHoli()
+    const data = Array.isArray(res.data) ? res.data[0] : res.data
+    holi.value = data || null
+  } catch {
+    holi.value = null
+  }
 }
 
 onMounted(() => {
   getTime()
   getJq()
   getBdhot()
+  getHoli()
 
   timer = setInterval(() => {
     getTime()
@@ -147,11 +236,40 @@ onUnmounted(() => {
     linear-gradient(135deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.16)),
     linear-gradient(180deg, rgba(241, 248, 252, 0.2), rgba(224, 236, 245, 0.08)) !important;
   box-shadow:
-    0 22px 40px rgba(86, 111, 137, 0.14),
-    inset 0 1px 0 rgba(255, 255, 255, 0.7),
-    inset 0 -1px 0 rgba(255, 255, 255, 0.16) !important;
+    0 1px 3px rgba(97, 121, 146, 0.05),
+    0 14px 30px rgba(97, 121, 146, 0.09),
+    0 36px 72px rgba(178, 128, 88, 0.07),
+    inset 0 1px 0 rgba(255, 255, 255, 0.72),
+    inset 0 -1px 0 rgba(255, 255, 255, 0.14) !important;
   backdrop-filter: blur(24px) saturate(165%);
   -webkit-backdrop-filter: blur(24px) saturate(165%);
+  transition:
+    transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
+    box-shadow 0.3s ease;
+  animation: side-card-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
+  animation-delay: calc(var(--side-i, 0) * 110ms);
+}
+
+.side-glass-card:hover {
+  transform: translateY(-2px);
+  box-shadow:
+    0 2px 6px rgba(97, 121, 146, 0.06),
+    0 20px 44px rgba(97, 121, 146, 0.13),
+    0 52px 100px rgba(178, 128, 88, 0.1),
+    inset 0 1px 0 rgba(255, 255, 255, 0.8),
+    inset 0 -1px 0 rgba(255, 255, 255, 0.18) !important;
+}
+
+@keyframes side-card-in {
+  from {
+    opacity: 0;
+    transform: translateY(20px) scale(0.96);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
 }
 
 .side-glass-card::before,
@@ -187,11 +305,11 @@ onUnmounted(() => {
 
 :deep(.n-card > .n-card__content),
 :deep(.n-card > .n-card__footer) {
-  padding: 12px 24px !important;
+  padding: 8px 20px !important;
 }
 
 :deep(.n-card > .n-card-header) {
-  padding: 16px 24px 8px !important;
+  padding: 10px 20px 4px !important;
 }
 
 :deep(.n-card) {
diff --git a/src/components/menuH.vue b/src/components/menuH.vue
index 04f6269..689efef 100644
--- a/src/components/menuH.vue
+++ b/src/components/menuH.vue
@@ -126,7 +126,6 @@ import linkSvg from '@/icon/menu/link.svg';
 import picSvg from '@/icon/menu/pic.svg';
 import type { DropdownOption, UploadFileInfo } from 'naive-ui';
 
-import { nextTick, onMounted, onUnmounted, ref, watch } from 'vue';
 import { RouterLink, useRoute, useRouter } from 'vue-router';
 
 interface UserInfo {
@@ -279,21 +278,26 @@ function handleUpload(f: any) {
 }
 
 async function autoLogin() {
-  const res = await $http.user.autologin()
-  if (res?.code !== 200) {
-    $msg.error('登录失败')
-    usrLog.setIsLogin(false)
-    $cookies.remove('token')
-    $cookies.remove('userinfo')
-    syncUserFromCookies()
-    return
-  }
+  try {
+    const res = await $http.user.autologin()
+    if (res?.code !== 200) {
+      $msg.error('登录失败')
+      usrLog.setIsLogin(false)
+      $cookies.remove('token')
+      $cookies.remove('userinfo')
+      syncUserFromCookies()
+      return
+    }
 
-  $cookies.set('token', res.data.token, '1d')
-  $cookies.set('userinfo', res.data.userinfo, '1d')
-  $msg.success(res.msg)
-  usrLog.setIsLogin(true)
-  syncUserFromCookies()
+    $cookies.set('token', res.data.token, '1d')
+    $cookies.set('userinfo', res.data.userinfo, '1d')
+    $msg.success(res.msg)
+    usrLog.setIsLogin(true)
+    syncUserFromCookies()
+  } catch {
+    usrLog.setIsLogin(false)
+    syncUserFromCookies()
+  }
 }
 
 function handdleItemCancel() {
diff --git a/src/config/index.ts b/src/config/index.ts
index e06a731..54a40d0 100644
--- a/src/config/index.ts
+++ b/src/config/index.ts
@@ -1,7 +1,10 @@
 export function useConfig() {
   const files = import.meta.glob("./*.ts", { eager: true }) as Record<string, any>;
-  Object.keys(files).forEach(key => {
-    const name = key.replace(/(\.\/|\.ts)/g, "");
-    (window as Record<string, any>)["$" + name] = files[key].default as any;
-  });
+  Object.keys(files)
+    // 排除自身 index.ts，避免挂载出无意义的 $index
+    .filter(key => !key.endsWith("/index.ts"))
+    .forEach(key => {
+      const name = key.replace(/(\.\/|\.ts)/g, "");
+      (window as Record<string, any>)["$" + name] = files[key].default as any;
+    });
 }
diff --git a/src/lib/components/LazyImg.vue b/src/lib/components/LazyImg.vue
index 7328958..9da91ca 100644
--- a/src/lib/components/LazyImg.vue
+++ b/src/lib/components/LazyImg.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="image-shell" :style="shellStyle">
-    <n-image ref="lazyRef" class="lazy__img" :src="url" @load="handleLoad" @error="handleError">
+    <n-image ref="lazyRef" class="lazy__img" :src="url" :preview-src="preUrl" @load="handleLoad" @error="handleError">
       <template #placeholder>
         <div class="lazy-placeholder">
           <span class="lazy-placeholder__ring">
@@ -32,6 +32,10 @@ const props = defineProps({
     type: String,
     default: "",
   },
+  preUrl: {
+    type: String,
+    default: "",
+  },
   loading: {
     type: String,
     default: loadingImg,
@@ -93,7 +97,7 @@ nextTick(() => {
   height: 100%;
   overflow: hidden;
   display: flex;
-  border-radius: 18px;
+  border-radius: 11px;
   background:
     radial-gradient(circle at top left, rgba(255, 198, 105, 0.18), transparent 32%),
     linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(244, 249, 255, 0.72));
@@ -118,7 +122,7 @@ nextTick(() => {
   align-items: center;
   justify-content: center;
   overflow: hidden;
-  border-radius: 18px;
+  border-radius: 11px;
 }
 
 :deep(.n-image-placeholder),
diff --git a/src/lib/components/Waterfall.vue b/src/lib/components/Waterfall.vue
index 37c1cbb..16eb47c 100644
--- a/src/lib/components/Waterfall.vue
+++ b/src/lib/components/Waterfall.vue
@@ -201,7 +201,7 @@ defineExpose({
   width: 100%;
   position: relative;
   overflow: hidden;
-  --waterfall-radius: 22px;
+  --waterfall-radius: 12px;
   --waterfall-border: rgba(255, 255, 255, 0.72);
   --waterfall-surface: linear-gradient(
     180deg,
diff --git a/src/main.ts b/src/main.ts
index 9bab6a4..be04ab0 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -2,6 +2,7 @@ import "@/assets/main.css";
 import { useConfig } from "@/config";
 import icon from "@/icon/index.ts";
 import { createPinia } from "pinia";
+import { RouterLink, RouterView } from 'vue-router';
 import "virtual:uno.css";
 import 'vue-devui/tag/style.css';
 import App from "./App.vue";
@@ -20,6 +21,9 @@ app.use(createPinia());
 app.use(router);
 // app.use(VMdPreview)
 useConfig();
+// resolver 模式的实验性路由器不会自动注册 RouterLink / RouterView，需手动全局注册
+app.component('RouterLink', RouterLink)
+app.component('RouterView', RouterView)
 for (const key in icon) {
   // console.log(key, icon[key]);
   app.component("icon-" + key, icon[key] as any);
diff --git a/src/router/index.ts b/src/router/index.ts
index c471837..be2fb50 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,24 +1,35 @@
-import NProgress from 'nprogress';
+import NProgress from "nprogress";
 import { createRouter, createWebHistory } from "vue-router";
+// 文件系统路由：vue-router/auto-routes 提供自动生成的 routes
 import { routes } from "vue-router/auto-routes";
-routes.unshift({
-  path: "/",
-  redirect: "/home",
-});
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
-  routes: routes as any,
+  routes: [
+    // 根路径重定向到 /home
+    { path: "/", redirect: "/home" },
+    ...routes,
+  ],
 });
+
+// 开发时热更新路由，无需整页刷新
+// if (import.meta.hot) {
+//   handleHotUpdate(router);
+// }
+
 // 前置守卫
-router.beforeEach((to, from, next) => {
-  NProgress.start()
-  next();
+router.beforeEach(to => {
+  NProgress.start();
 });
 
 // 后置守卫
 router.afterEach(() => {
-  NProgress.done()
+  NProgress.done();
+});
+
+// 路由错误时也要停止进度条
+router.onError(() => {
+  NProgress.done();
 });
 
 export default router;
diff --git a/src/stores/log.ts b/src/stores/log.ts
index 477f005..307096c 100644
--- a/src/stores/log.ts
+++ b/src/stores/log.ts
@@ -1,10 +1,10 @@
-export const useLogStore = defineStore('log', () => {
+export const useLogStore = defineStore("log", () => {
   // 登录状态
-  const isLogin:Ref<boolean,boolean> = ref(false)
-  
-  function setIsLogin(v:boolean) {
-    isLogin.value = v
+  const isLogin = ref(false);
+
+  function setIsLogin(v: boolean) {
+    isLogin.value = v;
   }
-  
-  return { isLogin, setIsLogin }
-})
\ No newline at end of file
+
+  return { isLogin, setIsLogin };
+});
diff --git a/src/stores/nav.ts b/src/stores/nav.ts
index 154541b..5ad7738 100644
--- a/src/stores/nav.ts
+++ b/src/stores/nav.ts
@@ -1,10 +1,9 @@
-export const useNavStore = defineStore('nav', () => {
-  const navH:Ref<number,number> = ref(56)
+export const useNavStore = defineStore("nav", () => {
+  const navH = ref(56);
 
-  function setNavH(v:number) {
-    navH.value = v
+  function setNavH(v: number) {
+    navH.value = v;
   }
 
-
-  return { navH , setNavH}
-})
\ No newline at end of file
+  return { navH, setNavH };
+});
diff --git a/src/util/index.ts b/src/util/index.ts
index c50e49d..bb7046b 100644
--- a/src/util/index.ts
+++ b/src/util/index.ts
@@ -1,14 +1,15 @@
 // 将res的key对应的值复制给dzdata的同名key
 /**
- * 将源对象res的属性复制到目标对象dzdata中。
+ * 将源对象 res 中「目标对象 dzdata 已存在的 key」对应的值复制过去（只覆盖既有键）。
  * @param {Object} res - 源对象，其属性将被复制。
- * @param {Object} dzdata - 目标对象，将接收源对象的属性。
+ * @param {Object} dzdata - 目标对象，仅其已存在的键会被源对象值覆盖。
  * @example
- * ObjectCopy({a: 1, b: 2}, {c: 3}); // dzdata 变为 {a: 1, b: 2, c: 3}
+ * ObjectCopy({a: 1, b: 2}, {a: 3}); // dzdata 变为 {a: 1}
  */
 export function ObjectCopy<T extends Record<string, any>>(res: Partial<T>, dzdata: T): void {
   Object.keys(dzdata).forEach(key => {
-    if (res.hasOwnProperty(key)) {
+    // 用 Object.prototype.hasOwnProperty 防御 res 为 null 原型对象的情况
+    if (Object.prototype.hasOwnProperty.call(res, key)) {
       (dzdata as Record<string, any>)[key] = res[key];
     }
   });
@@ -64,30 +65,18 @@ export function formatTime(time: string | number | Date, f: string): string | un
   return str;
 }
 
-/**
- * @description: 补零函数 为时间服务 不足两位的自动在数字前面加上0
- * @param {*} n 待补零数字
- * @return {*} 补零后数字
- */
-function timeAdd0(n: number): string {
-  return n.toString().padStart(2, "0");
-}
-
 export function deepclone<T>(obj: T): T {
   if (obj === null || typeof obj !== "object") {
     return obj;
   }
 
-  let newobj: any = obj instanceof Array ? [] : {};
-
-  if (window.JSON) {
-    newobj = JSON.parse(JSON.stringify(obj));
-  } else {
-    for (const i in obj) {
-      newobj[i] = typeof obj[i] === "object" ? deepclone(obj[i]) : obj[i];
-    }
+  // 优先使用 structuredClone：支持循环引用、Date/Map/Set，且性能优于 JSON 序列化
+  if (typeof structuredClone === "function") {
+    return structuredClone(obj);
   }
-  return newobj as T;
+
+  // 降级方案：JSON 序列化（会丢失 undefined/函数/符号，循环引用会抛错）
+  return JSON.parse(JSON.stringify(obj)) as T;
 }
 
 /**
@@ -98,8 +87,8 @@ export function deepclone<T>(obj: T): T {
  * @example
  * formatTimeBydate(new Date(), 'yyyy-MM-dd HH:mm:ss');
  */
-export function formatTimeBydate(this: string, f: string): string | undefined {
-  return formatTime(this, f);
+export function formatTimeBydate(date: string | number | Date, f: string): string | undefined {
+  return formatTime(date, f);
 }
 
 export function debounce<T extends (...args: any[]) => any>(fn: T, delay: number): (...args: Parameters<T>) => void {
@@ -139,18 +128,19 @@ export function throttle<T extends (...args: any[]) => any>(fn: T, delay: number
  * @return {*} 返回值
  */
 
-export function getDictValue<T extends Record<string, any>>(dict: T[], ckey: keyof T, cvalue: T[keyof T], rkey: keyof T): T[keyof T] | string {
-  let result = "";
-  dict.forEach(item => {
-    if (item[ckey] === cvalue) {
-      result = item[rkey];
-    }
-  });
-  return result;
+export function getDictValue<T extends Record<string, any>>(dict: T[], ckey: keyof T, cvalue: T[keyof T], rkey: keyof T): T[keyof T] | undefined {
+  // find 命中即返回，避免 forEach 遍历完整字典；未命中返回 undefined
+  const item = dict.find(item => item[ckey] === cvalue);
+  return item ? item[rkey] : undefined;
 }
 
 // 分割数组
 export function chunkArrayInGroups<T>(arr: T[], size: number): T[][] {
+  // 防御非法 size：<= 0 时 Math.ceil 会产生 Infinity，Array.from 将抛 RangeError
+  if (size < 1) {
+    console.warn("chunkArrayInGroups: size 必须大于 0，已返回空数组");
+    return [];
+  }
   return Array.from({ length: Math.ceil(arr.length / size) }, (_, i) => arr.slice(i * size, i * size + size));
 }
 // 重置对象
@@ -159,5 +149,3 @@ export function resetObject<T extends Record<string, any>>(obj: T): void {
     (obj as Record<string, any>)[key] = null;
   });
 }
-
-
diff --git a/src/util/request.ts b/src/util/request.ts
index e748754..b43cf6b 100644
--- a/src/util/request.ts
+++ b/src/util/request.ts
@@ -25,42 +25,30 @@ request.interceptors.request.use(
     } else delete config.headers["Authorization"];
     return config;
   },
-  function (error: AxiosError): string {
+  (error: AxiosError) => {
     // 对请求错误做些什么
-    return error.message || "Request error";
-  }
+    return Promise.reject(error);
+  },
 );
 
 // 添加响应拦截器
 request.interceptors.response.use(
-  function (response: AxiosResponse): any {
+  (response: AxiosResponse): any => {
     // 2xx 范围内的状态码都会触发该函数。
     // 对响应数据做点什么
     return response.data;
   },
-  async function (error: AxiosError): Promise<string> {
+  (error: AxiosError) => {
     // 超出 2xx 范围的状态码都会触发该函数。
-    // 对响应错误做点什么
-    console.log("Response error", error);
-
+    // 对响应错误做点什么（统一 reject，保证调用方 try/catch 能捕获到错误）
     if (error.response?.status === 401) {
       window.$msg.warning("无效的token");
       cookies.remove("token");
       cookies.remove("userinfo");
-      // window.$modal({
-      //   title: "无效的token",
-      //   content: "token已失效，需要登录，请登录 =>",
-      //   handdleSubmit: () => {
-      //     router.replace("/login");
-      //   },
-      // });
-
-      // router.replace("/login");
-      return "Unauthorized";
     }
 
-    return error.message || "Response error";
-  }
+    return Promise.reject(error);
+  },
 );
 
 export default request;
diff --git a/src/util/theme.ts b/src/util/theme.ts
index cf808d8..6d89684 100644
--- a/src/util/theme.ts
+++ b/src/util/theme.ts
@@ -1,15 +1,15 @@
- /**
-   * js 文件下使用这个做类型提示
-   * @type import('naive-ui').GlobalThemeOverrides
-   */
-  const themeOverrides = {
-    common: {
-      primaryColor: '#ec66ab',
-      primaryColorHover: '#ec66ab',
-      primaryColorPressed: '#ec66ab',
-      primaryColorSuppl: '#ec66ab',
-    },
-    // ...
-  }
+/**
+ * js 文件下使用这个做类型提示
+ * @type import('naive-ui').GlobalThemeOverrides
+ */
+const themeOverrides = {
+  common: {
+    primaryColor: "#ec66ab",
+    primaryColorHover: "#ec66ab",
+    primaryColorPressed: "#ec66ab",
+    primaryColorSuppl: "#ec66ab",
+  },
+  // ...
+};
 
-  export default themeOverrides;
\ No newline at end of file
+export default themeOverrides;
diff --git a/src/views/Gallery.vue b/src/views/Gallery.vue
index 34e9f52..6e5e7d3 100644
--- a/src/views/Gallery.vue
+++ b/src/views/Gallery.vue
@@ -13,7 +13,7 @@
 
     <n-scrollbar ref="virtualListInst" class="relative z-[1] py-6" :style="boxStyle" @scroll="handleScroll">
       <section
-        class="relative mx-auto w-[82%] rounded-[28px] border border-white/62 bg-[linear-gradient(145deg,rgba(255,251,246,0.68),rgba(237,246,244,0.56))] p-6 shadow-[0_20px_50px_rgba(110,124,112,0.11)] backdrop-blur-[20px] after:pointer-events-none after:absolute after:inset-0 after:rounded-[inherit] after:bg-[linear-gradient(120deg,rgba(255,255,255,0.24),transparent_45%)] after:content-['']">
+        class="relative mx-auto w-[82%] rounded-[28px] border border-white/62 bg-[linear-gradient(145deg,rgba(255,251,246,0.68),rgba(237,246,244,0.56))] p-6 shadow-[0_1px_3px_rgba(97,121,146,0.05),0_16px_38px_rgba(97,121,146,0.09),0_44px_84px_rgba(178,128,88,0.07),inset_0_1px_0_rgba(255,255,255,0.7)] backdrop-blur-[20px] after:pointer-events-none after:absolute after:inset-0 after:rounded-[inherit] after:bg-[linear-gradient(120deg,rgba(255,255,255,0.24),transparent_45%)] after:content-['']">
         <div class="max-w-[48rem]">
           <h1 class="m-0 text-[clamp(1.8rem,2.5vw,2.8rem)] leading-[1.2] text-[#2c3a4a]">
             把喜欢的画面收进一片更柔和的光里
@@ -24,11 +24,11 @@
         </div>
 
         <div
-          class="mt-6 rounded-full border border-white/62 bg-[linear-gradient(135deg,rgba(255,249,241,0.76),rgba(236,245,243,0.72)),radial-gradient(circle_at_top_right,rgba(255,255,255,0.28),transparent_34%)] shadow-[inset_0_1px_0_rgba(255,255,255,0.55)]">
-          <n-input class="gallery-search" round size="large" v-model:value="kw" @keyup.enter="onSearch"
-            placeholder="请输入关键词，按回车开始搜索">
+          class="mt-6 rounded-full border border-white/62 bg-[linear-gradient(135deg,rgba(255,249,241,0.76),rgba(236,245,243,0.72)),radial-gradient(circle_at_top_right,rgba(255,255,255,0.28),transparent_34%)] shadow-[inset_0_1px_0_rgba(255,255,255,0.55)] transition-[box-shadow,border-color] duration-300">
+          <n-input class="gallery-search" round size="large" clearable v-model:value="kw" @keyup.enter="onSearch"
+            placeholder="输入关键词，按回车开始搜索">
             <template #suffix>
-              <n-icon class="cursor-pointer text-slate-500" size="large">
+              <n-icon class="cursor-pointer text-slate-500 transition-colors duration-200 hover:text-primary" size="large" @click="onSearch">
                 <icon-search />
               </n-icon>
             </template>
@@ -37,43 +37,62 @@
       </section>
 
       <section
-        class="mx-auto mt-6 w-[82%] rounded-[30px] border border-white/62 bg-white/42 p-6 shadow-[0_18px_42px_rgba(109,126,117,0.1)] backdrop-blur-[18px]">
+        class="mx-auto mt-6 w-[82%] rounded-[30px] border border-white/62 bg-white/42 p-6 shadow-[0_1px_3px_rgba(97,121,146,0.05),0_14px_30px_rgba(97,121,146,0.09),0_36px_72px_rgba(178,128,88,0.07),inset_0_1px_0_rgba(255,255,255,0.7)] backdrop-blur-[18px]">
         <div class="mb-5 flex flex-col gap-4 md:flex-row md:items-start md:justify-between">
           <div>
             <div class="text-[1.6rem] font-semibold text-[#2f4050]">图片列表</div>
+            <div class="mt-1 flex items-center gap-2 text-[13px] text-slate-500">
+              <span v-if="searchKeyword" class="inline-flex items-center rounded-full bg-[rgba(236,102,171,0.1)] px-2.5 py-0.5 font-semibold text-[rgb(212,88,154)]">
+                关键词：{{ searchKeyword }}
+              </span>
+              <span>{{ galleryStats.status }}</span>
+            </div>
           </div>
-          <div
-            class="inline-flex items-center whitespace-nowrap rounded-full border border-white/80 bg-white/68 px-4 py-[0.65rem] text-[#526376]">
+          <div class="inline-flex items-center gap-2 self-start rounded-full bg-white/68 px-5 py-2 text-[#526376] shadow-[0_2px_8px_rgba(97,121,146,0.08),inset_0_1px_0_rgba(255,255,255,0.7)]">
+            <span class="inline-block h-2 w-2 rounded-full" :class="loading ? 'animate-pulse bg-[#ec66ab]' : 'bg-[#7fb69a]'"></span>
             {{ galleryStats.loaded }} 张
           </div>
         </div>
 
-        <Waterfall ref="waterfall" :list="fileList" :gutter="gutter" :columns="column" class="w-full" img-selector="url"
+        <Waterfall ref="waterfall" :list="fileList" :gutter="gutter" :columns="column" row-key="filepath" class="w-full" img-selector="url"
           animation-effect="fadeIn" :animation-duration="1000" :animation-delay="300" backgroundColor="transparent">
           <template #item="{ item }">
             <div
-              class="group relative flex h-full items-center justify-center overflow-hidden rounded-[24px] border border-white/82 bg-[linear-gradient(180deg,rgba(255,252,248,0.92),rgba(239,244,241,0.78))] shadow-[0_16px_34px_rgba(116,132,124,0.14)] backdrop-blur-[14px] transition-[transform,box-shadow,border-color] duration-[320ms] [transition-timing-function:cubic-bezier(0.22,1,0.36,1)] hover:border-white/196 hover:shadow-[0_22px_42px_rgba(102,123,112,0.18)]">
-              <LazyImg class="overflow-hidden rounded-[20px]" :Pwidth="item.width" :Pheight="item.height"
-                :url="item.filepath" />
+              class="gallery-card group relative flex h-full items-center justify-center overflow-hidden rounded-[12px] border border-white/82 bg-[linear-gradient(180deg,rgba(255,252,248,0.92),rgba(239,244,241,0.78))] backdrop-blur-[14px] transition-[transform,box-shadow,border-color] duration-[320ms] [transition-timing-function:cubic-bezier(0.22,1,0.36,1)] hover:-translate-y-1">
+              <LazyImg class="gallery-img overflow-hidden rounded-[12px]" :Pwidth="item.width" :Pheight="item.height"
+                :url="item.thumbnail" :preUrl="item.filepath" />
               <div
-                class="absolute left-0 right-0 top-0 z-10 overflow-hidden text-ellipsis whitespace-nowrap rounded-[14px] border border-white/22 bg-[rgba(39,50,65,0.1)] px-3 py-1 items-center justify-center text-sm text-white hidden backdrop-blur-[12px] group-hover:flex">
+                class="pointer-events-none absolute left-0 right-0 top-0 z-10 truncate rounded-[12px] border-b border-white/22 bg-gradient-to-b from-[rgba(39,50,65,0.55)] to-transparent px-3 pb-3 pt-1.5 text-sm text-white opacity-0 backdrop-blur-[6px] transition-opacity duration-300 group-hover:opacity-100">
                 {{ item.filename }}
               </div>
               <div
-                class="absolute bottom-0 left-0 right-0 z-10 flex items-center justify-between gap-3 rounded-[14px] border border-white/22 bg-[rgba(39,50,65,0.5)] px-3 py-1 text-white backdrop-blur-[12px]">
+                class="absolute bottom-0 left-0 right-0 z-10 flex translate-y-[102%] items-center justify-between gap-3 rounded-[12px] border border-white/22 bg-[rgba(39,50,65,0.55)] px-3 py-1.5 text-white backdrop-blur-[12px] transition-transform duration-[320ms] [transition-timing-function:cubic-bezier(0.22,1,0.36,1)] group-hover:translate-y-0">
                 <div class="min-w-0 overflow-hidden text-ellipsis whitespace-nowrap text-sm text-[#eef4f8]">
                   由 <span class="font-semibold text-[#ffd8cb]">{{ item.nickname }}</span> 分享
                 </div>
                 <div
-                  class="inline-flex flex-shrink-0 cursor-pointer items-center rounded-full bg-white/18 px-4 py-1 text-[0.86rem] font-semibold text-[#ffe3d3] transition-colors duration-200 hover:bg-white/24 hover:text-white"
-                  @click="downloadFile(item.filepath)">
-                  <icon-download class="mr-1 h-5 w-5" />
+                  class="inline-flex flex-shrink-0 cursor-pointer items-center rounded-full bg-white/18 px-3.5 py-1 text-[0.86rem] font-semibold text-[#ffe3d3] transition-[background-color,transform] duration-200 hover:scale-105 hover:bg-white/28 hover:text-white active:scale-95"
+                  @click.stop="downloadFile(item.filepath)">
+                  <icon-download class="mr-1 h-4 w-4" />
                   下载
                 </div>
               </div>
             </div>
           </template>
         </Waterfall>
+
+        <div v-if="fileList.length === 0 && !loading" class="flex flex-col items-center justify-center py-16 text-slate-400">
+          <icon-search class="mb-3 h-10 w-10 opacity-50" />
+          <p class="text-[15px]">{{ searchKeyword ? '未找到相关图片，换个关键词试试' : '暂无图片' }}</p>
+        </div>
+
+        <div v-if="loading" class="flex items-center justify-center gap-2 py-6 text-sm text-slate-400">
+          <icon-loading class="zhuan h-5 w-5 text-primary" />
+          <span>{{ fileList.length ? '加载中...' : '首次加载中...' }}</span>
+        </div>
+        <div v-else-if="isLoadAll && fileList.length" class="py-5 text-center text-[13px] text-slate-400">
+          — 已加载全部 {{ fileList.length }} 张图片 —
+        </div>
       </section>
     </n-scrollbar>
   </div>
@@ -120,6 +139,7 @@ const cwidth = ref(240)
 const column = ref(5)
 const gutter = ref(18)
 const isLoadAll = ref(false)
+let requestSeq = 0
 
 const searchKeyword = computed(() => kw.value.trim())
 
@@ -180,6 +200,7 @@ function resetGalleryState() {
 async function getFileList() {
   if (loading.value) return
   loading.value = true
+  const seq = ++requestSeq
 
   try {
     const res = await $http.file.getFileList({
@@ -189,6 +210,9 @@ async function getFileList() {
     })
     const list = res.data as GalleryItem[]
 
+    // 过期请求直接丢弃，避免搜索时旧结果覆盖新结果
+    if (seq !== requestSeq) return
+
     if (list.length < ps.value) {
       isLoadAll.value = true
     }
@@ -197,8 +221,10 @@ async function getFileList() {
   } catch (error) {
     console.error('获取图片列表失败:', error)
   } finally {
-    loading.value = false
-    renderWaterfall()
+    if (seq === requestSeq) {
+      loading.value = false
+      renderWaterfall()
+    }
   }
 }
 
@@ -216,12 +242,17 @@ const handleScroll = throttle((e: Event) => {
     pn.value += 1
     getFileList()
   }
-}, 1000)
+}, 300)
 
 function onSearch() {
   pn.value = 1
   kw.value = kw.value.trim()
   isLoadAll.value = false
+  // 立即清空旧列表，避免搜索时看到上一批结果
+  fileList.value = []
+  // 若正在加载中，先解除守卫，让新搜索请求可以发起
+  loading.value = false
+  requestSeq += 1
   getFileList()
 }
 
@@ -240,16 +271,17 @@ onMounted(() => {
   calculateColumns()
   updateBoxStyle()
   getFileList()
-  window.addEventListener('resize', calculateColumns)
-  window.addEventListener('resize', updateBoxStyle)
-  window.addEventListener('scroll', handleScroll)
+  window.addEventListener('resize', handleResize)
 })
 
+function handleResize() {
+  calculateColumns()
+  updateBoxStyle()
+}
+
 onUnmounted(() => {
   resetGalleryState()
-  window.removeEventListener('resize', calculateColumns)
-  window.removeEventListener('resize', updateBoxStyle)
-  window.removeEventListener('scroll', handleScroll)
+  window.removeEventListener('resize', handleResize)
 })
 
 // 防抖函数
@@ -260,8 +292,14 @@ onUnmounted(() => {
 :deep(.gallery-search .n-input) {
   background: rgba(255, 255, 255, 0.74) !important;
   border: 1px solid rgba(255, 255, 255, 0.7) !important;
-  box-shadow: 0 10px 28px rgba(109, 138, 132, 0.1) !important;
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.6),
+    0 2px 6px rgba(97, 121, 146, 0.05),
+    0 10px 24px rgba(97, 121, 146, 0.09) !important;
   backdrop-filter: blur(18px);
+  transition:
+    border-color 0.25s ease,
+    box-shadow 0.25s ease;
 }
 
 :deep(.gallery-search .n-input__input-el) {
@@ -274,7 +312,52 @@ onUnmounted(() => {
 
 :deep(.gallery-search .n-input.n-input--focus) {
   border-color: rgba(122, 160, 148, 0.7) !important;
-  box-shadow: 0 16px 38px rgba(118, 149, 139, 0.16) !important;
+  box-shadow:
+    0 0 0 4px rgba(122, 160, 148, 0.12),
+    inset 0 1px 0 rgba(255, 255, 255, 0.6),
+    0 2px 6px rgba(97, 121, 146, 0.06),
+    0 16px 36px rgba(97, 121, 146, 0.14) !important;
+}
+
+/* 图片卡片 hover 增强 */
+.gallery-card {
+  box-shadow:
+    0 1px 3px rgba(97, 121, 146, 0.05),
+    0 12px 26px rgba(97, 121, 146, 0.09),
+    0 32px 60px rgba(178, 128, 88, 0.06),
+    inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
+}
+
+.gallery-card:hover {
+  border-color: rgba(255, 255, 255, 0.88) !important;
+  box-shadow:
+    0 2px 6px rgba(97, 121, 146, 0.06),
+    0 18px 38px rgba(97, 121, 146, 0.14),
+    0 48px 90px rgba(178, 128, 88, 0.1),
+    inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
+}
+
+.gallery-img {
+  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.gallery-card:hover .gallery-img {
+  transform: scale(1.045);
+}
+
+/* 加载图标旋转 */
+.zhuan {
+  animation: gallery-spin 1.5s linear infinite;
+}
+
+@keyframes gallery-spin {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
 }
 
 :deep(.n-image img) {
diff --git a/src/views/Plink.vue b/src/views/Plink.vue
index cc435fe..f17173a 100644
--- a/src/views/Plink.vue
+++ b/src/views/Plink.vue
@@ -356,10 +356,14 @@ function getTagColor(tag: string) {
 }
 
 async function getPlinkList() {
-  const res = await $http.plink.getPlinkList() as PlinkListResponse
-  const uniqueTags = Array.from(new Set(res.data.flatMap((item) => getTags(item.tagname))))
-  tagColorList.value = buildTagColorMap(uniqueTags)
-  pList.value = res.data
+  try {
+    const res = await $http.plink.getPlinkList() as PlinkListResponse
+    const uniqueTags = Array.from(new Set(res.data.flatMap((item) => getTags(item.tagname))))
+    tagColorList.value = buildTagColorMap(uniqueTags)
+    pList.value = res.data
+  } catch {
+    pList.value = []
+  }
 }
 
 function gotoWebsite(url: string) {
@@ -404,15 +408,19 @@ async function submitPut() {
     return
   }
 
-  const res = await $http.plink.addPlink(plinkData)
-  if (res?.code !== 200) {
-    $msg.error(res.msg)
-    return
-  }
+  try {
+    const res = await $http.plink.addPlink(plinkData)
+    if (res?.code !== 200) {
+      $msg.error(res.msg)
+      return
+    }
 
-  $msg.success(res.msg)
-  resetFormData()
-  await getPlinkList()
+    $msg.success(res.msg)
+    resetFormData()
+    await getPlinkList()
+  } catch {
+    $msg.error('提交失败，请稍后再试')
+  }
 }
 
 onMounted(() => {
diff --git a/src/views/Widget.vue b/src/views/Widget.vue
index edc97d1..019f41d 100644
--- a/src/views/Widget.vue
+++ b/src/views/Widget.vue
@@ -4,7 +4,7 @@
   </div>
 </template>
 
-<script setup lang="js">
+<script setup lang="ts">
 
 definePage({
   name: 'widget',
diff --git a/src/views/blog/[bid].vue b/src/views/blog/[bid].vue
index 229671f..099bf8e 100644
--- a/src/views/blog/[bid].vue
+++ b/src/views/blog/[bid].vue
@@ -12,12 +12,21 @@
       class="pointer-events-none absolute inset-0 opacity-14 [background-image:linear-gradient(rgba(255,255,255,0.18)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.18)_1px,transparent_1px)] [background-size:36px_36px] [mask-image:linear-gradient(180deg,rgba(0,0,0,0.8),transparent_85%)]">
     </div>
 
-    <div class="relative z-[1] mx-auto flex h-full w-[86%] gap-6 py-6">
-      <aside class="hidden w-[21rem] shrink-0 lg:block">
+    <!-- 阅读进度条 -->
+    <div class="pointer-events-none absolute inset-x-0 top-0 z-[60] h-[3px] bg-white/10">
+      <div
+        class="h-full rounded-r-full bg-gradient-to-r from-[#ec66ab] via-[#c98a5d] to-[#76b0d6] transition-[width] duration-150 ease-out"
+        :style="{ width: `${progress}%` }"></div>
+    </div>
+
+    <div class="relative z-[1] mx-auto flex h-full w-[92%] max-w-[1500px] gap-6 py-6 xl:w-[86%]">
+      <aside v-if="!loading && !loadError" class="hidden w-[21rem] shrink-0 lg:block">
         <div class="sticky top-6">
           <section class="blog-detail-card p-6">
             <div class="relative z-[1]">
-              <h1 class="mt-3 text-[2rem] text-center leading-[1.2] text-[#2c3a4a]">阅读目录</h1>
+              <h1 class="mt-3 text-center text-[2rem] leading-[1.2] text-[#2c3a4a]">阅读目录</h1>
+              <div class="mx-auto mt-2 h-1 w-16 rounded-full bg-gradient-to-r from-[#ec66ab] via-[#c98a5d] to-[#76b0d6] opacity-70">
+              </div>
 
               <div class="blog-detail-card-soft mt-6 p-4">
                 <div class="mb-3 flex items-center justify-between">
@@ -25,11 +34,11 @@
                   <span class="rounded-full cursor-pointer bg-primary px-3 py-1 text-xs text-white">正文导航</span>
                 </div>
 
-                <div class="text-[13px] leading-5 text-[#526376]">
+                <div class="toc-list text-[13px] leading-5 text-[#526376]">
                   <template v-for="item in tocItems" :key="item.id">
                     <details v-if="item.children.length" class="group" :open="item.open">
                       <summary
-                        class="flex cursor-pointer list-none items-center gap-2 py-1 text-[#526376] marker:hidden select-none">
+                        class="flex cursor-pointer list-none items-center gap-2 rounded-lg py-1 text-[#526376] marker:hidden select-none">
                         <span
                           class="text-[11px] text-[#8a98a1] transition-transform duration-200 group-open:rotate-90">▶</span>
                         <span class="truncate transition-colors duration-200"
@@ -39,9 +48,10 @@
                         </span>
                       </summary>
                       <div class="ml-4 border-l border-[#d7dfdf] pl-3">
-                        <div v-for="child in item.children" :key="child.id" class="py-1">
-                          <div class="cursor-pointer truncate transition-colors duration-200"
-                            :class="activeHeadingId === child.id ? 'text-primary font-semibold' : 'text-[#687983] hover:text-[#2f4050]'"
+                        <div v-for="child in item.children" :key="child.id" class="py-1"
+                          :style="{ paddingLeft: `${Math.min(child.level - 2, 3) * 10}px` }">
+                          <div class="toc-child cursor-pointer truncate rounded-md transition-colors duration-200"
+                            :class="activeHeadingId === child.id ? 'toc-active text-primary font-semibold' : 'text-[#687983] hover:text-[#2f4050]'"
                             @click="scrollToHeading(child.id)">
                             {{ child.text }}
                           </div>
@@ -49,8 +59,8 @@
                       </div>
                     </details>
 
-                    <div v-else class="cursor-pointer py-1 transition-colors duration-200"
-                      :class="activeHeadingId === item.id ? 'text-primary font-semibold' : 'text-[#526376] hover:text-[#2f4050]'"
+                    <div v-else class="toc-leaf cursor-pointer rounded-md py-1 transition-colors duration-200"
+                      :class="activeHeadingId === item.id ? 'toc-active text-primary font-semibold' : 'text-[#526376] hover:text-[#2f4050]'"
                       @click="scrollToHeading(item.id)">
                       {{ item.text }}
                     </div>
@@ -67,79 +77,172 @@
       </aside>
 
       <section class="blog-list-panel min-w-0 flex-1 overflow-hidden p-4 sm:p-6">
-        <n-scrollbar ref="detailScrollbar" :style="contentStyle" trigger="none" class="pr-1 mb-4 rounded-[3em] overflow-hidden">
-          <div class="space-y-5 pr-1">
-            <section class="blog-detail-card p-6">
-              <div class="flex flex-col gap-4 md:flex-row md:items-start md:justify-between">
-                <div class="min-w-0">
-                  <div class="text-[0.82rem] font-semibold tracking-[0.16em] text-[#718195]">文章详情</div>
-                  <h1
-                    class="my-4 !w-full ml-1/2 text-center text-[1.9rem] font-semibold leading-[1.3] text-[#2f4050] sm:text-[2.15rem]">
-                    {{ blogData.title || '文章内容' }}
-                  </h1>
-                </div>
-                <n-breadcrumb class="shrink-0 rounded-full border border-white/52 bg-white/16 px-4 text-[#526376]"
-                  separator="|">
-                  <n-breadcrumb-item href="/blog/blog">文章</n-breadcrumb-item>
-                  <n-breadcrumb-item>{{ blogData.title }}</n-breadcrumb-item>
-                </n-breadcrumb>
-              </div>
-              <div class="flex flex-wrap items-center justify-right gap-x-5 gap-y-2 text-sm text-[#708091]">
-                <em class="flex items-center gap-1 not-italic text-primary">
-                  <n-icon><icon-author /></n-icon>
-                  {{ blogData.nickname }}
-                </em>
-                <em class="flex items-center gap-1 not-italic">
-                  <n-icon><icon-date /></n-icon>
-                  {{ formatTime(blogData.updated_at, 'YYYY年MM月DD日 hh时') }}
-                </em>
+        <!-- 加载骨架屏 -->
+        <div v-if="loading" class="flex h-full flex-col gap-5">
+          <section class="blog-detail-card p-6">
+            <div class="flex items-center justify-between">
+              <div class="blog-skeleton h-5 w-24 rounded-full"></div>
+              <div class="blog-skeleton h-7 w-40 rounded-full"></div>
+            </div>
+            <div class="mt-6 space-y-3">
+              <div class="blog-skeleton mx-auto h-9 w-2/3 rounded-xl"></div>
+              <div class="blog-skeleton mx-auto h-4 w-1/3 rounded-full"></div>
+              <div class="mx-auto mt-5 flex gap-3">
+                <div class="blog-skeleton h-6 w-16 rounded-full"></div>
+                <div class="blog-skeleton h-6 w-20 rounded-full"></div>
+                <div class="blog-skeleton h-6 w-14 rounded-full"></div>
               </div>
+            </div>
+          </section>
+          <section class="blog-detail-card p-6">
+            <div class="blog-skeleton h-10 w-36 rounded-xl"></div>
+            <div class="mt-6 space-y-3">
+              <div class="blog-skeleton h-4 w-full rounded-full"></div>
+              <div class="blog-skeleton h-4 w-11/12 rounded-full"></div>
+              <div class="blog-skeleton h-4 w-4/5 rounded-full"></div>
+              <div class="blog-skeleton h-4 w-full rounded-full"></div>
+              <div class="blog-skeleton h-4 w-2/3 rounded-full"></div>
+            </div>
+          </section>
+        </div>
 
-              <div class="mt-4 flex flex-wrap justify-center gap-3">
-                <div v-for="(item, index) in tags" :key="index" :style="{ backgroundColor: getTagColor(item) }"
-                  class="inline-flex cursor-pointer items-center gap-1 rounded-full px-3 py-1 text-sm text-white shadow-[0_8px_20px_rgba(88,108,125,0.16)]">
-                  <n-icon><icon-tag /></n-icon>
-                  {{ item }}
-                </div>
-              </div>
-            </section>
-
-            <section class="blog-detail-card p-4 sm:p-5">
-              <n-collapse @item-header-click="AISum" arrow-placement="right">
-                <n-collapse-item>
-                  <template #header>
-                    <div class="flex items-center text-primary">
-                      <icon-star class="mx-2 w-6" />
-                      <div class="text-[20px] font-bold">AI 摘要</div>
-                    </div>
-                  </template>
-                  <template #header-extra>
-                    <div class="flex text-primary">
-                      <icon-star class="mx-2 w-6" />
-                    </div>
-                  </template>
-                  <div class="whitespace-pre-line indent-[2em]  text-[#66778b]">
-                    {{ msg }}
-                  </div>
-                </n-collapse-item>
-              </n-collapse>
-            </section>
-
-            <section class="blog-detail-card px-5 py-6 sm:px-8 sm:py-8">
-              <MdPreview class="relative article-preview !bg-transparent" :modelValue="markdown" />
-            </section>
+        <!-- 加载失败 -->
+        <div v-else-if="loadError" class="flex h-full flex-col items-center justify-center gap-4 text-center">
+          <div class="blog-detail-card px-10 py-12">
+            <div class="text-[1.2rem] font-semibold text-[#2f4050]">文章加载失败</div>
+            <p class="mt-2 text-sm text-[#8a98a1]">{{ loadError }}</p>
+            <button type="button" @click="reload"
+              class="mt-6 cursor-pointer rounded-full bg-primary px-6 py-2 text-sm text-white shadow-[0_10px_24px_rgba(88,108,125,0.24)] transition-transform hover:-translate-y-0.5">
+              重新加载
+            </button>
           </div>
-        </n-scrollbar>
+        </div>
 
-        <button
-          v-show="showBackToTop"
-          type="button"
-          aria-label="回到顶部"
-          class="absolute bottom-6 right-6 z-[3] flex h-11 w-11 items-center justify-center rounded-full outline-none border-none bg-white/24 text-primary shadow-[0_16px_28px_rgba(109,126,117,0.14),inset_0_1px_0_rgba(255,255,255,0.24)] backdrop-blur-[16px] transition-all duration-300 hover:-translate-y-1 hover:bg-white/36"
-          @click="scrollToTop"
-        >
-          <icon-backtop class="h-5 w-5" />
-        </button>
+        <template v-else>
+          <n-scrollbar ref="detailScrollbar" :style="contentStyle" trigger="none"
+            class="pr-1 mb-4 rounded-[3em] overflow-hidden">
+            <div class="space-y-5 pr-1">
+              <section class="blog-detail-card p-6">
+                <div class="flex flex-col gap-4 md:flex-row md:items-start md:justify-between">
+                  <div class="min-w-0">
+                    <div class="text-[0.82rem] font-semibold tracking-[0.16em] text-[#718195]">文章详情</div>
+                    <h1
+                      class="my-4 text-center text-[1.9rem] font-semibold leading-[1.3] text-[#2f4050] sm:text-[2.15rem]">
+                      {{ blogData.title || '文章内容' }}
+                    </h1>
+                    <div
+                      class="mx-auto mb-1 h-1 w-24 rounded-full bg-gradient-to-r from-[#ec66ab] via-[#c98a5d] to-[#76b0d6] opacity-70">
+                    </div>
+                  </div>
+                  <n-breadcrumb class="shrink-0 rounded-full border border-white/52 bg-white/16 px-4 text-[#526376]"
+                    separator="|">
+                    <n-breadcrumb-item href="/blog/blog">文章</n-breadcrumb-item>
+                    <n-breadcrumb-item>{{ blogData.title }}</n-breadcrumb-item>
+                  </n-breadcrumb>
+                </div>
+                <div
+                  class="mt-2 flex flex-wrap items-center justify-center gap-x-5 gap-y-2 text-sm text-[#708091]">
+                  <em
+                    class="flex items-center gap-1.5 rounded-full bg-white/46 px-3 py-1 not-italic text-primary shadow-[0_4px_12px_rgba(88,108,125,0.08)]">
+                    <n-icon><icon-author /></n-icon>
+                    {{ blogData.nickname }}
+                  </em>
+                  <em class="flex items-center gap-1.5 not-italic">
+                    <n-icon><icon-date /></n-icon>
+                    {{ formatTime(blogData.updated_at, 'YYYY年MM月DD日 hh时') }}
+                  </em>
+                </div>
+
+                <div class="mt-5 flex flex-wrap justify-center gap-3">
+                  <div v-for="(item, index) in tags" :key="index" :style="{ backgroundColor: getTagColor(item) }"
+                    class="inline-flex cursor-pointer items-center gap-1 rounded-full px-3 py-1 text-sm text-white shadow-[0_8px_20px_rgba(88,108,125,0.16)] transition-all duration-300 hover:-translate-y-0.5 hover:shadow-[0_12px_26px_rgba(88,108,125,0.28)]">
+                    <n-icon><icon-tag /></n-icon>
+                    {{ item }}
+                  </div>
+                </div>
+              </section>
+
+              <section class="blog-detail-card p-4 sm:p-5">
+                <n-collapse :expanded-names="aiExpanded ? ['ai-summary'] : []" arrow-placement="right"
+                  @update:expanded-names="onAiExpand">
+                  <n-collapse-item name="ai-summary">
+                    <template #header>
+                      <div class="flex items-center gap-2.5">
+                        <div
+                          class="flex h-8 w-8 items-center justify-center rounded-xl bg-gradient-to-br from-[#ec66ab] to-[#c98a5d] text-white shadow-[0_6px_14px_rgba(236,102,171,0.28)]">
+                          <n-icon :class="aiState === 'loading' || aiState === 'streaming' ? 'animate-spin' : ''">
+                            <icon-star class="h-4 w-4" />
+                          </n-icon>
+                        </div>
+                        <div class="text-[20px] font-bold text-[#2f4050]">AI 摘要</div>
+                      </div>
+                    </template>
+                    <template #header-extra>
+                      <div class="flex items-center gap-2 text-[0.78rem] text-[#8a98a1]">
+                        <span v-if="aiState === 'loading'">正在思考…</span>
+                        <span v-else-if="aiState === 'streaming'">生成中…</span>
+                        <span v-else-if="aiState === 'done'">已完成</span>
+                        <span v-else-if="aiState === 'error'">生成失败</span>
+                        <span v-else>点击展开生成</span>
+                      </div>
+                    </template>
+
+                    <div class="whitespace-pre-line pt-1 text-[#66778b]">
+                      <!-- 加载中 -->
+                      <div v-if="aiState === 'loading'" class="flex items-center gap-3 py-2 text-[#8a98a1]">
+                        <n-spin :size="18" />
+                        <span class="text-sm">AI 正在阅读文章，请稍候…</span>
+                      </div>
+
+                      <!-- 流式输出 / 已完成 -->
+                      <div v-else-if="aiState === 'streaming' || (aiState === 'done' && aiMsg)"
+                        class="indent-[2em] leading-7">
+                        {{ aiMsg }}<span v-if="aiState === 'streaming'" class="ai-cursor"></span>
+                      </div>
+
+                      <!-- 生成失败 -->
+                      <div v-else-if="aiState === 'error'"
+                        class="flex flex-col items-start gap-3 rounded-2xl bg-[#fff5f5] px-4 py-3 text-sm text-[#c96a6a]">
+                        <span>摘要生成失败：{{ aiError || '未知错误' }}</span>
+                        <n-button @click="triggerAi"
+                          class="cursor-pointer rounded-full bg-primary px-4 py-1 text-xs text-white transition-opacity hover:opacity-85">
+                          重新生成
+                        </n-button>
+                      </div>
+
+                      <!-- 初始提示 -->
+                      <div v-else class="py-2 text-sm text-[#8a98a1]">
+                        点击上方标题展开，AI 将为你生成这篇文章的摘要
+                      </div>
+
+                      <!-- 完成后重新生成 -->
+                      <div v-if="aiState === 'done' && aiMsg" class="mt-3 flex justify-end">
+                        <n-button @click="triggerAi"
+                          class="cursor-pointer rounded-full bg-white/60 px-4 py-1 text-xs text-[#7a8797] shadow-[0_8px_20px_rgba(88,108,125,0.1)] transition-all hover:text-primary">
+                          重新生成
+                        </n-button>
+                      </div>
+                    </div>
+                  </n-collapse-item>
+                </n-collapse>
+              </section>
+
+              <section class="blog-detail-card px-5 py-6 sm:px-8 sm:py-8">
+                <div
+                  class="pointer-events-none absolute inset-x-10 top-0 h-[3px] rounded-b-full bg-gradient-to-r from-[#ec66ab] via-[#c98a5d] to-[#76b0d6] opacity-60">
+                </div>
+                <MdPreview class="relative article-preview !bg-transparent" :modelValue="markdown"
+                  :onHtmlChanged="scheduleSyncHeadings" />
+              </section>
+            </div>
+          </n-scrollbar>
+
+          <button v-show="showBackToTop" type="button" aria-label="回到顶部"
+            class="absolute bottom-6 right-6 z-[3] flex h-11 w-11 items-center justify-center rounded-full outline-none border-none bg-white/24 text-primary shadow-[0_16px_28px_rgba(109,126,117,0.14),inset_0_1px_0_rgba(255,255,255,0.24)] backdrop-blur-[16px] transition-all duration-300 hover:-translate-y-1 hover:bg-white/36 hover:shadow-[0_20px_36px_rgba(109,126,117,0.22),inset_0_1px_0_rgba(255,255,255,0.32)]"
+            @click="scrollToTop">
+            <icon-backtop class="h-5 w-5" />
+          </button>
+        </template>
       </section>
     </div>
   </div>
@@ -229,6 +332,7 @@ const detailScrollbar = ref<DetailScrollbarInst | null>(null)
 const scrollElement = ref<HTMLElement | undefined>(undefined)
 const activeHeadingId = ref('')
 const showBackToTop = ref(false)
+const progress = ref(0)
 const headingElementMap = shallowRef(new Map<string, HTMLElement>())
 const route = useRoute()
 const nav = $store.nav.useNavStore() as { navH: number }
@@ -236,8 +340,6 @@ const nav = $store.nav.useNavStore() as { navH: number }
 const boxStyle = ref<Record<string, string>>({})
 const contentStyle = ref<Record<string, string>>({})
 const tags = ref<string[]>([])
-const msg = ref('展开后可生成摘要...')
-const aimask = ref(false)
 const markdown = ref('')
 const blogData = ref<BlogDetail>({
   aid: 'preview-only',
@@ -248,6 +350,18 @@ const blogData = ref<BlogDetail>({
   cont: '',
 })
 
+/** 页面加载状态 */
+const loading = ref(true)
+const loadError = ref('')
+
+/** AI 摘要状态机 */
+type AiState = 'idle' | 'loading' | 'streaming' | 'done' | 'error'
+const aiState = ref<AiState>('idle')
+const aiExpanded = ref(false)
+const aiMsg = ref('')
+const aiError = ref('')
+let aiAbortController: AbortController | null = null
+
 function getTagColor(tag: string) {
   const normalized = tag.trim()
   if (!normalized) return SOFT_TAG_PALETTE[0]
@@ -260,16 +374,41 @@ function getTagColor(tag: string) {
   return SOFT_TAG_PALETTE[Math.abs(hash) % SOFT_TAG_PALETTE.length]
 }
 
+/** 文章字数与预估阅读时间（按 300 字/分钟估算） */
+const stats = computed(() => {
+  const text = markdown.value
+    .replace(/```[\s\S]*?```/g, ' ')
+    .replace(/!\[[^\]]*\]\([^)]*\)/g, ' ')
+    .replace(/\[[^\]]*\]\([^)]*\)/g, ' ')
+    .replace(/[#>*`~\-_|]/g, ' ')
+    .trim()
+  const chars = text.replace(/\s+/g, '').length
+  const minutes = Math.max(1, Math.ceil(chars / 300))
+  return { chars, minutes }
+})
+
 const tocItems = computed<TocItem[]>(() => {
   const lines = (blogData.value.cont || '').split(/\r?\n/)
   const flatItems: TocChildItem[] = []
+  let inFence = false
 
   lines.forEach((line) => {
+    const trimmed = line.trim()
+    // 跳过围栏代码块，避免其中的 # 行被误解析为标题
+    if (/^(`{3,}|~{3,})/.test(trimmed)) {
+      inFence = !inFence
+      return
+    }
+    if (inFence) return
+    // 跳过引用块内的伪标题
+    if (/^>/.test(trimmed)) return
+
     const match = line.match(/^(#{1,6})\s+(.+?)\s*$/)
     if (!match) return
 
     const level = match[1].length
-    const text = match[2].replace(/[`*_~]/g, '').trim()
+    // 去除 Markdown 标记与转义反斜杠（如 1\. 引言 → 1. 引言）
+    const text = match[2].replace(/[`*_~\\]/g, '').trim()
     if (!text) return
 
     flatItems.push({
@@ -329,10 +468,37 @@ function getPreviewRoot() {
 }
 
 async function syncScrollElement() {
-  await nextTick()
+  // n-scrollbar 内部容器可能跨多个帧才挂载完成，带重试等待
+  for (let i = 0; i < 10; i++) {
+    await nextTick()
+    const container = getScrollbarContainer()
+    if (container) {
+      scrollElement.value = container
+      bindScrollListener()
+      scheduleSyncHeadings()
+      return
+    }
+    await new Promise(resolve => requestAnimationFrame(resolve))
+  }
   scrollElement.value = getScrollbarContainer() || undefined
-  requestAnimationFrame(() => {
-    syncPreviewHeadings()
+}
+
+/** 绑定滚动监听（幂等，避免重复绑定） */
+function bindScrollListener() {
+  const el = scrollElement.value
+  if (!el || el.dataset.blogScrollBound === '1') return
+  el.dataset.blogScrollBound = '1'
+  el.addEventListener('scroll', updateActiveHeading)
+}
+
+/** 等待渲染完成后再同步标题映射（md-editor 渲染可能跨多个帧） */
+function scheduleSyncHeadings() {
+  nextTick(() => {
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        syncPreviewHeadings()
+      })
+    })
   })
 }
 
@@ -343,14 +509,22 @@ function syncPreviewHeadings() {
   const headings = previewRoot.querySelectorAll<HTMLElement>('h1, h2, h3, h4, h5, h6')
   const flatTocItems = tocItems.value.flatMap(item => [item, ...item.children])
   const nextHeadingMap = new Map<string, HTMLElement>()
+  const used = new Set<number>()
 
-  headings.forEach((heading, index) => {
-    const item = flatTocItems[index]
-    if (item) {
-      heading.id = item.id
-      heading.style.scrollMarginTop = '24px'
-      nextHeadingMap.set(item.id, heading)
+  headings.forEach((heading) => {
+    // 优先按标题文本匹配（渲染结果），其次按顺序兜底，避免解析与渲染不一致导致错位
+    const headingText = (heading.textContent || '').trim()
+    let itemIndex = flatTocItems.findIndex((item, i) => !used.has(i) && item.text === headingText)
+    if (itemIndex === -1) {
+      itemIndex = flatTocItems.findIndex((item, i) => !used.has(i))
     }
+    if (itemIndex === -1) return
+
+    used.add(itemIndex)
+    const item = flatTocItems[itemIndex]
+    heading.id = item.id
+    heading.style.scrollMarginTop = '24px'
+    nextHeadingMap.set(item.id, heading)
   })
 
   headingElementMap.value = nextHeadingMap
@@ -360,6 +534,10 @@ function syncPreviewHeadings() {
 function updateActiveHeading() {
   const container = scrollElement.value
   showBackToTop.value = !!container && container.scrollTop > 240
+  if (container) {
+    const max = container.scrollHeight - container.clientHeight
+    progress.value = max > 0 ? Math.min(100, Math.round((container.scrollTop / max) * 100)) : 0
+  }
   const previewRoot = getPreviewRoot()
   if (!container || !previewRoot) return
 
@@ -385,33 +563,39 @@ function updateActiveHeading() {
 
 function scrollToHeading(id: string) {
   const container = scrollElement.value
-  const target = headingElementMap.value.get(id) || null
-  if (!container || !target) return
+  if (!container) return
+  // 优先取内存映射，兜底直接按 id 查找 DOM（防止映射未就绪）
+  let target = headingElementMap.value.get(id) || null
+  if (!target) {
+    target = document.getElementById(id)
+  }
+  if (!target) return
 
   const containerRect = container.getBoundingClientRect()
   const targetRect = target.getBoundingClientRect()
   const nextTop = container.scrollTop + (targetRect.top - containerRect.top) - 24
 
-  detailScrollbar.value?.scrollTo?.({
-    top: Math.max(0, nextTop),
-    behavior: 'smooth',
-  })
+  smoothScrollTo(container, Math.max(0, nextTop))
   activeHeadingId.value = id
 }
 
 function scrollToTop() {
-  detailScrollbar.value?.scrollTo?.({
-    top: 0,
-    behavior: 'smooth',
-  })
+  const container = scrollElement.value
+  if (container) smoothScrollTo(container, 0)
   activeHeadingId.value = tocItems.value[0]?.id || ''
 }
 
+/** 平滑滚动（原生实现，兼容不支持 options 的环境） */
+function smoothScrollTo(container: HTMLElement, top: number) {
+  try {
+    container.scrollTo({ top, behavior: 'smooth' })
+  } catch {
+    container.scrollTop = top
+  }
+}
+
 watch([markdown, tocItems], async () => {
-  await nextTick()
-  requestAnimationFrame(() => {
-    syncPreviewHeadings()
-  })
+  scheduleSyncHeadings()
 })
 
 function parseTags(str: string) {
@@ -421,58 +605,130 @@ function parseTags(str: string) {
 
 async function getBlogDetail() {
   const bid = (route.params as RouteParams).bid || '0'
-  const res = await $http.blog.getBlogDetail(bid) as BlogDetailResponse
-  blogData.value = res.data
-  tags.value = parseTags(res.data.tags)
-  markdown.value = res.data.cont
-  await syncScrollElement()
+  try {
+    loading.value = true
+    loadError.value = ''
+    const res = await $http.blog.getBlogDetail(bid) as BlogDetailResponse
+    blogData.value = res.data
+    tags.value = parseTags(res.data.tags)
+    markdown.value = res.data.cont
+    document.title = res.data.title ? `${res.data.title} - 文章详情` : '文章详情'
+    // 先结束 loading，让 v-else 分支的 n-scrollbar 真正挂载，再同步滚动容器
+    loading.value = false
+    await syncScrollElement()
+  } catch (err) {
+    loadError.value = (err as Error)?.message || '网络异常，请稍后重试'
+    window.$msg?.error('文章加载失败')
+    loading.value = false
+  }
 }
 
-async function AISum() {
-  if (aimask.value || !blogData.value.cont) return
+function reload() {
+  loadError.value = ''
+  getBlogDetail()
+}
 
-  const response = await fetch('https://api.siliconflow.cn/v1/chat/completions', {
-    method: 'POST',
-    headers: {
-      'Content-Type': 'application/json',
-      Authorization: 'Bearer sk-jwwmhmxsjtseyekknqmamlvzmrkmwfvuacnssbwfufogrkdg'
-    },
-    body: JSON.stringify({
-      model: 'Qwen/Qwen3-8B',
-      messages: [
-        {
-          role: 'system',
-          content: '你是一个摘要生成工具，请用中文总结我发送给你的文章内容，不要换行，不要超过300字，只介绍文章内容，语气需要俏皮一些，不需要提出建议。开头固定为“这篇文章介绍了”。'
-        },
-        { role: 'user', content: blogData.value.cont }
-      ],
-      stream: true
-    })
-  })
-
-  const reader = response.body?.getReader()
-  const decoder = new TextDecoder('utf-8')
-  if (!reader) return
-
-  msg.value = ''
-  let done = false
-  while (!done) {
-    const { value, done: doneReading } = await reader.read()
-    done = doneReading
-    const chunk = decoder.decode(value ?? new Uint8Array())
-    const match = chunk.match(/"content":"(.*?)"/)
-    if (match?.[1]) {
-      msg.value += match[1]
-      aimask.value = true
+async function copyLink() {
+  const url = window.location.href
+  try {
+    await navigator.clipboard.writeText(url)
+    window.$msg?.success('文章链接已复制')
+  } catch {
+    // 兼容非安全上下文（http）
+    try {
+      const textarea = document.createElement('textarea')
+      textarea.value = url
+      textarea.style.position = 'fixed'
+      textarea.style.opacity = '0'
+      document.body.appendChild(textarea)
+      textarea.select()
+      document.execCommand('copy')
+      document.body.removeChild(textarea)
+      window.$msg?.success('文章链接已复制')
+    } catch {
+      window.$msg?.warning('复制失败，请手动复制地址栏链接')
     }
   }
 }
 
+function onAiExpand(names: string | string[] | null) {
+  const expanded = Array.isArray(names) ? names.includes('ai-summary') : names === 'ai-summary'
+  aiExpanded.value = expanded
+  if (expanded) triggerAi()
+}
+
+async function triggerAi() {
+  if (!blogData.value.cont) {
+    aiState.value = 'error'
+    aiError.value = '文章内容为空，无法生成摘要'
+    return
+  }
+  if (aiState.value === 'loading' || aiState.value === 'streaming') return
+
+  aiState.value = 'loading'
+  aiMsg.value = ''
+  aiError.value = ''
+  aiAbortController?.abort()
+  aiAbortController = new AbortController()
+
+  try {
+    const bid = (route.params as RouteParams).bid || '0'
+    const baseURL = 'https://www.hxyouzi.com'
+    const response = await fetch(`${baseURL}/api/art/ai/${bid}`, {
+      method: 'POST',
+      signal: aiAbortController.signal,
+    })
+
+    if (!response.ok) throw new Error(`请求失败（HTTP ${response.status}）`)
+    const reader = response.body?.getReader()
+    if (!reader) throw new Error('当前浏览器不支持流式读取')
+
+    const decoder = new TextDecoder('utf-8')
+    let buffer = ''
+    aiState.value = 'streaming'
+
+    while (true) {
+      const { value, done } = await reader.read()
+      if (done) break
+      // 累积解码，避免 SSE 事件被 chunk 边界截断
+      buffer += decoder.decode(value ?? new Uint8Array(), { stream: true })
+      const lines = buffer.split('\n')
+      buffer = lines.pop() ?? ''
+      lines.forEach(line => handleSseLine(line.trim()))
+    }
+    if (buffer.trim()) handleSseLine(buffer.trim())
+
+    if (!aiMsg.value) {
+      aiState.value = 'error'
+      aiError.value = '未获取到摘要内容，请重试'
+    } else {
+      aiState.value = 'done'
+    }
+  } catch (err) {
+    if ((err as Error)?.name === 'AbortError') return
+    aiState.value = 'error'
+    aiError.value = (err as Error)?.message || '生成失败，请稍后重试'
+  }
+}
+
+function handleSseLine(line: string) {
+  if (!line.startsWith('data: ')) return
+  const payload = line.slice(6).trim()
+  if (!payload || payload === '[DONE]') return
+  // 服务端错误事件，如 [ERROR]xxx
+  if (/^\[(error|ERROR)\]/.test(payload)) {
+    aiState.value = 'error'
+    aiError.value = payload.replace(/^\[(error|ERROR)\]/, '') || '服务端返回错误'
+    return
+  }
+  aiMsg.value += payload
+}
+
 onMounted(async () => {
   updateLayout()
-  await getBlogDetail()
-  scrollElement.value?.addEventListener('scroll', updateActiveHeading)
   window.addEventListener('resize', updateLayout)
+  // getBlogDetail 内部会在 n-scrollbar 挂载后调用 syncScrollElement 绑定滚动事件
+  await getBlogDetail()
 })
 
 onBeforeUnmount(() => {
@@ -482,6 +738,93 @@ onBeforeUnmount(() => {
 </script>
 
 <style scoped lang="less">
+/* 目录列表：激活指示条与悬停反馈 */
+.toc-list {
+  max-height: 60vh;
+  overflow-y: auto;
+  padding-right: 4px;
+
+  &::-webkit-scrollbar {
+    width: 4px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    border-radius: 9999px;
+    background: rgba(139, 158, 166, 0.35);
+  }
+
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+}
+
+.toc-leaf,
+.toc-child {
+  position: relative;
+  padding-left: 10px;
+  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
+
+  &::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 50%;
+    width: 3px;
+    height: 0;
+    border-radius: 9999px;
+    background: #ec66ab;
+    transform: translateY(-50%);
+    transition: height 0.25s ease;
+  }
+
+  &:hover {
+    background: rgba(255, 255, 255, 0.5);
+  }
+}
+
+.toc-active {
+  background: linear-gradient(90deg, rgba(236, 102, 171, 0.08), rgba(236, 102, 171, 0));
+  box-shadow: inset 3px 0 0 rgba(236, 102, 171, 0.85);
+
+  &::before {
+    height: 14px;
+  }
+}
+
+/* 加载骨架屏 */
+.blog-skeleton {
+  background: linear-gradient(90deg, rgba(210, 220, 225, 0.35) 25%, rgba(255, 255, 255, 0.65) 50%, rgba(210, 220, 225, 0.35) 75%);
+  background-size: 200% 100%;
+  animation: blog-skeleton-wave 1.4s ease-in-out infinite;
+}
+
+@keyframes blog-skeleton-wave {
+  0% {
+    background-position: 200% 0;
+  }
+
+  100% {
+    background-position: -200% 0;
+  }
+}
+
+/* AI 摘要流式输出光标 */
+.ai-cursor {
+  display: inline-block;
+  width: 2px;
+  height: 1.1em;
+  margin-left: 2px;
+  vertical-align: -2px;
+  background: #ec66ab;
+  animation: ai-cursor-blink 0.9s steps(2, start) infinite;
+}
+
+@keyframes ai-cursor-blink {
+  to {
+    visibility: hidden;
+  }
+}
+
 :deep(.article-preview .md-editor-preview) {
   background: transparent !important;
 }
diff --git a/src/views/blog/index.vue b/src/views/blog/index.vue
index ee881b6..8438f7b 100644
--- a/src/views/blog/index.vue
+++ b/src/views/blog/index.vue
@@ -341,21 +341,29 @@ function getRandomFromPalette(index = 0): string {
 }
 
 async function getBlogList() {
-  const res = await $http.blog.getBlogList({
-    category: category.value,
-    page_size: page_size.value,
-    page_num: page_num.value,
-  }) as BlogListResponse
+  try {
+    const res = await $http.blog.getBlogList({
+      category: category.value,
+      page_size: page_size.value,
+      page_num: page_num.value,
+    }) as BlogListResponse
 
-  const uniqueTags = Array.from(new Set(res.data.flatMap((item) => getTags(item.tags))))
-  tagColorList.value = buildTagColorMap(uniqueTags)
-  blogList.value = res.data
+    const uniqueTags = Array.from(new Set(res.data.flatMap((item) => getTags(item.tags))))
+    tagColorList.value = buildTagColorMap(uniqueTags)
+    blogList.value = res.data
+  } catch {
+    blogList.value = []
+  }
 }
 
 async function getCateList() {
-  const res = await $http.blog.getCateList() as CateListResponse
-  cateList.value = res.data
-  total.value = allTotal.value
+  try {
+    const res = await $http.blog.getCateList() as CateListResponse
+    cateList.value = res.data
+    total.value = allTotal.value
+  } catch {
+    cateList.value = []
+  }
 }
 
 onMounted(() => {
diff --git a/src/views/Home.vue b/src/views/index.vue
similarity index 54%
rename from src/views/Home.vue
rename to src/views/index.vue
index 0a413e6..f51faa2 100644
--- a/src/views/Home.vue
+++ b/src/views/index.vue
@@ -9,9 +9,8 @@
     <n-layout has-sider>
       <n-layout-content class="relative !bg-transparent">
         <div ref="searchRef" class="relative z-[1] hidden px-12 pt-8 lg:block">
-          <!-- <div class="panel-caption">快捷搜索</div> -->
           <div ref="searchShellRef" class="search-shell relative">
-            <n-input-group class="glass-surface overflow-hidden rounded-[22px]">
+            <n-input-group class="glass-surface overflow-hidden rounded-[22px] transition-[box-shadow,border-color] duration-300">
               <n-select
                 class="w-24 search-select rounded-full"
                 size="large"
@@ -25,10 +24,10 @@
                 class="flex-1"
                 size="large"
                 autofocus
+                clearable
                 v-model:value="searchWord"
                 @blur="cancelSbox"
-                @keyup.enter="search"
-                placeholder="请输入搜索内容"
+                placeholder="输入关键词，按 / 快速聚焦"
               >
                 <template #suffix>
                   <n-icon class=" cursor-pointer" size="large">
@@ -51,8 +50,8 @@
                 :key="idx"
                 class="search-suggest-item relative z-[1] flex items-center truncate rounded-[18px] border border-transparent p-3.5 pr-6 text-slate-500 transition-[transform,background-color,color,box-shadow,border-color] duration-200"
                 :class="selecedIdx === idx
-                  ? 'bg-[linear-gradient(135deg,#ec66ab,#f48a6f)] text-white shadow-[0_14px_26px_rgba(236,102,171,0.24)]'
-                  : 'hover:-translate-y-0.5 hover:border-white/55 hover:bg-white/62 hover:text-slate-700 hover:shadow-[0_12px_24px_rgba(102,129,156,0.12)]'"
+                  ? 'bg-[linear-gradient(135deg,#ec66ab,#f48a6f)] text-white shadow-[0_4px_10px_rgba(236,102,171,0.16),0_14px_28px_rgba(236,102,171,0.2)]'
+                  : 'hover:-translate-y-0.5 hover:border-white/55 hover:bg-white/62 hover:text-slate-700 hover:shadow-[0_2px_6px_rgba(97,121,146,0.06),0_12px_24px_rgba(97,121,146,0.1)]'"
                 :style="{ marginTop: idx === 0 ? '0' : '0.45rem' }"
                 @click="goExtra(item.menu_link)"
                 @keyup.enter="goExtra(item.menu_link)"
@@ -67,6 +66,14 @@
                 </span>
                 <span class="truncate">{{ item.menu_name }}</span>
               </div>
+              <div v-if="searchItems.length === 1" class="search-empty py-3 text-center text-[13px] text-slate-400">
+                未找到匹配的导航，回车可直接搜索
+              </div>
+              <div class="search-hints mt-1.5 flex items-center justify-center gap-4 border-t border-white/55 pt-2.5 text-[11px] text-slate-400">
+                <span><b class="kbd">↑</b><b class="kbd">↓</b>&nbsp;选择</span>
+                <span><b class="kbd">↵</b>&nbsp;打开</span>
+                <span><b class="kbd">Esc</b>&nbsp;关闭</span>
+              </div>
             </div>
           </div>
         </Teleport>
@@ -74,67 +81,83 @@
         <n-scrollbar class="w-full overflow-x-auto" :style="navStyle" trigger="none">
           <div
             v-if="navlist.length"
-            class="glass-surface mt-6 mb-4 flex flex-wrap items-center gap-2 rounded-[20px] px-3 py-3 lg:mx-12 lg:px-4"
+            class="glass-surface mt-6 mb-4 flex flex-wrap items-center gap-1.5 rounded-[20px] px-2.5 py-2.5 lg:mx-12 lg:px-4"
           >
             <d-tag
               v-for="tag in tagList"
               :key="tag.name"
-              class="nav-tag cursor-pointer truncate rounded-full bg-white/90 px-2.5 py-1 text-[13px] font-semibold text-slate-600 shadow-sm"
-              :class="tag.checked ? 'text-white shadow-[0_8px_18px_rgba(15,23,42,0.18)]' : 'bg-white/90'"
+              class="nav-tag cursor-pointer truncate rounded-full bg-white/90 px-2 py-0.5 text-[12px] font-semibold text-slate-600 shadow-sm"
+              :class="tag.checked ? 'text-white shadow-[0_4px_10px_rgba(15,23,42,0.12),0_10px_20px_rgba(15,23,42,0.08)]' : 'bg-white/90'"
               :style="tag.checked ? { backgroundColor: tag.color || '#334155' } : undefined"
               hideBeyondTags
               :checked="tag.checked"
               :color="tag.color"
               @click="handdleTagClick(tag)"
             >
-              <span class="inline-flex items-center gap-1.5">
+              <span class="inline-flex items-center gap-1">
                 <span
-                  class="inline-block h-1.5 w-1.5 rounded-full ring-2 ring-white/70"
+                  class="inline-block h-1 w-1 rounded-full ring-1 ring-white/70"
                   :style="{ backgroundColor: tag.color || '#94a3b8' }"
                 ></span>
                 <span>{{ tag.name }}</span>
+                <span
+                  class="inline-flex h-4 min-w-4 items-center justify-center rounded-full px-0.5 text-[9px] font-bold leading-none"
+                  :class="tag.checked ? 'bg-white/25 text-white' : 'bg-slate-700/8 text-slate-400'"
+                >{{ tag.count ?? 0 }}</span>
               </span>
             </d-tag>
           </div>
 
-          <div
+          <TransitionGroup
             ref="navcards"
+            name="nav-card"
+            tag="div"
             class="grid content-start grid-cols-2 gap-5 px-3 pb-8 pt-3 lg:grid-cols-3 lg:px-12 xl:grid-cols-4 2xl:grid-cols-6"
           >
-            <n-card
+            <div
               v-for="(item, index) in navlist"
               :key="item.nid ?? index"
+              class="nav-card-wrap"
+              :data-nid="item.nid"
+              :style="{ '--i': index % 12 }"
+            >
+            <n-card
               embedded
               class="glass-nav-card h-28 box-border overflow-hidden rounded-[24px] transition-[transform,box-shadow,border-color] duration-[320ms] [transition-timing-function:cubic-bezier(0.22,1,0.36,1)] hover:-translate-y-1"
               @click="goExtra(item.menu_link)"
               @contextmenu.prevent="handdleContextMenu($event, item)"
             >
               <div class="relative mt-1 w-full flex flex-col items-center cursor-pointer group">
-                <!-- <em
-                  v-if="item.tag"
-                  class="absolute -top-1 left-0 px-2 rounded-md text-white text-center text-xs leading-5"
-                  :style="{ background: getItemColor(item) }"
-                >
-                  {{ formatTag(item.tag) }}
-                </em> -->
+                <icon-star
+                  v-if="isPinned(item)"
+                  class="nav-pin absolute -top-0.5 right-0 w-4 text-[#f0a13c] drop-shadow-[0_2px_6px_rgba(240,161,60,0.45)]"
+                />
                 <div
                   v-if="item.icon_error"
                   :style="{ background: getItemColor(item) }"
-                  class="flex h-10 w-10 items-center justify-center rounded-2xl border border-white/95 bg-[linear-gradient(180deg,rgba(255,255,255,0.96),rgba(234,242,249,0.92))] p-[0.2rem] text-white shadow-[0_12px_22px_rgba(74,98,124,0.14),inset_0_1px_0_rgba(255,255,255,0.95)]"
+                  class="grid-image flex h-10 w-10 items-center justify-center rounded-2xl border border-white/95 bg-[linear-gradient(180deg,rgba(255,255,255,0.96),rgba(234,242,249,0.92))] p-[0.2rem] text-white shadow-[0_2px_6px_rgba(97,121,146,0.06),0_10px_20px_rgba(97,121,146,0.1),inset_0_1px_0_rgba(255,255,255,0.95)] transition-transform duration-[350ms] [transition-timing-function:cubic-bezier(0.22,1,0.36,1)]"
                 >
                   {{ item.first }}
                 </div>
                 <img
                   v-else
-                  class="grid-image h-10 w-10 rounded-2xl border border-white/95 bg-[linear-gradient(180deg,rgba(255,255,255,0.96),rgba(234,242,249,0.92))] p-[0.2rem] object-cover shadow-[0_12px_22px_rgba(74,98,124,0.14),inset_0_1px_0_rgba(255,255,255,0.95)]"
+                  class="grid-image h-10 w-10 rounded-2xl border border-white/95 bg-[linear-gradient(180deg,rgba(255,255,255,0.96),rgba(234,242,249,0.92))] p-[0.2rem] object-cover shadow-[0_2px_6px_rgba(97,121,146,0.06),0_10px_20px_rgba(97,121,146,0.1),inset_0_1px_0_rgba(255,255,255,0.95)] transition-transform duration-[350ms] [transition-timing-function:cubic-bezier(0.22,1,0.36,1)]"
+                  :key="item.menu_icon"
                   :src="item.menu_icon"
                   :alt="item.menu_name"
                   @error="imgErr(index)"
                 />
-                <div class="mt-3 w-full truncate text-center text-lg !font-semibold text-slate-700 group-hover:text-primary">{{ item.menu_name || '' }}</div>
+                <div class="card-name mt-3 w-full truncate text-center text-lg !font-semibold text-slate-700">{{ item.menu_name || '' }}</div>
               </div>
             </n-card>
+            </div>
 
+            <div
+              v-if="addCardReady"
+              key="add-card"
+              class="nav-card-wrap"
+              :style="{ '--i': Math.min(navlist.length, 11) }"
+            >
             <n-card
               embedded
               class="glass-nav-card glass-nav-card--warm h-28 box-border overflow-hidden rounded-[24px] transition-[transform,box-shadow,border-color] duration-[320ms] [transition-timing-function:cubic-bezier(0.22,1,0.36,1)] hover:-translate-y-1"
@@ -142,14 +165,15 @@
               <div @click="addNav" class="w-full h-full flex flex-col items-center justify-center cursor-pointer">
                 <div
                   :style="{ background: addCardColor }"
-                  class="flex h-10 w-10 items-center justify-center rounded-2xl border border-white/95 bg-[linear-gradient(180deg,rgba(255,255,255,0.96),rgba(234,242,249,0.92))] p-[0.2rem] text-2xl text-white shadow-[0_12px_22px_rgba(74,98,124,0.14),inset_0_1px_0_rgba(255,255,255,0.95)]"
+                  class="add-card-plus flex h-10 w-10 items-center justify-center rounded-2xl border border-white/95 bg-[linear-gradient(180deg,rgba(255,255,255,0.96),rgba(234,242,249,0.92))] p-[0.2rem] text-2xl text-white shadow-[0_2px_6px_rgba(97,121,146,0.06),0_10px_20px_rgba(97,121,146,0.1),inset_0_1px_0_rgba(255,255,255,0.95)] transition-transform duration-300 [transition-timing-function:cubic-bezier(0.22,1,0.36,1)]"
                 >
                   +
                 </div>
                 <div class="mt-3 w-full truncate text-center text-base font-semibold text-primary">新增导航</div>
               </div>
             </n-card>
-          </div>
+            </div>
+          </TransitionGroup>
         </n-scrollbar>
       </n-layout-content>
 
@@ -160,12 +184,16 @@
 
     <maskX :visible="visible" :setVisible="navCancel">
       <n-form
-        class="w-[500px] rounded-[28px] border border-white/80 bg-[radial-gradient(circle_at_top_left,rgba(255,199,132,0.16),transparent_34%),radial-gradient(circle_at_top_right,rgba(136,203,255,0.14),transparent_28%),linear-gradient(180deg,rgba(255,255,255,0.84),rgba(242,247,251,0.78))] p-8 shadow-[0_28px_60px_rgba(75,96,120,0.18)] backdrop-blur-[20px]"
+        class="w-[500px] rounded-[28px] border border-white/80 bg-[radial-gradient(circle_at_top_left,rgba(255,199,132,0.16),transparent_34%),radial-gradient(circle_at_top_right,rgba(136,203,255,0.14),transparent_28%),linear-gradient(180deg,rgba(255,255,255,0.84),rgba(242,247,251,0.78))] p-8 shadow-[0_4px_12px_rgba(75,96,120,0.08),0_20px_44px_rgba(75,96,120,0.12),0_64px_120px_rgba(178,128,88,0.08)] backdrop-blur-[20px]"
         ref="formNav"
         layout="vertical"
         :data="navData"
       >
-        <div class="text-center text-xl font-bold tracking-[0.02em] text-slate-800">新增导航</div>
+        <div class="flex items-center justify-center gap-2 text-center text-xl font-bold tracking-[0.02em] text-slate-800">
+          <icon-star class="w-5 text-[#f0a13c]" />
+          新增导航
+          <icon-star class="w-5 text-[#f0a13c]" />
+        </div>
         <n-form-item class="h-8 modal-form-item" path="menu_link">
           <n-input class="modal-input" @blur="getIcon" v-model:value="navData.menu_link" placeholder="请输入链接（必填）" />
         </n-form-item>
@@ -175,6 +203,16 @@
         <n-form-item class="h-8 mt-4 modal-form-item" path="tag">
           <n-input class="modal-input" v-model:value="navData.tag" placeholder="请输入标签（最多4个字）" />
         </n-form-item>
+        <div v-if="quickTagOptions.length" class="mt-2 flex flex-wrap items-center gap-1.5 pl-1">
+          <span class="text-xs text-slate-400">常用：</span>
+          <span
+            v-for="t in quickTagOptions"
+            :key="t"
+            class="quick-tag"
+            :class="navData.tag === t ? 'quick-tag--active' : ''"
+            @click="navData.tag = t"
+          >{{ t }}</span>
+        </div>
         <n-form-item class="h-8 mt-4 modal-form-item" path="menu_icon">
           <n-input class="modal-input" v-model:value="navData.menu_icon" placeholder="请输入图标链接" />
           <img
@@ -188,8 +226,8 @@
           <div v-else class="ml-5 w-[30px] h-[30px]"></div>
         </n-form-item>
         <div class="mt-14 flex justify-between">
-          <n-button class="w-[48%] !h-11 !rounded-full !border-none !bg-white/90 !font-bold !tracking-[0.04em] !text-slate-600 shadow-[0_12px_24px_rgba(89,108,130,0.12)]" secondary variant="solid" @click="navCancel">取消</n-button>
-          <n-button class="w-[48%] !h-11 !rounded-full !border-none !bg-[linear-gradient(135deg,#ec66ab,#f48a6f)] !font-bold !tracking-[0.04em] shadow-[0_14px_28px_rgba(236,102,171,0.28)]" type="primary" variant="solid" @click="navSubmit">确定</n-button>
+          <n-button class="w-[48%] !h-11 !rounded-full !border-none !bg-white/90 !font-bold !tracking-[0.04em] !text-slate-600 shadow-[0_3px_8px_rgba(89,108,130,0.07),0_12px_24px_rgba(89,108,130,0.09)]" secondary variant="solid" @click="navCancel">取消</n-button>
+          <n-button class="w-[48%] !h-11 !rounded-full !border-none !bg-[linear-gradient(135deg,#ec66ab,#f48a6f)] !font-bold !tracking-[0.04em] shadow-[0_4px_10px_rgba(236,102,171,0.18),0_14px_28px_rgba(236,102,171,0.2)]" type="primary" variant="solid" @click="navSubmit">确定</n-button>
         </div>
       </n-form>
     </maskX>
@@ -197,35 +235,50 @@
     <aplayer />
 
     <contextMenu :show="menuShow" :options="MenuOptions">
-      <div class="!m-0 cursor-pointer !rounded-md bg-white !p-0 shadow-md" @mouseenter="removeTimer" @mouseleave="hideMenu">
-        <div :class="menuS" @click="handdleMenuItem(1)">
-          修改名称
+      <div class="menu-pop glass-floating-surface !m-0 cursor-pointer !rounded-2xl !p-0" @mouseenter="removeTimer" @mouseleave="hideMenu">
+        <div class="menu-head truncate">{{ currentItem?.menu_name || '导航操作' }}</div>
+        <div class="menu-item" @click="handdleMenuItem(1)">
+          <icon-pen class="menu-icon" />修改名称
         </div>
-        <div :class="menuS" @click="handdleMenuItem(2)">
-          修改链接
+        <div class="menu-item" @click="handdleMenuItem(2)">
+          <icon-loc class="menu-icon" />修改链接
         </div>
-        <div :class="menuS" @click="handdleMenuItem(3)">
-          修改标签
+        <div class="menu-item" @click="handdleMenuItem(3)">
+          <icon-tag class="menu-icon" />修改标签
         </div>
-        <div :class="menuS" @click="handdleMenuItem(4)">
+        <div class="menu-divider"></div>
+        <div class="menu-item" @click="handdleMenuItem(5)">
+          <icon-download class="menu-icon" />复制链接
+        </div>
+        <div class="menu-item" @click="handdleMenuItem(6)">
+          <icon-star class="menu-icon" :class="isPinned(currentItem) ? '!text-[#f0a13c]' : ''" />{{ isPinned(currentItem) ? '取消置顶' : '置顶导航' }}
+        </div>
+        <div class="menu-item" @click="handdleMenuItem(7)">
+          <icon-loading class="menu-icon" />重新加载图标
+        </div>
+        <div class="menu-divider"></div>
+        <div class="menu-item menu-item--danger" @click="handdleMenuItem(4)">
           删除导航
         </div>
       </div>
     </contextMenu>
 
     <maskX :visible="editModal" :setVisible="handleItemCancel">
-      <div class="w-[500px] rounded-[28px] border border-white/80 bg-[radial-gradient(circle_at_top_left,rgba(255,199,132,0.16),transparent_34%),radial-gradient(circle_at_top_right,rgba(136,203,255,0.14),transparent_28%),linear-gradient(180deg,rgba(255,255,255,0.84),rgba(242,247,251,0.78))] p-8 shadow-[0_28px_60px_rgba(75,96,120,0.18)] backdrop-blur-[20px]">
-        <div class="mb-8 text-center text-xl font-bold tracking-[0.02em] text-slate-800">修改导航内容</div>
+      <div class="w-[500px] rounded-[28px] border border-white/80 bg-[radial-gradient(circle_at_top_left,rgba(255,199,132,0.16),transparent_34%),radial-gradient(circle_at_top_right,rgba(136,203,255,0.14),transparent_28%),linear-gradient(180deg,rgba(255,255,255,0.84),rgba(242,247,251,0.78))] p-8 shadow-[0_4px_12px_rgba(75,96,120,0.08),0_20px_44px_rgba(75,96,120,0.12),0_64px_120px_rgba(178,128,88,0.08)] backdrop-blur-[20px]">
+        <div class="mb-8 flex items-center justify-center gap-2 text-center text-xl font-bold tracking-[0.02em] text-slate-800">
+          <icon-pen class="w-5 text-primary" />
+          修改导航内容
+        </div>
         <div class="mb-4 text-slate-500">
           原内容：
           <span class="text-primary" v-if="currentClickedItem === 1">导航名称：{{ currentItem?.menu_name }}</span>
           <span class="text-primary" v-else-if="currentClickedItem === 2">导航链接：{{ currentItem?.menu_link }}</span>
           <span class="text-primary" v-else-if="currentClickedItem === 3">导航标签：{{ currentItem?.tag }}</span>
         </div>
-        <n-input class="modal-input" v-model:value="editInput" placeholder="请输入修改内容" />
+        <n-input class="modal-input" v-model:value="editInput" placeholder="请输入修改内容" @keyup.enter="handleItemSubmit" />
         <div class="mt-8 flex justify-between">
-          <n-button class="w-[48%] !h-11 !rounded-full !border-none !bg-white/90 !font-bold !tracking-[0.04em] !text-slate-600 shadow-[0_12px_24px_rgba(89,108,130,0.12)]" secondary @click="handleItemCancel">取消</n-button>
-          <n-button class="w-[48%] !h-11 !rounded-full !border-none !bg-[linear-gradient(135deg,#ec66ab,#f48a6f)] !font-bold !tracking-[0.04em] shadow-[0_14px_28px_rgba(236,102,171,0.28)]" type="primary" @click="handleItemSubmit">确定</n-button>
+          <n-button class="w-[48%] !h-11 !rounded-full !border-none !bg-white/90 !font-bold !tracking-[0.04em] !text-slate-600 shadow-[0_3px_8px_rgba(89,108,130,0.07),0_12px_24px_rgba(89,108,130,0.09)]" secondary @click="handleItemCancel">取消</n-button>
+          <n-button class="w-[48%] !h-11 !rounded-full !border-none !bg-[linear-gradient(135deg,#ec66ab,#f48a6f)] !font-bold !tracking-[0.04em] shadow-[0_4px_10px_rgba(236,102,171,0.18),0_14px_28px_rgba(236,102,171,0.2)]" type="primary" @click="handleItemSubmit">确定</n-button>
         </div>
       </div>
     </maskX>
@@ -239,6 +292,7 @@ import { deepclone } from '@/util/index.ts'
 
 definePage({
   name: 'home',
+  alias: '/home',
   meta: {
     title: '首页',
   }
@@ -259,6 +313,7 @@ interface TagItem {
   name: string
   color: string
   checked: boolean
+  count: number
 }
 
 interface SearchItem {
@@ -273,14 +328,21 @@ interface SearchEngineOption {
   url: string
 }
 
+/** localStorage 键名 */
+const HITS_KEY = 'nav_hits'
+const PINNED_KEY = 'nav_pinned'
+const ENGINE_KEY = 'nav_search_engine'
+
 const menuShow = ref(false)
 const MenuOptions = reactive({ x: 0, y: 0 })
 const currentItem = ref<NavItem | null>(null)
-const menuS = '!m-0 py-3 px-6 text-sm text-gray-700 w-full flex items-center justify-center hover:bg-[#f5f0f0] hover:text-primary'
 const currentClickedItem = ref(0)
 const editModal = ref(false)
 const editInput = ref('')
 const searchInputRef = ref<HTMLInputElement | null>(null)
+const pinnedIds = ref<string[]>(getPinned())
+// 新增导航卡片延迟挂载，与导航列表一起交错入场
+const addCardReady = ref(false)
 
 const visible = ref(false)
 const navData = reactive<NavItem>({
@@ -301,7 +363,7 @@ const contentStyle = ref<Record<string, string>>({})
 const navStyle = ref<Record<string, string>>({})
 const searchPanelStyle = ref<Record<string, string>>({})
 const searchWord = ref('')
-const broswer = ref('bing')
+const broswer = ref(localStorage.getItem(ENGINE_KEY) || 'bing')
 const searchItems = ref<SearchItem[]>([])
 const selecedIdx = ref(0)
 const searchBox = ref(false)
@@ -339,6 +401,25 @@ const currentSearchOption = computed(() => {
   return options.value.find(item => item.value === broswer.value) ?? options.value[0]
 })
 
+// 常用标签（新增导航弹窗快捷选择）
+const quickTagOptions = computed(() => {
+  const set = new Set<string>()
+  cloneNavlist.forEach(item => {
+    if (item.tag) set.add(item.tag)
+  })
+  return Array.from(set).slice(0, 8)
+})
+
+function isPinned(item?: NavItem | null): boolean {
+  if (!item?.nid) return false
+  return pinnedIds.value.includes(String(item.nid))
+}
+
+// 记忆搜索引擎选择
+watch(broswer, (v) => {
+  localStorage.setItem(ENGINE_KEY, v)
+})
+
 watch(searchWord, handleInput)
 watch(() => usrLog.isLogin, (newVal: any) => {
   if (newVal) {
@@ -358,10 +439,140 @@ function createDefaultTag(): TagItem {
   return {
     name: defaultTagName,
     color: getRandomDarkColor(30, 128),
-    checked: true
+    checked: true,
+    count: 0
   }
 }
 
+// ---------- 本地访问统计与置顶 ----------
+function getHitsMap(): Record<string, number> {
+  try {
+    return JSON.parse(localStorage.getItem(HITS_KEY) || '{}')
+  } catch {
+    return {}
+  }
+}
+
+function getPinned(): string[] {
+  try {
+    const list = JSON.parse(localStorage.getItem(PINNED_KEY) || '[]')
+    return Array.isArray(list) ? list : []
+  } catch {
+    return []
+  }
+}
+
+function hitNav(item: NavItem) {
+  if (!item.nid) return
+  const key = String(item.nid)
+  const hits = getHitsMap()
+  hits[key] = (hits[key] || 0) + 1
+  localStorage.setItem(HITS_KEY, JSON.stringify(hits))
+  // 轻微延迟后按热度重排（配合 TransitionGroup 平滑过渡）
+  window.setTimeout(() => {
+    navlist.value = sortNavList(navlist.value)
+  }, 320)
+}
+
+function togglePin() {
+  if (!currentItem.value?.nid) return
+  const key = String(currentItem.value.nid)
+  let pins = getPinned()
+  if (pins.includes(key)) {
+    pins = pins.filter(p => p !== key)
+    $msg.info('已取消置顶')
+  } else {
+    pins.unshift(key)
+    $msg.success('已置顶，将优先展示')
+  }
+  localStorage.setItem(PINNED_KEY, JSON.stringify(pins))
+  pinnedIds.value = pins
+  navlist.value = sortNavList(navlist.value)
+}
+
+function cleanupNavLocal(nid?: number) {
+  if (!nid) return
+  const key = String(nid)
+  pinnedIds.value = pinnedIds.value.filter(p => p !== key)
+  localStorage.setItem(PINNED_KEY, JSON.stringify(pinnedIds.value))
+  const hits = getHitsMap()
+  if (hits[key] !== undefined) {
+    delete hits[key]
+    localStorage.setItem(HITS_KEY, JSON.stringify(hits))
+  }
+}
+
+function sortNavList(list: NavItem[]): NavItem[] {
+  const hits = getHitsMap()
+  const pins = getPinned()
+  return [...list].sort((a, b) => {
+    const aPin = pins.includes(String(a.nid)) ? 1 : 0
+    const bPin = pins.includes(String(b.nid)) ? 1 : 0
+    if (aPin !== bPin) return bPin - aPin
+    return (hits[String(b.nid)] || 0) - (hits[String(a.nid)] || 0)
+  })
+}
+
+// ---------- 手动 FLIP 重排动画 ----------
+// TransitionGroup 的内置 move 在"有删除"场景下会因 leave 元素占位导致位置计算错误，
+// 这里在数据变化后自己实现 FLIP：记录旧位置 → 等待渲染与 leave 移除（双 rAF）→ 动画到新位置
+const flipRects = new Map<string, DOMRect>()
+
+function recordFlipPositions() {
+  flipRects.clear()
+  const el = navcards.value?.$el as HTMLElement | undefined
+  if (!el) return
+  el.querySelectorAll<HTMLElement>('.nav-card-wrap').forEach(wrap => {
+    const nid = wrap.getAttribute('data-nid')
+    if (nid) flipRects.set(nid, wrap.getBoundingClientRect())
+  })
+}
+
+function playFlip() {
+  // 三 rAF：确保渲染完成 + 被删除的卡片（leave 流程）已从 DOM 移除后再计算位置。
+  // 若只等两帧，FLIP 会与 leave 移除同帧竞争（FLIP 先执行），
+  // 被删卡片仍占位导致剩余卡片的新位置计算错误（dx=0），动画被跳过。
+  requestAnimationFrame(() => requestAnimationFrame(() => requestAnimationFrame(() => {
+    const el = navcards.value?.$el as HTMLElement | undefined
+    if (!el) return
+
+    el.querySelectorAll<HTMLElement>('.nav-card-wrap').forEach(wrap => {
+      const nid = wrap.getAttribute('data-nid')
+      const old = nid ? flipRects.get(nid) : undefined
+      if (!old) return
+
+      const now = wrap.getBoundingClientRect()
+      const dx = old.left - now.left
+      const dy = old.top - now.top
+      if (!dx && !dy) return
+
+      // Invert：瞬移到旧位置
+      wrap.style.transition = 'none'
+      wrap.style.transform = `translate(${dx}px, ${dy}px)`
+      wrap.getBoundingClientRect() // 强制 reflow
+
+      // Play：恢复过渡，动画到新位置
+      wrap.style.transition = 'transform 0.45s cubic-bezier(0.22, 1, 0.36, 1)'
+      wrap.style.transform = ''
+
+      const cleanup = () => {
+        wrap.style.transition = ''
+        wrap.style.transform = ''
+        wrap.removeEventListener('transitionend', cleanup)
+      }
+      wrap.addEventListener('transitionend', cleanup)
+      // 兜底清理
+      window.setTimeout(cleanup, 800)
+    })
+  })))
+}
+
+// pre-flush：DOM 更新前记录旧位置
+watch(navlist, () => {
+  recordFlipPositions()
+  playFlip()
+})
+
 function resetTagList() {
   tagList.value = [createDefaultTag()]
 }
@@ -407,23 +618,72 @@ function handleInput() {
   updateSearchPanelPosition()
 }
 
-function handdleKeyup(e: KeyboardEvent) {
+function handleWindowKeydown(e: KeyboardEvent) {
+  if (e.isComposing) return
+  const target = e.target as HTMLElement | null
+  const isTyping = !!target && (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable)
+
+  // Esc：逐层关闭浮层
+  if (e.key === 'Escape') {
+    if (menuShow.value) {
+      menuShow.value = false
+      return
+    }
+    if (editModal.value) {
+      handleItemCancel()
+      return
+    }
+    if (visible.value) {
+      navCancel()
+      return
+    }
+    if (searchBox.value) {
+      searchBox.value = false
+      searchItems.value = []
+      selecedIdx.value = 0
+      searchInputRef.value?.blur()
+    }
+    return
+  }
+
+  // Ctrl/Cmd + K 或 非输入状态下按 /：聚焦搜索框
+  if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 'k') {
+    e.preventDefault()
+    searchInputRef.value?.focus()
+    return
+  }
+  if (e.key === '/' && !isTyping) {
+    e.preventDefault()
+    searchInputRef.value?.focus()
+    return
+  }
+
+  // 搜索建议面板键盘导航
   if (!searchBox.value) return
 
   if (e.key === 'ArrowDown') {
+    e.preventDefault()
     selecedIdx.value = selecedIdx.value < searchItems.value.length - 1 ? selecedIdx.value + 1 : 0
     return
   }
 
   if (e.key === 'ArrowUp') {
+    e.preventDefault()
     selecedIdx.value = selecedIdx.value > 0 ? selecedIdx.value - 1 : searchItems.value.length - 1
     return
   }
 
-  if (e.key === 'Enter' && searchItems.value.length > 0) {
-    goExtra(searchItems.value[selecedIdx.value].menu_link)
-    searchBox.value = false
-    selecedIdx.value = 0
+  if (e.key === 'Enter') {
+    // 弹窗打开时不拦截回车
+    if (editModal.value || visible.value) return
+    e.preventDefault()
+    if (searchItems.value.length > 0) {
+      goExtra(searchItems.value[selecedIdx.value].menu_link)
+      searchBox.value = false
+      selecedIdx.value = 0
+    } else if (searchWord.value.trim()) {
+      search()
+    }
   }
 }
 
@@ -454,19 +714,86 @@ function handdleMenuItem(type: number) {
       cancelText: '取消',
       submitText: '删除',
       handdleSubmit: async () => {
-        const res = await $http.nav.deleteNav(currentItem.value?.nid)
-        if (res.code === 200) {
-          $msg.success('删除成功')
-          getNavList()
+        try {
+          const res = await $http.nav.deleteNav(currentItem.value?.nid)
+          if (res.code === 200) {
+            $msg.success('删除成功')
+            cleanupNavLocal(currentItem.value?.nid)
+            getNavList()
+          }
+        } catch {
+          $msg.error('删除失败，请稍后再试')
         }
       }
     })
     return
   }
 
+  // 复制链接
+  if (type === 5) {
+    copyLink()
+    return
+  }
+
+  // 置顶 / 取消置顶
+  if (type === 6) {
+    togglePin()
+    return
+  }
+
+  // 重新加载图标
+  if (type === 7) {
+    retryIcon()
+    return
+  }
+
   editModal.value = true
 }
 
+async function copyLink() {
+  const link = currentItem.value?.menu_link
+  if (!link) return
+
+  try {
+    await navigator.clipboard.writeText(link)
+    $msg.success('链接已复制')
+  } catch {
+    // 兼容非 https 环境
+    const textarea = document.createElement('textarea')
+    textarea.value = link
+    textarea.style.position = 'fixed'
+    textarea.style.opacity = '0'
+    document.body.appendChild(textarea)
+    textarea.select()
+    document.execCommand('copy')
+    document.body.removeChild(textarea)
+    $msg.success('链接已复制')
+  }
+}
+
+async function retryIcon() {
+  const item = currentItem.value
+  if (!item?.menu_link) return
+
+  try {
+    const res = await $http.mix.getIcon({ url: item.menu_link })
+    if (res.code === 200 && res.data?.url) {
+      item.menu_icon = res.data.url
+      item.icon_error = false
+      const target = navlist.value.find(i => i.nid === item.nid)
+      if (target) {
+        target.menu_icon = res.data.url
+        target.icon_error = false
+      }
+      $msg.success('图标已更新')
+    } else {
+      $msg.error('图标获取失败，可手动填写图标链接')
+    }
+  } catch {
+    $msg.error('图标获取失败，可手动填写图标链接')
+  }
+}
+
 function handleItemCancel() {
   editModal.value = false
   editInput.value = ''
@@ -490,11 +817,15 @@ async function handleItemSubmit() {
     updateData.tag = formatTag(value)
   }
 
-  const res = await $http.nav.editNav(currentItem.value.nid, updateData)
-  if (res.code === 200) {
-    $msg.success('修改成功')
-    handleItemCancel()
-    getNavList()
+  try {
+    const res = await $http.nav.editNav(currentItem.value.nid, updateData)
+    if (res.code === 200) {
+      $msg.success('修改成功')
+      handleItemCancel()
+      getNavList()
+    }
+  } catch {
+    $msg.error('修改失败，请稍后再试')
   }
 }
 
@@ -504,35 +835,53 @@ async function getNavList() {
     navlist.value = []
     cloneNavlist = []
     resetTagList()
+    addCardReady.value = true
     return
   }
 
-  const res = await $http.nav.getNavList()
-  if (!res.data) return
+  try {
+    const res = await $http.nav.getNavList()
+    addCardReady.value = true
+    if (!res.data) return
 
-  resetTagList()
-  const normalizedList = res.data.map((item: NavItem) => {
-    const normalizedTag = formatTag(item.tag)
+    resetTagList()
+    const countMap: Record<string, number> = {}
+    res.data.forEach((item: NavItem) => {
+      const tag = formatTag(item.tag)
+      countMap[tag] = (countMap[tag] || 0) + 1
+    })
 
-    if (!tagList.value.find(tag => tag.name === normalizedTag)) {
-      tagList.value.push({
-        name: normalizedTag,
-        color: getRandomDarkColor(30, 128),
-        checked: false
-      })
-    }
+    const normalizedList = res.data.map((item: NavItem) => {
+      const normalizedTag = formatTag(item.tag)
 
-    return {
-      ...item,
-      tag: normalizedTag,
-      icon_error: false,
-      first: item.menu_name.charAt(0) || '',
-      color: getRandomDarkColor()
-    }
-  })
+      if (!tagList.value.find(tag => tag.name === normalizedTag)) {
+        tagList.value.push({
+          name: normalizedTag,
+          color: getRandomDarkColor(30, 128),
+          checked: false,
+          count: 0
+        })
+      }
 
-  navlist.value = normalizedList
-  cloneNavlist = deepclone(normalizedList)
+      return {
+        ...item,
+        tag: normalizedTag,
+        icon_error: false,
+        first: item.menu_name.charAt(0) || '',
+        color: getRandomDarkColor()
+      }
+    })
+
+    // 统计各标签数量
+    tagList.value.forEach(tag => {
+      tag.count = tag.name === defaultTagName ? normalizedList.length : (countMap[tag.name] || 0)
+    })
+
+    cloneNavlist = deepclone(normalizedList)
+    navlist.value = sortNavList(normalizedList)
+  } catch {
+    addCardReady.value = true
+  }
 }
 
 function getItemColor(item: NavItem) {
@@ -550,7 +899,7 @@ function handdleTagClick(tag: TagItem) {
         currentTag.checked = false
       }
     })
-    navlist.value = deepclone(cloneNavlist)
+    navlist.value = sortNavList(cloneNavlist)
     return
   }
 
@@ -563,11 +912,11 @@ function handdleTagClick(tag: TagItem) {
 
   if (selectedTags.length === 0) {
     if (allTag) allTag.checked = true
-    navlist.value = deepclone(cloneNavlist)
+    navlist.value = sortNavList(cloneNavlist)
     return
   }
 
-  navlist.value = cloneNavlist.filter((item) => selectedTags.includes(formatTag(item.tag)))
+  navlist.value = sortNavList(cloneNavlist.filter((item) => selectedTags.includes(formatTag(item.tag))))
 }
 
 function imgErr(index: number) {
@@ -577,6 +926,9 @@ function imgErr(index: number) {
 }
 
 function goExtra(link: string) {
+  // 记录点击热度
+  const matched = navlist.value.find(item => item.menu_link === link)
+  if (matched) hitNav(matched)
   window.open(link, '_blank')
 }
 
@@ -627,12 +979,16 @@ function addNav() {
 async function getIcon() {
   if (!navData.menu_link) return
 
-  const res = await $http.mix.getIcon({
-    url: navData.menu_link
-  })
+  try {
+    const res = await $http.mix.getIcon({
+      url: navData.menu_link
+    })
 
-  if (res.code === 200) {
-    navData.menu_icon = res.data.url
+    if (res.code === 200) {
+      navData.menu_icon = res.data.url
+    }
+  } catch {
+    $msg.error('图标获取失败')
   }
 }
 
@@ -655,12 +1011,17 @@ async function navSubmit() {
   }
 
   navData.tag = formatTag(navData.tag)
-  const res = await $http.nav.addNav(navData)
 
-  if (res.code === 200) {
-    $msg.success('添加成功')
-    visible.value = false
-    getNavList()
+  try {
+    const res = await $http.nav.addNav(navData)
+
+    if (res.code === 200) {
+      $msg.success('添加成功')
+      visible.value = false
+      getNavList()
+    }
+  } catch {
+    $msg.error('添加失败，请稍后再试')
   }
 
   resetNav()
@@ -690,31 +1051,32 @@ const handleResize = () => {
   }
 }
 
-const handleWindowKeyup = (event: Event) => {
-  handdleKeyup(event as KeyboardEvent)
-}
-
 onMounted(() => {
   resetTagList()
   contentStyle.value = {
     height: `${window.innerHeight - nav.navH}px`
   }
+  const navcardsEl = navcards.value?.$el as HTMLElement | undefined
   navStyle.value = {
-    height: `${window.innerHeight - navcards.value.getBoundingClientRect().y}px`
+    height: `${window.innerHeight - (navcardsEl?.getBoundingClientRect().y || 0)}px`
   }
   searchInputRef.value?.focus()
 
 
   getNavList()
+  // 兜底：即使导航请求异常，也保证新增卡片最终出现
+  window.setTimeout(() => {
+    addCardReady.value = true
+  }, 1200)
   window.addEventListener('resize', handleResize)
   window.addEventListener('scroll', handleResize, true)
-  window.addEventListener('keyup', handleWindowKeyup)
+  window.addEventListener('keydown', handleWindowKeydown)
 })
 
 onBeforeUnmount(() => {
   window.removeEventListener('resize', handleResize)
   window.removeEventListener('scroll', handleResize, true)
-  window.removeEventListener('keyup', handleWindowKeyup)
+  window.removeEventListener('keydown', handleWindowKeydown)
   removeTimer()
 })
 
@@ -814,24 +1176,30 @@ watch(searchBox, (visible) => {
     linear-gradient(135deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.16)),
     linear-gradient(180deg, rgba(241, 248, 252, 0.2), rgba(224, 236, 245, 0.08)) !important;
   box-shadow:
-    0 22px 40px rgba(86, 111, 137, 0.14),
-    inset 0 1px 0 rgba(255, 255, 255, 0.7),
-    inset 0 -1px 0 rgba(255, 255, 255, 0.16) !important;
+    0 1px 3px rgba(97, 121, 146, 0.05),
+    0 14px 30px rgba(97, 121, 146, 0.09),
+    0 36px 72px rgba(178, 128, 88, 0.07),
+    inset 0 1px 0 rgba(255, 255, 255, 0.72),
+    inset 0 -1px 0 rgba(255, 255, 255, 0.14) !important;
   backdrop-filter: blur(24px) saturate(165%);
   -webkit-backdrop-filter: blur(24px) saturate(165%);
 }
 
 .glass-surface {
   box-shadow:
-    0 18px 38px rgba(86, 111, 137, 0.12),
-    inset 0 1px 0 rgba(255, 255, 255, 0.68),
-    inset 0 -1px 0 rgba(255, 255, 255, 0.14) !important;
+    0 1px 3px rgba(97, 121, 146, 0.05),
+    0 12px 28px rgba(97, 121, 146, 0.08),
+    0 32px 64px rgba(178, 128, 88, 0.06),
+    inset 0 1px 0 rgba(255, 255, 255, 0.7),
+    inset 0 -1px 0 rgba(255, 255, 255, 0.12) !important;
 }
 
 .glass-floating-surface {
   box-shadow:
-    0 24px 52px rgba(86, 111, 137, 0.18),
-    inset 0 1px 0 rgba(255, 255, 255, 0.74),
+    0 2px 8px rgba(97, 121, 146, 0.08),
+    0 18px 40px rgba(97, 121, 146, 0.13),
+    0 56px 110px rgba(178, 128, 88, 0.11),
+    inset 0 1px 0 rgba(255, 255, 255, 0.8),
     inset 0 -1px 0 rgba(255, 255, 255, 0.16) !important;
 }
 
@@ -894,9 +1262,11 @@ watch(searchBox, (visible) => {
 .glass-nav-card:hover {
   border-color: rgba(255, 255, 255, 0.74) !important;
   box-shadow:
-    0 28px 48px rgba(86, 111, 137, 0.18),
-    inset 0 1px 0 rgba(255, 255, 255, 0.78),
-    inset 0 -1px 0 rgba(255, 255, 255, 0.2) !important;
+    0 2px 6px rgba(97, 121, 146, 0.06),
+    0 20px 44px rgba(97, 121, 146, 0.13),
+    0 52px 100px rgba(178, 128, 88, 0.1),
+    inset 0 1px 0 rgba(255, 255, 255, 0.8),
+    inset 0 -1px 0 rgba(255, 255, 255, 0.18) !important;
 }
 
 .glass-nav-card--warm {
@@ -926,8 +1296,10 @@ watch(searchBox, (visible) => {
     linear-gradient(135deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.16)),
     linear-gradient(180deg, rgba(241, 248, 252, 0.2), rgba(224, 236, 245, 0.08)) !important;
   box-shadow:
-    0 24px 52px rgba(86, 111, 137, 0.18),
-    inset 0 1px 0 rgba(255, 255, 255, 0.74),
+    0 2px 8px rgba(97, 121, 146, 0.08),
+    0 18px 40px rgba(97, 121, 146, 0.13),
+    0 56px 110px rgba(178, 128, 88, 0.11),
+    inset 0 1px 0 rgba(255, 255, 255, 0.8),
     inset 0 -1px 0 rgba(255, 255, 255, 0.16) !important;
   backdrop-filter: blur(24px) saturate(165%);
   -webkit-backdrop-filter: blur(24px) saturate(165%);
@@ -988,7 +1360,7 @@ watch(searchBox, (visible) => {
   transform: none;
   background: rgba(255, 255, 255, 0.62);
   box-shadow:
-    0 8px 16px rgba(120, 144, 168, 0.1),
+    0 2px 6px rgba(120, 144, 168, 0.08),
     inset 0 1px 0 rgba(255, 255, 255, 0.45);
 }
 
@@ -996,7 +1368,8 @@ watch(searchBox, (visible) => {
   background: linear-gradient(135deg, rgba(255, 240, 246, 0.98), rgba(255, 233, 223, 0.96));
   color: #364152;
   box-shadow:
-    0 10px 18px rgba(236, 102, 171, 0.12),
+    0 3px 8px rgba(236, 102, 171, 0.1),
+    0 10px 18px rgba(236, 102, 171, 0.08),
     inset 0 1px 0 rgba(255, 255, 255, 0.52);
 }
 
@@ -1026,7 +1399,8 @@ watch(searchBox, (visible) => {
   border-radius: 16px !important;
   box-shadow:
     inset 0 1px 0 rgba(255, 255, 255, 0.95),
-    0 10px 22px rgba(101, 126, 150, 0.08);
+    0 2px 6px rgba(101, 126, 150, 0.05),
+    0 10px 22px rgba(101, 126, 150, 0.07);
 }
 
 :deep(.modal-input .n-input:hover) {
@@ -1037,7 +1411,8 @@ watch(searchBox, (visible) => {
   border-color: rgba(236, 102, 171, 0.65) !important;
   box-shadow:
     0 0 0 4px rgba(236, 102, 171, 0.12),
-    0 12px 24px rgba(101, 126, 150, 0.1) !important;
+    0 2px 6px rgba(101, 126, 150, 0.06),
+    0 12px 24px rgba(101, 126, 150, 0.09) !important;
 }
 
 :deep(.modal-input .n-input__input-el) {
@@ -1052,6 +1427,243 @@ watch(searchBox, (visible) => {
   height: 100%;
 }
 
+/* ===== 卡片入场 / 重排动画 ===== */
+.nav-card-enter-active {
+  transition:
+    opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
+    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
+  transition-delay: calc(var(--i, 0) * 42ms);
+}
+
+.nav-card-enter-from {
+  opacity: 0;
+  transform: translateY(22px) scale(0.94);
+}
+
+/* wrap 容器无任何 transition —— Vue 检测不到 transform 过渡，
+   从而禁用其内置 move 逻辑（有删除时 onUpdated 同步执行会因占位计算错误），
+   重排动画由手动 FLIP（watch navlist + 双 rAF）接管 */
+.nav-card-leave-active {
+  transition: none !important;
+}
+
+/* ===== 卡片 hover 增强 ===== */
+.glass-nav-card:hover .grid-image {
+  transform: translateY(-3px) scale(1.08) rotate(-3deg);
+  box-shadow:
+    0 2px 6px rgba(97, 121, 146, 0.08),
+    0 14px 26px rgba(97, 121, 146, 0.14),
+    inset 0 1px 0 rgba(255, 255, 255, 0.95);
+}
+
+.card-name {
+  transition: color 0.25s ease;
+}
+
+.glass-nav-card:hover .card-name {
+  background: linear-gradient(135deg, #ec66ab, #f48a6f);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+}
+
+.glass-nav-card--warm:hover .add-card-plus {
+  transform: rotate(90deg) scale(1.08);
+}
+
+/* ===== 搜索框聚焦发光 ===== */
+.search-shell:focus-within .glass-surface {
+  border-color: rgba(236, 102, 171, 0.42) !important;
+  box-shadow:
+    0 0 0 4px rgba(236, 102, 171, 0.1),
+    0 2px 6px rgba(97, 121, 146, 0.05),
+    0 16px 36px rgba(97, 121, 146, 0.12),
+    inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
+}
+
+/* ===== 快捷键徽章 ===== */
+.search-kbd {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.2rem 0.6rem;
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  color: rgba(100, 116, 139, 0.85);
+  border: 1px solid rgba(255, 255, 255, 0.65);
+  border-radius: 9999px;
+  background: linear-gradient(135deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.24));
+  box-shadow:
+    0 2px 6px rgba(97, 121, 146, 0.08),
+    inset 0 1px 0 rgba(255, 255, 255, 0.7);
+  backdrop-filter: blur(12px);
+}
+
+.kbd {
+  display: inline-flex;
+  min-width: 1.05rem;
+  height: 1.05rem;
+  align-items: center;
+  justify-content: center;
+  margin: 0 1px;
+  padding: 0 0.3rem;
+  font-size: 10px;
+  font-weight: 700;
+  color: #64748b;
+  border: 1px solid rgba(148, 163, 184, 0.35);
+  border-radius: 0.3rem;
+  background: rgba(255, 255, 255, 0.65);
+  box-shadow: 0 1px 2px rgba(100, 116, 139, 0.1);
+}
+
+/* ===== 右键菜单 ===== */
+.menu-pop {
+  min-width: 11.5rem;
+  overflow: hidden;
+  border: 1px solid rgba(255, 255, 255, 0.62);
+  background:
+    linear-gradient(135deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.24)),
+    linear-gradient(180deg, rgba(241, 248, 252, 0.26), rgba(224, 236, 245, 0.1)) !important;
+  backdrop-filter: blur(26px) saturate(170%);
+  -webkit-backdrop-filter: blur(26px) saturate(170%);
+  transform-origin: top left;
+  animation: menu-enter 160ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.menu-head {
+  padding: 0.65rem 1rem 0.6rem;
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  color: #475569;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.55);
+  background: linear-gradient(135deg, rgba(255, 240, 246, 0.5), rgba(255, 233, 223, 0.34));
+}
+
+.menu-item {
+  display: flex;
+  align-items: center;
+  gap: 0.55rem;
+  padding: 0.62rem 1rem;
+  font-size: 13.5px;
+  font-weight: 600;
+  color: #475569;
+  transition:
+    background-color 0.18s ease,
+    color 0.18s ease,
+    padding-left 0.18s ease;
+}
+
+.menu-item:hover {
+  background: linear-gradient(135deg, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.45));
+  color: #ec66ab;
+  padding-left: 1.2rem;
+}
+
+.menu-item--danger {
+  color: #e05d5d;
+}
+
+.menu-item--danger:hover {
+  background: rgba(255, 236, 236, 0.85);
+  color: #d94040;
+}
+
+.menu-icon {
+  width: 1.05rem;
+  height: 1.05rem;
+  flex-shrink: 0;
+  opacity: 0.85;
+}
+
+.menu-divider {
+  height: 1px;
+  margin: 0.3rem 0.9rem;
+  background: linear-gradient(90deg, rgba(148, 163, 184, 0.28), rgba(148, 163, 184, 0.08));
+}
+
+@keyframes menu-enter {
+  from {
+    opacity: 0;
+    transform: translateY(-6px) scale(0.96);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+/* ===== 标签交互增强 ===== */
+.nav-tag {
+  transition:
+    transform 0.18s cubic-bezier(0.22, 1, 0.36, 1),
+    background-color 0.2s ease,
+    box-shadow 0.2s ease,
+    color 0.2s ease;
+}
+
+.nav-tag:hover {
+  transform: translateY(-1.5px);
+}
+
+.nav-tag:active {
+  transform: scale(0.92);
+}
+
+/* ===== 常用标签快捷选择 ===== */
+.quick-tag {
+  padding: 0.28rem 0.75rem;
+  font-size: 12px;
+  font-weight: 600;
+  color: #64748b;
+  border: 1px solid rgba(203, 213, 225, 0.9);
+  border-radius: 9999px;
+  background: rgba(255, 255, 255, 0.72);
+  cursor: pointer;
+  transition:
+    transform 0.18s ease,
+    border-color 0.18s ease,
+    color 0.18s ease,
+    background-color 0.18s ease,
+    box-shadow 0.18s ease;
+}
+
+.quick-tag:hover {
+  transform: translateY(-1px);
+  border-color: rgba(236, 102, 171, 0.55);
+  color: #ec66ab;
+  box-shadow:
+    0 2px 6px rgba(236, 102, 171, 0.1),
+    0 6px 14px rgba(236, 102, 171, 0.08);
+}
+
+.quick-tag--active {
+  color: #fff;
+  border-color: transparent;
+  background: linear-gradient(135deg, #ec66ab, #f48a6f);
+  box-shadow:
+    0 3px 8px rgba(236, 102, 171, 0.2),
+    0 10px 18px rgba(236, 102, 171, 0.14);
+}
+
+/* ===== 置顶星标 ===== */
+.nav-pin {
+  animation: pin-in 0.4s cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+@keyframes pin-in {
+  from {
+    opacity: 0;
+    transform: scale(0) rotate(-90deg);
+  }
+
+  to {
+    opacity: 1;
+    transform: scale(1) rotate(0);
+  }
+}
+
 :deep(.nav-tag) {
   margin: 0 !important;
   box-sizing: border-box;
diff --git a/tsconfig.app.json b/tsconfig.app.json
index 9c4dc1e..ca56e1c 100644
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
@@ -13,7 +13,7 @@
   "compilerOptions": {
     "target": "es2021",
     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
-    "types":["unplugin-vue-router/client"],
+    "types":["vue-router/auto"],
     "paths": {
       "@/*": ["./src/*"]
     }
diff --git a/typed-router.d.ts b/typed-router.d.ts
index 857c34c..7ac139d 100644
--- a/typed-router.d.ts
+++ b/typed-router.d.ts
@@ -1,36 +1,97 @@
 /* eslint-disable */
 /* prettier-ignore */
+// oxfmt-ignore
 // @ts-nocheck
-// Generated by unplugin-vue-router. ‼️ DO NOT MODIFY THIS FILE ‼️
+// noinspection ES6UnusedImports
+// Generated by vue-router. !! DO NOT MODIFY THIS FILE !!
 // It's recommended to commit this file.
 // Make sure to add this file to your tsconfig.json file as an "includes" or "files" entry.
 
-declare module 'vue-router/auto-routes' {
-  import type {
-    RouteRecordInfo,
-    ParamValue,
-    ParamValueOneOrMore,
-    ParamValueZeroOrMore,
-    ParamValueZeroOrOne,
-  } from 'vue-router'
+import type {
+  RouteRecordInfo,
+  ParamValue,
+  ParamValueOneOrMore,
+  ParamValueZeroOrMore,
+  ParamValueZeroOrOne,
+} from 'vue-router'
+import type {
+  _ExtractParamParserType,
+} from 'vue-router/experimental'
 
+declare module 'vue-router' {
+  interface TypesConfig {
+    _ParamParsers: {}
+    RouteNamedMap: import('vue-router/auto-routes').RouteNamedMap
+    _RouteFileInfoMap: import('vue-router/auto-routes')._RouteFileInfoMap
+  }
+}
+
+declare module 'vue-router/auto-routes' {
   /**
-   * Route name map generated by unplugin-vue-router
+   * Route name map generated by vue-router
    */
   export interface RouteNamedMap {
-    'apps': RouteRecordInfo<'apps', '/Apps', Record<never, never>, Record<never, never>>,
-    'blog': RouteRecordInfo<'blog', '/blog', Record<never, never>, Record<never, never>>,
-    'blog/:bid': RouteRecordInfo<'blog/:bid', '/blog/:bid', { bid: ParamValue<true> }, { bid: ParamValue<false> }>,
-    'gallery': RouteRecordInfo<'gallery', '/Gallery', Record<never, never>, Record<never, never>>,
-    'home': RouteRecordInfo<'home', '/Home', Record<never, never>, Record<never, never>>,
-    '404': RouteRecordInfo<'404', '/NotFound', Record<never, never>, Record<never, never>>,
-    'plink': RouteRecordInfo<'plink', '/Plink', Record<never, never>, Record<never, never>>,
-    'widget': RouteRecordInfo<'widget', '/Widget', Record<never, never>, Record<never, never>>,
+    'home': RouteRecordInfo<
+      'home',
+      '/',
+      Record<never, never>,
+      Record<never, never>,
+      | never
+    >,
+    'apps': RouteRecordInfo<
+      'apps',
+      '/Apps',
+      Record<never, never>,
+      Record<never, never>,
+      | never
+    >,
+    'blog': RouteRecordInfo<
+      'blog',
+      '/blog',
+      Record<never, never>,
+      Record<never, never>,
+      | never
+    >,
+    'blog/:bid': RouteRecordInfo<
+      'blog/:bid',
+      '/blog/:bid',
+      { bid: ParamValue<true> },
+      { bid: ParamValue<false> },
+      | never
+    >,
+    'gallery': RouteRecordInfo<
+      'gallery',
+      '/Gallery',
+      Record<never, never>,
+      Record<never, never>,
+      | never
+    >,
+    '404': RouteRecordInfo<
+      '404',
+      '/NotFound',
+      Record<never, never>,
+      Record<never, never>,
+      | never
+    >,
+    'plink': RouteRecordInfo<
+      'plink',
+      '/Plink',
+      Record<never, never>,
+      Record<never, never>,
+      | never
+    >,
+    'widget': RouteRecordInfo<
+      'widget',
+      '/Widget',
+      Record<never, never>,
+      Record<never, never>,
+      | never
+    >,
   }
 
   /**
-   * Route file to route info map by unplugin-vue-router.
-   * Used by the volar plugin to automatically type useRoute()
+   * Route file to route info map by vue-router.
+   * Used by the \`sfc-typed-router\` Volar plugin to automatically type \`useRoute()\`.
    *
    * Each key is a file path relative to the project root with 2 properties:
    * - routes: union of route names of the possible routes when in this page (passed to useRoute<...>())
@@ -39,43 +100,75 @@ declare module 'vue-router/auto-routes' {
    * @internal
    */
   export interface _RouteFileInfoMap {
+    'src/views/index.vue': {
+      routes:
+        | 'home'
+      views:
+        | never
+      pathParamNames:
+        | never
+    }
     'src/views/Apps.vue': {
-      routes: 'apps'
-      views: never
+      routes:
+        | 'apps'
+      views:
+        | never
+      pathParamNames:
+        | never
     }
     'src/views/blog/index.vue': {
-      routes: 'blog'
-      views: never
+      routes:
+        | 'blog'
+      views:
+        | never
+      pathParamNames:
+        | never
     }
     'src/views/blog/[bid].vue': {
-      routes: 'blog/:bid'
-      views: never
+      routes:
+        | 'blog/:bid'
+      views:
+        | never
+      pathParamNames:
+        | 'bid'
     }
     'src/views/Gallery.vue': {
-      routes: 'gallery'
-      views: never
-    }
-    'src/views/Home.vue': {
-      routes: 'home'
-      views: never
+      routes:
+        | 'gallery'
+      views:
+        | never
+      pathParamNames:
+        | never
     }
     'src/views/NotFound.vue': {
-      routes: '404'
-      views: never
+      routes:
+        | '404'
+      views:
+        | never
+      pathParamNames:
+        | never
     }
     'src/views/Plink.vue': {
-      routes: 'plink'
-      views: never
+      routes:
+        | 'plink'
+      views:
+        | never
+      pathParamNames:
+        | never
     }
     'src/views/Widget.vue': {
-      routes: 'widget'
-      views: never
+      routes:
+        | 'widget'
+      views:
+        | never
+      pathParamNames:
+        | never
     }
   }
 
   /**
    * Get a union of possible route names in a certain route component file.
-   * Used by the volar plugin to automatically type useRoute()
+   * Used by the \`sfc-typed-router\` Volar plugin to automatically type \`useRoute()\`.
    *
    * @internal
    */
@@ -84,3 +177,5 @@ declare module 'vue-router/auto-routes' {
       ? Info['routes']
       : keyof RouteNamedMap
 }
+
+export {}
diff --git a/vite.config.ts b/vite.config.ts
index 8b4b7f6..9565ec9 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -5,9 +5,8 @@ import UnoCSS from "unocss/vite";
 import AutoImport from "unplugin-auto-import/vite";
 import { NaiveUiResolver } from "unplugin-vue-components/resolvers";
 import Components from "unplugin-vue-components/vite";
-import { VueRouterAutoImports } from "unplugin-vue-router";
-import VueRouter from "unplugin-vue-router/vite";
 import { defineConfig } from "vite";
+import VueRouter from "vue-router/vite";
 // import vueDevTools from "vite-plugin-vue-devtools";
 import svgLoader from "vite-svg-loader";
 // https://vite.dev/config/
@@ -23,7 +22,7 @@ export default defineConfig({
       imports: [
         "vue",
         "pinia",
-        VueRouterAutoImports,
+        "vue-router",
         {
           "naive-ui": ["useDialog", "useMessage", "useNotification", "useLoadingBar"],
         },
diff --git a/yarn.lock b/yarn.lock
index 745132e..060e073 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -56,6 +56,18 @@
     "@jridgewell/trace-mapping" "^0.3.28"
     jsesc "^3.0.2"
 
+"@babel/generator@^8.0.0":
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-8.0.0.tgz#24b7b53a74fa8e74cc2377e054fecef4dcdada96"
+  integrity sha512-NT9NrVwJsbSV6Y2FSstWa71EETOnzrjkL5/wX3D2mYHtKM+qvqB1DvR4D0Setb/gDBsHzRICifwEWMO8CnTF6g==
+  dependencies:
+    "@babel/parser" "^8.0.0"
+    "@babel/types" "^8.0.0"
+    "@jridgewell/gen-mapping" "^0.3.12"
+    "@jridgewell/trace-mapping" "^0.3.28"
+    "@types/jsesc" "^2.5.0"
+    jsesc "^3.0.2"
+
 "@babel/helper-annotate-as-pure@^7.27.3":
   version "7.27.3"
   resolved "https://registry.npmmirror.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.27.3.tgz#f31fd86b915fc4daf1f3ac6976c59be7084ed9c5"
@@ -158,11 +170,31 @@
   resolved "https://registry.npmmirror.com/@babel/helper-string-parser/-/helper-string-parser-7.27.1.tgz#54da796097ab19ce67ed9f88b47bb2ec49367687"
   integrity sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==
 
+"@babel/helper-string-parser@^7.29.7":
+  version "7.29.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.29.7.tgz#7f0871d99824d23137d60f86fcf6130fd5a1b51f"
+  integrity sha512-Pb5ijPrZ89GDH8223L4UP8i6QApWxs04RbPQJTeWDV0/keR2E36MeKnyr6LYmUUvqRRI+Iv87SuF1W6ErINzYw==
+
+"@babel/helper-string-parser@^8.0.0":
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-8.0.0.tgz#4d47d9ad35d0f5bd7d202b348bf558328a347977"
+  integrity sha512-6mJgmFFFIIO82vvoLt9XtRC7/TkzXfts1t/SpRX4IHSzMgqoPYCWesVu1udUPUWioAE/2fcG6WuI8zrkE1gwrg==
+
 "@babel/helper-validator-identifier@^7.27.1", "@babel/helper-validator-identifier@^7.28.5":
   version "7.28.5"
   resolved "https://registry.npmmirror.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.28.5.tgz#010b6938fab7cb7df74aa2bbc06aa503b8fe5fb4"
   integrity sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==
 
+"@babel/helper-validator-identifier@^7.29.7":
+  version "7.29.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.29.7.tgz#bd87084ced0c796ec46bda492de6e83d29e89fc2"
+  integrity sha512-qehxGkRj55h/ff8EMaJ+cYhyaKlHIxqYDn682wQD7RNp9UujOQsHog2uS0r2vzr4pW+sXf90NeeayjcNaX3fFg==
+
+"@babel/helper-validator-identifier@^8.0.4":
+  version "8.0.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-8.0.4.tgz#60e427a9be7a101af52f14588def2dad8a9f9881"
+  integrity sha512-4wFaiLd0bVo4cIoTXI3zKI038NIWE/cr3jvBjejOVYVxV/m8Ltav1USiGzG1fmS5J2RhgEOgXNNK46cRPnRsrg==
+
 "@babel/helper-validator-option@^7.27.1":
   version "7.27.1"
   resolved "https://registry.npmmirror.com/@babel/helper-validator-option/-/helper-validator-option-7.27.1.tgz#fa52f5b1e7db1ab049445b421c4471303897702f"
@@ -190,6 +222,20 @@
   dependencies:
     "@babel/types" "^7.28.5"
 
+"@babel/parser@^7.29.2", "@babel/parser@^7.29.7":
+  version "7.29.8"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.29.8.tgz#9653716a2f10c677b98fbc63d4bfb000c302cf17"
+  integrity sha512-E8lTAYNB1KW+FH+VGJuZM1ioAx2E6oVlvQFRrf5P8ZZmsiJXYAD9vTFV7yyEURNzgh1dFqMZuO6tUwcARbqFCA==
+  dependencies:
+    "@babel/types" "^7.29.8"
+
+"@babel/parser@^8.0.0":
+  version "8.0.4"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-8.0.4.tgz#244e21ca23ab54c6f5373af2122cb3a618f9dd39"
+  integrity sha512-srpptsAkEbbNIC/q8nT7o+m6CQe8CJUTV/t7MYc9NnWlgYVtHOb7JH6SorxMhN0kuRJjVqXbKClG6xSbPtzz+g==
+  dependencies:
+    "@babel/types" "^8.0.4"
+
 "@babel/plugin-proposal-decorators@^7.23.0":
   version "7.28.0"
   resolved "https://registry.npmmirror.com/@babel/plugin-proposal-decorators/-/plugin-proposal-decorators-7.28.0.tgz#419c8acc31088e05a774344c021800f7ddc39bf0"
@@ -288,6 +334,22 @@
     "@babel/helper-string-parser" "^7.27.1"
     "@babel/helper-validator-identifier" "^7.28.5"
 
+"@babel/types@^7.29.0", "@babel/types@^7.29.8":
+  version "7.29.8"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.29.8.tgz#1229eef31d85156d70fa3f4cd859376d0eaf6863"
+  integrity sha512-Vj1jF3cPfxg7OAfoI7QnVKLoILlm2JF9pnVHrX8qx7AHMiYWT+NDAA7jChlNgRS4WTLc/fD1lXLmPixluj+3Gg==
+  dependencies:
+    "@babel/helper-string-parser" "^7.29.7"
+    "@babel/helper-validator-identifier" "^7.29.7"
+
+"@babel/types@^8.0.0", "@babel/types@^8.0.4":
+  version "8.0.4"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-8.0.4.tgz#8c208701320c9f0323b5b6a233d093e52c1e3b41"
+  integrity sha512-eY+Yn3dCqTGmyiq2QRU66lA5FL8lqqqvecHt0fF3uHONIa7ToYsaCiWV8lOKqAs0Rb2SjixiKFROngnulPtt2g==
+  dependencies:
+    "@babel/helper-string-parser" "^8.0.0"
+    "@babel/helper-validator-identifier" "^8.0.4"
+
 "@braintree/sanitize-url@^6.0.0":
   version "6.0.4"
   resolved "https://registry.npmmirror.com/@braintree/sanitize-url/-/sanitize-url-6.0.4.tgz#923ca57e173c6b232bbbb07347b1be982f03e783"
@@ -1175,6 +1237,11 @@
   resolved "https://registry.npmmirror.com/@types/estree/-/estree-1.0.8.tgz#958b91c991b1867ced318bedea0e215ee050726e"
   integrity sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==
 
+"@types/jsesc@^2.5.0":
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/@types/jsesc/-/jsesc-2.5.1.tgz#c34defc608ec94b68dc6a12a581b440942c6d503"
+  integrity sha512-9VN+6yxLOPLOav+7PwjZbxiID2bVaeq0ED4qSQmdQTdjnXJSaCVKTR58t15oqH1H5t8Ng2ZX1SabJVoN9Q34bw==
+
 "@types/katex@^0.16.2":
   version "0.16.7"
   resolved "https://registry.npmmirror.com/@types/katex/-/katex-0.16.7.tgz#03ab680ab4fa4fbc6cb46ecf987ecad5d8019868"
@@ -1492,6 +1559,17 @@
     magic-string-ast "^1.0.0"
     unplugin-utils "^0.2.4"
 
+"@vue-macros/common@^3.1.3":
+  version "3.1.4"
+  resolved "https://registry.yarnpkg.com/@vue-macros/common/-/common-3.1.4.tgz#cb56f0a84bdbfacbfa640ac34d9f805667adac8c"
+  integrity sha512-/5Fv+6DgIcM9ajY05ZmKBv+LMX1M9A0X+IUwDRVdt67ciw8OV9bvG2r34p3RiEadlsQybjhKPRKNXDC8Bp23cw==
+  dependencies:
+    "@vue/compiler-sfc" "^3.5.22"
+    ast-kit "^2.1.2"
+    local-pkg "^1.1.2"
+    magic-string-ast "^1.0.2"
+    unplugin-utils "^0.3.0"
+
 "@vue/babel-helper-vue-transform-on@1.5.0":
   version "1.5.0"
   resolved "https://registry.npmmirror.com/@vue/babel-helper-vue-transform-on/-/babel-helper-vue-transform-on-1.5.0.tgz#b7e99d37eeb144d7b9757d7a1f40cd977fde748a"
@@ -1534,6 +1612,17 @@
     estree-walker "^2.0.2"
     source-map-js "^1.2.1"
 
+"@vue/compiler-core@3.5.40":
+  version "3.5.40"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-core/-/compiler-core-3.5.40.tgz#a3e9e280ef3dccb6de4c7707ba50d7e10fd598a5"
+  integrity sha512-39E8IgOhTbVDnoJFMKc2DvYnypcZwUqgUhQkccva/0m6FUwtIKSGV7n1hpVmYcFaoRAwf9pBcwnKlCEsN63ZEQ==
+  dependencies:
+    "@babel/parser" "^7.29.7"
+    "@vue/shared" "3.5.40"
+    entities "^7.0.1"
+    estree-walker "^2.0.2"
+    source-map-js "^1.2.1"
+
 "@vue/compiler-core@3.6.0-beta.1":
   version "3.6.0-beta.1"
   resolved "https://registry.npmmirror.com/@vue/compiler-core/-/compiler-core-3.6.0-beta.1.tgz#9a19a73fcb1ea8a4add071af2a3308514a7baebb"
@@ -1553,6 +1642,14 @@
     "@vue/compiler-core" "3.5.26"
     "@vue/shared" "3.5.26"
 
+"@vue/compiler-dom@3.5.40":
+  version "3.5.40"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.5.40.tgz#ac0579d4dc257bf5e10ce324a7ce0a7f9fc5c338"
+  integrity sha512-pwkx4vqlqOspFstrcmzwkKLePVMD3PT65imRzLhanU2V1Fj4K13g6OXjanOyzw3aTAuRk84BOmY8f3rEHqPaVA==
+  dependencies:
+    "@vue/compiler-core" "3.5.40"
+    "@vue/shared" "3.5.40"
+
 "@vue/compiler-dom@3.6.0-beta.1":
   version "3.6.0-beta.1"
   resolved "https://registry.npmmirror.com/@vue/compiler-dom/-/compiler-dom-3.6.0-beta.1.tgz#0c45d0faf7949916953d511f15a382bf893025d0"
@@ -1592,6 +1689,21 @@
     postcss "^8.5.6"
     source-map-js "^1.2.1"
 
+"@vue/compiler-sfc@^3.5.22":
+  version "3.5.40"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.5.40.tgz#22252b2e5a58a6b6a4f71565cfa91271bddbe782"
+  integrity sha512-gIf497P4kpuALcvs5n3AEg1Vdn0pSY4XbjASIfHNYF1/MP3T2Mf2STERTubysBxCRxzJGJYtF/O7vwJrxFB3Vw==
+  dependencies:
+    "@babel/parser" "^7.29.7"
+    "@vue/compiler-core" "3.5.40"
+    "@vue/compiler-dom" "3.5.40"
+    "@vue/compiler-ssr" "3.5.40"
+    "@vue/shared" "3.5.40"
+    estree-walker "^2.0.2"
+    magic-string "^0.30.21"
+    postcss "^8.5.19"
+    source-map-js "^1.2.1"
+
 "@vue/compiler-ssr@3.5.26":
   version "3.5.26"
   resolved "https://registry.npmmirror.com/@vue/compiler-ssr/-/compiler-ssr-3.5.26.tgz#f6e94bccbb5339180779036ddfb614f998a197ea"
@@ -1600,6 +1712,14 @@
     "@vue/compiler-dom" "3.5.26"
     "@vue/shared" "3.5.26"
 
+"@vue/compiler-ssr@3.5.40":
+  version "3.5.40"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-ssr/-/compiler-ssr-3.5.40.tgz#c8c80efd22f5d85ea775d6ead787a108dc86cd58"
+  integrity sha512-rrE5xiXG663+vHCHa3J9p2z5OcBRjXmoqenprJxAFQxg5pSshzeBiCE6pu46axapRJ2Adk0YDA2BRZVjiHXnhg==
+  dependencies:
+    "@vue/compiler-dom" "3.5.40"
+    "@vue/shared" "3.5.40"
+
 "@vue/compiler-ssr@3.6.0-beta.1":
   version "3.6.0-beta.1"
   resolved "https://registry.npmmirror.com/@vue/compiler-ssr/-/compiler-ssr-3.6.0-beta.1.tgz#37db007c64697864c70d183e956c908a474c0d2b"
@@ -1631,6 +1751,13 @@
   dependencies:
     "@vue/devtools-kit" "^7.7.9"
 
+"@vue/devtools-api@^8.1.5":
+  version "8.2.1"
+  resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-8.2.1.tgz#9d95de2b908aa80b9957d737ddca51790e70c3b5"
+  integrity sha512-6u4vXBlIBAC1wMplIZgpyPn7uh/s4Bf6F5bMzvLv+EdJ0aHs/+4B7Ygv864EStQSjRbsRzTko/kUG1A1IejQ3A==
+  dependencies:
+    "@vue/devtools-kit" "^8.2.1"
+
 "@vue/devtools-core@^8.0.5":
   version "8.0.5"
   resolved "https://registry.npmmirror.com/@vue/devtools-core/-/devtools-core-8.0.5.tgz#ef3803cb22a5ab6e55728adfd564668418b670d9"
@@ -1669,6 +1796,16 @@
     speakingurl "^14.0.1"
     superjson "^2.2.2"
 
+"@vue/devtools-kit@^8.2.1":
+  version "8.2.1"
+  resolved "https://registry.yarnpkg.com/@vue/devtools-kit/-/devtools-kit-8.2.1.tgz#ad45babb12c51931d32d1b67ffaebc251f550ce9"
+  integrity sha512-FIGIuq3AWReEpbAHY/cRGeHDfI0qOb8OCQ3YjbEAX04uaxIDbGc9rhkbVcG7rnfHPXE3RsU5KrWOu9V/okd8AQ==
+  dependencies:
+    "@vue/devtools-shared" "^8.2.1"
+    birpc "^2.6.1"
+    hookable "^5.5.3"
+    perfect-debounce "^2.0.0"
+
 "@vue/devtools-shared@^7.7.9":
   version "7.7.9"
   resolved "https://registry.npmmirror.com/@vue/devtools-shared/-/devtools-shared-7.7.9.tgz#fa4c096b744927081a7dda5fcf05f34b1ae6ca14"
@@ -1683,6 +1820,11 @@
   dependencies:
     rfdc "^1.4.1"
 
+"@vue/devtools-shared@^8.2.1":
+  version "8.2.1"
+  resolved "https://registry.yarnpkg.com/@vue/devtools-shared/-/devtools-shared-8.2.1.tgz#26524e9e12fd205bcd5477cf3b5e9a17b876aeac"
+  integrity sha512-Fkac7lUdGReh6pVOi3AYPRGe82LQqRmAfThW7RRligOAP0ZA/Z1z9XLHDM9dv34pV2HRc79DK8uKPeG2fLnA/g==
+
 "@vue/language-core@3.2.1", "@vue/language-core@^3.0.1":
   version "3.2.1"
   resolved "https://registry.npmmirror.com/@vue/language-core/-/language-core-3.2.1.tgz#fe70cb54e76d1ac0a8e10ed2b695dd333022a75e"
@@ -1775,6 +1917,11 @@
   resolved "https://registry.npmmirror.com/@vue/shared/-/shared-3.5.26.tgz#1e02ef2d64aced818cd31d81ce5175711dc90a9f"
   integrity sha512-7Z6/y3uFI5PRoKeorTOSXKcDj0MSasfNNltcslbFrPpcw6aXRUALq4IfJlaTRspiWIUOEZbrpM+iQGmCOiWe4A==
 
+"@vue/shared@3.5.40":
+  version "3.5.40"
+  resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.5.40.tgz#fc09d1871d66cd9b01959a597b41d7cb61f716a8"
+  integrity sha512-WxnBtruIqOoV3rA4jeKDWzrYI5h7Cp4+pjwDi8kWGHz+IslhiN+wguLVVhtv2l8VoU02rzDCVfDjgCl1lNpZVg==
+
 "@vue/shared@3.6.0-beta.1":
   version "3.6.0-beta.1"
   resolved "https://registry.npmmirror.com/@vue/shared/-/shared-3.6.0-beta.1.tgz#e4e13a2d79cdb65a98a84628c11e39b84ae1c4ec"
@@ -1817,6 +1964,11 @@ acorn@^8.14.1, acorn@^8.15.0:
   resolved "https://registry.npmmirror.com/acorn/-/acorn-8.15.0.tgz#a360898bc415edaac46c8241f6383975b930b816"
   integrity sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==
 
+acorn@^8.16.0:
+  version "8.18.0"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.18.0.tgz#4faf01b2d6d326bfeed97aea1f52220b5f4c1940"
+  integrity sha512-lGq+9yr1/GuAWaVYIHRjvvySG5/4VfKIvC8EWxStPdcDh/Ka7FG3twP6v4d5BkravUilhIAsG4Qj83t02LWUPQ==
+
 alien-signals@^3.0.0:
   version "3.1.2"
   resolved "https://registry.npmmirror.com/alien-signals/-/alien-signals-3.1.2.tgz#26e623e3ed81e401df1a7c503f726e2288a4fa02"
@@ -1854,7 +2006,7 @@ argparse@^2.0.1:
   resolved "https://registry.npmmirror.com/argparse/-/argparse-2.0.1.tgz#246f50f3ca78a3240f6c997e8a9bd1eac49e4b38"
   integrity sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==
 
-ast-kit@^2.1.1, ast-kit@^2.1.3:
+ast-kit@^2.1.1, ast-kit@^2.1.2, ast-kit@^2.1.3, ast-kit@^2.2.0:
   version "2.2.0"
   resolved "https://registry.npmmirror.com/ast-kit/-/ast-kit-2.2.0.tgz#6d9a298acefef5bdfc5a0fa51d94d1334ef2e671"
   integrity sha512-m1Q/RaVOnTp9JxPX+F+Zn7IcLYMzM8kZofDImfsKZd8MbR+ikdOzTeztStWqfrqIxZnYWryyI9ePm3NGjnZgGw==
@@ -1870,6 +2022,15 @@ ast-walker-scope@^0.8.1:
     "@babel/parser" "^7.28.4"
     ast-kit "^2.1.3"
 
+ast-walker-scope@^0.9.0:
+  version "0.9.0"
+  resolved "https://registry.yarnpkg.com/ast-walker-scope/-/ast-walker-scope-0.9.0.tgz#3bdcba80c488dd4c7fc1de055d645a0f95dff8fe"
+  integrity sha512-IJdzo2vLiElBxKzwS36VsCue/62d6IdWjnPB2v3nuPKeWGynp6FF/CYoLa5i/3jXH/z97ZDdsXz6abpgM6w07A==
+  dependencies:
+    "@babel/parser" "^7.29.2"
+    "@babel/types" "^7.29.0"
+    ast-kit "^2.2.0"
+
 async-validator@^4.0.7, async-validator@^4.2.5:
   version "4.2.5"
   resolved "https://registry.npmmirror.com/async-validator/-/async-validator-4.2.5.tgz#c96ea3332a521699d0afaaceed510a54656c6339"
@@ -2827,6 +2988,11 @@ entities@^7.0.0:
   resolved "https://registry.npmmirror.com/entities/-/entities-7.0.0.tgz#2ae4e443f3f17d152d3f5b0f79b932c1e59deb7a"
   integrity sha512-FDWG5cmEYf2Z00IkYRhbFrwIwvdFKH07uV8dvNy0omp/Qb1xcyCWp2UDtcwJF4QZZvk0sLudP6/hAu42TaqVhQ==
 
+entities@^7.0.1:
+  version "7.0.1"
+  resolved "https://registry.yarnpkg.com/entities/-/entities-7.0.1.tgz#26e8a88889db63417dcb9a1e79a3f1bc92b5976b"
+  integrity sha512-TWrgLOFUQTH994YUyl1yT4uyavY5nNB5muff+RtWaqNVCAK408b5ZnnbNAUEWLTCpum9w6arT70i1XdQ4UeOPA==
+
 entities@~2.1.0:
   version "2.1.0"
   resolved "https://registry.npmmirror.com/entities/-/entities-2.1.0.tgz#992d3129cf7df6870b96c57858c249a120f8b8b5"
@@ -3284,6 +3450,15 @@ local-pkg@^1.1.1:
     pkg-types "^2.3.0"
     quansync "^0.2.11"
 
+local-pkg@^1.1.2, local-pkg@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/local-pkg/-/local-pkg-1.2.1.tgz#9628389399851d78f3b50c9236eddb02f0c31b2b"
+  integrity sha512-++gUqRDEvcnN6Zhqrr+y/CkVEHhlrR96vZn3nZZPYzMcBUyBtTKzB9NadClFIsIVSsu+3i9tfk/erqy9kAmt7Q==
+  dependencies:
+    mlly "^1.7.4"
+    pkg-types "^2.3.0"
+    quansync "^0.2.11"
+
 lodash-es@^4.17.20, lodash-es@^4.17.21:
   version "4.17.22"
   resolved "https://registry.npmmirror.com/lodash-es/-/lodash-es-4.17.22.tgz#eb7d123ec2470d69b911abe34f85cb694849b346"
@@ -3316,7 +3491,7 @@ lxgw-wenkai-webfont@^1.7.0:
   resolved "https://registry.npmmirror.com/lxgw-wenkai-webfont/-/lxgw-wenkai-webfont-1.7.0.tgz#72ef4ef9d00fd185a2ed8898d1a60f73ab732f97"
   integrity sha512-kVJmT4xMAyOLhG6q0w63wJkVU7RP8UMQRGoAWj9tnpzL7sWFFYiEHBdUQyW9myqBQFa5SQfWfa2VLYF4IJBL5g==
 
-magic-string-ast@^1.0.0:
+magic-string-ast@^1.0.0, magic-string-ast@^1.0.2:
   version "1.0.3"
   resolved "https://registry.npmmirror.com/magic-string-ast/-/magic-string-ast-1.0.3.tgz#51ef7832fd5c70a0188fb94627caa3b8c74ff9bf"
   integrity sha512-CvkkH1i81zl7mmb94DsRiFeG9V2fR2JeuK8yDgS8oiZSFa++wWLEgZ5ufEOyLHbvSbD1gTRKv9NdX69Rnvr9JA==
@@ -3505,6 +3680,16 @@ mlly@^1.7.4, mlly@^1.8.0:
     pkg-types "^1.3.1"
     ufo "^1.6.1"
 
+mlly@^1.8.2:
+  version "1.8.2"
+  resolved "https://registry.yarnpkg.com/mlly/-/mlly-1.8.2.tgz#e7f7919a82d13b174405613117249a3f449d78bb"
+  integrity sha512-d+ObxMQFmbt10sretNDytwt85VrbkhhUA/JBGm1MPaWJ65Cl4wOgLaB1NYvJSZ0Ef03MMEU/0xpPMXUIQ29UfA==
+  dependencies:
+    acorn "^8.16.0"
+    pathe "^2.0.3"
+    pkg-types "^1.3.1"
+    ufo "^1.6.3"
+
 moment-mini@^2.24.0:
   version "2.29.4"
   resolved "https://registry.npmmirror.com/moment-mini/-/moment-mini-2.29.4.tgz#cbbcdc58ce1b267506f28ea6668dbe060a32758f"
@@ -3560,6 +3745,11 @@ nanoid@^3.3.11:
   resolved "https://registry.npmmirror.com/nanoid/-/nanoid-3.3.11.tgz#4f4f112cefbe303202f2199838128936266d185b"
   integrity sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==
 
+nanoid@^3.3.16:
+  version "3.3.17"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.17.tgz#f1c3aa253c52547956a52c50bff754316f61037a"
+  integrity sha512-xQLf0A3HOMlgHq0n247/LRuAOYmB7dXJ/DvAxGvsSBij45XtBSmQycu+F8ODbHwns/XyFZagyL1+J0Offw1E0g==
+
 nanoid@^5.1.5:
   version "5.1.6"
   resolved "https://registry.npmmirror.com/nanoid/-/nanoid-5.1.6.tgz#30363f664797e7d40429f6c16946d6bd7a3f26c9"
@@ -3595,6 +3785,11 @@ normalize-path@^3.0.0, normalize-path@~3.0.0:
   resolved "https://registry.npmmirror.com/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65"
   integrity sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==
 
+nostics@^1.1.4:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/nostics/-/nostics-1.2.0.tgz#1362df6de2ca8456b521914501abf6c52c4d7fb5"
+  integrity sha512-FGqEfhQjrvo1lL8KFifdTQiNwwQHJxC1jtYE1Rc54qF/jxONUNL+kC9gS1krX8Q65PgrQ5fCqH/I4NhWBvdSqg==
+
 npm-normalize-package-bin@^4.0.0:
   version "4.0.0"
   resolved "https://registry.npmmirror.com/npm-normalize-package-bin/-/npm-normalize-package-bin-4.0.0.tgz#df79e70cd0a113b77c02d1fe243c96b8e618acb1"
@@ -3700,6 +3895,11 @@ picomatch@^4.0.2, picomatch@^4.0.3:
   resolved "https://registry.npmmirror.com/picomatch/-/picomatch-4.0.3.tgz#796c76136d1eead715db1e7bad785dedd695a042"
   integrity sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==
 
+picomatch@^4.0.4, picomatch@^4.0.5:
+  version "4.0.5"
+  resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-4.0.5.tgz#51ea57a17d86f605f81039595fbc40ed06a55fab"
+  integrity sha512-RvwwcruNjI1ncT5xRakeyS9Lf8lcItv34KD+aif+VH9kduAyfYBipGh12274xtenIPZ119/R9BdTBa8gAwSh0A==
+
 pidtree@^0.6.0:
   version "0.6.0"
   resolved "https://registry.npmmirror.com/pidtree/-/pidtree-0.6.0.tgz#90ad7b6d42d5841e69e0a2419ef38f8883aa057c"
@@ -3735,6 +3935,15 @@ pkg-types@^2.1.0, pkg-types@^2.3.0:
     exsolve "^1.0.7"
     pathe "^2.0.3"
 
+postcss@^8.5.19:
+  version "8.5.25"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.5.25.tgz#5012a598eaaa897f21bbe8553be3cb7bd2bd78cb"
+  integrity sha512-DTPx3RWSSnWyzLxQnlH0rJP+EW5ekl16ZU4/psbIhA0e53kJfdgaN5vKM+xP7yJtXVu+nfdVFmlgFDEKAe4Pyw==
+  dependencies:
+    nanoid "^3.3.16"
+    picocolors "^1.1.1"
+    source-map-js "^1.2.1"
+
 postcss@^8.5.6:
   version "8.5.6"
   resolved "https://registry.npmmirror.com/postcss/-/postcss-8.5.6.tgz#2825006615a619b4f62a9e7426cc120b349a8f3c"
@@ -3998,6 +4207,14 @@ tinyglobby@^0.2.12, tinyglobby@^0.2.14, tinyglobby@^0.2.15:
     fdir "^6.5.0"
     picomatch "^4.0.3"
 
+tinyglobby@^0.2.17:
+  version "0.2.17"
+  resolved "https://registry.yarnpkg.com/tinyglobby/-/tinyglobby-0.2.17.tgz#562a9a6c9eb2b3b123d39719f9af5bb44fcd7631"
+  integrity sha512-wXR/dYpcqKmfWpEdZjiKJOwCNFndD0DMnrW/cYjVGttEkBfVgcLFHoNrlj47mjOVic9yyNu65alsgF4NQyTa2g==
+  dependencies:
+    fdir "^6.5.0"
+    picomatch "^4.0.4"
+
 to-regex-range@^5.0.1:
   version "5.0.1"
   resolved "https://registry.npmmirror.com/to-regex-range/-/to-regex-range-5.0.1.tgz#1648c44aae7c8d988a326018ed72f5b4dd0392e4"
@@ -4045,6 +4262,11 @@ ufo@^1.6.1:
   resolved "https://registry.npmmirror.com/ufo/-/ufo-1.6.1.tgz#ac2db1d54614d1b22c1d603e3aef44a85d8f146b"
   integrity sha512-9a4/uxlTWJ4+a5i0ooc1rU7C7YOw3wT+UGqdeNNHWnOF9qcMBgLRS+4IYUqbczewFx4mLEig6gawh7X6mFlEkA==
 
+ufo@^1.6.3:
+  version "1.6.4"
+  resolved "https://registry.yarnpkg.com/ufo/-/ufo-1.6.4.tgz#7a8fb875fcc6382d2c7d0b3692738b0500a92467"
+  integrity sha512-JFNbkD1Svwe0KvGi8GOeLcP4kAWQ609twvCdcHxq1oSL8svv39ZuSvajcD8B+5D0eL4+s1Is2D/O6KN3qcTeRA==
+
 unconfig-core@7.4.2:
   version "7.4.2"
   resolved "https://registry.npmmirror.com/unconfig-core/-/unconfig-core-7.4.2.tgz#20b676d6b57a04bade4b96da65c783d25e8b286c"
@@ -4147,6 +4369,14 @@ unplugin-utils@^0.3.0, unplugin-utils@^0.3.1:
     pathe "^2.0.3"
     picomatch "^4.0.3"
 
+unplugin-utils@^0.3.2:
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/unplugin-utils/-/unplugin-utils-0.3.2.tgz#22f6856408880b0b2d7dd974084faf94094613ef"
+  integrity sha512-xVToRh2CTmLk2HnEG7ac4rl1MJTT3RFkpS8B++/SnB0kXvuaavD+n3m/vrzyWQOdJNSZQACnbz01pnppbwV5BA==
+  dependencies:
+    pathe "^2.0.3"
+    picomatch "^4.0.4"
+
 unplugin-vue-components@^28.8.0:
   version "28.8.0"
   resolved "https://registry.npmmirror.com/unplugin-vue-components/-/unplugin-vue-components-28.8.0.tgz#3ccabfee1f4d2bdec38ef76634b6924001a5b671"
@@ -4193,6 +4423,15 @@ unplugin@^2.2.2, unplugin@^2.3.4, unplugin@^2.3.5:
     picomatch "^4.0.3"
     webpack-virtual-modules "^0.6.2"
 
+unplugin@^3.3.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/unplugin/-/unplugin-3.3.0.tgz#18de476b6130a6cde94db87f70ac32b97757f3c9"
+  integrity sha512-qa66K+crbfyE6JK10GjvbJeRrOsuC/JpbnHctfyp/i4oBTxWOzJfRZyDiOk1PtErMFRu8JhsU/wPvOdBNWe5Rg==
+  dependencies:
+    "@jridgewell/remapping" "^2.3.5"
+    picomatch "^4.0.4"
+    webpack-virtual-modules "^0.6.2"
+
 update-browserslist-db@^1.2.0:
   version "1.2.3"
   resolved "https://registry.npmmirror.com/update-browserslist-db/-/update-browserslist-db-1.2.3.tgz#64d76db58713136acbeb4c49114366cc6cc2e80d"
@@ -4353,13 +4592,37 @@ vue-flow-layout@^0.2.0:
   resolved "https://registry.npmmirror.com/vue-flow-layout/-/vue-flow-layout-0.2.0.tgz#3ea4e388a213f23d4653b45255b75b760701cd23"
   integrity sha512-zKgsWWkXq0xrus7H4Mc+uFs1ESrmdTXlO0YNbR6wMdPaFvosL3fMB8N7uTV308UhGy9UvTrGhIY7mVz9eN+L0Q==
 
-vue-router@^4.0.3, vue-router@^4.5.1:
+vue-router@^4.0.3:
   version "4.6.4"
   resolved "https://registry.npmmirror.com/vue-router/-/vue-router-4.6.4.tgz#a0a9cb9ef811a106d249e4bb9313d286718020d8"
   integrity sha512-Hz9q5sa33Yhduglwz6g9skT8OBPii+4bFn88w6J+J4MfEo4KRRpmiNG/hHHkdbRFlLBOqxN8y8gf2Fb0MTUgVg==
   dependencies:
     "@vue/devtools-api" "^6.6.4"
 
+vue-router@^5.2.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-5.2.0.tgz#34f03b1012729c33bb23184d96ad8e1b1b5c4546"
+  integrity sha512-QAC5i0LEb1GLG0LXDQmHu8L7FX12j0KwU/JTKmLQUJMrn04gQdKP6Du+p0QwpHb3iy71vBlqnHQ8WAfOSAWhqw==
+  dependencies:
+    "@babel/generator" "^8.0.0"
+    "@vue-macros/common" "^3.1.3"
+    "@vue/devtools-api" "^8.1.5"
+    ast-walker-scope "^0.9.0"
+    chokidar "^5.0.0"
+    json5 "^2.2.3"
+    local-pkg "^1.2.1"
+    magic-string "^0.30.21"
+    mlly "^1.8.2"
+    muggle-string "^0.4.1"
+    nostics "^1.1.4"
+    pathe "^2.0.3"
+    picomatch "^4.0.5"
+    scule "^1.3.0"
+    tinyglobby "^0.2.17"
+    unplugin "^3.3.0"
+    unplugin-utils "^0.3.2"
+    yaml "^2.9.0"
+
 vue-tsc@^3.0.4:
   version "3.2.1"
   resolved "https://registry.npmmirror.com/vue-tsc/-/vue-tsc-3.2.1.tgz#c11785765dd8ba08213e77cdc8be69e4a06b115c"
@@ -4460,6 +4723,11 @@ yaml@^2.8.0:
   resolved "https://registry.npmmirror.com/yaml/-/yaml-2.8.2.tgz#5694f25eca0ce9c3e7a9d9e00ce0ddabbd9e35c5"
   integrity sha512-mplynKqc1C2hTVYxd0PU2xQAc22TI1vShAYGksCCfxbn/dFwnHTNi1bvYsBTkhdUNtGIf5xNOg938rrSSYvS9A==
 
+yaml@^2.9.0:
+  version "2.9.0"
+  resolved "https://registry.yarnpkg.com/yaml/-/yaml-2.9.0.tgz#78274afd93598a1dfdd6130df6a566defcbf9aa4"
+  integrity sha512-2AvhNX3mb8zd6Zy7INTtSpl1F15HW6Wnqj0srWlkKLcpYl/gMIMJiyuGq2KeI2YFxUPjdlB+3Lc10seMLtL4cA==
+
 zrender@5.3.2:
   version "5.3.2"
   resolved "https://registry.npmmirror.com/zrender/-/zrender-5.3.2.tgz#f67b11d36d3d020d62411d3bb123eb1c93cccd69"