From f3bd2ed4724ad6426bd43afe871f75084ab1122a Mon Sep 17 00:00:00 2001 From: t0ng7u Date: Mon, 14 Jul 2025 22:52:00 +0800 Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20fix(ui):=20improve=20uptime=20ca?= =?UTF-8?q?rd=20layout=20and=20request=20count=20icon?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Remove flex layout from uptime service card to eliminate bottom spacing - Remove flex-1 and mt-auto classes that caused unnecessary stretching - Replace IconRotate with IconSend for request count to better represent the semantic meaning - Legend now sits directly below content instead of being pushed to bottom Fixes the visual issue where uptime service availability card had unwanted white space at the bottom when content was minimal. --- web/src/i18n/locales/en.json | 1 + web/src/pages/Detail/index.js | 937 +++++++++++++++++----------------- 2 files changed, 470 insertions(+), 468 deletions(-) diff --git a/web/src/i18n/locales/en.json b/web/src/i18n/locales/en.json index 66295f34..61cc3782 100644 --- a/web/src/i18n/locales/en.json +++ b/web/src/i18n/locales/en.json @@ -1630,6 +1630,7 @@ "请联系管理员在系统设置中配置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", + "跳转": "Jump", "批量删除": "Batch Delete", "常见问答": "FAQ", "进行中": "Ongoing", diff --git a/web/src/pages/Detail/index.js b/web/src/pages/Detail/index.js index e8ed36fa..0d9a8234 100644 --- a/web/src/pages/Detail/index.js +++ b/web/src/pages/Detail/index.js @@ -25,7 +25,6 @@ import { IconSearch, IconMoneyExchangeStroked, IconHistogram, - IconRotate, IconCoinMoneyStroked, IconTextStroked, IconPulse, @@ -33,7 +32,8 @@ import { IconTypograph, IconPieChart2Stroked, IconPlus, - IconMinus + IconMinus, + IconSend } from '@douyinfe/semi-icons'; import { IllustrationConstruction, IllustrationConstructionDark } from '@douyinfe/semi-illustrations'; import { VChart } from '@visactor/react-vchart'; @@ -541,7 +541,7 @@ const Detail = (props) => { { title: t('请求次数'), value: userState.user?.request_count, - icon: , + icon: , avatarColor: 'green', trendData: [], trendColor: '#10b981' @@ -1176,487 +1176,488 @@ const Detail = (props) => { - -
-
- {groupedStatsData.map((group, idx) => ( - -
- {group.items.map((item, itemIdx) => ( -
-
- - {item.icon} - -
-
{item.title}
-
{item.value}
-
+
+
+ {groupedStatsData.map((group, idx) => ( + +
+ {group.items.map((item, itemIdx) => ( +
+
+ + {item.icon} + +
+
{item.title}
+
{item.value}
- {item.trendData && item.trendData.length > 0 && ( -
- + {item.trendData && item.trendData.length > 0 && ( +
+ +
+ )} +
+ ))} +
+ + ))} +
+
+ +
+
+ +
+ + {t('模型数据分析')} +
+ + + + {t('消耗分布')} + + } itemKey="1" /> + + + {t('消耗趋势')} + + } itemKey="2" /> + + + {t('调用次数分布')} + + } itemKey="3" /> + + + {t('调用次数排行')} + + } itemKey="4" /> + +
+ } + bodyStyle={{ padding: 0 }} + > +
+ {activeChartTab === '1' && ( + + )} + {activeChartTab === '2' && ( + + )} + {activeChartTab === '3' && ( + + )} + {activeChartTab === '4' && ( + + )} +
+ + + {hasApiInfoPanel && ( + + + {t('API信息')} +
+ } + bodyStyle={{ padding: 0 }} + > +
+
+ {apiInfoData.length > 0 ? ( + apiInfoData.map((api) => ( + <> +
+
+ + {api.route.substring(0, 2)} + +
+
+
+ + {api.route} + +
+ } + size="small" + color="white" + shape='circle' + onClick={() => handleSpeedTest(api.url)} + className="cursor-pointer hover:opacity-80 text-xs" + > + {t('测速')} + + } + size="small" + color="white" + shape='circle' + onClick={() => window.open(api.url, '_blank', 'noopener,noreferrer')} + className="cursor-pointer hover:opacity-80 text-xs" + > + {t('跳转')} + +
+
+
handleCopyUrl(api.url)} + > + {api.url} +
+
+ {api.description} +
+
+
+ + + )) + ) : ( +
+ } + darkModeImage={} + title={t('暂无API信息')} + description={t('请联系管理员在系统设置中配置API信息')} + /> +
+ )} +
+
+
+ + )} +
+
+ + {/* 系统公告和常见问答卡片 */} + { + hasInfoPanels && ( +
+
+ {/* 公告卡片 */} + {announcementsEnabled && ( + +
+ + {t('系统公告')} + + {t('显示最新20条')} + +
+ {/* 图例 */} +
+ {announcementLegendData.map((legend, index) => ( +
+
+ {legend.label} +
+ ))} +
+
+ } + bodyStyle={{ padding: 0 }} + > +
+
handleCardScroll(announcementScrollRef, setShowAnnouncementScrollHint)} + > + {announcementData.length > 0 ? ( + + {announcementData.map((item, idx) => ( + +
+
+ {item.extra && ( +
+ )} +
+ + ))} + + ) : ( +
+ } + darkModeImage={} + title={t('暂无系统公告')} + description={t('请联系管理员在系统设置中配置公告信息')} />
)}
- ))} -
- - ))} -
-
- -
-
- -
- - {t('模型数据分析')} +
- - - - {t('消耗分布')} - - } itemKey="1" /> - - - {t('消耗趋势')} - - } itemKey="2" /> - - - {t('调用次数分布')} - - } itemKey="3" /> - - - {t('调用次数排行')} - - } itemKey="4" /> - -
- } - > -
- {activeChartTab === '1' && ( - - )} - {activeChartTab === '2' && ( - - )} - {activeChartTab === '3' && ( - - )} - {activeChartTab === '4' && ( - - )} -
- + + )} - {hasApiInfoPanel && ( - - - {t('API信息')} -
- } - > -
-
- {apiInfoData.length > 0 ? ( - apiInfoData.map((api) => ( - <> -
-
- - {api.route.substring(0, 2)} - -
-
-
- - {api.route} - -
- } - size="small" - color="white" - shape='circle' - onClick={() => handleSpeedTest(api.url)} - className="cursor-pointer hover:opacity-80 text-xs" - > - {t('测速')} - - } - size="small" - color="white" - shape='circle' - onClick={() => window.open(api.url, '_blank', 'noopener,noreferrer')} - className="cursor-pointer hover:opacity-80 text-xs" - > - {t('跳转')} - -
-
-
handleCopyUrl(api.url)} - > - {api.url} -
-
- {api.description} -
-
-
- - - )) - ) : ( -
- } - darkModeImage={} - title={t('暂无API信息')} - description={t('请联系管理员在系统设置中配置API信息')} - /> -
- )} -
-
-
- - )} -
-
- - {/* 系统公告和常见问答卡片 */} - { - hasInfoPanels && ( -
-
- {/* 公告卡片 */} - {announcementsEnabled && ( - -
- - {t('系统公告')} - - {t('显示最新20条')} - -
- {/* 图例 */} -
- {announcementLegendData.map((legend, index) => ( -
-
- {legend.label} -
- ))} -
-
- } - > -
-
handleCardScroll(announcementScrollRef, setShowAnnouncementScrollHint)} - > - {announcementData.length > 0 ? ( - - {announcementData.map((item, idx) => ( - -
-
- {item.extra && ( -
- )} -
- - ))} - - ) : ( -
- } - darkModeImage={} - title={t('暂无系统公告')} - description={t('请联系管理员在系统设置中配置公告信息')} - /> -
- )} -
-
+ {/* 常见问答卡片 */} + {faqEnabled && ( + + + {t('常见问答')}
- - )} - - {/* 常见问答卡片 */} - {faqEnabled && ( - - - {t('常见问答')} -
- } - bodyStyle={{ padding: 0 }} - > -
-
handleCardScroll(faqScrollRef, setShowFaqScrollHint)} - > - {faqData.length > 0 ? ( - } - collapseIcon={} - > - {faqData.map((item, index) => ( - -
- - ))} - - ) : ( -
- } - darkModeImage={} - title={t('暂无常见问答')} - description={t('请联系管理员在系统设置中配置常见问答')} - /> -
- )} -
-
-
- - )} - - {/* 服务可用性卡片 */} - {uptimeEnabled && ( - -
- - {t('服务可用性')} -
-
- } - bodyStyle={{ padding: 0 }} - > - {/* 内容区域 */} -
- - {uptimeData.length > 0 ? ( - uptimeData.length === 1 ? ( -
-
handleCardScroll(uptimeScrollRef, setShowUptimeScrollHint)} - > - {renderMonitorList(uptimeData[0].monitors)} -
-
-
- ) : ( - +
+
handleCardScroll(faqScrollRef, setShowFaqScrollHint)} + > + {faqData.length > 0 ? ( + } + collapseIcon={} + > + {faqData.map((item, index) => ( + - {uptimeData.map((group, groupIdx) => { - if (!uptimeTabScrollRefs.current[group.categoryName]) { - uptimeTabScrollRefs.current[group.categoryName] = React.createRef(); - } - const tabScrollRef = uptimeTabScrollRefs.current[group.categoryName]; +
+ + ))} + + ) : ( +
+ } + darkModeImage={} + title={t('暂无常见问答')} + description={t('请联系管理员在系统设置中配置常见问答')} + /> +
+ )} +
+
+
+ + )} - return ( - - - {group.categoryName} - - {group.monitors ? group.monitors.length : 0} - - - } - itemKey={group.categoryName} - key={groupIdx} - > -
-
handleCardScroll(tabScrollRef, setShowUptimeScrollHint)} - > - {renderMonitorList(group.monitors)} -
-
-
- - ); - })} - - ) - ) : ( -
- } - darkModeImage={} - title={t('暂无监控数据')} - description={t('请联系管理员在系统设置中配置Uptime')} + {/* 服务可用性卡片 */} + {uptimeEnabled && ( + +
+ + {t('服务可用性')} +
+
+ } + bodyStyle={{ padding: 0 }} + > + {/* 内容区域 */} +
+ + {uptimeData.length > 0 ? ( + uptimeData.length === 1 ? ( +
+
handleCardScroll(uptimeScrollRef, setShowUptimeScrollHint)} + > + {renderMonitorList(uptimeData[0].monitors)} +
+
- )} - -
+ ) : ( + + {uptimeData.map((group, groupIdx) => { + if (!uptimeTabScrollRefs.current[group.categoryName]) { + uptimeTabScrollRefs.current[group.categoryName] = React.createRef(); + } + const tabScrollRef = uptimeTabScrollRefs.current[group.categoryName]; - {/* 固定在底部的图例 */} - {uptimeData.length > 0 && ( -
-
- {uptimeLegendData.map((legend, index) => ( -
-
- {legend.label} -
- ))} + return ( + + + {group.categoryName} + + {group.monitors ? group.monitors.length : 0} + + + } + itemKey={group.categoryName} + key={groupIdx} + > +
+
handleCardScroll(tabScrollRef, setShowUptimeScrollHint)} + > + {renderMonitorList(group.monitors)} +
+
+
+ + ); + })} + + ) + ) : ( +
+ } + darkModeImage={} + title={t('暂无监控数据')} + description={t('请联系管理员在系统设置中配置Uptime')} + />
+ )} + +
+ + {/* 图例 */} + {uptimeData.length > 0 && ( +
+
+ {uptimeLegendData.map((legend, index) => ( +
+
+ {legend.label} +
+ ))}
- )} - - )} -
+
+ )} + + )}
- ) - } - +
+ ) + }
); };