Files
schoolNews/schoolNewsWeb/PROJECT_STRUCTURE.md
2025-10-16 18:03:46 +08:00

9.9 KiB
Raw Blame History

校园新闻管理系统 - 项目结构说明

概述

根据提供的结构图已创建完整的前端页面层级和Vue组件文件。本文档详细说明了创建的所有文件和目录结构。

目录结构

src/views/
├── home/                          # 首页模块
│   ├── HomePage.vue              # 首页主组件
│   └── components/               # 首页子组件
│       ├── LearningDataOverview.vue    # 个人学习数据概览
│       ├── BookHallSection.vue         # 书报馆件
│       ├── TopMusicRecommend.vue       # TOP音乐推荐
│       ├── NewsOverview.vue            # 新闻概览
│       ├── NavigationBar.vue           # 导航栏
│       └── SearchIndex.vue             # 搜索索引
│
├── resource-center/              # 资源中心模块
│   ├── ResourceCenterPage.vue   # 资源中心主组件
│   └── components/               # 资源中心子组件
│       ├── MediaArchive.vue            # 媒体档案
│       ├── PartyHistoryLearning.vue    # 党史学习
│       ├── PolicySpeech.vue            # 政策讲话
│       ├── PolicyInterpretation.vue    # 政策解读
│       ├── RedClassic.vue              # 红色经典
│       ├── SpecialReport.vue           # 专题报告
│       └── WorldCase.vue               # 世界案例
│
├── study-plan/                   # 学习计划模块
│   ├── StudyPlanPage.vue        # 学习计划主组件
│   └── components/               # 学习计划子组件
│       ├── StudyTasks.vue              # 学习任务(包含任务列表、任务进度)
│       └── CourseCenter.vue            # 课程中心(富文本课程)
│
├── user-center/                  # 个人中心模块
│   ├── UserCenterPage.vue       # 个人中心主组件
│   └── components/               # 个人中心子组件
│       ├── LearningRecords.vue         # 学习记录
│       ├── MyFavorites.vue             # 我的收藏
│       └── MyAchievements.vue          # 我的成就
│
├── profile/                      # 我导中心模块(头像进入)
│   ├── ProfilePage.vue          # 我导中心主组件
│   └── components/               # 我导中心子组件
│       ├── PersonalInfo.vue            # 个人信息
│       └── AccountSettings.vue         # 账号设置
│
├── ai-assistant/                 # 智能体模块
│   ├── AIAssistantPage.vue      # AI助手主组件包含悬浮球
│   └── components/               # AI助手子组件
│       ├── ChatInterface.vue           # 对话功能
│       ├── KnowledgeBase.vue           # 知识库
│       ├── DialogHistory.vue           # 历史对话记录加载
│       └── FileInterpretation.vue      # 文件解读与记录(文件上传、历史文件加载)
│
└── admin/                        # 后端管理模块
    ├── SystemOverview.vue       # 系统总览(总用户数、总资源数、今日访问量、用户活跃度折线图、资源分类统计饼图)
    ├── ResourceManagement.vue   # 资源管理主组件
    ├── LanguageManagement.vue   # 语言管理主组件
    ├── StudyManagement.vue      # 学习管理主组件
    ├── AIManagement.vue         # 智能体管理主组件
    ├── SystemLogs.vue           # 系统日志主组件
    └── components/               # 后端管理子组件
        ├── ArticleManagement.vue       # 文章储备(数据采集、新增文章、课程文章)
        ├── DataRecords.vue             # 数据记录(菜单管理)
        ├── BannerManagement.vue        # Banner管理
        ├── ColumnManagement.vue        # 资源栏目管理
        ├── TagManagement.vue           # 标签管理
        ├── TaskPublish.vue             # 学习任务发布(任务名称、描述、周期、关联资源、接受对象)
        ├── StudyRecords.vue            # 学习记录
        ├── AIConfig.vue                # AI基础配置
        ├── KnowledgeManagement.vue     # 知识库管理
        ├── LoginLogs.vue               # 登录日志
        ├── OperationLogs.vue           # 操作日志
        └── SystemConfig.vue            # 系统配置

已存在的管理模块

以下管理功能已在 src/views/manage/system/ 中实现:

  • UserManageView.vue - 用户管理
  • RoleManageView.vue - 角色管理
  • PermissionManageView.vue - 权限管理
  • DeptManageView.vue - 部门管理(组织结构管理)
  • MenuManageView.vue - 菜单管理

功能模块详细说明

前端功能

1. 首页模块

  • 个人学习数据概览: 展示用户学习统计数据
  • 书报馆件: 图书资源展示
  • TOP音乐推荐: 红色音乐推荐列表
  • 新闻概览: 最新思政新闻展示
  • 导航栏: 快速导航入口
  • 搜索索引: 热门标签和搜索功能

2. 资源中心模块

  • 媒体档案: 视频、音频等媒体资源管理
  • 党史学习: 党史教育文章和资料(支持资源详情,二级文章向读者展示)
  • 政策讲话: 重要政策讲话内容
  • 政策解读: 政策文件解读说明
  • 红色经典: 红色经典作品展示
  • 专题报告: 各类专题报告内容
  • 世界案例: 国际案例学习资料

3. 学习计划模块

  • 学习任务:
    • 任务列表展示
    • 任务进度跟踪
    • 任务状态管理(未开始、进行中、已完成)
  • 课程中心: 富文本课程内容展示

4. 个人中心模块

  • 学习记录: 个人学习历史记录
  • 我的收藏: 收藏的资源管理
  • 我的成就: 获得的成就展示

5. 我导中心模块(头像入口)

  • 个人信息: 用户基本信息管理
  • 账号设置: 密码修改、安全设置

6. 智能体模块

  • 悬浮球: 快速唤起AI助手
  • 对话功能: 智能问答交互
  • 知识库: AI知识库浏览
  • 历史对话记录: 对话历史加载
  • 文件解读与记录:
    • 文件上传
    • 历史文件加载
    • AI文件解读

后端管理功能

1. 系统总览

  • 统计卡片: 总用户数、总资源数、今日访问量、活跃用户
  • 用户活跃度折线图: 用户活跃度趋势分析
  • 资源分类统计饼图: 资源分类分布展示
  • 今日访问量详情: UV、PV、平均访问时长、跳出率

2. 用户管理(已存在)

  • 组织结构管理
  • 用户管理
  • 权限配置管理

3. 资源管理

  • 文章储备:
    • 数据采集功能
    • 新增文章
    • 课程文章管理
  • 数据记录: 菜单管理(已在系统管理中实现)

4. 语言管理

  • Banner管理: 首页轮播图管理
  • 资源栏目管理: 资源分类栏目配置
  • 标签管理: 资源标签维护

5. 学习管理

  • 学习任务发布:
    • 任务名称
    • 任务描述
    • 任务周期
    • 关联资源/选择
    • 任务接受对象(按部门/按权限/选人员)
  • 学习记录: 用户学习数据查看和导出

6. 智能体管理

  • 基础配置: AI模型、API配置、对话参数设置
  • 知识库管理: AI知识库内容维护

7. 系统日志

  • 登录日志: 用户登录记录
  • 操作日志: 系统操作审计
  • 系统配置: 系统参数设置

技术特点

1. 组件化设计

  • 每个功能模块都有独立的主组件
  • 复杂功能拆分为多个子组件
  • 组件可复用性高

2. 标准化结构

  • 统一的目录命名规范
  • 一致的文件命名方式
  • 清晰的层级关系

3. 功能完整性

  • 覆盖所有结构图要求的功能点
  • 包含完整的CRUD操作
  • 支持数据筛选、分页、导出等常用功能

4. UI/UX设计

  • 使用Element Plus组件库
  • 响应式布局设计
  • 现代化的UI风格
  • 良好的交互体验

后续开发建议

1. API集成

所有组件中标记了 TODO 的地方需要接入实际的后端API

  • 数据加载函数
  • 表单提交处理
  • 文件上传功能
  • 实时数据更新

2. 状态管理

建议使用Vuex进行全局状态管理

  • 用户信息状态
  • 权限数据缓存
  • 菜单树结构
  • AI对话上下文

3. 路由配置

需要在 src/router/ 中配置所有页面的路由:

  • 路由路径定义
  • 路由守卫配置
  • 动态路由加载
  • 权限路由过滤

4. 权限控制

实现完整的权限控制系统:

  • 页面级权限
  • 按钮级权限
  • 数据级权限
  • 角色权限映射

5. 数据可视化

系统总览页面需要集成ECharts

  • 用户活跃度折线图
  • 资源分类饼图
  • 其他统计图表

6. 富文本编辑器

课程内容需要集成富文本编辑器:

  • 推荐使用 TinyMCE 或 Quill
  • 支持图片、视频上传
  • 支持代码高亮
  • 支持数学公式

7. 文件管理

完善文件上传和管理功能:

  • 文件分片上传
  • 断点续传
  • 文件预览
  • 批量操作

8. AI功能增强

智能体模块需要接入AI服务

  • 对话流式输出
  • 文件解读API
  • 知识库检索
  • 上下文管理

开发注意事项

  1. 类型安全: 所有组件都使用TypeScript需要定义完整的类型接口
  2. 错误处理: 添加适当的错误提示和异常处理
  3. 加载状态: 为异步操作添加loading状态
  4. 数据验证: 表单提交前进行数据验证
  5. 性能优化:
    • 列表虚拟滚动
    • 图片懒加载
    • 组件按需加载
    • 路由懒加载
  6. 用户体验:
    • 添加骨架屏
    • 优化加载动画
    • 提供操作反馈
    • 支持键盘快捷键

文件数量统计

  • 主页面组件: 10个
  • 子组件: 40+个
  • 总计Vue文件: 50+个

所有文件都已创建并包含基础的结构、样式和功能框架可以直接在此基础上进行API集成和功能完善。