oadmin/new-api
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🎨 style(dashboard): Standardize Empty component visuals in Detail page

Browse Source 
Summary:
Refactored the `Detail` page to deliver a more consistent and compact visual experience when displaying empty states.

Key changes:
1. Introduced a reusable `ILLUSTRATION_SIZE` constant (96 × 96) to ensure all `IllustrationConstruction` / `IllustrationConstructionDark` icons render at a uniform, reduced size.
2. Applied the new size to every `Empty` component instance within the file.
3. Ensured Empty‐state content (title, description, icon) is centrally aligned for better readability.
4. Updated the Uptime panel’s empty description text for greater clarity.

These adjustments improve UI cohesion, reduce visual noise, and make empty messages easier to scan.
This commit is contained in:
Apple\Apple
2025-06-15 03:22:23 +08:00
parent 5adf1e272d
commit af50660887
2 changed files with 14 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/i18n/locales/en.json
View File

@@ -1598,6 +1598,7 @@
"请联系管理员在系统设置中配置API信息": "Please contact the administrator to configure API information in the system settings.",
"请联系管理员在系统设置中配置公告信息": "Please contact the administrator to configure notice information in the system settings.",
"请联系管理员在系统设置中配置常见问答": "Please contact the administrator to configure FAQ information in the system settings.",
"请联系管理员在系统设置中配置Uptime": "Please contact the administrator to configure Uptime in the system settings.",
"确定要删除此API信息吗？": "Are you sure you want to delete this API information?",
"测速": "Speed Test",
"批量删除": "Batch Delete",
@@ -1645,7 +1646,6 @@
"高延迟": "High latency",
"维护中": "Maintenance",
"暂无监控数据": "No monitoring data",
"请联系管理员在系统设置中配置Uptime": "Please contact the administrator to configure Uptime in the system settings.",
"IP记录": "IP Record",
"记录请求与错误日志 IP": "Record request and error log IP",
"开启后，仅“消费”和“错误”日志将记录您的客户端 IP 地址": "After enabling, only \"consumption\" and \"error\" logs will record your client IP address",

29
web/src/pages/Detail/index.js
View File

@@ -87,6 +87,8 @@ const Detail = (props) => {
const ICON_BUTTON_CLASS = "text-white hover:bg-opacity-80 !rounded-full";
const FLEX_CENTER_GAP2 = "flex items-center gap-2";
const ILLUSTRATION_SIZE = { width: 96, height: 96 };
// ========== Constants ==========
let now = new Date();
const isAdminUser = isAdmin();
@@ -912,10 +914,9 @@ const Detail = (props) => {
return (
<div className="flex justify-center items-center py-4">
<Empty
image={<IllustrationConstruction />}
darkModeImage={<IllustrationConstructionDark />}
image={<IllustrationConstruction style={ILLUSTRATION_SIZE} />}
darkModeImage={<IllustrationConstructionDark style={ILLUSTRATION_SIZE} />}
title={t('暂无监控数据')}
style={{ padding: '8px' }}
/>
</div>
);
@@ -1202,11 +1203,10 @@ const Detail = (props) => {
) : (
<div className="flex justify-center items-center py-8">
<Empty
image={<IllustrationConstruction />}
darkModeImage={<IllustrationConstructionDark />}
image={<IllustrationConstruction style={ILLUSTRATION_SIZE} />}
darkModeImage={<IllustrationConstructionDark style={ILLUSTRATION_SIZE} />}
title={t('暂无API信息')}
description={t('请联系管理员在系统设置中配置API信息')}
style={{ padding: '12px' }}
/>
</div>
)}
@@ -1274,11 +1274,10 @@ const Detail = (props) => {
) : (
<div className="flex justify-center items-center py-8">
<Empty
image={<IllustrationConstruction />}
darkModeImage={<IllustrationConstructionDark />}
image={<IllustrationConstruction style={ILLUSTRATION_SIZE} />}
darkModeImage={<IllustrationConstructionDark style={ILLUSTRATION_SIZE} />}
title={t('暂无系统公告')}
description={t('请联系管理员在系统设置中配置公告信息')}
style={{ padding: '12px' }}
/>
</div>
)}
@@ -1329,11 +1328,10 @@ const Detail = (props) => {
) : (
<div className="flex justify-center items-center py-8">
<Empty
image={<IllustrationConstruction />}
darkModeImage={<IllustrationConstructionDark />}
image={<IllustrationConstruction style={ILLUSTRATION_SIZE} />}
darkModeImage={<IllustrationConstructionDark style={ILLUSTRATION_SIZE} />}
title={t('暂无常见问答')}
description={t('请联系管理员在系统设置中配置常见问答')}
style={{ padding: '12px' }}
/>
</div>
)}
@@ -1440,11 +1438,10 @@ const Detail = (props) => {
) : (
<div className="flex justify-center items-center py-8">
<Empty
image={<IllustrationConstruction />}
darkModeImage={<IllustrationConstructionDark />}
image={<IllustrationConstruction style={ILLUSTRATION_SIZE} />}
darkModeImage={<IllustrationConstructionDark style={ILLUSTRATION_SIZE} />}
title={t('暂无监控数据')}
description={t('请联系管理员在系统设置中配置Uptime分组')}
style={{ padding: '12px' }}
description={t('请联系管理员在系统设置中配置Uptime')}
/>
</div>
)}