From 027bc0b73b46e7d6c517e794e1de7e5cc4d61c3d Mon Sep 17 00:00:00 2001
From: lzt404 <2596933790@qq.com>
Date: Mon, 27 Jul 2026 20:44:34 +0800
Subject: [PATCH] feat: increase main window width and add compact labels
 option for usage category panel

---
 src-tauri/tauri.conf.json      | 2 +-
 src/pages/UsageRecordsPage.tsx | 6 +++---
 src/styles.css                 | 5 +++++
 3 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json
index dae2ae6..de04409 100644
--- a/src-tauri/tauri.conf.json
+++ b/src-tauri/tauri.conf.json
@@ -14,7 +14,7 @@
       {
         "label": "main",
         "title": "EasyCLIProxyAPI",
-        "width": 1400,
+        "width": 1500,
         "height": 815,
         "minWidth": 640,
         "minHeight": 600
diff --git a/src/pages/UsageRecordsPage.tsx b/src/pages/UsageRecordsPage.tsx
index f078286..b18e7c6 100644
--- a/src/pages/UsageRecordsPage.tsx
+++ b/src/pages/UsageRecordsPage.tsx
@@ -372,14 +372,14 @@ function AnalysisView({ analysis, overview }: { analysis: UsageAnalysis; overvie
     failures: point.failure,
     tokens: point.tokens,
   })).sort((left, right) => right.tokens - left.tokens);
-  return <div className="usage-analysis-grid"><CategoryPanel title={t('usage.analysis.models')} items={analysis.models} /><CategoryPanel title="Provider" items={analysis.providers} /><CategoryPanel title={t('usage.analysis.sources')} items={analysis.sources} /><CategoryPanel title={t('usage.analysis.keys')} items={analysis.apiKeys} /><CategoryPanel title={t('usage.analysis.hours')} items={hours} /></div>;
+  return <div className="usage-analysis-grid"><CategoryPanel title={t('usage.analysis.models')} items={analysis.models} /><CategoryPanel title="Provider" items={analysis.providers} /><CategoryPanel title={t('usage.analysis.sources')} items={analysis.sources} compactLabels /><CategoryPanel title={t('usage.analysis.keys')} items={analysis.apiKeys} /><CategoryPanel title={t('usage.analysis.hours')} items={hours} /></div>;
 }
 
-function CategoryPanel({ title, items }: { title: string; items: UsageCategory[] }) {
+function CategoryPanel({ title, items, compactLabels = false }: { title: string; items: UsageCategory[]; compactLabels?: boolean }) {
   const { t } = useI18n();
   const max = Math.max(...items.map((item) => item.tokens), 1);
   const total = items.reduce((sum, item) => sum + item.tokens, 0);
-  return <section className="panel usage-category-panel"><div className="usage-section-heading"><div><strong>{title}</strong><span>{t('usage.analysis.sortedByTokens')}</span></div></div>{items.length ? <div className="usage-category-list">{items.slice(0, 10).map((item) => <div key={item.key}><span><strong title={item.label}>{item.label}</strong><small>{t('usage.analysis.itemMeta', { requests: compactNumber(item.requests), percent: total ? (item.tokens * 100 / total).toFixed(1) : '0.0', tokens: compactNumber(item.tokens) })}</small></span><i><b style={{ width: `${item.tokens * 100 / max}%` }} /></i></div>)}</div> : <UsageEmpty />}</section>;
+  return <section className={`panel usage-category-panel${compactLabels ? ' compact-labels' : ''}`}><div className="usage-section-heading"><div><strong>{title}</strong><span>{t('usage.analysis.sortedByTokens')}</span></div></div>{items.length ? <div className="usage-category-list">{items.slice(0, 10).map((item) => <div key={item.key}><span><strong title={item.label}>{item.label}</strong><small>{t('usage.analysis.itemMeta', { requests: compactNumber(item.requests), percent: total ? (item.tokens * 100 / total).toFixed(1) : '0.0', tokens: compactNumber(item.tokens) })}</small></span><i><b style={{ width: `${item.tokens * 100 / max}%` }} /></i></div>)}</div> : <UsageEmpty />}</section>;
 }
 
 function EventsView({ events, onPage }: { events: UsageEventPage; onPage: (page: number) => void }) {
diff --git a/src/styles.css b/src/styles.css
index 75a994e..1eb3870 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -5391,6 +5391,11 @@ input:focus-visible {
   min-height: 290px;
 }
 
+.usage-category-panel.compact-labels .usage-category-list strong {
+  flex: 0 1 auto;
+  max-width: min(46%, 160px);
+}
+
 .usage-events-panel {
   display: grid;
   gap: 10px;