# 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. **风险**: 权限控制可能受到影响 * **缓解措施**: 保持权限控制逻辑不变 * **测试重点**: 测试权限控制是否正常工作