UnisKB/.trae/documents/layout_restructure_plan.md

4.1 KiB
Raw Permalink Blame History

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. 风险: 权限控制可能受到影响

    • 缓解措施: 保持权限控制逻辑不变

    • 测试重点: 测试权限控制是否正常工作