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）

// 默认深色主题
$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