dianshang-qianduan/docs/学生端页面UI清单.md

# 学生端页面 UI 清单

> 用途：学生端 UI 调整前的页面盘点。信息来源：`src/router/index.js`（`roles: ["student"]` 路由组）、`src/utils/studentTrainingNavigation.js`（学生实训导航映射）及各页面源码。
> 生成日期：2026-09-20

---

## 1. 学生端页面总览

学生端路由全部位于 `src/router/index.js` 中 `roles: ["student"]` 的分组，共 **44 个路由**（对应约 42 个视图文件：`analysis.vue`/`dialogue.vue` 各被 2 条路由复用，`GenericTrainingPage.vue` 服务 2 条路由）。按性质分为三类：

| 分类 | 数量 | 说明 |
|------|------|------|
| 入口/功能页 | 13 | 首页仪表盘、AI 助手、学情分析、BI 可视化、实验报告、考试等 |
| 实训模块页 | 28 | 6 大模块下的实训任务页（本次 UI 调整重点） |
| 公共实训壳 | 3 | 综合实训、动态任务页、自定义步骤页（多任务复用） |

---

## 2. 入口/功能页

| # | 路由 | 菜单标题 | 视图文件 | 布局形态 |
|---|------|---------|---------|---------|
| 1 | `/index` | 首页（学生仪表盘） | `views/index.vue` 按角色渲染 → 学生仪表盘 `views/student/index.vue` | 卡片 + ECharts |
| 2 | `/assistant/index` | AI智能助手 | `views/AI/index.vue` | 对话式 |
| 3 | `/ai/learning-situation-analysis` | AI学情分析 | `views/analysis-of-students/analysis.vue` | 对话入口列表 |
| 4 | `/ai/learning-situation-dialogue` | AI学情对话 | `views/analysis-of-students/dialogue.vue` | 对话式 |
| 5 | `/ai/teaching-plan` | AI助手（实训教案） | `views/analysis-of-students/training-lesson-plan.vue` | 对话式 |
| 6 | `/analysis/index` | 学情分析（旧入口） | `views/analysis-of-students/analysis.vue` | 同 #3 同组件 |
| 7 | `/analysis/dialogue` | 学情对话（旧入口） | `views/analysis-of-students/dialogue.vue` | 同 #4 同组件 |
| 8 | `/bi` | BI可视化分析 | `views/visual-analysis/index.vue` | el-tabs + iframe |
| 9 | `/report/index` | 实验报告 | `views/test-report/index.vue` | 表格卡片 |
| 10 | `/examination/index` | 考试考核 | `views/exam/index.vue` | 列表页（浅色） |
| 11 | `/examination/take/:id` | 考试作答 | `views/exam/take.vue` | 表单 |
| 12 | `/examination/result/:id` | 考试成绩 | `views/exam/result.vue` | 详情 |
| 13 | `/student-demo`（hidden） | 学生演示页 | `views/studentDemo/index.vue` | 演示页 |

### 各页 UI 结构要点

**① 学生首页仪表盘**（`views/student/index.vue`，经 `views/index.vue` 按角色渲染）
- 「我的实训成绩」卡片：模块成绩分布 ECharts 饼图 + 成绩明细表格
- 「实训进度概览」卡片：学习时长条形图、任务完成进度条形图
- ECharts 需 `resize` 监听与 `dispose` 清理

**② AI智能助手**（`views/AI/index.vue`）
- 顶部 tab 导航 + 步骤/章节导航（左侧）
- 上传/导出按钮、QA 对话列表、加载态、底部输入框

**③④ 学情分析 / 对话**（`analysis-of-students/analysis.vue`、`dialogue.vue`）
- `stu-analysis-of-students` 根 class，顶部提示标题 + 分析入口按钮列表（点击触发 AI 分段输出）
- 深蓝色系提示条，无成绩数据时 `el-empty`

**⑤ BI可视化分析**（`views/visual-analysis/index.vue`）
- `el-tabs` 两个页签：「数据源管理」（`digitalMarketingAlgorithms/bigData` 组件）、「BI可视化分析」（iframe 嵌入 `VITE_APP_BI_URL`）
- 深色主题：背景 `#06121f`、tab 文字 `#a9d8ff`（硬编码，UI 调整注意）

**⑥ 实验报告**（`views/test-report/index.vue`）
- 标题（白字 + 深蓝 text-shadow）→ 学生信息行（姓名/学号/班级）→ 总成绩卡片（含班级排名 + 模块成绩表格）→ 实训任务明细卡片（任务名/模块/完成状态/AI 评分表格）
- 深色背景浅色文字，样式简单（约 5 条 scoped 规则）

**⑦ 考试考核**（`views/exam/index.vue`）
- 页头（标题+刷新按钮）→ 状态筛选按钮组（全部/未开始/进行中/已结束，带数量徽标）→ 考试列表行（日期块 | 信息区 el-tag+标题+时间 | 操作按钮）
- 浅色主题 `#20282d`，主题色 `#16839c`（青绿色，与其他模块蓝色系不一致，UI 调整注意）
- 有移动端断点 `@media(max-width:650px)`

**⑧⑨ 考试作答/成绩**（`exam/take.vue`、`exam/result.vue`）
- 本轮未深入调研，UI 调整时单独阅读

---

## 3. 实训模块页（UI 调整重点）

> 通用结构（新版实训壳，绝大多数页面遵循）：
> `student-training-shell` 根容器 → `task-header` 顶部任务标题/背景（内嵌 `TrainingTaskBrief`）→ 步骤导航（`step-indicator` / `step-tabs`）→ 分步骤表单/表格/上传区 → 底部操作栏（上一步/保存/下一步/提交）→ 右侧 `TrainingAiSidebar`（AI 学习提示，可折叠）

### 3.1 互联网产品开发基础（`/foundation`，3 页）

| # | 路由 | 标题 | 文件 |
|---|------|------|------|
| 1 | `/foundation/new-product-survey` | 新产品调查与分析 | `views/foundation/new-product-survey.vue` |
| 2 | `/foundation/product-development-factors` | 产品开发关键因素 | `views/foundation/product-development-factors.vue` |
| 3 | `/foundation/product-development-process` | 产品开发主要流程 | `views/foundation/product-development-process.vue` |

- **新产品调查与分析**：4 步。Step01 产品卖点三层次分类（`TrainingStepOneChoiceQuestions` + 分类表格 + `el-select` + 判题反馈）；Step02 实地调研记录（表单分组、平台/场景单选、关键词、产品名、图片上传预览列表）；Step03 三层次对照分析表格 + textarea；Step04 价值判断 3 个文本域。含图片预览 Dialog。
- **产品开发关键因素**：4 步表单。Step1-3 成功/失败产品对比表格 + textarea；Step4 关键因素总结 textarea。头部含 `TrainingMaterialButton`（资料按钮）与导出按钮。
- **产品开发主要流程**：Step01 关键任务识别（任务表格 + select 分类 + 判题反馈 + 保存/清空）；Step02 排期表格 + 甘特图上传预览；Step03/04 工具说明 + 并行协同复盘 textarea。

### 3.2 市场需求挖掘（`/demand`，8 路由）

| # | 路由 | 标题 | 实际视图文件 |
|---|------|------|-------------|
| 1 | `/demand/index` | 行业需求分析 | `views/demand/industry-demand-analysis.vue` |
| 2 | `/demand/environment` | 竞争环境分析 | `views/demand/competitive-environment-analysis.vue` |
| 3 | `/demand/people` | 目标用户画像 | `views/demand/people.vue` |
| 4 | `/demand/user` | 用户数据分析 | `views/demand/user.vue`（legacy） |
| 5 | `/demand/business-feasibility` | 商业可行性论证 | `views/demand/business-feasibility.vue` |
| 6 | `/demand/consumer-behavior` | 消费者需求与行为 | `views/demand/consumer-behavior.vue` |
| 7 | `/demand/consumer-scenario` | 消费场景解构 | `views/demand/consumer-scenario.vue` |
| 8 | `/demand/feature-conversion` | 需求转化为功能 | `views/demand/feature-conversion.vue` |

- **行业需求分析**（根 class `industry-pest-page`，scoped）：四步实训卡片、PEST 表格、机会挑战表、结论表单；使用 `TrainingTaskToolbar`、`TrainingStepOneChoiceQuestions`。
- **竞争环境分析**（根 class `competitive-analysis-page`，scoped）：SWOT 表格、策略矩阵、最终决策区。
- **目标用户画像**：文件上传面板、Excel 预览弹窗、RFM 图表上传区、洞察表格、访谈记录 tab、用户画像表单。
- **用户数据分析**（旧版 legacy 壳）：`student-training-shell` + 顶部 tab 切换 + `TrainingIntro` + 动态组件渲染区 + `TrainingLegacyActions`。
- **商业可行性论证**（根 class `feasibility-core`/`workbench`）：多步 form-section/table、上传面板、`el-dialog` 预览，布局与其他 demand 页不同。
- **消费者需求与行为**：分步骤表单/表格/问卷编辑器弹窗。
- **消费场景解构**：旅程排序、旅程分析表格、旅程图上传区、优化建议表格。
- **需求转化为功能**：需求转化表、RICE 优先级打分表、优先级决策表。

### 3.3 产品规划（`/product`，7 路由）

| # | 路由 | 标题 | 实际视图文件 |
|---|------|------|-------------|
| 1 | `/product/index` | 市场机会识别与选品 | `views/product/market-opportunity-selection.vue`（`hideSupplementSteps`） |
| 2 | `/product/price` | 产品定价 | `views/product/price.vue` |
| 3 | `/product/differentiation` | 产品价值主张及定位 | `views/product/differentiation.vue` |
| 4 | `/product/structure` | 产品结构规划 | `views/product/structure.vue` |
| 5 | `/product/after-sales-service` | 售后服务流程设计 | `views/product/after-sales-service.vue` |
| 6 | `/product/requirements-doc` | 产品需求说明书 | `views/product/requirements-doc.vue` |
| 7 | `/product/hardware-cost` | 智能硬件成本估算 | `views/product/hardware-cost.vue` |

- **市场机会识别与选品**（根 class `opportunity-core`）：6 步——指标分类、权重设置、综合得分计算、可视化上传、用户需求洞察、选品结论。
- **产品定价**（标题区 `PRODUCT PRICING`）：按 `currentStep` 动态渲染定价步骤。
- **产品价值主张及定位**：核心价值 / 用户档案 / 价值地图 / 定位陈述 / MRD 表单区块。
- **产品结构规划**：四层架构排序、操作链路排序、场景分析表格、架构图上传区（`ProductStructureImageUpload`）。
- **售后服务流程设计**：3 步——故障分类拖拽、处理流程表格、售后政策表格；通过 `getStudentTrainingPage("after-sales-service")` 接入页面体系。
- **产品需求说明书**：3 步——PRD 模块匹配拖拽、PRD 详细信息表格、文档上传/预览。
- **智能硬件成本估算**（标题区 `BOM COSTING`）：4 步——BOM 选型（可编辑物料明细表格，增删行 + 合计）、批量成本核算、制造成本核算、成本优化决策（可视化上传 + 优化方案文本 + 下载模板按钮）。

### 3.4 产品投放测试（`/test`，4 路由）

| # | 路由 | 标题 | 视图文件 |
|---|------|------|---------|
| 1 | `/test/index` | 发布渠道评估 | `views/test/index.vue` |
| 2 | `/test/promotion` | 产品推广测试 | `views/test/promotion.vue` |
| 3 | `/test/channelas` | 渠道表现分析 | `views/test/channel.vue`（legacy） |
| 4 | `/test/marketing` | 产品营销定位 | `views/test/marketing.vue`（legacy） |

- **发布渠道评估**（TASK_KEY `release-channel-evaluation`）：新版壳，`step-tabs` 四步表单/表格。
- **产品推广测试**（TASK_KEY `promotion-effect-optimization`）：4 步——预算分配、投放策略、投放数据与 ROI、效果评估与优化。
- **渠道表现分析**（旧版）：`TrainingIntro`（漏斗模型介绍）+ `funnelAnalysis` 组件 + 旧式操作栏。
- **产品营销定位**（旧版 `legacy-training-page`）：`TrainingIntro` + 案例说明 + 广告数据 `el-table` + ECharts 四象限图（坐标轴可选）+ textarea 分析 + 提交/重置。

### 3.5 供应渠道管理（`/channel`，3 路由）

| # | 路由 | 标题 | 视图文件 |
|---|------|------|---------|
| 1 | `/channel/index` | 采购需求预测 | `views/channel/index.vue` |
| 2 | `/channel/purchase` | 采购产品定位 | `views/channel/purchase.vue`（legacy） |
| 3 | `/channel/supplier` | 供应商评估与选择 | `views/channel/supplier.vue` |

- **采购需求预测**：4 步——线性需求预测表格（`el-table` + `el-input-number`）、预测可视化上传/预览卡片、采购计划规则表格（安全库存/期初库存/采购量输入）、采购量预测表格 + ECharts 容器 + 代码查看弹窗。
- **采购产品定位**（旧版）：`TrainingIntro`（卡拉杰克模型长文介绍）+ 四象限矩阵分析。
- **供应商评估与选择**（`workspace` header）：3 步，Step1 场景 A/B 权重卡片 + 表格。

### 3.6 产品评估与考核（`/assessment`，3 路由）

| # | 路由 | 标题 | 视图文件 |
|---|------|------|---------|
| 1 | `/assessment/index` | 产品表现分析（功效系数法） | `views/assessment/index.vue` |
| 2 | `/assessment/diagnosis` | 产品问题诊断 | `views/assessment/diagnosis.vue` |
| 3 | `/assessment/optimization` | 品类结构优化 | `views/assessment/optimization.vue` |

- **产品表现分析**：`TrainingIntro` 背景与目标 + `TrainingTaskToolbar` + 多个 `el-table`（指标/绩效数据/功效值/权重）+ 底部 `taskfooter` 提交/重置。
- **产品问题诊断**（`workbench-top`）：步骤 tab、漏斗计算表格、对比图上传、词云分析、情感倾向表格、根因 textarea、AB 测试方案与结论。
- **品类结构优化**（`workbench-head`）：品类表格（`el-input`/`el-input-number` 增删行）、帕累托图上传区（`el-image` 预览 + 重传/移除）。

---

## 4. 公共实训壳（多任务复用，改一处影响面大）

| 路由 | 标题 | 视图文件 | 说明 |
|------|------|---------|------|
| `/comprehensive/index` | 综合实训 | `views/training/GenericTrainingPage.vue` | `pageKey: comprehensive-case-training`，`hideSupplementSteps` |
| `/training/task/:pageKey` | 实训任务（动态） | `views/training/GenericTrainingPage.vue` | 后端下发任务 → 通用渲染，`studentTrainingNavigation.js` 生成菜单 |
| `/training/:taskKey/:stepId` | 自定义实训步骤 | `views/training/CustomTrainingStepPage.vue` | 步骤 header + `TrainingTaskBrief` + textarea + 附件上传 + 上一步/保存/下一步 + empty 状态 |

- **GenericTrainingPage**：公共步骤导航（步骤 tab / marker / connector）→ 步骤标题+任务说明 → 流程表格、上传提示/按钮/文件名展示 → 综合案例 PEST/SWOT 输入区 + 结论 textarea。**未走专属 .vue 的实训任务全部由它渲染，UI 调整优先级最高。**

---

## 5. 公共组件与样式

### 5.1 实训公共组件（`src/views/components/`）

| 组件 | 作用 |
|------|------|
| `TrainingAiSidebar.vue` | 右侧 AI 学习提示侧边栏（可折叠），几乎所有实训页右栏 |
| `DynamicTrainingStepNavigator.vue` | 动态步骤导航条 |
| `TrainingTaskBrief.vue` | 任务背景/目标简介卡片（页面头部内嵌） |
| `TrainingTaskToolbar.vue` | 任务工具栏 |
| `TrainingMaterialButton.vue` | 资料查看按钮 |
| `TrainingIntro.vue` | 旧版页介绍区（background / goal 插槽） |
| `TrainingStepOneChoiceQuestions.vue` | 单选判题题组（含 `StepOneChoiceQuestionEditor.vue` 编辑器） |
| `TrainingAiEvaluation.vue` | AI 评价展示 |
| `TrainingLegacyActions.vue` | 旧版页底部操作栏 |
| `popModal.vue` / `mainContent.vue` | 弹窗 / 主内容容器 |

### 5.2 product 模块公共组件（`src/views/product/components/`）

- `ProductStandardTrainingPage.vue`：product 模块标准实训页组件（任务标题 + 简介 + 步骤导航 + 步骤内容 + 操作按钮 + AI 侧边栏），自带 scoped 样式。
- `ProductStructureImageUpload.vue`：图片上传封装（`el-upload` + 预览列表）。

### 5.3 学生端公共样式

- `src/assets/styles/student-training.scss`：学生实训页全局样式根。定义 `:root` 字号变量、`.student-training-shell` 主题色、背景渐变、网格布局、侧边 AI 栏折叠/展开宽度等。**统一 UI 风格首选改这里 + 各页 scoped 样式。**

---

## 6. 三种布局形态（UI 统一的关键）

| 形态 | 识别特征 | 使用页面 |
|------|---------|---------|
| 新版实训壳 | `student-training-shell` + `task-header` + `TrainingTaskBrief` + `step-indicator/step-tabs` + `TrainingAiSidebar` | foundation 全部、demand 大部分、product 大部分、test/index、test/promotion、channel/index、channel/supplier、assessment 全部 |
| 旧版 legacy 页 | `legacy-training-page` + `TrainingIntro` + `TrainingLegacyActions` | `demand/user`、`test/marketing`、`test/channel`、`channel/purchase` |
| 通用渲染页 | `GenericTrainingPage` / `CustomTrainingStepPage` / `ProductStandardTrainingPage` | 综合实训、动态任务、自定义步骤、product 部分页 |

**UI 调整建议**：
1. 优先统一 `student-training.scss` 与 `TrainingAiSidebar`/`TrainingTaskBrief`/步骤导航等公共件——影响面覆盖 20+ 页。
2. 旧版 legacy 4 页（demand/user、test/marketing、test/channel、channel/purchase）风格最不统一，建议重点处理。
3. 注意孤立硬编码配色：`visual-analysis`（`#06121f` 深蓝）、`exam/index`（`#16839c` 青绿）、`test-report`（text-shadow 白字）与学生实训蓝色系不一致。
4. 部分页面有独立 scoped 根 class（`industry-pest-page`、`competitive-analysis-page`、`opportunity-core`、`feasibility-core` 等），调整时需逐页确认。

---

## 7. 未注册路由的孤儿页面（UI 调整可忽略，建议后续清理）

| 文件 | 说明 |
|------|------|
| `views/demand/index.vue` | 已被 `demand/industry-demand-analysis.vue` 取代（路由 `/demand/index` 指向后者） |
| `views/demand/environment.vue` | 已被 `demand/competitive-environment-analysis.vue` 取代 |
| `views/product/index.vue` | 已被 `product/market-opportunity-selection.vue` 取代（路由 `/product/index` 指向后者） |
| `views/assessment/kano.vue` / `five.vue` / `market.vue` / `traffic.vue` | 未在路由中注册，疑似旧版遗留 |
| `views/learningCenter/*.vue`（learningResources / evaluation / Achievement） | 未在学生路由中注册 |
| `views/demand/industry-demand-analysis` 之外的重复实现 | 见上 |

> 注意：`studentDemo/index.vue` 有 hidden 路由 `/student-demo`，属演示页。

---

## 8. 学生端实训模块导航来源（菜单 ≠ 路由）

- 学生左侧/顶部实训模块页签由后端接口返回任务列表，经 `src/utils/studentTrainingNavigation.js` 的 `buildStudentTaskSections()` 按模块分组生成，任务 `taskKey` → 路由映射写在 `knownTaskPaths` 中（23 个映射）。
- **改路由前先对照 `knownTaskPaths`**，新增页面需在此登记 `taskKey → path`，否则学生菜单点不进去。
- 综合实训（`comprehensive-case-training`）单独作为顶部任务，指向 `/comprehensive/index`。