329 lines
10 KiB
Markdown
329 lines
10 KiB
Markdown
# UI 橙色主题与交互顺序调整记录
|
||
|
||
## 1. 变更背景
|
||
|
||
本次调整目标：
|
||
|
||
- 将项目整体视觉风格从原有偏冷色风格调整为偏橙色风格，主色以 `#FF9326`、`#FEB219` 为核心。
|
||
- 取消暗夜模式，仅保留常规亮色展示。
|
||
- 允许调整按钮样式、圆角、阴影、表单项顺序、搜索项顺序、静态多选/下拉选项顺序。
|
||
- 明确不调整权限点、业务逻辑、接口行为、路由配置。
|
||
|
||
本次所有改动均以 UI 层和静态展示层为边界。
|
||
|
||
## 2. 整体视觉风格调整
|
||
|
||
### 2.1 主色与基础风格
|
||
|
||
已将项目主视觉切换为橙色系，重点调整包括：
|
||
|
||
- 主按钮、默认按钮、文本按钮颜色统一为橙色主题。
|
||
- 输入框、选择器、日期组件的聚焦态边框和阴影改为橙色高亮。
|
||
- 弹窗、抽屉、卡片、表格等容器统一增加暖色边框、圆角和阴影。
|
||
- 顶栏、侧边栏、Logo 区域统一为暖色风格。
|
||
|
||
重点样式文件：
|
||
|
||
- `src/styles/element-ui.scss`
|
||
- `src/styles/variables.scss`
|
||
- `src/styles/index.scss`
|
||
- `src/styles/sidebar.scss`
|
||
- `src/styles/element-variables.scss`
|
||
|
||
### 2.2 按钮与弹窗按钮视觉顺序
|
||
|
||
已统一主按钮视觉优先级，使确认类按钮更突出。
|
||
其中弹窗/抽屉底部操作区通过样式顺序优化为主按钮优先展示，但未改动原始点击逻辑。
|
||
|
||
## 3. 暗夜模式取消
|
||
|
||
已取消暗夜模式入口及暗夜切换能力，处理方式如下：
|
||
|
||
- `src/utils/theme.js`
|
||
- `getTheme()` 固定返回 `normal`
|
||
- `setTheme()` 固定写入 `normal`
|
||
- `checkSwitchTheme()` 固定清除根节点暗色类名
|
||
- `src/layout/components/index.js`
|
||
- 导航栏导出切换为 `NavbarLight.vue`
|
||
- `src/layout/components/NavbarLight.vue`
|
||
- 新增简化版导航栏
|
||
- 移除主题切换相关入口，仅保留常用功能
|
||
|
||
说明：
|
||
|
||
- 原有权限逻辑、导航逻辑未修改。
|
||
- 该处理方式属于 UI 层收口，不影响业务行为。
|
||
|
||
## 4. 搜索区与表单项顺序调整
|
||
|
||
针对页面内搜索区、过滤区、表单项的展示顺序做了纯 UI 层重排，主要通过模板顺序和样式 `order` 控制完成，不改查询参数结构和业务逻辑。
|
||
|
||
已调整的典型页面：
|
||
|
||
- `src/views/user/user-table/index.vue`
|
||
- `src/views/user/user-table-role/index.vue`
|
||
- `src/views/user/freight/index.vue`
|
||
- `src/views/version/app/index.vue`
|
||
|
||
调整方向包括：
|
||
|
||
- 系统、国家、账号、设备、状态、性别、注册来源、来源平台、日期区间等筛选项顺序重新整理。
|
||
- 搜索按钮、概览按钮、条件展开开关等操作项顺序重新排列。
|
||
- 保证搜索区主流程更靠前，次级条件靠后。
|
||
|
||
## 5. 静态选项顺序调整
|
||
|
||
仅对前端文件内写死的选项顺序进行了整理；接口返回的列表未做改动。
|
||
|
||
### 5.1 公共输入组件
|
||
|
||
- `src/components/data/AccountInput/index.vue`
|
||
- 类型顺序由原来的“长 ID / 短 ID”调整为“短 ID / 长 ID”
|
||
- `src/components/data/SearchRoomInput/index.vue`
|
||
- 类型顺序由原来的“长 ID / 短 ID”调整为“短 ID / 长 ID”
|
||
|
||
### 5.2 静态常量
|
||
|
||
- `src/constant/origin.js`
|
||
- 注册来源顺序调整
|
||
- 来源平台顺序调整
|
||
- App 平台顺序调整
|
||
- `src/constant/type.js`
|
||
- `platformOrigins` 平台顺序调整为 Android 优先
|
||
|
||
说明：
|
||
|
||
- 仅变更静态数组的前端展示顺序。
|
||
- 未变更任何接口字段含义或后端约定。
|
||
|
||
## 6. 侧边栏折叠态图标居中修复
|
||
|
||
在橙色样式改造后，发现侧边栏收起状态下图标未居中。
|
||
原因是旧实现依赖固定 `margin-left` 偏移，无法适配新的侧边栏宽度、内边距和圆角布局。
|
||
|
||
处理方式：
|
||
|
||
- 修改 `src/styles/sidebar.scss`
|
||
- 将折叠菜单项和子菜单标题改为 `flex` 居中
|
||
- 清除折叠态图标的额外左边距
|
||
|
||
修复结果：
|
||
|
||
- 侧边栏收起后图标可在中轴线上正常居中显示
|
||
- 不影响菜单高亮、路由跳转和交互逻辑
|
||
|
||
## 7. 弹窗被遮罩层覆盖问题修复
|
||
|
||
发现类似以下统计类弹窗：
|
||
|
||
```vue
|
||
<user-registration-overview-charts-dialog
|
||
v-if="UserRegistrationOverviewChartsDialogVisible"
|
||
@close="UserRegistrationOverviewChartsDialogVisible = false"
|
||
/>
|
||
```
|
||
|
||
存在“弹窗本体在遮罩层下方、展示不全且无法点击”的问题。
|
||
|
||
### 7.1 原因
|
||
|
||
- 遮罩层默认挂载到 `body`
|
||
- 弹窗本体未挂载到 `body`
|
||
- 页面内容容器存在局部层叠上下文和 `overflow: hidden`
|
||
- 最终导致遮罩层在外层，而弹窗仍在页面容器内部，被裁切或压住
|
||
|
||
### 7.2 修复方式
|
||
|
||
已为以下同类弹窗补充：
|
||
|
||
- `:modal-append-to-body="true"`
|
||
- `:append-to-body="true"`
|
||
|
||
已处理文件：
|
||
|
||
- `src/components/data/UserRegistrationOverviewCharts/dialog.vue`
|
||
- `src/components/data/PropsSalesOverviewCharts/dialog.vue`
|
||
- `src/views/user/bank-balance/table/index.vue`
|
||
- `src/views/user/bank-balance/table/form-edit.vue`
|
||
- `src/views/user/bank-balance/table/running-water.vue`
|
||
|
||
### 7.2.1 `bank-balance/table` 页面补充修复
|
||
|
||
后续排查发现 `views/user/bank-balance/table` 页面仍存在同类问题。
|
||
该页面内不仅有列表页内联弹窗，还包含开户弹窗、流水弹窗、导入弹窗等多个 `el-dialog`，其中部分弹窗未挂载到 `body`，因此在页面容器和遮罩层共同作用下，依旧会出现弹窗被压在遮罩层下方、无法完整展示和点击的问题。
|
||
|
||
本次补充修复范围：
|
||
|
||
- 发送/扣除弹窗
|
||
- 转账弹窗
|
||
- 导入数据弹窗
|
||
- 开户弹窗 `form-edit.vue`
|
||
- 流水明细弹窗 `running-water.vue`
|
||
|
||
处理方式保持一致：
|
||
|
||
- 为相关 `el-dialog` 统一补充 `:modal-append-to-body="true"`
|
||
- 为相关 `el-dialog` 统一补充 `:append-to-body="true"`
|
||
|
||
说明：
|
||
|
||
- 本次修复仅调整弹窗挂载层级
|
||
- 不修改弹窗内表单逻辑、提交流程、接口调用和页面路由
|
||
|
||
### 7.3 修复结果
|
||
|
||
- 弹窗与遮罩层处于同一挂载层级
|
||
- 弹窗可完整显示并可正常交互
|
||
- 不影响弹窗内部业务逻辑
|
||
|
||
## 8. 验证情况
|
||
|
||
本次样式主改造完成后，已执行生产构建校验：
|
||
|
||
```powershell
|
||
$env:NODE_OPTIONS='--openssl-legacy-provider'; npm run build:prod
|
||
```
|
||
|
||
结果：
|
||
|
||
- 构建通过
|
||
- 存在若干项目原有 warning
|
||
- 这些 warning 主要为旧代码中的导出提示、样式顺序提示、Sass 旧 API 提示，不属于本次 UI 改造新增问题
|
||
|
||
说明：
|
||
|
||
- 后续对侧边栏折叠图标、统计弹窗挂载层级的修复属于局部样式修正，本记录未逐次重复构建
|
||
|
||
## 9. 变更边界说明
|
||
|
||
本次调整明确未涉及以下内容：
|
||
|
||
- 权限点
|
||
- 功能逻辑
|
||
- 接口行为
|
||
- 路由结构
|
||
- 后端字段定义
|
||
|
||
本次属于前端 UI 视觉统一、静态交互顺序整理与样式问题修复。
|
||
|
||
## 10. 建议后续项
|
||
|
||
如后续继续做 UI 收口，可优先补充以下内容：
|
||
|
||
- 继续逐页排查页面内写死的下拉、多选、单选顺序
|
||
- 统一所有统计类、详情类弹窗的 `append-to-body` 规范
|
||
- 继续检查折叠侧边栏下的图标、文字、tooltip 对齐一致性
|
||
- 对全站弹窗、抽屉、表格筛选区形成统一样式规范文档
|
||
|
||
## 11. 全站弹窗挂载层级复扫与批量修复
|
||
|
||
针对“弹窗被遮罩层覆盖、无法点击”的问题，本次对 `src` 目录下的页面组件和公共业务组件进行了全量复扫，重点检查 `el-dialog` 与 `el-drawer` 是否缺少以下配置：
|
||
|
||
- `:modal-append-to-body="true"`
|
||
- `:append-to-body="true"`
|
||
|
||
### 11.1 处理策略
|
||
|
||
本次采用统一规则处理：
|
||
|
||
- 已存在相关配置的组件保持原样，不重复覆盖
|
||
- 缺少 `modal-append-to-body` 的组件补齐该属性
|
||
- 缺少 `append-to-body` 的组件补齐该属性
|
||
- 页面内直接定义的确认弹窗、详情弹窗、编辑弹窗，以及操作菜单拉起的子组件弹窗，统一纳入处理范围
|
||
|
||
### 11.2 处理结果
|
||
|
||
本轮已对全站缺失相关挂载配置的弹窗/抽屉完成批量补齐，覆盖范围包括但不限于：
|
||
|
||
- 用户模块
|
||
- 团队模块
|
||
- 房间模块
|
||
- 游戏模块
|
||
- 系统配置模块
|
||
- 支付与产品配置模块
|
||
- 动态、反馈、日志、统计等页面
|
||
- 公共数据组件中的表单弹窗、详情弹窗、记录弹窗
|
||
|
||
### 11.3 复扫结论
|
||
|
||
批量修复后，已再次对仓库内 `el-dialog` 与 `el-drawer` 做缺失项扫描，当前未再发现这类“未挂载到 body 导致遮罩层层级异常”的遗漏项。
|
||
|
||
### 11.4 验证情况
|
||
|
||
本轮批量修复后已重新执行生产构建：
|
||
|
||
```powershell
|
||
$env:NODE_OPTIONS='--openssl-legacy-provider'; npm run build:prod
|
||
```
|
||
|
||
结果：
|
||
|
||
- 构建通过
|
||
- 仍存在项目原有 warning
|
||
- 本轮弹窗挂载层级修复未引入新的构建错误
|
||
## 12. 批量弹窗修复后的重复属性问题记录
|
||
|
||
### 12.1 问题现象
|
||
|
||
在执行 `npm run build:atu-prod` 时出现模板编译错误：
|
||
|
||
```text
|
||
duplicate attribute: :modal-append-to-body
|
||
duplicate attribute: :append-to-body
|
||
```
|
||
|
||
报错文件：
|
||
|
||
- `src/views/dashboard/components/user-daily-currency-gold-top/index.vue`
|
||
|
||
### 12.2 原因
|
||
|
||
上一轮批量补齐弹窗/抽屉挂载属性时，少数原本已经存在以下配置的组件被重复插入了一组属性：
|
||
|
||
- `:modal-append-to-body="true"`
|
||
- `:append-to-body="true"`
|
||
|
||
Vue 模板不允许同一个标签上出现重复属性，因此构建阶段直接报错。
|
||
|
||
### 12.3 修复范围
|
||
|
||
全仓扫描后发现重复项仅存在于以下文件：
|
||
|
||
- `src/views/dashboard/components/user-daily-currency-gold-top/index.vue`
|
||
- `src/layout/components/Navbar.vue`
|
||
|
||
处理方式：
|
||
|
||
- 保留原本已有的一组 `:modal-append-to-body="true"`
|
||
- 保留原本已有的一组 `:append-to-body="true"`
|
||
- 删除重复插入的第二组属性
|
||
|
||
### 12.4 复扫结果
|
||
|
||
修复后重新执行两类扫描：
|
||
|
||
- 检查重复 `modal-append-to-body` / `append-to-body`
|
||
- 检查缺失 `modal-append-to-body` / `append-to-body`
|
||
|
||
结果：
|
||
|
||
- 未再发现重复属性
|
||
- 未再发现缺失配置
|
||
|
||
### 12.5 构建验证
|
||
|
||
已按报错对应命令重新验证：
|
||
|
||
```powershell
|
||
$env:NODE_OPTIONS='--openssl-legacy-provider'; npm run build:atu-prod
|
||
```
|
||
|
||
结果：
|
||
|
||
- 构建通过
|
||
- 未再出现 duplicate attribute 模板编译错误
|
||
- 仍存在项目原有 lint warning / eslint warning，与本次重复属性修复无关
|
||
|
||
### 12.6 后续注意事项
|
||
|
||
后续如继续做批量模板属性处理，需要先解析单个 `el-dialog` / `el-drawer` 标签块内是否已经存在目标属性，避免按文件级别判断导致重复插入。 |