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>

      <section class="goal-bg">
        <div class="subtitle-icon">
          <el-icon><Aim /></el-icon>
          任务目标
        </div>
        <p>{{ taskGoalText }}</p>
        <div class="subtitle-icon subtitle-icon--spaced">
          <el-icon><Clock /></el-icon>
          任务背景
        </div>
        <p>{{ taskBackground }}</p>
      
        <div class="subtitle-icon">
          <el-icon><DataAnalysis /></el-icon>
          任务分析
        </div>
        <p>{{ taskAnalysisText }}</p>
      </section>

      <section class="training-step-area factors-workbench">
        <div class="workbench-head">
          <div>
            <p class="section-eyebrow">Training Task</p>
            <h3>任务实训</h3>
            <p>{{ 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>

        <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" @click="exportOutcome">
            <el-icon><Download /></el-icon>
            导出实训成果
          </button>
          <button type="button" class="btn-nav" :disabled="saving" @click="resetTraining">
            <el-icon><RefreshLeft /></el-icon>
            清空填写
          </button>
        </div>
      </section>
    </main>

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

<script setup>
import { Aim, CircleCheck, Clock, DataAnalysis, 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";

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: "产品开发关键因素",
  analysis:
    "围绕成功产品与失败产品进行对比，判断一款互联网智能产品能否成立，重点关注真实需求、体验闭环、技术成熟度、合规认证、供应链成本、商业模式、市场反馈和生态兼容。",
  background:
    "智能产品开发不能只看技术亮点，还需要验证用户是否愿意为功能付费，产品是否稳定易用，供应链是否可控，商业模式是否清晰，并持续结合市场反馈迭代。",
  goals: [
    "理解产品开发成功与失败的核心判断维度。",
    "能够结合真实产品案例，分析关键成功因素和失败原因。",
    "形成面向后续产品规划、测试验证和上线运营的判断依据。",
  ],
  requirement: "请选择上一实训任务某款产品作为成功产品，分析关键成功因素，再分析一款失败产品原因。",
};

const taskTitle = computed(() => taskConfig.value?.taskName || defaultTask.title);
const taskAnalysisText = computed(() => taskConfig.value?.knowledge || defaultTask.analysis);
const taskBackground = computed(() => taskConfig.value?.background || defaultTask.background);
const taskGoals = computed(() => parseArray(taskConfig.value?.objectives, defaultTask.goals));
const taskGoalText = computed(() => taskGoals.value.join("；"));
const taskRequirement = computed(() => taskConfig.value?.requirements || defaultTask.requirement);

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

.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 {
  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(6px);
}

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

  h3 {
    margin: 4px 0 8px;
    color: #ffffff;
    font-size: 26px;
    font-weight: 800;
  }

  p {
    margin: 0;
    color: #b8d5e8;
    line-height: 1.7;
  }
}

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

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

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

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

.input-field,
.table-textarea {
  width: 100%;
  border: 1px solid rgba(84, 177, 230, 0.62);
  border-radius: 18px;
  outline: none;
  color: #f4fbff;
  background: rgba(9, 24, 36, 0.94);
  transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;

  &::placeholder {
    color: #6f8da3;
  }

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

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

.training-table-wrap {
  overflow-x: auto;
  border: 1px solid rgba(71, 158, 210, 0.42);
  border-radius: 20px;
  background: rgba(0, 13, 24, 0.66);
}

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

  th {
    padding: 16px 18px;
    border-right: 1px solid rgba(134, 220, 255, 0.2);
    color: #effdff;
    background: linear-gradient(180deg, #0b7fb3, #075c88);
    font-size: 16px;
    font-weight: 900;
    text-align: center;
  }

  td {
    min-height: 118px;
    padding: 16px;
    border-top: 1px solid rgba(87, 159, 200, 0.38);
    border-right: 1px solid rgba(87, 159, 200, 0.28);
    vertical-align: middle;
  }

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

.dimension-col {
  width: 190px;
}

.criteria-col {
  width: 300px;
}

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

.criteria-cell {
  color: #d1e8f5;
  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;
  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;
  cursor: pointer;
}

.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) {
  .workbench-head,
  .workbench-actions,
  .task-actions {
    flex-direction: column;
    align-items: stretch;
  }

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

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