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

@@ -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)}

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)}

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 {

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 });
 }