• IanShaw027's avatar
    refactor(frontend): 统一管理页面工具条布局和操作列样式 · eef12cb9
    IanShaw027 authored
    ## 修复内容
    
    ### 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 类型检查通过
    -  所有页面布局统一
    -  响应式布局正常工作
    eef12cb9
SubscriptionsView.vue 36.5 KB