🎨 重写侧边栏

frontend/src/components/AppLayout.vue

@@ -1,80 +1,63 @@
 <template>
-  <a-layout style="height: 100vh; overflow: hidden">
+  <a-layout style="height: 100vh; overflow: hidden" class="app-layout-collapsed">
     <a-layout-sider
       v-model:collapsed="collapsed"
-      :trigger="null"
       collapsible
-      :theme="isDark ? 'dark' : 'light'"
-      style="height: 100vh; position: fixed; left: 0; top: 0; z-index: 100"
+      :trigger="null"
       :width="180"
       :collapsed-width="60"
+      :theme="isDark ? 'dark' : 'light'"
+      style="height: 100vh; position: fixed; left: 0; top: 0; z-index: 100"
     >
       <div class="sider-content">
-        <!-- Logo区域 - 点击切换展开/折叠 -->
-        <div class="logo" @click="collapsed = !collapsed">
+        <!-- Logo -->
+        <div class="logo" @click="toggleCollapse">
           <img src="/src/assets/AUTO_MAA.ico" alt="AUTO_MAA" class="logo-image" />
-          <div v-if="!collapsed" class="logo-text">AUTO_MAA</div>
+          <span class="logo-text" :class="{ 'text-hidden': collapsed }">AUTO_MAA</span>
         </div>
 
-        <!-- 主菜单 -->
-        <div class="main-menu">
+        <!-- 主菜单容器 -->
+        <div class="main-menu-container">
           <a-menu
-            v-model:selectedKeys="selectedKeys"
-            :theme="isDark ? 'dark' : 'light'"
             mode="inline"
             :inline-collapsed="collapsed"
+            :theme="isDark ? 'dark' : 'light'"
+            class="main-menu"
+            v-model:selectedKeys="selectedKeys"
           >
-            <a-menu-item key="/home" @click="handleMenuClick('/home')">
-              <home-outlined />
-              <span>主页</span>
-            </a-menu-item>
-            <a-menu-item key="/scripts" @click="handleMenuClick('/scripts')">
-              <file-text-outlined />
-              <span>脚本管理</span>
-            </a-menu-item>
-            <a-menu-item key="/plans" @click="handleMenuClick('/plans')">
-              <calendar-outlined />
-              <span>计划管理</span>
-            </a-menu-item>
-            <a-menu-item key="/queue" @click="handleMenuClick('/queue')">
-              <unordered-list-outlined />
-              <span>调度队列</span>
-            </a-menu-item>
-            <a-menu-item key="/scheduler" @click="handleMenuClick('/scheduler')">
-              <control-outlined />
-              <span>调度中心</span>
-            </a-menu-item>
-            <a-menu-item key="/history" @click="handleMenuClick('/history')">
-              <history-outlined />
-              <span>历史记录</span>
-            </a-menu-item>
+            <template v-for="item in mainMenuItems" :key="item.path">
+              <a-menu-item @click="goTo(item.path)" :data-title="item.label">
+                <template #icon>
+                  <component :is="item.icon" />
+                </template>
+                <span v-if="!collapsed" class="menu-text">{{ item.label }}</span>
+              </a-menu-item>
+            </template>
           </a-menu>
         </div>
 
-        <!-- 底部设置菜单 -->
-        <div class="bottom-menu">
-          <a-menu
-            v-model:selectedKeys="selectedKeys"
-            :theme="isDark ? 'dark' : 'light'"
-            mode="inline"
-            :inline-collapsed="collapsed"
-          >
-            <a-menu-item key="/settings" @click="handleMenuClick('/settings')">
-              <setting-outlined />
-              <span>设置</span>
+        <!-- 底部菜单（带3px底部内边距） -->
+        <a-menu
+          mode="inline"
+          :inline-collapsed="collapsed"
+          :theme="isDark ? 'dark' : 'light'"
+          class="bottom-menu"
+          v-model:selectedKeys="selectedKeys"
+        >
+          <template v-for="item in bottomMenuItems" :key="item.path">
+            <a-menu-item @click="goTo(item.path)" :data-title="item.label">
+              <template #icon>
+                <component :is="item.icon" />
+              </template>
+              <span v-if="!collapsed" class="menu-text">{{ item.label }}</span>
             </a-menu-item>
-          </a-menu>
-        </div>
+          </template>
+        </a-menu>
       </div>
     </a-layout-sider>
 
-    <a-layout
-      :style="{
-        marginLeft: collapsed ? '60px' : '180px',
-        height: '100vh',
-        transition: 'margin-left 0.2s',
-      }"
-    >
+    <!-- 主内容区 -->
+    <a-layout :style="{ marginLeft: collapsed ? '60px' : '180px', transition: 'margin-left 0.2s', height: '100vh' }">
       <a-layout-content
         class="content-area"
         :style="{
@@ -109,15 +92,35 @@ const route = useRoute()
 const { isDark } = useTheme()
 
 const collapsed = ref<boolean>(false)
-const selectedKeys = ref<string[]>([route.path])
 
-// 监听路由变化更新选中状态
-const currentRoute = computed(() => route.path)
-selectedKeys.value = [currentRoute.value]
+// 菜单数据
+const mainMenuItems = [
+  { path: '/home', label: '主页', icon: HomeOutlined },
+  { path: '/scripts', label: '脚本管理', icon: FileTextOutlined },
+  { path: '/plans', label: '计划管理', icon: CalendarOutlined },
+  { path: '/queue', label: '调度队列', icon: UnorderedListOutlined },
+  { path: '/scheduler', label: '调度中心', icon: ControlOutlined },
+  { path: '/history', label: '历史记录', icon: HistoryOutlined },
+]
 
-const handleMenuClick = (path: string) => {
+const bottomMenuItems = [
+  { path: '/settings', label: '设置', icon: SettingOutlined },
+]
+
+// 自动同步选中项
+const selectedKeys = computed(() => {
+  const path = route.path
+  const allItems = [...mainMenuItems, ...bottomMenuItems]
+  const matched = allItems.find(item => path.startsWith(item.path))
+  return [matched?.path || '/home']
+})
+
+const goTo = (path: string) => {
   router.push(path)
-  selectedKeys.value = [path]
+}
+
+const toggleCollapse = () => {
+  collapsed.value = !collapsed.value
 }
 </script>
 
@@ -126,141 +129,154 @@ const handleMenuClick = (path: string) => {
   height: 100%;
   display: flex;
   flex-direction: column;
-  position: relative;
+  padding-bottom: 4px; /* 关键：添加3px底部内边距 */
 }
 
+/* Logo */
 .logo {
-  height: 64px;
+  height: 42px;
   display: flex;
   align-items: center;
-  justify-content: center;
-  gap: 12px;
-  padding: 16px;
-  margin: 16px;
+  padding: 0 12px;
+  margin: 4px;
   border-radius: 6px;
   cursor: pointer;
-  transition: background-color 0.2s;
 }
-
 .logo:hover {
-  background-color: rgba(255, 255, 255, 0.1);
+  background-color: rgba(255, 255, 255, 0.5);
+}
+:deep(.ant-layout-sider-light) .logo:hover {
+  background-color: rgba(0, 0, 0, 0.04);
 }
 
 .logo-image {
   width: 32px;
   height: 32px;
-  object-fit: contain;
 }
 
 .logo-text {
+  margin-left: 12px;
   font-size: 16px;
   font-weight: bold;
-  letter-spacing: 1px;
+  white-space: nowrap;
+  opacity: 1;
+  transition: opacity 0.2s ease;
+}
+.logo-text.text-hidden {
+  opacity: 0;
 }
 
-/* 浅色模式下的 Logo 悬停效果 */
-:deep(.ant-layout-sider-light) .logo:hover {
-  background-color: rgba(0, 0, 0, 0.04);
-}
-
-.main-menu {
+/* 主菜单容器 */
+.main-menu-container {
   flex: 1;
-  overflow-y: auto;
-  padding-bottom: 60px;
-  /* 为底部设置菜单留出空间 */
+  overflow: auto;
+  /* 修复滚动条显示问题 */
+  scrollbar-width: thin;
+  scrollbar-color: rgba(0,0,0,0.2) transparent;
+}
+.main-menu-container::-webkit-scrollbar {
+  width: 6px;
+}
+.main-menu-container::-webkit-scrollbar-track {
+  background: transparent;
+}
+.main-menu-container::-webkit-scrollbar-thumb {
+  background: rgba(0,0,0,0.2);
+  border-radius: 4px;
 }
 
+/* 底部菜单 */
 .bottom-menu {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  background: inherit;
+  margin-top: auto;
+  border-top: 1px solid rgba(255, 255, 255, 0.08);
+}
+:deep(.ant-layout-sider-light .bottom-menu) {
+  border-top: 1px solid rgba(0, 0, 0, 0.04);
 }
 
-/* 深色模式下的底部菜单边框 */
-:deep(.ant-layout-sider-dark) .bottom-menu {
-  /*
-  border-top: 1px solid rgba(255, 255, 255, 0.1);
-   */
+/* 菜单项文字 */
+.menu-text {
+  margin-left: 36px;
+  white-space: nowrap;
+  opacity: 1;
+  transition: opacity 0.2s ease;
 }
 
-/* 浅色模式下的底部菜单边框 */
-:deep(.ant-layout-sider-light) .bottom-menu {
-  /*
-  border-top: 1px solid #d9d9d9;
-
-   */
+/* 主题颜色 */
+:deep(.ant-layout-sider-dark) .logo-text,
+:deep(.ant-layout-sider-dark) .menu-text {
+  color: #fff;
 }
-
-/* 深色模式样式 */
-:deep(.ant-layout-sider-dark) .logo-text {
-  color: white;
-}
-
-/* 浅色模式样式 */
-:deep(.ant-layout-sider-light) .logo-text {
+:deep(.ant-layout-sider-light) .logo-text,
+:deep(.ant-layout-sider-light) .menu-text {
   color: rgba(0, 0, 0, 0.88);
 }
 
-/* 浅色模式下的侧边栏背景色 */
-:deep(.ant-layout-sider-light) {
-  background: #f5f5f5 !important;
-}
-
-/* 浅色模式下的菜单背景色 */
-:deep(.ant-layout-sider-light .ant-menu-light) {
-  background: #f5f5f5 !important;
-}
-
-:deep(.ant-layout-sider) {
+/* 菜单项统一样式 */
+:deep(.ant-menu-item),
+:deep(.ant-menu-item-selected) {
   position: relative;
+  height: 40px;
+  line-height: 34px;
+  margin: 0 6px;
+  border-radius: 6px;
+  padding: 0 !important;
 }
 
-/* 移除菜单右边框 */
-:deep(.ant-menu) {
-  border-right: none !important;
-  border-inline-end: none !important;
+/* 图标绝对定位 */
+:deep(.ant-menu-item .ant-menu-item-icon) {
+  position: absolute;
+  left: 16px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 20px;
+  height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 18px;
+  pointer-events: none;
+  z-index: 2;
 }
 
-/* 更强制地移除菜单右边框 */
-:deep(.ant-menu-light.ant-menu-root.ant-menu-inline),
-:deep(.ant-menu-light.ant-menu-root.ant-menu-vertical),
-:deep(.ant-menu-dark.ant-menu-root.ant-menu-inline),
-:deep(.ant-menu-dark.ant-menu-root.ant-menu-vertical) {
-  border-inline-end: none !important;
-  border-right: none !important;
-}
-
-/* 确保折叠时图标显示 */
-:deep(.ant-menu-inline-collapsed .ant-menu-item) {
-  padding: 0 calc(50% - 14px);
-}
-
-:deep(.ant-menu-inline-collapsed .ant-menu-item .anticon) {
-  font-size: 16px;
-  line-height: 40px;
-}
-
-/* 隐藏内容区域滚动条 */
+/* 隐藏内容区滚动条 */
 .content-area {
-  /* Webkit 浏览器 (Chrome, Safari, Edge) */
   scrollbar-width: none;
-  /* Firefox */
   -ms-overflow-style: none;
 }
-
 .content-area::-webkit-scrollbar {
   display: none;
 }
-
-/* 隐藏侧边栏主菜单滚动条 */
-.main-menu {
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-}
-
-.main-menu::-webkit-scrollbar {
-  display: none;
-}
 </style>
+
+<!-- 全局样式 -->
+<style>
+/* 收缩状态下，通过 data-title 显示 Tooltip */
+.app-layout-collapsed .ant-menu-inline-collapsed .ant-menu-item:hover::before {
+  content: attr(data-title);
+  position: absolute;
+  left: 60px;
+  top: 50%;
+  transform: translateY(-50%);
+  background: #1890ff;
+  color: #fff;
+  padding: 2px 8px;
+  border-radius: 4px;
+  white-space: nowrap;
+  font-size: 12px;
+  z-index: 1000;
+  opacity: 1;
+  pointer-events: none;
+}
+
+/* 修复底部菜单在折叠状态下的tooltip位置 */
+.app-layout-collapsed .ant-menu-inline-collapsed .bottom-menu .ant-menu-item:hover::before {
+  left: 60px;
+  transform: translateY(-50%);
+}
+
+/* 确保底部菜单在收缩状态下也有3px间距 */
+.app-layout-collapsed .ant-menu-inline-collapsed .bottom-menu {
+  padding-bottom: 6px;
+}
+</style>