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">
          <div>
            <p class="section-eyebrow">Training Task</p>
            <h3>任务实训</h3>
            <p v-if="taskRequirement" class="workbench-description">{{ taskRequirement }}</p>
          </div>
          <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="实训步骤">
          <span v-for="(step, index) in trainingSteps" :key="`${step}-${index}`" class="step-tab" :class="{ active: index === 0 }">
            {{ step }}
          </span>
        </nav>

        <section class="factor-step-card">
          <div v-if="trainingSteps.length" class="step-title-row">
            <div>
              <p class="section-eyebrow">Step 01</p>
              <h3>{{ trainingSteps[0] }}</h3>
            </div>
          </div>

          <div class="product-entry">
          <label class="product-field">
            <span>成功产品：</span>
            <input v-model="form.successProduct" class="input-field input-single" placeholder="填写上一实训任务中的成功产品" />
          </label>
          <label class="product-field">
            <span>失败产品：</span>
            <input v-model="form.failedProduct" class="input-field input-single" placeholder="填写一个失败产品案例" />
          </label>
          </div>

          <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 factorRows" :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-save" :disabled="saving" @click="saveCurrentProgress">
            <el-icon><CircleCheck /></el-icon>
            保存当前进度
          </button>
          <button type="button" class="btn-nav btn-submit" :disabled="saving" @click="submitTask">
            提交任务
          </button>
          <button type="button" class="btn-nav" :disabled="saving" @click="resetTraining">
            <el-icon><RefreshLeft /></el-icon>
            清空填写
          </button>
          </div>
        </section>
      </section>
    </main>

    <TrainingAiSidebar
      study-tip="当前任务建议：先选定一个成功产品和一个失败产品，再围绕八个维度逐项补充证据。"
      reference-title="关键因素分析参考"
      reference-text="· 用户需求真实性：是否高频、真实、可付费<br />· 产品体验闭环：是否易用、稳定、反馈清晰<br />· 技术与商业可行：技术、合规、成本、生态是否支撑落地"
      assist-text="建议把上一任务的产品调研信息引用到成功产品列，再为失败产品补充真实市场反馈或用户评价。"
      :progress-items="progressItems"
    />
  </div>
</template>

<script setup>
import { CircleCheck, Download, Operation, RefreshLeft } from "@element-plus/icons-vue";
import { getTrainingTaskByKey } from "@/api/trainingTask";
import { 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 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(() => parseArray(taskConfig.value?.steps, []).slice(0, 4));

const form = ref({
  successProduct: "",
  failedProduct: "",
});

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

const factorRows = ref(createFactorRows());

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

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

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

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

async function loadSavedAnswer() {
  try {
    const res = await getStudentTrainingAnswer(TASK_KEY);
    const answer = res?.data;
    if (answer?.step1Answer) {
      applySavedAnswer(answer.step1Answer);
      clearDraft();
    }
  } 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 applySavedAnswer(value) {
  const parsed = parseSavedAnswer(value);
  if (!parsed || typeof parsed !== "object") {
    return;
  }
  form.value = {
    successProduct: parsed.successProduct || "",
    failedProduct: parsed.failedProduct || "",
  };
  if (Array.isArray(parsed.factors)) {
    const savedByDimension = parsed.factors.reduce((map, row) => {
      if (row?.dimension) {
        map[row.dimension] = row;
      }
      return map;
    }, {});
    factorRows.value = createFactorRows().map((row, index) => ({
      ...row,
      successAnalysis: savedByDimension[row.dimension]?.successAnalysis || parsed.factors[index]?.successAnalysis || "",
      failedAnalysis: savedByDimension[row.dimension]?.failedAnalysis || parsed.factors[index]?.failedAnalysis || "",
    }));
  }
}

function persistDraft() {
  if (!draftReady.value) return;
  try {
    localStorage.setItem(getLocalDraftKey(), JSON.stringify(buildOutcome()));
  } 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) {
      applySavedAnswer(raw);
    }
  } catch (error) {
    clearDraft();
  }
}

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

function buildOutcome() {
  return {
    title: taskTitle.value,
    successProduct: form.value.successProduct,
    failedProduct: form.value.failedProduct,
    factors: factorRows.value.map((row) => ({
      dimension: row.dimension,
      criteria: row.criteria,
      successAnalysis: row.successAnalysis,
      failedAnalysis: row.failedAnalysis,
    })),
  };
}

function buildAnswerPayload(saveAction = "SAVE") {
  return {
    step1Answer: JSON.stringify(buildOutcome()),
    currentStep: 1,
    submitted: false,
    saveAction,
  };
}

async function saveCurrentProgress() {
  if (saving.value) return;
  saving.value = true;
  try {
    await saveStudentTrainingAnswer(TASK_KEY, buildAnswerPayload("SAVE"));
    clearDraft();
    proxy?.$modal?.msgSuccess("已保存");
  } catch (error) {
    proxy?.$modal?.msgError?.("保存失败");
  } finally {
    saving.value = false;
  }
}

async function submitTask() {
  if (saving.value) return;
  saving.value = true;
  try {
    await saveStudentTrainingAnswer(TASK_KEY, buildAnswerPayload("SUBMIT"));
    clearDraft();
    proxy?.$modal?.msgSuccess("提交成功");
  } catch (error) {
    proxy?.$modal?.msgError?.("提交失败");
  } finally {
    saving.value = false;
  }
}

async function resetTraining() {
  form.value = {
    successProduct: "",
    failedProduct: "",
  };
  factorRows.value = createFactorRows();
  clearDraft();
  try {
    saving.value = true;
    await saveStudentTrainingAnswer(TASK_KEY, buildAnswerPayload("RESET"));
  } 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 = buildOutcome();
  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: 0 0 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 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 32px;
  padding: 6px;
  border: 1px solid rgba(0, 180, 255, 0.3);
  border-radius: 60px;
  background: rgba(0, 0, 0, 0.3);
}

.step-tab {
  display: inline-flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: 40px;
  color: #9ab3d0;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.4;
  text-align: center;

  &.active {
    border-color: rgba(0, 170, 255, 0.55);
    color: #ffffff;
    background: linear-gradient(95deg, #0a6b9e, #0a5c86);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  }
}

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

.product-entry {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}

.product-field {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  color: #dff5ff;
  font-size: 14px;
  font-weight: 800;
}

.input-field,
.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);
  }
}

.input-single {
  height: 42px;
  padding: 0 16px;
}

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

.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: 1180px) {
  .product-factors {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 860px) {
  .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-tab {
    width: 100%;
  }

  .product-entry {
    grid-template-columns: 1fr;
  }

  .product-field {
    grid-template-columns: 1fr;
  }
}
</style>