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