diff --git a/AGENTS.md b/AGENTS.md
index 97f5b6a..df9e7d8 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -61,7 +61,7 @@ last-updated: 2025-11-23
 - Linux 装 `libwebkit2gtk-4.1-dev`、`libjavascriptcoregtk-4.1-dev`、`patchelf` 等 Tauri v2 依赖；Windows 确保 WebView2 Runtime（先查注册表，winget 安装失败则回退微软官方静默安装包）；Node 20.19.0，Rust stable（含 clippy / rustfmt），启用 npm 与 cargo 缓存。
 - CI 未通过不得合并；缺少 dist 时会在 `npm run check` 内自动触发 `npm run build` 以满足 Clippy 输入。
 
-## 架构记忆（2025-11-21）
+## 架构记忆（2025-11-29）
 
 - `src-tauri/src/main.rs` 仅保留应用启动与托盘事件注册，所有 Tauri Commands 拆分到 `src-tauri/src/commands/*`，服务实现位于 `services/*`，核心设施放在 `core/*`（HTTP、日志、错误）。
 - **透明代理已重构为多工具架构**：
@@ -82,6 +82,14 @@ last-updated: 2025-11-23
 - 工具安装状态由 `services::tool::ToolStatusCache` 并行检测与缓存，`check_installations`/`refresh_tool_status` 命令复用该缓存；安装/更新成功后或手动刷新会清空命中的工具缓存。
 - UI 相关的托盘/窗口操作集中在 `src-tauri/src/ui/*`，其它模块如需最小化到托盘请调用 `ui::hide_window_to_tray` 等封装方法。
 - 新增 `TransparentProxyPage` 与会话数据库：`SESSION_MANAGER` 使用 SQLite 记录每个代理会话的 endpoint/API Key，前端可按工具启停代理、查看历史并启用「会话级 Endpoint 配置」开关。页面内的 `ProxyControlBar`、`ProxySettingsDialog`、`ProxyConfigDialog` 负责代理启停、配置切换、工具级设置并内建缺失配置提示。
+- **余额监控页面（BalancePage）**：
+  - 后端提供通用 `fetch_api` 命令（位于 `commands/api_commands.rs`），支持 GET/POST、自定义 headers、超时控制
+  - 前端使用 JavaScript `Function` 构造器执行用户自定义的 extractor 脚本（位于 `utils/extractor.ts`）
+  - 配置存储在 localStorage，API Key 仅保存在内存（`useApiKeys` hook）
+  - 支持预设模板（NewAPI、OpenAI、自定义），模板定义在 `templates/index.ts`
+  - `useBalanceMonitor` hook 负责自动刷新逻辑，支持配置级别的刷新间隔
+  - 配置表单（`ConfigFormDialog`）支持模板选择、代码编辑、静态 headers（JSON 格式）
+  - 卡片视图（`ConfigCard`）展示余额信息、使用比例、到期时间、错误提示
 
 ### 透明代理扩展指南
 
diff --git a/CLAUDE.md b/CLAUDE.md
index 448645e..ef76d2d 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -61,7 +61,7 @@ last-updated: 2025-11-23
 - Linux 装 `libwebkit2gtk-4.1-dev`、`libjavascriptcoregtk-4.1-dev`、`patchelf` 等 Tauri v2 依赖；Windows 确保 WebView2 Runtime（先查注册表，winget 安装失败则回退微软官方静默安装包）；Node 20.19.0，Rust stable（含 clippy / rustfmt），启用 npm 与 cargo 缓存。
 - CI 未通过不得合并；缺少 dist 时会在 `npm run check` 内自动触发 `npm run build` 以满足 Clippy 输入。
 
-## 架构记忆（2025-11-21）
+## 架构记忆（2025-11-29）
 
 - `src-tauri/src/main.rs` 仅保留应用启动与托盘事件注册，所有 Tauri Commands 拆分到 `src-tauri/src/commands/*`，服务实现位于 `services/*`，核心设施放在 `core/*`（HTTP、日志、错误）。
 - **透明代理已重构为多工具架构**：
@@ -82,6 +82,14 @@ last-updated: 2025-11-23
 - 工具安装状态由 `services::tool::ToolStatusCache` 并行检测与缓存，`check_installations`/`refresh_tool_status` 命令复用该缓存；安装/更新成功后或手动刷新会清空命中的工具缓存。
 - UI 相关的托盘/窗口操作集中在 `src-tauri/src/ui/*`，其它模块如需最小化到托盘请调用 `ui::hide_window_to_tray` 等封装方法。
 - 新增 `TransparentProxyPage` 与会话数据库：`SESSION_MANAGER` 使用 SQLite 记录每个代理会话的 endpoint/API Key，前端可按工具启停代理、查看历史并启用「会话级 Endpoint 配置」开关。页面内的 `ProxyControlBar`、`ProxySettingsDialog`、`ProxyConfigDialog` 负责代理启停、配置切换、工具级设置并内建缺失配置提示。
+- **余额监控页面（BalancePage）**：
+  - 后端提供通用 `fetch_api` 命令（位于 `commands/api_commands.rs`），支持 GET/POST、自定义 headers、超时控制
+  - 前端使用 JavaScript `Function` 构造器执行用户自定义的 extractor 脚本（位于 `utils/extractor.ts`）
+  - 配置存储在 localStorage，API Key 仅保存在内存（`useApiKeys` hook）
+  - 支持预设模板（NewAPI、OpenAI、自定义），模板定义在 `templates/index.ts`
+  - `useBalanceMonitor` hook 负责自动刷新逻辑，支持配置级别的刷新间隔
+  - 配置表单（`ConfigFormDialog`）支持模板选择、代码编辑、静态 headers（JSON 格式）
+  - 卡片视图（`ConfigCard`）展示余额信息、使用比例、到期时间、错误提示
 
 ### 透明代理扩展指南
 
diff --git a/src-tauri/src/commands/balance_commands.rs b/src-tauri/src/commands/balance_commands.rs
new file mode 100644
index 0000000..4490459
--- /dev/null
+++ b/src-tauri/src/commands/balance_commands.rs
@@ -0,0 +1,74 @@
+// 余额查询相关命令
+//
+// 支持通过自定义 API 端点和提取器脚本查询余额信息
+
+use ::duckcoding::http_client::build_client;
+use ::duckcoding::utils::config::apply_proxy_if_configured;
+use std::collections::HashMap;
+
+/// Tauri command: 通用 API 请求
+///
+/// # 参数
+/// - `endpoint`: API 端点 URL
+/// - `method`: HTTP 方法 (GET 或 POST)
+/// - `headers`: 请求头 (包含 Authorization 等)
+/// - `timeout_ms`: 可选的请求超时时间(毫秒)
+///
+/// # 返回
+/// 返回原始 JSON 响应，由前端执行 extractor 脚本提取余额信息
+#[tauri::command]
+pub async fn fetch_api(
+    endpoint: String,
+    method: String,
+    headers: HashMap<String, String>,
+    timeout_ms: Option<u64>,
+) -> Result<serde_json::Value, String> {
+    apply_proxy_if_configured();
+
+    // 验证 HTTP 方法
+    let method_normalized = method.to_uppercase();
+    if method_normalized != "GET" && method_normalized != "POST" {
+        return Err(format!("不支持的 HTTP 方法: {method}，仅支持 GET 和 POST"));
+    }
+
+    // 使用 build_client 确保代理配置等被应用
+    let client = build_client().map_err(|e| format!("创建 HTTP 客户端失败: {e}"))?;
+
+    // 构建请求
+    let mut request_builder = if method_normalized == "GET" {
+        client.get(&endpoint)
+    } else {
+        client.post(&endpoint)
+    };
+
+    // 添加请求头
+    for (key, value) in headers {
+        request_builder = request_builder.header(key, value);
+    }
+
+    // 应用自定义超时
+    if let Some(ms) = timeout_ms {
+        request_builder = request_builder.timeout(std::time::Duration::from_millis(ms));
+    }
+
+    // 发送请求
+    let response = request_builder
+        .send()
+        .await
+        .map_err(|e| format!("请求 API 失败: {e}"))?;
+
+    // 检查响应状态
+    if !response.status().is_success() {
+        let status = response.status();
+        let error_text = response.text().await.unwrap_or_default();
+        return Err(format!("API 请求失败 ({status}): {error_text}"));
+    }
+
+    // 解析为 JSON
+    let data: serde_json::Value = response
+        .json()
+        .await
+        .map_err(|e| format!("解析响应 JSON 失败: {e}"))?;
+
+    Ok(data)
+}
diff --git a/src-tauri/src/commands/mod.rs b/src-tauri/src/commands/mod.rs
index 02d4ee7..e448a8d 100644
--- a/src-tauri/src/commands/mod.rs
+++ b/src-tauri/src/commands/mod.rs
@@ -1,3 +1,4 @@
+pub mod balance_commands;
 pub mod config_commands;
 pub mod log_commands;
 pub mod proxy_commands;
@@ -9,6 +10,7 @@ pub mod update_commands;
 pub mod window_commands;
 
 // 重新导出所有命令函数
+pub use balance_commands::*;
 pub use config_commands::*;
 pub use log_commands::*;
 pub use proxy_commands::*;
diff --git a/src-tauri/src/main.rs b/src-tauri/src/main.rs
index daef4fb..e84849f 100644
--- a/src-tauri/src/main.rs
+++ b/src-tauri/src/main.rs
@@ -361,6 +361,7 @@ fn main() {
             generate_api_key_for_tool,
             get_usage_stats,
             get_user_quota,
+            fetch_api,
             handle_close_action,
             // expose current proxy for debugging/testing
             get_current_proxy,
diff --git a/src/App.tsx b/src/App.tsx
index 54a0916..1b1feff 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -4,6 +4,7 @@ import { AppSidebar } from '@/components/layout/AppSidebar';
 import { CloseActionDialog } from '@/components/dialogs/CloseActionDialog';
 import { UpdateDialog } from '@/components/dialogs/UpdateDialog';
 import { StatisticsPage } from '@/pages/StatisticsPage';
+import { BalancePage } from '@/pages/BalancePage';
 import { InstallationPage } from '@/pages/InstallationPage';
 import { DashboardPage } from '@/pages/DashboardPage';
 import { ConfigurationPage } from '@/pages/ConfigurationPage';
@@ -34,6 +35,7 @@ type TabType =
   | 'config'
   | 'switch'
   | 'statistics'
+  | 'balance'
   | 'transparent-proxy'
   | 'settings';
 
@@ -285,6 +287,7 @@ function App() {
             onLoadStatistics={loadStatistics}
           />
         )}
+        {activeTab === 'balance' && <BalancePage />}
         {activeTab === 'transparent-proxy' && (
           <TransparentProxyPage selectedToolId={selectedProxyToolId} />
         )}
diff --git a/src/components/layout/AppSidebar.tsx b/src/components/layout/AppSidebar.tsx
index e8ccf0b..d4496ee 100644
--- a/src/components/layout/AppSidebar.tsx
+++ b/src/components/layout/AppSidebar.tsx
@@ -6,6 +6,7 @@ import {
   Key,
   ArrowRightLeft,
   BarChart3,
+  Wallet,
   Radio,
   Settings as SettingsIcon,
 } from 'lucide-react';
@@ -77,6 +78,15 @@ export function AppSidebar({ activeTab, onTabChange }: AppSidebarProps) {
           用量统计
         </Button>
 
+        <Button
+          variant={activeTab === 'balance' ? 'default' : 'ghost'}
+          className="w-full justify-start transition-all hover:scale-105"
+          onClick={() => onTabChange('balance')}
+        >
+          <Wallet className="mr-2 h-4 w-4" />
+          余额查询
+        </Button>
+
         <Button
           variant={activeTab === 'transparent-proxy' ? 'default' : 'ghost'}
           className="w-full justify-start transition-all hover:scale-105"
diff --git a/src/components/ui/textarea.tsx b/src/components/ui/textarea.tsx
new file mode 100644
index 0000000..98cd703
--- /dev/null
+++ b/src/components/ui/textarea.tsx
@@ -0,0 +1,23 @@
+import * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <textarea
+        className={cn(
+          'flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+          className,
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);
+Textarea.displayName = 'Textarea';
+
+export { Textarea };
diff --git a/src/lib/tauri-commands.ts b/src/lib/tauri-commands.ts
index 6e79c18..742bbe8 100644
--- a/src/lib/tauri-commands.ts
+++ b/src/lib/tauri-commands.ts
@@ -301,6 +301,20 @@ export async function getUserQuota(): Promise<UserQuotaResult> {
   return await invoke<UserQuotaResult>('get_user_quota');
 }
 
+export async function fetchApi(
+  endpoint: string,
+  method: string,
+  headers: Record<string, string>,
+  timeoutMs?: number,
+): Promise<unknown> {
+  return await invoke('fetch_api', {
+    endpoint,
+    method,
+    headers,
+    timeout_ms: timeoutMs,
+  });
+}
+
 export async function applyCloseAction(action: CloseAction): Promise<void> {
   return await invoke<void>('handle_close_action', { action });
 }
diff --git a/src/pages/BalancePage/components/ConfigCard.tsx b/src/pages/BalancePage/components/ConfigCard.tsx
new file mode 100644
index 0000000..d74445f
--- /dev/null
+++ b/src/pages/BalancePage/components/ConfigCard.tsx
@@ -0,0 +1,135 @@
+import { useMemo } from 'react';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Progress } from '@/components/ui/progress';
+import { cn } from '@/lib/utils';
+import { AlertCircle, Clock3, Edit3, Loader2, RefreshCw, Trash2, Wallet } from 'lucide-react';
+import { BalanceConfig, BalanceRuntimeState } from '../types';
+
+interface ConfigCardProps {
+  config: BalanceConfig;
+  state: BalanceRuntimeState;
+  onRefresh: (id: string) => void;
+  onEdit: (config: BalanceConfig) => void;
+  onDelete: (id: string) => void;
+}
+
+export function ConfigCard({ config, state, onRefresh, onEdit, onDelete }: ConfigCardProps) {
+  const progress = useMemo(() => {
+    const total = state.lastResult?.total ?? 0;
+    const used = state.lastResult?.used ?? 0;
+    if (!total || total <= 0) return 0;
+    return Math.min(100, Math.max(0, (used / total) * 100));
+  }, [state.lastResult]);
+
+  const unit = state.lastResult?.unit ?? 'USD';
+  const remaining = state.lastResult?.remaining;
+  const total = state.lastResult?.total;
+  const used = state.lastResult?.used;
+  const planName = state.lastResult?.planName;
+
+  return (
+    <Card className="shadow-sm border">
+      <CardHeader className="flex flex-row items-start justify-between space-y-0">
+        <div className="space-y-1">
+          <CardTitle className="text-base">{config.name}</CardTitle>
+          {planName && (
+            <Badge variant="secondary" className="text-xs">
+              {planName}
+            </Badge>
+          )}
+        </div>
+        <div className="flex gap-2">
+          <Button size="icon" variant="ghost" onClick={() => onEdit(config)} aria-label="编辑">
+            <Edit3 className="h-4 w-4" />
+          </Button>
+          <Button size="icon" variant="ghost" onClick={() => onDelete(config.id)} aria-label="删除">
+            <Trash2 className="h-4 w-4 text-destructive" />
+          </Button>
+        </div>
+      </CardHeader>
+
+      <CardContent className="space-y-4">
+        <div className="grid grid-cols-3 gap-4 text-sm">
+          <Metric label="总额度" value={formatNumber(total, unit)} />
+          <Metric label="已用额度" value={formatNumber(used, unit)} />
+          <Metric label="剩余额度" value={formatNumber(remaining, unit)} />
+        </div>
+
+        <div className="space-y-2">
+          <div className="flex justify-between text-xs text-muted-foreground">
+            <span>使用比例</span>
+            <span>{progress.toFixed(1)}%</span>
+          </div>
+          <Progress value={progress} />
+          {state.lastResult?.expiresAt && (
+            <div className="text-xs text-muted-foreground">
+              到期时间：{state.lastResult.expiresAt}
+            </div>
+          )}
+        </div>
+
+        <div className="flex items-center justify-between text-xs text-muted-foreground">
+          <div className="flex items-center gap-2">
+            <Clock3 className="h-4 w-4" />
+            {state.lastFetchedAt ? new Date(state.lastFetchedAt).toLocaleString() : '尚未查询'}
+          </div>
+          <div className="flex items-center gap-2">
+            {state.loading ? (
+              <Loader2 className="h-4 w-4 animate-spin" />
+            ) : (
+              <Wallet className="h-4 w-4" />
+            )}
+            {config.intervalSec && config.intervalSec > 0
+              ? `自动：每 ${config.intervalSec}s`
+              : '手动刷新'}
+          </div>
+        </div>
+
+        {state.error && (
+          <div className="flex items-start gap-2 rounded-md border border-destructive/30 bg-destructive/5 px-3 py-2 text-xs text-destructive">
+            <AlertCircle className="h-4 w-4 mt-0.5" />
+            <span>{state.error}</span>
+          </div>
+        )}
+
+        <div className="flex gap-2">
+          <Button
+            size="sm"
+            variant="outline"
+            className={cn('flex-1', state.loading && 'pointer-events-none')}
+            onClick={() => onRefresh(config.id)}
+          >
+            {state.loading ? (
+              <>
+                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                查询中...
+              </>
+            ) : (
+              <>
+                <RefreshCw className="mr-2 h-4 w-4" />
+                刷新
+              </>
+            )}
+          </Button>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+function Metric({ label, value }: { label: string; value: string }) {
+  return (
+    <div className="space-y-1">
+      <div className="text-xs text-muted-foreground">{label}</div>
+      <div className="text-sm font-semibold">{value}</div>
+    </div>
+  );
+}
+
+function formatNumber(value?: number | null, currency?: string) {
+  if (value == null) return '--';
+  const formatted = value.toLocaleString(undefined, { maximumFractionDigits: 2 });
+  return currency ? `${formatted} ${currency}` : formatted;
+}
diff --git a/src/pages/BalancePage/components/ConfigFormDialog.tsx b/src/pages/BalancePage/components/ConfigFormDialog.tsx
new file mode 100644
index 0000000..c5d9bb3
--- /dev/null
+++ b/src/pages/BalancePage/components/ConfigFormDialog.tsx
@@ -0,0 +1,272 @@
+import { useEffect, useMemo, useState } from 'react';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { Eye, EyeOff, RefreshCw } from 'lucide-react';
+import { BalanceConfig, BalanceFormValues } from '../types';
+import { BALANCE_TEMPLATES } from '../templates';
+import { Textarea } from '@/components/ui/textarea';
+
+const METHOD_OPTIONS = [
+  { value: 'GET', label: 'GET' },
+  { value: 'POST', label: 'POST' },
+];
+
+interface ConfigFormDialogProps {
+  open: boolean;
+  initial?: BalanceConfig;
+  onClose: () => void;
+  onSubmit: (config: BalanceFormValues) => void;
+}
+
+export function ConfigFormDialog({ open, initial, onClose, onSubmit }: ConfigFormDialogProps) {
+  const [values, setValues] = useState<BalanceFormValues>({
+    name: '',
+    endpoint: '',
+    method: 'GET',
+    staticHeaders: '',
+    extractorScript: '',
+    intervalSec: 0,
+    timeoutMs: 30000,
+    apiKey: '',
+  });
+  const [showKey, setShowKey] = useState(false);
+  const [selectedTemplate, setSelectedTemplate] = useState<string>('');
+
+  useEffect(() => {
+    if (initial) {
+      setValues({
+        name: initial.name,
+        endpoint: initial.endpoint,
+        method: initial.method,
+        staticHeaders: initial.staticHeaders ? JSON.stringify(initial.staticHeaders, null, 2) : '',
+        extractorScript: initial.extractorScript,
+        intervalSec: initial.intervalSec ?? 0,
+        timeoutMs: initial.timeoutMs ?? 30000,
+        apiKey: '',
+      });
+      setSelectedTemplate('');
+    } else {
+      setValues({
+        name: '',
+        endpoint: '',
+        method: 'GET',
+        staticHeaders: '',
+        extractorScript: '',
+        intervalSec: 0,
+        timeoutMs: 30000,
+        apiKey: '',
+      });
+      setSelectedTemplate('');
+    }
+    setShowKey(false);
+  }, [initial, open]);
+
+  const isEdit = useMemo(() => Boolean(initial), [initial]);
+
+  const handleTemplateChange = (templateId: string) => {
+    setSelectedTemplate(templateId);
+    const template = BALANCE_TEMPLATES.find((t) => t.id === templateId);
+    if (template) {
+      setValues((v) => ({
+        ...v,
+        endpoint: template.endpoint,
+        method: template.method,
+        staticHeaders: template.staticHeaders
+          ? JSON.stringify(template.staticHeaders, null, 2)
+          : '',
+        extractorScript: template.extractorScript,
+      }));
+    }
+  };
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!values.name.trim() || !values.endpoint.trim() || !values.extractorScript.trim()) {
+      return;
+    }
+    onSubmit({ ...values, name: values.name.trim() });
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={(v) => !v && onClose()}>
+      <DialogContent className="sm:max-w-2xl max-h-[90vh] overflow-y-auto">
+        <DialogHeader>
+          <DialogTitle>{isEdit ? '编辑配置' : '新增配置'}</DialogTitle>
+          <DialogDescription>配置 API 端点和提取器脚本查询余额信息。</DialogDescription>
+        </DialogHeader>
+
+        <form onSubmit={handleSubmit} className="space-y-4">
+          {!isEdit && (
+            <div className="space-y-2">
+              <Label>选择模板（可选）</Label>
+              <Select value={selectedTemplate} onValueChange={handleTemplateChange}>
+                <SelectTrigger>
+                  <SelectValue placeholder="选择预设模板或自定义" />
+                </SelectTrigger>
+                <SelectContent>
+                  {BALANCE_TEMPLATES.map((template) => (
+                    <SelectItem key={template.id} value={template.id}>
+                      {template.name} - {template.description}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+          )}
+
+          <div className="space-y-2">
+            <Label htmlFor="name">配置名称</Label>
+            <Input
+              id="name"
+              value={values.name}
+              onChange={(e) => setValues((v) => ({ ...v, name: e.target.value }))}
+              placeholder="例如：NewAPI 主账号"
+              required
+            />
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="endpoint">API 端点 URL</Label>
+            <Input
+              id="endpoint"
+              value={values.endpoint}
+              onChange={(e) => setValues((v) => ({ ...v, endpoint: e.target.value }))}
+              placeholder="https://api.example.com/balance"
+              required
+            />
+          </div>
+
+          <div className="space-y-2">
+            <Label>HTTP 方法</Label>
+            <Select
+              value={values.method}
+              onValueChange={(method) =>
+                setValues((v) => ({ ...v, method: method as 'GET' | 'POST' }))
+              }
+            >
+              <SelectTrigger>
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {METHOD_OPTIONS.map((opt) => (
+                  <SelectItem key={opt.value} value={opt.value}>
+                    {opt.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="staticHeaders">静态请求头（JSON 格式，可选）</Label>
+            <Textarea
+              id="staticHeaders"
+              value={values.staticHeaders ?? ''}
+              onChange={(e) => setValues((v) => ({ ...v, staticHeaders: e.target.value }))}
+              placeholder='{"Content-Type": "application/json"}'
+              rows={3}
+            />
+            <p className="text-xs text-muted-foreground">
+              静态请求头将被持久化。API Key 请在下方单独输入，不会被保存。
+            </p>
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="extractorScript">提取器脚本（JavaScript）</Label>
+            <Textarea
+              id="extractorScript"
+              value={values.extractorScript ?? ''}
+              onChange={(e) => setValues((v) => ({ ...v, extractorScript: e.target.value }))}
+              placeholder="const extractor = (response) => { ... }"
+              rows={12}
+              className="font-mono text-sm"
+              required
+            />
+            <p className="text-xs text-muted-foreground">
+              脚本需定义 extractor 函数，返回 {'{'}planName, remaining, used, total, unit{'}'}
+            </p>
+          </div>
+
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <div className="space-y-2">
+              <Label htmlFor="intervalSec">自动刷新间隔（秒）</Label>
+              <Input
+                id="intervalSec"
+                type="number"
+                min={0}
+                value={values.intervalSec ?? 0}
+                onChange={(e) =>
+                  setValues((v) => ({ ...v, intervalSec: Number(e.target.value) || 0 }))
+                }
+                placeholder="0 表示不自动刷新"
+              />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="timeoutMs">请求超时（毫秒）</Label>
+              <Input
+                id="timeoutMs"
+                type="number"
+                min={1000}
+                value={values.timeoutMs ?? 30000}
+                onChange={(e) =>
+                  setValues((v) => ({ ...v, timeoutMs: Number(e.target.value) || 30000 }))
+                }
+              />
+            </div>
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="apiKey">API Key（仅保存在内存）</Label>
+            <div className="flex items-center gap-2">
+              <Input
+                id="apiKey"
+                type={showKey ? 'text' : 'password'}
+                value={values.apiKey ?? ''}
+                onChange={(e) => setValues((v) => ({ ...v, apiKey: e.target.value }))}
+                placeholder="sk-..."
+              />
+              <Button
+                type="button"
+                variant="outline"
+                size="icon"
+                onClick={() => setShowKey((s) => !s)}
+                aria-label={showKey ? '隐藏密钥' : '显示密钥'}
+              >
+                {showKey ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
+              </Button>
+            </div>
+            <p className="text-xs text-muted-foreground">
+              密钥仅保存在内存中，将用于 Authorization: Bearer 请求头。
+            </p>
+          </div>
+
+          <DialogFooter className="gap-2">
+            <Button type="button" variant="outline" onClick={onClose}>
+              取消
+            </Button>
+            <Button type="submit">
+              <RefreshCw className="mr-2 h-4 w-4" />
+              {isEdit ? '保存' : '添加'}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/src/pages/BalancePage/components/EmptyState.tsx b/src/pages/BalancePage/components/EmptyState.tsx
new file mode 100644
index 0000000..867a0e1
--- /dev/null
+++ b/src/pages/BalancePage/components/EmptyState.tsx
@@ -0,0 +1,27 @@
+import { Button } from '@/components/ui/button';
+import { Card, CardContent } from '@/components/ui/card';
+import { Plus, Wallet } from 'lucide-react';
+
+interface EmptyStateProps {
+  onAdd: () => void;
+}
+
+export function EmptyState({ onAdd }: EmptyStateProps) {
+  return (
+    <Card className="border-dashed">
+      <CardContent className="py-12 flex flex-col items-center gap-4 text-center">
+        <div className="h-12 w-12 rounded-full bg-muted flex items-center justify-center">
+          <Wallet className="h-6 w-6 text-muted-foreground" />
+        </div>
+        <div>
+          <h3 className="text-lg font-semibold">暂无余额配置</h3>
+          <p className="text-sm text-muted-foreground">添加一个 API 配置，开始监控余额</p>
+        </div>
+        <Button onClick={onAdd}>
+          <Plus className="mr-2 h-4 w-4" />
+          添加配置
+        </Button>
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/src/pages/BalancePage/hooks/useApiKeys.ts b/src/pages/BalancePage/hooks/useApiKeys.ts
new file mode 100644
index 0000000..ad0469b
--- /dev/null
+++ b/src/pages/BalancePage/hooks/useApiKeys.ts
@@ -0,0 +1,22 @@
+import { useState, useCallback } from 'react';
+import { ApiKeyMap } from '../types';
+
+export function useApiKeys() {
+  const [apiKeys, setApiKeys] = useState<ApiKeyMap>({});
+
+  const setApiKey = useCallback((id: string, key: string) => {
+    setApiKeys((prev) => ({ ...prev, [id]: key }));
+  }, []);
+
+  const removeApiKey = useCallback((id: string) => {
+    setApiKeys((prev) => {
+      const next = { ...prev };
+      delete next[id];
+      return next;
+    });
+  }, []);
+
+  const getApiKey = useCallback((id: string) => apiKeys[id], [apiKeys]);
+
+  return { apiKeys, setApiKey, removeApiKey, getApiKey };
+}
diff --git a/src/pages/BalancePage/hooks/useBalanceConfigs.ts b/src/pages/BalancePage/hooks/useBalanceConfigs.ts
new file mode 100644
index 0000000..1a41868
--- /dev/null
+++ b/src/pages/BalancePage/hooks/useBalanceConfigs.ts
@@ -0,0 +1,66 @@
+import { useCallback, useEffect, useState } from 'react';
+import { BalanceConfig, StoragePayload } from '../types';
+
+const STORAGE_KEY = 'duckcoding.balance.configs';
+const STORAGE_VERSION = 1;
+
+function safeParse(raw: string | null): StoragePayload | null {
+  if (!raw) return null;
+  try {
+    const parsed = JSON.parse(raw);
+    const version = typeof parsed.version === 'number' ? parsed.version : 0;
+    const configs = Array.isArray(parsed.configs) ? parsed.configs : [];
+    return { version, configs };
+  } catch {
+    return null;
+  }
+}
+
+export function useBalanceConfigs() {
+  const [configs, setConfigs] = useState<BalanceConfig[]>([]);
+
+  const persist = useCallback((next: BalanceConfig[]) => {
+    setConfigs(next);
+    const payload: StoragePayload = { version: STORAGE_VERSION, configs: next };
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(payload));
+  }, []);
+
+  const loadConfigs = useCallback(() => {
+    const payload = safeParse(localStorage.getItem(STORAGE_KEY));
+    if (!payload) return;
+    setConfigs(payload.configs);
+  }, []);
+
+  const addConfig = useCallback(
+    (config: BalanceConfig) => {
+      persist([...configs, config]);
+    },
+    [configs, persist],
+  );
+
+  const updateConfig = useCallback(
+    (config: BalanceConfig) => {
+      persist(configs.map((c) => (c.id === config.id ? config : c)));
+    },
+    [configs, persist],
+  );
+
+  const deleteConfig = useCallback(
+    (id: string) => {
+      persist(configs.filter((c) => c.id !== id));
+    },
+    [configs, persist],
+  );
+
+  useEffect(() => {
+    loadConfigs();
+  }, [loadConfigs]);
+
+  return {
+    configs,
+    addConfig,
+    updateConfig,
+    deleteConfig,
+    loadConfigs,
+  };
+}
diff --git a/src/pages/BalancePage/hooks/useBalanceMonitor.ts b/src/pages/BalancePage/hooks/useBalanceMonitor.ts
new file mode 100644
index 0000000..421f8e2
--- /dev/null
+++ b/src/pages/BalancePage/hooks/useBalanceMonitor.ts
@@ -0,0 +1,105 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { BalanceConfig, BalanceResult, BalanceStateMap } from '../types';
+import { fetchApi } from '@/lib/tauri-commands';
+import { executeExtractor } from '../utils/extractor';
+
+export function useBalanceMonitor(
+  configs: BalanceConfig[],
+  getApiKey: (id: string) => string | undefined,
+  enabled: boolean,
+) {
+  const [stateMap, setStateMap] = useState<BalanceStateMap>({});
+  const timers = useRef<Record<string, ReturnType<typeof setInterval>>>({});
+
+  const refreshOne = useCallback(
+    async (id: string) => {
+      const config = configs.find((c) => c.id === id);
+      if (!config) return;
+
+      const apiKey = getApiKey(id);
+
+      setStateMap((prev) => ({
+        ...prev,
+        [id]: { ...(prev[id] ?? {}), loading: true, error: null },
+      }));
+
+      try {
+        // 构建 headers（合并静态和动态）
+        const headers: Record<string, string> = {
+          ...config.staticHeaders,
+        };
+
+        // 如果有 API Key，添加到 Authorization header
+        if (apiKey) {
+          headers['Authorization'] = `Bearer ${apiKey}`;
+        }
+
+        // 调用 Rust 后端获取原始响应
+        const response = await fetchApi(config.endpoint, config.method, headers, config.timeoutMs);
+
+        // 执行 extractor 提取余额信息
+        const result: BalanceResult = executeExtractor(response, config.extractorScript);
+
+        setStateMap((prev) => ({
+          ...prev,
+          [id]: {
+            loading: false,
+            error: null,
+            lastResult: result,
+            lastFetchedAt: Date.now(),
+          },
+        }));
+      } catch (error) {
+        const message = error instanceof Error ? error.message : '查询失败';
+        setStateMap((prev) => ({
+          ...prev,
+          [id]: { ...(prev[id] ?? {}), loading: false, error: message },
+        }));
+      }
+    },
+    [configs, getApiKey],
+  );
+
+  const refreshAll = useCallback(
+    () => Promise.all(configs.map((c) => refreshOne(c.id))),
+    [configs, refreshOne],
+  );
+
+  // 自动刷新管理
+  useEffect(() => {
+    Object.values(timers.current).forEach(clearInterval);
+    timers.current = {};
+
+    if (!enabled) return;
+
+    configs.forEach((config) => {
+      const apiKey = getApiKey(config.id);
+      if (config.intervalSec && config.intervalSec > 0 && apiKey) {
+        // 立即执行一次查询
+        refreshOne(config.id);
+        // 启动定时器
+        timers.current[config.id] = setInterval(() => {
+          refreshOne(config.id);
+        }, config.intervalSec * 1000);
+      }
+    });
+
+    return () => {
+      Object.values(timers.current).forEach(clearInterval);
+      timers.current = {};
+    };
+  }, [configs, enabled, refreshOne, getApiKey]);
+
+  // 清理已删除配置的状态
+  useEffect(() => {
+    setStateMap((prev) => {
+      const next: BalanceStateMap = {};
+      configs.forEach((c) => {
+        next[c.id] = prev[c.id] ?? { loading: false };
+      });
+      return next;
+    });
+  }, [configs]);
+
+  return { stateMap, refreshOne, refreshAll };
+}
diff --git a/src/pages/BalancePage/index.tsx b/src/pages/BalancePage/index.tsx
new file mode 100644
index 0000000..8133fff
--- /dev/null
+++ b/src/pages/BalancePage/index.tsx
@@ -0,0 +1,188 @@
+import { useMemo, useState } from 'react';
+import { Button } from '@/components/ui/button';
+import { PageContainer } from '@/components/layout/PageContainer';
+import { Separator } from '@/components/ui/separator';
+import { Loader2, Plus, RefreshCw } from 'lucide-react';
+import { useBalanceConfigs } from './hooks/useBalanceConfigs';
+import { useApiKeys } from './hooks/useApiKeys';
+import { useBalanceMonitor } from './hooks/useBalanceMonitor';
+import { BalanceConfig, BalanceFormValues } from './types';
+import { EmptyState } from './components/EmptyState';
+import { ConfigCard } from './components/ConfigCard';
+import { ConfigFormDialog } from './components/ConfigFormDialog';
+
+function createId() {
+  return typeof crypto !== 'undefined' && crypto.randomUUID
+    ? crypto.randomUUID()
+    : `cfg_${Date.now()}`;
+}
+
+export function BalancePage() {
+  const { configs, addConfig, updateConfig, deleteConfig } = useBalanceConfigs();
+  const { setApiKey, removeApiKey, getApiKey } = useApiKeys();
+  const [dialogOpen, setDialogOpen] = useState(false);
+  const [editingConfig, setEditingConfig] = useState<BalanceConfig | null>(null);
+  const [refreshingAll, setRefreshingAll] = useState(false);
+
+  const { stateMap, refreshOne, refreshAll } = useBalanceMonitor(configs, getApiKey, true);
+
+  const sortedConfigs = useMemo(
+    () => [...configs].sort((a, b) => b.updatedAt - a.updatedAt),
+    [configs],
+  );
+
+  const handleSubmit = (values: BalanceFormValues) => {
+    const now = Date.now();
+
+    // 解析 staticHeaders
+    let staticHeaders: Record<string, string> | undefined;
+    if (values.staticHeaders?.trim()) {
+      try {
+        staticHeaders = JSON.parse(values.staticHeaders);
+      } catch {
+        // 忽略 JSON 解析错误，使用空对象
+        staticHeaders = {};
+      }
+    }
+
+    if (editingConfig) {
+      const next: BalanceConfig = {
+        ...editingConfig,
+        name: values.name,
+        endpoint: values.endpoint,
+        method: values.method,
+        staticHeaders,
+        extractorScript: values.extractorScript,
+        intervalSec: values.intervalSec ?? 0,
+        timeoutMs: values.timeoutMs,
+        updatedAt: now,
+      };
+      updateConfig(next);
+      if (values.apiKey?.trim()) {
+        setApiKey(editingConfig.id, values.apiKey.trim());
+      } else {
+        removeApiKey(editingConfig.id);
+      }
+    } else {
+      const id = createId();
+      const config: BalanceConfig = {
+        id,
+        name: values.name,
+        endpoint: values.endpoint,
+        method: values.method,
+        staticHeaders,
+        extractorScript: values.extractorScript,
+        intervalSec: values.intervalSec ?? 0,
+        timeoutMs: values.timeoutMs,
+        createdAt: now,
+        updatedAt: now,
+      };
+      addConfig(config);
+      if (values.apiKey?.trim()) {
+        setApiKey(id, values.apiKey.trim());
+      }
+    }
+
+    setDialogOpen(false);
+    setEditingConfig(null);
+  };
+
+  const handleEdit = (config: BalanceConfig) => {
+    setEditingConfig(config);
+    setDialogOpen(true);
+  };
+
+  const handleDelete = (id: string) => {
+    deleteConfig(id);
+    removeApiKey(id);
+  };
+
+  const handleRefreshAll = async () => {
+    setRefreshingAll(true);
+    try {
+      await refreshAll();
+    } finally {
+      setRefreshingAll(false);
+    }
+  };
+
+  const renderContent = () => {
+    if (!sortedConfigs.length) {
+      return <EmptyState onAdd={() => setDialogOpen(true)} />;
+    }
+
+    return (
+      <div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-4">
+        {sortedConfigs.map((config) => (
+          <ConfigCard
+            key={config.id}
+            config={config}
+            state={stateMap[config.id] ?? { loading: false }}
+            onRefresh={refreshOne}
+            onEdit={handleEdit}
+            onDelete={handleDelete}
+          />
+        ))}
+      </div>
+    );
+  };
+
+  return (
+    <PageContainer>
+      <div className="flex flex-col gap-4">
+        <div className="flex flex-col gap-2 md:flex-row md:items-center md:justify-between">
+          <div>
+            <h1 className="text-2xl font-semibold">余额监控</h1>
+            <p className="text-sm text-muted-foreground">
+              管理多个 API 余额配置，支持自定义提取器脚本（API Key 默认仅存内存）
+            </p>
+          </div>
+          <div className="flex gap-2">
+            <Button
+              variant="outline"
+              onClick={handleRefreshAll}
+              disabled={!sortedConfigs.length || refreshingAll}
+            >
+              {refreshingAll ? (
+                <>
+                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                  刷新中...
+                </>
+              ) : (
+                <>
+                  <RefreshCw className="mr-2 h-4 w-4" />
+                  刷新全部
+                </>
+              )}
+            </Button>
+            <Button
+              onClick={() => {
+                setEditingConfig(null);
+                setDialogOpen(true);
+              }}
+            >
+              <Plus className="mr-2 h-4 w-4" />
+              添加配置
+            </Button>
+          </div>
+        </div>
+
+        <Separator />
+
+        {renderContent()}
+      </div>
+
+      <ConfigFormDialog
+        open={dialogOpen}
+        initial={editingConfig ?? undefined}
+        onClose={() => {
+          setDialogOpen(false);
+          setEditingConfig(null);
+        }}
+        onSubmit={handleSubmit}
+      />
+    </PageContainer>
+  );
+}
+
+export default BalancePage;
diff --git a/src/pages/BalancePage/templates/index.ts b/src/pages/BalancePage/templates/index.ts
new file mode 100644
index 0000000..0b79753
--- /dev/null
+++ b/src/pages/BalancePage/templates/index.ts
@@ -0,0 +1,88 @@
+import { BalanceTemplate } from '../types';
+
+/**
+ * 预设余额查询模板
+ * 提供常见 API 服务商的配置模板
+ */
+export const BALANCE_TEMPLATES: BalanceTemplate[] = [
+  {
+    id: 'newapi',
+    name: 'NewAPI',
+    description: 'NewAPI 中转服务余额查询',
+    endpoint: 'https://your-newapi-domain.com/api/user/self',
+    method: 'GET',
+    staticHeaders: {
+      'Content-Type': 'application/json',
+    },
+    extractorScript: `const extractor = (response) => {
+  // NewAPI 响应格式示例
+  return {
+    planName: response.data?.username || 'Unknown',
+    remaining: (response.data?.quota - response.data?.used_quota) / 500000,
+    used: response.data?.used_quota / 500000,
+    total: response.data?.quota / 500000,
+    unit: 'USD',
+  };
+};`,
+    requiresApiKey: true,
+  },
+  {
+    id: 'openai',
+    name: 'OpenAI 官方',
+    description: 'OpenAI 官方 API 余额查询',
+    endpoint: 'https://api.openai.com/dashboard/billing/credit_grants',
+    method: 'GET',
+    staticHeaders: {
+      'Content-Type': 'application/json',
+    },
+    extractorScript: `const extractor = (response) => {
+  // OpenAI 响应格式
+  const total = response.total_granted || 0;
+  const used = response.total_used || 0;
+  const available = response.total_available || 0;
+
+  return {
+    planName: 'OpenAI',
+    remaining: available,
+    used: used,
+    total: total || (available + used),
+    unit: 'USD',
+  };
+};`,
+    requiresApiKey: true,
+  },
+  {
+    id: 'custom',
+    name: '自定义',
+    description: '自定义 API 端点和提取器',
+    endpoint: '',
+    method: 'GET',
+    staticHeaders: {},
+    extractorScript: `const extractor = (response) => {
+  // 根据您的 API 响应格式编写提取逻辑
+  // 示例：
+  return {
+    planName: response.plan?.name || 'Unknown',
+    remaining: response.balance?.remaining || 0,
+    used: response.balance?.used || 0,
+    total: response.balance?.total || 0,
+    unit: response.balance?.currency || 'USD',
+  };
+};`,
+    requiresApiKey: false,
+  },
+];
+
+/**
+ * 根据模板 ID 获取模板
+ */
+export function getTemplateById(id: string): BalanceTemplate | undefined {
+  return BALANCE_TEMPLATES.find((t) => t.id === id);
+}
+
+/**
+ * 获取默认模板（NewAPI）
+ */
+export function getDefaultTemplate(): BalanceTemplate {
+  return BALANCE_TEMPLATES[0];
+}
diff --git a/src/pages/BalancePage/types/index.ts b/src/pages/BalancePage/types/index.ts
new file mode 100644
index 0000000..ca5eec8
--- /dev/null
+++ b/src/pages/BalancePage/types/index.ts
@@ -0,0 +1,60 @@
+export interface BalanceConfig {
+  id: string;
+  name: string;
+  endpoint: string; // API 端点 URL
+  method: 'GET' | 'POST'; // HTTP 方法
+  staticHeaders?: Record<string, string>; // 静态请求头（持久化）
+  extractorScript: string; // 提取器 JavaScript 代码
+  intervalSec?: number; // 0 或 undefined 表示不自动刷新
+  timeoutMs?: number; // 请求超时（毫秒）
+  updatedAt: number;
+  createdAt: number;
+}
+
+export interface BalanceRuntimeState {
+  loading: boolean;
+  error?: string | null;
+  lastResult?: BalanceResult | null;
+  lastFetchedAt?: number;
+}
+
+export type BalanceStateMap = Record<string, BalanceRuntimeState>;
+
+export type ApiKeyMap = Record<string, string>; // configId -> apiKey (用于动态 headers)
+
+export interface StoragePayload {
+  version: number;
+  configs: BalanceConfig[];
+}
+
+export interface BalanceResult {
+  planName?: string; // 套餐/计划名称
+  remaining?: number; // 剩余额度
+  used?: number; // 已用额度
+  total?: number; // 总额度
+  unit?: string; // 单位 (USD, CNY, etc.)
+  expiresAt?: string; // 到期时间
+}
+
+export interface BalanceFormValues {
+  name: string;
+  endpoint: string;
+  method: 'GET' | 'POST';
+  staticHeaders?: string; // JSON 字符串
+  extractorScript: string;
+  intervalSec?: number;
+  timeoutMs?: number;
+  apiKey?: string; // 用于 Authorization header，不持久化
+}
+
+// 预设模板类型
+export interface BalanceTemplate {
+  id: string;
+  name: string;
+  description: string;
+  endpoint: string;
+  method: 'GET' | 'POST';
+  staticHeaders?: Record<string, string>;
+  extractorScript: string;
+  requiresApiKey: boolean; // 是否需要 API Key
+}
diff --git a/src/pages/BalancePage/utils/extractor.ts b/src/pages/BalancePage/utils/extractor.ts
new file mode 100644
index 0000000..af52e30
--- /dev/null
+++ b/src/pages/BalancePage/utils/extractor.ts
@@ -0,0 +1,40 @@
+import { BalanceResult } from '../types';
+
+/**
+ * 执行 extractor 脚本提取余额信息
+ * @param response API 原始响应
+ * @param extractorScript 提取器 JavaScript 代码
+ * @returns 提取的余额结果
+ */
+export function executeExtractor(response: unknown, extractorScript: string): BalanceResult {
+  try {
+    // 创建执行环境，只暴露 response
+    const func = new Function(
+      'response',
+      `
+      'use strict';
+      ${extractorScript}
+      return extractor(response);
+    `,
+    );
+
+    const result = func(response);
+
+    // 验证返回值
+    if (typeof result !== 'object' || result === null) {
+      throw new Error('提取器必须返回一个对象');
+    }
+
+    // 标准化结果
+    return {
+      planName: result.planName,
+      remaining: typeof result.remaining === 'number' ? result.remaining : undefined,
+      used: typeof result.used === 'number' ? result.used : undefined,
+      total: typeof result.total === 'number' ? result.total : undefined,
+      unit: result.unit || 'USD',
+      expiresAt: result.expiresAt,
+    };
+  } catch (error) {
+    throw new Error(`提取器执行失败: ${error instanceof Error ? error.message : '未知错误'}`);
+  }
+}