邹方成
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: 清理无用资源文件
51 lines
2.9 KiB
Markdown
51 lines
2.9 KiB
Markdown
## 目标
|
||
- 去除所有自定义渐变、毛玻璃和重度阴影，完全采用 Element Plus 官方样式与间距体系。
|
||
- 两处向导界面统一风格：独立向导与管理页弹出向导保持一致的 EP 风格卡片、步骤、表单和按钮。
|
||
- 不引入新库，使用项目现有 Element Plus 组件和 CSS 变量（如 `--el-color-primary`）。
|
||
|
||
## 改造范围
|
||
- `web/admin/src/views/activity/wizard/index.vue`
|
||
- `web/admin/src/views/activity/manage/index.vue`
|
||
|
||
## 样式与组件替换策略
|
||
- 容器与卡片：
|
||
- 使用 `<ElCard>` 作为主容器，移除自定义容器类和背景渐变。
|
||
- 保持卡片圆角与阴影为 EP 默认；必要时轻度覆盖（仅边距）。
|
||
- 步骤指示器：
|
||
- 用 `<ElSteps>` + `<ElStep>`（simple 模式）替换自定义步骤条。
|
||
- 激活色用 EP 主色 `var(--el-color-primary)`，完成色用 EP 成功色。
|
||
- 表单：
|
||
- 统一 `<ElForm>`、`<ElFormItem>` 默认尺寸（large 或 default），`label-width: 140px`，`label-position: left`。
|
||
- 使用 `<ElRow>`/`<ElCol>` + `:gutter="16"` 管理表单栅格间距。
|
||
- 标签与按钮：
|
||
- `<ElTag>` 的 `type` 使用 `primary/success/warning/info/danger` 标准集合。
|
||
- 按钮全部使用 EP 默认样式与尺寸；次级按钮使用 `plain` 或 `text` 类型，不做渐变。
|
||
- 颜色与变量：
|
||
- 仅使用 `--el-color-primary`、`--el-color-success` 等 EP 变量，移除硬编码渐变色与 backdrop-filter。
|
||
|
||
## 具体改动清单
|
||
1. 独立向导 `wizard/index.vue`
|
||
- 移除 `.activity-wizard-container` 背景渐变与毛玻璃。
|
||
- 顶部头部改为 `<ElCard>` 包裹标题与描述，使用普通文本样式（取消文字渐变）。
|
||
- 步骤改为 `<ElSteps :active="active" simple>`，步骤标题采用 EP 默认文案展示。
|
||
- 内容区块改为 `<ElCard>` 内表单与按钮，使用标准间距与栅格。
|
||
- 删除/精简大部分自定义 SCSS，仅保留少量布局边距（如 `.mb-4`）。
|
||
|
||
2. 管理页弹出向导 `manage/index.vue`
|
||
- 弹窗内容内采用 `<ElCard>` 分区，不再使用自定义步骤条；统一用 `<ElSteps>` simple。
|
||
- 向导页中所有按钮与标签统一 EP 默认风格。
|
||
- 保持批量抽奖对话框隔离（当前已 `v-if="!showWizard"`）。
|
||
|
||
## 验证与回归
|
||
- 构建检查：`npm run build` 无 TS/样式错误。
|
||
- 流程测试：创建活动 → 期数 → 奖品，步骤推进正确，不触发批量抽奖。
|
||
- 视觉验收：对比项目其他页面（列表、表格、弹窗）确认风格一致。
|
||
- 移动端宽度下检查栅格与表单换行正常。
|
||
|
||
## 交付物
|
||
- 两处向导文件的组件结构与样式改造，删除冗余 SCSS，自述变更要点（合并到提交描述）。
|
||
|
||
## 备注
|
||
- 不新增依赖；完全遵循 Element Plus 官方组件风格与项目既有规范。
|
||
|
||
如确认以上方案，我将开始实施并完成构建与验证，然后交付结果。 |