From 77f251117f5158c30f21053674c8aa5d64a48982 Mon Sep 17 00:00:00 2001
From: chenyuan <chenyuan@example.com>
Date: Fri, 7 Aug 2026 17:22:27 +0800
Subject: [PATCH] feat: add competitive analysis step one

---
 src/api/studentTrainingAnswer.js              | 12 ++++
 src/router/index.js                           |  2 +-
 .../competitive-environment-analysis.vue      | 61 +++++++++++++++++++
 3 files changed, 74 insertions(+), 1 deletion(-)
 create mode 100644 src/views/demand/competitive-environment-analysis.vue

diff --git a/src/api/studentTrainingAnswer.js b/src/api/studentTrainingAnswer.js
index 161310f..19b7dfd 100644
--- a/src/api/studentTrainingAnswer.js
+++ b/src/api/studentTrainingAnswer.js
@@ -95,6 +95,18 @@ export function checkNewProductSurveyStepOne(items) {
   });
 }
 
+export function checkCompetitiveEnvironmentAnalysisStepOne(payload) {
+  const value = payload || {};
+  if (isStudentDemo()) {
+    if (!String(value.strengths || "").trim() || !String(value.weaknesses || "").trim()
+      || !String(value.opportunities || "").trim() || !String(value.threats || "").trim()) {
+      return Promise.reject(new Error("请完整填写优势、劣势、机会和威胁四类信息"));
+    }
+    return Promise.resolve({ code: 200, data: { valid: true, message: "校验通过" } });
+  }
+  return request({ url: "/api/student-training-answers/competitive-environment-analysis/step-1/validate", method: "post", data: value, headers: { repeatSubmit: false } });
+}
+
 function validateNewProductSurveyStepTwoDemo(form) {
   const value = form || {};
   const images = Array.isArray(value.images) ? value.images : [];
diff --git a/src/router/index.js b/src/router/index.js
index e0d49b8..a55ea8a 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -230,7 +230,7 @@ export const dynamicRoutes = [
       // 竞争环境分析
       {
         path: "environment",
-        component: () => import("@/views/demand/environment.vue"),
+        component: () => import("@/views/demand/competitive-environment-analysis.vue"),
         name: "environment",
         meta: { title: "竞争环境分析", icon: "需求挖掘", affix: true, pageKey: "competitive-environment-analysis" },
       },
diff --git a/src/views/demand/competitive-environment-analysis.vue b/src/views/demand/competitive-environment-analysis.vue
new file mode 100644
index 0000000..e85a099
--- /dev/null
+++ b/src/views/demand/competitive-environment-analysis.vue
@@ -0,0 +1,61 @@
+<template>
+  <div class="competitive-analysis-page student-training-shell">
+    <main class="analysis-core">
+      <section class="task-header"><div class="task-badge"><el-icon><TrendCharts /></el-icon> 核心实训 · 市场洞察与需求分析</div><h1>{{ taskTitle }}</h1></section>
+      <TrainingTaskBrief :background="taskBackground" :goals="taskGoals" :requirements="taskRequirement" :show-material="false" />
+      <section class="analysis-workbench">
+        <div class="workbench-head"><TrainingMaterialButton :material-name="taskConfig?.materialName" :material-url="taskConfig?.materialUrl" /><button type="button" class="outline-action" @click="exportOutcome"><el-icon><Download /></el-icon> 导出实训成果</button></div>
+        <nav class="step-indicator" aria-label="竞争环境分析步骤"><template v-for="(step, index) in trainingSteps" :key="`${index}-${step}`"><button type="button" :class="['step-tab', { active: currentStep === index + 1, complete: currentStep > index + 1 }]" @click="switchStep(index + 1)"><span class="step-marker">{{ String(index + 1).padStart(2, '0') }}</span><span class="step-copy"><strong>{{ step }}</strong><small>{{ currentStep === index + 1 ? '当前步骤' : '点击切换' }} →</small></span></button><i v-if="index < trainingSteps.length - 1" class="step-connector" /></template></nav>
+        <section class="step-card">
+          <template v-if="currentStep === 1">
+            <div class="step-title-row"><div><p>Step 01</p><h2>{{ trainingSteps[0] }}</h2></div><span>SWOT 分类练习</span></div>
+            <p class="step-desc">请根据案例文档中信息进行 SWOT 分析，进行各项内容归类，把文档中相应内容填写到以下四类中。</p>
+            <div class="swot-table-wrap"><table class="swot-table"><thead><tr><th>序号</th><th>SWOT维度</th><th>关键信息要点</th></tr></thead><tbody><tr v-for="(row, index) in swotRows" :key="row.key"><td>{{ index + 1 }}</td><td class="dimension-cell">{{ row.label }}</td><td><textarea v-model.trim="form[row.key]" :placeholder="row.placeholder" /></td></tr></tbody></table></div>
+            <div class="task-actions"><button type="button" class="btn btn-primary" :disabled="saving" @click="saveAndGoToStepTwo">保存并进入第 2 步</button><button type="button" class="btn" :disabled="saving" @click="resetTraining"><el-icon><RefreshLeft /></el-icon> 清空填写</button></div>
+          </template>
+          <div v-else class="step-placeholder"><p>第 {{ currentStep }} 步内容待配置</p><span>第 1 步 SWOT 分类已保存，可从上方步骤栏返回查看。</span></div>
+        </section>
+      </section>
+    </main>
+    <TrainingAiSidebar study-tip="先辨别内部条件与外部环境，再归类为优势、劣势、机会和威胁。" reference-title="SWOT 分类提示" reference-text="· 优势：企业或产品已有的资源、能力、渠道与差异化<br />· 劣势：内部能力、成本、体验、资源或覆盖不足<br />· 机会：外部市场增长、政策变化、消费趋势与技术窗口<br />· 威胁：竞争加剧、替代品、成本风险、政策限制与需求变化" :progress-items="progressItems" />
+  </div>
+</template>
+
+<script setup>
+import { Download, RefreshLeft, TrendCharts } from "@element-plus/icons-vue";
+import { checkCompetitiveEnvironmentAnalysisStepOne, getStudentTrainingAnswer, saveStudentTrainingAnswer } 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 TASK_KEY = "competitive-environment-analysis";
+const { proxy } = getCurrentInstance();
+const userStore = useUserStore();
+const DEFAULT_STEPS = ["SWOT竞争环境分析", "竞品调研与比较", "竞争策略设计", "竞争环境结论"];
+const swotRows = [
+  { key: "strengths", label: "优势（S）", placeholder: "填写案例中的资源、能力、渠道、产品或服务优势" },
+  { key: "weaknesses", label: "劣势（W）", placeholder: "填写案例中的内部短板、成本、体验或资源不足" },
+  { key: "opportunities", label: "机会（O）", placeholder: "填写案例中的市场、政策、消费趋势或技术机会" },
+  { key: "threats", label: "威胁（T）", placeholder: "填写案例中的竞争、替代、成本、政策或需求风险" },
+];
+const defaultTask = { title: "竞争环境分析", background: "通过 SWOT 模型归类案例资料中的竞争环境信息，为后续竞品比较与竞争策略判断提供依据。", goals: ["掌握 SWOT 四维度的分类方法", "提炼案例中的竞争环境关键信息", "形成竞争分析的基础材料"], requirement: "请阅读案例资料，将相关信息归类为优势、劣势、机会和威胁。" };
+const taskConfig = ref(null); const currentStep = ref(1); const saving = ref(false); const draftReady = ref(false); const form = ref(createForm());
+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 progressItems = computed(() => swotRows.map((row) => ({ text: `${form.value[row.key] ? "已填写" : "待填写"}：${row.label}`, status: form.value[row.key] ? "done" : "" })));
+onMounted(async () => { await loadTaskConfig(); loadDraft(); await loadSavedAnswer(); draftReady.value = true; }); watch(() => JSON.stringify(buildDraft()), persistDraft);
+function createForm() { return { strengths: "", weaknesses: "", opportunities: "", threats: "" }; }
+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); clearDraft(); } if (Number(answer?.currentStep) > 0) currentStep.value = Number(answer.currentStep); } catch (error) { /* Keep local draft when unavailable. */ } }
+function restoreOutcome(value) { try { const parsed = typeof value === "string" ? JSON.parse(value) : value; form.value = { ...createForm(), ...(parsed?.swot || parsed || {}) }; } catch (error) { form.value = createForm(); } }
+function buildOutcome() { return { title: taskTitle.value, swot: { ...form.value } }; } function buildDraft() { return { step1: buildOutcome(), currentStep: currentStep.value }; } function getLocalDraftKey() { const info = userStore.userInfo || {}; return `${TASK_KEY}:draft:${info.userId || info.user_id || info.username || info.userName || "anonymous"}`; } function persistDraft() { if (!draftReady.value) return; try { localStorage.setItem(getLocalDraftKey(), JSON.stringify(buildDraft())); } catch (error) { /* Optional browser draft. */ } } function loadDraft() { try { const raw = localStorage.getItem(getLocalDraftKey()); if (raw) { const draft = JSON.parse(raw); restoreOutcome(draft?.step1 || draft); 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 switchStep(step) { currentStep.value = step; }
+async function saveAndGoToStepTwo() { if (saving.value) return; saving.value = true; try { await checkCompetitiveEnvironmentAnalysisStepOne(form.value); await saveStudentTrainingAnswer(TASK_KEY, { step1Answer: JSON.stringify(buildOutcome()), currentStep: 2, submitted: false, saveAction: "SAVE" }); clearDraft(); currentStep.value = 2; proxy?.$modal?.msgSuccess("已保存，已进入第 2 步"); } catch (error) { proxy?.$modal?.msgError?.(error?.message || "请完整填写 SWOT 四类信息"); } finally { saving.value = false; } }
+async function resetTraining() { form.value = createForm(); currentStep.value = 1; clearDraft(); try { saving.value = true; await saveStudentTrainingAnswer(TASK_KEY, { step1Answer: JSON.stringify(buildOutcome()), currentStep: 1, submitted: false, saveAction: "RESET" }); } catch (error) { /* Local clearing still succeeds. */ } finally { saving.value = false; } proxy?.$modal?.msgSuccess("已清空填写内容"); }
+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>
+.competitive-analysis-page { display: grid; grid-template-columns: minmax(720px,1fr) 340px; gap: 24px; min-height: calc(100vh - 106px); padding: 24px; color: #e8f7ff; background: #06111d; }.analysis-core { min-width: 0; 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,.step-title-row p { color: #65dcff; font-weight: 700; }.task-header h1 { margin: 10px 0 0; color: #fff; font-size: 28px; }.analysis-workbench { margin: 24px; padding: 22px; border: 1px solid rgba(33,194,255,.35); border-radius: 20px; background: rgba(1,24,39,.72); }.workbench-head { display: flex; justify-content: flex-end; gap: 12px; }.outline-action,.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid #2cc9ff; border-radius: 999px; padding: 10px 18px; color: #dff8ff; background: rgba(8,87,121,.55); cursor: pointer; }.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; gap: 4px; min-width: 0; }.step-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.step-copy small { color: #5ec9ed; }.step-connector { flex: 0 0 25px; height: 2px; background: rgba(83,204,255,.4); }.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 p { margin: 0; }.step-title-row h2 { margin: 5px 0 0; color: #fff; font-size: 24px; }.step-title-row > span { border: 1px solid #38caff; border-radius: 999px; padding: 7px 12px; color: #9aeaff; }.step-desc { margin: 24px 0; color: #c5e4ef; font-size: 16px; line-height: 1.8; }.swot-table-wrap { overflow-x: auto; }.swot-table { width: 100%; min-width: 720px; border-collapse: collapse; }.swot-table th,.swot-table td { border: 1px solid rgba(139,213,241,.45); }.swot-table th { padding: 14px; color: #fff; background: #079ed9; font-size: 16px; }.swot-table th:first-child,.swot-table td:first-child { width: 8%; text-align: center; }.swot-table th:nth-child(2),.dimension-cell { width: 18%; text-align: center; font-weight: 700; }.swot-table textarea { box-sizing: border-box; display: block; width: 100%; min-height: 136px; resize: vertical; border: 0; padding: 16px; color: #e9faff; background: transparent; font: inherit; line-height: 1.7; }.swot-table textarea:focus { outline: 2px solid rgba(57,207,255,.4); outline-offset: -2px; }.task-actions { display: flex; justify-content: center; gap: 12px; margin-top: 26px; }.btn-primary { border-color: #36d9ff; background: linear-gradient(110deg,#0eaae4,#0572ac); font-weight: 700; }.btn:disabled { cursor: not-allowed; opacity: .6; }.step-placeholder { padding: 90px 20px; text-align: center; color: #a8cfdd; }.step-placeholder p { color: #fff; font-size: 20px; } @media (max-width:1280px) { .competitive-analysis-page { grid-template-columns: 1fr; }.step-indicator { overflow-x: auto; }.step-tab { min-width: 190px; } } @media (max-width:720px) { .competitive-analysis-page { padding: 12px; }.analysis-workbench { margin: 12px; padding: 14px; }.task-header { padding: 18px; }.workbench-head { justify-content: flex-start; flex-wrap: wrap; }.step-title-row > span { display: none; } }
+</style>