feat: implement iFlow OAuth access restrictions to local machine only, enhancing visibility logic and user notifications

app.js

@@ -229,13 +229,25 @@ class CLIProxyManager {
         }
     }
 
+    isLocalHostname(hostname = (typeof window !== 'undefined' ? window.location.hostname : '')) {
+        const host = (hostname || '').toLowerCase();
+        return host === 'localhost' || host === '127.0.0.1' || host === '::1';
+    }
+
+    isIflowOAuthAllowed(hostname = (typeof window !== 'undefined' ? window.location.hostname : '')) {
+        const host = (hostname || '').toLowerCase();
+        // iFlow OAuth 仅允许在本机回环地址访问
+        return host === '127.0.0.1' || host === 'localhost' || host === '::1';
+    }
+
     // 检查主机名并隐藏 OAuth 登录框
     checkHostAndHideOAuth() {
         const hostname = window.location.hostname;
-        const isLocalhost = hostname === 'localhost' || hostname === '127.0.0.1' || hostname === '::1';
+        const isLocalhost = this.isLocalHostname(hostname);
+        const isIflowOAuthAllowed = this.isIflowOAuthAllowed(hostname);
 
         if (!isLocalhost) {
-            // 隐藏所有 OAuth 登录卡片
+            // 隐藏所有 OAuth 登录卡片(除了 iFlow, 因为它有 Cookie 登录功能可远程使用)
             OAUTH_CARD_IDS.forEach(cardId => {
                 const card = document.getElementById(cardId);
                 if (card) {
@@ -247,17 +259,44 @@ class CLIProxyManager {
             const oauthCardElements = document.querySelectorAll('.card');
             oauthCardElements.forEach(card => {
                 const cardText = card.textContent || '';
+                // 不再隐藏包含 'iFlow' 的卡片
                 if (cardText.includes('Codex OAuth') ||
                     cardText.includes('Anthropic OAuth') ||
                     cardText.includes('Antigravity OAuth') ||
                     cardText.includes('Gemini CLI OAuth') ||
-                    cardText.includes('Qwen OAuth') ||
-                    cardText.includes('iFlow OAuth')) {
+                    cardText.includes('Qwen OAuth')) {
                     card.style.display = 'none';
                 }
             });
 
-            console.log(`当前主机名: ${hostname}，已隐藏 OAuth 登录框`);
+            console.log(`当前主机名: ${hostname}，已隐藏 OAuth 登录框(保留 iFlow Cookie 登录)`);
+        }
+
+        if (!isIflowOAuthAllowed) {
+            // 对于 iFlow card, 仅在本机允许 OAuth，其余情况只保留 Cookie 登录
+            const iflowCard = document.getElementById('iflow-oauth-card');
+            if (iflowCard) {
+                const oauthContent = document.getElementById('iflow-oauth-content');
+                const oauthButton = document.getElementById('iflow-oauth-btn');
+                const oauthStatus = document.getElementById('iflow-oauth-status');
+                const oauthUrlGroup = document.getElementById('iflow-oauth-url')?.closest('.form-group');
+                const oauthHint = iflowCard.querySelector('[data-i18n="auth_login.iflow_oauth_hint"]');
+
+                if (oauthContent) oauthContent.style.display = 'none';
+                if (oauthButton) oauthButton.style.display = 'none';
+                if (oauthStatus) {
+                    oauthStatus.textContent = i18n.t('auth_login.iflow_oauth_local_only');
+                    oauthStatus.style.display = 'block';
+                    oauthStatus.style.color = 'var(--warning-text)';
+                }
+                if (oauthUrlGroup) oauthUrlGroup.style.display = 'none';
+                if (oauthHint) oauthHint.style.display = 'none';
+
+                // 保持整个 card 可见, 因为 Cookie 登录部分仍然可用
+                iflowCard.style.display = 'block';
+            }
+
+            console.log(`当前主机名: ${hostname}，iFlow OAuth 已限制为本机访问，仅保留 Cookie 登录`);
         }
     }
 
@@ -681,6 +720,10 @@ class CLIProxyManager {
     }
 
     // 顶栏标题动画与状态
+    isMobileViewport() {
+        return typeof window !== 'undefined' ? window.innerWidth <= 768 : false;
+    }
+
     setupBrandTitleAnimation() {
         const mainPage = document.getElementById('main-page');
         if (mainPage && mainPage.style.display === 'none') {
@@ -703,13 +746,45 @@ class CLIProxyManager {
             toggle.addEventListener('click', this.brandToggleHandler);
         }
         if (!this.brandResizeHandler) {
-            this.brandResizeHandler = () => this.updateBrandTextWidths({ immediate: true });
+            this.brandResizeHandler = () => this.handleBrandResize();
             window.addEventListener('resize', this.brandResizeHandler);
         }
 
+        if (this.isMobileViewport()) {
+            this.applyMobileBrandState();
+        } else {
+            this.enableBrandAnimation();
+        }
+    }
+
+    enableBrandAnimation() {
+        const { toggle } = this.brandElements || {};
+        if (toggle) {
+            toggle.removeAttribute('aria-disabled');
+            toggle.style.pointerEvents = '';
+        }
         this.brandAnimationReady = true;
     }
 
+    applyMobileBrandState() {
+        const { toggle, wrapper, shortText } = this.brandElements || {};
+        if (!toggle || !wrapper || !shortText) {
+            return;
+        }
+
+        this.clearBrandCollapseTimer();
+        this.brandIsCollapsed = true;
+        this.brandAnimationReady = false;
+
+        toggle.classList.add('collapsed');
+        toggle.classList.remove('expanded');
+        toggle.setAttribute('aria-disabled', 'true');
+        toggle.style.pointerEvents = 'none';
+
+        const targetWidth = this.getBrandTextWidth(shortText);
+        this.applyBrandWidth(targetWidth, { animate: false });
+    }
+
     getBrandTextWidth(element) {
         if (!element) {
             return 0;
@@ -762,6 +837,27 @@ class CLIProxyManager {
         toggle.classList.toggle('expanded', !collapsed);
     }
 
+    handleBrandResize() {
+        if (!this.brandElements?.wrapper) {
+            return;
+        }
+
+        if (this.isMobileViewport()) {
+            this.applyMobileBrandState();
+            return;
+        }
+
+        if (!this.brandAnimationReady) {
+            this.enableBrandAnimation();
+            this.brandIsCollapsed = false;
+            this.setBrandCollapsed(false, { animate: false });
+            this.scheduleBrandCollapse(this.brandCollapseDelayMs);
+            return;
+        }
+
+        this.updateBrandTextWidths({ immediate: true });
+    }
+
     scheduleBrandCollapse(delayMs = this.brandCollapseDelayMs) {
         this.clearBrandCollapseTimer();
         this.brandCollapseTimer = window.setTimeout(() => {
@@ -779,6 +875,12 @@ class CLIProxyManager {
 
     startBrandCollapseCycle() {
         this.setupBrandTitleAnimation();
+
+        if (this.isMobileViewport()) {
+            this.applyMobileBrandState();
+            return;
+        }
+
         if (!this.brandAnimationReady) {
             return;
         }
@@ -792,6 +894,12 @@ class CLIProxyManager {
     resetBrandTitleState() {
         this.clearBrandCollapseTimer();
         const mainPage = document.getElementById('main-page');
+
+        if (this.isMobileViewport()) {
+            this.applyMobileBrandState();
+            return;
+        }
+
         if (!this.brandAnimationReady || (mainPage && mainPage.style.display === 'none')) {
             this.brandIsCollapsed = false;
             return;
@@ -802,6 +910,11 @@ class CLIProxyManager {
     }
 
     refreshBrandTitleAfterTextChange() {
+        if (this.isMobileViewport()) {
+            this.applyMobileBrandState();
+            return;
+        }
+
         if (!this.brandAnimationReady) {
             return;
         }
@@ -937,7 +1050,8 @@ function exposeManagerInstance(instance) {
 function setupSiteLogo() {
     const img = document.getElementById('site-logo');
     const loginImg = document.getElementById('login-logo');
-    if (!img && !loginImg) return;
+    const favicon = document.getElementById('favicon-link');
+    if (!img && !loginImg && !favicon) return;
 
     const inlineLogo = typeof window !== 'undefined' ? window.__INLINE_LOGO__ : null;
     if (inlineLogo) {
@@ -949,6 +1063,9 @@ function setupSiteLogo() {
             loginImg.src = inlineLogo;
             loginImg.style.display = 'inline-block';
         }
+        if (favicon) {
+            favicon.href = inlineLogo;
+        }
         return;
     }
 
@@ -970,6 +1087,9 @@ function setupSiteLogo() {
                 loginImg.src = test.src;
                 loginImg.style.display = 'inline-block';
             }
+            if (favicon) {
+                favicon.href = test.src;
+            }
         };
         test.onerror = () => {
             idx++;

i18n.js

@@ -431,6 +431,7 @@ const i18n = {
             'auth_login.iflow_oauth_title': 'iFlow OAuth',
             'auth_login.iflow_oauth_button': '开始 iFlow 登录',
             'auth_login.iflow_oauth_hint': '通过 OAuth 流程登录 iFlow 服务，自动获取并保存认证文件。',
+            'auth_login.iflow_oauth_local_only': 'iFlow OAuth 仅在本机 (127.0.0.1) 访问时可用，请使用 Cookie 登录。',
             'auth_login.iflow_oauth_url_label': '授权链接:',
             'auth_login.iflow_open_link': '打开链接',
             'auth_login.iflow_copy_link': '复制链接',
@@ -1097,6 +1098,7 @@ const i18n = {
             'auth_login.iflow_oauth_title': 'iFlow OAuth',
             'auth_login.iflow_oauth_button': 'Start iFlow Login',
             'auth_login.iflow_oauth_hint': 'Login to iFlow service through OAuth flow, automatically obtain and save authentication files.',
+            'auth_login.iflow_oauth_local_only': 'iFlow OAuth is only available from 127.0.0.1 (local machine); please use Cookie login remotely.',
             'auth_login.iflow_oauth_url_label': 'Authorization URL:',
             'auth_login.iflow_open_link': 'Open Link',
             'auth_login.iflow_copy_link': 'Copy Link',

index.html

@@ -5,6 +5,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title data-i18n="title.login">CLI Proxy API Management Center</title>
+    <link rel="icon" type="image/x-icon" id="favicon-link">
     <link rel="stylesheet" href="styles.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/codemirror.min.css">
@@ -558,7 +559,7 @@
                                             <i class="fas fa-chevron-right"></i>
                                         </button>
                                     </div>
-                                    <input type="file" id="auth-file-input" accept=".json" style="display: none;">
+                                    <input type="file" id="auth-file-input" accept=".json" multiple style="display: none;">
                                 </div>
                             </div>
 
@@ -890,81 +891,91 @@
                             <!-- 概览统计卡片 -->
                             <div class="stats-overview">
                                 <div class="stat-card">
-                                    <div class="stat-icon">
-                                        <i class="fas fa-paper-plane"></i>
-                                    </div>
-                                    <div class="stat-content">
-                                        <div class="stat-number" id="total-requests">0</div>
-                                        <div class="stat-label" data-i18n="usage_stats.total_requests">总请求数</div>
-                                    </div>
-                                </div>
-
-                                <div class="stat-card">
-                                    <div class="stat-icon success">
-                                        <i class="fas fa-check-circle"></i>
-                                    </div>
-                                    <div class="stat-content">
-                                        <div class="stat-number" id="success-requests">0</div>
-                                        <div class="stat-label" data-i18n="usage_stats.success_requests">成功请求</div>
-                                    </div>
-                                </div>
-
-                                <div class="stat-card">
-                                    <div class="stat-icon error">
-                                        <i class="fas fa-exclamation-circle"></i>
-                                    </div>
-                                    <div class="stat-content">
-                                        <div class="stat-number" id="failed-requests">0</div>
-                                        <div class="stat-label" data-i18n="usage_stats.failed_requests">失败请求</div>
-                                    </div>
-                                </div>
-
-                                <div class="stat-card">
-                                    <div class="stat-icon">
-                                        <i class="fas fa-coins"></i>
-                                    </div>
-                                    <div class="stat-content">
-                                        <div class="stat-number" id="total-tokens">0</div>
-                                        <div class="stat-label" data-i18n="usage_stats.total_tokens">总Token数</div>
-                                        <div class="stat-subtext">
-                                            <span data-i18n="usage_stats.cached_tokens">缓存 Token 数</span>:
-                                            <span id="cached-tokens">0</span>
+                                    <div class="stat-card-header">
+                                        <div class="stat-meta">
+                                            <div class="stat-label" data-i18n="usage_stats.total_requests">总请求数</div>
+                                            <div class="stat-number" id="total-requests">0</div>
+                                            <div class="stat-subtext stat-subtext-inline">
+                                                <span><span data-i18n="usage_stats.success_requests">成功请求</span> <span id="success-requests">0</span></span>
+                                                <span class="dot-divider">•</span>
+                                                <span><span data-i18n="usage_stats.failed_requests">失败请求</span> <span id="failed-requests">0</span></span>
+                                            </div>
                                         </div>
-                                        <div class="stat-subtext">
-                                            <span data-i18n="usage_stats.reasoning_tokens">思考 Token 数</span>:
-                                            <span id="reasoning-tokens">0</span>
+                                        <div class="stat-icon">
+                                            <i class="fas fa-paper-plane"></i>
                                         </div>
                                     </div>
-                                </div>
-
-                                <div class="stat-card">
-                                    <div class="stat-icon">
-                                        <i class="fas fa-gauge-high"></i>
-                                    </div>
-                                    <div class="stat-content">
-                                        <div class="stat-number" id="rpm-30m">0</div>
-                                        <div class="stat-label" data-i18n="usage_stats.rpm_30m">RPM（近30分钟）</div>
+                                    <div class="stat-sparkline" aria-label="30分钟请求趋势">
+                                        <canvas id="requests-sparkline"></canvas>
                                     </div>
                                 </div>
 
                                 <div class="stat-card">
-                                    <div class="stat-icon">
-                                        <i class="fas fa-stopwatch"></i>
+                                    <div class="stat-card-header">
+                                        <div class="stat-meta">
+                                            <div class="stat-label" data-i18n="usage_stats.total_tokens">总Token数</div>
+                                            <div class="stat-number" id="total-tokens">0</div>
+                                            <div class="stat-subtext">
+                                                <span data-i18n="usage_stats.cached_tokens">缓存 Token 数</span>:
+                                                <span id="cached-tokens">0</span>
+                                            </div>
+                                            <div class="stat-subtext">
+                                                <span data-i18n="usage_stats.reasoning_tokens">思考 Token 数</span>:
+                                                <span id="reasoning-tokens">0</span>
+                                            </div>
+                                        </div>
+                                        <div class="stat-icon">
+                                            <i class="fas fa-coins"></i>
+                                        </div>
                                     </div>
-                                    <div class="stat-content">
-                                        <div class="stat-number" id="tpm-30m">0</div>
-                                        <div class="stat-label" data-i18n="usage_stats.tpm_30m">TPM（近30分钟）</div>
+                                    <div class="stat-sparkline" aria-label="30分钟Token趋势">
+                                        <canvas id="tokens-sparkline"></canvas>
+                                    </div>
+                                </div>
+
+                                <div class="stat-card">
+                                    <div class="stat-card-header">
+                                        <div class="stat-meta">
+                                            <div class="stat-label" data-i18n="usage_stats.rpm_30m">RPM（近30分钟）</div>
+                                            <div class="stat-number" id="rpm-30m">0</div>
+                                        </div>
+                                        <div class="stat-icon">
+                                            <i class="fas fa-gauge-high"></i>
+                                        </div>
+                                    </div>
+                                    <div class="stat-sparkline" aria-label="30分钟RPM趋势">
+                                        <canvas id="rpm-sparkline"></canvas>
+                                    </div>
+                                </div>
+
+                                <div class="stat-card">
+                                    <div class="stat-card-header">
+                                        <div class="stat-meta">
+                                            <div class="stat-label" data-i18n="usage_stats.tpm_30m">TPM（近30分钟）</div>
+                                            <div class="stat-number" id="tpm-30m">0</div>
+                                        </div>
+                                        <div class="stat-icon">
+                                            <i class="fas fa-stopwatch"></i>
+                                        </div>
+                                    </div>
+                                    <div class="stat-sparkline" aria-label="30分钟TPM趋势">
+                                        <canvas id="tpm-sparkline"></canvas>
                                     </div>
                                 </div>
 
                                 <div class="stat-card cost-summary-card">
-                                    <div class="stat-icon">
-                                        <i class="fas fa-dollar-sign"></i>
+                                    <div class="stat-card-header">
+                                        <div class="stat-meta">
+                                            <div class="stat-label" data-i18n="usage_stats.total_cost">总花费</div>
+                                            <div class="stat-number" id="total-cost">--</div>
+                                            <div class="stat-subtext" id="total-cost-hint" data-i18n="usage_stats.total_cost_hint">基于已设置的模型单价</div>
+                                        </div>
+                                        <div class="stat-icon">
+                                            <i class="fas fa-dollar-sign"></i>
+                                        </div>
                                     </div>
-                                    <div class="stat-content">
-                                        <div class="stat-number" id="total-cost">--</div>
-                                        <div class="stat-label" data-i18n="usage_stats.total_cost">总花费</div>
-                                        <div class="stat-subtext" id="total-cost-hint" data-i18n="usage_stats.total_cost_hint">基于已设置的模型单价</div>
+                                    <div class="stat-sparkline" aria-label="30分钟花费趋势">
+                                        <canvas id="cost-sparkline"></canvas>
                                     </div>
                                 </div>
                             </div>

src/modules/ai-providers.js

@@ -1275,9 +1275,25 @@ export async function refreshOpenAIModelDiscovery() {
     }
 
     try {
-        const response = await fetch(context.endpoint, {
-            headers: context.headers || {}
-        });
+        let response;
+        let usedSimpleRequest = false;
+
+        try {
+            // 首先尝试正常的带自定义headers的请求
+            response = await fetch(context.endpoint, {
+                headers: context.headers || {}
+            });
+        } catch (error) {
+            // 如果fetch失败(通常是CORS预检失败),尝试简单GET请求
+            console.warn('Normal fetch failed, trying simple GET request:', error);
+            usedSimpleRequest = true;
+            response = await fetch(context.endpoint, {
+                method: 'GET',
+                mode: 'cors',
+                credentials: 'omit'
+                // 不发送自定义headers,避免触发OPTIONS预检
+            });
+        }
 
         if (!response.ok) {
             throw new Error(`${response.status} ${response.statusText}`);
@@ -1298,6 +1314,10 @@ export async function refreshOpenAIModelDiscovery() {
         if (!models.length) {
             this.setOpenAIModelDiscoveryStatus(i18n.t('ai_providers.openai_models_fetch_empty'), 'warning');
         } else {
+            if (usedSimpleRequest) {
+                // 如果使用了简单请求,提示用户
+                console.info('Models fetched using simple request (without custom headers)');
+            }
             this.setOpenAIModelDiscoveryStatus('', 'info');
         }
     } catch (error) {

src/modules/auth-files.js

@@ -998,37 +998,65 @@ export const authFilesModule = {
 
     // 处理文件上传
     async handleFileUpload(event) {
-        const file = event.target.files[0];
-        if (!file) return;
+        const input = event?.target;
+        const files = Array.from(input?.files || []);
+        if (input) {
+            input.value = '';
+        }
+        if (!files.length) return;
 
-        if (!file.name.endsWith('.json')) {
+        const validFiles = [];
+        const invalidFiles = [];
+        files.forEach(file => {
+            if (file && file.name.endsWith('.json')) {
+                validFiles.push(file);
+            } else if (file) {
+                invalidFiles.push(file.name);
+            }
+        });
+
+        if (invalidFiles.length) {
             this.showNotification(i18n.t('auth_files.upload_error_json'), 'error');
-            event.target.value = '';
-            return;
+        }
+        if (!validFiles.length) return;
+
+        let successCount = 0;
+        const failed = [];
+
+        for (const file of validFiles) {
+            try {
+                await this.uploadSingleAuthFile(file);
+                successCount++;
+            } catch (error) {
+                failed.push({ name: file.name, message: error.message });
+            }
         }
 
-        try {
-            const formData = new FormData();
-            formData.append('file', file, file.name);
-
-            const response = await this.apiClient.requestRaw('/auth-files', {
-                method: 'POST',
-                body: formData
-            });
-
-            if (!response.ok) {
-                const errorData = await response.json().catch(() => ({}));
-                throw new Error(errorData.error || `HTTP ${response.status}`);
-            }
-
-            this.clearCache(); // 清除缓存
+        if (successCount > 0) {
+            this.clearCache();
             await this.loadAuthFiles();
-            this.showNotification(i18n.t('auth_files.upload_success'), 'success');
-        } catch (error) {
-            this.showNotification(`${i18n.t('notification.upload_failed')}: ${error.message}`, 'error');
-        } finally {
-            // 清空文件输入框,允许重复上传同一文件
-            event.target.value = '';
+            const suffix = validFiles.length > 1 ? ` (${successCount}/${validFiles.length})` : '';
+            this.showNotification(`${i18n.t('auth_files.upload_success')}${suffix}`, failed.length ? 'warning' : 'success');
+        }
+
+        if (failed.length) {
+            const details = failed.map(item => `${item.name}: ${item.message}`).join('; ');
+            this.showNotification(`${i18n.t('notification.upload_failed')}: ${details}`, 'error');
+        }
+    },
+
+    async uploadSingleAuthFile(file) {
+        const formData = new FormData();
+        formData.append('file', file, file.name);
+
+        const response = await this.apiClient.requestRaw('/auth-files', {
+            method: 'POST',
+            body: formData
+        });
+
+        if (!response.ok) {
+            const errorData = await response.json().catch(() => ({}));
+            throw new Error(errorData.error || `HTTP ${response.status}`);
         }
     },
 

src/modules/oauth.js

@@ -723,6 +723,17 @@ export const oauthModule = {
 
     // 开始 iFlow OAuth 流程
     async startIflowOAuth() {
+        if (!this.isIflowOAuthAllowed()) {
+            const statusEl = document.getElementById('iflow-oauth-status');
+            if (statusEl) {
+                statusEl.textContent = i18n.t('auth_login.iflow_oauth_local_only');
+                statusEl.style.display = 'block';
+                statusEl.style.color = 'var(--warning-text)';
+            }
+            this.showNotification(i18n.t('auth_login.iflow_oauth_local_only'), 'error');
+            return;
+        }
+
         try {
             const response = await this.makeRequest('/iflow-auth-url?is_webui=1');
             const authUrl = response.url;

src/modules/usage.js

@@ -140,6 +140,7 @@ export async function loadUsageStats(usageData = null) {
 
         // 更新概览卡片
         this.updateUsageOverview(usage);
+        this.renderOverviewSparklines(usage);
         this.updateChartLineSelectors(usage);
         this.renderModelPriceOptions(usage);
         this.renderSavedModelPrices();
@@ -168,6 +169,7 @@ export async function loadUsageStats(usageData = null) {
         this.renderModelPriceOptions(null);
         this.renderSavedModelPrices();
         this.updateCostSummaryAndChart(null);
+        this.destroySparklineCharts();
 
         // 清空概览数据
         ['total-requests', 'success-requests', 'failed-requests', 'total-tokens', 'cached-tokens', 'reasoning-tokens', 'rpm-30m', 'tpm-30m'].forEach(id => {
@@ -242,6 +244,36 @@ export function formatPerMinuteValue(value) {
     return num.toFixed(2);
 }
 
+export function formatCompactNumber(value) {
+    const num = Number(value);
+    if (!Number.isFinite(num)) {
+        return '0';
+    }
+    const abs = Math.abs(num);
+    if (abs >= 1_000_000) {
+        return `${(num / 1_000_000).toFixed(1)}M`;
+    }
+    if (abs >= 1_000) {
+        return `${(num / 1_000).toFixed(1)}K`;
+    }
+    return abs >= 1 ? num.toFixed(0) : num.toFixed(2);
+}
+
+export function formatCompactNumber(value) {
+    const num = Number(value);
+    if (!Number.isFinite(num)) {
+        return '0';
+    }
+    const abs = Math.abs(num);
+    if (abs >= 1_000_000) {
+        return `${(num / 1_000_000).toFixed(1)}M`;
+    }
+    if (abs >= 1_000) {
+        return `${(num / 1_000).toFixed(1)}K`;
+    }
+    return abs >= 1 ? num.toFixed(0) : num.toFixed(2);
+}
+
 export function getModelNamesFromUsage(usage) {
     if (!usage) {
         return [];
@@ -678,29 +710,65 @@ export function renderSavedModelPrices() {
         container.innerHTML = `<div class="no-data-message">${i18n.t('usage_stats.model_price_empty')}</div>`;
         return;
     }
-
     const rows = entries.map(([model, price]) => {
         const prompt = Number(price?.prompt) || 0;
         const completion = Number(price?.completion) || 0;
+        const safeModel = this.escapeHtml ? this.escapeHtml(model) : model;
+        const editArg = JSON.stringify(model).replace(/"/g, '&quot;');
         return `
-            <div class="model-price-row">
-                <span class="model-name">${model}</span>
-                <span>$${prompt.toFixed(4)} / 1M</span>
-                <span>$${completion.toFixed(4)} / 1M</span>
+            <div class="provider-item model-price-item" onclick="manager.handleModelPriceEdit(${editArg})">
+                <div class="item-content">
+                    <div class="item-title">${safeModel}</div>
+                    <div class="item-meta">
+                        <span class="stat-badge stat-neutral">${i18n.t('usage_stats.model_price_prompt')}: $${prompt.toFixed(4)} / 1M</span>
+                        <span class="stat-badge stat-neutral">${i18n.t('usage_stats.model_price_completion')}: $${completion.toFixed(4)} / 1M</span>
+                    </div>
+                </div>
+                <div class="item-actions">
+                    <button class="btn btn-secondary" onclick="event.stopPropagation(); manager.handleModelPriceEdit(${editArg});">
+                        <i class="fas fa-edit"></i>
+                    </button>
+                </div>
             </div>
         `;
     }).join('');
 
-    container.innerHTML = `
-        <div class="model-price-table">
-            <div class="model-price-header">
-                <span>${i18n.t('usage_stats.model_price_model')}</span>
-                <span>${i18n.t('usage_stats.model_price_prompt')}</span>
-                <span>${i18n.t('usage_stats.model_price_completion')}</span>
-            </div>
-            ${rows}
-        </div>
-    `;
+    container.innerHTML = rows;
+}
+
+export function handleModelPriceEdit(modelName) {
+    const model = (modelName || '').trim();
+    const select = document.getElementById('model-price-model-select');
+    const promptInput = document.getElementById('model-price-prompt');
+    const completionInput = document.getElementById('model-price-completion');
+    const form = document.getElementById('model-price-form');
+    if (!select || !promptInput || !completionInput) {
+        return;
+    }
+
+    const options = Array.from(select.options).map(opt => opt.value);
+    if (model && !options.includes(model)) {
+        const opt = document.createElement('option');
+        opt.value = model;
+        opt.textContent = model;
+        select.appendChild(opt);
+    }
+
+    select.disabled = false;
+    select.value = model;
+    const price = this.modelPrices?.[model];
+    if (price) {
+        promptInput.value = Number.isFinite(price.prompt) ? price.prompt : '';
+        completionInput.value = Number.isFinite(price.completion) ? price.completion : '';
+    } else {
+        promptInput.value = '';
+        completionInput.value = '';
+    }
+
+    promptInput.focus();
+    if (form && typeof form.scrollIntoView === 'function') {
+        form.scrollIntoView({ behavior: 'smooth', block: 'center' });
+    }
 }
 
 export function prefillModelPriceInputs() {
@@ -751,6 +819,7 @@ export function handleModelPriceSubmit() {
     this.persistModelPrices(next);
     this.renderSavedModelPrices();
     this.updateCostSummaryAndChart(this.currentUsageData, this.getCostChartPeriod());
+    this.renderOverviewSparklines(this.currentUsageData);
     this.showNotification(i18n.t('usage_stats.model_price_saved'), 'success');
 }
 
@@ -768,6 +837,7 @@ export function handleModelPriceReset() {
     this.renderSavedModelPrices();
     this.prefillModelPriceInputs();
     this.updateCostSummaryAndChart(this.currentUsageData, this.getCostChartPeriod());
+    this.renderOverviewSparklines(this.currentUsageData);
 }
 
 export function calculateTokenBreakdown(usage = null) {
@@ -826,6 +896,191 @@ export function calculateRecentPerMinuteRates(windowMinutes = 30, usage = null)
     };
 }
 
+export function buildRecentWindowSeries(windowMinutes = 30, usage = null, prices = null) {
+    const usagePayload = usage || this.currentUsageData;
+    const effectiveWindow = Number.isFinite(windowMinutes) && windowMinutes > 0
+        ? Math.min(windowMinutes, 720)
+        : 30;
+    const bucketMs = 60 * 1000;
+    const bucketCount = Math.max(1, Math.floor(effectiveWindow));
+    const now = Date.now();
+    const windowStart = now - bucketCount * bucketMs;
+    const labels = Array.from({ length: bucketCount }, (_, index) =>
+        this.formatMinuteLabel(new Date(windowStart + index * bucketMs))
+    );
+
+    const requestSeries = new Array(bucketCount).fill(0);
+    const tokenSeries = new Array(bucketCount).fill(0);
+    const costSeries = new Array(bucketCount).fill(0);
+    const priceTable = prices || this.modelPrices || {};
+    const hasPrices = Object.keys(priceTable).length > 0;
+
+    if (!usagePayload) {
+        return {
+            labels,
+            requests: requestSeries,
+            tokens: tokenSeries,
+            rpm: requestSeries,
+            tpm: tokenSeries,
+            cost: costSeries,
+            hasPrices
+        };
+    }
+
+    const details = this.collectUsageDetailsFromUsage(usagePayload);
+    const calculateDetailCost = (detail) => {
+        if (!hasPrices) {
+            return 0;
+        }
+        const modelName = detail.__modelName || '';
+        const price = priceTable[modelName];
+        if (!price) {
+            return 0;
+        }
+        const tokens = detail?.tokens || {};
+        const promptTokens = Number(tokens.input_tokens) || 0;
+        const completionTokens = Number(tokens.output_tokens) || 0;
+        const promptCost = (promptTokens / TOKENS_PER_PRICE_UNIT) * (Number(price.prompt) || 0);
+        const completionCost = (completionTokens / TOKENS_PER_PRICE_UNIT) * (Number(price.completion) || 0);
+        const total = promptCost + completionCost;
+        return Number.isFinite(total) && total > 0 ? total : 0;
+    };
+
+    details.forEach(detail => {
+        const timestamp = Date.parse(detail.timestamp);
+        if (Number.isNaN(timestamp) || timestamp < windowStart) {
+            return;
+        }
+        const bucketIndex = Math.min(bucketCount - 1, Math.floor((timestamp - windowStart) / bucketMs));
+        if (bucketIndex < 0 || bucketIndex >= bucketCount) {
+            return;
+        }
+
+        requestSeries[bucketIndex] += 1;
+        tokenSeries[bucketIndex] += this.extractTotalTokens(detail);
+        costSeries[bucketIndex] += calculateDetailCost(detail);
+    });
+
+    return {
+        labels,
+        requests: requestSeries,
+        tokens: tokenSeries,
+        rpm: requestSeries,
+        tpm: tokenSeries,
+        cost: costSeries,
+        hasPrices
+    };
+}
+
+export function destroySparklineCharts(targetIds = null) {
+    if (!this.sparklineCharts) {
+        this.sparklineCharts = {};
+    }
+    const ids = targetIds && targetIds.length ? targetIds : Object.keys(this.sparklineCharts);
+    ids.forEach(id => {
+        const chart = this.sparklineCharts[id];
+        if (chart && typeof chart.destroy === 'function') {
+            chart.destroy();
+        }
+        delete this.sparklineCharts[id];
+
+        const canvas = document.getElementById(id);
+        if (canvas && typeof canvas.getContext === 'function') {
+            const ctx = canvas.getContext('2d');
+            if (ctx) {
+                const width = canvas.width || canvas.clientWidth || 300;
+                const height = canvas.height || canvas.clientHeight || 80;
+                ctx.clearRect(0, 0, width, height);
+            }
+        }
+    });
+}
+
+export function renderOverviewSparklines(usage = null) {
+    const series = this.buildRecentWindowSeries(30, usage, this.modelPrices);
+    const labels = series.labels || [];
+    const styleFor = (index = 0) => {
+        const fallback = { borderColor: '#3b82f6', backgroundColor: 'rgba(59, 130, 246, 0.15)' };
+        if (!Array.isArray(this.chartLineStyles) || !this.chartLineStyles.length) {
+            return fallback;
+        }
+        return this.chartLineStyles[index % this.chartLineStyles.length] || fallback;
+    };
+
+    const createSparkline = ({ id, data, styleIndex, requirePrices = false }) => {
+        if (requirePrices && !series.hasPrices) {
+            this.destroySparklineCharts([id]);
+            return;
+        }
+        const canvas = document.getElementById(id);
+        if (!canvas) {
+            return;
+        }
+
+        const style = styleFor(styleIndex);
+        const values = Array.isArray(data) && data.length ? data : [0];
+        const maxValue = values.reduce((max, value) => Math.max(max, Number(value) || 0), 0);
+        const suggestedMax = maxValue > 0 ? maxValue * 1.2 : 1;
+
+        this.destroySparklineCharts([id]);
+        if (!this.sparklineCharts) {
+            this.sparklineCharts = {};
+        }
+
+        this.sparklineCharts[id] = new Chart(canvas, {
+            type: 'line',
+            data: {
+                labels,
+                datasets: [{
+                    data: values,
+                    borderColor: style.borderColor,
+                    backgroundColor: style.backgroundColor,
+                    fill: true,
+                    tension: 0.35,
+                    pointRadius: 0,
+                    pointHoverRadius: 3,
+                    borderWidth: 2,
+                    spanGaps: true
+                }]
+            },
+            options: {
+                responsive: true,
+                maintainAspectRatio: false,
+                animation: false,
+                interaction: { intersect: false, mode: 'index' },
+                plugins: {
+                    legend: { display: false },
+                    tooltip: {
+                        callbacks: {
+                            label: (ctx) => this.formatCompactNumber(ctx.parsed.y || 0)
+                        }
+                    }
+                },
+                layout: { padding: { left: 2, right: 2, top: 6, bottom: 6 } },
+                scales: {
+                    x: { display: false },
+                    y: {
+                        display: false,
+                        beginAtZero: true,
+                        suggestedMin: 0,
+                        suggestedMax
+                    }
+                },
+                elements: {
+                    line: { borderWidth: 2, tension: 0.35 },
+                    point: { radius: 0, hitRadius: 3 }
+                }
+            }
+        });
+    };
+
+    createSparkline({ id: 'requests-sparkline', data: series.requests, styleIndex: 0 });
+    createSparkline({ id: 'tokens-sparkline', data: series.tokens, styleIndex: 1 });
+    createSparkline({ id: 'rpm-sparkline', data: series.rpm, styleIndex: 2 });
+    createSparkline({ id: 'tpm-sparkline', data: series.tpm, styleIndex: 3 });
+    createSparkline({ id: 'cost-sparkline', data: series.cost, styleIndex: 7, requirePrices: true });
+}
+
 export function createHourlyBucketMeta() {
     const hourMs = 60 * 60 * 1000;
     const now = new Date();
@@ -1000,6 +1255,15 @@ export function formatHourLabel(date) {
     return `${month}-${day} ${hour}:00`;
 }
 
+export function formatMinuteLabel(date) {
+    if (!(date instanceof Date)) {
+        return '';
+    }
+    const hour = date.getHours().toString().padStart(2, '0');
+    const minute = date.getMinutes().toString().padStart(2, '0');
+    return `${hour}:${minute}`;
+}
+
 export function formatDayLabel(date) {
     if (!(date instanceof Date)) {
         return '';
@@ -1596,19 +1860,23 @@ export const usageModule = {
     persistModelPrices,
     renderModelPriceOptions,
     renderSavedModelPrices,
+    handleModelPriceEdit,
     prefillModelPriceInputs,
     normalizePriceValue,
     handleModelPriceSubmit,
     handleModelPriceReset,
     calculateTokenBreakdown,
     calculateRecentPerMinuteRates,
+    buildRecentWindowSeries,
     createHourlyBucketMeta,
     buildHourlySeriesByModel,
     buildDailySeriesByModel,
     buildChartDataForMetric,
     formatHourLabel,
+    formatMinuteLabel,
     formatTokensInMillions,
     formatPerMinuteValue,
+    formatCompactNumber,
     formatDayLabel,
     extractTotalTokens,
     formatUsd,
@@ -1616,6 +1884,8 @@ export const usageModule = {
     getCostChartPeriod,
     setCostChartPlaceholder,
     destroyCostChart,
+    destroySparklineCharts,
+    renderOverviewSparklines,
     initializeCostChart,
     updateCostSummaryAndChart,
     initializeCharts,

src/utils/constants.js

@@ -111,14 +111,14 @@ export const REQUEST_TIMEOUT_MS = 30 * 1000;
 /**
  * OAuth 卡片元素 ID 列表
  * 用于根据主机环境隐藏/显示不同的 OAuth 选项
+ * 注意: iflow-oauth-card 不在此列表中,因为它包含Cookie登录功能,该功能可在远程使用
  */
 export const OAUTH_CARD_IDS = [
     'codex-oauth-card',
     'anthropic-oauth-card',
     'antigravity-oauth-card',
     'gemini-cli-oauth-card',
-    'qwen-oauth-card',
-    'iflow-oauth-card'
+    'qwen-oauth-card'
 ];
 
 /**

styles.css

@@ -267,6 +267,8 @@
     display: inline-flex;
     align-items: center;
     height: 36px;
+    min-width: 36px;
+    justify-content: center;
 }
 
 /* 登录页面的按钮样式优化 */
@@ -916,6 +918,26 @@ body {
     position: relative;
 }
 
+@media (max-width: 768px) {
+    .top-navbar-brand-toggle {
+        pointer-events: none;
+        cursor: default;
+    }
+
+    .brand-texts {
+        transition: none;
+    }
+
+    .top-navbar-brand-toggle .brand-text-full {
+        display: none;
+    }
+
+    .top-navbar-brand-toggle .brand-text-short {
+        position: relative;
+        opacity: 1;
+    }
+}
+
 .top-navbar-actions {
     display: flex;
     align-items: center;
@@ -926,63 +948,99 @@ body {
 .top-navbar-actions>* {
     display: inline-flex;
     align-items: center;
+    justify-content: center;
     height: 36px;
+    min-width: 44px;
 }
 
 .top-navbar .header-controls {
     display: inline-flex;
     align-items: center;
     gap: 8px;
-    height: 100%;
+    height: auto;
 }
 
 .top-navbar .language-btn,
 .top-navbar .theme-btn {
-    width: 36px;
     height: 36px;
     min-height: 36px;
-    padding: 0;
+    min-width: 44px;
+    padding: 0 12px;
     justify-content: center;
+    line-height: 1;
 }
 
 .top-navbar-actions .btn {
     height: 36px;
     min-height: 36px;
+    min-width: 44px;
+    padding: 0 12px;
+    justify-content: center;
+    line-height: 1;
 }
 
 @media (max-width: 768px) {
+    .top-navbar {
+        flex-direction: column;
+        align-items: stretch;
+        gap: 8px;
+        height: auto;
+        min-height: var(--navbar-height, 69px);
+    }
+
+    .top-navbar-left {
+        width: 100%;
+        justify-content: flex-start;
+    }
+
     .top-navbar-actions {
+        width: 100%;
         flex-wrap: wrap;
         justify-content: flex-end;
         gap: 8px;
+        margin-left: 0;
+        align-items: center;
     }
 
     .top-navbar .header-controls {
-        width: 100%;
+        width: auto;
+        order: 0;
         justify-content: flex-end;
-        order: 99;
         gap: 8px;
+        height: auto;
+        align-items: center;
     }
 
     .top-navbar-actions>* {
-        height: 34px;
-        min-height: 34px;
+        height: 36px;
+        min-height: 36px;
+        min-width: 44px;
+        justify-content: center;
     }
 
     .top-navbar .language-btn,
     .top-navbar .theme-btn {
-        width: 34px;
-        height: 34px;
+        height: 36px;
+        min-height: 36px;
+        min-width: 44px;
+        padding: 0 12px;
+        justify-content: center;
+        line-height: 1;
     }
 
     .top-navbar-actions .btn {
-        height: 34px;
-        min-height: 34px;
-        padding: 0 10px;
+        height: 36px;
+        min-height: 36px;
+        min-width: 44px;
+        padding: 0 12px;
+        justify-content: center;
+        line-height: 1;
     }
 
-    .top-navbar-actions .btn span {
-        display: none;
+    .top-navbar .language-btn i,
+    .top-navbar .theme-btn i,
+    .top-navbar-actions .btn i {
+        margin: 0;
     }
 }
 
@@ -2999,8 +3057,9 @@ input:checked+.slider:before {
     .sidebar {
         position: fixed;
         left: 0;
-        top: var(--navbar-height, 69px);
-        height: calc(100vh - var(--navbar-height, 69px));
+        top: 0;
+        height: 100vh;
+        padding-top: calc(var(--navbar-height, 69px) + 20px);
         transform: translateX(-100%);
         z-index: 150;
         box-shadow: var(--shadow-sm);
@@ -3048,38 +3107,51 @@ input:checked+.slider:before {
 @media (max-width: 768px) {
     .top-navbar {
         padding: 12px 16px;
+        flex-direction: column;
+        align-items: stretch;
+        gap: 8px;
+        height: auto;
+        min-height: 60px;
     }
 
     .top-navbar-title {
         font-size: 18px;
     }
 
+    .top-navbar-left {
+        width: 100%;
+        justify-content: flex-start;
+    }
+
     .top-navbar-actions {
         gap: 6px;
         flex-wrap: wrap;
         justify-content: flex-end;
+        width: 100%;
+        margin-left: 0;
     }
 
     .top-navbar-actions>* {
-        height: 34px;
-        min-height: 34px;
+        height: 36px;
+        min-height: 36px;
+        min-width: 44px;
     }
 
     .top-navbar .header-controls {
-        height: 34px;
-        gap: 6px;
+        height: 36px;
+        gap: 8px;
+        width: auto;
+        order: 0;
+        justify-content: flex-end;
     }
 
     .top-navbar-actions .btn,
     .top-navbar .language-btn,
     .top-navbar .theme-btn {
-        height: 34px;
-        min-height: 34px;
-        padding: 0 10px;
-    }
-
-    .top-navbar-actions .btn span {
-        display: none;
+        height: 36px;
+        min-height: 36px;
+        min-width: 44px;
+        padding: 8px 12px;
     }
 
     .btn {
@@ -3315,14 +3387,14 @@ input:checked+.slider:before {
 /* 使用统计样式 */
 .stats-overview {
     display: grid;
-    grid-template-columns: repeat(3, minmax(0, 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
     gap: 20px;
     margin-bottom: 30px;
 }
 
 @media (max-width: 1200px) {
     .stats-overview {
-        grid-template-columns: repeat(2, minmax(0, 1fr));
+        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
     }
 }
 
@@ -3349,6 +3421,13 @@ input:checked+.slider:before {
 
 .usage-filter-actions {
     min-width: 260px;
+    flex: 1 0 100%;
+    order: 0;
+}
+
+.chart-line-group {
+    flex: 1 1 260px;
+    order: 1;
 }
 
 .usage-filter-group label {
@@ -3415,10 +3494,11 @@ input:checked+.slider:before {
     background: var(--card-bg);
     border: 1px solid var(--border-color);
     border-radius: 12px;
-    padding: 24px;
+    padding: 18px;
     display: flex;
-    align-items: center;
-    gap: 16px;
+    flex-direction: column;
+    gap: 12px;
+    min-height: 220px;
     transition: all 0.2s ease;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
@@ -3429,16 +3509,31 @@ input:checked+.slider:before {
     transform: translateY(-2px);
 }
 
+.stat-card-header {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 12px;
+    min-height: 110px;
+}
+
+.stat-meta {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    flex: 1;
+}
+
 .stat-icon {
-    width: 50px;
-    height: 50px;
+    width: 44px;
+    height: 44px;
     border-radius: 12px;
     display: flex;
     align-items: center;
     justify-content: center;
     background: var(--primary-color);
     color: white;
-    font-size: 20px;
+    font-size: 18px;
     flex-shrink: 0;
 }
 
@@ -3450,32 +3545,47 @@ input:checked+.slider:before {
     background: #ef4444;
 }
 
-.stat-content {
-    flex: 1;
-}
-
 .stat-number {
-    font-size: 28px;
+    font-size: 30px;
     font-weight: 700;
     color: var(--text-primary);
-    line-height: 1;
-    margin-bottom: 4px;
+    line-height: 1.1;
 }
 
 .stat-label {
-    font-size: 14px;
+    font-size: 13px;
+    letter-spacing: 0.2px;
     color: var(--text-secondary);
-    font-weight: 500;
+    text-transform: uppercase;
+    font-weight: 600;
 }
 
 .stat-subtext {
     font-size: 12px;
     color: var(--text-tertiary);
-    line-height: 1.4;
+    line-height: 1.5;
 }
 
-.stat-subtext:first-of-type {
-    margin-top: 6px;
+.stat-subtext-inline {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+    flex-wrap: wrap;
+}
+
+.dot-divider {
+    color: var(--text-tertiary);
+    font-weight: 700;
+}
+
+.stat-sparkline {
+    height: 90px;
+    margin-top: auto;
+}
+
+.stat-sparkline canvas {
+    width: 100% !important;
+    height: 100% !important;
 }
 
 .cost-summary-card .stat-icon {
@@ -3604,34 +3714,18 @@ input:checked+.slider:before {
 
 .model-price-list {
     margin-top: 6px;
-}
-
-.model-price-table {
     display: flex;
     flex-direction: column;
-    gap: 8px;
+    gap: 10px;
 }
 
-.model-price-header,
-.model-price-row {
-    display: grid;
-    grid-template-columns: 2fr 1fr 1fr;
-    gap: 12px;
-    padding: 10px 12px;
-    border: 1px solid var(--border-color);
-    border-radius: 10px;
-    align-items: center;
+.model-price-item {
+    cursor: pointer;
 }
 
-.model-price-header {
-    font-weight: 700;
-    color: var(--text-primary);
-    background: var(--bg-secondary);
-}
-
-.model-price-row {
-    background: var(--bg-primary);
-    color: var(--text-secondary);
+.model-price-item .item-meta {
+    margin-bottom: 0;
+    gap: 10px;
 }
 
 .chart-placeholder {
@@ -4875,6 +4969,12 @@ input:checked+.slider:before {
     border: 1px solid var(--success-border);
 }
 
+.stat-badge.stat-neutral {
+    background-color: var(--bg-tertiary);
+    color: var(--text-secondary);
+    border: 1px solid var(--border-color);
+}
+
 .stat-badge.stat-success i {
     font-size: 13px;
 }