邹方成
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: 清理无用资源文件
39 lines
2.8 KiB
Markdown
39 lines
2.8 KiB
Markdown
## 目标
|
||
- 去除“黑白相间”的突兀对比，统一为项目主题色+柔和中性色，整体更温和、现代。
|
||
- 两处页面统一：独立向导与管理页弹出向导视觉一致，按钮/表单/步骤/卡片风格一致。
|
||
- 完全采用 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`
|
||
- 容器：保持 `<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` 或默认；不使用渐变。
|
||
|
||
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 变量。
|
||
- 简要变更说明与截图（提交描述中）。
|
||
|
||
如确认方案，我将立即执行改造、构建与验证，并交付结果。 |