dianshang-qianduan/src/views/demand/index.vue

<template>
  <div class="industry-demand-page student-training-shell">
    <main class="training-core">
      <section class="task-header">
        <div class="task-badge">市场洞察与需求分析</div>
        <h1 class="task-title">{{ taskTitle }}</h1>
      </section>

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

      <section class="task-card">
        <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="`${index}-${step}`"
            class="step-tab"
            :class="{ active: currentStep === index + 1 }"
          >
            {{ step }}
          </span>
        </nav>

        <section class="step-card industry-demand-step-card">
          <div v-if="activeStepName" class="step-title-row">
            <div>
              <p class="section-eyebrow">Step {{ String(currentStep).padStart(2, "0") }}</p>
              <h3>{{ activeStepName }}</h3>
            </div>
          </div>

          <div class="background-block">
            <h4>背景信息</h4>
            <p v-for="line in backgroundLines" :key="line">{{ line }}</p>
          </div>

          <p class="task-desc">请根据以上信息进行PEST分析，进行上述各项内容归类。</p>

          <div class="pest-grid">
            <article v-for="item in pestItems" :key="item.key" class="pest-card">
              <div class="pest-card__title">{{ item.label }}</div>
              <textarea v-model="form.pest[item.key]" class="pest-input" :placeholder="item.placeholder" />
            </article>
          </div>

          <label class="field-block">
            <span>通过PEST模型对智能健身镜进行分析，总结该行业核心机遇与挑战，给出合适的战略决策。</span>
            <textarea v-model="form.strategy" class="long-textarea" placeholder="填写PEST综合分析、行业机遇挑战和战略决策" />
          </label>

          <div class="comparison-block">
            <p class="comparison-title">机会与挑战对比：</p>
            <div class="comparison-table">
              <div class="comparison-row comparison-head">
                <div>维度</div>
                <div>机会点</div>
                <div>风险点</div>
              </div>
              <div v-for="row in form.comparisons" :key="row.dimension" class="comparison-row">
                <div class="dimension-cell">{{ row.dimension }}</div>
                <textarea v-model="row.opportunity" :placeholder="row.opportunityHint" />
                <textarea v-model="row.risk" :placeholder="row.riskHint" />
              </div>
            </div>
          </div>

          <label class="field-block">
            <span>分析结论：</span>
            <textarea v-model="form.conclusion" class="long-textarea" placeholder="填写最终分析结论、适合进入的细分方向和后续产品建议" />
          </label>

          <div class="training-actions">
            <el-button class="training-action training-action--save" :loading="saving" @click="saveCurrentProgress">保存当前进度</el-button>
            <el-button class="training-action training-action--submit" :loading="saving" @click="submitTask">提交任务</el-button>
            <el-button class="training-action training-action--reset" @click="resetTraining">重新实训</el-button>
          </div>
        </section>
      </section>
    </main>

    <TrainingAiSidebar
      :study-tip="`当前任务建议：先把背景信息拆到政治、经济、社会、技术四类，再总结机会、风险与战略决策。`"
      :progress-items="progressItems"
    />
  </div>
</template>

<script setup>
import TrainingAiSidebar from "@/views/components/TrainingAiSidebar.vue";
import TrainingMaterialButton from "@/views/components/TrainingMaterialButton.vue";
import TrainingTaskBrief from "@/views/components/TrainingTaskBrief.vue";
import { getTrainingTaskByKey } from "@/api/trainingTask";
import { getStudentTrainingAnswer, saveStudentTrainingAnswer } from "@/api/studentTrainingAnswer";
import { Download } from "@element-plus/icons-vue";

const TASK_KEY = "industry-demand-analysis";
const { proxy } = getCurrentInstance();

const taskConfig = ref(null);
const saving = ref(false);
const currentStep = ref(1);

const defaultGoals = [
  "掌握PEST模型在行业需求分析中的应用方法",
  "能够从政策、经济、社会、技术四个维度识别行业机会与风险",
  "形成适合产品开发和市场进入的战略建议",
];

const defaultRequirement = "PEST分析用于从宏观环境拆解行业需求，帮助判断产品机会、外部约束和市场进入策略。";
const defaultBackground = "以智能健身镜行业为例，结合政策标准、市场规模、消费趋势和技术条件，完成行业需求分析与战略判断。";

const backgroundLines = [
  "中国“健康中国2030”规划推动家庭健身设备普及，对符合GB/T 38644-2020标准的企业给予15%税收减免。",
  "欧盟CE认证新增EN 62368-1安全标准，并强制要求碳足迹披露（SPI倡议）。",
  "美国FCC认证与关税政策（如25%对华加征关税）驱动供应链向越南、墨西哥转移，利用RCEP规则规避成本。",
  "欧盟《数字健身法案》要求用户数据本地化存储，中国《数据安全法》强制端侧数据处理，避免隐私泄露风险。",
  "2024年全球市场规模达3.51亿美元，预计2031年突破5亿美元（CAGR 5.1%）。",
  "成本结构优化：中国供应链成本较北美低37%，珠三角地区形成显示面板、传感器、ODM组装一体化产业链。",
  "“硬件+订阅”主导：头部厂商ARPU值达18美元/月（如数智引力），商用场景（酒店、健身房）渗透率超60%（如Tempo）。",
  "关税冲击应对：康冠科技采用“中国核心部件+墨西哥组装”模式，降低关税影响。",
  "居家健身刚需化：疫情后62%用户倾向家庭场景训练，智能健身镜租约使用频次达4.7次。",
  "内容需求精细化：Z世代青睐个性化课程（如亲子互动、广场舞），推动课程库扩充至200+品类。",
  "都市人群对“精准健康管理”需求激增，设备需集成体脂、骨骼点追踪（精度±0.5°）及生理指标监测功能。",
  "动作捕捉：3D结构光摄像头+多模态传感器，实现128个骨骼点实时追踪（商汤科技算法精度98.6%）。",
  "交互体验：防眩光AG玻璃（BOE）、双频WiFi6保障4K流畅稳定性，响应延迟<0.5秒。",
  "SDK开放平台（如康冠科技接入200+健身APP）构建软硬件闭环，支持与穿戴设备（心率带、手表）数据同步。",
];

const pestItems = [
  { key: "political", label: "政治环境", placeholder: "归类政策、认证、关税、数据合规等因素" },
  { key: "economic", label: "经济环境", placeholder: "归类市场规模、成本、商业模式、供应链等因素" },
  { key: "social", label: "社会环境", placeholder: "归类用户需求、消费趋势、健康管理和场景变化" },
  { key: "technology", label: "技术环境", placeholder: "归类动作捕捉、交互体验、SDK开放和设备互联能力" },
];

function createComparisons() {
  return [
    {
      dimension: "政策",
      opportunity: "",
      risk: "",
      opportunityHint: "中国税收减免、欧盟碳足迹政策催生绿色技术需求",
      riskHint: "认证成本上升",
    },
    {
      dimension: "经济",
      opportunity: "",
      risk: "",
      opportunityHint: "家庭场景ARPU值年增xx，商用场景留存率提升xx",
      riskHint: "关税致北美市场出货量降18%",
    },
    {
      dimension: "技术",
      opportunity: "",
      risk: "",
      opportunityHint: "端侧AI降低隐私风险，模块化设计使维修成本降xx",
      riskHint: "通用大模型直接调用致内容失控",
    },
    {
      dimension: "社会",
      opportunity: "",
      risk: "",
      opportunityHint: "银发经济（太极课程）、亲子经济（体感游戏）打开增量市场",
      riskHint: "高价订阅制引发抵触",
    },
  ];
}

function createForm() {
  return {
    pest: {
      political: "",
      economic: "",
      social: "",
      technology: "",
    },
    strategy: "",
    comparisons: createComparisons(),
    conclusion: "",
  };
}

const form = ref(createForm());

const taskTitle = computed(() => taskConfig.value?.taskName || "行业需求分析");
const taskBackground = computed(() => taskConfig.value?.background || defaultBackground);
const taskGoals = computed(() => parseArray(taskConfig.value?.objectives, defaultGoals));
const taskRequirement = computed(() => taskConfig.value?.requirements || defaultRequirement);
const trainingSteps = computed(() => parseArray(taskConfig.value?.steps, []));
const activeStepName = computed(() => trainingSteps.value[currentStep.value - 1] || trainingSteps.value[0] || "");

const progressItems = computed(() => [
  { text: "进行中：PEST四维度归类", status: "doing" },
  { text: "进行中：机会与风险对比", status: "doing" },
  { text: form.value.conclusion ? "已填写：分析结论" : "待完成：分析结论", status: form.value.conclusion ? "done" : "" },
]);

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

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?.currentStep && Number(answer.currentStep) > 0) {
      currentStep.value = Number(answer.currentStep);
    }
    if (answer?.step1Answer) {
      applySavedAnswer(answer.step1Answer);
    }
  } catch (error) {
    // Keep the page usable even when the answer endpoint is unavailable.
  }
}

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 applySavedAnswer(value) {
  try {
    const parsed = JSON.parse(value);
    if (!parsed || typeof parsed !== "object") return;
    const nextForm = createForm();
    nextForm.pest = {
      ...nextForm.pest,
      ...(parsed.pest || {}),
    };
    nextForm.strategy = parsed.strategy || "";
    nextForm.conclusion = parsed.conclusion || "";
    if (Array.isArray(parsed.comparisons)) {
      const savedByDimension = parsed.comparisons.reduce((map, row) => {
        if (row?.dimension) {
          map[row.dimension] = row;
        }
        return map;
      }, {});
      nextForm.comparisons = createComparisons().map((row) => ({
        ...row,
        opportunity: savedByDimension[row.dimension]?.opportunity || "",
        risk: savedByDimension[row.dimension]?.risk || "",
      }));
    }
    form.value = nextForm;
  } catch (error) {
    // Ignore malformed historical answers.
  }
}

function buildOutcome() {
  return {
    title: taskTitle.value,
    pest: form.value.pest,
    strategy: form.value.strategy,
    comparisons: form.value.comparisons.map((row) => ({
      dimension: row.dimension,
      opportunity: row.opportunity,
      risk: row.risk,
    })),
    conclusion: form.value.conclusion,
  };
}

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

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

function saveCurrentProgress() {
  return saveAnswer("SAVE");
}

function submitTask() {
  return saveAnswer("SUBMIT");
}

async function resetTraining() {
  form.value = createForm();
  await saveAnswer("RESET");
}

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

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

.training-core {
  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;
  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;
}

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

.goal-bg {
  p,
  li {
    color: #d7ecff;
    font-size: 14px;
    line-height: 1.8;
  }

  p,
  ol {
    margin: 0;
  }

  ol {
    padding-left: 18px;
  }
}

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

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

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

.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;
  line-height: 1.4;
}

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

.outline-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  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-size: 14px;
  font-weight: 800;

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

.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;
  background: transparent;
  font-size: 14px;
  font-weight: 800;
  text-align: center;
  transition: color 0.2s, background 0.2s, border-color 0.2s, box-shadow 0.2s;

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

.step-card {
  margin-bottom: 0;
}

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

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

.background-block {
  padding: 16px;
  border: 1px solid rgba(0, 180, 255, 0.22);
  border-radius: 22px;
  background: rgba(1, 14, 26, 0.72);

  h4 {
    margin: 0 0 12px;
    color: #dff5ff;
    font-size: 15px;
    font-weight: 800;
  }

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

  p:last-child {
    margin-bottom: 0;
  }
}

.task-desc {
  margin: 22px 0 18px;
  color: #d7ecff;
  font-size: 15px;
  line-height: 1.8;
}

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

.pest-card {
  min-height: 196px;
  padding: 16px;
  border: 1px solid rgba(0, 180, 255, 0.22);
  border-radius: 20px;
  background: rgba(1, 14, 26, 0.72);
}

.pest-card__title {
  min-height: 22px;
  margin-bottom: 12px;
  color: #ffffff;
  font-size: 15px;
  font-weight: 800;
}

.pest-input,
.long-textarea,
.comparison-row textarea {
  width: 100%;
  border: 1px solid rgba(45, 95, 126, 0.95);
  outline: none;
  resize: vertical;
  color: #eef5ff;
  background: #0f1a24;
  font-size: 14px;
  line-height: 1.65;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;

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

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

.pest-input {
  min-height: 128px;
  padding: 12px 14px;
  border-radius: 16px;
}

.field-block {
  display: block;
  margin-top: 22px;

  span {
    display: block;
    margin-bottom: 10px;
    color: #d7ecff;
    font-size: 15px;
    line-height: 1.8;
  }
}

.long-textarea {
  min-height: 150px;
  padding: 14px 16px;
  border-radius: 18px;
}

.comparison-block {
  margin-top: 26px;
}

.comparison-title {
  margin: 0 0 12px;
  color: #d7ecff;
  font-size: 15px;
  font-weight: 800;
}

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

.comparison-row {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr) minmax(0, 1fr);
  border-top: 1px solid rgba(87, 159, 200, 0.35);

  > div,
  > textarea {
    min-height: 76px;
    border: 0;
    border-right: 1px solid rgba(87, 159, 200, 0.28);
    border-radius: 0;
  }

  > textarea {
    padding: 16px;
    text-align: center;
  }

  > :last-child {
    border-right: 0;
  }
}

.comparison-head {
  border-top: 0;
  color: #eaffff;
  background: rgba(8, 55, 82, 0.98);
  font-weight: 900;

  div {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
  }
}

.dimension-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #eafaff;
  font-weight: 800;
}

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

.training-actions :deep(.training-action) {
  min-width: 172px;
  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;
}

.training-actions :deep(.training-action span) {
  display: inline-flex;
  align-items: center;
  color: inherit;
  font-size: inherit;
  line-height: 1;
}

.training-actions :deep(.training-action--submit),
.training-actions :deep(.training-action--reset),
.training-actions :deep(.training-action--export) {
  border-color: #2c83aa;
  color: #dff7ff;
  background: rgba(13, 64, 88, 0.62);
}

.training-actions :deep(.training-action:hover:not(.is-disabled)) {
  border-color: #46b5e7;
  color: #ffffff;
  background: rgba(18, 85, 116, 0.78);
}

@media (max-width: 1100px) {
  .industry-demand-page {
    grid-template-columns: 1fr;
  }

  .pest-grid {
    grid-template-columns: 1fr;
    margin: 8px 0 36px;
  }
}

@media (max-width: 720px) {
  .training-core {
    padding: 18px;
    border-radius: 24px;
  }

  .workbench-head,
  .workbench-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .workbench-actions :deep(.material-download),
  .workbench-actions .outline-action {
    width: 100%;
  }

  .comparison-row {
    grid-template-columns: 92px minmax(0, 1fr) minmax(0, 1fr);
  }
}
</style>