feat

- Add formatUnixTimestamp utility to auto-detect timestamp precision (s/ms/μs/ns)
  - Fix incorrect file modification time display in logs page
  - Remove fixed height constraint from AuthFilesPage model list

.gitignore

@@ -8,6 +8,8 @@ pnpm-debug.log*
 lerna-debug.log*
 api.md
 usage.json
+CLAUDE.md
+AGENTS.md
 
 node_modules
 dist

src/components/ui/icons.tsx

@@ -266,3 +266,40 @@ export function IconDollarSign({ size = 20, ...props }: IconProps) {
     </svg>
   );
 }
+
+export function IconGithub({ size = 20, ...props }: IconProps) {
+  return (
+    <svg {...baseSvgProps} width={size} height={size} {...props}>
+      <path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4" />
+      <path d="M9 18c-4.51 2-5-2-7-2" />
+    </svg>
+  );
+}
+
+export function IconExternalLink({ size = 20, ...props }: IconProps) {
+  return (
+    <svg {...baseSvgProps} width={size} height={size} {...props}>
+      <path d="M15 3h6v6" />
+      <path d="M10 14 21 3" />
+      <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
+    </svg>
+  );
+}
+
+export function IconBookOpen({ size = 20, ...props }: IconProps) {
+  return (
+    <svg {...baseSvgProps} width={size} height={size} {...props}>
+      <path d="M12 7v14" />
+      <path d="M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z" />
+    </svg>
+  );
+}
+
+export function IconCode({ size = 20, ...props }: IconProps) {
+  return (
+    <svg {...baseSvgProps} width={size} height={size} {...props}>
+      <polyline points="16 18 22 12 16 6" />
+      <polyline points="8 6 2 12 8 18" />
+    </svg>
+  );
+}

src/i18n/locales/en.json

@@ -571,11 +571,15 @@
     "auto_refresh_disabled": "Auto refresh disabled",
     "load_more_hint": "Scroll up to load more",
     "hidden_lines": "Hidden: {{count}} lines",
+    "hide_management_logs": "Hide {{prefix}} logs",
     "search_placeholder": "Search logs by content or keyword",
     "search_empty_title": "No matching logs found",
-    "search_empty_desc": "Try a different keyword or clear the search filter.",
+    "search_empty_desc": "Try a different keyword or clear the filters.",
+    "double_click_copy_hint": "Double-click to copy raw log line",
+    "copy_success": "Log copied to clipboard",
+    "copy_failed": "Copy failed",
     "lines": "lines",
-    "removed": "Removed",
+    "removed": "Filtered",
     "upgrade_required_title": "Please Upgrade CLI Proxy API",
     "upgrade_required_desc": "The current server version does not support the logs viewing feature. Please upgrade to the latest version of CLI Proxy API to use this feature."
   },
@@ -630,7 +634,15 @@
     "version_is_latest": "You are on the latest version",
     "version_check_error": "Update check failed",
     "version_current_missing": "Server version is unavailable; cannot compare",
-    "version_unknown": "Unknown"
+    "version_unknown": "Unknown",
+    "quick_links_title": "Quick Links",
+    "quick_links_desc": "Access project repositories and documentation for help and updates.",
+    "link_main_repo": "Main Repository",
+    "link_main_repo_desc": "CLI Proxy API core program source code",
+    "link_webui_repo": "WebUI Repository",
+    "link_webui_repo_desc": "Management Center frontend source code",
+    "link_docs": "Documentation",
+    "link_docs_desc": "Usage tutorials and configuration guides"
   },
   "notification": {
     "debug_updated": "Debug settings updated",

src/i18n/locales/zh-CN.json

@@ -571,11 +571,15 @@
     "auto_refresh_disabled": "自动刷新已关闭",
     "load_more_hint": "向上滚动加载更多",
     "hidden_lines": "已隐藏 {{count}} 行",
+    "hide_management_logs": "屏蔽 {{prefix}} 日志",
     "search_placeholder": "搜索日志内容或关键字",
     "search_empty_title": "未找到匹配的日志",
-    "search_empty_desc": "尝试更换关键字或清空搜索条件。",
+    "search_empty_desc": "尝试更换关键字或清空筛选条件。",
+    "double_click_copy_hint": "双击复制日志原文",
+    "copy_success": "已复制日志原文",
+    "copy_failed": "复制失败",
     "lines": "行",
-    "removed": "已删除",
+    "removed": "已过滤",
     "upgrade_required_title": "需要升级 CLI Proxy API",
     "upgrade_required_desc": "当前服务器版本不支持日志查看功能，请升级到最新版本的 CLI Proxy API 以使用此功能。"
   },
@@ -630,7 +634,15 @@
     "version_is_latest": "当前已是最新版本",
     "version_check_error": "检查更新失败",
     "version_current_missing": "未获取到服务器版本号，暂无法比对",
-    "version_unknown": "未知"
+    "version_unknown": "未知",
+    "quick_links_title": "快捷链接",
+    "quick_links_desc": "访问项目仓库和文档，获取帮助和更新。",
+    "link_main_repo": "主程序仓库",
+    "link_main_repo_desc": "CLI Proxy API 核心程序源代码",
+    "link_webui_repo": "WebUI 仓库",
+    "link_webui_repo_desc": "管理中心前端界面源代码",
+    "link_docs": "使用教程",
+    "link_docs_desc": "配置指南和使用说明"
   },
   "notification": {
     "debug_updated": "调试设置已更新",

src/pages/AuthFilesPage.module.scss

@@ -417,8 +417,6 @@
   display: flex;
   flex-direction: column;
   gap: $spacing-sm;
-  max-height: 400px;
-  overflow-y: auto;
 }
 
 .modelItem {

src/pages/LogsPage.module.scss

@@ -28,6 +28,62 @@
   }
 }
 
+.filters {
+  display: flex;
+  align-items: center;
+  gap: $spacing-md;
+  flex-wrap: wrap;
+  margin-bottom: $spacing-md;
+
+  :global(.form-group) {
+    margin: 0;
+  }
+}
+
+.searchWrapper {
+  flex: 1;
+  min-width: 220px;
+  max-width: 420px;
+}
+
+.searchInput {
+  padding-right: 44px !important;
+}
+
+.searchIcon {
+  color: var(--text-tertiary);
+  pointer-events: none;
+}
+
+.searchClear {
+  @include button-reset;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border-radius: $radius-full;
+  color: var(--text-secondary);
+
+  &:hover {
+    background: var(--bg-secondary);
+  }
+}
+
+.filterStats {
+  margin-left: auto;
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 12px;
+  color: var(--text-secondary);
+  white-space: nowrap;
+}
+
+.removedCount {
+  color: var(--text-tertiary);
+}
+
 .actionButton {
   white-space: nowrap;
 }
@@ -93,7 +149,9 @@
   padding: 10px 12px;
   border-bottom: 1px solid var(--border-color);
   border-left: 3px solid transparent;
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
+  cursor: copy;
+  font-family:
+    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
     monospace;
   font-size: 12.5px;
   line-height: 1.45;

src/pages/LogsPage.tsx

@@ -1,12 +1,23 @@
-import { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { useDeferredValue, useEffect, useLayoutEffect, useMemo, useRef, useState } 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 { ToggleSwitch } from '@/components/ui/ToggleSwitch';
-import { IconDownload, IconRefreshCw, IconTimer, IconTrash2 } from '@/components/ui/icons';
+import {
+  IconDownload,
+  IconEyeOff,
+  IconRefreshCw,
+  IconSearch,
+  IconTimer,
+  IconTrash2,
+  IconX,
+} from '@/components/ui/icons';
 import { useNotificationStore, useAuthStore } from '@/stores';
 import { logsApi } from '@/services/api/logs';
+import { MANAGEMENT_API_PREFIX } from '@/utils/constants';
+import { formatUnixTimestamp } from '@/utils/format';
 import styles from './LogsPage.module.scss';
 
 interface ErrorLogItem {
@@ -45,7 +56,7 @@ const HTTP_STATUS_PATTERNS: RegExp[] = [
   /\b([1-5]\d{2})\s*-/,
   new RegExp(`\\b(?:${HTTP_METHODS.join('|')})\\s+\\S+\\s+([1-5]\\d{2})\\b`),
   /\b(?:status|code|http)[:\s]+([1-5]\d{2})\b/i,
-  /\b([1-5]\d{2})\s+(?:OK|Created|Accepted|No Content|Moved|Found|Bad Request|Unauthorized|Forbidden|Not Found|Method Not Allowed|Internal Server Error|Bad Gateway|Service Unavailable|Gateway Timeout)\b/i
+  /\b([1-5]\d{2})\s+(?:OK|Created|Accepted|No Content|Moved|Found|Bad Request|Unauthorized|Forbidden|Not Found|Method Not Allowed|Internal Server Error|Bad Gateway|Service Unavailable|Gateway Timeout)\b/i,
 ];
 
 const detectHttpStatusCode = (text: string): number | undefined => {
@@ -186,9 +197,7 @@ const parseLogLine = (raw: string): ParsedLogLine => {
     }
 
     // ip
-    const ipIndex = segments.findIndex(
-      (segment) => Boolean(extractIp(segment))
-    );
+    const ipIndex = segments.findIndex((segment) => Boolean(extractIp(segment)));
     if (ipIndex >= 0) {
       const extracted = extractIp(segments[ipIndex]);
       if (extracted) {
@@ -235,10 +244,44 @@ const parseLogLine = (raw: string): ParsedLogLine => {
     ip,
     method,
     path,
-    message
+    message,
   };
 };
 
+const getErrorMessage = (err: unknown): string => {
+  if (err instanceof Error) return err.message;
+  if (typeof err === 'string') return err;
+  if (typeof err !== 'object' || err === null) return '';
+  if (!('message' in err)) return '';
+
+  const message = (err as { message?: unknown }).message;
+  return typeof message === 'string' ? message : '';
+};
+
+const copyToClipboard = async (text: string) => {
+  try {
+    await navigator.clipboard.writeText(text);
+    return true;
+  } catch {
+    try {
+      const textarea = document.createElement('textarea');
+      textarea.value = text;
+      textarea.style.position = 'fixed';
+      textarea.style.opacity = '0';
+      textarea.style.left = '-9999px';
+      textarea.style.top = '0';
+      document.body.appendChild(textarea);
+      textarea.focus();
+      textarea.select();
+      const ok = document.execCommand('copy');
+      document.body.removeChild(textarea);
+      return ok;
+    } catch {
+      return false;
+    }
+  }
+};
+
 export function LogsPage() {
   const { t } = useTranslation();
   const { showNotification } = useNotificationStore();
@@ -248,6 +291,9 @@ export function LogsPage() {
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState('');
   const [autoRefresh, setAutoRefresh] = useState(false);
+  const [searchQuery, setSearchQuery] = useState('');
+  const deferredSearchQuery = useDeferredValue(searchQuery);
+  const [hideManagementLogs, setHideManagementLogs] = useState(false);
   const [errorLogs, setErrorLogs] = useState<ErrorLogItem[]>([]);
   const [loadingErrors, setLoadingErrors] = useState(false);
 
@@ -286,9 +332,8 @@ export function LogsPage() {
     try {
       pendingScrollToBottomRef.current = !incremental || isNearBottom(logViewerRef.current);
 
-      const params = incremental && latestTimestampRef.current > 0
-        ? { after: latestTimestampRef.current }
-        : {};
+      const params =
+        incremental && latestTimestampRef.current > 0 ? { after: latestTimestampRef.current } : {};
       const data = await logsApi.fetchLogs(params);
 
       // 更新时间戳
@@ -320,10 +365,10 @@ export function LogsPage() {
         const visibleFrom = Math.max(buffer.length - INITIAL_DISPLAY_LINES, 0);
         setLogState({ buffer, visibleFrom });
       }
-    } catch (err: any) {
+    } catch (err: unknown) {
       console.error('Failed to load logs:', err);
       if (!incremental) {
-        setError(err?.message || t('logs.load_error'));
+        setError(getErrorMessage(err) || t('logs.load_error'));
       }
     } finally {
       if (!incremental) {
@@ -339,8 +384,12 @@ export function LogsPage() {
       setLogState({ buffer: [], visibleFrom: 0 });
       latestTimestampRef.current = 0;
       showNotification(t('logs.clear_success'), 'success');
-    } catch (err: any) {
-      showNotification(`${t('notification.delete_failed')}: ${err?.message || ''}`, 'error');
+    } catch (err: unknown) {
+      const message = getErrorMessage(err);
+      showNotification(
+        `${t('notification.delete_failed')}${message ? `: ${message}` : ''}`,
+        'error'
+      );
     }
   };
 
@@ -366,16 +415,8 @@ export function LogsPage() {
     try {
       const res = await logsApi.fetchErrorLogs();
       // API 返回 { files: [...] }
-      const files = (res as any)?.files;
-      const list: ErrorLogItem[] = Array.isArray(files)
-        ? files.map((f: any) => ({
-            name: f.name,
-            size: f.size,
-            modified: f.modified
-          }))
-        : [];
-      setErrorLogs(list);
-    } catch (err: any) {
+      setErrorLogs(Array.isArray(res.files) ? res.files : []);
+    } catch (err: unknown) {
       console.error('Failed to load error logs:', err);
       // 静默失败,不影响主日志显示
       setErrorLogs([]);
@@ -395,8 +436,12 @@ export function LogsPage() {
       a.click();
       window.URL.revokeObjectURL(url);
       showNotification(t('logs.error_log_download_success'), 'success');
-    } catch (err: any) {
-      showNotification(`${t('notification.download_failed')}: ${err?.message || ''}`, 'error');
+    } catch (err: unknown) {
+      const message = getErrorMessage(err);
+      showNotification(
+        `${t('notification.download_failed')}${message ? `: ${message}` : ''}`,
+        'error'
+      );
     }
   };
 
@@ -433,23 +478,65 @@ export function LogsPage() {
     () => logState.buffer.slice(logState.visibleFrom),
     [logState.buffer, logState.visibleFrom]
   );
+
+  const trimmedSearchQuery = deferredSearchQuery.trim();
+  const isSearching = trimmedSearchQuery.length > 0;
+  const baseLines = isSearching ? logState.buffer : visibleLines;
+
+  const { filteredLines, removedCount } = useMemo(() => {
+    let working = baseLines;
+    let removed = 0;
+
+    if (hideManagementLogs) {
+      const next: string[] = [];
+      for (const line of working) {
+        if (line.includes(MANAGEMENT_API_PREFIX)) {
+          removed += 1;
+        } else {
+          next.push(line);
+        }
+      }
+      working = next;
+    }
+
+    if (trimmedSearchQuery) {
+      const queryLowered = trimmedSearchQuery.toLowerCase();
+      const next: string[] = [];
+      for (const line of working) {
+        if (line.toLowerCase().includes(queryLowered)) {
+          next.push(line);
+        } else {
+          removed += 1;
+        }
+      }
+      working = next;
+    }
+
+    return { filteredLines: working, removedCount: removed };
+  }, [baseLines, hideManagementLogs, trimmedSearchQuery]);
+
   const parsedVisibleLines = useMemo(
-    () => visibleLines.map((line) => parseLogLine(line)),
-    [visibleLines]
+    () => filteredLines.map((line) => parseLogLine(line)),
+    [filteredLines]
   );
-  const canLoadMore = logState.visibleFrom > 0;
+
+  const canLoadMore = !isSearching && logState.visibleFrom > 0;
 
   const handleLogScroll = () => {
     const node = logViewerRef.current;
     if (!node) return;
+    if (isSearching) return;
     if (!canLoadMore) return;
     if (pendingPrependScrollRef.current) return;
     if (node.scrollTop > LOAD_MORE_THRESHOLD_PX) return;
 
-    pendingPrependScrollRef.current = { scrollHeight: node.scrollHeight, scrollTop: node.scrollTop };
+    pendingPrependScrollRef.current = {
+      scrollHeight: node.scrollHeight,
+      scrollTop: node.scrollTop,
+    };
     setLogState((prev) => ({
       ...prev,
-      visibleFrom: Math.max(prev.visibleFrom - LOAD_MORE_LINES, 0)
+      visibleFrom: Math.max(prev.visibleFrom - LOAD_MORE_LINES, 0),
     }));
   };
 
@@ -463,185 +550,264 @@ export function LogsPage() {
     pendingPrependScrollRef.current = null;
   }, [logState.visibleFrom]);
 
+  const copyLogLine = async (raw: string) => {
+    const ok = await copyToClipboard(raw);
+    if (ok) {
+      showNotification(t('logs.copy_success', { defaultValue: 'Copied to clipboard' }), 'success');
+    } else {
+      showNotification(t('logs.copy_failed', { defaultValue: 'Copy failed' }), 'error');
+    }
+  };
+
   return (
     <div className={styles.container}>
       <h1 className={styles.pageTitle}>{t('logs.title')}</h1>
       <div className={styles.content}>
-      <Card
-        title={t('logs.log_content')}
-        extra={
-          <div className={styles.toolbar}>
-            <Button
-              variant="secondary"
-              size="sm"
-              onClick={() => loadLogs(false)}
-              disabled={disableControls || loading}
-              className={styles.actionButton}
-            >
-              <span className={styles.buttonContent}>
-                <IconRefreshCw size={16} />
-                {t('logs.refresh_button')}
-              </span>
-            </Button>
+        <Card
+          title={t('logs.log_content')}
+          extra={
+            <div className={styles.toolbar}>
+              <Button
+                variant="secondary"
+                size="sm"
+                onClick={() => loadLogs(false)}
+                disabled={disableControls || loading}
+                className={styles.actionButton}
+              >
+                <span className={styles.buttonContent}>
+                  <IconRefreshCw size={16} />
+                  {t('logs.refresh_button')}
+                </span>
+              </Button>
+              <ToggleSwitch
+                checked={autoRefresh}
+                onChange={(value) => setAutoRefresh(value)}
+                disabled={disableControls}
+                label={
+                  <span className={styles.switchLabel}>
+                    <IconTimer size={16} />
+                    {t('logs.auto_refresh')}
+                  </span>
+                }
+              />
+              <Button
+                variant="secondary"
+                size="sm"
+                onClick={downloadLogs}
+                disabled={logState.buffer.length === 0}
+                className={styles.actionButton}
+              >
+                <span className={styles.buttonContent}>
+                  <IconDownload size={16} />
+                  {t('logs.download_button')}
+                </span>
+              </Button>
+              <Button
+                variant="danger"
+                size="sm"
+                onClick={clearLogs}
+                disabled={disableControls}
+                className={styles.actionButton}
+              >
+                <span className={styles.buttonContent}>
+                  <IconTrash2 size={16} />
+                  {t('logs.clear_button')}
+                </span>
+              </Button>
+            </div>
+          }
+        >
+          {error && <div className="error-box">{error}</div>}
+
+          <div className={styles.filters}>
+            <div className={styles.searchWrapper}>
+              <Input
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                placeholder={t('logs.search_placeholder')}
+                className={styles.searchInput}
+                rightElement={
+                  searchQuery ? (
+                    <button
+                      type="button"
+                      className={styles.searchClear}
+                      onClick={() => setSearchQuery('')}
+                      title="Clear"
+                      aria-label="Clear"
+                    >
+                      <IconX size={16} />
+                    </button>
+                  ) : (
+                    <IconSearch size={16} className={styles.searchIcon} />
+                  )
+                }
+              />
+            </div>
+
             <ToggleSwitch
-              checked={autoRefresh}
-              onChange={(value) => setAutoRefresh(value)}
-              disabled={disableControls}
+              checked={hideManagementLogs}
+              onChange={setHideManagementLogs}
               label={
                 <span className={styles.switchLabel}>
-                  <IconTimer size={16} />
-                  {t('logs.auto_refresh')}
+                  <IconEyeOff size={16} />
+                  {t('logs.hide_management_logs', { prefix: MANAGEMENT_API_PREFIX })}
                 </span>
               }
             />
-            <Button
-              variant="secondary"
-              size="sm"
-              onClick={downloadLogs}
-              disabled={logState.buffer.length === 0}
-              className={styles.actionButton}
-            >
-              <span className={styles.buttonContent}>
-                <IconDownload size={16} />
-                {t('logs.download_button')}
+
+            <div className={styles.filterStats}>
+              <span>
+                {parsedVisibleLines.length} {t('logs.lines')}
               </span>
-            </Button>
-            <Button
-              variant="danger"
-              size="sm"
-              onClick={clearLogs}
-              disabled={disableControls}
-              className={styles.actionButton}
-            >
-              <span className={styles.buttonContent}>
-                <IconTrash2 size={16} />
-                {t('logs.clear_button')}
-              </span>
-            </Button>
-          </div>
-        }
-      >
-        {error && <div className="error-box">{error}</div>}
-        {loading ? (
-          <div className="hint">{t('logs.loading')}</div>
-        ) : logState.buffer.length > 0 ? (
-          <div ref={logViewerRef} className={styles.logPanel} onScroll={handleLogScroll}>
-            {canLoadMore && (
-              <div className={styles.loadMoreBanner}>
-                <span>{t('logs.load_more_hint')}</span>
-                <span className={styles.loadMoreCount}>
-                  {t('logs.hidden_lines', { count: logState.visibleFrom })}
+              {removedCount > 0 && (
+                <span className={styles.removedCount}>
+                  {t('logs.removed')} {removedCount}
                 </span>
-              </div>
-            )}
-            <div className={styles.logList}>
-              {parsedVisibleLines.map((line, index) => {
-                const rowClassNames = [styles.logRow];
-                if (line.level === 'warn') rowClassNames.push(styles.rowWarn);
-                if (line.level === 'error' || line.level === 'fatal') rowClassNames.push(styles.rowError);
-                return (
-                  <div key={`${logState.visibleFrom + index}-${line.raw}`} className={rowClassNames.join(' ')}>
-                    <div className={styles.timestamp}>{line.timestamp || ''}</div>
-                    <div className={styles.rowMain}>
-                      <div className={styles.rowMeta}>
-                        {line.level && (
-                          <span
-                            className={[
-                              styles.badge,
-                              line.level === 'info' ? styles.levelInfo : '',
-                              line.level === 'warn' ? styles.levelWarn : '',
-                              line.level === 'error' || line.level === 'fatal' ? styles.levelError : '',
-                              line.level === 'debug' ? styles.levelDebug : '',
-                              line.level === 'trace' ? styles.levelTrace : ''
-                            ]
-                              .filter(Boolean)
-                              .join(' ')}
-                          >
-                            {line.level.toUpperCase()}
-                          </span>
-                        )}
-
-                        {line.source && (
-                          <span className={styles.source} title={line.source}>
-                            {line.source}
-                          </span>
-                        )}
-
-                        {typeof line.statusCode === 'number' && (
-                          <span
-                            className={[
-                              styles.badge,
-                              styles.statusBadge,
-                              line.statusCode >= 200 && line.statusCode < 300
-                                ? styles.statusSuccess
-                                : line.statusCode >= 300 && line.statusCode < 400
-                                  ? styles.statusInfo
-                                  : line.statusCode >= 400 && line.statusCode < 500
-                                    ? styles.statusWarn
-                                    : styles.statusError
-                            ].join(' ')}
-                          >
-                            {line.statusCode}
-                          </span>
-                        )}
-
-                        {line.latency && <span className={styles.pill}>{line.latency}</span>}
-                        {line.ip && <span className={styles.pill}>{line.ip}</span>}
-
-                        {line.method && (
-                          <span className={[styles.badge, styles.methodBadge].join(' ')}>
-                            {line.method}
-                          </span>
-                        )}
-                        {line.path && (
-                          <span className={styles.path} title={line.path}>
-                            {line.path}
-                          </span>
-                        )}
-                      </div>
-                      {line.message && <div className={styles.message}>{line.message}</div>}
-                    </div>
-                  </div>
-                );
-              })}
+              )}
             </div>
           </div>
-        ) : (
-          <EmptyState title={t('logs.empty_title')} description={t('logs.empty_desc')} />
-        )}
-      </Card>
 
-      <Card
-        title={t('logs.error_logs_modal_title')}
-        extra={
-          <Button variant="secondary" size="sm" onClick={loadErrorLogs} loading={loadingErrors}>
-            {t('common.refresh')}
-          </Button>
-        }
-      >
-        {errorLogs.length === 0 ? (
-          <div className="hint">{t('logs.error_logs_empty')}</div>
-        ) : (
-          <div className="item-list">
-            {errorLogs.map((item) => (
-              <div key={item.name} className="item-row">
-                <div className="item-meta">
-                  <div className="item-title">{item.name}</div>
-                  <div className="item-subtitle">
-                    {item.size ? `${(item.size / 1024).toFixed(1)} KB` : ''}{' '}
-                    {item.modified ? new Date(item.modified).toLocaleString() : ''}
+          {loading ? (
+            <div className="hint">{t('logs.loading')}</div>
+          ) : logState.buffer.length > 0 && parsedVisibleLines.length > 0 ? (
+            <div ref={logViewerRef} className={styles.logPanel} onScroll={handleLogScroll}>
+              {canLoadMore && (
+                <div className={styles.loadMoreBanner}>
+                  <span>{t('logs.load_more_hint')}</span>
+                  <span className={styles.loadMoreCount}>
+                    {t('logs.hidden_lines', { count: logState.visibleFrom })}
+                  </span>
+                </div>
+              )}
+              <div className={styles.logList}>
+                {parsedVisibleLines.map((line, index) => {
+                  const rowClassNames = [styles.logRow];
+                  if (line.level === 'warn') rowClassNames.push(styles.rowWarn);
+                  if (line.level === 'error' || line.level === 'fatal')
+                    rowClassNames.push(styles.rowError);
+                  return (
+                    <div
+                      key={`${logState.visibleFrom + index}-${line.raw}`}
+                      className={rowClassNames.join(' ')}
+                      onDoubleClick={() => {
+                        void copyLogLine(line.raw);
+                      }}
+                      title={t('logs.double_click_copy_hint', {
+                        defaultValue: 'Double-click to copy',
+                      })}
+                    >
+                      <div className={styles.timestamp}>{line.timestamp || ''}</div>
+                      <div className={styles.rowMain}>
+                        <div className={styles.rowMeta}>
+                          {line.level && (
+                            <span
+                              className={[
+                                styles.badge,
+                                line.level === 'info' ? styles.levelInfo : '',
+                                line.level === 'warn' ? styles.levelWarn : '',
+                                line.level === 'error' || line.level === 'fatal'
+                                  ? styles.levelError
+                                  : '',
+                                line.level === 'debug' ? styles.levelDebug : '',
+                                line.level === 'trace' ? styles.levelTrace : '',
+                              ]
+                                .filter(Boolean)
+                                .join(' ')}
+                            >
+                              {line.level.toUpperCase()}
+                            </span>
+                          )}
+
+                          {line.source && (
+                            <span className={styles.source} title={line.source}>
+                              {line.source}
+                            </span>
+                          )}
+
+                          {typeof line.statusCode === 'number' && (
+                            <span
+                              className={[
+                                styles.badge,
+                                styles.statusBadge,
+                                line.statusCode >= 200 && line.statusCode < 300
+                                  ? styles.statusSuccess
+                                  : line.statusCode >= 300 && line.statusCode < 400
+                                    ? styles.statusInfo
+                                    : line.statusCode >= 400 && line.statusCode < 500
+                                      ? styles.statusWarn
+                                      : styles.statusError,
+                              ].join(' ')}
+                            >
+                              {line.statusCode}
+                            </span>
+                          )}
+
+                          {line.latency && <span className={styles.pill}>{line.latency}</span>}
+                          {line.ip && <span className={styles.pill}>{line.ip}</span>}
+
+                          {line.method && (
+                            <span className={[styles.badge, styles.methodBadge].join(' ')}>
+                              {line.method}
+                            </span>
+                          )}
+                          {line.path && (
+                            <span className={styles.path} title={line.path}>
+                              {line.path}
+                            </span>
+                          )}
+                        </div>
+                        {line.message && <div className={styles.message}>{line.message}</div>}
+                      </div>
+                    </div>
+                  );
+                })}
+              </div>
+            </div>
+          ) : logState.buffer.length > 0 ? (
+            <EmptyState
+              title={t('logs.search_empty_title')}
+              description={t('logs.search_empty_desc')}
+            />
+          ) : (
+            <EmptyState title={t('logs.empty_title')} description={t('logs.empty_desc')} />
+          )}
+        </Card>
+
+        <Card
+          title={t('logs.error_logs_modal_title')}
+          extra={
+            <Button variant="secondary" size="sm" onClick={loadErrorLogs} loading={loadingErrors}>
+              {t('common.refresh')}
+            </Button>
+          }
+        >
+          {errorLogs.length === 0 ? (
+            <div className="hint">{t('logs.error_logs_empty')}</div>
+          ) : (
+            <div className="item-list">
+              {errorLogs.map((item) => (
+                <div key={item.name} className="item-row">
+                  <div className="item-meta">
+                    <div className="item-title">{item.name}</div>
+                    <div className="item-subtitle">
+                      {item.size ? `${(item.size / 1024).toFixed(1)} KB` : ''}{' '}
+                      {item.modified ? formatUnixTimestamp(item.modified) : ''}
+                    </div>
+                  </div>
+                  <div className="item-actions">
+                    <Button
+                      variant="secondary"
+                      size="sm"
+                      onClick={() => downloadErrorLog(item.name)}
+                    >
+                      {t('logs.error_logs_download')}
+                    </Button>
                   </div>
                 </div>
-                <div className="item-actions">
-                  <Button variant="secondary" size="sm" onClick={() => downloadErrorLog(item.name)}>
-                    {t('logs.error_logs_download')}
-                  </Button>
-                </div>
-              </div>
-            ))}
-          </div>
-        )}
-      </Card>
+              ))}
+            </div>
+          )}
+        </Card>
       </div>
     </div>
   );

src/pages/SystemPage.module.scss

@@ -135,3 +135,81 @@
     }
   }
 }
+
+.quickLinks {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: $spacing-md;
+}
+
+.linkCard {
+  display: flex;
+  align-items: center;
+  gap: $spacing-md;
+  padding: $spacing-md $spacing-lg;
+  background-color: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  border-radius: $radius-lg;
+  text-decoration: none;
+  color: inherit;
+  transition: all 0.2s ease;
+
+  &:hover {
+    background-color: var(--bg-hover);
+    border-color: var(--primary-color);
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  }
+
+  &:active {
+    transform: translateY(0);
+  }
+}
+
+.linkIcon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 44px;
+  height: 44px;
+  border-radius: $radius-md;
+  background-color: var(--primary-color);
+  color: white;
+  flex-shrink: 0;
+
+  &.github {
+    background-color: #24292f;
+  }
+
+  &.docs {
+    background-color: #10b981;
+  }
+}
+
+.linkContent {
+  flex: 1;
+  min-width: 0;
+}
+
+.linkTitle {
+  display: flex;
+  align-items: center;
+  gap: $spacing-xs;
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin-bottom: 2px;
+
+  svg {
+    opacity: 0.5;
+    flex-shrink: 0;
+  }
+}
+
+.linkDesc {
+  font-size: 13px;
+  color: var(--text-secondary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}

src/pages/SystemPage.tsx

@@ -2,6 +2,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Card } from '@/components/ui/Card';
 import { Button } from '@/components/ui/Button';
+import { IconGithub, IconBookOpen, IconExternalLink, IconCode } from '@/components/ui/icons';
 import { useAuthStore, useConfigStore, useNotificationStore, useModelsStore } from '@/stores';
 import { apiKeysApi } from '@/services/api/apiKeys';
 import { classifyModels } from '@/utils/models';
@@ -148,6 +149,65 @@ export function SystemPage() {
         </div>
       </Card>
 
+      <Card title={t('system_info.quick_links_title')}>
+        <p className={styles.sectionDescription}>{t('system_info.quick_links_desc')}</p>
+        <div className={styles.quickLinks}>
+          <a
+            href="https://github.com/router-for-me/CLIProxyAPI"
+            target="_blank"
+            rel="noopener noreferrer"
+            className={styles.linkCard}
+          >
+            <div className={`${styles.linkIcon} ${styles.github}`}>
+              <IconGithub size={22} />
+            </div>
+            <div className={styles.linkContent}>
+              <div className={styles.linkTitle}>
+                {t('system_info.link_main_repo')}
+                <IconExternalLink size={14} />
+              </div>
+              <div className={styles.linkDesc}>{t('system_info.link_main_repo_desc')}</div>
+            </div>
+          </a>
+
+          <a
+            href="https://github.com/router-for-me/Cli-Proxy-API-Management-Center"
+            target="_blank"
+            rel="noopener noreferrer"
+            className={styles.linkCard}
+          >
+            <div className={`${styles.linkIcon} ${styles.github}`}>
+              <IconCode size={22} />
+            </div>
+            <div className={styles.linkContent}>
+              <div className={styles.linkTitle}>
+                {t('system_info.link_webui_repo')}
+                <IconExternalLink size={14} />
+              </div>
+              <div className={styles.linkDesc}>{t('system_info.link_webui_repo_desc')}</div>
+            </div>
+          </a>
+
+          <a
+            href="https://help.router-for.me/"
+            target="_blank"
+            rel="noopener noreferrer"
+            className={styles.linkCard}
+          >
+            <div className={`${styles.linkIcon} ${styles.docs}`}>
+              <IconBookOpen size={22} />
+            </div>
+            <div className={styles.linkContent}>
+              <div className={styles.linkTitle}>
+                {t('system_info.link_docs')}
+                <IconExternalLink size={14} />
+              </div>
+              <div className={styles.linkDesc}>{t('system_info.link_docs_desc')}</div>
+            </div>
+          </a>
+        </div>
+      </Card>
+
       <Card
         title={t('system_info.models_title')}
         extra={

src/pages/UsagePage.module.scss

@@ -3,9 +3,11 @@
 
 .container {
   width: 100%;
+  min-height: 100%;
   display: flex;
   flex-direction: column;
   gap: 20px;
+  position: relative;
 }
 
 .header {
@@ -39,6 +41,44 @@
   padding: 16px;
 }
 
+.loadingOverlay {
+  position: absolute;
+  inset: 0;
+  z-index: 20;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(243, 244, 246, 0.75);
+  backdrop-filter: blur(6px);
+  -webkit-backdrop-filter: blur(6px);
+}
+
+:global([data-theme='dark']) .loadingOverlay {
+  background: rgba(25, 25, 25, 0.72);
+}
+
+.loadingOverlayContent {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  padding: 12px 16px;
+  border-radius: $radius-lg;
+  border: 1px solid var(--border-color);
+  background: var(--bg-primary);
+  box-shadow: var(--shadow-lg);
+
+  :global(.loading-spinner) {
+    border-color: rgba(59, 130, 246, 0.25);
+    border-top-color: var(--primary-color);
+  }
+}
+
+.loadingOverlayText {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-secondary);
+}
+
 // Stats Grid
 .statsGrid {
   display: grid;

src/pages/UsagePage.tsx

@@ -16,6 +16,7 @@ import { Line } from 'react-chartjs-2';
 import { Card } from '@/components/ui/Card';
 import { Button } from '@/components/ui/Button';
 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';
@@ -516,6 +517,14 @@ export function UsagePage() {
 
   return (
     <div className={styles.container}>
+      {loading && !usage && (
+        <div className={styles.loadingOverlay} aria-busy="true">
+          <div className={styles.loadingOverlayContent}>
+            <LoadingSpinner size={28} />
+            <span className={styles.loadingOverlayText}>{t('common.loading')}</span>
+          </div>
+        </div>
+      )}
       <div className={styles.header}>
         <h1 className={styles.pageTitle}>{t('usage_stats.title')}</h1>
         <Button

src/services/api/logs.ts

@@ -14,16 +14,25 @@ export interface LogsResponse {
   'latest-timestamp': number;
 }
 
+export interface ErrorLogFile {
+  name: string;
+  size?: number;
+  modified?: number;
+}
+
+export interface ErrorLogsResponse {
+  files?: ErrorLogFile[];
+}
+
 export const logsApi = {
-  fetchLogs: (params: LogsQuery = {}): Promise<LogsResponse> =>
-    apiClient.get('/logs', { params }),
+  fetchLogs: (params: LogsQuery = {}): Promise<LogsResponse> => apiClient.get('/logs', { params }),
 
   clearLogs: () => apiClient.delete('/logs'),
 
-  fetchErrorLogs: () => apiClient.get('/request-error-logs'),
+  fetchErrorLogs: (): Promise<ErrorLogsResponse> => apiClient.get('/request-error-logs'),
 
   downloadErrorLog: (filename: string) =>
     apiClient.getRaw(`/request-error-logs/${encodeURIComponent(filename)}`, {
-      responseType: 'blob'
-    })
+      responseType: 'blob',
+    }),
 };

src/services/api/usage.ts

@@ -5,11 +5,13 @@
 import { apiClient } from './client';
 import { computeKeyStats, KeyStats } from '@/utils/usage';
 
+const USAGE_TIMEOUT_MS = 60 * 1000;
+
 export const usageApi = {
   /**
    * 获取使用统计原始数据
    */
-  getUsage: () => apiClient.get('/usage'),
+  getUsage: () => apiClient.get('/usage', { timeout: USAGE_TIMEOUT_MS }),
 
   /**
    * 计算密钥成功/失败统计，必要时会先获取 usage 数据
@@ -17,7 +19,7 @@ export const usageApi = {
   async getKeyStats(usageData?: any): Promise<KeyStats> {
     let payload = usageData;
     if (!payload) {
-      const response = await apiClient.get('/usage');
+      const response = await apiClient.get('/usage', { timeout: USAGE_TIMEOUT_MS });
       payload = response?.usage ?? response;
     }
     return computeKeyStats(payload);

src/utils/format.ts

@@ -52,6 +52,37 @@ export function formatDateTime(date: string | Date): string {
   });
 }
 
+/**
+ * 将 Unix 时间戳（秒/毫秒/微秒/纳秒）格式化为本地时间字符串
+ */
+export function formatUnixTimestamp(value: unknown, locale?: string): string {
+  if (value === null || value === undefined || value === '') return '';
+
+  const asNumber = typeof value === 'number' ? value : Number(value);
+  const date = (() => {
+    if (!Number.isFinite(asNumber) || Number.isNaN(asNumber)) {
+      return new Date(String(value));
+    }
+
+    const abs = Math.abs(asNumber);
+
+    // 秒：常见 10 位（~1e9）
+    if (abs < 1e11) return new Date(asNumber * 1000);
+
+    // 毫秒：常见 13 位（~1e12）
+    if (abs < 1e14) return new Date(asNumber);
+
+    // 微秒：常见 16 位（~1e15）
+    if (abs < 1e17) return new Date(Math.round(asNumber / 1000));
+
+    // 纳秒：常见 19 位（~1e18）
+    return new Date(Math.round(asNumber / 1e6));
+  })();
+
+  if (Number.isNaN(date.getTime())) return '';
+  return locale ? date.toLocaleString(locale) : date.toLocaleString();
+}
+
 /**
  * 格式化数字（添加千位分隔符）
  */