序号	需求类型	需求描述	场景描述
{{ index + 1 }}	{{ 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="step-content"> <label class="field-block"> <span>目标用户群体：</span> <textarea v-model="form.positionCanvas.targetUsers" /> </label> <label class="field-block"> <span>用户核心需求与痛点：</span> <textarea v-model="form.positionCanvas.needsAndPains" /> </label> <label class="field-block"> <span>竞品定位与差异化机会：</span> <textarea v-model="form.positionCanvas.competitorOpportunity" /> </label> </div> </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="step-content value-grid"> <label class="field-block"> <span>客户任务：</span> <textarea v-model="form.valueCanvas.customerJobs" /> </label> <label class="field-block"> <span>用户痛点：</span> <textarea v-model="form.valueCanvas.pains" /> </label> <label class="field-block"> <span>用户收益：</span> <textarea v-model="form.valueCanvas.gains" /> </label> <label class="field-block"> <span>产品与服务：</span> <textarea v-model="form.valueCanvas.products" /> </label> <label class="field-block"> <span>痛点缓解方案：</span> <textarea v-model="form.valueCanvas.painRelievers" /> </label> <label class="field-block"> <span>收益创造方案：</span> <textarea v-model="form.valueCanvas.gainCreators" /> </label> </div> </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 } 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, getStudentTrainingAnswer, saveStudentTrainingAnswer } from "@/api/studentTrainingAnswer"; import { parseTrainingArray } from "@/views/training/taskKeyMap"; const TASK_KEY = "product-value-positioning"; const { proxy } = getCurrentInstance(); const saving = ref(false); const checkingCorePain = ref(false); const corePainValidationMessage = ref(""); const taskConfig = ref(null); const corePainTypes = ["核心痛点1", "核心痛点2", "核心痛点3", "弱需求", "伪需求"]; 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: "" }, 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 && form.value.activeStep === 1 && !(await ensureCorePainValid())) 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 \|\| {}) }, 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 \|\| ""), })); } 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; } } 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, 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" && form.value.activeStep === 1 && !(await ensureCorePainValid())) 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() { 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); } </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; } .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; } } .workbench-head--actions-only { justify-content: flex-end; margin-bottom: 18px; padding-bottom: 0; border-bottom: 0; } </style>

{{ taskTitle }}

{{ activeStepName }}