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:
IanShaw027
2026-01-05 01:00:00 +08:00
parent 06216aad53
commit eef12cb900
10 changed files with 826 additions and 265 deletions

View File

@@ -1,8 +1,26 @@
<template>
<AppLayout>
<TablePageLayout>
<template #actions><AccountTableActions :loading="loading" @refresh="load" @sync="showSync = true" @create="showCreate = true" /></template>
<template #filters><AccountTableFilters v-model:searchQuery="params.search" :filters="params" @change="reload" @update:searchQuery="debouncedReload" /></template>
<template #filters>
<div class="flex flex-wrap-reverse items-start justify-between gap-3">
<div class="min-w-0 flex-1">
<AccountTableFilters
v-model:searchQuery="params.search"
:filters="params"
@change="reload"
@update:searchQuery="debouncedReload"
/>
</div>
<div class="flex-shrink-0">
<AccountTableActions
:loading="loading"
@refresh="load"
@sync="showSync = true"
@create="showCreate = true"
/>
</div>
</div>
</template>
<template #table>
<AccountBulkActionsBar :selected-ids="selIds" @delete="handleBulkDelete" @edit="showBulkEdit = true" @clear="selIds = []" @select-page="selectPage" />
<DataTable :columns="cols" :data="accounts" :loading="loading">