schoolNews/视图结构树.md

学校新闻系统 - 视图结构树

前端视图结构

1. 首页 (Home)

• 路径: /
• 视图: Home.vue
• 子组件:
  • NavigationBar.vue - 导航栏
  • SearchIndex.vue - 模糊检索
  • LearningDataOverview.vue - 个人学习数据记录
  • TopMusicRecommend.vue - TOP资源推荐
  • NewsOverview.vue - 新闻概览
  • BookHallSection.vue - 轮播组件

2. 资源中心 (Resource Center)

• 路径: /resource-center
• 视图: ResourceCenterPage.vue
• 子组件:
  • NavigationBar.vue - 导航栏
  • SearchIndex.vue - 模糊检索
  • PartyHistoryLearning.vue - 党史学习组件
  • PolicySpeech.vue - 领导讲话组件
  • PolicyInterpretation.vue - 政策解读组件
  • RedClassic.vue - 红色经典组件
  • SpecialReport.vue - 专题报告组件
  • WorldCase.vue - 思政案例组件
  • MediaArchive.vue - 资源详情组件(二级文章阅读页面)

3. 学习计划 (Study Plan)

• 路径: /study-plan
• 视图: StudyPlanPage.vue
• 子组件:
  • StudyTasks.vue - 学习任务组件
    • 任务列表
    • 任务进度
  • CourseCenter.vue - 课程中心组件
    • 富文本课程

4. 个人中心 (Personal Center)

• 路径: /user-center
• 视图: UserCenterPage.vue
• 子组件:
  • LearningRecords.vue - 学习记录组件
  • MyFavorites.vue - 我的收藏组件
  • MyAchievements.vue - 我的成就组件

5. 账号中心 (Account Center)

• 路径: /profile
• 视图: ProfilePage.vue
• 子组件:
  • PersonalInfo.vue - 个人信息组件
  • AccountSettings.vue - 账号设置组件

6. 智能体模块 (AI Assistant)

• 路径: /ai-assistant
• 视图: AIAssistantPage.vue
• 子组件:
  • ChatInterface.vue - 对话功能组件
  • DialogHistory.vue - 对话记录组件
  • FileInterpretation.vue - 文件解读与记录组件
  • KnowledgeBase.vue - 知识库管理组件
• 状态: 悬浮球

7. 工作台 (Dashboard)

• 路径: /dashboard
• 视图: Workplace.vue

8. 登录模块 (Login)

• 路径: /login
• 视图: Login.vue
• 路径: /register
• 视图: Register.vue
• 路径: /forgot-password
• 视图: ForgotPassword.vue

9. 错误页面 (Error)

• 路径: /error/403
• 视图: 403.vue
• 路径: /error/404
• 视图: 404.vue
• 路径: /error/500
• 视图: 500.vue

后端管理视图结构

1. 系统总览 (System Overview)

• 路径: /admin/overview
• 视图: SystemOverview.vue
• 功能组件:
  • 总用户数统计组件
  • 总资源数统计组件
  • 今日访问量统计组件
  • 用户活跃度折线图组件
  • 资源分类统计占比饼图组件

2. 用户管理 (User Management)

• 路径: /admin/manage/system/user
• 视图: UserManageView.vue
• 路径: /admin/manage/system/dept
• 视图: DeptManageView.vue - 组织结构管理
• 路径: /admin/manage/system/role
• 视图: RoleManageView.vue - 角色管理
• 路径: /admin/manage/system/permission
• 视图: PermissionManageView.vue - 权限配置管理
• 路径: /admin/manage/system/menu
• 视图: MenuManageView.vue - 菜单管理

3. 资源管理 (Resource Management)

• 路径: /admin/manage/resource/resource
• 视图: ResourceManagement.vue - 资源管理
• 路径: /admin/manage/resource/article
• 视图: ArticleManagement.vue - 新闻文章管理
• 路径: /admin/manage/resource/data-records
• 视图: DataRecords.vue - 数据记录

4. 运营管理 (Operations Management)

• 路径: /admin/manage/content/banner
• 视图: BannerManagement.vue - Banner管理
• 路径: /admin/manage/content/tag
• 视图: TagManagement.vue - 标签管理
• 路径: /admin/manage/content/column
• 视图: ColumnManagement.vue - 栏目管理
• 路径: /admin/manage/content/content
• 视图: ContentManagement.vue - 内容管理

5. 学习管理 (Learning Management)

• 路径: /admin/manage/study/study
• 视图: StudyManagement.vue - 学习管理
• 路径: /admin/manage/study/task-publish
• 视图: TaskPublish.vue - 学习任务发布
• 路径: /admin/manage/study/study-records
• 视图: StudyRecords.vue - 学习记录

6. 智能体管理 (AI Management)

• 路径: /admin/manage/ai/ai
• 视图: AIManagement.vue - AI管理
• 路径: /admin/manage/ai/config
• 视图: AIConfig.vue - 基础配置
• 路径: /admin/manage/ai/knowledge
• 视图: KnowledgeManagement.vue - 知识库管理

7. 系统日志 (System Logs)

• 路径: /admin/manage/logs/system
• 视图: SystemLogs.vue - 系统日志
• 路径: /admin/manage/logs/login
• 视图: LoginLogs.vue - 登录日志
• 路径: /admin/manage/logs/operation
• 视图: OperationLogs.vue - 操作日志
• 路径: /admin/manage/logs/config
• 视图: SystemConfig.vue - 系统配置

路由结构

前端路由

/ (首页)
├── /resource-center (资源中心)
├── /study-plan (学习计划)
├── /user-center (个人中心)
├── /profile (账号中心)
├── /ai-assistant (智能体模块)
├── /dashboard (工作台)
├── /login (登录)
├── /register (注册)
├── /forgot-password (忘记密码)
└── /error (错误页面)
    ├── /error/403
    ├── /error/404
    └── /error/500

后端管理路由

/admin
├── /overview (系统总览)
└── /manage
    ├── /system (系统管理)
    │   ├── /user (用户管理)
    │   ├── /dept (部门管理)
    │   ├── /role (角色管理)
    │   ├── /permission (权限管理)
    │   └── /menu (菜单管理)
    ├── /resource (资源管理)
    │   ├── /resource (资源管理)
    │   ├── /article (文章管理)
    │   └── /data-records (数据记录)
    ├── /content (运营管理)
    │   ├── /banner (Banner管理)
    │   ├── /tag (标签管理)
    │   ├── /column (栏目管理)
    │   └── /content (内容管理)
    ├── /study (学习管理)
    │   ├── /study (学习管理)
    │   ├── /task-publish (任务发布)
    │   └── /study-records (学习记录)
    ├── /ai (智能体管理)
    │   ├── /ai (AI管理)
    │   ├── /config (AI配置)
    │   └── /knowledge (知识库管理)
    └── /logs (系统日志)
        ├── /system (系统日志)
        ├── /login (登录日志)
        ├── /operation (操作日志)
        └── /config (系统配置)

组件层级关系

布局组件

• BasicLayout - 基础布局
• NavigationLayout - 导航布局
• BlankLayout - 空白布局
• PageLayout - 页面布局

通用组件

• NavigationBar - 导航栏组件
• SearchIndex - 搜索组件
• DialogHistory - 对话历史组件
• FileInterpretation - 文件解读组件

视图与组件区别

视图 (Views)

• 有独立的URL路径
• 可以直接通过路由访问
• 通常包含完整的页面功能
• 使用布局组件进行包装

组件 (Components)

• 没有独立的URL路径
• 只能被其他视图或组件引用
• 通常实现特定的功能模块
• 可复用的UI单元

权限控制

前端权限

• 根据用户角色显示不同的菜单和功能
• 路由级别的权限控制
• 组件级别的权限控制

后端权限

• 基于RBAC的权限模型
• 部门-角色-权限关联
• 菜单-权限关联