197 lines
4.1 KiB
Markdown
197 lines
4.1 KiB
Markdown
# MaxKB - 布局重构计划（将顶部导航栏移到左侧）
|
||
|
||
## 任务分解和优先级
|
||
|
||
### \[ ] 任务 1: 分析当前布局结构
|
||
|
||
* **优先级**: P0
|
||
|
||
* **依赖**: 无
|
||
|
||
* **描述**:
|
||
|
||
* 分析当前布局组件的实现方式
|
||
|
||
* 了解路由配置和菜单生成逻辑
|
||
|
||
* 确定需要修改的文件和组件
|
||
|
||
* **成功标准**:
|
||
|
||
* 清楚理解当前布局结构和导航实现
|
||
|
||
* 确定所有需要修改的文件
|
||
|
||
* **测试要求**:
|
||
|
||
* `programmatic`: 确认当前布局正常工作
|
||
|
||
* `human-judgement`: 理解布局代码结构
|
||
|
||
### \[ ] 任务 2: 修改 MainLayout.vue 移除顶部导航栏
|
||
|
||
* **优先级**: P0
|
||
|
||
* **依赖**: 任务 1
|
||
|
||
* **描述**:
|
||
|
||
* 修改 MainLayout.vue，移除顶部导航栏中的 TopMenu 组件
|
||
|
||
* 调整顶部导航栏的布局，只保留 Logo、工作空间选择和用户信息
|
||
|
||
* **成功标准**:
|
||
|
||
* 顶部导航栏不再显示应用、知识库、工具、模型等菜单项
|
||
|
||
* 顶部导航栏布局合理，只保留必要元素
|
||
|
||
* **测试要求**:
|
||
|
||
* `programmatic`: 顶部导航栏只显示 Logo、工作空间选择和用户信息
|
||
|
||
* `human-judgement`: 顶部导航栏布局美观
|
||
|
||
### \[ ] 任务 3: 修改 Sidebar.vue 添加顶部菜单项
|
||
|
||
* **优先级**: P0
|
||
|
||
* **依赖**: 任务 2
|
||
|
||
* **描述**:
|
||
|
||
* 修改 Sidebar.vue，在侧边栏顶部添加应用、知识库、工具、模型等菜单项
|
||
|
||
* 确保菜单项显示正确，包含权限控制
|
||
|
||
* 调整侧边栏布局，确保菜单项和子菜单项层次清晰
|
||
|
||
* **成功标准**:
|
||
|
||
* 侧边栏顶部显示应用、知识库、工具、模型等菜单项
|
||
|
||
* 菜单项点击后正确导航到对应页面
|
||
|
||
* 菜单项显示权限控制正确
|
||
|
||
* **测试要求**:
|
||
|
||
* `programmatic`: 侧边栏显示所有顶部菜单项
|
||
|
||
* `programmatic`: 菜单项点击后正确导航
|
||
|
||
* `human-judgement`: 侧边栏布局美观，层次清晰
|
||
|
||
### \[ ] 任务 4: 调整布局样式
|
||
|
||
* **优先级**: P1
|
||
|
||
* **依赖**: 任务 3
|
||
|
||
* **描述**:
|
||
|
||
* 调整 MainLayout.vue 的布局样式，确保左右布局合理
|
||
|
||
* 调整 Sidebar.vue 的样式，确保菜单项显示美观
|
||
|
||
* 确保响应式布局正常工作
|
||
|
||
* **成功标准**:
|
||
|
||
* 页面布局为左右布局，左侧为导航栏，右侧为主内容区
|
||
|
||
* 布局美观，间距合理
|
||
|
||
* 响应式布局正常工作
|
||
|
||
* **测试要求**:
|
||
|
||
* `programmatic`: 页面布局为左右布局
|
||
|
||
* `human-judgement`: 布局美观，间距合理
|
||
|
||
* `human-judgement`: 响应式布局正常工作
|
||
|
||
### \[ ] 任务 5: 测试功能和布局
|
||
|
||
* **优先级**: P1
|
||
|
||
* **依赖**: 任务 4
|
||
|
||
* **描述**:
|
||
|
||
* 测试所有导航功能是否正常
|
||
|
||
* 测试布局在不同屏幕尺寸下的显示效果
|
||
|
||
* 测试权限控制是否正常
|
||
|
||
* **成功标准**:
|
||
|
||
* 所有导航功能正常工作
|
||
|
||
* 布局在不同屏幕尺寸下显示正常
|
||
|
||
* 权限控制正常工作
|
||
|
||
* **测试要求**:
|
||
|
||
* `programmatic`: 所有导航功能正常工作
|
||
|
||
* `programmatic`: 权限控制正常工作
|
||
|
||
* `human-judgement`: 布局在不同屏幕尺寸下显示正常
|
||
|
||
## 实现细节
|
||
|
||
1. **修改 MainLayout.vue**:
|
||
|
||
* 移除 TopMenu 组件的引用
|
||
|
||
* 调整顶部导航栏的布局
|
||
|
||
2. **修改 Sidebar.vue**:
|
||
|
||
* 添加顶部菜单项的计算逻辑
|
||
|
||
* 在侧边栏顶部添加菜单项
|
||
|
||
* 确保菜单项和子菜单项的层次结构
|
||
|
||
3. **调整样式**:
|
||
|
||
* 调整 MainLayout.vue 的布局样式
|
||
|
||
* 调整 Sidebar.vue 的样式
|
||
|
||
* 确保响应式布局正常工作
|
||
|
||
4. **测试**:
|
||
|
||
* 测试所有导航功能
|
||
|
||
* 测试布局在不同屏幕尺寸下的显示效果
|
||
|
||
* 测试权限控制
|
||
|
||
## 风险评估
|
||
|
||
1. **风险**: 布局调整可能影响现有功能
|
||
|
||
* **缓解措施**: 保持功能不变，只调整布局
|
||
|
||
* **测试重点**: 确保所有现有功能正常工作
|
||
|
||
2. **风险**: 响应式布局可能出现问题
|
||
|
||
* **缓解措施**: 确保在不同屏幕尺寸下测试布局
|
||
|
||
* **测试重点**: 测试在不同屏幕尺寸下的布局效果
|
||
|
||
3. **风险**: 权限控制可能受到影响
|
||
|
||
* **缓解措施**: 保持权限控制逻辑不变
|
||
|
||
* **测试重点**: 测试权限控制是否正常工作
|
||
|