From af9785f566405501dfadbfcbe285408d71ddbc77 Mon Sep 17 00:00:00 2001
From: YoVinchen <gzh298255@gmail.com>
Date: Thu, 4 Dec 2025 11:33:33 +0800
Subject: [PATCH] fix(ui): restore card borders in usage statistics panels

Restore proper card styling for ModelTestConfigPanel and PricingConfigPanel by adding back border and rounded-lg classes. The transparent background styling was causing visual inconsistency.

Changes:
- Replace border-none bg-transparent shadow-none with border rounded-lg
- Apply to both loading and error states for consistency
- Format TypeScript code for better readability
- Break long function signatures across multiple lines

This ensures the usage statistics panels have consistent visual appearance with proper borders and rounded corners.
---
 src/components/usage/ModelTestConfigPanel.tsx | 8 +++++---
 src/components/usage/PricingConfigPanel.tsx   | 6 +++---
 src/hooks/useModelTest.ts                     | 5 ++++-
 src/lib/api/model-test.ts                     | 4 +++-
 4 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/src/components/usage/ModelTestConfigPanel.tsx b/src/components/usage/ModelTestConfigPanel.tsx
index 3f72c6863..1d880cdb0 100644
--- a/src/components/usage/ModelTestConfigPanel.tsx
+++ b/src/components/usage/ModelTestConfigPanel.tsx
@@ -56,7 +56,9 @@ export function ModelTestConfigPanel() {
       await saveModelTestConfig(config);
       toast.success(t("modelTest.configSaved", "模型测试配置已保存"));
     } catch (e) {
-      toast.error(t("modelTest.configSaveFailed", "保存失败") + ": " + String(e));
+      toast.error(
+        t("modelTest.configSaveFailed", "保存失败") + ": " + String(e),
+      );
     } finally {
       setIsSaving(false);
     }
@@ -64,7 +66,7 @@ export function ModelTestConfigPanel() {
 
   if (isLoading) {
     return (
-      <Card className="border-none bg-transparent p-0 shadow-none">
+      <Card className="border rounded-lg">
         <CardHeader
           className="cursor-pointer"
           onClick={() => setIsExpanded(!isExpanded)}
@@ -81,7 +83,7 @@ export function ModelTestConfigPanel() {
   }
 
   return (
-    <Card className="border-none bg-transparent shadow-none">
+    <Card className="border rounded-lg">
       <CardHeader
         className="cursor-pointer select-none"
         onClick={() => setIsExpanded(!isExpanded)}
diff --git a/src/components/usage/PricingConfigPanel.tsx b/src/components/usage/PricingConfigPanel.tsx
index f39111c4a..fb49bf1c9 100644
--- a/src/components/usage/PricingConfigPanel.tsx
+++ b/src/components/usage/PricingConfigPanel.tsx
@@ -61,7 +61,7 @@ export function PricingConfigPanel() {
 
   if (isLoading) {
     return (
-      <Card className="border-none bg-transparent p-0 shadow-none">
+      <Card className="border rounded-lg">
         <CardHeader
           className="cursor-pointer"
           onClick={() => setIsExpanded(!isExpanded)}
@@ -79,7 +79,7 @@ export function PricingConfigPanel() {
 
   if (error) {
     return (
-      <Card className="border-none bg-transparent p-0 shadow-none">
+      <Card className="border rounded-lg">
         <CardHeader
           className="cursor-pointer"
           onClick={() => setIsExpanded(!isExpanded)}
@@ -110,7 +110,7 @@ export function PricingConfigPanel() {
   }
 
   return (
-    <Card className="border-none bg-transparent shadow-none">
+    <Card className="border rounded-lg">
       <CardHeader
         className="cursor-pointer select-none"
         onClick={() => setIsExpanded(!isExpanded)}
diff --git a/src/hooks/useModelTest.ts b/src/hooks/useModelTest.ts
index c049e061c..f79e61faf 100644
--- a/src/hooks/useModelTest.ts
+++ b/src/hooks/useModelTest.ts
@@ -9,7 +9,10 @@ export function useModelTest(appId: AppId) {
   const [testingIds, setTestingIds] = useState<Set<string>>(new Set());
 
   const testProvider = useCallback(
-    async (providerId: string, providerName: string): Promise<ModelTestResult | null> => {
+    async (
+      providerId: string,
+      providerName: string,
+    ): Promise<ModelTestResult | null> => {
       setTestingIds((prev) => new Set(prev).add(providerId));
 
       try {
diff --git a/src/lib/api/model-test.ts b/src/lib/api/model-test.ts
index 64edb7f35..1e0e698e6 100644
--- a/src/lib/api/model-test.ts
+++ b/src/lib/api/model-test.ts
@@ -82,6 +82,8 @@ export async function getModelTestLogs(
 /**
  * 清理旧的测试日志
  */
-export async function cleanupModelTestLogs(keepCount?: number): Promise<number> {
+export async function cleanupModelTestLogs(
+  keepCount?: number,
+): Promise<number> {
   return invoke("cleanup_model_test_logs", { keepCount });
 }