邹方成
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.9 KiB
2.9 KiB
目标
- 去除所有自定义渐变、毛玻璃和重度阴影，完全采用 Element Plus 官方样式与间距体系。
- 两处向导界面统一风格：独立向导与管理页弹出向导保持一致的 EP 风格卡片、步骤、表单和按钮。
- 不引入新库，使用项目现有 Element Plus 组件和 CSS 变量（如
--el-color-primary）。
改造范围
web/admin/src/views/activity/wizard/index.vueweb/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。
- 仅使用
具体改动清单
- 独立向导
wizard/index.vue
- 移除
.activity-wizard-container背景渐变与毛玻璃。 - 顶部头部改为
<ElCard>包裹标题与描述，使用普通文本样式（取消文字渐变）。 - 步骤改为
<ElSteps :active="active" simple>，步骤标题采用 EP 默认文案展示。 - 内容区块改为
<ElCard>内表单与按钮，使用标准间距与栅格。 - 删除/精简大部分自定义 SCSS，仅保留少量布局边距（如
.mb-4）。
- 管理页弹出向导
manage/index.vue
- 弹窗内容内采用
<ElCard>分区，不再使用自定义步骤条；统一用<ElSteps>simple。 - 向导页中所有按钮与标签统一 EP 默认风格。
- 保持批量抽奖对话框隔离（当前已
v-if="!showWizard"）。
验证与回归
- 构建检查：
npm run build无 TS/样式错误。 - 流程测试：创建活动 → 期数 → 奖品，步骤推进正确，不触发批量抽奖。
- 视觉验收：对比项目其他页面（列表、表格、弹窗）确认风格一致。
- 移动端宽度下检查栅格与表单换行正常。
交付物
- 两处向导文件的组件结构与样式改造，删除冗余 SCSS，自述变更要点（合并到提交描述）。
备注
- 不新增依赖；完全遵循 Element Plus 官方组件风格与项目既有规范。
如确认以上方案，我将开始实施并完成构建与验证，然后交付结果。