9.9 KiB
9.9 KiB
校园新闻管理系统 - 项目结构说明
概述
根据提供的结构图,已创建完整的前端页面层级和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
- 知识库检索
- 上下文管理
开发注意事项
- 类型安全: 所有组件都使用TypeScript,需要定义完整的类型接口
- 错误处理: 添加适当的错误提示和异常处理
- 加载状态: 为异步操作添加loading状态
- 数据验证: 表单提交前进行数据验证
- 性能优化:
- 列表虚拟滚动
- 图片懒加载
- 组件按需加载
- 路由懒加载
- 用户体验:
- 添加骨架屏
- 优化加载动画
- 提供操作反馈
- 支持键盘快捷键
文件数量统计
- 主页面组件: 10个
- 子组件: 40+个
- 总计Vue文件: 50+个
所有文件都已创建并包含基础的结构、样式和功能框架,可以直接在此基础上进行API集成和功能完善。