维度	评估项	成功产品	失败产品
{{ row.dimension }}	{{ row.criteria }}	</td> <td> <textarea v-model="row.failedAnalysis" class="table-textarea" placeholder="填写失败产品在该维度的问题" /> </td> </tr> </tbody> </table> </div> <div class="task-actions"> <button type="button" class="btn-nav btn-save" :disabled="saving" @click="saveCurrentProgress"> <el-icon><CircleCheck /></el-icon> 保存当前进度 </button> <button type="button" class="btn-nav btn-submit" :disabled="saving" @click="submitTask"> 提交任务 </button> <button type="button" class="btn-nav" :disabled="saving" @click="resetTraining"> <el-icon><RefreshLeft /></el-icon> 清空填写 </button> </div> </section> </section> </main> <TrainingAiSidebar study-tip="当前任务建议：先选定一个成功产品和一个失败产品，再围绕八个维度逐项补充证据。" reference-title="关键因素分析参考" reference-text="· 用户需求真实性：是否高频、真实、可付费<br />· 产品体验闭环：是否易用、稳定、反馈清晰<br />· 技术与商业可行：技术、合规、成本、生态是否支撑落地" assist-text="建议把上一任务的产品调研信息引用到成功产品列，再为失败产品补充真实市场反馈或用户评价。" :progress-items="progressItems" /> </div> </template> <script setup> import { CircleCheck, Download, Operation, RefreshLeft } from "@element-plus/icons-vue"; import { getTrainingTaskByKey } from "@/api/trainingTask"; import { getStudentTrainingAnswer, saveStudentTrainingAnswer } from "@/api/studentTrainingAnswer"; import useUserStore from "@/store/modules/user"; import TrainingAiSidebar from "@/views/components/TrainingAiSidebar.vue"; import TrainingMaterialButton from "@/views/components/TrainingMaterialButton.vue"; import TrainingTaskBrief from "@/views/components/TrainingTaskBrief.vue"; const { proxy } = getCurrentInstance(); const TASK_KEY = "product-development-factors"; const userStore = useUserStore(); const taskConfig = ref(null); const saving = ref(false); const draftReady = ref(false); const currentStep = ref(0); const getLocalDraftKey = () => { const userInfo = userStore.userInfo \|\| {}; const userKey = userInfo.userId \|\| userInfo.user_id \|\| userInfo.username \|\| userInfo.userName \|\| "anonymous"; return `${TASK_KEY}:draft:${userKey}`; }; const defaultTask = { title: "产品开发关键因素", background: "智能产品开发不能只看技术亮点，还需要验证用户是否愿意为功能付费，产品是否稳定易用，供应链是否可控，商业模式是否清晰，并持续结合市场反馈迭代。", goals: [ "理解产品开发成功与失败的核心判断维度。", "能够结合真实产品案例，分析关键成功因素和失败原因。", "形成面向后续产品规划、测试验证和上线运营的判断依据。", ], requirement: "请选择上一实训任务某款产品作为成功产品，分析关键成功因素，再分析一款失败产品原因。", }; 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, []).slice(0, 4)); const form = ref({ successProduct: "", failedProduct: "", }); const createFactorRows = () => [ { dimension: "用户需求真实性", criteria: "是否解决真实、高频、可付费的痛点，用户愿为该功能支付溢价，非“技术炫技”或“伪需求”", successAnalysis: "", failedAnalysis: "", }, { dimension: "产品体验闭环", criteria: "操作是否无需说明书，“零学习成本”？是否操作简单、反馈明确、稳定性高", successAnalysis: "", failedAnalysis: "", }, { dimension: "技术应用", criteria: "核心技术是否已成熟、可量产？避免使用实验室级原型（如未验证的AI模型）", successAnalysis: "", failedAnalysis: "", }, { dimension: "合规与认证", criteria: "是否通过目标市场强制认证？目标市场要求的产品资质、检测报告等中国：CCC；美国：FCC；欧盟：CE；出口需符合RoHS、REACH。是否规避专利与知识产权风险？", successAnalysis: "", failedAnalysis: "", }, { dimension: "供应链与成本控制", criteria: "BOM成本是否可控？是否支持规模化？是否具备备选供应链？关键元器件（如芯片、传感器）有≥2家可替换供应商", successAnalysis: "", failedAnalysis: "", }, { dimension: "商业模式", criteria: "盈利模式是否清晰？硬件销售利润率≥50%，或有订阅服务（如云存储、AI功能包）。是否构建“数据-反馈-迭代”闭环？产品使用数据可回传，驱动功能优化与新版本开发", successAnalysis: "", failedAnalysis: "", }, { dimension: "市场反馈", criteria: "是否处于需求上升期？功能、设计、服务、品牌是否有差异化壁垒？用户是否高留存、高互动、低退货？", successAnalysis: "", failedAnalysis: "", }, { dimension: "生态与兼容", criteria: "是否能接入主流平台？是否支持iOS/Android、HomeKit、米家、Alexa等生态？是否支持第三方开发者扩展，提供API或SDK，鼓励生态共建？", successAnalysis: "", failedAnalysis: "", }, ]; const factorRows = ref(createFactorRows()); const progressItems = [ { text: "进行中：成功/失败产品对比", status: "doing" }, { text: "进行中：八个关键因素分析", status: "doing" }, { text: "待完成：导出实训成果", status: "" }, ]; onMounted(async () => { await loadTaskConfig(); loadDraft(); await loadSavedAnswer(); draftReady.value = true; }); watch( () => JSON.stringify(buildOutcome()), () => persistDraft() ); async function loadTaskConfig() { try { const res = await getTrainingTaskByKey(TASK_KEY); taskConfig.value = res?.data \|\| null; currentStep.value = 0; } catch (error) { taskConfig.value = null; currentStep.value = 0; } } async function loadSavedAnswer() { try { const res = await getStudentTrainingAnswer(TASK_KEY); const answer = res?.data; if (answer?.step1Answer) { applySavedAnswer(answer.step1Answer); clearDraft(); } } catch (error) { // Keep local draft when the backend answer cannot be loaded. } } function parseArray(value, fallback) { if (Array.isArray(value)) { return value.length ? value : fallback; } if (!value) { return fallback; } try { const parsed = JSON.parse(value); return Array.isArray(parsed) && parsed.length ? parsed : fallback; } catch (error) { const list = String(value) .split(/[；;\|]/) .map((item) => item.trim()) .filter(Boolean); return list.length ? list : fallback; } } function parseSavedAnswer(value) { if (!value) return null; try { return JSON.parse(value); } catch (error) { return null; } } function applySavedAnswer(value) { const parsed = parseSavedAnswer(value); if (!parsed \|\| typeof parsed !== "object") { return; } form.value = { successProduct: parsed.successProduct \|\| "", failedProduct: parsed.failedProduct \|\| "", }; if (Array.isArray(parsed.factors)) { const savedByDimension = parsed.factors.reduce((map, row) => { if (row?.dimension) { map[row.dimension] = row; } return map; }, {}); factorRows.value = createFactorRows().map((row, index) => ({ ...row, successAnalysis: savedByDimension[row.dimension]?.successAnalysis \|\| parsed.factors[index]?.successAnalysis \|\| "", failedAnalysis: savedByDimension[row.dimension]?.failedAnalysis \|\| parsed.factors[index]?.failedAnalysis \|\| "", })); } } function persistDraft() { if (!draftReady.value) return; try { localStorage.setItem(getLocalDraftKey(), JSON.stringify(buildOutcome())); } catch (error) { // Local draft is only a convenience; backend save remains the source of truth. } } function loadDraft() { try { const raw = localStorage.getItem(getLocalDraftKey()); if (raw) { applySavedAnswer(raw); } } catch (error) { clearDraft(); } } function clearDraft() { try { localStorage.removeItem(getLocalDraftKey()); } catch (error) { // Ignore browser storage failures. } } function buildOutcome() { return { title: taskTitle.value, successProduct: form.value.successProduct, failedProduct: form.value.failedProduct, factors: factorRows.value.map((row) => ({ dimension: row.dimension, criteria: row.criteria, successAnalysis: row.successAnalysis, failedAnalysis: row.failedAnalysis, })), }; } function buildAnswerPayload(saveAction = "SAVE") { return { step1Answer: JSON.stringify(buildOutcome()), currentStep: 1, submitted: false, saveAction, }; } async function saveCurrentProgress() { if (saving.value) return; saving.value = true; try { await saveStudentTrainingAnswer(TASK_KEY, buildAnswerPayload("SAVE")); clearDraft(); proxy?.$modal?.msgSuccess("已保存"); } catch (error) { proxy?.$modal?.msgError?.("保存失败"); } finally { saving.value = false; } } async function submitTask() { if (saving.value) return; saving.value = true; try { await saveStudentTrainingAnswer(TASK_KEY, buildAnswerPayload("SUBMIT")); clearDraft(); proxy?.$modal?.msgSuccess("提交成功"); } catch (error) { proxy?.$modal?.msgError?.("提交失败"); } finally { saving.value = false; } } async function resetTraining() { form.value = { successProduct: "", failedProduct: "", }; factorRows.value = createFactorRows(); clearDraft(); try { saving.value = true; await saveStudentTrainingAnswer(TASK_KEY, buildAnswerPayload("RESET")); } catch (error) { // Clearing the page should still work locally even when backend reset fails. } finally { saving.value = false; } proxy?.$modal?.msgSuccess("已清空填写内容"); } function exportOutcome() { const outcome = buildOutcome(); const blob = new Blob([JSON.stringify(outcome, null, 2)], { type: "application/json;charset=utf-8" }); const url = URL.createObjectURL(blob); const link = document.createElement("a"); link.href = url; link.download = "产品开发关键因素-实训成果.json"; document.body.appendChild(link); link.click(); document.body.removeChild(link); URL.revokeObjectURL(url); proxy?.$modal?.msgSuccess("导出成功"); } </script> <style lang="scss" scoped> .product-factors { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(720px, 1fr) 340px; gap: 24px; width: 100%; min-height: calc(100vh - 106px); padding: 24px 24px 32px; color: #e8f7ff; background: transparent; } .factors-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: 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; align-items: center; gap: 7px; margin-bottom: 12px; padding: 4px 14px; border: 1px solid rgba(0, 170, 255, 0.5); border-radius: 30px; color: #d6f6ff; background: rgba(0, 170, 255, 0.2); font-size: 12px; font-weight: 700; } .task-title { margin: 0; color: transparent; background: linear-gradient(135deg, #ffffff, #8bcbff); -webkit-background-clip: text; background-clip: text; font-size: 30px; line-height: 1.3; font-weight: 900; letter-spacing: 0; } .goal-bg { margin-bottom: 28px; padding: 16px 20px; border: 1px solid #2d5f7e; border-radius: 24px; background: rgba(0, 35, 55, 0.6); p { margin: 0; color: #d7ecff; font-size: 14px; line-height: 1.8; } } .subtitle-icon { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; color: #b9e2ff; font-weight: 800; } .subtitle-icon--spaced { margin-top: 12px; } .factors-workbench { margin: 0; padding: 18px 22px; border: 1px solid rgba(82, 174, 226, 0.42); border-radius: 26px; background: rgba(0, 25, 42, 0.64); box-shadow: none; backdrop-filter: none; } /* The legacy training wrapper injects a task pill through ::before. */ .factors-workbench::before { content: none !important; display: none !important; } .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; } .section-eyebrow { margin: 0; color: #71dfff; font-size: 12px; font-weight: 800; line-height: 1.4; } > div > .workbench-description { margin: 0; color: #d7ecff; font-size: 15px; font-weight: 400; line-height: 1.8; } } .workbench-actions { display: flex; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; gap: 10px; } .step-indicator { position: relative; display: flex; align-items: center; gap: 0; width: calc(100% + 24px); 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-family: inherit; font-size: 14px; font-weight: 800; cursor: pointer; text-align: left; transition: transform 0.2s ease, color 0.2s ease, border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease; &:hover { 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); transform: translateY(-2px); .step-action { color: #9bf4ff; } } &:focus-visible { outline: 2px solid #72e8ff; outline-offset: 4px; } &.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 { 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); } } &.complete { color: #dffbff; .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-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-connector { position: relative; flex: 0 1 40px; min-width: 18px; height: 2px; margin: 0 8px; background: rgba(98, 169, 201, 0.34); &::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; } } .factor-step-card { margin: 0; padding: 18px 22px; border: 1px solid rgba(82, 174, 226, 0.42); border-radius: 26px; background: rgba(0, 25, 42, 0.64); } .step-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 14px; h3 { margin: 4px 0 0; color: #ffffff; font-size: 22px; font-weight: 900; line-height: 1.3; } } .section-eyebrow { margin: 0; color: #71dfff; font-size: 12px; font-weight: 800; line-height: 1.4; } .product-entry { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; } .product-field { display: grid; grid-template-columns: 92px minmax(0, 1fr); align-items: center; gap: 10px; color: #dff5ff; font-size: 14px; font-weight: 800; } .input-field, .table-textarea { width: 100%; border: 1px solid rgba(45, 95, 126, 0.95); border-radius: 14px; outline: none; color: #eef5ff; background: #0f1a24; transition: border-color 0.18s ease, box-shadow 0.18s ease; &::placeholder { color: #8299aa; } &:focus { border-color: rgba(92, 224, 255, 0.7); box-shadow: 0 0 0 3px rgba(0, 174, 255, 0.13); } } .input-single { height: 42px; padding: 0 16px; } .training-table-wrap { overflow-x: auto; border: 1px solid rgba(0, 180, 255, 0.22); border-radius: 22px; background: rgba(1, 14, 26, 0.72); } .factor-table { width: 100%; min-width: 980px; border-collapse: collapse; table-layout: fixed; th { padding: 12px; border-right: 1px solid rgba(77, 167, 220, 0.2); color: #eaffff; background: rgba(8, 55, 82, 0.98); font-size: 14px; font-weight: 900; text-align: center; } td { min-height: 118px; padding: 12px; border-top: 1px solid rgba(77, 167, 220, 0.2); border-right: 1px solid rgba(77, 167, 220, 0.2); color: #d7f1ff; background: rgba(1, 14, 26, 0.48); vertical-align: top; } th:last-child, td:last-child { border-right: 0; } } .dimension-col { width: 190px; } .criteria-col { width: 300px; } .dimension-cell { color: #eafaff; font-size: 14px; font-weight: 900; text-align: center; } .criteria-cell { color: #cfe8f8; font-size: 14px; line-height: 1.7; text-align: center; } .table-textarea { min-height: 104px; resize: vertical; padding: 12px 14px; line-height: 1.6; } .task-actions { display: flex; justify-content: center; gap: 52px; margin-top: 36px; } .outline-action, .btn-nav { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: inherit; cursor: pointer; } .outline-action { 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-weight: 800; transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease; &:hover { transform: translateY(-1px); border-color: rgba(116, 235, 255, 0.85); background: rgba(18, 146, 204, 0.5); } } .workbench-actions .outline-action { min-width: 0 !important; min-height: 40px !important; height: 40px !important; padding: 0 18px !important; border: 1px solid rgba(99, 217, 255, 0.55) !important; border-radius: 999px !important; color: #e9fbff !important; background: rgba(17, 126, 178, 0.36) !important; box-shadow: none !important; font-size: 14px !important; font-weight: 800 !important; line-height: 1 !important; } .workbench-actions :deep(.material-download) { min-height: 40px !important; padding: 0 18px !important; border-color: rgba(99, 217, 255, 0.55) !important; border-radius: 999px !important; color: #e9fbff !important; background: rgba(17, 126, 178, 0.36) !important; box-shadow: none !important; font-size: 14px !important; font-weight: 800 !important; line-height: 1 !important; } .workbench-actions :deep(.material-download:hover) { transform: translateY(-1px); border-color: rgba(116, 235, 255, 0.85) !important; color: #e9fbff !important; background: rgba(18, 146, 204, 0.5) !important; } .btn-nav { display: inline-flex; min-width: 172px; min-height: 64px; padding: 0 28px; border: 1px solid #2c83aa; border-radius: 6px; color: #dff7ff; background: rgba(13, 64, 88, 0.62); box-shadow: none; font-size: 24px; font-weight: 900; line-height: 1; letter-spacing: 0; text-shadow: none; } .btn-submit { border-color: #2c83aa; color: #dff7ff; background: rgba(13, 64, 88, 0.62); } .task-actions .btn-nav .el-icon { display: none; } .btn-nav:hover:not(:disabled) { border-color: #46b5e7; color: #ffffff; background: rgba(18, 85, 116, 0.78); } @media (max-width: 1100px) { .product-factors { grid-template-columns: 1fr; } } @media (max-width: 900px) { .product-factors { padding: 14px 14px 18px; } .factors-core { padding: 18px; border-radius: 24px; } .workbench-head, .workbench-actions, .task-actions, .step-indicator, .step-title-row { flex-direction: column; align-items: stretch; } .step-indicator { width: 100%; margin: 0 0 32px; padding: 16px; overflow-x: visible; border-radius: 20px; } .step-tab { flex: 0 0 auto; width: 100%; min-width: 0; } .step-connector { flex: 0 0 20px; align-self: flex-start; width: 2px; min-width: 0; height: 20px; margin: 4px 0 4px 18px; &::after { top: auto; right: auto; bottom: -1px; left: 50%; transform: translateX(-50%) rotate(135deg); } } .product-entry { grid-template-columns: 1fr; } .product-field { grid-template-columns: 1fr; } } .workbench-head--actions-only { justify-content: flex-end; margin-bottom: 18px; padding-bottom: 0; border-bottom: 0; } </style>

{{ taskTitle }}

{{ trainingSteps[currentStep] }}