From 54cdef691a42a31d4b703cf95e6e8e3d7709031d Mon Sep 17 00:00:00 2001
From: MoeSnowyFox <SnowyFox_@outlook.com>
Date: Tue, 9 Sep 2025 20:20:03 +0800
Subject: [PATCH] =?UTF-8?q?:lipstick:=20=E6=9B=B4=E6=94=B9=E4=BE=A7?=
 =?UTF-8?q?=E8=BE=B9=E6=A0=8Fui?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/AppLayout.vue | 95 ++++++++-------------------
 1 file changed, 29 insertions(+), 66 deletions(-)

diff --git a/frontend/src/components/AppLayout.vue b/frontend/src/components/AppLayout.vue
index d82783a..0462abb 100644
--- a/frontend/src/components/AppLayout.vue
+++ b/frontend/src/components/AppLayout.vue
@@ -1,9 +1,9 @@
 <template>
-  <a-layout style="height: 100vh; overflow: hidden">
+  <a-layout style="flex: 1; min-height: 0; overflow: hidden">
     <a-layout-sider
-      :width="siderWidth"
+      :width="SIDER_WIDTH"
       :theme="isDark ? 'dark' : 'light'"
-      :style="{ height: 'calc(100vh - 32px)', position: 'fixed', left: '0', top: '32px', zIndex: 100, background: 'var(--app-sider-bg)', borderRight: '1px solid var(--app-sider-border-color)' }"
+      :style="{ background: 'var(--ant-color-bg-elevated)', borderRight: '1px solid var(--ant-color-border)' }"
     >
       <div class="sider-content">
         <a-menu
@@ -24,7 +24,7 @@
       </div>
     </a-layout-sider>
 
-    <a-layout :style="{ marginLeft: siderWidth + 'px', height: 'calc(100vh - 32px)', transition: 'margin-left .2s' }">
+    <a-layout style="flex: 1; min-width: 0">
       <a-layout-content class="content-area">
         <router-view />
       </a-layout-content>
@@ -42,55 +42,30 @@ import {
   HistoryOutlined,
   SettingOutlined,
 } from '@ant-design/icons-vue'
-import { computed, h, ref, onMounted, onBeforeUnmount } from 'vue'
+import { computed, h } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 import { useTheme } from '../composables/useTheme.ts'
 import type { MenuProps } from 'ant-design-vue'
 
-// 动态侧栏宽度：窗口宽度的30%，限制 120 - 200 像素
-const MIN_SIDER_WIDTH = 120
-const MAX_SIDER_WIDTH = 220
-const WIDTH_PERCENT = 0.2
-const siderWidth = ref<number>(150)
-
-const calcSiderWidth = () => {
-  const w = window.innerWidth
-  return Math.min(MAX_SIDER_WIDTH, Math.max(MIN_SIDER_WIDTH, Math.round(w * WIDTH_PERCENT)))
-}
-
-const handleResize = () => {
-  siderWidth.value = calcSiderWidth()
-}
-
-onMounted(() => {
-  siderWidth.value = calcSiderWidth()
-  window.addEventListener('resize', handleResize)
-})
-
-onBeforeUnmount(() => {
-  window.removeEventListener('resize', handleResize)
-})
+const SIDER_WIDTH = 140
 
 const router = useRouter()
 const route = useRoute()
 const { isDark } = useTheme()
 
-// 工具：生成菜单项（图标与文字放入同一容器）
-const makeMenuItem = (key: string, text: string, IconComp: any) => ({
-  key,
-  label: h('div', { class: 'menu-item-center' }, [ h(IconComp), h('span', text) ])
-})
+// 工具：生成菜单项
+const icon = (Comp: any) => () => h(Comp)
 
 const mainMenuItems = [
-  makeMenuItem('/home', '主页', HomeOutlined),
-  makeMenuItem('/scripts', '脚本管理', FileTextOutlined),
-  makeMenuItem('/plans', '计划管理', CalendarOutlined),
-  makeMenuItem('/queue', '调度队列', UnorderedListOutlined),
-  makeMenuItem('/scheduler', '调度中心', ControlOutlined),
-  makeMenuItem('/history', '历史记录', HistoryOutlined),
+  { key: '/home', label: '主页', icon: icon(HomeOutlined) },
+  { key: '/scripts', label: '脚本管理', icon: icon(FileTextOutlined) },
+  { key: '/plans', label: '计划管理', icon: icon(CalendarOutlined) },
+  { key: '/queue', label: '调度队列', icon: icon(UnorderedListOutlined) },
+  { key: '/scheduler', label: '调度中心', icon: icon(ControlOutlined) },
+  { key: '/history', label: '历史记录', icon: icon(HistoryOutlined) },
 ]
 const bottomMenuItems = [
-  makeMenuItem('/settings', '设置', SettingOutlined),
+  { key: '/settings', label: '设置', icon: icon(SettingOutlined) },
 ]
 
 const allItems = [...mainMenuItems, ...bottomMenuItems]
@@ -113,57 +88,45 @@ const onMenuClick: MenuProps['onClick'] = info => {
 .sider-content :deep(.ant-menu) { border-inline-end: none !important; background: transparent !important; }
 /* 菜单项外框居中（左右留空），内容左对齐 */
 .sider-content :deep(.ant-menu .ant-menu-item) {
-  color: var(--app-menu-text-color, #333);
+  color: var(--ant-color-text);
   margin: 2px auto;               /* 水平居中 */
   width: calc(100% - 16px);       /* 两侧各留 8px 空隙 */
   border-radius: 6px;
-  padding: 0 6px !important;     /* 组合居中后可稍微缩减左右内边距 */
+  padding: 0 10px !important;     /* 左右内边距 */
   line-height: 36px;
   height: 36px;
-  font-size: 16px; /* 提高字体大小 */
   display: flex;
   align-items: center;
-  justify-content: center;       /* 改为居中 */
-  text-align: center;            /* 文本居中 */
+  justify-content: flex-start;    /* 左对齐图标与文字 */
   gap: 6px;
   transition: background .16s ease, color .16s ease;
+  text-align: left;
 }
-/* 图标样式 */
 .sider-content :deep(.ant-menu .ant-menu-item .anticon) {
-  color: var(--app-menu-icon-color, #666);
-  font-size: 16px;
+  color: var(--ant-color-text-secondary);
+  font-size: 18px;
   line-height: 1;
   transition: color .16s ease;
   margin-right: 0;
 }
 /* Hover */
 .sider-content :deep(.ant-menu .ant-menu-item:hover) {
-  background: var(--app-menu-item-hover-bg, rgba(0,0,0,0.04));
-  color: var(--app-menu-item-hover-text-color, #1677ff);
+  background: var(--ant-color-primary-bg);
+  color: var(--ant-color-text);
 }
-.sider-content :deep(.ant-menu .ant-menu-item:hover .anticon) { color: var(--app-menu-item-hover-text-color, #1677ff); }
+.sider-content :deep(.ant-menu .ant-menu-item:hover .anticon) { color: var(--ant-color-text); }
 /* Selected */
 .sider-content :deep(.ant-menu .ant-menu-item-selected) {
-  background: var(--app-menu-item-selected-bg, rgba(22,119,255,0.15));
-  color: var(--app-menu-text-color, #1677ff) !important;
+  background: var(--ant-color-primary-bg);
+  color: var(--ant-color-text) !important;
   font-weight: 500;
 }
-.sider-content :deep(.ant-menu .ant-menu-item-selected .anticon) { color: var(--app-menu-icon-color, #1677ff); }
+.sider-content :deep(.ant-menu .ant-menu-item-selected .anticon) { color: var(--ant-color-text-secondary); }
 .sider-content :deep(.ant-menu-light .ant-menu-item::after),
 .sider-content :deep(.ant-menu-dark .ant-menu-item::after) { display: none; }
 .bottom-menu { margin-top:auto; }
-.content-area { height:100%; overflow:auto; scrollbar-width:none; -ms-overflow-style:none; }
+.content-area { min-height:0; overflow:auto; scrollbar-width:none; -ms-overflow-style:none; padding:16px;}
 .content-area::-webkit-scrollbar { display:none; }
-.sider-content :deep(.menu-item-center){
-  display:flex;
-  align-items:center;
-  justify-content:center;
-  width:100%;
-  gap:6px;
-}
-.sider-content :deep(.menu-item-center > .anticon){
-  font-size:18px;
-}
 </style>
 
-<!-- 菜单项图标与文字已居中 -->
+<!-- 使用标准 Sider 布局，去除 fixed 与 marginLeft，保持菜单样式与滚动行为 -->
\ No newline at end of file