|
|
<template>
|
|
|
<div class="release-channel-page student-training-shell">
|
|
|
<main class="release-channel-core">
|
|
|
<section class="task-header">
|
|
|
<div class="task-head-main">
|
|
|
<h1 class="task-title">{{ taskTitle }}</h1>
|
|
|
<p class="task-brief">
|
|
|
<span class="task-brief-text">{{ taskBackground }}</span>
|
|
|
<button type="button" class="task-brief-toggle" @click="briefOpen = !briefOpen">
|
|
|
{{ briefOpen ? "收起" : "展开目标与要求" }}
|
|
|
</button>
|
|
|
<span v-if="briefOpen" class="task-brief-more">
|
|
|
<b>实训目标</b>
|
|
|
<ul>
|
|
|
<li v-for="goal in taskGoals" :key="goal">{{ goal }}</li>
|
|
|
</ul>
|
|
|
<b>实训要求</b>
|
|
|
<p>{{ taskRequirement }}</p>
|
|
|
</span>
|
|
|
</p>
|
|
|
</div>
|
|
|
</section>
|
|
|
|
|
|
<section class="task-action-strip">
|
|
|
<TrainingTaskToolbar :task-key="TASK_KEY" :on-submit="submitTask" :on-reset="resetTraining"
|
|
|
:on-export="exportOutcome" />
|
|
|
</section>
|
|
|
|
|
|
<section class="task-card">
|
|
|
<nav class="step-tabs" aria-label="产品发布渠道评估步骤">
|
|
|
<template v-for="(step, index) in trainingSteps" :key="`${step}-${index}`">
|
|
|
<button type="button" :class="['step-tab', { active: activeStep === index + 1, complete: activeStep > index + 1 }]"
|
|
|
:aria-current="activeStep === index + 1 ? 'step' : undefined" @click="goToStepFromTab(index + 1)">
|
|
|
<span class="step-marker">{{ String(index + 1).padStart(2, "0") }}</span><span class="step-copy"><b>{{ step
|
|
|
}}</b><small>{{ activeStep === index + 1
|
|
|
? '当前步骤 →' : '点击切换 →' }}</small></span>
|
|
|
</button>
|
|
|
<span v-if="index < trainingSteps.length - 1" class="step-connector" aria-hidden="true" />
|
|
|
</template>
|
|
|
</nav>
|
|
|
|
|
|
<section v-if="activeStep === 1">
|
|
|
<header class="step-heading">
|
|
|
<p class="step-eyebrow">Step 01</p>
|
|
|
<h2>权重设置</h2>
|
|
|
</header>
|
|
|
<p class="lead">不同维度对新品渠道效果的影响不一样，请给以下核心评估维度设置权重，按照重要性分配权重，总权重合计 100%。</p>
|
|
|
<div class="table-actions">
|
|
|
<el-button type="primary" @click="addWeightRow"><el-icon>
|
|
|
<Plus />
|
|
|
</el-icon>增加一行</el-button>
|
|
|
<el-button @click="weightRows.pop()" :disabled="!weightRows.length"><el-icon>
|
|
|
<Minus />
|
|
|
</el-icon>删除一行</el-button>
|
|
|
</div>
|
|
|
<div class="table-wrap">
|
|
|
<table class="weight-table">
|
|
|
<thead>
|
|
|
<tr>
|
|
|
<th>评估维度</th>
|
|
|
<th>维度说明</th>
|
|
|
<th>权重占比（%）</th>
|
|
|
<th class="operation-column">操作</th>
|
|
|
</tr>
|
|
|
</thead>
|
|
|
<tbody>
|
|
|
<tr v-for="(row, index) in weightRows" :key="row.id">
|
|
|
<td>
|
|
|
<el-input v-if="!row.preset" v-model="row.dimension" maxlength="50"
|
|
|
placeholder="填写评估维度" />
|
|
|
<span v-else class="preset-text">{{ row.dimension }}</span>
|
|
|
</td>
|
|
|
<td>
|
|
|
<el-input v-if="!row.preset" v-model="row.description" maxlength="200"
|
|
|
placeholder="填写维度说明" />
|
|
|
<span v-else class="preset-text">{{ row.description }}</span>
|
|
|
</td>
|
|
|
<td><el-input-number v-model="row.weight" :min="0" :max="100" :precision="2"
|
|
|
:step="1" controls-position="right" /><small v-if="row.suggestion">建议权重：{{
|
|
|
row.suggestion }}</small></td>
|
|
|
<td class="operation-column"><el-button v-if="!row.preset" link type="danger"
|
|
|
@click="weightRows.splice(index, 1)">删除本行</el-button></td>
|
|
|
</tr>
|
|
|
<tr v-if="!weightRows.length">
|
|
|
<td colspan="4" class="empty-row">暂无评估维度，请增加一行后填写。</td>
|
|
|
</tr>
|
|
|
</tbody>
|
|
|
<tfoot>
|
|
|
<tr>
|
|
|
<th colspan="2">当前权重合计</th>
|
|
|
<td :class="{ 'total-error': weightTotal !== 100 }">{{ displayWeightTotal }}%</td>
|
|
|
<td></td>
|
|
|
</tr>
|
|
|
</tfoot>
|
|
|
</table>
|
|
|
</div>
|
|
|
<p class="hint">默认展示上述7个评估维度和建议权重范围，具体权重需由学生自行填写，可另外新增评估维度；点击下一步时系统校验所有权重之和必须等于 100%。</p>
|
|
|
</section>
|
|
|
|
|
|
<section v-else-if="activeStep === 2">
|
|
|
<header class="step-heading">
|
|
|
<p class="step-eyebrow">Step 02</p>
|
|
|
<h2>渠道数据</h2>
|
|
|
</header>
|
|
|
<p class="lead">根据案例资料提供的 5 大渠道近 3 个月数据，汇总填写下表。</p>
|
|
|
<div class="table-actions">
|
|
|
<el-button type="primary" @click="addChannelRow"><el-icon>
|
|
|
<Plus />
|
|
|
</el-icon>增加一行</el-button>
|
|
|
<el-button @click="channelRows.pop()" :disabled="!channelRows.length"><el-icon>
|
|
|
<Minus />
|
|
|
</el-icon>删除一行</el-button>
|
|
|
<el-button type="primary" plain @click="exportChannelRows"><el-icon>
|
|
|
<Download />
|
|
|
</el-icon>导出</el-button>
|
|
|
</div>
|
|
|
<div class="table-wrap">
|
|
|
<table class="channel-table">
|
|
|
<thead>
|
|
|
<tr>
|
|
|
<th>渠道</th>
|
|
|
<th>日均总搜索量</th>
|
|
|
<th>供需比</th>
|
|
|
<th>平均点击率（%）</th>
|
|
|
<th>平均CPC（元）</th>
|
|
|
<th>平均转化率（%）</th>
|
|
|
<th>现有相关访客数</th>
|
|
|
<th>匹配度（1-100）</th>
|
|
|
<th class="operation-column">操作</th>
|
|
|
</tr>
|
|
|
</thead>
|
|
|
<tbody>
|
|
|
<tr v-for="(row, index) in channelRows" :key="row.id">
|
|
|
<td><el-input v-model="row.channel" maxlength="30" placeholder="填写渠道" /></td>
|
|
|
<td><el-input-number v-model="row.dailySearchVolume" :min="0" :precision="0"
|
|
|
controls-position="right" /></td>
|
|
|
<td><el-input-number v-model="row.supplyDemandRatio" :min="0" :precision="4"
|
|
|
:step="0.1" controls-position="right" /></td>
|
|
|
<td><el-input-number v-model="row.averageClickRate" :min="0" :max="100"
|
|
|
:precision="2" controls-position="right" /></td>
|
|
|
<td><el-input-number v-model="row.averageCpc" :min="0" :precision="2"
|
|
|
controls-position="right" /></td>
|
|
|
<td><el-input-number v-model="row.averageConversionRate" :min="0" :max="100"
|
|
|
:precision="2" controls-position="right" /></td>
|
|
|
<td><el-input-number v-model="row.existingVisitorCount" :min="0" :precision="0"
|
|
|
controls-position="right" /></td>
|
|
|
<td><el-input-number v-model="row.matchingScore" :min="1" :max="100" :precision="0"
|
|
|
controls-position="right" /></td>
|
|
|
<td class="operation-column"><el-button v-if="!row.preset" link type="danger"
|
|
|
@click="channelRows.splice(index, 1)">删除本行</el-button></td>
|
|
|
</tr>
|
|
|
<tr v-if="!channelRows.length">
|
|
|
<td colspan="9" class="empty-row">暂无渠道数据，请增加一行后填写。</td>
|
|
|
</tr>
|
|
|
</tbody>
|
|
|
</table>
|
|
|
</div>
|
|
|
<p class="hint">默认展示上述5个预置渠道，不可删除；可另外新增其他渠道。保存不拦截，点击下一步时由系统校验全部指标。</p>
|
|
|
</section>
|
|
|
|
|
|
<section v-else-if="activeStep === 3">
|
|
|
<header class="step-heading">
|
|
|
<p class="step-eyebrow">Step 03</p>
|
|
|
<h2>归一化评分</h2>
|
|
|
</header>
|
|
|
<p class="scoring-guide">通过Min-Max归一法将各维度原始数据转换为0-10分标准化得分，计算规则如下：<br>
|
|
|
正向指标（越大越好，如搜索量、点击率、转化率、访客数、匹配度），得分=（该渠道值−最小值）/（最大值−最小值）× 10<br>
|
|
|
逆向指标（越小越好，如供需比、CPC）：得分=（最大值−该渠道值）/（最大值−最小值）× 10</p>
|
|
|
<div class="table-actions"><el-button type="primary" plain @click="exportScoreRows"><el-icon>
|
|
|
<Download />
|
|
|
</el-icon>导出</el-button></div>
|
|
|
<div class="table-wrap scoring-table-wrap">
|
|
|
<table class="scoring-table">
|
|
|
<thead>
|
|
|
<tr>
|
|
|
<th rowspan="2">渠道</th>
|
|
|
<th v-for="metric in scoringMetrics" :key="metric.key" colspan="2">{{ metric.label
|
|
|
}}</th>
|
|
|
<th rowspan="2">加权得分</th>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<template v-for="metric in scoringMetrics" :key="`${metric.key}-sub`">
|
|
|
<th>得分</th>
|
|
|
<th>权重</th>
|
|
|
</template>
|
|
|
</tr>
|
|
|
</thead>
|
|
|
<tbody>
|
|
|
<tr v-for="row in scoreRows" :key="row.id">
|
|
|
<th scope="row">{{ row.channel }}</th>
|
|
|
<template v-for="metric in row.dimensions" :key="metric.key">
|
|
|
<td><el-input-number v-model="metric.score" :min="0" :max="10" :precision="1"
|
|
|
:step="0.1" controls-position="right" /></td>
|
|
|
<td class="weight-cell">{{ metric.weight ?? "—" }}%</td>
|
|
|
</template>
|
|
|
<td><el-input-number v-model="row.weightedScore" :min="0" :precision="2"
|
|
|
:step="0.01" controls-position="right" /></td>
|
|
|
</tr>
|
|
|
<tr v-if="!scoreRows.length">
|
|
|
<td :colspan="2 + scoringMetrics.length * 2" class="empty-row">请先完成并保存第二步渠道数据。</td>
|
|
|
</tr>
|
|
|
</tbody>
|
|
|
</table>
|
|
|
</div>
|
|
|
<p class="hint">渠道名称同步第二步，权重同步第一步。每项得分乘以对应权重（按百分比折算）并相加得到加权得分；系统会依据已保存的前两步数据检测计算结果。</p>
|
|
|
<p class="step-three-notice">说明：渠道来自第二步，权重来自第一步；每个维度得分乘以权重后相加即为加权得分。计算结果不一致时仍可进入下一步，系统会记录检测结果，供 AI
|
|
|
助评扣分参考。</p>
|
|
|
</section>
|
|
|
|
|
|
<section v-else>
|
|
|
<header class="step-heading">
|
|
|
<p class="step-eyebrow">Step 04</p>
|
|
|
<h2>渠道排名</h2>
|
|
|
</header>
|
|
|
<p class="lead">根据步骤一设置的权重和步骤三的归一化得分，填写各渠道加权综合得分并排序，明确前两位核心渠道。</p>
|
|
|
<div class="table-wrap ranking-table-wrap">
|
|
|
<table class="ranking-table">
|
|
|
<thead>
|
|
|
<tr>
|
|
|
<th>排名</th>
|
|
|
<th>渠道</th>
|
|
|
<th>加权综合得分</th>
|
|
|
<th>是否选为核心渠道</th>
|
|
|
</tr>
|
|
|
</thead>
|
|
|
<tbody>
|
|
|
<tr v-for="(row, index) in rankingRows" :key="row.id">
|
|
|
<td class="rank-cell">{{ index + 1 }}</td>
|
|
|
<td><el-input v-model="row.channel" maxlength="30" placeholder="填写渠道" /></td>
|
|
|
<td><el-input-number v-model="row.weightedScore" :min="0" :precision="2"
|
|
|
:step="0.01" controls-position="right" /></td>
|
|
|
<td class="core-cell"><span :class="{ core: index < 2 }">{{ index < 2 ? "是" : "否"
|
|
|
}}</span>
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr v-if="!rankingRows.length">
|
|
|
<td colspan="4" class="empty-row">请先完成并保存第三步归一化评分。</td>
|
|
|
</tr>
|
|
|
</tbody>
|
|
|
</table>
|
|
|
</div>
|
|
|
<label class="analysis-field"><span>请根据以上计算结果，结合案例文档内容，分析所选核心渠道的优势及运营建议：</span><el-input
|
|
|
v-model="coreChannelAnalysis" type="textarea" :autosize="{ minRows: 7, maxRows: 14 }"
|
|
|
placeholder="填写核心渠道优势、资源投入重点和运营建议" /></label>
|
|
|
<p class="hint">渠道数量同步第三步，排名自动从 1 往下排列。渠道与加权综合得分需由学生填写，并与第三步数据逐项一致；得分必须按从高到低排序，前两名自动显示为核心渠道。</p>
|
|
|
</section>
|
|
|
|
|
|
<div class="step-navigation">
|
|
|
<div class="step-nav-left">
|
|
|
<button v-if="activeStep > 1" type="button" class="btn-nav btn-ghost" :disabled="saving" @click="previousStep">
|
|
|
<el-icon><ArrowLeft /></el-icon>
|
|
|
上一步
|
|
|
</button>
|
|
|
<button type="button" class="btn-nav btn-save" :disabled="saving" @click="saveCurrentProgress">
|
|
|
<el-icon><CircleCheck /></el-icon>
|
|
|
保存
|
|
|
</button>
|
|
|
</div>
|
|
|
<div class="step-nav-right">
|
|
|
<span class="step-progress">Step {{ String(activeStep).padStart(2, "0") }} / {{ String(4).padStart(2, "0") }}</span>
|
|
|
<button v-if="activeStep < 4" type="button" class="btn-nav btn-primary" :disabled="validating" @click="nextStep">
|
|
|
下一步
|
|
|
<el-icon><ArrowRight /></el-icon>
|
|
|
</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</section>
|
|
|
</main>
|
|
|
<TrainingAiSidebar :study-tip="'先确定可解释的评估权重，再完整汇总各渠道近三个月数据。'" :progress-items="progressItems" />
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
import { computed, onMounted, ref } from "vue"
|
|
|
import { ArrowLeft, ArrowRight, CircleCheck, Download, Minus, Plus } from "@element-plus/icons-vue"
|
|
|
import { ElMessage } from "element-plus"
|
|
|
import TrainingAiSidebar from "@/views/components/TrainingAiSidebar.vue"
|
|
|
import TrainingTaskToolbar from "@/views/components/TrainingTaskToolbar.vue"
|
|
|
import { getTrainingTaskByKey } from "@/api/trainingTask"
|
|
|
import { deleteStudentTrainingAnswer, getStudentTrainingAnswer, saveStudentTrainingAnswer, validateReleaseChannelEvaluationStepOne, validateReleaseChannelEvaluationStepTwo, validateReleaseChannelEvaluationStepThree, validateReleaseChannelEvaluationStepFour } from "@/api/studentTrainingAnswer"
|
|
|
import { parseTrainingArray } from "@/views/training/taskKeyMap"
|
|
|
|
|
|
const TASK_KEY = "release-channel-evaluation"
|
|
|
const RELEASE_CHANNEL_GUIDE_URL = "/file/training-materials/release-channel-evaluation/21.实训操作说明.docx"
|
|
|
const activeStep = ref(1)
|
|
|
const briefOpen = ref(true)
|
|
|
const taskConfig = ref(null)
|
|
|
const saving = ref(false)
|
|
|
const validating = ref(false)
|
|
|
let nextId = 1
|
|
|
const makeRow = (values = {}) => ({ id: nextId++, ...values })
|
|
|
const defaultWeightRows = () => [
|
|
|
["市场规模潜力", "对应关键词日均总搜索量，代表渠道用户需求大盘空间", "20~25"], ["竞争激烈程度", "供需比（在线商品数/日均搜索量），数值越低渠道竞争越宽松", "15~20"], ["流量点击效率", "品类平均点击率，代表渠道用户对该品类的点击意愿强弱", "12~18"], ["流量获取成本", "平均CPC，数值越低获取精准用户的推广成本越低", "15~20"], ["流量转化效率", "品类平均转化率，代表渠道用户的最终下单意愿", "12~18"], ["现有用户基础", "店铺现有该品类相关访客数，代表品牌存量用户承接能力", "5~10"], ["匹配度", "渠道属性与产品定位的适配度打分（1-10分）", "5~10"],
|
|
|
].map(([dimension, description, suggestion]) => makeRow({ dimension, description, weight: undefined, suggestion, preset: true }))
|
|
|
const defaultChannelRows = () => ["天猫", "京东", "抖音", "拼多多", "唯品会"].map((channel) => makeRow({ channel, preset: true }))
|
|
|
const weightSuggestions = Object.fromEntries(defaultWeightRows().map((row) => [row.dimension, row.suggestion]))
|
|
|
const weightRows = ref(defaultWeightRows())
|
|
|
const channelRows = ref(defaultChannelRows())
|
|
|
const scoreRows = ref([])
|
|
|
const rankingRows = ref([])
|
|
|
const coreChannelAnalysis = ref("")
|
|
|
const scoringMetrics = [
|
|
|
{ key: "marketScale", dimension: "市场规模潜力", label: "市场规模得分" },
|
|
|
{ key: "competition", dimension: "竞争激烈程度", label: "竞争程度得分" },
|
|
|
{ key: "click", dimension: "流量点击效率", label: "点击效率得分" },
|
|
|
{ key: "cost", dimension: "流量获取成本", label: "获客成本得分" },
|
|
|
{ key: "conversion", dimension: "流量转化效率", label: "转化效率得分" },
|
|
|
{ key: "userBase", dimension: "现有用户基础", label: "用户基础得分" },
|
|
|
{ key: "match", dimension: "匹配度", label: "匹配度得分" },
|
|
|
]
|
|
|
const taskTitle = computed(() => taskConfig.value?.taskName || "产品发布渠道评估")
|
|
|
const taskBackground = computed(() => taskConfig.value?.background || "结合新品定位与渠道特征，为产品发布选择更合适的投放渠道。")
|
|
|
const taskRequirement = computed(() => taskConfig.value?.requirements || "设置渠道评估维度与权重，并汇总渠道基础数据。")
|
|
|
const taskGoals = computed(() => parseTrainingArray(taskConfig.value?.objectives, ["理解渠道评估的核心维度", "能够按重要性配置评估权重", "汇总渠道数据并完成评估基础"]))
|
|
|
const weightTotal = computed(() => Number(weightRows.value.reduce((sum, row) => sum + (Number(row.weight) || 0), 0).toFixed(6)))
|
|
|
const displayWeightTotal = computed(() => Number.isInteger(weightTotal.value) ? String(weightTotal.value) : weightTotal.value.toFixed(2))
|
|
|
const progressItems = computed(() => parseTrainingArray(taskConfig.value?.steps).map((text, index) => ({ text, status: index + 1 < activeStep.value ? "done" : index + 1 === activeStep.value ? "doing" : "" })))
|
|
|
const DEFAULT_STEPS = ["权重设置", "渠道数据", "归一化评分", "渠道排名"]
|
|
|
const trainingSteps = computed(() => {
|
|
|
const fromConfig = parseTrainingArray(taskConfig.value?.steps)
|
|
|
return (fromConfig.length ? fromConfig : DEFAULT_STEPS).slice(0, DEFAULT_STEPS.length)
|
|
|
})
|
|
|
function goToStepFromTab(step) {
|
|
|
if (step === 3) return openStepThree()
|
|
|
if (step === 4) return openStepFour()
|
|
|
activeStep.value = step
|
|
|
}
|
|
|
const weightPayload = () => ({ rows: weightRows.value.map(({ dimension, description, weight }) => ({ dimension, description, weight })) })
|
|
|
const channelPayload = () => ({ rows: channelRows.value.map(({ channel, dailySearchVolume, supplyDemandRatio, averageClickRate, averageCpc, averageConversionRate, existingVisitorCount, matchingScore }) => ({ channel, dailySearchVolume, supplyDemandRatio, averageClickRate, averageCpc, averageConversionRate, existingVisitorCount, matchingScore })) })
|
|
|
const scorePayload = () => ({ rows: scoreRows.value.map((row) => ({ channel: row.channel, weightedScore: row.weightedScore, dimensions: row.dimensions.map(({ dimension, score, weight }) => ({ dimension, score, weight })) })) })
|
|
|
const scoreAnswerPayload = (calculationCheck = {}) => ({
|
|
|
...scorePayload(), calculationCheck: {
|
|
|
calculationCorrect: calculationCheck.calculationCorrect === true,
|
|
|
totalItemCount: Number(calculationCheck.totalItemCount) || 0,
|
|
|
incorrectItemCount: Number(calculationCheck.incorrectItemCount) || 0,
|
|
|
incorrectItems: Array.isArray(calculationCheck.incorrectItems) ? calculationCheck.incorrectItems : [],
|
|
|
}
|
|
|
})
|
|
|
const rankingPayload = () => ({ rows: rankingRows.value.map(({ channel, weightedScore }) => ({ channel, weightedScore })), coreChannelAnalysis: coreChannelAnalysis.value })
|
|
|
function addWeightRow() { weightRows.value.push(makeRow({ dimension: "", description: "", weight: undefined, suggestion: "" })) }
|
|
|
function addChannelRow() { channelRows.value.push(makeRow({ channel: "" })) }
|
|
|
async function saveAnswer(currentStep, fields) { await saveStudentTrainingAnswer(TASK_KEY, { saveAction: "SAVE", currentStep, ...fields }) }
|
|
|
async function saveWeightStep() { if (saving.value) return; saving.value = true; try { await saveAnswer(1, { step1Answer: JSON.stringify(weightPayload()) }); ElMessage.success("当前进度已保存") } finally { saving.value = false } }
|
|
|
async function goStepTwo() { if (validating.value) return; validating.value = true; try { await validateReleaseChannelEvaluationStepOne(weightPayload()); await saveAnswer(2, { step1Answer: JSON.stringify(weightPayload()) }); activeStep.value = 2; ElMessage.success("权重校验通过，已进入第二步") } catch (error) { ElMessage.error(error?.message || "请检查评估维度和权重设置") } finally { validating.value = false } }
|
|
|
async function saveChannelStep() { if (saving.value) return; saving.value = true; try { await saveAnswer(2, { step2Answer: JSON.stringify(channelPayload()) }); ElMessage.success("当前进度已保存") } finally { saving.value = false } }
|
|
|
async function validateChannelStep() { if (validating.value) return; validating.value = true; try { await validateReleaseChannelEvaluationStepTwo(channelPayload()); await saveAnswer(3, { step2Answer: JSON.stringify(channelPayload()) }); syncScoreRows(); activeStep.value = 3; ElMessage.success("渠道数据校验通过，已进入第三步") } catch (error) { ElMessage.error(error?.message || "请检查渠道数据填写情况") } finally { validating.value = false } }
|
|
|
function syncScoreRows(savedRows = []) { const savedByChannel = new Map(savedRows.map((row) => [row?.channel, row])); const weights = Object.fromEntries(weightRows.value.map((row) => [row.dimension, row.weight])); scoreRows.value = channelRows.value.map((channelRow) => { const saved = savedByChannel.get(channelRow.channel); const savedScores = new Map((saved?.dimensions || []).map((dimension) => [dimension?.dimension, dimension])); return makeRow({ channel: channelRow.channel, weightedScore: saved?.weightedScore, dimensions: scoringMetrics.map((metric) => makeRow({ key: metric.key, dimension: metric.dimension, weight: weights[metric.dimension], score: savedScores.get(metric.dimension)?.score })) }) }) }
|
|
|
function openStepThree() { syncScoreRows(scoreRows.value); activeStep.value = 3 }
|
|
|
async function saveScoreStep() { if (saving.value) return; saving.value = true; try { await saveAnswer(3, { step3Answer: JSON.stringify(scorePayload()) }); ElMessage.success("当前进度已保存") } finally { saving.value = false } }
|
|
|
async function validateScoreStep() { if (validating.value) return; validating.value = true; try { const result = await validateReleaseChannelEvaluationStepThree(scorePayload()); const calculationCheck = result?.data || {}; await saveAnswer(4, { step3Answer: JSON.stringify(scoreAnswerPayload(calculationCheck)) }); syncRankingRows(); activeStep.value = 4; ElMessage[calculationCheck.calculationCorrect ? "success" : "warning"](calculationCheck.message || "已保存并进入第四步") } catch (error) { ElMessage.error(error?.message || "请完整填写归一化得分表") } finally { validating.value = false } }
|
|
|
function syncRankingRows(savedRows = []) { const savedByChannel = new Map(savedRows.map((row) => [row?.channel, row])); rankingRows.value = scoreRows.value.map((scoreRow) => { const saved = savedByChannel.get(scoreRow.channel); return makeRow({ channel: saved?.channel ?? "", weightedScore: saved?.weightedScore }) }) }
|
|
|
function openStepFour() { syncRankingRows(rankingRows.value); activeStep.value = 4 }
|
|
|
async function saveRankingStep() { if (saving.value) return; saving.value = true; try { await saveAnswer(4, { step4Answer: JSON.stringify(rankingPayload()) }); ElMessage.success("当前进度已保存") } finally { saving.value = false } }
|
|
|
async function saveCurrentProgress() { if (activeStep.value === 1) return saveWeightStep(); if (activeStep.value === 2) return saveChannelStep(); if (activeStep.value === 3) return saveScoreStep(); return saveRankingStep() }
|
|
|
function previousStep() { if (activeStep.value > 1) activeStep.value -= 1 }
|
|
|
function nextStep() { if (activeStep.value === 1) return goStepTwo(); if (activeStep.value === 2) return validateChannelStep(); if (activeStep.value === 3) return validateScoreStep() }
|
|
|
async function validateRankingStep() { if (validating.value) return; validating.value = true; try { await validateReleaseChannelEvaluationStepFour(rankingPayload()); await saveStudentTrainingAnswer(TASK_KEY, { saveAction: "SUBMIT", currentStep: 4, step4Answer: JSON.stringify(rankingPayload()) }); ElMessage.success("渠道排名校验通过，任务已提交") } catch (error) { ElMessage.error(error?.message || "请检查渠道排名和核心渠道运营建议") } finally { validating.value = false } }
|
|
|
async function submitTask() { return validateRankingStep() }
|
|
|
async function resetTraining() { if (saving.value || validating.value) return; try { await deleteStudentTrainingAnswer(TASK_KEY); weightRows.value = defaultWeightRows(); channelRows.value = defaultChannelRows(); scoreRows.value = []; rankingRows.value = []; coreChannelAnalysis.value = ""; activeStep.value = 1; ElMessage.success("已清空全部实训步骤，可以重新开始") } catch (error) { ElMessage.error("重新实训失败，请稍后重试") } }
|
|
|
function exportOutcome() { ElMessage.info("导出功能正在开发中") }
|
|
|
function downloadBuiltInFile(url, fileName) {
|
|
|
const link = document.createElement("a")
|
|
|
link.href = url
|
|
|
link.download = fileName
|
|
|
document.body.appendChild(link)
|
|
|
link.click()
|
|
|
document.body.removeChild(link)
|
|
|
}
|
|
|
function downloadCsv(headers, rows, fileName) { const escape = (value) => `"${String(value ?? "").replaceAll('"', '""')}"`; const lines = [headers, ...rows].map((row) => row.map(escape).join(",")); const url = URL.createObjectURL(new Blob([`\uFEFF${lines.join("\n")}`], { type: "text/csv;charset=utf-8" })); const link = document.createElement("a"); link.href = url; link.download = fileName; link.click(); URL.revokeObjectURL(url) }
|
|
|
function exportChannelRows() { downloadCsv(["渠道", "日均总搜索量", "供需比", "平均点击率（%）", "平均CPC（元）", "平均转化率（%）", "现有相关访客数", "匹配度（1-100）"], channelRows.value.map((row) => [row.channel, row.dailySearchVolume, row.supplyDemandRatio, row.averageClickRate, row.averageCpc, row.averageConversionRate, row.existingVisitorCount, row.matchingScore]), "产品发布渠道评估-渠道数据.csv") }
|
|
|
function exportScoreRows() { const headers = ["渠道", ...scoringMetrics.flatMap((metric) => [`${metric.dimension}得分`, `${metric.dimension}权重（%）`]), "加权得分"]; const rows = scoreRows.value.map((row) => [row.channel, ...row.dimensions.flatMap((dimension) => [dimension.score, dimension.weight]), row.weightedScore]); downloadCsv(headers, rows, "产品发布渠道评估-归一化评分.csv") }
|
|
|
function restoreRows(raw, target, defaults, fields) { try { const saved = typeof raw === "string" ? JSON.parse(raw || "{}") : raw; if (!Array.isArray(saved?.rows)) return; const keyField = fields[0]; const presetFlags = new Map(defaults().map((row) => [row[keyField], Boolean(row.preset)])); target.value = saved.rows.map((row) => { const value = Object.fromEntries(fields.map((field) => [field, row?.[field]])); if (target === weightRows) return makeRow({ ...value, suggestion: weightSuggestions[value.dimension] || "", preset: presetFlags.get(value[keyField]) || false }); if (target === channelRows) return makeRow({ ...value, preset: presetFlags.get(value[keyField]) || false }); return makeRow(value) }) } catch (error) { target.value = defaults() } }
|
|
|
async function loadProgress() { try { const result = await getStudentTrainingAnswer(TASK_KEY); const answer = result?.data; restoreRows(answer?.step1Answer, weightRows, defaultWeightRows, ["dimension", "description", "weight"]); restoreRows(answer?.step2Answer, channelRows, defaultChannelRows, ["channel", "dailySearchVolume", "supplyDemandRatio", "averageClickRate", "averageCpc", "averageConversionRate", "existingVisitorCount", "matchingScore"]); let savedScores = []; try { const saved = typeof answer?.step3Answer === "string" ? JSON.parse(answer.step3Answer || "{}") : answer?.step3Answer; savedScores = Array.isArray(saved?.rows) ? saved.rows : [] } catch (error) { savedScores = [] } syncScoreRows(savedScores); let savedRanking = []; try { const saved = typeof answer?.step4Answer === "string" ? JSON.parse(answer.step4Answer || "{}") : answer?.step4Answer; savedRanking = Array.isArray(saved?.rows) ? saved.rows : []; coreChannelAnalysis.value = String(saved?.coreChannelAnalysis || "") } catch (error) { savedRanking = []; coreChannelAnalysis.value = "" } syncRankingRows(savedRanking); activeStep.value = Math.min(Math.max(Number(answer?.currentStep) || 1, 1), 4) } catch (error) { syncScoreRows(); syncRankingRows() } }
|
|
|
onMounted(async () => { try { const result = await getTrainingTaskByKey(TASK_KEY); taskConfig.value = result?.data || null } catch (error) { taskConfig.value = null } await loadProgress() })
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
/* ===== 页面级令牌（墨黑极简主题） ===== */
|
|
|
.release-channel-page {
|
|
|
--student-accent: #2563eb;
|
|
|
--student-accent-deep: #1d4ed8;
|
|
|
--student-accent-light: #3b82f6;
|
|
|
--student-accent-soft: #eff6ff;
|
|
|
--student-danger: #ef4444;
|
|
|
--student-success: #2ba471;
|
|
|
--student-layer-1: #1d4ed8;
|
|
|
--student-layer-2: #3b82f6;
|
|
|
--student-layer-3: #93c5fd;
|
|
|
--student-panel-border: #e5e7eb;
|
|
|
--student-card-bg: #ffffff;
|
|
|
--student-panel-bg: #fafbfc;
|
|
|
--student-text: #1f2937;
|
|
|
--student-text-secondary: #6b7280;
|
|
|
/* 字号梯度统一继承 .student-training-shell，页面不再重复声明 */
|
|
|
|
|
|
min-width: 0;
|
|
|
color: var(--student-text);
|
|
|
background: #ffffff;
|
|
|
}
|
|
|
|
|
|
/* 主容器：只设 gap，无边框/背景/阴影/双列 grid */
|
|
|
.release-channel-core {
|
|
|
display: grid;
|
|
|
gap: 10px;
|
|
|
align-content: start;
|
|
|
min-width: 0;
|
|
|
padding: 0;
|
|
|
border: 0;
|
|
|
background: transparent;
|
|
|
box-shadow: none;
|
|
|
}
|
|
|
|
|
|
/* ===== task-header ===== */
|
|
|
.task-header {
|
|
|
display: flex;
|
|
|
align-items: flex-start;
|
|
|
justify-content: space-between;
|
|
|
gap: 12px;
|
|
|
margin: 0;
|
|
|
padding: 16px;
|
|
|
border: 1px solid #e7e9ed;
|
|
|
border-radius: 16px;
|
|
|
background: #ffffff;
|
|
|
}
|
|
|
|
|
|
.task-head-main {
|
|
|
display: grid;
|
|
|
justify-items: start;
|
|
|
gap: 8px;
|
|
|
min-width: 0;
|
|
|
flex: 1 1 auto;
|
|
|
}
|
|
|
|
|
|
|
|
|
.task-title {
|
|
|
margin: 0;
|
|
|
color: var(--student-text);
|
|
|
font-size: var(--student-fs-display);
|
|
|
font-weight: 700;
|
|
|
line-height: 1.35;
|
|
|
}
|
|
|
|
|
|
.task-brief {
|
|
|
margin: 0;
|
|
|
color: var(--student-text-secondary);
|
|
|
font-size: var(--student-fs-body-sm);
|
|
|
line-height: 1.6;
|
|
|
}
|
|
|
|
|
|
.task-brief-text {
|
|
|
display: block;
|
|
|
}
|
|
|
|
|
|
.task-brief-toggle {
|
|
|
padding: 0;
|
|
|
border: 0;
|
|
|
color: var(--student-accent-deep);
|
|
|
background: transparent;
|
|
|
font: inherit;
|
|
|
font-weight: 700;
|
|
|
cursor: pointer;
|
|
|
|
|
|
&:hover {
|
|
|
text-decoration: underline;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.task-brief-more {
|
|
|
display: grid;
|
|
|
gap: 6px;
|
|
|
margin-top: 8px;
|
|
|
padding-top: 8px;
|
|
|
border-top: 1px solid var(--student-panel-border);
|
|
|
|
|
|
b {
|
|
|
color: var(--student-text);
|
|
|
font-size: var(--student-fs-body-sm);
|
|
|
}
|
|
|
|
|
|
ul {
|
|
|
display: grid;
|
|
|
gap: 4px;
|
|
|
margin: 0;
|
|
|
padding-left: 18px;
|
|
|
}
|
|
|
|
|
|
p {
|
|
|
margin: 0;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/* ===== 工具栏：一行不换行 ===== */
|
|
|
/* ===== 工具栏：TrainingTaskToolbar 按钮右对齐 ===== */
|
|
|
.task-action-strip {
|
|
|
margin: 0;
|
|
|
padding: 10px 16px;
|
|
|
|
|
|
:deep(.training-task-toolbar) {
|
|
|
display: flex;
|
|
|
flex-wrap: wrap;
|
|
|
align-items: center;
|
|
|
justify-content: flex-end;
|
|
|
gap: 8px;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/* ===== task-card：透明容器 ===== */
|
|
|
.task-card {
|
|
|
padding: 0;
|
|
|
border: 0;
|
|
|
border-radius: 0;
|
|
|
background: transparent;
|
|
|
display: grid;
|
|
|
gap: 10px;
|
|
|
min-width: 0;
|
|
|
}
|
|
|
|
|
|
/* grid 子项默认 min-width:auto 会被宽表格（评分表 1780px）撑开，
|
|
|
导致 .table-wrap 的 overflow-x:auto 失效、整页横向溢出 */
|
|
|
.task-card>* {
|
|
|
min-width: 0;
|
|
|
}
|
|
|
|
|
|
/* ===== 步骤条：容器样式 ===== */
|
|
|
.step-tabs {
|
|
|
display: flex;
|
|
|
align-items: stretch;
|
|
|
gap: 10px;
|
|
|
margin: 4px 0 16px;
|
|
|
padding: 0;
|
|
|
border: 0;
|
|
|
border-radius: 0;
|
|
|
background: transparent;
|
|
|
box-shadow: none;
|
|
|
overflow-x: auto;
|
|
|
}
|
|
|
|
|
|
/* ===== 步骤说明 & 引导区 ===== */
|
|
|
.step-heading {
|
|
|
display: grid;
|
|
|
gap: 4px;
|
|
|
margin: 0 0 10px;
|
|
|
}
|
|
|
|
|
|
.step-heading .step-eyebrow {
|
|
|
margin: 0;
|
|
|
color: var(--student-accent, #2563eb);
|
|
|
font-size: var(--student-fs-caption, 12px);
|
|
|
font-weight: 800;
|
|
|
letter-spacing: 0.12em;
|
|
|
text-transform: uppercase;
|
|
|
}
|
|
|
|
|
|
.step-heading h2 {
|
|
|
margin: 0;
|
|
|
color: var(--student-text, #11243b);
|
|
|
font-size: var(--student-fs-h2, 18px);
|
|
|
font-weight: 700;
|
|
|
line-height: 1.4;
|
|
|
}
|
|
|
|
|
|
.lead {
|
|
|
margin: 0 0 14px;
|
|
|
color: var(--student-text-secondary);
|
|
|
font-size: var(--student-fs-body);
|
|
|
line-height: 1.6;
|
|
|
}
|
|
|
|
|
|
/* ===== 预置维度行：只读文本 ===== */
|
|
|
.preset-text {
|
|
|
display: block;
|
|
|
padding: 6px 2px;
|
|
|
color: var(--student-text);
|
|
|
font-size: var(--student-fs-body);
|
|
|
line-height: 1.5;
|
|
|
}
|
|
|
|
|
|
.scoring-guide {
|
|
|
margin: 14px 0 12px;
|
|
|
padding: 12px 14px;
|
|
|
border-left: 3px solid var(--student-accent);
|
|
|
border-radius: 0 8px 8px 0;
|
|
|
background: var(--student-accent-soft);
|
|
|
color: var(--student-text-secondary);
|
|
|
font-size: var(--student-fs-body);
|
|
|
line-height: 1.6;
|
|
|
}
|
|
|
|
|
|
|
|
|
.step-three-notice {
|
|
|
margin: 20px 0 0;
|
|
|
padding: 10px 14px;
|
|
|
border: 1px solid rgba(217, 85, 76, 0.28);
|
|
|
border-radius: 8px;
|
|
|
color: #9b3b34;
|
|
|
background: rgba(217, 85, 76, 0.06);
|
|
|
font-size: var(--student-fs-body-sm);
|
|
|
line-height: 1.6;
|
|
|
}
|
|
|
|
|
|
/* ===== 表格 ===== */
|
|
|
.table-actions {
|
|
|
display: flex;
|
|
|
justify-content: flex-end;
|
|
|
gap: 12px;
|
|
|
margin: 0 0 16px;
|
|
|
}
|
|
|
|
|
|
.table-wrap {
|
|
|
overflow-x: auto;
|
|
|
min-width: 0;
|
|
|
border: 1px solid var(--student-panel-border);
|
|
|
border-radius: 10px;
|
|
|
}
|
|
|
|
|
|
.table-wrap table {
|
|
|
width: 100%;
|
|
|
border-collapse: collapse;
|
|
|
}
|
|
|
|
|
|
.weight-table {
|
|
|
min-width: 900px;
|
|
|
}
|
|
|
|
|
|
.channel-table {
|
|
|
min-width: 1320px;
|
|
|
}
|
|
|
|
|
|
.scoring-table {
|
|
|
min-width: 1780px;
|
|
|
}
|
|
|
|
|
|
.ranking-table {
|
|
|
min-width: 880px;
|
|
|
}
|
|
|
|
|
|
.table-wrap th,
|
|
|
.table-wrap td {
|
|
|
padding: 12px;
|
|
|
border-right: 1px solid var(--student-panel-border);
|
|
|
border-bottom: 1px solid var(--student-panel-border);
|
|
|
vertical-align: middle;
|
|
|
}
|
|
|
|
|
|
.table-wrap th {
|
|
|
white-space: nowrap;
|
|
|
color: var(--student-text);
|
|
|
background: #fafbfc;
|
|
|
font-size: var(--student-fs-body-sm);
|
|
|
font-weight: 800;
|
|
|
text-align: left;
|
|
|
}
|
|
|
|
|
|
.table-wrap td {
|
|
|
background: #ffffff;
|
|
|
}
|
|
|
|
|
|
.scoring-table thead tr:nth-child(2) th {
|
|
|
background: #fafbfc;
|
|
|
}
|
|
|
|
|
|
.channel-table td,
|
|
|
.scoring-table td {
|
|
|
min-width: 108px;
|
|
|
}
|
|
|
|
|
|
.channel-table td:first-child {
|
|
|
min-width: 110px;
|
|
|
}
|
|
|
|
|
|
.scoring-table th:first-child {
|
|
|
min-width: 108px;
|
|
|
}
|
|
|
|
|
|
.ranking-table td {
|
|
|
min-width: 170px;
|
|
|
}
|
|
|
|
|
|
.ranking-table td:first-child {
|
|
|
min-width: 100px;
|
|
|
}
|
|
|
|
|
|
.rank-cell,
|
|
|
.core-cell {
|
|
|
text-align: center;
|
|
|
font-weight: 800;
|
|
|
}
|
|
|
|
|
|
.core-cell .core {
|
|
|
display: inline-flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
min-width: 36px;
|
|
|
height: 24px;
|
|
|
padding: 0 8px;
|
|
|
border-radius: 6px;
|
|
|
color: #ffffff;
|
|
|
background: var(--student-accent);
|
|
|
font-size: var(--student-fs-caption);
|
|
|
font-weight: 700;
|
|
|
}
|
|
|
|
|
|
.weight-cell {
|
|
|
color: var(--student-accent);
|
|
|
text-align: center;
|
|
|
font-weight: 700;
|
|
|
}
|
|
|
|
|
|
.table-wrap small {
|
|
|
display: block;
|
|
|
margin-top: 6px;
|
|
|
color: var(--student-text-secondary);
|
|
|
font-size: var(--student-fs-caption);
|
|
|
}
|
|
|
|
|
|
.operation-column {
|
|
|
width: 100px;
|
|
|
text-align: center;
|
|
|
}
|
|
|
|
|
|
.empty-row {
|
|
|
text-align: center;
|
|
|
color: var(--student-text-secondary);
|
|
|
}
|
|
|
|
|
|
.table-wrap tfoot th,
|
|
|
.table-wrap tfoot td {
|
|
|
border-bottom: 0;
|
|
|
background: var(--student-panel-bg);
|
|
|
}
|
|
|
|
|
|
.total-error {
|
|
|
color: var(--student-danger);
|
|
|
font-weight: 700;
|
|
|
}
|
|
|
|
|
|
/* ===== 表单输入 ===== */
|
|
|
.analysis-field {
|
|
|
display: block;
|
|
|
margin-top: 14px;
|
|
|
}
|
|
|
|
|
|
.analysis-field>span {
|
|
|
display: block;
|
|
|
margin-bottom: 8px;
|
|
|
color: var(--student-text);
|
|
|
font-size: var(--student-fs-body);
|
|
|
font-weight: 600;
|
|
|
}
|
|
|
|
|
|
/* 表格内输入框：透明底 + outline focus */
|
|
|
.table-wrap :deep(.el-input__wrapper),
|
|
|
.table-wrap :deep(.el-input-number) {
|
|
|
width: 100%;
|
|
|
background: transparent;
|
|
|
box-shadow: none;
|
|
|
}
|
|
|
|
|
|
.table-wrap :deep(.el-input__inner) {
|
|
|
color: var(--student-text);
|
|
|
}
|
|
|
|
|
|
.table-wrap :deep(.el-textarea__inner) {
|
|
|
border: 1px solid transparent;
|
|
|
background: transparent;
|
|
|
box-shadow: none;
|
|
|
color: var(--student-text);
|
|
|
font-size: var(--student-fs-body);
|
|
|
line-height: 1.55;
|
|
|
}
|
|
|
|
|
|
.analysis-field :deep(.el-textarea__inner) {
|
|
|
min-height: 180px !important;
|
|
|
border: 1px solid var(--student-panel-border);
|
|
|
border-radius: 8px;
|
|
|
background: #ffffff;
|
|
|
box-shadow: none;
|
|
|
color: var(--student-text);
|
|
|
line-height: 1.55;
|
|
|
}
|
|
|
|
|
|
.table-wrap :deep(.el-textarea__inner:focus),
|
|
|
.analysis-field :deep(.el-textarea__inner:focus),
|
|
|
.table-wrap :deep(.el-input__wrapper.is-focus) {
|
|
|
outline: 2px solid rgba(37, 99, 235, 0.2);
|
|
|
outline-offset: -2px;
|
|
|
box-shadow: none;
|
|
|
}
|
|
|
|
|
|
/* ===== 底部说明 ===== */
|
|
|
.hint {
|
|
|
margin: 14px 0 0;
|
|
|
color: var(--student-text-secondary);
|
|
|
font-size: var(--student-fs-body-sm);
|
|
|
line-height: 1.6;
|
|
|
}
|
|
|
|
|
|
/* ===== 底部步骤导航按钮 ===== */
|
|
|
.step-navigation {
|
|
|
position: relative;
|
|
|
display: flex;
|
|
|
flex-wrap: wrap;
|
|
|
align-items: center;
|
|
|
justify-content: space-between;
|
|
|
gap: 10px;
|
|
|
margin-top: 16px;
|
|
|
padding: 12px 16px;
|
|
|
border: 1px solid var(--student-panel-border);
|
|
|
border-radius: 10px;
|
|
|
background: #ffffff;
|
|
|
}
|
|
|
|
|
|
.step-nav-left,
|
|
|
.step-nav-right {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
gap: 8px;
|
|
|
flex-wrap: nowrap;
|
|
|
}
|
|
|
|
|
|
.step-nav-right {
|
|
|
margin-left: auto;
|
|
|
}
|
|
|
|
|
|
.btn-primary {
|
|
|
display: inline-flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
gap: 6px;
|
|
|
min-height: 36px;
|
|
|
height: 36px;
|
|
|
padding: 0 14px;
|
|
|
border: 1px solid var(--student-accent);
|
|
|
border-radius: 8px;
|
|
|
color: #ffffff;
|
|
|
background: var(--student-accent);
|
|
|
font-family: inherit;
|
|
|
font-size: var(--student-fs-button);
|
|
|
font-weight: 600;
|
|
|
box-shadow: 0 1px 2px rgba(37, 99, 235, 0.2), 0 2px 8px rgba(37, 99, 235, 0.15);
|
|
|
cursor: pointer;
|
|
|
transition: all 0.16s ease;
|
|
|
white-space: nowrap;
|
|
|
|
|
|
.el-icon {
|
|
|
font-size: 18px;
|
|
|
}
|
|
|
|
|
|
&:hover:not(:disabled) {
|
|
|
border-color: var(--student-accent-deep);
|
|
|
background: var(--student-accent-deep);
|
|
|
transform: translateY(-1px);
|
|
|
box-shadow: 0 2px 6px rgba(29, 78, 216, 0.3), 0 4px 12px rgba(29, 78, 216, 0.22);
|
|
|
}
|
|
|
|
|
|
&:active:not(:disabled) {
|
|
|
transform: translateY(0);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.btn-ghost {
|
|
|
display: inline-flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
gap: 6px;
|
|
|
min-height: 36px;
|
|
|
height: 36px;
|
|
|
padding: 0 14px;
|
|
|
border: 1px solid rgba(37, 99, 235, 0.35);
|
|
|
border-radius: 8px;
|
|
|
color: var(--student-accent);
|
|
|
background: #ffffff;
|
|
|
font-family: inherit;
|
|
|
font-size: var(--student-fs-button);
|
|
|
font-weight: 600;
|
|
|
cursor: pointer;
|
|
|
transition: all 0.16s ease;
|
|
|
white-space: nowrap;
|
|
|
|
|
|
.el-icon {
|
|
|
font-size: 18px;
|
|
|
}
|
|
|
|
|
|
&:hover:not(:disabled) {
|
|
|
border-color: var(--student-accent);
|
|
|
background: var(--student-accent-soft);
|
|
|
transform: translateY(-1px);
|
|
|
box-shadow: 0 2px 6px rgba(37, 99, 235, 0.12);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.btn-save {
|
|
|
display: inline-flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
gap: 6px;
|
|
|
min-height: 36px;
|
|
|
height: 36px;
|
|
|
padding: 0 14px;
|
|
|
border: 1px solid #e5e7eb;
|
|
|
border-radius: 8px;
|
|
|
color: #4b5563;
|
|
|
background: #f9fafb;
|
|
|
font-family: inherit;
|
|
|
font-size: var(--student-fs-button);
|
|
|
font-weight: 600;
|
|
|
cursor: pointer;
|
|
|
transition: all 0.16s ease;
|
|
|
white-space: nowrap;
|
|
|
|
|
|
.el-icon {
|
|
|
font-size: 18px;
|
|
|
}
|
|
|
|
|
|
&:hover:not(:disabled) {
|
|
|
border-color: #d1d5db;
|
|
|
background: #f3f4f6;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.btn-primary:disabled,
|
|
|
.btn-ghost:disabled,
|
|
|
.btn-save:disabled,
|
|
|
.btn-nav:disabled {
|
|
|
cursor: not-allowed;
|
|
|
opacity: 0.5;
|
|
|
transform: none;
|
|
|
box-shadow: none;
|
|
|
}
|
|
|
|
|
|
.step-progress {
|
|
|
color: var(--student-text-secondary);
|
|
|
font-family: var(--student-font-data);
|
|
|
font-size: var(--student-fs-caption);
|
|
|
font-weight: 700;
|
|
|
letter-spacing: 0.05em;
|
|
|
white-space: nowrap;
|
|
|
}
|
|
|
|
|
|
/* ===== 响应式 ===== */
|
|
|
@media (max-width: 720px) {
|
|
|
.task-header {
|
|
|
flex-direction: column;
|
|
|
align-items: flex-start;
|
|
|
}
|
|
|
|
|
|
.task-action-strip {
|
|
|
:deep(.training-task-toolbar) {
|
|
|
justify-content: stretch;
|
|
|
}
|
|
|
|
|
|
:deep(.training-task-toolbar > *) {
|
|
|
flex: 1 1 auto;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.table-actions {
|
|
|
align-items: stretch;
|
|
|
flex-direction: column;
|
|
|
}
|
|
|
|
|
|
.table-actions :deep(.el-button) {
|
|
|
width: 100%;
|
|
|
}
|
|
|
|
|
|
.step-navigation {
|
|
|
flex-direction: column;
|
|
|
align-items: stretch;
|
|
|
}
|
|
|
|
|
|
.step-nav-left,
|
|
|
.step-nav-right {
|
|
|
width: 100%;
|
|
|
}
|
|
|
|
|
|
.btn-nav {
|
|
|
width: 100%;
|
|
|
}
|
|
|
}
|
|
|
</style>
|
|
|
|
|
|
<style lang="scss">
|
|
|
/* ===== 步骤条：分段连接胶囊（教育蓝极简） ===== */
|
|
|
#app .studentLayout section.app-main:has(.release-channel-page) .step-tabs {
|
|
|
display: flex !important;
|
|
|
flex-wrap: nowrap !important;
|
|
|
align-items: stretch !important;
|
|
|
justify-content: center !important;
|
|
|
gap: 0 !important;
|
|
|
width: 100% !important;
|
|
|
margin: 0 0 20px !important;
|
|
|
padding: 0 !important;
|
|
|
border: none !important;
|
|
|
border-radius: 0 !important;
|
|
|
background: transparent !important;
|
|
|
box-shadow: none !important;
|
|
|
|
|
|
.step-connector {
|
|
|
display: none !important;
|
|
|
}
|
|
|
|
|
|
.step-tab {
|
|
|
|
|
|
|
|
|
display: flex !important;
|
|
|
flex-direction: row !important;
|
|
|
align-items: center !important;
|
|
|
justify-content: center !important;
|
|
|
gap: 8px !important;
|
|
|
min-width: 0 !important;
|
|
|
height: auto !important;
|
|
|
min-height: 40px !important;
|
|
|
margin: 0 !important;
|
|
|
padding: 8px 14px !important;
|
|
|
border: 1px solid #e5e7eb !important;
|
|
|
border-right: none !important;
|
|
|
border-radius: 0 !important;
|
|
|
background: #ffffff !important;
|
|
|
box-shadow: none !important;
|
|
|
color: #6b7280 !important;
|
|
|
font-size: var(--student-fs-body) !important;
|
|
|
font-weight: 600 !important;
|
|
|
line-height: 1.3 !important;
|
|
|
letter-spacing: 0 !important;
|
|
|
white-space: nowrap !important;
|
|
|
text-align: center !important;
|
|
|
cursor: pointer;
|
|
|
transition: all 0.16s ease !important;
|
|
|
|
|
|
&:first-child {
|
|
|
border-radius: 8px 0 0 8px !important;
|
|
|
}
|
|
|
|
|
|
&:last-child {
|
|
|
border-radius: 0 8px 8px 0 !important;
|
|
|
border-right: 1px solid #e5e7eb !important;
|
|
|
}
|
|
|
|
|
|
.step-marker {
|
|
|
display: inline-flex !important;
|
|
|
align-items: center !important;
|
|
|
justify-content: center !important;
|
|
|
flex: 0 0 auto !important;
|
|
|
min-width: 22px !important;
|
|
|
width: auto !important;
|
|
|
height: 22px !important;
|
|
|
padding: 0 5px !important;
|
|
|
border: none !important;
|
|
|
border-radius: 6px !important;
|
|
|
background: #f3f4f6 !important;
|
|
|
color: #6b7280 !important;
|
|
|
font-family: var(--student-font-data), ui-monospace, "SF Mono", Consolas, monospace !important;
|
|
|
font-size: var(--student-fs-body-sm) !important;
|
|
|
font-weight: 700 !important;
|
|
|
line-height: 1 !important;
|
|
|
transition: all 0.16s ease !important;
|
|
|
}
|
|
|
|
|
|
.step-copy {
|
|
|
display: flex !important;
|
|
|
flex-direction: column !important;
|
|
|
gap: 0 !important;
|
|
|
min-width: 0 !important;
|
|
|
margin-left: 0 !important;
|
|
|
}
|
|
|
|
|
|
.step-copy b {
|
|
|
overflow: hidden !important;
|
|
|
text-overflow: ellipsis !important;
|
|
|
white-space: nowrap !important;
|
|
|
line-height: 1.3 !important;
|
|
|
color: inherit !important;
|
|
|
font-size: var(--student-fs-body) !important;
|
|
|
font-weight: 600 !important;
|
|
|
}
|
|
|
|
|
|
.step-copy small {
|
|
|
display: none !important;
|
|
|
}
|
|
|
|
|
|
&:hover:not(.active):not(.complete) {
|
|
|
border-color: #2563eb !important;
|
|
|
background: #eff6ff !important;
|
|
|
color: #2563eb !important;
|
|
|
z-index: 1 !important;
|
|
|
|
|
|
.step-marker {
|
|
|
background: #2563eb !important;
|
|
|
color: #ffffff !important;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
&.complete:not(.active) {
|
|
|
border-color: #e5e7eb !important;
|
|
|
color: #374151 !important;
|
|
|
|
|
|
.step-marker {
|
|
|
background: rgba(43, 164, 113, 0.12) !important;
|
|
|
color: #16915f !important;
|
|
|
}
|
|
|
|
|
|
&:hover {
|
|
|
border-color: #2ba471 !important;
|
|
|
background: #f0fdf6 !important;
|
|
|
z-index: 1 !important;
|
|
|
|
|
|
.step-marker {
|
|
|
background: #2ba471 !important;
|
|
|
color: #ffffff !important;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
&.active {
|
|
|
border-color: #2563eb !important;
|
|
|
background: #2563eb !important;
|
|
|
color: #ffffff !important;
|
|
|
font-weight: 700 !important;
|
|
|
box-shadow: none !important;
|
|
|
z-index: 2 !important;
|
|
|
|
|
|
.step-marker {
|
|
|
background: #ffffff !important;
|
|
|
color: #2563eb !important;
|
|
|
}
|
|
|
|
|
|
&:hover {
|
|
|
background: #1d4ed8 !important;
|
|
|
border-color: #1d4ed8 !important;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/* ===== 窄屏横向滑动 ===== */
|
|
|
@media (max-width: 900px) {
|
|
|
#app .studentLayout section.app-main:has(.release-channel-page) .step-tabs {
|
|
|
justify-content: flex-start !important;
|
|
|
overflow-x: auto !important;
|
|
|
}
|
|
|
|
|
|
#app .studentLayout section.app-main:has(.release-channel-page) .step-tabs .step-tab {
|
|
|
flex: 0 0 140px !important;
|
|
|
max-width: none !important;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/* ============================================================
|
|
|
* 共用组件换肤：TrainingTaskToolbar 工具栏按钮 → 教育蓝
|
|
|
* ============================================================ */
|
|
|
.release-channel-page .task-action-strip .task-toolbar-button.el-button {
|
|
|
display: inline-flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
gap: 6px;
|
|
|
min-height: 34px;
|
|
|
height: 34px;
|
|
|
padding: 0 14px;
|
|
|
border: 1px solid rgba(37, 99, 235, 0.35);
|
|
|
border-radius: 8px;
|
|
|
color: #2563eb;
|
|
|
background: #ffffff;
|
|
|
font-size: var(--student-fs-body);
|
|
|
font-weight: 600;
|
|
|
transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
|
|
|
}
|
|
|
|
|
|
.release-channel-page .task-action-strip .task-toolbar-button:hover,
|
|
|
.release-channel-page .task-action-strip .task-toolbar-button:focus {
|
|
|
border-color: #2563eb;
|
|
|
color: #1d4ed8;
|
|
|
background: #eff6ff;
|
|
|
box-shadow: 0 2px 6px rgba(37, 99, 235, 0.12);
|
|
|
}
|
|
|
|
|
|
.release-channel-page .task-action-strip .task-toolbar-button--submit.el-button {
|
|
|
border-color: #2563eb;
|
|
|
color: #ffffff;
|
|
|
background: #2563eb;
|
|
|
box-shadow: 0 1px 2px rgba(37, 99, 235, 0.35), 0 3px 10px rgba(37, 99, 235, 0.22);
|
|
|
}
|
|
|
|
|
|
.release-channel-page .task-action-strip .task-toolbar-button--submit:hover,
|
|
|
.release-channel-page .task-action-strip .task-toolbar-button--submit:focus {
|
|
|
border-color: #1d4ed8;
|
|
|
color: #ffffff;
|
|
|
background: #1d4ed8;
|
|
|
box-shadow: 0 2px 4px rgba(37, 99, 235, 0.4), 0 5px 14px rgba(29, 78, 216, 0.28);
|
|
|
}
|
|
|
|
|
|
/* ===== 表格操作按钮换肤 ===== */
|
|
|
.release-channel-page .table-actions .el-button {
|
|
|
border-radius: 8px !important;
|
|
|
font-size: var(--student-fs-body) !important;
|
|
|
font-weight: 700 !important;
|
|
|
}
|
|
|
|
|
|
.release-channel-page .table-actions .el-button--primary {
|
|
|
border-color: #2563eb !important;
|
|
|
background: #2563eb !important;
|
|
|
color: #ffffff !important;
|
|
|
box-shadow: 0 3px 10px rgba(37, 99, 235, 0.28) !important;
|
|
|
}
|
|
|
|
|
|
.release-channel-page .table-actions .el-button--primary:hover {
|
|
|
border-color: #1d4ed8 !important;
|
|
|
background: #1d4ed8 !important;
|
|
|
box-shadow: 0 5px 14px rgba(29, 78, 216, 0.32) !important;
|
|
|
}
|
|
|
</style>
|