feat(layout): 优化侧边栏布局和内容区域滚动

-固定侧边栏高度为100vh,设置为固定定位
- 优化内容区域样式,设置过渡效果和滚动条- 隐藏菜单和内容区域的滚动条
- 调整底部菜单样式,注释掉部分代码
This commit is contained in:
2025-08-03 01:02:14 +08:00
parent 790a75ac87
commit 8916cbd097
2 changed files with 138 additions and 9 deletions

61
frontend/README.md Normal file
View File

@@ -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