GitLab

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

**解决方案**：

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

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

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

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

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

**技术要点**：
- 使用 Tailwind 响应式断点（md:, sm:）
- 触摸目标 ≥ 44px
- 完整支持深色模式
- 向后兼容，桌面端保持原有布局

- 显示完整余额精度，避免四舍五入导致的退款失败
- 添加"全部"按钮，一键填入完整余额
- 移除最小金额限制，支持任意正数金额

- 修复 AccountTableFilters.vue 中的 vue/no-mutating-props 错误，使用 emit 模式替代直接修改 props
- 修复 TypeScript 类型错误，支持 Select 组件的 null 值类型
- 为所有空 catch 块添加错误日志，提升代码可维护性和调试能力
- 涉及文件：AccountTableFilters.vue, UserAllowedGroupsModal.vue, UserApiKeysModal.vue, UserBalanceModal.vue, AccountsView.vue, UsageView.vue, DashboardView.vue, ProfileView.vue

🤖 Generated with [Claude Code](https://claude.com/claude-code

)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

- 用户允许分组：前端发送空数组而非 null 表示"允许全部"
- 账户代理：前端发送 0 而非 null 表示"无代理"
- 后端 UpdateAccount/BulkUpdate 正确处理 ProxyID=0 为清除代理

- 扩展 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 行代码
  - 提升代码可维护性和一致性
  - 统一图标样式和尺寸管理

- UserEditModal: 添加 email 必填和 concurrency 最小值校验
- UserAttributesConfigModal: 添加 key/name 必填和 options 非空校验
- GroupsView: 添加 name 必填校验
- ProxiesView: 添加 name/host 必填和 port 范围校验
- UserBalanceModal: 添加 amount 有效性和余额充足性校验
- RedeemView: 添加空兑换码错误提示
- i18n: 添加所有新增校验的中英文翻译

- 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.

- 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.