From 0c63009c88b5b2cf16cbe28e5d4b8e970ec79199 Mon Sep 17 00:00:00 2001
From: chenyuan <chenyuan@example.com>
Date: Tue, 11 Aug 2026 18:36:15 +0800
Subject: [PATCH 1/4] feat: add consumer behavior hypotheses

---
 src/api/studentTrainingAnswer.js       |  17 ++
 src/views/demand/consumer-behavior.vue | 235 ++++++++++++++++++++++---
 2 files changed, 227 insertions(+), 25 deletions(-)

diff --git a/src/api/studentTrainingAnswer.js b/src/api/studentTrainingAnswer.js
index 4be51d4..f36edbc 100644
--- a/src/api/studentTrainingAnswer.js
+++ b/src/api/studentTrainingAnswer.js
@@ -335,3 +335,20 @@ export function checkProductDevelopmentFactorsStepFour(payload) {
   }
   return request({ url: "/api/student-training-answers/product-development-factors/step-4/validate", method: "post", data: payload, headers: { repeatSubmit: false } });
 }
+
+export function checkConsumerBehaviorStepOne(payload) {
+  const hypotheses = Array.isArray(payload?.hypotheses) ? payload.hypotheses : [];
+  if (isStudentDemo()) {
+    const incomplete = hypotheses.find((item) => ["targetGroup", "keyFinding", "coreHypothesis"].some((field) => !String(item?.[field] || "").trim()));
+    if (!hypotheses.length || incomplete) {
+      return Promise.reject(new Error("请完整填写目标人群、实训8关键发现和问卷核心假设"));
+    }
+    return Promise.resolve({ code: 200, data: { valid: true, message: "校验通过" } });
+  }
+  return request({
+    url: "/api/student-training-answers/consumer-behavior/step-1/validate",
+    method: "post",
+    data: { hypotheses },
+    headers: { repeatSubmit: false },
+  });
+}
diff --git a/src/views/demand/consumer-behavior.vue b/src/views/demand/consumer-behavior.vue
index d406f80..f43c55a 100644
--- a/src/views/demand/consumer-behavior.vue
+++ b/src/views/demand/consumer-behavior.vue
@@ -58,32 +58,35 @@
           </div>
         </div>
         <section v-if="form.activeStep === 0" class="step-panel">
-          <div class="questionnaire-head">
-            <p class="task-desc questionnaire-desc">
-              借助AI，生成智能产品购买决策因素调研问卷，提示词参考：设计问卷，用于分析用户购买智能产品的决策因素。问卷完成后复制到下述编辑框，并上传问卷pdf文档。
+          <div class="hypothesis-head">
+            <p class="task-desc hypothesis-desc">
+              基于实训 8 的用户画像结论，明确本次问卷调查的目标人群与核心假设，填写下表。
             </p>
-            <el-button class="upload-action questionnaire-upload" :loading="uploading" @click="triggerFileSelect('questionnaire')">
-              <el-icon><Upload /></el-icon>
-              上传问卷
-            </el-button>
-          </div>
-          <div v-if="form.questionnaireFileName" class="file-chip questionnaire-file">
-            <el-icon><Document /></el-icon>
-            <span>{{ form.questionnaireFileName }}</span>
+            <div class="hypothesis-actions">
+              <el-button class="hypothesis-action" @click="addTargetHypothesis">增加一行</el-button>
+              <el-button class="hypothesis-action hypothesis-action--quiet" :disabled="form.targetHypotheses.length <= 1" @click="removeTargetHypothesis">删除一行</el-button>
+            </div>
+            <el-button class="training-eight-action" @click="viewTargetUserProfile">查看实训8</el-button>
           </div>
-          <div class="field-block questionnaire-field">
-            <span>示例：</span>
-            <div
-              ref="questionnaireEditorRef"
-              class="large-textarea questionnaire-textarea"
-              contenteditable="true"
-              role="textbox"
-              aria-multiline="true"
-              data-placeholder="请将借助AI设计完成的问卷内容复制到这里"
-              @input="syncQuestionnaireText"
-              @blur="syncQuestionnaireText"
-            ></div>
+          <div class="target-hypothesis-table-wrap">
+            <table class="target-hypothesis-table">
+              <thead>
+                <tr>
+                  <th>目标人群</th>
+                  <th>实训8关键发现</th>
+                  <th>本次问卷需验证的核心假设</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr v-for="(hypothesis, index) in form.targetHypotheses" :key="index">
+                  <td><input v-model="hypothesis.targetGroup" class="hypothesis-input" placeholder="例如：职场白领（25-35岁）" /></td>
+                  <td><textarea v-model="hypothesis.keyFinding" class="hypothesis-textarea" placeholder="例如：高压工作、入睡困难、看重效率" /></td>
+                  <td><textarea v-model="hypothesis.coreHypothesis" class="hypothesis-textarea" placeholder="例如：是否更关注白噪声质量与智能场景联动？对价格的敏感度如何？" /></td>
+                </tr>
+              </tbody>
+            </table>
           </div>
+          <p class="hypothesis-tip">可编辑表格内容；请基于实训 8 的结论明确每类目标人群的问卷验证方向。</p>
         </section>
 
         <section v-else-if="form.activeStep === 1" class="step-panel">
@@ -179,7 +182,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, uploadStudentTrainingFile } from "@/api/studentTrainingAnswer";
+import { checkConsumerBehaviorStepOne, getStudentTrainingAnswer, saveStudentTrainingAnswer, uploadStudentTrainingFile } from "@/api/studentTrainingAnswer";
 
 const TASK_KEY = "consumer-behavior";
 const { proxy } = getCurrentInstance();
@@ -380,6 +383,7 @@ const uploadAccept = computed(() => {
 function createForm() {
   return {
     activeStep: 0,
+    targetHypotheses: createTargetHypotheses(),
     questionnaireText: questionnaireTemplate,
     questionnaireFileName: "",
     questionnaireFileUrl: "",
@@ -390,6 +394,18 @@ function createForm() {
   };
 }
 
+function createTargetHypotheses() {
+  return [
+    { targetGroup: "职场白领（25-35岁）", keyFinding: "", coreHypothesis: "" },
+    { targetGroup: "精致妈妈（28-38岁）", keyFinding: "", coreHypothesis: "" },
+    { targetGroup: "银发人群（50-65岁）", keyFinding: "", coreHypothesis: "" },
+  ];
+}
+
+function createEmptyTargetHypothesis() {
+  return { targetGroup: "", keyFinding: "", coreHypothesis: "" };
+}
+
 const form = ref(createForm());
 
 const taskTitle = computed(() => taskConfig.value?.taskName || "消费者需求与行为");
@@ -458,6 +474,7 @@ function applySavedAnswer(value) {
       ...parsed,
       activeStep: Number.isInteger(parsed.activeStep) ? parsed.activeStep : 0,
       questionnaireText: normalizeQuestionnaireContent(parsed.questionnaireText || questionnaireTemplate),
+      targetHypotheses: normalizeTargetHypotheses(parsed.targetHypotheses),
       chartFiles: parsed.chartFiles || {},
       report: normalizeReport(parsed.report),
     };
@@ -467,6 +484,15 @@ function applySavedAnswer(value) {
   }
 }
 
+function normalizeTargetHypotheses(rows) {
+  if (!Array.isArray(rows) || !rows.length) return createTargetHypotheses();
+  return rows.map((row) => ({
+    targetGroup: String(row?.targetGroup || ""),
+    keyFinding: String(row?.keyFinding || ""),
+    coreHypothesis: String(row?.coreHypothesis || ""),
+  }));
+}
+
 function normalizeReport(value = {}) {
   return Object.keys(emptyReport).reduce((report, key) => {
     const currentValue = value?.[key] || "";
@@ -528,6 +554,19 @@ function setActiveStep(index) {
   }
 }
 
+function addTargetHypothesis() {
+  form.value.targetHypotheses.push(createEmptyTargetHypothesis());
+}
+
+function removeTargetHypothesis() {
+  if (form.value.targetHypotheses.length <= 1) return;
+  form.value.targetHypotheses.pop();
+}
+
+function viewTargetUserProfile() {
+  window.open("/demand/people", "_blank", "noopener");
+}
+
 async function handleFileChange(event) {
   const file = event.target.files?.[0];
   if (!file) return;
@@ -561,7 +600,8 @@ function goPrev() {
   if (form.value.activeStep > 0) setActiveStep(form.value.activeStep - 1);
 }
 
-function goNext() {
+async function goNext() {
+  if (form.value.activeStep === 0) await persist("IN_PROGRESS");
   if (form.value.activeStep < flowSteps.value.length - 1) setActiveStep(form.value.activeStep + 1);
 }
 
@@ -589,6 +629,9 @@ function buildAnswerPayload(status) {
 async function persist(status = "IN_PROGRESS") {
   saving.value = true;
   try {
+    if (status !== "RESET" && (form.value.activeStep === 0 || status === "SUBMITTED")) {
+      await checkConsumerBehaviorStepOne({ hypotheses: form.value.targetHypotheses });
+    }
     await saveStudentTrainingAnswer(TASK_KEY, buildAnswerPayload(status));
     proxy?.$modal?.msgSuccess(status === "SUBMITTED" ? "提交成功" : "保存成功");
   } finally {
@@ -618,6 +661,9 @@ function exportOutcome() {
     "",
     `当前步骤：${flowSteps.value[form.value.activeStep] || ""}`,
     "",
+    "问卷调查目标人群与核心假设：",
+    ...form.value.targetHypotheses.map((item, index) => `${index + 1}. 目标人群：${item.targetGroup || ""}\n实训8关键发现：${item.keyFinding || ""}\n核心假设：${item.coreHypothesis || ""}`),
+    "",
     "问卷设计：",
     questionnaireTextForExport(),
     "",
@@ -1009,6 +1055,127 @@ function exportOutcome() {
   margin-bottom: 12px;
 }
 
+.hypothesis-head {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 18px 28px;
+  margin-bottom: 20px;
+}
+
+.hypothesis-desc {
+  margin: 0;
+  color: #d9eaf4;
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.hypothesis-actions {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 14px;
+}
+
+.hypothesis-actions :deep(.hypothesis-action),
+.training-eight-action {
+  min-width: 146px;
+  height: 42px;
+  border: 1px solid rgba(92, 224, 255, 0.7);
+  border-radius: 10px;
+  color: #ffffff;
+  background: linear-gradient(95deg, #0b84bd, #096491);
+  font-size: 15px;
+  font-weight: 800;
+}
+
+.hypothesis-actions :deep(.hypothesis-action--quiet) {
+  border-color: rgba(115, 191, 220, 0.58);
+  color: #d9f4ff;
+  background: rgba(13, 85, 117, 0.72);
+}
+
+.training-eight-action {
+  grid-column: 2;
+  grid-row: 1;
+  min-width: 136px;
+}
+
+.target-hypothesis-table-wrap {
+  overflow-x: auto;
+  border: 1px solid rgba(0, 180, 255, 0.24);
+  border-radius: 18px;
+  background: rgba(1, 14, 26, 0.72);
+}
+
+.target-hypothesis-table {
+  width: 100%;
+  min-width: 920px;
+  border-collapse: collapse;
+  table-layout: fixed;
+
+  th,
+  td {
+    padding: 12px;
+    border-right: 1px solid rgba(77, 167, 220, 0.26);
+    border-bottom: 1px solid rgba(77, 167, 220, 0.26);
+    vertical-align: middle;
+  }
+
+  th {
+    color: #ecfbff;
+    background: linear-gradient(100deg, #158fc4, #08739f);
+    font-size: 16px;
+    font-weight: 800;
+  }
+
+  th:nth-child(1) { width: 28%; }
+  th:nth-child(2) { width: 28%; }
+  th:nth-child(3) { width: 44%; }
+
+  tr:last-child td { border-bottom: 0; }
+  th:last-child,
+  td:last-child { border-right: 0; }
+}
+
+.hypothesis-input,
+.hypothesis-textarea {
+  box-sizing: border-box;
+  width: 100%;
+  border: 1px solid rgba(67, 134, 166, 0.8);
+  outline: none;
+  color: #eaf7ff;
+  background: rgba(7, 29, 43, 0.92);
+  font-family: inherit;
+  font-size: 14px;
+  line-height: 1.65;
+
+  &::placeholder { color: #8da5b2; opacity: 1; }
+  &:focus {
+    border-color: #5fe7ff;
+    box-shadow: 0 0 0 3px rgba(34, 207, 255, 0.14);
+  }
+}
+
+.hypothesis-input {
+  height: 42px;
+  padding: 0 12px;
+  border-radius: 10px;
+}
+
+.hypothesis-textarea {
+  min-height: 86px;
+  padding: 10px 12px;
+  border-radius: 10px;
+  resize: vertical;
+}
+
+.hypothesis-tip {
+  margin: 12px 0 0;
+  color: #75dff7;
+  font-size: 13px;
+}
+
 .questionnaire-desc {
   flex: 1;
   margin: 0;
@@ -1399,6 +1566,24 @@ function exportOutcome() {
     width: 100%;
   }
 
+  .hypothesis-head {
+    grid-template-columns: 1fr;
+  }
+
+  .training-eight-action {
+    grid-column: auto;
+    grid-row: auto;
+    width: 100%;
+  }
+
+  .hypothesis-actions {
+    justify-content: stretch;
+  }
+
+  .hypothesis-actions :deep(.hypothesis-action) {
+    flex: 1;
+  }
+
   .step-indicator {
     align-items: stretch;
     flex-direction: column;

From 10147d5f5c6dedc2f3a9c413e8cc2746daa1b190 Mon Sep 17 00:00:00 2001
From: chenyuan <chenyuan@example.com>
Date: Tue, 11 Aug 2026 18:45:35 +0800
Subject: [PATCH 2/4] feat: add consumer behavior kano needs

---
 src/api/studentTrainingAnswer.js       |  19 +++
 src/views/demand/consumer-behavior.vue | 193 ++++++++++++++++++++++---
 2 files changed, 193 insertions(+), 19 deletions(-)

diff --git a/src/api/studentTrainingAnswer.js b/src/api/studentTrainingAnswer.js
index f36edbc..4cfd190 100644
--- a/src/api/studentTrainingAnswer.js
+++ b/src/api/studentTrainingAnswer.js
@@ -352,3 +352,22 @@ export function checkConsumerBehaviorStepOne(payload) {
     headers: { repeatSubmit: false },
   });
 }
+
+export function checkConsumerBehaviorStepTwo(payload) {
+  const needs = Array.isArray(payload?.needs) ? payload.needs : [];
+  const allowedTypes = ["基本型", "期望型", "兴奋型", "无差异型", "反向型"];
+  if (isStudentDemo()) {
+    const incomplete = needs.find((item) => !String(item?.feature || "").trim()
+      || !allowedTypes.includes(item?.kanoType) || !String(item?.featureDirection || "").trim());
+    if (!needs.length || needs.length > 20 || incomplete) {
+      return Promise.reject(new Error("请完整填写功能、KANO类型和对应功能方向（最多20行）"));
+    }
+    return Promise.resolve({ code: 200, data: { valid: true, message: "校验通过" } });
+  }
+  return request({
+    url: "/api/student-training-answers/consumer-behavior/step-2/validate",
+    method: "post",
+    data: { needs },
+    headers: { repeatSubmit: false },
+  });
+}
diff --git a/src/views/demand/consumer-behavior.vue b/src/views/demand/consumer-behavior.vue
index f43c55a..2872909 100644
--- a/src/views/demand/consumer-behavior.vue
+++ b/src/views/demand/consumer-behavior.vue
@@ -90,21 +90,40 @@
         </section>
 
         <section v-else-if="form.activeStep === 1" class="step-panel">
-          <p class="task-desc">假如本次调研共回收有效问卷 500 份，以下是各题目的数据统计结果：</p>
-          <div class="data-board">
-            <pre>{{ surveyStats }}</pre>
-          </div>
-          <p class="task-desc">请把数据整理到 Excel 中，并上传 Excel 文件。</p>
-          <div class="upload-row">
-            <el-button class="upload-action" :loading="uploading" @click="triggerFileSelect('dataExcel')">
-              <el-icon><Upload /></el-icon>
-              上传Excel文件
-            </el-button>
-            <div v-if="form.dataExcelFileName" class="file-chip">
-              <el-icon><Document /></el-icon>
-              <span>{{ form.dataExcelFileName }}</span>
+          <div class="kano-head">
+            <p class="task-desc kano-desc">
+              在正式设计问卷之前，需要理解消费者需求的层次结构。不同类型的需求对购买决策的影响方式截然不同。结合案例资料，通过 KANO 模型进行用户需求分类，填写下表。
+            </p>
+            <div class="kano-actions">
+              <el-button class="hypothesis-action" :disabled="form.kanoNeeds.length >= KANO_NEED_LIMIT" @click="addKanoNeed">增加一行</el-button>
+              <el-button class="hypothesis-action hypothesis-action--quiet" :disabled="form.kanoNeeds.length <= 1" @click="removeKanoNeed">删除一行</el-button>
             </div>
           </div>
+          <div class="kano-table-wrap">
+            <table class="kano-table">
+              <thead>
+                <tr>
+                  <th>编号</th>
+                  <th>功能</th>
+                  <th>对应KANO类型</th>
+                  <th>对应功能方向</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr v-for="(need, index) in form.kanoNeeds" :key="index">
+                  <td class="kano-index">{{ index + 1 }}</td>
+                  <td><textarea v-model="need.feature" class="hypothesis-textarea kano-textarea" placeholder="示例：灯光亮度可无级调节" aria-label="功能" /></td>
+                  <td class="kano-select-cell">
+                    <el-select v-model="need.kanoType" class="kano-select" placeholder="请选择类型" aria-label="对应KANO类型">
+                      <el-option v-for="option in kanoTypeOptions" :key="option" :label="option" :value="option" />
+                    </el-select>
+                  </td>
+                  <td><textarea v-model="need.featureDirection" class="hypothesis-textarea kano-textarea" placeholder="示例：照明系统" aria-label="对应功能方向" /></td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+          <p class="hypothesis-tip">功能与功能方向均可填写；KANO 类型请从下拉菜单选择。最多可填写 {{ KANO_NEED_LIMIT }} 行。</p>
         </section>
 
         <section v-else-if="form.activeStep === 2" class="step-panel">
@@ -182,9 +201,10 @@ 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 { checkConsumerBehaviorStepOne, getStudentTrainingAnswer, saveStudentTrainingAnswer, uploadStudentTrainingFile } from "@/api/studentTrainingAnswer";
+import { checkConsumerBehaviorStepOne, checkConsumerBehaviorStepTwo, getStudentTrainingAnswer, saveStudentTrainingAnswer, uploadStudentTrainingFile } from "@/api/studentTrainingAnswer";
 
 const TASK_KEY = "consumer-behavior";
+const KANO_NEED_LIMIT = 20;
 const { proxy } = getCurrentInstance();
 
 const defaultRequirement = "消费者需求与行为分析用于识别目标用户的购买动机、决策因素、渠道偏好和使用场景，为智能产品功能设计与市场切入提供依据。";
@@ -384,6 +404,7 @@ function createForm() {
   return {
     activeStep: 0,
     targetHypotheses: createTargetHypotheses(),
+    kanoNeeds: createKanoNeeds(),
     questionnaireText: questionnaireTemplate,
     questionnaireFileName: "",
     questionnaireFileUrl: "",
@@ -406,6 +427,16 @@ function createEmptyTargetHypothesis() {
   return { targetGroup: "", keyFinding: "", coreHypothesis: "" };
 }
 
+const kanoTypeOptions = ["基本型", "期望型", "兴奋型", "无差异型", "反向型"];
+
+function createKanoNeeds() {
+  return Array.from({ length: 3 }, createEmptyKanoNeed);
+}
+
+function createEmptyKanoNeed() {
+  return { feature: "", kanoType: "", featureDirection: "" };
+}
+
 const form = ref(createForm());
 
 const taskTitle = computed(() => taskConfig.value?.taskName || "消费者需求与行为");
@@ -475,6 +506,7 @@ function applySavedAnswer(value) {
       activeStep: Number.isInteger(parsed.activeStep) ? parsed.activeStep : 0,
       questionnaireText: normalizeQuestionnaireContent(parsed.questionnaireText || questionnaireTemplate),
       targetHypotheses: normalizeTargetHypotheses(parsed.targetHypotheses),
+      kanoNeeds: normalizeKanoNeeds(parsed.kanoNeeds),
       chartFiles: parsed.chartFiles || {},
       report: normalizeReport(parsed.report),
     };
@@ -493,6 +525,15 @@ function normalizeTargetHypotheses(rows) {
   }));
 }
 
+function normalizeKanoNeeds(rows) {
+  if (!Array.isArray(rows) || !rows.length) return createKanoNeeds();
+  return rows.slice(0, KANO_NEED_LIMIT).map((row) => ({
+    feature: String(row?.feature || ""),
+    kanoType: kanoTypeOptions.includes(row?.kanoType) ? row.kanoType : "",
+    featureDirection: String(row?.featureDirection || ""),
+  }));
+}
+
 function normalizeReport(value = {}) {
   return Object.keys(emptyReport).reduce((report, key) => {
     const currentValue = value?.[key] || "";
@@ -563,6 +604,19 @@ function removeTargetHypothesis() {
   form.value.targetHypotheses.pop();
 }
 
+function addKanoNeed() {
+  if (form.value.kanoNeeds.length >= KANO_NEED_LIMIT) {
+    proxy?.$modal?.msgWarning(`最多可填写 ${KANO_NEED_LIMIT} 行`);
+    return;
+  }
+  form.value.kanoNeeds.push(createEmptyKanoNeed());
+}
+
+function removeKanoNeed() {
+  if (form.value.kanoNeeds.length <= 1) return;
+  form.value.kanoNeeds.pop();
+}
+
 function viewTargetUserProfile() {
   window.open("/demand/people", "_blank", "noopener");
 }
@@ -601,7 +655,7 @@ function goPrev() {
 }
 
 async function goNext() {
-  if (form.value.activeStep === 0) await persist("IN_PROGRESS");
+  if (form.value.activeStep <= 1) await persist("IN_PROGRESS");
   if (form.value.activeStep < flowSteps.value.length - 1) setActiveStep(form.value.activeStep + 1);
 }
 
@@ -632,6 +686,9 @@ async function persist(status = "IN_PROGRESS") {
     if (status !== "RESET" && (form.value.activeStep === 0 || status === "SUBMITTED")) {
       await checkConsumerBehaviorStepOne({ hypotheses: form.value.targetHypotheses });
     }
+    if (status !== "RESET" && (form.value.activeStep === 1 || status === "SUBMITTED")) {
+      await checkConsumerBehaviorStepTwo({ needs: form.value.kanoNeeds });
+    }
     await saveStudentTrainingAnswer(TASK_KEY, buildAnswerPayload(status));
     proxy?.$modal?.msgSuccess(status === "SUBMITTED" ? "提交成功" : "保存成功");
   } finally {
@@ -664,6 +721,9 @@ function exportOutcome() {
     "问卷调查目标人群与核心假设：",
     ...form.value.targetHypotheses.map((item, index) => `${index + 1}. 目标人群：${item.targetGroup || ""}\n实训8关键发现：${item.keyFinding || ""}\n核心假设：${item.coreHypothesis || ""}`),
     "",
+    "KANO 用户需求分类：",
+    ...form.value.kanoNeeds.map((item, index) => `${index + 1}. 功能：${item.feature || ""}\nKANO类型：${item.kanoType || ""}\n功能方向：${item.featureDirection || ""}`),
+    "",
     "问卷设计：",
     questionnaireTextForExport(),
     "",
@@ -1070,7 +1130,8 @@ function exportOutcome() {
   font-weight: 600;
 }
 
-.hypothesis-actions {
+.hypothesis-actions,
+.kano-actions {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
@@ -1078,6 +1139,7 @@ function exportOutcome() {
 }
 
 .hypothesis-actions :deep(.hypothesis-action),
+.kano-actions :deep(.hypothesis-action),
 .training-eight-action {
   min-width: 146px;
   height: 42px;
@@ -1089,7 +1151,8 @@ function exportOutcome() {
   font-weight: 800;
 }
 
-.hypothesis-actions :deep(.hypothesis-action--quiet) {
+.hypothesis-actions :deep(.hypothesis-action--quiet),
+.kano-actions :deep(.hypothesis-action--quiet) {
   border-color: rgba(115, 191, 220, 0.58);
   color: #d9f4ff;
   background: rgba(13, 85, 117, 0.72);
@@ -1176,6 +1239,91 @@ function exportOutcome() {
   font-size: 13px;
 }
 
+.kano-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 18px 28px;
+  margin-bottom: 20px;
+}
+
+.kano-desc {
+  max-width: 780px;
+  margin: 0;
+  color: #d9eaf4;
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.kano-table-wrap {
+  overflow-x: auto;
+  border: 1px solid rgba(0, 180, 255, 0.24);
+  border-radius: 18px;
+  background: rgba(1, 14, 26, 0.72);
+}
+
+.kano-table {
+  width: 100%;
+  min-width: 980px;
+  border-collapse: collapse;
+  table-layout: fixed;
+
+  th,
+  td {
+    padding: 10px 12px;
+    border-right: 1px solid rgba(77, 167, 220, 0.26);
+    border-bottom: 1px solid rgba(77, 167, 220, 0.26);
+    vertical-align: middle;
+  }
+
+  th {
+    color: #ecfbff;
+    background: linear-gradient(100deg, #158fc4, #08739f);
+    font-size: 16px;
+    font-weight: 800;
+  }
+
+  th:nth-child(1) { width: 9%; }
+  th:nth-child(2) { width: 42%; }
+  th:nth-child(3) { width: 25%; }
+  th:nth-child(4) { width: 24%; }
+
+  tr:last-child td { border-bottom: 0; }
+  th:last-child,
+  td:last-child { border-right: 0; }
+}
+
+.kano-index {
+  color: #83e9ff;
+  font-weight: 800;
+  text-align: center;
+}
+
+.kano-textarea {
+  min-height: 58px;
+}
+
+.kano-select-cell {
+  text-align: center;
+}
+
+.kano-select {
+  width: min(100%, 190px);
+}
+
+.kano-select :deep(.el-select__wrapper) {
+  min-height: 42px;
+  border: 1px solid rgba(67, 134, 166, 0.8);
+  border-radius: 10px;
+  box-shadow: none;
+  color: #eaf7ff;
+  background: rgba(7, 29, 43, 0.92);
+}
+
+.kano-select :deep(.el-select__placeholder) {
+  color: #8da5b2;
+}
+
 .questionnaire-desc {
   flex: 1;
   margin: 0;
@@ -1576,14 +1724,21 @@ function exportOutcome() {
     width: 100%;
   }
 
-  .hypothesis-actions {
+  .hypothesis-actions,
+  .kano-actions {
     justify-content: stretch;
   }
 
-  .hypothesis-actions :deep(.hypothesis-action) {
+  .hypothesis-actions :deep(.hypothesis-action),
+  .kano-actions :deep(.hypothesis-action) {
     flex: 1;
   }
 
+  .kano-head {
+    align-items: stretch;
+    flex-direction: column;
+  }
+
   .step-indicator {
     align-items: stretch;
     flex-direction: column;

From a4177c98d36d9929aa6b19aebf59dd45c559e5ca Mon Sep 17 00:00:00 2001
From: chenyuan <chenyuan@example.com>
Date: Tue, 11 Aug 2026 21:48:40 +0800
Subject: [PATCH 3/4] feat: add consumer behavior questionnaire editor

---
 src/api/studentTrainingAnswer.js       |  36 ++
 src/views/demand/consumer-behavior.vue | 456 +++++++++++++++++++++++--
 2 files changed, 472 insertions(+), 20 deletions(-)

diff --git a/src/api/studentTrainingAnswer.js b/src/api/studentTrainingAnswer.js
index 4cfd190..76520c8 100644
--- a/src/api/studentTrainingAnswer.js
+++ b/src/api/studentTrainingAnswer.js
@@ -371,3 +371,39 @@ export function checkConsumerBehaviorStepTwo(payload) {
     headers: { repeatSubmit: false },
   });
 }
+
+export function checkConsumerBehaviorStepThree(payload) {
+  if (isStudentDemo()) {
+    const importedDocumentUrl = String(payload?.importedDocumentUrl || "").trim();
+    const questions = Array.isArray(payload?.questions) ? payload.questions : [];
+    const requiredSections = ["基本信息", "购买行为", "需求偏好", "开放建议"];
+    const validQuestions = questions.filter((item) => String(item?.title || "").trim());
+    const complete = requiredSections.every((section) => validQuestions.some((item) => item.section === section))
+      && validQuestions.some((item) => item.section === "需求偏好" && item.type === "LIKERT");
+    if (!importedDocumentUrl && !complete) {
+      return Promise.reject(new Error("请完整设计包含四个部分且含Likert五级量表的问卷，或导入Word问卷"));
+    }
+    return Promise.resolve({ code: 200, data: { valid: true, message: "校验通过" } });
+  }
+  return request({
+    url: "/api/student-training-answers/consumer-behavior/step-3/validate",
+    method: "post",
+    data: payload,
+    headers: { repeatSubmit: false },
+  });
+}
+
+export function previewConsumerBehaviorQuestionnaireWord(data) {
+  if (isStudentDemo()) {
+    return Promise.reject(new Error("演示模式不支持 Word 文档预览"));
+  }
+  return request({
+    url: "/api/student-training-answers/consumer-behavior/step-3/word-preview",
+    method: "post",
+    data,
+    headers: {
+      "Content-Type": "multipart/form-data",
+      repeatSubmit: false,
+    },
+  });
+}
diff --git a/src/views/demand/consumer-behavior.vue b/src/views/demand/consumer-behavior.vue
index 2872909..561ed80 100644
--- a/src/views/demand/consumer-behavior.vue
+++ b/src/views/demand/consumer-behavior.vue
@@ -49,6 +49,13 @@
           :accept="uploadAccept"
           @change="handleFileChange"
         />
+        <input
+          ref="questionnaireImportInputRef"
+          type="file"
+          class="file-input"
+          accept=".docx"
+          @change="handleQuestionnaireImport"
+        />
 
         <section class="step-card consumer-behavior-step-card">
         <div v-if="activeStepName" class="step-title-row">
@@ -127,27 +134,63 @@
         </section>
 
         <section v-else-if="form.activeStep === 2" class="step-panel">
-          <p class="task-desc">
-            请根据上一步骤整理的Excel文件，利用Excel进行数据可视化，上传Excel可视化操作截图。
-          </p>
+          <div class="questionnaire-design-head">
+            <p class="task-desc questionnaire-design-desc">
+              结合前面的实训分析，设计一份完整的消费者需求调研问卷，包含基本信息、购买行为、需求偏好和开放建议四部分。需求偏好部分请用 Likert 五级量表评价第 2 步归类的功能。
+            </p>
+            <el-button class="questionnaire-import-action" :loading="questionnaireImporting" @click="triggerQuestionnaireImport">
+              <el-icon><Upload /></el-icon>
+              导入问卷（Word 文档）
+            </el-button>
+          </div>
+
+          <div v-if="form.questionnaireImport?.name" class="questionnaire-imported-file">
+            <el-icon><Document /></el-icon>
+            <span>{{ form.questionnaireImport.name }}</span>
+            <button type="button" @click="showQuestionnairePreview = true">预览问卷</button>
+          </div>
 
-          <div class="visual-group" v-for="group in visualGroups" :key="group.title">
-            <h5>{{ group.title }}</h5>
-            <div class="visual-grid">
-              <div v-for="item in group.items" :key="item.key" class="visual-card">
-                <span>{{ item.label }}</span>
-                <el-button class="mini-upload" :loading="uploading" @click="triggerFileSelect('chart', item.key)">
-                  上传Excel图形截图
-                </el-button>
-                <small v-if="form.chartFiles[item.key]?.name">{{ form.chartFiles[item.key].name }}</small>
-              </div>
+          <div class="questionnaire-editor-launcher">
+            <div class="questionnaire-editor-launcher__copy">
+              <span class="section-eyebrow">Questionnaire Studio</span>
+              <h4>在线编写消费者需求调研问卷</h4>
+              <p>通过分区、题型与选项设置，快速完成可执行的问卷结构。</p>
             </div>
+            <el-button class="questionnaire-editor-launcher__action" @click="questionnaireEditorVisible = true">进入问卷编辑器</el-button>
           </div>
 
-          <h5 class="analysis-heading">
-            4.结合开放性问题建议以及上述数据可视化结果，进行用户购买智能产品决策因素分析，给出分析报告，注意结合不同类别调研数据进行综合性交叉分析。
-          </h5>
-          <ReportFields v-model="form.report" />
+          <p class="questionnaire-editor-summary">
+            已编辑 {{ form.questionnaireQuestions.length }} 题；{{ form.questionnaireImport?.name ? "已导入 1 份 Word 问卷，可随时预览。" : "也可导入已完成的 .docx 问卷。" }}
+          </p>
+
+          <el-dialog v-model="questionnaireEditorVisible" title="消费者需求调研问卷编辑器" width="min(1120px, 94vw)" class="questionnaire-editor-dialog" append-to-body>
+            <div class="questionnaire-editor-dialog__intro">
+              <p>请覆盖基本信息、购买行为、需求偏好和开放建议四部分；需求偏好至少设置一题 Likert 五级量表。</p>
+              <el-button class="questionnaire-editor-add" @click="addQuestionnaireQuestion">新增题目</el-button>
+            </div>
+            <div class="questionnaire-question-list">
+              <article v-for="(question, index) in form.questionnaireQuestions" :key="question.id" class="questionnaire-question-card">
+                <span class="questionnaire-question-card__number">{{ String(index + 1).padStart(2, "0") }}</span>
+                <div class="questionnaire-question-card__fields">
+                  <el-select v-model="question.section" aria-label="问卷分区">
+                    <el-option v-for="section in questionnaireSections" :key="section.value" :label="section.label" :value="section.value" />
+                  </el-select>
+                  <el-select v-model="question.type" aria-label="题目类型">
+                    <el-option v-for="type in questionnaireQuestionTypes" :key="type.value" :label="type.label" :value="type.value" />
+                  </el-select>
+                  <el-input v-model="question.title" :placeholder="questionPlaceholder(question.section)" aria-label="题目内容" />
+                  <el-input v-if="question.type === 'SINGLE' || question.type === 'MULTIPLE'" v-model="question.options" placeholder="选项以中文逗号或换行分隔" aria-label="题目选项" />
+                  <p v-else-if="question.type === 'LIKERT'" class="likert-tip">量表固定为：非常不重要、较不重要、一般、较重要、非常重要</p>
+                </div>
+                <button type="button" class="questionnaire-question-card__remove" :disabled="form.questionnaireQuestions.length <= 4" @click="removeQuestionnaireQuestion(index)">删除</button>
+              </article>
+            </div>
+          </el-dialog>
+
+          <el-dialog v-model="showQuestionnairePreview" title="导入问卷预览" width="min(900px, 94vw)" class="questionnaire-preview-dialog" append-to-body>
+            <div v-if="form.questionnaireImport?.previewContent" class="questionnaire-word-preview">{{ form.questionnaireImport.previewContent }}</div>
+            <p v-else class="questionnaire-preview-empty">暂未解析到可预览内容。</p>
+          </el-dialog>
         </section>
 
         <section v-else class="step-panel">
@@ -201,10 +244,11 @@ 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 { checkConsumerBehaviorStepOne, checkConsumerBehaviorStepTwo, getStudentTrainingAnswer, saveStudentTrainingAnswer, uploadStudentTrainingFile } from "@/api/studentTrainingAnswer";
+import { checkConsumerBehaviorStepOne, checkConsumerBehaviorStepTwo, checkConsumerBehaviorStepThree, getStudentTrainingAnswer, previewConsumerBehaviorQuestionnaireWord, saveStudentTrainingAnswer, uploadStudentTrainingFile } from "@/api/studentTrainingAnswer";
 
 const TASK_KEY = "consumer-behavior";
 const KANO_NEED_LIMIT = 20;
+let questionnaireQuestionSequence = 0;
 const { proxy } = getCurrentInstance();
 
 const defaultRequirement = "消费者需求与行为分析用于识别目标用户的购买动机、决策因素、渠道偏好和使用场景，为智能产品功能设计与市场切入提供依据。";
@@ -389,9 +433,13 @@ const ReportFields = defineComponent({
 const taskConfig = ref(null);
 const saving = ref(false);
 const uploading = ref(false);
+const questionnaireImporting = ref(false);
 const fileInputRef = ref(null);
+const questionnaireImportInputRef = ref(null);
 const questionnaireEditorRef = ref(null);
 const uploadContext = ref({ type: "", key: "" });
+const questionnaireEditorVisible = ref(false);
+const showQuestionnairePreview = ref(false);
 
 const uploadAccept = computed(() => {
   if (uploadContext.value.type === "questionnaire") return ".pdf";
@@ -405,6 +453,8 @@ function createForm() {
     activeStep: 0,
     targetHypotheses: createTargetHypotheses(),
     kanoNeeds: createKanoNeeds(),
+    questionnaireQuestions: createQuestionnaireQuestions(),
+    questionnaireImport: null,
     questionnaireText: questionnaireTemplate,
     questionnaireFileName: "",
     questionnaireFileUrl: "",
@@ -428,6 +478,18 @@ function createEmptyTargetHypothesis() {
 }
 
 const kanoTypeOptions = ["基本型", "期望型", "兴奋型", "无差异型", "反向型"];
+const questionnaireSections = [
+  { value: "基本信息", label: "基本信息" },
+  { value: "购买行为", label: "购买行为" },
+  { value: "需求偏好", label: "需求偏好" },
+  { value: "开放建议", label: "开放建议" },
+];
+const questionnaireQuestionTypes = [
+  { value: "SINGLE", label: "单选题" },
+  { value: "MULTIPLE", label: "多选题" },
+  { value: "LIKERT", label: "Likert 五级量表" },
+  { value: "TEXT", label: "开放题" },
+];
 
 function createKanoNeeds() {
   return Array.from({ length: 3 }, createEmptyKanoNeed);
@@ -437,6 +499,20 @@ function createEmptyKanoNeed() {
   return { feature: "", kanoType: "", featureDirection: "" };
 }
 
+function createQuestionnaireQuestions() {
+  return [
+    createQuestionnaireQuestion("基本信息", "SINGLE"),
+    createQuestionnaireQuestion("购买行为", "SINGLE"),
+    createQuestionnaireQuestion("需求偏好", "LIKERT"),
+    createQuestionnaireQuestion("开放建议", "TEXT"),
+  ];
+}
+
+function createQuestionnaireQuestion(section = "基本信息", type = "SINGLE") {
+  questionnaireQuestionSequence += 1;
+  return { id: `question-${Date.now()}-${questionnaireQuestionSequence}`, section, type, title: "", options: "" };
+}
+
 const form = ref(createForm());
 
 const taskTitle = computed(() => taskConfig.value?.taskName || "消费者需求与行为");
@@ -447,7 +523,7 @@ const flowSteps = computed(() => parseArray(taskConfig.value?.steps, []).slice(0
 const activeStepName = computed(() => flowSteps.value[form.value.activeStep] || "");
 
 const progressItems = computed(() => [
-  { text: form.value.questionnaireFileName ? "已完成：问卷上传" : "待完成：问卷设计与上传", status: form.value.questionnaireFileName ? "done" : "" },
+  { text: hasQuestionnaireDesign() ? "已完成：问卷设计" : "待完成：问卷设计", status: hasQuestionnaireDesign() ? "done" : "" },
   { text: form.value.dataExcelFileName ? "已完成：数据整理上传" : "待完成：整理并上传Excel", status: form.value.dataExcelFileName ? "done" : "" },
   { text: Object.keys(form.value.chartFiles).length ? "进行中：数据可视化截图" : "待完成：数据可视化截图", status: Object.keys(form.value.chartFiles).length ? "done" : "" },
   { text: hasReportContent() ? "进行中：分析报告" : "待完成：分析报告", status: hasReportContent() ? "done" : "" },
@@ -507,6 +583,8 @@ function applySavedAnswer(value) {
       questionnaireText: normalizeQuestionnaireContent(parsed.questionnaireText || questionnaireTemplate),
       targetHypotheses: normalizeTargetHypotheses(parsed.targetHypotheses),
       kanoNeeds: normalizeKanoNeeds(parsed.kanoNeeds),
+      questionnaireQuestions: normalizeQuestionnaireQuestions(parsed.questionnaireQuestions),
+      questionnaireImport: normalizeQuestionnaireImport(parsed.questionnaireImport),
       chartFiles: parsed.chartFiles || {},
       report: normalizeReport(parsed.report),
     };
@@ -534,6 +612,26 @@ function normalizeKanoNeeds(rows) {
   }));
 }
 
+function normalizeQuestionnaireQuestions(rows) {
+  if (!Array.isArray(rows) || !rows.length) return createQuestionnaireQuestions();
+  return rows.map((row, index) => ({
+    id: String(row?.id || `question-restored-${index}`),
+    section: questionnaireSections.some((item) => item.value === row?.section) ? row.section : "基本信息",
+    type: questionnaireQuestionTypes.some((item) => item.value === row?.type) ? row.type : "SINGLE",
+    title: String(row?.title || ""),
+    options: String(row?.options || ""),
+  }));
+}
+
+function normalizeQuestionnaireImport(value) {
+  if (!value || typeof value !== "object" || !value.name) return null;
+  return {
+    name: String(value.name),
+    url: String(value.url || ""),
+    previewContent: String(value.previewContent || ""),
+  };
+}
+
 function normalizeReport(value = {}) {
   return Object.keys(emptyReport).reduce((report, key) => {
     const currentValue = value?.[key] || "";
@@ -617,6 +715,29 @@ function removeKanoNeed() {
   form.value.kanoNeeds.pop();
 }
 
+function questionPlaceholder(section) {
+  const placeholders = {
+    基本信息: "例如：您的年龄处于以下哪个区间？",
+    购买行为: "例如：您通常通过什么渠道购买智能助眠产品？",
+    需求偏好: "例如：白噪声可定时关闭对您有多重要？",
+    开放建议: "例如：您希望智能助眠产品增加哪些功能？",
+  };
+  return placeholders[section] || "请输入题目内容";
+}
+
+function addQuestionnaireQuestion() {
+  form.value.questionnaireQuestions.push(createQuestionnaireQuestion());
+}
+
+function removeQuestionnaireQuestion(index) {
+  if (form.value.questionnaireQuestions.length <= 4) return;
+  form.value.questionnaireQuestions.splice(index, 1);
+}
+
+function triggerQuestionnaireImport() {
+  questionnaireImportInputRef.value?.click();
+}
+
 function viewTargetUserProfile() {
   window.open("/demand/people", "_blank", "noopener");
 }
@@ -650,12 +771,40 @@ async function handleFileChange(event) {
   }
 }
 
+async function handleQuestionnaireImport(event) {
+  const file = event.target.files?.[0];
+  if (!file) return;
+  if (!/\.docx$/i.test(file.name)) {
+    proxy?.$modal?.msgWarning("请导入 .docx 格式的 Word 问卷，以便在线预览");
+    event.target.value = "";
+    return;
+  }
+  const data = new FormData();
+  data.append("file", file);
+  questionnaireImporting.value = true;
+  try {
+    const previewRes = await previewConsumerBehaviorQuestionnaireWord(data);
+    const uploadRes = await uploadStudentTrainingFile(data);
+    const url = uploadRes?.url || uploadRes?.fileName || uploadRes?.data?.url || uploadRes?.data?.fileName || "";
+    form.value.questionnaireImport = {
+      name: file.name,
+      url,
+      previewContent: String(previewRes?.data?.content || ""),
+    };
+    showQuestionnairePreview.value = true;
+    proxy?.$modal?.msgSuccess("问卷导入成功");
+  } finally {
+    questionnaireImporting.value = false;
+    event.target.value = "";
+  }
+}
+
 function goPrev() {
   if (form.value.activeStep > 0) setActiveStep(form.value.activeStep - 1);
 }
 
 async function goNext() {
-  if (form.value.activeStep <= 1) await persist("IN_PROGRESS");
+  if (form.value.activeStep <= 2) await persist("IN_PROGRESS");
   if (form.value.activeStep < flowSteps.value.length - 1) setActiveStep(form.value.activeStep + 1);
 }
 
@@ -663,6 +812,11 @@ function hasReportContent() {
   return Object.values(form.value.report || {}).some((value) => String(value || "").trim());
 }
 
+function hasQuestionnaireDesign() {
+  return Boolean(form.value.questionnaireImport?.name)
+    || form.value.questionnaireQuestions.some((item) => String(item?.title || "").trim());
+}
+
 function buildAnswerPayload(status) {
   syncQuestionnaireText();
   const saveAction = status === "SUBMITTED" ? "SUBMIT" : status === "RESET" ? "RESET" : "SAVE";
@@ -689,6 +843,12 @@ async function persist(status = "IN_PROGRESS") {
     if (status !== "RESET" && (form.value.activeStep === 1 || status === "SUBMITTED")) {
       await checkConsumerBehaviorStepTwo({ needs: form.value.kanoNeeds });
     }
+    if (status !== "RESET" && (form.value.activeStep === 2 || status === "SUBMITTED")) {
+      await checkConsumerBehaviorStepThree({
+        questions: form.value.questionnaireQuestions,
+        importedDocumentUrl: form.value.questionnaireImport?.url || "",
+      });
+    }
     await saveStudentTrainingAnswer(TASK_KEY, buildAnswerPayload(status));
     proxy?.$modal?.msgSuccess(status === "SUBMITTED" ? "提交成功" : "保存成功");
   } finally {
@@ -724,6 +884,10 @@ function exportOutcome() {
     "KANO 用户需求分类：",
     ...form.value.kanoNeeds.map((item, index) => `${index + 1}. 功能：${item.feature || ""}\nKANO类型：${item.kanoType || ""}\n功能方向：${item.featureDirection || ""}`),
     "",
+    "消费者需求调研问卷：",
+    form.value.questionnaireImport?.name ? `导入问卷：${form.value.questionnaireImport.name}` : "",
+    ...form.value.questionnaireQuestions.map((item, index) => `${index + 1}. [${item.section}] ${item.title || ""}（${questionnaireQuestionTypes.find((type) => type.value === item.type)?.label || ""}）`),
+    "",
     "问卷设计：",
     questionnaireTextForExport(),
     "",
@@ -1324,6 +1488,229 @@ function exportOutcome() {
   color: #8da5b2;
 }
 
+.questionnaire-design-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 18px 28px;
+  margin-bottom: 20px;
+}
+
+.questionnaire-design-desc {
+  max-width: 820px;
+  margin: 0;
+  color: #d9eaf4;
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.questionnaire-import-action,
+.questionnaire-editor-launcher__action {
+  min-width: 178px;
+  height: 44px;
+  border: 1px solid rgba(92, 224, 255, 0.7);
+  border-radius: 10px;
+  color: #ffffff;
+  background: linear-gradient(95deg, #0b84bd, #096491);
+  font-size: 15px;
+  font-weight: 800;
+}
+
+.questionnaire-imported-file {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  max-width: 100%;
+  min-height: 42px;
+  padding: 0 13px;
+  margin-bottom: 18px;
+  border: 1px solid rgba(87, 215, 255, 0.4);
+  border-radius: 12px;
+  color: #dff9ff;
+  background: rgba(10, 97, 137, 0.28);
+
+  span {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  button {
+    flex: 0 0 auto;
+    border: 0;
+    color: #75e5ff;
+    background: transparent;
+    cursor: pointer;
+    font-weight: 800;
+  }
+}
+
+.questionnaire-editor-launcher {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 32px;
+  min-height: 190px;
+  padding: 32px 40px;
+  overflow: hidden;
+  border: 1px solid rgba(54, 195, 243, 0.36);
+  border-radius: 20px;
+  background:
+    radial-gradient(circle at 86% 18%, rgba(31, 207, 255, 0.22), transparent 34%),
+    linear-gradient(115deg, rgba(7, 59, 87, 0.94), rgba(2, 20, 34, 0.9));
+}
+
+.questionnaire-editor-launcher__copy {
+  position: relative;
+  z-index: 1;
+
+  h4 {
+    margin: 7px 0;
+    color: #ffffff;
+    font-size: 23px;
+  }
+
+  p {
+    max-width: 600px;
+    margin: 0;
+    color: #b6d1df;
+    line-height: 1.7;
+  }
+}
+
+.questionnaire-editor-launcher__action {
+  flex: 0 0 auto;
+  min-width: 170px;
+  height: 52px;
+}
+
+.questionnaire-editor-summary {
+  margin: 13px 0 0;
+  color: #72deff;
+  font-size: 13px;
+}
+
+:deep(.questionnaire-editor-dialog .el-dialog),
+:deep(.questionnaire-preview-dialog .el-dialog) {
+  overflow: hidden;
+  border: 1px solid rgba(70, 200, 247, 0.35);
+  border-radius: 18px;
+  color: #e7f8ff;
+  background: #061724;
+}
+
+:deep(.questionnaire-editor-dialog .el-dialog__title),
+:deep(.questionnaire-preview-dialog .el-dialog__title) {
+  color: #ffffff;
+  font-weight: 800;
+}
+
+.questionnaire-editor-dialog__intro {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 20px;
+  margin-bottom: 18px;
+
+  p {
+    margin: 0;
+    color: #b9d3e0;
+    line-height: 1.7;
+  }
+}
+
+.questionnaire-editor-add {
+  flex: 0 0 auto;
+  border-color: rgba(92, 224, 255, 0.7);
+  color: #ffffff;
+  background: linear-gradient(95deg, #0b84bd, #096491);
+}
+
+.questionnaire-question-list {
+  display: grid;
+  gap: 12px;
+  max-height: min(58vh, 700px);
+  padding-right: 5px;
+  overflow: auto;
+}
+
+.questionnaire-question-card {
+  display: grid;
+  grid-template-columns: 36px minmax(0, 1fr) auto;
+  gap: 12px;
+  align-items: start;
+  padding: 14px;
+  border: 1px solid rgba(67, 144, 184, 0.34);
+  border-radius: 14px;
+  background: rgba(13, 45, 63, 0.66);
+}
+
+.questionnaire-question-card__number {
+  display: grid;
+  place-items: center;
+  width: 32px;
+  height: 32px;
+  border: 1px solid rgba(80, 222, 255, 0.45);
+  border-radius: 50%;
+  color: #74e5ff;
+  font-size: 12px;
+  font-weight: 800;
+}
+
+.questionnaire-question-card__fields {
+  display: grid;
+  grid-template-columns: 180px 180px minmax(0, 1fr);
+  gap: 10px;
+
+  :deep(.el-select__wrapper),
+  :deep(.el-input__wrapper) {
+    min-height: 38px;
+    border: 1px solid rgba(67, 134, 166, 0.8);
+    box-shadow: none;
+    color: #eaf7ff;
+    background: rgba(5, 26, 39, 0.9);
+  }
+
+  :deep(.el-input__inner) { color: #eaf7ff; }
+}
+
+.likert-tip {
+  grid-column: 1 / -1;
+  margin: 0;
+  color: #7ce0f8;
+  font-size: 12px;
+}
+
+.questionnaire-question-card__remove {
+  padding: 8px 10px;
+  border: 1px solid rgba(104, 161, 187, 0.5);
+  border-radius: 8px;
+  color: #bddfeb;
+  background: transparent;
+  cursor: pointer;
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.45;
+  }
+}
+
+.questionnaire-word-preview {
+  max-height: min(62vh, 760px);
+  padding: 20px;
+  overflow: auto;
+  border: 1px solid rgba(77, 167, 220, 0.28);
+  border-radius: 12px;
+  color: #e2f3fa;
+  background: rgba(3, 25, 38, 0.86);
+  white-space: pre-wrap;
+  line-height: 1.85;
+}
+
+.questionnaire-preview-empty {
+  color: #b9d3e0;
+}
+
 .questionnaire-desc {
   flex: 1;
   margin: 0;
@@ -1739,6 +2126,35 @@ function exportOutcome() {
     flex-direction: column;
   }
 
+  .questionnaire-design-head,
+  .questionnaire-editor-launcher,
+  .questionnaire-editor-dialog__intro {
+    align-items: stretch;
+    flex-direction: column;
+  }
+
+  .questionnaire-import-action,
+  .questionnaire-editor-launcher__action {
+    width: 100%;
+  }
+
+  .questionnaire-editor-launcher {
+    padding: 26px;
+  }
+
+  .questionnaire-question-card {
+    grid-template-columns: 32px minmax(0, 1fr);
+  }
+
+  .questionnaire-question-card__fields {
+    grid-template-columns: 1fr;
+  }
+
+  .questionnaire-question-card__remove {
+    grid-column: 2;
+    justify-self: end;
+  }
+
   .step-indicator {
     align-items: stretch;
     flex-direction: column;

From acf42b3b8bbd529d9a5c488b9834747e78595bba Mon Sep 17 00:00:00 2001
From: chenyuan <chenyuan@example.com>
Date: Tue, 11 Aug 2026 21:56:41 +0800
Subject: [PATCH 4/4] feat: add consumer behavior survey report

---
 src/api/studentTrainingAnswer.js       |  16 ++
 src/views/demand/consumer-behavior.vue | 279 ++++++++++++++++---------
 2 files changed, 200 insertions(+), 95 deletions(-)

diff --git a/src/api/studentTrainingAnswer.js b/src/api/studentTrainingAnswer.js
index 76520c8..422d013 100644
--- a/src/api/studentTrainingAnswer.js
+++ b/src/api/studentTrainingAnswer.js
@@ -407,3 +407,19 @@ export function previewConsumerBehaviorQuestionnaireWord(data) {
     },
   });
 }
+
+export function checkConsumerBehaviorStepFour(payload) {
+  if (isStudentDemo()) {
+    const rows = Array.isArray(payload?.rows) ? payload.rows : [];
+    if (rows.length < 5 || rows.some((item) => !String(item?.title || "").trim() || !String(item?.content || "").trim())) {
+      return Promise.reject(new Error("请完整填写 5 个问卷调研报告模块的标题和内容"));
+    }
+    return Promise.resolve({ code: 200, data: { valid: true, message: "校验通过" } });
+  }
+  return request({
+    url: "/api/student-training-answers/consumer-behavior/step-4/validate",
+    method: "post",
+    data: payload,
+    headers: { repeatSubmit: false },
+  });
+}
diff --git a/src/views/demand/consumer-behavior.vue b/src/views/demand/consumer-behavior.vue
index 561ed80..98c3a99 100644
--- a/src/views/demand/consumer-behavior.vue
+++ b/src/views/demand/consumer-behavior.vue
@@ -194,10 +194,41 @@
         </section>
 
         <section v-else class="step-panel">
-          <p class="task-desc">
-            请根据问卷设计、数据收集与数据可视化结果，整理形成最终分析报告。
+          <p class="task-desc survey-report-desc">
+            将步骤三设计的调查问卷导入问卷星等在线问卷调查平台，开展问卷调查。基于收集到的数据，填写问卷调查报告。
           </p>
-          <ReportFields v-model="form.report" />
+          <div class="survey-report-table-wrap">
+            <table class="survey-report-table">
+              <thead>
+                <tr>
+                  <th>报告模块标题</th>
+                  <th>内容</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr v-for="(row, index) in form.surveyReportRows" :key="index">
+                  <td>
+                    <input v-model="row.title" class="survey-report-title-input" :placeholder="surveyReportTitlePlaceholder(index)" :aria-label="`第${index + 1}个报告模块标题`" />
+                  </td>
+                  <td>
+                    <textarea v-model="row.content" class="survey-report-content-input" :placeholder="surveyReportContentPlaceholder(index)" :aria-label="`第${index + 1}个报告模块内容`" />
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+          <div class="survey-report-guide">
+            <div>
+              <h5>可参考以下方法</h5>
+              <p>1. 根据报告模板，自行分析撰写问卷调查报告。</p>
+              <p>2. 使用通用 AI 大模型辅助完成报告：请根据用户调研数据，从用户购买核心决策因素、不同群体决策因素差异、未购买用户的顾虑与市场机会、信息获取渠道与购买场景等方面撰写报告。</p>
+              <p>3. 如问卷调查收集的数据不理想，可使用本实训提供的数据进行分析，生成调查报告。</p>
+            </div>
+            <el-button class="survey-report-template-action" @click="downloadSurveyReportTemplate">
+              <el-icon><Download /></el-icon>
+              下载报告模板
+            </el-button>
+          </div>
         </section>
 
         <div class="step-actions">
@@ -238,13 +269,13 @@
 </template>
 
 <script setup>
-import { computed, defineComponent, getCurrentInstance, h, nextTick, onMounted, ref } from "vue";
+import { computed, getCurrentInstance, nextTick, onMounted, ref } from "vue";
 import { ArrowLeft, ArrowRight, CircleCheck, Document, Download, Upload } from "@element-plus/icons-vue";
 import TrainingAiSidebar from "@/views/components/TrainingAiSidebar.vue";
 import TrainingMaterialButton from "@/views/components/TrainingMaterialButton.vue";
 import TrainingTaskBrief from "@/views/components/TrainingTaskBrief.vue";
 import { getTrainingTaskByKey } from "@/api/trainingTask";
-import { checkConsumerBehaviorStepOne, checkConsumerBehaviorStepTwo, checkConsumerBehaviorStepThree, getStudentTrainingAnswer, previewConsumerBehaviorQuestionnaireWord, saveStudentTrainingAnswer, uploadStudentTrainingFile } from "@/api/studentTrainingAnswer";
+import { checkConsumerBehaviorStepOne, checkConsumerBehaviorStepTwo, checkConsumerBehaviorStepThree, checkConsumerBehaviorStepFour, getStudentTrainingAnswer, previewConsumerBehaviorQuestionnaireWord, saveStudentTrainingAnswer, uploadStudentTrainingFile } from "@/api/studentTrainingAnswer";
 
 const TASK_KEY = "consumer-behavior";
 const KANO_NEED_LIMIT = 20;
@@ -356,80 +387,6 @@ const visualGroups = [
   },
 ];
 
-const reportPlaceholders = {
-  coreDecisionFactors:
-    "从调研数据可以看出，功能实用性和产品质量与稳定性是用户购买智能产品时最为关注的因素，选择“重要”和“非常重要”的人数占比分别达到80%和75%。这表明用户在购买智能产品时，更加注重产品能否切实解决实际问题，以及产品在长期使用过程中的可靠性。\n\n价格也是用户重点考虑的因素之一，有65%的用户认为价格重要或非常重要。不同收入群体对价格的敏感度有所差异，中低收入群体在购买智能产品时，价格仍是主要的制约因素，而高收入群体则更愿意为高品质、高性能的产品支付更高价格。",
-  groupDifferences:
-    "1. 年龄差异：19-25岁的年轻群体更注重产品的外观设计和生态兼容性，他们追求个性化和时尚感，同时希望智能产品能够与其他设备实现联动。\n2. 收入差异：高收入群体对品牌知名度和数据安全与隐私保护的关注度更高；低收入群体则主要聚焦于价格和功能实用性。\n3. 城市级别差异：一线城市和新一线城市用户对生态兼容性和创新功能的接受度更高，三线及以下城市用户更关注价格和产品质量。",
-  nonPurchaseOpportunity:
-    "未购买智能产品的用户中，价格过高是最主要的原因，占比达到43.75%。这反映出当前部分智能产品的价格超出了一些用户的承受范围，市场上存在对高性价比智能产品的需求。\n\n此外，对智能产品功能不了解也是未购买的重要原因之一。企业需要加强市场教育，通过产品介绍视频、使用教程和线下体验，降低用户认知门槛。同时，数据安全与隐私保护也可以作为产品差异化卖点。",
-  channelScenario:
-    "电商平台和社交媒体是用户获取智能产品信息的主要渠道，分别有60%和50%的用户选择。企业应加大在电商平台和社交媒体上的内容投放，通过评测、种草、场景演示等方式提高产品曝光。\n\n购买场景方面，自己使用是最主要场景，占比70%。但赠送家人、朋友也占据一定比例，企业可以针对礼品场景设计套装和包装，提高产品附加值。",
-};
-
-const emptyReport = {
-  coreDecisionFactors: "",
-  groupDifferences: "",
-  nonPurchaseOpportunity: "",
-  channelScenario: "",
-};
-
-const reportSampleMarkers = {
-  coreDecisionFactors: ["从调研数据可以看出", "价格也是用户重点考虑的因素之一"],
-  groupDifferences: ["年龄差异", "收入差异", "城市级别差异"],
-  nonPurchaseOpportunity: ["未购买智能产品的用户中", "价格过高是最主要的原因"],
-  channelScenario: ["电商平台和社交媒体是用户获取智能产品信息的主要渠道", "购买场景方面"],
-};
-
-function isDefaultReportSample(key, value) {
-  const currentValue = String(value || "");
-  return (
-    currentValue === reportPlaceholders[key] ||
-    reportSampleMarkers[key]?.some((marker) => currentValue.includes(marker))
-  );
-}
-
-const ReportFields = defineComponent({
-  name: "ReportFields",
-  props: {
-    modelValue: {
-      type: Object,
-      required: true,
-    },
-  },
-  emits: ["update:modelValue"],
-  setup(props, { emit }) {
-    const update = (key, value) => {
-      emit("update:modelValue", {
-        ...props.modelValue,
-        [key]: value,
-      });
-    };
-    const fields = [
-      ["coreDecisionFactors", "核心决策因素", reportPlaceholders.coreDecisionFactors],
-      ["groupDifferences", "不同群体决策因素差异", reportPlaceholders.groupDifferences],
-      ["nonPurchaseOpportunity", "未购买用户的顾虑与市场机会", reportPlaceholders.nonPurchaseOpportunity],
-      ["channelScenario", "信息获取渠道与购买场景分析", reportPlaceholders.channelScenario],
-    ];
-    return () =>
-      h(
-        "div",
-        { class: "report-fields" },
-        fields.map(([key, label, placeholder]) =>
-          h("label", { class: "field-block", key }, [
-            h("span", label),
-            h("textarea", {
-              class: "large-textarea",
-              value: isDefaultReportSample(key, props.modelValue[key]) ? "" : props.modelValue[key],
-              placeholder,
-              onInput: (event) => update(key, event.target.value),
-            }),
-          ])
-        )
-      );
-  },
-});
-
 const taskConfig = ref(null);
 const saving = ref(false);
 const uploading = ref(false);
@@ -455,13 +412,13 @@ function createForm() {
     kanoNeeds: createKanoNeeds(),
     questionnaireQuestions: createQuestionnaireQuestions(),
     questionnaireImport: null,
+    surveyReportRows: createSurveyReportRows(),
     questionnaireText: questionnaireTemplate,
     questionnaireFileName: "",
     questionnaireFileUrl: "",
     dataExcelFileName: "",
     dataExcelFileUrl: "",
     chartFiles: {},
-    report: { ...emptyReport },
   };
 }
 
@@ -513,6 +470,10 @@ function createQuestionnaireQuestion(section = "基本信息", type = "SINGLE")
   return { id: `question-${Date.now()}-${questionnaireQuestionSequence}`, section, type, title: "", options: "" };
 }
 
+function createSurveyReportRows() {
+  return Array.from({ length: 5 }, () => ({ title: "", content: "" }));
+}
+
 const form = ref(createForm());
 
 const taskTitle = computed(() => taskConfig.value?.taskName || "消费者需求与行为");
@@ -526,7 +487,7 @@ const progressItems = computed(() => [
   { text: hasQuestionnaireDesign() ? "已完成：问卷设计" : "待完成：问卷设计", status: hasQuestionnaireDesign() ? "done" : "" },
   { text: form.value.dataExcelFileName ? "已完成：数据整理上传" : "待完成：整理并上传Excel", status: form.value.dataExcelFileName ? "done" : "" },
   { text: Object.keys(form.value.chartFiles).length ? "进行中：数据可视化截图" : "待完成：数据可视化截图", status: Object.keys(form.value.chartFiles).length ? "done" : "" },
-  { text: hasReportContent() ? "进行中：分析报告" : "待完成：分析报告", status: hasReportContent() ? "done" : "" },
+  { text: hasSurveyReport() ? "已完成：问卷调研报告" : "待完成：问卷调研报告", status: hasSurveyReport() ? "done" : "" },
 ]);
 
 onMounted(async () => {
@@ -585,8 +546,8 @@ function applySavedAnswer(value) {
       kanoNeeds: normalizeKanoNeeds(parsed.kanoNeeds),
       questionnaireQuestions: normalizeQuestionnaireQuestions(parsed.questionnaireQuestions),
       questionnaireImport: normalizeQuestionnaireImport(parsed.questionnaireImport),
+      surveyReportRows: normalizeSurveyReportRows(parsed.surveyReportRows),
       chartFiles: parsed.chartFiles || {},
-      report: normalizeReport(parsed.report),
     };
     nextTick(renderQuestionnaireEditor);
   } catch (error) {
@@ -632,12 +593,12 @@ function normalizeQuestionnaireImport(value) {
   };
 }
 
-function normalizeReport(value = {}) {
-  return Object.keys(emptyReport).reduce((report, key) => {
-    const currentValue = value?.[key] || "";
-    report[key] = isDefaultReportSample(key, currentValue) ? "" : currentValue;
-    return report;
-  }, { ...emptyReport });
+function normalizeSurveyReportRows(rows) {
+  if (!Array.isArray(rows) || !rows.length) return createSurveyReportRows();
+  return Array.from({ length: 5 }, (_, index) => ({
+    title: String(rows[index]?.title || ""),
+    content: String(rows[index]?.content || ""),
+  }));
 }
 
 function syncQuestionnaireText() {
@@ -808,8 +769,8 @@ async function goNext() {
   if (form.value.activeStep < flowSteps.value.length - 1) setActiveStep(form.value.activeStep + 1);
 }
 
-function hasReportContent() {
-  return Object.values(form.value.report || {}).some((value) => String(value || "").trim());
+function hasSurveyReport() {
+  return form.value.surveyReportRows.every((item) => String(item?.title || "").trim() && String(item?.content || "").trim());
 }
 
 function hasQuestionnaireDesign() {
@@ -849,6 +810,9 @@ async function persist(status = "IN_PROGRESS") {
         importedDocumentUrl: form.value.questionnaireImport?.url || "",
       });
     }
+    if (status !== "RESET" && (form.value.activeStep === 3 || status === "SUBMITTED")) {
+      await checkConsumerBehaviorStepFour({ rows: form.value.surveyReportRows });
+    }
     await saveStudentTrainingAnswer(TASK_KEY, buildAnswerPayload(status));
     proxy?.$modal?.msgSuccess(status === "SUBMITTED" ? "提交成功" : "保存成功");
   } finally {
@@ -897,11 +861,8 @@ function exportOutcome() {
     "数据收集文件：",
     form.value.dataExcelFileName || "未上传",
     "",
-    "分析报告：",
-    `核心决策因素：\n${form.value.report.coreDecisionFactors || ""}`,
-    `不同群体决策因素差异：\n${form.value.report.groupDifferences || ""}`,
-    `未购买用户的顾虑与市场机会：\n${form.value.report.nonPurchaseOpportunity || ""}`,
-    `信息获取渠道与购买场景分析：\n${form.value.report.channelScenario || ""}`,
+    "问卷调研报告：",
+    ...form.value.surveyReportRows.map((item, index) => `${index + 1}. ${item.title || "未命名模块"}\n${item.content || ""}`),
   ];
   const blob = new Blob([lines.join("\n")], { type: "text/plain;charset=utf-8" });
   const url = URL.createObjectURL(blob);
@@ -911,6 +872,26 @@ function exportOutcome() {
   link.click();
   URL.revokeObjectURL(url);
 }
+
+function surveyReportTitlePlaceholder(index) {
+  return ["例如：调研背景与目的", "例如：样本与调研方法", "例如：用户购买决策因素", "例如：不同群体需求差异", "例如：产品建议与结论"][index] || "请输入报告模块标题";
+}
+
+function surveyReportContentPlaceholder(index) {
+  return ["说明本次问卷调研的背景、目标用户与调研目的。", "说明样本数量、调研时间、调研渠道与数据来源。", "结合问卷数据，分析影响用户购买决策的核心因素。", "比较不同人群在需求、价格、渠道或购买场景上的差异。", "总结调研结论，并提出产品功能、定价或营销建议。"][index] || "请输入报告内容";
+}
+
+function downloadSurveyReportTemplate() {
+  const rows = Array.from({ length: 5 }, (_, index) => `<tr><td>${surveyReportTitlePlaceholder(index)}</td><td>${surveyReportContentPlaceholder(index)}</td></tr>`).join("");
+  const html = `<!doctype html><html><head><meta charset="utf-8"><title>消费者需求调研报告模板</title><style>body{font-family:SimSun,serif;padding:32px;color:#222}h1{font-size:22px;text-align:center}p{line-height:1.75}table{width:100%;border-collapse:collapse;margin-top:24px}th,td{border:1px solid #777;padding:14px;vertical-align:top}th{background:#14a3df;color:#fff}td:first-child{width:22%}</style></head><body><h1>消费者需求调研报告</h1><p>请将步骤三设计的调查问卷导入在线问卷调查平台开展调研，并基于收集到的数据完成本报告。</p><table><thead><tr><th>报告模块标题</th><th>内容</th></tr></thead><tbody>${rows}</tbody></table></body></html>`;
+  const blob = new Blob([html], { type: "application/msword;charset=utf-8" });
+  const url = URL.createObjectURL(blob);
+  const link = document.createElement("a");
+  link.href = url;
+  link.download = "消费者需求调研报告模板.doc";
+  link.click();
+  URL.revokeObjectURL(url);
+}
 </script>
 
 <style scoped lang="scss">
@@ -1711,6 +1692,106 @@ function exportOutcome() {
   color: #b9d3e0;
 }
 
+.survey-report-desc {
+  max-width: 1050px;
+  margin-bottom: 24px;
+}
+
+.survey-report-table-wrap {
+  overflow-x: auto;
+  border: 1px solid rgba(65, 169, 214, 0.52);
+  border-radius: 16px;
+  background: rgba(2, 23, 36, 0.56);
+}
+
+.survey-report-table {
+  width: 100%;
+  min-width: 760px;
+  border-collapse: collapse;
+
+  th,
+  td {
+    border: 1px solid rgba(77, 148, 183, 0.5);
+  }
+
+  th {
+    padding: 14px 18px;
+    color: #e9fbff;
+    background: rgba(9, 111, 157, 0.68);
+    font-size: 15px;
+    letter-spacing: 0.04em;
+  }
+
+  th:first-child,
+  td:first-child {
+    width: 22%;
+  }
+
+  td {
+    padding: 10px;
+    background: rgba(5, 31, 47, 0.42);
+  }
+}
+
+.survey-report-title-input,
+.survey-report-content-input {
+  display: block;
+  width: 100%;
+  border: 0;
+  outline: 0;
+  color: #e7f8ff;
+  background: transparent;
+  font: inherit;
+
+  &::placeholder {
+    color: #668a9b;
+  }
+}
+
+.survey-report-title-input {
+  min-height: 88px;
+  padding: 8px;
+  text-align: center;
+  font-weight: 700;
+}
+
+.survey-report-content-input {
+  min-height: 88px;
+  padding: 8px 12px;
+  resize: vertical;
+  line-height: 1.75;
+}
+
+.survey-report-guide {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 28px;
+  margin-top: 26px;
+  padding: 20px 22px;
+  border: 1px solid rgba(69, 164, 207, 0.27);
+  border-radius: 14px;
+  color: #b8d2de;
+  background: linear-gradient(105deg, rgba(6, 48, 69, 0.75), rgba(5, 24, 38, 0.52));
+
+  h5,
+  p {
+    margin: 0;
+    line-height: 1.85;
+  }
+
+  h5 {
+    color: #ffffff;
+    font-size: 15px;
+  }
+}
+
+.survey-report-template-action {
+  flex: 0 0 auto;
+  min-width: 146px;
+  min-height: 42px;
+}
+
 .questionnaire-desc {
   flex: 1;
   margin: 0;
@@ -2155,6 +2236,14 @@ function exportOutcome() {
     justify-self: end;
   }
 
+  .survey-report-guide {
+    flex-direction: column;
+  }
+
+  .survey-report-template-action {
+    width: 100%;
+  }
+
   .step-indicator {
     align-items: stretch;
     flex-direction: column;