邹方成
2a89a1ab9d
Some checks failed
Build docker and publish / linux (1.24.5) (push) Failing after 39s
refactor(service): 修改banner和guild删除逻辑为软删除 fix(service): 修复删除操作使用软删除而非物理删除 build: 添加SQLite测试仓库实现 docs: 新增奖励管理字段拆分和批量抽奖UI改造文档 ci: 更新CI忽略文件 style: 清理无用资源文件
2.8 KiB
2.8 KiB
目标
- 去除“黑白相间”的突兀对比，统一为项目主题色+柔和中性色，整体更温和、现代。
- 两处页面统一：独立向导与管理页弹出向导视觉一致，按钮/表单/步骤/卡片风格一致。
- 完全采用 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。
具体改造
- 独立向导
web/admin/src/views/activity/wizard/index.vue
- 容器：保持
<ElCard>主容器，去除自定义白底+灰边的强对比；卡片背景改为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)。 - 步骤：保留
<ElSteps simple>，标题使用默认；去掉自定义连接线与色块；色彩由主题变量自动控制。 - 内容：每个步骤用
<ElCard>分区，区块标题样式统一（加粗、常规色），说明文案用 secondary 文本色。 - 表单：统一
label-width="140px"、size="default"；布局用<ElRow :gutter="16">+<ElCol>；移除任何自定义对比背景。 - 按钮：主按钮
type="primary"，次按钮使用plain或默认；不使用渐变。
- 管理页向导
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 变量。
- 简要变更说明与截图（提交描述中）。
如确认方案，我将立即执行改造、构建与验证，并交付结果。