dianshang-qianduan/src/views/product/after-sales-service.vue

<template>
  <div class="after-sales-page student-training-shell">
    <main class="after-sales-core">
      <section class="task-header">
        <div class="task-head-main">
          <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="after-sales-toolbar">
          <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="after-sales-workbench">
        <div class="workbench-head">
          <div>
            <p class="section-eyebrow">After-sales diagnostic routing</p>
            <h2>售后故障类型分类</h2>
          </div>
        </div>

        <nav class="step-indicator" aria-label="售后服务流程设计步骤">
          <template v-for="(step, index) in trainingSteps" :key="`${step}-${index}`">
            <button type="button" :class="['step-tab', { active: currentStep === index + 1, complete: currentStep > index + 1 }]" @click="switchStep(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">{{ currentStep === index + 1 ? '当前步骤' : '点击切换' }} →</span></span>
            </button>
            <span v-if="index < trainingSteps.length - 1" class="step-connector" aria-hidden="true"></span>
          </template>
        </nav>

        <section v-if="currentStep === 1" class="step-card">
          <div class="step-title-row">
            <div><p class="section-eyebrow">Step 01</p><h3>{{ trainingSteps[0] }}</h3></div>
            <span class="step-chip">拖拽分类判题</span>
          </div>
          <p class="step-desc">互联网产品的售后服务除硬件维修外，还需处理配网、云端连接与软件控制等问题。请将右侧被打乱的故障现象拖入对应的故障类型；完成全部分类并判题正确后才能进入下一步。</p>

          <div class="classification-workspace">
            <section class="fault-lanes" aria-label="故障类型分类区">
              <article
                v-for="category in CATEGORIES"
                :key="category.id"
                class="fault-lane"
                :class="{ 'fault-lane--over': dragOverCategory === category.id }"
                @dragover.prevent="dragOverCategory = category.id"
                @dragleave="dragOverCategory = ''"
                @drop.prevent="dropIntoCategory(category.id)"
              >
                <header class="lane-head">
                  <div><span class="lane-index">{{ category.index }}</span><h4>{{ category.name }}</h4></div>
                  <span>{{ faultsByCategory(category.id).length }}/2</span>
                </header>
                <p>{{ category.description }}</p>
                <div class="lane-drop-zone">
                  <article
                    v-for="fault in faultsByCategory(category.id)"
                    :key="fault.id"
                    class="fault-card"
                    :class="{ dragging: dragFaultId === fault.id }"
                    :draggable="!checking"
                    @dragstart="onDragStart(fault.id)"
                    @dragend="onDragEnd"
                  >
                    <span class="fault-handle" title="拖拽分类">⠿</span>
                    <p>{{ fault.text }}</p>
                    <label class="fault-select-label">
                      <span>分类</span>
                      <el-select :model-value="assignments[fault.id] || ''" :disabled="checking" size="small" class="fault-select" @update:model-value="(val) => setCategory(fault.id, val)">
                        <el-option value="" label="待分类" />
                        <el-option v-for="cat in CATEGORIES" :key="cat.id" :value="cat.id" :label="cat.name" />
                      </el-select>
                    </label>
                  </article>
                  <span v-if="!faultsByCategory(category.id).length" class="drop-hint">将故障现象拖到这里</span>
                </div>
              </article>
            </section>

            <aside class="unassigned-panel" :class="{ 'unassigned-panel--over': dragOverCategory === 'unassigned' }" @dragover.prevent="dragOverCategory = 'unassigned'" @dragleave="dragOverCategory = ''" @drop.prevent="dropIntoCategory('')">
              <div class="unassigned-head"><span class="section-eyebrow">待分类故障现象</span><strong>{{ unassignedFaults.length }}</strong></div>
              <p>卡片初始顺序已打乱。可直接拖拽，也可用卡片内的下拉框辅助调整。</p>
              <div class="unassigned-list">
                <article
                  v-for="fault in unassignedFaults"
                  :key="fault.id"
                  class="fault-card"
                  :class="{ dragging: dragFaultId === fault.id }"
                  :draggable="!checking"
                  @dragstart="onDragStart(fault.id)"
                  @dragend="onDragEnd"
                >
                  <span class="fault-handle" title="拖拽分类">⠿</span>
                  <p>{{ fault.text }}</p>
                  <label class="fault-select-label">
                    <span>分类</span>
                    <el-select :model-value="assignments[fault.id] || ''" :disabled="checking" size="small" class="fault-select" @update:model-value="(val) => setCategory(fault.id, val)">
                      <el-option value="" label="待分类" />
                      <el-option v-for="cat in CATEGORIES" :key="cat.id" :value="cat.id" :label="cat.name" />
                    </el-select>
                  </label>
                </article>
                <span v-if="!unassignedFaults.length" class="unassigned-empty">全部故障现象已完成归类</span>
              </div>
            </aside>
          </div>

          <p v-if="checkResult" class="result-message" :class="{ success: checkResult.allCorrect }">{{ checkResult.message || (checkResult.allCorrect ? '分类正确，已解锁下一步。' : `当前 ${checkResult.correctCount}/${checkResult.totalCount} 个分类正确，请继续调整。`) }}</p>
          <div class="task-actions">
            <button type="button" class="btn-nav btn-submit" :disabled="checking || unassignedFaults.length > 0" @click="checkAndSave">{{ checking ? '判题中…' : '检查分类并保存' }}</button>
            <button type="button" class="btn-nav" :disabled="checking" @click="resetFaults"><el-icon><RefreshLeft /></el-icon>重新打乱</button>
            <button type="button" class="btn-nav btn-primary" :disabled="!stepOnePassed" @click="goNextStep">进入第 2 步<el-icon><ArrowRight /></el-icon></button>
          </div>
        </section>

        <section v-else-if="currentStep === 2" class="step-card service-design-card">
          <div class="step-title-row">
            <div><p class="section-eyebrow">Step 02</p><h3>{{ trainingSteps[1] }}</h3></div>
            <span class="step-chip">方案设计与规则沉淀</span>
          </div>
          <p class="step-desc">根据 4 类故障类型，设计标准化的分级处理流程。请结合案例资料中的售后政策和常见故障案例，完成处理流程表。斜体内容为填写示例，可使用"带入示例"快速复制后再按自己的方案修改。</p>

          <div class="service-table-wrap">
            <table class="service-table">
              <thead>
                <tr><th>故障类型</th><th>具体场景</th><th>处理流程</th><th>核心规则</th></tr>
              </thead>
              <tbody>
                <tr v-for="row in SERVICE_ROWS" :key="row.id">
                  <th scope="row"><span class="service-row-index">{{ row.index }}</span>{{ row.type }}</th>
                  <td><em>{{ row.scene }}</em></td>
                  <td>
                    <textarea v-model="serviceAnswers[row.id].process" :aria-label="`${row.type}处理流程`" placeholder="请填写处理流程" @input="clearStepTwoGrade" />
                    <button v-if="row.processExample" type="button" class="example-button" @click="applyExample(row.id)">带入示例</button>
                    <em v-if="row.processExample" class="example-copy">示例：{{ row.processExample }}</em>
                  </td>
                  <td>
                    <textarea v-model="serviceAnswers[row.id].rule" :aria-label="`${row.type}核心规则`" placeholder="请填写核心规则" @input="clearStepTwoGrade" />
                    <em v-if="row.ruleExample" class="example-copy">示例：{{ row.ruleExample }}</em>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>

          <p v-if="stepTwoResult" class="result-message" :class="{ success: stepTwoResult.valid }">{{ stepTwoResult.message }}</p>
          <div class="task-actions">
            <button type="button" class="btn-nav" :disabled="savingStepTwo" @click="switchStep(1)"><el-icon><ArrowLeft /></el-icon>返回第 1 步</button>
            <button type="button" class="btn-nav btn-submit" :disabled="savingStepTwo" @click="validateAndSaveStepTwo">{{ savingStepTwo ? '保存中…' : '保存并进入第 3 步' }}<el-icon><ArrowRight /></el-icon></button>
          </div>
        </section>

        <section v-else-if="currentStep === 3" class="step-card policy-design-card">
          <div class="step-title-row">
            <div><p class="section-eyebrow">Step 03</p><h3>{{ trainingSteps[2] }}</h3></div>
            <span class="step-chip">消费者权益与售后承诺</span>
          </div>
          <p class="step-desc">根据第 2 步的分级处理方案，制定可用于产品说明书和电商详情页的售后政策。斜体文字是填写示例，可复制后按案例信息调整，不参与标准答案判定。</p>

          <section class="policy-section" aria-labelledby="policy-framework-title">
            <div class="policy-section-heading"><span>（一）</span><h4 id="policy-framework-title">填写售后政策框架表</h4></div>
            <p>请结合案例资料中的产品信息、行业法规与竞品售后政策，明确退换货、质保、维修、响应时效和补偿方案。</p>
            <div class="service-table-wrap">
              <table class="service-table policy-table">
                <thead><tr><th>政策维度</th><th>政策内容</th><th>适用条件与说明</th></tr></thead>
                <tbody>
                  <tr v-for="row in POLICY_ROWS" :key="row.id">
                    <th scope="row"><span class="service-row-index">{{ row.index }}</span>{{ row.dimension }}</th>
                    <td>
                      <textarea v-model="policyAnswers.framework[row.id].content" :aria-label="`${row.dimension}政策内容`" placeholder="请填写政策内容" @input="clearStepThreeGrade" />
                      <button v-if="row.contentExample" type="button" class="example-button" @click="applyPolicyExample(row.id)">带入示例</button>
                      <em v-if="row.contentExample" class="example-copy">示例：{{ row.contentExample }}</em>
                    </td>
                    <td>
                      <textarea v-model="policyAnswers.framework[row.id].condition" :aria-label="`${row.dimension}适用条件与说明`" placeholder="请填写适用条件与说明" @input="clearStepThreeGrade" />
                      <em v-if="row.conditionExample" class="example-copy">示例：{{ row.conditionExample }}</em>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </section>

          <section class="policy-section" aria-labelledby="policy-summary-title">
            <div class="policy-section-heading"><span>（二）</span><h4 id="policy-summary-title">填写电商详情页售后信息摘要</h4></div>
            <p>将政策核心信息提炼为消费者友好的简明摘要，用于详情页"售后保障"模块展示。</p>
            <div class="service-table-wrap">
              <table class="service-table policy-summary-table">
                <thead><tr><th>售后信息项</th><th>详情页展示内容</th></tr></thead>
                <tbody>
                  <tr v-for="row in POLICY_SUMMARY_ROWS" :key="row.id">
                    <th scope="row">{{ row.label }}</th>
                    <td>
                      <textarea v-model="policyAnswers.summary[row.id]" :aria-label="`${row.label}详情页展示内容`" placeholder="请填写面向消费者的简明承诺" @input="clearStepThreeGrade" />
                      <button v-if="row.example" type="button" class="example-button" @click="applySummaryExample(row.id)">带入示例</button>
                      <em v-if="row.example" class="example-copy">示例：{{ row.example }}</em>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </section>

          <p v-if="stepThreeResult" class="result-message" :class="{ success: stepThreeResult.valid }">{{ stepThreeResult.message }}</p>
          <div class="task-actions">
            <button type="button" class="btn-nav" :disabled="savingStepThree" @click="switchStep(2)"><el-icon><ArrowLeft /></el-icon>返回第 2 步</button>
            <button type="button" class="btn-nav btn-submit" :disabled="savingStepThree" @click="validateAndSaveStepThree">{{ savingStepThree ? '提交中…' : '校验并提交任务' }}<el-icon><ArrowRight /></el-icon></button>
          </div>
        </section>

        <section v-else class="step-card placeholder-card">
          <p class="section-eyebrow">Step {{ String(currentStep).padStart(2, '0') }}</p>
          <h3>{{ trainingSteps[currentStep - 1] }}</h3>
          <p>第 1 步已通过，后续步骤将在对应实训页面继续完成。</p>
          <div class="task-actions"><button type="button" class="btn-nav" @click="switchStep(1)"><el-icon><ArrowLeft /></el-icon>返回第 1 步</button></div>
        </section>
      </section>
    </main>

    <TrainingAiSidebar
      study-tip="先根据故障现象定位排查层级：本地硬件、配网操作、云端连接或需要升级处理的严重故障。"
      reference-title="故障分类提示"
      reference-text="· 本地问题优先确认设备本体与基础控制<br />· 配网问题聚焦 App、设备发现与连接过程<br />· 云端问题关注远程控制稳定性与掉线<br />· 严重故障需要优先停止使用并升级处理"
      :progress-items="progressItems"
    />
  </div>
</template>

<script setup>
import { computed, getCurrentInstance, onMounted, ref } from "vue";
import { ArrowLeft, ArrowRight, Download, RefreshLeft, Service } from "@element-plus/icons-vue";
import TrainingAiSidebar from "@/views/components/TrainingAiSidebar.vue";
import TrainingMaterialButton from "@/views/components/TrainingMaterialButton.vue";
import { checkAfterSalesServiceStepOne, checkAfterSalesServiceStepTwo, checkAfterSalesServiceStepThree, getStudentTrainingAnswer, saveStudentTrainingAnswer } from "@/api/studentTrainingAnswer";
import { getTrainingTaskByKey } from "@/api/trainingTask";
import { getStudentTrainingPage } from "@/views/training/studentTrainingPages";
import { parseTrainingArray } from "@/views/training/taskKeyMap";

const TASK_KEY = "after-sales-service";
const { proxy } = getCurrentInstance();
const basePage = getStudentTrainingPage(TASK_KEY);
const taskConfig = ref(null);
const briefOpen = ref(false);
const currentStep = ref(1);
const checking = ref(false);
const dragFaultId = ref("");
const dragOverCategory = ref("");
const assignments = ref({});
const stepOnePassed = ref(false);
const checkResult = ref(null);
const savingStepTwo = ref(false);
const stepTwoPassed = ref(false);
const stepTwoResult = ref(null);
const savingStepThree = ref(false);
const stepThreePassed = ref(false);
const stepThreeResult = ref(null);

const CATEGORIES = [
  { id: "local-hardware-simple", index: "01", name: "本地硬件简单故障", description: "设备本体或基础控制环节的常规问题" },
  { id: "operation-network", index: "02", name: "操作/配网类问题", description: "设备发现、添加和连接配置过程的问题" },
  { id: "cloud-connection", index: "03", name: "云端连接类故障", description: "远程控制、云端通信与在线稳定性问题" },
  { id: "severe-fault", index: "04", name: "严重故障", description: "存在安全风险或需升级处理的设备故障" },
];
const FAULTS = [
  { id: "voice-wake-no-response", text: "用户使用语音唤醒，设备无反应，但手动开关灯正常" },
  { id: "voice-control-cannot-switch", text: "唤醒词识别正常，但语音控制设备开机和关机无法实现" },
  { id: "app-cannot-find-device", text: "配网时 APP 搜索不到设备" },
  { id: "network-setup-timeout", text: "APP 添加设备时提示「配网超时」" },
  { id: "remote-control-intermittent", text: "开关正常，但 APP 远程控制时好时坏" },
  { id: "frequent-disconnection", text: "配网成功但每隔几小时就断连" },
  { id: "indicator-no-response", text: "插电后指示灯不亮，完全无反应" },
  { id: "water-damage-no-response", text: "产品进水后通电无反应" },
];
const SERVICE_ROWS = [
  {
    id: "operation-network", index: "01", type: "操作/配网类问题", scene: "配网失败、APP 找不到设备、唤醒后连不上网",
    processExample: "① 发送《一步配网教程》视频\n② 客服远程指导重置配网\n③ 若 30 分钟内未解决，转技术支持",
    ruleExample: "远程解决为主，不产生物流成本",
  },
  {
    id: "cloud-connection", index: "02", type: "云端连接类故障", scene: "配网成功但经常断连、云端识别超时、APP 远程控制失效",
    processExample: "① 收集设备日志与网络环境\n② 技术支持排查云端服务与账号状态\n③ 修复后回访确认远程控制恢复",
    ruleExample: "优先远程诊断；确认平台侧问题后统一告知处理进度",
  },
  {
    id: "local-hardware-simple", index: "03", type: "本地硬件简单故障", scene: "语音识别正常但无法控制相关功能（质保内）",
    processExample: "① 远程确认功能设置与固件版本\n② 指导恢复默认设置或 OTA 升级\n③ 无法恢复时登记检测/换新申请",
    ruleExample: "质保期内优先远程修复，符合条件后再安排售后服务",
  },
  {
    id: "severe-fault", index: "04", type: "严重故障", scene: "通电无反应、模组烧坏、进水损坏（质保内）",
    processExample: "① 提示立即停止使用并收集故障凭证\n② 售后审核安全风险与质保资格\n③ 安排寄修或换新，并跟踪闭环",
    ruleExample: "安全风险优先；质保内符合条件可寄修或换新",
  },
  {
    id: "out-of-warranty", index: "05", type: "超出质保期", scene: "任何故障",
    processExample: "① 明确告知超出质保范围\n② 提供付费维修、配件购买或以旧换新方案\n③ 用户确认报价后执行服务",
    ruleExample: "收费项目与报价须在服务前确认，避免产生争议",
  },
];
const POLICY_ROWS = [
  {
    id: "return-policy", index: "01", dimension: "退换货政策",
    contentExample: "7天无理由退货，15天质量问题免费换新",
    conditionExample: "商品完好、配件齐全、包装完整；退款至原支付账户，3-5个工作日到账",
  },
  { id: "warranty-policy", index: "02", dimension: "质保政策" },
  { id: "repair-service", index: "03", dimension: "维修服务" },
  { id: "response-sla", index: "04", dimension: "响应时效" },
  { id: "compensation-plan", index: "05", dimension: "补偿方案" },
];
const POLICY_SUMMARY_ROWS = [
  { id: "warranty-period", label: "质保期", example: "整机12个月质保，灯珠24个月质保，7天无理由退货" },
  { id: "response-commitment", label: "响应承诺" },
  { id: "featured-service", label: "特色服务" },
];
const fallbackSteps = ["故障类型分类", "服务分级与处理方案", "售后服务流程设计"];
const trainingSteps = computed(() => {
  const configuredSteps = parseTrainingArray(taskConfig.value?.steps, fallbackSteps);
  return fallbackSteps.map((fallbackStep, index) => configuredSteps[index] || fallbackStep);
});
const taskTitle = computed(() => taskConfig.value?.taskName || basePage.title || "售后服务流程设计");
const taskBackground = computed(() => taskConfig.value?.background || basePage.background);
const taskRequirement = computed(() => taskConfig.value?.requirements || basePage.task);
const taskGoals = computed(() => parseTrainingArray(taskConfig.value?.objectives, basePage.goals));
const orderedFaults = ref(shuffleFaults());
const serviceAnswers = ref(createEmptyServiceAnswers());
const policyAnswers = ref(createEmptyPolicyAnswers());
const unassignedFaults = computed(() => orderedFaults.value.filter((fault) => !assignments.value[fault.id]));
const progressItems = computed(() => trainingSteps.value.map((text, index) => ({ text, status: index + 1 < currentStep.value ? "done" : index + 1 === currentStep.value ? "doing" : "" })));

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

function shuffleFaults() { return [...FAULTS].sort(() => Math.random() - 0.5); }
function normalizeStep(value) { return Math.min(Math.max(Number(value) || 1, 1), Math.max(trainingSteps.value.length, 1)); }
function faultsByCategory(categoryId) { return orderedFaults.value.filter((fault) => assignments.value[fault.id] === categoryId); }
function onDragStart(faultId) { if (!checking.value) dragFaultId.value = faultId; }
function onDragEnd() { dragFaultId.value = ""; dragOverCategory.value = ""; }
function setCategory(faultId, categoryId) { assignments.value = { ...assignments.value, [faultId]: categoryId || undefined }; clearGrade(); }
function dropIntoCategory(categoryId) { if (!dragFaultId.value || checking.value) return; setCategory(dragFaultId.value, categoryId); onDragEnd(); }
function clearGrade() { stepOnePassed.value = false; checkResult.value = null; }
function resetFaults() { orderedFaults.value = shuffleFaults(); assignments.value = {}; clearGrade(); }
function createEmptyServiceAnswers() { return Object.fromEntries(SERVICE_ROWS.map((row) => [row.id, { process: "", rule: "" }])); }
function createEmptyPolicyAnswers() {
  return {
    framework: Object.fromEntries(POLICY_ROWS.map((row) => [row.id, { content: "", condition: "" }])),
    summary: Object.fromEntries(POLICY_SUMMARY_ROWS.map((row) => [row.id, ""])),
  };
}
function buildStepOneAnswer() { return { assignments: assignments.value, orderedFaultIds: orderedFaults.value.map((fault) => fault.id), passed: stepOnePassed.value, checkResult: checkResult.value, updatedAt: new Date().toISOString() }; }
function buildStepTwoAnswer() { return { rows: SERVICE_ROWS.map((row) => ({ id: row.id, process: serviceAnswers.value[row.id]?.process || "", rule: serviceAnswers.value[row.id]?.rule || "" })), passed: stepTwoPassed.value, validationResult: stepTwoResult.value, updatedAt: new Date().toISOString() }; }
function buildStepThreeAnswer() {
  return {
    policies: POLICY_ROWS.map((row) => ({ id: row.id, content: policyAnswers.value.framework[row.id]?.content || "", condition: policyAnswers.value.framework[row.id]?.condition || "" })),
    summaries: POLICY_SUMMARY_ROWS.map((row) => ({ id: row.id, content: policyAnswers.value.summary[row.id] || "" })),
    passed: stepThreePassed.value,
    validationResult: stepThreeResult.value,
    updatedAt: new Date().toISOString(),
  };
}
async function persist(saveAction = "SAVE") { await saveStudentTrainingAnswer(TASK_KEY, { saveAction, currentStep: currentStep.value, submitted: saveAction === "SUBMIT", step1Answer: JSON.stringify(buildStepOneAnswer()), step2Answer: JSON.stringify(buildStepTwoAnswer()), step3Answer: JSON.stringify(buildStepThreeAnswer()) }); }
async function loadTaskConfig() { try { const response = await getTrainingTaskByKey(TASK_KEY); taskConfig.value = response?.data || null; currentStep.value = normalizeStep(currentStep.value); } catch (error) { taskConfig.value = null; } }
async function loadSavedProgress() {
  try {
    const response = await getStudentTrainingAnswer(TASK_KEY); const raw = response?.data?.step1Answer; if (!raw) return;
    const saved = JSON.parse(raw); const validIds = new Set(FAULTS.map((fault) => fault.id));
    if (Array.isArray(saved?.orderedFaultIds) && saved.orderedFaultIds.length === FAULTS.length && new Set(saved.orderedFaultIds).size === FAULTS.length && saved.orderedFaultIds.every((id) => validIds.has(id))) {
      orderedFaults.value = saved.orderedFaultIds.map((id) => FAULTS.find((fault) => fault.id === id));
    }
    assignments.value = Object.fromEntries(Object.entries(saved?.assignments || {}).filter(([id, categoryId]) => validIds.has(id) && CATEGORIES.some((category) => category.id === categoryId)));
    stepOnePassed.value = Boolean(saved?.passed); checkResult.value = saved?.checkResult || null;
    const rawStepTwo = response?.data?.step2Answer; if (rawStepTwo) {
      const savedStepTwo = JSON.parse(rawStepTwo); const validServiceIds = new Set(SERVICE_ROWS.map((row) => row.id));
      serviceAnswers.value = Object.fromEntries(SERVICE_ROWS.map((row) => {
        const savedRow = Array.isArray(savedStepTwo?.rows) ? savedStepTwo.rows.find((item) => item?.id === row.id) : null;
        return [row.id, { process: validServiceIds.has(row.id) ? String(savedRow?.process || "") : "", rule: validServiceIds.has(row.id) ? String(savedRow?.rule || "") : "" }];
      }));
      stepTwoPassed.value = Boolean(savedStepTwo?.passed); stepTwoResult.value = savedStepTwo?.validationResult || null;
    }
    const rawStepThree = response?.data?.step3Answer; if (rawStepThree) {
      const savedStepThree = JSON.parse(rawStepThree);
      policyAnswers.value = {
        framework: Object.fromEntries(POLICY_ROWS.map((row) => {
          const savedPolicy = Array.isArray(savedStepThree?.policies) ? savedStepThree.policies.find((item) => item?.id === row.id) : null;
          return [row.id, { content: String(savedPolicy?.content || ""), condition: String(savedPolicy?.condition || "") }];
        })),
        summary: Object.fromEntries(POLICY_SUMMARY_ROWS.map((row) => {
          const savedSummary = Array.isArray(savedStepThree?.summaries) ? savedStepThree.summaries.find((item) => item?.id === row.id) : null;
          return [row.id, String(savedSummary?.content || "")];
        })),
      };
      stepThreePassed.value = Boolean(savedStepThree?.passed); stepThreeResult.value = savedStepThree?.validationResult || null;
    }
    currentStep.value = normalizeStep(response?.data?.currentStep || saved?.currentStep);
  } catch (error) { /* Keep a fresh shuffled exercise available when historical progress cannot be read. */ }
}
async function checkAndSave() {
  if (checking.value || unassignedFaults.value.length) return;
  checking.value = true;
  try {
    const items = orderedFaults.value.map((fault) => ({ faultId: fault.id, categoryId: assignments.value[fault.id] }));
    const response = await checkAfterSalesServiceStepOne(items);
    checkResult.value = response?.data || null; stepOnePassed.value = Boolean(checkResult.value?.allCorrect);
    await persist("SAVE");
    if (stepOnePassed.value) proxy?.$modal?.msgSuccess("故障分类正确，已保存并解锁下一步"); else proxy?.$modal?.msgWarning("故障分类尚未完全正确，请继续调整");
  } catch (error) { proxy?.$modal?.msgError(error?.message || "判题失败，请稍后重试"); } finally { checking.value = false; }
}
async function goNextStep() { if (!stepOnePassed.value) return; currentStep.value = normalizeStep(currentStep.value + 1); await persist("SAVE"); }
function applyExample(rowId) { const row = SERVICE_ROWS.find((item) => item.id === rowId); if (!row) return; serviceAnswers.value = { ...serviceAnswers.value, [rowId]: { process: row.processExample || "", rule: row.ruleExample || "" } }; clearStepTwoGrade(); }
function clearStepTwoGrade() { stepTwoPassed.value = false; stepTwoResult.value = null; }
async function validateAndSaveStepTwo() {
  if (savingStepTwo.value) return; savingStepTwo.value = true;
  try {
    const rows = buildStepTwoAnswer().rows; const response = await checkAfterSalesServiceStepTwo({ rows });
    stepTwoResult.value = response?.data || null; stepTwoPassed.value = Boolean(stepTwoResult.value?.valid);
    if (!stepTwoPassed.value) { proxy?.$modal?.msgWarning(stepTwoResult.value?.message || "请完成五类故障的处理流程和核心规则"); return; }
    currentStep.value = normalizeStep(3); await persist("SAVE"); proxy?.$modal?.msgSuccess("服务分级处理方案已保存，已进入第 3 步");
  } catch (error) { proxy?.$modal?.msgError(error?.message || "保存失败，请稍后重试"); } finally { savingStepTwo.value = false; }
}
function clearStepThreeGrade() { stepThreePassed.value = false; stepThreeResult.value = null; }
function applyPolicyExample(rowId) {
  const row = POLICY_ROWS.find((item) => item.id === rowId); if (!row) return;
  policyAnswers.value = { ...policyAnswers.value, framework: { ...policyAnswers.value.framework, [rowId]: { content: row.contentExample || "", condition: row.conditionExample || "" } } };
  clearStepThreeGrade();
}
function applySummaryExample(rowId) {
  const row = POLICY_SUMMARY_ROWS.find((item) => item.id === rowId); if (!row) return;
  policyAnswers.value = { ...policyAnswers.value, summary: { ...policyAnswers.value.summary, [rowId]: row.example || "" } };
  clearStepThreeGrade();
}
async function validateAndSaveStepThree() {
  if (savingStepThree.value) return; savingStepThree.value = true;
  try {
    const answer = buildStepThreeAnswer(); const response = await checkAfterSalesServiceStepThree(answer);
    stepThreeResult.value = response?.data || null; stepThreePassed.value = Boolean(stepThreeResult.value?.valid);
    if (!stepThreePassed.value) { proxy?.$modal?.msgWarning(stepThreeResult.value?.message || "请完成售后政策框架与详情页摘要"); return; }
    currentStep.value = normalizeStep(3); await persist("SUBMIT"); proxy?.$modal?.msgSuccess("售后政策已校验通过，任务提交成功");
  } catch (error) { proxy?.$modal?.msgError(error?.message || "保存失败，请稍后重试"); } finally { savingStepThree.value = false; }
}
function switchStep(step) {
  if (step > 1 && !stepOnePassed.value) { proxy?.$modal?.msgWarning("请先完成故障分类并判题通过"); return; }
  if (step > 2 && !stepTwoPassed.value) { proxy?.$modal?.msgWarning("请先完成服务分级与处理方案"); return; }
  if (step > 3 && !stepThreePassed.value) { proxy?.$modal?.msgWarning("请先完成售后政策设计"); return; }
  currentStep.value = normalizeStep(step);
}
function exportOutcome() { const blob = new Blob([JSON.stringify({ currentStep: currentStep.value, step1: buildStepOneAnswer(), step2: buildStepTwoAnswer(), step3: buildStepThreeAnswer() }, 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">
/* ===== 页面级令牌（教育蓝极简主题） ===== */
.after-sales-page {
  /* 主色：教育蓝 */
  --student-accent: #2563eb;
  --student-accent-deep: #1d4ed8;
  --student-accent-light: #3b82f6;
  --student-accent-soft: #eff6ff;
  /* 语义色 */
  --student-danger: #ef4444;
  --student-success: #2ba471;
  /* 三层次标识（仅小色条，不做行底色） */
  --student-layer-1: #1d4ed8;
  --student-layer-2: #3b82f6;
  --student-layer-3: #93c5fd;
  /* 结构色 */
  --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;

  min-width: 0;
  color: var(--student-text);
  background: #ffffff;
}

/* 主核心容器：透明化，无蓝边无蓝底 */
.after-sales-core {
  display: grid;
  gap: 10px;
  align-content: start;
  min-width: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

/* ===== task-header：白卡 + 左侧教育蓝竖条 ===== */
.task-header {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 16px 16px 16px 20px;
  border: 1px solid var(--student-panel-border);
  border-radius: 12px;
  background: #ffffff;
  overflow: hidden;

  &::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 4px;
    background: var(--student-accent);
  }
}

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



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

.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; color: var(--student-accent-deep); }
}

.task-brief-more {
  display: grid;
  gap: 6px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--student-panel-border);

  b { color: var(--student-text); font-size: 12px; }
  ul { display: grid; gap: 4px; margin: 0; padding-left: 18px; }
  p { margin: 0; }
}



.after-sales-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  justify-content: flex-end;
  max-width: 100%;
}

/* ===== workbench：透明化 ===== */
.after-sales-workbench {
  display: grid;
  gap: 10px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.workbench-head {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin: 0;
  padding: 0;
  border-bottom: 0;
}

.section-eyebrow {
  margin: 0;
  color: var(--student-accent);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.workbench-head h2 {
  margin: 4px 0 0;
  color: var(--student-text);
  font-size: var(--student-fs-h1);
  font-weight: 700;
  line-height: 1.35;
}

/* ===== step-card：透明化 ===== */
.step-card {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.step-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.step-title-row h3 {
  margin: 4px 0 0;
  color: var(--student-text);
  font-size: var(--student-fs-h1);
  font-weight: 700;
  line-height: 1.35;
}

.step-chip {
  border: 1px solid #bfdbfe;
  border-radius: 999px;
  padding: 4px 10px;
  color: var(--student-accent);
  background: var(--student-accent-soft);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.step-desc {
  margin: 14px 0;
  color: var(--student-text-secondary);
  font-size: var(--student-fs-body);
  line-height: 1.6;
}

/* ===== 按钮四级层级（教育蓝极简） ===== */
.outline-action,
.btn-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  height: 36px;
  padding: 0 14px;
  border: 1px solid rgba(37, 99, 235, 0.35);
  border-radius: 8px;
  color: var(--student-accent);
  background: #ffffff;
  font-size: var(--student-fs-button);
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  text-shadow: none;
  transition: border-color 0.16s ease, background 0.16s ease,
              color 0.16s ease, transform 0.16s ease,
              box-shadow 0.16s ease;
}

.outline-action:hover:not(:disabled),
.btn-nav:hover:not(:disabled) {
  border-color: var(--student-accent);
  background: var(--student-accent-soft);
  color: var(--student-accent);
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.12);
}

.btn-nav.btn-primary,
.btn-nav.btn-submit {
  border-color: var(--student-accent);
  color: #ffffff;
  background: var(--student-accent);
  font-weight: 700;
  box-shadow: 0 3px 10px rgba(37, 99, 235, 0.28);
}

.btn-nav.btn-primary:hover:not(:disabled),
.btn-nav.btn-submit:hover:not(:disabled) {
  border-color: var(--student-accent-deep);
  background: var(--student-accent-deep);
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 5px 14px rgba(29, 78, 216, 0.32);
}

.btn-save {
  border: 1px solid #e5e7eb;
  color: #374151;
  background: #f3f4f6;
  box-shadow: none;
}

.btn-save:hover:not(:disabled) {
  border-color: #d1d5db;
  background: #e9ecef;
  color: #374151;
  transform: none;
  box-shadow: none;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
  transform: none;
  box-shadow: none;
}

.task-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}

/* ===== Step 01：拖拽分类区 ===== */
.classification-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.45fr);
  gap: 16px;
  align-items: start;
}

.fault-lanes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.fault-lane,
.unassigned-panel {
  border: 1px solid var(--student-panel-border);
  border-radius: 12px;
  background: #ffffff;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.fault-lane {
  min-height: 228px;
  padding: 14px;
}

.fault-lane--over,
.unassigned-panel--over {
  border-color: var(--student-accent);
  background: var(--student-accent-soft);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.08);
}

.lane-head,
.unassigned-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.lane-head > div {
  display: flex;
  align-items: center;
  gap: 9px;
}

.lane-index {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--student-panel-border);
  border-radius: 6px;
  color: var(--student-accent);
  background: var(--student-accent-soft);
  font-size: 11px;
  font-weight: 700;
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
}

.lane-head h4 {
  margin: 0;
  color: var(--student-text);
  font-size: 14px;
  font-weight: 700;
}

.lane-head > span {
  color: var(--student-text-secondary);
  font-size: 12px;
  font-weight: 700;
}

.fault-lane > p,
.unassigned-panel > p {
  min-height: 0;
  margin: 8px 0;
  color: var(--student-text-secondary);
  font-size: 12px;
  line-height: 1.55;
}

.lane-drop-zone,
.unassigned-list {
  display: grid;
  gap: 8px;
}

.drop-hint,
.unassigned-empty {
  display: grid;
  place-items: center;
  min-height: 90px;
  border: 1px dashed var(--student-panel-border);
  border-radius: 10px;
  color: var(--student-text-secondary);
  font-size: 12px;
  text-align: center;
}

.unassigned-panel {
  position: sticky;
  top: 18px;
  padding: 14px;
}

.unassigned-head strong {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  color: #ffffff;
  background: var(--student-accent);
  font-size: 12px;
  font-weight: 700;
}

.unassigned-list {
  max-height: 560px;
  overflow-y: auto;
  padding-right: 2px;
}

/* fault-card（由 defineComponent 渲染，scoped 选择器加 [data-v-xxx] 后仍能命中） */
.fault-card {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  padding: 9px 10px;
  border: 1px solid var(--student-panel-border);
  border-radius: 10px;
  background: #ffffff;
  cursor: grab;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.fault-card:hover,
.fault-card.dragging {
  border-color: var(--student-accent);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.08);
  transform: translateY(-1px);
  color: var(--student-accent);
}

.fault-handle {
  color: var(--student-accent);
  font-size: 16px;
  line-height: 1;
}

.fault-card p {
  grid-column: 2;
  margin: 0;
  color: var(--student-text);
  font-size: 13px;
  line-height: 1.55;
}

.fault-select-label {
  grid-column: 2;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  color: var(--student-text-secondary);
  font-size: 11px;
  white-space: nowrap;
}

.fault-select-label select {
  width: 126px;
  max-width: none;
  flex: 0 0 126px;
  padding: 4px 22px 4px 7px;
  border: 1px solid var(--student-panel-border);
  border-radius: 6px;
  color: var(--student-text);
  background: #ffffff;
  font: inherit;
  font-size: 11px;
}

/* ===== 结果反馈 ===== */
.result-message {
  margin: 16px 0 0;
  padding: 10px 14px;
  border: 1px solid rgba(180, 83, 9, 0.3);
  border-radius: 10px;
  color: #92400e;
  background: rgba(245, 158, 11, 0.08);
  font-size: 12px;
}

.result-message.success {
  border-color: rgba(74, 157, 110, 0.35);
  color: #065f46;
  background: rgba(74, 157, 110, 0.08);
}

/* ===== 表格（Step 02 / Step 03） ===== */
.service-table-wrap {
  overflow-x: auto;
}

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

.service-table th,
.service-table td {
  padding: 12px 14px;
  border-right: 1px solid var(--student-panel-border);
  border-bottom: 1px solid var(--student-panel-border);
  vertical-align: top;
}

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

.service-table thead th {
  padding: 12px 14px;
  color: var(--student-text);
  background: #fafbfc;
  font-size: var(--student-fs-body-sm);
  font-weight: 800;
  text-align: left;
}

.service-table tbody th {
  width: 15%;
  vertical-align: middle;
  color: var(--student-text);
  background: transparent;
  font-size: var(--student-fs-body);
  text-align: left;
  font-weight: 700;
}

.service-table tbody td {
  width: 28.33%;
  color: var(--student-text);
  font-size: var(--student-fs-body);
  line-height: 1.6;
}

.service-row-index {
  display: inline-block;
  margin-right: 6px;
  padding: 1px 6px;
  border: 1px solid var(--student-panel-border);
  border-radius: 4px;
  color: var(--student-accent);
  background: var(--student-accent-soft);
  font-size: 11px;
  font-weight: 700;
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
}

.service-table em {
  color: var(--student-text-secondary);
  font-style: italic;
  font-size: 12px;
}

.service-table textarea {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-height: 80px;
  padding: 8px 10px;
  border: 1px solid var(--student-panel-border);
  border-radius: 6px;
  outline: none;
  resize: vertical;
  color: var(--student-text);
  background: transparent;
  font: inherit;
  font-size: var(--student-fs-body);
  line-height: 1.6;
  transition: border-color 0.16s ease;
}

.service-table textarea::placeholder {
  color: var(--student-text-secondary);
}

.service-table textarea:focus {
  outline: 2px solid rgba(37, 99, 235, 0.2);
  outline-offset: -2px;
  border-color: var(--student-accent);
}

.example-button {
  margin-top: 8px;
  padding: 3px 10px;
  border: 1px solid rgba(37, 99, 235, 0.35);
  border-radius: 6px;
  color: var(--student-accent);
  background: #ffffff;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.16s ease, background 0.16s ease;
}

.example-button:hover {
  border-color: var(--student-accent);
  background: var(--student-accent-soft);
}

.example-copy {
  display: block;
  margin-top: 6px;
  color: var(--student-text-secondary);
  font-size: 11px;
  line-height: 1.5;
  white-space: pre-line;
}

/* ===== Step 03：政策设计 ===== */
.policy-design-card {
  display: grid;
  gap: 20px;
}

.policy-section {
  display: grid;
  gap: 8px;
}

.policy-section-heading {
  display: flex;
  align-items: center;
  gap: 9px;
}

.policy-section-heading span {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--student-panel-border);
  border-radius: 6px;
  color: var(--student-accent);
  background: var(--student-accent-soft);
  font-size: 12px;
  font-weight: 700;
}

.policy-section-heading h4 {
  margin: 0;
  color: var(--student-text);
  font-size: var(--student-fs-h2);
  font-weight: 700;
}

.policy-section > p {
  margin: 0;
  color: var(--student-text-secondary);
  font-size: var(--student-fs-body);
  line-height: 1.6;
}

.policy-table { min-width: 1040px; }
.policy-table tbody th { width: 18%; }
.policy-table tbody td { width: 41%; }
.policy-summary-table { min-width: 760px; }
.policy-summary-table tbody th { width: 20%; }
.policy-summary-table tbody td { width: 80%; }
.policy-summary-table textarea { min-height: 70px; }

/* ===== placeholder-card ===== */
.placeholder-card {
  min-height: 200px;
}

.placeholder-card > p:not(.section-eyebrow) {
  margin: 12px 0;
  color: var(--student-text-secondary);
  line-height: 1.6;
}

/* ===== 响应式 ===== */
@media (max-width: 1180px) {
  .after-sales-page { padding: 16px; }
}

@media (max-width: 850px) {
  .classification-workspace { grid-template-columns: 1fr; }
  .unassigned-panel { position: static; }
  .fault-lanes { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .after-sales-page { padding: 12px; }
  .task-header { flex-direction: column; align-items: flex-start; }
  .after-sales-toolbar { width: 100%; justify-content: flex-start; }
  .fault-lanes { grid-template-columns: 1fr; }
}
</style>

<style lang="scss">
/* ============================================================
 * 步骤导航：分段连接胶囊（教育蓝主题）
 * 覆盖全局 !important 规则
 * ============================================================ */
#app .studentLayout section.app-main:has(.after-sales-page) .step-indicator {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  justify-content: center !important;
  gap: 0 !important;
  width: 100% !important;
  margin: 4px 0 16px !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;

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

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

    &:first-child {
      border-radius: 8px 0 0 8px !important;
    }

    &:last-child {
      border-radius: 0 8px 8px 0 !important;
      border-right: 1px solid #e5e7eb !important;
    }

    /* 编号小徽章 */
    .step-marker {
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      flex: 0 0 auto !important;
      min-width: 22px !important;
      height: 22px !important;
      padding: 0 5px !important;
      border: none !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;
      transition: all 0.16s ease !important;
    }

    .step-copy {
      display: flex !important;
      flex-direction: column !important;
      gap: 0 !important;
      min-width: 0 !important;
    }

    .step-name {
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      white-space: normal !important;
      line-height: 1.3 !important;
      color: inherit !important;
    }

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

    /* 未到达 hover */
    &:hover:not(.active):not(.complete) {
      border-color: #2563eb !important;
      background: #eff6ff !important;
      color: #2563eb !important;
      z-index: 1 !important;
      .step-marker { background: #2563eb !important; color: #ffffff !important; }
    }

    /* 已完成 */
    &.complete:not(.active) {
      border-color: #e5e7eb !important;
      color: #374151 !important;
      .step-marker { background: rgba(43, 164, 113, 0.12) !important; color: #16915f !important; }
      &:hover {
        border-color: #2ba471 !important;
        background: #f0fdf6 !important;
        z-index: 1 !important;
        .step-marker { background: #2ba471 !important; color: #ffffff !important; }
      }
    }

    /* 当前步骤：教育蓝实底 */
    &.active {
      border-color: #2563eb !important;
      background: #2563eb !important;
      color: #ffffff !important;
      font-weight: 700 !important;
      z-index: 2 !important;
      .step-marker { background: #ffffff !important; color: #2563eb !important; }
      &:hover {
        background: #1d4ed8 !important;
        border-color: #1d4ed8 !important;
      }
    }
  }
}

/* ===== 窄屏 900px：横向滑动 ===== */
@media (max-width: 900px) {
  #app .studentLayout section.app-main:has(.after-sales-page) .step-indicator {
    justify-content: flex-start !important;
    gap: 8px !important;
    overflow-x: auto !important;
  }
  #app .studentLayout section.app-main:has(.after-sales-page) .step-indicator .step-tab {
    flex: 0 0 140px !important;
    max-width: none !important;
  }
}

/* ============================================================
 * 共用组件换肤：TrainingMaterialButton 资料按钮 → 教育蓝
 * ============================================================ */
.after-sales-page .training-material-button.el-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  min-height: 34px !important;
  height: 34px !important;
  padding: 0 14px !important;
  border: 1px solid rgba(37, 99, 235, 0.35) !important;
  border-radius: 8px !important;
  color: #2563eb !important;
  background: #ffffff !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  transition:
    border-color 0.16s ease,
    background 0.16s ease,
    color 0.16s ease,
    box-shadow 0.16s ease !important;

  .el-icon {
    font-size: 14px !important;
    color: inherit !important;
  }

  &:hover,
  &:focus {
    border-color: #2563eb !important;
    color: #2563eb !important;
    background: #eff6ff !important;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.12) !important;
  }
}

/* ============================================================
 * 顶部导出按钮（outline-action）→ 教育蓝描边
 * ============================================================ */
#app .studentLayout section.app-main:has(.after-sales-page) .outline-action {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  min-height: 34px !important;
  height: 34px !important;
  padding: 0 14px !important;
  border: 1px solid rgba(37, 99, 235, 0.35) !important;
  border-radius: 8px !important;
  color: #2563eb !important;
  background: #ffffff !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  transition:
    border-color 0.16s ease,
    background 0.16s ease,
    color 0.16s ease,
    box-shadow 0.16s ease !important;

  .el-icon {
    font-size: 14px !important;
    color: inherit !important;
  }

  &:hover {
    border-color: #2563eb !important;
    color: #2563eb !important;
    background: #eff6ff !important;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.12) !important;
    transform: translateY(-1px) !important;
  }
}

/* ===== 顶部工具栏间距 ===== */
.after-sales-page .training-task-toolbar,
.after-sales-page .after-sales-toolbar {
  gap: 8px;
}
</style>