feat: 导航改名/排序 + 忽略列表抽屉化

1. 缓存概览 → 首页（🏠），我的缓存 → 软件包（🔍）
2. 导航顺序调整为：首页、软件包、Top榜单、用户管理、操作日志（Top榜单提到第三位）
3. 忽略列表从路由页改为右侧抽屉（IgnoredDrawer），入口移到头像下拉
   - 移除 /ignored 路由、导航栏 pill、移动端底部 Tabbar 忽略项
   - 移动端经设置抽屉「忽略列表」同样打开该抽屉
4. 头像下拉/设置抽屉新增「忽略列表」入口

frontend/src/App.vue

@@ -5,6 +5,7 @@ import AppTopbar from './components/AppTopbar.vue'
 import MobileTabbar from './components/MobileTabbar.vue'
 import SettingDrawer from './components/SettingDrawer.vue'
 import ThresholdsDrawer from './components/ThresholdsDrawer.vue'
+import IgnoredDrawer from './components/IgnoredDrawer.vue'
 import { useStore } from './store'
 
 const route = useRoute()
@@ -12,6 +13,7 @@ const router = useRouter()
 const { state, refreshAll, scanNow } = useStore()
 const settingsOpen = ref(false)
 const thresholdsOpen = ref(false)
+const ignoredOpen = ref(false)
 const isLogin = () => route.path === '/login'
 const isMobile = () => window.matchMedia('(max-width: 767px)').matches
 // 移动端软键盘弹出时隐藏底部 Tabbar：iOS Safari 会把 fixed 底部导航顶到视口中部
@@ -66,7 +68,7 @@ const fmtScanBytes = computed(() => {
 
   <div v-if="!isLogin()">
     <!-- 桌面/平板顶栏 -->
-    <AppTopbar class="desktop-topbar" @rescan="doRescan" @open-thresholds="thresholdsOpen = true" />
+    <AppTopbar class="desktop-topbar" @rescan="doRescan" @open-thresholds="thresholdsOpen = true" @open-ignored="ignoredOpen = true" />
     <!-- 移动端顶栏：☰ + 品牌 + 铃铛 -->
     <header class="m-topbar">
       <div class="m-brand">
@@ -108,8 +110,9 @@ const fmtScanBytes = computed(() => {
   </router-view>
 
   <MobileTabbar v-if="!isLogin() && isMobile()" :kb="kbOpen" />
-  <SettingDrawer v-model="settingsOpen" @rescan="doRescan" @open-thresholds="thresholdsOpen = true" />
+  <SettingDrawer v-model="settingsOpen" @rescan="doRescan" @open-thresholds="thresholdsOpen = true" @open-ignored="ignoredOpen = true" />
   <ThresholdsDrawer v-model="thresholdsOpen" />
+  <IgnoredDrawer v-model="ignoredOpen" />
 </template>
 
 <style scoped>

frontend/src/components/AppTopbar.vue

@@ -11,7 +11,7 @@ const router = useRouter()
 const { theme, toggle } = useTheme()
 const { state, refreshNotifications, markNotifRead, markAllNotifsRead } = useStore()
 
-const emit = defineEmits(['rescan', 'open-thresholds'])
+const emit = defineEmits(['rescan', 'open-thresholds', 'open-ignored'])
 
 const menuOpen = ref(false)
 const notifOpen = ref(false)
@@ -59,12 +59,11 @@ async function handleNotifClick(n) {
 }
 
 const navs = [
-  { path: '/', label: '缓存概览', emo: '🏠' },
-  { path: '/search', label: '我的缓存', emo: '🔍' },
+  { path: '/', label: '首页', emo: '🏠' },
+  { path: '/search', label: '软件包', emo: '🔍' },
+  { path: '/toplist', label: 'Top榜单', emo: '🏆' },
   { path: '/users', label: '用户管理', emo: '👥' },
   { path: '/logs', label: '操作日志', emo: '🕒' },
-  { path: '/toplist', label: 'Top榜单', emo: '🏆' },
-  { path: '/ignored', label: '忽略记录', emo: '📋' },
 ]
 
 function go(path) {
@@ -90,6 +89,7 @@ toggle()
   menuOpen.value = false
   if (action === 'rescan') emit('rescan')
   else if (action === 'thresholds') emit('open-thresholds')
+  else if (action === 'ignored') emit('open-ignored')
   else if (action === 'users') router.push('/users')
   else if (action === 'user-sync') await syncUsers()
   else if (action === 'about') window.open('/about', '_blank') // 新页签：项目背景/功能/仓库地址
@@ -166,6 +166,7 @@ onBeforeUnmount(() => document.removeEventListener('click', onDocClick))
             <button class="am-item" :disabled="state.loading" @click="pick('rescan')">{{ state.loading ? '⏳ 扫描中…' : '🔄 重新扫描' }}</button>
             <button class="am-item" @click="pick('theme')">{{ theme === 'dark' ? '🌙 暗色' : '☀️ 亮色' }}</button>
             <button class="am-item" @click="pick('thresholds')">⚙️ 预警设置</button>
+            <button class="am-item" @click="pick('ignored')">📋 忽略列表</button>
             <button class="am-item" @click="pick('users')">👥 用户管理</button>
             <button class="am-item" @click="pick('user-sync')">🔄 同步用户名</button>
             <button class="am-item" @click="pick('about')">ℹ️ 关于</button>

frontend/src/components/IgnoredDrawer.vue

@@ -0,0 +1,160 @@
+<script setup>
+import { computed } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { useStore, fmtSize } from '../store'
+
+const props = defineProps({ modelValue: Boolean })
+const emit = defineEmits(['update:modelValue'])
+
+const { state, unignorePkg } = useStore()
+
+const ignoredList = computed(() => state.packages.filter(p => p.status === 'ignored'))
+
+async function doUnignore(pkg) {
+  try {
+    await ElMessageBox.confirm(`确定将 ${pkg.name} 移出忽略吗？移出后若仍超阈值将恢复预警。`, '移出忽略', {
+      confirmButtonText: '移出',
+      cancelButtonText: '取消',
+      type: 'warning',
+    })
+  } catch {
+    return
+  }
+  await unignorePkg(pkg.name, pkg.versions)
+  ElMessage.success(`已移出忽略：${pkg.name}`)
+}
+
+function close() {
+  emit('update:modelValue', false)
+}
+</script>
+
+<template>
+  <Teleport to="body">
+    <Transition name="fade">
+      <div v-if="modelValue" class="overlay" @click.self="close"></div>
+    </Transition>
+    <Transition name="drawer-r">
+      <aside v-if="modelValue" class="ig-drawer">
+        <div class="ig-drawer-head">
+          <span>📋 忽略记录</span>
+          <div class="ig-drawer-close" @click="close">✕</div>
+        </div>
+
+        <div class="ig-body">
+          <div class="page-sub">共 <b>{{ ignoredList.length }}</b> 个已忽略包 · 移出后自动恢复状态判断</div>
+
+          <div v-if="state.loading" class="loading-tip">⏳ 加载中…</div>
+          <div v-else class="vtable">
+            <table>
+              <thead>
+                <tr>
+                  <th style="width: 48px">#</th>
+                  <th>包名</th>
+                  <th style="width: 90px">版本数</th>
+                  <th style="width: 110px">占用空间</th>
+                  <th style="width: 140px">忽略时间</th>
+                  <th style="width: 96px">操作</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr v-for="(p, i) in ignoredList" :key="p.name">
+                  <td><span class="idx">{{ i + 1 }}</span></td>
+                  <td><span class="pkg-cell">{{ p.name }}</span></td>
+                  <td><span class="num-cell">{{ p.versions }}</span></td>
+                  <td><span class="num-cell">{{ fmtSize(p.size) }}</span></td>
+                  <td><span class="ign-time">{{ p.ignoredAt || '—' }}</span></td>
+                  <td>
+                    <button class="btn unignore op-btn-cell" @click="doUnignore(p)">↩️ 移出忽略</button>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+            <div v-if="!ignoredList.length" class="empty-tip">🎉 还没有忽略任何包</div>
+          </div>
+        </div>
+      </aside>
+    </Transition>
+  </Teleport>
+</template>
+
+<style scoped>
+.overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, .45);
+  z-index: 120;
+}
+.ig-drawer {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: min(640px, 92vw);
+  z-index: 121;
+  display: flex;
+  flex-direction: column;
+  background: var(--card);
+  box-shadow: -22px 0 50px -16px rgba(0, 0, 0, .55);
+}
+.ig-drawer-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 18px 22px;
+  border-bottom: 1px solid var(--line);
+  font-size: 16px;
+  font-weight: 700;
+}
+.ig-drawer-close {
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  display: grid;
+  place-items: center;
+  background: var(--card);
+  border: 1px solid var(--line);
+  color: var(--ink-dim);
+  font-size: 12px;
+  cursor: pointer;
+}
+.ig-drawer-close:hover { background: var(--red-soft); color: var(--red); }
+.ig-body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 22px 24px 28px;
+}
+.page-sub {
+  font-size: 12.5px;
+  color: var(--ink-dim);
+  margin-bottom: 16px;
+}
+
+.pkg-cell { font-weight: 600; word-break: break-all; }
+.idx { font-family: var(--num); font-size: 12.5px; color: var(--ink-faint); }
+.num-cell { font-family: var(--num); font-size: 13px; color: var(--ink); }
+.ign-time { font-family: var(--num); font-size: 12.5px; color: var(--ink-dim); }
+.empty-tip { padding: 60px 0; text-align: center; color: var(--ink-faint); font-size: 13px; }
+.loading-tip { text-align: center; padding: 40px 0; color: var(--ink-faint); font-size: 13px; }
+
+.fade-enter-active, .fade-leave-active { transition: opacity .25s; }
+.fade-enter-from, .fade-leave-to { opacity: 0; }
+.drawer-r-enter-active { transition: transform .35s cubic-bezier(.2, .8, .25, 1); }
+.drawer-r-leave-active { transition: transform .25s ease-in; }
+.drawer-r-enter-from, .drawer-r-leave-to { transform: translateX(100%); }
+
+@media (max-width: 767px) {
+  .ig-drawer {
+    top: auto;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    width: 100%;
+    height: 85vh;
+    border-radius: 20px 20px 0 0;
+  }
+  .ig-body { padding: 18px 16px 22px; }
+  .vtable { overflow-x: auto; }
+  .vtable table { min-width: 560px; }
+}
+</style>

frontend/src/components/MobileTabbar.vue

@@ -10,11 +10,10 @@ const route = useRoute()
 const router = useRouter()
 
 const tabs = [
-  { path: '/', label: '缓存概览', emo: '🏠' },
-  { path: '/search', label: '我的缓存', emo: '🔍' },
-  { path: '/logs', label: '操作日志', emo: '🕒' },
+  { path: '/', label: '首页', emo: '🏠' },
+  { path: '/search', label: '软件包', emo: '🔍' },
   { path: '/toplist', label: 'Top榜', emo: '🏆' },
-  { path: '/ignored', label: '忽略', emo: '📋' },
+  { path: '/logs', label: '操作日志', emo: '🕒' },
 ]
 
 function go(path) {

frontend/src/components/SettingDrawer.vue

@@ -7,7 +7,7 @@ import api from '../api'
 import { storage } from '../utils/storage'
 
 const props = defineProps({ modelValue: Boolean })
-const emit = defineEmits(['update:modelValue', 'rescan', 'open-thresholds'])
+const emit = defineEmits(['update:modelValue', 'rescan', 'open-thresholds', 'open-ignored'])
 const router = useRouter()
 const { theme, toggle, auto, setAuto, todayInfo } = useTheme()
 const { state } = useStore()
@@ -36,6 +36,11 @@ function goThresholds() {
   emit('open-thresholds')
 }
 
+function goIgnored() {
+  close()
+  emit('open-ignored')
+}
+
 async function logout() {
   await api.logout() // 先销毁后端会话并清本地 token，再跳登录页
   close()
@@ -81,6 +86,10 @@ async function logout() {
             <span style="font-family: var(--sans)">⚙️ 预警设置</span>
             <span>阈值 ▸</span>
           </div>
+          <div class="m-drawer-item" @click="goIgnored">
+            <span style="font-family: var(--sans)">📋 忽略列表</span>
+            <span>已忽略包 ▸</span>
+          </div>
         </div>
         <div class="m-drawer-foot">
           <button class="m-logout" @click="logout">退出登录</button>

frontend/src/router/index.js

@@ -3,7 +3,6 @@ import { createRouter, createWebHistory } from 'vue-router'
 import LoginView from '../views/LoginView.vue'
 import OverviewView from '../views/OverviewView.vue'
 import SearchView from '../views/SearchView.vue'
-import IgnoredView from '../views/IgnoredView.vue'
 import LogsView from '../views/LogsView.vue'
 import TopListView from '../views/TopListView.vue'
 import NotificationsView from '../views/NotificationsView.vue'
@@ -15,7 +14,6 @@ const routes = [
   { path: '/login', name: 'login', component: LoginView, meta: { public: true } },
   { path: '/', name: 'overview', component: OverviewView },
   { path: '/search', name: 'search', component: SearchView },
-  { path: '/ignored', name: 'ignored', component: IgnoredView },
   { path: '/logs', name: 'logs', component: LogsView },
   { path: '/toplist', name: 'toplist', component: TopListView },
   { path: '/notifications', name: 'notifications', component: NotificationsView },

frontend/src/views/IgnoredView.vue

@@ -1,105 +0,0 @@
-<script setup>
-import { ref, onMounted, onBeforeUnmount, nextTick, computed } from 'vue'
-import { useStore, fmtSize } from '../store'
-
-const { state, unignorePkg, refreshPackages } = useStore()
-
-const ignoredList = computed(() => state.packages.filter(p => p.status === 'ignored'))
-
-const vtableEl = ref(null) // 表格容器：高度基于可视高度动态计算
-const tableHeight = ref(300) // 表格可视高度（min 300px）
-
-// 表格高度：填满剩余可视高度（min 300px），页面本身不出现垂直滚动条
-function calcTableHeight() {
-  const el = vtableEl.value
-  if (!el) return
-  const reserve = window.innerWidth < 768 ? 104 : 48 // 页面底部内边距（移动 96 / 桌面 40）+ 容差
-  tableHeight.value = Math.max(300, Math.floor(window.innerHeight - el.getBoundingClientRect().top - reserve))
-}
-let resizeTimer = null
-function onWinResize() {
-  clearTimeout(resizeTimer)
-  resizeTimer = setTimeout(calcTableHeight, 100)
-}
-
-onMounted(() => {
-  window.addEventListener('resize', onWinResize)
-  calcTableHeight() // 首帧渲染前先算好高度，避免 300px 占位期出现内部滚动条闪烁
-  requestAnimationFrame(calcTableHeight) // 首帧后再校准一次
-  nextTick(calcTableHeight)
-  setTimeout(calcTableHeight, 400) // 路由过渡动画结束后重算，避免页面叠加期间 top 计算偏差
-})
-onBeforeUnmount(() => {
-  window.removeEventListener('resize', onWinResize)
-  clearTimeout(resizeTimer)
-})
-
-async function doUnignore(pkg) {
-  try {
-    await ElMessageBox.confirm(`确定将 ${pkg.name} 移出忽略吗？移出后若仍超阈值将恢复预警。`, '移出忽略', {
-      confirmButtonText: '移出',
-      cancelButtonText: '取消',
-      type: 'warning',
-    })
-  } catch {
-    return
-  }
-  await unignorePkg(pkg.name, pkg.versions)
-  ElMessage.success(`已移出忽略：${pkg.name}`)
-}
-</script>
-
-<template>
-  <div class="page-inner">
-    <div class="page-title"><span class="emo">📋</span>忽略记录</div>
-    <div class="page-sub">共 <b>{{ ignoredList.length }}</b> 个已忽略包 · 移出后自动恢复状态判断</div>
-
-    <div v-if="state.loading" class="loading-tip">⏳ 加载中…</div>
-    <div v-else ref="vtableEl" class="vtable" :style="{ height: tableHeight + 'px' }">
-      <table>
-        <thead>
-          <tr>
-            <th style="width: 60px">#</th>
-            <th>包名</th>
-            <th style="width: 140px">版本数</th>
-            <th style="width: 150px">占用空间</th>
-            <th style="width: 170px">忽略时间</th>
-            <th style="width: 130px">操作</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr v-for="(p, i) in ignoredList" :key="p.name">
-            <td><span class="idx">{{ i + 1 }}</span></td>
-            <td><span class="pkg-cell">{{ p.name }}</span></td>
-            <td><span class="num-cell">{{ p.versions }}</span></td>
-            <td><span class="num-cell">{{ fmtSize(p.size) }}</span></td>
-            <td><span class="ign-time">{{ p.ignoredAt || '—' }}</span></td>
-            <td>
-              <button class="btn unignore op-btn-cell" @click="doUnignore(p)">↩️ 移出忽略</button>
-            </td>
-          </tr>
-        </tbody>
-      </table>
-      <div v-if="!ignoredList.length" class="empty-tip">
-        🎉 还没有忽略任何包
-      </div>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.pkg-cell { font-weight: 600; word-break: break-all; }
-.idx { font-family: var(--num); font-size: 12.5px; color: var(--ink-faint); }
-.ign-time { font-family: var(--num); font-size: 12.5px; color: var(--ink-dim); }
-.empty-tip { padding: 60px 0; text-align: center; color: var(--ink-faint); font-size: 13px; }
-.loading-tip { text-align: center; padding: 40px 0; color: var(--ink-faint); font-size: 13px; }
-
-/* 表格区域：高度由 JS 动态计算，内容超限时内部滚动，表头吸顶 */
-.vtable { overflow-y: auto; }
-.vtable thead th { position: sticky; top: 0; z-index: 2; }
-
-@media (max-width: 767px) {
-  .vtable { overflow-x: auto; }
-  .vtable table { min-width: 600px; }
-}
-</style>