refactor(frontend): 统一管理页面工具条布局和操作列样式
## 修复内容 ### 1. 统一操作列按钮样式 - 所有操作列按钮统一为"图标+文字"垂直排列样式 - UsersView: 编辑和更多按钮添加文字标签 - 与 AccountsView、GroupsView 等页面保持一致 ### 2. 统一顶部工具条布局(6个管理页面) - 使用 flex + justify-between 布局 - 左侧:模糊搜索框、筛选器(可多行排列) - 右侧:刷新、创建等操作按钮(靠右对齐) - 响应式:宽度不够时右侧按钮自动换行到上一行 ### 3. 修复的页面 - AccountsView: 合并 actions/filters 到单行工具条 - UsersView: 标准左右分栏,操作列添加文字 - GroupsView: 新增搜索框,左右分栏布局 - ProxiesView: 左右分栏,响应式布局 - SubscriptionsView: 新增用户模糊搜索,左右分栏 - UsageView: 补齐所有筛选项,左右分栏 ### 4. 新增功能 - GroupsView: 新增分组名称/描述模糊搜索 - SubscriptionsView: 新增用户模糊搜索功能 - UsageView: 补齐 API Key 搜索筛选 ### 5. 国际化 - 新增相关搜索框的 placeholder 文案(中英文) ## 技术细节 - 使用 flex-wrap-reverse 实现响应式换行 - 左侧筛选区使用 flex-wrap 支持多行 - 右侧按钮区使用 ml-auto + justify-end 保持右对齐 - 移动端使用 w-full sm:w-* 响应式宽度 ## 验证结果 - ✅ TypeScript 类型检查通过 - ✅ 所有页面布局统一 - ✅ 响应式布局正常工作
This commit is contained in:
@@ -760,6 +760,7 @@ export default {
|
||||
groups: {
|
||||
title: 'Group Management',
|
||||
description: 'Manage API key groups and rate multipliers',
|
||||
searchGroups: 'Search groups...',
|
||||
createGroup: 'Create Group',
|
||||
editGroup: 'Edit Group',
|
||||
deleteGroup: 'Delete Group',
|
||||
@@ -1657,6 +1658,7 @@ export default {
|
||||
description: 'View and manage all user usage records',
|
||||
userFilter: 'User',
|
||||
searchUserPlaceholder: 'Search user by email...',
|
||||
searchApiKeyPlaceholder: 'Search API key by name...',
|
||||
selectedUser: 'Selected',
|
||||
user: 'User',
|
||||
account: 'Account',
|
||||
|
||||
@@ -809,6 +809,7 @@ export default {
|
||||
groups: {
|
||||
title: '分组管理',
|
||||
description: '管理 API 密钥分组和费率配置',
|
||||
searchGroups: '搜索分组...',
|
||||
createGroup: '创建分组',
|
||||
editGroup: '编辑分组',
|
||||
deleteGroup: '删除分组',
|
||||
@@ -1803,6 +1804,7 @@ export default {
|
||||
description: '查看和管理所有用户的使用记录',
|
||||
userFilter: '用户',
|
||||
searchUserPlaceholder: '按邮箱搜索用户...',
|
||||
searchApiKeyPlaceholder: '按名称搜索 API 密钥...',
|
||||
selectedUser: '已选择',
|
||||
user: '用户',
|
||||
account: '账户',
|
||||
|
||||
Reference in New Issue
Block a user