爱学蝶变报告系统原型设计

这是一个基于 Vue 3 + TDesign 的产品原型网页，展示报告系统的核心功能和角色权限控制。

功能特性

核心功能

• 四大报告入口模块：
  • 作业打卡行为报告：作业打卡行为数据分析与趋势
  • 学校报告：各学校详细报告与对比分析
  • 班级报告：班级学习情况与教学质量分析
  • 学生报告：学生学习轨迹与个性化报告

角色权限控制

• 总部长角色：

  • 拥有最高权限，可查看并进入全部四类报告入口
  • 具备所有管理功能，包括数据分析、报告导出等

• 部长角色：

  • 可查看并进入全部四类报告入口（作业打卡行为报告、学校报告、班级报告、学生报告）

• 学习官角色：

  • 仅展示并可进入班级报告、学生报告两类入口

设计特点

• 四大报告板块统一的视觉入口样式
• 不同角色登录后，入口的显示/隐藏状态差异
• 整体布局简洁、层级分明
• 响应式设计，支持多设备访问

技术栈

• 前端框架: Vue 3 (Composition API)
• UI 组件库: TDesign Vue Next
• 构建工具: Vite
• 开发语言: JavaScript

快速开始

安装依赖

npm install

启动开发服务器

npm run dev

构建生产版本

npm run build

预览生产版本

npm run preview

项目结构

爱学蝶变原型设计/
├── index.html              # HTML 入口文件
├── package.json            # 项目配置文件
├── vite.config.js          # Vite 配置文件
├── README.md               # 项目说明文档
└── src/
    ├── main.js             # Vue 应用入口
    ├── App.vue             # 主应用组件
    └── components/
        └── HomePage.vue    # 首页组件

使用说明

1. 启动项目后，默认以"部长"角色登录
2. 点击顶部导航栏的角色选择器，可切换角色：
   • 选择"总部长"：显示全部四类报告入口，拥有最高权限
   • 选择"部长"：显示全部四类报告入口
   • 选择"学习官"：仅显示班级报告和学生报告
3. 点击报告卡片可进入相应模块（原型阶段仅显示提示信息）

权限说明

• 总部长角色：可查看所有四类报告，拥有最高权限
• 作业打卡行为报告、学校报告：总部长和部长角色可见
• 班级报告、学生报告：总部长、部长和学习官角色均可见
• 其他角色可后续扩展

扩展建议

如需扩展更多角色或功能，可修改以下文件：

1. src/App.vue - 添加新角色选项
2. src/components/HomePage.vue - 在 reports 数据中配置新角色的权限

许可证

MIT License