From e6e0707b5902b7088d9419c4d9bd9aad470dfa13 Mon Sep 17 00:00:00 2001
From: chenyuan <chenyuan@example.com>
Date: Tue, 11 Aug 2026 23:46:07 +0800
Subject: [PATCH 1/4] feat: refine product value positioning step one

---
 src/api/studentTrainingAnswer.js      |  24 ++++
 src/views/product/differentiation.vue | 179 +++++++++++++++++++++++---
 2 files changed, 183 insertions(+), 20 deletions(-)

diff --git a/src/api/studentTrainingAnswer.js b/src/api/studentTrainingAnswer.js
index 422d013..05a30c0 100644
--- a/src/api/studentTrainingAnswer.js
+++ b/src/api/studentTrainingAnswer.js
@@ -423,3 +423,27 @@ export function checkConsumerBehaviorStepFour(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 },
+  });
+}
diff --git a/src/views/product/differentiation.vue b/src/views/product/differentiation.vue
index 1d5e0d7..5d1b690 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">
@@ -202,14 +213,18 @@ 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, getStudentTrainingAnswer, saveStudentTrainingAnswer } from "@/api/studentTrainingAnswer";
 import { parseTrainingArray } from "@/views/training/taskKeyMap";
 
 const TASK_KEY = "product-value-positioning";
 const { proxy } = getCurrentInstance();
 const saving = ref(false);
+const checkingCorePain = ref(false);
+const corePainValidationMessage = ref("");
 const taskConfig = ref(null);
 
+const corePainTypes = ["核心痛点1", "核心痛点2", "核心痛点3", "弱需求", "伪需求"];
+
 const defaultRequirement =
   "产品价值主张及定位需要在市场调研和用户洞察基础上，明确目标用户、核心价值、差异化优势和定位表达。";
 const defaultBackground =
@@ -224,6 +239,7 @@ 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: "" },
     valueCanvas: { customerJobs: "", pains: "", gains: "", products: "", painRelievers: "", gainCreators: "" },
@@ -277,20 +293,22 @@ 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 && form.value.activeStep === 1 && !(await ensureCorePainValid())) 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,6 +327,7 @@ function normalizeForm(value = {}) {
     ...base,
     ...value,
     activeStep: normalizeActiveStep(value.activeStep),
+    corePainRows: normalizeCorePainRows(value.corePainRows),
     research: { ...base.research, ...(value.research || {}) },
     positionCanvas: { ...base.positionCanvas, ...(value.positionCanvas || {}) },
     valueCanvas: { ...base.valueCanvas, ...(value.valueCanvas || {}) },
@@ -316,6 +335,32 @@ function normalizeForm(value = {}) {
   };
 }
 
+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 || ""),
+  }));
+}
+
+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;
+  }
+}
+
 function buildOutcome() {
   return {
     taskKey: TASK_KEY,
@@ -323,6 +368,7 @@ function buildOutcome() {
     taskName: taskTitle.value,
     currentStep: form.value.activeStep,
     configuredSteps: configuredSteps.value,
+    corePainRows: form.value.corePainRows,
     research: form.value.research,
     positionCanvas: form.value.positionCanvas,
     valueCanvas: form.value.valueCanvas,
@@ -341,10 +387,12 @@ function buildAnswerPayload(status) {
 
 async function persist(status = "IN_PROGRESS") {
   if (saving.value) return;
+  if (status !== "RESET" && form.value.activeStep === 1 && !(await ensureCorePainValid())) return false;
   saving.value = true;
   try {
     await saveStudentTrainingAnswer(TASK_KEY, buildAnswerPayload(status));
     proxy?.$modal?.msgSuccess(status === "SUBMITTED" ? "提交成功" : "保存成功");
+    return true;
   } finally {
     saving.value = false;
   }
@@ -723,6 +771,97 @@ 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;
+}
+
 .step-navigation {
   display: flex;
   justify-content: center;

From 8f1b6ecdfb790c77b30249ad2eedb73735d75067 Mon Sep 17 00:00:00 2001
From: chenyuan <chenyuan@example.com>
Date: Wed, 12 Aug 2026 01:01:03 +0800
Subject: [PATCH 2/4] feat: add value proposition canvas

---
 src/api/studentTrainingAnswer.js      |  26 +++
 src/views/product/differentiation.vue | 286 ++++++++++++++++++++++++--
 2 files changed, 295 insertions(+), 17 deletions(-)

diff --git a/src/api/studentTrainingAnswer.js b/src/api/studentTrainingAnswer.js
index 05a30c0..81238b7 100644
--- a/src/api/studentTrainingAnswer.js
+++ b/src/api/studentTrainingAnswer.js
@@ -447,3 +447,29 @@ export function checkProductValuePositioningStepOne(payload) {
     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 },
+  });
+}
diff --git a/src/views/product/differentiation.vue b/src/views/product/differentiation.vue
index 5d1b690..feb1ece 100644
--- a/src/views/product/differentiation.vue
+++ b/src/views/product/differentiation.vue
@@ -82,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">
@@ -208,19 +252,24 @@
 
 <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 { checkProductValuePositioningStepOne, getStudentTrainingAnswer, saveStudentTrainingAnswer } from "@/api/studentTrainingAnswer";
+import { checkProductValuePositioningStepOne, checkProductValuePositioningStepTwo, 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 uploadingValueCanvas = ref(false);
+const valueCanvasInput = ref(null);
 const taskConfig = ref(null);
 
 const corePainTypes = ["核心痛点1", "核心痛点2", "核心痛点3", "弱需求", "伪需求"];
@@ -242,6 +291,9 @@ function createForm() {
     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: "" },
     valueCanvas: { customerJobs: "", pains: "", gains: "", products: "", painRelievers: "", gainCreators: "" },
     statement: { targetUsers: "", valueProposition: "", differentiation: "", positioning: "" },
   };
@@ -295,7 +347,10 @@ function normalizeActiveStep(value) {
 
 async function setCurrentStep(step) {
   const targetStep = normalizeActiveStep(step);
-  if (targetStep > form.value.activeStep && form.value.activeStep === 1 && !(await ensureCorePainValid())) return;
+  if (targetStep > form.value.activeStep) {
+    if (form.value.activeStep === 1 && !(await ensureCorePainValid())) return;
+    if (form.value.activeStep === 2 && !(await ensureValueCanvasValid())) return;
+  }
   form.value.activeStep = targetStep;
 }
 
@@ -330,6 +385,9 @@ function normalizeForm(value = {}) {
     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 || {}) },
     valueCanvas: { ...base.valueCanvas, ...(value.valueCanvas || {}) },
     statement: { ...base.statement, ...(value.statement || {}) },
   };
@@ -361,6 +419,24 @@ async function ensureCorePainValid() {
   }
 }
 
+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; }
+}
+
 function buildOutcome() {
   return {
     taskKey: TASK_KEY,
@@ -371,6 +447,9 @@ function buildOutcome() {
     corePainRows: form.value.corePainRows,
     research: form.value.research,
     positionCanvas: form.value.positionCanvas,
+    customerProfile: form.value.customerProfile,
+    valueMap: form.value.valueMap,
+    valuePropositionCanvas: form.value.valuePropositionCanvas,
     valueCanvas: form.value.valueCanvas,
     statement: form.value.statement,
     updatedAt: new Date().toISOString(),
@@ -387,7 +466,10 @@ function buildAnswerPayload(status) {
 
 async function persist(status = "IN_PROGRESS") {
   if (saving.value) return;
-  if (status !== "RESET" && form.value.activeStep === 1 && !(await ensureCorePainValid())) return false;
+  if (status !== "RESET") {
+    if (form.value.activeStep === 1 && !(await ensureCorePainValid())) return false;
+    if (form.value.activeStep === 2 && !(await ensureValueCanvasValid())) return false;
+  }
   saving.value = true;
   try {
     await saveStudentTrainingAnswer(TASK_KEY, buildAnswerPayload(status));
@@ -407,6 +489,7 @@ function submitTask() {
 }
 
 async function resetTraining() {
+  clearValueCanvas();
   form.value = createForm();
   await persist("RESET");
 }
@@ -420,6 +503,55 @@ function exportOutcome() {
   link.click();
   URL.revokeObjectURL(url);
 }
+
+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">
@@ -862,6 +994,124 @@ function exportOutcome() {
   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; }
+}
+
 .step-navigation {
   display: flex;
   justify-content: center;
@@ -942,6 +1192,8 @@ function exportOutcome() {
     writing-mode: vertical-rl;
   }
   .value-grid { grid-template-columns: 1fr; }
+  .canvas-guidance { padding: 15px; }
+  .canvas-guidance .template-download-button { position: static; margin: 8px 0; }
 }
 .workbench-head--actions-only {
   justify-content: flex-end;

From db8f07c0ee6be37ab03b5dc1e1530bc7e8f8b466 Mon Sep 17 00:00:00 2001
From: chenyuan <chenyuan@example.com>
Date: Wed, 12 Aug 2026 08:08:14 +0800
Subject: [PATCH 3/4] feat: add value positioning statements

---
 src/api/studentTrainingAnswer.js      |  19 ++++
 src/views/product/differentiation.vue | 141 +++++++++++++++++++++-----
 2 files changed, 134 insertions(+), 26 deletions(-)

diff --git a/src/api/studentTrainingAnswer.js b/src/api/studentTrainingAnswer.js
index 81238b7..b3cf55b 100644
--- a/src/api/studentTrainingAnswer.js
+++ b/src/api/studentTrainingAnswer.js
@@ -473,3 +473,22 @@ export function checkProductValuePositioningStepTwo(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 },
+  });
+}
diff --git a/src/views/product/differentiation.vue b/src/views/product/differentiation.vue
index feb1ece..c0afae2 100644
--- a/src/views/product/differentiation.vue
+++ b/src/views/product/differentiation.vue
@@ -149,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">
@@ -257,7 +247,7 @@ 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 { checkProductValuePositioningStepOne, checkProductValuePositioningStepTwo, getStudentTrainingAnswer, saveStudentTrainingAnswer, uploadStudentTrainingFile } from "@/api/studentTrainingAnswer";
+import { checkProductValuePositioningStepOne, checkProductValuePositioningStepTwo, checkProductValuePositioningStepThree, getStudentTrainingAnswer, saveStudentTrainingAnswer, uploadStudentTrainingFile } from "@/api/studentTrainingAnswer";
 import { parseTrainingArray } from "@/views/training/taskKeyMap";
 import { isStudentDemo } from "@/utils/studentDemo";
 
@@ -268,11 +258,18 @@ const checkingCorePain = ref(false);
 const corePainValidationMessage = ref("");
 const checkingValueCanvas = ref(false);
 const valueCanvasValidationMessage = ref("");
+const checkingPositioning = ref(false);
+const positioningValidationMessage = 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"];
+
+function createPositioningStatement(id) {
+  return { id, targetUser: "", productName: "", productCategory: "", coreValue: "", differentiationReason: "" };
+}
 
 const defaultRequirement =
   "产品价值主张及定位需要在市场调研和用户洞察基础上，明确目标用户、核心价值、差异化优势和定位表达。";
@@ -294,6 +291,7 @@ function createForm() {
     customerProfile: { jobs: "", pains: "", gains: "" },
     valueMap: { products: "", painRelievers: "", gainCreators: "" },
     valuePropositionCanvas: { url: "", name: "" },
+    positioningStatements: [createPositioningStatement(1), createPositioningStatement(2)],
     valueCanvas: { customerJobs: "", pains: "", gains: "", products: "", painRelievers: "", gainCreators: "" },
     statement: { targetUsers: "", valueProposition: "", differentiation: "", positioning: "" },
   };
@@ -350,6 +348,7 @@ async function setCurrentStep(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;
   }
   form.value.activeStep = targetStep;
 }
@@ -388,6 +387,7 @@ function normalizeForm(value = {}) {
     customerProfile: { ...base.customerProfile, ...(value.customerProfile || {}) },
     valueMap: { ...base.valueMap, ...(value.valueMap || {}) },
     valuePropositionCanvas: { ...base.valuePropositionCanvas, ...(value.valuePropositionCanvas || {}) },
+    positioningStatements: normalizePositioningStatements(value.positioningStatements),
     valueCanvas: { ...base.valueCanvas, ...(value.valueCanvas || {}) },
     statement: { ...base.statement, ...(value.statement || {}) },
   };
@@ -403,6 +403,14 @@ function normalizeCorePainRows(rows = []) {
   }));
 }
 
+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 });
+  });
+}
+
 async function ensureCorePainValid() {
   if (checkingCorePain.value) return false;
   checkingCorePain.value = true;
@@ -437,6 +445,20 @@ async function ensureValueCanvasValid() {
   } 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; }
+}
+
 function buildOutcome() {
   return {
     taskKey: TASK_KEY,
@@ -450,6 +472,7 @@ function buildOutcome() {
     customerProfile: form.value.customerProfile,
     valueMap: form.value.valueMap,
     valuePropositionCanvas: form.value.valuePropositionCanvas,
+    positioningStatements: form.value.positioningStatements,
     valueCanvas: form.value.valueCanvas,
     statement: form.value.statement,
     updatedAt: new Date().toISOString(),
@@ -469,6 +492,7 @@ async function persist(status = "IN_PROGRESS") {
   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;
   }
   saving.value = true;
   try {
@@ -504,6 +528,8 @@ function exportOutcome() {
   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`);
 
@@ -1112,6 +1138,67 @@ async function handleValueCanvasUpload(event) {
   .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; }
+
 .step-navigation {
   display: flex;
   justify-content: center;
@@ -1192,6 +1279,8 @@ async function handleValueCanvasUpload(event) {
     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; }
 }

From 50db86e548540e503db856ab5b6c93f9c37a2546 Mon Sep 17 00:00:00 2001
From: chenyuan <chenyuan@example.com>
Date: Wed, 12 Aug 2026 09:16:20 +0800
Subject: [PATCH 4/4] feat: add product positioning mrd

---
 src/api/studentTrainingAnswer.js      |  19 ++++
 src/views/product/differentiation.vue | 156 +++++++++++++++++++++++---
 2 files changed, 157 insertions(+), 18 deletions(-)

diff --git a/src/api/studentTrainingAnswer.js b/src/api/studentTrainingAnswer.js
index b3cf55b..a8a0c3c 100644
--- a/src/api/studentTrainingAnswer.js
+++ b/src/api/studentTrainingAnswer.js
@@ -492,3 +492,22 @@ export function checkProductValuePositioningStepThree(payload) {
     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/views/product/differentiation.vue b/src/views/product/differentiation.vue
index c0afae2..910ef3b 100644
--- a/src/views/product/differentiation.vue
+++ b/src/views/product/differentiation.vue
@@ -174,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">
@@ -247,7 +258,7 @@ 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 { checkProductValuePositioningStepOne, checkProductValuePositioningStepTwo, checkProductValuePositioningStepThree, getStudentTrainingAnswer, saveStudentTrainingAnswer, uploadStudentTrainingFile } 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";
 
@@ -260,17 +271,34 @@ 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 =
@@ -292,6 +320,7 @@ function createForm() {
     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: "" },
   };
@@ -349,6 +378,7 @@ async function setCurrentStep(step) {
     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;
 }
@@ -388,6 +418,7 @@ function normalizeForm(value = {}) {
     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 || {}) },
   };
@@ -411,6 +442,21 @@ function normalizePositioningStatements(statements = []) {
   });
 }
 
+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;
@@ -459,6 +505,20 @@ async function ensurePositioningValid() {
   } 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,
@@ -473,6 +533,7 @@ function buildOutcome() {
     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(),
@@ -493,6 +554,7 @@ async function persist(status = "IN_PROGRESS") {
     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 {
@@ -1199,6 +1261,64 @@ async function handleValueCanvasUpload(event) {
 
 .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;