fix(ui): integrate usage dashboard and fix type errors

Add usage dashboard tab to settings page.
Fix UsageScriptModal TypeScript type annotations.

src/components/UsageScriptModal.tsx

@@ -2,7 +2,7 @@ import React, { useState } from "react";
 import { Play, Wand2, Eye, EyeOff, Save } from "lucide-react";
 import { toast } from "sonner";
 import { useTranslation } from "react-i18next";
-import { Provider, UsageScript } from "@/types";
+import { Provider, UsageScript, UsageData } from "@/types";
 import { usageApi, type AppId } from "@/lib/api";
 import JsonEditor from "./JsonEditor";
 import * as prettier from "prettier/standalone";
@@ -220,7 +220,7 @@ const UsageScriptModal: React.FC<UsageScriptModalProps> = ({
       );
       if (result.success && result.data && result.data.length > 0) {
         const summary = result.data
-          .map((plan) => {
+          .map((plan: UsageData) => {
             const planInfo = plan.planName ? `[${plan.planName}]` : "";
             return `${planInfo} ${t("usage.remaining")} ${plan.remaining} ${plan.unit}`;
           })

src/components/settings/SettingsPage.tsx

@@ -18,6 +18,8 @@ import { DirectorySettings } from "@/components/settings/DirectorySettings";
 import { ImportExportSection } from "@/components/settings/ImportExportSection";
 import { AboutSection } from "@/components/settings/AboutSection";
 import { ProxyPanel } from "@/components/proxy";
+import { PricingConfigPanel } from "@/components/usage/PricingConfigPanel";
+import { UsageDashboard } from "@/components/usage/UsageDashboard";
 import { useSettings } from "@/hooks/useSettings";
 import { useImportExport } from "@/hooks/useImportExport";
 import { useTranslation } from "react-i18next";
@@ -163,13 +165,16 @@ export function SettingsPage({
           onValueChange={setActiveTab}
           className="flex flex-col h-full"
         >
-          <TabsList className="grid w-full grid-cols-3 mb-6 glass rounded-xl">
+          <TabsList className="grid w-full grid-cols-4 mb-6 glass rounded-xl">
             <TabsTrigger value="general">
               {t("settings.tabGeneral")}
             </TabsTrigger>
             <TabsTrigger value="advanced">
               {t("settings.tabAdvanced")}
             </TabsTrigger>
+            <TabsTrigger value="usage">
+              {t("usage.title", "使用统计")}
+            </TabsTrigger>
             <TabsTrigger value="about">{t("common.about")}</TabsTrigger>
           </TabsList>
 
@@ -210,6 +215,9 @@ export function SettingsPage({
                   {/* 代理服务面板 */}
                   <ProxyPanel />
 
+                  {/* 模型定价配置 */}
+                  <PricingConfigPanel />
+
                   <ImportExportSection
                     status={importStatus}
                     selectedFile={selectedFile}
@@ -247,6 +255,10 @@ export function SettingsPage({
             <TabsContent value="about" className="mt-0">
               <AboutSection isPortable={isPortable} />
             </TabsContent>
+
+            <TabsContent value="usage" className="mt-0">
+              <UsageDashboard />
+            </TabsContent>
           </div>
         </Tabs>
       )}