feat(usage): add usage stats export/import actions

src/i18n/locales/en.json

@@ -534,6 +534,11 @@
     "by_hour": "By Hour",
     "by_day": "By Day",
     "refresh": "Refresh",
+    "export": "Export",
+    "import": "Import",
+    "export_success": "Usage export downloaded",
+    "import_success": "Import complete: added {{added}}, skipped {{skipped}}, total {{total}}, failed {{failed}}",
+    "import_invalid": "Invalid usage export file",
     "chart_line_label_1": "Line 1",
     "chart_line_label_2": "Line 2",
     "chart_line_label_3": "Line 3",
@@ -596,6 +601,11 @@
     "error_logs_modified": "Last modified",
     "error_logs_download": "Download",
     "error_log_download_success": "Error log downloaded successfully",
+    "request_log_download_title": "Download Request Log",
+    "request_log_download_confirm": "Download request log for ID {{id}}?",
+    "request_log_download_success": "Request log downloaded successfully",
+    "action_hint": "Double-click a log line to copy the raw text. Long-press a line with a request ID to download the request log.",
+    "action_hint_disabled": "Double-click a log line to copy the raw text. Enable request logging to long-press a line with a request ID and download the request log.",
     "empty_title": "No Logs Available",
     "empty_desc": "When \"Enable logging to file\" is enabled, logs will be displayed here",
     "log_content": "Log Content",

src/i18n/locales/zh-CN.json

@@ -534,6 +534,11 @@
     "by_hour": "按小时",
     "by_day": "按天",
     "refresh": "刷新",
+    "export": "导出数据",
+    "import": "导入数据",
+    "export_success": "使用统计已导出",
+    "import_success": "导入完成：新增 {{added}}，跳过 {{skipped}}，总请求 {{total}}，失败 {{failed}}",
+    "import_invalid": "导入文件格式不正确",
     "chart_line_label_1": "曲线 1",
     "chart_line_label_2": "曲线 2",
     "chart_line_label_3": "曲线 3",
@@ -596,6 +601,11 @@
     "error_logs_modified": "最后修改",
     "error_logs_download": "下载",
     "error_log_download_success": "错误日志下载成功",
+    "request_log_download_title": "下载报文",
+    "request_log_download_confirm": "是否要下载id为{{id}}的报文？",
+    "request_log_download_success": "报文下载成功",
+    "action_hint": "双击日志行可复制原文，长按带有请求 ID 的日志可下载报文。",
+    "action_hint_disabled": "双击日志行可复制原文，启用请求日志后可长按带请求 ID 的日志下载报文。",
     "empty_title": "暂无日志记录",
     "empty_desc": "当启用\"日志记录到文件\"功能后，日志将显示在这里",
     "log_content": "日志内容",

src/pages/DashboardPage.tsx

@@ -242,7 +242,11 @@ export function DashboardPage() {
         </div>
         <div className={styles.connectionInfo}>
           <span className={styles.serverUrl}>{apiBase || '-'}</span>
-          {serverVersion && <span className={styles.serverVersion}>v{serverVersion}</span>}
+          {serverVersion && (
+            <span className={styles.serverVersion}>
+              v{serverVersion.trim().replace(/^[vV]+/, '')}
+            </span>
+          )}
           {serverBuildDate && (
             <span className={styles.buildDate}>
               {new Date(serverBuildDate).toLocaleDateString(i18n.language)}

src/pages/LogsPage.tsx

@@ -1,9 +1,11 @@
 import { useDeferredValue, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import type { PointerEvent as ReactPointerEvent } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Card } from '@/components/ui/Card';
 import { Button } from '@/components/ui/Button';
 import { EmptyState } from '@/components/ui/EmptyState';
 import { Input } from '@/components/ui/Input';
+import { Modal } from '@/components/ui/Modal';
 import { ToggleSwitch } from '@/components/ui/ToggleSwitch';
 import {
   IconDownload,
@@ -38,6 +40,8 @@ const INITIAL_DISPLAY_LINES = 100;
 const LOAD_MORE_LINES = 200;
 const MAX_BUFFER_LINES = 10000;
 const LOAD_MORE_THRESHOLD_PX = 72;
+const LONG_PRESS_MS = 650;
+const LONG_PRESS_MOVE_THRESHOLD = 10;
 
 const HTTP_METHODS = ['GET', 'POST', 'PUT', 'PATCH', 'DELETE', 'OPTIONS', 'HEAD'] as const;
 type HttpMethod = (typeof HTTP_METHODS)[number];
@@ -370,14 +374,22 @@ export function LogsPage() {
   const [autoRefresh, setAutoRefresh] = useState(false);
   const [searchQuery, setSearchQuery] = useState('');
   const deferredSearchQuery = useDeferredValue(searchQuery);
-  const [hideManagementLogs, setHideManagementLogs] = useState(false);
+  const [hideManagementLogs, setHideManagementLogs] = useState(true);
   const [errorLogs, setErrorLogs] = useState<ErrorLogItem[]>([]);
   const [loadingErrors, setLoadingErrors] = useState(false);
   const [errorLogsError, setErrorLogsError] = useState('');
+  const [requestLogId, setRequestLogId] = useState<string | null>(null);
+  const [requestLogDownloading, setRequestLogDownloading] = useState(false);
 
   const logViewerRef = useRef<HTMLDivElement | null>(null);
   const pendingScrollToBottomRef = useRef(false);
   const pendingPrependScrollRef = useRef<{ scrollHeight: number; scrollTop: number } | null>(null);
+  const longPressRef = useRef<{
+    timer: number | null;
+    startX: number;
+    startY: number;
+    fired: boolean;
+  } | null>(null);
 
   // 保存最新时间戳用于增量获取
   const latestTimestampRef = useRef<number>(0);
@@ -647,6 +659,85 @@ export function LogsPage() {
     }
   };
 
+  const clearLongPressTimer = () => {
+    if (longPressRef.current?.timer) {
+      window.clearTimeout(longPressRef.current.timer);
+      longPressRef.current.timer = null;
+    }
+  };
+
+  const startLongPress = (event: ReactPointerEvent<HTMLDivElement>, id?: string) => {
+    if (!requestLogEnabled) return;
+    if (!id) return;
+    if (requestLogId) return;
+    clearLongPressTimer();
+    longPressRef.current = {
+      timer: window.setTimeout(() => {
+        setRequestLogId(id);
+        if (longPressRef.current) {
+          longPressRef.current.fired = true;
+          longPressRef.current.timer = null;
+        }
+      }, LONG_PRESS_MS),
+      startX: event.clientX,
+      startY: event.clientY,
+      fired: false,
+    };
+  };
+
+  const cancelLongPress = () => {
+    clearLongPressTimer();
+    longPressRef.current = null;
+  };
+
+  const handleLongPressMove = (event: ReactPointerEvent<HTMLDivElement>) => {
+    const current = longPressRef.current;
+    if (!current || current.timer === null || current.fired) return;
+    const deltaX = Math.abs(event.clientX - current.startX);
+    const deltaY = Math.abs(event.clientY - current.startY);
+    if (deltaX > LONG_PRESS_MOVE_THRESHOLD || deltaY > LONG_PRESS_MOVE_THRESHOLD) {
+      cancelLongPress();
+    }
+  };
+
+  const closeRequestLogModal = () => {
+    if (requestLogDownloading) return;
+    setRequestLogId(null);
+  };
+
+  const downloadRequestLog = async (id: string) => {
+    setRequestLogDownloading(true);
+    try {
+      const response = await logsApi.downloadRequestLogById(id);
+      const blob = new Blob([response.data], { type: 'text/plain' });
+      const url = window.URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = `request-${id}.log`;
+      a.click();
+      window.URL.revokeObjectURL(url);
+      showNotification(t('logs.request_log_download_success'), 'success');
+      setRequestLogId(null);
+    } catch (err: unknown) {
+      const message = getErrorMessage(err);
+      showNotification(
+        `${t('notification.download_failed')}${message ? `: ${message}` : ''}`,
+        'error'
+      );
+    } finally {
+      setRequestLogDownloading(false);
+    }
+  };
+
+  useEffect(() => {
+    return () => {
+      if (longPressRef.current?.timer) {
+        window.clearTimeout(longPressRef.current.timer);
+        longPressRef.current.timer = null;
+      }
+    };
+  }, []);
+
   return (
     <div className={styles.container}>
       <h1 className={styles.pageTitle}>{t('logs.title')}</h1>
@@ -760,6 +851,10 @@ export function LogsPage() {
               </div>
             </div>
 
+            <div className="hint">
+              {requestLogEnabled ? t('logs.action_hint') : t('logs.action_hint_disabled')}
+            </div>
+
             {loading ? (
               <div className="hint">{t('logs.loading')}</div>
             ) : logState.buffer.length > 0 && parsedVisibleLines.length > 0 ? (
@@ -795,6 +890,11 @@ export function LogsPage() {
                         onDoubleClick={() => {
                           void copyLogLine(line.raw);
                         }}
+                        onPointerDown={(event) => startLongPress(event, line.requestId)}
+                        onPointerUp={cancelLongPress}
+                        onPointerLeave={cancelLongPress}
+                        onPointerCancel={cancelLongPress}
+                        onPointerMove={handleLongPressMove}
                         title={t('logs.double_click_copy_hint', {
                           defaultValue: 'Double-click to copy',
                         })}
@@ -946,6 +1046,32 @@ export function LogsPage() {
           </Card>
         )}
       </div>
+
+      <Modal
+        open={Boolean(requestLogId)}
+        onClose={closeRequestLogModal}
+        title={t('logs.request_log_download_title')}
+        footer={
+          <>
+            <Button variant="secondary" onClick={closeRequestLogModal} disabled={requestLogDownloading}>
+              {t('common.cancel')}
+            </Button>
+            <Button
+              onClick={() => {
+                if (requestLogId) {
+                  void downloadRequestLog(requestLogId);
+                }
+              }}
+              loading={requestLogDownloading}
+              disabled={!requestLogId}
+            >
+              {t('common.confirm')}
+            </Button>
+          </>
+        }
+      >
+        {requestLogId ? t('logs.request_log_download_confirm', { id: requestLogId }) : null}
+      </Modal>
     </div>
   );
 }

src/pages/UsagePage.module.scss

@@ -18,6 +18,13 @@
   gap: 10px;
 }
 
+.headerActions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
 .pageTitle {
   font-size: 28px;
   font-weight: 700;

src/pages/UsagePage.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState, useCallback, useMemo, type CSSProperties } from 'react';
+import { useEffect, useState, useCallback, useMemo, useRef, type CSSProperties } from 'react';
 import { useTranslation } from 'react-i18next';
 import {
   Chart as ChartJS,
@@ -19,7 +19,7 @@ import { Input } from '@/components/ui/Input';
 import { LoadingSpinner } from '@/components/ui/LoadingSpinner';
 import { IconDiamond, IconDollarSign, IconSatellite, IconTimer, IconTrendingUp } from '@/components/ui/icons';
 import { useMediaQuery } from '@/hooks/useMediaQuery';
-import { useThemeStore } from '@/stores';
+import { useNotificationStore, useThemeStore } from '@/stores';
 import { usageApi } from '@/services/api/usage';
 import {
   formatTokensInMillions,
@@ -63,6 +63,7 @@ interface UsagePayload {
 
 export function UsagePage() {
   const { t } = useTranslation();
+  const { showNotification } = useNotificationStore();
   const isMobile = useMediaQuery('(max-width: 768px)');
   const resolvedTheme = useThemeStore((state) => state.resolvedTheme);
   const isDark = resolvedTheme === 'dark';
@@ -71,6 +72,9 @@ export function UsagePage() {
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState('');
   const [modelPrices, setModelPrices] = useState<Record<string, ModelPrice>>({});
+  const [exporting, setExporting] = useState(false);
+  const [importing, setImporting] = useState(false);
+  const importInputRef = useRef<HTMLInputElement | null>(null);
 
   // Model price form state
   const [selectedModel, setSelectedModel] = useState('');
@@ -107,6 +111,77 @@ export function UsagePage() {
     setModelPrices(loadModelPrices());
   }, [loadUsage]);
 
+  const handleExport = async () => {
+    setExporting(true);
+    try {
+      const data = await usageApi.exportUsage();
+      const exportedAt =
+        typeof data?.exported_at === 'string' ? new Date(data.exported_at) : new Date();
+      const safeTimestamp = Number.isNaN(exportedAt.getTime())
+        ? new Date().toISOString()
+        : exportedAt.toISOString();
+      const filename = `usage-export-${safeTimestamp.replace(/[:.]/g, '-')}.json`;
+      const blob = new Blob([JSON.stringify(data ?? {}, null, 2)], { type: 'application/json' });
+      const url = window.URL.createObjectURL(blob);
+      const link = document.createElement('a');
+      link.href = url;
+      link.download = filename;
+      link.click();
+      window.URL.revokeObjectURL(url);
+      showNotification(t('usage_stats.export_success'), 'success');
+    } catch (err: unknown) {
+      const message = err instanceof Error ? err.message : '';
+      showNotification(
+        `${t('notification.download_failed')}${message ? `: ${message}` : ''}`,
+        'error'
+      );
+    } finally {
+      setExporting(false);
+    }
+  };
+
+  const handleImportClick = () => {
+    importInputRef.current?.click();
+  };
+
+  const handleImportChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    event.target.value = '';
+    if (!file) return;
+
+    setImporting(true);
+    try {
+      const text = await file.text();
+      let payload: unknown;
+      try {
+        payload = JSON.parse(text);
+      } catch {
+        showNotification(t('usage_stats.import_invalid'), 'error');
+        return;
+      }
+
+      const result = await usageApi.importUsage(payload);
+      showNotification(
+        t('usage_stats.import_success', {
+          added: result?.added ?? 0,
+          skipped: result?.skipped ?? 0,
+          total: result?.total_requests ?? 0,
+          failed: result?.failed_requests ?? 0
+        }),
+        'success'
+      );
+      await loadUsage();
+    } catch (err: unknown) {
+      const message = err instanceof Error ? err.message : '';
+      showNotification(
+        `${t('notification.upload_failed')}${message ? `: ${message}` : ''}`,
+        'error'
+      );
+    } finally {
+      setImporting(false);
+    }
+  };
+
   // Calculate derived data
   const tokenBreakdown = usage ? calculateTokenBreakdown(usage) : { cachedTokens: 0, reasoningTokens: 0 };
   const rateStats = usage
@@ -527,14 +602,41 @@ export function UsagePage() {
       )}
       <div className={styles.header}>
         <h1 className={styles.pageTitle}>{t('usage_stats.title')}</h1>
-        <Button
-          variant="secondary"
-          size="sm"
-          onClick={loadUsage}
-          disabled={loading}
-        >
-          {loading ? t('common.loading') : t('usage_stats.refresh')}
-        </Button>
+        <div className={styles.headerActions}>
+          <Button
+            variant="secondary"
+            size="sm"
+            onClick={handleExport}
+            loading={exporting}
+            disabled={loading || importing}
+          >
+            {t('usage_stats.export')}
+          </Button>
+          <Button
+            variant="secondary"
+            size="sm"
+            onClick={handleImportClick}
+            loading={importing}
+            disabled={loading || exporting}
+          >
+            {t('usage_stats.import')}
+          </Button>
+          <Button
+            variant="secondary"
+            size="sm"
+            onClick={loadUsage}
+            disabled={loading || exporting || importing}
+          >
+            {loading ? t('common.loading') : t('usage_stats.refresh')}
+          </Button>
+          <input
+            ref={importInputRef}
+            type="file"
+            accept=".json,application/json"
+            style={{ display: 'none' }}
+            onChange={handleImportChange}
+          />
+        </div>
       </div>
 
       {error && <div className={styles.errorBox}>{error}</div>}

src/services/api/logs.ts

@@ -39,4 +39,10 @@ export const logsApi = {
       responseType: 'blob',
       timeout: LOGS_TIMEOUT_MS
     }),
+
+  downloadRequestLogById: (id: string) =>
+    apiClient.getRaw(`/request-log-by-id/${encodeURIComponent(id)}`, {
+      responseType: 'blob',
+      timeout: LOGS_TIMEOUT_MS
+    }),
 };

src/services/api/usage.ts

@@ -7,12 +7,38 @@ import { computeKeyStats, KeyStats } from '@/utils/usage';
 
 const USAGE_TIMEOUT_MS = 60 * 1000;
 
+export interface UsageExportPayload {
+  version?: number;
+  exported_at?: string;
+  usage?: Record<string, unknown>;
+  [key: string]: unknown;
+}
+
+export interface UsageImportResponse {
+  added?: number;
+  skipped?: number;
+  total_requests?: number;
+  failed_requests?: number;
+  [key: string]: unknown;
+}
+
 export const usageApi = {
   /**
    * 获取使用统计原始数据
    */
   getUsage: () => apiClient.get('/usage', { timeout: USAGE_TIMEOUT_MS }),
 
+  /**
+   * 导出使用统计快照
+   */
+  exportUsage: () => apiClient.get<UsageExportPayload>('/usage/export', { timeout: USAGE_TIMEOUT_MS }),
+
+  /**
+   * 导入使用统计快照
+   */
+  importUsage: (payload: unknown) =>
+    apiClient.post<UsageImportResponse>('/usage/import', payload, { timeout: USAGE_TIMEOUT_MS }),
+
   /**
    * 计算密钥成功/失败统计，必要时会先获取 usage 数据
    */

src/styles/layout.scss

@@ -331,7 +331,7 @@
 }
 
 .main-content {
-  flex: 0 0 auto;
+  flex: 1 0 auto;
   padding: $spacing-lg;
   display: flex;
   flex-direction: column;