|
|
# 电商互联网产品开发实训系统 - 项目认知
|
|
|
|
|
|
> 本文件为 AI 助手提供项目上下文，每次新对话开始时会读取此文件。
|
|
|
|
|
|
---
|
|
|
|
|
|
## 1. 项目基本信息
|
|
|
|
|
|
- **项目名称**：电商互联网产品开发实训系统
|
|
|
- **技术栈**：Vue 3 (Composition API) + Vite 3 + Element Plus 2.2.x + Pinia + Vue Router 4 + ECharts 5.4 + SCSS
|
|
|
- **基础框架**：RuoYi-Vue 3.8.6（若依前后端分离系统增强版）
|
|
|
- **项目路径**：`D:\TZ\dianshang-qianduan` 或 `d:\TZ\dianshang-qianduan`
|
|
|
- **Git**：当前目录不是 Git 仓库
|
|
|
|
|
|
---
|
|
|
|
|
|
## 2. 目录结构
|
|
|
|
|
|
```
|
|
|
src/
|
|
|
├── App.vue # 应用入口，包含顶部导航栏、Step 步骤条 title 区域
|
|
|
├── main.js # 应用入口
|
|
|
├── settings.js # 全局变量配置（主题、是否显示 TagsView 等）
|
|
|
│
|
|
|
├── assets/styles/ # 全局样式
|
|
|
│ ├── variables.module.scss # 主题色变量（菜单颜色、侧边栏、默认深色等）
|
|
|
│ ├── element-ui.scss # Element Plus 样式覆盖
|
|
|
│ ├── sidebar.scss # 侧边栏样式
|
|
|
│ ├── student-training.scss # 学生实训页样式
|
|
|
│ └── ...
|
|
|
│
|
|
|
├── components/ # 通用组件（分页组件、编辑弹框、图谱选择器等）
|
|
|
│
|
|
|
├── layout/ # 整体布局，包含主 UI 框架
|
|
|
│ ├── index.vue # 整体布局组件，根据角色渲染不同颜色主题
|
|
|
│ ├── components/
|
|
|
│ │ ├── Sidebar/index.vue # 侧边栏颜色主题 / 课程风格导航
|
|
|
│ │ ├── Sidebar/SidebarItem.vue # 菜单递归渲染
|
|
|
│ │ ├── Navbar.vue # 顶部导航栏，包含颜色主题切换 + 用户头像
|
|
|
│ │ ├── TagsView/ # 标签页（当前打开的页面）
|
|
|
│ │ └── Settings/ # 主题设置组件
|
|
|
│
|
|
|
├── router/index.js # 路由配置（静态路由 + 动态路由按角色加载）
|
|
|
│
|
|
|
├── store/modules/ # Pinia Store
|
|
|
│ ├── user.js # 用户信息（登录、退出）
|
|
|
│ ├── app.js # 标签页展开/折叠、设备状态(mobile/desktop)
|
|
|
│ ├── settings.js # 主题颜色、侧边栏、TagsView、Header 固定等
|
|
|
│ ├── permission.js # 动态路由、菜单权限
|
|
|
│
|
|
|
├── views/ # 页面视图
|
|
|
│ ├── index.vue # 首页，根据不同 role 渲染不同仪表盘（平台/学校/教师/学生）
|
|
|
│ ├── login.vue # 登录页
|
|
|
│ ├── register.vue # 注册页
|
|
|
│ ├── student/index.vue # 学生页：临摹表，可视化图谱 + 权重分配
|
|
|
│ ├── teacherEnd/index.vue # 教师端页
|
|
|
│ ├── schoolAdmin/ # 学校管理员（school, faculty, major, class, teacher, student）
|
|
|
│ ├── platformAdmin/ # 平台管理员（school, teacher 审核）
|
|
|
│ ├── demand/ # 市场需求分析模块
|
|
|
│ ├── product/ # 产品设计模块
|
|
|
│ ├── channel/ # 渠道模块
|
|
|
│ ├── test/ # 产品概念测试营销运营
|
|
|
│ ├── assessment/ # 产品概念评估
|
|
|
│ ├── training/ # 实训导航（通用页面的进阶页）
|
|
|
│ ├── foundation/ # 产品基础资料
|
|
|
│ ├── AI/ # AI 分析
|
|
|
│ ├── error/ # 错误页面
|
|
|
│
|
|
|
├── api/ # API 接口封装（统一管理模块化）
|
|
|
├── utils/ # 工具函数
|
|
|
├── plugins/ # 插件（如 Echarts cache 等）
|
|
|
```
|
|
|
|
|
|
---
|
|
|
|
|
|
## 3. 四种角色权限分布
|
|
|
|
|
|
| 角色 | roleId | 界面特点 | 导航栏 | 说明 |
|
|
|
|------|--------|---------|--------|------|
|
|
|
| 平台管理员 | 1 | 平台管理后台 + 审核管理菜单 | `theme-dark` 深色导航 | |
|
|
|
| 学校管理员 | 2 | 同上，但仅限本校管理 | `theme-dark` | |
|
|
|
| 教师 | 3 | 课程管理角色分配 + 课程分配管理 | 课程模块页签自定义渲染 | |
|
|
|
| 学生 | 4 | 课程分配管理 | 仅实训模块页签动态渲染 +API 调用 | |
|
|
|
|
|
|
**核心导航逻辑**（在 `src/layout/index.vue`中）：
|
|
|
- 通过 `useTopNavbarOnly` 判断是否为角色 1 或 2
|
|
|
- 通过 `isCourseStyleSidebar` 判断是否为学生或教师
|
|
|
- 不同角色渲染不同的菜单列表的嵌套组件
|
|
|
|
|
|
---
|
|
|
|
|
|
## 4. 样式系统
|
|
|
|
|
|
### 主题变量（`src/assets/styles/variables.module.scss`）
|
|
|
|
|
|
```scss
|
|
|
// 默认深色主题
|
|
|
$base-menu-color: #bfcbd9;
|
|
|
$base-menu-background: #304156;
|
|
|
|
|
|
// 浅色主题
|
|
|
$base-menu-light-color: rgba(0, 0, 0, 0.7);
|
|
|
$base-menu-light-background: #ffffff;
|
|
|
|
|
|
// Element Plus 主色
|
|
|
$--color-primary: #409EFF;
|
|
|
```
|
|
|
|
|
|
### 主题切换
|
|
|
|
|
|
- `settings.js` 中的 `sideTheme: 'theme-dark'` 控制侧边栏主题
|
|
|
- 顶部导航栏 `Navbar.vue` 可以自定义主题切换样式
|
|
|
- 学生/教师端使用不同样式 `student-training.scss` 样式
|
|
|
|
|
|
---
|
|
|
|
|
|
## 5. 路由系统
|
|
|
|
|
|
- **静态路由**：`constantRoutes`（无需登录、注册、首页、错误页）
|
|
|
- **动态路由**：`dynamicRoutes`（按角色分发）
|
|
|
- 角色路由分发：(`platformAdminRoutes`、`schoolAdminRoutes`、`teacherRoutes`、`dynamicRoutes`)
|
|
|
- 学生菜单是通过 API 动态获取实训模块，并写入路由文件 `src/utils/studentTrainingNavigation.js`
|
|
|
|
|
|
---
|
|
|
|
|
|
## 6. 关键设计模式
|
|
|
|
|
|
### 实训导航页面
|
|
|
|
|
|
- `src/views/training/GenericTrainingPage.vue` 通用的实训页
|
|
|
- `src/views/training/CustomTrainingStepPage.vue` 自定义步骤页
|
|
|
- 左侧边栏：`TrainingAiSidebar`、`DynamicTrainingStepNavigator`
|
|
|
|
|
|
### 表单 + 弹框模式
|
|
|
|
|
|
- 使用 `el-table` 展示数据
|
|
|
- 使用 `el-form` + `el-dialog` 完成增删改查
|
|
|
- 分页组件 `components/Pagination/`
|
|
|
|
|
|
### 图表模式
|
|
|
|
|
|
- 使用 ECharts 5.4
|
|
|
- 在 `onMounted` 中 `echarts.init`，`onBeforeUnmount` 中 `.dispose()`
|
|
|
- 响应式通过 `window.addEventListener('resize', ...)` 调整
|
|
|
|
|
|
---
|
|
|
|
|
|
## 7. 状态管理
|
|
|
|
|
|
| Store | 说明 | |
|
|
|
|--------|------|---------|
|
|
|
| `user` | 用户登录信息、Token、角色 | |
|
|
|
| `app` | 标签页展开/折叠、设备状态(mobile/desktop) | |
|
|
|
| `settings` | 主题颜色、侧边栏、侧边栏、TagsView、Header 固定等 | |
|
|
|
| `permission` | 动态路由、菜单权限 | |
|
|
|
|
|
|
---
|
|
|
|
|
|
## 8. 定制 UI 时的关键文件
|
|
|
|
|
|
| 定制项目 | 目标文件 | |
|
|
|
|---------|---------|---------|
|
|
|
| 主题色 / Logo | `src/assets/styles/variables.module.scss`、`src/assets/images/top.png` | |
|
|
|
| 顶部导航栏 | `src/layout/components/Navbar.vue` | |
|
|
|
| 侧边菜单 | `src/layout/components/Sidebar/index.vue` | |
|
|
|
| 侧边菜单项 | `src/layout/components/Sidebar/SidebarItem.vue` | |
|
|
|
| 整体布局 | `src/layout/index.vue` | |
|
|
|
| 首页仪表盘 | `src/views/index.vue` | |
|
|
|
| 学生页临摹表 | `src/views/student/index.vue` | |
|
|
|
| 主题设置组件 | `src/layout/components/Settings/index.vue` | |
|
|
|
| Element Plus 样式 | `src/assets/styles/element-ui.scss` | |
|
|
|
| 全局变量配置 | `src/settings.js` | |
|
|
|
|
|
|
---
|
|
|
|
|
|
## 9. 开发注意事项
|
|
|
|
|
|
- 使用 `npm run dev` 启动开发服务器
|
|
|
- 样式使用 SCSS，注意使用模块导出 `:export` 供 JS 读取
|
|
|
- 组件使用 `<script setup>` Composition API 语法
|
|
|
- 角色通过 `role` 字段动态切换主题
|
|
|
- 学生菜单是通过动态添加很优雅的方式接入的，不要随意改动路由
|
|
|
|
|
|
---
|
|
|
|
|
|
*最后更新：2026-09-02*
|