cc工作前备份

2026-03-12 00:23:42 +08:00
parent f75a2b798b
commit ef849c62ab
98 changed files with 12110 additions and 568 deletions
--- a/desktop/src/components/Settings/UsageStats.tsx
+++ b/desktop/src/components/Settings/UsageStats.tsx
@@ -0,0 +1,76 @@
+import { useEffect } from 'react';
+import { useGatewayStore } from '../../store/gatewayStore';
+
+export function UsageStats() {
+  const { usageStats, loadUsageStats, connectionState } = useGatewayStore();
+
+  useEffect(() => {
+    if (connectionState === 'connected') {
+      loadUsageStats();
+    }
+  }, [connectionState]);
+
+  const stats = usageStats || { totalSessions: 0, totalMessages: 0, totalTokens: 0, byModel: {} };
+  const models = Object.entries(stats.byModel || {});
+
+  const formatTokens = (n: number) => {
+    if (n >= 1_000_000) return `~${(n / 1_000_000).toFixed(1)} M`;
+    if (n >= 1_000) return `~${(n / 1_000).toFixed(1)} k`;
+    return `${n}`;
+  };
+
+  return (
+    <div>
+      <div className="flex justify-between items-center mb-6">
+        <h1 className="text-2xl font-bold text-gray-900">用量统计</h1>
+        <button onClick={() => loadUsageStats()} className="text-sm text-gray-500 border border-gray-300 rounded-lg px-3 py-1.5 hover:bg-gray-50">
+          刷新
+        </button>
+      </div>
+      <p className="text-sm text-gray-500 mb-6">本设备所有已保存对话的 Token 用量汇总。</p>
+
+      <div className="grid grid-cols-3 gap-4 mb-8">
+        <StatCard label="会话数" value={stats.totalSessions} />
+        <StatCard label="消息数" value={stats.totalMessages} />
+        <StatCard label="总 Token" value={formatTokens(stats.totalTokens)} />
+      </div>
+
+      <h2 className="text-sm font-medium text-gray-700 mb-3">按模型</h2>
+      <div className="bg-gray-50 rounded-xl p-5 space-y-4">
+        {models.length === 0 && (
+          <p className="text-sm text-gray-400 text-center py-4">暂无数据</p>
+        )}
+        {models.map(([model, data]) => {
+          const total = data.inputTokens + data.outputTokens;
+          const maxTokens = Math.max(...models.map(([, d]) => d.inputTokens + d.outputTokens), 1);
+          const pct = (total / maxTokens) * 100;
+          return (
+            <div key={model}>
+              <div className="flex justify-between items-center mb-1">
+                <span className="text-sm font-medium text-gray-900">{model}</span>
+                <span className="text-xs text-gray-500">{data.messages} 条消息</span>
+              </div>
+              <div className="w-full bg-gray-200 rounded-full h-2 mb-1">
+                <div className="bg-orange-500 h-2 rounded-full" style={{ width: `${pct}%` }} />
+              </div>
+              <div className="flex justify-between text-xs text-gray-400">
+                <span>输入: {formatTokens(data.inputTokens)}</span>
+                <span>输出: {formatTokens(data.outputTokens)}</span>
+                <span>总计: {formatTokens(total)}</span>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+function StatCard({ label, value }: { label: string; value: string | number }) {
+  return (
+    <div className="bg-gray-50 rounded-xl p-4 text-center">
+      <div className="text-2xl font-bold text-gray-900">{value}</div>
+      <div className="text-xs text-gray-500 mt-1">{label}</div>
+    </div>
+  );
+}