💄 fix(ui): improve uptime card layout and request count icon

- 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

@@ -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",

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: <IconRotate size="large" />,
+          icon: <IconSend size="large" />,
           avatarColor: 'green',
           trendData: [],
           trendColor: '#10b981'
@@ -1176,7 +1176,6 @@ const Detail = (props) => {
         </Form>
       </Modal>
 
-      <Spin spinning={loading}>
       <div className="mb-4">
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
           {groupedStatsData.map((group, idx) => (
@@ -1265,8 +1264,9 @@ const Detail = (props) => {
                 </Tabs>
               </div>
             }
+            bodyStyle={{ padding: 0 }}
           >
-              <div style={{ height: 400 }}>
+            <div className="h-96 p-2">
               {activeChartTab === '1' && (
                 <VChart
                   spec={spec_line}
@@ -1304,11 +1304,12 @@ const Detail = (props) => {
                   {t('API信息')}
                 </div>
               }
+              bodyStyle={{ padding: 0 }}
             >
               <div className="card-content-container">
                 <div
                   ref={apiScrollRef}
-                    className="space-y-3 max-h-96 overflow-y-auto card-content-scroll"
+                  className="p-2 max-h-96 overflow-y-auto card-content-scroll"
                   onScroll={handleApiScroll}
                 >
                   {apiInfoData.length > 0 ? (
@@ -1401,7 +1402,7 @@ const Detail = (props) => {
                       <div className="flex items-center gap-2">
                         <Bell size={16} />
                         {t('系统公告')}
-                          <Tag color="grey" shape="circle">
+                        <Tag color="white" shape="circle">
                           {t('显示最新20条')}
                         </Tag>
                       </div>
@@ -1425,6 +1426,7 @@ const Detail = (props) => {
                       </div>
                     </div>
                   }
+                  bodyStyle={{ padding: 0 }}
                 >
                   <div className="card-content-container">
                     <div
@@ -1533,7 +1535,7 @@ const Detail = (props) => {
               {uptimeEnabled && (
                 <Card
                   {...CARD_PROPS}
-                    className="shadow-sm !rounded-2xl lg:col-span-1 flex flex-col"
+                  className="shadow-sm !rounded-2xl lg:col-span-1"
                   title={
                     <div className="flex items-center justify-between w-full gap-2">
                       <div className="flex items-center gap-2">
@@ -1554,7 +1556,7 @@ const Detail = (props) => {
                   bodyStyle={{ padding: 0 }}
                 >
                   {/* 内容区域 */}
-                    <div className="flex-1 relative">
+                  <div className="relative">
                     <Spin spinning={uptimeLoading}>
                       {uptimeData.length > 0 ? (
                         uptimeData.length === 1 ? (
@@ -1634,9 +1636,9 @@ const Detail = (props) => {
                     </Spin>
                   </div>
 
-                    {/* 固定在底部的图例 */}
+                  {/* 图例 */}
                   {uptimeData.length > 0 && (
-                      <div className="p-3 mt-auto bg-gray-50 rounded-b-2xl">
+                    <div className="p-3 bg-gray-50 rounded-b-2xl">
                       <div className="flex flex-wrap gap-3 text-xs justify-center">
                         {uptimeLegendData.map((legend, index) => (
                           <div key={index} className="flex items-center gap-1">
@@ -1656,7 +1658,6 @@ const Detail = (props) => {
           </div>
         )
       }
-      </Spin >
     </div >
   );
 };