From 635bfd4aba5e68453fc1518f08c49de431c007f2 Mon Sep 17 00:00:00 2001
From: t0ng7u <dev@aiass.cc>
Date: Sat, 19 Jul 2025 03:43:35 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20fix(cardpro):=20Keep=20actions=20&?=
 =?UTF-8?q?=20search=20areas=20mounted=20on=20mobile=20to=20auto-load=20RP?=
 =?UTF-8?q?M/TPM?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This commit addresses an issue where RPM and TPM statistics did not load automatically on mobile devices.

Key changes
• Replaced conditional rendering with persistent rendering of `actionsArea` and `searchArea` in `CardPro` and applied the `hidden` CSS class when the sections should be concealed.
• Ensures internal hooks (e.g. `useUsageLogsData`) always run, allowing stats to be fetched without requiring the user to tap “Show Actions”.
• Maintains existing desktop behaviour; only mobile handling is affected.

Files updated
• `web/src/components/common/ui/CardPro.js`

Result
Mobile users now see up-to-date RPM/TPM (and other statistics) immediately after page load, improving usability and consistency with the desktop experience.
---
 web/src/components/common/ui/CardPro.js | 34 ++++++++++++-------------
 1 file changed, 17 insertions(+), 17 deletions(-)

diff --git a/web/src/components/common/ui/CardPro.js b/web/src/components/common/ui/CardPro.js
index 5c194c74..2c8f7d30 100644
--- a/web/src/components/common/ui/CardPro.js
+++ b/web/src/components/common/ui/CardPro.js
@@ -122,24 +122,24 @@ const CardPro = ({
         )}
 
         {/* 操作按钮和搜索表单的容器 */}
-        {/* 在移动端时根据showMobileActions状态控制显示，在桌面端时始终显示 */}
-        {(!isMobile || showMobileActions) && (
-          <div className="flex flex-col gap-2">
-            {/* 操作按钮区域 - 用于type1和type3 */}
-            {(type === 'type1' || type === 'type3') && actionsArea && (
-              <div className="w-full">
-                {actionsArea}
-              </div>
-            )}
+        <div
+          className={`flex flex-col gap-2 ${isMobile && !showMobileActions ? 'hidden' : ''}`}
+        >
+          {/* 操作按钮区域 - 用于type1和type3 */}
+          {(type === 'type1' || type === 'type3') && actionsArea && (
+            <div className="w-full">
+              {actionsArea}
+            </div>
+          )}
+
+          {/* 搜索表单区域 - 所有类型都可能有 */}
+          {searchArea && (
+            <div className="w-full">
+              {searchArea}
+            </div>
+          )}
+        </div>
 
-            {/* 搜索表单区域 - 所有类型都可能有 */}
-            {searchArea && (
-              <div className="w-full">
-                {searchArea}
-              </div>
-            )}
-          </div>
-        )}
       </div>
     );
   };