From 731438754c6063f2e7c804fa941dbb03252b3cd7 Mon Sep 17 00:00:00 2001
From: chenyuan <chenyuan@example.com>
Date: Tue, 11 Aug 2026 22:18:58 +0800
Subject: [PATCH 1/4] feat: add consumer scenario journey ordering

---
 src/api/studentTrainingAnswer.js       |  29 ++
 src/views/demand/consumer-scenario.vue | 382 ++++++++++++++++++++++++-
 2 files changed, 398 insertions(+), 13 deletions(-)

diff --git a/src/api/studentTrainingAnswer.js b/src/api/studentTrainingAnswer.js
index 422d013..b0dd82b 100644
--- a/src/api/studentTrainingAnswer.js
+++ b/src/api/studentTrainingAnswer.js
@@ -423,3 +423,32 @@ export function checkConsumerBehaviorStepFour(payload) {
     headers: { repeatSubmit: false },
   });
 }
+
+const consumerScenarioJourneyOrder = [
+  "problem-awareness",
+  "information-search",
+  "evaluation-decision",
+  "purchase-conversion",
+  "post-purchase",
+];
+
+export function checkConsumerScenarioStepOne(payload) {
+  const stageOrder = Array.isArray(payload?.stageOrder) ? payload.stageOrder : [];
+  if (isStudentDemo()) {
+    const valid = stageOrder.length === consumerScenarioJourneyOrder.length
+      && stageOrder.every((stageId, index) => stageId === consumerScenarioJourneyOrder[index]);
+    return Promise.resolve({
+      code: 200,
+      data: {
+        valid,
+        message: valid ? "排序正确，可以进入下一步。" : "排序还不正确，请根据消费者购买旅程再次调整。",
+      },
+    });
+  }
+  return request({
+    url: "/api/student-training-answers/consumer-scenario/step-1/validate",
+    method: "post",
+    data: { stageOrder },
+    headers: { repeatSubmit: false },
+  });
+}
diff --git a/src/views/demand/consumer-scenario.vue b/src/views/demand/consumer-scenario.vue
index 15ae82a..38858ce 100644
--- a/src/views/demand/consumer-scenario.vue
+++ b/src/views/demand/consumer-scenario.vue
@@ -52,15 +52,46 @@
         </div>
 
         <section v-show="isSectionVisible(1)" class="scenario-step-section">
-        <div class="journey-head">
-          <h4>用户购买旅程</h4>
-          <div class="journey-flow" aria-label="用户购买旅程阶段">
-            <template v-for="(phase, index) in phases" :key="phase.key">
-              <div class="phase-node">{{ phase.label }}</div>
-              <div v-if="index < phases.length - 1" class="phase-arrow" aria-hidden="true"></div>
+          <div class="journey-sort-head">
+            <div>
+              <p class="journey-sort-kicker">Customer Journey</p>
+              <h4>将购买旅程卡片按正确顺序排列</h4>
+              <p>从需求触发到购买后的使用反馈，共五个阶段。拖动卡片，或使用卡片右侧的上下移动按钮调整顺序。</p>
+            </div>
+            <button type="button" class="journey-check-action" :disabled="checkingJourney" @click="checkJourneyOrder">
+              {{ checkingJourney ? "正在校验…" : "检查排序" }}
+            </button>
+          </div>
+
+          <div class="journey-sort-list" role="list" aria-label="消费者购买旅程排序">
+            <template v-for="(stage, index) in orderedJourneyStages" :key="stage.id">
+              <article
+                class="journey-sort-card"
+                :class="{ dragging: draggedStageId === stage.id }"
+                draggable="true"
+                role="listitem"
+                @dragstart="startJourneyDrag(stage.id)"
+                @dragover.prevent
+                @drop="dropJourneyStage(stage.id)"
+                @dragend="endJourneyDrag"
+              >
+                <span class="journey-card-order">{{ String(index + 1).padStart(2, "0") }}</span>
+                <div class="journey-card-copy">
+                  <strong>{{ stage.title }}</strong>
+                  <span>{{ stage.description }}</span>
+                </div>
+                <div class="journey-card-actions" aria-label="调整卡片顺序">
+                  <button type="button" :disabled="index === 0" :aria-label="`将${stage.title}上移`" @click="moveJourneyStage(index, -1)">↑</button>
+                  <button type="button" :disabled="index === orderedJourneyStages.length - 1" :aria-label="`将${stage.title}下移`" @click="moveJourneyStage(index, 1)">↓</button>
+                </div>
+              </article>
+              <span v-if="index < orderedJourneyStages.length - 1" class="journey-sort-arrow" aria-hidden="true">→</span>
             </template>
           </div>
-        </div>
+
+          <p v-if="journeyCheckMessage" :class="['journey-check-message', { success: journeyCheckedCorrectly }]" role="status">
+            {{ journeyCheckMessage }}
+          </p>
         </section>
 
         <section v-show="isSectionVisible(2)" class="scenario-step-section">
@@ -204,7 +235,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 { getStudentTrainingAnswer, saveStudentTrainingAnswer } from "@/api/studentTrainingAnswer";
+import { checkConsumerScenarioStepOne, getStudentTrainingAnswer, saveStudentTrainingAnswer } from "@/api/studentTrainingAnswer";
 
 const TASK_KEY = "consumer-scenario";
 const { proxy } = getCurrentInstance();
@@ -219,6 +250,34 @@ const defaultGoals = [
   "将场景洞察转化为产品机会。",
 ];
 
+const journeyStages = [
+  {
+    id: "problem-awareness",
+    title: "问题感知（需求触发）",
+    description: "用户意识到自身存在某个问题或需求",
+  },
+  {
+    id: "information-search",
+    title: "信息搜索（产品探索）",
+    description: "用户主动搜索相关信息，了解可选方案",
+  },
+  {
+    id: "evaluation-decision",
+    title: "评估决策（对比选择）",
+    description: "用户对比不同产品的功能、价格、口碑",
+  },
+  {
+    id: "purchase-conversion",
+    title: "购买转化（下单支付）",
+    description: "用户完成购买决策并下单",
+  },
+  {
+    id: "post-purchase",
+    title: "购后行为（使用反馈）",
+    description: "用户使用产品后形成体验评价，决定是否推荐或复购",
+  },
+];
+
 const phases = [
   { key: "problem", label: "问题感知（需求触发）" },
   { key: "search", label: "信息搜索（产品探索）" },
@@ -316,6 +375,10 @@ const emotionPoints = [
 
 const taskConfig = ref(null);
 const saving = ref(false);
+const checkingJourney = ref(false);
+const draggedStageId = ref("");
+const journeyCheckMessage = ref("");
+const journeyCheckedCorrectly = ref(false);
 
 function createMatrix() {
   return journeyRows.reduce((matrix, row) => {
@@ -337,6 +400,7 @@ function createClassifications() {
 function createForm() {
   return {
     activeStep: 1,
+    journeyOrder: createShuffledJourneyOrder(),
     classifications: createClassifications(),
     matrix: createMatrix(),
   };
@@ -351,13 +415,30 @@ const taskRequirement = computed(() => taskConfig.value?.requirements || default
 const trainingSteps = computed(() => parseArray(taskConfig.value?.steps, []));
 const hasConfiguredSteps = computed(() => trainingSteps.value.length > 0);
 const activeStepName = computed(() => trainingSteps.value[form.value.activeStep - 1] || "");
+const orderedJourneyStages = computed(() =>
+  form.value.journeyOrder
+    .map((stageId) => journeyStages.find((stage) => stage.id === stageId))
+    .filter(Boolean)
+);
 
 const progressItems = computed(() => [
-  { text: isClassifiedCorrectly.value ? "已完成：旅程阶段判断" : "进行中：旅程阶段判断", status: isClassifiedCorrectly.value ? "done" : "doing" },
+  { text: journeyCheckedCorrectly.value ? "已完成：购买旅程排序" : "进行中：购买旅程排序", status: journeyCheckedCorrectly.value ? "done" : "doing" },
   { text: hasMatrixContent.value ? "进行中：用户旅程地图填写" : "待完成：用户旅程地图填写", status: hasMatrixContent.value ? "doing" : "" },
   { text: "待完成：提交实训成果", status: "" },
 ]);
 
+function createShuffledJourneyOrder() {
+  const order = journeyStages.map((stage) => stage.id);
+  for (let index = order.length - 1; index > 0; index -= 1) {
+    const randomIndex = Math.floor(Math.random() * (index + 1));
+    [order[index], order[randomIndex]] = [order[randomIndex], order[index]];
+  }
+  if (order.every((stageId, index) => stageId === journeyStages[index].id)) {
+    [order[0], order[1]] = [order[1], order[0]];
+  }
+  return order;
+}
+
 const isClassifiedCorrectly = computed(() =>
   scenarioStatements.every((item) => form.value.classifications[item.key] === item.defaultPhase)
 );
@@ -415,17 +496,30 @@ function applySavedAnswer(value) {
     if (!parsed || typeof parsed !== "object") return;
     form.value = {
       activeStep: normalizeActiveStep(parsed.currentStep),
+      journeyOrder: normalizeJourneyOrder(parsed.journeyOrder),
       classifications: {
         ...createClassifications(),
         ...(parsed.classifications || {}),
       },
       matrix: normalizeMatrix(parsed.matrix),
     };
+    journeyCheckedCorrectly.value = parsed.journeyCheckedCorrectly === true;
+    journeyCheckMessage.value = journeyCheckedCorrectly.value ? "排序正确，已完成本步骤。" : "";
   } catch (error) {
     // Ignore malformed historical answers.
   }
 }
 
+function normalizeJourneyOrder(value) {
+  if (!Array.isArray(value) || value.length !== journeyStages.length) return createShuffledJourneyOrder();
+  const uniqueOrder = [...new Set(value)];
+  const validIds = journeyStages.map((stage) => stage.id);
+  if (uniqueOrder.length !== validIds.length || uniqueOrder.some((stageId) => !validIds.includes(stageId))) {
+    return createShuffledJourneyOrder();
+  }
+  return uniqueOrder;
+}
+
 function normalizeMatrix(value = {}) {
   const matrix = createMatrix();
   journeyRows.forEach((row) => {
@@ -443,9 +537,11 @@ function normalizeActiveStep(value) {
   return total ? Math.min(step, total) : 1;
 }
 
-function setCurrentStep(step) {
+async function setCurrentStep(step) {
   if (!hasConfiguredSteps.value) return;
-  form.value.activeStep = normalizeActiveStep(step);
+  const targetStep = normalizeActiveStep(step);
+  if (targetStep > form.value.activeStep && form.value.activeStep === 1 && !(await persist("IN_PROGRESS"))) return;
+  form.value.activeStep = targetStep;
 }
 
 function isSectionVisible(section) {
@@ -457,8 +553,66 @@ function goPreviousStep() {
   setCurrentStep(form.value.activeStep - 1);
 }
 
-function goNextStep() {
-  setCurrentStep(form.value.activeStep + 1);
+async function goNextStep() {
+  await setCurrentStep(form.value.activeStep + 1);
+}
+
+function startJourneyDrag(stageId) {
+  draggedStageId.value = stageId;
+}
+
+function endJourneyDrag() {
+  draggedStageId.value = "";
+}
+
+function dropJourneyStage(targetStageId) {
+  const sourceStageId = draggedStageId.value;
+  endJourneyDrag();
+  if (!sourceStageId || sourceStageId === targetStageId) return;
+  const sourceIndex = form.value.journeyOrder.indexOf(sourceStageId);
+  const targetIndex = form.value.journeyOrder.indexOf(targetStageId);
+  if (sourceIndex < 0 || targetIndex < 0) return;
+  const nextOrder = [...form.value.journeyOrder];
+  nextOrder.splice(sourceIndex, 1);
+  nextOrder.splice(targetIndex, 0, sourceStageId);
+  updateJourneyOrder(nextOrder);
+}
+
+function moveJourneyStage(index, offset) {
+  const targetIndex = index + offset;
+  if (targetIndex < 0 || targetIndex >= form.value.journeyOrder.length) return;
+  const nextOrder = [...form.value.journeyOrder];
+  [nextOrder[index], nextOrder[targetIndex]] = [nextOrder[targetIndex], nextOrder[index]];
+  updateJourneyOrder(nextOrder);
+}
+
+function updateJourneyOrder(nextOrder) {
+  form.value.journeyOrder = nextOrder;
+  journeyCheckedCorrectly.value = false;
+  journeyCheckMessage.value = "";
+}
+
+async function checkJourneyOrder() {
+  await ensureJourneyOrderValid(true);
+}
+
+async function ensureJourneyOrderValid(showSuccess = false) {
+  if (checkingJourney.value) return false;
+  checkingJourney.value = true;
+  try {
+    const response = await checkConsumerScenarioStepOne({ stageOrder: form.value.journeyOrder });
+    const result = response?.data || {};
+    journeyCheckedCorrectly.value = result.valid === true;
+    journeyCheckMessage.value = result.message || (result.valid ? "排序正确，已完成本步骤。" : "排序还不正确，请继续调整。");
+    if (result.valid && showSuccess) proxy?.$modal?.msgSuccess("排序正确，可以进入下一步");
+    return result.valid === true;
+  } catch (error) {
+    journeyCheckedCorrectly.value = false;
+    journeyCheckMessage.value = error?.message || "排序校验失败，请稍后重试。";
+    return false;
+  } finally {
+    checkingJourney.value = false;
+  }
 }
 
 function buildOutcome() {
@@ -467,6 +621,8 @@ function buildOutcome() {
     taskId: taskConfig.value?.id || "",
     taskName: taskTitle.value,
     currentStep: form.value.activeStep,
+    journeyOrder: form.value.journeyOrder,
+    journeyCheckedCorrectly: journeyCheckedCorrectly.value,
     phases,
     classifications: form.value.classifications,
     matrix: form.value.matrix,
@@ -485,10 +641,12 @@ function buildAnswerPayload(status) {
 
 async function persist(status = "IN_PROGRESS") {
   if (saving.value) return;
+  if (status !== "RESET" && form.value.activeStep === 1 && !(await ensureJourneyOrderValid())) return false;
   saving.value = true;
   try {
     await saveStudentTrainingAnswer(TASK_KEY, buildAnswerPayload(status));
     proxy?.$modal?.msgSuccess(status === "SUBMITTED" ? "提交成功" : "保存成功");
+    return true;
   } finally {
     saving.value = false;
   }
@@ -872,6 +1030,184 @@ function exportOutcome() {
   font-weight: 900;
 }
 
+.journey-sort-head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 20px;
+  margin-bottom: 22px;
+  padding: 20px;
+  border: 1px solid rgba(91, 218, 255, 0.28);
+  border-radius: 18px;
+  background: linear-gradient(120deg, rgba(7, 94, 132, 0.26), rgba(2, 26, 43, 0.72));
+
+  h4 {
+    margin: 5px 0 8px;
+    color: #ffffff;
+    font-size: 21px;
+    line-height: 1.35;
+  }
+
+  p {
+    max-width: 700px;
+    margin: 0;
+    color: #b9d8e9;
+    font-size: 14px;
+    line-height: 1.75;
+  }
+}
+
+.journey-sort-kicker {
+  color: #69e3ff !important;
+  font-size: 12px !important;
+  font-weight: 900;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.journey-check-action {
+  flex: 0 0 auto;
+  min-height: 42px;
+  padding: 0 18px;
+  border: 1px solid rgba(112, 235, 255, 0.74);
+  border-radius: 10px;
+  color: #ecfdff;
+  background: linear-gradient(135deg, #078ac2, #07558a);
+  box-shadow: 0 8px 20px rgba(0, 145, 203, 0.2);
+  font: inherit;
+  font-size: 14px;
+  font-weight: 800;
+  cursor: pointer;
+
+  &:hover:not(:disabled) {
+    transform: translateY(-1px);
+    background: linear-gradient(135deg, #0ba9df, #0870aa);
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.64;
+  }
+}
+
+.journey-sort-list {
+  display: grid;
+  grid-template-columns: repeat(9, minmax(0, 1fr));
+  align-items: center;
+  gap: 8px;
+}
+
+.journey-sort-card {
+  position: relative;
+  display: grid;
+  grid-column: span 1;
+  min-height: 162px;
+  min-width: 0;
+  grid-template-rows: auto 1fr auto;
+  padding: 16px;
+  border: 1px solid rgba(63, 174, 222, 0.48);
+  border-radius: 14px;
+  color: #ecfbff;
+  background: linear-gradient(150deg, rgba(8, 74, 109, 0.82), rgba(3, 24, 42, 0.9));
+  box-shadow: inset 0 1px 0 rgba(201, 247, 255, 0.1), 0 12px 24px rgba(0, 0, 0, 0.16);
+  cursor: grab;
+  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
+
+  &:hover {
+    transform: translateY(-3px);
+    border-color: rgba(106, 235, 255, 0.94);
+    box-shadow: inset 0 1px 0 rgba(201, 247, 255, 0.16), 0 16px 30px rgba(0, 0, 0, 0.28), 0 0 20px rgba(15, 199, 242, 0.14);
+  }
+
+  &.dragging {
+    opacity: 0.45;
+    cursor: grabbing;
+  }
+}
+
+.journey-card-order {
+  color: #78e9ff;
+  font-size: 12px;
+  font-weight: 900;
+  letter-spacing: 0.08em;
+}
+
+.journey-card-copy {
+  align-self: center;
+
+  strong,
+  span {
+    display: block;
+  }
+
+  strong {
+    margin-bottom: 8px;
+    color: #ffffff;
+    font-size: 15px;
+    line-height: 1.45;
+  }
+
+  span {
+    color: #b6d9e9;
+    font-size: 12px;
+    line-height: 1.65;
+  }
+}
+
+.journey-card-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 6px;
+
+  button {
+    display: inline-grid;
+    width: 26px;
+    height: 26px;
+    place-items: center;
+    border: 1px solid rgba(111, 220, 246, 0.45);
+    border-radius: 7px;
+    color: #dffbff;
+    background: rgba(4, 41, 65, 0.76);
+    font: inherit;
+    font-weight: 900;
+    cursor: pointer;
+
+    &:hover:not(:disabled) {
+      border-color: #72e8ff;
+      background: rgba(9, 119, 160, 0.9);
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+      opacity: 0.28;
+    }
+  }
+}
+
+.journey-sort-arrow {
+  justify-self: center;
+  color: #42cfff;
+  font-size: 20px;
+  font-weight: 900;
+}
+
+.journey-check-message {
+  margin: 20px 0 0;
+  padding: 11px 14px;
+  border: 1px solid rgba(255, 136, 106, 0.7);
+  border-radius: 10px;
+  color: #ffd2c7;
+  background: rgba(127, 45, 30, 0.25);
+  font-size: 14px;
+  font-weight: 700;
+
+  &.success {
+    border-color: rgba(90, 238, 198, 0.65);
+    color: #d6fff3;
+    background: rgba(16, 122, 98, 0.25);
+  }
+}
+
 .journey-flow {
   display: grid;
   grid-template-columns: repeat(5, minmax(120px, 1fr));
@@ -1295,6 +1631,26 @@ function exportOutcome() {
     grid-template-columns: 1fr;
   }
 
+  .journey-sort-head {
+    flex-direction: column;
+  }
+
+  .journey-check-action {
+    width: 100%;
+  }
+
+  .journey-sort-list {
+    grid-template-columns: 1fr;
+  }
+
+  .journey-sort-card {
+    min-height: 126px;
+  }
+
+  .journey-sort-arrow {
+    transform: rotate(90deg);
+  }
+
   .nav-action,
   .training-action {
     width: 100%;

From 04435127351c264d1cc49f0363cb5a46d7a1d8a2 Mon Sep 17 00:00:00 2001
From: chenyuan <chenyuan@example.com>
Date: Tue, 11 Aug 2026 22:29:35 +0800
Subject: [PATCH 2/4] feat: add consumer scenario journey analysis

---
 src/api/studentTrainingAnswer.js       |  28 +++
 src/views/demand/consumer-scenario.vue | 238 +++++++++++++++++++++++--
 2 files changed, 251 insertions(+), 15 deletions(-)

diff --git a/src/api/studentTrainingAnswer.js b/src/api/studentTrainingAnswer.js
index b0dd82b..6569c16 100644
--- a/src/api/studentTrainingAnswer.js
+++ b/src/api/studentTrainingAnswer.js
@@ -452,3 +452,31 @@ export function checkConsumerScenarioStepOne(payload) {
     headers: { repeatSubmit: false },
   });
 }
+
+export function checkConsumerScenarioStepTwo(payload) {
+  const rows = Array.isArray(payload?.rows) ? payload.rows : [];
+  if (isStudentDemo()) {
+    const requiredStageIds = consumerScenarioJourneyOrder;
+    const incomplete = rows.find((row) => !String(row?.behaviorDescription || "").trim()
+      || !String(row?.keyTouchpoints || "").trim()
+      || !["负面", "中性", "正面"].includes(row?.emotionExperience)
+      || !String(row?.decisionFactors || "").trim());
+    const valid = rows.length === requiredStageIds.length
+      && rows.every((row) => requiredStageIds.includes(row?.stageId))
+      && new Set(rows.map((row) => row.stageId)).size === requiredStageIds.length
+      && !incomplete;
+    return Promise.resolve({
+      code: 200,
+      data: {
+        valid,
+        message: valid ? "旅程分析填写完整。" : "请完整填写五个阶段的用户行为、关键触点、情感体验和决策因素。",
+      },
+    });
+  }
+  return request({
+    url: "/api/student-training-answers/consumer-scenario/step-2/validate",
+    method: "post",
+    data: { rows },
+    headers: { repeatSubmit: false },
+  });
+}
diff --git a/src/views/demand/consumer-scenario.vue b/src/views/demand/consumer-scenario.vue
index 38858ce..b2302e3 100644
--- a/src/views/demand/consumer-scenario.vue
+++ b/src/views/demand/consumer-scenario.vue
@@ -95,18 +95,48 @@
         </section>
 
         <section v-show="isSectionVisible(2)" class="scenario-step-section">
-        <p class="requirement">
-          需求说明：上述几项内容让学生拖动到相应框中进行排序，完成用户旅程地图填充。
-        </p>
-
-        <div class="scenario-list">
-          <label v-for="item in scenarioStatements" :key="item.key" class="scenario-row">
-            <span>{{ item.text }}</span>
-            <select v-model="form.classifications[item.key]" class="phase-select">
-              <option v-for="phase in phases" :key="phase.key" :value="phase.key">{{ phase.label }}</option>
-            </select>
-          </label>
-        </div>
+          <div class="journey-analysis-intro">
+            <p class="journey-sort-kicker">Journey evidence map</p>
+            <h4>分析购买旅程中的行为与体验</h4>
+            <p>请根据访谈记录，分析用户在购买旅程各阶段的行为表现，识别关键触点，并评估用户的情感体验水平。</p>
+          </div>
+
+          <div class="journey-analysis-wrap">
+            <table class="journey-analysis-table">
+              <thead>
+                <tr>
+                  <th>序号</th>
+                  <th>旅程阶段</th>
+                  <th>用户行为描述</th>
+                  <th>关键触点</th>
+                  <th>情感体验</th>
+                  <th>关键决策因素</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr v-for="(row, index) in form.journeyAnalysis" :key="row.stageId">
+                  <td class="journey-analysis-index">{{ index + 1 }}</td>
+                  <th class="journey-analysis-stage">{{ stageTitle(row.stageId) }}</th>
+                  <td>
+                    <textarea v-model="row.behaviorDescription" placeholder="描述用户在此阶段的行为表现"></textarea>
+                  </td>
+                  <td>
+                    <textarea v-model="row.keyTouchpoints" placeholder="填写平台、内容、服务或产品触点"></textarea>
+                  </td>
+                  <td>
+                    <select v-model="row.emotionExperience" aria-label="选择情感体验">
+                      <option value="" disabled>请选择</option>
+                      <option v-for="emotion in emotionOptions" :key="emotion" :value="emotion">{{ emotion }}</option>
+                    </select>
+                  </td>
+                  <td>
+                    <textarea v-model="row.decisionFactors" placeholder="填写推动或阻碍决策的关键因素"></textarea>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+          <p v-if="journeyAnalysisMessage" class="journey-check-message" role="status">{{ journeyAnalysisMessage }}</p>
         </section>
 
         <section v-show="isSectionVisible(3)" class="scenario-step-section">
@@ -235,7 +265,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 { checkConsumerScenarioStepOne, getStudentTrainingAnswer, saveStudentTrainingAnswer } from "@/api/studentTrainingAnswer";
+import { checkConsumerScenarioStepOne, checkConsumerScenarioStepTwo, getStudentTrainingAnswer, saveStudentTrainingAnswer } from "@/api/studentTrainingAnswer";
 
 const TASK_KEY = "consumer-scenario";
 const { proxy } = getCurrentInstance();
@@ -278,6 +308,8 @@ const journeyStages = [
   },
 ];
 
+const emotionOptions = ["负面", "中性", "正面"];
+
 const phases = [
   { key: "problem", label: "问题感知（需求触发）" },
   { key: "search", label: "信息搜索（产品探索）" },
@@ -376,9 +408,11 @@ const emotionPoints = [
 const taskConfig = ref(null);
 const saving = ref(false);
 const checkingJourney = ref(false);
+const checkingJourneyAnalysis = ref(false);
 const draggedStageId = ref("");
 const journeyCheckMessage = ref("");
 const journeyCheckedCorrectly = ref(false);
+const journeyAnalysisMessage = ref("");
 
 function createMatrix() {
   return journeyRows.reduce((matrix, row) => {
@@ -397,10 +431,21 @@ function createClassifications() {
   }, {});
 }
 
+function createJourneyAnalysis() {
+  return journeyStages.map((stage) => ({
+    stageId: stage.id,
+    behaviorDescription: "",
+    keyTouchpoints: "",
+    emotionExperience: "",
+    decisionFactors: "",
+  }));
+}
+
 function createForm() {
   return {
     activeStep: 1,
     journeyOrder: createShuffledJourneyOrder(),
+    journeyAnalysis: createJourneyAnalysis(),
     classifications: createClassifications(),
     matrix: createMatrix(),
   };
@@ -423,7 +468,7 @@ const orderedJourneyStages = computed(() =>
 
 const progressItems = computed(() => [
   { text: journeyCheckedCorrectly.value ? "已完成：购买旅程排序" : "进行中：购买旅程排序", status: journeyCheckedCorrectly.value ? "done" : "doing" },
-  { text: hasMatrixContent.value ? "进行中：用户旅程地图填写" : "待完成：用户旅程地图填写", status: hasMatrixContent.value ? "doing" : "" },
+  { text: hasJourneyAnalysisContent.value ? "进行中：用户旅程分析" : "待完成：用户旅程分析", status: hasJourneyAnalysisContent.value ? "doing" : "" },
   { text: "待完成：提交实训成果", status: "" },
 ]);
 
@@ -449,6 +494,13 @@ const hasMatrixContent = computed(() =>
   )
 );
 
+const hasJourneyAnalysisContent = computed(() =>
+  form.value.journeyAnalysis.some((row) =>
+    [row.behaviorDescription, row.keyTouchpoints, row.emotionExperience, row.decisionFactors]
+      .some((value) => String(value || "").trim())
+  )
+);
+
 onMounted(async () => {
   await loadTaskConfig();
   await loadSavedAnswer();
@@ -497,6 +549,7 @@ function applySavedAnswer(value) {
     form.value = {
       activeStep: normalizeActiveStep(parsed.currentStep),
       journeyOrder: normalizeJourneyOrder(parsed.journeyOrder),
+      journeyAnalysis: normalizeJourneyAnalysis(parsed.journeyAnalysis),
       classifications: {
         ...createClassifications(),
         ...(parsed.classifications || {}),
@@ -510,6 +563,20 @@ function applySavedAnswer(value) {
   }
 }
 
+function normalizeJourneyAnalysis(value) {
+  const savedRows = Array.isArray(value) ? value : [];
+  return createJourneyAnalysis().map((row) => {
+    const savedRow = savedRows.find((item) => item?.stageId === row.stageId) || {};
+    return {
+      ...row,
+      behaviorDescription: savedRow.behaviorDescription || "",
+      keyTouchpoints: savedRow.keyTouchpoints || "",
+      emotionExperience: emotionOptions.includes(savedRow.emotionExperience) ? savedRow.emotionExperience : "",
+      decisionFactors: savedRow.decisionFactors || "",
+    };
+  });
+}
+
 function normalizeJourneyOrder(value) {
   if (!Array.isArray(value) || value.length !== journeyStages.length) return createShuffledJourneyOrder();
   const uniqueOrder = [...new Set(value)];
@@ -540,7 +607,7 @@ function normalizeActiveStep(value) {
 async function setCurrentStep(step) {
   if (!hasConfiguredSteps.value) return;
   const targetStep = normalizeActiveStep(step);
-  if (targetStep > form.value.activeStep && form.value.activeStep === 1 && !(await persist("IN_PROGRESS"))) return;
+  if (targetStep > form.value.activeStep && [1, 2].includes(form.value.activeStep) && !(await persist("IN_PROGRESS"))) return;
   form.value.activeStep = targetStep;
 }
 
@@ -615,6 +682,26 @@ async function ensureJourneyOrderValid(showSuccess = false) {
   }
 }
 
+function stageTitle(stageId) {
+  return journeyStages.find((stage) => stage.id === stageId)?.title || "未知阶段";
+}
+
+async function ensureJourneyAnalysisValid() {
+  if (checkingJourneyAnalysis.value) return false;
+  checkingJourneyAnalysis.value = true;
+  try {
+    const response = await checkConsumerScenarioStepTwo({ rows: form.value.journeyAnalysis });
+    const result = response?.data || {};
+    journeyAnalysisMessage.value = result.message || (result.valid ? "旅程分析填写完整。" : "请完整填写五个阶段的旅程分析。");
+    return result.valid === true;
+  } catch (error) {
+    journeyAnalysisMessage.value = error?.message || "旅程分析校验失败，请稍后重试。";
+    return false;
+  } finally {
+    checkingJourneyAnalysis.value = false;
+  }
+}
+
 function buildOutcome() {
   return {
     taskKey: TASK_KEY,
@@ -623,6 +710,7 @@ function buildOutcome() {
     currentStep: form.value.activeStep,
     journeyOrder: form.value.journeyOrder,
     journeyCheckedCorrectly: journeyCheckedCorrectly.value,
+    journeyAnalysis: form.value.journeyAnalysis,
     phases,
     classifications: form.value.classifications,
     matrix: form.value.matrix,
@@ -642,6 +730,7 @@ function buildAnswerPayload(status) {
 async function persist(status = "IN_PROGRESS") {
   if (saving.value) return;
   if (status !== "RESET" && form.value.activeStep === 1 && !(await ensureJourneyOrderValid())) return false;
+  if (status !== "RESET" && form.value.activeStep === 2 && !(await ensureJourneyAnalysisValid())) return false;
   saving.value = true;
   try {
     await saveStudentTrainingAnswer(TASK_KEY, buildAnswerPayload(status));
@@ -1208,6 +1297,125 @@ function exportOutcome() {
   }
 }
 
+.journey-analysis-intro {
+  margin-bottom: 18px;
+  padding: 20px;
+  border-left: 3px solid #3bd8ff;
+  border-radius: 0 16px 16px 0;
+  background: linear-gradient(90deg, rgba(7, 95, 137, 0.28), rgba(4, 31, 49, 0.18));
+
+  h4 {
+    margin: 4px 0 8px;
+    color: #ffffff;
+    font-size: 21px;
+  }
+
+  p {
+    margin: 0;
+    color: #c3dfec;
+    font-size: 14px;
+    line-height: 1.8;
+  }
+}
+
+.journey-analysis-wrap {
+  overflow-x: auto;
+  border: 1px solid rgba(72, 182, 228, 0.46);
+  border-radius: 16px;
+  background: rgba(2, 20, 33, 0.72);
+}
+
+.journey-analysis-table {
+  width: 100%;
+  min-width: 1120px;
+  border-collapse: collapse;
+  table-layout: fixed;
+
+  th,
+  td {
+    border: 1px solid rgba(77, 167, 220, 0.28);
+  }
+
+  thead th {
+    padding: 13px 10px;
+    color: #effcff;
+    background: linear-gradient(90deg, rgba(8, 128, 178, 0.94), rgba(5, 94, 143, 0.9));
+    font-size: 14px;
+    font-weight: 900;
+    text-align: center;
+  }
+
+  tbody tr {
+    background: rgba(2, 17, 29, 0.48);
+
+    &:nth-child(even) {
+      background: rgba(9, 47, 67, 0.34);
+    }
+  }
+
+  td,
+  tbody th {
+    padding: 10px;
+    vertical-align: top;
+  }
+
+  th:nth-child(1) { width: 54px; }
+  th:nth-child(2) { width: 132px; }
+  th:nth-child(3), th:nth-child(4), th:nth-child(6) { width: 27%; }
+  th:nth-child(5) { width: 118px; }
+
+  textarea,
+  select {
+    width: 100%;
+    border: 1px solid transparent;
+    border-radius: 8px;
+    color: #eaf9ff;
+    background: transparent;
+    font: inherit;
+    font-size: 13px;
+    line-height: 1.65;
+    outline: none;
+    box-sizing: border-box;
+
+    &:focus {
+      border-color: rgba(92, 224, 255, 0.76);
+      background: rgba(8, 64, 92, 0.42);
+      box-shadow: 0 0 0 3px rgba(34, 207, 255, 0.1);
+    }
+  }
+
+  textarea {
+    min-height: 112px;
+    padding: 8px;
+    resize: vertical;
+  }
+
+  textarea::placeholder {
+    color: #7897a8;
+  }
+
+  select {
+    min-height: 38px;
+    margin-top: 30px;
+    padding: 0 9px;
+    border-color: rgba(99, 177, 211, 0.6);
+    background: rgba(6, 38, 58, 0.78);
+  }
+}
+
+.journey-analysis-index,
+.journey-analysis-stage {
+  color: #dff7ff;
+  font-weight: 800;
+  text-align: center;
+  vertical-align: middle !important;
+}
+
+.journey-analysis-stage {
+  color: #9defff;
+  line-height: 1.65;
+}
+
 .journey-flow {
   display: grid;
   grid-template-columns: repeat(5, minmax(120px, 1fr));

From 7e0a687c5ac4d8e3da162bc8b08f17bb54716d50 Mon Sep 17 00:00:00 2001
From: chenyuan <chenyuan@example.com>
Date: Tue, 11 Aug 2026 22:43:32 +0800
Subject: [PATCH 3/4] feat: add consumer scenario journey map upload

---
 src/api/studentTrainingAnswer.js       |  20 ++
 src/views/demand/consumer-scenario.vue | 323 +++++++++++++++++++++++--
 2 files changed, 318 insertions(+), 25 deletions(-)

diff --git a/src/api/studentTrainingAnswer.js b/src/api/studentTrainingAnswer.js
index 6569c16..2074d5a 100644
--- a/src/api/studentTrainingAnswer.js
+++ b/src/api/studentTrainingAnswer.js
@@ -480,3 +480,23 @@ export function checkConsumerScenarioStepTwo(payload) {
     headers: { repeatSubmit: false },
   });
 }
+
+export function checkConsumerScenarioStepThree(payload) {
+  const journeyMapUrl = String(payload?.journeyMapUrl || "").trim();
+  if (isStudentDemo()) {
+    const valid = Boolean(journeyMapUrl);
+    return Promise.resolve({
+      code: 200,
+      data: {
+        valid,
+        message: valid ? "用户购买旅程图已上传。" : "请上传用户购买旅程图。",
+      },
+    });
+  }
+  return request({
+    url: "/api/student-training-answers/consumer-scenario/step-3/validate",
+    method: "post",
+    data: { journeyMapUrl },
+    headers: { repeatSubmit: false },
+  });
+}
diff --git a/src/views/demand/consumer-scenario.vue b/src/views/demand/consumer-scenario.vue
index b2302e3..1d899d7 100644
--- a/src/views/demand/consumer-scenario.vue
+++ b/src/views/demand/consumer-scenario.vue
@@ -140,28 +140,54 @@
         </section>
 
         <section v-show="isSectionVisible(3)" class="scenario-step-section">
-        <div class="journey-table-wrap">
-          <table class="journey-table">
-            <thead>
-              <tr>
-                <th class="row-head">阶段</th>
-                <th v-for="phase in phases" :key="phase.key">{{ phase.label }}</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr v-for="row in journeyRows" :key="row.key">
-                <th>{{ row.label }}</th>
-                <td v-for="phase in phases" :key="phase.key">
-                  <textarea
-                    v-model="form.matrix[row.key][phase.key]"
-                    :placeholder="row.placeholder"
-                    class="table-input"
-                  ></textarea>
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
+          <div class="journey-map-intro">
+            <span>Step 03</span>
+            <h4>绘制用户购买旅程图</h4>
+            <p>基于步骤二的分析结果，绘制完整的用户购买旅程图，呈现旅程阶段、情感体验曲线、关键触点、痛点和机会点。</p>
+          </div>
+
+          <div class="journey-map-upload-panel">
+            <input
+              ref="journeyMapInput"
+              class="hidden-file-input"
+              type="file"
+              accept="image/png,image/jpeg,image/webp"
+              @change="handleJourneyMapUpload"
+            />
+            <template v-if="form.journeyMap.url">
+              <el-image
+                class="journey-map-preview"
+                :src="form.journeyMap.url"
+                :preview-src-list="[form.journeyMap.url]"
+                preview-teleported
+                fit="contain"
+              />
+              <div class="journey-map-file-info">
+                <el-icon><UploadFilled /></el-icon>
+                <span>{{ form.journeyMap.name || "用户购买旅程图" }}</span>
+              </div>
+              <div class="journey-map-actions">
+                <el-button type="primary" @click="openJourneyMapPicker">更换用户购买旅程图</el-button>
+                <el-button @click="clearJourneyMap">移除图片</el-button>
+              </div>
+            </template>
+            <template v-else>
+              <el-icon class="journey-map-upload-icon"><UploadFilled /></el-icon>
+              <strong>上传用户购买旅程图</strong>
+              <p>支持 PNG、JPG、JPEG、WEBP 格式，单个文件不超过 5MB</p>
+              <el-button type="primary" :loading="uploadingJourneyMap" @click="openJourneyMapPicker">上传用户购买旅程图</el-button>
+            </template>
+          </div>
+
+          <div class="journey-map-helper">
+            <div>
+              <h5>推荐工具及方法如下，自行选择：</h5>
+              <p>1. 下载模板，填写各阶段数据，完成用户购买旅程图。</p>
+              <p>2. 下载步骤二用户购买旅程表，使用通用 AI 大模型辅助生成。</p>
+              <p class="journey-map-prompt">参考提示词：请根据用户购买旅程表文件，生成一个美观的用户购买旅程图。</p>
+            </div>
+            <el-button plain @click="downloadJourneyMapTemplate"><el-icon><Download /></el-icon>下载用户购买旅程模板</el-button>
+          </div>
         </section>
 
         <section v-show="isSectionVisible(4)" class="scenario-step-section">
@@ -260,12 +286,13 @@
 
 <script setup>
 import { computed, getCurrentInstance, onMounted, ref } from "vue";
-import { ArrowLeft, ArrowRight, CircleCheck, Download } from "@element-plus/icons-vue";
+import { ArrowLeft, ArrowRight, CircleCheck, Download, 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 { checkConsumerScenarioStepOne, checkConsumerScenarioStepTwo, getStudentTrainingAnswer, saveStudentTrainingAnswer } from "@/api/studentTrainingAnswer";
+import { checkConsumerScenarioStepOne, checkConsumerScenarioStepTwo, checkConsumerScenarioStepThree, getStudentTrainingAnswer, saveStudentTrainingAnswer, uploadStudentTrainingFile } from "@/api/studentTrainingAnswer";
+import { isStudentDemo } from "@/utils/studentDemo";
 
 const TASK_KEY = "consumer-scenario";
 const { proxy } = getCurrentInstance();
@@ -409,6 +436,8 @@ const taskConfig = ref(null);
 const saving = ref(false);
 const checkingJourney = ref(false);
 const checkingJourneyAnalysis = ref(false);
+const journeyMapInput = ref(null);
+const uploadingJourneyMap = ref(false);
 const draggedStageId = ref("");
 const journeyCheckMessage = ref("");
 const journeyCheckedCorrectly = ref(false);
@@ -446,6 +475,7 @@ function createForm() {
     activeStep: 1,
     journeyOrder: createShuffledJourneyOrder(),
     journeyAnalysis: createJourneyAnalysis(),
+    journeyMap: { url: "", name: "" },
     classifications: createClassifications(),
     matrix: createMatrix(),
   };
@@ -550,6 +580,7 @@ function applySavedAnswer(value) {
       activeStep: normalizeActiveStep(parsed.currentStep),
       journeyOrder: normalizeJourneyOrder(parsed.journeyOrder),
       journeyAnalysis: normalizeJourneyAnalysis(parsed.journeyAnalysis),
+      journeyMap: normalizeJourneyMap(parsed.journeyMap),
       classifications: {
         ...createClassifications(),
         ...(parsed.classifications || {}),
@@ -563,6 +594,13 @@ function applySavedAnswer(value) {
   }
 }
 
+function normalizeJourneyMap(value) {
+  return {
+    url: typeof value?.url === "string" ? value.url : "",
+    name: typeof value?.name === "string" ? value.name : "",
+  };
+}
+
 function normalizeJourneyAnalysis(value) {
   const savedRows = Array.isArray(value) ? value : [];
   return createJourneyAnalysis().map((row) => {
@@ -607,7 +645,7 @@ function normalizeActiveStep(value) {
 async function setCurrentStep(step) {
   if (!hasConfiguredSteps.value) return;
   const targetStep = normalizeActiveStep(step);
-  if (targetStep > form.value.activeStep && [1, 2].includes(form.value.activeStep) && !(await persist("IN_PROGRESS"))) return;
+  if (targetStep > form.value.activeStep && [1, 2, 3].includes(form.value.activeStep) && !(await persist("IN_PROGRESS"))) return;
   form.value.activeStep = targetStep;
 }
 
@@ -702,6 +740,90 @@ async function ensureJourneyAnalysisValid() {
   }
 }
 
+function openJourneyMapPicker() {
+  journeyMapInput.value?.click();
+}
+
+function revokeBlobUrl(url) {
+  if (typeof url === "string" && url.startsWith("blob:")) URL.revokeObjectURL(url);
+}
+
+async function handleJourneyMapUpload(event) {
+  const file = event.target?.files?.[0];
+  if (!file) return;
+  const allowedTypes = ["image/png", "image/jpeg", "image/webp"];
+  if (!allowedTypes.includes(file.type)) {
+    proxy?.$modal?.msgError("请上传 PNG、JPG、JPEG 或 WEBP 图片");
+    event.target.value = "";
+    return;
+  }
+  if (file.size > 5 * 1024 * 1024) {
+    proxy?.$modal?.msgError("图片大小不能超过 5MB");
+    event.target.value = "";
+    return;
+  }
+  uploadingJourneyMap.value = true;
+  try {
+    let url = "";
+    if (isStudentDemo()) {
+      url = URL.createObjectURL(file);
+    } else {
+      const formData = new FormData();
+      formData.append("file", file);
+      const response = await uploadStudentTrainingFile(formData);
+      url = response?.url || response?.data?.url || "";
+    }
+    if (!url) throw new Error("上传失败，请稍后重试");
+    revokeBlobUrl(form.value.journeyMap.url);
+    form.value.journeyMap = { url, name: file.name };
+    proxy?.$modal?.msgSuccess("用户购买旅程图上传成功");
+  } catch (error) {
+    proxy?.$modal?.msgError(error?.message || "上传失败，请稍后重试");
+  } finally {
+    uploadingJourneyMap.value = false;
+    event.target.value = "";
+  }
+}
+
+function clearJourneyMap() {
+  revokeBlobUrl(form.value.journeyMap.url);
+  form.value.journeyMap = { url: "", name: "" };
+}
+
+async function ensureJourneyMapValid() {
+  try {
+    const response = await checkConsumerScenarioStepThree({ journeyMapUrl: form.value.journeyMap.url });
+    const result = response?.data || {};
+    if (!result.valid) proxy?.$modal?.msgError(result.message || "请上传用户购买旅程图");
+    return result.valid === true;
+  } catch (error) {
+    proxy?.$modal?.msgError(error?.message || "请先上传用户购买旅程图");
+    return false;
+  }
+}
+
+function downloadJourneyMapTemplate() {
+  const escapeCsvValue = (value) => `"${String(value || "").replaceAll('"', '""')}"`;
+  const header = ["序号", "旅程阶段", "用户行为描述", "关键触点", "情感体验", "关键决策因素", "痛点标记", "机会点标记"];
+  const rows = form.value.journeyAnalysis.map((row, index) => [
+    index + 1,
+    stageTitle(row.stageId),
+    row.behaviorDescription,
+    row.keyTouchpoints,
+    row.emotionExperience,
+    row.decisionFactors,
+    "",
+    "",
+  ]);
+  const csv = [header, ...rows].map((row) => row.map(escapeCsvValue).join(",")).join("\r\n");
+  const url = URL.createObjectURL(new Blob([`\uFEFF${csv}`], { type: "text/csv;charset=utf-8" }));
+  const link = document.createElement("a");
+  link.href = url;
+  link.download = "用户购买旅程图模板.csv";
+  link.click();
+  URL.revokeObjectURL(url);
+}
+
 function buildOutcome() {
   return {
     taskKey: TASK_KEY,
@@ -711,6 +833,7 @@ function buildOutcome() {
     journeyOrder: form.value.journeyOrder,
     journeyCheckedCorrectly: journeyCheckedCorrectly.value,
     journeyAnalysis: form.value.journeyAnalysis,
+    journeyMap: form.value.journeyMap,
     phases,
     classifications: form.value.classifications,
     matrix: form.value.matrix,
@@ -731,6 +854,7 @@ async function persist(status = "IN_PROGRESS") {
   if (saving.value) return;
   if (status !== "RESET" && form.value.activeStep === 1 && !(await ensureJourneyOrderValid())) return false;
   if (status !== "RESET" && form.value.activeStep === 2 && !(await ensureJourneyAnalysisValid())) return false;
+  if (status !== "RESET" && form.value.activeStep === 3 && !(await ensureJourneyMapValid())) return false;
   saving.value = true;
   try {
     await saveStudentTrainingAnswer(TASK_KEY, buildAnswerPayload(status));
@@ -750,6 +874,7 @@ function submitTask() {
 }
 
 async function resetTraining() {
+  revokeBlobUrl(form.value.journeyMap.url);
   form.value = createForm();
   await persist("RESET");
 }
@@ -1416,6 +1541,145 @@ function exportOutcome() {
   line-height: 1.65;
 }
 
+.journey-map-intro {
+  margin-bottom: 18px;
+  padding: 20px 22px;
+  border: 1px solid rgba(69, 202, 249, 0.36);
+  border-radius: 18px;
+  background: linear-gradient(112deg, rgba(9, 99, 145, 0.28), rgba(2, 22, 38, 0.48));
+
+  span {
+    color: #51d8ff;
+    font-size: 13px;
+    font-weight: 900;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+  }
+
+  h4 {
+    margin: 6px 0 8px;
+    color: #ffffff;
+    font-size: 22px;
+  }
+
+  p {
+    margin: 0;
+    color: #bed8e6;
+    font-size: 14px;
+    line-height: 1.8;
+  }
+}
+
+.hidden-file-input {
+  display: none;
+}
+
+.journey-map-upload-panel {
+  min-height: 330px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  padding: 28px;
+  border: 1px dashed rgba(78, 210, 255, 0.64);
+  border-radius: 20px;
+  color: #e9fbff;
+  background: radial-gradient(circle at 50% 32%, rgba(13, 119, 171, 0.22), rgba(2, 18, 31, 0.52) 62%);
+
+  strong {
+    font-size: 18px;
+  }
+
+  p {
+    margin: 0 0 8px;
+    color: #9abac9;
+    font-size: 13px;
+  }
+}
+
+.journey-map-upload-icon {
+  width: 52px;
+  height: 52px;
+  display: grid;
+  place-items: center;
+  border: 1px solid rgba(94, 222, 255, 0.62);
+  border-radius: 50%;
+  color: #71e5ff;
+  background: rgba(8, 100, 148, 0.3);
+  font-size: 25px;
+}
+
+.journey-map-preview {
+  width: min(100%, 760px);
+  max-height: 360px;
+  overflow: hidden;
+  border: 1px solid rgba(90, 214, 255, 0.45);
+  border-radius: 12px;
+  background: #03111c;
+  cursor: zoom-in;
+
+  :deep(img) {
+    object-fit: contain;
+  }
+}
+
+.journey-map-file-info {
+  max-width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: #cbf5ff;
+  font-size: 14px;
+
+  span {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+
+.journey-map-actions {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 10px;
+}
+
+.journey-map-helper {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 24px;
+  margin-top: 20px;
+  padding: 18px 20px;
+  border: 1px solid rgba(61, 162, 210, 0.28);
+  border-radius: 14px;
+  color: #b9d4df;
+  background: rgba(3, 27, 43, 0.46);
+
+  h5,
+  p {
+    margin: 0;
+    font-size: 13px;
+    line-height: 1.8;
+  }
+
+  h5 {
+    color: #e5faff;
+    font-size: 14px;
+  }
+
+  .journey-map-prompt {
+    margin-top: 4px;
+    color: #80dff8;
+  }
+
+  .el-button {
+    flex: 0 0 auto;
+  }
+}
+
 .journey-flow {
   display: grid;
   grid-template-columns: repeat(5, minmax(120px, 1fr));
@@ -1859,6 +2123,15 @@ function exportOutcome() {
     transform: rotate(90deg);
   }
 
+  .journey-map-helper {
+    align-items: stretch;
+    flex-direction: column;
+  }
+
+  .journey-map-helper .el-button {
+    width: 100%;
+  }
+
   .nav-action,
   .training-action {
     width: 100%;

From aa66b87a5eddff17fd437bfebad5ff8b6e128706 Mon Sep 17 00:00:00 2001
From: chenyuan <chenyuan@example.com>
Date: Tue, 11 Aug 2026 22:51:32 +0800
Subject: [PATCH 4/4] feat: add consumer scenario optimization analysis

---
 src/api/studentTrainingAnswer.js       |  24 +++
 src/views/demand/consumer-scenario.vue | 222 +++++++++++++++++++------
 2 files changed, 193 insertions(+), 53 deletions(-)

diff --git a/src/api/studentTrainingAnswer.js b/src/api/studentTrainingAnswer.js
index 2074d5a..b970ec0 100644
--- a/src/api/studentTrainingAnswer.js
+++ b/src/api/studentTrainingAnswer.js
@@ -500,3 +500,27 @@ export function checkConsumerScenarioStepThree(payload) {
     headers: { repeatSubmit: false },
   });
 }
+
+export function checkConsumerScenarioStepFour(payload) {
+  const rows = Array.isArray(payload?.rows) ? payload.rows : [];
+  if (isStudentDemo()) {
+    const valid = rows.length === consumerScenarioJourneyOrder.length
+      && rows.every((row) => consumerScenarioJourneyOrder.includes(row?.stageId)
+        && String(row?.painPoint || "").trim()
+        && String(row?.optimizationSuggestion || "").trim())
+      && new Set(rows.map((row) => row.stageId)).size === consumerScenarioJourneyOrder.length;
+    return Promise.resolve({
+      code: 200,
+      data: {
+        valid,
+        message: valid ? "五个阶段的优化分析填写完整。" : "请完整填写五个阶段的痛点和优化建议。",
+      },
+    });
+  }
+  return request({
+    url: "/api/student-training-answers/consumer-scenario/step-4/validate",
+    method: "post",
+    data: { rows },
+    headers: { repeatSubmit: false },
+  });
+}
diff --git a/src/views/demand/consumer-scenario.vue b/src/views/demand/consumer-scenario.vue
index 1d899d7..7fe7541 100644
--- a/src/views/demand/consumer-scenario.vue
+++ b/src/views/demand/consumer-scenario.vue
@@ -191,60 +191,30 @@
         </section>
 
         <section v-show="isSectionVisible(4)" class="scenario-step-section">
-        <section class="reference-map">
-          <div class="reference-title">示例：APP 用户体验地图</div>
-          <div class="reference-grid reference-grid--stage">
-            <div class="reference-side">阶段</div>
-            <div v-for="phase in referencePhases" :key="phase.name" class="stage-chip">{{ phase.name }}</div>
+          <div class="journey-optimization-intro">
+            <span>Step 04</span>
+            <h4>识别旅程痛点，形成优化建议</h4>
+            <p>结合用户购买旅程图，分析各阶段存在的痛点及未满足的需求，提出可落地的产品优化建议。</p>
           </div>
-          <div class="reference-grid">
-            <div class="reference-side">用户目标</div>
-            <div v-for="phase in referencePhases" :key="phase.name" class="reference-cell">
-              <p v-for="goal in phase.goals" :key="goal">{{ goal }}</p>
-            </div>
-          </div>
-          <div class="reference-grid reference-grid--behavior">
-            <div class="reference-side">用户行为</div>
-            <div class="behavior-lane">
-              <div v-for="item in behaviorNodes" :key="item" class="behavior-node">
-                <span>{{ item }}</span>
-              </div>
-            </div>
-          </div>
-          <div class="reference-grid">
-            <div class="reference-side">接触点</div>
-            <div v-for="phase in referencePhases" :key="phase.name" class="reference-cell">
-              <p>{{ phase.touchpoint }}</p>
-            </div>
-          </div>
-          <div class="reference-grid reference-grid--emotion">
-            <div class="reference-side">情绪曲线</div>
-            <div class="emotion-chart">
-              <svg viewBox="0 0 1000 210" role="img" aria-label="用户情绪曲线示例">
-                <defs>
-                  <linearGradient id="emotionFill" x1="0" x2="0" y1="0" y2="1">
-                    <stop offset="0%" stop-color="#28c7ef" stop-opacity="0.28" />
-                    <stop offset="100%" stop-color="#28c7ef" stop-opacity="0.04" />
-                  </linearGradient>
-                </defs>
-                <path d="M20 160 C80 140 100 74 160 92 S250 170 300 126 S390 60 440 126 S520 174 570 118 S650 64 710 110 S790 174 850 140 S930 120 980 96 L980 200 L20 200 Z" fill="url(#emotionFill)" />
-                <path d="M20 160 C80 140 100 74 160 92 S250 170 300 126 S390 60 440 126 S520 174 570 118 S650 64 710 110 S790 174 850 140 S930 120 980 96" fill="none" stroke="#28c7ef" stroke-width="5" />
-              </svg>
-              <div class="emotion-points">
-                <span v-for="point in emotionPoints" :key="point.label" :style="{ left: point.left, top: point.top }">
-                  {{ point.icon }}
-                  <small>{{ point.label }}</small>
-                </span>
-              </div>
-            </div>
-          </div>
-          <div class="reference-grid">
-            <div class="reference-side">痛点/机会点</div>
-            <div v-for="phase in referencePhases" :key="phase.name" class="reference-cell">
-              <p>{{ phase.pain }}</p>
-            </div>
+          <div class="journey-optimization-wrap">
+            <table class="journey-optimization-table">
+              <thead>
+                <tr>
+                  <th>旅程阶段</th>
+                  <th>识别的痛点</th>
+                  <th>优化建议</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr v-for="row in form.journeyOptimizations" :key="row.stageId">
+                  <th>{{ stageShortTitle(row.stageId) }}</th>
+                  <td><textarea v-model="row.painPoint" placeholder="填写该阶段用户遇到的痛点或未满足需求"></textarea></td>
+                  <td><textarea v-model="row.optimizationSuggestion" placeholder="填写针对痛点的产品、服务或体验优化建议"></textarea></td>
+                </tr>
+              </tbody>
+            </table>
           </div>
-        </section>
+          <p v-if="journeyOptimizationMessage" class="journey-check-message" role="status">{{ journeyOptimizationMessage }}</p>
         </section>
 
         <div v-if="hasConfiguredSteps" class="step-actions">
@@ -291,7 +261,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 { checkConsumerScenarioStepOne, checkConsumerScenarioStepTwo, checkConsumerScenarioStepThree, getStudentTrainingAnswer, saveStudentTrainingAnswer, uploadStudentTrainingFile } from "@/api/studentTrainingAnswer";
+import { checkConsumerScenarioStepOne, checkConsumerScenarioStepTwo, checkConsumerScenarioStepThree, checkConsumerScenarioStepFour, getStudentTrainingAnswer, saveStudentTrainingAnswer, uploadStudentTrainingFile } from "@/api/studentTrainingAnswer";
 import { isStudentDemo } from "@/utils/studentDemo";
 
 const TASK_KEY = "consumer-scenario";
@@ -436,12 +406,14 @@ const taskConfig = ref(null);
 const saving = ref(false);
 const checkingJourney = ref(false);
 const checkingJourneyAnalysis = ref(false);
+const checkingJourneyOptimization = ref(false);
 const journeyMapInput = ref(null);
 const uploadingJourneyMap = ref(false);
 const draggedStageId = ref("");
 const journeyCheckMessage = ref("");
 const journeyCheckedCorrectly = ref(false);
 const journeyAnalysisMessage = ref("");
+const journeyOptimizationMessage = ref("");
 
 function createMatrix() {
   return journeyRows.reduce((matrix, row) => {
@@ -470,12 +442,21 @@ function createJourneyAnalysis() {
   }));
 }
 
+function createJourneyOptimizations() {
+  return journeyStages.map((stage) => ({
+    stageId: stage.id,
+    painPoint: "",
+    optimizationSuggestion: "",
+  }));
+}
+
 function createForm() {
   return {
     activeStep: 1,
     journeyOrder: createShuffledJourneyOrder(),
     journeyAnalysis: createJourneyAnalysis(),
     journeyMap: { url: "", name: "" },
+    journeyOptimizations: createJourneyOptimizations(),
     classifications: createClassifications(),
     matrix: createMatrix(),
   };
@@ -581,6 +562,7 @@ function applySavedAnswer(value) {
       journeyOrder: normalizeJourneyOrder(parsed.journeyOrder),
       journeyAnalysis: normalizeJourneyAnalysis(parsed.journeyAnalysis),
       journeyMap: normalizeJourneyMap(parsed.journeyMap),
+      journeyOptimizations: normalizeJourneyOptimizations(parsed.journeyOptimizations),
       classifications: {
         ...createClassifications(),
         ...(parsed.classifications || {}),
@@ -615,6 +597,18 @@ function normalizeJourneyAnalysis(value) {
   });
 }
 
+function normalizeJourneyOptimizations(value) {
+  const savedRows = Array.isArray(value) ? value : [];
+  return createJourneyOptimizations().map((row) => {
+    const savedRow = savedRows.find((item) => item?.stageId === row.stageId) || {};
+    return {
+      ...row,
+      painPoint: savedRow.painPoint || "",
+      optimizationSuggestion: savedRow.optimizationSuggestion || "",
+    };
+  });
+}
+
 function normalizeJourneyOrder(value) {
   if (!Array.isArray(value) || value.length !== journeyStages.length) return createShuffledJourneyOrder();
   const uniqueOrder = [...new Set(value)];
@@ -724,6 +718,10 @@ function stageTitle(stageId) {
   return journeyStages.find((stage) => stage.id === stageId)?.title || "未知阶段";
 }
 
+function stageShortTitle(stageId) {
+  return stageTitle(stageId).split("（")[0];
+}
+
 async function ensureJourneyAnalysisValid() {
   if (checkingJourneyAnalysis.value) return false;
   checkingJourneyAnalysis.value = true;
@@ -802,6 +800,22 @@ async function ensureJourneyMapValid() {
   }
 }
 
+async function ensureJourneyOptimizationValid() {
+  if (checkingJourneyOptimization.value) return false;
+  checkingJourneyOptimization.value = true;
+  try {
+    const response = await checkConsumerScenarioStepFour({ rows: form.value.journeyOptimizations });
+    const result = response?.data || {};
+    journeyOptimizationMessage.value = result.message || (result.valid ? "五个阶段的优化分析填写完整。" : "请完整填写五个阶段的痛点和优化建议。");
+    return result.valid === true;
+  } catch (error) {
+    journeyOptimizationMessage.value = error?.message || "优化建议校验失败，请稍后重试。";
+    return false;
+  } finally {
+    checkingJourneyOptimization.value = false;
+  }
+}
+
 function downloadJourneyMapTemplate() {
   const escapeCsvValue = (value) => `"${String(value || "").replaceAll('"', '""')}"`;
   const header = ["序号", "旅程阶段", "用户行为描述", "关键触点", "情感体验", "关键决策因素", "痛点标记", "机会点标记"];
@@ -834,6 +848,7 @@ function buildOutcome() {
     journeyCheckedCorrectly: journeyCheckedCorrectly.value,
     journeyAnalysis: form.value.journeyAnalysis,
     journeyMap: form.value.journeyMap,
+    journeyOptimizations: form.value.journeyOptimizations,
     phases,
     classifications: form.value.classifications,
     matrix: form.value.matrix,
@@ -855,6 +870,7 @@ async function persist(status = "IN_PROGRESS") {
   if (status !== "RESET" && form.value.activeStep === 1 && !(await ensureJourneyOrderValid())) return false;
   if (status !== "RESET" && form.value.activeStep === 2 && !(await ensureJourneyAnalysisValid())) return false;
   if (status !== "RESET" && form.value.activeStep === 3 && !(await ensureJourneyMapValid())) return false;
+  if (status !== "RESET" && form.value.activeStep === 4 && !(await ensureJourneyOptimizationValid())) return false;
   saving.value = true;
   try {
     await saveStudentTrainingAnswer(TASK_KEY, buildAnswerPayload(status));
@@ -1680,6 +1696,106 @@ function exportOutcome() {
   }
 }
 
+.journey-optimization-intro {
+  margin-bottom: 18px;
+  padding: 20px 22px;
+  border-left: 3px solid #41d9ff;
+  border-radius: 0 16px 16px 0;
+  background: linear-gradient(90deg, rgba(7, 98, 143, 0.3), rgba(3, 27, 42, 0.12));
+
+  span {
+    color: #51d8ff;
+    font-size: 13px;
+    font-weight: 900;
+    letter-spacing: 0.08em;
+  }
+
+  h4 {
+    margin: 6px 0 8px;
+    color: #ffffff;
+    font-size: 21px;
+  }
+
+  p {
+    margin: 0;
+    color: #c4dfe9;
+    font-size: 14px;
+    line-height: 1.8;
+  }
+}
+
+.journey-optimization-wrap {
+  overflow-x: auto;
+  border: 1px solid rgba(72, 182, 228, 0.46);
+  border-radius: 16px;
+  background: rgba(2, 20, 33, 0.72);
+}
+
+.journey-optimization-table {
+  width: 100%;
+  min-width: 900px;
+  border-collapse: collapse;
+  table-layout: fixed;
+
+  th,
+  td {
+    border: 1px solid rgba(77, 167, 220, 0.28);
+  }
+
+  thead th {
+    padding: 14px 12px;
+    color: #f0fcff;
+    background: linear-gradient(90deg, rgba(8, 128, 178, 0.94), rgba(5, 94, 143, 0.9));
+    font-size: 14px;
+    font-weight: 900;
+    text-align: center;
+  }
+
+  thead th:first-child {
+    width: 170px;
+  }
+
+  tbody th {
+    padding: 18px 14px;
+    color: #a6ecff;
+    background: rgba(3, 36, 55, 0.58);
+    font-size: 14px;
+    font-weight: 800;
+    text-align: center;
+  }
+
+  td {
+    padding: 10px;
+    background: rgba(1, 17, 29, 0.45);
+  }
+
+  textarea {
+    width: 100%;
+    min-height: 92px;
+    padding: 10px 12px;
+    border: 1px solid transparent;
+    border-radius: 9px;
+    outline: none;
+    resize: vertical;
+    color: #ebfaff;
+    background: transparent;
+    font: inherit;
+    font-size: 13px;
+    line-height: 1.65;
+    box-sizing: border-box;
+
+    &:focus {
+      border-color: rgba(92, 224, 255, 0.72);
+      background: rgba(8, 64, 92, 0.42);
+      box-shadow: 0 0 0 3px rgba(34, 207, 255, 0.1);
+    }
+  }
+
+  textarea::placeholder {
+    color: #7696a8;
+  }
+}
+
 .journey-flow {
   display: grid;
   grid-template-columns: repeat(5, minmax(120px, 1fr));