fix(frontend): 优化账号筛选工具条布局并修复IP管理表头翻译

- 筛选组件保持固定宽度,不再自动拉伸填充
- 左右分布布局,中间自然留空
- 修复 IP 管理页面表头缺失的中文翻译
This commit is contained in:
ianshaw
2026-01-04 21:46:23 -08:00
parent e67dbbdb8a
commit c52c47e122
4 changed files with 32 additions and 34 deletions

View File

@@ -1,8 +1,8 @@
<template>
<div class="flex max-w-full flex-wrap justify-end gap-3">
<button @click="$emit('refresh')" :disabled="loading" class="btn btn-secondary flex-shrink-0"><svg :class="['h-5 w-5', loading ? 'animate-spin' : '']" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99" /></svg></button>
<button @click="$emit('sync')" class="btn btn-secondary flex-shrink-0">{{ t('admin.accounts.syncFromCrs') }}</button>
<button @click="$emit('create')" class="btn btn-primary flex-shrink-0">{{ t('admin.accounts.createAccount') }}</button>
<div class="flex flex-wrap items-center gap-3">
<button @click="$emit('refresh')" :disabled="loading" class="btn btn-secondary"><svg :class="['h-5 w-5', loading ? 'animate-spin' : '']" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99" /></svg></button>
<button @click="$emit('sync')" class="btn btn-secondary">{{ t('admin.accounts.syncFromCrs') }}</button>
<button @click="$emit('create')" class="btn btn-primary">{{ t('admin.accounts.createAccount') }}</button>
</div>
</template>

View File

@@ -1,18 +1,15 @@
<template>
<div class="flex flex-wrap items-start gap-3">
<div class="min-w-0 flex-1">
<SearchInput
:model-value="searchQuery"
:placeholder="t('admin.accounts.searchAccounts')"
@update:model-value="$emit('update:searchQuery', $event)"
@search="$emit('change')"
/>
</div>
<div class="flex flex-wrap items-center gap-3">
<Select v-model="filters.platform" class="w-40 flex-shrink-0" :options="pOpts" @change="$emit('change')" />
<Select v-model="filters.type" class="w-40 flex-shrink-0" :options="tOpts" @change="$emit('change')" />
<Select v-model="filters.status" class="w-40 flex-shrink-0" :options="sOpts" @change="$emit('change')" />
</div>
<div class="flex flex-wrap items-center gap-3">
<SearchInput
:model-value="searchQuery"
:placeholder="t('admin.accounts.searchAccounts')"
class="w-64"
@update:model-value="$emit('update:searchQuery', $event)"
@search="$emit('change')"
/>
<Select v-model="filters.platform" class="w-40" :options="pOpts" @change="$emit('change')" />
<Select v-model="filters.type" class="w-40" :options="tOpts" @change="$emit('change')" />
<Select v-model="filters.status" class="w-40" :options="sOpts" @change="$emit('change')" />
</div>
</template>