fix: stack dashboard skills and tokens

This commit is contained in:
yun-zhi-ztl 2026-03-17 11:36:48 +08:00
parent 96c2f53283
commit 22c3ca69a0
4 changed files with 26 additions and 9 deletions

View file

@ -23,6 +23,7 @@ import { Select } from '@/shared/ui/select'
import { Input } from '@/shared/ui/input'
import type { ApiToken } from '@/api/types'
import { resolveTokenExpiresAt, toLocalDateTimeInputValue, type TokenExpirationMode } from './token-expiration'
import { TOKEN_TABLE_ACTIONS_HEAD_CLASS_NAME, TOKEN_TABLE_HEAD_CLASS_NAME } from './token-table-style'
const PAGE_SIZE = 10
type TokenPage = { items: ApiToken[]; total: number; page: number; size: number }
@ -166,7 +167,7 @@ export function TokenList() {
<Button>{t('token.createNew')}</Button>
</CreateTokenDialog>
</div>
<div className="rounded-lg border border-destructive/30 bg-destructive/5 px-4 py-6 text-sm text-destructive">
<div className="rounded-2xl border border-destructive/30 bg-destructive/5 px-5 py-6 text-sm text-destructive">
{error instanceof Error ? error.message : t('apiError.unknown')}
</div>
</div>
@ -189,16 +190,16 @@ export function TokenList() {
<p className="text-sm mt-2">{t('token.emptyHint')}</p>
</div>
) : (
<div className="border rounded-lg">
<div className="overflow-hidden rounded-2xl border border-border/60 bg-card/80 shadow-card">
<Table>
<TableHeader>
<TableRow>
<TableHead>{t('token.name')}</TableHead>
<TableHead>{t('token.prefix')}</TableHead>
<TableHead>{t('token.createdAt')}</TableHead>
<TableHead>{t('token.lastUsed')}</TableHead>
<TableHead>{t('token.expiresAt')}</TableHead>
<TableHead className="text-center">{t('token.actions')}</TableHead>
<TableHead className={TOKEN_TABLE_HEAD_CLASS_NAME}>{t('token.name')}</TableHead>
<TableHead className={TOKEN_TABLE_HEAD_CLASS_NAME}>{t('token.prefix')}</TableHead>
<TableHead className={TOKEN_TABLE_HEAD_CLASS_NAME}>{t('token.createdAt')}</TableHead>
<TableHead className={TOKEN_TABLE_HEAD_CLASS_NAME}>{t('token.lastUsed')}</TableHead>
<TableHead className={TOKEN_TABLE_HEAD_CLASS_NAME}>{t('token.expiresAt')}</TableHead>
<TableHead className={TOKEN_TABLE_ACTIONS_HEAD_CLASS_NAME}>{t('token.actions')}</TableHead>
</TableRow>
</TableHeader>
<TableBody>

View file

@ -0,0 +1,14 @@
import { describe, expect, it } from 'vitest'
import { TOKEN_TABLE_ACTIONS_HEAD_CLASS_NAME, TOKEN_TABLE_HEAD_CLASS_NAME } from './token-table-style'
describe('token table header styles', () => {
it('uses roomier spacing for standard header cells', () => {
expect(TOKEN_TABLE_HEAD_CLASS_NAME).toContain('px-5')
expect(TOKEN_TABLE_HEAD_CLASS_NAME).toContain('py-4')
expect(TOKEN_TABLE_HEAD_CLASS_NAME).toContain('uppercase')
})
it('keeps the actions header centered', () => {
expect(TOKEN_TABLE_ACTIONS_HEAD_CLASS_NAME).toContain('text-center')
})
})

View file

@ -0,0 +1,2 @@
export const TOKEN_TABLE_HEAD_CLASS_NAME = 'px-5 py-4 text-xs uppercase tracking-[0.14em] text-muted-foreground/90'
export const TOKEN_TABLE_ACTIONS_HEAD_CLASS_NAME = `${TOKEN_TABLE_HEAD_CLASS_NAME} text-center`

View file

@ -101,7 +101,7 @@ export function DashboardPage() {
) : null}
</div>
<div className="grid grid-cols-1 gap-8 xl:grid-cols-2 xl:items-start">
<div className="space-y-8">
<div className="space-y-4">
<div className="flex items-center justify-between">
<h2 className="text-xl font-semibold">{t('mySkills.title')}</h2>