序号	模块	子模块	填写内容
{{ module.order }}	{{ module.name }}	{{ row.name }}	示例：{{ row.example }} </td> </tr> </template> </tbody> </table> </div> <div class="task-actions"> <button type="button" class="btn-nav" :disabled="saving" @click="saveStepTwo">{{ saving ? '保存中…' : '保存详细信息' }}</button> <button type="button" class="btn-nav btn-submit" @click="exportStepTwoTable"><el-icon><Download /></el-icon>导出 PRD 表格</button> <button type="button" class="btn-nav btn-primary" :disabled="saving" @click="goToStepThree">进入第 3 步<el-icon><ArrowRight /></el-icon></button> </div> </section> <section v-else-if="currentStep === 3" class="step-card prd-upload-card"> <p class="step-desc">PRD 是跨团队协作的基准文档。请基于第 2 步的核心模块信息，结合案例资料中的完整数据，生成一份完整的产品需求文档后上传。</p> <div class="prd-delivery-guide"> <ol> <li>下载 Word 版 PRD 空白模板后自行撰写。</li> <li>也可借助 AI：请根据产品需求文档框架和案例文档信息，撰写一份产品需求说明书。</li> </ol> <span>支持 .docx、.pdf，单个文件不超过 20MB；上传后可在线预览。</span> </div> <input ref="documentInput" class="file-input-hidden" type="file" accept=".docx,.pdf,application/pdf,application/vnd.openxmlformats-officedocument.wordprocessingml.document" @change="handleDocumentUpload" /> <div v-if="!stepThreeDocument.name" class="document-drop-zone" role="button" tabindex="0" @click="triggerDocumentUpload" @keyup.enter="triggerDocumentUpload"> <div class="document-drop-zone__icon"><el-icon><UploadFilled /></el-icon></div> <strong>{{ documentUploading ? '正在解析并上传…' : '上传产品需求文档' }}</strong> <span>Word（.docx）或 PDF</span> </div> <article v-else class="uploaded-document-card"> <div class="uploaded-document-icon"><el-icon><Document /></el-icon></div> <div class="uploaded-document-main"> <strong>{{ stepThreeDocument.name }}</strong> <span>{{ stepThreeDocument.fileType === 'PDF' ? 'PDF 文档' : 'Word 文档' }} · {{ formatFileSize(stepThreeDocument.size) }}</span> </div> <div class="uploaded-document-actions"> <button type="button" class="btn-nav btn-submit" @click="showDocumentPreview = true"><el-icon><View /></el-icon>在线预览</button> <button type="button" class="btn-nav" :disabled="documentUploading" @click="triggerDocumentUpload">替换</button> <button type="button" class="btn-nav btn-danger" :disabled="documentUploading" @click="removeDocument"><el-icon><Delete /></el-icon>删除</button> </div> </article> <div class="task-actions"> <button type="button" class="btn-nav" :disabled="!isDocumentReady \|\| saving \|\| submitting \|\| documentUploading" @click="saveStepThree">{{ saving ? '保存中…' : '保存文档' }}</button> <button type="button" class="btn-nav btn-submit" :disabled="!isDocumentReady \|\| documentUploading" @click="showDocumentPreview = true"><el-icon><View /></el-icon>预览文档</button> <button type="button" class="btn-nav btn-primary" :disabled="!canSubmitTask \|\| saving \|\| submitting \|\| documentUploading" @click="submitTask">{{ submitting ? '提交中…' : '提交任务' }}</button> </div> </section> <section v-else class="step-card upcoming-card"> <p class="section-eyebrow">Step {{ String(currentStep).padStart(2, '0') }}</p> <h3>{{ trainingSteps[currentStep - 1] \|\| '后续步骤' }}</h3> <p>该步骤将在对应实训页面继续完成。</p> <button type="button" class="btn-nav" @click="switchStep(2)">返回第 2 步</button> </section> </section> <el-dialog v-model="showDocumentPreview" :title="stepThreeDocument.name \|\| '产品需求文档预览'" width="min(1040px, 94vw)" class="prd-preview-dialog" append-to-body> <div v-if="stepThreeDocument.fileType === 'PDF' && stepThreeDocument.url" class="prd-pdf-preview"> <iframe :src="stepThreeDocument.url" :title="`${stepThreeDocument.name} PDF 预览`" /> </div> <div v-else-if="stepThreeDocument.previewContent" class="prd-text-preview">{{ stepThreeDocument.previewContent }}</div> <p v-else class="prd-preview-empty">暂未解析到可预览的文本内容，可下载原文件查看。</p> </el-dialog> </main> <TrainingAiSidebar :study-tip="sidebarStudyTip" :reference-title="currentStep === 3 ? 'PRD 文档交付提示' : currentStep === 2 ? 'PRD 详细信息填写提示' : 'PRD 模块判断提示'" :reference-text="sidebarReferenceText" :progress-items="progressItems" /> </div> </template> <script setup> import { computed, getCurrentInstance, onMounted, ref } from "vue"; import { ArrowRight, Close, Delete, Document, Download, InfoFilled, RefreshLeft, UploadFilled, View } from "@element-plus/icons-vue"; import TrainingAiSidebar from "@/views/components/TrainingAiSidebar.vue"; import TrainingTaskToolbar from "@/views/components/TrainingTaskToolbar.vue"; import TrainingTaskBrief from "@/views/components/TrainingTaskBrief.vue"; import { checkRequirementsDocumentStepOne, getStudentTrainingAnswer, previewRequirementsDocumentFile, saveStudentTrainingAnswer, uploadStudentTrainingFile } from "@/api/studentTrainingAnswer"; import { getTrainingTaskByKey } from "@/api/trainingTask"; import { parseTrainingArray } from "@/views/training/taskKeyMap"; import { isStudentDemo } from "@/utils/studentDemo"; const TASK_KEY = "requirements-doc"; const { proxy } = getCurrentInstance(); const MODULES = [ { id: "document-info", name: "文档说明" }, { id: "product-overview", name: "产品概述" }, { id: "user-needs-scenarios", name: "用户需求与场景" }, { id: "core-functional-requirements", name: "核心功能需求" }, { id: "non-functional-requirements", name: "非功能需求" }, { id: "hardware-spec-design", name: "硬件规格与设计需求" }, { id: "testing-requirements", name: "测试需求" }, { id: "project-planning", name: "项目规划" }, { id: "change-management", name: "需求变更管理" }, ]; const PURPOSES = [ { id: "functional-scope", text: "详细规定产品具体做什么，是开发与测试的直接依据。" }, { id: "acceptance-criteria", text: "明确验收标准，避免测试与产品理解不一致。" }, { id: "quality-attributes", text: "定义产品的“质量属性”，决定产品好不好用、稳不稳定。" }, { id: "document-governance", text: "建立文档本身的权威性与可追溯性，确保所有人看到的是同一份有效版本。" }, { id: "change-control", text: "确保每一次变更都经过评估、记录和通知。" }, { id: "user-context", text: "从用户视角出发，让团队在开发时能代入真实使用情境。" }, { id: "product-boundary", text: "回答“为什么做”和“做成什么样”，赋予开发团队价值感，划定产品边界。" }, { id: "hardware-constraints", text: "明确硬件与软件的通信协议及设计约束。" }, { id: "resource-plan", text: "将产品需求转化为时间与资源计划，用于管理预期。" }, ]; const PRD_DETAIL_MODULES = [ { id: "overview", order: "一", name: "产品概述", rows: [ { id: "backgroundPain", name: "1. 项目背景与痛点", example: "年轻租房群体夜间起夜开灯不便，需摸黑找开关；母婴家庭夜间喂奶、换尿布需柔和不刺眼光源。传统小夜灯功能单一，无法满足差异化场景需求，市场存在智能多场景小夜灯的空白机会。" }, { id: "positioningTarget", name: "2. 产品定位与目标用户", example: "一句话概括，如：面向 X 人群的 Y 类型产品" }, { id: "coreGoal", name: "3. 核心目标", example: "可量化的业务指标" }, { id: "productScope", name: "4. 产品范围", example: "明确本期做与不做的内容。" }, ] }, { id: "user", order: "二", name: "用户需求与场景", rows: [ { id: "persona", name: "1. 用户画像", example: "职场妈妈李婷，30 岁，宝宝 8 个月。夜间需频繁起夜喂奶/安抚，对光线敏感度极高，希望灯光柔和且能声控、手机控，不打扰宝宝睡眠节奏。" }, { id: "usageScenario", name: "2. 用户场景", example: "在什么时间、地点、触发条件下使用" }, { id: "painAndNeed", name: "3. 用户痛点与诉求", example: "用户表面的抱怨和底层的真实渴望" }, { id: "journeyMap", name: "4. 用户旅程地图", example: "用户完成任务的全流程触点" }, ] }, { id: "core", order: "三", name: "核心功能需求", rows: [ { id: "featureOverview", name: "1. 功能模块概览", example: "①语音控制模块（离线唤醒+指令识别）②智能调光模块（亮度和色温多档可调）③场景联动模块（定时/感应/APP 远程）④睡眠辅助模块（白噪声/助眠灯光模式）" }, { id: "featureDetails", name: "2. 详细功能描述", example: "优先级：P0（必须有）、P1（应该有）、P2（可以有）；说明交互流程、操作路径与软硬件交互规则。" }, ] }, { id: "nonfunctional", order: "四", name: "非功能需求", rows: [ { id: "performance", name: "1. 性能需求", example: "核心功能的性能要求，如响应时间" }, { id: "security", name: "2. 安全需求", example: "如：产品防火防水、数据加密等" }, { id: "usability", name: "3. 可用性与易用性", example: "操作容错率、学习成本" }, { id: "compatibility", name: "4. 兼容性", example: "软硬件跟主流系统之间的兼容性" }, ] }, { id: "hardware", order: "五", name: "硬件规格与设计需求", rows: [ { id: "hardwareSpecs", name: "1. 硬件参数", example: "如：芯片型号、传感器规格、屏幕尺寸/分辨率" }, { id: "interfaces", name: "2. 接口与协议", example: "蓝牙、Wi-Fi、串口通信的数据格式（如：JSON/XML 结构）" }, { id: "powerHeat", name: "3. 功耗与散热", example: "续航时间要求、温度控制范围" }, { id: "structureConstraints", name: "4. 结构设计约束", example: "对软件 UI 的物理限制（如：必须适配圆形屏幕）" }, ] }, { id: "testing", order: "六", name: "测试需求", rows: [ { id: "acceptance", name: "1. 验收标准", example: "针对每个核心功能的通过条件" }, { id: "testingFocus", name: "2. 测试重点", example: "高风险模块、复杂交互逻辑的测试关注点" }, { id: "testMatrix", name: "3. 兼容性测试矩阵", example: "需要覆盖的设备/系统组合" }, ] }, { id: "planning", order: "七", name: "项目规划", rows: [ { id: "milestones", name: "1. 里程碑", example: "需求评审日、交互定稿日、提测日、上线日" }, { id: "resourceDependencies", name: "2. 资源依赖", example: "需要 UI 设计、后端接口、外部第三方合作的配合时间点" }, { id: "riskAssessment", name: "3. 风险评估", example: "当前识别的最大风险点" }, ] }, ]; const DEFAULT_STEPS = ["PRD 模块核心作用匹配", "PRD 信息架构梳理", "生成产品需求文档", "PRD 文档评审"]; const fallbackTask = { title: "产品需求文档撰写", background: "PRD 是连接产品、设计、研发和测试的纲领性文件。本实训先建立对 PRD 模块职责的清晰认识，再逐步完成需求文档撰写。", goals: ["识别 PRD 的核心模块", "理解各模块在产品开发中的作用", "建立结构化撰写产品需求文档的基础"], requirement: "完成 PRD 核心模块匹配及七大模块详细信息填写。", }; const taskConfig = ref(null); const currentStep = ref(1); const assignments = ref({}); const stepTwoContents = ref({}); const stepThreeDocument = ref({ name: "", url: "", fileType: "", size: 0, previewContent: "" }); const documentInput = ref(null); const documentUploading = ref(false); const showDocumentPreview = ref(false); const selectedPurposeId = ref(""); const draggingPurposeId = ref(""); const dragOverModuleId = ref(""); const checking = ref(false); const saving = ref(false); const submitting = ref(false); const stepOnePassed = ref(false); const checkResult = ref(null); const taskTitle = computed(() => taskConfig.value?.taskName \|\| fallbackTask.title); const taskBackground = computed(() => taskConfig.value?.background \|\| fallbackTask.background); const taskGoals = computed(() => parseTrainingArray(taskConfig.value?.objectives, fallbackTask.goals)); const taskRequirement = computed(() => taskConfig.value?.requirements \|\| fallbackTask.requirement); const trainingSteps = computed(() => parseTrainingArray(taskConfig.value?.steps, DEFAULT_STEPS)); const progressItems = computed(() => trainingSteps.value.map((text, index) => ({ text, status: index === 0 ? (stepOnePassed.value ? "done" : "doing") : index === 1 && currentStep.value >= 2 ? "done" : index === 2 && currentStep.value >= 3 ? "doing" : "" }))); const unassignedPurposes = computed(() => PURPOSES.filter((purpose) => !Object.values(assignments.value).includes(purpose.id))); const allAssigned = computed(() => MODULES.every((module) => Boolean(assignments.value[module.id])) && Object.keys(assignments.value).length === MODULES.length); const isDocumentReady = computed(() => Boolean(stepThreeDocument.value.name && stepThreeDocument.value.url)); const canSubmitTask = computed(() => stepOnePassed.value && isDocumentReady.value); const sidebarStudyTip = computed(() => currentStep.value === 3 ? "先依据第 2 步的模块信息整理成完整 PRD，再上传 .docx 或 .pdf。上传完成后请打开在线预览，确认文档内容和版本无误。" : currentStep.value === 2 ? "先用前期实训的真实资料填入七大模块。优先把用户、场景、痛点和功能的链路写清楚，再补充指标、边界、测试与规划。" : "先辨识每个 PRD 模块的职责边界：用户需求解释使用情境，核心功能定义产品要做什么，非功能需求定义质量属性；再完成匹配。" ); const sidebarReferenceText = computed(() => currentStep.value === 3 ? "• 文档应覆盖产品概述、用户与场景、核心功能、非功能需求、硬件规格、测试与项目规划<br />• 支持 .docx 和 PDF 在线预览；替换文件会保留最新提交版本<br />• 保存后可再次进入本步骤查看或替换文档" : currentStep.value === 2 ? "• 填写内容应基于案例资料或前期实训结果，避免只复述标题<br />• 示例是格式参考，可复制后结合自己的产品修改<br />• 导出的 PRD 表会保留示例参考与学生填写内容" : "• 文档说明：版本、作者、状态等文档治理信息<br />• 核心功能需求：开发和测试可直接执行的功能范围<br />• 非功能需求：性能、稳定性、易用性等质量属性<br />• 需求变更管理：评估、记录、通知每次需求变更" ); onMounted(async () => { await loadTaskConfig(); await loadSavedProgress(); }); function assignedPurpose(moduleId) { return PURPOSES.find((purpose) => purpose.id === assignments.value[moduleId]) \|\| null; } function parseSavedAnswer(raw) { try { return raw ? (typeof raw === "string" ? JSON.parse(raw) : raw) : null; } catch (_) { return null; } } function normalizeAssignments(value) { if (!value \|\| typeof value !== "object") return null; const copied = {}; for (const module of MODULES) { const purposeId = String(value[module.id] \|\| ""); if (PURPOSES.some((purpose) => purpose.id === purposeId)) copied[module.id] = purposeId; } return new Set(Object.values(copied)).size === Object.keys(copied).length ? copied : null; } function normalizeStepTwoContents(value) { const saved = value?.contents && typeof value.contents === "object" ? value.contents : value; if (!saved \|\| typeof saved !== "object") return {}; const validIds = new Set(PRD_DETAIL_MODULES.flatMap((module) => module.rows.map((row) => row.id))); return Object.fromEntries(Object.entries(saved).filter(([key, text]) => validIds.has(key) && typeof text === "string")); } function normalizeStepThreeDocument(value) { const document = value?.document && typeof value.document === "object" ? value.document : value; if (!document \|\| typeof document !== "object" \|\| !String(document.name \|\| "").trim() \|\| !String(document.url \|\| "").trim()) return null; return { name: String(document.name), url: String(document.url), fileType: String(document.fileType \|\| "").toUpperCase(), size: Number(document.size \|\| 0), previewContent: String(document.previewContent \|\| ""), }; } function stepStateText(index) { if (index === 0) return stepOnePassed.value ? "已通过" : "当前步骤"; if (index === 1) return stepOnePassed.value ? (currentStep.value === 2 ? "当前步骤" : "可填写") : "完成第 1 步后解锁"; if (index === 2) return stepOnePassed.value ? (currentStep.value === 3 ? "当前步骤" : isDocumentReady.value ? "已上传" : "可填写") : "完成第 1 步后解锁"; return currentStep.value > index + 1 ? "已完成" : "后续步骤"; } function invalidateCheck() { checkResult.value = null; stepOnePassed.value = false; } function togglePurposeSelection(purposeId) { selectedPurposeId.value = selectedPurposeId.value === purposeId ? "" : purposeId; } function startDrag(purposeId) { if (!checking.value && !saving.value) { draggingPurposeId.value = purposeId; selectedPurposeId.value = purposeId; } } function finishDrag() { draggingPurposeId.value = ""; dragOverModuleId.value = ""; } function placePurpose(moduleId, purposeId) { if (!moduleId \|\| !purposeId) return; const next = { ...assignments.value }; Object.keys(next).forEach((key) => { if (next[key] === purposeId) delete next[key]; }); next[moduleId] = purposeId; assignments.value = next; selectedPurposeId.value = ""; invalidateCheck(); } function assignSelected(moduleId) { if (selectedPurposeId.value) placePurpose(moduleId, selectedPurposeId.value); } function dropIntoModule(moduleId) { placePurpose(moduleId, draggingPurposeId.value \|\| selectedPurposeId.value); finishDrag(); } function returnDraggedToBank() { const moduleId = Object.keys(assignments.value).find((key) => assignments.value[key] === draggingPurposeId.value); if (moduleId) { const next = { ...assignments.value }; delete next[moduleId]; assignments.value = next; invalidateCheck(); } finishDrag(); } function removeAssignment(moduleId) { const next = { ...assignments.value }; delete next[moduleId]; assignments.value = next; invalidateCheck(); } function resetMatching() { assignments.value = {}; selectedPurposeId.value = ""; invalidateCheck(); } function buildStepOneAnswer() { return { assignments: { ...assignments.value }, passed: stepOnePassed.value, checkResult: checkResult.value, updatedAt: new Date().toISOString() }; } function buildStepTwoAnswer() { return { contents: { ...stepTwoContents.value }, updatedAt: new Date().toISOString() }; } function buildStepThreeAnswer() { return { document: { ...stepThreeDocument.value }, updatedAt: new Date().toISOString() }; } function buildSavePayload(current = currentStep.value) { return { currentStep: current, step1Answer: JSON.stringify(buildStepOneAnswer()), step2Answer: JSON.stringify(buildStepTwoAnswer()), step3Answer: JSON.stringify(buildStepThreeAnswer()), submitted: false, saveAction: "SAVE" }; } function buildSubmitPayload() { return { ...buildSavePayload(3), submitted: true, saveAction: "SUBMIT" }; } async function persist(current = currentStep.value) { await saveStudentTrainingAnswer(TASK_KEY, buildSavePayload(current)); } async function saveCurrentMatching() { if (saving.value) return; saving.value = true; try { await persist(stepOnePassed.value ? 2 : 1); proxy?.$modal?.msgSuccess("当前匹配已保存"); } catch (error) { proxy?.$modal?.msgError(error?.message \|\| "保存失败，请稍后重试"); } finally { saving.value = false; } } async function checkAndSave() { if (!allAssigned.value \|\| checking.value) return; checking.value = true; try { const response = await checkRequirementsDocumentStepOne({ assignments: { ...assignments.value } }); checkResult.value = response?.data \|\| response; stepOnePassed.value = Boolean(checkResult.value?.allCorrect); await persist(stepOnePassed.value ? 2 : 1); if (stepOnePassed.value) proxy?.$modal?.msgSuccess("匹配正确，已解锁第 2 步"); } catch (error) { checkResult.value = { allCorrect: false, message: error?.message \|\| "判题失败，请稍后重试" }; } finally { checking.value = false; } } function fillExample(row) { stepTwoContents.value = { ...stepTwoContents.value, [row.id]: row.example }; } async function saveStepTwo() { if (saving.value) return; saving.value = true; try { await persist(2); proxy?.$modal?.msgSuccess("PRD 详细信息已保存"); } catch (error) { proxy?.$modal?.msgError(error?.message \|\| "保存失败，请稍后重试"); } finally { saving.value = false; } } async function goToStepThree() { if (saving.value) return; saving.value = true; try { await persist(2); currentStep.value = 3; } catch (error) { proxy?.$modal?.msgError(error?.message \|\| "保存失败，请稍后重试"); } finally { saving.value = false; } } function triggerDocumentUpload() { if (!documentUploading.value) documentInput.value?.click(); } function formatFileSize(size) { const value = Number(size \|\| 0); if (!value) return "已上传"; return value < 1024 * 1024 ? `${Math.max(1, Math.round(value / 1024))} KB` : `${(value / (1024 * 1024)).toFixed(1)} MB`; } async function handleDocumentUpload(event) { const file = event.target.files?.[0]; if (!file) return; if (!/\.(docx\|pdf)$/i.test(file.name)) { proxy?.$modal?.msgWarning("请上传 .docx 或 .pdf 格式的产品需求文档"); event.target.value = ""; return; } if (file.size > 20 * 1024 * 1024) { proxy?.$modal?.msgWarning("产品需求文档大小不能超过 20MB"); event.target.value = ""; return; } documentUploading.value = true; try { const previewData = new FormData(); previewData.append("file", file); const uploadData = new FormData(); uploadData.append("file", file); const previewResponse = await previewRequirementsDocumentFile(previewData); const preview = previewResponse?.data \|\| previewResponse \|\| {}; let url = ""; if (isStudentDemo()) url = URL.createObjectURL(file); else { const uploadResponse = await uploadStudentTrainingFile(uploadData); url = uploadResponse?.url \|\| uploadResponse?.fileName \|\| uploadResponse?.data?.url \|\| uploadResponse?.data?.fileName \|\| ""; } if (!url) throw new Error("未获取到文件地址，请重新上传"); stepThreeDocument.value = { name: file.name, url, fileType: String(preview.fileType \|\| (file.name.toLowerCase().endsWith(".pdf") ? "PDF" : "DOCX")).toUpperCase(), size: file.size, previewContent: String(preview.content \|\| "") }; await persist(3); showDocumentPreview.value = true; proxy?.$modal?.msgSuccess("产品需求文档已上传并保存"); } catch (error) { proxy?.$modal?.msgError(error?.message \|\| "文件上传或解析失败，请稍后重试"); } finally { documentUploading.value = false; event.target.value = ""; } } async function removeDocument() { stepThreeDocument.value = { name: "", url: "", fileType: "", size: 0, previewContent: "" }; showDocumentPreview.value = false; try { await persist(3); proxy?.$modal?.msgSuccess("已删除产品需求文档"); } catch (error) { proxy?.$modal?.msgError(error?.message \|\| "删除状态保存失败，请稍后重试"); } } async function saveStepThree() { if (!isDocumentReady.value \|\| saving.value) return; saving.value = true; try { await persist(3); proxy?.$modal?.msgSuccess("产品需求文档已保存"); } catch (error) { proxy?.$modal?.msgError(error?.message \|\| "保存失败，请稍后重试"); } finally { saving.value = false; } } async function submitTask() { if (!canSubmitTask.value \|\| saving.value \|\| submitting.value \|\| documentUploading.value) return; submitting.value = true; try { await saveStudentTrainingAnswer(TASK_KEY, buildSubmitPayload()); proxy?.$modal?.msgSuccess("产品需求文档已提交"); } catch (error) { proxy?.$modal?.msgError(error?.message \|\| "提交失败，请稍后重试"); } finally { submitting.value = false; } } async function exportStepTwoTable() { try { const XLSX = await import("xlsx"); const header = ["序号", "模块", "子模块", "填写内容"]; const rows = []; PRD_DETAIL_MODULES.forEach((module) => module.rows.forEach((row, index) => { const reference = row.example ? `示例参考：${row.example}` : "示例参考：—"; const written = stepTwoContents.value[row.id]?.trim() \|\| "（未填写）"; rows.push([index === 0 ? module.order : "", index === 0 ? module.name : "", row.name, `${reference}\n\n学生填写：${written}`]); })); const sheet = XLSX.utils.aoa_to_sheet([header, ...rows]); sheet["!cols"] = [{ wch: 8 }, { wch: 18 }, { wch: 28 }, { wch: 88 }]; sheet["!rows"] = [{ hpt: 26 }, ...rows.map(() => ({ hpt: 78 }))]; sheet["!merges"] = []; let offset = 1; PRD_DETAIL_MODULES.forEach((module) => { if (module.rows.length > 1) { sheet["!merges"].push({ s: { r: offset, c: 0 }, e: { r: offset + module.rows.length - 1, c: 0 } }, { s: { r: offset, c: 1 }, e: { r: offset + module.rows.length - 1, c: 1 } }); } offset += module.rows.length; }); const workbook = XLSX.utils.book_new(); XLSX.utils.book_append_sheet(workbook, sheet, "PRD详细信息"); XLSX.writeFile(workbook, "PRD详细信息表.xlsx"); proxy?.$modal?.msgSuccess("PRD 表格已导出，示例内容已一并保留"); } catch (error) { proxy?.$modal?.msgError(error?.message \|\| "导出失败，请稍后重试"); } } async function loadTaskConfig() { try { taskConfig.value = (await getTrainingTaskByKey(TASK_KEY))?.data \|\| null; } catch (_) { taskConfig.value = null; } } async function loadSavedProgress() { try { const answer = (await getStudentTrainingAnswer(TASK_KEY))?.data; const savedStepOne = parseSavedAnswer(answer?.step1Answer); const normalized = normalizeAssignments(savedStepOne?.assignments); if (normalized) assignments.value = normalized; stepOnePassed.value = Boolean(savedStepOne?.passed); checkResult.value = savedStepOne?.checkResult \|\| null; stepTwoContents.value = normalizeStepTwoContents(parseSavedAnswer(answer?.step2Answer)); const savedStepThree = normalizeStepThreeDocument(parseSavedAnswer(answer?.step3Answer)); if (savedStepThree) stepThreeDocument.value = savedStepThree; if (stepOnePassed.value && Number(answer?.currentStep \|\| 1) >= 3) currentStep.value = 3; else if (stepOnePassed.value && Number(answer?.currentStep \|\| 1) >= 2) currentStep.value = 2; } catch (_) { /* 首次进入时保留空白答题区 */ } } function switchStep(step) { if (step === 1) { currentStep.value = 1; return; } if (step === 2) { if (!stepOnePassed.value) { proxy?.$modal?.msgInfo("请先完成第 1 步匹配并通过判题。"); return; } currentStep.value = 2; return; } if (step === 3) { if (!stepOnePassed.value) { proxy?.$modal?.msgInfo("请先完成第 1 步匹配并通过判题。"); return; } currentStep.value = 3; return; } proxy?.$modal?.msgInfo("请先完成当前步骤后再进入后续实训。"); } function goNextStep() { switchStep(2); } function exportOutcome() { if (currentStep.value === 2) { exportStepTwoTable(); } else if (currentStep.value === 3 && isDocumentReady.value) { showDocumentPreview.value = true; } else { proxy?.$modal?.msgInfo("请进入第 2 步导出 PRD 详细信息表。"); } } </script> <style scoped> .requirements-doc-page { min-height: 100vh; color: #dcebf8; background: radial-gradient(circle at 15% -10%, rgba(23, 134, 205, .22), transparent 36%), #071521; } .training-core { width: min(1480px, calc(100% - 48px)); margin: 0 auto; padding: 30px 0 60px; } .task-header { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }.task-badge, .step-chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border: 1px solid rgba(68, 203, 255, .42); border-radius: 999px; color: #8ee7ff; background: rgba(6, 86, 129, .28); font-size: 13px; }.task-title { margin: 0; color: #f1f8ff; font-size: 26px; letter-spacing: .02em; } .task-card { padding: 26px; border: 1px solid rgba(66, 181, 237, .42); border-radius: 24px; background: rgba(4, 24, 39, .78); box-shadow: 0 18px 42px rgba(0, 0, 0, .2); }.workbench-head, .step-title-row, .purpose-bank__head, .task-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; }.workbench-head { padding-bottom: 18px; border-bottom: 1px solid rgba(0, 180, 255, .2); }.workbench-head h2, .step-title-row h3, .purpose-bank h4 { margin: 4px 0 0; color: #f2f9ff; }.workbench-head h2 { font-size: 24px; }.requirements-doc-toolbar { align-self: center; justify-content: flex-end; max-width: 100%; }.section-eyebrow { margin: 0; color: #55d8ff; font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; } .workbench-actions, .task-actions { display: flex; flex-wrap: wrap; }.outline-action, .btn-nav { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 38px; padding: 0 15px; border: 1px solid rgba(98, 208, 255, .48); border-radius: 9px; color: #dff6ff; background: rgba(10, 87, 126, .35); cursor: pointer; transition: .2s ease; }.outline-action:hover, .btn-nav:hover:not(:disabled) { border-color: #56dcff; background: rgba(18, 137, 190, .48); transform: translateY(-1px); }.btn-submit { border-color: #26c9ed; color: #fff; background: linear-gradient(135deg, #087baa, #18b7df); }.btn-primary { border-color: #8a72ff; background: linear-gradient(135deg, #5a4fc9, #8c6ef1); }.btn-nav:disabled { cursor: not-allowed; opacity: .48; } .step-indicator { display: flex; align-items: stretch; margin: 26px 0; padding: 10px; overflow-x: auto; border: 1px solid rgba(58, 170, 220, .35); border-radius: 18px; background: rgba(0, 15, 28, .45); }.step-tab { display: flex; min-width: 185px; flex: 1; align-items: center; gap: 10px; padding: 10px 12px; border: 0; border-radius: 12px; color: #8baabd; background: transparent; text-align: left; cursor: pointer; }.step-tab.active { color: #fff; background: linear-gradient(90deg, #087eb3, #12a7d5); box-shadow: inset 0 0 0 1px rgba(157, 239, 255, .55); }.step-tab.complete .step-marker { border-color: #53f1d5; color: #53f1d5; }.step-marker { display: inline-grid; width: 33px; height: 33px; flex: 0 0 33px; place-items: center; border: 1px solid #4c91b5; border-radius: 50%; font-weight: 700; }.step-copy { display: grid; gap: 3px; }.step-copy small { font-size: 11px; }.step-connector { width: 22px; min-width: 22px; align-self: center; height: 1px; background: #287596; } .step-card { padding: 25px; border: 1px solid rgba(50, 162, 208, .42); border-radius: 18px; background: rgba(2, 18, 30, .58); }.step-desc { margin: 18px 0; color: #c0d2df; line-height: 1.8; }.matching-tip, .prd-note { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 20px; padding: 10px 13px; border-left: 3px solid #2ed4f0; border-radius: 5px; color: #a9ddeb; background: rgba(28, 122, 157, .15); font-size: 14px; line-height: 1.65; } .matching-workspace { display: grid; grid-template-columns: minmax(0, 1.22fr) minmax(350px, .78fr); gap: 24px; align-items: start; }.module-list { display: grid; gap: 10px; }.module-row { display: grid; grid-template-columns: minmax(185px, .31fr) minmax(0, .69fr); min-height: 84px; overflow: hidden; border: 1px solid rgba(124, 166, 189, .45); border-radius: 10px; background: rgba(11, 39, 56, .48); transition: .18s ease; cursor: pointer; }.module-row--over { border-color: #48e3ff; box-shadow: 0 0 0 3px rgba(55, 215, 248, .16); }.module-row--filled { border-color: rgba(74, 220, 182, .56); }.module-label { display: flex; align-items: center; gap: 12px; padding: 16px; border-right: 1px solid rgba(124, 166, 189, .35); color: #eef9ff; background: rgba(13, 81, 113, .28); }.module-label span { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 50%; color: #7ee6ff; background: rgba(11, 172, 214, .16); font-size: 12px; }.module-drop-zone { display: flex; align-items: center; padding: 10px 12px; }.drop-placeholder { color: #7696a8; font-size: 14px; } .purpose-bank { position: sticky; top: 22px; padding: 18px; border: 1px solid rgba(66, 178, 226, .45); border-radius: 14px; background: linear-gradient(180deg, rgba(10, 71, 100, .38), rgba(7, 29, 45, .72)); transition: .18s ease; }.purpose-bank--over { border-color: #ffba67; box-shadow: 0 0 0 3px rgba(255, 186, 103, .16); }.purpose-bank__head strong { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid rgba(97, 222, 255, .58); border-radius: 50%; color: #8eeaff; }.purpose-bank > p { margin: 12px 0 15px; color: #9cb8c7; font-size: 13px; line-height: 1.65; }.purpose-card-list { display: grid; gap: 9px; max-height: 570px; overflow: auto; padding-right: 3px; }.purpose-card { display: flex; align-items: center; width: 100%; gap: 8px; padding: 11px 12px; border: 1px solid rgba(111, 158, 179, .5); border-radius: 8px; color: #e4f4fb; background: rgba(7, 31, 47, .72); text-align: left; line-height: 1.55; cursor: grab; transition: .18s ease; }.purpose-card:hover, .purpose-card.selected { border-color: #53ddfb; background: rgba(14, 116, 153, .43); }.purpose-card.dragging { opacity: .5; }.purpose-card--assigned { cursor: grab; }.purpose-card--assigned span { flex: 1; }.purpose-card--assigned button { display: inline-grid; width: 26px; height: 26px; flex: 0 0 26px; place-items: center; border: 0; border-radius: 50%; color: #b9ebfa; background: rgba(104, 196, 224, .17); cursor: pointer; }.purpose-card--assigned button:hover { color: #fff; background: #bd5068; }.drag-grip { color: #5fd5ed; letter-spacing: -3px; }.purpose-bank__empty { padding: 22px 8px; color: #82b3c8; text-align: center; }.result-message { margin: 20px 0 0; padding: 11px 14px; border: 1px solid rgba(255, 168, 112, .52); border-radius: 8px; color: #ffd5ad; background: rgba(157, 77, 35, .14); }.result-message.success { border-color: rgba(84, 230, 187, .56); color: #a6f4d8; background: rgba(16, 134, 99, .16); }.task-actions { justify-content: flex-end; margin-top: 21px; } .prd-detail-card { overflow: hidden; }.prd-table-wrap { overflow: auto; border: 1px solid rgba(102, 184, 223, .5); border-radius: 12px; }.prd-detail-table { width: 100%; min-width: 1000px; border-collapse: separate; border-spacing: 0; table-layout: fixed; }.prd-detail-table th { padding: 13px; color: #effbff; background: linear-gradient(90deg, #087da9, #0b9bca); font-weight: 700; }.prd-detail-table td { padding: 12px; border-top: 1px solid rgba(115, 165, 188, .38); border-right: 1px solid rgba(115, 165, 188, .38); vertical-align: top; background: rgba(9, 38, 57, .44); }.prd-detail-table th:not(:last-child) { border-right: 1px solid rgba(212, 246, 255, .25); }.prd-detail-table td:last-child { border-right: 0; }.prd-detail-table th:nth-child(1), .module-number { width: 72px; text-align: center; }.prd-detail-table th:nth-child(2), .module-name { width: 155px; }.prd-detail-table th:nth-child(3), .submodule-name { width: 245px; }.module-number, .module-name, .submodule-name { color: #dff6ff; vertical-align: middle !important; }.module-name { background: rgba(10, 90, 122, .28) !important; font-weight: 700; }.submodule-name { background: rgba(20, 69, 92, .28) !important; }.detail-editor-cell { min-width: 480px; }.example-bar { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 9px; color: #7fa6ba; font-size: 13px; line-height: 1.6; }.example-bar button { flex: 0 0 auto; padding: 4px 8px; border: 1px solid rgba(96, 201, 237, .5); border-radius: 6px; color: #9deaff; background: rgba(5, 86, 124, .24); cursor: pointer; }.example-bar button:hover { color: #fff; background: rgba(12, 139, 182, .6); }.detail-editor-cell textarea { display: block; width: 100%; min-height: 92px; resize: vertical; box-sizing: border-box; padding: 10px; border: 1px solid rgba(108, 182, 215, .36); border-radius: 8px; outline: none; color: #eaf8ff; background: rgba(1, 18, 29, .62); font: inherit; line-height: 1.65; }.detail-editor-cell textarea:focus { border-color: #3ddff9; box-shadow: 0 0 0 3px rgba(55, 215, 248, .12); }.detail-editor-cell textarea::placeholder { color: #66899c; }.upcoming-card { text-align: center; }.upcoming-card h3 { margin: 8px 0; }.upcoming-card p:not(.section-eyebrow) { color: #a6c2d2; } .file-input-hidden { display: none; }.prd-upload-card { overflow: hidden; }.prd-delivery-guide { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 22px; align-items: center; padding: 20px 22px; border: 1px solid rgba(72, 201, 255, .2); border-radius: 16px; background: linear-gradient(135deg, rgba(20, 86, 127, .28), rgba(8, 32, 54, .2)); }.prd-delivery-guide h3 { margin: 0 0 10px; font-size: 18px; color: #eef9ff; }.prd-delivery-guide ol { margin: 0; padding-left: 20px; color: #b8d3e2; line-height: 1.8; }.document-drop-zone { display: grid; min-height: 270px; place-content: center; justify-items: center; gap: 14px; padding: 30px; margin-top: 20px; border: 1px dashed rgba(81, 207, 255, .5); border-radius: 18px; background: radial-gradient(circle at 50% 0, rgba(41, 180, 235, .16), transparent 52%), rgba(8, 33, 52, .56); text-align: center; transition: .2s ease; }.document-drop-zone:hover { border-color: #4ad4ff; background-color: rgba(14, 65, 95, .66); transform: translateY(-2px); }.document-upload-icon { font-size: 42px; color: #42d8ff; }.document-drop-zone h3 { margin: 0; color: #eefaff; font-size: 21px; }.document-drop-zone p { max-width: 560px; margin: 0; color: #a6c2d2; line-height: 1.7; }.uploaded-document-card { display: flex; align-items: center; gap: 16px; padding: 18px 20px; margin-top: 20px; border: 1px solid rgba(69, 206, 255, .3); border-radius: 16px; background: rgba(9, 45, 70, .72); }.document-file-icon { flex: 0 0 auto; font-size: 32px; color: #55dcff; }.uploaded-document-main { min-width: 0; flex: 1; }.uploaded-document-main h3 { overflow: hidden; margin: 0 0 5px; color: #f0fbff; font-size: 17px; text-overflow: ellipsis; white-space: nowrap; }.uploaded-document-main p { margin: 0; color: #9cc1d4; font-size: 13px; }.uploaded-document-actions { display: flex; flex: 0 0 auto; flex-wrap: wrap; gap: 9px; }.btn-danger { border: 1px solid rgba(255, 115, 127, .45); color: #ffacb3; background: rgba(116, 32, 48, .25); }.btn-danger:hover { border-color: #ff7884; background: rgba(150, 38, 55, .38); color: #fff; }.prd-pdf-preview { height: min(68vh, 780px); overflow: hidden; border: 1px solid #d8e4ea; border-radius: 10px; background: #fff; }.prd-pdf-preview iframe { width: 100%; height: 100%; border: 0; }.prd-text-preview { max-height: min(68vh, 780px); overflow: auto; padding: 20px; border: 1px solid #d8e4ea; border-radius: 10px; color: #263849; background: #f8fbfd; font-family: "Microsoft YaHei", sans-serif; line-height: 1.8; white-space: pre-wrap; word-break: break-word; } @media (max-width: 1020px) { .matching-workspace { grid-template-columns: 1fr; }.purpose-bank { position: static; }.purpose-card-list { max-height: 360px; }.workbench-head { align-items: flex-start; flex-direction: column; }.requirements-doc-toolbar { width: 100%; justify-content: flex-start; } } @media (max-width: 680px) { .training-core { width: min(100% - 24px, 1480px); padding-top: 16px; }.task-card, .step-card { padding: 15px; }.module-row { grid-template-columns: 1fr; }.module-label { border-right: 0; border-bottom: 1px solid rgba(124, 166, 189, .35); }.task-header { align-items: flex-start; flex-direction: column; }.task-title { font-size: 22px; }.step-indicator { margin: 18px 0; }.step-tab { min-width: 165px; }.workbench-actions, .task-actions { width: 100%; }.outline-action, .btn-nav { flex: 1; }.purpose-bank { padding: 14px; }.example-bar { flex-direction: column; } } </style>

{{ taskTitle }}

{{ trainingSteps[currentStep - 1] || '产品需求说明书' }}