From 8916cbd097c24b738f7b19ca0099815d9c39ff0c Mon Sep 17 00:00:00 2001
From: AoXuan <aoxuan233@gmail.com>
Date: Sun, 3 Aug 2025 01:02:14 +0800
Subject: [PATCH] =?UTF-8?q?feat(layout):=20=E4=BC=98=E5=8C=96=E4=BE=A7?=
 =?UTF-8?q?=E8=BE=B9=E6=A0=8F=E5=B8=83=E5=B1=80=E5=92=8C=E5=86=85=E5=AE=B9?=
 =?UTF-8?q?=E5=8C=BA=E5=9F=9F=E6=BB=9A=E5=8A=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

-固定侧边栏高度为100vh，设置为固定定位
- 优化内容区域样式，设置过渡效果和滚动条- 隐藏菜单和内容区域的滚动条
- 调整底部菜单样式，注释掉部分代码
---
 frontend/README.md                    | 61 +++++++++++++++++++
 frontend/src/components/AppLayout.vue | 86 ++++++++++++++++++++++++---
 2 files changed, 138 insertions(+), 9 deletions(-)
 create mode 100644 frontend/README.md

diff --git a/frontend/README.md b/frontend/README.md
new file mode 100644
index 0000000..0cf5138
--- /dev/null
+++ b/frontend/README.md
@@ -0,0 +1,61 @@
+# AUTO MAA Frontend
+
+基于 Vue 3 + TypeScript + Ant Design Vue + Electron 的桌面应用程序。
+
+## 功能特性
+
+- 🎨 使用 Ant Design Vue 组件库
+- 🌙 支持深色模式（跟随系统/深色/浅色）
+- 🎨 支持多种主题色切换
+- 📱 响应式侧边栏布局
+- 🔧 内置开发者工具
+- ⚡ 基于 Vite 的快速开发体验
+
+## 项目结构
+
+```
+src/
+├── components/          # 组件
+│   └── AppLayout.vue   # 主布局组件
+├── views/              # 页面
+│   ├── Home.vue        # 主页
+│   ├── Scripts.vue     # 脚本管理
+│   ├── Plans.vue       # 计划管理
+│   ├── Queue.vue       # 调度队列
+│   ├── Scheduler.vue   # 调度中心
+│   ├── History.vue     # 历史记录
+│   └── Settings.vue    # 设置页面
+├── router/             # 路由配置
+├── composables/        # 组合式函数
+│   └── useTheme.ts     # 主题管理
+└── main.ts            # 应用入口
+```
+
+## 开发
+
+### 安装依赖
+```bash
+yarn install
+```
+
+### 开发模式
+```bash
+yarn web          # 启动 Vite 开发服务器(浏览器查看)
+
+yarn dev          # 启动 Electron 开发环境
+```
+
+### 构建
+```bash
+yarn build        # 构建生产版本
+```
+
+## 技术栈
+
+- **前端框架**: Vue 3 + TypeScript
+- **UI 组件库**: Ant Design Vue 4.x
+- **图标**: @ant-design/icons-vue
+- **路由**: Vue Router 4
+- **构建工具**: Vite
+- **桌面端**: Electron
+- **包管理**: Yarn
diff --git a/frontend/src/components/AppLayout.vue b/frontend/src/components/AppLayout.vue
index bbb3f5e..1890ef0 100644
--- a/frontend/src/components/AppLayout.vue
+++ b/frontend/src/components/AppLayout.vue
@@ -1,6 +1,14 @@
 <template>
-  <a-layout style="min-height: 100vh">
-    <a-layout-sider v-model:collapsed="collapsed" :trigger="null" collapsible :theme="isDark ? 'dark' : 'light'">
+  <a-layout style="height: 100vh; overflow: hidden">
+    <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"
+      :width="240"
+      :collapsed-width="80"
+    >
       <div class="sider-content">
         <!-- Logo区域 - 点击切换展开/折叠 -->
         <div class="logo" @click="collapsed = !collapsed">
@@ -10,8 +18,12 @@
 
         <!-- 主菜单 -->
         <div class="main-menu">
-          <a-menu v-model:selectedKeys="selectedKeys" :theme="isDark ? 'dark' : 'light'" mode="inline"
-            :inline-collapsed="collapsed">
+          <a-menu
+            v-model:selectedKeys="selectedKeys"
+            :theme="isDark ? 'dark' : 'light'"
+            mode="inline"
+            :inline-collapsed="collapsed"
+          >
             <a-menu-item key="/home" @click="handleMenuClick('/home')">
               <home-outlined />
               <span>主页</span>
@@ -41,8 +53,12 @@
 
         <!-- 底部设置菜单 -->
         <div class="bottom-menu">
-          <a-menu v-model:selectedKeys="selectedKeys" :theme="isDark ? 'dark' : 'light'" mode="inline"
-            :inline-collapsed="collapsed">
+          <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>
@@ -52,8 +68,22 @@
       </div>
     </a-layout-sider>
 
-    <a-layout>
-      <a-layout-content :style="{ padding: '24px', background: isDark ? '#141414' : '#ffffff' }">
+    <a-layout
+      :style="{
+        marginLeft: collapsed ? '80px' : '240px',
+        height: '100vh',
+        transition: 'margin-left 0.2s',
+      }"
+    >
+      <a-layout-content
+        class="content-area"
+        :style="{
+          padding: '24px',
+          background: isDark ? '#141414' : '#ffffff',
+          height: '100vh',
+          overflow: 'auto',
+        }"
+      >
         <router-view />
       </a-layout-content>
     </a-layout>
@@ -150,12 +180,17 @@ const handleMenuClick = (path: string) => {
 
 /* 深色模式下的底部菜单边框 */
 :deep(.ant-layout-sider-dark) .bottom-menu {
+  /*
   border-top: 1px solid rgba(255, 255, 255, 0.1);
+   */
 }
 
 /* 浅色模式下的底部菜单边框 */
 :deep(.ant-layout-sider-light) .bottom-menu {
+  /*
   border-top: 1px solid #d9d9d9;
+
+   */
 }
 
 /* 深色模式样式 */
@@ -172,8 +207,19 @@ const handleMenuClick = (path: string) => {
   position: relative;
 }
 
+/* 移除菜单右边框 */
 :deep(.ant-menu) {
-  border-right: none;
+  border-right: none !important;
+  border-inline-end: none !important;
+}
+
+/* 更强制地移除菜单右边框 */
+: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;
 }
 
 /* 确保折叠时图标显示 */
@@ -185,4 +231,26 @@ const handleMenuClick = (path: string) => {
   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>