You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
18 KiB
18 KiB
学生端页面 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（卡拉杰克模型长文介绍）+ 四象限矩阵分析。 - 供应商评估与选择（
workspaceheader）：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 调整建议：
- 优先统一
student-training.scss与TrainingAiSidebar/TrainingTaskBrief/步骤导航等公共件——影响面覆盖 20+ 页。 - 旧版 legacy 4 页（demand/user、test/marketing、test/channel、channel/purchase）风格最不统一，建议重点处理。
- 注意孤立硬编码配色：
visual-analysis（#06121f深蓝）、exam/index（#16839c青绿）、test-report（text-shadow 白字）与学生实训蓝色系不一致。 - 部分页面有独立 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。