feat(ui): refine fleet search/filter toolbar with status chips
Adopt Portainer/Beszel-style fleet controls: prominent search, status facet chips with counts, active filter chips, result count, and primary-row sort/select. Keep advanced filters collapsed for secondary facets. Tests and production dist rebuild for gateway 8788.
This commit is contained in:
chick
@@ -53,6 +53,30 @@ describe('FleetPage card navigation', () => {
|
||||
});
|
||||
});
|
||||
|
||||
describe('FleetPage search and filter toolbar', () => {
|
||||
it('filters by status chips and clears active search conditions', () => {
|
||||
render(<FleetPage initialData={snapshot} />);
|
||||
|
||||
const search = screen.getByRole('search', { name: '实例搜索与筛选' });
|
||||
expect(within(search).getByPlaceholderText('搜索名称、ID、标签、源地址…')).toBeTruthy();
|
||||
expect(within(search).getByText(/显示/).textContent).toMatch(/显示\s*1\s*\/\s*1/);
|
||||
|
||||
fireEvent.click(within(search).getByRole('button', { name: /离线/ }));
|
||||
expect(screen.queryByRole('article', { name: 'Alpha modem 实例概览' })).toBeNull();
|
||||
expect(within(search).getByText(/显示/).textContent).toMatch(/显示\s*0\s*\/\s*1/);
|
||||
expect(within(search).getByRole('button', { name: /移除筛选 状态：离线/ })).toBeTruthy();
|
||||
|
||||
fireEvent.change(within(search).getByPlaceholderText('搜索名称、ID、标签、源地址…'), {
|
||||
target: { value: 'Alpha' },
|
||||
});
|
||||
expect(within(search).getByRole('button', { name: /移除筛选 搜索：Alpha/ })).toBeTruthy();
|
||||
|
||||
fireEvent.click(within(search).getByRole('button', { name: '清除全部筛选' }));
|
||||
expect(screen.getByRole('article', { name: 'Alpha modem 实例概览' })).toBeTruthy();
|
||||
expect(within(search).getByText(/显示/).textContent).toMatch(/显示\s*1\s*\/\s*1/);
|
||||
});
|
||||
});
|
||||
|
||||
describe('FleetPage batch and restart actions', () => {
|
||||
it('exposes card restart controls and batch restart entry for selected instances', async () => {
|
||||
const prepare = vi.fn(async () => ({
|
||||
|
||||
@@ -2,6 +2,7 @@ import { useEffect, useMemo, useRef, useState } from 'react';
|
||||
|
||||
import {
|
||||
buildFleetTableViewModel,
|
||||
fleetStatusKind,
|
||||
type FleetAuthFilter,
|
||||
type FleetFilter,
|
||||
type FleetInstance,
|
||||
@@ -252,6 +253,98 @@ export function FleetPage({
|
||||
};
|
||||
}, [snapshot]);
|
||||
|
||||
const statusFacetCounts = useMemo(() => {
|
||||
const counts: Record<FleetFilter, number> = {
|
||||
all: snapshot?.instances.length ?? 0,
|
||||
online: 0,
|
||||
auth: 0,
|
||||
offline: 0,
|
||||
unknown: 0,
|
||||
};
|
||||
for (const instance of snapshot?.instances ?? []) {
|
||||
const kind = fleetStatusKind(snapshot?.statuses.get(instance.id));
|
||||
counts[kind] += 1;
|
||||
}
|
||||
return counts;
|
||||
}, [snapshot]);
|
||||
|
||||
const activeFilterChips = useMemo(() => {
|
||||
const chips: Array<{ key: string; label: string; onClear: () => void }> = [];
|
||||
const trimmedQuery = query.trim();
|
||||
if (trimmedQuery) {
|
||||
chips.push({
|
||||
key: 'query',
|
||||
label: `搜索：${trimmedQuery}`,
|
||||
onClear: () => {
|
||||
setQuery('');
|
||||
setPage(1);
|
||||
},
|
||||
});
|
||||
}
|
||||
if (filter !== 'all') {
|
||||
chips.push({
|
||||
key: 'status',
|
||||
label: `状态：${STATUS_LABELS[filter] ?? filter}`,
|
||||
onClear: () => {
|
||||
setFilter('all');
|
||||
setPage(1);
|
||||
},
|
||||
});
|
||||
}
|
||||
if (auth !== 'all') {
|
||||
const authLabel =
|
||||
auth === 'authenticated' ? '已认证' : auth === 'required' ? '需要认证' : '未知';
|
||||
chips.push({
|
||||
key: 'auth',
|
||||
label: `认证：${authLabel}`,
|
||||
onClear: () => {
|
||||
setAuth('all');
|
||||
setPage(1);
|
||||
},
|
||||
});
|
||||
}
|
||||
if (capability) {
|
||||
chips.push({
|
||||
key: 'capability',
|
||||
label: `能力：${capabilityLabel(capability)}`,
|
||||
onClear: () => {
|
||||
setCapability('');
|
||||
setPage(1);
|
||||
},
|
||||
});
|
||||
}
|
||||
if (version) {
|
||||
chips.push({
|
||||
key: 'version',
|
||||
label: `版本：${version}`,
|
||||
onClear: () => {
|
||||
setVersion('');
|
||||
setPage(1);
|
||||
},
|
||||
});
|
||||
}
|
||||
if (tag) {
|
||||
chips.push({
|
||||
key: 'tag',
|
||||
label: `标签：${tag}`,
|
||||
onClear: () => {
|
||||
setTag('');
|
||||
setPage(1);
|
||||
},
|
||||
});
|
||||
}
|
||||
return chips;
|
||||
}, [auth, capability, filter, query, tag, version]);
|
||||
|
||||
const advancedFilterCount = useMemo(
|
||||
() =>
|
||||
(auth !== 'all' ? 1 : 0) +
|
||||
(capability ? 1 : 0) +
|
||||
(version ? 1 : 0) +
|
||||
(tag ? 1 : 0),
|
||||
[auth, capability, tag, version],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (page !== model.page) setPage(model.page);
|
||||
}, [model.page, page]);
|
||||
@@ -260,6 +353,16 @@ export function FleetPage({
|
||||
action();
|
||||
setPage(1);
|
||||
}
|
||||
|
||||
function clearAllFilters(): void {
|
||||
setQuery('');
|
||||
setFilter('all');
|
||||
setAuth('all');
|
||||
setCapability('');
|
||||
setVersion('');
|
||||
setTag('');
|
||||
setPage(1);
|
||||
}
|
||||
function toggleOne(id: string, checked: boolean): void {
|
||||
setSelectedIds((current) => {
|
||||
const next = new Set(current);
|
||||
@@ -562,35 +665,130 @@ export function FleetPage({
|
||||
) : null}
|
||||
</div>
|
||||
) : null}
|
||||
<div className="fleet-toolbar">
|
||||
<div className="fleet-toolbar-primary">
|
||||
<label>
|
||||
<span>搜索实例</span>
|
||||
<div className="fleet-toolbar" role="search" aria-label="实例搜索与筛选">
|
||||
<div className="fleet-search-row">
|
||||
<label className="fleet-search-field">
|
||||
<span className="visually-hidden">搜索实例</span>
|
||||
<span className="fleet-search-glyph" aria-hidden="true">
|
||||
⌕
|
||||
</span>
|
||||
<input
|
||||
type="search"
|
||||
value={query}
|
||||
onChange={(event) => resetPage(() => setQuery(event.currentTarget.value))}
|
||||
placeholder="名称、ID、标签、源地址…"
|
||||
placeholder="搜索名称、ID、标签、源地址…"
|
||||
autoComplete="off"
|
||||
spellCheck={false}
|
||||
/>
|
||||
</label>
|
||||
<label>
|
||||
<span>状态</span>
|
||||
<select
|
||||
value={filter}
|
||||
onChange={(event) =>
|
||||
resetPage(() => setFilter(event.currentTarget.value as FleetFilter))
|
||||
}
|
||||
{query ? (
|
||||
<button
|
||||
type="button"
|
||||
className="fleet-search-clear"
|
||||
aria-label="清除搜索"
|
||||
onClick={() => resetPage(() => setQuery(''))}
|
||||
>
|
||||
<option value="all">全部状态</option>
|
||||
<option value="online">在线</option>
|
||||
<option value="auth">需要认证</option>
|
||||
<option value="offline">离线</option>
|
||||
<option value="unknown">未知</option>
|
||||
</select>
|
||||
清除
|
||||
</button>
|
||||
) : null}
|
||||
</label>
|
||||
</div>
|
||||
<div className="fleet-status-chips" role="group" aria-label="按状态筛选">
|
||||
{(
|
||||
[
|
||||
['all', '全部'],
|
||||
['online', '在线'],
|
||||
['auth', '需认证'],
|
||||
['offline', '离线'],
|
||||
['unknown', '未知'],
|
||||
] as const
|
||||
).map(([value, label]) => (
|
||||
<button
|
||||
key={value}
|
||||
type="button"
|
||||
className={`fleet-status-chip${filter === value ? ' is-active' : ''}`}
|
||||
aria-pressed={filter === value}
|
||||
onClick={() => resetPage(() => setFilter(value))}
|
||||
>
|
||||
<span>{label}</span>
|
||||
<strong>{statusFacetCounts[value]}</strong>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<div className="fleet-toolbar-meta">
|
||||
<p className="fleet-result-count" aria-live="polite">
|
||||
显示 <strong>{model.filteredCount}</strong> / {model.totalCount}
|
||||
{model.pageCount > 1 ? ` · 第 ${model.page}/${model.pageCount} 页` : null}
|
||||
</p>
|
||||
<div className="fleet-toolbar-controls">
|
||||
<label className="fleet-sort-field">
|
||||
<span className="visually-hidden">排序</span>
|
||||
<select
|
||||
aria-label="排序"
|
||||
value={`${sort.column}:${sort.direction}`}
|
||||
onChange={(event) => {
|
||||
const [column, direction] = event.currentTarget.value.split(':') as [
|
||||
FleetSortColumn,
|
||||
SortDirection,
|
||||
];
|
||||
resetPage(() => setSort({ column, direction }));
|
||||
}}
|
||||
>
|
||||
{(Object.keys(SORT_COLUMN_LABELS) as FleetSortColumn[]).flatMap((column) => [
|
||||
<option key={`${column}:asc`} value={`${column}:asc`}>
|
||||
{SORT_COLUMN_LABELS[column]} · 升序
|
||||
</option>,
|
||||
<option key={`${column}:desc`} value={`${column}:desc`}>
|
||||
{SORT_COLUMN_LABELS[column]} · 降序
|
||||
</option>,
|
||||
])}
|
||||
</select>
|
||||
</label>
|
||||
<div className="fleet-select-all" role="group" aria-label="本页选择">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => toggleVisible(true)}
|
||||
disabled={model.rows.length === 0}
|
||||
>
|
||||
全选本页
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => toggleVisible(false)}
|
||||
disabled={model.selectedIds.length === 0}
|
||||
>
|
||||
清空选择
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{activeFilterChips.length > 0 ? (
|
||||
<div className="fleet-active-filters" aria-label="当前筛选条件">
|
||||
{activeFilterChips.map((chip) => (
|
||||
<button
|
||||
key={chip.key}
|
||||
type="button"
|
||||
className="fleet-active-chip"
|
||||
onClick={chip.onClear}
|
||||
aria-label={`移除筛选 ${chip.label}`}
|
||||
>
|
||||
<span>{chip.label}</span>
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
))}
|
||||
<button type="button" className="fleet-clear-filters" onClick={clearAllFilters}>
|
||||
清除全部筛选
|
||||
</button>
|
||||
</div>
|
||||
) : null}
|
||||
<details className="fleet-advanced-filters">
|
||||
<summary>更多筛选</summary>
|
||||
<summary>
|
||||
更多筛选
|
||||
{advancedFilterCount > 0 ? (
|
||||
<span className="fleet-advanced-count" aria-label={`已启用 ${advancedFilterCount} 项`}>
|
||||
{advancedFilterCount}
|
||||
</span>
|
||||
) : null}
|
||||
</summary>
|
||||
<div className="fleet-advanced-filter-grid">
|
||||
<label>
|
||||
<span>认证</span>
|
||||
@@ -616,45 +814,6 @@ export function FleetPage({
|
||||
)}
|
||||
{selectFilter('版本', version, setVersion, model.facets.versions, '全部版本')}
|
||||
{selectFilter('标签', tag, setTag, model.facets.tags, '全部标签')}
|
||||
<label>
|
||||
<span>排序</span>
|
||||
<select
|
||||
aria-label="排序"
|
||||
value={`${sort.column}:${sort.direction}`}
|
||||
onChange={(event) => {
|
||||
const [column, direction] = event.currentTarget.value.split(':') as [
|
||||
FleetSortColumn,
|
||||
SortDirection,
|
||||
];
|
||||
resetPage(() => setSort({ column, direction }));
|
||||
}}
|
||||
>
|
||||
{(Object.keys(SORT_COLUMN_LABELS) as FleetSortColumn[]).flatMap((column) => [
|
||||
<option key={`${column}:asc`} value={`${column}:asc`}>
|
||||
{SORT_COLUMN_LABELS[column]} · 升序
|
||||
</option>,
|
||||
<option key={`${column}:desc`} value={`${column}:desc`}>
|
||||
{SORT_COLUMN_LABELS[column]} · 降序
|
||||
</option>,
|
||||
])}
|
||||
</select>
|
||||
</label>
|
||||
<div className="fleet-select-all">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => toggleVisible(true)}
|
||||
disabled={model.rows.length === 0}
|
||||
>
|
||||
全选本页
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => toggleVisible(false)}
|
||||
disabled={model.selectedIds.length === 0}
|
||||
>
|
||||
清空选择
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
|
||||
+226
-24
@@ -585,35 +585,216 @@ small {
|
||||
min-width: min(100%, 15rem);
|
||||
}
|
||||
.fleet-toolbar {
|
||||
display: block;
|
||||
}
|
||||
.fleet-toolbar-primary {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(12rem, 1fr) minmax(9rem, 12rem);
|
||||
align-items: end;
|
||||
gap: 0.65rem;
|
||||
gap: 0.75rem;
|
||||
padding: 0.9rem 1rem 1rem;
|
||||
border: 1px solid color-mix(in srgb, var(--border) 88%, #fff);
|
||||
box-shadow: 0 8px 24px rgba(121, 79, 39, 0.06);
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255, 253, 245, 0.96), rgba(247, 243, 223, 0.92));
|
||||
}
|
||||
.fleet-toolbar-primary label:first-child {
|
||||
.visually-hidden {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
}
|
||||
.fleet-search-row {
|
||||
min-width: 0;
|
||||
}
|
||||
.fleet-search-field {
|
||||
position: relative;
|
||||
display: block;
|
||||
min-width: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.fleet-search-field input[type='search'] {
|
||||
width: 100%;
|
||||
min-height: 3rem;
|
||||
padding: 0.65rem 4.5rem 0.65rem 2.6rem;
|
||||
border-radius: 999px;
|
||||
border: 2px solid color-mix(in srgb, var(--border) 70%, #b7a88a);
|
||||
background: #fffdf8;
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
|
||||
transition:
|
||||
border-color 140ms var(--ease-out),
|
||||
box-shadow 140ms var(--ease-out);
|
||||
}
|
||||
.fleet-search-field input[type='search']::-webkit-search-cancel-button {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
.fleet-search-field input[type='search']:focus {
|
||||
border-color: color-mix(in srgb, var(--mint) 55%, #b7a88a);
|
||||
box-shadow:
|
||||
0 0 0 4px rgba(25, 200, 185, 0.14),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
.fleet-search-glyph {
|
||||
position: absolute;
|
||||
left: 0.95rem;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: var(--muted);
|
||||
font-size: 1.05rem;
|
||||
font-weight: 700;
|
||||
pointer-events: none;
|
||||
}
|
||||
.fleet-search-clear {
|
||||
position: absolute;
|
||||
right: 0.4rem;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
min-height: 2.15rem;
|
||||
padding: 0.25rem 0.75rem;
|
||||
border-width: 1px;
|
||||
border-color: transparent;
|
||||
background: rgba(121, 79, 39, 0.08);
|
||||
color: var(--brown);
|
||||
font-size: 0.82rem;
|
||||
}
|
||||
.fleet-status-chips {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.45rem;
|
||||
}
|
||||
.fleet-status-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.45rem;
|
||||
min-height: 2.35rem;
|
||||
padding: 0.3rem 0.75rem;
|
||||
border-radius: 999px;
|
||||
border: 1px solid color-mix(in srgb, var(--border) 80%, #fff);
|
||||
background: rgba(255, 253, 245, 0.9);
|
||||
color: var(--brown);
|
||||
font-weight: 700;
|
||||
transition:
|
||||
transform 120ms var(--ease-out),
|
||||
background 140ms var(--ease-out),
|
||||
border-color 140ms var(--ease-out),
|
||||
box-shadow 140ms var(--ease-out);
|
||||
}
|
||||
.fleet-status-chip strong {
|
||||
min-width: 1.25rem;
|
||||
padding: 0.05rem 0.4rem;
|
||||
border-radius: 999px;
|
||||
background: rgba(121, 79, 39, 0.08);
|
||||
font-variant-numeric: tabular-nums;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
.fleet-status-chip:hover {
|
||||
transform: translateY(-1px);
|
||||
border-color: color-mix(in srgb, var(--mint) 40%, var(--border));
|
||||
}
|
||||
.fleet-status-chip.is-active {
|
||||
color: #0c5f59;
|
||||
border-color: color-mix(in srgb, var(--mint) 55%, #9fd9d1);
|
||||
background:
|
||||
linear-gradient(180deg, rgba(232, 250, 246, 0.98), rgba(214, 244, 238, 0.95));
|
||||
box-shadow: 0 6px 16px rgba(25, 200, 185, 0.16);
|
||||
}
|
||||
.fleet-status-chip.is-active strong {
|
||||
background: rgba(25, 200, 185, 0.18);
|
||||
color: #0c5f59;
|
||||
}
|
||||
.fleet-toolbar-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 0.75rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.fleet-result-count {
|
||||
margin: 0;
|
||||
color: var(--muted);
|
||||
font-size: 0.88rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
.fleet-result-count strong {
|
||||
color: var(--brown);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.fleet-toolbar-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.55rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.fleet-sort-field {
|
||||
min-width: 10rem;
|
||||
}
|
||||
.fleet-sort-field select {
|
||||
min-width: 11rem;
|
||||
width: 100%;
|
||||
}
|
||||
.fleet-active-filters {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 0.45rem;
|
||||
}
|
||||
.fleet-active-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
min-height: 2rem;
|
||||
padding: 0.2rem 0.65rem;
|
||||
border-radius: 999px;
|
||||
border: 1px solid color-mix(in srgb, var(--mint) 35%, var(--border));
|
||||
background: rgba(25, 200, 185, 0.1);
|
||||
color: #0f6f68;
|
||||
font-size: 0.82rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
.fleet-clear-filters {
|
||||
min-height: 2rem;
|
||||
padding: 0.2rem 0.7rem;
|
||||
border-width: 1px;
|
||||
border-color: transparent;
|
||||
background: transparent;
|
||||
color: var(--brown);
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 3px;
|
||||
font-size: 0.82rem;
|
||||
}
|
||||
.fleet-advanced-filters {
|
||||
margin-top: 0.65rem;
|
||||
margin-top: 0.1rem;
|
||||
}
|
||||
.fleet-advanced-filters > summary {
|
||||
width: fit-content;
|
||||
min-height: 2.75rem;
|
||||
display: flex;
|
||||
min-height: 2.35rem;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.45rem;
|
||||
color: var(--brown);
|
||||
font-weight: 800;
|
||||
cursor: pointer;
|
||||
list-style: none;
|
||||
}
|
||||
.fleet-advanced-filters > summary::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
.fleet-advanced-count {
|
||||
min-width: 1.25rem;
|
||||
padding: 0.05rem 0.4rem;
|
||||
border-radius: 999px;
|
||||
background: rgba(25, 200, 185, 0.16);
|
||||
color: #0c5f59;
|
||||
font-size: 0.78rem;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.fleet-advanced-filter-grid {
|
||||
display: flex;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
|
||||
align-items: end;
|
||||
gap: 0.65rem;
|
||||
flex-wrap: wrap;
|
||||
padding-top: 0.65rem;
|
||||
padding-top: 0.75rem;
|
||||
}
|
||||
.column-picker {
|
||||
position: relative;
|
||||
@@ -1216,16 +1397,35 @@ main ul[aria-label='已配置实例'] {
|
||||
}
|
||||
.fleet-toolbar {
|
||||
margin: 0.55rem 0;
|
||||
padding: 0.65rem;
|
||||
padding: 0.7rem;
|
||||
gap: 0.65rem;
|
||||
}
|
||||
.fleet-toolbar-primary {
|
||||
grid-template-columns: minmax(0, 1fr) 7.5rem;
|
||||
.fleet-search-field input[type='search'] {
|
||||
min-height: 2.85rem;
|
||||
padding-right: 4.1rem;
|
||||
}
|
||||
.fleet-toolbar-primary label {
|
||||
min-width: 0;
|
||||
.fleet-status-chips {
|
||||
gap: 0.35rem;
|
||||
}
|
||||
.fleet-toolbar-primary span {
|
||||
font-size: 0.75rem;
|
||||
.fleet-status-chip {
|
||||
min-height: 2.15rem;
|
||||
padding: 0.25rem 0.6rem;
|
||||
font-size: 0.82rem;
|
||||
}
|
||||
.fleet-toolbar-meta {
|
||||
align-items: stretch;
|
||||
}
|
||||
.fleet-toolbar-controls,
|
||||
.fleet-sort-field,
|
||||
.fleet-select-all {
|
||||
width: 100%;
|
||||
}
|
||||
.fleet-sort-field select {
|
||||
width: 100%;
|
||||
}
|
||||
.fleet-select-all {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
.fleet-advanced-filters > summary {
|
||||
min-height: 2.25rem;
|
||||
@@ -1424,13 +1624,15 @@ main ul[aria-label='已配置实例'] {
|
||||
}
|
||||
|
||||
.fleet-select-all {
|
||||
display: flex;
|
||||
display: inline-flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
align-items: end;
|
||||
gap: 0.4rem;
|
||||
align-items: center;
|
||||
}
|
||||
.fleet-select-all button {
|
||||
min-height: 2.5rem;
|
||||
min-height: 2.35rem;
|
||||
padding: 0.35rem 0.75rem;
|
||||
font-size: 0.86rem;
|
||||
}
|
||||
.fleet-card-section + .pagination {
|
||||
margin-top: 1rem;
|
||||
|
||||
Reference in New Issue
Block a user