dianshang-qianduan/src/views/product/differentiation.vue

<template>
  <div class="product-positioning-page student-training-shell">
    <main class="training-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="task-card">
      <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 v-if="configuredSteps.length" class="step-indicator" aria-label="产品价值主张及定位步骤">
          <template v-for="(step, index) in configuredSteps" :key="`${step}-${index}`">
            <button
              type="button"
              :class="['step-tab', { active: form.activeStep === index + 1, complete: form.activeStep > index + 1 }]"
              :aria-current="form.activeStep === index + 1 ? 'step' : undefined"
              :aria-label="`第${index + 1}步：${step}`"
              @click="setCurrentStep(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">{{ form.activeStep === index + 1 ? "当前步骤" : "点击切换" }} <span aria-hidden="true">→</span></span>
              </span>
            </button>
            <span v-if="index < configuredSteps.length - 1" class="step-connector" aria-hidden="true"></span>
          </template>
        </nav>

        <section v-show="isSectionVisible(1)" class="step-card">
          <div v-if="activeStepName" class="step-title-row">
            <div>
              <p class="section-eyebrow">Step {{ String(form.activeStep).padStart(2, '0') }}</p>
              <h3>{{ activeStepName }}</h3>
            </div>
          </div>
          <div class="core-pain-intro">
            <p>价值主张的起点不是产品功能，而是用户痛点。不要试图满足所有人，只抓占 80% 的核心用户最痛的 3 个问题。</p>
            <p>参考实训 11 的需求优先级评估结果，整理出 Top3 核心痛点，同时识别弱需求和伪需求——它们不作为核心价值主张，只作为加分项。</p>
          </div>
          <div class="core-pain-table-wrap">
            <table class="core-pain-table">
              <thead>
                <tr>
                  <th>序号</th>
                  <th>需求类型</th>
                  <th>需求描述</th>
                  <th>场景描述</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(row, index) in form.corePainRows" :key="row.id">
                  <td>{{ index + 1 }}</td>
                  <td class="pain-type-cell">{{ row.type }}</td>
                  <td><textarea v-model="row.description" :placeholder="index === 0 ? '示例：入睡困难' : '填写需求描述'" :aria-label="`${row.type}需求描述`" /></td>
                  <td><textarea v-model="row.scene" :placeholder="index === 0 ? '示例：高压职场人群睡前大脑兴奋难以切换到放松状态，传统吸顶灯只有冷白光切换，缺乏渐进式助眠的光环境引导，导致入睡时间平均超过40分钟' : '填写场景描述'" :aria-label="`${row.type}场景描述`" /></td>
                </tr>
              </tbody>
            </table>
          </div>
          <p v-if="corePainValidationMessage" class="core-pain-validation-message" role="status">{{ corePainValidationMessage }}</p>
        </section>

        <section v-show="isSectionVisible(2)" class="step-card">
          <div v-if="activeStepName" class="step-title-row">
            <div>
              <p class="section-eyebrow">Step {{ String(form.activeStep).padStart(2, '0') }}</p>
              <h3>{{ activeStepName }}</h3>
            </div>
          </div>
          <div class="value-proposition-intro">
            根据细分用户、具体场景、独特价值和用户收益提炼核心价值主张，运用价值主张画布从“用户档案”和“产品价值地图”两个维度找到匹配点。
          </div>

          <div class="canvas-section-heading">
            <h4>（一）用户档案 <small>Customer Profile</small></h4>
            <button type="button" class="canvas-export-button" @click="exportCanvasSection('用户档案', customerProfileExportContent)">
              <el-icon><Download /></el-icon>导出
            </button>
          </div>
          <div class="value-canvas-table-wrap">
            <table class="value-canvas-table">
              <thead><tr><th>维度</th><th>说明</th><th>内容</th></tr></thead>
              <tbody>
                <tr><td>用户目标（Jobs）</td><td>用户在相关场景中试图完成的任务</td><td><textarea v-model="form.customerProfile.jobs" placeholder="示例：快速入睡、提升睡眠质量、温和唤醒不犯困、起夜不刺眼" /></td></tr>
                <tr><td>痛点（Pains）</td><td>用户遇到的障碍、风险和负面体验</td><td><textarea v-model="form.customerProfile.pains" placeholder="填写用户痛点" /></td></tr>
                <tr><td>收益期望（Gains）</td><td>用户期望的结果和额外收益</td><td><textarea v-model="form.customerProfile.gains" placeholder="填写用户收益期望" /></td></tr>
              </tbody>
            </table>
          </div>

          <div class="canvas-section-heading canvas-section-heading--spaced">
            <h4>（二）产品价值地图 <small>Value Map</small></h4>
            <button type="button" class="canvas-export-button" @click="exportCanvasSection('产品价值地图', valueMapExportContent)">
              <el-icon><Download /></el-icon>导出
            </button>
          </div>
          <div class="value-canvas-table-wrap">
            <table class="value-canvas-table">
              <thead><tr><th>维度</th><th>说明</th><th>内容</th></tr></thead>
              <tbody>
                <tr><td>产品与服务</td><td>我们提供给用户的产品和服务清单</td><td><textarea v-model="form.valueMap.products" placeholder="示例：智能声光伴眠吸顶灯（含 App 控制）、白噪音声库、睡眠监测服务、节律光算法" /></td></tr>
                <tr><td>痛点缓释器（Pain Relievers）</td><td>产品如何消除或缓解用户痛点</td><td><textarea v-model="form.valueMap.painRelievers" placeholder="填写痛点缓释器" /></td></tr>
                <tr><td>增益创造器（Gain Creators）</td><td>产品如何创造额外价值和惊喜体验</td><td><textarea v-model="form.valueMap.gainCreators" placeholder="填写增益创造器" /></td></tr>
              </tbody>
            </table>
          </div>

          <div class="canvas-drawing-section">
            <h4>（三）绘制产品价值主张画布</h4>
            <p>检查“产品价值地图”与“用户档案”是否实现匹配（Fit）：每个痛点应有对应的痛点缓释器，每个收益期望应有对应的增益创造器。根据上表绘制产品价值主张画布。</p>
            <input ref="valueCanvasInput" class="visually-hidden" type="file" accept="image/png,image/jpeg,image/webp" @change="handleValueCanvasUpload" />
            <div v-if="form.valuePropositionCanvas.url" class="value-canvas-preview">
              <el-image :src="form.valuePropositionCanvas.url" :preview-src-list="[form.valuePropositionCanvas.url]" fit="cover" preview-teleported />
              <div><strong>{{ form.valuePropositionCanvas.name || '产品价值主张画布' }}</strong><span>点击缩略图可放大预览</span><button type="button" class="text-button" @click="clearValueCanvas">移除图片</button></div>
            </div>
            <button v-else type="button" class="canvas-upload-trigger" :disabled="uploadingValueCanvas" @click="openValueCanvasPicker">
              <el-icon><UploadFilled /></el-icon>{{ uploadingValueCanvas ? '正在上传...' : '上传产品价值主张画布' }}
            </button>
          </div>

          <div class="canvas-guidance">
            <p>推荐工具及方法如下，自行选择：</p>
            <p>1. 下载模板，填写用户档案及产品价值地图，完成产品价值主张画布。</p>
            <button type="button" class="template-download-button" @click="downloadCanvasTemplate"><el-icon><Download /></el-icon>模板下载</button>
            <p>2. 导出用户档案和价值主张地图两张表，使用通用 AI 大模型辅助生成画布。</p>
          </div>
          <p v-if="valueCanvasValidationMessage" class="core-pain-validation-message" role="status">{{ valueCanvasValidationMessage }}</p>
        </section>

        <section v-show="isSectionVisible(3)" class="step-card">
          <div v-if="activeStepName" class="step-title-row">
            <div>
              <p class="section-eyebrow">Step {{ String(form.activeStep).padStart(2, '0') }}</p>
              <h3>{{ activeStepName }}</h3>
            </div>
          </div>
          <div class="positioning-intro">
            <p>根据前面实训分析，使用经典定位陈述格式撰写简洁有力的产品价值定位陈述。</p>
            <p>经典定位陈述格式：对于【目标市场/用户】，我们的【产品名称】是一个【产品类别】，它能提供【核心价值/关键收益】，因为它具有【主要差异化理由】。</p>
          </div>
          <article v-for="(statement, index) in form.positioningStatements" :key="statement.id" class="positioning-version-card">
            <header><span>版本{{ numberToChinese(index + 1) }}</span><small>至少设计两个不同目标用户版本</small></header>
            <p class="statement-preview">对于 <strong>{{ statement.targetUser || '【目标市场/用户】' }}</strong>，我们的 <strong>{{ statement.productName || '【产品名称】' }}</strong> 是一个 <strong>{{ statement.productCategory || '【产品类别】' }}</strong>，它能提供 <strong>{{ statement.coreValue || '【核心价值/关键收益】' }}</strong>，因为它具有 <strong>{{ statement.differentiationReason || '【主要差异化理由】' }}</strong>。</p>
            <div class="positioning-fields">
              <label><span>目标市场/用户</span><input v-model="statement.targetUser" :aria-label="`版本${index + 1}目标市场或用户`" placeholder="填写目标市场/用户" /></label>
              <label><span>产品名称</span><input v-model="statement.productName" :aria-label="`版本${index + 1}产品名称`" placeholder="填写产品名称" /></label>
              <label><span>产品类别</span><input v-model="statement.productCategory" :aria-label="`版本${index + 1}产品类别`" placeholder="填写产品类别" /></label>
              <label><span>核心价值/关键收益</span><input v-model="statement.coreValue" :aria-label="`版本${index + 1}核心价值或关键收益`" placeholder="填写核心价值/关键收益" /></label>
              <label class="positioning-fields__wide"><span>主要差异化理由</span><textarea v-model="statement.differentiationReason" :aria-label="`版本${index + 1}主要差异化理由`" placeholder="填写主要差异化理由" /></label>
            </div>
          </article>
          <p v-if="positioningValidationMessage" class="core-pain-validation-message" role="status">{{ positioningValidationMessage }}</p>
        </section>

        <section v-show="isSectionVisible(4)" class="step-card">
          <div v-if="activeStepName" class="step-title-row">
            <div>
              <p class="section-eyebrow">Step {{ String(form.activeStep).padStart(2, '0') }}</p>
              <h3>{{ activeStepName }}</h3>
            </div>
          </div>
          <div class="step-content">
            <label class="field-block">
              <span>目标用户：</span>
              <textarea v-model="form.statement.targetUsers" />
            </label>
            <label class="field-block">
              <span>核心价值主张：</span>
              <textarea v-model="form.statement.valueProposition" />
            </label>
            <label class="field-block">
              <span>差异化优势：</span>
              <textarea v-model="form.statement.differentiation" />
            </label>
            <label class="field-block">
              <span>产品定位陈述：</span>
              <textarea v-model="form.statement.positioning" />
            </label>
          </div>
        </section>

        <section v-show="hasConfiguredSteps && form.activeStep > 4" class="step-card completion-card">
          <div class="step-title-row">
            <div>
              <p class="section-eyebrow">Step {{ String(form.activeStep).padStart(2, '0') }}</p>
              <h3>{{ activeStepName }}</h3>
            </div>
          </div>
          <p class="step-desc">请检查已填写的调研、定位画布、价值主张和定位陈述，再保存或提交实训成果。</p>
        </section>

        <div v-if="hasConfiguredSteps" class="step-navigation">
          <button type="button" class="btn-nav" :disabled="form.activeStep === 1" @click="goPreviousStep">
            <el-icon><ArrowLeft /></el-icon>
            上一步
          </button>
          <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-primary"
            :disabled="form.activeStep === configuredSteps.length"
            @click="goNextStep"
          >
            下一步
            <el-icon><ArrowRight /></el-icon>
          </button>
        </div>

        <div class="training-actions">
          <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>
    </main>

    <TrainingAiSidebar
      study-tip="当前任务建议：先明确目标人群和核心痛点，再把定位画布、价值主张画布和定位陈述串成一条完整逻辑。"
      reference-title="定位分析参考"
      reference-text="· 市场调研：竞品、用户评价、需求痛点<br />· 定位画布：用户、场景、差异化机会<br />· 价值主张：客户任务、痛点、收益与解决方案<br />· 定位陈述：目标用户 + 核心价值 + 差异化理由"
      :progress-items="progressItems"
    />
  </div>
</template>

<script setup>
import { computed, getCurrentInstance, onMounted, ref } from "vue";
import { ArrowLeft, ArrowRight, CircleCheck, Download, Operation, UploadFilled } from "@element-plus/icons-vue";
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 { checkProductValuePositioningStepOne, checkProductValuePositioningStepTwo, checkProductValuePositioningStepThree, getStudentTrainingAnswer, saveStudentTrainingAnswer, uploadStudentTrainingFile } from "@/api/studentTrainingAnswer";
import { parseTrainingArray } from "@/views/training/taskKeyMap";
import { isStudentDemo } from "@/utils/studentDemo";

const TASK_KEY = "product-value-positioning";
const { proxy } = getCurrentInstance();
const saving = ref(false);
const checkingCorePain = ref(false);
const corePainValidationMessage = ref("");
const checkingValueCanvas = ref(false);
const valueCanvasValidationMessage = ref("");
const checkingPositioning = ref(false);
const positioningValidationMessage = ref("");
const uploadingValueCanvas = ref(false);
const valueCanvasInput = ref(null);
const taskConfig = ref(null);

const corePainTypes = ["核心痛点1", "核心痛点2", "核心痛点3", "弱需求", "伪需求"];
const positioningStatementFields = ["targetUser", "productName", "productCategory", "coreValue", "differentiationReason"];

function createPositioningStatement(id) {
  return { id, targetUser: "", productName: "", productCategory: "", coreValue: "", differentiationReason: "" };
}

const defaultRequirement =
  "产品价值主张及定位需要在市场调研和用户洞察基础上，明确目标用户、核心价值、差异化优势和定位表达。";
const defaultBackground =
  "某智能家居公司计划推出一款面向家庭用户的 AI 智能健身镜，希望通过该产品进入家庭健身市场。作为产品经理，需要基于市场调研与用户洞察完成系统化定位。";
const defaultGoals = [
  "理解产品定位的概念、作用与核心要素。",
  "掌握定位画布与价值主张画布的系统化工具。",
  "运用产品定位方法完成一次 AI 智能健身镜的定位设计。",
  "撰写清晰、有力的产品定位陈述。",
];

function createForm() {
  return {
    activeStep: 1,
    corePainRows: corePainTypes.map((type, index) => ({ id: index + 1, type, description: "", scene: "" })),
    research: { marketAnalysis: "", userResearch: "", persona: "" },
    positionCanvas: { targetUsers: "", needsAndPains: "", competitorOpportunity: "" },
    customerProfile: { jobs: "", pains: "", gains: "" },
    valueMap: { products: "", painRelievers: "", gainCreators: "" },
    valuePropositionCanvas: { url: "", name: "" },
    positioningStatements: [createPositioningStatement(1), createPositioningStatement(2)],
    valueCanvas: { customerJobs: "", pains: "", gains: "", products: "", painRelievers: "", gainCreators: "" },
    statement: { targetUsers: "", valueProposition: "", differentiation: "", positioning: "" },
  };
}

const form = ref(createForm());
const taskTitle = computed(() => taskConfig.value?.taskName || "产品价值主张及定位");
const taskBackground = computed(() => taskConfig.value?.background || defaultBackground);
const taskRequirement = computed(() => taskConfig.value?.requirements || defaultRequirement);
const taskGoals = computed(() => parseTrainingArray(taskConfig.value?.objectives, defaultGoals));
const configuredSteps = computed(() => parseTrainingArray(taskConfig.value?.steps));
const hasConfiguredSteps = computed(() => configuredSteps.value.length > 0);
const activeStepName = computed(() => configuredSteps.value[form.value.activeStep - 1] || "");
const progressItems = computed(() =>
  configuredSteps.value.map((step, index) => ({
    text: step,
    status: index + 1 < form.value.activeStep ? "done" : index + 1 === form.value.activeStep ? "doing" : "",
  }))
);

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

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

async function loadSavedAnswer() {
  try {
    const res = await getStudentTrainingAnswer(TASK_KEY);
    if (res?.data?.step1Answer) applySavedAnswer(res.data.step1Answer);
  } catch (error) {
    // Keep the local form when no historical answer is available.
  }
}

function normalizeActiveStep(value) {
  if (!configuredSteps.value.length) return 1;
  const step = Number(value) || 1;
  return Math.min(Math.max(step, 1), configuredSteps.value.length);
}

async function setCurrentStep(step) {
  const targetStep = normalizeActiveStep(step);
  if (targetStep > form.value.activeStep) {
    if (form.value.activeStep === 1 && !(await ensureCorePainValid())) return;
    if (form.value.activeStep === 2 && !(await ensureValueCanvasValid())) return;
    if (form.value.activeStep === 3 && !(await ensurePositioningValid())) return;
  }
  form.value.activeStep = targetStep;
}

function isSectionVisible(section) {
  return !hasConfiguredSteps.value || form.value.activeStep === section;
}

async function goPreviousStep() {
  await setCurrentStep(form.value.activeStep - 1);
}

async function goNextStep() {
  await setCurrentStep(form.value.activeStep + 1);
}

function applySavedAnswer(value) {
  try {
    const parsed = JSON.parse(value);
    if (!parsed || typeof parsed !== "object") return;
    form.value = normalizeForm(parsed);
  } catch (error) {
    // Ignore malformed historical answers.
  }
}

function normalizeForm(value = {}) {
  const base = createForm();
  return {
    ...base,
    ...value,
    activeStep: normalizeActiveStep(value.activeStep),
    corePainRows: normalizeCorePainRows(value.corePainRows),
    research: { ...base.research, ...(value.research || {}) },
    positionCanvas: { ...base.positionCanvas, ...(value.positionCanvas || {}) },
    customerProfile: { ...base.customerProfile, ...(value.customerProfile || {}) },
    valueMap: { ...base.valueMap, ...(value.valueMap || {}) },
    valuePropositionCanvas: { ...base.valuePropositionCanvas, ...(value.valuePropositionCanvas || {}) },
    positioningStatements: normalizePositioningStatements(value.positioningStatements),
    valueCanvas: { ...base.valueCanvas, ...(value.valueCanvas || {}) },
    statement: { ...base.statement, ...(value.statement || {}) },
  };
}

function normalizeCorePainRows(rows = []) {
  const savedRows = Array.isArray(rows) ? rows : [];
  return corePainTypes.map((type, index) => ({
    id: index + 1,
    type,
    description: String(savedRows[index]?.description || ""),
    scene: String(savedRows[index]?.scene || ""),
  }));
}

function normalizePositioningStatements(statements = []) {
  const savedStatements = Array.isArray(statements) ? statements : [];
  return [1, 2].map((id, index) => {
    const saved = savedStatements[index] || {};
    return positioningStatementFields.reduce((result, field) => ({ ...result, [field]: String(saved[field] || "") }), { id });
  });
}

async function ensureCorePainValid() {
  if (checkingCorePain.value) return false;
  checkingCorePain.value = true;
  try {
    const response = await checkProductValuePositioningStepOne({ rows: form.value.corePainRows });
    const result = response?.data || {};
    corePainValidationMessage.value = result.message || (result.valid ? "核心痛点分类填写完整。" : "请完成 3 个核心痛点、弱需求和伪需求的描述与场景。");
    return result.valid === true;
  } catch (error) {
    corePainValidationMessage.value = error?.message || "核心痛点校验失败，请稍后重试。";
    return false;
  } finally {
    checkingCorePain.value = false;
  }
}

async function ensureValueCanvasValid() {
  if (checkingValueCanvas.value) return false;
  checkingValueCanvas.value = true;
  try {
    const response = await checkProductValuePositioningStepTwo({
      customerProfile: form.value.customerProfile,
      valueMap: form.value.valueMap,
      canvasUrl: form.value.valuePropositionCanvas.url,
    });
    const result = response?.data || {};
    valueCanvasValidationMessage.value = result.message || (result.valid ? "价值主张画布填写完整。" : "请完整填写两张画布表并上传产品价值主张画布。");
    return result.valid === true;
  } catch (error) {
    valueCanvasValidationMessage.value = error?.message || "价值主张画布校验失败，请稍后重试。";
    return false;
  } finally { checkingValueCanvas.value = false; }
}

async function ensurePositioningValid() {
  if (checkingPositioning.value) return false;
  checkingPositioning.value = true;
  try {
    const response = await checkProductValuePositioningStepThree({ statements: form.value.positioningStatements });
    const result = response?.data || {};
    positioningValidationMessage.value = result.message || (result.valid ? "两版定位陈述填写完整。" : "请完整填写两个产品价值定位陈述版本。");
    return result.valid === true;
  } catch (error) {
    positioningValidationMessage.value = error?.message || "定位陈述校验失败，请稍后重试。";
    return false;
  } finally { checkingPositioning.value = false; }
}

function buildOutcome() {
  return {
    taskKey: TASK_KEY,
    taskId: taskConfig.value?.id || "",
    taskName: taskTitle.value,
    currentStep: form.value.activeStep,
    configuredSteps: configuredSteps.value,
    corePainRows: form.value.corePainRows,
    research: form.value.research,
    positionCanvas: form.value.positionCanvas,
    customerProfile: form.value.customerProfile,
    valueMap: form.value.valueMap,
    valuePropositionCanvas: form.value.valuePropositionCanvas,
    positioningStatements: form.value.positioningStatements,
    valueCanvas: form.value.valueCanvas,
    statement: form.value.statement,
    updatedAt: new Date().toISOString(),
  };
}

function buildAnswerPayload(status) {
  return {
    saveAction: status === "SUBMITTED" ? "SUBMIT" : status === "RESET" ? "RESET" : "SAVE",
    currentStep: form.value.activeStep,
    step1Answer: JSON.stringify(buildOutcome()),
  };
}

async function persist(status = "IN_PROGRESS") {
  if (saving.value) return;
  if (status !== "RESET") {
    if (form.value.activeStep === 1 && !(await ensureCorePainValid())) return false;
    if (form.value.activeStep === 2 && !(await ensureValueCanvasValid())) return false;
    if (form.value.activeStep === 3 && !(await ensurePositioningValid())) return false;
  }
  saving.value = true;
  try {
    await saveStudentTrainingAnswer(TASK_KEY, buildAnswerPayload(status));
    proxy?.$modal?.msgSuccess(status === "SUBMITTED" ? "提交成功" : "保存成功");
    return true;
  } finally {
    saving.value = false;
  }
}

function saveCurrentProgress() {
  return persist("IN_PROGRESS");
}

function submitTask() {
  return persist("SUBMITTED");
}

async function resetTraining() {
  clearValueCanvas();
  form.value = createForm();
  await persist("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`;
  link.click();
  URL.revokeObjectURL(url);
}

function numberToChinese(number) { return ["一", "二", "三", "四"][number - 1] || String(number); }

const customerProfileExportContent = computed(() => `# 用户档案（Customer Profile）\n\n## 用户目标（Jobs）\n${form.value.customerProfile.jobs}\n\n## 痛点（Pains）\n${form.value.customerProfile.pains}\n\n## 收益期望（Gains）\n${form.value.customerProfile.gains}\n`);
const valueMapExportContent = computed(() => `# 产品价值地图（Value Map）\n\n## 产品与服务\n${form.value.valueMap.products}\n\n## 痛点缓释器（Pain Relievers）\n${form.value.valueMap.painRelievers}\n\n## 增益创造器（Gain Creators）\n${form.value.valueMap.gainCreators}\n`);

function downloadText(content, fileName) {
  const blob = new Blob([content], { type: "text/markdown;charset=utf-8" });
  const url = URL.createObjectURL(blob);
  const link = document.createElement("a");
  link.href = url;
  link.download = fileName;
  link.click();
  URL.revokeObjectURL(url);
}

function exportCanvasSection(name, content) { downloadText(content, `${taskTitle.value}-${name}.md`); }

function downloadCanvasTemplate() {
  downloadText("# 产品价值主张画布\n\n## 用户档案\n- 用户目标（Jobs）：\n- 痛点（Pains）：\n- 收益期望（Gains）：\n\n## 产品价值地图\n- 产品与服务：\n- 痛点缓释器（Pain Relievers）：\n- 增益创造器（Gain Creators）：\n\n## 匹配（Fit）说明\n", "产品价值主张画布模板.md");
}

function openValueCanvasPicker() { valueCanvasInput.value?.click(); }

function clearValueCanvas() {
  if (form.value?.valuePropositionCanvas?.url?.startsWith("blob:")) URL.revokeObjectURL(form.value.valuePropositionCanvas.url);
  if (form.value) form.value.valuePropositionCanvas = { url: "", name: "" };
}

async function handleValueCanvasUpload(event) {
  const file = event.target?.files?.[0];
  if (!file) return;
  if (!["image/jpeg", "image/png", "image/webp"].includes(file.type)) {
    proxy?.$modal?.msgError?.("请上传 PNG、JPG 或 WEBP 格式的图片"); event.target.value = ""; return;
  }
  if (file.size > 5 * 1024 * 1024) { proxy?.$modal?.msgError?.("图片大小不能超过 5MB"); event.target.value = ""; return; }
  uploadingValueCanvas.value = true;
  try {
    if (isStudentDemo()) { clearValueCanvas(); form.value.valuePropositionCanvas = { url: URL.createObjectURL(file), name: file.name }; }
    else {
      const formData = new FormData(); formData.append("file", file);
      const result = await uploadStudentTrainingFile(formData);
      const url = result?.url || result?.data?.url;
      if (!url) throw new Error("图片上传失败，请重试");
      form.value.valuePropositionCanvas = { url, name: file.name };
    }
    valueCanvasValidationMessage.value = "";
    proxy?.$modal?.msgSuccess?.("产品价值主张画布上传成功");
  } catch (error) { proxy?.$modal?.msgError?.(error?.message || "图片上传失败，请重试"); }
  finally { uploadingValueCanvas.value = false; event.target.value = ""; }
}
</script>

<style scoped lang="scss">
.product-positioning-page {
  display: grid;
  grid-template-columns: minmax(720px, 1fr) 340px;
  gap: 24px;
  min-height: calc(100vh - 76px);
  padding: 24px 24px 32px;
  color: #eef5ff;
  background: #06111d;
}

.training-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: inset 0 1px 0 rgba(169, 229, 255, 0.08), 0 22px 48px rgba(0, 0, 0, 0.22);
}

.task-header { margin-bottom: 24px; }

.task-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 28px;
  padding: 4px 14px;
  border: 1px solid rgba(99, 217, 255, 0.55);
  border-radius: 999px;
  color: #dff5ff;
  background: rgba(17, 126, 178, 0.36);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
}

.task-title {
  margin: 12px 0 0;
  color: #ffffff;
  font-size: 30px;
  font-weight: 900;
  line-height: 1.3;
}

.task-card,
.step-card {
  border: 1px solid rgba(82, 174, 226, 0.42);
  border-radius: 26px;
  background: rgba(0, 25, 42, 0.64);
}

.task-card {
  margin-top: 28px;
  padding: 18px 22px 22px;
}

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

.section-eyebrow {
  margin: 0;
  color: #71dfff;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: 0.02em;
}

.workbench-head h3 {
  margin: 4px 0 8px;
  color: #ffffff;
  font-size: 26px;
  font-weight: 800;
  line-height: 1.3;
}

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

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

.outline-action,
.btn-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  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: inherit;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}

.outline-action:hover,
.outline-action:focus-visible,
.btn-nav:hover:not(:disabled),
.btn-nav:focus-visible {
  border-color: rgba(116, 235, 255, 0.85);
  background: rgba(18, 146, 204, 0.5);
  outline: none;
  transform: translateY(-1px);
}

.step-indicator {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0;
  width: calc(100% + 24px);
  min-height: 0;
  margin: 0 -12px 32px;
  padding: 18px 22px;
  overflow-x: auto;
  border: 1px solid rgba(0, 180, 255, 0.3);
  border-radius: 18px;
  background:
    linear-gradient(90deg, rgba(6, 42, 61, 0.58), rgba(1, 18, 31, 0.42)),
    rgba(0, 0, 0, 0.3);
  box-shadow: inset 0 1px 0 rgba(145, 233, 255, 0.08);
  scrollbar-width: thin;
}

.step-tab {
  display: flex;
  flex: 1 0 145px;
  align-items: center;
  min-width: 0;
  min-height: 66px;
  padding: 8px 10px;
  border: 1px solid rgba(68, 141, 177, 0.35);
  border-radius: 8px;
  color: #9ab3d0;
  background: rgba(3, 27, 43, 0.52);
  box-shadow: inset 0 1px 0 rgba(135, 221, 255, 0.04);
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
  transition: transform 0.2s ease, color 0.2s ease, border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.step-tab:hover {
  transform: translateY(-2px);
  border-color: rgba(89, 223, 255, 0.82);
  color: #ffffff;
  background: rgba(8, 92, 131, 0.52);
  box-shadow: 0 7px 18px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(152, 239, 255, 0.16);
}

.step-tab:hover .step-action {
  color: #9bf4ff;
}

.step-tab:focus-visible {
  outline: 2px solid rgba(92, 224, 255, 0.7);
  outline-offset: 2px;
}

.step-tab.active {
  border-color: rgba(89, 226, 255, 0.85);
  color: #ffffff;
  background: linear-gradient(115deg, rgba(4, 109, 155, 0.78), rgba(5, 62, 102, 0.64));
  box-shadow: 0 0 18px rgba(24, 183, 235, 0.22), inset 0 1px 0 rgba(176, 246, 255, 0.2);
}

.step-marker {
  display: inline-flex;
  flex: 0 0 38px;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(101, 176, 208, 0.6);
  border-radius: 50%;
  color: #a6c4d9;
  background: rgba(3, 25, 40, 0.8);
  box-shadow: inset 0 0 12px rgba(38, 174, 233, 0.08);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.04em;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.step-copy {
  display: grid;
  min-width: 0;
  gap: 4px;
  margin-left: 10px;
}

.step-name {
  display: -webkit-box;
  overflow: hidden;
  color: inherit;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.25;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.step-action {
  color: #66b6d4;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1;
  transition: color 0.2s ease;
}

.step-tab.active .step-marker {
  border-color: #72e8ff;
  color: #ffffff;
  background: linear-gradient(135deg, #08b7e8, #1375d0);
  box-shadow: 0 0 0 5px rgba(25, 179, 237, 0.14), 0 0 18px rgba(46, 208, 255, 0.58);
}

.step-tab.complete .step-marker {
  border-color: rgba(84, 230, 221, 0.85);
  color: #062b37;
  background: #6ef0e1;
  box-shadow: 0 0 12px rgba(79, 231, 218, 0.35);
}

.step-connector {
  position: relative;
  flex: 0 1 40px;
  min-width: 18px;
  height: 2px;
  margin: 0 8px;
  overflow: visible;
  background: rgba(98, 169, 201, 0.34);
}

.step-connector::after {
  position: absolute;
  top: 50%;
  right: -1px;
  width: 6px;
  height: 6px;
  border-top: 1px solid #73b1ce;
  border-right: 1px solid #73b1ce;
  content: "";
  transform: translateY(-50%) rotate(45deg);
}

.step-tab.complete + .step-connector {
  background: linear-gradient(90deg, #6ef0e1, #1cb8e9);
  box-shadow: 0 0 9px rgba(53, 218, 235, 0.46);

  &::after {
    border-color: #63e6f1;
  }
}

.step-card {
  margin-top: 32px;
  padding: 18px 22px 22px;
}

.step-indicator + .step-card { margin-top: 0; }
.workbench-head + .step-card { margin-top: 0; }
.step-card + .step-card { margin-top: 16px; }

.step-title-row { margin-bottom: 14px; }
.step-title-row h3 {
  margin: 4px 0 0;
  color: #ffffff;
  font-size: 22px;
  font-weight: 900;
  line-height: 1.3;
}

.step-content { color: #d7ecff; }

.field-block {
  display: block;
  margin-bottom: 16px;
}

.field-block:last-child { margin-bottom: 0; }

.field-block span {
  display: block;
  margin-bottom: 8px;
  color: #dff5ff;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.6;
}

.field-block textarea {
  display: block;
  width: 100%;
  min-height: 110px;
  padding: 12px 14px;
  border: 1px solid rgba(45, 95, 126, 0.95);
  border-radius: 14px;
  color: #eef5ff;
  background: #0f1a24;
  box-sizing: border-box;
  font: inherit;
  font-size: 14px;
  line-height: 1.65;
  resize: vertical;
}

.field-block textarea:focus {
  border-color: rgba(92, 224, 255, 0.7);
  box-shadow: 0 0 0 3px rgba(0, 174, 255, 0.13);
  outline: none;
}

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

.value-grid .field-block { margin: 0; }

.core-pain-intro {
  margin-bottom: 18px;
  padding: 16px 18px;
  border-left: 3px solid #55ddff;
  border-radius: 0 14px 14px 0;
  background: linear-gradient(90deg, rgba(7, 92, 132, 0.28), rgba(5, 34, 51, 0.12));

  p {
    margin: 0;
    color: #cae7f2;
    font-size: 14px;
    line-height: 1.8;
  }

  p + p { margin-top: 6px; }
}

.core-pain-table-wrap { overflow-x: auto; }

.core-pain-table {
  width: 100%;
  min-width: 820px;
  border-collapse: collapse;
  table-layout: fixed;

  th,
  td {
    border: 1px solid rgba(77, 167, 220, 0.28);
    text-align: center;
    vertical-align: middle;
  }

  th {
    padding: 11px 10px;
    color: #f5fcff;
    background: linear-gradient(100deg, #0787bd, #075276);
    font-size: 14px;
    font-weight: 800;
  }

  td {
    height: 84px;
    padding: 9px;
    color: #d7f1ff;
    background: rgba(1, 14, 26, 0.48);
  }

  th:nth-child(1),
  td:nth-child(1) { width: 7%; }
  th:nth-child(2),
  td:nth-child(2) { width: 15%; }
  th:nth-child(3),
  td:nth-child(3) { width: 32%; }

  .pain-type-cell {
    color: #b9e7f6;
    font-weight: 800;
    background: rgba(7, 62, 88, 0.46);
  }

  textarea {
    display: block;
    width: 100%;
    height: 76px;
    min-height: 52px;
    padding: 10px;
    border: 1px solid rgba(45, 95, 126, 0.95);
    border-radius: 10px;
    outline: none;
    color: #eef5ff;
    background: rgba(4, 24, 38, 0.72);
    box-sizing: border-box;
    font: inherit;
    font-size: 13px;
    line-height: 1.55;
    resize: vertical;

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

.core-pain-validation-message {
  margin: 12px 0 0;
  color: #ffab9d;
  font-size: 13px;
  font-weight: 800;
}

.value-proposition-intro {
  margin-bottom: 18px;
  padding: 14px 16px;
  border: 1px solid rgba(71, 183, 232, 0.28);
  border-radius: 14px;
  color: #c9e9f5;
  background: rgba(4, 48, 71, 0.28);
  font-size: 14px;
  line-height: 1.8;
}

.canvas-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 18px 0 10px;

  h4 { margin: 0; color: #ffffff; font-size: 17px; }
  small { margin-left: 6px; color: #8dc8df; font-size: 12px; font-weight: 600; }
}

.canvas-section-heading--spaced { margin-top: 28px; }

.canvas-export-button,
.template-download-button,
.canvas-upload-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid rgba(94, 219, 255, 0.72);
  border-radius: 10px;
  color: #effcff;
  background: linear-gradient(105deg, #078bbf, #095c89);
  cursor: pointer;
  font: inherit;
  font-weight: 800;
  transition: .2s ease;
}

.canvas-export-button { min-width: 92px; height: 34px; padding: 0 14px; font-size: 13px; }
.template-download-button { min-width: 116px; height: 36px; padding: 0 14px; font-size: 13px; }
.canvas-upload-trigger { min-width: 218px; min-height: 54px; padding: 0 22px; font-size: 15px; }

.canvas-export-button:hover,
.template-download-button:hover,
.canvas-upload-trigger:hover:not(:disabled) {
  border-color: #9bf1ff;
  transform: translateY(-1px);
  box-shadow: 0 7px 18px rgba(0, 158, 213, 0.2);
}

.canvas-upload-trigger:disabled { cursor: not-allowed; opacity: .65; }

.value-canvas-table-wrap { overflow-x: auto; }

.value-canvas-table {
  width: 100%;
  min-width: 820px;
  border-collapse: collapse;
  table-layout: fixed;

  th,
  td { border: 1px solid rgba(77, 167, 220, 0.3); }
  th { padding: 10px; color: #f6fdff; background: linear-gradient(100deg, #0787bd, #075276); font-size: 14px; font-weight: 800; }
  td { padding: 10px; color: #d7f1ff; background: rgba(1, 14, 26, 0.48); font-size: 13px; line-height: 1.65; vertical-align: middle; }
  th:nth-child(1), td:nth-child(1) { width: 19%; color: #c8edfa; font-weight: 800; text-align: center; }
  th:nth-child(2), td:nth-child(2) { width: 24%; color: #9fc4d4; }
  textarea {
    display: block; width: 100%; min-height: 72px; padding: 10px; border: 1px solid rgba(45, 95, 126, .95); border-radius: 9px; color: #eef5ff; background: rgba(4, 24, 38, .72); box-sizing: border-box; font: inherit; font-size: 13px; line-height: 1.55; resize: vertical;
    &:focus { border-color: rgba(92, 224, 255, .7); box-shadow: 0 0 0 3px rgba(0, 174, 255, .13); outline: none; }
  }
}

.canvas-drawing-section {
  margin-top: 28px;
  padding: 18px;
  border: 1px solid rgba(84, 185, 228, 0.32);
  border-radius: 16px;
  background: linear-gradient(110deg, rgba(8, 66, 94, .32), rgba(0, 19, 34, .26));
  text-align: center;

  h4 { margin: 0; color: #ffffff; font-size: 17px; text-align: left; }
  p { margin: 9px 0 18px; color: #bfdeeb; font-size: 13px; line-height: 1.75; text-align: left; }
}

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; clip-path: inset(50%); }

.value-canvas-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 0 auto;
  text-align: left;

  :deep(.el-image) { width: 116px; height: 76px; border: 1px solid rgba(92, 224, 255, .66); border-radius: 10px; cursor: zoom-in; }
  div { display: grid; gap: 5px; }
  strong { color: #eefcff; font-size: 14px; }
  span { color: #8fb9c9; font-size: 12px; }
}

.text-button { width: fit-content; padding: 0; border: 0; color: #77e4ff; background: transparent; cursor: pointer; font: inherit; font-size: 12px; text-decoration: underline; }

.canvas-guidance {
  position: relative;
  margin-top: 22px;
  padding: 15px 18px 15px 152px;
  border-left: 3px solid #38bee7;
  border-radius: 0 12px 12px 0;
  background: rgba(3, 43, 65, .24);

  p { margin: 0; color: #bedce8; font-size: 13px; line-height: 1.75; }
  p + p { margin-top: 4px; }
  .template-download-button { position: absolute; top: 44px; left: 18px; }
}

.positioning-intro {
  margin-bottom: 18px;
  padding: 15px 18px;
  border-left: 3px solid #55ddff;
  border-radius: 0 14px 14px 0;
  background: linear-gradient(90deg, rgba(7, 92, 132, .28), rgba(5, 34, 51, .12));

  p { margin: 0; color: #c9e7f3; font-size: 14px; line-height: 1.8; }
  p + p { margin-top: 5px; color: #a9ccda; }
}

.positioning-version-card {
  overflow: hidden;
  margin-top: 16px;
  border: 1px solid rgba(74, 178, 223, .36);
  border-radius: 16px;
  background: linear-gradient(120deg, rgba(5, 55, 81, .42), rgba(1, 17, 29, .5));

  header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 10px 16px;
    border-bottom: 1px solid rgba(75, 174, 218, .24);
    background: rgba(4, 86, 125, .35);
  }

  header span { color: #f2fdff; font-size: 16px; font-weight: 900; }
  header small { color: #8ecadd; font-size: 12px; }
}

.statement-preview {
  margin: 0;
  padding: 15px 16px;
  color: #afd2df;
  background: rgba(0, 16, 29, .36);
  font-size: 14px;
  line-height: 1.85;

  strong { color: #64daf8; font-weight: 800; }
}

.positioning-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 16px;

  label { display: grid; gap: 6px; min-width: 0; }
  label span { color: #d8f2fb; font-size: 12px; font-weight: 800; }
  input,
  textarea {
    width: 100%; padding: 10px 11px; border: 1px solid rgba(45, 95, 126, .95); border-radius: 9px; color: #eef5ff; background: rgba(4, 24, 38, .72); box-sizing: border-box; font: inherit; font-size: 13px; line-height: 1.55;
    &:focus { border-color: rgba(92, 224, 255, .7); box-shadow: 0 0 0 3px rgba(0, 174, 255, .13); outline: none; }
  }
  textarea { min-height: 66px; resize: vertical; }
}

.positioning-fields__wide { grid-column: 1 / -1; }

.step-navigation {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 22px;
}

.btn-nav.btn-save,
.btn-nav.btn-primary {
  border-color: rgba(92, 224, 255, 0.7);
  color: #ffffff;
  background: linear-gradient(95deg, #0b84bd, #096491);
}

.btn-nav:disabled {
  cursor: not-allowed;
  opacity: 0.45;
  transform: none;
}

.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);
  font-size: 24px;
  font-weight: 900;
}

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

@media (max-width: 900px) {
  .product-positioning-page { padding: 14px; }
  .training-core { padding: 18px; border-radius: 24px; }
  .workbench-head,
  .workbench-actions,
  .step-navigation { flex-direction: column; align-items: stretch; }
  .workbench-actions,
  .outline-action,
  .btn-nav,
  .training-actions :deep(.training-action) { width: 100%; }
  .step-indicator {
    align-items: stretch;
    flex-direction: column;
    width: 100%;
    margin-right: 0;
    margin-left: 0;
    overflow: visible;
    border-radius: 20px;
  }
  .step-tab { flex: 0 0 auto; width: 100%; }
  .step-connector {
    flex: 0 0 20px;
    min-width: 0;
    width: 2px;
    height: 20px;
    margin-left: 29px;
    text-align: center;
    writing-mode: vertical-rl;
  }
  .value-grid { grid-template-columns: 1fr; }
  .positioning-fields { grid-template-columns: 1fr; }
  .positioning-fields__wide { grid-column: auto; }
  .canvas-guidance { padding: 15px; }
  .canvas-guidance .template-download-button { position: static; margin: 8px 0; }
}
.workbench-head--actions-only {
  justify-content: flex-end;
  margin-bottom: 18px;
  padding-bottom: 0;
  border-bottom: 0;
}
</style>