aslan-admin/docs/UI橙色主题与交互顺序调整记录.md

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. 弹窗被遮罩层覆盖问题修复

发现类似以下统计类弹窗：

<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. 验证情况

本次样式主改造完成后，已执行生产构建校验：

$env:NODE_OPTIONS='--openssl-legacy-provider'; npm run build:prod

结果：

• 构建通过
• 存在若干项目原有 warning
• 这些 warning 主要为旧代码中的导出提示、样式顺序提示、Sass 旧 API 提示，不属于本次 UI 改造新增问题

说明：

• 后续对侧边栏折叠图标、统计弹窗挂载层级的修复属于局部样式修正，本记录未逐次重复构建

9. 变更边界说明

本次调整明确未涉及以下内容：

• 权限点
• 功能逻辑
• 接口行为
• 路由结构
• 后端字段定义

本次属于前端 UI 视觉统一、静态交互顺序整理与样式问题修复。

10. 建议后续项

如后续继续做 UI 收口，可优先补充以下内容：

• 继续逐页排查页面内写死的下拉、多选、单选顺序
• 统一所有统计类、详情类弹窗的 append-to-body 规范
• 继续检查折叠侧边栏下的图标、文字、tooltip 对齐一致性
• 对全站弹窗、抽屉、表格筛选区形成统一样式规范文档