## 目标 - 去除“黑白相间”的突兀对比,统一为项目主题色+柔和中性色,整体更温和、现代。 - 两处页面统一:独立向导与管理页弹出向导视觉一致,按钮/表单/步骤/卡片风格一致。 - 完全采用 Element Plus 官方变量与项目色板,不再硬编码颜色与阴影。 ## 统一规范(按 Element Plus 变量) - 文字:`var(--el-text-color-primary)`(标题)、`var(--el-text-color-regular)`(正文)、`var(--el-text-color-secondary)`(说明)。 - 边框:`var(--el-border-color)`;阴影:`var(--el-box-shadow-light)`。 - 背景:卡片 `var(--el-fill-color-blank)`、页面区块背景 `var(--el-fill-color)`;不使用纯黑纯白对比。 - 主题色:`var(--el-color-primary)`;状态色:`success/warning/info/danger` 统一。 - 间距:统一使用 `16px` 栅格间距,卡片内上下 `24px`。 ## 具体改造 1) 独立向导 `web/admin/src/views/activity/wizard/index.vue` - 容器:保持 `` 主容器,去除自定义白底+灰边的强对比;卡片背景改为 `var(--el-fill-color-blank)`,边框用 `var(--el-border-color)`,阴影用 `var(--el-box-shadow-light)`。 - 头部:标题字号 `28px` → `24px`,颜色用 `var(--el-text-color-primary)`;副标题 `14px`、`var(--el-text-color-secondary)`。 - 步骤:保留 ``,标题使用默认;去掉自定义连接线与色块;色彩由主题变量自动控制。 - 内容:每个步骤用 `` 分区,区块标题样式统一(加粗、常规色),说明文案用 secondary 文本色。 - 表单:统一 `label-width="140px"`、`size="default"`;布局用 ``+ ``;移除任何自定义对比背景。 - 按钮:主按钮 `type="primary"`,次按钮使用 `plain` 或默认;不使用渐变。 2) 管理页向导 `web/admin/src/views/activity/manage/index.vue` - 容器/步骤/表单/按钮同上;弹窗内部所有区块统一同风格(卡片+柔和背景+统一间距)。 - 选中信息卡片(当前活动/期数)采用轻背景 `var(--el-fill-color)`+ `var(--el-border-color)`,文字用 regular 色;去除纯白/纯黑对比。 ## 视觉微调项 - 标签 `ElTag` 的等级色:`primary/success/warning/info/danger` 映射规则保留,颜色来源于 EP 变量。 - 所有说明性文字色统一为 `var(--el-text-color-secondary)`,避免接近黑白对撞感。 ## 验证 - 构建通过:`npm run build`。 - 手动检查两处向导的视觉一致性(标题、卡片、表单、按钮、步骤)。 - 流程测试:创建活动→期数→奖品;界面风格统一且不出现批量测试入口。 ## 交付 - 两处文件的样式与结构更新,删除多余 SCSS,改为使用 EP 变量。 - 简要变更说明与截图(提交描述中)。 如确认方案,我将立即执行改造、构建与验证,并交付结果。