diff --git a/src/api/studentTrainingAnswer.js b/src/api/studentTrainingAnswer.js
index 04acd03..31d50a1 100644
--- a/src/api/studentTrainingAnswer.js
+++ b/src/api/studentTrainingAnswer.js
@@ -15,13 +15,6 @@ const newProductSurveyStepOneAnswers = {
   "selling-point-11": "有形层",
 };
 
-const productDevelopmentProcessStepOneAnswers = {
-  "1.1": "关键任务", "1.2": "关键任务", "2.1": "关键任务", "2.2": "非关键任务", "2.3": "关键任务",
-  "3.1": "关键任务", "3.2": "关键任务", "3.3": "非关键任务", "3.4": "关键任务", "3.5": "关键任务", "3.6": "关键任务",
-  "4.1": "关键任务", "4.2": "关键任务", "4.3": "关键任务", "4.4": "关键任务",
-  "5.1": "关键任务", "5.2": "关键任务", "5.3": "关键任务", "5.4": "关键任务",
-};
-
 function demoResult(taskKey) {
   try { return JSON.parse(sessionStorage.getItem(getDemoAnswerKey(taskKey)) || "null"); } catch (error) { return null; }
 }
@@ -102,6 +95,56 @@ export function checkNewProductSurveyStepOne(items) {
   });
 }
 
+export function checkMarketOpportunitySelectionStepOne(items) {
+  const expected = {
+    "search-count": "市场规模", "demand-supply-ratio": "竞争强度", "transaction-amount": "市场规模", "transaction-growth": "市场潜力",
+    "category-transaction-growth": "市场潜力", "online-products": "竞争强度", "online-merchants": "竞争强度", "organic-traffic-ratio": "运营难度",
+  };
+  if (isStudentDemo()) {
+    const list = Array.isArray(items) ? items : [];
+    const incorrect = list.find((item) => expected[item?.id] !== item?.category);
+    if (list.length !== Object.keys(expected).length || incorrect) return Promise.reject(new Error("指标分类有误，请根据提示重新选择"));
+    return Promise.resolve({ code: 200, data: { correctCount: Object.keys(expected).length, totalCount: Object.keys(expected).length, allCorrect: true, message: "校验通过" } });
+  }
+  return request({ url: "/api/student-training-answers/market-opportunity-selection/step-1/check", method: "post", data: { items }, headers: { repeatSubmit: false } });
+}
+
+export function checkMarketOpportunitySelectionStepTwo(payload) {
+  const weights = Array.isArray(payload?.weights) ? payload.weights : [];
+  const expectedIds = ["search-count", "transaction-amount", "transaction-growth", "category-transaction-growth", "demand-supply-ratio", "online-products", "online-merchants", "organic-traffic-ratio"];
+  if (isStudentDemo()) {
+    const ids = new Set(weights.map((item) => item?.id));
+    const total = weights.reduce((sum, item) => sum + Number(item?.weight || 0), 0);
+    if (weights.length !== expectedIds.length || expectedIds.some((id) => !ids.has(id)) || weights.some((item) => !Number.isInteger(Number(item?.weight)) || Number(item.weight) < 1 || Number(item.weight) > 100) || total !== 100) {
+      return Promise.reject(new Error("二级指标权重需为 1 至 100 的整数，且合计必须为 100%"));
+    }
+    return Promise.resolve({ code: 200, data: { valid: true, message: "校验通过" } });
+  }
+  return request({ url: "/api/student-training-answers/market-opportunity-selection/step-2/validate", method: "post", data: { weights }, headers: { repeatSubmit: false } });
+}
+
+export function checkMarketOpportunitySelectionStepThree(payload) {
+  const scores = Array.isArray(payload?.scores) ? payload.scores : [];
+  const expectedIds = ["smart-fitness-mirror", "smart-bathroom-mirror", "smart-beauty-mirror"];
+  if (isStudentDemo()) {
+    const ids = new Set(scores.map((item) => item?.id));
+    if (scores.length !== expectedIds.length || expectedIds.some((id) => !ids.has(id)) || scores.some((item) => !Number.isFinite(Number(item?.score)) || Number(item.score) < 0 || Number(item.score) > 100)) {
+      return Promise.reject(new Error("请为三类产品填写 0 至 100 分的综合得分"));
+    }
+    return Promise.resolve({ code: 200, data: { valid: true, message: "校验通过" } });
+  }
+  return request({ url: "/api/student-training-answers/market-opportunity-selection/step-3/validate", method: "post", data: { scores }, headers: { repeatSubmit: false } });
+}
+
+export function checkMarketOpportunitySelectionStepFour(payload) {
+  const visualizationUrl = String(payload?.visualizationUrl || "").trim();
+  if (isStudentDemo()) {
+    if (!visualizationUrl) return Promise.reject(new Error("请上传数据可视化结果图"));
+    return Promise.resolve({ code: 200, data: { valid: true, message: "校验通过" } });
+  }
+  return request({ url: "/api/student-training-answers/market-opportunity-selection/step-4/validate", method: "post", data: { visualizationUrl }, headers: { repeatSubmit: false } });
+}
+
 export function checkProductDevelopmentProcessStepOne(items) {
   if (isStudentDemo()) {
     const results = Array.isArray(items)
@@ -372,3 +415,179 @@ export function checkProductDevelopmentFactorsStepFour(payload) {
   }
   return request({ url: "/api/student-training-answers/product-development-factors/step-4/validate", method: "post", data: payload, headers: { repeatSubmit: false } });
 }
+
+export function checkConsumerBehaviorStepOne(payload) {
+  const hypotheses = Array.isArray(payload?.hypotheses) ? payload.hypotheses : [];
+  if (isStudentDemo()) {
+    const incomplete = hypotheses.find((item) => ["targetGroup", "keyFinding", "coreHypothesis"].some((field) => !String(item?.[field] || "").trim()));
+    if (!hypotheses.length || incomplete) {
+      return Promise.reject(new Error("请完整填写目标人群、实训8关键发现和问卷核心假设"));
+    }
+    return Promise.resolve({ code: 200, data: { valid: true, message: "校验通过" } });
+  }
+  return request({
+    url: "/api/student-training-answers/consumer-behavior/step-1/validate",
+    method: "post",
+    data: { hypotheses },
+    headers: { repeatSubmit: false },
+  });
+}
+
+export function checkConsumerBehaviorStepTwo(payload) {
+  const needs = Array.isArray(payload?.needs) ? payload.needs : [];
+  const allowedTypes = ["基本型", "期望型", "兴奋型", "无差异型", "反向型"];
+  if (isStudentDemo()) {
+    const incomplete = needs.find((item) => !String(item?.feature || "").trim()
+      || !allowedTypes.includes(item?.kanoType) || !String(item?.featureDirection || "").trim());
+    if (!needs.length || needs.length > 20 || incomplete) {
+      return Promise.reject(new Error("请完整填写功能、KANO类型和对应功能方向（最多20行）"));
+    }
+    return Promise.resolve({ code: 200, data: { valid: true, message: "校验通过" } });
+  }
+  return request({
+    url: "/api/student-training-answers/consumer-behavior/step-2/validate",
+    method: "post",
+    data: { needs },
+    headers: { repeatSubmit: false },
+  });
+}
+
+export function checkConsumerBehaviorStepThree(payload) {
+  if (isStudentDemo()) {
+    const importedDocumentUrl = String(payload?.importedDocumentUrl || "").trim();
+    const questions = Array.isArray(payload?.questions) ? payload.questions : [];
+    const requiredSections = ["基本信息", "购买行为", "需求偏好", "开放建议"];
+    const validQuestions = questions.filter((item) => String(item?.title || "").trim());
+    const complete = requiredSections.every((section) => validQuestions.some((item) => item.section === section))
+      && validQuestions.some((item) => item.section === "需求偏好" && item.type === "LIKERT");
+    if (!importedDocumentUrl && !complete) {
+      return Promise.reject(new Error("请完整设计包含四个部分且含Likert五级量表的问卷，或导入Word问卷"));
+    }
+    return Promise.resolve({ code: 200, data: { valid: true, message: "校验通过" } });
+  }
+  return request({
+    url: "/api/student-training-answers/consumer-behavior/step-3/validate",
+    method: "post",
+    data: payload,
+    headers: { repeatSubmit: false },
+  });
+}
+
+export function previewConsumerBehaviorQuestionnaireWord(data) {
+  if (isStudentDemo()) {
+    return Promise.reject(new Error("演示模式不支持 Word 文档预览"));
+  }
+  return request({
+    url: "/api/student-training-answers/consumer-behavior/step-3/word-preview",
+    method: "post",
+    data,
+    headers: {
+      "Content-Type": "multipart/form-data",
+      repeatSubmit: false,
+    },
+  });
+}
+
+export function checkConsumerBehaviorStepFour(payload) {
+  if (isStudentDemo()) {
+    const rows = Array.isArray(payload?.rows) ? payload.rows : [];
+    if (rows.length < 5 || rows.some((item) => !String(item?.title || "").trim() || !String(item?.content || "").trim())) {
+      return Promise.reject(new Error("请完整填写 5 个问卷调研报告模块的标题和内容"));
+    }
+    return Promise.resolve({ code: 200, data: { valid: true, message: "校验通过" } });
+  }
+  return request({
+    url: "/api/student-training-answers/consumer-behavior/step-4/validate",
+    method: "post",
+    data: payload,
+    headers: { repeatSubmit: false },
+  });
+}
+
+export function checkProductValuePositioningStepOne(payload) {
+  const rows = Array.isArray(payload?.rows) ? payload.rows : [];
+  const types = ["核心痛点1", "核心痛点2", "核心痛点3", "弱需求", "伪需求"];
+  if (isStudentDemo()) {
+    const valid = rows.length === types.length && rows.every((row, index) => row?.id === index + 1
+      && row?.type === types[index]
+      && Boolean(String(row?.description || "").trim())
+      && Boolean(String(row?.scene || "").trim()));
+    return Promise.resolve({
+      code: 200,
+      data: {
+        valid,
+        message: valid ? "核心痛点分类填写完整。" : "请完成 3 个核心痛点、弱需求和伪需求的描述与场景。",
+      },
+    });
+  }
+  return request({
+    url: "/api/student-training-answers/product-value-positioning/step-1/validate",
+    method: "post",
+    data: { rows },
+    headers: { repeatSubmit: false },
+  });
+}
+
+export function checkProductValuePositioningStepTwo(payload) {
+  const customerProfile = payload?.customerProfile || {};
+  const valueMap = payload?.valueMap || {};
+  if (isStudentDemo()) {
+    const requiredValues = [
+      customerProfile.jobs, customerProfile.pains, customerProfile.gains,
+      valueMap.products, valueMap.painRelievers, valueMap.gainCreators,
+      payload?.canvasUrl,
+    ];
+    const valid = requiredValues.every((item) => Boolean(String(item || "").trim()));
+    return Promise.resolve({
+      code: 200,
+      data: {
+        valid,
+        message: valid ? "价值主张画布填写完整。" : "请完整填写用户档案、产品价值地图并上传产品价值主张画布。",
+      },
+    });
+  }
+  return request({
+    url: "/api/student-training-answers/product-value-positioning/step-2/validate",
+    method: "post",
+    data: payload,
+    headers: { repeatSubmit: false },
+  });
+}
+
+export function checkProductValuePositioningStepThree(payload) {
+  const statements = Array.isArray(payload?.statements) ? payload.statements : [];
+  const requiredFields = ["targetUser", "productName", "productCategory", "coreValue", "differentiationReason"];
+  if (isStudentDemo()) {
+    const valid = statements.length === 2 && statements.every((statement, index) => statement?.id === index + 1
+      && requiredFields.every((field) => Boolean(String(statement?.[field] || "").trim())));
+    return Promise.resolve({
+      code: 200,
+      data: { valid, message: valid ? "两版定位陈述填写完整。" : "请完整填写两个产品价值定位陈述版本。" },
+    });
+  }
+  return request({
+    url: "/api/student-training-answers/product-value-positioning/step-3/validate",
+    method: "post",
+    data: { statements },
+    headers: { repeatSubmit: false },
+  });
+}
+
+export function checkProductValuePositioningStepFour(payload) {
+  const sectionKeys = ["marketInsights", "marketOverview", "userAnalysis", "competitorAnalysis", "productRequirements"];
+  if (isStudentDemo()) {
+    const valid = sectionKeys.every((key) => Array.isArray(payload?.[key]) && payload[key].length > 0
+      && payload[key].every((row) => Boolean(String(row?.content || "").trim())))
+      && Boolean(String(payload?.productPositioning || "").trim());
+    return Promise.resolve({
+      code: 200,
+      data: { valid, message: valid ? "MRD 文档填写完整。" : "请完整填写 MRD 的五组分析内容和产品定位。" },
+    });
+  }
+  return request({
+    url: "/api/student-training-answers/product-value-positioning/step-4/validate",
+    method: "post",
+    data: payload,
+    headers: { repeatSubmit: false },
+  });
+}
diff --git a/src/router/index.js b/src/router/index.js
index 7559532..b529aa0 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -286,7 +286,7 @@ export const dynamicRoutes = [
       // 产品定位
       {
         path: "index",
-        component: () => import("@/views/product/index.vue"),
+        component: () => import("@/views/product/market-opportunity-selection.vue"),
         name: "product",
         meta: { title: "市场机会识别与选品", icon: "产品规划", affix: true, pageKey: "market-opportunity-selection" },
       },
diff --git a/src/views/demand/consumer-behavior.vue b/src/views/demand/consumer-behavior.vue
index d406f80..98c3a99 100644
--- a/src/views/demand/consumer-behavior.vue
+++ b/src/views/demand/consumer-behavior.vue
@@ -49,6 +49,13 @@
           :accept="uploadAccept"
           @change="handleFileChange"
         />
+        <input
+          ref="questionnaireImportInputRef"
+          type="file"
+          class="file-input"
+          accept=".docx"
+          @change="handleQuestionnaireImport"
+        />
 
         <section class="step-card consumer-behavior-step-card">
         <div v-if="activeStepName" class="step-title-row">
@@ -58,81 +65,170 @@
           </div>
         </div>
         <section v-if="form.activeStep === 0" class="step-panel">
-          <div class="questionnaire-head">
-            <p class="task-desc questionnaire-desc">
-              借助AI，生成智能产品购买决策因素调研问卷，提示词参考：设计问卷，用于分析用户购买智能产品的决策因素。问卷完成后复制到下述编辑框，并上传问卷pdf文档。
+          <div class="hypothesis-head">
+            <p class="task-desc hypothesis-desc">
+              基于实训 8 的用户画像结论，明确本次问卷调查的目标人群与核心假设，填写下表。
             </p>
-            <el-button class="upload-action questionnaire-upload" :loading="uploading" @click="triggerFileSelect('questionnaire')">
-              <el-icon><Upload /></el-icon>
-              上传问卷
-            </el-button>
-          </div>
-          <div v-if="form.questionnaireFileName" class="file-chip questionnaire-file">
-            <el-icon><Document /></el-icon>
-            <span>{{ form.questionnaireFileName }}</span>
+            <div class="hypothesis-actions">
+              <el-button class="hypothesis-action" @click="addTargetHypothesis">增加一行</el-button>
+              <el-button class="hypothesis-action hypothesis-action--quiet" :disabled="form.targetHypotheses.length <= 1" @click="removeTargetHypothesis">删除一行</el-button>
+            </div>
+            <el-button class="training-eight-action" @click="viewTargetUserProfile">查看实训8</el-button>
           </div>
-          <div class="field-block questionnaire-field">
-            <span>示例：</span>
-            <div
-              ref="questionnaireEditorRef"
-              class="large-textarea questionnaire-textarea"
-              contenteditable="true"
-              role="textbox"
-              aria-multiline="true"
-              data-placeholder="请将借助AI设计完成的问卷内容复制到这里"
-              @input="syncQuestionnaireText"
-              @blur="syncQuestionnaireText"
-            ></div>
+          <div class="target-hypothesis-table-wrap">
+            <table class="target-hypothesis-table">
+              <thead>
+                <tr>
+                  <th>目标人群</th>
+                  <th>实训8关键发现</th>
+                  <th>本次问卷需验证的核心假设</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr v-for="(hypothesis, index) in form.targetHypotheses" :key="index">
+                  <td><input v-model="hypothesis.targetGroup" class="hypothesis-input" placeholder="例如：职场白领（25-35岁）" /></td>
+                  <td><textarea v-model="hypothesis.keyFinding" class="hypothesis-textarea" placeholder="例如：高压工作、入睡困难、看重效率" /></td>
+                  <td><textarea v-model="hypothesis.coreHypothesis" class="hypothesis-textarea" placeholder="例如：是否更关注白噪声质量与智能场景联动？对价格的敏感度如何？" /></td>
+                </tr>
+              </tbody>
+            </table>
           </div>
+          <p class="hypothesis-tip">可编辑表格内容；请基于实训 8 的结论明确每类目标人群的问卷验证方向。</p>
         </section>
 
         <section v-else-if="form.activeStep === 1" class="step-panel">
-          <p class="task-desc">假如本次调研共回收有效问卷 500 份，以下是各题目的数据统计结果：</p>
-          <div class="data-board">
-            <pre>{{ surveyStats }}</pre>
+          <div class="kano-head">
+            <p class="task-desc kano-desc">
+              在正式设计问卷之前，需要理解消费者需求的层次结构。不同类型的需求对购买决策的影响方式截然不同。结合案例资料，通过 KANO 模型进行用户需求分类，填写下表。
+            </p>
+            <div class="kano-actions">
+              <el-button class="hypothesis-action" :disabled="form.kanoNeeds.length >= KANO_NEED_LIMIT" @click="addKanoNeed">增加一行</el-button>
+              <el-button class="hypothesis-action hypothesis-action--quiet" :disabled="form.kanoNeeds.length <= 1" @click="removeKanoNeed">删除一行</el-button>
+            </div>
+          </div>
+          <div class="kano-table-wrap">
+            <table class="kano-table">
+              <thead>
+                <tr>
+                  <th>编号</th>
+                  <th>功能</th>
+                  <th>对应KANO类型</th>
+                  <th>对应功能方向</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr v-for="(need, index) in form.kanoNeeds" :key="index">
+                  <td class="kano-index">{{ index + 1 }}</td>
+                  <td><textarea v-model="need.feature" class="hypothesis-textarea kano-textarea" placeholder="示例：灯光亮度可无级调节" aria-label="功能" /></td>
+                  <td class="kano-select-cell">
+                    <el-select v-model="need.kanoType" class="kano-select" placeholder="请选择类型" aria-label="对应KANO类型">
+                      <el-option v-for="option in kanoTypeOptions" :key="option" :label="option" :value="option" />
+                    </el-select>
+                  </td>
+                  <td><textarea v-model="need.featureDirection" class="hypothesis-textarea kano-textarea" placeholder="示例：照明系统" aria-label="对应功能方向" /></td>
+                </tr>
+              </tbody>
+            </table>
           </div>
-          <p class="task-desc">请把数据整理到 Excel 中，并上传 Excel 文件。</p>
-          <div class="upload-row">
-            <el-button class="upload-action" :loading="uploading" @click="triggerFileSelect('dataExcel')">
+          <p class="hypothesis-tip">功能与功能方向均可填写；KANO 类型请从下拉菜单选择。最多可填写 {{ KANO_NEED_LIMIT }} 行。</p>
+        </section>
+
+        <section v-else-if="form.activeStep === 2" class="step-panel">
+          <div class="questionnaire-design-head">
+            <p class="task-desc questionnaire-design-desc">
+              结合前面的实训分析，设计一份完整的消费者需求调研问卷，包含基本信息、购买行为、需求偏好和开放建议四部分。需求偏好部分请用 Likert 五级量表评价第 2 步归类的功能。
+            </p>
+            <el-button class="questionnaire-import-action" :loading="questionnaireImporting" @click="triggerQuestionnaireImport">
               <el-icon><Upload /></el-icon>
-              上传Excel文件
+              导入问卷（Word 文档）
             </el-button>
-            <div v-if="form.dataExcelFileName" class="file-chip">
-              <el-icon><Document /></el-icon>
-              <span>{{ form.dataExcelFileName }}</span>
+          </div>
+
+          <div v-if="form.questionnaireImport?.name" class="questionnaire-imported-file">
+            <el-icon><Document /></el-icon>
+            <span>{{ form.questionnaireImport.name }}</span>
+            <button type="button" @click="showQuestionnairePreview = true">预览问卷</button>
+          </div>
+
+          <div class="questionnaire-editor-launcher">
+            <div class="questionnaire-editor-launcher__copy">
+              <span class="section-eyebrow">Questionnaire Studio</span>
+              <h4>在线编写消费者需求调研问卷</h4>
+              <p>通过分区、题型与选项设置，快速完成可执行的问卷结构。</p>
             </div>
+            <el-button class="questionnaire-editor-launcher__action" @click="questionnaireEditorVisible = true">进入问卷编辑器</el-button>
           </div>
-        </section>
 
-        <section v-else-if="form.activeStep === 2" class="step-panel">
-          <p class="task-desc">
-            请根据上一步骤整理的Excel文件，利用Excel进行数据可视化，上传Excel可视化操作截图。
+          <p class="questionnaire-editor-summary">
+            已编辑 {{ form.questionnaireQuestions.length }} 题；{{ form.questionnaireImport?.name ? "已导入 1 份 Word 问卷，可随时预览。" : "也可导入已完成的 .docx 问卷。" }}
           </p>
 
-          <div class="visual-group" v-for="group in visualGroups" :key="group.title">
-            <h5>{{ group.title }}</h5>
-            <div class="visual-grid">
-              <div v-for="item in group.items" :key="item.key" class="visual-card">
-                <span>{{ item.label }}</span>
-                <el-button class="mini-upload" :loading="uploading" @click="triggerFileSelect('chart', item.key)">
-                  上传Excel图形截图
-                </el-button>
-                <small v-if="form.chartFiles[item.key]?.name">{{ form.chartFiles[item.key].name }}</small>
-              </div>
+          <el-dialog v-model="questionnaireEditorVisible" title="消费者需求调研问卷编辑器" width="min(1120px, 94vw)" class="questionnaire-editor-dialog" append-to-body>
+            <div class="questionnaire-editor-dialog__intro">
+              <p>请覆盖基本信息、购买行为、需求偏好和开放建议四部分；需求偏好至少设置一题 Likert 五级量表。</p>
+              <el-button class="questionnaire-editor-add" @click="addQuestionnaireQuestion">新增题目</el-button>
             </div>
-          </div>
+            <div class="questionnaire-question-list">
+              <article v-for="(question, index) in form.questionnaireQuestions" :key="question.id" class="questionnaire-question-card">
+                <span class="questionnaire-question-card__number">{{ String(index + 1).padStart(2, "0") }}</span>
+                <div class="questionnaire-question-card__fields">
+                  <el-select v-model="question.section" aria-label="问卷分区">
+                    <el-option v-for="section in questionnaireSections" :key="section.value" :label="section.label" :value="section.value" />
+                  </el-select>
+                  <el-select v-model="question.type" aria-label="题目类型">
+                    <el-option v-for="type in questionnaireQuestionTypes" :key="type.value" :label="type.label" :value="type.value" />
+                  </el-select>
+                  <el-input v-model="question.title" :placeholder="questionPlaceholder(question.section)" aria-label="题目内容" />
+                  <el-input v-if="question.type === 'SINGLE' || question.type === 'MULTIPLE'" v-model="question.options" placeholder="选项以中文逗号或换行分隔" aria-label="题目选项" />
+                  <p v-else-if="question.type === 'LIKERT'" class="likert-tip">量表固定为：非常不重要、较不重要、一般、较重要、非常重要</p>
+                </div>
+                <button type="button" class="questionnaire-question-card__remove" :disabled="form.questionnaireQuestions.length <= 4" @click="removeQuestionnaireQuestion(index)">删除</button>
+              </article>
+            </div>
+          </el-dialog>
 
-          <h5 class="analysis-heading">
-            4.结合开放性问题建议以及上述数据可视化结果，进行用户购买智能产品决策因素分析，给出分析报告，注意结合不同类别调研数据进行综合性交叉分析。
-          </h5>
-          <ReportFields v-model="form.report" />
+          <el-dialog v-model="showQuestionnairePreview" title="导入问卷预览" width="min(900px, 94vw)" class="questionnaire-preview-dialog" append-to-body>
+            <div v-if="form.questionnaireImport?.previewContent" class="questionnaire-word-preview">{{ form.questionnaireImport.previewContent }}</div>
+            <p v-else class="questionnaire-preview-empty">暂未解析到可预览内容。</p>
+          </el-dialog>
         </section>
 
         <section v-else class="step-panel">
-          <p class="task-desc">
-            请根据问卷设计、数据收集与数据可视化结果，整理形成最终分析报告。
+          <p class="task-desc survey-report-desc">
+            将步骤三设计的调查问卷导入问卷星等在线问卷调查平台，开展问卷调查。基于收集到的数据，填写问卷调查报告。
           </p>
-          <ReportFields v-model="form.report" />
+          <div class="survey-report-table-wrap">
+            <table class="survey-report-table">
+              <thead>
+                <tr>
+                  <th>报告模块标题</th>
+                  <th>内容</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr v-for="(row, index) in form.surveyReportRows" :key="index">
+                  <td>
+                    <input v-model="row.title" class="survey-report-title-input" :placeholder="surveyReportTitlePlaceholder(index)" :aria-label="`第${index + 1}个报告模块标题`" />
+                  </td>
+                  <td>
+                    <textarea v-model="row.content" class="survey-report-content-input" :placeholder="surveyReportContentPlaceholder(index)" :aria-label="`第${index + 1}个报告模块内容`" />
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+          <div class="survey-report-guide">
+            <div>
+              <h5>可参考以下方法</h5>
+              <p>1. 根据报告模板，自行分析撰写问卷调查报告。</p>
+              <p>2. 使用通用 AI 大模型辅助完成报告：请根据用户调研数据，从用户购买核心决策因素、不同群体决策因素差异、未购买用户的顾虑与市场机会、信息获取渠道与购买场景等方面撰写报告。</p>
+              <p>3. 如问卷调查收集的数据不理想，可使用本实训提供的数据进行分析，生成调查报告。</p>
+            </div>
+            <el-button class="survey-report-template-action" @click="downloadSurveyReportTemplate">
+              <el-icon><Download /></el-icon>
+              下载报告模板
+            </el-button>
+          </div>
         </section>
 
         <div class="step-actions">
@@ -173,15 +269,17 @@
 </template>
 
 <script setup>
-import { computed, defineComponent, getCurrentInstance, h, nextTick, onMounted, ref } from "vue";
+import { computed, getCurrentInstance, nextTick, onMounted, ref } from "vue";
 import { ArrowLeft, ArrowRight, CircleCheck, Document, Download, Upload } from "@element-plus/icons-vue";
 import TrainingAiSidebar from "@/views/components/TrainingAiSidebar.vue";
 import TrainingMaterialButton from "@/views/components/TrainingMaterialButton.vue";
 import TrainingTaskBrief from "@/views/components/TrainingTaskBrief.vue";
 import { getTrainingTaskByKey } from "@/api/trainingTask";
-import { getStudentTrainingAnswer, saveStudentTrainingAnswer, uploadStudentTrainingFile } from "@/api/studentTrainingAnswer";
+import { checkConsumerBehaviorStepOne, checkConsumerBehaviorStepTwo, checkConsumerBehaviorStepThree, checkConsumerBehaviorStepFour, getStudentTrainingAnswer, previewConsumerBehaviorQuestionnaireWord, saveStudentTrainingAnswer, uploadStudentTrainingFile } from "@/api/studentTrainingAnswer";
 
 const TASK_KEY = "consumer-behavior";
+const KANO_NEED_LIMIT = 20;
+let questionnaireQuestionSequence = 0;
 const { proxy } = getCurrentInstance();
 
 const defaultRequirement = "消费者需求与行为分析用于识别目标用户的购买动机、决策因素、渠道偏好和使用场景，为智能产品功能设计与市场切入提供依据。";
@@ -289,86 +387,16 @@ const visualGroups = [
   },
 ];
 
-const reportPlaceholders = {
-  coreDecisionFactors:
-    "从调研数据可以看出，功能实用性和产品质量与稳定性是用户购买智能产品时最为关注的因素，选择“重要”和“非常重要”的人数占比分别达到80%和75%。这表明用户在购买智能产品时，更加注重产品能否切实解决实际问题，以及产品在长期使用过程中的可靠性。\n\n价格也是用户重点考虑的因素之一，有65%的用户认为价格重要或非常重要。不同收入群体对价格的敏感度有所差异，中低收入群体在购买智能产品时，价格仍是主要的制约因素，而高收入群体则更愿意为高品质、高性能的产品支付更高价格。",
-  groupDifferences:
-    "1. 年龄差异：19-25岁的年轻群体更注重产品的外观设计和生态兼容性，他们追求个性化和时尚感，同时希望智能产品能够与其他设备实现联动。\n2. 收入差异：高收入群体对品牌知名度和数据安全与隐私保护的关注度更高；低收入群体则主要聚焦于价格和功能实用性。\n3. 城市级别差异：一线城市和新一线城市用户对生态兼容性和创新功能的接受度更高，三线及以下城市用户更关注价格和产品质量。",
-  nonPurchaseOpportunity:
-    "未购买智能产品的用户中，价格过高是最主要的原因，占比达到43.75%。这反映出当前部分智能产品的价格超出了一些用户的承受范围，市场上存在对高性价比智能产品的需求。\n\n此外，对智能产品功能不了解也是未购买的重要原因之一。企业需要加强市场教育，通过产品介绍视频、使用教程和线下体验，降低用户认知门槛。同时，数据安全与隐私保护也可以作为产品差异化卖点。",
-  channelScenario:
-    "电商平台和社交媒体是用户获取智能产品信息的主要渠道，分别有60%和50%的用户选择。企业应加大在电商平台和社交媒体上的内容投放，通过评测、种草、场景演示等方式提高产品曝光。\n\n购买场景方面，自己使用是最主要场景，占比70%。但赠送家人、朋友也占据一定比例，企业可以针对礼品场景设计套装和包装，提高产品附加值。",
-};
-
-const emptyReport = {
-  coreDecisionFactors: "",
-  groupDifferences: "",
-  nonPurchaseOpportunity: "",
-  channelScenario: "",
-};
-
-const reportSampleMarkers = {
-  coreDecisionFactors: ["从调研数据可以看出", "价格也是用户重点考虑的因素之一"],
-  groupDifferences: ["年龄差异", "收入差异", "城市级别差异"],
-  nonPurchaseOpportunity: ["未购买智能产品的用户中", "价格过高是最主要的原因"],
-  channelScenario: ["电商平台和社交媒体是用户获取智能产品信息的主要渠道", "购买场景方面"],
-};
-
-function isDefaultReportSample(key, value) {
-  const currentValue = String(value || "");
-  return (
-    currentValue === reportPlaceholders[key] ||
-    reportSampleMarkers[key]?.some((marker) => currentValue.includes(marker))
-  );
-}
-
-const ReportFields = defineComponent({
-  name: "ReportFields",
-  props: {
-    modelValue: {
-      type: Object,
-      required: true,
-    },
-  },
-  emits: ["update:modelValue"],
-  setup(props, { emit }) {
-    const update = (key, value) => {
-      emit("update:modelValue", {
-        ...props.modelValue,
-        [key]: value,
-      });
-    };
-    const fields = [
-      ["coreDecisionFactors", "核心决策因素", reportPlaceholders.coreDecisionFactors],
-      ["groupDifferences", "不同群体决策因素差异", reportPlaceholders.groupDifferences],
-      ["nonPurchaseOpportunity", "未购买用户的顾虑与市场机会", reportPlaceholders.nonPurchaseOpportunity],
-      ["channelScenario", "信息获取渠道与购买场景分析", reportPlaceholders.channelScenario],
-    ];
-    return () =>
-      h(
-        "div",
-        { class: "report-fields" },
-        fields.map(([key, label, placeholder]) =>
-          h("label", { class: "field-block", key }, [
-            h("span", label),
-            h("textarea", {
-              class: "large-textarea",
-              value: isDefaultReportSample(key, props.modelValue[key]) ? "" : props.modelValue[key],
-              placeholder,
-              onInput: (event) => update(key, event.target.value),
-            }),
-          ])
-        )
-      );
-  },
-});
-
 const taskConfig = ref(null);
 const saving = ref(false);
 const uploading = ref(false);
+const questionnaireImporting = ref(false);
 const fileInputRef = ref(null);
+const questionnaireImportInputRef = ref(null);
 const questionnaireEditorRef = ref(null);
 const uploadContext = ref({ type: "", key: "" });
+const questionnaireEditorVisible = ref(false);
+const showQuestionnairePreview = ref(false);
 
 const uploadAccept = computed(() => {
   if (uploadContext.value.type === "questionnaire") return ".pdf";
@@ -380,16 +408,72 @@ const uploadAccept = computed(() => {
 function createForm() {
   return {
     activeStep: 0,
+    targetHypotheses: createTargetHypotheses(),
+    kanoNeeds: createKanoNeeds(),
+    questionnaireQuestions: createQuestionnaireQuestions(),
+    questionnaireImport: null,
+    surveyReportRows: createSurveyReportRows(),
     questionnaireText: questionnaireTemplate,
     questionnaireFileName: "",
     questionnaireFileUrl: "",
     dataExcelFileName: "",
     dataExcelFileUrl: "",
     chartFiles: {},
-    report: { ...emptyReport },
   };
 }
 
+function createTargetHypotheses() {
+  return [
+    { targetGroup: "职场白领（25-35岁）", keyFinding: "", coreHypothesis: "" },
+    { targetGroup: "精致妈妈（28-38岁）", keyFinding: "", coreHypothesis: "" },
+    { targetGroup: "银发人群（50-65岁）", keyFinding: "", coreHypothesis: "" },
+  ];
+}
+
+function createEmptyTargetHypothesis() {
+  return { targetGroup: "", keyFinding: "", coreHypothesis: "" };
+}
+
+const kanoTypeOptions = ["基本型", "期望型", "兴奋型", "无差异型", "反向型"];
+const questionnaireSections = [
+  { value: "基本信息", label: "基本信息" },
+  { value: "购买行为", label: "购买行为" },
+  { value: "需求偏好", label: "需求偏好" },
+  { value: "开放建议", label: "开放建议" },
+];
+const questionnaireQuestionTypes = [
+  { value: "SINGLE", label: "单选题" },
+  { value: "MULTIPLE", label: "多选题" },
+  { value: "LIKERT", label: "Likert 五级量表" },
+  { value: "TEXT", label: "开放题" },
+];
+
+function createKanoNeeds() {
+  return Array.from({ length: 3 }, createEmptyKanoNeed);
+}
+
+function createEmptyKanoNeed() {
+  return { feature: "", kanoType: "", featureDirection: "" };
+}
+
+function createQuestionnaireQuestions() {
+  return [
+    createQuestionnaireQuestion("基本信息", "SINGLE"),
+    createQuestionnaireQuestion("购买行为", "SINGLE"),
+    createQuestionnaireQuestion("需求偏好", "LIKERT"),
+    createQuestionnaireQuestion("开放建议", "TEXT"),
+  ];
+}
+
+function createQuestionnaireQuestion(section = "基本信息", type = "SINGLE") {
+  questionnaireQuestionSequence += 1;
+  return { id: `question-${Date.now()}-${questionnaireQuestionSequence}`, section, type, title: "", options: "" };
+}
+
+function createSurveyReportRows() {
+  return Array.from({ length: 5 }, () => ({ title: "", content: "" }));
+}
+
 const form = ref(createForm());
 
 const taskTitle = computed(() => taskConfig.value?.taskName || "消费者需求与行为");
@@ -400,10 +484,10 @@ const flowSteps = computed(() => parseArray(taskConfig.value?.steps, []).slice(0
 const activeStepName = computed(() => flowSteps.value[form.value.activeStep] || "");
 
 const progressItems = computed(() => [
-  { text: form.value.questionnaireFileName ? "已完成：问卷上传" : "待完成：问卷设计与上传", status: form.value.questionnaireFileName ? "done" : "" },
+  { text: hasQuestionnaireDesign() ? "已完成：问卷设计" : "待完成：问卷设计", status: hasQuestionnaireDesign() ? "done" : "" },
   { text: form.value.dataExcelFileName ? "已完成：数据整理上传" : "待完成：整理并上传Excel", status: form.value.dataExcelFileName ? "done" : "" },
   { text: Object.keys(form.value.chartFiles).length ? "进行中：数据可视化截图" : "待完成：数据可视化截图", status: Object.keys(form.value.chartFiles).length ? "done" : "" },
-  { text: hasReportContent() ? "进行中：分析报告" : "待完成：分析报告", status: hasReportContent() ? "done" : "" },
+  { text: hasSurveyReport() ? "已完成：问卷调研报告" : "待完成：问卷调研报告", status: hasSurveyReport() ? "done" : "" },
 ]);
 
 onMounted(async () => {
@@ -458,8 +542,12 @@ function applySavedAnswer(value) {
       ...parsed,
       activeStep: Number.isInteger(parsed.activeStep) ? parsed.activeStep : 0,
       questionnaireText: normalizeQuestionnaireContent(parsed.questionnaireText || questionnaireTemplate),
+      targetHypotheses: normalizeTargetHypotheses(parsed.targetHypotheses),
+      kanoNeeds: normalizeKanoNeeds(parsed.kanoNeeds),
+      questionnaireQuestions: normalizeQuestionnaireQuestions(parsed.questionnaireQuestions),
+      questionnaireImport: normalizeQuestionnaireImport(parsed.questionnaireImport),
+      surveyReportRows: normalizeSurveyReportRows(parsed.surveyReportRows),
       chartFiles: parsed.chartFiles || {},
-      report: normalizeReport(parsed.report),
     };
     nextTick(renderQuestionnaireEditor);
   } catch (error) {
@@ -467,12 +555,50 @@ function applySavedAnswer(value) {
   }
 }
 
-function normalizeReport(value = {}) {
-  return Object.keys(emptyReport).reduce((report, key) => {
-    const currentValue = value?.[key] || "";
-    report[key] = isDefaultReportSample(key, currentValue) ? "" : currentValue;
-    return report;
-  }, { ...emptyReport });
+function normalizeTargetHypotheses(rows) {
+  if (!Array.isArray(rows) || !rows.length) return createTargetHypotheses();
+  return rows.map((row) => ({
+    targetGroup: String(row?.targetGroup || ""),
+    keyFinding: String(row?.keyFinding || ""),
+    coreHypothesis: String(row?.coreHypothesis || ""),
+  }));
+}
+
+function normalizeKanoNeeds(rows) {
+  if (!Array.isArray(rows) || !rows.length) return createKanoNeeds();
+  return rows.slice(0, KANO_NEED_LIMIT).map((row) => ({
+    feature: String(row?.feature || ""),
+    kanoType: kanoTypeOptions.includes(row?.kanoType) ? row.kanoType : "",
+    featureDirection: String(row?.featureDirection || ""),
+  }));
+}
+
+function normalizeQuestionnaireQuestions(rows) {
+  if (!Array.isArray(rows) || !rows.length) return createQuestionnaireQuestions();
+  return rows.map((row, index) => ({
+    id: String(row?.id || `question-restored-${index}`),
+    section: questionnaireSections.some((item) => item.value === row?.section) ? row.section : "基本信息",
+    type: questionnaireQuestionTypes.some((item) => item.value === row?.type) ? row.type : "SINGLE",
+    title: String(row?.title || ""),
+    options: String(row?.options || ""),
+  }));
+}
+
+function normalizeQuestionnaireImport(value) {
+  if (!value || typeof value !== "object" || !value.name) return null;
+  return {
+    name: String(value.name),
+    url: String(value.url || ""),
+    previewContent: String(value.previewContent || ""),
+  };
+}
+
+function normalizeSurveyReportRows(rows) {
+  if (!Array.isArray(rows) || !rows.length) return createSurveyReportRows();
+  return Array.from({ length: 5 }, (_, index) => ({
+    title: String(rows[index]?.title || ""),
+    content: String(rows[index]?.content || ""),
+  }));
 }
 
 function syncQuestionnaireText() {
@@ -528,6 +654,55 @@ function setActiveStep(index) {
   }
 }
 
+function addTargetHypothesis() {
+  form.value.targetHypotheses.push(createEmptyTargetHypothesis());
+}
+
+function removeTargetHypothesis() {
+  if (form.value.targetHypotheses.length <= 1) return;
+  form.value.targetHypotheses.pop();
+}
+
+function addKanoNeed() {
+  if (form.value.kanoNeeds.length >= KANO_NEED_LIMIT) {
+    proxy?.$modal?.msgWarning(`最多可填写 ${KANO_NEED_LIMIT} 行`);
+    return;
+  }
+  form.value.kanoNeeds.push(createEmptyKanoNeed());
+}
+
+function removeKanoNeed() {
+  if (form.value.kanoNeeds.length <= 1) return;
+  form.value.kanoNeeds.pop();
+}
+
+function questionPlaceholder(section) {
+  const placeholders = {
+    基本信息: "例如：您的年龄处于以下哪个区间？",
+    购买行为: "例如：您通常通过什么渠道购买智能助眠产品？",
+    需求偏好: "例如：白噪声可定时关闭对您有多重要？",
+    开放建议: "例如：您希望智能助眠产品增加哪些功能？",
+  };
+  return placeholders[section] || "请输入题目内容";
+}
+
+function addQuestionnaireQuestion() {
+  form.value.questionnaireQuestions.push(createQuestionnaireQuestion());
+}
+
+function removeQuestionnaireQuestion(index) {
+  if (form.value.questionnaireQuestions.length <= 4) return;
+  form.value.questionnaireQuestions.splice(index, 1);
+}
+
+function triggerQuestionnaireImport() {
+  questionnaireImportInputRef.value?.click();
+}
+
+function viewTargetUserProfile() {
+  window.open("/demand/people", "_blank", "noopener");
+}
+
 async function handleFileChange(event) {
   const file = event.target.files?.[0];
   if (!file) return;
@@ -557,16 +732,50 @@ async function handleFileChange(event) {
   }
 }
 
+async function handleQuestionnaireImport(event) {
+  const file = event.target.files?.[0];
+  if (!file) return;
+  if (!/\.docx$/i.test(file.name)) {
+    proxy?.$modal?.msgWarning("请导入 .docx 格式的 Word 问卷，以便在线预览");
+    event.target.value = "";
+    return;
+  }
+  const data = new FormData();
+  data.append("file", file);
+  questionnaireImporting.value = true;
+  try {
+    const previewRes = await previewConsumerBehaviorQuestionnaireWord(data);
+    const uploadRes = await uploadStudentTrainingFile(data);
+    const url = uploadRes?.url || uploadRes?.fileName || uploadRes?.data?.url || uploadRes?.data?.fileName || "";
+    form.value.questionnaireImport = {
+      name: file.name,
+      url,
+      previewContent: String(previewRes?.data?.content || ""),
+    };
+    showQuestionnairePreview.value = true;
+    proxy?.$modal?.msgSuccess("问卷导入成功");
+  } finally {
+    questionnaireImporting.value = false;
+    event.target.value = "";
+  }
+}
+
 function goPrev() {
   if (form.value.activeStep > 0) setActiveStep(form.value.activeStep - 1);
 }
 
-function goNext() {
+async function goNext() {
+  if (form.value.activeStep <= 2) await persist("IN_PROGRESS");
   if (form.value.activeStep < flowSteps.value.length - 1) setActiveStep(form.value.activeStep + 1);
 }
 
-function hasReportContent() {
-  return Object.values(form.value.report || {}).some((value) => String(value || "").trim());
+function hasSurveyReport() {
+  return form.value.surveyReportRows.every((item) => String(item?.title || "").trim() && String(item?.content || "").trim());
+}
+
+function hasQuestionnaireDesign() {
+  return Boolean(form.value.questionnaireImport?.name)
+    || form.value.questionnaireQuestions.some((item) => String(item?.title || "").trim());
 }
 
 function buildAnswerPayload(status) {
@@ -589,6 +798,21 @@ function buildAnswerPayload(status) {
 async function persist(status = "IN_PROGRESS") {
   saving.value = true;
   try {
+    if (status !== "RESET" && (form.value.activeStep === 0 || status === "SUBMITTED")) {
+      await checkConsumerBehaviorStepOne({ hypotheses: form.value.targetHypotheses });
+    }
+    if (status !== "RESET" && (form.value.activeStep === 1 || status === "SUBMITTED")) {
+      await checkConsumerBehaviorStepTwo({ needs: form.value.kanoNeeds });
+    }
+    if (status !== "RESET" && (form.value.activeStep === 2 || status === "SUBMITTED")) {
+      await checkConsumerBehaviorStepThree({
+        questions: form.value.questionnaireQuestions,
+        importedDocumentUrl: form.value.questionnaireImport?.url || "",
+      });
+    }
+    if (status !== "RESET" && (form.value.activeStep === 3 || status === "SUBMITTED")) {
+      await checkConsumerBehaviorStepFour({ rows: form.value.surveyReportRows });
+    }
     await saveStudentTrainingAnswer(TASK_KEY, buildAnswerPayload(status));
     proxy?.$modal?.msgSuccess(status === "SUBMITTED" ? "提交成功" : "保存成功");
   } finally {
@@ -618,6 +842,16 @@ function exportOutcome() {
     "",
     `当前步骤：${flowSteps.value[form.value.activeStep] || ""}`,
     "",
+    "问卷调查目标人群与核心假设：",
+    ...form.value.targetHypotheses.map((item, index) => `${index + 1}. 目标人群：${item.targetGroup || ""}\n实训8关键发现：${item.keyFinding || ""}\n核心假设：${item.coreHypothesis || ""}`),
+    "",
+    "KANO 用户需求分类：",
+    ...form.value.kanoNeeds.map((item, index) => `${index + 1}. 功能：${item.feature || ""}\nKANO类型：${item.kanoType || ""}\n功能方向：${item.featureDirection || ""}`),
+    "",
+    "消费者需求调研问卷：",
+    form.value.questionnaireImport?.name ? `导入问卷：${form.value.questionnaireImport.name}` : "",
+    ...form.value.questionnaireQuestions.map((item, index) => `${index + 1}. [${item.section}] ${item.title || ""}（${questionnaireQuestionTypes.find((type) => type.value === item.type)?.label || ""}）`),
+    "",
     "问卷设计：",
     questionnaireTextForExport(),
     "",
@@ -627,11 +861,8 @@ function exportOutcome() {
     "数据收集文件：",
     form.value.dataExcelFileName || "未上传",
     "",
-    "分析报告：",
-    `核心决策因素：\n${form.value.report.coreDecisionFactors || ""}`,
-    `不同群体决策因素差异：\n${form.value.report.groupDifferences || ""}`,
-    `未购买用户的顾虑与市场机会：\n${form.value.report.nonPurchaseOpportunity || ""}`,
-    `信息获取渠道与购买场景分析：\n${form.value.report.channelScenario || ""}`,
+    "问卷调研报告：",
+    ...form.value.surveyReportRows.map((item, index) => `${index + 1}. ${item.title || "未命名模块"}\n${item.content || ""}`),
   ];
   const blob = new Blob([lines.join("\n")], { type: "text/plain;charset=utf-8" });
   const url = URL.createObjectURL(blob);
@@ -641,6 +872,26 @@ function exportOutcome() {
   link.click();
   URL.revokeObjectURL(url);
 }
+
+function surveyReportTitlePlaceholder(index) {
+  return ["例如：调研背景与目的", "例如：样本与调研方法", "例如：用户购买决策因素", "例如：不同群体需求差异", "例如：产品建议与结论"][index] || "请输入报告模块标题";
+}
+
+function surveyReportContentPlaceholder(index) {
+  return ["说明本次问卷调研的背景、目标用户与调研目的。", "说明样本数量、调研时间、调研渠道与数据来源。", "结合问卷数据，分析影响用户购买决策的核心因素。", "比较不同人群在需求、价格、渠道或购买场景上的差异。", "总结调研结论，并提出产品功能、定价或营销建议。"][index] || "请输入报告内容";
+}
+
+function downloadSurveyReportTemplate() {
+  const rows = Array.from({ length: 5 }, (_, index) => `<tr><td>${surveyReportTitlePlaceholder(index)}</td><td>${surveyReportContentPlaceholder(index)}</td></tr>`).join("");
+  const html = `<!doctype html><html><head><meta charset="utf-8"><title>消费者需求调研报告模板</title><style>body{font-family:SimSun,serif;padding:32px;color:#222}h1{font-size:22px;text-align:center}p{line-height:1.75}table{width:100%;border-collapse:collapse;margin-top:24px}th,td{border:1px solid #777;padding:14px;vertical-align:top}th{background:#14a3df;color:#fff}td:first-child{width:22%}</style></head><body><h1>消费者需求调研报告</h1><p>请将步骤三设计的调查问卷导入在线问卷调查平台开展调研，并基于收集到的数据完成本报告。</p><table><thead><tr><th>报告模块标题</th><th>内容</th></tr></thead><tbody>${rows}</tbody></table></body></html>`;
+  const blob = new Blob([html], { type: "application/msword;charset=utf-8" });
+  const url = URL.createObjectURL(blob);
+  const link = document.createElement("a");
+  link.href = url;
+  link.download = "消费者需求调研报告模板.doc";
+  link.click();
+  URL.revokeObjectURL(url);
+}
 </script>
 
 <style scoped lang="scss">
@@ -1009,6 +1260,538 @@ function exportOutcome() {
   margin-bottom: 12px;
 }
 
+.hypothesis-head {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 18px 28px;
+  margin-bottom: 20px;
+}
+
+.hypothesis-desc {
+  margin: 0;
+  color: #d9eaf4;
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.hypothesis-actions,
+.kano-actions {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 14px;
+}
+
+.hypothesis-actions :deep(.hypothesis-action),
+.kano-actions :deep(.hypothesis-action),
+.training-eight-action {
+  min-width: 146px;
+  height: 42px;
+  border: 1px solid rgba(92, 224, 255, 0.7);
+  border-radius: 10px;
+  color: #ffffff;
+  background: linear-gradient(95deg, #0b84bd, #096491);
+  font-size: 15px;
+  font-weight: 800;
+}
+
+.hypothesis-actions :deep(.hypothesis-action--quiet),
+.kano-actions :deep(.hypothesis-action--quiet) {
+  border-color: rgba(115, 191, 220, 0.58);
+  color: #d9f4ff;
+  background: rgba(13, 85, 117, 0.72);
+}
+
+.training-eight-action {
+  grid-column: 2;
+  grid-row: 1;
+  min-width: 136px;
+}
+
+.target-hypothesis-table-wrap {
+  overflow-x: auto;
+  border: 1px solid rgba(0, 180, 255, 0.24);
+  border-radius: 18px;
+  background: rgba(1, 14, 26, 0.72);
+}
+
+.target-hypothesis-table {
+  width: 100%;
+  min-width: 920px;
+  border-collapse: collapse;
+  table-layout: fixed;
+
+  th,
+  td {
+    padding: 12px;
+    border-right: 1px solid rgba(77, 167, 220, 0.26);
+    border-bottom: 1px solid rgba(77, 167, 220, 0.26);
+    vertical-align: middle;
+  }
+
+  th {
+    color: #ecfbff;
+    background: linear-gradient(100deg, #158fc4, #08739f);
+    font-size: 16px;
+    font-weight: 800;
+  }
+
+  th:nth-child(1) { width: 28%; }
+  th:nth-child(2) { width: 28%; }
+  th:nth-child(3) { width: 44%; }
+
+  tr:last-child td { border-bottom: 0; }
+  th:last-child,
+  td:last-child { border-right: 0; }
+}
+
+.hypothesis-input,
+.hypothesis-textarea {
+  box-sizing: border-box;
+  width: 100%;
+  border: 1px solid rgba(67, 134, 166, 0.8);
+  outline: none;
+  color: #eaf7ff;
+  background: rgba(7, 29, 43, 0.92);
+  font-family: inherit;
+  font-size: 14px;
+  line-height: 1.65;
+
+  &::placeholder { color: #8da5b2; opacity: 1; }
+  &:focus {
+    border-color: #5fe7ff;
+    box-shadow: 0 0 0 3px rgba(34, 207, 255, 0.14);
+  }
+}
+
+.hypothesis-input {
+  height: 42px;
+  padding: 0 12px;
+  border-radius: 10px;
+}
+
+.hypothesis-textarea {
+  min-height: 86px;
+  padding: 10px 12px;
+  border-radius: 10px;
+  resize: vertical;
+}
+
+.hypothesis-tip {
+  margin: 12px 0 0;
+  color: #75dff7;
+  font-size: 13px;
+}
+
+.kano-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 18px 28px;
+  margin-bottom: 20px;
+}
+
+.kano-desc {
+  max-width: 780px;
+  margin: 0;
+  color: #d9eaf4;
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.kano-table-wrap {
+  overflow-x: auto;
+  border: 1px solid rgba(0, 180, 255, 0.24);
+  border-radius: 18px;
+  background: rgba(1, 14, 26, 0.72);
+}
+
+.kano-table {
+  width: 100%;
+  min-width: 980px;
+  border-collapse: collapse;
+  table-layout: fixed;
+
+  th,
+  td {
+    padding: 10px 12px;
+    border-right: 1px solid rgba(77, 167, 220, 0.26);
+    border-bottom: 1px solid rgba(77, 167, 220, 0.26);
+    vertical-align: middle;
+  }
+
+  th {
+    color: #ecfbff;
+    background: linear-gradient(100deg, #158fc4, #08739f);
+    font-size: 16px;
+    font-weight: 800;
+  }
+
+  th:nth-child(1) { width: 9%; }
+  th:nth-child(2) { width: 42%; }
+  th:nth-child(3) { width: 25%; }
+  th:nth-child(4) { width: 24%; }
+
+  tr:last-child td { border-bottom: 0; }
+  th:last-child,
+  td:last-child { border-right: 0; }
+}
+
+.kano-index {
+  color: #83e9ff;
+  font-weight: 800;
+  text-align: center;
+}
+
+.kano-textarea {
+  min-height: 58px;
+}
+
+.kano-select-cell {
+  text-align: center;
+}
+
+.kano-select {
+  width: min(100%, 190px);
+}
+
+.kano-select :deep(.el-select__wrapper) {
+  min-height: 42px;
+  border: 1px solid rgba(67, 134, 166, 0.8);
+  border-radius: 10px;
+  box-shadow: none;
+  color: #eaf7ff;
+  background: rgba(7, 29, 43, 0.92);
+}
+
+.kano-select :deep(.el-select__placeholder) {
+  color: #8da5b2;
+}
+
+.questionnaire-design-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 18px 28px;
+  margin-bottom: 20px;
+}
+
+.questionnaire-design-desc {
+  max-width: 820px;
+  margin: 0;
+  color: #d9eaf4;
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.questionnaire-import-action,
+.questionnaire-editor-launcher__action {
+  min-width: 178px;
+  height: 44px;
+  border: 1px solid rgba(92, 224, 255, 0.7);
+  border-radius: 10px;
+  color: #ffffff;
+  background: linear-gradient(95deg, #0b84bd, #096491);
+  font-size: 15px;
+  font-weight: 800;
+}
+
+.questionnaire-imported-file {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  max-width: 100%;
+  min-height: 42px;
+  padding: 0 13px;
+  margin-bottom: 18px;
+  border: 1px solid rgba(87, 215, 255, 0.4);
+  border-radius: 12px;
+  color: #dff9ff;
+  background: rgba(10, 97, 137, 0.28);
+
+  span {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  button {
+    flex: 0 0 auto;
+    border: 0;
+    color: #75e5ff;
+    background: transparent;
+    cursor: pointer;
+    font-weight: 800;
+  }
+}
+
+.questionnaire-editor-launcher {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 32px;
+  min-height: 190px;
+  padding: 32px 40px;
+  overflow: hidden;
+  border: 1px solid rgba(54, 195, 243, 0.36);
+  border-radius: 20px;
+  background:
+    radial-gradient(circle at 86% 18%, rgba(31, 207, 255, 0.22), transparent 34%),
+    linear-gradient(115deg, rgba(7, 59, 87, 0.94), rgba(2, 20, 34, 0.9));
+}
+
+.questionnaire-editor-launcher__copy {
+  position: relative;
+  z-index: 1;
+
+  h4 {
+    margin: 7px 0;
+    color: #ffffff;
+    font-size: 23px;
+  }
+
+  p {
+    max-width: 600px;
+    margin: 0;
+    color: #b6d1df;
+    line-height: 1.7;
+  }
+}
+
+.questionnaire-editor-launcher__action {
+  flex: 0 0 auto;
+  min-width: 170px;
+  height: 52px;
+}
+
+.questionnaire-editor-summary {
+  margin: 13px 0 0;
+  color: #72deff;
+  font-size: 13px;
+}
+
+:deep(.questionnaire-editor-dialog .el-dialog),
+:deep(.questionnaire-preview-dialog .el-dialog) {
+  overflow: hidden;
+  border: 1px solid rgba(70, 200, 247, 0.35);
+  border-radius: 18px;
+  color: #e7f8ff;
+  background: #061724;
+}
+
+:deep(.questionnaire-editor-dialog .el-dialog__title),
+:deep(.questionnaire-preview-dialog .el-dialog__title) {
+  color: #ffffff;
+  font-weight: 800;
+}
+
+.questionnaire-editor-dialog__intro {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 20px;
+  margin-bottom: 18px;
+
+  p {
+    margin: 0;
+    color: #b9d3e0;
+    line-height: 1.7;
+  }
+}
+
+.questionnaire-editor-add {
+  flex: 0 0 auto;
+  border-color: rgba(92, 224, 255, 0.7);
+  color: #ffffff;
+  background: linear-gradient(95deg, #0b84bd, #096491);
+}
+
+.questionnaire-question-list {
+  display: grid;
+  gap: 12px;
+  max-height: min(58vh, 700px);
+  padding-right: 5px;
+  overflow: auto;
+}
+
+.questionnaire-question-card {
+  display: grid;
+  grid-template-columns: 36px minmax(0, 1fr) auto;
+  gap: 12px;
+  align-items: start;
+  padding: 14px;
+  border: 1px solid rgba(67, 144, 184, 0.34);
+  border-radius: 14px;
+  background: rgba(13, 45, 63, 0.66);
+}
+
+.questionnaire-question-card__number {
+  display: grid;
+  place-items: center;
+  width: 32px;
+  height: 32px;
+  border: 1px solid rgba(80, 222, 255, 0.45);
+  border-radius: 50%;
+  color: #74e5ff;
+  font-size: 12px;
+  font-weight: 800;
+}
+
+.questionnaire-question-card__fields {
+  display: grid;
+  grid-template-columns: 180px 180px minmax(0, 1fr);
+  gap: 10px;
+
+  :deep(.el-select__wrapper),
+  :deep(.el-input__wrapper) {
+    min-height: 38px;
+    border: 1px solid rgba(67, 134, 166, 0.8);
+    box-shadow: none;
+    color: #eaf7ff;
+    background: rgba(5, 26, 39, 0.9);
+  }
+
+  :deep(.el-input__inner) { color: #eaf7ff; }
+}
+
+.likert-tip {
+  grid-column: 1 / -1;
+  margin: 0;
+  color: #7ce0f8;
+  font-size: 12px;
+}
+
+.questionnaire-question-card__remove {
+  padding: 8px 10px;
+  border: 1px solid rgba(104, 161, 187, 0.5);
+  border-radius: 8px;
+  color: #bddfeb;
+  background: transparent;
+  cursor: pointer;
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.45;
+  }
+}
+
+.questionnaire-word-preview {
+  max-height: min(62vh, 760px);
+  padding: 20px;
+  overflow: auto;
+  border: 1px solid rgba(77, 167, 220, 0.28);
+  border-radius: 12px;
+  color: #e2f3fa;
+  background: rgba(3, 25, 38, 0.86);
+  white-space: pre-wrap;
+  line-height: 1.85;
+}
+
+.questionnaire-preview-empty {
+  color: #b9d3e0;
+}
+
+.survey-report-desc {
+  max-width: 1050px;
+  margin-bottom: 24px;
+}
+
+.survey-report-table-wrap {
+  overflow-x: auto;
+  border: 1px solid rgba(65, 169, 214, 0.52);
+  border-radius: 16px;
+  background: rgba(2, 23, 36, 0.56);
+}
+
+.survey-report-table {
+  width: 100%;
+  min-width: 760px;
+  border-collapse: collapse;
+
+  th,
+  td {
+    border: 1px solid rgba(77, 148, 183, 0.5);
+  }
+
+  th {
+    padding: 14px 18px;
+    color: #e9fbff;
+    background: rgba(9, 111, 157, 0.68);
+    font-size: 15px;
+    letter-spacing: 0.04em;
+  }
+
+  th:first-child,
+  td:first-child {
+    width: 22%;
+  }
+
+  td {
+    padding: 10px;
+    background: rgba(5, 31, 47, 0.42);
+  }
+}
+
+.survey-report-title-input,
+.survey-report-content-input {
+  display: block;
+  width: 100%;
+  border: 0;
+  outline: 0;
+  color: #e7f8ff;
+  background: transparent;
+  font: inherit;
+
+  &::placeholder {
+    color: #668a9b;
+  }
+}
+
+.survey-report-title-input {
+  min-height: 88px;
+  padding: 8px;
+  text-align: center;
+  font-weight: 700;
+}
+
+.survey-report-content-input {
+  min-height: 88px;
+  padding: 8px 12px;
+  resize: vertical;
+  line-height: 1.75;
+}
+
+.survey-report-guide {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 28px;
+  margin-top: 26px;
+  padding: 20px 22px;
+  border: 1px solid rgba(69, 164, 207, 0.27);
+  border-radius: 14px;
+  color: #b8d2de;
+  background: linear-gradient(105deg, rgba(6, 48, 69, 0.75), rgba(5, 24, 38, 0.52));
+
+  h5,
+  p {
+    margin: 0;
+    line-height: 1.85;
+  }
+
+  h5 {
+    color: #ffffff;
+    font-size: 15px;
+  }
+}
+
+.survey-report-template-action {
+  flex: 0 0 auto;
+  min-width: 146px;
+  min-height: 42px;
+}
+
 .questionnaire-desc {
   flex: 1;
   margin: 0;
@@ -1399,6 +2182,68 @@ function exportOutcome() {
     width: 100%;
   }
 
+  .hypothesis-head {
+    grid-template-columns: 1fr;
+  }
+
+  .training-eight-action {
+    grid-column: auto;
+    grid-row: auto;
+    width: 100%;
+  }
+
+  .hypothesis-actions,
+  .kano-actions {
+    justify-content: stretch;
+  }
+
+  .hypothesis-actions :deep(.hypothesis-action),
+  .kano-actions :deep(.hypothesis-action) {
+    flex: 1;
+  }
+
+  .kano-head {
+    align-items: stretch;
+    flex-direction: column;
+  }
+
+  .questionnaire-design-head,
+  .questionnaire-editor-launcher,
+  .questionnaire-editor-dialog__intro {
+    align-items: stretch;
+    flex-direction: column;
+  }
+
+  .questionnaire-import-action,
+  .questionnaire-editor-launcher__action {
+    width: 100%;
+  }
+
+  .questionnaire-editor-launcher {
+    padding: 26px;
+  }
+
+  .questionnaire-question-card {
+    grid-template-columns: 32px minmax(0, 1fr);
+  }
+
+  .questionnaire-question-card__fields {
+    grid-template-columns: 1fr;
+  }
+
+  .questionnaire-question-card__remove {
+    grid-column: 2;
+    justify-self: end;
+  }
+
+  .survey-report-guide {
+    flex-direction: column;
+  }
+
+  .survey-report-template-action {
+    width: 100%;
+  }
+
   .step-indicator {
     align-items: stretch;
     flex-direction: column;
diff --git a/src/views/product/differentiation.vue b/src/views/product/differentiation.vue
index 1d5e0d7..910ef3b 100644
--- a/src/views/product/differentiation.vue
+++ b/src/views/product/differentiation.vue
@@ -48,20 +48,31 @@
               <h3>{{ activeStepName }}</h3>
             </div>
           </div>
-          <div class="step-content">
-            <label class="field-block">
-              <span>收集并分析当前智能健身镜市场的主要品牌、产品特点、用户评价：</span>
-              <textarea v-model="form.research.marketAnalysis" />
-            </label>
-            <label class="field-block">
-              <span>开展初步访谈或问卷调研，梳理潜在用户对智能健身设备的需求与痛点：</span>
-              <textarea v-model="form.research.userResearch" />
-            </label>
-            <label class="field-block">
-              <span>整理用户画像，明确目标用户群体特征：</span>
-              <textarea v-model="form.research.persona" />
-            </label>
+          <div class="core-pain-intro">
+            <p>价值主张的起点不是产品功能，而是用户痛点。不要试图满足所有人，只抓占 80% 的核心用户最痛的 3 个问题。</p>
+            <p>参考实训 11 的需求优先级评估结果，整理出 Top3 核心痛点，同时识别弱需求和伪需求——它们不作为核心价值主张，只作为加分项。</p>
           </div>
+          <div class="core-pain-table-wrap">
+            <table class="core-pain-table">
+              <thead>
+                <tr>
+                  <th>序号</th>
+                  <th>需求类型</th>
+                  <th>需求描述</th>
+                  <th>场景描述</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr v-for="(row, index) in form.corePainRows" :key="row.id">
+                  <td>{{ index + 1 }}</td>
+                  <td class="pain-type-cell">{{ row.type }}</td>
+                  <td><textarea v-model="row.description" :placeholder="index === 0 ? '示例：入睡困难' : '填写需求描述'" :aria-label="`${row.type}需求描述`" /></td>
+                  <td><textarea v-model="row.scene" :placeholder="index === 0 ? '示例：高压职场人群睡前大脑兴奋难以切换到放松状态，传统吸顶灯只有冷白光切换，缺乏渐进式助眠的光环境引导，导致入睡时间平均超过40分钟' : '填写场景描述'" :aria-label="`${row.type}场景描述`" /></td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+          <p v-if="corePainValidationMessage" class="core-pain-validation-message" role="status">{{ corePainValidationMessage }}</p>
         </section>
 
         <section v-show="isSectionVisible(2)" class="step-card">
@@ -71,20 +82,64 @@
               <h3>{{ activeStepName }}</h3>
             </div>
           </div>
-          <div class="step-content">
-            <label class="field-block">
-              <span>目标用户群体：</span>
-              <textarea v-model="form.positionCanvas.targetUsers" />
-            </label>
-            <label class="field-block">
-              <span>用户核心需求与痛点：</span>
-              <textarea v-model="form.positionCanvas.needsAndPains" />
-            </label>
-            <label class="field-block">
-              <span>竞品定位与差异化机会：</span>
-              <textarea v-model="form.positionCanvas.competitorOpportunity" />
-            </label>
+          <div class="value-proposition-intro">
+            根据细分用户、具体场景、独特价值和用户收益提炼核心价值主张，运用价值主张画布从“用户档案”和“产品价值地图”两个维度找到匹配点。
+          </div>
+
+          <div class="canvas-section-heading">
+            <h4>（一）用户档案 <small>Customer Profile</small></h4>
+            <button type="button" class="canvas-export-button" @click="exportCanvasSection('用户档案', customerProfileExportContent)">
+              <el-icon><Download /></el-icon>导出
+            </button>
+          </div>
+          <div class="value-canvas-table-wrap">
+            <table class="value-canvas-table">
+              <thead><tr><th>维度</th><th>说明</th><th>内容</th></tr></thead>
+              <tbody>
+                <tr><td>用户目标（Jobs）</td><td>用户在相关场景中试图完成的任务</td><td><textarea v-model="form.customerProfile.jobs" placeholder="示例：快速入睡、提升睡眠质量、温和唤醒不犯困、起夜不刺眼" /></td></tr>
+                <tr><td>痛点（Pains）</td><td>用户遇到的障碍、风险和负面体验</td><td><textarea v-model="form.customerProfile.pains" placeholder="填写用户痛点" /></td></tr>
+                <tr><td>收益期望（Gains）</td><td>用户期望的结果和额外收益</td><td><textarea v-model="form.customerProfile.gains" placeholder="填写用户收益期望" /></td></tr>
+              </tbody>
+            </table>
+          </div>
+
+          <div class="canvas-section-heading canvas-section-heading--spaced">
+            <h4>（二）产品价值地图 <small>Value Map</small></h4>
+            <button type="button" class="canvas-export-button" @click="exportCanvasSection('产品价值地图', valueMapExportContent)">
+              <el-icon><Download /></el-icon>导出
+            </button>
+          </div>
+          <div class="value-canvas-table-wrap">
+            <table class="value-canvas-table">
+              <thead><tr><th>维度</th><th>说明</th><th>内容</th></tr></thead>
+              <tbody>
+                <tr><td>产品与服务</td><td>我们提供给用户的产品和服务清单</td><td><textarea v-model="form.valueMap.products" placeholder="示例：智能声光伴眠吸顶灯（含 App 控制）、白噪音声库、睡眠监测服务、节律光算法" /></td></tr>
+                <tr><td>痛点缓释器（Pain Relievers）</td><td>产品如何消除或缓解用户痛点</td><td><textarea v-model="form.valueMap.painRelievers" placeholder="填写痛点缓释器" /></td></tr>
+                <tr><td>增益创造器（Gain Creators）</td><td>产品如何创造额外价值和惊喜体验</td><td><textarea v-model="form.valueMap.gainCreators" placeholder="填写增益创造器" /></td></tr>
+              </tbody>
+            </table>
           </div>
+
+          <div class="canvas-drawing-section">
+            <h4>（三）绘制产品价值主张画布</h4>
+            <p>检查“产品价值地图”与“用户档案”是否实现匹配（Fit）：每个痛点应有对应的痛点缓释器，每个收益期望应有对应的增益创造器。根据上表绘制产品价值主张画布。</p>
+            <input ref="valueCanvasInput" class="visually-hidden" type="file" accept="image/png,image/jpeg,image/webp" @change="handleValueCanvasUpload" />
+            <div v-if="form.valuePropositionCanvas.url" class="value-canvas-preview">
+              <el-image :src="form.valuePropositionCanvas.url" :preview-src-list="[form.valuePropositionCanvas.url]" fit="cover" preview-teleported />
+              <div><strong>{{ form.valuePropositionCanvas.name || '产品价值主张画布' }}</strong><span>点击缩略图可放大预览</span><button type="button" class="text-button" @click="clearValueCanvas">移除图片</button></div>
+            </div>
+            <button v-else type="button" class="canvas-upload-trigger" :disabled="uploadingValueCanvas" @click="openValueCanvasPicker">
+              <el-icon><UploadFilled /></el-icon>{{ uploadingValueCanvas ? '正在上传...' : '上传产品价值主张画布' }}
+            </button>
+          </div>
+
+          <div class="canvas-guidance">
+            <p>推荐工具及方法如下，自行选择：</p>
+            <p>1. 下载模板，填写用户档案及产品价值地图，完成产品价值主张画布。</p>
+            <button type="button" class="template-download-button" @click="downloadCanvasTemplate"><el-icon><Download /></el-icon>模板下载</button>
+            <p>2. 导出用户档案和价值主张地图两张表，使用通用 AI 大模型辅助生成画布。</p>
+          </div>
+          <p v-if="valueCanvasValidationMessage" class="core-pain-validation-message" role="status">{{ valueCanvasValidationMessage }}</p>
         </section>
 
         <section v-show="isSectionVisible(3)" class="step-card">
@@ -94,32 +149,22 @@
               <h3>{{ activeStepName }}</h3>
             </div>
           </div>
-          <div class="step-content value-grid">
-            <label class="field-block">
-              <span>客户任务：</span>
-              <textarea v-model="form.valueCanvas.customerJobs" />
-            </label>
-            <label class="field-block">
-              <span>用户痛点：</span>
-              <textarea v-model="form.valueCanvas.pains" />
-            </label>
-            <label class="field-block">
-              <span>用户收益：</span>
-              <textarea v-model="form.valueCanvas.gains" />
-            </label>
-            <label class="field-block">
-              <span>产品与服务：</span>
-              <textarea v-model="form.valueCanvas.products" />
-            </label>
-            <label class="field-block">
-              <span>痛点缓解方案：</span>
-              <textarea v-model="form.valueCanvas.painRelievers" />
-            </label>
-            <label class="field-block">
-              <span>收益创造方案：</span>
-              <textarea v-model="form.valueCanvas.gainCreators" />
-            </label>
+          <div class="positioning-intro">
+            <p>根据前面实训分析，使用经典定位陈述格式撰写简洁有力的产品价值定位陈述。</p>
+            <p>经典定位陈述格式：对于【目标市场/用户】，我们的【产品名称】是一个【产品类别】，它能提供【核心价值/关键收益】，因为它具有【主要差异化理由】。</p>
           </div>
+          <article v-for="(statement, index) in form.positioningStatements" :key="statement.id" class="positioning-version-card">
+            <header><span>版本{{ numberToChinese(index + 1) }}</span><small>至少设计两个不同目标用户版本</small></header>
+            <p class="statement-preview">对于 <strong>{{ statement.targetUser || '【目标市场/用户】' }}</strong>，我们的 <strong>{{ statement.productName || '【产品名称】' }}</strong> 是一个 <strong>{{ statement.productCategory || '【产品类别】' }}</strong>，它能提供 <strong>{{ statement.coreValue || '【核心价值/关键收益】' }}</strong>，因为它具有 <strong>{{ statement.differentiationReason || '【主要差异化理由】' }}</strong>。</p>
+            <div class="positioning-fields">
+              <label><span>目标市场/用户</span><input v-model="statement.targetUser" :aria-label="`版本${index + 1}目标市场或用户`" placeholder="填写目标市场/用户" /></label>
+              <label><span>产品名称</span><input v-model="statement.productName" :aria-label="`版本${index + 1}产品名称`" placeholder="填写产品名称" /></label>
+              <label><span>产品类别</span><input v-model="statement.productCategory" :aria-label="`版本${index + 1}产品类别`" placeholder="填写产品类别" /></label>
+              <label><span>核心价值/关键收益</span><input v-model="statement.coreValue" :aria-label="`版本${index + 1}核心价值或关键收益`" placeholder="填写核心价值/关键收益" /></label>
+              <label class="positioning-fields__wide"><span>主要差异化理由</span><textarea v-model="statement.differentiationReason" :aria-label="`版本${index + 1}主要差异化理由`" placeholder="填写主要差异化理由" /></label>
+            </div>
+          </article>
+          <p v-if="positioningValidationMessage" class="core-pain-validation-message" role="status">{{ positioningValidationMessage }}</p>
         </section>
 
         <section v-show="isSectionVisible(4)" class="step-card">
@@ -129,24 +174,35 @@
               <h3>{{ activeStepName }}</h3>
             </div>
           </div>
-          <div class="step-content">
-            <label class="field-block">
-              <span>目标用户：</span>
-              <textarea v-model="form.statement.targetUsers" />
-            </label>
-            <label class="field-block">
-              <span>核心价值主张：</span>
-              <textarea v-model="form.statement.valueProposition" />
-            </label>
-            <label class="field-block">
-              <span>差异化优势：</span>
-              <textarea v-model="form.statement.differentiation" />
-            </label>
-            <label class="field-block">
-              <span>产品定位陈述：</span>
-              <textarea v-model="form.statement.positioning" />
-            </label>
+          <div class="mrd-intro">
+            基于前述步骤的分析成果，撰写一份完整的产品市场需求说明书（MRD）。MRD 文档全面分析产品的市场机会、用户需求及竞争格局，明确产品核心定位与功能方向，为后续产品开发、资源投入及战略决策提供数据支撑与逻辑依据。
+          </div>
+          <section v-for="section in mrdSections" :key="section.key" class="mrd-section">
+            <h4>{{ section.order }}. {{ section.title }}</h4>
+            <div class="mrd-table-wrap">
+              <table class="mrd-table">
+                <thead><tr><th>序号</th><th v-if="section.hasModule">模块</th><th>标题</th><th>内容</th></tr></thead>
+                <tbody>
+                  <tr v-for="(row, index) in form.mrd[section.key]" :key="row.id">
+                    <td>{{ index + 1 }}</td>
+                    <td v-if="section.hasModule" class="mrd-module">{{ row.module }}</td>
+                    <td class="mrd-row-title">{{ row.title }}</td>
+                    <td><textarea v-model="row.content" :aria-label="`${section.title}${row.title}内容`" :placeholder="`填写${row.title}内容`" /></td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </section>
+          <section class="mrd-positioning-section">
+            <h4>6. 产品定位</h4>
+            <textarea v-model="form.mrd.productPositioning" aria-label="产品定位" placeholder="综合市场、用户、竞品和需求分析，填写产品定位" />
+          </section>
+          <div class="mrd-guidance">
+            <p>根据以上结构框架及信息，结合实训 8-11，撰写 MRD 文档。</p>
+            <p>1. 根据报告模板，自行分析撰写 MRD 文档。</p>
+            <p>2. 使用通用 AI 大模型辅助完成报告，参考步骤提示词见案例资料文档。</p>
           </div>
+          <p v-if="mrdValidationMessage" class="core-pain-validation-message" role="status">{{ mrdValidationMessage }}</p>
         </section>
 
         <section v-show="hasConfiguredSteps && form.activeStep > 4" class="step-card completion-card">
@@ -197,19 +253,52 @@
 
 <script setup>
 import { computed, getCurrentInstance, onMounted, ref } from "vue";
-import { ArrowLeft, ArrowRight, CircleCheck, Download, Operation } from "@element-plus/icons-vue";
+import { ArrowLeft, ArrowRight, CircleCheck, Download, Operation, UploadFilled } from "@element-plus/icons-vue";
 import TrainingAiSidebar from "@/views/components/TrainingAiSidebar.vue";
 import TrainingMaterialButton from "@/views/components/TrainingMaterialButton.vue";
 import TrainingTaskBrief from "@/views/components/TrainingTaskBrief.vue";
 import { getTrainingTaskByKey } from "@/api/trainingTask";
-import { getStudentTrainingAnswer, saveStudentTrainingAnswer } from "@/api/studentTrainingAnswer";
+import { checkProductValuePositioningStepOne, checkProductValuePositioningStepTwo, checkProductValuePositioningStepThree, checkProductValuePositioningStepFour, getStudentTrainingAnswer, saveStudentTrainingAnswer, uploadStudentTrainingFile } from "@/api/studentTrainingAnswer";
 import { parseTrainingArray } from "@/views/training/taskKeyMap";
+import { isStudentDemo } from "@/utils/studentDemo";
 
 const TASK_KEY = "product-value-positioning";
 const { proxy } = getCurrentInstance();
 const saving = ref(false);
+const checkingCorePain = ref(false);
+const corePainValidationMessage = ref("");
+const checkingValueCanvas = ref(false);
+const valueCanvasValidationMessage = ref("");
+const checkingPositioning = ref(false);
+const positioningValidationMessage = ref("");
+const checkingMrd = ref(false);
+const mrdValidationMessage = ref("");
+const uploadingValueCanvas = ref(false);
+const valueCanvasInput = ref(null);
 const taskConfig = ref(null);
 
+const corePainTypes = ["核心痛点1", "核心痛点2", "核心痛点3", "弱需求", "伪需求"];
+const positioningStatementFields = ["targetUser", "productName", "productCategory", "coreValue", "differentiationReason"];
+const mrdSections = [
+  { key: "marketInsights", order: 1, title: "市场问题与机会", rows: [{ title: "市场痛点" }, { title: "市场机会" }, { title: "发展趋势" }] },
+  { key: "marketOverview", order: 2, title: "市场概述", rows: [{ title: "目标市场" }, { title: "市场特征" }] },
+  { key: "userAnalysis", order: 3, title: "用户与购买者分析", rows: [{ title: "目标用户画像" }, { title: "用户场景与需求" }, { title: "购买者与决策者" }] },
+  { key: "competitorAnalysis", order: 4, title: "竞品分析", rows: [{ title: "竞品对比分析" }, { title: "差异化机会" }] },
+  { key: "productRequirements", order: 5, title: "产品需求说明", hasModule: true, rows: [{ module: "功能需求", title: "核心功能" }, { module: "功能需求", title: "辅助功能" }, { module: "非功能需求", title: "性能需求" }, { module: "非功能需求", title: "安全需求" }, { module: "非功能需求", title: "兼容性" }] },
+];
+
+function createPositioningStatement(id) {
+  return { id, targetUser: "", productName: "", productCategory: "", coreValue: "", differentiationReason: "" };
+}
+
+function createMrd() {
+  const mrd = { productPositioning: "" };
+  mrdSections.forEach((section) => {
+    mrd[section.key] = section.rows.map((row, index) => ({ id: index + 1, module: row.module || "", title: row.title, content: "" }));
+  });
+  return mrd;
+}
+
 const defaultRequirement =
   "产品价值主张及定位需要在市场调研和用户洞察基础上，明确目标用户、核心价值、差异化优势和定位表达。";
 const defaultBackground =
@@ -224,8 +313,14 @@ const defaultGoals = [
 function createForm() {
   return {
     activeStep: 1,
+    corePainRows: corePainTypes.map((type, index) => ({ id: index + 1, type, description: "", scene: "" })),
     research: { marketAnalysis: "", userResearch: "", persona: "" },
     positionCanvas: { targetUsers: "", needsAndPains: "", competitorOpportunity: "" },
+    customerProfile: { jobs: "", pains: "", gains: "" },
+    valueMap: { products: "", painRelievers: "", gainCreators: "" },
+    valuePropositionCanvas: { url: "", name: "" },
+    positioningStatements: [createPositioningStatement(1), createPositioningStatement(2)],
+    mrd: createMrd(),
     valueCanvas: { customerJobs: "", pains: "", gains: "", products: "", painRelievers: "", gainCreators: "" },
     statement: { targetUsers: "", valueProposition: "", differentiation: "", positioning: "" },
   };
@@ -277,20 +372,27 @@ function normalizeActiveStep(value) {
   return Math.min(Math.max(step, 1), configuredSteps.value.length);
 }
 
-function setCurrentStep(step) {
-  form.value.activeStep = normalizeActiveStep(step);
+async function setCurrentStep(step) {
+  const targetStep = normalizeActiveStep(step);
+  if (targetStep > form.value.activeStep) {
+    if (form.value.activeStep === 1 && !(await ensureCorePainValid())) return;
+    if (form.value.activeStep === 2 && !(await ensureValueCanvasValid())) return;
+    if (form.value.activeStep === 3 && !(await ensurePositioningValid())) return;
+    if (form.value.activeStep === 4 && !(await ensureMrdValid())) return;
+  }
+  form.value.activeStep = targetStep;
 }
 
 function isSectionVisible(section) {
   return !hasConfiguredSteps.value || form.value.activeStep === section;
 }
 
-function goPreviousStep() {
-  setCurrentStep(form.value.activeStep - 1);
+async function goPreviousStep() {
+  await setCurrentStep(form.value.activeStep - 1);
 }
 
-function goNextStep() {
-  setCurrentStep(form.value.activeStep + 1);
+async function goNextStep() {
+  await setCurrentStep(form.value.activeStep + 1);
 }
 
 function applySavedAnswer(value) {
@@ -309,13 +411,114 @@ function normalizeForm(value = {}) {
     ...base,
     ...value,
     activeStep: normalizeActiveStep(value.activeStep),
+    corePainRows: normalizeCorePainRows(value.corePainRows),
     research: { ...base.research, ...(value.research || {}) },
     positionCanvas: { ...base.positionCanvas, ...(value.positionCanvas || {}) },
+    customerProfile: { ...base.customerProfile, ...(value.customerProfile || {}) },
+    valueMap: { ...base.valueMap, ...(value.valueMap || {}) },
+    valuePropositionCanvas: { ...base.valuePropositionCanvas, ...(value.valuePropositionCanvas || {}) },
+    positioningStatements: normalizePositioningStatements(value.positioningStatements),
+    mrd: normalizeMrd(value.mrd),
     valueCanvas: { ...base.valueCanvas, ...(value.valueCanvas || {}) },
     statement: { ...base.statement, ...(value.statement || {}) },
   };
 }
 
+function normalizeCorePainRows(rows = []) {
+  const savedRows = Array.isArray(rows) ? rows : [];
+  return corePainTypes.map((type, index) => ({
+    id: index + 1,
+    type,
+    description: String(savedRows[index]?.description || ""),
+    scene: String(savedRows[index]?.scene || ""),
+  }));
+}
+
+function normalizePositioningStatements(statements = []) {
+  const savedStatements = Array.isArray(statements) ? statements : [];
+  return [1, 2].map((id, index) => {
+    const saved = savedStatements[index] || {};
+    return positioningStatementFields.reduce((result, field) => ({ ...result, [field]: String(saved[field] || "") }), { id });
+  });
+}
+
+function normalizeMrd(mrd = {}) {
+  const base = createMrd();
+  mrdSections.forEach((section) => {
+    const savedRows = Array.isArray(mrd?.[section.key]) ? mrd[section.key] : [];
+    base[section.key] = section.rows.map((row, index) => ({
+      id: index + 1,
+      module: row.module || "",
+      title: row.title,
+      content: String(savedRows[index]?.content || ""),
+    }));
+  });
+  base.productPositioning = String(mrd?.productPositioning || "");
+  return base;
+}
+
+async function ensureCorePainValid() {
+  if (checkingCorePain.value) return false;
+  checkingCorePain.value = true;
+  try {
+    const response = await checkProductValuePositioningStepOne({ rows: form.value.corePainRows });
+    const result = response?.data || {};
+    corePainValidationMessage.value = result.message || (result.valid ? "核心痛点分类填写完整。" : "请完成 3 个核心痛点、弱需求和伪需求的描述与场景。");
+    return result.valid === true;
+  } catch (error) {
+    corePainValidationMessage.value = error?.message || "核心痛点校验失败，请稍后重试。";
+    return false;
+  } finally {
+    checkingCorePain.value = false;
+  }
+}
+
+async function ensureValueCanvasValid() {
+  if (checkingValueCanvas.value) return false;
+  checkingValueCanvas.value = true;
+  try {
+    const response = await checkProductValuePositioningStepTwo({
+      customerProfile: form.value.customerProfile,
+      valueMap: form.value.valueMap,
+      canvasUrl: form.value.valuePropositionCanvas.url,
+    });
+    const result = response?.data || {};
+    valueCanvasValidationMessage.value = result.message || (result.valid ? "价值主张画布填写完整。" : "请完整填写两张画布表并上传产品价值主张画布。");
+    return result.valid === true;
+  } catch (error) {
+    valueCanvasValidationMessage.value = error?.message || "价值主张画布校验失败，请稍后重试。";
+    return false;
+  } finally { checkingValueCanvas.value = false; }
+}
+
+async function ensurePositioningValid() {
+  if (checkingPositioning.value) return false;
+  checkingPositioning.value = true;
+  try {
+    const response = await checkProductValuePositioningStepThree({ statements: form.value.positioningStatements });
+    const result = response?.data || {};
+    positioningValidationMessage.value = result.message || (result.valid ? "两版定位陈述填写完整。" : "请完整填写两个产品价值定位陈述版本。");
+    return result.valid === true;
+  } catch (error) {
+    positioningValidationMessage.value = error?.message || "定位陈述校验失败，请稍后重试。";
+    return false;
+  } finally { checkingPositioning.value = false; }
+}
+
+async function ensureMrdValid() {
+  if (checkingMrd.value) return false;
+  checkingMrd.value = true;
+  try {
+    const response = await checkProductValuePositioningStepFour(form.value.mrd);
+    const result = response?.data || {};
+    mrdValidationMessage.value = result.message || (result.valid ? "MRD 文档填写完整。" : "请完整填写 MRD 的五组分析内容和产品定位。");
+    return result.valid === true;
+  } catch (error) {
+    mrdValidationMessage.value = error?.message || "MRD 校验失败，请稍后重试。";
+    return false;
+  } finally { checkingMrd.value = false; }
+}
+
 function buildOutcome() {
   return {
     taskKey: TASK_KEY,
@@ -323,8 +526,14 @@ function buildOutcome() {
     taskName: taskTitle.value,
     currentStep: form.value.activeStep,
     configuredSteps: configuredSteps.value,
+    corePainRows: form.value.corePainRows,
     research: form.value.research,
     positionCanvas: form.value.positionCanvas,
+    customerProfile: form.value.customerProfile,
+    valueMap: form.value.valueMap,
+    valuePropositionCanvas: form.value.valuePropositionCanvas,
+    positioningStatements: form.value.positioningStatements,
+    mrd: form.value.mrd,
     valueCanvas: form.value.valueCanvas,
     statement: form.value.statement,
     updatedAt: new Date().toISOString(),
@@ -341,10 +550,17 @@ function buildAnswerPayload(status) {
 
 async function persist(status = "IN_PROGRESS") {
   if (saving.value) return;
+  if (status !== "RESET") {
+    if (form.value.activeStep === 1 && !(await ensureCorePainValid())) return false;
+    if (form.value.activeStep === 2 && !(await ensureValueCanvasValid())) return false;
+    if (form.value.activeStep === 3 && !(await ensurePositioningValid())) return false;
+    if (form.value.activeStep === 4 && !(await ensureMrdValid())) return false;
+  }
   saving.value = true;
   try {
     await saveStudentTrainingAnswer(TASK_KEY, buildAnswerPayload(status));
     proxy?.$modal?.msgSuccess(status === "SUBMITTED" ? "提交成功" : "保存成功");
+    return true;
   } finally {
     saving.value = false;
   }
@@ -359,6 +575,7 @@ function submitTask() {
 }
 
 async function resetTraining() {
+  clearValueCanvas();
   form.value = createForm();
   await persist("RESET");
 }
@@ -372,6 +589,57 @@ function exportOutcome() {
   link.click();
   URL.revokeObjectURL(url);
 }
+
+function numberToChinese(number) { return ["一", "二", "三", "四"][number - 1] || String(number); }
+
+const customerProfileExportContent = computed(() => `# 用户档案（Customer Profile）\n\n## 用户目标（Jobs）\n${form.value.customerProfile.jobs}\n\n## 痛点（Pains）\n${form.value.customerProfile.pains}\n\n## 收益期望（Gains）\n${form.value.customerProfile.gains}\n`);
+const valueMapExportContent = computed(() => `# 产品价值地图（Value Map）\n\n## 产品与服务\n${form.value.valueMap.products}\n\n## 痛点缓释器（Pain Relievers）\n${form.value.valueMap.painRelievers}\n\n## 增益创造器（Gain Creators）\n${form.value.valueMap.gainCreators}\n`);
+
+function downloadText(content, fileName) {
+  const blob = new Blob([content], { type: "text/markdown;charset=utf-8" });
+  const url = URL.createObjectURL(blob);
+  const link = document.createElement("a");
+  link.href = url;
+  link.download = fileName;
+  link.click();
+  URL.revokeObjectURL(url);
+}
+
+function exportCanvasSection(name, content) { downloadText(content, `${taskTitle.value}-${name}.md`); }
+
+function downloadCanvasTemplate() {
+  downloadText("# 产品价值主张画布\n\n## 用户档案\n- 用户目标（Jobs）：\n- 痛点（Pains）：\n- 收益期望（Gains）：\n\n## 产品价值地图\n- 产品与服务：\n- 痛点缓释器（Pain Relievers）：\n- 增益创造器（Gain Creators）：\n\n## 匹配（Fit）说明\n", "产品价值主张画布模板.md");
+}
+
+function openValueCanvasPicker() { valueCanvasInput.value?.click(); }
+
+function clearValueCanvas() {
+  if (form.value?.valuePropositionCanvas?.url?.startsWith("blob:")) URL.revokeObjectURL(form.value.valuePropositionCanvas.url);
+  if (form.value) form.value.valuePropositionCanvas = { url: "", name: "" };
+}
+
+async function handleValueCanvasUpload(event) {
+  const file = event.target?.files?.[0];
+  if (!file) return;
+  if (!["image/jpeg", "image/png", "image/webp"].includes(file.type)) {
+    proxy?.$modal?.msgError?.("请上传 PNG、JPG 或 WEBP 格式的图片"); event.target.value = ""; return;
+  }
+  if (file.size > 5 * 1024 * 1024) { proxy?.$modal?.msgError?.("图片大小不能超过 5MB"); event.target.value = ""; return; }
+  uploadingValueCanvas.value = true;
+  try {
+    if (isStudentDemo()) { clearValueCanvas(); form.value.valuePropositionCanvas = { url: URL.createObjectURL(file), name: file.name }; }
+    else {
+      const formData = new FormData(); formData.append("file", file);
+      const result = await uploadStudentTrainingFile(formData);
+      const url = result?.url || result?.data?.url;
+      if (!url) throw new Error("图片上传失败，请重试");
+      form.value.valuePropositionCanvas = { url, name: file.name };
+    }
+    valueCanvasValidationMessage.value = "";
+    proxy?.$modal?.msgSuccess?.("产品价值主张画布上传成功");
+  } catch (error) { proxy?.$modal?.msgError?.(error?.message || "图片上传失败，请重试"); }
+  finally { uploadingValueCanvas.value = false; event.target.value = ""; }
+}
 </script>
 
 <style scoped lang="scss">
@@ -723,6 +991,334 @@ function exportOutcome() {
 
 .value-grid .field-block { margin: 0; }
 
+.core-pain-intro {
+  margin-bottom: 18px;
+  padding: 16px 18px;
+  border-left: 3px solid #55ddff;
+  border-radius: 0 14px 14px 0;
+  background: linear-gradient(90deg, rgba(7, 92, 132, 0.28), rgba(5, 34, 51, 0.12));
+
+  p {
+    margin: 0;
+    color: #cae7f2;
+    font-size: 14px;
+    line-height: 1.8;
+  }
+
+  p + p { margin-top: 6px; }
+}
+
+.core-pain-table-wrap { overflow-x: auto; }
+
+.core-pain-table {
+  width: 100%;
+  min-width: 820px;
+  border-collapse: collapse;
+  table-layout: fixed;
+
+  th,
+  td {
+    border: 1px solid rgba(77, 167, 220, 0.28);
+    text-align: center;
+    vertical-align: middle;
+  }
+
+  th {
+    padding: 11px 10px;
+    color: #f5fcff;
+    background: linear-gradient(100deg, #0787bd, #075276);
+    font-size: 14px;
+    font-weight: 800;
+  }
+
+  td {
+    height: 84px;
+    padding: 9px;
+    color: #d7f1ff;
+    background: rgba(1, 14, 26, 0.48);
+  }
+
+  th:nth-child(1),
+  td:nth-child(1) { width: 7%; }
+  th:nth-child(2),
+  td:nth-child(2) { width: 15%; }
+  th:nth-child(3),
+  td:nth-child(3) { width: 32%; }
+
+  .pain-type-cell {
+    color: #b9e7f6;
+    font-weight: 800;
+    background: rgba(7, 62, 88, 0.46);
+  }
+
+  textarea {
+    display: block;
+    width: 100%;
+    height: 76px;
+    min-height: 52px;
+    padding: 10px;
+    border: 1px solid rgba(45, 95, 126, 0.95);
+    border-radius: 10px;
+    outline: none;
+    color: #eef5ff;
+    background: rgba(4, 24, 38, 0.72);
+    box-sizing: border-box;
+    font: inherit;
+    font-size: 13px;
+    line-height: 1.55;
+    resize: vertical;
+
+    &:focus {
+      border-color: rgba(92, 224, 255, 0.7);
+      box-shadow: 0 0 0 3px rgba(0, 174, 255, 0.13);
+    }
+  }
+}
+
+.core-pain-validation-message {
+  margin: 12px 0 0;
+  color: #ffab9d;
+  font-size: 13px;
+  font-weight: 800;
+}
+
+.value-proposition-intro {
+  margin-bottom: 18px;
+  padding: 14px 16px;
+  border: 1px solid rgba(71, 183, 232, 0.28);
+  border-radius: 14px;
+  color: #c9e9f5;
+  background: rgba(4, 48, 71, 0.28);
+  font-size: 14px;
+  line-height: 1.8;
+}
+
+.canvas-section-heading {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  margin: 18px 0 10px;
+
+  h4 { margin: 0; color: #ffffff; font-size: 17px; }
+  small { margin-left: 6px; color: #8dc8df; font-size: 12px; font-weight: 600; }
+}
+
+.canvas-section-heading--spaced { margin-top: 28px; }
+
+.canvas-export-button,
+.template-download-button,
+.canvas-upload-trigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 7px;
+  border: 1px solid rgba(94, 219, 255, 0.72);
+  border-radius: 10px;
+  color: #effcff;
+  background: linear-gradient(105deg, #078bbf, #095c89);
+  cursor: pointer;
+  font: inherit;
+  font-weight: 800;
+  transition: .2s ease;
+}
+
+.canvas-export-button { min-width: 92px; height: 34px; padding: 0 14px; font-size: 13px; }
+.template-download-button { min-width: 116px; height: 36px; padding: 0 14px; font-size: 13px; }
+.canvas-upload-trigger { min-width: 218px; min-height: 54px; padding: 0 22px; font-size: 15px; }
+
+.canvas-export-button:hover,
+.template-download-button:hover,
+.canvas-upload-trigger:hover:not(:disabled) {
+  border-color: #9bf1ff;
+  transform: translateY(-1px);
+  box-shadow: 0 7px 18px rgba(0, 158, 213, 0.2);
+}
+
+.canvas-upload-trigger:disabled { cursor: not-allowed; opacity: .65; }
+
+.value-canvas-table-wrap { overflow-x: auto; }
+
+.value-canvas-table {
+  width: 100%;
+  min-width: 820px;
+  border-collapse: collapse;
+  table-layout: fixed;
+
+  th,
+  td { border: 1px solid rgba(77, 167, 220, 0.3); }
+  th { padding: 10px; color: #f6fdff; background: linear-gradient(100deg, #0787bd, #075276); font-size: 14px; font-weight: 800; }
+  td { padding: 10px; color: #d7f1ff; background: rgba(1, 14, 26, 0.48); font-size: 13px; line-height: 1.65; vertical-align: middle; }
+  th:nth-child(1), td:nth-child(1) { width: 19%; color: #c8edfa; font-weight: 800; text-align: center; }
+  th:nth-child(2), td:nth-child(2) { width: 24%; color: #9fc4d4; }
+  textarea {
+    display: block; width: 100%; min-height: 72px; padding: 10px; border: 1px solid rgba(45, 95, 126, .95); border-radius: 9px; color: #eef5ff; background: rgba(4, 24, 38, .72); box-sizing: border-box; font: inherit; font-size: 13px; line-height: 1.55; resize: vertical;
+    &:focus { border-color: rgba(92, 224, 255, .7); box-shadow: 0 0 0 3px rgba(0, 174, 255, .13); outline: none; }
+  }
+}
+
+.canvas-drawing-section {
+  margin-top: 28px;
+  padding: 18px;
+  border: 1px solid rgba(84, 185, 228, 0.32);
+  border-radius: 16px;
+  background: linear-gradient(110deg, rgba(8, 66, 94, .32), rgba(0, 19, 34, .26));
+  text-align: center;
+
+  h4 { margin: 0; color: #ffffff; font-size: 17px; text-align: left; }
+  p { margin: 9px 0 18px; color: #bfdeeb; font-size: 13px; line-height: 1.75; text-align: left; }
+}
+
+.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; clip-path: inset(50%); }
+
+.value-canvas-preview {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 14px;
+  margin: 0 auto;
+  text-align: left;
+
+  :deep(.el-image) { width: 116px; height: 76px; border: 1px solid rgba(92, 224, 255, .66); border-radius: 10px; cursor: zoom-in; }
+  div { display: grid; gap: 5px; }
+  strong { color: #eefcff; font-size: 14px; }
+  span { color: #8fb9c9; font-size: 12px; }
+}
+
+.text-button { width: fit-content; padding: 0; border: 0; color: #77e4ff; background: transparent; cursor: pointer; font: inherit; font-size: 12px; text-decoration: underline; }
+
+.canvas-guidance {
+  position: relative;
+  margin-top: 22px;
+  padding: 15px 18px 15px 152px;
+  border-left: 3px solid #38bee7;
+  border-radius: 0 12px 12px 0;
+  background: rgba(3, 43, 65, .24);
+
+  p { margin: 0; color: #bedce8; font-size: 13px; line-height: 1.75; }
+  p + p { margin-top: 4px; }
+  .template-download-button { position: absolute; top: 44px; left: 18px; }
+}
+
+.positioning-intro {
+  margin-bottom: 18px;
+  padding: 15px 18px;
+  border-left: 3px solid #55ddff;
+  border-radius: 0 14px 14px 0;
+  background: linear-gradient(90deg, rgba(7, 92, 132, .28), rgba(5, 34, 51, .12));
+
+  p { margin: 0; color: #c9e7f3; font-size: 14px; line-height: 1.8; }
+  p + p { margin-top: 5px; color: #a9ccda; }
+}
+
+.positioning-version-card {
+  overflow: hidden;
+  margin-top: 16px;
+  border: 1px solid rgba(74, 178, 223, .36);
+  border-radius: 16px;
+  background: linear-gradient(120deg, rgba(5, 55, 81, .42), rgba(1, 17, 29, .5));
+
+  header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 14px;
+    padding: 10px 16px;
+    border-bottom: 1px solid rgba(75, 174, 218, .24);
+    background: rgba(4, 86, 125, .35);
+  }
+
+  header span { color: #f2fdff; font-size: 16px; font-weight: 900; }
+  header small { color: #8ecadd; font-size: 12px; }
+}
+
+.statement-preview {
+  margin: 0;
+  padding: 15px 16px;
+  color: #afd2df;
+  background: rgba(0, 16, 29, .36);
+  font-size: 14px;
+  line-height: 1.85;
+
+  strong { color: #64daf8; font-weight: 800; }
+}
+
+.positioning-fields {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+  padding: 16px;
+
+  label { display: grid; gap: 6px; min-width: 0; }
+  label span { color: #d8f2fb; font-size: 12px; font-weight: 800; }
+  input,
+  textarea {
+    width: 100%; padding: 10px 11px; border: 1px solid rgba(45, 95, 126, .95); border-radius: 9px; color: #eef5ff; background: rgba(4, 24, 38, .72); box-sizing: border-box; font: inherit; font-size: 13px; line-height: 1.55;
+    &:focus { border-color: rgba(92, 224, 255, .7); box-shadow: 0 0 0 3px rgba(0, 174, 255, .13); outline: none; }
+  }
+  textarea { min-height: 66px; resize: vertical; }
+}
+
+.positioning-fields__wide { grid-column: 1 / -1; }
+
+.mrd-intro {
+  margin-bottom: 20px;
+  padding: 15px 18px;
+  border: 1px solid rgba(78, 183, 227, .3);
+  border-radius: 14px;
+  color: #c9e6f1;
+  background: linear-gradient(100deg, rgba(5, 78, 112, .28), rgba(3, 26, 42, .18));
+  font-size: 14px;
+  line-height: 1.85;
+}
+
+.mrd-section { margin-top: 24px; }
+.mrd-section h4,
+.mrd-positioning-section h4 { margin: 0 0 10px; color: #ffffff; font-size: 16px; font-weight: 900; }
+.mrd-table-wrap { overflow-x: auto; }
+
+.mrd-table {
+  width: 100%;
+  min-width: 760px;
+  border-collapse: collapse;
+  table-layout: fixed;
+
+  th, td { border: 1px solid rgba(77, 167, 220, .3); }
+  th { padding: 9px; color: #f5fcff; background: linear-gradient(100deg, #0787bd, #075276); font-size: 13px; font-weight: 800; }
+  td { min-height: 42px; padding: 7px; color: #d5edf7; background: rgba(1, 14, 26, .48); font-size: 13px; text-align: center; vertical-align: middle; }
+  th:nth-child(1), td:nth-child(1) { width: 8%; }
+  th:nth-child(2), td:nth-child(2) { width: 17%; }
+  .mrd-row-title { color: #bbebf6; font-weight: 800; }
+  .mrd-module { color: #a6d7e6; }
+  textarea {
+    display: block; width: 100%; min-height: 50px; padding: 8px 10px; border: 1px solid rgba(45, 95, 126, .95); border-radius: 8px; color: #eef5ff; background: rgba(4, 24, 38, .72); box-sizing: border-box; font: inherit; font-size: 13px; line-height: 1.55; resize: vertical;
+    &:focus { border-color: rgba(92, 224, 255, .7); box-shadow: 0 0 0 3px rgba(0, 174, 255, .13); outline: none; }
+  }
+}
+
+.mrd-positioning-section {
+  margin-top: 25px;
+  padding: 16px;
+  border: 1px solid rgba(74, 178, 223, .34);
+  border-radius: 14px;
+  background: rgba(1, 31, 48, .35);
+
+  textarea {
+    display: block; width: 100%; min-height: 120px; padding: 12px; border: 1px solid rgba(45, 95, 126, .95); border-radius: 10px; color: #eef5ff; background: rgba(4, 24, 38, .72); box-sizing: border-box; font: inherit; font-size: 14px; line-height: 1.65; resize: vertical;
+    &:focus { border-color: rgba(92, 224, 255, .7); box-shadow: 0 0 0 3px rgba(0, 174, 255, .13); outline: none; }
+  }
+}
+
+.mrd-guidance {
+  margin-top: 20px;
+  padding: 13px 16px;
+  border-left: 3px solid #4fdbf5;
+  border-radius: 0 12px 12px 0;
+  background: rgba(3, 46, 67, .26);
+  p { margin: 0; color: #bfdeea; font-size: 13px; line-height: 1.75; }
+  p + p { margin-top: 4px; }
+}
+
 .step-navigation {
   display: flex;
   justify-content: center;
@@ -803,6 +1399,10 @@ function exportOutcome() {
     writing-mode: vertical-rl;
   }
   .value-grid { grid-template-columns: 1fr; }
+  .positioning-fields { grid-template-columns: 1fr; }
+  .positioning-fields__wide { grid-column: auto; }
+  .canvas-guidance { padding: 15px; }
+  .canvas-guidance .template-download-button { position: static; margin: 8px 0; }
 }
 .workbench-head--actions-only {
   justify-content: flex-end;
diff --git a/src/views/product/market-opportunity-selection.vue b/src/views/product/market-opportunity-selection.vue
new file mode 100644
index 0000000..fb80dcb
--- /dev/null
+++ b/src/views/product/market-opportunity-selection.vue
@@ -0,0 +1,108 @@
+<template>
+  <div class="opportunity-page student-training-shell">
+    <main class="opportunity-core">
+      <header class="task-header"><span>产品规划与设计 · MARKET SIGNALS</span><h1>{{ taskTitle }}</h1></header>
+      <TrainingTaskBrief :background="taskBackground" :goals="taskGoals" :requirements="taskRequirement" :show-material="false" />
+      <section class="workbench">
+        <div class="workbench-actions"><TrainingMaterialButton :material-name="taskConfig?.materialName" :material-url="taskConfig?.materialUrl" /><button class="btn" type="button" @click="exportOutcome"><el-icon><Download /></el-icon> 导出实训成果</button></div>
+        <nav class="step-indicator" aria-label="市场机会识别与选品步骤"><template v-for="(step, index) in trainingSteps" :key="step"><button type="button" :class="['step-tab', { active: currentStep === index + 1, complete: currentStep > index + 1 }]" @click="switchStep(index + 1)"><b>{{ String(index + 1).padStart(2, '0') }}</b><span><strong>{{ step }}</strong><small>{{ currentStep === index + 1 ? '当前步骤' : '点击切换' }} →</small></span></button><i v-if="index < trainingSteps.length - 1" /></template></nav>
+        <section class="step-card">
+          <template v-if="currentStep === 1">
+            <div class="step-heading"><div><p>Step 01</p><h2>{{ trainingSteps[0] }}</h2></div><em>指标分类练习</em></div>
+            <p class="intro">请对实训数据表中的各项指标，按照市场规模、市场潜力、竞争强度、运营难度 4 个类别进行分类。</p>
+            <div class="table-wrap"><table><thead><tr><th>序号</th><th>指标</th><th>分类</th></tr></thead><tbody><tr v-for="(item, index) in indicators" :key="item.id"><td>{{ index + 1 }}</td><td class="metric">{{ item.name }}</td><td><select v-model="answers[item.id]" :aria-label="`${item.name} 的分类`"><option value="">请选择</option><option v-for="category in categories" :key="category" :value="category">{{ category }}</option></select></td></tr></tbody></table></div>
+            <div class="step-actions"><button class="btn primary" type="button" :disabled="saving" @click="checkAndContinue">判题并进入第 2 步</button><button class="btn" type="button" :disabled="saving" @click="resetStepOne"><el-icon><RefreshLeft /></el-icon> 清空填写</button></div>
+          </template>
+          <template v-else-if="currentStep === 2">
+            <div class="step-heading"><div><p>Step 02</p><h2>{{ trainingSteps[1] }}</h2></div><em>指标权重设定</em></div>
+            <p class="intro">根据案例信息，为各二级指标设定权重。系统将自动汇总一级指标权重。</p>
+            <p v-if="!stepOnePassed" class="warning">请先完成并保存第 1 步的指标分类，再填写本步骤。</p>
+            <div class="weight-summary"><span>权重合计</span><strong :class="{ valid: totalWeight === 100 }">{{ totalWeight }}%</strong><small>每项建议填写 1–100，合计必须为 100%</small></div>
+            <div class="table-wrap"><table class="weight-table"><thead><tr><th>一级指标</th><th>二级指标</th><th>权重（%）</th></tr></thead><tbody><tr v-for="item in indicators" :key="item.id"><td class="first-level">{{ item.group }}（{{ groupWeight(item.group) }}%）</td><td class="metric">{{ item.name }}</td><td><input v-model.number="weights[item.id]" :disabled="!stepOnePassed" type="number" min="1" max="100" step="1" :aria-label="`${item.name} 的权重`" /><span class="percent">%</span></td></tr></tbody></table></div>
+            <div class="step-actions"><button class="btn primary" type="button" :disabled="saving || !stepOnePassed" @click="saveAndGoToStepThree">保存并进入第 3 步</button><button class="btn" type="button" :disabled="saving || !stepOnePassed" @click="resetStepTwo"><el-icon><RefreshLeft /></el-icon> 清空填写</button></div>
+          </template>
+          <template v-else-if="currentStep === 3">
+            <div class="step-heading"><div><p>Step 03</p><h2>{{ trainingSteps[2] }}</h2></div><em>加权评分计算</em></div>
+            <p class="intro">请根据数据表及第 2 步权重，使用 Min-Max 归一法计算各二级指标得分，再采用加权评分法填写产品综合得分。</p>
+            <p v-if="!stepTwoPassed" class="warning">请先完成并保存第 2 步的指标权重设定，再填写本步骤。</p>
+            <div class="score-table-wrap"><table class="score-table"><thead><tr><th>序号</th><th>产品品类</th><th>综合得分</th></tr></thead><tbody><tr v-for="(product, index) in products" :key="product.id"><td>{{ index + 1 }}</td><td class="metric">{{ product.name }}</td><td><input v-model.number="scores[product.id]" :disabled="!stepTwoPassed" type="number" min="0" max="100" step="0.01" :aria-label="`${product.name} 的综合得分`" /><span class="percent">分</span></td></tr></tbody></table></div>
+            <div class="calculation-guide"><div><h3>推荐工具及方法如下，自行选择：</h3><p>1. Excel/WPS 表格，自行操作计算，可参考《实训操作说明》完成。</p><p>2. 下载 Excel 模板，填写关键数据，完成指标计算。</p><p>3. 导出实训数据表，上传到通用 AI 大模型，参考提示词完成计算。</p><p>请根据数据表及各指标权重设定表，通过 Min-Max 归一法计算各二级指标得分，采用加权评分法计算综合得分。</p></div><div class="download-stack"><button class="btn" type="button" @click="downloadInstructions">下载实训操作说明</button><button class="btn primary" type="button" @click="downloadTemplate">下载自动化模板</button></div></div>
+            <div class="step-actions"><button class="btn primary" type="button" :disabled="saving || !stepTwoPassed" @click="saveAndGoToStepFour">保存并进入第 4 步</button><button class="btn" type="button" :disabled="saving || !stepTwoPassed" @click="resetStepThree"><el-icon><RefreshLeft /></el-icon> 清空填写</button></div>
+          </template>
+          <template v-else-if="currentStep === 4">
+            <div class="step-heading"><div><p>Step 04</p><h2>{{ trainingSteps[3] }}</h2></div><em>可视化结果提交</em></div>
+            <p class="intro">计算完各产品综合得分后，请按照智能健身镜、智能卫浴镜和智能美妆镜，计算各品类产品的平均得分、最高分、最低分，并进行可视化处理。</p>
+            <p v-if="!stepThreePassed" class="warning">请先完成并保存第 3 步的产品综合得分，再上传可视化结果图。</p>
+            <div class="visualization-upload">
+              <input ref="visualizationInput" class="visually-hidden" type="file" accept="image/png,image/jpeg,image/webp" @change="handleVisualizationUpload" />
+              <button class="upload-trigger" type="button" :disabled="saving || uploading || !stepThreePassed" @click="openVisualizationPicker"><el-icon><UploadFilled /></el-icon>{{ uploading ? "上传中..." : visualization.url ? "更换数据可视化结果图" : "上传数据可视化结果图" }}</button>
+              <p>支持 PNG、JPG、WEBP 格式，文件不超过 5MB。</p>
+              <div v-if="visualization.url" class="visualization-preview"><el-image :src="visualization.url" :preview-src-list="[visualization.url]" fit="cover" preview-teleported /><div><strong>{{ visualization.name || "数据可视化结果图" }}</strong><span>点击缩略图可放大查看</span><button class="text-button" type="button" @click="clearVisualization">移除图片</button></div></div>
+            </div>
+            <div class="visual-guide"><h3>推荐工具及方法如下，自行选择：</h3><p>1. 使用 Excel/WPS 表格计算三类产品的平均得分、最高分和最低分，并生成图表。</p><p>2. 下载 Excel 模板，填写关键数据，完成指标计算和可视化。</p><p>3. 导出实训数据表，上传到通用 AI 大模型，参考提示词生成可视化结果。</p></div>
+            <div class="step-actions"><button class="btn primary" type="button" :disabled="saving || uploading || !stepThreePassed" @click="saveAndCompleteTraining">保存并完成实训</button></div>
+          </template>
+          <div v-else class="placeholder"><p>第 {{ currentStep }} 步内容待配置</p><span>已保存的步骤可从上方步骤栏返回查看。</span></div>
+        </section>
+      </section>
+    </main>
+    <TrainingAiSidebar study-tip="先辨别指标描述的是规模、增长潜力、供给竞争，还是流量获取难度，再进行归类。" reference-title="指标分类提示" reference-text="· 市场规模：反映需求量与交易体量<br />· 市场潜力：反映增长速度与扩张空间<br />· 竞争强度：反映供给数量与竞争关系<br />· 运营难度：反映获取流量与转化的门槛" :progress-items="progressItems" />
+  </div>
+</template>
+
+<script setup>
+import { Download, RefreshLeft, UploadFilled } from "@element-plus/icons-vue";
+import { checkMarketOpportunitySelectionStepOne, checkMarketOpportunitySelectionStepTwo, checkMarketOpportunitySelectionStepThree, checkMarketOpportunitySelectionStepFour, getStudentTrainingAnswer, saveStudentTrainingAnswer, uploadStudentTrainingFile } from "@/api/studentTrainingAnswer";
+import { getTrainingTaskByKey } from "@/api/trainingTask";
+import { isStudentDemo } from "@/utils/studentDemo";
+import TrainingAiSidebar from "@/views/components/TrainingAiSidebar.vue";
+import TrainingMaterialButton from "@/views/components/TrainingMaterialButton.vue";
+import TrainingTaskBrief from "@/views/components/TrainingTaskBrief.vue";
+
+const TASK_KEY = "market-opportunity-selection";
+const DEFAULT_STEPS = ["指标分类", "市场机会分析", "选品方案设计", "选品结论"];
+const categories = ["市场规模", "市场潜力", "竞争强度", "运营难度"];
+const indicators = [
+  { id: "search-count", name: "搜索次数", group: "市场规模" }, { id: "transaction-amount", name: "成交金额(元)", group: "市场规模" }, { id: "transaction-growth", name: "成交金额增速", group: "市场潜力" }, { id: "category-transaction-growth", name: "类目成交增速", group: "市场潜力" },
+  { id: "demand-supply-ratio", name: "需供比", group: "竞争强度" }, { id: "online-products", name: "在线商品数", group: "竞争强度" }, { id: "online-merchants", name: "在线商家数", group: "竞争强度" }, { id: "organic-traffic-ratio", name: "自然流占比", group: "运营难度" },
+];
+const products = [{ id: "smart-fitness-mirror", name: "智能健身镜" }, { id: "smart-bathroom-mirror", name: "智能卫浴镜" }, { id: "smart-beauty-mirror", name: "智能美妆镜" }];
+const defaultTask = { title: "市场机会识别与选品", background: "基于实训数据中的市场、供给与流量指标，完成市场机会识别和选品判断。", goals: ["理解选品数据指标的业务含义", "掌握市场规模、潜力、竞争和运营难度的分类方法", "为后续选品分析建立指标基础"], requirement: "阅读案例资料，完成 8 项指标的分类，并依据判题反馈修改。" };
+const { proxy } = getCurrentInstance();
+const taskConfig = ref(null); const currentStep = ref(1); const saving = ref(false); const uploading = ref(false); const visualizationInput = ref(null); const visualization = ref({ url: "", name: "" }); const stepOnePassed = ref(false); const stepTwoPassed = ref(false); const stepThreePassed = ref(false); const answers = ref(createAnswers()); const weights = ref(createWeights()); const scores = ref(createScores());
+const taskTitle = computed(() => taskConfig.value?.taskName || defaultTask.title); const taskBackground = computed(() => taskConfig.value?.background || defaultTask.background); const taskGoals = computed(() => parseArray(taskConfig.value?.objectives, defaultTask.goals)); const taskRequirement = computed(() => taskConfig.value?.requirements || defaultTask.requirement); const trainingSteps = computed(() => parseArray(taskConfig.value?.steps, DEFAULT_STEPS));
+const progressItems = computed(() => indicators.map((item) => ({ text: `${answers.value[item.id] ? "已分类" : "待分类"}：${item.name}`, status: answers.value[item.id] ? "done" : "" })));
+const totalWeight = computed(() => indicators.reduce((total, item) => total + (Number(weights.value[item.id]) || 0), 0));
+onMounted(async () => { await loadTaskConfig(); await loadSavedAnswer(); });
+function createAnswers() { return Object.fromEntries(indicators.map((item) => [item.id, ""])); }
+function createWeights() { return Object.fromEntries(indicators.map((item) => [item.id, null])); }
+function createScores() { return Object.fromEntries(products.map((product) => [product.id, null])); }
+function parseArray(value, fallback) { if (Array.isArray(value)) return value.length ? value : fallback; if (!value) return fallback; try { const parsed = JSON.parse(value); return Array.isArray(parsed) && parsed.length ? parsed.map((item) => String(item?.name ?? item).trim()).filter(Boolean) : fallback; } catch (error) { const list = String(value).split(/[；;|]/).map((item) => item.trim()).filter(Boolean); return list.length ? list : fallback; } }
+async function loadTaskConfig() { try { taskConfig.value = (await getTrainingTaskByKey(TASK_KEY))?.data || null; } catch (error) { taskConfig.value = null; } }
+async function loadSavedAnswer() { try { const answer = (await getStudentTrainingAnswer(TASK_KEY))?.data; if (answer?.step1Answer) { const parsed = JSON.parse(answer.step1Answer); answers.value = { ...createAnswers(), ...(parsed?.answers || parsed || {}) }; stepOnePassed.value = true; } if (answer?.step2Answer) { const parsed = JSON.parse(answer.step2Answer); weights.value = { ...createWeights(), ...(parsed?.weights || parsed || {}) }; stepTwoPassed.value = true; } if (answer?.step3Answer) { const parsed = JSON.parse(answer.step3Answer); scores.value = { ...createScores(), ...(parsed?.scores || parsed || {}) }; stepThreePassed.value = true; } if (answer?.step4Answer) { const parsed = JSON.parse(answer.step4Answer); visualization.value = { url: parsed?.visualization?.url || "", name: parsed?.visualization?.name || "" }; } if (Number(answer?.currentStep) > 0) currentStep.value = Number(answer.currentStep); } catch (error) { /* Keep the page available when history cannot be restored. */ } }
+function buildStepOneOutcome() { return { title: taskTitle.value, answers: { ...answers.value } }; }
+function buildStepTwoOutcome() { return { title: taskTitle.value, weights: { ...weights.value }, primaryWeights: Object.fromEntries(["市场规模", "市场潜力", "竞争强度", "运营难度"].map((group) => [group, groupWeight(group)])) }; }
+function buildStepThreeOutcome() { return { title: taskTitle.value, scores: { ...scores.value } }; }
+function buildStepFourOutcome() { return { title: taskTitle.value, visualization: { ...visualization.value } }; }
+async function checkAndContinue() { if (saving.value) return; saving.value = true; try { const result = await checkMarketOpportunitySelectionStepOne(indicators.map((item) => ({ id: item.id, category: answers.value[item.id] }))); if (!result?.data?.allCorrect) throw new Error(`当前答对 ${result?.data?.correctCount || 0}/${indicators.length} 项，请根据提示修改`); await saveStudentTrainingAnswer(TASK_KEY, { step1Answer: JSON.stringify(buildStepOneOutcome()), currentStep: 2, submitted: false, saveAction: "SAVE" }); stepOnePassed.value = true; currentStep.value = 2; proxy?.$modal?.msgSuccess("分类正确，已进入第 2 步"); } catch (error) { proxy?.$modal?.msgError?.(error?.message || "请完成指标分类并根据提示修改"); } finally { saving.value = false; } }
+function groupWeight(group) { return indicators.filter((item) => item.group === group).reduce((total, item) => total + (Number(weights.value[item.id]) || 0), 0); }
+function switchStep(step) { if (step > 1 && !stepOnePassed.value) { proxy?.$modal?.msgWarning("请先完成第 1 步指标分类"); return; } if (step > 2 && !stepTwoPassed.value) { proxy?.$modal?.msgWarning("请先完成第 2 步指标权重设定"); return; } if (step > 3 && !stepThreePassed.value) { proxy?.$modal?.msgWarning("请先完成第 3 步综合得分计算"); return; } currentStep.value = step; }
+async function saveAndGoToStepThree() { if (saving.value || !stepOnePassed.value) return; saving.value = true; try { await checkMarketOpportunitySelectionStepTwo({ weights: indicators.map((item) => ({ id: item.id, weight: weights.value[item.id] })) }); await saveStudentTrainingAnswer(TASK_KEY, { step2Answer: JSON.stringify(buildStepTwoOutcome()), currentStep: 3, submitted: false, saveAction: "SAVE" }); stepTwoPassed.value = true; currentStep.value = 3; proxy?.$modal?.msgSuccess("已保存，已进入第 3 步"); } catch (error) { proxy?.$modal?.msgError?.(error?.message || "请填写合理的二级指标权重，且合计为 100%"); } finally { saving.value = false; } }
+async function saveAndGoToStepFour() { if (saving.value || !stepTwoPassed.value) return; saving.value = true; try { await checkMarketOpportunitySelectionStepThree({ scores: products.map((product) => ({ id: product.id, score: scores.value[product.id] })) }); await saveStudentTrainingAnswer(TASK_KEY, { step3Answer: JSON.stringify(buildStepThreeOutcome()), currentStep: 4, submitted: false, saveAction: "SAVE" }); stepThreePassed.value = true; currentStep.value = 4; proxy?.$modal?.msgSuccess("已保存，已进入第 4 步"); } catch (error) { proxy?.$modal?.msgError?.(error?.message || "请填写 0 至 100 分的综合得分"); } finally { saving.value = false; } }
+function resetStepOne() { answers.value = createAnswers(); proxy?.$modal?.msgSuccess("已清空第 1 步填写内容"); }
+function resetStepTwo() { weights.value = createWeights(); proxy?.$modal?.msgSuccess("已清空第 2 步填写内容"); }
+function resetStepThree() { scores.value = createScores(); proxy?.$modal?.msgSuccess("已清空第 3 步填写内容"); }
+function openVisualizationPicker() { visualizationInput.value?.click(); }
+function clearVisualization() { if (visualization.value.url.startsWith("blob:")) URL.revokeObjectURL(visualization.value.url); visualization.value = { url: "", name: "" }; }
+async function handleVisualizationUpload(event) { const file = event.target?.files?.[0]; if (!file) return; const acceptedTypes = ["image/jpeg", "image/png", "image/webp"]; if (!acceptedTypes.includes(file.type)) { proxy?.$modal?.msgError?.("请上传 PNG、JPG 或 WEBP 格式的图片"); event.target.value = ""; return; } if (file.size > 5 * 1024 * 1024) { proxy?.$modal?.msgError?.("图片大小不能超过 5MB"); event.target.value = ""; return; } uploading.value = true; try { if (isStudentDemo()) { clearVisualization(); visualization.value = { url: URL.createObjectURL(file), name: file.name }; } else { const formData = new FormData(); formData.append("file", file); const result = await uploadStudentTrainingFile(formData); const url = result?.url || result?.data?.url; if (!url) throw new Error("图片上传失败，请重试"); visualization.value = { url, name: file.name }; } proxy?.$modal?.msgSuccess("可视化结果图上传成功"); } catch (error) { proxy?.$modal?.msgError?.(error?.message || "图片上传失败，请重试"); } finally { uploading.value = false; event.target.value = ""; } }
+async function saveAndCompleteTraining() { if (saving.value || !stepThreePassed.value) return; saving.value = true; try { await checkMarketOpportunitySelectionStepFour({ visualizationUrl: visualization.value.url }); await saveStudentTrainingAnswer(TASK_KEY, { step4Answer: JSON.stringify(buildStepFourOutcome()), currentStep: 4, submitted: true, saveAction: "SUBMIT" }); proxy?.$modal?.msgSuccess("实训成果已保存，恭喜完成本次实训"); } catch (error) { proxy?.$modal?.msgError?.(error?.message || "请上传数据可视化结果图"); } finally { saving.value = false; } }
+function downloadFile(content, fileName, type) { const blob = new Blob([content], { type }); const url = URL.createObjectURL(blob); const link = document.createElement("a"); link.href = url; link.download = fileName; link.click(); URL.revokeObjectURL(url); }
+function downloadInstructions() { downloadFile("市场机会识别与选品 - 实训操作说明\n\n1. 汇总三类产品的原始数据。\n2. 对正向指标计算 (x-min)/(max-min)，对逆向指标计算 (max-x)/(max-min)。\n3. 将归一化得分乘以第 2 步二级指标权重后求和。\n4. 将综合得分填写回第 3 步表格，保留两位小数。", "市场机会识别与选品-实训操作说明.txt", "text/plain;charset=utf-8"); }
+function downloadTemplate() { const header = ["产品品类", ...indicators.map((item) => item.name), "综合得分"]; const rows = products.map((product) => [product.name, ...indicators.map(() => ""), ""]); const weightRow = ["二级指标权重(%)", ...indicators.map((item) => weights.value[item.id] ?? ""), ""]; downloadFile([header, weightRow, ...rows].map((row) => row.join(",")).join("\n"), "市场机会识别与选品-自动化模板.csv", "text/csv;charset=utf-8"); }
+function exportOutcome() { const blob = new Blob([JSON.stringify({ taskName: taskTitle.value, step1: buildStepOneOutcome(), step2: buildStepTwoOutcome(), step3: buildStepThreeOutcome(), step4: buildStepFourOutcome(), currentStep: currentStep.value }, null, 2)], { type: "application/json;charset=utf-8" }); const url = URL.createObjectURL(blob); const link = document.createElement("a"); link.href = url; link.download = `${taskTitle.value}-实训结果.json`; link.click(); URL.revokeObjectURL(url); }
+</script>
+
+<style lang="scss" scoped>
+.opportunity-page { display:grid; grid-template-columns:minmax(720px,1fr) 340px; gap:24px; min-height:calc(100vh - 106px); padding:24px; color:#e9f8ff; background:#06111d; }.opportunity-core { min-width:0; border:1px solid rgba(0,180,255,.25); background:rgba(8,18,28,.64); box-shadow:0 22px 48px rgba(0,0,0,.22); }.task-header { padding:24px 28px 4px; }.task-header span,.step-heading p { color:#66dcff; font-size:13px; font-weight:800; letter-spacing:.08em; }.task-header h1 { margin:9px 0 0; color:#fff; font-size:29px; }.workbench { margin:24px; padding:22px; border:1px solid rgba(33,194,255,.35); border-radius:20px; background:rgba(1,24,39,.72); }.workbench-actions { display:flex; justify-content:flex-end; gap:12px; }.btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; border:1px solid #2cc9ff; border-radius:999px; padding:10px 18px; color:#dff8ff; background:rgba(8,87,121,.55); cursor:pointer; }.primary { border-color:#36d9ff; background:linear-gradient(110deg,#0eaae4,#0572ac); font-weight:700; }.btn:disabled { cursor:not-allowed; opacity:.6; }.step-indicator { display:flex; align-items:center; gap:12px; margin:28px 0; padding:12px; border:1px solid rgba(30,190,255,.28); border-radius:22px; }.step-tab { display:flex; align-items:center; flex:1; gap:10px; min-width:0; padding:10px; border:0; border-radius:16px; color:#96c6d8; background:transparent; text-align:left; cursor:pointer; }.step-tab.active { color:#fff; background:linear-gradient(110deg,#148fc6,#0879aa); }.step-tab b { display:grid; place-items:center; flex:0 0 42px; width:42px; height:42px; border:1px solid #4ed7ff; border-radius:50%; }.step-tab span { display:grid; gap:4px; min-width:0; }.step-tab strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.step-tab small { color:#5ec9ed; }.step-indicator i { flex:0 0 24px; height:2px; background:rgba(83,204,255,.4); }.step-card { padding:24px; border:1px solid rgba(31,185,249,.32); border-radius:18px; background:rgba(1,21,34,.65); }.step-heading { display:flex; justify-content:space-between; align-items:start; }.step-heading p { margin:0; }.step-heading h2 { margin:5px 0 0; color:#fff; font-size:24px; }.step-heading em { border:1px solid #38caff; border-radius:999px; padding:7px 12px; color:#9aeaff; font-style:normal; }.intro { margin:24px 0; color:#c5e4ef; font-size:16px; line-height:1.8; }.warning { margin:0 0 16px; color:#ffd58e; }.weight-summary { display:flex; align-items:baseline; gap:10px; margin:10px 0 18px; padding:13px 16px; border:1px solid rgba(57,207,255,.28); border-radius:11px; color:#c5e4ef; background:rgba(11,81,113,.18); }.weight-summary strong { color:#ffcf77; font-size:23px; }.weight-summary strong.valid { color:#67e8a9; }.weight-summary small { margin-left:auto; color:#8fc9dc; }.table-wrap,.score-table-wrap { overflow-x:auto; }.table-wrap table,.score-table { width:100%; min-width:720px; border-collapse:collapse; }.table-wrap th,.table-wrap td,.score-table th,.score-table td { border:1px solid rgba(139,213,241,.45); }.table-wrap th,.score-table th { padding:14px; color:#fff; background:#079ed9; font-size:16px; }.table-wrap th:first-child,.table-wrap td:first-child { width:22%; text-align:center; }.table-wrap th:nth-child(2),.metric { width:34%; text-align:center; font-weight:700; }.table-wrap td { padding:10px 18px; }.table-wrap select,.weight-table input,.score-table input { display:block; width:min(600px,100%); margin:auto; border:1px solid rgba(115,220,255,.58); border-radius:6px; padding:9px 12px; color:#e9faff; background:#09293c; font:inherit; }.weight-table .first-level { color:#67dcff; font-weight:800; }.weight-table td:last-child,.score-table td:last-child { position:relative; text-align:center; }.weight-table input,.score-table input { display:inline-block; width:150px; margin:0; text-align:center; }.weight-table .percent,.score-table .percent { margin-left:8px; color:#78d9f7; }.score-table th:first-child,.score-table td:first-child { width:16%; text-align:center; }.score-table th:nth-child(2) { width:45%; }.score-table td { padding:12px 18px; }.calculation-guide { display:grid; grid-template-columns:minmax(0,1fr) 210px; gap:22px; margin-top:26px; padding:19px 21px; border:1px solid rgba(64,206,255,.27); border-radius:14px; color:#c9e9f4; background:rgba(9,67,94,.18); line-height:1.75; }.calculation-guide h3 { margin:0 0 8px; color:#fff; font-size:16px; }.calculation-guide p { margin:6px 0; }.download-stack { display:grid; align-content:center; gap:12px; }.download-stack .btn { border-radius:8px; }.step-actions { display:flex; justify-content:center; gap:12px; margin-top:26px; }.placeholder { padding:94px 20px; color:#a8cfdd; text-align:center; }.placeholder p { color:#fff; font-size:20px; } @media (max-width:1280px) { .opportunity-page { grid-template-columns:1fr; }.step-indicator { overflow-x:auto; }.step-tab { min-width:180px; } } @media (max-width:720px) { .opportunity-page { padding:12px; }.workbench { margin:12px; padding:14px; }.task-header { padding:18px; }.workbench-actions { justify-content:flex-start; flex-wrap:wrap; }.step-heading em { display:none; }.weight-summary { flex-wrap:wrap; }.weight-summary small { width:100%; margin-left:0; }.calculation-guide { grid-template-columns:1fr; } }
+.visualization-upload { display:grid; justify-items:center; gap:12px; min-height:280px; padding:48px 24px; border:1px dashed rgba(77,214,255,.68); border-radius:16px; background:radial-gradient(circle at 50% 25%,rgba(16,143,193,.23),rgba(5,31,48,.3) 58%,rgba(1,21,34,.5)); text-align:center; }.upload-trigger { display:inline-flex; align-items:center; gap:8px; border:1px solid #41d8ff; border-radius:8px; padding:15px 23px; color:#fff; background:linear-gradient(110deg,#0faee6,#0874af); font:inherit; font-weight:800; cursor:pointer; }.upload-trigger:disabled { cursor:not-allowed; opacity:.6; }.visualization-upload > p { margin:0; color:#8dc9dd; }.visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }.visualization-preview { display:flex; align-items:center; width:min(620px,100%); gap:16px; padding:12px; border:1px solid rgba(91,218,255,.4); border-radius:12px; text-align:left; background:rgba(2,17,29,.55); }.visualization-preview .el-image { flex:0 0 164px; height:104px; border-radius:8px; cursor:zoom-in; overflow:hidden; }.visualization-preview div { display:grid; gap:8px; }.visualization-preview strong { color:#fff; }.visualization-preview span { color:#9bcbdc; font-size:13px; }.text-button { justify-self:start; border:0; padding:0; color:#ffb4a5; background:transparent; cursor:pointer; font:inherit; }.visual-guide { margin-top:24px; padding:18px 22px; border-left:3px solid #31d1ff; color:#c9e9f4; background:rgba(8,78,108,.18); line-height:1.75; }.visual-guide h3 { margin:0 0 7px; color:#fff; font-size:16px; }.visual-guide p { margin:5px 0; }
+</style>