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

<template>
  <div class="consumer-scenario-page student-training-shell">
    <main class="training-core">
      <section class="task-header">
        <div class="task-badge">市场洞察与需求分析</div>
        <h1 class="task-title">{{ taskTitle }}</h1>
      </section>

      <TrainingTaskBrief
        :background="taskBackground"
        :goals="taskGoals"
        :requirements="taskRequirement"
        :show-material="false"
      />

      <section class="task-card">
      <div class="workbench-head workbench-head--actions-only">
          <div class="workbench-actions">
            <TrainingMaterialButton :material-name="taskConfig?.materialName" :material-url="taskConfig?.materialUrl" />
            <button type="button" class="outline-action" @click="exportOutcome">
              <el-icon><Download /></el-icon>
              导出实训成果
            </button>
          </div>
        </div>

        <nav v-if="trainingSteps.length" class="step-indicator" aria-label="消费场景解构步骤">
          <template v-for="(step, index) in trainingSteps" :key="`${index}-${step}`">
            <button
              type="button"
              :class="['step-tab', { active: form.activeStep === index + 1, complete: form.activeStep > index + 1 }]"
              :aria-current="form.activeStep === index + 1 ? 'step' : undefined"
              :aria-label="`第${index + 1}步：${step}`"
              @click="setCurrentStep(index + 1)"
            >
              <span class="step-marker">{{ String(index + 1).padStart(2, '0') }}</span>
              <span class="step-copy">
                <strong class="step-name" :title="step">{{ step }}</strong>
                <span class="step-action">{{ form.activeStep === index + 1 ? "当前步骤" : "点击切换" }} <span aria-hidden="true">→</span></span>
              </span>
            </button>
            <span v-if="index < trainingSteps.length - 1" class="step-connector" aria-hidden="true"></span>
          </template>
        </nav>

        <section class="step-card consumer-scenario-step-card">
        <div v-if="activeStepName" class="step-title-row">
          <div>
            <p class="section-eyebrow">Step {{ String(form.activeStep).padStart(2, "0") }}</p>
            <h3>{{ activeStepName }}</h3>
          </div>
        </div>

        <section v-show="isSectionVisible(1)" class="scenario-step-section">
          <div class="journey-sort-head">
            <div>
              <p class="journey-sort-kicker">Customer Journey</p>
              <h4>将购买旅程卡片按正确顺序排列</h4>
              <p>从需求触发到购买后的使用反馈，共五个阶段。拖动卡片，或使用卡片右侧的上下移动按钮调整顺序。</p>
            </div>
            <button type="button" class="journey-check-action" :disabled="checkingJourney" @click="checkJourneyOrder">
              {{ checkingJourney ? "正在校验…" : "检查排序" }}
            </button>
          </div>

          <div class="journey-sort-list" role="list" aria-label="消费者购买旅程排序">
            <template v-for="(stage, index) in orderedJourneyStages" :key="stage.id">
              <article
                class="journey-sort-card"
                :class="{ dragging: draggedStageId === stage.id }"
                draggable="true"
                role="listitem"
                @dragstart="startJourneyDrag(stage.id)"
                @dragover.prevent
                @drop="dropJourneyStage(stage.id)"
                @dragend="endJourneyDrag"
              >
                <span class="journey-card-order">{{ String(index + 1).padStart(2, "0") }}</span>
                <div class="journey-card-copy">
                  <strong>{{ stage.title }}</strong>
                  <span>{{ stage.description }}</span>
                </div>
                <div class="journey-card-actions" aria-label="调整卡片顺序">
                  <button type="button" :disabled="index === 0" :aria-label="`将${stage.title}上移`" @click="moveJourneyStage(index, -1)">↑</button>
                  <button type="button" :disabled="index === orderedJourneyStages.length - 1" :aria-label="`将${stage.title}下移`" @click="moveJourneyStage(index, 1)">↓</button>
                </div>
              </article>
              <span v-if="index < orderedJourneyStages.length - 1" class="journey-sort-arrow" aria-hidden="true">→</span>
            </template>
          </div>

          <p v-if="journeyCheckMessage" :class="['journey-check-message', { success: journeyCheckedCorrectly }]" role="status">
            {{ journeyCheckMessage }}
          </p>
        </section>

        <section v-show="isSectionVisible(2)" class="scenario-step-section">
          <div class="journey-analysis-intro">
            <p class="journey-sort-kicker">Journey evidence map</p>
            <h4>分析购买旅程中的行为与体验</h4>
            <p>请根据访谈记录，分析用户在购买旅程各阶段的行为表现，识别关键触点，并评估用户的情感体验水平。</p>
          </div>

          <div class="journey-analysis-wrap">
            <table class="journey-analysis-table">
              <thead>
                <tr>
                  <th>序号</th>
                  <th>旅程阶段</th>
                  <th>用户行为描述</th>
                  <th>关键触点</th>
                  <th>情感体验</th>
                  <th>关键决策因素</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(row, index) in form.journeyAnalysis" :key="row.stageId">
                  <td class="journey-analysis-index">{{ index + 1 }}</td>
                  <th class="journey-analysis-stage">{{ stageTitle(row.stageId) }}</th>
                  <td>
                    <textarea v-model="row.behaviorDescription" placeholder="描述用户在此阶段的行为表现"></textarea>
                  </td>
                  <td>
                    <textarea v-model="row.keyTouchpoints" placeholder="填写平台、内容、服务或产品触点"></textarea>
                  </td>
                  <td>
                    <select v-model="row.emotionExperience" aria-label="选择情感体验">
                      <option value="" disabled>请选择</option>
                      <option v-for="emotion in emotionOptions" :key="emotion" :value="emotion">{{ emotion }}</option>
                    </select>
                  </td>
                  <td>
                    <textarea v-model="row.decisionFactors" placeholder="填写推动或阻碍决策的关键因素"></textarea>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <p v-if="journeyAnalysisMessage" class="journey-check-message" role="status">{{ journeyAnalysisMessage }}</p>
        </section>

        <section v-show="isSectionVisible(3)" class="scenario-step-section">
          <div class="journey-map-intro">
            <span>Step 03</span>
            <h4>绘制用户购买旅程图</h4>
            <p>基于步骤二的分析结果，绘制完整的用户购买旅程图，呈现旅程阶段、情感体验曲线、关键触点、痛点和机会点。</p>
          </div>

          <div class="journey-map-upload-panel">
            <input
              ref="journeyMapInput"
              class="hidden-file-input"
              type="file"
              accept="image/png,image/jpeg,image/webp"
              @change="handleJourneyMapUpload"
            />
            <template v-if="form.journeyMap.url">
              <el-image
                class="journey-map-preview"
                :src="form.journeyMap.url"
                :preview-src-list="[form.journeyMap.url]"
                preview-teleported
                fit="contain"
              />
              <div class="journey-map-file-info">
                <el-icon><UploadFilled /></el-icon>
                <span>{{ form.journeyMap.name || "用户购买旅程图" }}</span>
              </div>
              <div class="journey-map-actions">
                <el-button type="primary" @click="openJourneyMapPicker">更换用户购买旅程图</el-button>
                <el-button @click="clearJourneyMap">移除图片</el-button>
              </div>
            </template>
            <template v-else>
              <el-icon class="journey-map-upload-icon"><UploadFilled /></el-icon>
              <strong>上传用户购买旅程图</strong>
              <p>支持 PNG、JPG、JPEG、WEBP 格式，单个文件不超过 5MB</p>
              <el-button type="primary" :loading="uploadingJourneyMap" @click="openJourneyMapPicker">上传用户购买旅程图</el-button>
            </template>
          </div>

          <div class="journey-map-helper">
            <div>
              <h5>推荐工具及方法如下，自行选择：</h5>
              <p>1. 下载模板，填写各阶段数据，完成用户购买旅程图。</p>
              <p>2. 下载步骤二用户购买旅程表，使用通用 AI 大模型辅助生成。</p>
              <p class="journey-map-prompt">参考提示词：请根据用户购买旅程表文件，生成一个美观的用户购买旅程图。</p>
            </div>
            <el-button plain @click="downloadJourneyMapTemplate"><el-icon><Download /></el-icon>下载用户购买旅程模板</el-button>
          </div>
        </section>

        <section v-show="isSectionVisible(4)" class="scenario-step-section">
          <div class="journey-optimization-intro">
            <span>Step 04</span>
            <h4>识别旅程痛点，形成优化建议</h4>
            <p>结合用户购买旅程图，分析各阶段存在的痛点及未满足的需求，提出可落地的产品优化建议。</p>
          </div>
          <div class="journey-optimization-wrap">
            <table class="journey-optimization-table">
              <thead>
                <tr>
                  <th>旅程阶段</th>
                  <th>识别的痛点</th>
                  <th>优化建议</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="row in form.journeyOptimizations" :key="row.stageId">
                  <th>{{ stageShortTitle(row.stageId) }}</th>
                  <td><textarea v-model="row.painPoint" placeholder="填写该阶段用户遇到的痛点或未满足需求"></textarea></td>
                  <td><textarea v-model="row.optimizationSuggestion" placeholder="填写针对痛点的产品、服务或体验优化建议"></textarea></td>
                </tr>
              </tbody>
            </table>
          </div>
          <p v-if="journeyOptimizationMessage" class="journey-check-message" role="status">{{ journeyOptimizationMessage }}</p>
        </section>

        <div v-if="hasConfiguredSteps" class="step-actions">
          <button type="button" class="nav-action nav-action--previous" :disabled="form.activeStep === 1" @click="goPreviousStep">
            <el-icon><ArrowLeft /></el-icon>
            上一步
          </button>
          <button type="button" class="nav-action nav-action--save" :disabled="saving" @click="saveCurrentProgress">
            <el-icon><CircleCheck /></el-icon>
            保存当前进度
          </button>
          <button type="button" class="nav-action nav-action--next" :disabled="form.activeStep >= trainingSteps.length" @click="goNextStep">
            下一步
            <el-icon><ArrowRight /></el-icon>
          </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="可让 AI 帮你把一段用户故事拆成旅程阶段，再检查每个阶段是否有明确触点和痛点。"
      :progress-items="progressItems"
    />
  </div>
</template>

<script setup>
import { computed, getCurrentInstance, onMounted, ref } from "vue";
import { ArrowLeft, ArrowRight, CircleCheck, Download, UploadFilled } from "@element-plus/icons-vue";
import TrainingAiSidebar from "@/views/components/TrainingAiSidebar.vue";
import TrainingMaterialButton from "@/views/components/TrainingMaterialButton.vue";
import TrainingTaskBrief from "@/views/components/TrainingTaskBrief.vue";
import { getTrainingTaskByKey } from "@/api/trainingTask";
import { checkConsumerScenarioStepOne, checkConsumerScenarioStepTwo, checkConsumerScenarioStepThree, checkConsumerScenarioStepFour, getStudentTrainingAnswer, saveStudentTrainingAnswer, uploadStudentTrainingFile } from "@/api/studentTrainingAnswer";
import { isStudentDemo } from "@/utils/studentDemo";

const TASK_KEY = "consumer-scenario";
const { proxy } = getCurrentInstance();

const defaultRequirement =
  "消费场景解构用于把抽象需求落到具体时间、地点、人物、任务和情绪中，找到用户真正发生问题的瞬间，从而发现产品机会和功能设计切入点。";
const defaultBackground =
  "很多智能产品失败并不是功能少，而是没有进入用户真实生活场景。通过拆解场景，可以识别触发因素、使用阻碍、情绪变化和可被产品改善的关键节点。";
const defaultGoals = [
  "能够描述目标用户的典型消费场景。",
  "识别场景中的触发点、痛点和阻碍因素。",
  "将场景洞察转化为产品机会。",
];

const journeyStages = [
  {
    id: "problem-awareness",
    title: "问题感知（需求触发）",
    description: "用户意识到自身存在某个问题或需求",
  },
  {
    id: "information-search",
    title: "信息搜索（产品探索）",
    description: "用户主动搜索相关信息，了解可选方案",
  },
  {
    id: "evaluation-decision",
    title: "评估决策（对比选择）",
    description: "用户对比不同产品的功能、价格、口碑",
  },
  {
    id: "purchase-conversion",
    title: "购买转化（下单支付）",
    description: "用户完成购买决策并下单",
  },
  {
    id: "post-purchase",
    title: "购后行为（使用反馈）",
    description: "用户使用产品后形成体验评价，决定是否推荐或复购",
  },
];

const emotionOptions = ["负面", "中性", "正面"];

const phases = [
  { key: "problem", label: "问题感知（需求触发）" },
  { key: "search", label: "信息搜索（产品探索）" },
  { key: "evaluate", label: "评估决策（对比选择）" },
  { key: "purchase", label: "购买转化（下单支付）" },
  { key: "post", label: "购后行为（使用反馈）" },
];

const scenarioStatements = [
  {
    key: "needTrigger",
    text: "用户刷小红书看到寝室智能做出好多美味的营养饮品和养生美汤，也想要自己尝试来做，这种行为属于用户购买旅程的",
    defaultPhase: "problem",
  },
  {
    key: "productSearch",
    text: "用户在小红书、抖音、京东、淘宝等平台关注破壁机核心参数（转速、分贝值）、性价比、使用场景、演示等内容，属于用户购买旅程的",
    defaultPhase: "search",
  },
  {
    key: "compareDecision",
    text: "用户选定了3款不同品牌破壁机，针对自动清洁、预约等实用功能以及价格、售后服务进行全方位比对，评估性价比，属于用户购买旅程的",
    defaultPhase: "evaluate",
  },
  {
    key: "orderPayment",
    text: "用户心仪的破壁机在810期间大促，而且支持先用后付，用户最终以原价八折的八百多下单购买，属于用户购买旅程的",
    defaultPhase: "purchase",
  },
  {
    key: "usageReview",
    text: "用户在使用该破壁机后给出好评，并在小红书上晒单分享使用过程，属于用户购买旅程的",
    defaultPhase: "post",
  },
];

const journeyRows = [
  { key: "goal", label: "用户目标", placeholder: "填写该阶段用户想达成什么" },
  { key: "behavior", label: "用户行为", placeholder: "填写用户具体动作" },
  { key: "touchpoint", label: "接触点", placeholder: "填写平台、页面、人员或设备触点" },
  { key: "emotion", label: "情绪曲线", placeholder: "填写情绪变化和原因" },
  { key: "pain", label: "痛点/机会点", placeholder: "填写阻碍、痛点和产品机会" },
];

const referencePhases = [
  {
    name: "了解产品",
    goals: ["有哪些特色功能？", "有哪些利益点？"],
    touchpoint: "小红书、抖音、豆瓣、官网、百度、应用市场",
    pain: "不知道从哪里获取可靠信息",
  },
  {
    name: "找房",
    goals: ["性价比高、干净、氛围好", "交通便利", "距离景点近"],
    touchpoint: "首页、搜索、推荐页、详情页、聊天页",
    pain: "房型好多，看不完；有过踩雷经历",
  },
  {
    name: "订房",
    goals: ["下单方便快捷", "可以正常通订"],
    touchpoint: "收藏、付款页",
    pain: "详情页广告多，且介绍文本过长",
  },
  {
    name: "订房后/住前",
    goals: ["办理入住简单", "与房东联系方便"],
    touchpoint: "详情页、线下",
    pain: "客服回复慢或答非所问",
  },
  {
    name: "住中",
    goals: ["房间干净、安全、噪声低", "设施完善，24h热水"],
    touchpoint: "详情页、线下、客服电话",
    pain: "卫生不过关，联系流程复杂",
  },
  {
    name: "住后",
    goals: ["顺利完成退房", "返还押金"],
    touchpoint: "我的订单、评价",
    pain: "没有想找用户、做意见问卷",
  },
];

const behaviorNodes = ["了解同类产品", "浏览房源信息", "查看房间详情", "与客服沟通咨询", "下单付款", "联系酒店，确认入住时间", "办理入住", "游玩", "退房", "发布入住评价"];
const emotionPoints = [
  { icon: "🙂", label: "期待", left: "4%", top: "58%" },
  { icon: "😍", label: "满意", left: "17%", top: "30%" },
  { icon: "🙂", label: "犹豫", left: "30%", top: "60%" },
  { icon: "🙁", label: "担心", left: "43%", top: "74%" },
  { icon: "😍", label: "高兴", left: "56%", top: "34%" },
  { icon: "🙁", label: "焦虑", left: "70%", top: "74%" },
  { icon: "😍", label: "满意", left: "82%", top: "52%" },
  { icon: "🙂", label: "平稳", left: "93%", top: "44%" },
];

const taskConfig = ref(null);
const saving = ref(false);
const checkingJourney = ref(false);
const checkingJourneyAnalysis = ref(false);
const checkingJourneyOptimization = ref(false);
const journeyMapInput = ref(null);
const uploadingJourneyMap = ref(false);
const draggedStageId = ref("");
const journeyCheckMessage = ref("");
const journeyCheckedCorrectly = ref(false);
const journeyAnalysisMessage = ref("");
const journeyOptimizationMessage = ref("");

function createMatrix() {
  return journeyRows.reduce((matrix, row) => {
    matrix[row.key] = phases.reduce((phaseMap, phase) => {
      phaseMap[phase.key] = "";
      return phaseMap;
    }, {});
    return matrix;
  }, {});
}

function createClassifications() {
  return scenarioStatements.reduce((map, item) => {
    map[item.key] = item.defaultPhase;
    return map;
  }, {});
}

function createJourneyAnalysis() {
  return journeyStages.map((stage) => ({
    stageId: stage.id,
    behaviorDescription: "",
    keyTouchpoints: "",
    emotionExperience: "",
    decisionFactors: "",
  }));
}

function createJourneyOptimizations() {
  return journeyStages.map((stage) => ({
    stageId: stage.id,
    painPoint: "",
    optimizationSuggestion: "",
  }));
}

function createForm() {
  return {
    activeStep: 1,
    journeyOrder: createShuffledJourneyOrder(),
    journeyAnalysis: createJourneyAnalysis(),
    journeyMap: { url: "", name: "" },
    journeyOptimizations: createJourneyOptimizations(),
    classifications: createClassifications(),
    matrix: createMatrix(),
  };
}

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 trainingSteps = computed(() => parseArray(taskConfig.value?.steps, []));
const hasConfiguredSteps = computed(() => trainingSteps.value.length > 0);
const activeStepName = computed(() => trainingSteps.value[form.value.activeStep - 1] || "");
const orderedJourneyStages = computed(() =>
  form.value.journeyOrder
    .map((stageId) => journeyStages.find((stage) => stage.id === stageId))
    .filter(Boolean)
);

const progressItems = computed(() => [
  { text: journeyCheckedCorrectly.value ? "已完成：购买旅程排序" : "进行中：购买旅程排序", status: journeyCheckedCorrectly.value ? "done" : "doing" },
  { text: hasJourneyAnalysisContent.value ? "进行中：用户旅程分析" : "待完成：用户旅程分析", status: hasJourneyAnalysisContent.value ? "doing" : "" },
  { text: "待完成：提交实训成果", status: "" },
]);

function createShuffledJourneyOrder() {
  const order = journeyStages.map((stage) => stage.id);
  for (let index = order.length - 1; index > 0; index -= 1) {
    const randomIndex = Math.floor(Math.random() * (index + 1));
    [order[index], order[randomIndex]] = [order[randomIndex], order[index]];
  }
  if (order.every((stageId, index) => stageId === journeyStages[index].id)) {
    [order[0], order[1]] = [order[1], order[0]];
  }
  return order;
}

const isClassifiedCorrectly = computed(() =>
  scenarioStatements.every((item) => form.value.classifications[item.key] === item.defaultPhase)
);

const hasMatrixContent = computed(() =>
  Object.values(form.value.matrix).some((row) =>
    Object.values(row).some((value) => String(value || "").trim())
  )
);

const hasJourneyAnalysisContent = computed(() =>
  form.value.journeyAnalysis.some((row) =>
    [row.behaviorDescription, row.keyTouchpoints, row.emotionExperience, row.decisionFactors]
      .some((value) => String(value || "").trim())
  )
);

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

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) {
    // Keep local defaults when history cannot be loaded.
  }
}

function parseArray(value, fallback = []) {
  if (Array.isArray(value)) return value.filter(Boolean);
  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 = {
      activeStep: normalizeActiveStep(parsed.currentStep),
      journeyOrder: normalizeJourneyOrder(parsed.journeyOrder),
      journeyAnalysis: normalizeJourneyAnalysis(parsed.journeyAnalysis),
      journeyMap: normalizeJourneyMap(parsed.journeyMap),
      journeyOptimizations: normalizeJourneyOptimizations(parsed.journeyOptimizations),
      classifications: {
        ...createClassifications(),
        ...(parsed.classifications || {}),
      },
      matrix: normalizeMatrix(parsed.matrix),
    };
    journeyCheckedCorrectly.value = parsed.journeyCheckedCorrectly === true;
    journeyCheckMessage.value = journeyCheckedCorrectly.value ? "排序正确，已完成本步骤。" : "";
  } catch (error) {
    // Ignore malformed historical answers.
  }
}

function normalizeJourneyMap(value) {
  return {
    url: typeof value?.url === "string" ? value.url : "",
    name: typeof value?.name === "string" ? value.name : "",
  };
}

function normalizeJourneyAnalysis(value) {
  const savedRows = Array.isArray(value) ? value : [];
  return createJourneyAnalysis().map((row) => {
    const savedRow = savedRows.find((item) => item?.stageId === row.stageId) || {};
    return {
      ...row,
      behaviorDescription: savedRow.behaviorDescription || "",
      keyTouchpoints: savedRow.keyTouchpoints || "",
      emotionExperience: emotionOptions.includes(savedRow.emotionExperience) ? savedRow.emotionExperience : "",
      decisionFactors: savedRow.decisionFactors || "",
    };
  });
}

function normalizeJourneyOptimizations(value) {
  const savedRows = Array.isArray(value) ? value : [];
  return createJourneyOptimizations().map((row) => {
    const savedRow = savedRows.find((item) => item?.stageId === row.stageId) || {};
    return {
      ...row,
      painPoint: savedRow.painPoint || "",
      optimizationSuggestion: savedRow.optimizationSuggestion || "",
    };
  });
}

function normalizeJourneyOrder(value) {
  if (!Array.isArray(value) || value.length !== journeyStages.length) return createShuffledJourneyOrder();
  const uniqueOrder = [...new Set(value)];
  const validIds = journeyStages.map((stage) => stage.id);
  if (uniqueOrder.length !== validIds.length || uniqueOrder.some((stageId) => !validIds.includes(stageId))) {
    return createShuffledJourneyOrder();
  }
  return uniqueOrder;
}

function normalizeMatrix(value = {}) {
  const matrix = createMatrix();
  journeyRows.forEach((row) => {
    phases.forEach((phase) => {
      matrix[row.key][phase.key] = value?.[row.key]?.[phase.key] || "";
    });
  });
  return matrix;
}

function normalizeActiveStep(value) {
  const step = Number(value);
  const total = trainingSteps.value.length;
  if (!Number.isInteger(step) || step < 1) return 1;
  return total ? Math.min(step, total) : 1;
}

async function setCurrentStep(step) {
  if (!hasConfiguredSteps.value) return;
  const targetStep = normalizeActiveStep(step);
  if (targetStep > form.value.activeStep && [1, 2, 3].includes(form.value.activeStep) && !(await persist("IN_PROGRESS"))) return;
  form.value.activeStep = targetStep;
}

function isSectionVisible(section) {
  if (!hasConfiguredSteps.value) return true;
  return Math.min(form.value.activeStep, 4) === section;
}

function goPreviousStep() {
  setCurrentStep(form.value.activeStep - 1);
}

async function goNextStep() {
  await setCurrentStep(form.value.activeStep + 1);
}

function startJourneyDrag(stageId) {
  draggedStageId.value = stageId;
}

function endJourneyDrag() {
  draggedStageId.value = "";
}

function dropJourneyStage(targetStageId) {
  const sourceStageId = draggedStageId.value;
  endJourneyDrag();
  if (!sourceStageId || sourceStageId === targetStageId) return;
  const sourceIndex = form.value.journeyOrder.indexOf(sourceStageId);
  const targetIndex = form.value.journeyOrder.indexOf(targetStageId);
  if (sourceIndex < 0 || targetIndex < 0) return;
  const nextOrder = [...form.value.journeyOrder];
  nextOrder.splice(sourceIndex, 1);
  nextOrder.splice(targetIndex, 0, sourceStageId);
  updateJourneyOrder(nextOrder);
}

function moveJourneyStage(index, offset) {
  const targetIndex = index + offset;
  if (targetIndex < 0 || targetIndex >= form.value.journeyOrder.length) return;
  const nextOrder = [...form.value.journeyOrder];
  [nextOrder[index], nextOrder[targetIndex]] = [nextOrder[targetIndex], nextOrder[index]];
  updateJourneyOrder(nextOrder);
}

function updateJourneyOrder(nextOrder) {
  form.value.journeyOrder = nextOrder;
  journeyCheckedCorrectly.value = false;
  journeyCheckMessage.value = "";
}

async function checkJourneyOrder() {
  await ensureJourneyOrderValid(true);
}

async function ensureJourneyOrderValid(showSuccess = false) {
  if (checkingJourney.value) return false;
  checkingJourney.value = true;
  try {
    const response = await checkConsumerScenarioStepOne({ stageOrder: form.value.journeyOrder });
    const result = response?.data || {};
    journeyCheckedCorrectly.value = result.valid === true;
    journeyCheckMessage.value = result.message || (result.valid ? "排序正确，已完成本步骤。" : "排序还不正确，请继续调整。");
    if (result.valid && showSuccess) proxy?.$modal?.msgSuccess("排序正确，可以进入下一步");
    return result.valid === true;
  } catch (error) {
    journeyCheckedCorrectly.value = false;
    journeyCheckMessage.value = error?.message || "排序校验失败，请稍后重试。";
    return false;
  } finally {
    checkingJourney.value = false;
  }
}

function stageTitle(stageId) {
  return journeyStages.find((stage) => stage.id === stageId)?.title || "未知阶段";
}

function stageShortTitle(stageId) {
  return stageTitle(stageId).split("（")[0];
}

async function ensureJourneyAnalysisValid() {
  if (checkingJourneyAnalysis.value) return false;
  checkingJourneyAnalysis.value = true;
  try {
    const response = await checkConsumerScenarioStepTwo({ rows: form.value.journeyAnalysis });
    const result = response?.data || {};
    journeyAnalysisMessage.value = result.message || (result.valid ? "旅程分析填写完整。" : "请完整填写五个阶段的旅程分析。");
    return result.valid === true;
  } catch (error) {
    journeyAnalysisMessage.value = error?.message || "旅程分析校验失败，请稍后重试。";
    return false;
  } finally {
    checkingJourneyAnalysis.value = false;
  }
}

function openJourneyMapPicker() {
  journeyMapInput.value?.click();
}

function revokeBlobUrl(url) {
  if (typeof url === "string" && url.startsWith("blob:")) URL.revokeObjectURL(url);
}

async function handleJourneyMapUpload(event) {
  const file = event.target?.files?.[0];
  if (!file) return;
  const allowedTypes = ["image/png", "image/jpeg", "image/webp"];
  if (!allowedTypes.includes(file.type)) {
    proxy?.$modal?.msgError("请上传 PNG、JPG、JPEG 或 WEBP 图片");
    event.target.value = "";
    return;
  }
  if (file.size > 5 * 1024 * 1024) {
    proxy?.$modal?.msgError("图片大小不能超过 5MB");
    event.target.value = "";
    return;
  }
  uploadingJourneyMap.value = true;
  try {
    let url = "";
    if (isStudentDemo()) {
      url = URL.createObjectURL(file);
    } else {
      const formData = new FormData();
      formData.append("file", file);
      const response = await uploadStudentTrainingFile(formData);
      url = response?.url || response?.data?.url || "";
    }
    if (!url) throw new Error("上传失败，请稍后重试");
    revokeBlobUrl(form.value.journeyMap.url);
    form.value.journeyMap = { url, name: file.name };
    proxy?.$modal?.msgSuccess("用户购买旅程图上传成功");
  } catch (error) {
    proxy?.$modal?.msgError(error?.message || "上传失败，请稍后重试");
  } finally {
    uploadingJourneyMap.value = false;
    event.target.value = "";
  }
}

function clearJourneyMap() {
  revokeBlobUrl(form.value.journeyMap.url);
  form.value.journeyMap = { url: "", name: "" };
}

async function ensureJourneyMapValid() {
  try {
    const response = await checkConsumerScenarioStepThree({ journeyMapUrl: form.value.journeyMap.url });
    const result = response?.data || {};
    if (!result.valid) proxy?.$modal?.msgError(result.message || "请上传用户购买旅程图");
    return result.valid === true;
  } catch (error) {
    proxy?.$modal?.msgError(error?.message || "请先上传用户购买旅程图");
    return false;
  }
}

async function ensureJourneyOptimizationValid() {
  if (checkingJourneyOptimization.value) return false;
  checkingJourneyOptimization.value = true;
  try {
    const response = await checkConsumerScenarioStepFour({ rows: form.value.journeyOptimizations });
    const result = response?.data || {};
    journeyOptimizationMessage.value = result.message || (result.valid ? "五个阶段的优化分析填写完整。" : "请完整填写五个阶段的痛点和优化建议。");
    return result.valid === true;
  } catch (error) {
    journeyOptimizationMessage.value = error?.message || "优化建议校验失败，请稍后重试。";
    return false;
  } finally {
    checkingJourneyOptimization.value = false;
  }
}

function downloadJourneyMapTemplate() {
  const escapeCsvValue = (value) => `"${String(value || "").replaceAll('"', '""')}"`;
  const header = ["序号", "旅程阶段", "用户行为描述", "关键触点", "情感体验", "关键决策因素", "痛点标记", "机会点标记"];
  const rows = form.value.journeyAnalysis.map((row, index) => [
    index + 1,
    stageTitle(row.stageId),
    row.behaviorDescription,
    row.keyTouchpoints,
    row.emotionExperience,
    row.decisionFactors,
    "",
    "",
  ]);
  const csv = [header, ...rows].map((row) => row.map(escapeCsvValue).join(",")).join("\r\n");
  const url = URL.createObjectURL(new Blob([`\uFEFF${csv}`], { type: "text/csv;charset=utf-8" }));
  const link = document.createElement("a");
  link.href = url;
  link.download = "用户购买旅程图模板.csv";
  link.click();
  URL.revokeObjectURL(url);
}

function buildOutcome() {
  return {
    taskKey: TASK_KEY,
    taskId: taskConfig.value?.id || "",
    taskName: taskTitle.value,
    currentStep: form.value.activeStep,
    journeyOrder: form.value.journeyOrder,
    journeyCheckedCorrectly: journeyCheckedCorrectly.value,
    journeyAnalysis: form.value.journeyAnalysis,
    journeyMap: form.value.journeyMap,
    journeyOptimizations: form.value.journeyOptimizations,
    phases,
    classifications: form.value.classifications,
    matrix: form.value.matrix,
    updatedAt: new Date().toISOString(),
  };
}

function buildAnswerPayload(status) {
  const saveAction = status === "SUBMITTED" ? "SUBMIT" : status === "RESET" ? "RESET" : "SAVE";
  return {
    saveAction,
    currentStep: form.value.activeStep,
    step1Answer: JSON.stringify(buildOutcome()),
  };
}

async function persist(status = "IN_PROGRESS") {
  if (saving.value) return;
  if (status !== "RESET" && form.value.activeStep === 1 && !(await ensureJourneyOrderValid())) return false;
  if (status !== "RESET" && form.value.activeStep === 2 && !(await ensureJourneyAnalysisValid())) return false;
  if (status !== "RESET" && form.value.activeStep === 3 && !(await ensureJourneyMapValid())) return false;
  if (status !== "RESET" && form.value.activeStep === 4 && !(await ensureJourneyOptimizationValid())) return false;
  saving.value = true;
  try {
    await saveStudentTrainingAnswer(TASK_KEY, buildAnswerPayload(status));
    proxy?.$modal?.msgSuccess(status === "SUBMITTED" ? "提交成功" : "保存成功");
    return true;
  } finally {
    saving.value = false;
  }
}

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

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

async function resetTraining() {
  revokeBlobUrl(form.value.journeyMap.url);
  form.value = createForm();
  await persist("RESET");
}

function exportOutcome() {
  const blob = new Blob([JSON.stringify(buildOutcome(), null, 2)], { type: "application/json;charset=utf-8" });
  const url = URL.createObjectURL(blob);
  const link = document.createElement("a");
  link.href = url;
  link.download = `${taskTitle.value}-实训结果.json`;
  link.click();
  URL.revokeObjectURL(url);
}
</script>

<style scoped lang="scss">
.consumer-scenario-page {
  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: #e8f7ff;
  background: #06111d;
}

.training-core {
  min-width: 0;
  padding: 28px;
  border: 1px solid rgba(0, 180, 255, 0.25);
  border-radius: 36px;
  background: rgba(8, 18, 28, 0.6);
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(169, 229, 255, 0.08);
  backdrop-filter: blur(8px);
}

.task-header {
  margin-bottom: 24px;
}

.task-badge {
  display: inline-flex;
  margin-bottom: 12px;
  padding: 4px 14px;
  border: 1px solid rgba(0, 170, 255, 0.5);
  border-radius: 30px;
  color: #d6f6ff;
  background: rgba(0, 170, 255, 0.2);
  font-size: 12px;
  font-weight: 700;
}

.task-title {
  margin: 0;
  color: #ffffff;
  font-size: 30px;
  line-height: 1.3;
  font-weight: 900;
}

.goal-bg,
.task-card,
.step-card {
  margin-bottom: 28px;
  padding: 18px 22px;
  border: 1px solid rgba(82, 174, 226, 0.42);
  border-radius: 26px;
  background: rgba(0, 25, 42, 0.64);
}

.goal-bg {
  p,
  li {
    color: #d7ecff;
    font-size: 14px;
    line-height: 1.8;
  }

  p,
  ol {
    margin: 0;
  }

  ol {
    padding-left: 18px;
  }
}

.subtitle-icon {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #eafaff;
  font-size: 18px;
  font-weight: 900;
}

.subtitle-icon--spaced {
  margin-top: 16px;
}

.task-card {
  margin-top: 0;
}

.workbench-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(0, 180, 255, 0.2);
}

.section-eyebrow {
  margin: 0;
  color: #71dfff;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.4;
}

.workbench-head h3 {
  margin: 4px 0 8px;
  color: #ffffff;
  font-size: 26px;
  font-weight: 800;
  line-height: 1.3;
}

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

.workbench-description {
  margin: 0;
  color: #d7ecff;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.8;
}

.outline-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 18px;
  border: 1px solid rgba(99, 217, 255, 0.55);
  border-radius: 999px;
  color: #e9fbff;
  background: rgba(17, 126, 178, 0.36);
  font-size: 14px;
  font-weight: 800;

  &:hover {
    transform: translateY(-1px);
    border-color: rgba(116, 235, 255, 0.85);
    background: rgba(18, 146, 204, 0.5);
  }
}

.step-indicator {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0;
  width: calc(100% + 24px);
  margin: 0 -12px 32px;
  padding: 18px 22px;
  overflow-x: auto;
  border: 1px solid rgba(0, 180, 255, 0.3);
  border-radius: 18px;
  background:
    linear-gradient(90deg, rgba(6, 42, 61, 0.58), rgba(1, 18, 31, 0.42)),
    rgba(0, 0, 0, 0.3);
  box-shadow: inset 0 1px 0 rgba(145, 233, 255, 0.08);
  scrollbar-width: thin;
}

.step-tab {
  display: flex;
  flex: 1 0 145px;
  align-items: center;
  min-width: 0;
  min-height: 66px;
  padding: 8px 10px;
  border: 1px solid rgba(68, 141, 177, 0.35);
  border-radius: 8px;
  color: #9ab3d0;
  background: rgba(3, 27, 43, 0.52);
  box-shadow: inset 0 1px 0 rgba(135, 221, 255, 0.04);
  font-family: inherit;
  font-size: 14px;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
  transition: transform 0.2s ease, color 0.2s ease, border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;

  &:hover {
    transform: translateY(-2px);
    border-color: rgba(89, 223, 255, 0.82);
    color: #ffffff;
    background: rgba(8, 92, 131, 0.52);
    box-shadow: 0 7px 18px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(152, 239, 255, 0.16);

    .step-action {
      color: #9bf4ff;
    }
  }

  &:focus-visible {
    outline: 2px solid rgba(92, 224, 255, 0.7);
    outline-offset: 2px;
  }

  &.active {
    border-color: rgba(89, 226, 255, 0.85);
    color: #ffffff;
    background: linear-gradient(115deg, rgba(4, 109, 155, 0.78), rgba(5, 62, 102, 0.64));
    box-shadow: 0 0 18px rgba(24, 183, 235, 0.22), inset 0 1px 0 rgba(176, 246, 255, 0.2);

    .step-marker {
      border-color: #72e8ff;
      color: #ffffff;
      background: linear-gradient(135deg, #08b7e8, #1375d0);
      box-shadow: 0 0 0 5px rgba(25, 179, 237, 0.14), 0 0 18px rgba(46, 208, 255, 0.58);
    }
  }

  &.complete {
    color: #dffbff;

    .step-marker {
      border-color: rgba(84, 230, 221, 0.85);
      color: #062b37;
      background: #6ef0e1;
      box-shadow: 0 0 12px rgba(79, 231, 218, 0.35);
    }
  }
}

.step-marker {
  display: inline-flex;
  flex: 0 0 38px;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(101, 176, 208, 0.6);
  border-radius: 50%;
  color: #a6c4d9;
  background: rgba(3, 25, 40, 0.8);
  box-shadow: inset 0 0 12px rgba(38, 174, 233, 0.08);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.04em;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.step-copy {
  display: grid;
  min-width: 0;
  gap: 4px;
  margin-left: 10px;
}

.step-name {
  display: -webkit-box;
  overflow: hidden;
  color: inherit;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.25;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.step-action {
  color: #66b6d4;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1;
  transition: color 0.2s ease;
}

.step-connector {
  position: relative;
  flex: 0 1 40px;
  min-width: 18px;
  height: 2px;
  margin: 0 8px;
  overflow: visible;
  background: rgba(98, 169, 201, 0.34);
}

.step-connector::after {
  position: absolute;
  top: 50%;
  right: -1px;
  width: 6px;
  height: 6px;
  border-top: 1px solid #73b1ce;
  border-right: 1px solid #73b1ce;
  content: "";
  transform: translateY(-50%) rotate(45deg);
}

.step-tab.complete + .step-connector {
  background: linear-gradient(90deg, #6ef0e1, #1cb8e9);
  box-shadow: 0 0 9px rgba(53, 218, 235, 0.46);

  &::after {
    border-color: #63e6f1;
  }
}

.step-card {
  margin-bottom: 0;
}

.step-title-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(0, 180, 255, 0.2);

  h3 {
    margin: 4px 0 0;
    color: #ffffff;
    font-size: 22px;
    font-weight: 900;
    line-height: 1.3;
  }
}

.scenario-step-section + .scenario-step-section {
  margin-top: 0;
}

.journey-head {
  margin: 0;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(0, 180, 255, 0.2);
}

.journey-head h4 {
  margin: 0;
  color: #ffffff;
  font-size: 22px;
  font-weight: 900;
}

.journey-sort-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 22px;
  padding: 20px;
  border: 1px solid rgba(91, 218, 255, 0.28);
  border-radius: 18px;
  background: linear-gradient(120deg, rgba(7, 94, 132, 0.26), rgba(2, 26, 43, 0.72));

  h4 {
    margin: 5px 0 8px;
    color: #ffffff;
    font-size: 21px;
    line-height: 1.35;
  }

  p {
    max-width: 700px;
    margin: 0;
    color: #b9d8e9;
    font-size: 14px;
    line-height: 1.75;
  }
}

.journey-sort-kicker {
  color: #69e3ff !important;
  font-size: 12px !important;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.journey-check-action {
  flex: 0 0 auto;
  min-height: 42px;
  padding: 0 18px;
  border: 1px solid rgba(112, 235, 255, 0.74);
  border-radius: 10px;
  color: #ecfdff;
  background: linear-gradient(135deg, #078ac2, #07558a);
  box-shadow: 0 8px 20px rgba(0, 145, 203, 0.2);
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;

  &:hover:not(:disabled) {
    transform: translateY(-1px);
    background: linear-gradient(135deg, #0ba9df, #0870aa);
  }

  &:disabled {
    cursor: not-allowed;
    opacity: 0.64;
  }
}

.journey-sort-list {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  align-items: center;
  gap: 8px;
}

.journey-sort-card {
  position: relative;
  display: grid;
  grid-column: span 1;
  min-height: 162px;
  min-width: 0;
  grid-template-rows: auto 1fr auto;
  padding: 16px;
  border: 1px solid rgba(63, 174, 222, 0.48);
  border-radius: 14px;
  color: #ecfbff;
  background: linear-gradient(150deg, rgba(8, 74, 109, 0.82), rgba(3, 24, 42, 0.9));
  box-shadow: inset 0 1px 0 rgba(201, 247, 255, 0.1), 0 12px 24px rgba(0, 0, 0, 0.16);
  cursor: grab;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;

  &:hover {
    transform: translateY(-3px);
    border-color: rgba(106, 235, 255, 0.94);
    box-shadow: inset 0 1px 0 rgba(201, 247, 255, 0.16), 0 16px 30px rgba(0, 0, 0, 0.28), 0 0 20px rgba(15, 199, 242, 0.14);
  }

  &.dragging {
    opacity: 0.45;
    cursor: grabbing;
  }
}

.journey-card-order {
  color: #78e9ff;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.journey-card-copy {
  align-self: center;

  strong,
  span {
    display: block;
  }

  strong {
    margin-bottom: 8px;
    color: #ffffff;
    font-size: 15px;
    line-height: 1.45;
  }

  span {
    color: #b6d9e9;
    font-size: 12px;
    line-height: 1.65;
  }
}

.journey-card-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;

  button {
    display: inline-grid;
    width: 26px;
    height: 26px;
    place-items: center;
    border: 1px solid rgba(111, 220, 246, 0.45);
    border-radius: 7px;
    color: #dffbff;
    background: rgba(4, 41, 65, 0.76);
    font: inherit;
    font-weight: 900;
    cursor: pointer;

    &:hover:not(:disabled) {
      border-color: #72e8ff;
      background: rgba(9, 119, 160, 0.9);
    }

    &:disabled {
      cursor: not-allowed;
      opacity: 0.28;
    }
  }
}

.journey-sort-arrow {
  justify-self: center;
  color: #42cfff;
  font-size: 20px;
  font-weight: 900;
}

.journey-check-message {
  margin: 20px 0 0;
  padding: 11px 14px;
  border: 1px solid rgba(255, 136, 106, 0.7);
  border-radius: 10px;
  color: #ffd2c7;
  background: rgba(127, 45, 30, 0.25);
  font-size: 14px;
  font-weight: 700;

  &.success {
    border-color: rgba(90, 238, 198, 0.65);
    color: #d6fff3;
    background: rgba(16, 122, 98, 0.25);
  }
}

.journey-analysis-intro {
  margin-bottom: 18px;
  padding: 20px;
  border-left: 3px solid #3bd8ff;
  border-radius: 0 16px 16px 0;
  background: linear-gradient(90deg, rgba(7, 95, 137, 0.28), rgba(4, 31, 49, 0.18));

  h4 {
    margin: 4px 0 8px;
    color: #ffffff;
    font-size: 21px;
  }

  p {
    margin: 0;
    color: #c3dfec;
    font-size: 14px;
    line-height: 1.8;
  }
}

.journey-analysis-wrap {
  overflow-x: auto;
  border: 1px solid rgba(72, 182, 228, 0.46);
  border-radius: 16px;
  background: rgba(2, 20, 33, 0.72);
}

.journey-analysis-table {
  width: 100%;
  min-width: 1120px;
  border-collapse: collapse;
  table-layout: fixed;

  th,
  td {
    border: 1px solid rgba(77, 167, 220, 0.28);
  }

  thead th {
    padding: 13px 10px;
    color: #effcff;
    background: linear-gradient(90deg, rgba(8, 128, 178, 0.94), rgba(5, 94, 143, 0.9));
    font-size: 14px;
    font-weight: 900;
    text-align: center;
  }

  tbody tr {
    background: rgba(2, 17, 29, 0.48);

    &:nth-child(even) {
      background: rgba(9, 47, 67, 0.34);
    }
  }

  td,
  tbody th {
    padding: 10px;
    vertical-align: top;
  }

  th:nth-child(1) { width: 54px; }
  th:nth-child(2) { width: 132px; }
  th:nth-child(3), th:nth-child(4), th:nth-child(6) { width: 27%; }
  th:nth-child(5) { width: 118px; }

  textarea,
  select {
    width: 100%;
    border: 1px solid transparent;
    border-radius: 8px;
    color: #eaf9ff;
    background: transparent;
    font: inherit;
    font-size: 13px;
    line-height: 1.65;
    outline: none;
    box-sizing: border-box;

    &:focus {
      border-color: rgba(92, 224, 255, 0.76);
      background: rgba(8, 64, 92, 0.42);
      box-shadow: 0 0 0 3px rgba(34, 207, 255, 0.1);
    }
  }

  textarea {
    min-height: 112px;
    padding: 8px;
    resize: vertical;
  }

  textarea::placeholder {
    color: #7897a8;
  }

  select {
    min-height: 38px;
    margin-top: 30px;
    padding: 0 9px;
    border-color: rgba(99, 177, 211, 0.6);
    background: rgba(6, 38, 58, 0.78);
  }
}

.journey-analysis-index,
.journey-analysis-stage {
  color: #dff7ff;
  font-weight: 800;
  text-align: center;
  vertical-align: middle !important;
}

.journey-analysis-stage {
  color: #9defff;
  line-height: 1.65;
}

.journey-map-intro {
  margin-bottom: 18px;
  padding: 20px 22px;
  border: 1px solid rgba(69, 202, 249, 0.36);
  border-radius: 18px;
  background: linear-gradient(112deg, rgba(9, 99, 145, 0.28), rgba(2, 22, 38, 0.48));

  span {
    color: #51d8ff;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  h4 {
    margin: 6px 0 8px;
    color: #ffffff;
    font-size: 22px;
  }

  p {
    margin: 0;
    color: #bed8e6;
    font-size: 14px;
    line-height: 1.8;
  }
}

.hidden-file-input {
  display: none;
}

.journey-map-upload-panel {
  min-height: 330px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 28px;
  border: 1px dashed rgba(78, 210, 255, 0.64);
  border-radius: 20px;
  color: #e9fbff;
  background: radial-gradient(circle at 50% 32%, rgba(13, 119, 171, 0.22), rgba(2, 18, 31, 0.52) 62%);

  strong {
    font-size: 18px;
  }

  p {
    margin: 0 0 8px;
    color: #9abac9;
    font-size: 13px;
  }
}

.journey-map-upload-icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(94, 222, 255, 0.62);
  border-radius: 50%;
  color: #71e5ff;
  background: rgba(8, 100, 148, 0.3);
  font-size: 25px;
}

.journey-map-preview {
  width: min(100%, 760px);
  max-height: 360px;
  overflow: hidden;
  border: 1px solid rgba(90, 214, 255, 0.45);
  border-radius: 12px;
  background: #03111c;
  cursor: zoom-in;

  :deep(img) {
    object-fit: contain;
  }
}

.journey-map-file-info {
  max-width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #cbf5ff;
  font-size: 14px;

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

.journey-map-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.journey-map-helper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 20px;
  padding: 18px 20px;
  border: 1px solid rgba(61, 162, 210, 0.28);
  border-radius: 14px;
  color: #b9d4df;
  background: rgba(3, 27, 43, 0.46);

  h5,
  p {
    margin: 0;
    font-size: 13px;
    line-height: 1.8;
  }

  h5 {
    color: #e5faff;
    font-size: 14px;
  }

  .journey-map-prompt {
    margin-top: 4px;
    color: #80dff8;
  }

  .el-button {
    flex: 0 0 auto;
  }
}

.journey-optimization-intro {
  margin-bottom: 18px;
  padding: 20px 22px;
  border-left: 3px solid #41d9ff;
  border-radius: 0 16px 16px 0;
  background: linear-gradient(90deg, rgba(7, 98, 143, 0.3), rgba(3, 27, 42, 0.12));

  span {
    color: #51d8ff;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.08em;
  }

  h4 {
    margin: 6px 0 8px;
    color: #ffffff;
    font-size: 21px;
  }

  p {
    margin: 0;
    color: #c4dfe9;
    font-size: 14px;
    line-height: 1.8;
  }
}

.journey-optimization-wrap {
  overflow-x: auto;
  border: 1px solid rgba(72, 182, 228, 0.46);
  border-radius: 16px;
  background: rgba(2, 20, 33, 0.72);
}

.journey-optimization-table {
  width: 100%;
  min-width: 900px;
  border-collapse: collapse;
  table-layout: fixed;

  th,
  td {
    border: 1px solid rgba(77, 167, 220, 0.28);
  }

  thead th {
    padding: 14px 12px;
    color: #f0fcff;
    background: linear-gradient(90deg, rgba(8, 128, 178, 0.94), rgba(5, 94, 143, 0.9));
    font-size: 14px;
    font-weight: 900;
    text-align: center;
  }

  thead th:first-child {
    width: 170px;
  }

  tbody th {
    padding: 18px 14px;
    color: #a6ecff;
    background: rgba(3, 36, 55, 0.58);
    font-size: 14px;
    font-weight: 800;
    text-align: center;
  }

  td {
    padding: 10px;
    background: rgba(1, 17, 29, 0.45);
  }

  textarea {
    width: 100%;
    min-height: 92px;
    padding: 10px 12px;
    border: 1px solid transparent;
    border-radius: 9px;
    outline: none;
    resize: vertical;
    color: #ebfaff;
    background: transparent;
    font: inherit;
    font-size: 13px;
    line-height: 1.65;
    box-sizing: border-box;

    &:focus {
      border-color: rgba(92, 224, 255, 0.72);
      background: rgba(8, 64, 92, 0.42);
      box-shadow: 0 0 0 3px rgba(34, 207, 255, 0.1);
    }
  }

  textarea::placeholder {
    color: #7696a8;
  }
}

.journey-flow {
  display: grid;
  grid-template-columns: repeat(5, minmax(120px, 1fr));
  align-items: center;
  gap: 28px;
  margin-top: 18px;
  overflow-x: auto;
}

.phase-node {
  position: relative;
  min-height: 78px;
  display: grid;
  place-items: center;
  padding: 14px 16px;
  border: 1px solid rgba(0, 180, 255, 0.22);
  border-radius: 14px;
  color: #dff8ff;
  background: rgba(1, 14, 26, 0.72);
  font-size: 14px;
  font-weight: 800;
  text-align: center;
}

.phase-arrow {
  display: none;
}

.phase-node:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -29px;
  width: 28px;
  height: 2px;
  background: #2bb8ff;
  transform: translateY(-50%);
}

.phase-node:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 50%;
  right: -31px;
  width: 8px;
  height: 8px;
  border-top: 2px solid #2bb8ff;
  border-right: 2px solid #2bb8ff;
  transform: translateY(-50%) rotate(45deg);
}

.requirement {
  margin: 20px 0 16px;
  color: #d7ecff;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.8;
}

.scenario-list {
  display: grid;
  gap: 10px;
  margin-bottom: 18px;
}

.scenario-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: 12px;
  align-items: center;
  color: #d7ecff;
  font-size: 14px;
  line-height: 1.7;
}

.phase-select {
  width: 100%;
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid rgba(45, 95, 126, 0.95);
  border-radius: 14px;
  color: #eef5ff;
  background: #0f1a24;
  font: inherit;

  &:focus {
    border-color: #5fe7ff;
    background: rgba(10, 31, 46, 0.98);
    box-shadow: 0 0 0 3px rgba(34, 207, 255, 0.14);
  }
}

.journey-table-wrap {
  overflow-x: auto;
  border: 1px solid rgba(0, 180, 255, 0.22);
  border-radius: 22px;
  background: rgba(1, 14, 26, 0.72);
}

.journey-table {
  width: 100%;
  min-width: 980px;
  border-collapse: collapse;
  table-layout: fixed;
}

.journey-table th,
.journey-table td {
  border: 1px solid rgba(77, 167, 220, 0.2);
}

.journey-table thead th {
  height: 46px;
  padding: 12px;
  color: #eaffff;
  background: rgba(8, 55, 82, 0.98);
  font-weight: 900;
}

.journey-table tbody th {
  width: 120px;
  padding: 12px;
  color: #eafaff;
  background: rgba(1, 14, 26, 0.72);
  font-weight: 900;
}

.row-head {
  width: 120px;
}

.journey-table td {
  height: 108px;
  padding: 12px;
  background: rgba(1, 14, 26, 0.48);
}

.table-input {
  display: block;
  width: 100%;
  min-height: 110px;
  padding: 12px 14px;
  border: 1px solid rgba(45, 95, 126, 0.95);
  border-radius: 14px;
  outline: none;
  resize: none;
  color: #eef5ff;
  background: #0f1a24;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.6;
  box-sizing: border-box;
}

.table-input::placeholder {
  color: #8299aa;
}

.table-input:focus {
  border-color: #5fe7ff;
  background: rgba(10, 31, 46, 0.98);
  box-shadow: 0 0 0 3px rgba(34, 207, 255, 0.14);
}

.reference-map {
  margin-top: 28px;
  padding: 16px;
  border: 1px solid rgba(0, 180, 255, 0.22);
  border-radius: 22px;
  background: rgba(1, 14, 26, 0.72);
}

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

.nav-action {
  min-width: 112px;
  min-height: 40px;
  padding: 0 18px;
  border: 1px solid rgba(99, 217, 255, 0.55);
  border-radius: 999px;
  color: #e9fbff;
  background: rgba(17, 126, 178, 0.36);
  font-family: inherit;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;

  &:disabled {
    cursor: not-allowed;
    opacity: 0.45;
  }
}

.nav-action--next {
  border-color: rgba(92, 224, 255, 0.7);
  color: #ffffff;
  background: linear-gradient(95deg, #0b84bd, #096491);
}

.nav-action--save {
  border-color: rgba(92, 224, 255, 0.7);
  color: #ffffff;
  background: linear-gradient(95deg, #0b84bd, #096491);
}

.reference-title {
  margin-bottom: 14px;
  color: #dff5ff;
  font-size: 15px;
  font-weight: 800;
}

.reference-grid {
  display: grid;
  grid-template-columns: 120px repeat(6, minmax(0, 1fr));
  gap: 8px;
  margin-top: 8px;
}

.reference-side,
.stage-chip,
.reference-cell,
.behavior-lane,
.emotion-chart {
  border: 1px solid rgba(0, 180, 255, 0.22);
  background: rgba(1, 14, 26, 0.48);
}

.reference-side {
  display: grid;
  place-items: center;
  min-height: 54px;
  color: #dff5ff;
  font-weight: 900;
}

.stage-chip {
  min-height: 34px;
  display: grid;
  place-items: center;
  color: #eaffff;
  background: rgba(8, 55, 82, 0.98);
  font-weight: 900;
}

.reference-cell {
  min-height: 58px;
  padding: 10px;
  color: #d7ecff;
  font-size: 12px;
  line-height: 1.55;
}

.reference-cell p {
  margin: 0;
}

.reference-grid--behavior,
.reference-grid--emotion {
  grid-template-columns: 120px minmax(0, 1fr);
}

.behavior-lane {
  min-height: 130px;
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 16px;
  overflow-x: auto;
}

.behavior-node {
  position: relative;
  min-width: 82px;
  color: #d9f1ff;
  font-size: 12px;
  text-align: center;
}

.behavior-node::before {
  content: "";
  display: block;
  width: 30px;
  height: 30px;
  margin: 0 auto 8px;
  border-radius: 50%;
  background: linear-gradient(180deg, #38c8ef, #0b84bd);
  box-shadow: 0 0 16px rgba(0, 174, 255, 0.24);
}

.behavior-node:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 15px;
  left: calc(50% + 26px);
  width: 56px;
  height: 2px;
  background: rgba(92, 224, 255, 0.5);
}

.emotion-chart {
  position: relative;
  min-height: 210px;
  padding: 10px;
  overflow: hidden;
}

.emotion-chart svg {
  width: 100%;
  height: 190px;
}

.emotion-points span {
  position: absolute;
  display: grid;
  gap: 2px;
  color: #f5fbff;
  font-size: 18px;
  text-align: center;
}

.emotion-points small {
  color: #d7ecff;
  font-size: 11px;
}

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

.training-action {
  min-width: 172px;
  height: 64px;
  padding: 0 28px;
  border: 1px solid #2c83aa;
  border-radius: 6px;
  color: #dff7ff;
  background: rgba(13, 64, 88, 0.62);
  box-shadow: none;
  font-size: 24px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0;
  text-shadow: none;
}

.training-action:hover:not(.is-disabled) {
  border-color: #46b5e7;
  color: #ffffff;
  background: rgba(18, 85, 116, 0.78);
}

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

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

  .training-core {
    padding: 18px;
    border-radius: 24px;
  }

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

  .workbench-actions :deep(.material-download),
  .workbench-actions .outline-action {
    width: 100%;
  }

  .step-indicator {
    align-items: stretch;
    flex-direction: column;
    width: 100%;
    margin-right: 0;
    margin-left: 0;
    overflow: visible;
    border-radius: 20px;
  }

  .step-tab {
    flex: 0 0 auto;
    width: 100%;
  }

  .step-connector {
    flex: 0 0 20px;
    min-width: 0;
    width: 2px;
    height: 20px;
    margin-left: 29px;
    text-align: center;
    writing-mode: vertical-rl;
  }

  .journey-flow,
  .scenario-row {
    grid-template-columns: 1fr;
  }

  .journey-sort-head {
    flex-direction: column;
  }

  .journey-check-action {
    width: 100%;
  }

  .journey-sort-list {
    grid-template-columns: 1fr;
  }

  .journey-sort-card {
    min-height: 126px;
  }

  .journey-sort-arrow {
    transform: rotate(90deg);
  }

  .journey-map-helper {
    align-items: stretch;
    flex-direction: column;
  }

  .journey-map-helper .el-button {
    width: 100%;
  }

  .nav-action,
  .training-action {
    width: 100%;
  }

  .phase-node::before,
  .phase-node::after {
    display: none;
  }

  .reference-grid,
  .reference-grid--behavior,
  .reference-grid--emotion {
    grid-template-columns: 1fr;
  }

}
.workbench-head--actions-only {
  justify-content: flex-end;
  margin-bottom: 18px;
  padding-bottom: 0;
  border-bottom: 0;
}
</style>