(null);
+ React.useEffect(() => {
+ const handler = (e: MouseEvent) => {
+ const t = e.target as Node;
+ if ((langRef.current && langRef.current.contains(t)) ||
+ (langDropdownRef.current && langDropdownRef.current.contains(t))) return;
+ setLangOpen(false);
+ };
+ document.addEventListener('mousedown', handler);
+ return () => document.removeEventListener('mousedown', handler);
+ }, []);
+
+ const currentLangLabel = LANG_OPTIONS.find(l => l.code === lang)?.label || '简体中文';
+
+ // Category list view
+ const categories = [
+ { key: "account", icon:
+
DeepSeek
+
} title="API Key">
+
用于调用 DeepSeek API 获取余额和用量数据。
+
API Key 只在当前这台 Windows 电脑本地保留。
+
+
+ 验证并保存
+ 清除 Key
+
+
+
} title="用量同步 Token">
+
用于同步 Token 用量、消费和趋势图。DeepSeek 无官方用量 API，需网页登录 token（与 API Key 不同）。
+
+ {usageSyncing ? "等待登录" : "网页登录自动同步"}
+ 清除 Token
+
+
{usageStatus}
+
setShowManualPaste((v) => !v)}>{showManualPaste ? "收起手动粘贴" : "方式二：手动粘贴 token"}
+ {showManualPaste && (<>
+
获取：浏览器登录 platform.deepseek.com，按 F12 打开控制台，输入 JSON.parse(localStorage.userToken).value 回车，复制返回的字符串。
+
+
保存 Token
+ )}
+
+
+
MiMo
+
} title="MiMo 登录">
+
通过小米账号登录 MiMo 平台，登录成功后即可查看余额和用量数据。
+
{mimoSyncing ? "正在打开…" : "打开 MiMo 登录"}
+ {mimoStatus &&
{mimoStatus}
}
+
+
{t('settings.autostart_desc')}
+ {t('settings.auto_refresh_desc')}
+ {autoRefresh && (
+
+
+
DeepSeek 刷新间隔
+
+ {
+ const v = parseInt(e.target.value);
+ if (v === -1) { setCustomDsRefresh(true); return; }
+ setCustomDsRefresh(false);
+ saveRefreshInterval(v);
+ }}>
+ 1 分钟
+ 5 分钟
+ 30 分钟
+ 1 小时
+ 自定义
+
+ {customDsRefresh && (
+ <>
+ 分钟
+
+ )}
+
+
+
+
MiMo 刷新间隔
+
+
{
+ const v = parseInt(e.target.value);
+ if (v === -1) { setCustomMimoRefresh(true); return; }
+ setCustomMimoRefresh(false);
+ void invoke("save_mimo_refresh_interval", { seconds: v }).then(setConfig).catch(() => {});
+ }}>
+ 1 分钟
+ 5 分钟
+ 30 分钟
+ 1 小时
+ 自定义
+
+ {customMimoRefresh && (
+ <>
+
{ if (e.key === 'Enter') { const val = parseInt((e.target as HTMLInputElement).value); if (val > 0) void invoke
("save_mimo_refresh_interval", { seconds: val * 60 }).then(setConfig).catch(() => {}); } }} />
+ 分钟
+
+ )}
+
+
+
{t('settings.default_provider')}
+ { void invoke("save_default_provider", { provider: e.target.value }).then(setConfig).catch(() => {}); }}>
+ DeepSeek
+ MiMo
+
+
+
+
{t('settings.language_desc')}
+
+
setLangOpen(!langOpen)}
+ style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '6px 12px', border: '1px solid rgba(var(--fg), 0.2)', borderRadius: 6, background: 'transparent', color: 'var(--text)', cursor: 'pointer', fontSize: '0.85em' }}
+ >
+ {currentLangLabel}
+ ▼
+
+ {langOpen && createPortal(
+
+ {LANG_OPTIONS.map((opt) => (
+ { setLang(opt.code); setLangState(opt.code); setLangOpen(false); }}
+ style={{ display: 'block', width: '100%', padding: '8px 12px', border: 'none', background: lang === opt.code ? 'rgba(var(--fg), 0.1)' : 'transparent', color: 'var(--text)', cursor: 'pointer', textAlign: 'left', fontSize: '0.85em' }}>
+ {opt.label}
+
+ ))}
+
,
+ document.body
+ )}
+
+
选择金额显示的货币。
+
+ {(["cny", "usd"] as const).map((opt) => (
+ saveCurrency(opt)}>
+ {opt === "cny" ? t('settings.currency_cny') : t('settings.currency_usd')}
+
+ ))}
+
+ 效率指标显示方式：
+
+ {(["token_per_currency", "currency_per_token"] as const).map((opt) => (
+ saveEfficiencyUnit(opt)}>
+ {opt === "token_per_currency" ? (currency === "usd" ? "MT/$" : "MT/¥") : (currency === "usd" ? "$/MT" : "¥/MT")}
+
+ ))}
+
+
+ 选择应用的外观主题。
+
+ {(["light", "dark", "system"] as const).map((opt) => (
+ saveTheme(opt)}>
+ {opt === "light" ? t('settings.theme_light') : opt === "dark" ? t('settings.theme_dark') : t('settings.theme_system')}
+
+ ))}
+
+
+ {t('settings.window_desc')}
+
+ {[{ label: t('settings.compact'), w: 380, h: 600 }, { label: t('settings.standard'), w: 463, h: 660 }, { label: t('settings.wide'), w: 600, h: 700 }, { label: t('settings.large'), w: 660, h: 900 }].map((preset) => (
+ { void invoke("resize_window", { width: preset.w, height: preset.h }).catch(() => {}); }}>{preset.label}
+ ))}
+
+
+
+ );
+
+ // Notify category content
+ const notifyContent = (
+ {t('notify.desc')}
+ {lowBalanceNotify && (
+ <>
+
+ {t('notify.threshold')}：
+ {currency === "usd" ? "$" : "¥"}
+
+ {t('settings.notify_cooldown')}
+ {t('settings.notify_cooldown_desc')}
+
+
{
+ const v = parseInt(e.target.value);
+ if (v === -1) { setCustomCooldown(true); return; }
+ setCustomCooldown(false);
+ void invoke("save_notify_cooldown", { minutes: v }).then(setConfig).catch(() => {});
+ }}>
+ 10 分钟
+ 30 分钟
+ 1 小时
+ 3 小时
+ 6 小时
+ 自定义
+
+ {customCooldown && (
+ <>
+
{ if (e.key === 'Enter') { const val = parseInt((e.target as HTMLInputElement).value); if (val > 0) void invoke
("save_notify_cooldown", { minutes: val }).then(setConfig).catch(() => {}); } }} />
+ 分钟
+
+ )}
+ {t('settings.version')} v{appVersion}
+
+ {!updateInfo && (
+
+ {checkingUpdate ? t('settings.checking') : t('settings.check_update')}
+
+ )}
+ {updateInfo && !downloading && !downloadDone && (
+
+ {t('settings.download_update')} v{updateInfo.version}
+
+ )}
+ {downloading && (
+
+
+
+ {downloadProgress?.total
+ ? `${(downloadProgress.downloaded / 1024 / 1024).toFixed(1)} / ${(downloadProgress.total / 1024 / 1024).toFixed(1)} MB (${Math.min(100, (downloadProgress.downloaded / downloadProgress.total) * 100).toFixed(1)}%)`
+ : t('settings.downloading_update')}
+
+
+ )}
+ {downloadDone &&
}
+ {!updateInfo && !updateError && !checkingUpdate &&
{t('settings.latest')} }
+ {updateError &&
⚠ {updateError} }
+
{ void handleViewChangelog(); }} disabled={changelogLoading} style={{ marginTop: 8 }}>
+ {changelogLoading ? "加载中…" : changelogHtml ? "收起更新日志" : "查看更新日志"}
+
+ {changelogError && {changelogError}
}
+ {changelogHtml &&
}
+ {updateInfo && !downloading && !downloadDone && (
+
+
v{updateInfo.version} {updateInfo.date ? `(${updateInfo.date})` : ""}
+
+ 配置文件： {configPath}
+
+
+ );
+
+ // Data management category content
+ const [exportFormat, setExportFormat] = React.useState<"json" | "csv">("json");
+ const [exportPlatform, setExportPlatform] = React.useState<"all" | "deepseek" | "mimo">("all");
+
+ const handleExport = () => {
+ const keys: string[] = [];
+ for (let i = 0; i < localStorage.length; i++) {
+ const key = localStorage.key(i);
+ if (!key || !key.startsWith('dsm-')) continue;
+ if (exportPlatform === "deepseek" && key.includes('mimo')) continue;
+ if (exportPlatform === "mimo" && !key.includes('mimo') && !key.includes('platform')) continue;
+ keys.push(key);
+ }
+
+ if (exportFormat === "json") {
+ const data: Record = {};
+ for (const key of keys) {
+ try { data[key] = JSON.parse(localStorage.getItem(key) || ''); } catch { data[key] = localStorage.getItem(key); }
+ }
+ const blob = new Blob([JSON.stringify(data, null, 2)], { type: "application/json" });
+ const url = URL.createObjectURL(blob); const a = document.createElement("a"); a.href = url; a.download = `dsm-data-${exportPlatform}.json`; a.click(); URL.revokeObjectURL(url);
+ } else {
+ // CSV: flatten each key-value pair
+ const rows = [["key", "value"]];
+ for (const key of keys) {
+ const val = localStorage.getItem(key) || '';
+ try {
+ const parsed = JSON.parse(val);
+ if (typeof parsed === 'object' && parsed !== null) {
+ // Flatten nested objects
+ for (const [k, v] of Object.entries(parsed)) {
+ rows.push([`${key}.${k}`, typeof v === 'object' ? JSON.stringify(v) : String(v)]);
+ }
+ } else {
+ rows.push([key, String(parsed)]);
+ }
+ } catch { rows.push([key, val]); }
+ }
+ const csv = rows.map(r => r.map(c => `"${c.replace(/"/g, '""')}"`).join(',')).join('\n');
+ const blob = new Blob(['\uFEFF' + csv], { type: "text/csv;charset=utf-8" });
+ const url = URL.createObjectURL(blob); const a = document.createElement("a"); a.href = url; a.download = `dsm-data-${exportPlatform}.csv`; a.click(); URL.revokeObjectURL(url);
+ }
+ };
+
+ const dataContent = (
+ <>
+ {t('settings.clear_cache_desc')}
+
+ { localStorage.clear(); alert("缓存已清除"); }}>{t('settings.clear_cache')}
+
+
+ 导出缓存的使用数据（余额、用量等），支持多种格式和平台过滤。
+
+
格式：
+
+ {(["json", "csv"] as const).map((opt) => (
+ setExportFormat(opt)}>{opt}
+ ))}
+
+
+
平台：
+
+ {(["all", "deepseek", "mimo"] as const).map((opt) => (
+ setExportPlatform(opt)}>{opt === "all" ? "全部" : opt === "deepseek" ? "DeepSeek" : "MiMo"}
+ ))}
+
+
+ {
+ const { save } = await import("@tauri-apps/plugin-dialog");
+ const ext = exportFormat === "json" ? "json" : "csv";
+ const filePath = await save({
+ defaultPath: `dsm-data-${exportPlatform}.${ext}`,
+ filters: [{ name: exportFormat.toUpperCase(), extensions: [ext] }]
+ });
+ if (!filePath) return;
+ handleExport();
+ }}>导出 {exportFormat.toUpperCase()}
+
+
+ 从 JSON 文件导入使用数据，将覆盖当前缓存。
+
+ {
+ const input = document.createElement("input"); input.type = "file"; input.accept = ".json";
+ input.onchange = () => { const file = input.files?.[0]; if (!file) return; const reader = new FileReader(); reader.onload = () => {
+ try {
+ const data = JSON.parse(reader.result as string);
+ for (const [key, val] of Object.entries(data)) { if (key.startsWith('dsm-')) localStorage.setItem(key, typeof val === 'string' ? val : JSON.stringify(val)); }
+ alert("使用数据已导入，刷新页面生效");
+ } catch { alert("导入失败：文件格式错误"); }
+ }; reader.readAsText(file); };
+ input.click();
+ }}>导入使用数据
+
+
+
+ );
+
+ const categoryContent: Record = {
+ account: accountContent,
+ general: generalContent,
+ display: displayContent,
+ notify: notifyContent,
+ data: dataContent,
+ about: aboutContent,
+ };
+
+ return (
+
+
+
+ DeepSeek / MiMo Monitor
+
+
+
+
+ {categories.map((cat) => (
+
+ setActiveCategory(activeCategory === cat.key ? null : cat.key)}
+ style={{
+ display: 'flex', alignItems: 'center', justifyContent: 'space-between',
+ width: '100%', padding: '12px 16px', border: 'none',
+ background: activeCategory === cat.key ? 'rgba(var(--fg), 0.06)' : 'transparent',
+ color: 'var(--text)', cursor: 'pointer',
+ fontSize: '0.9em', borderRadius: 8, transition: 'background 0.15s',
+ }}
+ onMouseEnter={(e) => { if (activeCategory !== cat.key) e.currentTarget.style.background = 'rgba(var(--fg), 0.04)'; }}
+ onMouseLeave={(e) => { if (activeCategory !== cat.key) e.currentTarget.style.background = 'transparent'; }}
+ >
+
+ {cat.icon}
+ {cat.label}
+
+
+
+
+ {categoryContent[cat.key]}
+
+
+ ))}
+
+
+ );
+}
+
+// ─── Shared ────────────────────────────────────────────────
+function SettingsSection({ icon, title, children }: { icon: React.ReactNode; title: string; children: React.ReactNode }) {
+ return ();
+}
+function Toggle({ label, checked, onChange }: { label: string; checked: boolean; onChange: (checked: boolean) => void }) {
+ return ({label} > = {
+ // 通用
+ 'app.loading': { zh: '查询中…', en: 'Loading…' },
+ 'app.error': { zh: '查询失败', en: 'Query failed' },
+ 'app.unconfigured': { zh: '未配置', en: 'Not configured' },
+ 'app.unconfigured_token': { zh: '未配置 Token', en: 'Token not configured' },
+ 'app.unavailable': { zh: '不可用', en: 'Unavailable' },
+ 'app.no_data': { zh: '暂无数据', en: 'No data' },
+ 'app.tokens': { zh: 'tokens', en: 'tokens' },
+
+ // 余额
+ 'balance.title': { zh: '账户余额', en: 'Account Balance' },
+ 'balance.available': { zh: '可用', en: 'Available' },
+ 'balance.insufficient': { zh: '余额不足', en: 'Insufficient' },
+ 'balance.today': { zh: '当日消耗', en: 'Today' },
+ 'balance.monthly': { zh: '本月消费', en: 'This Month' },
+
+ // 设置
+ 'settings.title': { zh: '设置', en: 'Settings' },
+ 'settings.api_key': { zh: 'API Key', en: 'API Key' },
+ 'settings.api_key_desc': { zh: '用于调用 API 获取余额和用量数据。', en: 'Used to call API for balance and usage data.' },
+ 'settings.save': { zh: '验证并保存', en: 'Verify & Save' },
+ 'settings.clear': { zh: '清除 Key', en: 'Clear Key' },
+ 'settings.verified': { zh: '已配置', en: 'Configured' },
+ 'settings.not_configured': { zh: '未配置', en: 'Not configured' },
+ 'settings.general': { zh: '通用', en: 'General' },
+ 'settings.autostart': { zh: '开机自启', en: 'Auto Start' },
+ 'settings.autostart_desc': { zh: '开启后，每次登录 Windows 时自动启动应用。', en: 'Auto start on Windows login.' },
+ 'settings.auto_refresh': { zh: '自动刷新', en: 'Auto Refresh' },
+ 'settings.auto_refresh_desc': { zh: '开启后，按设定周期自动拉取最新数据。', en: 'Automatically fetch latest data at set intervals.' },
+ 'settings.window_size': { zh: '窗口大小', en: 'Window Size' },
+ 'settings.window_desc': { zh: '选择预设窗口尺寸，或拖拽窗口边缘自由调整。', en: 'Choose a preset size or drag window edges.' },
+ 'settings.compact': { zh: '紧凑', en: 'Compact' },
+ 'settings.standard': { zh: '标准', en: 'Standard' },
+ 'settings.wide': { zh: '宽屏', en: 'Wide' },
+ 'settings.large': { zh: '大屏', en: 'Large' },
+ 'settings.about': { zh: '关于', en: 'About' },
+ 'settings.version': { zh: '当前版本', en: 'Version' },
+ 'settings.check_update': { zh: '检查更新', en: 'Check for Updates' },
+ 'settings.checking': { zh: '检查中…', en: 'Checking…' },
+ 'settings.latest': { zh: '已是最新版本', en: 'Up to date' },
+ 'settings.update_found': { zh: '发现新版本', en: 'Update available' },
+ 'settings.download_update': { zh: '下载更新', en: 'Download Update' },
+ 'settings.downloading_update': { zh: '正在下载更新…', en: 'Downloading update…' },
+ 'settings.update_installed': { zh: '更新已下载，即将安装', en: 'Update downloaded, installing soon' },
+ 'settings.cat_account': { zh: '账户', en: 'Account' },
+ 'settings.cat_general': { zh: '通用', en: 'General' },
+ 'settings.cat_display': { zh: '显示', en: 'Display' },
+ 'settings.cat_data': { zh: '数据', en: 'Data' },
+ 'settings.cat_about': { zh: '关于', en: 'About' },
+ 'settings.theme': { zh: '主题', en: 'Theme' },
+ 'settings.theme_desc': { zh: '选择深色、浅色或跟随系统主题。', en: 'Choose dark, light, or follow system theme.' },
+ 'settings.theme_light': { zh: '浅色', en: 'Light' },
+ 'settings.theme_dark': { zh: '深色', en: 'Dark' },
+ 'settings.theme_system': { zh: '跟随系统', en: 'System' },
+ 'settings.currency': { zh: '货币单位', en: 'Currency' },
+ 'settings.currency_desc': { zh: '选择显示金额的货币类型。', en: 'Choose currency for amounts displayed.' },
+ 'settings.efficiency': { zh: '效率单位', en: 'Efficiency Unit' },
+ 'settings.efficiency_desc': { zh: '选择显示效率指标的方向。', en: 'Choose efficiency metric direction.' },
+ 'settings.token_per_currency': { zh: 'MT/¥', en: 'MT/$' },
+ 'settings.currency_per_token': { zh: '¥/MT', en: '$/MT' },
+ 'settings.language': { zh: '语言', en: 'Language' },
+ 'settings.language_desc': { zh: '选择界面显示语言。', en: 'Choose display language.' },
+ 'settings.default_provider': { zh: '默认平台', en: 'Default Provider' },
+ 'settings.currency_cny': { zh: '人民币 (¥)', en: 'CNY (¥)' },
+ 'settings.currency_usd': { zh: '美元 ($)', en: 'USD ($)' },
+ 'settings.clear_cache': { zh: '清除缓存', en: 'Clear Cache' },
+ 'settings.clear_cache_desc': { zh: '清除本地缓存的使用数据，下次启动时重新获取。', en: 'Clear local cached usage data, refresh on next launch.' },
+ 'settings.notify_cooldown': { zh: '通知冷却时间', en: 'Notification Cooldown' },
+ 'settings.notify_cooldown_desc': { zh: '两次余额不足通知之间的最小间隔。', en: 'Minimum interval between low balance notifications.' },
+
+ // 通知
+ 'notify.title': { zh: '通知', en: 'Notifications' },
+ 'notify.toggle': { zh: '余额不足时发送 Windows 通知', en: 'Notify on low balance' },
+ 'notify.desc': { zh: '当 API 余额低于设定阈值时，通过 Windows 通知提醒。', en: 'Send Windows notification when balance drops below threshold.' },
+ 'notify.threshold': { zh: '阈值', en: 'Threshold' },
+
+ // DeepSeek 用量同步
+ 'usage.title': { zh: '用量同步 Token', en: 'Usage Sync Token' },
+ 'usage.desc': { zh: '用于同步 Token 用量、消费和趋势图。需网页登录 token。', en: 'Sync token usage and trends. Requires web login token.' },
+ 'usage.auto_sync': { zh: '网页登录自动同步', en: 'Web Login Auto Sync' },
+ 'usage.waiting': { zh: '等待登录', en: 'Waiting for login' },
+ 'usage.manual': { zh: '方式二：手动粘贴 token', en: 'Method 2: Paste token manually' },
+ 'usage.manual_collapse': { zh: '收起手动粘贴', en: 'Collapse manual paste' },
+ 'usage.save_token': { zh: '保存 Token', en: 'Save Token' },
+ 'usage.clear_token': { zh: '清除 Token', en: 'Clear Token' },
+
+ // MiMo
+ 'mimo.login': { zh: 'MiMo 登录', en: 'MiMo Login' },
+ 'mimo.login_desc': { zh: '通过小米账号登录 MiMo 平台，登录成功后即可查看余额和用量数据。', en: 'Login to MiMo with Xiaomi account to view balance and usage.' },
+ 'mimo.login_btn': { zh: '打开 MiMo 登录', en: 'Open MiMo Login' },
+ 'mimo.opening': { zh: '正在打开…', en: 'Opening…' },
+ 'mimo.no_key': { zh: 'MiMo 平台通过小米账号登录认证，无需 API Key。', en: 'MiMo uses Xiaomi account login, no API Key needed.' },
+ 'mimo.not_logged_in': { zh: 'MiMo 未登录，请在设置中重新登录小米账号', en: 'MiMo not logged in, please re-login in settings' },
+
+ // 图表
+ 'chart.cache_hit': { zh: '缓存命中明细', en: 'Cache Hit Details' },
+ 'chart.hit': { zh: '命中', en: 'Hit' },
+ 'chart.miss': { zh: '未命中', en: 'Miss' },
+ 'chart.output': { zh: '输出', en: 'Output' },
+ 'chart.hit_rate': { zh: '命中率', en: 'Hit Rate' },
+ 'chart.total': { zh: '合计', en: 'Total' },
+ 'chart.this_week': { zh: '本周', en: 'This week' },
+ 'chart.last_week': { zh: '上周', en: 'Last week' },
+ 'chart.weeks_ago': { zh: '周前', en: 'weeks ago' },
+ 'chart.input_hit': { zh: '输入（命中缓存）', en: 'Input (cache hit)' },
+ 'chart.input_miss': { zh: '输入（未命中缓存）', en: 'Input (cache miss)' },
+
+ // 模型详情
+ 'detail.requests': { zh: 'API 请求次数', en: 'API Requests' },
+ 'detail.daily': { zh: '按日 Token 消耗', en: 'Daily Token Usage' },
+ 'detail.back': { zh: '返回主面板', en: 'Back to Dashboard' },
+
+ // 导航
+ 'nav.refresh': { zh: '刷新', en: 'Refresh' },
+ 'nav.settings': { zh: '设置', en: 'Settings' },
+ 'nav.close': { zh: '关闭', en: 'Close' },
+};
+
+let currentLang: Lang = 'zh';
+
+export function setLang(lang: Lang) {
+ currentLang = lang;
+ try { localStorage.setItem('dsm-lang', lang); } catch {}
+}
+
+export function getLang(): Lang {
+ return currentLang;
+}
+
+export function initLang() {
+ try {
+ const saved = localStorage.getItem('dsm-lang');
+ if (saved === 'en' || saved === 'zh') currentLang = saved as Lang;
+ } catch {}
+}
+
+export function t(key: string): string {
+ const entry = translations[key];
+ if (!entry) return key;
+ return entry[currentLang] || entry['zh'] || key;
+}
diff --git a/src/main.tsx b/src/main.tsx
index 963e14f..4d7fa17 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -2,1162 +2,178 @@ import React from "react";
import ReactDOM from "react-dom/client";
import { invoke } from "@tauri-apps/api/core";
import { listen } from "@tauri-apps/api/event";
-import { getVersion } from "@tauri-apps/api/app";
-import {
- BarChart3,
- Brain,
- CalendarDays,
- CheckCircle2,
- Clipboard,
- CreditCard,
- Info,
- KeyRound,
- Power,
- RefreshCw,
- Settings,
- Shirt,
- SunMedium,
- X,
- Zap,
-} from "lucide-react";
-import "./styles.css";
-
-type ViewName = "dashboard" | "settings" | "detail";
-type ModelName = "flash" | "pro";
-type AppConfig = {
- apiKeyConfigured: boolean;
- apiKeyPreview: string | null;
- usageTokenConfigured: boolean;
- refreshIntervalSeconds: number;
- autoRefreshEnabled: boolean;
- autostart: boolean;
- configPath: string;
-};
-type BalanceData = {
- isAvailable: boolean;
- currency: string;
- totalBalance: string;
- grantedBalance: string;
- toppedUpBalance: string;
-};
-type BalanceState = "loading" | "ok" | "error" | "nokey";
-type UsageModel = {
- key: string;
- name: string;
- totalTokens: number;
- requestCount: number;
- cacheHitTokens: number;
- cacheMissTokens: number;
- responseTokens: number;
- cost: number;
-};
-type UsageDay = {
- date: string;
- flashTokens: number;
- flashCacheHit: number;
- flashCacheMiss: number;
- flashResponse: number;
- proTokens: number;
- proCacheHit: number;
- proCacheMiss: number;
- proResponse: number;
- totalTokens: number;
- totalCost: number;
-};
-type UsageResult = {
- models: UsageModel[];
- days: UsageDay[];
- monthCost: number;
-};
+import "./styles.css";
-const fmtInt = (n: number) => Math.round(n).toLocaleString("en-US");
-const fmtTokensShort = (n: number) => {
- if (n >= 1e8) return (n / 1e6).toFixed(0) + "M";
- if (n >= 1e6) return (n / 1e6).toFixed(1) + "M";
- if (n >= 1e3) return (n / 1e3).toFixed(1) + "K";
- return String(Math.round(n));
-};
-const fmtMoney = (n: number) => "¥" + n.toFixed(2);
-const mmdd = (date: string) => {
- const parts = date.split("-");
- return parts.length === 3 ? `${Number(parts[1])}/${Number(parts[2])}` : date;
-};
-const todayStr = () => {
- const now = new Date();
- return `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, "0")}-${String(now.getDate()).padStart(2, "0")}`;
-};
-const dateKey = (date: Date) =>
- `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")}`;
-const addDays = (date: Date, offset: number) => {
- const next = new Date(date);
- next.setDate(next.getDate() + offset);
- return next;
-};
-const recentUsageDays = (days: UsageDay[], count = 7): UsageDay[] => {
- const source = new Map(days.filter((day) => day.date <= todayStr()).map((day) => [day.date, day]));
- const today = new Date();
- return Array.from({ length: count }, (_, index) => {
- const date = dateKey(addDays(today, index - count + 1));
- return (
- source.get(date) ?? {
- date,
- flashTokens: 0,
- flashCacheHit: 0,
- flashCacheMiss: 0,
- flashResponse: 0,
- proTokens: 0,
- proCacheHit: 0,
- proCacheMiss: 0,
- proResponse: 0,
- totalTokens: 0,
- totalCost: 0,
- }
- );
- });
-};
-const previousMonth = (date: Date) => {
- const previous = new Date(date.getFullYear(), date.getMonth() - 1, 1);
- return { month: previous.getMonth() + 1, year: previous.getFullYear() };
-};
-const fetchMonthUsage = (month: number, year: number) => {
- return invoke("fetch_usage", { month, year });
-};
-const fetchCurrentUsage = async () => {
- const now = new Date();
- const current = await fetchMonthUsage(now.getMonth() + 1, now.getFullYear());
- const needsPreviousMonth = addDays(now, -6).getMonth() !== now.getMonth();
- if (!needsPreviousMonth) {
- return current;
- }
- try {
- const previous = previousMonth(now);
- const previousUsage = await fetchMonthUsage(previous.month, previous.year);
- return {
- ...current,
- days: [...previousUsage.days, ...current.days],
- };
- } catch {
- return current;
- }
-};
+import type { ViewName, ModelName, Provider, AppConfig, BalanceData, MimoBalanceData, BalanceState, UsageResult, MimoUsageResult } from "./types";
+import { addDays, previousMonth, fetchWithCache } from "./utils";
+import { initLang } from "./i18n";
+import { DashboardPanel } from "./components/DashboardPanel";
+import { SettingsPanel } from "./components/SettingsPanel";
+import { ModelDetailPanel } from "./components/ModelDetailPanel";
-const refreshOptions = [
- { label: "1 分钟", value: 60 },
- { label: "5 分钟", value: 300 },
- { label: "30 分钟", value: 1800 },
- { label: "1 小时", value: 3600 },
-];
+initLang();
+// ─── App ───────────────────────────────────────────────────
function App() {
const [view, setView] = React.useState("dashboard");
const [model, setModel] = React.useState("flash");
-
- const [balance, setBalance] = React.useState(null);
+ const [provider, setProviderState] = React.useState("deepseek");
+ const [balance, setBalance] = React.useState(null);
const [balanceState, setBalanceState] = React.useState("loading");
const [balanceError, setBalanceError] = React.useState("");
-
- const [usage, setUsage] = React.useState(null);
+ const [usage, setUsage] = React.useState(null);
const [usageState, setUsageState] = React.useState("loading");
const [usageError, setUsageError] = React.useState("");
const [refreshIntervalSeconds, setRefreshIntervalSeconds] = React.useState(60);
const [autoRefreshEnabled, setAutoRefreshEnabled] = React.useState(false);
+ const [currency, setCurrency] = React.useState<"cny" | "usd">("cny");
+ const [exchangeRate, setExchangeRate] = React.useState(0.137);
+ const [efficiencyUnit, setEfficiencyUnit] = React.useState<"token_per_currency" | "currency_per_token">("currency_per_token");
- const loadBalance = React.useCallback(() => {
+ const loadBalance = React.useCallback((p?: Provider) => {
+ const active = p ?? provider;
setBalanceState("loading");
- void invoke("fetch_balance")
- .then((data) => {
- setBalance(data);
- setBalanceState("ok");
- })
+ const cmd = active === "deepseek" ? "fetch_balance" : "fetch_mimo_balance";
+ void fetchWithCache(`dsm-balance-${active}`, () => invoke(cmd))
+ .then((data) => { setBalance(data); setBalanceState("ok"); })
.catch((error) => {
const message = typeof error === "string" ? error : "查询失败";
- setBalanceError(message);
- setBalanceState(message.includes("未配置") ? "nokey" : "error");
+ setBalance(null); setBalanceError(message); setBalanceState(message.includes("未配置") ? "nokey" : "error");
});
- }, []);
+ }, [provider]);
- const loadUsage = React.useCallback(() => {
+ const loadUsage = React.useCallback((p?: Provider) => {
+ const active = p ?? provider;
setUsageState("loading");
- void fetchCurrentUsage()
- .then((data) => {
- setUsage(data);
- setUsageState("ok");
- setUsageError("");
- })
- .catch((error) => {
- const message = typeof error === "string" ? error : "查询失败";
- setUsageError(message);
- setUsage(null);
- setUsageState(message.includes("未配置") ? "nokey" : "error");
- });
+ if (active === "deepseek") {
+ void fetchWithCache("dsm-usage-deepseek", () => invoke("fetch_usage", { month: new Date().getMonth() + 1, year: new Date().getFullYear() }).then(async (current) => {
+ const now = new Date();
+ const needsPrev = addDays(now, -6).getMonth() !== now.getMonth();
+ if (!needsPrev) return current;
+ try {
+ const prev = previousMonth(now);
+ const prevUsage = await invoke("fetch_usage", { month: prev.month, year: prev.year });
+ return { ...current, days: [...prevUsage.days, ...current.days] };
+ } catch { return current; }
+ }))
+ .then((data) => { setUsage(data); setUsageState("ok"); setUsageError(""); })
+ .catch((error) => {
+ const message = typeof error === "string" ? error : "查询失败"; setUsageError(message); setUsage(null); setUsageState(message.includes("未配置") ? "nokey" : "error");
+ });
+ } else {
+ const now = new Date();
+ void fetchWithCache("dsm-usage-mimo", () => invoke("fetch_mimo_usage", { month: now.getMonth() + 1, year: now.getFullYear() }))
+ .then((data) => { setUsage(data); setUsageState("ok"); setUsageError(""); })
+ .catch((error) => {
+ const message = typeof error === "string" ? error : "查询失败"; setUsageError(message); setUsage(null); setUsageState(message.includes("未配置") ? "nokey" : "error");
+ });
+ }
+ }, [provider]);
+
+ const refreshAll = React.useCallback(() => { loadBalance(); loadUsage(); }, [loadBalance, loadUsage]);
+
+ const setProvider = React.useCallback((next: Provider) => {
+ setProviderState(next);
+ setBalance(null); setBalanceState("loading");
+ setUsage(null); setUsageState("loading");
+ if (next === "mimo") void invoke("ensure_mimo_webview").catch(console.warn);
+ void invoke("set_provider", { provider: next }).catch(console.warn);
+ // loadBalance/loadUsage 由 useEffect 监听 provider 变化后统一调用，避免双重调用竞态
}, []);
- const refreshAll = React.useCallback(() => {
- loadBalance();
- loadUsage();
- }, [loadBalance, loadUsage]);
+ const providerRef = React.useRef(provider);
+ const initialLoadDone = React.useRef(false);
React.useEffect(() => {
- refreshAll();
- }, [refreshAll]);
+ if (providerRef.current !== provider) { providerRef.current = provider; loadBalance(provider); loadUsage(provider); }
+ }, [provider, loadBalance, loadUsage]);
React.useEffect(() => {
void invoke("get_app_config")
.then((config) => {
- setRefreshIntervalSeconds(config.refreshIntervalSeconds || 60);
- setAutoRefreshEnabled(config.autoRefreshEnabled);
+ if (!initialLoadDone.current) {
+ initialLoadDone.current = true;
+ if (config.provider !== providerRef.current) { setBalance(null); setBalanceState("loading"); setUsage(null); setUsageState("loading"); }
+ providerRef.current = config.defaultProvider || config.provider; setProviderState(config.defaultProvider || config.provider);
+ setRefreshIntervalSeconds(config.refreshIntervalSeconds || 60); setAutoRefreshEnabled(config.autoRefreshEnabled);
+ setCurrency(config.currency || "cny");
+ setEfficiencyUnit(config.efficiencyUnit || "currency_per_token");
+ // Fetch exchange rate with localStorage cache (24h TTL)
+ const cached = localStorage.getItem("dsm-exrate-v2");
+ if (cached) {
+ try {
+ const { rate, ts } = JSON.parse(cached);
+ if (Date.now() - ts < 24 * 3600 * 1000 && rate > 0) { setExchangeRate(rate); }
+ else { throw new Error("invalid or expired"); }
+ } catch { localStorage.removeItem("dsm-exrate-v2"); }
+ }
+ if (!localStorage.getItem("dsm-exrate-v2")) {
+ void fetch("https://open.er-api.com/v6/latest/CNY")
+ .then(r => r.json())
+ .then(data => {
+ if (data?.rates?.USD) {
+ const rate = data.rates.USD; // e.g. 7.25 CNY per 1 USD
+ setExchangeRate(rate);
+ localStorage.setItem("dsm-exrate-v2", JSON.stringify({ rate, ts: Date.now() }));
+ }
+ })
+ .catch(() => { /* keep default 7.25 */ });
+ }
+ loadBalance(config.provider); loadUsage(config.provider);
+ }
})
- .catch(() => {
- setRefreshIntervalSeconds(60);
- setAutoRefreshEnabled(false);
- });
- }, []);
+ .catch(() => { if (!initialLoadDone.current) { initialLoadDone.current = true; setRefreshIntervalSeconds(60); setAutoRefreshEnabled(false); loadBalance(); loadUsage(); } });
+ }, [loadBalance, loadUsage]);
React.useEffect(() => {
- if (!autoRefreshEnabled) {
- return;
- }
+ if (!autoRefreshEnabled) return;
const timer = window.setInterval(refreshAll, refreshIntervalSeconds * 1000);
return () => window.clearInterval(timer);
}, [autoRefreshEnabled, refreshAll, refreshIntervalSeconds]);
- const hideWindow = React.useCallback(() => {
- void invoke("hide_main_window").catch(() => {
- // Browser preview has no Tauri IPC. Keep it non-blocking for visual checks.
+ React.useEffect(() => {
+ const unlistenPromise = listen("mimo-auth-required", () => {
+ setUsageState("error"); setUsageError("MiMo 未登录，请在设置中重新登录小米账号");
+ setBalanceState("error"); setBalanceError("MiMo 未登录");
});
+ return () => { void unlistenPromise.then((unlisten) => unlisten()); };
}, []);
+ const hideWindow = React.useCallback(() => { void invoke("hide_main_window").catch(() => {}); }, []);
+
return (
{view === "dashboard" && (
setView("settings")}
- onDetail={(nextModel) => {
- setModel(nextModel);
- setView("detail");
- }}
+ onDetail={(nextModel) => { setModel(nextModel); setView("detail"); }}
+ currency={currency}
+ exchangeRate={exchangeRate}
+ efficiencyUnit={efficiencyUnit}
/>
)}
{view === "settings" && (
{
- setUsage(nextUsage);
- setUsageState("ok");
- setUsageError("");
- }}
- onUsageCleared={() => {
- setUsage(null);
- setUsageState("nokey");
- setUsageError("未配置用量 Token");
- }}
- onRefreshIntervalChanged={setRefreshIntervalSeconds}
- onAutoRefreshChanged={setAutoRefreshEnabled}
- onBack={() => setView("dashboard")}
+ provider={provider} onProviderChange={setProvider} onBack={() => setView("dashboard")}
+ onUsageLoaded={(nextUsage) => { setUsage(nextUsage); setUsageState("ok"); }}
+ onUsageCleared={() => { setUsage(null); setUsageState("loading"); }}
+ onRefreshIntervalChanged={setRefreshIntervalSeconds} onAutoRefreshChanged={setAutoRefreshEnabled}
+ onCurrencyChanged={setCurrency}
+ onEfficiencyUnitChanged={setEfficiencyUnit}
/>
)}
{view === "detail" && (
- setView("dashboard")} />
+ setView("dashboard")} provider={provider} currency={currency} exchangeRate={exchangeRate} efficiencyUnit={efficiencyUnit} />
)}
);
}
-function BrandIcon({ size = 32 }: { size?: number }) {
- return (
-
-
-
(
- () => localStorage.getItem("ui-theme") || "dark",
- );
- const toggleTheme = () => {
- const next = theme === "dark" ? "light" : "dark";
- setTheme(next);
- localStorage.setItem("ui-theme", next);
- document.documentElement.setAttribute("data-theme", next);
- };
- const flash = usage?.models.find((item) => item.key === "flash") ?? null;
- const pro = usage?.models.find((item) => item.key === "pro") ?? null;
- const maxTokens = Math.max(flash?.totalTokens ?? 0, pro?.totalTokens ?? 0, 1);
- const today = usage?.days.find((day) => day.date === todayStr()) ?? null;
- const todayCost = usageState === "ok" && today ? today.totalCost : null;
- const monthCost = usageState === "ok" && usage ? usage.monthCost : null;
-
- return (
-
-
-
-
DeepSeek Monitor
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- onDetail("flash")}
- />
- onDetail("pro")}
- />
-
-
-
- );
-}
-
-function BalanceCard({
- balance,
- state,
- error,
- todayCost,
- monthCost,
-}: {
- balance: BalanceData | null;
- state: BalanceState;
- error: string;
- todayCost: number | null;
- monthCost: number | null;
-}) {
- const symbol = balance?.currency === "USD" ? "$" : "¥";
- const amount =
- state === "loading"
- ? "查询中…"
- : state === "nokey"
- ? "未配置"
- : state === "error"
- ? "查询失败"
- : `${symbol}${balance?.totalBalance ?? "0.00"}`;
- const statusText = state === "ok" ? (balance?.isAvailable ? "可用" : "余额不足") : "—";
- const statusOff = state === "ok" && balance != null && !balance.isAvailable;
-
- return (
-
-
-
- 账户余额
-
-
-
-
{amount}
- {state === "error" && {error}
}
-
-
-
- 当日消耗
-
-
{todayCost != null ? fmtMoney(todayCost) : "—"}
-
-
-
- 本月消费
-
-
{monthCost != null ? fmtMoney(monthCost) : "—"}
-
-
- );
-}
-
-function UsageRow({
- modelKey,
- data,
- maxTokens,
- state,
- onClick,
-}: {
- modelKey: ModelName;
- data: UsageModel | null;
- maxTokens: number;
- state: BalanceState;
- onClick: () => void;
-}) {
- const isFlash = modelKey === "flash";
- const name = isFlash ? "V4 Flash" : "V4 Pro";
- const tokensText = data
- ? `${fmtInt(data.totalTokens)} Tokens`
- : state === "loading"
- ? "查询中…"
- : state === "nokey"
- ? "未配置 Token"
- : state === "error"
- ? "用量不可用"
- : "—";
- const cost = data ? fmtMoney(data.cost) : "—";
- const ratio = data && data.cost > 0 ? `${fmtTokensShort(data.totalTokens / data.cost)} T/¥` : "—";
- const width = data ? `${Math.max(2, (data.totalTokens / maxTokens) * 100)}%` : "0%";
-
- return (
-
-
- {isFlash ?
-
-
{name}
-
- {data && data.cacheHitTokens + data.cacheMissTokens > 0 && (
-
- 缓存命中{" "}
- {((data.cacheHitTokens / (data.cacheHitTokens + data.cacheMissTokens)) * 100).toFixed(0)}%
-
- )}
-
- {cost}
- {ratio}
-
-
- );
-}
-
-function UsageChart({
- usage,
- state,
- error,
-}: {
- usage: UsageResult | null;
- state: BalanceState;
- error: string;
-}) {
- const [hoveredIdx, setHoveredIdx] = React.useState(null);
- const MIN_BAR = 3;
- const days = recentUsageDays(usage?.days ?? []);
- const points = days.map((day) => {
- // Flash 与 Pro 合并，不分模型
- const hit = day.flashCacheHit + day.proCacheHit;
- const miss = day.flashCacheMiss + day.proCacheMiss;
- const response = day.flashResponse + day.proResponse;
- return { date: day.date, hit, miss, response, total: hit + miss + response };
- });
- const maxVal = Math.max(...points.map((point) => point.total), 1);
- const sumHit = points.reduce((sum, point) => sum + point.hit, 0);
- const sumMiss = points.reduce((sum, point) => sum + point.miss, 0);
- const sumTotal = points.reduce((sum, point) => sum + point.total, 0);
- const hitRate = sumHit + sumMiss > 0 ? ((sumHit / (sumHit + sumMiss)) * 100).toFixed(0) : "0";
- const placeholder =
- state === "loading"
- ? "查询中…"
- : state === "nokey"
- ? "未配置用量 Token"
- : state === "error"
- ? error
- : "暂无数据";
-
- return (
-
-
-
- 缓存命中明细
-
-
- {state === "ok" ? `命中率 ${hitRate}% · 合计 ${fmtTokensShort(sumTotal)}` : "—"}
-
-
setHoveredIdx(null)}>
- {points.map((point, idx) => (
-
- {hoveredIdx === idx && point.total > 0 && (
-
= points.length - 2 ? " align-right" : ""
- }`}
- >
-
- {point.date}
- {fmtInt(point.total)} tokens
-
-
- {fmtInt(point.hit)} tokens
-
-
- {fmtInt(point.miss)} tokens
-
-
- {fmtInt(point.response)} tokens
-
-
- )}
-
- {point.total > 0 ? fmtTokensShort(point.total) : "0"}
-
-
-
0 ? Math.max(MIN_BAR, (point.total / maxVal) * 100) : MIN_BAR}%`,
- }}
- onMouseEnter={() => setHoveredIdx(idx)}
- onMouseLeave={() => setHoveredIdx(null)}
- >
- {point.total > 0 ? (
- <>
- {point.hit > 0 &&
-
-
{mmdd(point.date)}
-
- ))}
-
-
-
-
-
-
-
-
-
- ) : (
- {placeholder}
- )}
-
- );
-}
-
-function SettingsPanel({
- onBack,
- onUsageLoaded,
- onUsageCleared,
- onRefreshIntervalChanged,
- onAutoRefreshChanged,
-}: {
- onBack: () => void;
- onUsageLoaded: (usage: UsageResult) => void;
- onUsageCleared: () => void;
- onRefreshIntervalChanged: (seconds: number) => void;
- onAutoRefreshChanged: (enabled: boolean) => void;
-}) {
- const [apiKey, setApiKey] = React.useState("");
- const [config, setConfig] = React.useState(null);
- const [status, setStatus] = React.useState("正在读取本地配置");
- const [busy, setBusy] = React.useState(false);
- const [refresh, setRefresh] = React.useState(60);
- const [autoRefresh, setAutoRefresh] = React.useState(false);
- const [autostart, setAutostart] = React.useState(false);
- const [usageToken, setUsageToken] = React.useState("");
- const [usageStatus, setUsageStatus] = React.useState("");
- const [usageSyncing, setUsageSyncing] = React.useState(false);
- const [showManualPaste, setShowManualPaste] = React.useState(false);
- const [appVersion, setAppVersion] = React.useState("1.1.0");
- const configPath = config?.configPath ?? "%APPDATA%\\DeepSeekMonitorWindows\\config.json";
-
- React.useEffect(() => {
- void invoke("get_app_config")
- .then((nextConfig) => {
- setConfig(nextConfig);
- setRefresh(nextConfig.refreshIntervalSeconds || 60);
- setAutoRefresh(nextConfig.autoRefreshEnabled);
- setAutostart(nextConfig.autostart);
- setStatus(nextConfig.apiKeyConfigured ? `已配置 ${nextConfig.apiKeyPreview}` : "未配置 API Key");
- setUsageStatus(nextConfig.usageTokenConfigured ? "用量 Token 已配置" : "未配置用量 Token");
- })
- .catch(() => {
- setStatus("浏览器预览模式，未连接本地配置");
- });
- }, []);
-
- React.useEffect(() => {
- void getVersion()
- .then(setAppVersion)
- .catch(() => setAppVersion("1.1.0"));
- }, []);
-
- const refreshUsageAfterToken = React.useCallback(
- (prefix: string) => {
- setUsageStatus(`${prefix}，正在刷新用量数据…`);
- return fetchCurrentUsage()
- .then((usage) => {
- onUsageLoaded(usage);
- setUsageStatus(`${prefix}，本月消费 ${fmtMoney(usage.monthCost)}`);
- return usage;
- })
- .catch((error) => {
- const message = typeof error === "string" ? error : "用量刷新失败";
- setUsageStatus(`${prefix}，但用量刷新失败：${message}`);
- throw error;
- });
- },
- [onUsageLoaded],
- );
-
- React.useEffect(() => {
- const unlistenPromise = listen("usage-token-captured", (event) => {
- setConfig(event.payload);
- setUsageSyncing(false);
- void refreshUsageAfterToken("已通过网页登录自动同步用量 Token");
- });
- return () => {
- void unlistenPromise.then((unlisten) => unlisten());
- };
- }, [refreshUsageAfterToken]);
-
- React.useEffect(() => {
- const unlistenPromise = listen("usage-sync-ended", () => {
- setUsageSyncing(false);
- setUsageStatus("登录窗口已关闭，Token 未获取到。可重新点击同步或使用方式二手动粘贴。");
- });
- return () => {
- void unlistenPromise.then((unlisten) => unlisten());
- };
- }, []);
-
- const pasteApiKey = React.useCallback(async () => {
- try {
- const text = await navigator.clipboard.readText();
- setApiKey(text.trim());
- setStatus("已从剪贴板读取");
- } catch {
- setStatus("剪贴板读取失败");
- }
- }, []);
-
- const saveApiKey = React.useCallback(() => {
- setBusy(true);
- void invoke("save_api_key", { apiKey })
- .then((nextConfig) => {
- setConfig(nextConfig);
- setApiKey("");
- setStatus("已保存，正在验证 Key…");
- return invoke("fetch_balance");
- })
- .then((balance) => {
- const symbol = balance.currency === "USD" ? "$" : "¥";
- const tip = balance.isAvailable ? "" : "（余额不足）";
- setStatus(`验证通过，当前余额 ${symbol}${balance.totalBalance}${tip}`);
- })
- .catch((error) => {
- setStatus(typeof error === "string" ? error : "保存或验证失败");
- })
- .finally(() => setBusy(false));
- }, [apiKey]);
-
- const clearApiKey = React.useCallback(() => {
- setBusy(true);
- void invoke("clear_api_key")
- .then((nextConfig) => {
- setConfig(nextConfig);
- setApiKey("");
- setStatus("已清除 API Key");
- })
- .catch((error) => {
- setStatus(typeof error === "string" ? error : "清除失败");
- })
- .finally(() => setBusy(false));
- }, []);
-
- const pasteUsageToken = React.useCallback(async () => {
- try {
- const text = await navigator.clipboard.readText();
- setUsageToken(text.trim());
- setUsageStatus("已从剪贴板读取");
- } catch {
- setUsageStatus("剪贴板读取失败");
- }
- }, []);
-
- const startUsageSync = React.useCallback(() => {
- setUsageSyncing(true);
- setUsageStatus("正在打开登录窗口…");
- void invoke("start_usage_sync")
- .then((synced) => {
- if (!synced) {
- setUsageStatus("登录完成后，再次点击本按钮即可同步用量（可多点几次）");
- }
- // synced=true 时由 usage-token-captured 事件刷新数据并更新状态
- })
- .catch((error) => {
- setUsageStatus(typeof error === "string" ? error : "打开登录窗口失败");
- })
- .finally(() => {
- // 短暂忙碌后自动恢复可点击，允许用户登录后反复点击触发同步
- window.setTimeout(() => setUsageSyncing(false), 2500);
- });
- }, []);
-
- const saveUsageToken = React.useCallback(() => {
- setBusy(true);
- void invoke("save_usage_token", { usageToken })
- .then((nextConfig) => {
- setConfig(nextConfig);
- setUsageToken("");
- setUsageStatus("已保存，正在验证用量 Token…");
- return refreshUsageAfterToken("手动 Token 已保存");
- })
- .catch((error) => {
- setUsageStatus(typeof error === "string" ? error : "保存或验证失败");
- })
- .finally(() => setBusy(false));
- }, [refreshUsageAfterToken, usageToken]);
-
- const clearUsageToken = React.useCallback(() => {
- setBusy(true);
- void invoke("clear_usage_token")
- .then((nextConfig) => {
- setConfig(nextConfig);
- setUsageToken("");
- setUsageStatus("已清除用量 Token");
- onUsageCleared();
- })
- .catch((error) => {
- setUsageStatus(typeof error === "string" ? error : "清除失败");
- })
- .finally(() => setBusy(false));
- }, [onUsageCleared]);
-
- const saveRefreshInterval = React.useCallback(
- (seconds: number) => {
- const previous = refresh;
- setRefresh(seconds);
- onRefreshIntervalChanged(seconds);
- void invoke("save_refresh_interval", { refreshIntervalSeconds: seconds })
- .then((nextConfig) => {
- setConfig(nextConfig);
- setRefresh(nextConfig.refreshIntervalSeconds || 60);
- onRefreshIntervalChanged(nextConfig.refreshIntervalSeconds || 60);
- })
- .catch(() => {
- setRefresh(previous);
- onRefreshIntervalChanged(previous);
- });
- },
- [onRefreshIntervalChanged, refresh],
- );
-
- const saveAutoRefreshEnabled = React.useCallback(
- (enabled: boolean) => {
- const previous = autoRefresh;
- setAutoRefresh(enabled);
- onAutoRefreshChanged(enabled);
- void invoke("save_auto_refresh_enabled", { autoRefreshEnabled: enabled })
- .then((nextConfig) => {
- setConfig(nextConfig);
- setAutoRefresh(nextConfig.autoRefreshEnabled);
- onAutoRefreshChanged(nextConfig.autoRefreshEnabled);
- })
- .catch(() => {
- setAutoRefresh(previous);
- onAutoRefreshChanged(previous);
- });
- },
- [autoRefresh, onAutoRefreshChanged],
- );
-
- const saveAutostart = React.useCallback((enabled: boolean) => {
- const previous = autostart;
- setAutostart(enabled);
- void invoke("save_autostart", { autostart: enabled })
- .then((nextConfig) => {
- setConfig(nextConfig);
- setAutostart(nextConfig.autostart);
- })
- .catch(() => setAutostart(previous));
- }, [autostart]);
-
- return (
-
-
-
-
-
-
-
DeepSeek Monitor
-
设置
-
-
-
} title="API Key">
-
用于调用 DeepSeek API 获取余额和用量数据。当前 Windows 版本会保存在应用本地设置中。
-
API Key 只在当前这台 Windows 电脑本地保留。
-
- 本地位置：
- {configPath}
-
-
-
-
-
- 验证并保存
-
-
-
-
- 清除 Key
-
-
-
-
-
} title="用量同步 Token">
-
用于同步 Token 用量、消费和趋势图。DeepSeek 无官方用量 API，需网页登录 token（与上面的 API Key 不同）。
-
方式一网页登录自动同步
-
-
- {usageSyncing ? "等待登录" : "网页登录自动同步"}
-
-
-
-
- 清除 Token
-
-
-
{usageStatus}
-
setShowManualPaste((value) => !value)}
- >
- {showManualPaste ? "收起手动粘贴" : "方式二：手动粘贴 token"}
-
- {showManualPaste && (
- <>
-
- 获取：浏览器登录 platform.deepseek.com，按 F12 打开控制台，输入
- JSON.parse(localStorage.userToken).value 回车，复制返回的字符串。
-
-
token 会过期，用量查询失败时重新获取一次即可。
-
-
-
-
- 保存 Token
-
-
-
- )}
-
-
-
} title="开机自启">
-
开启后，每次登录 Windows 时自动启动 DeepSeek Monitor。
-
-
-
-
} title="自动刷新">
-
开启后，按设定周期自动从 DeepSeek API 拉取最新数据。
-
- {autoRefresh && (
-
- {refreshOptions.map((option) => (
- saveRefreshInterval(option.value)}
- >
- {option.label}
-
- ))}
-
- )}
-
-
-
} title="关于">
-
- 当前版本
- v{appVersion}
-
-
-
-
- );
-}
-
-function SettingsSection({
- icon,
- title,
- children,
-}: {
- icon: React.ReactNode;
- title: string;
- children: React.ReactNode;
-}) {
- return (
-
-
- {icon}
- {title}
-
- {children}
-
- );
-}
-
-function Toggle({
- label,
- checked,
- onChange,
-}: {
- label: string;
- checked: boolean;
- onChange: (checked: boolean) => void;
-}) {
- return (
-
- {label}
-
- );
-}
-
-function ModelDetailPanel({
- model,
- usage,
- usageState,
- onBack,
-}: {
- model: ModelName;
- usage: UsageResult | null;
- usageState: BalanceState;
- onBack: () => void;
-}) {
- const isFlash = model === "flash";
- const data = usage?.models.find((item) => item.key === model) ?? null;
- const title = isFlash ? "V4 Flash" : "V4 Pro";
- const tintClass = isFlash ? "flash" : "pro";
- const cost = data ? fmtMoney(data.cost) : "—";
- const totalText = data ? fmtTokensShort(data.totalTokens) : "—";
-
- const days = recentUsageDays(usage?.days ?? []);
- const points = days.map((day) => {
- const hit = isFlash ? day.flashCacheHit : day.proCacheHit;
- const miss = isFlash ? day.flashCacheMiss : day.proCacheMiss;
- const response = isFlash ? day.flashResponse : day.proResponse;
- return { date: day.date, hit, miss, response, total: hit + miss + response };
- });
- const maxVal = Math.max(...points.map((point) => point.total), 1);
- const rangeText =
- points.length > 0 ? `${mmdd(points[0].date)} - ${mmdd(points[points.length - 1].date)}` : "";
-
- const [hoveredIdx, setHoveredIdx] = React.useState(null);
- const MIN_BAR = 3; // 整根柱子的最小可见高度百分比（含空数据占位）
-
- return (
-
-
-
-
-
- {isFlash ?
-
-
-
-
-
- API 请求次数
- {data ? fmtInt(data.requestCount) : "—"}
-
-
- Tokens
- {totalText}
-
-
-
-
-
按日 Token 消耗
- {rangeText}
-
-
setHoveredIdx(null)}>
- {points.map((point, idx) => (
-
- {hoveredIdx === idx && point.total > 0 && (
-
= points.length - 2 ? " align-right" : ""
- }`}
- >
-
- {point.date}
- {fmtInt(point.total)} tokens
-
-
- {fmtInt(point.hit)} tokens
-
-
- {fmtInt(point.miss)} tokens
-
-
- {fmtInt(point.response)} tokens
-
-
- )}
-
{point.total > 0 ? fmtTokensShort(point.total) : ""}
-
- {/* 柱高按当天合计占最大值的比例；内部三段用 flex-grow 按真实 token 数分配，比例精确且永不溢出裁剪 */}
-
0 ? Math.max(MIN_BAR, (point.total / maxVal) * 100) : MIN_BAR}%`,
- }}
- onMouseEnter={() => setHoveredIdx(idx)}
- onMouseLeave={() => setHoveredIdx(null)}
- >
- {point.total > 0 ? (
- <>
- {point.hit > 0 &&
-
-
{mmdd(point.date)}
-
- ))}
-
-
-
- ) : (
-
- {usageState === "nokey" ? "未配置用量 Token" : usageState === "loading" ? "查询中…" : "暂无数据"}
-
- )}
-
-
- );
-}
-
-// Apply the saved theme before first render to avoid a flash of the wrong skin.
-document.documentElement.setAttribute("data-theme", localStorage.getItem("ui-theme") || "dark");
-ReactDOM.createRoot(document.getElementById("root")!).render(
-
- ,
-);
+// ─── Mount ─────────────────────────────────────────────────
+ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render( = {
+ "mimo-v2.5": "V2.5",
+ "mimo-v2.5-pro": "V2.5 Pro",
+ };
+ return map[key] ?? key;
+};
+
+export const modelIcon = (key: string): "flash" | "pro" | "mimo" => {
+ if (key.startsWith("mimo-")) return "mimo";
+ if (key.includes("pro")) return "pro";
+ return "flash";
+};
+
+/** 通用缓存工具：成功写入 localStorage，失败时回退到缓存 */
+export async function fetchWithCache(key: string, fetcher: () => Promise): Promise {
+ try {
+ const data = await fetcher();
+ try { localStorage.setItem(key, JSON.stringify(data)); } catch {}
+ return data;
+ } catch (error) {
+ try {
+ const cached = localStorage.getItem(key);
+ if (cached) return JSON.parse(cached) as T;
+ } catch {}
+ throw error;
+ }
+}
+
-
-微信号：`pixel-cafetime`
-
-微信公众号：像素与咖啡时光
-
-抖音号：像素与咖啡时光
+DeepSeek / MiMo Monitor Windows: Windows desktop adaptation of felikschu/deepseek-monitor, built with Tauri, React and Rust for DeepSeek and MiMo balance and usage monitoring.
## 当前能力
- 查询 DeepSeek API 账户余额，使用 DeepSeek 官方余额接口。
- 查询 DeepSeek 平台用量数据，包括当月消费、模型 Token 总量、请求数、缓存命中、缓存未命中和输出 Token。
- 支持 V4 Flash 与 V4 Pro 两类模型用量展示。
-- 支持最近 7 天消费趋势图和模型详情页。
+- 支持最近 7 天消费趋势图，可按周翻页浏览历史数据。
+- 支持模型详情页，按日 Token 消耗柱状图，同样支持周翻页。
- 支持 Windows 托盘入口，主窗口默认不进入任务栏。
- 支持 API Key 保存、清除和余额验证。
- 支持用量 Token 自动同步和手动粘贴兜底。
+- **MiMo 平台完整支持**：通过顶部按钮在 DeepSeek 与 MiMo 之间切换。
+ - MiMo 余额查询：通过 WebView2 + JavaScript Fetch 方式获取，支持 HttpOnly Cookie 登录态透传。
+ - MiMo 用量明细：按模型（V2.5 / V2.5 Pro）和日期分解的用量数据，包括 Token 总量、缓存命中/未命中、输出 Token。
+ - MiMo 每日趋势图：按日期聚合的用量数据，支持缓存命中明细展示。
+ - MiMo 静默查询：WebView 默认隐藏，仅在需要登录时弹出窗口。
+ - MiMo 401 自动跳转登录：检测到未登录时自动显示登录窗口。
+- 液态玻璃质感 UI：基于 `backdrop-filter: blur()` 实现动态高斯模糊，叠加半透明渐变层模拟 Vibrance 效果，边缘内高光+半透明描边模拟玻璃厚度与折射，支持深色/浅色主题。
- UI 复用原 macOS 版本的视觉方向，并按 Windows Tauri 窗口做适配。
## 与原项目的关系
@@ -51,7 +35,7 @@ DeepSeek Monitor Windows: Windows desktop adaptation of felikschu/deepseek-monit
| --- | --- | --- |
| 目标平台 | macOS / Web Dashboard | Windows 桌面端 |
| 核心技术 | Python, Web Server, HTML Dashboard | Tauri 2, React 18, TypeScript, Rust |
-| 主要用途 | 追踪 DeepSeek 网页端、Feature Flags、API 端点、法律文档、GitHub 等公开变化 | 查看 DeepSeek API 余额、消费、Token 用量和趋势 |
+| 主要用途 | 追踪 DeepSeek 网页端、Feature Flags、API 端点、法律文档、GitHub 等公开变化 | 查看 DeepSeek/MiMo API 余额、消费、Token 用量和趋势 |
| 启动方式 | Python 服务 + 浏览器访问 | Windows 桌面应用 |
| 本项目是否复用原事件追踪内容 | 不复用 | 不写入 README，不作为本项目能力声明 |
@@ -65,8 +49,6 @@ DeepSeek Monitor Windows: Windows desktop adaptation of felikschu/deepseek-monit
## 安装与开发
-Windows 源码开发需要安装 Visual Studio Build Tools 2022，并勾选 `Desktop development with C++`。项目脚本会自动探测本机 VS Build Tools 安装位置，无需手动配置固定路径。
-
```powershell
git clone 
-