mokee/mokeegateway

Fork 0

Files

zg c4023c1623 初始化

2026-07-15 16:13:27 +08:00

4.3 KiB

Raw Permalink Blame History

name, description, metadata

name

description

metadata

session-20260615-1

2026-06-15 第1次会话 — 前端UI统一优化：分页/布局/CSS变量/下载修复，12文件改动

type	date	sessionNumber	startTime
session	2026-06-15	1	2026-06-15

2026-06-15 第1次会话

会话摘要

全面统一了前端 11 个列表页面的 UI 风格。核心工作：提取 4 个公共 CSS 类到 global.css，修复 3 个不规范的页面（EmailList、OpenTokenLogList、FileList），清理 7 个标准页面的重复样式。

关键操作

1. global.css 添加公共布局类

做了什么: 在 global.css 新增 .page-wrapper、.card-header-title、.toolbar、.pagination-wrapper 四个全局类，统一所有列表页的布局结构
原因: 8+ 个文件各自重复定义相同的 CSS 规则，维护困难且容易产生不一致
结果: 一处定义，处处使用；同时统一了 card-header-title 的 color 为 var(--text-primary)（之前大部分页面用硬编码 #303133）

2. EmailList.vue 全面翻新

做了什么: 根类名 email-page→page-wrapper，分页改为标准配置（background + 完整 layout），新增 v-if/v-else 移动端卡片列表，搜索卡片加 search-card 类，操作栏简化，删除了大量冗余 CSS
原因: 分页只有 prev/pager/next 且 small 模式，无移动端适配，结构与其他页面完全不同
结果: 与其他列表页样式完全统一

3. OpenTokenLogList.vue 统一

做了什么: 根类名 tokenlog-page→page-wrapper，page-footer→pagination-wrapper，分页改为标准配置，el-card 包裹表格
原因: 分页居中且不完整，容器类名不标准
结果: 与其他列表页样式完全统一

4. FileList.vue 结构调整

做了什么: 搜索卡片加 search-card 类，上传按钮从搜索卡片内移出到独立 toolbar，去掉分页 v-if="total>0"，删除重复 CSS 规则
原因: 搜索+操作栏混在同一卡片不符合标准模式
结果: 结构对齐标准模式

5. 7 个标准页面清理

做了什么: UserList, RoleList, SystemList, ApiList, LoginLogList, OperationLogList, DictList 删除已全局化的 4 个 CSS 规则
额外: UserList 还删除了 .search-card scoped 规则（全局 el-card 规则已覆盖）；DictList 保留 .toolbar { gap: 8px } 特有样式
结果: 每个文件平均减少 ~20 行冗余 CSS

6. 文件对象存储下载修复

做了什么: 将 downloadFile() 从 fetch blob → createObjectURL → <a> click 改为 隐藏 iframe 直接加载下载 URL
原因: 旧方式先把文件全量下载到浏览器内存，等全部下完才弹保存对话框，大文件体验极差。新方式浏览器直接接管下载，立即弹出保存对话框，后台下载有进度条
结果: FileList.vue 的 downloadFile 函数重写，用户体验显著提升
文件: mokee-gateway-web/src/views/admin/file/FileList.vue

涉及文件清单

文件	改动类型
`src/styles/global.css`	新增 4 个公共类 + 移动端适配
`src/views/admin/email/EmailList.vue`	模板+脚本+样式全面翻新
`src/views/admin/log/OpenTokenLogList.vue`	模板+样式翻新
`src/views/admin/file/FileList.vue`	结构调整 + 样式清理
`src/views/admin/user/UserList.vue`	样式清理
`src/views/admin/role/RoleList.vue`	样式清理
`src/views/admin/system/SystemList.vue`	样式清理
`src/views/admin/system/ApiList.vue`	样式清理
`src/views/admin/log/LoginLogList.vue`	样式清理
`src/views/admin/log/OperationLogList.vue`	样式清理
`src/views/admin/dict/DictList.vue`	样式清理

统一后的分页组件标准

<el-pagination
  v-model:current-page="page"
  v-model:page-size="pageSize"
  :total="total"
  :page-sizes="[10, 20, 50, 100]"
  layout="total, sizes, prev, pager, next, jumper"
  background
  @current-change="fetchData"
  @size-change="fetchData"
/>

统一后的页面结构标准

.page-wrapper
  ├── el-card.search-card → 搜索条件
  ├── div.toolbar → 操作按钮
  └── el-card → 表格(v-if=!isMobile) + 卡片(v-else) + 分页

待处理

启动 dev server 手动验证所有页面的分页和移动端效果
如有需要，部署到测试环境验证

4.3 KiB Raw Permalink Blame History Unescape Escape