mirror of
https://github.com/router-for-me/Cli-Proxy-API-Management-Center.git
synced 2026-02-19 03:00:49 +08:00
feat(AuthFilesPage): add title section with file count badge
This commit is contained in:
@@ -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;
|
||||
|
||||
@@ -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 ? (
|
||||
|
||||
@@ -45,6 +45,7 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $spacing-sm;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.countBadge {
|
||||
|
||||
Reference in New Issue
Block a user