💄 更改侧边栏ui, 拉大字体, 增加响应式设计

frontend/src/components/AppLayout.vue

@@ -1,7 +1,7 @@
 <template>
   <a-layout style="height: 100vh; overflow: hidden">
     <a-layout-sider
-      :width="SIDER_WIDTH"
+      :width="siderWidth"
       :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)' }"
     >
@@ -24,7 +24,7 @@
       </div>
     </a-layout-sider>
 
-    <a-layout :style="{ marginLeft: SIDER_WIDTH + 'px', height: 'calc(100vh - 32px)', transition: 'margin-left .2s' }">
+    <a-layout :style="{ marginLeft: siderWidth + 'px', height: 'calc(100vh - 32px)', transition: 'margin-left .2s' }">
       <a-layout-content class="content-area">
         <router-view />
       </a-layout-content>
@@ -42,30 +42,55 @@ import {
   HistoryOutlined,
   SettingOutlined,
 } from '@ant-design/icons-vue'
-import { computed, h } from 'vue'
+import { computed, h, ref, onMounted, onBeforeUnmount } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 import { useTheme } from '../composables/useTheme.ts'
 import type { MenuProps } from 'ant-design-vue'
 
-const SIDER_WIDTH = 140
+// 动态侧栏宽度：窗口宽度的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 router = useRouter()
 const route = useRoute()
 const { isDark } = useTheme()
 
-// 工具：生成菜单项
-const icon = (Comp: any) => () => h(Comp)
+// 工具：生成菜单项（图标与文字放入同一容器）
+const makeMenuItem = (key: string, text: string, IconComp: any) => ({
+  key,
+  label: h('div', { class: 'menu-item-center' }, [ h(IconComp), h('span', text) ])
+})
 
 const mainMenuItems = [
-  { 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) },
+  makeMenuItem('/home', '主页', HomeOutlined),
+  makeMenuItem('/scripts', '脚本管理', FileTextOutlined),
+  makeMenuItem('/plans', '计划管理', CalendarOutlined),
+  makeMenuItem('/queue', '调度队列', UnorderedListOutlined),
+  makeMenuItem('/scheduler', '调度中心', ControlOutlined),
+  makeMenuItem('/history', '历史记录', HistoryOutlined),
 ]
 const bottomMenuItems = [
-  { key: '/settings', label: '设置', icon: icon(SettingOutlined) },
+  makeMenuItem('/settings', '设置', SettingOutlined),
 ]
 
 const allItems = [...mainMenuItems, ...bottomMenuItems]
@@ -88,22 +113,24 @@ 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);
+  color: var(--app-menu-text-color, #333);
   margin: 2px auto;               /* 水平居中 */
   width: calc(100% - 16px);       /* 两侧各留 8px 空隙 */
   border-radius: 6px;
-  padding: 0 10px !important;     /* 左右内边距 */
+  padding: 0 6px !important;     /* 组合居中后可稍微缩减左右内边距 */
   line-height: 36px;
   height: 36px;
+  font-size: 16px; /* 提高字体大小 */
   display: flex;
   align-items: center;
-  justify-content: flex-start;    /* 左对齐图标与文字 */
+  justify-content: center;       /* 改为居中 */
+  text-align: center;            /* 文本居中 */
   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);
+  color: var(--app-menu-icon-color, #666);
   font-size: 16px;
   line-height: 1;
   transition: color .16s ease;
@@ -111,22 +138,32 @@ const onMenuClick: MenuProps['onClick'] = info => {
 }
 /* Hover */
 .sider-content :deep(.ant-menu .ant-menu-item:hover) {
-  background: var(--app-menu-item-hover-bg, var(--app-menu-item-hover-bg-hex));
-  color: var(--app-menu-item-hover-text-color);
+  background: var(--app-menu-item-hover-bg, rgba(0,0,0,0.04));
+  color: var(--app-menu-item-hover-text-color, #1677ff);
 }
-.sider-content :deep(.ant-menu .ant-menu-item:hover .anticon) { color: var(--app-menu-item-hover-text-color); }
+.sider-content :deep(.ant-menu .ant-menu-item:hover .anticon) { color: var(--app-menu-item-hover-text-color, #1677ff); }
 /* Selected */
 .sider-content :deep(.ant-menu .ant-menu-item-selected) {
-  background: var(--app-menu-item-selected-bg, var(--app-menu-item-selected-bg-hex));
-  color: var(--app-menu-text-color) !important;
+  background: var(--app-menu-item-selected-bg, rgba(22,119,255,0.15));
+  color: var(--app-menu-text-color, #1677ff) !important;
   font-weight: 500;
 }
-.sider-content :deep(.ant-menu .ant-menu-item-selected .anticon) { color: var(--app-menu-icon-color); }
+.sider-content :deep(.ant-menu .ant-menu-item-selected .anticon) { color: var(--app-menu-icon-color, #1677ff); }
 .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::-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>
 
-<!-- 调整：外框（菜单项背景块）水平居中，文字与图标左对齐 -->
+<!-- 菜单项图标与文字已居中 -->