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

<template>
  <div class="product-process student-training-shell">
    <main class="process-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="process-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 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="currentStep = 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" />
          </template>
        </nav>

        <section class="process-step-card">
          <template v-if="currentStep === 1">
            <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="process-intro">互联网产品开发在拆解任务之前，团队必须先明确做什么样的产品、开发过程中有哪些卡点。这是后续排期的前提。请判断哪些开发环节需要特别关注：关键任务会影响全项目进度与最终落地效果，非关键任务可在核心任务约束下灵活协调。</p>

            <div class="training-table-wrap">
              <table class="process-table">
                <thead><tr><th>阶段</th><th>任务编号</th><th>具体工作任务</th><th>是否关键任务</th></tr></thead>
                <tbody>
                  <tr v-for="row in processRows" :key="row.taskNo" :class="feedbackClass(row.taskNo)">
                    <td class="stage-cell">{{ row.stage }}</td>
                    <td class="task-no-cell">{{ row.taskNo }}</td>
                    <td class="task-cell">{{ row.task }}</td>
                    <td class="select-cell">
                      <select v-model="row.classification" :disabled="checking" @change="clearFeedback(row.taskNo)">
                        <option value="" disabled>请选择</option>
                        <option v-for="option in CLASSIFICATION_OPTIONS" :key="option" :value="option">{{ option }}</option>
                      </select>
                      <p v-if="feedbackByTaskNo[row.taskNo]" class="classification-feedback">{{ feedbackByTaskNo[row.taskNo].message }}</p>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <p v-if="checkResult" class="classification-summary" :class="{ 'is-success': checkResult.allCorrect }">本次判题：{{ checkResult.correctCount }} / {{ checkResult.totalCount }} 项分类正确</p>
            <div class="task-actions">
              <button type="button" class="btn-nav btn-submit" :disabled="checking" @click="saveAndGoToStepTwo">{{ checking ? '判题中…' : '保存并进入第 2 步' }}</button>
              <button type="button" class="btn-nav" :disabled="checking" @click="resetTraining"><el-icon><RefreshLeft /></el-icon>清空填写</button>
            </div>
          </template>
          <template v-else-if="currentStep === 2">
            <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="process-intro">将开发一款互联网产品的模糊目标，拆解为可执行的具体工作任务。根据案例信息，填写参考工期和项目依赖关系。</p>
            <p v-if="!hasCompletedStepOne" class="step-warning">请先完成第 1 步并判题通过；关键任务结果会自动带入本表。</p>
            <div class="training-table-wrap">
              <table class="process-table schedule-table">
                <thead><tr><th>阶段</th><th>任务编号</th><th>具体工作任务</th><th>是否关键任务</th><th>开始时间</th><th>完成时间</th><th>项目依赖关系</th></tr></thead>
                <tbody>
                  <tr v-for="row in processRows" :key="row.taskNo">
                    <td class="stage-cell">{{ row.stage }}</td>
                    <td class="task-no-cell">{{ row.taskNo }}</td>
                    <td class="task-cell">{{ row.task }}</td>
                    <td class="classification-cell">{{ row.classification || '—' }}</td>
                    <td><input v-model="row.startDate" type="date" :disabled="!hasCompletedStepOne || checking" /></td>
                    <td><input v-model="row.endDate" type="date" :disabled="!hasCompletedStepOne || checking" /></td>
                    <td><input v-model.trim="row.dependency" class="dependency-input" :disabled="!hasCompletedStepOne || checking" placeholder="如：1.1；无" maxlength="100" /></td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div class="task-actions">
              <button type="button" class="btn-nav btn-submit" :disabled="checking || !hasCompletedStepOne" @click="saveAndGoToStepThree">{{ checking ? '校验中…' : '保存并进入第 3 步' }}</button>
              <button type="button" class="btn-nav" :disabled="checking" @click="resetStepTwo"><el-icon><RefreshLeft /></el-icon>清空本步</button>
            </div>
          </template>
          <template v-else-if="currentStep === 3">
            <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="process-intro">根据上表数据，使用工具绘制甘特图，并上传。</p>
            <p v-if="!stepTwoPassed" class="step-warning">请先保存第 2 步项目排期，再上传甘特图。</p>
            <section class="gantt-upload-panel">
              <label class="gantt-upload-trigger" :class="{ disabled: !stepTwoPassed || uploadingGantt }">
                <input type="file" accept="image/png,image/jpeg,image/webp,image/gif" :disabled="!stepTwoPassed || uploadingGantt" @change="uploadGanttImage" />
                <el-icon><Upload /></el-icon>
                <strong>{{ uploadingGantt ? '上传中…' : ganttImage.url ? '替换甘特图' : '上传甘特图' }}</strong>
                <span>支持 PNG、JPG、JPEG、WEBP、GIF</span>
              </label>
              <figure v-if="ganttImage.url" class="gantt-preview">
                <img :src="ganttImage.url" alt="已上传的甘特图" @click="previewGanttImage" />
                <figcaption>{{ ganttImage.name }}</figcaption>
              </figure>
            </section>
            <section class="gantt-guide">
              <h4>推荐工具如下，自行选择作图工具：</h4>
              <ol>
                <li>Excel/WPS表格，利用堆积条形图制作，可参考《实训操作说明》完成。<button type="button" @click="downloadPracticeGuide">下载实训操作说明</button></li>
                <li>下载Excel模板，填写关键信息，完成甘特图绘制。<button type="button" @click="downloadGanttTemplate">下载甘特图绘制模板</button></li>
                <li>导出步骤二信息表，上传到通用AI绘图模型，通过大模型绘制甘特图。参考提示词：请根据产品WBS任务拆解与排期表生成甘特图用于后续项目管理。</li>
              </ol>
            </section>
            <div class="task-actions">
              <button type="button" class="btn-nav btn-submit" :disabled="uploadingGantt || !stepTwoPassed" @click="saveAndGoToStepFour">保存并进入第 4 步</button>
              <button type="button" class="btn-nav" :disabled="uploadingGantt" @click="resetStepThree"><el-icon><RefreshLeft /></el-icon>清空本步</button>
            </div>
          </template>
          <template v-else-if="currentStep === 4">
            <div class="step-title-row">
              <div><p class="section-eyebrow">Step 04</p><h3>{{ trainingSteps[3] }}</h3></div>
              <span class="step-chip">并行协同复盘</span>
            </div>
            <p v-if="!stepThreePassed" class="step-warning">请先上传并保存第 3 步甘特图，再完成本步复盘。</p>
            <section class="process-reflection" :class="{ disabled: !stepThreePassed }">
              <label class="reflection-field">
                <span>（1）观察甘特图，思考电商运营在产品开发过程中，可以提前介入同步完成哪些工作，以缩短运营周期、提高效率。（如“预热蓄水”“内容种草”等）</span>
                <textarea v-model.trim="stepFourForm.parallelWorkAnalysis" :disabled="!stepThreePassed || checking" placeholder="请结合甘特图说明可同步推进的电商运营工作、介入节点及预期效率提升" />
              </label>
              <div class="reflection-question">（2）在互联网产品开发管理中，你认为哪些环节可以借助AI工具提升效率？请列举至少2个具体应用场景。</div>
              <div class="scenario-grid">
                <label class="reflection-field"><span>场景1：</span><textarea v-model.trim="stepFourForm.aiScenarioOne" :disabled="!stepThreePassed || checking" placeholder="例如：使用 AI 汇总竞品评价与用户需求，辅助生成PRD初稿" /></label>
                <label class="reflection-field"><span>场景2：</span><textarea v-model.trim="stepFourForm.aiScenarioTwo" :disabled="!stepThreePassed || checking" placeholder="例如：使用 AI 生成电商详情页文案、主图脚本或运营素材" /></label>
              </div>
            </section>
            <div class="task-actions">
              <button type="button" class="btn-nav btn-submit" :disabled="checking || !stepThreePassed" @click="submitTraining">提交任务</button>
              <button type="button" class="btn-nav" :disabled="checking" @click="resetStepFour"><el-icon><RefreshLeft /></el-icon>清空本步</button>
            </div>
          </template>
          <div v-else class="step-placeholder"><p>第 {{ currentStep }} 步内容待配置</p><span>第 1 步答案已保存，可从上方步骤栏返回查看。</span></div>
        </section>
      </section>
    </main>

    <TrainingAiSidebar
      study-tip="请根据产品开发流程中任务对总进度和最终落地效果的影响，判断其是否为关键任务。"
      reference-title="关键任务判断提示"
      reference-text="· 关键任务：直接影响产品定义、核心技术验证、量产交付或上市节奏<br />· 非关键任务：可在核心任务约束下进行资源协调，不直接阻塞整体排期"
      :progress-items="progressItems"
    />
  </div>
</template>

<script setup>
import { Download, Operation, RefreshLeft, Upload } from "@element-plus/icons-vue";
import * as XLSX from "xlsx";
import { checkProductDevelopmentProcessStepOne, checkProductDevelopmentProcessStepTwo, checkProductDevelopmentProcessStepThree, checkProductDevelopmentProcessStepFour, getStudentTrainingAnswer, saveStudentTrainingAnswer, uploadStudentTrainingFile } from "@/api/studentTrainingAnswer";
import { getTrainingTaskByKey } from "@/api/trainingTask";
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 userStore = useUserStore();
const TASK_KEY = "product-development-process";
const CLASSIFICATION_OPTIONS = ["关键任务", "非关键任务"];
const DEFAULT_STEPS = ["产品开发关键任务识别", "任务依赖关系分析", "开发排期制定", "流程复盘优化"];
const PROCESS_TASKS = [
  ["需求锚定", "1.1", "竞品调研与用户需求分析"], ["", "1.2", "产品概念确认与核心卖点提炼"],
  ["产品定义", "2.1", "产品需求文档（PRD）撰写与评审"], ["", "2.2", "外观ID设计"], ["", "2.3", "功能规格确认"],
  ["开发验证", "3.1", "硬件方案选型与原理图设计"], ["", "3.2", "软件架构及软硬件协同设计"], ["", "3.3", "结构设计评审"], ["", "3.4", "功能手板制作与外观评审"], ["", "3.5", "工程验证测试与设计验证测试"], ["", "3.6", "PVT小批量试产"],
  ["供应链对接", "4.1", "供应商评估与选定"], ["", "4.2", "模具正式开模与试模修模"], ["", "4.3", "产品认证及质量检测"], ["", "4.4", "BOM成本核算与采购合同签订"],
  ["上市推广", "5.1", "产品量产及入库"], ["", "5.2", "电商详情页全渠道上线"], ["", "5.3", "正式开售与首销爆发"], ["", "5.4", "首批用户评价监控与差评预警"],
];
const defaultTask = {
  title: "产品开发主要流程",
  background: "产品开发需要识别影响整体交付、量产和上市节奏的关键环节，并据此安排资源与排期。",
  goals: ["理解产品开发的主要阶段与任务", "识别影响项目整体进度的关键任务", "形成后续排期和资源协调的判断依据"],
  requirement: "请按任务对整体开发进度和最终落地效果的影响，判断其为关键任务或非关键任务。",
};

const taskConfig = ref(null);
const processRows = ref(createProcessRows());
const currentStep = ref(1);
const checking = ref(false);
const draftReady = ref(false);
const checkResult = ref(null);
const stepOnePassed = ref(false);
const stepTwoPassed = ref(false);
const stepThreePassed = ref(false);
const ganttImage = ref({ url: "", name: "" });
const uploadingGantt = ref(false);
const stepFourForm = ref({ parallelWorkAnalysis: "", aiScenarioOne: "", aiScenarioTwo: "" });
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(() => parseArray(taskConfig.value?.steps, DEFAULT_STEPS));
const feedbackByTaskNo = computed(() => Object.fromEntries((checkResult.value?.items || []).map((item) => [item.taskNo, item])));
const hasCompletedStepOne = computed(() => stepOnePassed.value);
const progressItems = computed(() => [
  { text: `进行中：${trainingSteps.value[Math.max(0, currentStep.value - 1)] || taskTitle.value}`, status: "doing" },
  { text: "完成本步后进入第 2 步", status: "" },
  { text: "可选：导出实训成果", status: "" },
]);

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

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

function createProcessRows() {
  return PROCESS_TASKS.map(([stage, taskNo, task]) => ({ stage, taskNo, task, classification: "", startDate: "", endDate: "", dependency: "" }));
}

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.map((item) => String(item?.name ?? item).trim()).filter(Boolean) : fallback;
  } catch (error) {
    const list = String(value).split(/[；;|]/).map((item) => item.trim()).filter(Boolean);
    return list.length ? list : fallback;
  }
}

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

async function loadSavedAnswer() {
  try {
    const answer = (await getStudentTrainingAnswer(TASK_KEY))?.data;
    if (answer?.step1Answer) {
      restoreOutcome(answer.step1Answer);
      stepOnePassed.value = processRows.value.every((row) => CLASSIFICATION_OPTIONS.includes(row.classification));
      clearDraft();
    }
    if (answer?.step2Answer) restoreStepTwoOutcome(answer.step2Answer);
    if (answer?.step2Answer) stepTwoPassed.value = true;
    if (answer?.step3Answer) {
      restoreStepThreeOutcome(answer.step3Answer);
      stepThreePassed.value = true;
    }
    if (answer?.step4Answer) restoreStepFourOutcome(answer.step4Answer);
    const savedStep = Number(answer?.currentStep);
    if (Number.isInteger(savedStep) && savedStep > 0) currentStep.value = savedStep;
  } catch (error) {
    // Keep the browser draft available while the answer endpoint is unavailable.
  }
}

function restoreOutcome(value) {
  try {
    const parsed = typeof value === "string" ? JSON.parse(value) : value;
    const savedRows = Array.isArray(parsed?.items) ? parsed.items : [];
    const byTaskNo = Object.fromEntries(savedRows.map((item) => [item.taskNo, item]));
    processRows.value = createProcessRows().map((row) => ({ ...row, classification: byTaskNo[row.taskNo]?.classification || "" }));
  } catch (error) {
    processRows.value = createProcessRows();
  }
}

function restoreStepTwoOutcome(value) {
  try {
    const parsed = typeof value === "string" ? JSON.parse(value) : value;
    const byTaskNo = Object.fromEntries((Array.isArray(parsed?.items) ? parsed.items : []).map((item) => [item.taskNo, item]));
    processRows.value = processRows.value.map((row) => ({
      ...row,
      startDate: byTaskNo[row.taskNo]?.startDate || "",
      endDate: byTaskNo[row.taskNo]?.endDate || "",
      dependency: byTaskNo[row.taskNo]?.dependency || "",
    }));
  } catch (error) {
    // Ignore a malformed historical second-step answer.
  }
}

function restoreStepThreeOutcome(value) {
  try {
    const parsed = typeof value === "string" ? JSON.parse(value) : value;
    ganttImage.value = { url: parsed?.ganttImageUrl || "", name: parsed?.ganttImageName || "" };
  } catch (error) {
    ganttImage.value = { url: "", name: "" };
  }
}

function restoreStepFourOutcome(value) {
  try {
    const parsed = typeof value === "string" ? JSON.parse(value) : value;
    stepFourForm.value = {
      parallelWorkAnalysis: parsed?.parallelWorkAnalysis || "",
      aiScenarioOne: parsed?.aiScenarioOne || "",
      aiScenarioTwo: parsed?.aiScenarioTwo || "",
    };
  } catch (error) {
    stepFourForm.value = { parallelWorkAnalysis: "", aiScenarioOne: "", aiScenarioTwo: "" };
  }
}

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

function buildOutcome() {
  return { title: taskTitle.value, items: processRows.value.map(({ taskNo, classification }) => ({ taskNo, classification })) };
}

function buildStepTwoOutcome() {
  return {
    title: taskTitle.value,
    items: processRows.value.map(({ taskNo, classification, startDate, endDate, dependency }) => ({ taskNo, classification, startDate, endDate, dependency })),
  };
}

function buildStepThreeOutcome() {
  return { title: taskTitle.value, ganttImageUrl: ganttImage.value.url, ganttImageName: ganttImage.value.name };
}

function buildStepFourOutcome() {
  return { ...stepFourForm.value };
}

function buildDraft() { return { step1: buildOutcome(), step2: buildStepTwoOutcome(), step3: buildStepThreeOutcome(), step4: buildStepFourOutcome(), currentStep: currentStep.value }; }

function persistDraft() {
  if (!draftReady.value) return;
  try { localStorage.setItem(getLocalDraftKey(), JSON.stringify(buildDraft())); } catch (error) { /* Browser draft is optional. */ }
}

function loadDraft() {
  try {
    const raw = localStorage.getItem(getLocalDraftKey());
    if (raw) {
      const draft = JSON.parse(raw);
      restoreOutcome(draft?.step1 || draft);
      if (draft?.step2) restoreStepTwoOutcome(draft.step2);
      if (draft?.step3) restoreStepThreeOutcome(draft.step3);
      if (draft?.step4) restoreStepFourOutcome(draft.step4);
      if (Number(draft?.currentStep) > 0) currentStep.value = Number(draft.currentStep);
    }
  } catch (error) { clearDraft(); }
}

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

function feedbackClass(taskNo) {
  const feedback = feedbackByTaskNo.value[taskNo];
  return feedback ? (feedback.correct ? "is-correct" : "is-incorrect") : "";
}

function clearFeedback(taskNo) {
  if (!feedbackByTaskNo.value[taskNo]) return;
  checkResult.value = { ...checkResult.value, items: checkResult.value.items.filter((item) => item.taskNo !== taskNo) };
}

async function saveAndGoToStepTwo() {
  if (checking.value) return;
  checking.value = true;
  try {
    const response = await checkProductDevelopmentProcessStepOne(buildOutcome().items);
    checkResult.value = response?.data || null;
    if (!checkResult.value?.allCorrect) {
      proxy?.$modal?.msgError?.("存在分类错误，请根据提示修改后再进入第 2 步");
      return;
    }
    await saveStudentTrainingAnswer(TASK_KEY, { step1Answer: JSON.stringify(buildOutcome()), currentStep: 2, submitted: false, saveAction: "SAVE" });
    clearDraft();
    stepOnePassed.value = true;
    currentStep.value = 2;
    proxy?.$modal?.msgSuccess("已保存，已进入第 2 步");
  } catch (error) {
    proxy?.$modal?.msgError?.(error?.message || "请完成全部任务分类后再判题");
  } finally {
    checking.value = false;
  }
}

async function resetTraining() {
  processRows.value = createProcessRows();
  currentStep.value = 1;
  checkResult.value = null;
  stepOnePassed.value = false;
  stepTwoPassed.value = false;
  stepThreePassed.value = false;
  ganttImage.value = { url: "", name: "" };
  stepFourForm.value = { parallelWorkAnalysis: "", aiScenarioOne: "", aiScenarioTwo: "" };
  clearDraft();
  try {
    checking.value = true;
    await saveStudentTrainingAnswer(TASK_KEY, { step1Answer: JSON.stringify(buildOutcome()), currentStep: 1, submitted: false, saveAction: "RESET" });
  } catch (error) {
    // The local reset remains effective if the backend is temporarily unavailable.
  } finally {
    checking.value = false;
  }
  proxy?.$modal?.msgSuccess("已清空填写内容");
}

async function saveAndGoToStepThree() {
  if (checking.value || !hasCompletedStepOne.value) return;
  checking.value = true;
  try {
    await checkProductDevelopmentProcessStepTwo(buildStepTwoOutcome().items);
    await saveStudentTrainingAnswer(TASK_KEY, { step2Answer: JSON.stringify(buildStepTwoOutcome()), currentStep: 3, submitted: false, saveAction: "SAVE" });
    clearDraft();
    stepTwoPassed.value = true;
    currentStep.value = 3;
    proxy?.$modal?.msgSuccess("已保存，已进入第 3 步");
  } catch (error) {
    proxy?.$modal?.msgError?.(error?.message || "请完整填写任务工期和项目依赖关系");
  } finally {
    checking.value = false;
  }
}

function resetStepTwo() {
  processRows.value = processRows.value.map((row) => ({ ...row, startDate: "", endDate: "", dependency: "" }));
  proxy?.$modal?.msgSuccess("已清空第 2 步填写内容");
}

async function uploadGanttImage(event) {
  const file = event.target.files?.[0];
  if (!file || !stepTwoPassed.value) return;
  if (!/^image\/(png|jpeg|webp|gif)$/i.test(file.type)) {
    proxy?.$modal?.msgError?.("请上传 PNG、JPG、JPEG、WEBP 或 GIF 格式的甘特图");
    event.target.value = "";
    return;
  }
  uploadingGantt.value = true;
  try {
    const formData = new FormData();
    formData.append("file", file);
    const response = await uploadStudentTrainingFile(formData);
    ganttImage.value = {
      url: response?.url || response?.fileName || "",
      name: response?.originalFilename || file.name,
    };
    if (!ganttImage.value.url) throw new Error("上传结果缺少文件地址");
    proxy?.$modal?.msgSuccess("甘特图上传成功");
  } catch (error) {
    ganttImage.value = { url: "", name: "" };
    proxy?.$modal?.msgError?.(error?.message || "甘特图上传失败");
  } finally {
    uploadingGantt.value = false;
    event.target.value = "";
  }
}

async function saveAndGoToStepFour() {
  if (uploadingGantt.value || !stepTwoPassed.value) return;
  checking.value = true;
  try {
    await checkProductDevelopmentProcessStepThree(buildStepThreeOutcome());
    await saveStudentTrainingAnswer(TASK_KEY, { step3Answer: JSON.stringify(buildStepThreeOutcome()), currentStep: 4, submitted: false, saveAction: "SAVE" });
    clearDraft();
    stepThreePassed.value = true;
    currentStep.value = 4;
    proxy?.$modal?.msgSuccess("已保存，已进入第 4 步");
  } catch (error) {
    proxy?.$modal?.msgError?.(error?.message || "请先上传甘特图");
  } finally {
    checking.value = false;
  }
}

function resetStepThree() {
  ganttImage.value = { url: "", name: "" };
  proxy?.$modal?.msgSuccess("已清空第 3 步上传内容");
}

async function submitTraining() {
  if (checking.value || !stepThreePassed.value) return;
  checking.value = true;
  try {
    await checkProductDevelopmentProcessStepFour(buildStepFourOutcome());
    await saveStudentTrainingAnswer(TASK_KEY, { step4Answer: JSON.stringify(buildStepFourOutcome()), currentStep: 4, submitted: true, saveAction: "SUBMIT" });
    clearDraft();
    proxy?.$modal?.msgSuccess("任务提交成功");
  } catch (error) {
    proxy?.$modal?.msgError?.(error?.message || "请完成并行协同复盘与两个AI应用场景");
  } finally {
    checking.value = false;
  }
}

function resetStepFour() {
  stepFourForm.value = { parallelWorkAnalysis: "", aiScenarioOne: "", aiScenarioTwo: "" };
  proxy?.$modal?.msgSuccess("已清空第 4 步填写内容");
}

function previewGanttImage() {
  window.open(ganttImage.value.url, "_blank", "noopener,noreferrer");
}

function downloadPracticeGuide() {
  const content = [
    "产品开发甘特图实训操作说明",
    "1. 使用第 2 步填写的任务编号、开始时间、完成时间和项目依赖关系建立任务表。",
    "2. 在 Excel 或 WPS 中按日期轴创建堆积条形图；开始时间作为不可见基线，任务工期作为可见条形。",
    "3. 为关键任务使用醒目颜色，并标注任务名称、开始及完成时间。",
    "4. 导出或截图为 PNG/JPG 后上传至本步骤。",
  ].join("\n");
  downloadBlob(new Blob([content], { type: "text/plain;charset=utf-8" }), "产品开发甘特图-实训操作说明.txt");
}

function downloadGanttTemplate() {
  const rows = processRows.value.map((row) => ({
    阶段: row.stage,
    任务编号: row.taskNo,
    具体工作任务: row.task,
    是否关键任务: row.classification,
    开始时间: row.startDate,
    完成时间: row.endDate,
    项目依赖关系: row.dependency,
  }));
  const sheet = XLSX.utils.json_to_sheet(rows);
  sheet["!cols"] = [{ wch: 16 }, { wch: 12 }, { wch: 32 }, { wch: 16 }, { wch: 14 }, { wch: 14 }, { wch: 24 }];
  const workbook = XLSX.utils.book_new();
  XLSX.utils.book_append_sheet(workbook, sheet, "甘特图任务表");
  XLSX.writeFile(workbook, "产品开发甘特图绘制模板.xlsx");
}

function downloadBlob(blob, filename) {
  const url = URL.createObjectURL(blob);
  const link = document.createElement("a");
  link.href = url;
  link.download = filename;
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
  URL.revokeObjectURL(url);
}

function exportOutcome() {
  const blob = new Blob([JSON.stringify(buildDraft(), 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-process { display: grid; grid-template-columns: minmax(720px, 1fr) 340px; gap: 24px; min-height: calc(100vh - 106px); padding: 24px; color: #e8f7ff; background: #06111d; }
.process-core, .process-workbench { min-width: 0; }
.process-core { border: 1px solid rgba(0, 180, 255, .25); background: rgba(8, 18, 28, .6); box-shadow: 0 22px 48px rgba(0,0,0,.22); }
.task-header { padding: 22px 28px 4px; }.task-badge, .section-eyebrow { color: #65dcff; font-weight: 700; }.task-title { margin: 10px 0 0; color: #fff; font-size: 28px; }
.process-workbench { margin: 24px; padding: 22px; border: 1px solid rgba(33, 194, 255, .35); border-radius: 20px; background: rgba(1, 24, 39, .72); }
.workbench-actions, .task-actions { display: flex; align-items: center; gap: 12px; }.workbench-actions { justify-content: flex-end; }.outline-action, .btn-nav { border: 1px solid #2cc9ff; border-radius: 999px; padding: 10px 18px; color: #dff8ff; background: rgba(8, 87, 121, .55); cursor: pointer; }.outline-action { display: inline-flex; align-items: center; gap: 6px; }
.step-indicator { display: flex; align-items: center; gap: 12px; margin: 28px 0; padding: 12px; border: 1px solid rgba(30, 190, 255, .28); border-radius: 22px; }.step-tab { display: flex; align-items: center; flex: 1; gap: 10px; min-width: 0; padding: 10px; border: 0; border-radius: 16px; color: #96c6d8; background: transparent; text-align: left; cursor: pointer; }.step-tab.active { color: #fff; background: linear-gradient(110deg, #148fc6, #0879aa); }.step-marker { display: grid; place-items: center; flex: 0 0 42px; width: 42px; height: 42px; border: 1px solid #4ed7ff; border-radius: 50%; font-weight: 800; }.step-copy { display: grid; min-width: 0; gap: 4px; }.step-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.step-action { font-size: 12px; color: #5ec9ed; }.step-connector { flex: 0 0 25px; height: 2px; background: rgba(83, 204, 255, .4); }
.process-step-card { padding: 24px; border: 1px solid rgba(31, 185, 249, .32); border-radius: 18px; background: rgba(1, 21, 34, .65); }.step-title-row { display: flex; justify-content: space-between; align-items: flex-start; }.step-title-row h3 { margin: 5px 0 0; color: #fff; font-size: 24px; }.step-chip { border: 1px solid #38caff; border-radius: 999px; padding: 7px 12px; color: #9aeaff; }.process-intro { margin: 24px 0; line-height: 1.8; color: #c5e4ef; }.training-table-wrap { overflow-x: auto; }.process-table { width: 100%; min-width: 740px; border-collapse: collapse; color: #dff5ff; }.process-table th { padding: 14px; color: #fff; background: #079ed9; font-size: 16px; }.process-table td, .process-table th { border: 1px solid rgba(139, 213, 241, .45); text-align: center; }.process-table td { padding: 9px 12px; }.stage-cell { width: 16%; font-weight: 700; }.task-no-cell { width: 15%; }.task-cell { width: 37%; }.select-cell { width: 32%; }.select-cell select { width: 170px; max-width: 100%; padding: 6px 10px; border: 1px solid #6ea9bd; color: #132c36; background: #fff; font-size: 15px; }.classification-feedback { margin: 6px 0 0; color: #ff9b8f; font-size: 12px; }.is-correct { background: rgba(55, 196, 147, .08); }.is-incorrect { background: rgba(255, 91, 82, .1); }.classification-summary { margin: 16px 0 0; color: #ffbc86; }.classification-summary.is-success { color: #6ee8b1; }.task-actions { justify-content: center; margin-top: 26px; }.btn-submit { border-color: #36d9ff; background: linear-gradient(110deg, #0eaae4, #0572ac); font-weight: 700; }.btn-nav:disabled { opacity: .6; cursor: not-allowed; }.step-placeholder { padding: 90px 20px; text-align: center; color: #a8cfdd; }.step-placeholder p { color: #fff; font-size: 20px; }
.step-warning { margin: 0 0 16px; padding: 10px 14px; border: 1px solid rgba(255, 173, 93, .62); border-radius: 8px; color: #ffd19f; background: rgba(187, 102, 27, .16); }.schedule-table { min-width: 1180px; }.schedule-table .stage-cell { width: 13%; }.schedule-table .task-no-cell { width: 9%; }.schedule-table .task-cell { width: 20%; }.classification-cell { width: 13%; font-weight: 700; }.schedule-table input { box-sizing: border-box; width: 150px; max-width: 100%; padding: 7px 8px; border: 1px solid #6ea9bd; color: #132c36; background: #fff; }.schedule-table .dependency-input { width: 190px; }.schedule-table input:disabled { cursor: not-allowed; opacity: .6; }
.gantt-upload-panel { display: grid; justify-items: center; gap: 22px; min-height: 320px; padding: 32px 16px; border: 1px dashed rgba(71, 204, 255, .55); border-radius: 14px; background: radial-gradient(circle at center, rgba(15, 119, 163, .16), transparent 55%); }.gantt-upload-trigger { display: grid; place-items: center; align-content: center; gap: 9px; width: 280px; height: 138px; border-radius: 10px; color: #fff; background: linear-gradient(135deg, #0ba6e0, #0877ad); cursor: pointer; box-shadow: 0 14px 30px rgba(5, 126, 180, .24); }.gantt-upload-trigger input { position: absolute; width: 1px; height: 1px; opacity: 0; }.gantt-upload-trigger .el-icon { font-size: 26px; }.gantt-upload-trigger span { color: #cbefff; font-size: 12px; }.gantt-upload-trigger.disabled { cursor: not-allowed; opacity: .55; }.gantt-preview { width: min(100%, 760px); margin: 0; text-align: center; }.gantt-preview img { display: block; width: 100%; max-height: 410px; object-fit: contain; border: 1px solid rgba(84, 211, 255, .5); border-radius: 10px; background: #fff; cursor: zoom-in; }.gantt-preview figcaption { margin-top: 8px; color: #a8dce9; font-size: 13px; }.gantt-guide { margin-top: 26px; padding: 18px 22px; border-left: 3px solid #23c4ff; background: rgba(12, 75, 104, .22); color: #d4edf6; }.gantt-guide h4 { margin: 0 0 14px; color: #fff; }.gantt-guide ol { margin: 0; padding-left: 20px; }.gantt-guide li { margin: 11px 0; line-height: 1.7; }.gantt-guide button { margin-left: 12px; border: 0; border-radius: 6px; padding: 5px 10px; color: #fff; background: #109ed4; cursor: pointer; }
.process-reflection { display: grid; gap: 28px; }.reflection-field { display: grid; gap: 12px; color: #d8edf4; font-size: 16px; line-height: 1.7; }.reflection-field span { color: #f1fbff; font-weight: 600; }.reflection-field textarea { min-height: 190px; resize: vertical; border: 1px solid rgba(126, 212, 243, .6); border-radius: 8px; padding: 14px; color: #eafaff; background: rgba(3, 35, 53, .78); font: inherit; line-height: 1.7; }.reflection-field textarea:focus { outline: 2px solid rgba(47, 204, 255, .45); border-color: #45d2ff; }.reflection-field textarea:disabled { cursor: not-allowed; opacity: .55; }.reflection-question { color: #f1fbff; font-size: 16px; font-weight: 600; line-height: 1.8; }.scenario-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }.scenario-grid .reflection-field textarea { min-height: 180px; }.process-reflection.disabled { opacity: .72; }
@media (max-width: 1280px) { .product-process { grid-template-columns: 1fr; }.step-indicator { overflow-x: auto; }.step-tab { min-width: 190px; } }
@media (max-width: 720px) { .product-process { padding: 12px; }.process-workbench { margin: 12px; padding: 14px; }.task-header { padding: 18px; }.workbench-actions { justify-content: flex-start; flex-wrap: wrap; }.step-title-row { gap: 12px; }.step-chip { display: none; }.scenario-grid { grid-template-columns: 1fr; gap: 18px; } }
</style>