{{ column \|\| `列${index + 1}` }}
{{ row[columnIndex] }}

分析维度	分析要点	你的分析
{{ insight.dimension }}	{{ insight.keyPoint }}	</td> </tr> </tbody> </table> </div> </section> <section v-show="currentStep === 4" class="step-panel"> <p class="task-desc task-desc--compact"> 开发团队在用户分层后，已访谈了 3 位购买过相关产品的重点用户，并撰写了访谈记录。请根据访谈记录，从行为特征、需求痛点、消费心理三个维度构建重点用户画像。 </p> <div class="interview-tabs" aria-label="重点用户访谈记录"> <button v-for="(record, index) in form.keyUserRecords" :key="record.code" type="button" :class="['interview-tab', { active: activeInterviewIndex === index }]" @click="handleInterviewClick(index)" > {{ record.title }}（{{ record.code }}） </button> </div> <el-dialog v-model="interviewDialogVisible" :title="`${currentInterviewTranscript.code} 访谈记录`" width="min(820px, 92vw)" append-to-body> <div class="interview-dialog-tabs" aria-label="切换访谈记录"> <button v-for="(record, index) in form.keyUserRecords" :key="record.code" type="button" :class="{ active: activeInterviewIndex === index }" @click="activeInterviewIndex = index" > {{ record.code }} </button> </div> <div class="interview-dialog-body interview-dialog-body--panel"> <p class="interview-line">基本属性：{{ currentInterviewTranscript.basicAttributes }}</p> <p class="interview-title">访谈内容：</p> <div v-for="item in currentInterviewTranscript.content" :key="item.question" class="interview-qa"> <p>Q：{{ item.question }}</p> <p>A：{{ item.answer }}</p> </div> </div> </el-dialog> <div class="portrait-table-wrap"> <section v-for="record in form.keyUserRecords" :key="record.code" class="portrait-record"> <div class="portrait-user portrait-user--form"> <label> <span>用户：</span> <input v-model="record.user" class="portrait-input" :placeholder="`例如：${record.code}`" /> </label> <label> <span>基础属性：</span> <input v-model="record.basicAttributes" class="portrait-input portrait-input--wide" placeholder="年龄、性别、职业、收入、城市等" /> </label> <label> <span>标签：</span> <input v-model="record.tags" class="portrait-input portrait-input--wide" placeholder="例如：高价值用户、品质偏好者" /> </label> </div> <div class="portrait-grid"> <div class="portrait-head">行为特征</div> <div class="portrait-head">需求痛点</div> <div class="portrait-head">消费心理</div> <textarea v-model="record.behavior" class="portrait-cell" placeholder="请结合访谈记录归纳行为特征" /> <textarea v-model="record.painPoints" class="portrait-cell" placeholder="请结合访谈记录归纳需求痛点" /> <textarea v-model="record.psychology" class="portrait-cell" placeholder="请结合访谈记录归纳消费心理" /> </div> </section> </div> </section> <div v-if="steps.length" class="step-actions"> <el-button class="step-action step-action--previous" :disabled="currentStep <= 1" @click="currentStep -= 1"> <el-icon><ArrowLeft /></el-icon> 上一步 </el-button> <el-button class="step-action step-action--save" :loading="saving" @click="saveCurrentProgress"> <el-icon><CircleCheck /></el-icon> 保存当前进度 </el-button> <el-button class="step-action step-action--next" :disabled="currentStep >= steps.length" @click="goNext"> 下一步 <el-icon><ArrowRight /></el-icon> </el-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> </section> </main> <TrainingAiSidebar study-tip="当前步骤建议：先上传客户画像搜索结果，再围绕用户是谁、为什么买、在哪里用、担心什么四个问题完成画像分析。" reference-title="用户画像分析参考" reference-text="· 基础属性：年龄、性别、地域、职业<br />· 消费特征：价格敏感度、购买渠道、品牌偏好<br />· 场景需求：家庭照明、睡眠改善、健康管理<br />· 决策阻碍：安装成本、效果可信度、售后保障" assist-text="如果画像分析较散，可以先列出目标人群标签，再补充证据来源，最后总结最值得切入的重点用户群。" :progress-items="progressItems" /> </div> </template> <script setup> import { ArrowLeft, ArrowRight, CircleCheck, Document, Download, Upload } from "@element-plus/icons-vue"; import * as XLSX from "xlsx"; 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 { checkTargetUserProfileStepFour, checkTargetUserProfileStepOne, checkTargetUserProfileStepThree, checkTargetUserProfileStepTwo, getStudentTrainingAnswer, saveStudentTrainingAnswer, uploadStudentTrainingFile } from "@/api/studentTrainingAnswer"; const TASK_KEY = "target-user-profile"; const RFM_CHARTS = [ { id: "segment-share", index: 1, title: "客户分层占比饼图", buttonText: "上传客户分层占比饼图" }, { id: "average-spend", index: 2, title: "客户分层平均消费对比柱状图", buttonText: "上传客户分层平均消费对比柱状图" }, { id: "score-heatmap", index: 3, title: "RFM 分数分布热力图", buttonText: "上传 RFM 分布热力图" }, ]; const RFM_INSIGHT_ROWS = [ { dimension: "高价值用户占比", keyPoint: "重要价值客户占比是多少？是否足以支撑产品开发？" }, { dimension: "用户活跃度", keyPoint: "R 分数分布反映的用户活跃情况如何？" }, { dimension: "消费能力", keyPoint: "M 分数分布反映的用户消费能力如何？" }, { dimension: "用户忠诚度", keyPoint: "F 分数分布反映的用户复购意愿如何？" }, { dimension: "重点客户群特征", keyPoint: "哪些客户最值得关注？为什么？" }, ]; const { proxy } = getCurrentInstance(); const taskConfig = ref(null); const saving = ref(false); const uploading = ref(false); const fileInputRef = ref(null); const previewDialogVisible = ref(false); const chartFileInputRefs = ref({}); const uploadingChartId = ref(""); const chartPreviewVisible = ref(false); const activeChartPreview = ref({ title: "图表预览", url: "" }); const currentStep = ref(1); const activeInterviewIndex = ref(0); const interviewDialogVisible = ref(false); const defaultRequirement = "目标用户画像用于把市场数据转化为具体用户认知，帮助判断产品应该优先服务哪类人群，以及围绕哪些场景设计卖点。"; const defaultBackground = "以智能吸顶灯、助眠产品等产品为例，通过电商平台或百度指数等数据来源收集客户群画像信息，分析目标人群特征、需求场景和购买决策因素。"; const defaultGoals = [ "掌握通过平台数据识别目标用户群的方法。", "能够从搜索结果中提炼用户属性、需求和行为特征。", "能够形成面向产品定位和后续选品判断的用户画像结论。", ]; const interviewTranscripts = [ { code: "U01", basicAttributes: "李伟，29岁，男性，上海，互联网公司程序员，月收入约2.8万元", content: [ { question: "您平时的睡眠质量如何？通常因为什么失眠？", answer: "非常差。几乎每天都熬夜，不是因为想玩，是脑子停不下来，一直在想工作上的bug和方案。即使躺下，也觉得心神不宁，入睡特别困难。有时候心脏会有点不舒服，知道是压力大和缺觉搞的。", }, { question: "您尝试过哪些方法来改善睡眠？", answer: "买过褪黑素，吃了一段时间感觉效果不明显，而且怕有依赖。也用过一些冥想App，听着白噪音确实有点用，但手机亮着屏幕放在旁边总觉得不舒服，而且容易被消息通知打断。", }, { question: "如果有一款智能助眠灯，您最希望它有什么功能？", answer: "首先，光一定要柔和，能让我放松下来。其次，最好能无缝衔接我用的冥想App的内容，别让我再来回切换。还有就是，我挺想知道自己每晚到底睡了多久，醒了多少次，有个数据报告会让我觉得这钱花得值。如果能在我睡着后自动关灯、调低空调温度，那就太智能了。", }, { question: "在购买这类产品时，您最看重什么？", answer: "效果和科技感。价格不是最敏感的因素，只要它真的能帮我解决问题，我愿意为专业和便捷付费。品牌最好有点调性，别显得太廉价。", }, ], }, { code: "U02", basicAttributes: "赵静，31岁，女性，杭州，中学教师，月收入约1.5万元", content: [ { question: "您目前的睡眠状况是怎样的？", answer: "碎片化，非常碎片化。宝宝现在一岁多，夜里还是会醒。从她出生后我就没睡过一个整觉。现在问题是，即使宝宝睡了，我自己也因为长期疲劳变得神经衰弱，很难深度睡眠，有点声音就醒。", }, { question: "在您的睡前时光，通常有什么习惯或需求？", answer: "我需要一段属于自己的“缓冲时间”。会看会儿手机，但知道蓝光不好。也希望有一些温和的声音能盖掉家里的其他杂音，帮助我放松。另外，夜里起床照顾宝宝，需要一盏能瞬间提供柔和、不刺眼照明的小灯，现在开大灯太晃眼了。", }, { question: "对于智能助眠灯，您有什么期待？", answer: "操作一定要简单！我可没时间研究复杂的APP。最好能语音控制，比如我说“小眠，开夜灯”，它就亮起最暗的光。灯光颜色最好能适合哺乳。内容上，我希望有一些针对成人的睡前放松引导，或者温和的轻音乐，最好也能播放一些给宝宝听的摇篮曲。", }, { question: "购买决策时，哪些因素会打动您？", answer: "安全、实用、高性价比。材质必须安全无害，因为宝宝可能会碰到。功能要真正解决我的痛点，而不是花里胡哨。", }, ], }, { code: "U03", basicAttributes: "王悦，22岁，女性，广州，设计专业大学生，月生活费约3000元", content: [ { question: "您关注睡眠健康吗？", answer: "关注！我们寝室经常聊“朋克养生”，就是一边熬夜做设计作业，一边泡枸杞。我知道睡眠很重要，但有时候是功课多，有时候就是单纯不想睡，刷短视频停不下来。", }, { question: "您的睡前仪式通常包括什么？", answer: "我很喜欢营造氛围感。会在宿舍点香薰蜡烛，但不太安全。也喜欢用手机放ASMR或者助眠视频，但同样需要开着屏幕。我觉得我的睡眠环境需要更有“仪式感”和“科技感”。", }, { question: "一款什么样的助眠灯会吸引您购买？", answer: "颜值是第一位的！设计必须好看，有质感，能融入我的宿舍装饰风格。灯光效果要多，能切换不同颜色和模式，满足我学习、休息、自拍打光等不同场景。可以没有深入的睡眠监测，但一定要能语音控制，和我互动，比如问问天气、设定闹钟。最好还有一些有趣的、小众的白噪音，比如雨声、篝火声。", }, { question: "在消费这类产品时，您是怎样的心理？", answer: "我愿意为“情绪价值”和“社交价值”买单。它不仅要好用，还要能成为我的一个“社交货币”，就是可以拍照分享到小红书的那种。价格不能太贵，四五百元我觉得是上限了，但如果它足够好看、好玩，我会非常心动。", }, ], }, ]; const currentInterviewTranscript = computed(() => interviewTranscripts.find((item) => item.code === form.value.keyUserRecords[activeInterviewIndex.value]?.code) \|\| interviewTranscripts[0]); function createKeyUserRecords() { return [ { title: "访谈记录一", code: "U01", user: "", basicAttributes: "", tags: "", behavior: "", painPoints: "", psychology: "", }, { title: "访谈记录二", code: "U02", user: "", basicAttributes: "", tags: "", behavior: "", painPoints: "", psychology: "", }, { title: "访谈记录三", code: "U03", user: "", basicAttributes: "", tags: "", behavior: "", painPoints: "", psychology: "", }, ]; } function createSegmentationRows() { return ["新锐白领", "精致妈妈", "都市银发", "继续补充", "继续补充"].map((market) => ({ market, customerAnalysis: "", productOpportunity: "", })); } function createForm() { return { profileFileName: "", profileFileUrl: "", profilePreview: createEmptyPreview(), rfmCharts: createEmptyRfmCharts(), rfmInsights: createEmptyRfmInsights(), profileAnalysis: "", keyUserProfile: "", keyUserRecords: createKeyUserRecords(), segmentationStrategy: "", segmentationRows: createSegmentationRows(), coreFunctions: ["", "", ""], priceMin: "", priceMax: "", conclusion: "", }; } function createEmptyRfmCharts() { return RFM_CHARTS.reduce((charts, chart) => { charts[chart.id] = { url: "", name: "" }; return charts; }, {}); } function createEmptyRfmInsights() { return RFM_INSIGHT_ROWS.map((item) => ({ ...item, analysis: "" })); } function createEmptyPreview() { return { sheetName: "", columns: [], rows: [], totalRows: 0, totalColumns: 0, }; } const form = ref(createForm()); const taskTitle = computed(() => taskConfig.value?.taskName \|\| "目标用户画像"); const taskBackground = computed(() => taskConfig.value?.background \|\| defaultBackground); const taskGoals = computed(() => parseArray(taskConfig.value?.objectives, defaultGoals)); const taskRequirement = computed(() => taskConfig.value?.requirements \|\| defaultRequirement); const flowSteps = computed(() => parseArray(taskConfig.value?.steps, [])); const steps = computed(() => flowSteps.value.map((name, index) => ({ no: index + 1, name, })) ); const activeStepName = computed(() => steps.value.find((step) => step.no === currentStep.value)?.name \|\| ""); const hasExcelPreview = computed(() => form.value.profilePreview.columns.length > 0); const rfmCharts = computed(() => RFM_CHARTS); const progressItems = computed(() => [ ...steps.value.map((step) => ({ text: `${currentStep.value > step.no ? "已完成" : currentStep.value === step.no ? "进行中" : "待完成"}：${step.name}`, status: currentStep.value > step.no ? "done" : currentStep.value === step.no ? "doing" : "", })), ]); onMounted(async () => { await loadTaskConfig(); await loadSavedAnswer(); }); 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); } } catch (error) { // 保持页面可填写，不因回显失败阻断使用。 } } 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 normalizeKeyUserRecords(records, legacyText = "") { const defaults = createKeyUserRecords(); if (Array.isArray(records)) { return defaults.map((item, index) => ({ ...item, ...(records[index] \|\| {}), })); } if (legacyText) { defaults[1].behavior = legacyText; } return defaults; } function normalizeSegmentationRows(rows, legacyText = "") { const defaults = createSegmentationRows(); if (Array.isArray(rows)) { return defaults.map((item, index) => ({ ...item, ...(rows[index] \|\| {}), })); } if (legacyText) { defaults[0].customerAnalysis = legacyText; } return defaults; } function applySavedAnswer(value) { try { const parsed = JSON.parse(value); if (!parsed \|\| typeof parsed !== "object") return; form.value = { ...createForm(), profileFileName: parsed.profileFileName \|\| parsed.file?.name \|\| "", profileFileUrl: parsed.profileFileUrl \|\| parsed.file?.url \|\| "", profilePreview: normalizeExcelPreview(parsed.profilePreview), rfmCharts: normalizeRfmCharts(parsed.rfmCharts), rfmInsights: normalizeRfmInsights(parsed.rfmInsights), profileAnalysis: parsed.profileAnalysis \|\| "", keyUserProfile: parsed.keyUserProfile \|\| "", keyUserRecords: normalizeKeyUserRecords(parsed.keyUserRecords, parsed.keyUserProfile), segmentationStrategy: parsed.segmentationStrategy \|\| "", segmentationRows: normalizeSegmentationRows(parsed.segmentationRows, parsed.segmentationStrategy), coreFunctions: Array.isArray(parsed.coreFunctions) ? ["", "", ""].map((item, index) => parsed.coreFunctions[index] \|\| item) : ["", "", ""], priceMin: parsed.priceMin \|\| "", priceMax: parsed.priceMax \|\| "", conclusion: parsed.conclusion \|\| "", }; currentStep.value = Math.min(Math.max(Number(parsed.currentStep \|\| 1), 1), 4); } catch (error) { // 忽略历史异常数据。 } } function normalizeRfmCharts(charts) { const defaults = createEmptyRfmCharts(); if (!charts \|\| typeof charts !== "object") { return defaults; } return RFM_CHARTS.reduce((result, chart) => { const value = charts[chart.id] \|\| {}; result[chart.id] = { url: String(value.url \|\| ""), name: String(value.name \|\| ""), }; return result; }, defaults); } function normalizeRfmInsights(insights) { const savedInsights = Array.isArray(insights) ? insights : []; return RFM_INSIGHT_ROWS.map((item) => ({ ...item, analysis: String(savedInsights.find((saved) => saved?.dimension === item.dimension)?.analysis \|\| ""), })); } function normalizeExcelPreview(preview) { if (!preview \|\| typeof preview !== "object" \|\| !Array.isArray(preview.columns) \|\| !Array.isArray(preview.rows)) { return createEmptyPreview(); } return { sheetName: String(preview.sheetName \|\| ""), columns: preview.columns.slice(0, 100).map((item) => String(item ?? "")), rows: preview.rows.slice(0, 20).map((row) => (Array.isArray(row) ? row.slice(0, 100).map((item) => String(item ?? "")) : [])), totalRows: Math.max(0, Number(preview.totalRows \|\| 0)), totalColumns: Math.max(0, Number(preview.totalColumns \|\| 0)), }; } function triggerFileSelect() { fileInputRef.value?.click(); } function setChartInputRef(chartId, element) { if (element) { chartFileInputRefs.value[chartId] = element; } } function triggerChartFileSelect(chartId) { chartFileInputRefs.value[chartId]?.click(); } function openChartPreview(chart) { const file = form.value.rfmCharts[chart.id]; if (!file?.url) return; activeChartPreview.value = { title: chart.title, url: file.url }; chartPreviewVisible.value = true; } function handleInterviewClick(index) { activeInterviewIndex.value = index; const record = form.value.keyUserRecords[index]; if (interviewTranscripts.some((item) => item.code === record?.code)) { interviewDialogVisible.value = true; } } async function handleFileChange(event) { const file = event.target.files?.[0]; if (!file) return; const fileName = file.name.toLowerCase(); if (!/\.xlsx?$/.test(fileName)) { proxy?.$modal?.msgError("请上传 .xls 或 .xlsx 格式的 Excel 文件"); event.target.value = ""; return; } if (file.size > 20 * 1024 * 1024) { proxy?.$modal?.msgError("Excel 文件不能超过 20MB"); event.target.value = ""; return; } const data = new FormData(); data.append("file", file); uploading.value = true; try { const preview = await parseExcelPreview(file); const res = await uploadStudentTrainingFile(data); form.value.profileFileName = file.name; form.value.profileFileUrl = res?.url \|\| res?.fileName \|\| res?.data?.url \|\| res?.data?.fileName \|\| ""; form.value.profilePreview = preview; previewDialogVisible.value = true; proxy?.$modal?.msgSuccess("上传成功，已生成数据预览"); } catch (error) { proxy?.$modal?.msgError(error?.message \|\| "Excel 文件解析或上传失败，请检查文件后重试"); } finally { uploading.value = false; event.target.value = ""; } } async function handleChartFileChange(chart, event) { const file = event.target.files?.[0]; if (!file) return; if (!/\.(png\|jpe?g\|webp)$/i.test(file.name)) { proxy?.$modal?.msgError("请上传 PNG、JPG 或 WEBP 格式的图表图片"); event.target.value = ""; return; } if (file.size > 10 * 1024 * 1024) { proxy?.$modal?.msgError("图表图片不能超过 10MB"); event.target.value = ""; return; } const data = new FormData(); data.append("file", file); uploadingChartId.value = chart.id; try { const res = await uploadStudentTrainingFile(data); const url = res?.url \|\| res?.fileName \|\| res?.data?.url \|\| res?.data?.fileName \|\| ""; if (!url) { throw new Error("上传结果缺少文件地址"); } form.value.rfmCharts[chart.id] = { url, name: file.name }; openChartPreview(chart); proxy?.$modal?.msgSuccess(`${chart.title}上传成功`); } catch (error) { proxy?.$modal?.msgError(error?.message \|\| "图表上传失败，请重试"); } finally { uploadingChartId.value = ""; event.target.value = ""; } } async function parseExcelPreview(file) { const workbook = XLSX.read(await file.arrayBuffer(), { type: "array" }); const sheetName = workbook.SheetNames?.[0]; if (!sheetName \|\| !workbook.Sheets?.[sheetName]) { throw new Error("Excel 文件中未找到可预览的工作表"); } const rawRows = XLSX.utils.sheet_to_json(workbook.Sheets[sheetName], { header: 1, defval: "", raw: false }); const rows = rawRows.filter((row) => Array.isArray(row) && row.some((cell) => String(cell ?? "").trim())); if (rows.length < 2) { throw new Error("Excel 至少需要包含一行表头和一行数据"); } const columns = rows[0].map((cell) => String(cell ?? "")); if (!columns.length) { throw new Error("Excel 表头不能为空"); } const dataRows = rows.slice(1); return { sheetName, columns, rows: dataRows.slice(0, 20).map((row) => columns.map((_, index) => String(row[index] ?? ""))), totalRows: dataRows.length, totalColumns: columns.length, }; } function buildAnswerPayload(status) { const saveAction = status === "SUBMITTED" ? "SUBMIT" : status === "RESET" ? "RESET" : "SAVE"; return { saveAction, currentStep: currentStep.value, step1Answer: JSON.stringify({ taskKey: TASK_KEY, taskName: taskTitle.value, flowSteps: flowSteps.value, currentStep: currentStep.value, profileFileName: form.value.profileFileName, profileFileUrl: form.value.profileFileUrl, profilePreview: form.value.profilePreview, rfmCharts: form.value.rfmCharts, rfmInsights: form.value.rfmInsights, file: { name: form.value.profileFileName, url: form.value.profileFileUrl, }, profileAnalysis: form.value.profileAnalysis, keyUserProfile: form.value.keyUserProfile, keyUserRecords: form.value.keyUserRecords, segmentationStrategy: form.value.segmentationStrategy, segmentationRows: form.value.segmentationRows, coreFunctions: form.value.coreFunctions, priceMin: form.value.priceMin, priceMax: form.value.priceMax, conclusion: form.value.conclusion, }), }; } async function persist(status = "IN_PROGRESS") { saving.value = true; try { if (status !== "RESET" && (currentStep.value === 1 \|\| status === "SUBMITTED")) { await checkTargetUserProfileStepOne({ excelUrl: form.value.profileFileUrl, excelName: form.value.profileFileName, previewRowCount: form.value.profilePreview.rows.length, previewColumnCount: form.value.profilePreview.columns.length, }); } if (status !== "RESET" && (currentStep.value === 2 \|\| status === "SUBMITTED")) { await checkTargetUserProfileStepTwo({ charts: RFM_CHARTS.map((chart) => ({ type: chart.id, url: form.value.rfmCharts[chart.id]?.url \|\| "", name: form.value.rfmCharts[chart.id]?.name \|\| "", })), }); } if (status !== "RESET" && (currentStep.value === 3 \|\| status === "SUBMITTED")) { await checkTargetUserProfileStepThree({ insights: form.value.rfmInsights }); } if (status !== "RESET" && (currentStep.value === 4 \|\| status === "SUBMITTED")) { await checkTargetUserProfileStepFour({ records: form.value.keyUserRecords }); } await saveStudentTrainingAnswer(TASK_KEY, buildAnswerPayload(status)); proxy?.$modal?.msgSuccess(status === "SUBMITTED" ? "提交成功" : "保存成功"); } finally { saving.value = false; } } function saveCurrentProgress() { return persist("IN_PROGRESS"); } async function goNext() { if (currentStep.value === 1 \|\| currentStep.value === 2 \|\| currentStep.value === 3) { await persist("IN_PROGRESS"); } currentStep.value += 1; } function submitTask() { return persist("SUBMITTED"); } async function resetTraining() { form.value = createForm(); currentStep.value = 1; await persist("RESET"); } function exportOutcome() { const keyUserRecordsText = form.value.keyUserRecords .map( (record) => `${record.title}（${record.code}）\n用户：${record.user \|\| ""}\n基础属性：${record.basicAttributes \|\| ""}\n标签：${record.tags \|\| ""}\n行为特征：\n${record.behavior \|\| ""}\n需求痛点：\n${record.painPoints \|\| ""}\n消费心理：\n${record.psychology \|\| ""}`, ) .join("\n\n"); const segmentationText = form.value.segmentationRows .map((row) => `${row.market \|\| ""}\n客户分析：\n${row.customerAnalysis \|\| ""}\n产品机会：\n${row.productOpportunity \|\| ""}`) .join("\n\n"); const rfmInsightsText = form.value.rfmInsights.map((item) => `${item.dimension}：\n${item.analysis \|\| ""}`).join("\n\n"); const coreFunctionsText = form.value.coreFunctions.map((item, index) => `核心功能${index + 1}：${item \|\| ""}`).join("\n"); const rfmChartsText = RFM_CHARTS.map((chart) => `${chart.title}：${form.value.rfmCharts[chart.id]?.url \|\| "未上传"}`).join("\n"); const content = `目标用户画像\n\n任务流程：${flowSteps.value.join(" > ")}\n\nRFM 分层分析 Excel：${form.value.profileFileName \|\| "未上传"}\n文件地址：${form.value.profileFileUrl \|\| ""}\n\nRFM 可视化图表：\n${rfmChartsText}\n\nRFM 用户群体特点分析：\n${rfmInsightsText}\n\n重点用户画像：\n${keyUserRecordsText}\n\n用户细分与市场选择：\n${segmentationText}\n\n计划设计的核心功能：\n${coreFunctionsText}\n\n预计产品价格区间（元）：${form.value.priceMin \|\| ""} - ${form.value.priceMax \|\| ""}\n\n分析结论：\n${form.value.conclusion \|\| ""}`; const blob = new Blob([content], { type: "text/plain;charset=utf-8" }); const url = URL.createObjectURL(blob); const link = document.createElement("a"); link.href = url; link.download = `${taskTitle.value \|\| "目标用户画像"}-实训结果.txt`; link.click(); URL.revokeObjectURL(url); } </script> <style lang="scss" scoped> .target-profile-page { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(720px, 1fr) 340px; gap: 24px; width: 100%; max-width: 100%; min-height: calc(100vh - 106px); margin: 0; padding: 24px 24px 32px; color: #e8f7ff; background: #06111d; } .training-core { 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; 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: #ffffff; font-size: 30px; line-height: 1.3; font-weight: 900; } .goal-bg, .task-card, .step-card { margin-bottom: 28px; padding: 18px 22px; border: 1px solid rgba(82, 174, 226, 0.42); border-radius: 26px; background: rgba(0, 25, 42, 0.64); } .goal-bg { p, li { color: #d7ecff; font-size: 14px; line-height: 1.8; } p, ol { margin: 0; } ol { padding-left: 18px; } } .subtitle-icon { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; color: #b9e2ff; font-weight: 800; } .subtitle-icon--spaced { margin-top: 12px; } .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; font-weight: 800; line-height: 1.3; } } .workbench-actions { display: flex; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; margin-left: auto; gap: 10px; } .section-eyebrow { margin: 0; color: #71dfff; font-size: 12px; font-weight: 800; line-height: 1.4; } .workbench-description { margin: 0; color: #d7ecff; font-size: 15px; font-weight: 400; line-height: 1.8; } .outline-action { display: inline-flex; align-items: center; justify-content: center; 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-size: 14px; font-weight: 800; &:hover:not(.is-disabled) { transform: translateY(-1px); border-color: rgba(116, 235, 255, 0.85); background: rgba(18, 146, 204, 0.5); } } .step-card { margin-bottom: 0; } .step-indicator { position: relative; display: flex; align-items: center; gap: 0; width: calc(100% + 24px); margin: 0 -12px 32px; overflow-x: auto; padding: 18px 22px; 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; 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; &: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-action { color: #9bf4ff; } } &.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; 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-title-row { display: flex; 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; } } .task-desc { margin: 0 0 38px; color: #d7ecff; font-size: 15px; line-height: 1.8; } .task-desc--compact { margin-bottom: 26px; } .interview-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; } .interview-tab { 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-family: inherit; font-size: 14px; font-weight: 800; cursor: pointer; transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease; &.active { border-color: rgba(0, 170, 255, 0.55); color: #ffffff; background: linear-gradient(95deg, #0a6b9e, #0a5c86); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); } } .interview-dialog-layer { position: fixed; inset: 0; z-index: 2100; display: flex; align-items: center; justify-content: center; padding: 44px; background: rgba(0, 0, 0, 0.52); } .interview-dialog { position: relative; width: min(880px, calc(100vw - 40px)); max-height: min(720px, 78vh); overflow: hidden; border: 1px solid rgba(82, 174, 226, 0.42); border-radius: 26px; background: rgba(0, 25, 42, 0.96); box-shadow: 0 24px 64px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(169, 229, 255, 0.08); } .interview-dialog-close { position: absolute; top: 18px; right: 18px; min-width: 0; 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-family: inherit; font-size: 14px; font-weight: 800; cursor: pointer; } .interview-dialog-body { max-height: min(720px, 78vh); overflow-y: auto; padding: 24px 96px 24px 24px; color: #d7ecff; font-size: 15px; line-height: 1.8; } .interview-line, .interview-title, .interview-qa p { margin: 0; } .interview-title { margin-top: 18px; color: #ffffff; font-weight: 800; } .interview-qa { margin-top: 12px; } .portrait-table-wrap { overflow-x: auto; border: 1px solid rgba(0, 180, 255, 0.22); border-radius: 22px; background: rgba(1, 14, 26, 0.72); } .portrait-record { min-width: 780px; & + & { border-top: 1px solid rgba(77, 167, 220, 0.2); } } .portrait-user { min-height: 110px; padding: 12px; border-bottom: 1px solid rgba(77, 167, 220, 0.2); label, .portrait-example { display: flex; align-items: center; min-height: 38px; margin: 0; padding: 0; color: #d7ecff; font-size: 15px; line-height: 1.6; } span { flex: 0 0 auto; color: #d7ecff; } } .portrait-input { flex: 1; min-width: 120px; height: 38px; padding: 0 10px; border: 1px solid rgba(45, 95, 126, 0.95); border-radius: 14px; outline: none; color: #eef5ff; background: #0f1a24; font-family: inherit; font-size: 15px; &:focus { border-color: #5fe7ff; background: rgba(10, 31, 46, 0.98); box-shadow: 0 0 0 3px rgba(34, 207, 255, 0.14); } } .portrait-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); } .portrait-head { display: flex; align-items: center; justify-content: center; min-height: 52px; padding: 12px; border-bottom: 1px solid rgba(77, 167, 220, 0.2); color: #eaffff; background: rgba(8, 55, 82, 0.98); font-size: 14px; font-weight: 900; & + & { border-left: 1px solid rgba(77, 167, 220, 0.2); } } .portrait-cell { min-height: 190px; padding: 12px; border: 0; border-left: 1px solid rgba(77, 167, 220, 0.2); outline: none; resize: vertical; color: #eef5ff; background: #0f1a24; font-family: inherit; font-size: 15px; line-height: 1.7; &:nth-of-type(1) { border-left: 0; } &:focus { background: rgba(10, 31, 46, 0.98); box-shadow: inset 0 0 0 1px #5fe7ff, 0 0 0 3px rgba(34, 207, 255, 0.14); } } .segmentation-intro { margin-bottom: 24px; color: #d7ecff; font-size: 15px; line-height: 1.7; p { margin: 0; } } .segmentation-table-wrap { overflow-x: auto; border: 1px solid rgba(0, 180, 255, 0.22); border-radius: 22px; background: rgba(1, 14, 26, 0.72); } .segmentation-table { width: 100%; min-width: 840px; border-collapse: collapse; table-layout: fixed; th, td { border: 1px solid rgba(77, 167, 220, 0.2); } th { height: 52px; padding: 12px; color: #eaffff; background: rgba(8, 55, 82, 0.98); font-size: 14px; font-weight: 900; text-align: center; } th:first-child, td:first-child { width: 190px; } td { height: 160px; padding: 12px; color: #d7f1ff; background: rgba(1, 14, 26, 0.48); } } .segmentation-market-input, .segmentation-cell-input { width: 100%; min-height: 38px; border: 1px solid rgba(45, 95, 126, 0.95); border-radius: 14px; outline: none; color: #eef5ff; background: #0f1a24; font-family: inherit; font-size: 15px; &:focus { border-color: #5fe7ff; background: rgba(10, 31, 46, 0.98); box-shadow: 0 0 0 3px rgba(34, 207, 255, 0.14); } } .segmentation-market-input { text-align: center; font-weight: 800; } .segmentation-cell-input { min-height: 160px; padding: 12px 14px; resize: vertical; line-height: 1.7; } .rfm-insight-table-wrap { overflow-x: auto; border: 1px solid rgba(0, 180, 255, 0.22); border-radius: 18px; background: rgba(1, 14, 26, 0.72); } .rfm-insight-table { width: 100%; min-width: 850px; border-collapse: collapse; table-layout: fixed; th, td { padding: 18px; border-right: 1px solid rgba(67, 125, 153, 0.52); border-bottom: 1px solid rgba(67, 125, 153, 0.52); color: #d7ecff; text-align: left; vertical-align: middle; line-height: 1.7; } thead th { color: #effcff; background: rgba(13, 129, 184, 0.78); text-align: center; font-size: 15px; font-weight: 800; } tbody th { width: 22%; color: #bcefff; background: rgba(7, 48, 72, 0.48); text-align: center; font-weight: 800; } tbody td:nth-child(2) { width: 34%; color: #c4d9e6; } tbody td:last-child { width: 44%; } tr:last-child th, tr:last-child td { border-bottom: 0; } th:last-child, td:last-child { border-right: 0; } } .interview-dialog-tabs { display: flex; gap: 8px; padding: 0 20px 14px; border-bottom: 1px solid #e2ebf0; button { min-width: 58px; height: 30px; border: 1px solid #bdd6e2; border-radius: 6px; color: #466477; background: #f7fbfd; cursor: pointer; font-weight: 700; &.active { border-color: #138ac0; color: #ffffff; background: #138ac0; } } } .interview-dialog-body--panel { max-height: 58vh; padding: 20px; color: #34495a; } .rfm-insight-input { width: 100%; min-height: 92px; padding: 12px 13px; border: 1px solid rgba(58, 126, 157, 0.8); border-radius: 10px; outline: none; resize: vertical; color: #eefaff; background: rgba(5, 27, 41, 0.84); font: inherit; line-height: 1.65; &::placeholder { color: #7896a8; } &:focus { border-color: #5ee8ff; box-shadow: 0 0 0 3px rgba(34, 207, 255, 0.12); } } .product-plan-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 360px); gap: 34px; align-items: start; } .product-plan-desc { margin: 0 0 26px; color: #d7ecff; font-size: 15px; line-height: 1.8; } .product-plan-label { margin-bottom: 10px; color: #ffffff; font-size: 15px; font-weight: 800; } .product-plan-label--price { margin-top: 38px; } .core-function-input { display: block; width: 100%; min-height: 110px; margin-bottom: 28px; padding: 12px 14px; border: 1px solid rgba(45, 95, 126, 0.95); border-radius: 14px; outline: none; resize: vertical; color: #eef5ff; background: #0f1a24; font-family: inherit; font-size: 15px; line-height: 1.7; &::placeholder { color: #91aabc; } &:focus { border-color: #5fe7ff; background: rgba(10, 31, 46, 0.98); box-shadow: 0 0 0 3px rgba(34, 207, 255, 0.14); } } .price-range-row { display: flex; align-items: center; gap: 14px; margin-bottom: 34px; span { width: 34px; height: 1px; background: rgba(215, 236, 255, 0.72); } } .price-input { width: 132px; height: 38px; padding: 0 10px; border: 1px solid rgba(45, 95, 126, 0.95); border-radius: 14px; outline: none; color: #eef5ff; background: #0f1a24; font-family: inherit; font-size: 15px; &:focus { border-color: #5fe7ff; background: rgba(10, 31, 46, 0.98); } } .analysis-conclusion-block { display: block; span { display: block; margin-bottom: 10px; color: #ffffff; font-size: 15px; font-weight: 800; } } .analysis-conclusion-input { width: 100%; min-height: 210px; padding: 14px; border: 1px solid rgba(45, 95, 126, 0.95); border-radius: 14px; outline: none; resize: vertical; color: #eef5ff; background: #0f1a24; font-family: inherit; font-size: 15px; line-height: 1.7; &:focus { border-color: #5fe7ff; background: rgba(10, 31, 46, 0.98); box-shadow: 0 0 0 3px rgba(34, 207, 255, 0.14); } } .product-reference { display: flex; justify-content: center; padding: 16px; border: 1px solid rgba(0, 180, 255, 0.22); border-radius: 22px; background: rgba(1, 14, 26, 0.72); img { width: min(100%, 320px); height: auto; border-radius: 14px; box-shadow: none; } } .upload-panel { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 14px; margin: 22px 0; } .file-input { display: none; } .upload-action { min-width: 0; height: 40px; padding: 0 18px; border: 1px solid rgba(92, 224, 255, 0.7); border-radius: 999px; color: #ffffff; background: linear-gradient(95deg, #0b84bd, #096491); box-shadow: none; font-size: 14px; font-weight: 800; } .file-chip { display: inline-flex; align-items: center; gap: 8px; max-width: min(520px, 100%); padding: 8px 14px; border: 1px solid rgba(93, 213, 255, 0.42); border-radius: 999px; color: #9fe8ff; background: rgba(1, 14, 26, 0.72); font-size: 13px; font-weight: 700; span { overflow-wrap: anywhere; } } .preview-action { height: 36px; border: 1px solid rgba(93, 213, 255, 0.5); border-radius: 999px; color: #a8eeff; background: rgba(17, 126, 178, 0.18); font-weight: 700; } .upload-tip { margin: -6px 0 8px; color: #8fa8b8; font-size: 13px; line-height: 1.7; } .excel-preview-meta { margin-bottom: 12px; color: #52687a; font-size: 13px; line-height: 1.6; } .excel-preview-wrap { max-height: 480px; overflow: auto; border: 1px solid #dce6ec; border-radius: 8px; } .excel-preview-table { width: 100%; min-width: 640px; border-collapse: collapse; color: #22313f; font-size: 13px; th, td { min-width: 112px; padding: 9px 12px; border-right: 1px solid #e4edf2; border-bottom: 1px solid #e4edf2; text-align: left; vertical-align: top; white-space: pre-wrap; word-break: break-word; } th { position: sticky; top: 0; z-index: 1; color: #ffffff; background: #158fc4; font-weight: 700; } tr:last-child td { border-bottom: 0; } th:last-child, td:last-child { border-right: 0; } } .rfm-chart-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 26px 0 18px; } .rfm-chart-card { display: flex; min-height: 232px; flex-direction: column; padding: 18px; border: 1px solid rgba(83, 201, 244, 0.28); border-radius: 18px; background: linear-gradient(145deg, rgba(23, 111, 153, 0.2), rgba(4, 20, 34, 0.72)), rgba(2, 15, 26, 0.82); } .rfm-chart-card__head { display: flex; align-items: center; gap: 10px; margin-bottom: auto; h4 { margin: 0; color: #e9f8ff; font-size: 16px; line-height: 1.45; } } .rfm-chart-card__index { display: grid; width: 31px; height: 31px; flex: 0 0 auto; place-items: center; border: 1px solid rgba(114, 232, 255, 0.64); border-radius: 50%; color: #5ee8ff; background: rgba(6, 84, 124, 0.38); font-size: 12px; font-weight: 800; } .rfm-chart-upload { display: inline-flex; min-height: 42px; align-items: center; justify-content: center; gap: 8px; margin-top: 18px; padding: 0 14px; border: 1px solid rgba(92, 224, 255, 0.7); border-radius: 10px; color: #ffffff; background: linear-gradient(95deg, #0b84bd, #096491); cursor: pointer; font-size: 14px; font-weight: 800; transition: transform 0.16s ease, box-shadow 0.16s ease; &:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(0, 141, 205, 0.22); } &:disabled { cursor: wait; opacity: 0.72; } } .rfm-chart-empty { margin: 15px 0 0; color: #7f9aa9; font-size: 12px; line-height: 1.5; } .rfm-chart-file { display: flex; align-items: center; gap: 11px; margin-top: 16px; padding: 8px; border: 1px solid rgba(102, 219, 255, 0.28); border-radius: 10px; background: rgba(0, 13, 23, 0.58); img { width: 58px; height: 46px; flex: 0 0 auto; border-radius: 6px; cursor: zoom-in; object-fit: cover; } div { min-width: 0; } strong { display: block; overflow: hidden; color: #bcefff; font-size: 12px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; } button { margin-top: 4px; padding: 0; border: 0; color: #55dfff; background: transparent; cursor: pointer; font-size: 12px; } } .rfm-chart-preview { display: block; width: 100%; max-height: 72vh; border-radius: 8px; object-fit: contain; } .field-block { display: block; span { display: block; margin-bottom: 10px; color: #d7ecff; font-size: 15px; line-height: 1.8; } } .profile-textarea { width: 100%; min-height: 110px; padding: 12px 14px; border: 1px solid rgba(45, 95, 126, 0.95); border-radius: 14px; outline: none; resize: vertical; color: #eef5ff; background: #0f1a24; font-size: 15px; line-height: 1.7; transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease; &::placeholder { color: #8fa8b8; opacity: 0.9; } &:focus { border-color: #5fe7ff; background: rgba(10, 31, 46, 0.98); box-shadow: 0 0 0 3px rgba(34, 207, 255, 0.14); } } .step-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 22px; margin-bottom: 36px; } .step-actions :deep(.step-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-size: 14px; font-weight: 800; } .step-actions :deep(.step-action--save), .step-actions :deep(.step-action--next) { border-color: rgba(92, 224, 255, 0.7); color: #ffffff; background: linear-gradient(95deg, #0b84bd, #096491); } .step-actions :deep(.step-action.is-disabled) { opacity: 0.45; } .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); box-shadow: none; font-size: 24px; font-weight: 900; line-height: 1; letter-spacing: 0; text-shadow: none; } .training-actions :deep(.training-action span) { display: inline-flex; align-items: center; color: inherit; font-size: inherit; line-height: 1; } .training-actions :deep(.training-action--submit), .training-actions :deep(.training-action--reset), .training-actions :deep(.training-action--export) { border-color: #2c83aa; color: #dff7ff; background: rgba(13, 64, 88, 0.62); } .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) { .target-profile-page { grid-template-columns: 1fr; } .product-plan-layout { grid-template-columns: 1fr; } .rfm-chart-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .product-reference { justify-content: flex-start; } } @media (max-width: 900px) { .target-profile-page { padding: 14px 14px 18px; } .training-core { padding: 18px; border-radius: 24px; } .workbench-head, .workbench-actions, .upload-panel, .step-title-row, .step-actions, .training-actions { flex-direction: column; align-items: stretch; } .workbench-actions :deep(.material-download), .workbench-actions .outline-action, .upload-action, .step-actions :deep(.step-action), .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 22px; width: 2px; height: 22px; margin-left: 29px; text-align: center; writing-mode: vertical-rl; } .product-plan-layout { gap: 20px; } } @media (max-width: 760px) { .rfm-chart-grid { grid-template-columns: 1fr; } .interview-tabs { flex-direction: column; gap: 12px; } .interview-tab { width: 100%; } .interview-dialog-layer { padding: 20px; } .interview-dialog { width: calc(100vw - 40px); } .interview-dialog-close { top: 16px; right: 16px; min-width: 78px; height: 40px; font-size: 15px; } .interview-dialog-body { padding: 78px 20px 28px; font-size: 17px; } } .workbench-head--actions-only { justify-content: flex-end; margin-bottom: 18px; padding-bottom: 0; border-bottom: 0; } </style>

{{ taskTitle }}

{{ activeStepName }}

{{ chart.title }}