dianshang-qianduan/src/views/foundation/product-development-factors.vue

<template>
  <div class="product-factors student-training-shell">
    <main class="factors-core">
      <section class="task-header">
        <div class="task-badge">
          <el-icon><Operation /></el-icon>
          核心实训 · 互联网产品开发基础
        </div>
        <h1 class="task-title">{{ taskTitle }}</h1>
      </section>

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

      <section class="factors-workbench">
      <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="`${step}-${index}`">
            <button
              type="button"
              :class="['step-tab', { active: currentStep === index, complete: currentStep > index }]"
              :aria-label="`切换至第 ${index + 1} 步：${step}`"
              :aria-current="currentStep === index ? 'step' : undefined"
              @click="currentStep = index"
            >
              <span class="step-marker" aria-hidden="true">{{ 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 ? '当前步骤' : '点击切换' }} <span aria-hidden="true">→</span></span>
              </span>
            </button>
            <span v-if="index < trainingSteps.length - 1" class="step-connector" aria-hidden="true" />
          </template>
        </nav>

        <section class="factor-step-card">
          <div v-if="trainingSteps.length" class="step-title-row">
            <div>
              <p class="section-eyebrow">第 {{ String(currentStep + 1).padStart(2, '0') }} 步</p>
              <h3>{{ trainingSteps[currentStep] }}</h3>
            </div>
          </div>

          <template v-if="currentStep === 0">
            <p class="factor-intro">用户角度分析，填写下表：</p>

            <div class="training-table-wrap">
            <table class="factor-table">
              <thead>
                <tr>
                  <th class="dimension-col">维度</th>
                  <th class="criteria-col">评估项</th>
                  <th>成功产品</th>
                  <th>失败产品</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="row in stepOneRows" :key="row.dimension">
                  <td class="dimension-cell">{{ row.dimension }}</td>
                  <td class="criteria-cell">{{ row.criteria }}</td>
                  <td>
                    <textarea
                      v-model="row.successAnalysis"
                      class="table-textarea"
                      placeholder="填写成功产品在该维度的分析"
                    />
                  </td>
                  <td>
                    <textarea
                      v-model="row.failedAnalysis"
                      class="table-textarea"
                      placeholder="填写失败产品在该维度的分析"
                    />
                  </td>
                </tr>
              </tbody>
            </table>
            </div>

            <div class="task-actions">
            <button type="button" class="btn-nav btn-submit" :disabled="saving" @click="saveAndGoToStepTwo">
              保存并进入第 2 步
            </button>
            <button type="button" class="btn-nav" :disabled="saving" @click="resetTraining">
              <el-icon><RefreshLeft /></el-icon>
              清空填写
            </button>
            </div>
          </template>

          <template v-else-if="currentStep === 1">
            <p class="factor-intro">技术与合规角度分析，填写下表：</p>
            <div class="training-table-wrap"><table class="factor-table"><thead><tr><th class="dimension-col">维度</th><th class="criteria-col">评估项</th><th>成功产品</th><th>失败产品</th></tr></thead><tbody>
              <tr v-for="row in stepTwoRows" :key="row.dimension"><td class="dimension-cell">{{ row.dimension }}</td><td class="criteria-cell">{{ row.criteria }}</td><td><textarea v-model="row.successAnalysis" class="table-textarea" placeholder="填写成功产品在该维度的分析" /></td><td><textarea v-model="row.failedAnalysis" class="table-textarea" placeholder="填写失败产品在该维度的分析" /></td></tr>
            </tbody></table></div>
            <div class="task-actions"><button type="button" class="btn-nav btn-submit" :disabled="saving" @click="saveAndGoToStepThree">保存并进入第 3 步</button><button type="button" class="btn-nav" :disabled="saving" @click="resetTraining"><el-icon><RefreshLeft /></el-icon>清空填写</button></div>
          </template>

          <template v-else-if="currentStep === 2">
            <p class="factor-intro">商业化及市场反馈角度分析，填写下表：</p>
            <div class="training-table-wrap"><table class="factor-table"><thead><tr><th class="dimension-col">维度</th><th class="criteria-col">评估项</th><th>成功产品</th><th>失败产品</th></tr></thead><tbody>
              <tr v-for="row in stepThreeRows" :key="row.dimension"><td class="dimension-cell">{{ row.dimension }}</td><td class="criteria-cell">{{ row.criteria }}</td><td><textarea v-model="row.successAnalysis" class="table-textarea" placeholder="填写成功产品在该维度的分析" /></td><td><textarea v-model="row.failedAnalysis" class="table-textarea" placeholder="填写失败产品在该维度的分析" /></td></tr>
            </tbody></table></div>
            <div class="task-actions"><button type="button" class="btn-nav btn-submit" :disabled="saving" @click="saveAndGoToStepFour">保存并进入第 4 步</button><button type="button" class="btn-nav" :disabled="saving" @click="resetTraining"><el-icon><RefreshLeft /></el-icon>清空填写</button></div>
          </template>

          <template v-else-if="currentStep === 3">
            <p class="factor-intro">结合案例信息及前述步骤，分析案例资料中产品一成功的关键因素是什么，产品二失败的关键因素是什么。</p>
            <label class="factor-intro">产品成功的关键因素：</label><textarea v-model="stepFourForm.successFactors" class="table-textarea summary-textarea" />
            <label class="factor-intro">产品失败的关键因素：</label><textarea v-model="stepFourForm.failedFactors" class="table-textarea summary-textarea" />
            <div class="task-actions"><button type="button" class="btn-nav btn-submit" :disabled="saving" @click="submitTraining">提交任务</button><button type="button" class="btn-nav" :disabled="saving" @click="resetTraining">清空填写</button></div>
          </template>
          <div v-else class="step-placeholder">
            <p>第 {{ currentStep + 1 }} 步内容待配置</p>
            <span>已保存的分析可从上方步骤栏返回查看。</span>
          </div>
        </section>
      </section>
    </main>

    <TrainingAiSidebar
      study-tip="当前任务请从用户角度对成功与失败产品完成三项对比分析。"
      reference-title="关键因素分析参考"
      reference-text="· 用户需求真实性：是否高频、真实、可付费<br />· 产品体验闭环：是否易用、稳定、反馈清晰<br />· 生态与兼容：是否支持主流平台与生态扩展"
      assist-text="请围绕每项评估要求，分别说明成功产品与失败产品的表现。"
      :progress-items="progressItems"
    />
  </div>
</template>

<script setup>
import { Download, Operation, RefreshLeft } from "@element-plus/icons-vue";
import { getTrainingTaskByKey } from "@/api/trainingTask";
import { parseTrainingArray } from "@/views/training/taskKeyMap";
import { checkProductDevelopmentFactorsStepOne, checkProductDevelopmentFactorsStepTwo, checkProductDevelopmentFactorsStepThree, checkProductDevelopmentFactorsStepFour, getStudentTrainingAnswer, saveStudentTrainingAnswer } from "@/api/studentTrainingAnswer";
import useUserStore from "@/store/modules/user";
import TrainingAiSidebar from "@/views/components/TrainingAiSidebar.vue";
import TrainingMaterialButton from "@/views/components/TrainingMaterialButton.vue";
import TrainingTaskBrief from "@/views/components/TrainingTaskBrief.vue";

const { proxy } = getCurrentInstance();
const TASK_KEY = "product-development-factors";
const userStore = useUserStore();
const taskConfig = ref(null);
const saving = ref(false);
const draftReady = ref(false);
const currentStep = ref(0);

const getLocalDraftKey = () => {
  const userInfo = userStore.userInfo || {};
  const userKey = userInfo.userId || userInfo.user_id || userInfo.username || userInfo.userName || "anonymous";
  return `${TASK_KEY}:draft:${userKey}`;
};

const defaultTask = {
  title: "产品开发关键因素",
  background:
    "智能产品开发不能只看技术亮点，还需要验证用户是否愿意为功能付费，产品是否稳定易用，供应链是否可控，商业模式是否清晰，并持续结合市场反馈迭代。",
  goals: [
    "理解产品开发成功与失败的核心判断维度。",
    "能够结合真实产品案例，分析关键成功因素和失败原因。",
    "形成面向后续产品规划、测试验证和上线运营的判断依据。",
  ],
  requirement: "请选择上一实训任务某款产品作为成功产品，分析关键成功因素，再分析一款失败产品原因。",
};

const taskTitle = computed(() => taskConfig.value?.taskName || defaultTask.title);
const taskBackground = computed(() => taskConfig.value?.background || defaultTask.background);
const taskGoals = computed(() => parseArray(taskConfig.value?.objectives, defaultTask.goals));
const taskRequirement = computed(() => taskConfig.value?.requirements || defaultTask.requirement);
const trainingSteps = computed(() => parseTrainingArray(taskConfig.value?.steps, []).slice(0, 4));

const STEP_ONE_FACTOR_ROWS = [
  {
    dimension: "用户需求真实性",
    criteria: "是否解决真实、高频、可付费的痛点，用户愿为该功能支付溢价，非“技术炫技”或“伪需求”",
  },
  {
    dimension: "产品体验闭环",
    criteria: "操作是否无需说明书，“零学习成本”？是否操作简单、反馈明确、稳定性高",
  },
  {
    dimension: "生态与兼容",
    criteria:
      "是否能接入主流平台？是否支持iOS/Android、HomeKit、米家、Alexa等生态？是否支持第三方开发者扩展，提供API或SDK，鼓励生态共建？",
  },
];
const STEP_TWO_FACTOR_ROWS = [
  { dimension: "技术应用", criteria: "核心技术是否已成熟、可量产？避免使用实验室级原型（如未验证的 AI 模型）" },
  { dimension: "合规与认证", criteria: "是否通过目标市场强制认证？目标市场要求的产品资质、检测报告等中国：CCC；美国：FCC；欧盟：CE；出口需符合 RoHS、REACH。是否规避专利与知识产权风险？" },
];
const STEP_THREE_FACTOR_ROWS = [
  { dimension: "供应链与成本控制", criteria: "产品成本是否可控？是否支持规模化？是否具备备选供应链？关键元器件（如芯片、传感器）有≥2家可替换供应商" },
  { dimension: "商业模式", criteria: "盈利模式是否清晰？硬件销售毛利率≥50%，或有订阅服务（如云存储、AI 功能包）。是否构建“数据 - 反馈 - 迭代”闭环？产品使用数据可回传，驱动功能优化与新版本开发" },
  { dimension: "市场反馈", criteria: "是否处于需求上升期？功能、设计、服务、品牌是否有差异化壁垒？用户是否高留存、高互动、低退货？" },
];

const createStepOneRows = () => STEP_ONE_FACTOR_ROWS.map((row) => ({
  ...row,
  successAnalysis: "",
  failedAnalysis: "",
}));
const createStepTwoRows = () => STEP_TWO_FACTOR_ROWS.map((row) => ({ ...row, successAnalysis: "", failedAnalysis: "" }));
const createStepThreeRows = () => STEP_THREE_FACTOR_ROWS.map((row) => ({ ...row, successAnalysis: "", failedAnalysis: "" }));
const stepOneRows = ref(createStepOneRows());
const stepTwoRows = ref(createStepTwoRows());
const stepThreeRows = ref(createStepThreeRows());
const stepFourForm = ref({ successFactors: "", failedFactors: "" });

const progressItems = [
  { text: "进行中：成功/失败产品对比", status: "doing" },
  { text: "进行中：三项关键因素分析", status: "doing" },
  { text: "待完成：导出实训成果", status: "" },
];

onMounted(async () => {
  await loadTaskConfig();
  loadDraft();
  await loadSavedAnswer();
  draftReady.value = true;
});

watch(
  () => JSON.stringify(buildDraft()),
  () => persistDraft()
);

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

async function loadSavedAnswer() {
  try {
    const res = await getStudentTrainingAnswer(TASK_KEY);
    const answer = res?.data;
    if (answer?.step1Answer) {
      stepOneRows.value = restoreRows(answer.step1Answer, createStepOneRows);
      clearDraft();
    }
    if (answer?.step2Answer) stepTwoRows.value = restoreRows(answer.step2Answer, createStepTwoRows);
    if (answer?.step3Answer) stepThreeRows.value = restoreRows(answer.step3Answer, createStepThreeRows);
    if (answer?.step4Answer) stepFourForm.value = { ...stepFourForm.value, ...parseSavedAnswer(answer.step4Answer) };
    restoreCurrentStep(answer?.currentStep);
  } catch (error) {
    // Keep local draft when the backend answer cannot be loaded.
  }
}

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

function parseSavedAnswer(value) {
  if (!value) return null;
  try {
    return JSON.parse(value);
  } catch (error) {
    return null;
  }
}

function restoreRows(value, createRows) {
  const parsed = parseSavedAnswer(value);
  if (!parsed || typeof parsed !== "object") {
    return createRows();
  }
  if (Array.isArray(parsed.factors)) {
    const savedByDimension = parsed.factors.reduce((map, row) => {
      if (row?.dimension) {
        map[row.dimension] = row;
      }
      return map;
    }, {});
    return createRows().map((row, index) => ({
      ...row,
      successAnalysis: savedByDimension[row.dimension]?.successAnalysis || parsed.factors[index]?.successAnalysis || "",
      failedAnalysis: savedByDimension[row.dimension]?.failedAnalysis || parsed.factors[index]?.failedAnalysis || "",
    }));
  }
  return createRows();
}

function restoreCurrentStep(savedStep) {
  const stepNumber = Number(savedStep);
  const targetIndex = stepNumber - 1;
  if (Number.isInteger(stepNumber) && targetIndex >= 0 && targetIndex < trainingSteps.value.length) {
    currentStep.value = targetIndex;
  }
}

function persistDraft() {
  if (!draftReady.value) return;
  try {
    localStorage.setItem(getLocalDraftKey(), JSON.stringify(buildDraft()));
  } catch (error) {
    // Local draft is only a convenience; backend save remains the source of truth.
  }
}

function loadDraft() {
  try {
    const raw = localStorage.getItem(getLocalDraftKey());
    if (raw) {
      const draft = parseSavedAnswer(raw);
      if (draft?.stepOne) stepOneRows.value = restoreRows(draft.stepOne, createStepOneRows);
      else stepOneRows.value = restoreRows(raw, createStepOneRows);
      if (draft?.stepTwo) stepTwoRows.value = restoreRows(draft.stepTwo, createStepTwoRows);
      if (draft?.stepThree) stepThreeRows.value = restoreRows(draft.stepThree, createStepThreeRows);
      if (draft?.stepFour) stepFourForm.value = { ...stepFourForm.value, ...draft.stepFour };
    }
  } catch (error) {
    clearDraft();
  }
}

function clearDraft() {
  try {
    localStorage.removeItem(getLocalDraftKey());
  } catch (error) {
    // Ignore browser storage failures.
  }
}

function buildStepOneOutcome() {
  return {
    title: taskTitle.value,
    factors: stepOneRows.value.map((row) => ({
      dimension: row.dimension,
      criteria: row.criteria,
      successAnalysis: row.successAnalysis,
      failedAnalysis: row.failedAnalysis,
    })),
  };
}
function buildStepTwoOutcome() { return { title: taskTitle.value, factors: stepTwoRows.value.map((row) => ({ dimension: row.dimension, criteria: row.criteria, successAnalysis: row.successAnalysis, failedAnalysis: row.failedAnalysis })) }; }
function buildStepThreeOutcome() { return { title: taskTitle.value, factors: stepThreeRows.value.map((row) => ({ dimension: row.dimension, criteria: row.criteria, successAnalysis: row.successAnalysis, failedAnalysis: row.failedAnalysis })) }; }
function buildStepFourOutcome() { return { successFactors: stepFourForm.value.successFactors, failedFactors: stepFourForm.value.failedFactors }; }
function buildDraft() { return { stepOne: buildStepOneOutcome(), stepTwo: buildStepTwoOutcome(), stepThree: buildStepThreeOutcome(), stepFour: buildStepFourOutcome(), currentStep: currentStep.value + 1 }; }

function buildStepOneValidationPayload() {
  return {
    factors: stepOneRows.value.map(({ dimension, successAnalysis, failedAnalysis }) => ({
      dimension,
      successAnalysis,
      failedAnalysis,
    })),
  };
}

function buildStepOneAnswerPayload(saveAction = "SAVE", persistedStep = currentStep.value + 1) {
  return {
    step1Answer: JSON.stringify(buildStepOneOutcome()),
    currentStep: persistedStep,
    submitted: false,
    saveAction,
  };
}
function buildStepTwoValidationPayload() { return { factors: stepTwoRows.value.map(({ dimension, successAnalysis, failedAnalysis }) => ({ dimension, successAnalysis, failedAnalysis })) }; }
function buildStepTwoAnswerPayload(saveAction = "SAVE", persistedStep = currentStep.value + 1) { return { step2Answer: JSON.stringify(buildStepTwoOutcome()), currentStep: persistedStep, submitted: false, saveAction }; }
function buildStepThreeValidationPayload() { return { factors: stepThreeRows.value.map(({ dimension, successAnalysis, failedAnalysis }) => ({ dimension, successAnalysis, failedAnalysis })) }; }
function buildStepThreeAnswerPayload(saveAction = "SAVE", persistedStep = currentStep.value + 1) { return { step3Answer: JSON.stringify(buildStepThreeOutcome()), currentStep: persistedStep, submitted: false, saveAction }; }
function buildStepFourValidationPayload() { return buildStepFourOutcome(); }
function buildStepFourAnswerPayload(saveAction = "SUBMIT", persistedStep = 4) { return { step4Answer: JSON.stringify(buildStepFourOutcome()), currentStep: persistedStep, submitted: true, saveAction }; }

async function saveAndGoToStepTwo() {
  if (saving.value) return;
  saving.value = true;
  try {
    await checkProductDevelopmentFactorsStepOne(buildStepOneValidationPayload());
    await saveStudentTrainingAnswer(TASK_KEY, buildStepOneAnswerPayload("SAVE", 2));
    clearDraft();
    if (trainingSteps.value.length < 2) {
      proxy?.$modal?.msgSuccess("已保存，当前任务尚未配置第 2 步");
      return;
    }
    currentStep.value = 1;
    proxy?.$modal?.msgSuccess("已保存，已进入第 2 步");
  } catch (error) {
    proxy?.$modal?.msgError?.(error?.message || "请完成三项成功产品和失败产品分析");
  } finally {
    saving.value = false;
  }
}

async function saveAndGoToStepThree() {
  if (saving.value) return;
  saving.value = true;
  try {
    await checkProductDevelopmentFactorsStepTwo(buildStepTwoValidationPayload());
    await saveStudentTrainingAnswer(TASK_KEY, buildStepTwoAnswerPayload("SAVE", 3));
    clearDraft();
    if (trainingSteps.value.length < 3) { proxy?.$modal?.msgSuccess("已保存，当前任务尚未配置第 3 步"); return; }
    currentStep.value = 2;
    proxy?.$modal?.msgSuccess("已保存，已进入第 3 步");
  } catch (error) { proxy?.$modal?.msgError?.(error?.message || "请完成技术应用和合规与认证分析"); } finally { saving.value = false; }
}

async function saveAndGoToStepFour() {
  if (saving.value) return;
  saving.value = true;
  try {
    await checkProductDevelopmentFactorsStepThree(buildStepThreeValidationPayload());
    await saveStudentTrainingAnswer(TASK_KEY, buildStepThreeAnswerPayload("SAVE", 4));
    clearDraft();
    if (trainingSteps.value.length < 4) { proxy?.$modal?.msgSuccess("已保存，当前任务尚未配置第 4 步"); return; }
    currentStep.value = 3;
    proxy?.$modal?.msgSuccess("已保存，已进入第 4 步");
  } catch (error) { proxy?.$modal?.msgError?.(error?.message || "请完成供应链与成本控制、商业模式和市场反馈分析"); } finally { saving.value = false; }
}
async function submitTraining() { if (saving.value) return; saving.value = true; try { await checkProductDevelopmentFactorsStepFour(buildStepFourValidationPayload()); await saveStudentTrainingAnswer(TASK_KEY, buildStepFourAnswerPayload("SUBMIT", 4)); clearDraft(); proxy?.$modal?.msgSuccess("任务提交成功"); } catch (error) { proxy?.$modal?.msgError?.(error?.message || "请完成关键因素分析"); } finally { saving.value = false; } }

async function resetTraining() {
  stepOneRows.value = createStepOneRows();
  stepTwoRows.value = createStepTwoRows();
  stepThreeRows.value = createStepThreeRows();
  stepFourForm.value = { successFactors: "", failedFactors: "" };
  currentStep.value = 0;
  clearDraft();
  try {
    saving.value = true;
    await saveStudentTrainingAnswer(TASK_KEY, buildStepOneAnswerPayload("RESET", 1));
  } catch (error) {
    // Clearing the page should still work locally even when backend reset fails.
  } finally {
    saving.value = false;
  }
  proxy?.$modal?.msgSuccess("已清空填写内容");
}

function exportOutcome() {
  const outcome = buildDraft();
  const blob = new Blob([JSON.stringify(outcome, null, 2)], { type: "application/json;charset=utf-8" });
  const url = URL.createObjectURL(blob);
  const link = document.createElement("a");
  link.href = url;
  link.download = "产品开发关键因素-实训成果.json";
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
  URL.revokeObjectURL(url);
  proxy?.$modal?.msgSuccess("导出成功");
}
</script>

<style lang="scss" scoped>
.product-factors {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(720px, 1fr) 340px;
  gap: 24px;
  width: 100%;
  min-height: calc(100vh - 106px);
  padding: 24px 24px 32px;
  color: #e8f7ff;
  background: transparent;
}

.factors-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;
  align-items: center;
  gap: 7px;
  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: transparent;
  background: linear-gradient(135deg, #ffffff, #8bcbff);
  -webkit-background-clip: text;
  background-clip: text;
  font-size: 30px;
  line-height: 1.3;
  font-weight: 900;
  letter-spacing: 0;
}

.goal-bg {
  margin-bottom: 28px;
  padding: 16px 20px;
  border: 1px solid #2d5f7e;
  border-radius: 24px;
  background: rgba(0, 35, 55, 0.6);

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

.subtitle-icon {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  color: #b9e2ff;
  font-weight: 800;
}

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

.factors-workbench {
  margin: 0;
  padding: 18px 22px;
  border: 1px solid rgba(82, 174, 226, 0.42);
  border-radius: 26px;
  background: rgba(0, 25, 42, 0.64);
  box-shadow: none;
  backdrop-filter: none;
}

/* The legacy training wrapper injects a task pill through ::before. */
.factors-workbench::before {
  content: none !important;
  display: none !important;
}

.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);

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

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

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

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

.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;
  cursor: pointer;
  text-align: left;
  transition: transform 0.2s ease, color 0.2s ease, border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;

  &:hover {
    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);
    transform: translateY(-2px);

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

  &:focus-visible {
    outline: 2px solid #72e8ff;
    outline-offset: 4px;
  }

  &.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;
  background: rgba(98, 169, 201, 0.34);

  &::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;
  }
}

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

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

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

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

.table-textarea {
  width: 100%;
  border: 1px solid rgba(45, 95, 126, 0.95);
  border-radius: 14px;
  outline: none;
  color: #eef5ff;
  background: #0f1a24;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;

  &::placeholder {
    color: #8299aa;
  }

  &:focus {
    border-color: rgba(92, 224, 255, 0.7);
    box-shadow: 0 0 0 3px rgba(0, 174, 255, 0.13);
  }
}

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

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

  th {
    padding: 12px;
    border-right: 1px solid rgba(77, 167, 220, 0.2);
    color: #eaffff;
    background: rgba(8, 55, 82, 0.98);
    font-size: 14px;
    font-weight: 900;
    text-align: center;
  }

  td {
    min-height: 118px;
    padding: 12px;
    border-top: 1px solid rgba(77, 167, 220, 0.2);
    border-right: 1px solid rgba(77, 167, 220, 0.2);
    color: #d7f1ff;
    background: rgba(1, 14, 26, 0.48);
    vertical-align: top;
  }

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

.dimension-col {
  width: 190px;
}

.criteria-col {
  width: 300px;
}

.dimension-cell {
  color: #eafaff;
  font-size: 14px;
  font-weight: 900;
  text-align: center;
}

.criteria-cell {
  color: #cfe8f8;
  font-size: 14px;
  line-height: 1.7;
  text-align: center;
}

.table-textarea {
  min-height: 104px;
  resize: vertical;
  padding: 12px 14px;
  line-height: 1.6;
}

.factor-intro {
  margin: 0 0 18px;
  color: #d7ecff;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.8;
}

.step-placeholder {
  display: grid;
  place-items: center;
  min-height: 280px;
  padding: 28px;
  border: 1px dashed rgba(101, 207, 239, 0.42);
  border-radius: 18px;
  color: #b8d9ec;
  background: rgba(1, 14, 26, 0.42);
  text-align: center;

  p {
    margin: 0 0 8px;
    color: #eaffff;
    font-size: 20px;
    font-weight: 800;
  }

  span {
    font-size: 14px;
    line-height: 1.7;
  }
}

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

.outline-action,
.btn-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: inherit;
  cursor: pointer;
}

.outline-action {
  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-weight: 800;
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;

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

.workbench-actions .outline-action {
  min-width: 0 !important;
  min-height: 40px !important;
  height: 40px !important;
  padding: 0 18px !important;
  border: 1px solid rgba(99, 217, 255, 0.55) !important;
  border-radius: 999px !important;
  color: #e9fbff !important;
  background: rgba(17, 126, 178, 0.36) !important;
  box-shadow: none !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

.workbench-actions :deep(.material-download) {
  min-height: 40px !important;
  padding: 0 18px !important;
  border-color: rgba(99, 217, 255, 0.55) !important;
  border-radius: 999px !important;
  color: #e9fbff !important;
  background: rgba(17, 126, 178, 0.36) !important;
  box-shadow: none !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

.workbench-actions :deep(.material-download:hover) {
  transform: translateY(-1px);
  border-color: rgba(116, 235, 255, 0.85) !important;
  color: #e9fbff !important;
  background: rgba(18, 146, 204, 0.5) !important;
}

.btn-nav {
  display: inline-flex;
  min-width: 172px;
  min-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;
}

.btn-submit {
  border-color: #2c83aa;
  color: #dff7ff;
  background: rgba(13, 64, 88, 0.62);
}

.task-actions .btn-nav .el-icon {
  display: none;
}

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

@media (max-width: 1100px) {
  .product-factors {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .product-factors {
    padding: 14px 14px 18px;
  }

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

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

  .step-indicator {
    width: 100%;
    margin: 0 0 32px;
    padding: 16px;
    overflow-x: visible;
    border-radius: 20px;
  }

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

  .step-connector {
    flex: 0 0 20px;
    align-self: flex-start;
    width: 2px;
    min-width: 0;
    height: 20px;
    margin: 4px 0 4px 18px;

    &::after {
      top: auto;
      right: auto;
      bottom: -1px;
      left: 50%;
      transform: translateX(-50%) rotate(135deg);
    }
  }

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