refactor(settings): split Advanced tab into Proxy tab and move Pricing to Usage

Extract proxy-related accordion items (Local Proxy, Failover, Rectifier,
Global Outbound Proxy) into a dedicated Proxy tab via ProxyTabContent
component. Move Pricing config panel to UsageDashboard as a collapsible
accordion. This reduces SettingsPage from ~716 to ~426 lines and improves
settings discoverability with a 5-tab layout: General | Proxy | Advanced |
Usage | About.

src/components/settings/ProxyTabContent.tsx

@@ -0,0 +1,274 @@
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { Server, Activity, ChevronDown, Zap, Globe } from "lucide-react";
+import { motion } from "framer-motion";
+import { useTranslation } from "react-i18next";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { Switch } from "@/components/ui/switch";
+import { ToggleRow } from "@/components/ui/toggle-row";
+import { Badge } from "@/components/ui/badge";
+import { ProxyPanel } from "@/components/proxy";
+import { AutoFailoverConfigPanel } from "@/components/proxy/AutoFailoverConfigPanel";
+import { FailoverQueueManager } from "@/components/proxy/FailoverQueueManager";
+import { RectifierConfigPanel } from "@/components/settings/RectifierConfigPanel";
+import { GlobalProxySettings } from "@/components/settings/GlobalProxySettings";
+import { useProxyStatus } from "@/hooks/useProxyStatus";
+import type { SettingsFormState } from "@/hooks/useSettings";
+
+interface ProxyTabContentProps {
+  settings: SettingsFormState;
+  onAutoSave: (updates: Partial<SettingsFormState>) => Promise<void>;
+}
+
+export function ProxyTabContent({
+  settings,
+  onAutoSave,
+}: ProxyTabContentProps) {
+  const { t } = useTranslation();
+
+  const {
+    isRunning,
+    startProxyServer,
+    stopWithRestore,
+    isPending: isProxyPending,
+  } = useProxyStatus();
+
+  const handleToggleProxy = async (checked: boolean) => {
+    try {
+      if (!checked) {
+        await stopWithRestore();
+      } else {
+        await startProxyServer();
+      }
+    } catch (error) {
+      console.error("Toggle proxy failed:", error);
+    }
+  };
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 10 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.3 }}
+      className="space-y-4"
+    >
+      <Accordion type="multiple" defaultValue={[]} className="w-full space-y-4">
+        {/* Local Proxy */}
+        <AccordionItem
+          value="proxy"
+          className="rounded-xl glass-card overflow-hidden [&[data-state=open]>.accordion-header]:bg-muted/50"
+        >
+          <AccordionPrimitive.Header className="accordion-header flex items-center justify-between px-6 py-4 hover:bg-muted/50">
+            <AccordionPrimitive.Trigger className="flex flex-1 items-center justify-between hover:no-underline [&[data-state=open]>svg]:rotate-180">
+              <div className="flex items-center gap-3">
+                <Server className="h-5 w-5 text-green-500" />
+                <div className="text-left">
+                  <h3 className="text-base font-semibold">
+                    {t("settings.advanced.proxy.title")}
+                  </h3>
+                  <p className="text-sm text-muted-foreground font-normal">
+                    {t("settings.advanced.proxy.description")}
+                  </p>
+                </div>
+              </div>
+              <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
+            </AccordionPrimitive.Trigger>
+
+            <div className="flex items-center gap-4 pl-4">
+              <Badge
+                variant={isRunning ? "default" : "secondary"}
+                className="gap-1.5 h-6"
+              >
+                <Activity
+                  className={`h-3 w-3 ${isRunning ? "animate-pulse" : ""}`}
+                />
+                {isRunning
+                  ? t("settings.advanced.proxy.running")
+                  : t("settings.advanced.proxy.stopped")}
+              </Badge>
+              <Switch
+                checked={isRunning}
+                onCheckedChange={handleToggleProxy}
+                disabled={isProxyPending}
+              />
+            </div>
+          </AccordionPrimitive.Header>
+          <AccordionContent className="px-6 pb-6 pt-4 border-t border-border/50">
+            <ToggleRow
+              icon={<Zap className="h-4 w-4 text-green-500" />}
+              title={t("settings.advanced.proxy.enableFeature")}
+              description={t(
+                "settings.advanced.proxy.enableFeatureDescription",
+              )}
+              checked={settings?.enableLocalProxy ?? false}
+              onCheckedChange={(checked) =>
+                onAutoSave({ enableLocalProxy: checked })
+              }
+            />
+            <div className="mt-4">
+              <ProxyPanel />
+            </div>
+          </AccordionContent>
+        </AccordionItem>
+
+        {/* Auto Failover */}
+        <AccordionItem
+          value="failover"
+          className="rounded-xl glass-card overflow-hidden"
+        >
+          <AccordionTrigger className="px-6 py-4 hover:no-underline hover:bg-muted/50 data-[state=open]:bg-muted/50">
+            <div className="flex items-center gap-3">
+              <Activity className="h-5 w-5 text-orange-500" />
+              <div className="text-left">
+                <h3 className="text-base font-semibold">
+                  {t("settings.advanced.failover.title")}
+                </h3>
+                <p className="text-sm text-muted-foreground font-normal">
+                  {t("settings.advanced.failover.description")}
+                </p>
+              </div>
+            </div>
+          </AccordionTrigger>
+          <AccordionContent className="px-6 pb-6 pt-4 border-t border-border/50">
+            <div className="space-y-6">
+              {!isRunning && (
+                <div className="p-4 rounded-lg bg-yellow-500/10 border border-yellow-500/20">
+                  <p className="text-sm text-yellow-600 dark:text-yellow-400">
+                    {t("proxy.failover.proxyRequired", {
+                      defaultValue: "需要先启动代理服务才能配置故障转移",
+                    })}
+                  </p>
+                </div>
+              )}
+
+              <Tabs defaultValue="claude" className="w-full">
+                <TabsList className="grid w-full grid-cols-3">
+                  <TabsTrigger value="claude">Claude</TabsTrigger>
+                  <TabsTrigger value="codex">Codex</TabsTrigger>
+                  <TabsTrigger value="gemini">Gemini</TabsTrigger>
+                </TabsList>
+                <TabsContent value="claude" className="mt-4 space-y-6">
+                  <div className="space-y-4">
+                    <div>
+                      <h4 className="text-sm font-semibold">
+                        {t("proxy.failoverQueue.title")}
+                      </h4>
+                      <p className="text-xs text-muted-foreground">
+                        {t("proxy.failoverQueue.description")}
+                      </p>
+                    </div>
+                    <FailoverQueueManager
+                      appType="claude"
+                      disabled={!isRunning}
+                    />
+                  </div>
+                  <div className="border-t border-border/50 pt-6">
+                    <AutoFailoverConfigPanel
+                      appType="claude"
+                      disabled={!isRunning}
+                    />
+                  </div>
+                </TabsContent>
+                <TabsContent value="codex" className="mt-4 space-y-6">
+                  <div className="space-y-4">
+                    <div>
+                      <h4 className="text-sm font-semibold">
+                        {t("proxy.failoverQueue.title")}
+                      </h4>
+                      <p className="text-xs text-muted-foreground">
+                        {t("proxy.failoverQueue.description")}
+                      </p>
+                    </div>
+                    <FailoverQueueManager
+                      appType="codex"
+                      disabled={!isRunning}
+                    />
+                  </div>
+                  <div className="border-t border-border/50 pt-6">
+                    <AutoFailoverConfigPanel
+                      appType="codex"
+                      disabled={!isRunning}
+                    />
+                  </div>
+                </TabsContent>
+                <TabsContent value="gemini" className="mt-4 space-y-6">
+                  <div className="space-y-4">
+                    <div>
+                      <h4 className="text-sm font-semibold">
+                        {t("proxy.failoverQueue.title")}
+                      </h4>
+                      <p className="text-xs text-muted-foreground">
+                        {t("proxy.failoverQueue.description")}
+                      </p>
+                    </div>
+                    <FailoverQueueManager
+                      appType="gemini"
+                      disabled={!isRunning}
+                    />
+                  </div>
+                  <div className="border-t border-border/50 pt-6">
+                    <AutoFailoverConfigPanel
+                      appType="gemini"
+                      disabled={!isRunning}
+                    />
+                  </div>
+                </TabsContent>
+              </Tabs>
+            </div>
+          </AccordionContent>
+        </AccordionItem>
+
+        {/* Rectifier */}
+        <AccordionItem
+          value="rectifier"
+          className="rounded-xl glass-card overflow-hidden"
+        >
+          <AccordionTrigger className="px-6 py-4 hover:no-underline hover:bg-muted/50 data-[state=open]:bg-muted/50">
+            <div className="flex items-center gap-3">
+              <Zap className="h-5 w-5 text-purple-500" />
+              <div className="text-left">
+                <h3 className="text-base font-semibold">
+                  {t("settings.advanced.rectifier.title")}
+                </h3>
+                <p className="text-sm text-muted-foreground font-normal">
+                  {t("settings.advanced.rectifier.description")}
+                </p>
+              </div>
+            </div>
+          </AccordionTrigger>
+          <AccordionContent className="px-6 pb-6 pt-4 border-t border-border/50">
+            <RectifierConfigPanel />
+          </AccordionContent>
+        </AccordionItem>
+
+        {/* Global Outbound Proxy */}
+        <AccordionItem
+          value="globalProxy"
+          className="rounded-xl glass-card overflow-hidden"
+        >
+          <AccordionTrigger className="px-6 py-4 hover:no-underline hover:bg-muted/50 data-[state=open]:bg-muted/50">
+            <div className="flex items-center gap-3">
+              <Globe className="h-5 w-5 text-cyan-500" />
+              <div className="text-left">
+                <h3 className="text-base font-semibold">
+                  {t("settings.advanced.globalProxy.title")}
+                </h3>
+                <p className="text-sm text-muted-foreground font-normal">
+                  {t("settings.advanced.globalProxy.description")}
+                </p>
+              </div>
+            </div>
+          </AccordionTrigger>
+          <AccordionContent className="px-6 pb-6 pt-4 border-t border-border/50">
+            <GlobalProxySettings />
+          </AccordionContent>
+        </AccordionItem>
+      </Accordion>
+    </motion.div>
+  );
+}

src/components/settings/SettingsPage.tsx

@@ -4,16 +4,9 @@ import {
   Loader2,
   Save,
   FolderSearch,
-  Activity,
-  Coins,
   Database,
-  Server,
-  ChevronDown,
-  Zap,
-  Globe,
   ScrollText,
 } from "lucide-react";
-import * as AccordionPrimitive from "@radix-ui/react-accordion";
 import { toast } from "sonner";
 import {
   Dialog,
@@ -41,24 +34,15 @@ import { DirectorySettings } from "@/components/settings/DirectorySettings";
 import { ImportExportSection } from "@/components/settings/ImportExportSection";
 import { WebdavSyncSection } from "@/components/settings/WebdavSyncSection";
 import { AboutSection } from "@/components/settings/AboutSection";
-import { GlobalProxySettings } from "@/components/settings/GlobalProxySettings";
-import { ProxyPanel } from "@/components/proxy";
-import { PricingConfigPanel } from "@/components/usage/PricingConfigPanel";
+import { ProxyTabContent } from "@/components/settings/ProxyTabContent";
 // Hidden: stream check feature disabled
 // import { ModelTestConfigPanel } from "@/components/usage/ModelTestConfigPanel";
-import { AutoFailoverConfigPanel } from "@/components/proxy/AutoFailoverConfigPanel";
-import { FailoverQueueManager } from "@/components/proxy/FailoverQueueManager";
 import { UsageDashboard } from "@/components/usage/UsageDashboard";
-import { RectifierConfigPanel } from "@/components/settings/RectifierConfigPanel";
 import { LogConfigPanel } from "@/components/settings/LogConfigPanel";
 import { useSettings } from "@/hooks/useSettings";
 import { useImportExport } from "@/hooks/useImportExport";
 import { useTranslation } from "react-i18next";
 import type { SettingsFormState } from "@/hooks/useSettings";
-import { Switch } from "@/components/ui/switch";
-import { ToggleRow } from "@/components/ui/toggle-row";
-import { Badge } from "@/components/ui/badge";
-import { useProxyStatus } from "@/hooks/useProxyStatus";
 
 interface SettingsDialogProps {
   open: boolean;
@@ -190,25 +174,6 @@ export function SettingsPage({
 
   const isBusy = useMemo(() => isLoading && !settings, [isLoading, settings]);
 
-  const {
-    isRunning,
-    startProxyServer,
-    stopWithRestore,
-    isPending: isProxyPending,
-  } = useProxyStatus();
-
-  const handleToggleProxy = async (checked: boolean) => {
-    try {
-      if (!checked) {
-        await stopWithRestore();
-      } else {
-        await startProxyServer();
-      }
-    } catch (error) {
-      console.error("Toggle proxy failed:", error);
-    }
-  };
-
   return (
     <div className="flex flex-col h-full overflow-hidden px-6">
       {isBusy ? (
@@ -221,10 +186,11 @@ export function SettingsPage({
           onValueChange={setActiveTab}
           className="flex flex-col h-full"
         >
-          <TabsList className="grid w-full grid-cols-4 mb-6 glass rounded-lg">
+          <TabsList className="grid w-full grid-cols-5 mb-6 glass rounded-lg">
             <TabsTrigger value="general">
               {t("settings.tabGeneral")}
             </TabsTrigger>
+            <TabsTrigger value="proxy">{t("settings.tabProxy")}</TabsTrigger>
             <TabsTrigger value="advanced">
               {t("settings.tabAdvanced")}
             </TabsTrigger>
@@ -271,6 +237,15 @@ export function SettingsPage({
                 ) : null}
               </TabsContent>
 
+              <TabsContent value="proxy" className="space-y-6 mt-0 pb-4">
+                {settings ? (
+                  <ProxyTabContent
+                    settings={settings}
+                    onAutoSave={handleAutoSave}
+                  />
+                ) : null}
+              </TabsContent>
+
               <TabsContent value="advanced" className="space-y-6 mt-0 pb-4">
                 {settings ? (
                   <motion.div
@@ -319,271 +294,6 @@ export function SettingsPage({
                         </AccordionContent>
                       </AccordionItem>
 
-                      <AccordionItem
-                        value="proxy"
-                        className="rounded-xl glass-card overflow-hidden [&[data-state=open]>.accordion-header]:bg-muted/50"
-                      >
-                        <AccordionPrimitive.Header className="accordion-header flex items-center justify-between px-6 py-4 hover:bg-muted/50">
-                          <AccordionPrimitive.Trigger className="flex flex-1 items-center justify-between hover:no-underline [&[data-state=open]>svg]:rotate-180">
-                            <div className="flex items-center gap-3">
-                              <Server className="h-5 w-5 text-green-500" />
-                              <div className="text-left">
-                                <h3 className="text-base font-semibold">
-                                  {t("settings.advanced.proxy.title")}
-                                </h3>
-                                <p className="text-sm text-muted-foreground font-normal">
-                                  {t("settings.advanced.proxy.description")}
-                                </p>
-                              </div>
-                            </div>
-                            <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
-                          </AccordionPrimitive.Trigger>
-
-                          <div className="flex items-center gap-4 pl-4">
-                            <Badge
-                              variant={isRunning ? "default" : "secondary"}
-                              className="gap-1.5 h-6"
-                            >
-                              <Activity
-                                className={`h-3 w-3 ${isRunning ? "animate-pulse" : ""}`}
-                              />
-                              {isRunning
-                                ? t("settings.advanced.proxy.running")
-                                : t("settings.advanced.proxy.stopped")}
-                            </Badge>
-                            <Switch
-                              checked={isRunning}
-                              onCheckedChange={handleToggleProxy}
-                              disabled={isProxyPending}
-                            />
-                          </div>
-                        </AccordionPrimitive.Header>
-                        <AccordionContent className="px-6 pb-6 pt-4 border-t border-border/50">
-                          <ToggleRow
-                            icon={<Zap className="h-4 w-4 text-green-500" />}
-                            title={t("settings.advanced.proxy.enableFeature")}
-                            description={t(
-                              "settings.advanced.proxy.enableFeatureDescription",
-                            )}
-                            checked={settings?.enableLocalProxy ?? false}
-                            onCheckedChange={(checked) =>
-                              handleAutoSave({ enableLocalProxy: checked })
-                            }
-                          />
-                          <div className="mt-4">
-                            <ProxyPanel />
-                          </div>
-                        </AccordionContent>
-                      </AccordionItem>
-
-                      <AccordionItem
-                        value="failover"
-                        className="rounded-xl glass-card overflow-hidden"
-                      >
-                        <AccordionTrigger className="px-6 py-4 hover:no-underline hover:bg-muted/50 data-[state=open]:bg-muted/50">
-                          <div className="flex items-center gap-3">
-                            <Activity className="h-5 w-5 text-orange-500" />
-                            <div className="text-left">
-                              <h3 className="text-base font-semibold">
-                                {t("settings.advanced.failover.title")}
-                              </h3>
-                              <p className="text-sm text-muted-foreground font-normal">
-                                {t("settings.advanced.failover.description")}
-                              </p>
-                            </div>
-                          </div>
-                        </AccordionTrigger>
-                        <AccordionContent className="px-6 pb-6 pt-4 border-t border-border/50">
-                          <div className="space-y-6">
-                            {/* 代理未运行时的提示 */}
-                            {!isRunning && (
-                              <div className="p-4 rounded-lg bg-yellow-500/10 border border-yellow-500/20">
-                                <p className="text-sm text-yellow-600 dark:text-yellow-400">
-                                  {t("proxy.failover.proxyRequired", {
-                                    defaultValue:
-                                      "需要先启动代理服务才能配置故障转移",
-                                  })}
-                                </p>
-                              </div>
-                            )}
-
-                            {/* 故障转移设置 - 按应用分组 */}
-                            <Tabs defaultValue="claude" className="w-full">
-                              <TabsList className="grid w-full grid-cols-3">
-                                <TabsTrigger value="claude">Claude</TabsTrigger>
-                                <TabsTrigger value="codex">Codex</TabsTrigger>
-                                <TabsTrigger value="gemini">Gemini</TabsTrigger>
-                              </TabsList>
-                              <TabsContent
-                                value="claude"
-                                className="mt-4 space-y-6"
-                              >
-                                <div className="space-y-4">
-                                  <div>
-                                    <h4 className="text-sm font-semibold">
-                                      {t("proxy.failoverQueue.title")}
-                                    </h4>
-                                    <p className="text-xs text-muted-foreground">
-                                      {t("proxy.failoverQueue.description")}
-                                    </p>
-                                  </div>
-                                  <FailoverQueueManager
-                                    appType="claude"
-                                    disabled={!isRunning}
-                                  />
-                                </div>
-                                <div className="border-t border-border/50 pt-6">
-                                  <AutoFailoverConfigPanel
-                                    appType="claude"
-                                    disabled={!isRunning}
-                                  />
-                                </div>
-                              </TabsContent>
-                              <TabsContent
-                                value="codex"
-                                className="mt-4 space-y-6"
-                              >
-                                <div className="space-y-4">
-                                  <div>
-                                    <h4 className="text-sm font-semibold">
-                                      {t("proxy.failoverQueue.title")}
-                                    </h4>
-                                    <p className="text-xs text-muted-foreground">
-                                      {t("proxy.failoverQueue.description")}
-                                    </p>
-                                  </div>
-                                  <FailoverQueueManager
-                                    appType="codex"
-                                    disabled={!isRunning}
-                                  />
-                                </div>
-                                <div className="border-t border-border/50 pt-6">
-                                  <AutoFailoverConfigPanel
-                                    appType="codex"
-                                    disabled={!isRunning}
-                                  />
-                                </div>
-                              </TabsContent>
-                              <TabsContent
-                                value="gemini"
-                                className="mt-4 space-y-6"
-                              >
-                                <div className="space-y-4">
-                                  <div>
-                                    <h4 className="text-sm font-semibold">
-                                      {t("proxy.failoverQueue.title")}
-                                    </h4>
-                                    <p className="text-xs text-muted-foreground">
-                                      {t("proxy.failoverQueue.description")}
-                                    </p>
-                                  </div>
-                                  <FailoverQueueManager
-                                    appType="gemini"
-                                    disabled={!isRunning}
-                                  />
-                                </div>
-                                <div className="border-t border-border/50 pt-6">
-                                  <AutoFailoverConfigPanel
-                                    appType="gemini"
-                                    disabled={!isRunning}
-                                  />
-                                </div>
-                              </TabsContent>
-                            </Tabs>
-                          </div>
-                        </AccordionContent>
-                      </AccordionItem>
-
-                      <AccordionItem
-                        value="rectifier"
-                        className="rounded-xl glass-card overflow-hidden"
-                      >
-                        <AccordionTrigger className="px-6 py-4 hover:no-underline hover:bg-muted/50 data-[state=open]:bg-muted/50">
-                          <div className="flex items-center gap-3">
-                            <Zap className="h-5 w-5 text-purple-500" />
-                            <div className="text-left">
-                              <h3 className="text-base font-semibold">
-                                {t("settings.advanced.rectifier.title")}
-                              </h3>
-                              <p className="text-sm text-muted-foreground font-normal">
-                                {t("settings.advanced.rectifier.description")}
-                              </p>
-                            </div>
-                          </div>
-                        </AccordionTrigger>
-                        <AccordionContent className="px-6 pb-6 pt-4 border-t border-border/50">
-                          <RectifierConfigPanel />
-                        </AccordionContent>
-                      </AccordionItem>
-
-                      {/* Hidden: stream check feature disabled
-                      <AccordionItem
-                        value="test"
-                        className="rounded-xl glass-card overflow-hidden"
-                      >
-                        <AccordionTrigger className="px-6 py-4 hover:no-underline hover:bg-muted/50 data-[state=open]:bg-muted/50">
-                          <div className="flex items-center gap-3">
-                            <Activity className="h-5 w-5 text-indigo-500" />
-                            <div className="text-left">
-                              <h3 className="text-base font-semibold">
-                                {t("settings.advanced.modelTest.title")}
-                              </h3>
-                              <p className="text-sm text-muted-foreground font-normal">
-                                {t("settings.advanced.modelTest.description")}
-                              </p>
-                            </div>
-                          </div>
-                        </AccordionTrigger>
-                        <AccordionContent className="px-6 pb-6 pt-4 border-t border-border/50">
-                          <ModelTestConfigPanel />
-                        </AccordionContent>
-                      </AccordionItem>
-                      */}
-
-                      <AccordionItem
-                        value="pricing"
-                        className="rounded-xl glass-card overflow-hidden"
-                      >
-                        <AccordionTrigger className="px-6 py-4 hover:no-underline hover:bg-muted/50 data-[state=open]:bg-muted/50">
-                          <div className="flex items-center gap-3">
-                            <Coins className="h-5 w-5 text-yellow-500" />
-                            <div className="text-left">
-                              <h3 className="text-base font-semibold">
-                                {t("settings.advanced.pricing.title")}
-                              </h3>
-                              <p className="text-sm text-muted-foreground font-normal">
-                                {t("settings.advanced.pricing.description")}
-                              </p>
-                            </div>
-                          </div>
-                        </AccordionTrigger>
-                        <AccordionContent className="px-6 pb-6 pt-4 border-t border-border/50">
-                          <PricingConfigPanel />
-                        </AccordionContent>
-                      </AccordionItem>
-
-                      <AccordionItem
-                        value="globalProxy"
-                        className="rounded-xl glass-card overflow-hidden"
-                      >
-                        <AccordionTrigger className="px-6 py-4 hover:no-underline hover:bg-muted/50 data-[state=open]:bg-muted/50">
-                          <div className="flex items-center gap-3">
-                            <Globe className="h-5 w-5 text-cyan-500" />
-                            <div className="text-left">
-                              <h3 className="text-base font-semibold">
-                                {t("settings.advanced.globalProxy.title")}
-                              </h3>
-                              <p className="text-sm text-muted-foreground font-normal">
-                                {t("settings.advanced.globalProxy.description")}
-                              </p>
-                            </div>
-                          </div>
-                        </AccordionTrigger>
-                        <AccordionContent className="px-6 pb-6 pt-4 border-t border-border/50">
-                          <GlobalProxySettings />
-                        </AccordionContent>
-                      </AccordionItem>
-
                       <AccordionItem
                         value="data"
                         className="rounded-xl glass-card overflow-hidden"

src/components/usage/UsageDashboard.tsx

@@ -8,10 +8,23 @@ import { ProviderStatsTable } from "./ProviderStatsTable";
 import { ModelStatsTable } from "./ModelStatsTable";
 import type { TimeRange } from "@/types/usage";
 import { motion } from "framer-motion";
-import { BarChart3, ListFilter, Activity, RefreshCw } from "lucide-react";
+import {
+  BarChart3,
+  ListFilter,
+  Activity,
+  RefreshCw,
+  Coins,
+} from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { useQueryClient } from "@tanstack/react-query";
 import { usageKeys } from "@/lib/query/usage";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+import { PricingConfigPanel } from "@/components/usage/PricingConfigPanel";
 
 export function UsageDashboard() {
   const { t } = useTranslation();
@@ -129,6 +142,31 @@ export function UsageDashboard() {
           </motion.div>
         </Tabs>
       </div>
+
+      {/* Pricing Configuration */}
+      <Accordion type="multiple" defaultValue={[]} className="w-full space-y-4">
+        <AccordionItem
+          value="pricing"
+          className="rounded-xl glass-card overflow-hidden"
+        >
+          <AccordionTrigger className="px-6 py-4 hover:no-underline hover:bg-muted/50 data-[state=open]:bg-muted/50">
+            <div className="flex items-center gap-3">
+              <Coins className="h-5 w-5 text-yellow-500" />
+              <div className="text-left">
+                <h3 className="text-base font-semibold">
+                  {t("settings.advanced.pricing.title")}
+                </h3>
+                <p className="text-sm text-muted-foreground font-normal">
+                  {t("settings.advanced.pricing.description")}
+                </p>
+              </div>
+            </div>
+          </AccordionTrigger>
+          <AccordionContent className="px-6 pb-6 pt-4 border-t border-border/50">
+            <PricingConfigPanel />
+          </AccordionContent>
+        </AccordionItem>
+      </Accordion>
     </motion.div>
   );
 }

src/i18n/locales/en.json

@@ -187,6 +187,7 @@
     "general": "General",
     "tabGeneral": "General",
     "tabAdvanced": "Advanced",
+    "tabProxy": "Proxy",
     "advanced": {
       "configDir": {
         "title": "Configuration Directory",

src/i18n/locales/ja.json

@@ -187,6 +187,7 @@
     "general": "一般",
     "tabGeneral": "一般",
     "tabAdvanced": "詳細",
+    "tabProxy": "プロキシ",
     "advanced": {
       "configDir": {
         "title": "設定ディレクトリ",

src/i18n/locales/zh.json

@@ -187,6 +187,7 @@
     "general": "通用",
     "tabGeneral": "通用",
     "tabAdvanced": "高级",
+    "tabProxy": "代理",
     "advanced": {
       "configDir": {
         "title": "配置文件目录",