From fab5159cd4e16739d858ff3a94703acd8e878a92 Mon Sep 17 00:00:00 2001
From: lzt404 <2596933790@qq.com>
Date: Thu, 8 Oct 2026 17:17:36 +0800
Subject: [PATCH] fix(ui): compact credential cards and stop overlapping
content
Replace the wide credential table with a quota-style card grid so account, plan, status, requests, usage, and quota stay readable without colliding.
---
src/components/AuthFileHealthStatus.css | 4 +-
src/components/AuthFileQuotaPanel.tsx | 4 +-
src/pages/AuthFileManagementPage.css | 85 +++++++++++--------------
src/pages/AuthFileManagementPage.tsx | 2 +-
tests/auth-file-cooldown-ui.cjs | 8 +--
tests/auth-file-list-ui.cjs | 17 +++--
6 files changed, 54 insertions(+), 66 deletions(-)
diff --git a/src/components/AuthFileHealthStatus.css b/src/components/AuthFileHealthStatus.css
index 7ec1472..e42b0b6 100644
--- a/src/components/AuthFileHealthStatus.css
+++ b/src/components/AuthFileHealthStatus.css
@@ -130,7 +130,8 @@
.auth-file-health-compact .auth-health-countdown { margin: 0 0 0 auto; color: var(--text-tertiary); font-size: 11px; }
.auth-file-health-compact .auth-health-disclosure { margin: 0; }
.auth-file-health-compact .auth-health-body { padding: 0 0 12px; }
-.auth-file-health-compact .auth-health-records { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 20px; }
+.auth-file-health-compact .auth-health-records { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); gap: 0 16px; }
+.auth-file-health-compact .auth-health-record-heading strong { overflow-wrap: anywhere; }
.auth-file-health-compact .auth-health-records li { min-width: 0; padding: 10px 0; }
.auth-file-health-compact .auth-health-record-heading { gap: 4px 10px; }
.auth-file-health-compact .auth-health-record-heading strong { font-size: 12px; font-weight: 600; }
@@ -151,7 +152,6 @@
@container credential-files (max-width: 700px) {
.auth-file-health.auth-file-health-compact { gap: 0 8px; }
- .auth-file-health-compact .auth-health-records { grid-template-columns: minmax(0, 1fr); }
.auth-file-health-compact .auth-health-summary { position: relative; padding-right: 18px; }
.auth-file-health-compact .auth-health-summary-content { flex-basis: calc(100% - 24px); }
.auth-file-health-compact .auth-health-countdown { margin: 0 0 0 22px; }
diff --git a/src/components/AuthFileQuotaPanel.tsx b/src/components/AuthFileQuotaPanel.tsx
index 3bc01aa..40fe493 100644
--- a/src/components/AuthFileQuotaPanel.tsx
+++ b/src/components/AuthFileQuotaPanel.tsx
@@ -2,7 +2,6 @@ import { ResetCreditExpiries } from './ResetCreditExpiries';
import { LoaderCircle, RefreshCw } from 'lucide-react';
import { useI18n } from '../i18n';
import { MessageNotice } from '../appNotice';
-import { readBoolean } from '../services/managementApi';
import { fileName, formatQuotaTimestamp, type AuthFile, type QuotaState } from '../services/quotaService';
import { canResetQuota, hasPendingClaudeReset } from '../services/quotaActions';
import { formatQuotaReset, useQuotaClock } from '../services/quotaTime';
@@ -22,7 +21,6 @@ export function AuthFileQuotaPanel({ quota, file, disabled, onRefresh, onReset,
const loading = quota.status === 'loading';
const name = fileName(file);
const compactLayout = compact || dense;
- const fileDisabled = readBoolean(file, 'disabled');
const showReset = Boolean(onReset && ((quota.resetCredits ?? 0) > 0 || hasPendingClaudeReset(file)));
const accountCreditsLabel = quota.creditsUnlimited
? t('quota.creditUnlimited')
@@ -62,7 +60,7 @@ export function AuthFileQuotaPanel({ quota, file, disabled, onRefresh, onReset,
: null}
: null}
{loading ? {t(quota.pendingAction === 'reset' ? 'quota.resetting' : 'authFiles.quota.loading')}
: null}
- {quota.status === 'idle' ? {t(dense ? (fileDisabled ? 'quota.disabled' : 'quota.notFetched') : disabled ? 'quota.fileDisabled' : 'authFiles.settings.quotaIdle')}
: null}
+ {quota.status === 'idle' ? {t(dense ? 'quota.notFetched' : disabled ? 'quota.fileDisabled' : 'authFiles.settings.quotaIdle')}
: null}
{quota.status === 'error' ?
{dense && quota.error ? {t('authFiles.quota.failed')}
{quota.error}
- {plan || '—'}
+ {plan ? {plan} : null}
{expiryMs !== undefined ? {expiryMs <= now ? t('authFiles.list.expired') : t('authFiles.list.daysRemaining', { count: Math.ceil((expiryMs - now) / 86_400_000) })} : null}
diff --git a/tests/auth-file-cooldown-ui.cjs b/tests/auth-file-cooldown-ui.cjs
index e8ed701..13f2f1b 100644
--- a/tests/auth-file-cooldown-ui.cjs
+++ b/tests/auth-file-cooldown-ui.cjs
@@ -37,7 +37,7 @@ const fs = require('node:fs/promises');
};
const assertMainRowHeight = async label => {
const heights = await page.locator('.auth-credential-row').evaluateAll(nodes => nodes.map(node => node.getBoundingClientRect().height));
- assert.ok(heights.every(height => height >= 88 && height <= 120), `${label}: cooldown content does not stretch the seven-column main row: ${JSON.stringify(heights)}`);
+ assert.ok(heights.every(height => height >= 140 && height <= 420), `${label}: cooldown content does not stretch the credential card: ${JSON.stringify(heights)}`);
};
const open = async query => {
await page.goto(`${base}/tests/fixtures/auth-file-cooldown.html?${query || ''}`);
@@ -58,7 +58,7 @@ const fs = require('node:fs/promises');
assert.equal(await primary().locator('.auth-file-health-compact').isVisible(), true, 'Cooldown summary is visible before opening any details');
assert.equal(await primary().locator('.auth-health-body').isVisible(), false, 'Individual cooldown records start collapsed');
assert.ok((await primary().locator('.auth-health-heading').innerText()).includes('凭证及 2 个模型冷却'));
- assert.equal(await primary().locator('.auth-credential-row > .auth-list-cell').count(), 7, 'Cooldown rows retain the complete seven-column overview');
+ assert.equal(await primary().locator('.auth-credential-row > .auth-list-cell').count(), 7, 'Cooldown cards retain the complete seven-section overview');
assert.equal(await primary().locator('.auth-list-recent').isVisible(), true, 'Recent requests stay visible while diagnostics are collapsed');
assert.equal(await primary().locator('.auth-list-usage').isVisible(), true, 'Runtime counters stay visible while diagnostics are collapsed');
assert.equal(await primary().locator('.auth-list-icon-actions > button:visible').count(), 5, 'Credential actions stay directly available');
@@ -151,7 +151,7 @@ const fs = require('node:fs/promises');
await open();
await confirmReset(primary());
await page.evaluate(() => { window.cooldownFixture.holdNextRead = true; });
- await page.getByRole('button', { name: '刷新', exact: true }).click();
+ await page.locator('.auth-files-heading').getByRole('button', { name: '刷新列表', exact: true }).click();
await page.waitForFunction(() => Boolean(window.cooldownFixture.releaseRead));
await releaseReset();
await page.waitForFunction(() => window.cooldownFixture.reads === 3 && window.cooldownFixture.completedReads === 2);
@@ -209,7 +209,7 @@ const fs = require('node:fs/promises');
}
}
assert.deepEqual(errors, []);
- console.log('PASS: directly visible cooldown summary/reset, independent keyboard disclosure, seven-column main-row height, cooldown models/reasons/countdowns, request summary counts/rate and keyboard tooltips, confirmation and cancel, single auth_index POST, pending duplicate protection, isolated success refresh, failure preservation, stale response protection, unknown/empty/missing-index guards, elapsed records, runtime/disabled state, light/dark desktop/mobile layout.');
+ console.log('PASS: directly visible cooldown summary/reset, independent keyboard disclosure, compact card height, cooldown models/reasons/countdowns, request summary counts/rate and keyboard tooltips, confirmation and cancel, single auth_index POST, pending duplicate protection, isolated success refresh, failure preservation, stale response protection, unknown/empty/missing-index guards, elapsed records, runtime/disabled state, light/dark desktop/mobile layout.');
console.log(`Screenshots: ${screenshotDir}`);
} finally { await browser?.close(); await server.close(); }
})().catch(error => { console.error(error); process.exitCode = 1; });
diff --git a/tests/auth-file-list-ui.cjs b/tests/auth-file-list-ui.cjs
index b3b0d12..e8e3cc2 100644
--- a/tests/auth-file-list-ui.cjs
+++ b/tests/auth-file-list-ui.cjs
@@ -45,7 +45,7 @@ const fs = require('node:fs/promises');
})));
assert.ok(dimensions.every(size => size.scroll <= size.width + 1 || (
size.className === 'auth-file-table-scroll' && size.width > 700 && size.width < 980 && size.overflowX === 'auto'
- )), `${label}: only intermediate widths may scroll inside the table; cards must fit ${JSON.stringify(dimensions)}`);
+ )), `${label}: cards and the credential list must fit ${JSON.stringify(dimensions)}`);
assert.equal(await page.evaluate(() => document.documentElement.scrollWidth <= innerWidth + 1), true, `${label}: page overflow`);
};
const assertMainInformation = async (label, width) => {
@@ -58,14 +58,17 @@ const fs = require('node:fs/promises');
assert.equal(await card(1).getByRole('switch').isVisible(), true);
assert.equal(await card(1).locator('.auth-list-details-button').isVisible(), true);
assert.equal(await card(1).locator('.auth-list-details').isVisible(), false, `${label}: file metadata and the expanded request summary start collapsed`);
- if (width >= 1800) {
+ if (width >= 1024) {
const heights = await page.locator('.auth-credential-row').evaluateAll(nodes => nodes.map(node => node.getBoundingClientRect().height));
- assert.ok(heights.every(height => height >= 88 && height <= 190), `${label}: desktop rows stay compact, allowing labeled actions to wrap: ${JSON.stringify(heights)}`);
+ assert.ok(heights.every(height => height >= 140 && height <= 420), `${label}: credential cards stay compact: ${JSON.stringify(heights)}`);
const cells = await card(1).locator('.auth-credential-row > .auth-list-cell').evaluateAll(nodes => nodes.map(node => {
- const bounds = node.getBoundingClientRect(); return { left: bounds.left, right: bounds.right };
+ const bounds = node.getBoundingClientRect(); return { top: bounds.top, bottom: bounds.bottom, left: bounds.left, right: bounds.right, hidden: bounds.width === 0 };
}));
- assert.equal(cells.length, 7, `${label}: desktop has seven information columns`);
- assert.ok(cells.slice(1).every((cell, index) => cell.left >= cells[index].right - 1), `${label}: all seven columns remain in one row`);
+ assert.equal(cells.length, 7, `${label}: each card keeps seven information sections`);
+ assert.equal(cells[1].hidden, false, `${label}: a known plan remains visible`);
+ assert.ok(cells[2].left >= cells[0].right - 1, `${label}: status stays beside the account`);
+ assert.ok(cells[1].top >= cells[0].bottom - 8, `${label}: plan stays on its own row`);
+ assert.ok(cells.slice(3).every(cell => cell.top >= cells[1].top), `${label}: activity, quota and actions follow the account`);
}
};
await fs.mkdir(screenshotDir, { recursive: true });
@@ -273,7 +276,7 @@ const fs = require('node:fs/promises');
await page.screenshot({ path: path.join(screenshotDir, `display-cases-${width}.png`), fullPage: true });
}
- console.log('PASS: offline seven-column dense credential list with visible request/runtime/quota/action data, compact row height, exact quota percentages/reset timestamps, unknown quota, ten/two pagination, search/provider/status reset, page size twenty, additional quota disclosure, main-row and detail-summary request keyboard tooltips, directly visible cooldown controls, exact status PATCH, direct delete confirmation/cancel, small idle accounts without pagination, light/dark Chinese/English 1800/1280/1024/390 without page or card overflow, contained table scrolling only at intermediate widths.');
+ console.log('PASS: offline compact credential card grid with visible request/runtime/quota/action data, compact row height, exact quota percentages/reset timestamps, unknown quota, ten/two pagination, search/provider/status reset, page size twenty, additional quota disclosure, main-row and detail-summary request keyboard tooltips, directly visible cooldown controls, exact status PATCH, direct delete confirmation/cancel, small idle accounts without pagination, light/dark Chinese/English 1800/1280/1024/390 without page or card overflow, contained table scrolling only at intermediate widths.');
console.log(`Screenshots: ${screenshotDir}`);
} finally { await browser?.close(); await server.close(); }
})().catch(error => { console.error(error); process.exitCode = 1; });