# 互联网产品开发实训系统 - 项目认知 > 本文件为 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 读取 - 组件使用 `