dianshang-qianduan/PROJECT_CONTEXT.md

# 电商互联网产品开发实训系统 - 项目认知

> 本文件为 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*