oadmin/xinghuoapi
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity
1,001 Commits 1 Branch 0 Tags
b9b4db3df5c5f14790289d9a6f0f5afa46b139c4
Commit Graph

4 Commits

Author SHA1 Message Date
IanShaw027
20c71acb3b fix(mobile): 优化移动端表格、操作栏和弹窗显示 
**问题描述**：
- 表格在移动端显示列过多，需要横向滚动，内容被截断
- 顶部操作栏按钮拥挤，占用过多空间
- 弹窗表单在小屏幕上布局不合理
- "更多"操作菜单定位错误，位置过高或超出屏幕
- 滚动页面时菜单不会自动关闭，与卡片分离

**解决方案**：

1. **DataTable 组件 - 移动端卡片视图**
   - 在 < 768px 时自动切换到卡片布局
   - 每个表格行渲染为独立卡片，所有字段清晰可见
   - 操作按钮在卡片底部，触摸目标足够大
   - 支持深色模式，包含加载和空状态
   - 自动应用于所有使用 DataTable 的管理页面

2. **UsersView 顶部操作栏优化**
   - 移动端：搜索框全宽 + 次要按钮显示为图标 + 创建按钮突出
   - 桌面端：保持原有布局（图标 + 文字）
   - 使用响应式 Tailwind classes

3. **UserCreateModal 弹窗优化**
   - 余额/并发数字段：移动端单列，桌面端双列
   - 弹窗边距：移动端 8px，桌面端 16px

4. **操作菜单定位修复**
   - UsersView: 移动端菜单居中对齐按钮，智能定位
   - AccountsView: 移动端菜单优先显示在按钮下方
   - 所有情况下确保菜单不超出屏幕边界
   - 添加滚动监听，滚动时自动关闭菜单

**影响范围**：
- 所有使用 DataTable 的管理页面（8 个页面）自动获得移动端卡片视图
- 用户管理和账号管理页面的操作菜单定位优化
- 创建用户弹窗的响应式布局优化

**技术要点**：
- 使用 Tailwind 响应式断点（md:, sm:）
- 触摸目标 ≥ 44px
- 完整支持深色模式
- 向后兼容，桌面端保持原有布局
 2026-01-15 10:08:14 +08:00
IanShaw027
4251a5a451 refactor(frontend): 完成所有组件的内联SVG统一替换为Icon组件 
- 扩展 Icon.vue 组件，新增 60+ 图标路径
  - 导航类: arrowRight, arrowLeft, arrowUp, arrowDown, chevronUp, externalLink
  - 状态类: checkCircle, xCircle, exclamationCircle, exclamationTriangle, infoCircle
  - 用户类: user, userCircle, userPlus, users
  - 文档类: document, clipboard, copy, inbox
  - 操作类: download, upload, filter, sort
  - 安全类: key, lock, shield
  - UI类: menu, calendar, home, terminal, gift, creditCard, mail
  - 数据类: chartBar, trendingUp, database, cube
  - 其他: bolt, sparkles, cloud, server, sun, moon, book 等

- 重构 56 个 Vue 组件，用 Icon 组件替换内联 SVG
  - 净减少约 2200 行代码
  - 提升代码可维护性和一致性
  - 统一图标样式和尺寸管理
 2026-01-05 20:22:48 +08:00
IanShaw027
99308ab4fb refactor(frontend): comprehensive architectural optimization and base component extraction 
- Standardized table loading logic with enhanced useTableLoader.
- Unified form submission patterns via new useForm composable.
- Extracted common UI components: SearchInput and StatusBadge.
- Centralized common interface definitions in types/index.ts.
- Achieved TypeScript zero-error status across refactored files.
- Greatly improved code reusability and maintainability.
 2026-01-04 22:29:19 +08:00
IanShaw027
e99063e12b refactor(frontend): comprehensive split of large view files into modular components 
- Split UsersView.vue into UserCreateModal, UserEditModal, UserApiKeysModal, etc.
- Split UsageView.vue into UsageStatsCards, UsageFilters, UsageTable, etc.
- Split DashboardView.vue into UserDashboardStats, UserDashboardCharts, etc.
- Split AccountsView.vue into AccountTableActions, AccountTableFilters, etc.
- Standardized TypeScript types across new components to resolve implicit 'any' and 'never[]' errors.
- Improved overall frontend maintainability and code clarity.
 2026-01-04 22:17:27 +08:00