From 96709dd9f3fd1367aadafdf15bd89b56f8e6f41a Mon Sep 17 00:00:00 2001
From: "Apple\\Apple" <zeraturing@foxmail.com>
Date: Mon, 26 May 2025 00:45:31 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=96chore:=20Change=20the=20display=20s?=
 =?UTF-8?q?tyle=20of=20request=20count,=20TPM,=20and=20RPM=20in=20the=20Lo?=
 =?UTF-8?q?gsTable?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/components/LogsTable.js | 97 ++++++++++++---------------------
 1 file changed, 36 insertions(+), 61 deletions(-)

diff --git a/web/src/components/LogsTable.js b/web/src/components/LogsTable.js
index 91be4489..c5cb3bb8 100644
--- a/web/src/components/LogsTable.js
+++ b/web/src/components/LogsTable.js
@@ -1135,70 +1135,45 @@ const LogsTable = () => {
         title={
           <div className="flex flex-col w-full">
             <Spin spinning={loadingStat}>
-              <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-                <Card
-                  shadows='hover'
-                  className="bg-yellow-50 border-0 !rounded-2xl w-full"
-                  headerLine={false}
+              <Space>
+                <Tag
+                  color='blue'
+                  size='large'
+                  style={{
+                    padding: 15,
+                    borderRadius: '8px',
+                    fontWeight: 500,
+                    boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
+                  }}
                 >
-                  <div className="flex items-center">
-                    <Avatar
-                      className="mr-3"
-                      size="medium"
-                      color="blue"
-                    >
-                      <IconCoinMoneyStroked />
-                    </Avatar>
-                    <div>
-                      <div className="text-sm text-gray-500">{t('消耗额度')}</div>
-                      <div className="text-xl font-semibold">{renderQuota(stat.quota)}</div>
-                    </div>
-                  </div>
-                </Card>
-
-                <Card
-                  shadows='hover'
-                  className="bg-cyan-50 border-0 !rounded-2xl w-full"
-                  headerLine={false}
+                  {t('消耗额度')}: {renderQuota(stat.quota)}
+                </Tag>
+                <Tag
+                  color='pink'
+                  size='large'
+                  style={{
+                    padding: 15,
+                    borderRadius: '8px',
+                    fontWeight: 500,
+                    boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
+                  }}
                 >
-                  <div className="flex items-center">
-                    <Avatar
-                      className="mr-3"
-                      size="medium"
-                      color="pink"
-                    >
-                      <IconPulse />
-                    </Avatar>
-                    <div>
-                      <div className="text-sm text-gray-500">RPM</div>
-                      <div className="text-xl font-semibold">{stat.rpm || 0}</div>
-                    </div>
-                  </div>
-                </Card>
-
-                <Card
-                  shadows='hover'
-                  className="bg-violet-50 border-0 !rounded-2xl w-full"
-                  headerLine={false}
+                  RPM: {stat.rpm}
+                </Tag>
+                <Tag
+                  color='white'
+                  size='large'
+                  style={{
+                    padding: 15,
+                    border: 'none',
+                    boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
+                    borderRadius: '8px',
+                    fontWeight: 500,
+                  }}
                 >
-                  <div className="flex items-center">
-                    <Avatar
-                      className="mr-3 shadow-md"
-                      size="medium"
-                      color="white"
-                      style={{
-                        boxShadow: 'var(--semi-shadow-elevated)'
-                      }}
-                    >
-                      <IconTypograph />
-                    </Avatar>
-                    <div>
-                      <div className="text-sm text-gray-500">TPM</div>
-                      <div className="text-xl font-semibold">{stat.tpm || 0}</div>
-                    </div>
-                  </div>
-                </Card>
-              </div>
+                  TPM: {stat.tpm}
+                </Tag>
+              </Space>
             </Spin>
 
             <Divider margin="12px" />