维度	评估项	成功产品	失败产品
{{ 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" @click="exportOutcome"> <el-icon><Download /></el-icon> 导出实训成果 </button> <button type="button" class="btn-nav" :disabled="saving" @click="resetTraining"> <el-icon><RefreshLeft /></el-icon> 清空填写 </button> </div> </section> </main> <TrainingAiSidebar study-tip="当前任务建议：先选定一个成功产品和一个失败产品，再围绕八个维度逐项补充证据。" reference-title="关键因素分析参考" reference-text="· 用户需求真实性：是否高频、真实、可付费<br />· 产品体验闭环：是否易用、稳定、反馈清晰<br />· 技术与商业可行：技术、合规、成本、生态是否支撑落地" assist-text="建议把上一任务的产品调研信息引用到成功产品列，再为失败产品补充真实市场反馈或用户评价。" :progress-items="progressItems" /> </div> </template> <script setup> import { Aim, CircleCheck, Clock, DataAnalysis, 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"; 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 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: "产品开发关键因素", analysis: "围绕成功产品与失败产品进行对比，判断一款互联网智能产品能否成立，重点关注真实需求、体验闭环、技术成熟度、合规认证、供应链成本、商业模式、市场反馈和生态兼容。", background: "智能产品开发不能只看技术亮点，还需要验证用户是否愿意为功能付费，产品是否稳定易用，供应链是否可控，商业模式是否清晰，并持续结合市场反馈迭代。", goals: [ "理解产品开发成功与失败的核心判断维度。", "能够结合真实产品案例，分析关键成功因素和失败原因。", "形成面向后续产品规划、测试验证和上线运营的判断依据。", ], requirement: "请选择上一实训任务某款产品作为成功产品，分析关键成功因素，再分析一款失败产品原因。", }; const taskTitle = computed(() => taskConfig.value?.taskName \|\| defaultTask.title); const taskAnalysisText = computed(() => taskConfig.value?.knowledge \|\| defaultTask.analysis); const taskBackground = computed(() => taskConfig.value?.background \|\| defaultTask.background); const taskGoals = computed(() => parseArray(taskConfig.value?.objectives, defaultTask.goals)); const taskGoalText = computed(() => taskGoals.value.join("；")); const taskRequirement = computed(() => taskConfig.value?.requirements \|\| defaultTask.requirement); 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; } catch (error) { taskConfig.value = null; } } 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 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: 0 0 32px; color: #e8f7ff; background: transparent; } .factors-core { min-width: 0; } .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 { 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(6px); } .workbench-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; margin-bottom: 24px; padding-bottom: 18px; border-bottom: 1px solid rgba(0, 180, 255, 0.2); h3 { margin: 4px 0 8px; color: #ffffff; font-size: 26px; font-weight: 800; } p { margin: 0; color: #b8d5e8; line-height: 1.7; } } .workbench-actions { display: flex; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; gap: 10px; } .section-eyebrow { margin: 0; color: #71dfff; font-size: 12px; font-weight: 800; } .product-entry { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; margin-bottom: 22px; } .product-field { display: grid; grid-template-columns: 92px minmax(0, 1fr); align-items: center; gap: 10px; color: #e9f8ff; font-weight: 800; } .input-field, .table-textarea { width: 100%; border: 1px solid rgba(84, 177, 230, 0.62); border-radius: 18px; outline: none; color: #f4fbff; background: rgba(9, 24, 36, 0.94); transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease; &::placeholder { color: #6f8da3; } &:focus { border-color: #5fe7ff; background: rgba(10, 31, 46, 0.98); box-shadow: 0 0 0 3px rgba(34, 207, 255, 0.14); } } .input-single { height: 42px; padding: 0 16px; } .training-table-wrap { overflow-x: auto; border: 1px solid rgba(71, 158, 210, 0.42); border-radius: 20px; background: rgba(0, 13, 24, 0.66); } .factor-table { width: 100%; min-width: 980px; border-collapse: collapse; table-layout: fixed; th { padding: 16px 18px; border-right: 1px solid rgba(134, 220, 255, 0.2); color: #effdff; background: linear-gradient(180deg, #0b7fb3, #075c88); font-size: 16px; font-weight: 900; text-align: center; } td { min-height: 118px; padding: 16px; border-top: 1px solid rgba(87, 159, 200, 0.38); border-right: 1px solid rgba(87, 159, 200, 0.28); vertical-align: middle; } th:last-child, td:last-child { border-right: 0; } } .dimension-col { width: 190px; } .criteria-col { width: 300px; } .dimension-cell { color: #eafaff; font-size: 16px; font-weight: 800; text-align: center; } .criteria-cell { color: #d1e8f5; 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; 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; cursor: pointer; } .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: 1180px) { .product-factors { grid-template-columns: 1fr; } } @media (max-width: 860px) { .workbench-head, .workbench-actions, .task-actions { flex-direction: column; align-items: stretch; } .product-entry { grid-template-columns: 1fr; } .product-field { grid-template-columns: 1fr; } } </style>

{{ taskTitle }}

任务实训