## 问题确认 - 症状:在“创建活动”向导中点击“下一步”后,出现“批量抽奖”界面,用户认为逻辑错误。 - 初步研判:批量抽奖来自 `BatchDrawDialog`(src/views/activity/rewards/modules/batch-draw-dialog.vue)。该组件在管理页(src/views/activity/manage/index.vue)中常驻渲染,可能因不当条件渲染或状态误触发而在向导流程中弹出。 - 路由侧现状:列表页有 `router.push({ name: 'ActivityWizard' })`,但路由模块未注册对应路由,存在跳转异常风险。 ## 目标 1. 保证向导“下一步”仅在步骤间顺序前进:活动 → 期数 → 奖品,绝不触发批量抽奖。 2. 统一界面风格为项目全局规范:颜色、圆角、阴影、按钮、表单、布局与动画。 3. 保留现有功能,避免回归,完成自测与构建验证。 ## 技术方案 ### 1. 逻辑修复 - 向导页面(两处)严格限制导航: - `src/views/activity/wizard/index.vue`:`next()` 仅在成功创建活动后 `active.value = 1`,在成功创建期数后 `active.value = 2`,移除或校验任何非最终提交阶段的 `router.push` 与其他弹窗触发。 - `src/views/activity/manage/index.vue`:`nextWizard()` 仅递进 `wizardActive`。确保 `BatchDrawDialog` 的 `v-model` 只由 `openBatchDraw()` 显式开启。 - 隔离批量抽奖弹窗: - 在管理页将 `` 增加条件渲染 `v-if="!showWizard"`,确保向导弹窗期间不渲染批量抽奖组件,从根本杜绝误触发。 - 路由补全:在 `src/router/modules/activity.ts` 注册 `ActivityWizard` 路由(path `/activity/wizard`,component `'/activity/wizard'`),避免列表页“创建活动”跳转异常导致意外页面状态。 ### 2. 风格统一 - 去除自定义渐变与玻璃拟态,改为全局样式: - 主容器采用 `art-card` 与项目标准阴影、圆角(卡片 16px,按钮/输入 12px)。 - 步骤指示器使用项目的圆形数字样式与轻量过渡;颜色使用主题色 `#5D87FF` 及状态色变量。 - 表单与按钮风格遵循项目统一尺寸、高度与交互(36px 高度,标准阴影与过渡)。 - 统一 CSS 变量与工具类: - 使用项目内的 CSS 变量(颜色、圆角、间距),移除局部硬编码样式。 - 采用现有 `art-card`、栅格与间距体系,保证一致性。 ### 3. 验证与测试 - 开发验证: - 在两处向导中执行完整流程(创建活动→创建期数→配置奖品),确认“下一步”不触发 `BatchDrawDialog`。 - 构建检查:`npm run build` 无 TS/构建错误。 - 回归验证: - 管理页列表的“模拟(批量抽奖)”按钮仍可正常打开 `BatchDrawDialog`。 - 列表页“创建活动”跳转到向导路由正常。 ## 交付物 - 修复后的向导逻辑代码(两处),隔离批量抽奖弹窗的条件渲染。 - 新增路由项 `ActivityWizard`。 - 去除非统一风格的样式,替换为项目全局风格实现。 - 构建与运行验证结果说明。 ## 验收标准 - 向导点击“下一步”始终进入下一步骤,不出现批量抽奖。 - 界面风格与全局统一(颜色、圆角、阴影、按钮、表单风格一致)。 - 列表页“创建活动”跳转向导正常;管理页“模拟”按钮打开批量抽奖正常。 - 构建通过,无新错误。 如确认以上方案,我将开始实施并同步每一步的修复与验证结果。