dianshang-qianduan/src/views/demand/consumer-behavior.vue

<template>
  <div class="consumer-behavior-page student-training-shell">
    <main class="training-core">
      <section class="task-header">
        <div class="task-head-main">
          <span class="task-badge">市场洞察与需求分析</span>
          <h1 class="task-title">{{ taskTitle }}</h1>
          <p class="task-brief">
            <span class="task-brief-text">{{ taskBackground }}</span>
            <button type="button" class="task-brief-toggle" @click="briefOpen = !briefOpen">
              {{ briefOpen ? "收起" : "展开目标与要求" }}
            </button>
            <span v-if="briefOpen" class="task-brief-more">
              <b>实训目标</b>
              <ul><li v-for="goal in taskGoals" :key="goal">{{ goal }}</li></ul>
              <b>实训要求</b>
              <p>{{ taskRequirement }}</p>
            </span>
          </p>
        </div>
        <div class="workbench-actions">
          <TrainingMaterialButton
            :material-name="taskConfig?.materialName"
            :material-url="taskConfig?.materialUrl"
            :training-data-name="taskConfig?.trainingDataName"
            :training-data-url="taskConfig?.trainingDataUrl"
            :guide-manual-name="taskConfig?.guideManualName"
            :guide-manual-url="taskConfig?.guideManualUrl"
            :ai-manual-name="taskConfig?.aiManualName"
            :ai-manual-url="taskConfig?.aiManualUrl"
          />
          <button type="button" class="outline-action" @click="exportOutcome">
            <el-icon><Download /></el-icon>
            导出实训成果
          </button>
        </div>
      </section>

      <section class="task-card">

        <nav v-if="flowSteps.length" class="step-indicator" aria-label="消费者需求与行为步骤">
          <button
            v-for="(step, index) in flowSteps"
            :key="step"
            type="button"
            :class="['step-tab', { active: form.activeStep === index, complete: form.activeStep > index }]"
            :aria-label="`第 ${index + 1} 步：${step}`"
            :aria-current="form.activeStep === index ? 'step' : undefined"
            :title="step"
            @click="setActiveStep(index)"
          >
            <span class="step-bar" aria-hidden="true"></span>
            <span class="step-no" aria-hidden="true">{{ String(index + 1).padStart(2, '0') }}</span>
            <span class="step-name">{{ step }}</span>
          </button>
        </nav>

        <input
          ref="fileInputRef"
          type="file"
          class="file-input"
          :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">
          <div>
            <p class="section-eyebrow">Step {{ String(form.activeStep + 1).padStart(2, '0') }}</p>
            <h3>{{ activeStepName }}</h3>
          </div>
        </div>
        <section v-if="form.activeStep === 0" class="step-panel">
          <div class="hypothesis-head">
            <p class="task-desc hypothesis-desc">
              基于实训 8 的用户画像结论，明确本次问卷调查的目标人群与核心假设，填写下表。
            </p>
            <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="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><el-input v-model="hypothesis.targetGroup" class="hypothesis-input" placeholder="例如：职场白领（25-35岁）" /></td>
                  <td><el-input v-model="hypothesis.keyFinding" type="textarea" :autosize="{ minRows: 2 }" class="hypothesis-textarea" placeholder="例如：高压工作、入睡困难、看重效率" /></td>
                  <td><el-input v-model="hypothesis.coreHypothesis" type="textarea" :autosize="{ minRows: 2 }" 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">
          <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><el-input v-model="need.feature" type="textarea" :autosize="{ minRows: 2 }" 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><el-input v-model="need.featureDirection" type="textarea" :autosize="{ minRows: 2 }" 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">
          <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="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>

          <p class="questionnaire-editor-summary">
            已编辑 {{ form.questionnaireQuestions.length }} 题；{{ form.questionnaireImport?.name ? "已导入 1 份 Word 问卷，可随时预览。" : "也可导入已完成的 .docx 问卷。" }}
          </p>

          <div class="questionnaire-template-guide">
            <div>
              <h5>推荐工具及方法如下，自行选择：</h5>
              <p>1. 使用本系统问卷编辑器，自行编辑问卷。</p>
              <p>2. 下载参考问卷 Word 模板，在本地修改后上传导入。</p>
              <p>3. 也可使用 AI 辅助生成，问卷应包含基本信息、购买行为、需求偏好与开放建议。</p>
            </div>
            <el-button class="questionnaire-template-action" @click="downloadQuestionnaireTemplate">
              <el-icon><Download /></el-icon>
              下载模板
            </el-button>
          </div>

          <el-dialog v-model="questionnaireEditorVisible" title="消费者需求调研问卷编辑器" width="min(1120px, 94vw)" class="questionnaire-editor-dialog" append-to-body>
            <div class="questionnaire-editor-dialog__intro">
              <p>请覆盖基本信息、购买行为、需求偏好和开放建议四部分；需求偏好至少设置一题 Likert 五级量表。</p>
              <el-button class="questionnaire-editor-add" @click="addQuestionnaireQuestion">新增题目</el-button>
            </div>
            <div 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">
          <p class="task-desc survey-report-desc">
            将步骤三设计的调查问卷导入问卷星等在线问卷调查平台，开展问卷调查。基于收集到的数据，填写问卷调查报告。
          </p>
          <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>
                    <el-input v-model="row.title" class="survey-report-title-input" :placeholder="surveyReportTitlePlaceholder(index)" :aria-label="`第${index + 1}个报告模块标题`" />
                  </td>
                  <td>
                    <el-input v-model="row.content" type="textarea" :autosize="{ minRows: 3 }" 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">
          <el-button class="nav-action nav-action--previous" :disabled="form.activeStep === 0" @click="goPrev">
            <el-icon><ArrowLeft /></el-icon>
            上一步
          </el-button>
          <el-button class="nav-action nav-action--save" :loading="saving" @click="saveCurrentProgress">
            <el-icon><CircleCheck /></el-icon>
            保存当前进度
          </el-button>
          <el-button class="nav-action nav-action--next" :disabled="form.activeStep === flowSteps.length - 1" @click="goNext">
            下一步
            <el-icon><ArrowRight /></el-icon>
          </el-button>
        </div>

        <div class="training-actions">
          <el-button class="training-action training-action--submit" :loading="saving" @click="submitTask">
            提交任务
          </el-button>
          <el-button class="training-action training-action--reset" @click="resetTraining">
            重新实训
          </el-button>
        </div>
        </section>
      </section>
    </main>

    <TrainingAiSidebar
      study-tip="当前步骤建议：先确认问卷能覆盖用户基本信息、购买行为、决策因素和未购买顾虑，再用数据分析支撑结论。"
      reference-title="消费者行为分析参考"
      reference-text="· 需求类型：功能需求、价格需求、服务需求、隐私安全需求<br />· 决策因素：价格、品牌、功能、质量、便捷性、售后<br />· 分析方法：分群对比、渠道分析、购买场景分析、未购买原因归因"
      assist-text="报告中尽量把数据结论写成“现象 + 人群差异 + 产品启示”的结构，避免只罗列比例。"
      :progress-items="progressItems"
    />
  </div>
</template>

<script setup>
import { computed, getCurrentInstance, nextTick, onMounted, ref } from "vue";
import { useRouter } from "vue-router";
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 { getTrainingTaskByKey } from "@/api/trainingTask";
import { parseTrainingArray } from "@/views/training/taskKeyMap";
import { checkConsumerBehaviorStepOne, checkConsumerBehaviorStepTwo, checkConsumerBehaviorStepThree, checkConsumerBehaviorStepFour, getStudentTrainingAnswer, previewConsumerBehaviorQuestionnaireWord, saveStudentTrainingAnswer, uploadStudentTrainingFile } from "@/api/studentTrainingAnswer";

const TASK_KEY = "consumer-behavior";
const QUESTIONNAIRE_TEMPLATE_URL = "/file/training-materials/consumer-behavior/9.问卷调查报告模板.docx";
const KANO_NEED_LIMIT = 20;
let questionnaireQuestionSequence = 0;
const { proxy } = getCurrentInstance();
const router = useRouter();

const defaultRequirement = "消费者需求与行为分析用于识别目标用户的购买动机、决策因素、渠道偏好和使用场景，为智能产品功能设计与市场切入提供依据。";
const defaultBackground =
  "SX是一家专注于智能健康生活产品的科技公司。公司产品开发团队经过市场分析，发现光线及噪音对睡眠具有较大影响，市场上针对助眠产品主要集中在保健品及药物，较少产品是通过优化睡眠环境来达成助眠效果，因此，初步判断开发一款智能声光伴眠吸顶灯具有市场机会。\n产品开发前，团队进行了目标用户画像，进行了初步的用户分析，现在需要通过问卷调查，收集足够多的数据，分析用户购买智能产品的决策因素，为后续的产品关键功能开发提供市场需求数据支撑与决策依据。";
const defaultGoals = [
  "掌握消费者需求类型划分及特征。",
  "熟悉消费者行为理论与决策机制。",
  "挖掘影响消费者需求及行为的关键因素。",
];

const questionnaireTemplate = `<h4>智能产品购买决策因素调查问卷</h4>
<p><strong>（一）基本信息</strong></p>
<p>1.您的性别： A. 男 B. 女</p>
<p>2.您的年龄： A. 18岁及以下 B. 19-25岁 C. 26-35岁 D. 36-45岁 E. 46岁及以上</p>
<p>3.您的月收入： A. 3000元及以下 B. 3001-5000元 C. 5001-8000元 D. 8001-12000元 E. 12001元及以上</p>
<p>4.您居住的城市级别： A. 一线城市 B. 新一线城市 C. 二线城市 D. 三线及以下城市</p>
<p><strong>（二）购买行为与决策因素</strong></p>
<p>5.您是否购买过智能产品？ A. 是 B. 否（若选B，跳转至第12题）</p>
<p>6.您购买过的智能产品类型可多选： A. 智能手机 B. 智能家电（如扫地机器人、智能冰箱等） C. 智能穿戴设备（如智能手表、手环等） D. 智能玩具 E. 智能健身设备（如智能健身镜） F. 其他（请注明____）</p>
<p>7.在购买智能产品时，您优先考虑的因素可多选： A. 价格 B. 品牌知名度 C. 功能实用性 D. 产品质量与稳定性 E. 操作便捷性 F. 数据安全与隐私保护 G. 外观设计 H. 售后服务 I. 生态兼容性（如能否与其他智能设备联动） J. 其他（请注明____）</p>
<p>8.请您根据实际感受，评价以下因素对您购买智能产品的重要程度，请在对应选项中打“√”</p>
<table>
  <thead>
    <tr>
      <th>因素</th>
      <th>非常不重要</th>
      <th>不重要</th>
      <th>一般</th>
      <th>重要</th>
      <th>非常重要</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>价格</td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td>品牌知名度</td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td>功能实用性</td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td>产品质量与稳定性</td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td>操作便捷性</td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td>数据安全与隐私保护</td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td>外观设计</td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td>售后服务</td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td>生态兼容性</td><td></td><td></td><td></td><td></td><td></td></tr>
  </tbody>
</table>
<p>9.您是否会因为智能产品具备独特创新功能而愿意支付更高价格？ A. 一定会 B. 可能会 C. 不确定 D. 可能不会 E. 一定不会</p>
<p>10.您获取智能产品信息的主要渠道可多选： A. 电商平台（如淘宝、京东等） B. 社交媒体（如抖音、小红书等） C. 朋友、家人推荐 D. 线下实体店体验 E. 科技媒体评测 F. 其他（请注明____）</p>
<p>11.您购买智能产品的主要场景是： A. 自己使用 B. 赠送家人 C. 赠送朋友 D. 商务礼品 E. 其他（请注明____）</p>
<p><strong>（三）未购买情况与顾虑</strong></p>
<p>12.您未购买智能产品的主要原因可多选： A. 价格过高 B. 对智能产品功能不了解 C. 担心产品质量与稳定性 D. 担心数据安全与隐私泄露 E. 觉得操作复杂，难以上手 F. 没有合适的产品满足需求 G. 其他（请注明____）</p>
<p>13.如果您计划购买智能产品，您最期待的功能是： A. 更强大的智能化功能 B. 更便捷的操作方式 C. 更好的数据安全与隐私保护 D. 更丰富的生态兼容性 E. 其他（请注明____）</p>
<p><strong>（四）开放性问题</strong></p>
<p>14.对于智能产品的发展，您有哪些建议或期望？</p>`;

const surveyStats = `（一）基本信息
1.性别：男235人（47%），女265人（53%）
2.年龄：18岁及以下30人（6%），19-25岁120人（24%），26-35岁180人（36%），36-45岁100人（20%），46岁及以上70人（14%）
3.月收入：3000元及以下80人（16%），3001-5000元120人（24%），5001-8000元150人（30%），8001-12000元100人（20%），12001元及以上50人（10%）
4.城市级别：一线城市100人（20%），新一线城市150人（30%），二线城市120人（24%），三线及以下城市130人（26%）

（二）购买行为与决策因素
5.是否购买过智能产品：是420人（84%），否80人（16%）
6.购买过的智能产品类型：智能手机380人（76%），智能家电220人（44%），智能穿戴设备180人（36%），智能玩具60人（12%），智能健身设备40人（8%），其他20人（4%）
7.优先考虑的因素：价格250人（50%），品牌知名度180人（36%），功能实用性320人（64%），产品质量与稳定性280人（56%），操作便捷性220人（44%），数据安全与隐私保护150人（30%），外观设计120人（24%），售后服务100人（20%），生态兼容性80人（16%），其他30人（6%）
8.各因素影响程度统计：价格65%，品牌知名度50%，功能实用性80%，产品质量与稳定性75%，操作便捷性60%，数据安全与隐私保护45%，外观设计35%，售后服务40%，生态兼容性30%
9.是否为创新功能支付更高价格：一定会80人（16%），可能会220人（44%），不确定100人（20%），可能不会70人（14%），一定不会30人（6%）
10.获取信息渠道：电商平台300人（60%），社交媒体250人（50%），朋友、家人推荐200人（40%），线下实体店体验150人（30%），科技媒体评测120人（24%），其他30人（6%）
11.购买场景：自己使用350人（70%），赠送家人80人（16%），赠送朋友40人（8%），商务礼品20人（4%），其他10人（2%）

（三）未购买情况与顾虑
12.未购买原因：价格过高35人（43.75%），对功能不了解20人（25%），担心质量与稳定性15人（18.75%），担心数据安全与隐私泄露8人（10%），觉得操作复杂5人（6.25%），没有合适产品3人（3.75%），其他2人（2.5%）
13.期待的功能：更强大智能化功能25人（31.25%），更便捷操作方式20人（25%），更好数据安全与隐私保护15人（18.75%），更丰富生态兼容性12人（15%），其他8人（10%）

（四）开放性问题
部分用户建议：希望智能产品价格更加亲民；简化操作流程，适合各年龄段人群；加强数据安全保护；丰富产品功能，满足多样化需求；提升售后服务质量等。`;

const visualGroups = [
  {
    title: "1.基本信息",
    items: [
      { key: "gender", label: "性别" },
      { key: "age", label: "年龄" },
      { key: "income", label: "月收入" },
      { key: "city", label: "城市级别" },
    ],
  },
  {
    title: "2.购买行为与决策因素",
    items: [
      { key: "hasPurchased", label: "是否购买过智能产品" },
      { key: "productTypes", label: "购买过的智能产品类型" },
      { key: "priorityFactors", label: "优先考虑的因素" },
      { key: "factorImportance", label: "各因素影响程度统计" },
      { key: "innovationPremium", label: "是否为创新功能支付更高价格" },
      { key: "infoChannels", label: "获取信息渠道" },
      { key: "purchaseScenario", label: "购买场景" },
    ],
  },
  {
    title: "3.未购买情况与顾虑",
    items: [
      { key: "nonPurchaseReasons", label: "未购买原因" },
      { key: "expectedFunctions", label: "期待的功能" },
    ],
  },
];

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";
  if (uploadContext.value.type === "dataExcel") return ".xls,.xlsx";
  if (uploadContext.value.type === "chart") return ".png,.jpg,.jpeg,.webp";
  return ".png,.jpg,.jpeg,.webp,.pdf,.doc,.docx";
});

function createForm() {
  return {
    activeStep: 0,
    targetHypotheses: createTargetHypotheses(),
    kanoNeeds: createKanoNeeds(),
    questionnaireQuestions: createQuestionnaireQuestions(),
    questionnaireImport: null,
    surveyReportRows: createSurveyReportRows(),
    questionnaireText: questionnaireTemplate,
    questionnaireFileName: "",
    questionnaireFileUrl: "",
    dataExcelFileName: "",
    dataExcelFileUrl: "",
    chartFiles: {},
  };
}

function createTargetHypotheses() {
  return [
    { targetGroup: "职场白领（25-35岁）", keyFinding: "", coreHypothesis: "" },
    { targetGroup: "精致妈妈（28-38岁）", keyFinding: "", coreHypothesis: "" },
    { targetGroup: "银发人群（50-65岁）", keyFinding: "", coreHypothesis: "" },
  ];
}

function createEmptyTargetHypothesis() {
  return { targetGroup: "", keyFinding: "", coreHypothesis: "" };
}

const kanoTypeOptions = ["基本型", "期望型", "兴奋型", "无差异型", "反向型"];
const questionnaireSections = [
  { value: "基本信息", label: "基本信息" },
  { value: "购买行为", label: "购买行为" },
  { value: "需求偏好", label: "需求偏好" },
  { value: "开放建议", label: "开放建议" },
];
const questionnaireQuestionTypes = [
  { value: "SINGLE", label: "单选题" },
  { value: "MULTIPLE", label: "多选题" },
  { value: "LIKERT", label: "Likert 五级量表" },
  { value: "TEXT", label: "开放题" },
];

function createKanoNeeds() {
  return Array.from({ length: 3 }, createEmptyKanoNeed);
}

function createEmptyKanoNeed() {
  return { feature: "", kanoType: "", featureDirection: "" };
}

function createQuestionnaireQuestions() {
  return [
    createQuestionnaireQuestion("基本信息", "SINGLE"),
    createQuestionnaireQuestion("购买行为", "SINGLE"),
    createQuestionnaireQuestion("需求偏好", "LIKERT"),
    createQuestionnaireQuestion("开放建议", "TEXT"),
  ];
}

function createQuestionnaireQuestion(section = "基本信息", type = "SINGLE") {
  questionnaireQuestionSequence += 1;
  return { id: `question-${Date.now()}-${questionnaireQuestionSequence}`, section, type, title: "", options: "" };
}

function createSurveyReportRows() {
  return Array.from({ length: 5 }, () => ({ title: "", content: "" }));
}

const briefOpen = ref(false);
const form = ref(createForm());

const taskTitle = computed(() => taskConfig.value?.taskName || "消费者需求与行为");
const taskBackground = computed(() => taskConfig.value?.background || defaultBackground);
const taskGoals = computed(() => parseArray(taskConfig.value?.objectives, defaultGoals));
const taskRequirement = computed(() => taskConfig.value?.requirements || defaultRequirement);
const flowSteps = computed(() => parseTrainingArray(taskConfig.value?.steps, []).slice(0, 4));
const activeStepName = computed(() => flowSteps.value[form.value.activeStep] || "");

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: hasSurveyReport() ? "已完成：问卷调研报告" : "待完成：问卷调研报告", status: hasSurveyReport() ? "done" : "" },
]);

onMounted(async () => {
  await loadTaskConfig();
  await loadSavedAnswer();
  await nextTick();
  renderQuestionnaireEditor();
});

async function loadTaskConfig() {
  try {
    const res = await getTrainingTaskByKey(TASK_KEY);
    taskConfig.value = res?.data || null;
  } catch (error) {
    taskConfig.value = null;
  }
}

async function loadSavedAnswer() {
  try {
    const res = await getStudentTrainingAnswer(TASK_KEY);
    const answer = res?.data;
    if (answer?.step1Answer) {
      applySavedAnswer(answer.step1Answer);
    }
  } catch (error) {
    // 回显失败不阻断页面填写。
  }
}

function parseArray(value, fallback) {
  if (Array.isArray(value)) return value.length ? value : fallback;
  if (!value) return fallback;
  try {
    const parsed = JSON.parse(value);
    return Array.isArray(parsed) && parsed.length ? parsed : fallback;
  } catch (error) {
    const list = String(value)
      .split(/[;；|,，\n]/)
      .map((item) => item.trim())
      .filter(Boolean);
    return list.length ? list : fallback;
  }
}

function applySavedAnswer(value) {
  try {
    const parsed = JSON.parse(value);
    if (!parsed || typeof parsed !== "object") return;
    form.value = {
      ...createForm(),
      ...parsed,
      activeStep: Number.isInteger(parsed.activeStep) ? parsed.activeStep : 0,
      questionnaireText: normalizeQuestionnaireContent(parsed.questionnaireText || questionnaireTemplate),
      targetHypotheses: normalizeTargetHypotheses(parsed.targetHypotheses),
      kanoNeeds: normalizeKanoNeeds(parsed.kanoNeeds),
      questionnaireQuestions: normalizeQuestionnaireQuestions(parsed.questionnaireQuestions),
      questionnaireImport: normalizeQuestionnaireImport(parsed.questionnaireImport),
      surveyReportRows: normalizeSurveyReportRows(parsed.surveyReportRows),
      chartFiles: parsed.chartFiles || {},
    };
    nextTick(renderQuestionnaireEditor);
  } catch (error) {
    // 忽略历史异常数据。
  }
}

function normalizeTargetHypotheses(rows) {
  if (!Array.isArray(rows) || !rows.length) return createTargetHypotheses();
  return rows.map((row) => ({
    targetGroup: String(row?.targetGroup || ""),
    keyFinding: String(row?.keyFinding || ""),
    coreHypothesis: String(row?.coreHypothesis || ""),
  }));
}

function normalizeKanoNeeds(rows) {
  if (!Array.isArray(rows) || !rows.length) return createKanoNeeds();
  return rows.slice(0, KANO_NEED_LIMIT).map((row) => ({
    feature: String(row?.feature || ""),
    kanoType: kanoTypeOptions.includes(row?.kanoType) ? row.kanoType : "",
    featureDirection: String(row?.featureDirection || ""),
  }));
}

function normalizeQuestionnaireQuestions(rows) {
  if (!Array.isArray(rows) || !rows.length) return createQuestionnaireQuestions();
  return rows.map((row, index) => ({
    id: String(row?.id || `question-restored-${index}`),
    section: questionnaireSections.some((item) => item.value === row?.section) ? row.section : "基本信息",
    type: questionnaireQuestionTypes.some((item) => item.value === row?.type) ? row.type : "SINGLE",
    title: String(row?.title || ""),
    options: String(row?.options || ""),
  }));
}

function normalizeQuestionnaireImport(value) {
  if (!value || typeof value !== "object" || !value.name) return null;
  return {
    name: String(value.name),
    url: String(value.url || ""),
    previewContent: String(value.previewContent || ""),
  };
}

function normalizeSurveyReportRows(rows) {
  if (!Array.isArray(rows) || !rows.length) return createSurveyReportRows();
  return Array.from({ length: 5 }, (_, index) => ({
    title: String(rows[index]?.title || ""),
    content: String(rows[index]?.content || ""),
  }));
}

function syncQuestionnaireText() {
  if (!questionnaireEditorRef.value) return;
  form.value.questionnaireText = questionnaireEditorRef.value.innerHTML;
}

function renderQuestionnaireEditor() {
  if (!questionnaireEditorRef.value) return;
  if (questionnaireEditorRef.value.innerHTML !== form.value.questionnaireText) {
    questionnaireEditorRef.value.innerHTML = form.value.questionnaireText;
  }
}

function normalizeQuestionnaireContent(value) {
  const content = String(value || "").trim();
  if (!content) return questionnaireTemplate;
  return /<\/?[a-z][\s\S]*>/i.test(content) ? content : textToHtml(content);
}

function textToHtml(value) {
  return String(value)
    .split(/\n{2,}/)
    .map((block) => `<p>${escapeHtml(block).replace(/\n/g, "<br>")}</p>`)
    .join("");
}

function escapeHtml(value) {
  return String(value)
    .replace(/&/g, "&amp;")
    .replace(/</g, "&lt;")
    .replace(/>/g, "&gt;")
    .replace(/"/g, "&quot;")
    .replace(/'/g, "&#39;");
}

function questionnaireTextForExport() {
  syncQuestionnaireText();
  const wrapper = document.createElement("div");
  wrapper.innerHTML = form.value.questionnaireText || "";
  return wrapper.innerText.trim();
}

function triggerFileSelect(type, key = "") {
  uploadContext.value = { type, key };
  fileInputRef.value?.click();
}

function setActiveStep(index) {
  form.value.activeStep = index;
  if (index === 0) {
    nextTick(renderQuestionnaireEditor);
  }
}

function addTargetHypothesis() {
  form.value.targetHypotheses.push(createEmptyTargetHypothesis());
}

function removeTargetHypothesis() {
  if (form.value.targetHypotheses.length <= 1) return;
  form.value.targetHypotheses.pop();
}

function addKanoNeed() {
  if (form.value.kanoNeeds.length >= KANO_NEED_LIMIT) {
    proxy?.$modal?.msgWarning(`最多可填写 ${KANO_NEED_LIMIT} 行`);
    return;
  }
  form.value.kanoNeeds.push(createEmptyKanoNeed());
}

function removeKanoNeed() {
  if (form.value.kanoNeeds.length <= 1) return;
  form.value.kanoNeeds.pop();
}

function questionPlaceholder(section) {
  const placeholders = {
    基本信息: "例如：您的年龄处于以下哪个区间？",
    购买行为: "例如：您通常通过什么渠道购买智能助眠产品？",
    需求偏好: "例如：白噪声可定时关闭对您有多重要？",
    开放建议: "例如：您希望智能助眠产品增加哪些功能？",
  };
  return placeholders[section] || "请输入题目内容";
}

function addQuestionnaireQuestion() {
  form.value.questionnaireQuestions.push(createQuestionnaireQuestion());
}

function removeQuestionnaireQuestion(index) {
  if (form.value.questionnaireQuestions.length <= 4) return;
  form.value.questionnaireQuestions.splice(index, 1);
}

function triggerQuestionnaireImport() {
  questionnaireImportInputRef.value?.click();
}

function viewTargetUserProfile() {
  router.push({ path: "/demand/people" });
}

async function handleFileChange(event) {
  const file = event.target.files?.[0];
  if (!file) return;
  const data = new FormData();
  data.append("file", file);
  uploading.value = true;
  try {
    const res = await uploadStudentTrainingFile(data);
    const url = res?.url || res?.fileName || res?.data?.url || res?.data?.fileName || "";
    const { type, key } = uploadContext.value;
    if (type === "questionnaire") {
      form.value.questionnaireFileName = file.name;
      form.value.questionnaireFileUrl = url;
    } else if (type === "dataExcel") {
      form.value.dataExcelFileName = file.name;
      form.value.dataExcelFileUrl = url;
    } else if (type === "chart" && key) {
      form.value.chartFiles = {
        ...form.value.chartFiles,
        [key]: { name: file.name, url },
      };
    }
    proxy?.$modal?.msgSuccess("上传成功");
  } finally {
    uploading.value = false;
    event.target.value = "";
  }
}

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 <= 2) await persist("IN_PROGRESS");
  if (form.value.activeStep < flowSteps.value.length - 1) setActiveStep(form.value.activeStep + 1);
}

function hasSurveyReport() {
  return form.value.surveyReportRows.every((item) => String(item?.title || "").trim() && String(item?.content || "").trim());
}

function hasQuestionnaireDesign() {
  return Boolean(form.value.questionnaireImport?.name)
    || form.value.questionnaireQuestions.some((item) => String(item?.title || "").trim());
}

function buildAnswerPayload(status) {
  syncQuestionnaireText();
  const saveAction = status === "SUBMITTED" ? "SUBMIT" : status === "RESET" ? "RESET" : "SAVE";
  return {
    saveAction,
    currentStep: form.value.activeStep + 1,
    step1Answer: JSON.stringify({
      ...form.value,
      taskKey: TASK_KEY,
      taskId: taskConfig.value?.id || "",
      taskName: taskTitle.value,
      flowSteps: flowSteps.value,
      updatedAt: new Date().toISOString(),
    }),
  };
}

async function persist(status = "IN_PROGRESS") {
  saving.value = true;
  try {
    if (status !== "RESET" && (form.value.activeStep === 0 || status === "SUBMITTED")) {
      await checkConsumerBehaviorStepOne({ hypotheses: form.value.targetHypotheses });
    }
    if (status !== "RESET" && (form.value.activeStep === 1 || status === "SUBMITTED")) {
      await checkConsumerBehaviorStepTwo({ needs: form.value.kanoNeeds });
    }
    if (status !== "RESET" && (form.value.activeStep === 2 || status === "SUBMITTED")) {
      await checkConsumerBehaviorStepThree({
        questions: form.value.questionnaireQuestions,
        importedDocumentUrl: form.value.questionnaireImport?.url || "",
      });
    }
    if (status !== "RESET" && (form.value.activeStep === 3 || status === "SUBMITTED")) {
      await checkConsumerBehaviorStepFour({ rows: form.value.surveyReportRows });
    }
    await saveStudentTrainingAnswer(TASK_KEY, buildAnswerPayload(status));
    proxy?.$modal?.msgSuccess(status === "SUBMITTED" ? "提交成功" : "保存成功");
  } finally {
    saving.value = false;
  }
}

function saveCurrentProgress() {
  return persist("IN_PROGRESS");
}

function submitTask() {
  return persist("SUBMITTED");
}

async function resetTraining() {
  form.value = createForm();
  await nextTick();
  renderQuestionnaireEditor();
  await persist("RESET");
}

function exportOutcome() {
  syncQuestionnaireText();
  const lines = [
    `任务：${taskTitle.value}`,
    "",
    `当前步骤：${flowSteps.value[form.value.activeStep] || ""}`,
    "",
    "问卷调查目标人群与核心假设：",
    ...form.value.targetHypotheses.map((item, index) => `${index + 1}. 目标人群：${item.targetGroup || ""}\n实训8关键发现：${item.keyFinding || ""}\n核心假设：${item.coreHypothesis || ""}`),
    "",
    "KANO 用户需求分类：",
    ...form.value.kanoNeeds.map((item, index) => `${index + 1}. 功能：${item.feature || ""}\nKANO类型：${item.kanoType || ""}\n功能方向：${item.featureDirection || ""}`),
    "",
    "消费者需求调研问卷：",
    form.value.questionnaireImport?.name ? `导入问卷：${form.value.questionnaireImport.name}` : "",
    ...form.value.questionnaireQuestions.map((item, index) => `${index + 1}. [${item.section}] ${item.title || ""}（${questionnaireQuestionTypes.find((type) => type.value === item.type)?.label || ""}）`),
    "",
    "问卷设计：",
    questionnaireTextForExport(),
    "",
    "问卷PDF文件：",
    form.value.questionnaireFileName || "未上传",
    "",
    "数据收集文件：",
    form.value.dataExcelFileName || "未上传",
    "",
    "问卷调研报告：",
    ...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);
  const link = document.createElement("a");
  link.href = url;
  link.download = `${taskTitle.value}-实训结果.txt`;
  link.click();
  URL.revokeObjectURL(url);
}

function surveyReportTitlePlaceholder(index) {
  return ["例如：调研背景与目的", "例如：样本与调研方法", "例如：用户购买决策因素", "例如：不同群体需求差异", "例如：产品建议与结论"][index] || "请输入报告模块标题";
}

function surveyReportContentPlaceholder(index) {
  return ["说明本次问卷调研的背景、目标用户与调研目的。", "说明样本数量、调研时间、调研渠道与数据来源。", "结合问卷数据，分析影响用户购买决策的核心因素。", "比较不同人群在需求、价格、渠道或购买场景上的差异。", "总结调研结论，并提出产品功能、定价或营销建议。"][index] || "请输入报告内容";
}

function downloadBuiltInFile(url, fileName) {
  const link = document.createElement("a");
  link.href = url;
  link.download = fileName;
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
}

function downloadQuestionnaireTemplate() {
  downloadBuiltInFile(QUESTIONNAIRE_TEMPLATE_URL, "9.问卷调查报告模板.docx");
}

function downloadSurveyReportTemplate() {
  downloadBuiltInFile(QUESTIONNAIRE_TEMPLATE_URL, "9.问卷调查报告模板.docx");
}
</script>

<style scoped lang="scss">
/*
 * 页面级令牌（墨黑极简主题）：纯白画布 + 墨黑主操作 + 中性灰层次。
 */
.consumer-behavior-page {
  /* 主色：墨黑 */
  --student-accent: #1f2937;
  --student-accent-deep: #111827;
  --student-accent-light: #4b5563;
  --student-accent-soft: #f3f4f6;
  /* 语义色 */
  --student-danger: #d9554c;
  --student-success: #4a9d6e;
  /* 结构色：中性灰白系 */
  --student-panel-border: #e5e7eb;
  --student-card-bg: #ffffff;
  --student-panel-bg: #fafbfc;
  --student-text: #1f2937;
  --student-text-secondary: #6b7280;
  /* 紧凑字号梯度 */
  --student-fs-display: 17px;
  --student-fs-h1: 15px;
  --student-fs-h2: 14px;
  --student-fs-h3: 13px;
  --student-fs-body: 13px;
  --student-fs-body-sm: 12px;
  --student-fs-caption: 11px;
  --student-fs-button: 13px;
  --student-fs-button-lg: 13px;
  --student-fs-data: 14px;

  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(720px, 1fr) 340px;
  gap: 24px;
  width: 100%;
  max-width: 100%;
  min-height: calc(100vh - 106px);
  margin: 0;
  padding: 24px 24px 32px;
  color: var(--student-text);
  background: #ffffff;
  line-height: 1.55;
}

.training-core {
  min-width: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.task-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 16px;
  border: 1px solid #e7e9ed;
  border-radius: 16px;
  background: #ffffff;
}

.task-head-main {
  display: grid;
  justify-items: start;
  gap: 8px;
  min-width: 0;
}

.task-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border: 1px solid var(--student-panel-border);
  border-radius: 999px;
  color: var(--student-accent-deep);
  background: var(--student-accent-soft);
  font-size: 12px;
  font-weight: 700;
}

.task-title {
  margin: 0;
  color: var(--student-text);
  font-size: var(--student-fs-display);
  line-height: 1.35;
  font-weight: 700;
}

.task-brief {
  margin: 0;
  color: var(--student-text-secondary);
  font-size: 12px;
  line-height: 1.6;
}

.task-brief-text {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.task-brief-toggle {
  padding: 0;
  border: 0;
  color: var(--student-accent-deep);
  background: transparent;
  font: inherit;
  font-weight: 700;
  cursor: pointer;

  &:hover {
    text-decoration: underline;
  }
}

.task-brief-more {
  display: grid;
  gap: 6px;
  margin-top: 8px;

  b {
    color: var(--student-text);
  }

  ul {
    display: grid;
    gap: 4px;
    margin: 0;
    padding-left: 18px;
  }

  p {
    margin: 0;
  }
}

.task-card {
  margin-bottom: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.workbench-actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.section-eyebrow {
  margin: 0;
  color: var(--student-text-secondary);
  font-size: var(--student-fs-caption);
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: 0.12em;
}

.outline-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 18px;
  border: 1px solid rgba(31, 41, 55, 0.4);
  border-radius: 10px;
  color: var(--student-accent);
  background: #ffffff;
  font-family: inherit;
  font-size: var(--student-fs-button);
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;

  &:hover:not(:disabled) {
    transform: translateY(-1px);
    border-color: var(--student-accent);
    background: var(--student-accent-soft);
    box-shadow: 0 3px 10px rgba(31, 41, 55, 0.12);
  }
}

.step-card {
  margin-bottom: 0;
  padding: 12px;
  border: 1px solid var(--student-panel-border);
  border-radius: 16px;
  background: var(--student-card-bg);
}

.step-title-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 10px;

  h3 {
    margin: 2px 0 0;
    color: var(--student-text);
    font-size: var(--student-fs-h2);
    font-weight: 700;
    line-height: 1.35;
  }
}

.task-desc {
  margin: 0 0 14px;
  color: #374151;
  font-size: var(--student-fs-body);
  line-height: 1.6;
}

.hypothesis-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px 18px;
  margin-bottom: 12px;
}

.hypothesis-desc,
.kano-desc,
.questionnaire-design-desc {
  margin: 0;
  color: #374151;
  font-size: var(--student-fs-body);
  font-weight: 600;
  line-height: 1.55;
}

.training-eight-action {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  min-width: 124px;
  height: 36px;
  border: 1px solid rgba(31, 41, 55, 0.4);
  border-radius: 10px;
  color: var(--student-accent);
  background: #ffffff;
  font-size: var(--student-fs-button);
  font-weight: 700;
  cursor: pointer;
}

.hypothesis-actions,
.kano-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.hypothesis-actions {
  grid-column: 1 / -1;
  grid-row: 2;
}

:deep(.hypothesis-action),
:deep(.training-eight-action) {
  min-width: 120px;
  height: 36px;
  padding: 0 14px;
  border: 1px solid rgba(31, 41, 55, 0.4);
  border-radius: 10px;
  color: var(--student-accent);
  background: #ffffff;
  font-size: var(--student-fs-button);
  font-weight: 700;
}

:deep(.hypothesis-action:hover:not(.is-disabled)),
:deep(.training-eight-action:hover:not(.is-disabled)) {
  border-color: var(--student-accent);
  background: var(--student-accent-soft);
  color: var(--student-accent);
}

:deep(.hypothesis-action--quiet) {
  border-color: var(--student-panel-border);
  color: var(--student-text-secondary);
  background: #ffffff;
}

:deep(.hypothesis-action--quiet:hover:not(.is-disabled)) {
  border-color: var(--student-text-secondary);
  background: #f9fafb;
  color: var(--student-text-secondary);
}

.target-hypothesis-table-wrap,
.kano-table-wrap,
.survey-report-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--student-panel-border);
  border-radius: 12px;
  background: #ffffff;
}

.target-hypothesis-table,
.kano-table,
.survey-report-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;

  th,
  td {
    padding: 10px 12px;
    border-right: 1px solid var(--student-panel-border);
    border-bottom: 1px solid var(--student-panel-border);
    vertical-align: top;
    text-align: left;
    background: transparent;
  }

  th:last-child,
  td:last-child { border-right: 0; }
  tr:last-child td { border-bottom: 0; }

  th {
    color: var(--student-text);
    background: #f9fafb;
    font-size: var(--student-fs-body);
    font-weight: 800;
    text-align: left;
  }
}

.target-hypothesis-table {
  min-width: 920px;
  th:nth-child(1) { width: 28%; }
  th:nth-child(2) { width: 28%; }
  th:nth-child(3) { width: 44%; }
}

.kano-table {
  min-width: 900px;
  th:nth-child(1) { width: 9%; }
  th:nth-child(2) { width: 42%; }
  th:nth-child(3) { width: 25%; }
  th:nth-child(4) { width: 24%; }
  th { position: sticky; top: 0; z-index: 1; }
}

.kano-index {
  color: var(--student-accent-light);
  font-weight: 700;
  text-align: center;
}

.survey-report-table {
  min-width: 760px;
  th:first-child,
  td:first-child { width: 22%; }
}

.hypothesis-input,
.hypothesis-textarea {
  width: 100%;
}

.hypothesis-input :deep(.el-input__wrapper) {
  min-height: 36px;
  border: 1px solid #d6dae0;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: none;
}

.hypothesis-input :deep(.el-input__wrapper.is-focus) {
  border-color: var(--student-accent-light);
  box-shadow: 0 0 0 3px rgba(31, 41, 55, 0.12);
}

.hypothesis-input :deep(.el-input__inner),
.hypothesis-textarea :deep(.el-textarea__inner) {
  color: var(--student-text);
  font-size: var(--student-fs-body);
}

.hypothesis-textarea :deep(.el-textarea__inner) {
  min-height: 72px !important;
  border: 1px solid #d6dae0;
  border-radius: 10px;
  padding: 8px 12px;
  background: #ffffff;
  box-sizing: border-box;
  font-family: inherit;
  font-size: var(--student-fs-body);
  line-height: 1.6;
  resize: vertical;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;

  &::placeholder { color: #9ca3af; }
  &:focus {
    border-color: var(--student-accent-light);
    box-shadow: 0 0 0 3px rgba(31, 41, 55, 0.12);
  }
}

.kano-textarea :deep(.el-textarea__inner) {
  min-height: 44px !important;
}

.kano-select {
  width: min(100%, 190px);
}

.kano-select :deep(.el-select__wrapper) {
  min-height: 36px;
  border: 1px solid #d6dae0;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: none;
}

.kano-select :deep(.el-select__placeholder) {
  color: #9ca3af;
}

.kano-select-cell { text-align: center; }

.hypothesis-tip {
  margin: 10px 0 0;
  color: var(--student-text-secondary);
  font-size: var(--student-fs-body-sm);
}

.kano-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px 18px;
  margin-bottom: 12px;
}

.questionnaire-design-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px 18px;
  margin-bottom: 12px;
}

.questionnaire-import-action,
.questionnaire-editor-launcher__action,
.questionnaire-template-action,
.survey-report-template-action {
  min-width: 140px;
  height: 36px;
  padding: 0 14px;
  border: 1px solid rgba(31, 41, 55, 0.4);
  border-radius: 10px;
  color: var(--student-accent);
  background: #ffffff;
  font-size: var(--student-fs-button);
  font-weight: 700;
}

.questionnaire-imported-file {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  min-height: 36px;
  padding: 0 12px;
  margin-bottom: 12px;
  border: 1px solid var(--student-panel-border);
  border-radius: 10px;
  color: #374151;
  background: #fafbfc;

  span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  button {
    flex: 0 0 auto;
    border: 0;
    color: var(--student-accent);
    background: transparent;
    cursor: pointer;
    font-weight: 600;
    font-size: 12px;
    &:hover { text-decoration: underline; }
  }
}

.questionnaire-editor-launcher {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: auto;
  padding: 16px 20px;
  margin-bottom: 10px;
  border: 1px solid var(--student-panel-border);
  border-radius: 12px;
  background: #fafbfc;
}

.questionnaire-editor-launcher__copy {
  display: grid;
  gap: 4px;

  h4 {
    margin: 0;
    color: var(--student-text);
    font-size: var(--student-fs-h1);
    font-weight: 700;
  }

  p {
    margin: 0;
    color: var(--student-text-secondary);
    font-size: var(--student-fs-body-sm);
    line-height: 1.55;
  }
}

.questionnaire-editor-launcher__action { flex: 0 0 auto; }

.questionnaire-editor-summary {
  margin: 0 0 12px;
  color: var(--student-text-secondary);
  font-size: var(--student-fs-body-sm);
}

.questionnaire-template-guide {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-top: 10px;
  padding: 12px 16px;
  border: 1px solid var(--student-panel-border);
  border-radius: 12px;
  color: #374151;
  background: #fafbfc;

  h5,
  p {
    margin: 0 0 4px;
    line-height: 1.6;
  }

  h5 {
    color: var(--student-text);
    font-size: var(--student-fs-body);
    font-weight: 700;
  }
}

:deep(.questionnaire-editor-dialog .el-dialog),
:deep(.questionnaire-preview-dialog .el-dialog) {
  border-radius: 12px;
  color: var(--student-text);
  background: #ffffff;
}

:deep(.questionnaire-editor-dialog .el-dialog__title),
:deep(.questionnaire-preview-dialog .el-dialog__title) {
  color: var(--student-text);
  font-weight: 700;
}

.questionnaire-editor-dialog__intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;

  p {
    margin: 0;
    color: var(--student-text-secondary);
    font-size: var(--student-fs-body-sm);
  }
}

.questionnaire-editor-add {
  border: 1px solid rgba(31, 41, 55, 0.4);
  border-radius: 10px;
  color: var(--student-accent);
  background: #ffffff;
  font-weight: 700;
}

.questionnaire-question-list {
  display: grid;
  gap: 10px;
  max-height: min(58vh, 700px);
  padding-right: 5px;
  overflow: auto;
}

.questionnaire-question-card {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  padding: 12px;
  border: 1px solid var(--student-panel-border);
  border-radius: 12px;
  background: #ffffff;
}

.questionnaire-question-card__number {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  color: var(--student-text-secondary);
  background: var(--student-accent-soft);
  font-size: 12px;
  font-weight: 700;
}

.questionnaire-question-card__fields {
  display: grid;
  grid-template-columns: 160px 160px minmax(0, 1fr);
  gap: 8px;

  :deep(.el-select__wrapper),
  :deep(.el-input__wrapper) {
    min-height: 34px;
    border: 1px solid #d6dae0;
    box-shadow: none;
    background: #ffffff;
    border-radius: 8px;
  }

  :deep(.el-input__inner) { color: var(--student-text); }
}

.likert-tip {
  grid-column: 1 / -1;
  margin: 4px 0 0;
  color: var(--student-text-secondary);
  font-size: var(--student-fs-caption);
}

.questionnaire-question-card__remove {
  padding: 6px 10px;
  border: 1px solid var(--student-panel-border);
  border-radius: 8px;
  color: var(--student-text-secondary);
  background: #ffffff;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  &:hover:not(:disabled) { border-color: var(--student-accent); color: var(--student-accent); }
  &:disabled { cursor: not-allowed; opacity: 0.45; }
}

.questionnaire-word-preview {
  max-height: min(62vh, 760px);
  padding: 16px;
  overflow: auto;
  border: 1px solid var(--student-panel-border);
  border-radius: 10px;
  color: var(--student-text);
  background: #fafbfc;
  white-space: pre-wrap;
  line-height: 1.75;
}

.questionnaire-preview-empty { color: var(--student-text-secondary); }

.survey-report-desc {
  max-width: 1050px;
  margin-bottom: 12px;
}

.survey-report-title-input,
.survey-report-content-input {
  width: 100%;
}

.survey-report-title-input :deep(.el-input__wrapper) {
  min-height: 36px;
  border: 1px solid #d6dae0;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: none;
}

.survey-report-title-input :deep(.el-input__inner) {
  color: var(--student-text);
  font-size: var(--student-fs-body);
  font-weight: 600;
}

.survey-report-content-input :deep(.el-textarea__inner) {
  min-height: 72px !important;
  border: 1px solid #d6dae0;
  border-radius: 10px;
  padding: 8px 12px;
  background: #ffffff;
  box-sizing: border-box;
  font-family: inherit;
  font-size: var(--student-fs-body);
  line-height: 1.6;
  resize: vertical;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;

  &::placeholder { color: #9ca3af; }
  &:focus {
    border-color: var(--student-accent-light);
    box-shadow: 0 0 0 3px rgba(31, 41, 55, 0.12);
  }
}

.survey-report-guide {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-top: 12px;
  padding: 12px 16px;
  border: 1px solid var(--student-panel-border);
  border-radius: 12px;
  color: #374151;
  background: #fafbfc;

  h5,
  p {
    margin: 0;
    line-height: 1.6;
  }

  h5 {
    color: var(--student-text);
    font-size: var(--student-fs-body);
    font-weight: 700;
    margin-bottom: 4px;
  }
}

.file-input { display: none; }

.step-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 22px;
}

.nav-action {
  min-height: 36px;
  padding: 0 18px;
  border-radius: 10px;
  font-size: var(--student-fs-button);
  font-weight: 700;
}

.training-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 14px;
}

@media (max-width: 1200px) {
  .consumer-behavior-page {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .consumer-behavior-page { padding: 14px 14px 18px; }

  .workbench-actions,
  .step-title-row,
  .step-actions,
  .training-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hypothesis-head { grid-template-columns: 1fr; }

  .training-eight-action {
    grid-column: auto;
    grid-row: auto;
    justify-self: stretch;
  }

  .hypothesis-actions,
  .kano-actions { justify-content: stretch; }

  .hypothesis-actions :deep(.hypothesis-action),
  .kano-actions :deep(.hypothesis-action) { flex: 1; }

  .kano-head,
  .questionnaire-design-head,
  .questionnaire-editor-launcher,
  .questionnaire-template-guide {
    align-items: stretch;
    flex-direction: column;
  }

  .questionnaire-question-card { grid-template-columns: 32px minmax(0, 1fr); }
  .questionnaire-question-card__fields { grid-template-columns: 1fr; }
  .questionnaire-question-card__remove { grid-column: 2; justify-self: end; }
  .survey-report-guide { flex-direction: column; }
  .questionnaire-editor-dialog__intro { flex-direction: column; align-items: stretch; }
}

@media (max-width: 760px) {
  .consumer-behavior-page { padding: 10px 10px 14px; }
}
</style>

<style lang="scss">
/* === 步骤导航：按钮切换风（foundation 同款） === */
#app .studentLayout section.app-main:has(.consumer-behavior-page) .step-indicator {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  justify-content: center !important;
  gap: 10px !important;
  width: 100% !important;
  margin: 4px 0 20px !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;

  .step-tab {
    flex: 0 0 auto !important;
    min-width: auto !important;
    max-width: none !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    height: auto !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 8px 14px !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    box-shadow: none !important;
    color: #6b7280 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
    text-align: center !important;
    cursor: pointer;
    transition: background-color 0.16s ease, color 0.16s ease, border-color 0.16s ease !important;

    .step-bar { display: none !important; }

    .step-no {
      position: static !important;
      flex: 0 0 auto !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      min-width: 22px !important;
      height: 22px !important;
      padding: 0 5px !important;
      border-radius: 6px !important;
      background: #f3f4f6 !important;
      color: #6b7280 !important;
      font-family: ui-monospace, "SF Mono", Consolas, monospace !important;
      font-size: 12px !important;
      font-weight: 700 !important;
      line-height: 1 !important;
      letter-spacing: 0 !important;
      transition: background-color 0.16s ease, color 0.16s ease !important;

      &::after { display: none !important; }
    }

    .step-name { color: inherit !important; }

    &:hover:not(.active):not(.complete) {
      border-color: #1f2937 !important;
      background: #f9fafb !important;
      color: #1f2937 !important;

      .step-no { background: #1f2937 !important; color: #ffffff !important; }
    }

    &.complete:not(.active) {
      border-color: #dce9e2 !important;
      color: #374151 !important;

      .step-no { background: rgba(74, 157, 110, 0.12) !important; color: #3f8a5f !important; }

      &:hover {
        border-color: #4a9d6e !important;
        background: #f9fafb !important;

        .step-no { background: #4a9d6e !important; color: #ffffff !important; }
      }
    }

    &.active {
      border-color: #1f2937 !important;
      background: #1f2937 !important;
      color: #ffffff !important;
      font-weight: 700 !important;

      .step-no { background: #ffffff !important; color: #1f2937 !important; }

      &:hover {
        background: #111827 !important;
        border-color: #111827 !important;
      }
    }
  }
}

/* 窄屏：横向滑动 */
@media (max-width: 900px) {
  #app .studentLayout section.app-main:has(.consumer-behavior-page) .step-indicator {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
  }

  #app .studentLayout section.app-main:has(.consumer-behavior-page) .step-indicator .step-tab {
    flex: 0 0 auto !important;
    max-width: none !important;
  }
}

/* === 全页单选墨黑 === */
#app .studentLayout section.app-main:has(.consumer-behavior-page) .el-radio__input.is-checked .el-radio__inner {
  border-color: #1f2937 !important;
  background: #1f2937 !important;
}
#app .studentLayout section.app-main:has(.consumer-behavior-page) .el-radio__input.is-checked .el-radio__inner::after {
  background: #ffffff !important;
}

/* === training-action === */
#app .studentLayout section.app-main:has(.consumer-behavior-page) .training-actions .el-button.training-action,
#app .studentLayout section.app-main:has(.consumer-behavior-page) .training-actions button.training-action {
  min-width: 140px !important;
  min-height: 36px !important;
  height: 36px !important;
  padding: 0 20px !important;
  border: 1px solid rgba(31, 41, 55, 0.4) !important;
  border-radius: 10px !important;
  color: var(--student-accent) !important;
  background: #ffffff !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

#app .studentLayout section.app-main:has(.consumer-behavior-page) .training-actions .el-button.training-action--submit,
#app .studentLayout section.app-main:has(.consumer-behavior-page) .training-actions button.training-action--submit {
  border-color: var(--student-accent) !important;
  color: #ffffff !important;
  background: var(--student-accent) !important;
  box-shadow: 0 3px 10px rgba(31, 41, 55, 0.28) !important;
}

#app .studentLayout section.app-main:has(.consumer-behavior-page) .training-actions .el-button.training-action:hover:not(.is-disabled),
#app .studentLayout section.app-main:has(.consumer-behavior-page) .training-actions button.training-action:hover:not(.is-disabled) {
  transform: translateY(-1px) !important;
  border-color: var(--student-accent) !important;
  background: var(--student-accent-soft) !important;
  color: var(--student-accent) !important;
  box-shadow: 0 3px 10px rgba(31, 41, 55, 0.12) !important;
}

#app .studentLayout section.app-main:has(.consumer-behavior-page) .training-actions .el-button.training-action--submit:hover:not(.is-disabled),
#app .studentLayout section.app-main:has(.consumer-behavior-page) .training-actions button.training-action--submit:hover:not(.is-disabled) {
  border-color: var(--student-accent-deep) !important;
  background: var(--student-accent-deep) !important;
  color: #ffffff !important;
  box-shadow: 0 5px 14px rgba(17, 24, 39, 0.32) !important;
}

/* === nav-action (step-actions) === */
#app .studentLayout section.app-main:has(.consumer-behavior-page) .step-actions .el-button.nav-action {
  min-height: 36px !important;
  padding: 0 18px !important;
  border: 1px solid rgba(31, 41, 55, 0.4) !important;
  border-radius: 10px !important;
  color: var(--student-accent) !important;
  background: #ffffff !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  box-shadow: none !important;
  transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease !important;
}

#app .studentLayout section.app-main:has(.consumer-behavior-page) .step-actions .el-button.nav-action:hover:not(.is-disabled) {
  transform: translateY(-1px) !important;
  border-color: var(--student-accent) !important;
  background: var(--student-accent-soft) !important;
  color: var(--student-accent) !important;
  box-shadow: 0 3px 10px rgba(31, 41, 55, 0.12) !important;
}

#app .studentLayout section.app-main:has(.consumer-behavior-page) .step-actions .el-button.nav-action:disabled,
#app .studentLayout section.app-main:has(.consumer-behavior-page) .step-actions .el-button.nav-action.is-disabled {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
  transform: none !important;
}

#app .studentLayout section.app-main:has(.consumer-behavior-page) .step-actions .el-button.nav-action--next {
  border-color: var(--student-accent) !important;
  color: #ffffff !important;
  background: var(--student-accent) !important;
  box-shadow: 0 3px 10px rgba(31, 41, 55, 0.28) !important;
}

#app .studentLayout section.app-main:has(.consumer-behavior-page) .step-actions .el-button.nav-action--next:hover:not(.is-disabled) {
  border-color: var(--student-accent-deep) !important;
  background: var(--student-accent-deep) !important;
  color: #ffffff !important;
  box-shadow: 0 5px 14px rgba(17, 24, 39, 0.32) !important;
}

#app .studentLayout section.app-main:has(.consumer-behavior-page) .step-actions .el-button.nav-action--save {
  border-color: #e5e7eb !important;
  color: #374151 !important;
  background: #f3f4f6 !important;
  font-weight: 700 !important;
}

#app .studentLayout section.app-main:has(.consumer-behavior-page) .step-actions .el-button.nav-action--save:hover:not(.is-disabled) {
  border-color: #d1d5db !important;
  background: #e5e7eb !important;
  color: var(--student-accent) !important;
  box-shadow: none !important;
}
</style>