feat(AuthFilesPage): add title section with file count badge

This commit is contained in:
LTbinglingfeng
2026-01-05 00:18:35 +08:00
parent 681fc3cee5
commit 2a92ea8862
3 changed files with 43 additions and 35 deletions

View File

@@ -32,6 +32,28 @@
flex-wrap: wrap;
}
.titleWrapper {
display: flex;
align-items: center;
gap: $spacing-sm;
line-height: 24px;
}
.countBadge {
display: inline-flex;
align-items: center;
justify-content: center;
height: 24px;
min-width: 24px;
padding: 0 8px;
border-radius: 999px;
font-size: 13px;
font-weight: 600;
color: var(--count-badge-text);
background-color: var(--count-badge-bg);
box-sizing: border-box;
}
.errorBox {
padding: $spacing-md;
background-color: rgba(239, 68, 68, 0.1);
@@ -134,19 +156,6 @@
}
}
.statsInfo {
padding: 8px 12px;
background-color: var(--bg-secondary);
border-radius: $radius-md;
font-size: 13px;
color: var(--text-secondary);
white-space: nowrap;
height: 38px;
box-sizing: border-box;
display: flex;
align-items: center;
}
// 卡片网格
.fileGrid {
display: grid;

View File

@@ -357,13 +357,10 @@ export function AuthFilesPage() {
const start = (currentPage - 1) * pageSize;
const pageItems = filtered.slice(start, start + pageSize);
// 统计信息
const totalSize = useMemo(() => files.reduce((sum, item) => sum + (item.size || 0), 0), [files]);
// 点击上传
const handleUploadClick = () => {
fileInputRef.current?.click();
};
// 点击上传
const handleUploadClick = () => {
fileInputRef.current?.click();
};
// 处理文件上传(支持多选)
const handleFileChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -834,15 +831,22 @@ export function AuthFilesPage() {
);
};
const titleNode = (
<div className={styles.titleWrapper}>
<span>{t('auth_files.title_section')}</span>
{files.length > 0 && <span className={styles.countBadge}>{files.length}</span>}
</div>
);
return (
<div className={styles.container}>
<div className={styles.pageHeader}>
<h1 className={styles.pageTitle}>{t('auth_files.title')}</h1>
<p className={styles.description}>{t('auth_files.description')}</p>
</div>
<Card
title={t('auth_files.title_section')}
<div className={styles.pageHeader}>
<h1 className={styles.pageTitle}>{t('auth_files.title')}</h1>
<p className={styles.description}>{t('auth_files.description')}</p>
</div>
<Card
title={titleNode}
extra={
<div className={styles.headerActions}>
<Button
@@ -906,14 +910,8 @@ export function AuthFilesPage() {
onChange={handlePageSizeChange}
/>
</div>
<div className={styles.filterItem}>
<label>{t('common.info')}</label>
<div className={styles.statsInfo}>
{files.length} {t('auth_files.files_count')} · {formatFileSize(totalSize)}
</div>
</div>
</div>
</div>
</div>
</div>
{/* 卡片网格 */}
{loading ? (

View File

@@ -45,6 +45,7 @@
display: flex;
align-items: center;
gap: $spacing-sm;
line-height: 24px;
}
.countBadge {