From 80daf03fa6a3fbd0aa7267da778155b677d2b515 Mon Sep 17 00:00:00 2001
From: LTbinglingfeng <tan13318527080@163.com>
Date: Sat, 24 Jan 2026 00:10:04 +0800
Subject: [PATCH 01/11] feat(auth-files): add per-file enable/disable toggle

---
 src/components/ui/ToggleSwitch.tsx  | 10 +++++-
 src/i18n/locales/en.json            |  5 ++-
 src/i18n/locales/zh-CN.json         |  5 ++-
 src/pages/AuthFilesPage.module.scss |  8 +++++
 src/pages/AuthFilesPage.tsx         | 47 +++++++++++++++++++++++++++++
 src/services/api/authFiles.ts       | 35 ++++++++++++---------
 6 files changed, 93 insertions(+), 17 deletions(-)

diff --git a/src/components/ui/ToggleSwitch.tsx b/src/components/ui/ToggleSwitch.tsx
index 4417041..3fbaa62 100644
--- a/src/components/ui/ToggleSwitch.tsx
+++ b/src/components/ui/ToggleSwitch.tsx
@@ -4,6 +4,7 @@ interface ToggleSwitchProps {
   checked: boolean;
   onChange: (value: boolean) => void;
   label?: ReactNode;
+  ariaLabel?: string;
   disabled?: boolean;
   labelPosition?: 'left' | 'right';
 }
@@ -12,6 +13,7 @@ export function ToggleSwitch({
   checked,
   onChange,
   label,
+  ariaLabel,
   disabled = false,
   labelPosition = 'right'
 }: ToggleSwitchProps) {
@@ -25,7 +27,13 @@ export function ToggleSwitch({
 
   return (
     <label className={className}>
-      <input type="checkbox" checked={checked} onChange={handleChange} disabled={disabled} />
+      <input
+        type="checkbox"
+        checked={checked}
+        onChange={handleChange}
+        disabled={disabled}
+        aria-label={ariaLabel}
+      />
       <span className="track">
         <span className="thumb" />
       </span>
diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
index 86b2684..5b8c59f 100644
--- a/src/i18n/locales/en.json
+++ b/src/i18n/locales/en.json
@@ -395,7 +395,10 @@
     "models_unsupported": "This feature is not supported in the current version",
     "models_unsupported_desc": "Please update CLI Proxy API to the latest version and try again",
     "models_excluded_badge": "Excluded",
-    "models_excluded_hint": "This model is excluded by OAuth"
+    "models_excluded_hint": "This model is excluded by OAuth",
+    "status_toggle_label": "Enabled",
+    "status_enabled_success": "\"{{name}}\" enabled",
+    "status_disabled_success": "\"{{name}}\" disabled"
   },
   "antigravity_quota": {
     "title": "Antigravity Quota",
diff --git a/src/i18n/locales/zh-CN.json b/src/i18n/locales/zh-CN.json
index f126768..3163079 100644
--- a/src/i18n/locales/zh-CN.json
+++ b/src/i18n/locales/zh-CN.json
@@ -395,7 +395,10 @@
     "models_unsupported": "当前版本不支持此功能",
     "models_unsupported_desc": "请更新 CLI Proxy API 到最新版本后重试",
     "models_excluded_badge": "已排除",
-    "models_excluded_hint": "此模型已被 OAuth 排除"
+    "models_excluded_hint": "此模型已被 OAuth 排除",
+    "status_toggle_label": "启用",
+    "status_enabled_success": "已启用 \"{{name}}\"",
+    "status_disabled_success": "已停用 \"{{name}}\""
   },
   "antigravity_quota": {
     "title": "Antigravity 额度",
diff --git a/src/pages/AuthFilesPage.module.scss b/src/pages/AuthFilesPage.module.scss
index 8a48dc3..4117b51 100644
--- a/src/pages/AuthFilesPage.module.scss
+++ b/src/pages/AuthFilesPage.module.scss
@@ -601,10 +601,18 @@
   display: flex;
   gap: $spacing-xs;
   justify-content: flex-end;
+  align-items: center;
   margin-top: auto;
   padding-top: $spacing-sm;
 }
 
+.statusToggle {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  margin-left: $spacing-sm;
+}
+
 .iconButton:global(.btn.btn-sm) {
   width: 34px;
   height: 34px;
diff --git a/src/pages/AuthFilesPage.tsx b/src/pages/AuthFilesPage.tsx
index 3674a61..f4c38af 100644
--- a/src/pages/AuthFilesPage.tsx
+++ b/src/pages/AuthFilesPage.tsx
@@ -187,6 +187,7 @@ export function AuthFilesPage() {
   const [uploading, setUploading] = useState(false);
   const [deleting, setDeleting] = useState<string | null>(null);
   const [deletingAll, setDeletingAll] = useState(false);
+  const [statusUpdating, setStatusUpdating] = useState<Record<string, boolean>>({});
   const [keyStats, setKeyStats] = useState<KeyStats>({ bySource: {}, byAuthIndex: {} });
   const [usageDetails, setUsageDetails] = useState<UsageDetail[]>([]);
 
@@ -608,6 +609,42 @@ export function AuthFilesPage() {
     }
   };
 
+  const handleStatusToggle = async (item: AuthFileItem, enabled: boolean) => {
+    const name = item.name;
+    const nextDisabled = !enabled;
+    const previousDisabled = item.disabled === true;
+
+    setStatusUpdating((prev) => ({ ...prev, [name]: true }));
+    // Optimistic update for snappy UI.
+    setFiles((prev) => prev.map((f) => (f.name === name ? { ...f, disabled: nextDisabled } : f)));
+
+    try {
+      const res = await authFilesApi.setStatus(name, nextDisabled);
+      setFiles((prev) =>
+        prev.map((f) => (f.name === name ? { ...f, disabled: res.disabled } : f))
+      );
+      showNotification(
+        enabled
+          ? t('auth_files.status_enabled_success', { name })
+          : t('auth_files.status_disabled_success', { name }),
+        'success'
+      );
+    } catch (err: unknown) {
+      const errorMessage = err instanceof Error ? err.message : '';
+      setFiles((prev) =>
+        prev.map((f) => (f.name === name ? { ...f, disabled: previousDisabled } : f))
+      );
+      showNotification(`${t('notification.update_failed')}: ${errorMessage}`, 'error');
+    } finally {
+      setStatusUpdating((prev) => {
+        if (!prev[name]) return prev;
+        const next = { ...prev };
+        delete next[name];
+        return next;
+      });
+    }
+  };
+
   // 显示详情弹窗
   const showDetails = (file: AuthFileItem) => {
     setSelectedFile(file);
@@ -1021,6 +1058,16 @@ export function AuthFilesPage() {
               </Button>
             </>
           )}
+          {!isRuntimeOnly && (
+            <div className={styles.statusToggle}>
+              <ToggleSwitch
+                ariaLabel={t('auth_files.status_toggle_label')}
+                checked={!item.disabled}
+                disabled={disableControls || statusUpdating[item.name] === true}
+                onChange={(value) => void handleStatusToggle(item, value)}
+              />
+            </div>
+          )}
           {isRuntimeOnly && (
             <div className={styles.virtualBadge}>{t('auth_files.type_virtual') || '虚拟认证文件'}</div>
           )}
diff --git a/src/services/api/authFiles.ts b/src/services/api/authFiles.ts
index b63f56b..35334e3 100644
--- a/src/services/api/authFiles.ts
+++ b/src/services/api/authFiles.ts
@@ -7,6 +7,7 @@ import type { AuthFilesResponse } from '@/types/authFile';
 import type { OAuthModelMappingEntry } from '@/types';
 
 type StatusError = { status?: number };
+type AuthFileStatusResponse = { status: string; disabled: boolean };
 
 const getStatusCode = (err: unknown): number | undefined => {
   if (!err || typeof err !== 'object') return undefined;
@@ -17,7 +18,8 @@ const getStatusCode = (err: unknown): number | undefined => {
 const normalizeOauthExcludedModels = (payload: unknown): Record<string, string[]> => {
   if (!payload || typeof payload !== 'object') return {};
 
-  const source = (payload as any)['oauth-excluded-models'] ?? (payload as any).items ?? payload;
+  const record = payload as Record<string, unknown>;
+  const source = record['oauth-excluded-models'] ?? record.items ?? payload;
   if (!source || typeof source !== 'object') return {};
 
   const result: Record<string, string[]> = {};
@@ -54,10 +56,11 @@ const normalizeOauthExcludedModels = (payload: unknown): Record<string, string[]
 const normalizeOauthModelMappings = (payload: unknown): Record<string, OAuthModelMappingEntry[]> => {
   if (!payload || typeof payload !== 'object') return {};
 
+  const record = payload as Record<string, unknown>;
   const source =
-    (payload as any)['oauth-model-mappings'] ??
-    (payload as any)['oauth-model-alias'] ??
-    (payload as any).items ??
+    record['oauth-model-mappings'] ??
+    record['oauth-model-alias'] ??
+    record.items ??
     payload;
   if (!source || typeof source !== 'object') return {};
 
@@ -70,16 +73,17 @@ const normalizeOauthModelMappings = (payload: unknown): Record<string, OAuthMode
     if (!key) return;
     if (!Array.isArray(mappings)) return;
 
-    const seen = new Set<string>();
-    const normalized = mappings
-      .map((item) => {
-        if (!item || typeof item !== 'object') return null;
-        const name = String((item as any).name ?? (item as any).id ?? (item as any).model ?? '').trim();
-        const alias = String((item as any).alias ?? '').trim();
-        if (!name || !alias) return null;
-        const fork = (item as any).fork === true;
-        return fork ? { name, alias, fork } : { name, alias };
-      })
+	    const seen = new Set<string>();
+	    const normalized = mappings
+	      .map((item) => {
+	        if (!item || typeof item !== 'object') return null;
+	        const entry = item as Record<string, unknown>;
+	        const name = String(entry.name ?? entry.id ?? entry.model ?? '').trim();
+	        const alias = String(entry.alias ?? '').trim();
+	        if (!name || !alias) return null;
+	        const fork = entry.fork === true;
+	        return fork ? { name, alias, fork } : { name, alias };
+	      })
       .filter(Boolean)
       .filter((entry) => {
         const mapping = entry as OAuthModelMappingEntry;
@@ -103,6 +107,9 @@ const OAUTH_MODEL_MAPPINGS_LEGACY_ENDPOINT = '/oauth-model-alias';
 export const authFilesApi = {
   list: () => apiClient.get<AuthFilesResponse>('/auth-files'),
 
+  setStatus: (name: string, disabled: boolean) =>
+    apiClient.patch<AuthFileStatusResponse>('/auth-files/status', { name, disabled }),
+
   upload: (file: File) => {
     const formData = new FormData();
     formData.append('file', file, file.name);

From 7e56d33bf0a03edde0bce92b627fa8520e2e3987 Mon Sep 17 00:00:00 2001
From: LTbinglingfeng <tan13318527080@163.com>
Date: Sat, 24 Jan 2026 01:24:05 +0800
Subject: [PATCH 02/11] feat(auth-files): add prefix/proxy_url modal editor

---
 src/i18n/locales/en.json            |  11 +-
 src/i18n/locales/zh-CN.json         |  11 +-
 src/pages/AuthFilesPage.module.scss |  95 +++++-
 src/pages/AuthFilesPage.tsx         | 465 +++++++++++++++++++++++-----
 4 files changed, 492 insertions(+), 90 deletions(-)

diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
index 5b8c59f..5525bd4 100644
--- a/src/i18n/locales/en.json
+++ b/src/i18n/locales/en.json
@@ -398,7 +398,16 @@
     "models_excluded_hint": "This model is excluded by OAuth",
     "status_toggle_label": "Enabled",
     "status_enabled_success": "\"{{name}}\" enabled",
-    "status_disabled_success": "\"{{name}}\" disabled"
+    "status_disabled_success": "\"{{name}}\" disabled",
+    "prefix_proxy_button": "Edit prefix/proxy_url",
+    "prefix_proxy_loading": "Loading credential...",
+    "prefix_proxy_source_label": "Credential JSON",
+    "prefix_label": "prefix",
+    "proxy_url_label": "proxy_url",
+    "prefix_placeholder": "",
+    "proxy_url_placeholder": "socks5://username:password@proxy_ip:port/",
+    "prefix_proxy_invalid_json": "This credential is not a JSON object and cannot be edited.",
+    "prefix_proxy_saved_success": "Updated \"{{name}}\" successfully"
   },
   "antigravity_quota": {
     "title": "Antigravity Quota",
diff --git a/src/i18n/locales/zh-CN.json b/src/i18n/locales/zh-CN.json
index 3163079..f5d88bc 100644
--- a/src/i18n/locales/zh-CN.json
+++ b/src/i18n/locales/zh-CN.json
@@ -398,7 +398,16 @@
     "models_excluded_hint": "此模型已被 OAuth 排除",
     "status_toggle_label": "启用",
     "status_enabled_success": "已启用 \"{{name}}\"",
-    "status_disabled_success": "已停用 \"{{name}}\""
+    "status_disabled_success": "已停用 \"{{name}}\"",
+    "prefix_proxy_button": "配置 prefix/proxy_url",
+    "prefix_proxy_loading": "正在加载凭证文件...",
+    "prefix_proxy_source_label": "凭证 JSON",
+    "prefix_label": "prefix",
+    "proxy_url_label": "proxy_url",
+    "prefix_placeholder": "",
+    "proxy_url_placeholder": "socks5://username:password@proxy_ip:port/",
+    "prefix_proxy_invalid_json": "该凭证文件不是 JSON 对象，无法编辑。",
+    "prefix_proxy_saved_success": "已更新 \"{{name}}\""
   },
   "antigravity_quota": {
     "title": "Antigravity 额度",
diff --git a/src/pages/AuthFilesPage.module.scss b/src/pages/AuthFilesPage.module.scss
index 4117b51..26ccbc5 100644
--- a/src/pages/AuthFilesPage.module.scss
+++ b/src/pages/AuthFilesPage.module.scss
@@ -277,27 +277,15 @@
 }
 
 .antigravityCard {
-  background-image: linear-gradient(
-    180deg,
-    rgba(224, 247, 250, 0.12),
-    rgba(224, 247, 250, 0)
-  );
+  background-image: linear-gradient(180deg, rgba(224, 247, 250, 0.12), rgba(224, 247, 250, 0));
 }
 
 .codexCard {
-  background-image: linear-gradient(
-    180deg,
-    rgba(255, 243, 224, 0.18),
-    rgba(255, 243, 224, 0)
-  );
+  background-image: linear-gradient(180deg, rgba(255, 243, 224, 0.18), rgba(255, 243, 224, 0));
 }
 
 .geminiCliCard {
-  background-image: linear-gradient(
-    180deg,
-    rgba(231, 239, 255, 0.2),
-    rgba(231, 239, 255, 0)
-  );
+  background-image: linear-gradient(180deg, rgba(231, 239, 255, 0.2), rgba(231, 239, 255, 0));
 }
 
 .quotaSection {
@@ -446,7 +434,10 @@
   display: flex;
   flex-direction: column;
   gap: $spacing-sm;
-  transition: transform $transition-fast, box-shadow $transition-fast, border-color $transition-fast;
+  transition:
+    transform $transition-fast,
+    box-shadow $transition-fast,
+    border-color $transition-fast;
 
   &:hover {
     transform: translateY(-2px);
@@ -546,7 +537,9 @@
   height: 8px;
   border-radius: 2px;
   min-width: 6px;
-  transition: transform 0.15s ease, opacity 0.15s ease;
+  transition:
+    transform 0.15s ease,
+    opacity 0.15s ease;
 
   &:hover {
     transform: scaleY(1.5);
@@ -597,6 +590,74 @@
   background: var(--failure-badge-bg, #fee2e2);
 }
 
+.prefixProxyEditor {
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-md;
+  max-height: 60vh;
+  overflow: auto;
+}
+
+.prefixProxyLoading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: $spacing-sm;
+  font-size: 12px;
+  color: var(--text-secondary);
+  padding: $spacing-sm 0;
+}
+
+.prefixProxyError {
+  padding: $spacing-sm $spacing-md;
+  border-radius: $radius-md;
+  border: 1px solid var(--danger-color);
+  background-color: rgba(239, 68, 68, 0.1);
+  color: var(--danger-color);
+  font-size: 12px;
+}
+
+.prefixProxyJsonWrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.prefixProxyLabel {
+  font-size: 12px;
+  color: var(--text-secondary);
+  font-weight: 600;
+}
+
+.prefixProxyTextarea {
+  width: 100%;
+  padding: $spacing-sm $spacing-md;
+  border: 1px solid var(--border-color);
+  border-radius: $radius-md;
+  background-color: var(--bg-secondary);
+  color: var(--text-primary);
+  font-size: 12px;
+  font-family: monospace;
+  resize: vertical;
+  min-height: 120px;
+  box-sizing: border-box;
+
+  &:focus {
+    outline: none;
+    border-color: var(--primary-color);
+  }
+}
+
+.prefixProxyFields {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: $spacing-sm;
+
+  :global(.form-group) {
+    margin: 0;
+  }
+}
+
 .cardActions {
   display: flex;
   gap: $spacing-xs;
diff --git a/src/pages/AuthFilesPage.tsx b/src/pages/AuthFilesPage.tsx
index f4c38af..5b018db 100644
--- a/src/pages/AuthFilesPage.tsx
+++ b/src/pages/AuthFilesPage.tsx
@@ -9,7 +9,14 @@ import { Input } from '@/components/ui/Input';
 import { Modal } from '@/components/ui/Modal';
 import { EmptyState } from '@/components/ui/EmptyState';
 import { ToggleSwitch } from '@/components/ui/ToggleSwitch';
-import { IconBot, IconDownload, IconInfo, IconTrash2, IconX } from '@/components/ui/icons';
+import {
+  IconBot,
+  IconCode,
+  IconDownload,
+  IconInfo,
+  IconTrash2,
+  IconX,
+} from '@/components/ui/icons';
 import { useAuthStore, useNotificationStore, useThemeStore } from '@/stores';
 import { authFilesApi, usageApi } from '@/services/api';
 import { apiClient } from '@/services/api/client';
@@ -34,44 +41,44 @@ type ResolvedTheme = 'light' | 'dark';
 const TYPE_COLORS: Record<string, TypeColorSet> = {
   qwen: {
     light: { bg: '#e8f5e9', text: '#2e7d32' },
-    dark: { bg: '#1b5e20', text: '#81c784' }
+    dark: { bg: '#1b5e20', text: '#81c784' },
   },
   gemini: {
     light: { bg: '#e3f2fd', text: '#1565c0' },
-    dark: { bg: '#0d47a1', text: '#64b5f6' }
+    dark: { bg: '#0d47a1', text: '#64b5f6' },
   },
   'gemini-cli': {
     light: { bg: '#e7efff', text: '#1e4fa3' },
-    dark: { bg: '#1c3f73', text: '#a8c7ff' }
+    dark: { bg: '#1c3f73', text: '#a8c7ff' },
   },
   aistudio: {
     light: { bg: '#f0f2f5', text: '#2f343c' },
-    dark: { bg: '#373c42', text: '#cfd3db' }
+    dark: { bg: '#373c42', text: '#cfd3db' },
   },
   claude: {
     light: { bg: '#fce4ec', text: '#c2185b' },
-    dark: { bg: '#880e4f', text: '#f48fb1' }
+    dark: { bg: '#880e4f', text: '#f48fb1' },
   },
   codex: {
     light: { bg: '#fff3e0', text: '#ef6c00' },
-    dark: { bg: '#e65100', text: '#ffb74d' }
+    dark: { bg: '#e65100', text: '#ffb74d' },
   },
   antigravity: {
     light: { bg: '#e0f7fa', text: '#006064' },
-    dark: { bg: '#004d40', text: '#80deea' }
+    dark: { bg: '#004d40', text: '#80deea' },
   },
   iflow: {
     light: { bg: '#f3e5f5', text: '#7b1fa2' },
-    dark: { bg: '#4a148c', text: '#ce93d8' }
+    dark: { bg: '#4a148c', text: '#ce93d8' },
   },
   empty: {
     light: { bg: '#f5f5f5', text: '#616161' },
-    dark: { bg: '#424242', text: '#bdbdbd' }
+    dark: { bg: '#424242', text: '#bdbdbd' },
   },
   unknown: {
     light: { bg: '#f0f0f0', text: '#666666', border: '1px dashed #999999' },
-    dark: { bg: '#3a3a3a', text: '#aaaaaa', border: '1px dashed #666666' }
-  }
+    dark: { bg: '#3a3a3a', text: '#aaaaaa', border: '1px dashed #666666' },
+  },
 };
 
 const OAUTH_PROVIDER_PRESETS = [
@@ -82,7 +89,7 @@ const OAUTH_PROVIDER_PRESETS = [
   'claude',
   'codex',
   'qwen',
-  'iflow'
+  'iflow',
 ];
 
 const OAUTH_PROVIDER_EXCLUDES = new Set(['all', 'unknown', 'empty']);
@@ -105,11 +112,23 @@ interface ModelMappingsFormState {
   mappings: OAuthModelMappingFormEntry[];
 }
 
+interface PrefixProxyEditorState {
+  fileName: string;
+  loading: boolean;
+  saving: boolean;
+  error: string | null;
+  originalText: string;
+  rawText: string;
+  json: Record<string, unknown> | null;
+  prefix: string;
+  proxyUrl: string;
+}
+
 const buildEmptyMappingEntry = (): OAuthModelMappingFormEntry => ({
   id: generateId(),
   name: '',
   alias: '',
-  fork: false
+  fork: false,
 });
 // 标准化 auth_index 值（与 usage.ts 中的 normalizeAuthIndex 保持一致）
 function normalizeAuthIndexValue(value: unknown): string | null {
@@ -131,10 +150,7 @@ function isRuntimeOnlyAuthFile(file: AuthFileItem): boolean {
 }
 
 // 解析认证文件的统计数据
-function resolveAuthFileStats(
-  file: AuthFileItem,
-  stats: KeyStats
-): KeyStatBucket {
+function resolveAuthFileStats(file: AuthFileItem, stats: KeyStats): KeyStatBucket {
   const defaultStats: KeyStatBucket = { success: 0, failure: 0 };
   const rawFileName = file?.name || '';
 
@@ -162,7 +178,10 @@ function resolveAuthFileStats(
     if (nameWithoutExt && nameWithoutExt !== rawFileName) {
       const nameWithoutExtId = normalizeUsageSourceId(nameWithoutExt);
       const fromNameWithoutExt = nameWithoutExtId ? stats.bySource?.[nameWithoutExtId] : undefined;
-      if (fromNameWithoutExt && (fromNameWithoutExt.success > 0 || fromNameWithoutExt.failure > 0)) {
+      if (
+        fromNameWithoutExt &&
+        (fromNameWithoutExt.success > 0 || fromNameWithoutExt.failure > 0)
+      ) {
         return fromNameWithoutExt;
       }
     }
@@ -198,7 +217,9 @@ export function AuthFilesPage() {
   // 模型列表弹窗相关
   const [modelsModalOpen, setModelsModalOpen] = useState(false);
   const [modelsLoading, setModelsLoading] = useState(false);
-  const [modelsList, setModelsList] = useState<{ id: string; display_name?: string; type?: string }[]>([]);
+  const [modelsList, setModelsList] = useState<
+    { id: string; display_name?: string; type?: string }[]
+  >([]);
   const [modelsFileName, setModelsFileName] = useState('');
   const [modelsFileType, setModelsFileType] = useState('');
   const [modelsError, setModelsError] = useState<'unsupported' | null>(null);
@@ -207,7 +228,10 @@ export function AuthFilesPage() {
   const [excluded, setExcluded] = useState<Record<string, string[]>>({});
   const [excludedError, setExcludedError] = useState<'unsupported' | null>(null);
   const [excludedModalOpen, setExcludedModalOpen] = useState(false);
-  const [excludedForm, setExcludedForm] = useState<ExcludedFormState>({ provider: '', modelsText: '' });
+  const [excludedForm, setExcludedForm] = useState<ExcludedFormState>({
+    provider: '',
+    modelsText: '',
+  });
   const [savingExcluded, setSavingExcluded] = useState(false);
 
   // OAuth 模型映射相关
@@ -216,10 +240,12 @@ export function AuthFilesPage() {
   const [mappingModalOpen, setMappingModalOpen] = useState(false);
   const [mappingForm, setMappingForm] = useState<ModelMappingsFormState>({
     provider: '',
-    mappings: [buildEmptyMappingEntry()]
+    mappings: [buildEmptyMappingEntry()],
   });
   const [savingMappings, setSavingMappings] = useState(false);
 
+  const [prefixProxyEditor, setPrefixProxyEditor] = useState<PrefixProxyEditorState | null>(null);
+
   const fileInputRef = useRef<HTMLInputElement | null>(null);
   const loadingKeyStatsRef = useRef(false);
   const excludedUnsupportedRef = useRef(false);
@@ -227,6 +253,29 @@ export function AuthFilesPage() {
 
   const disableControls = connectionStatus !== 'connected';
 
+  const prefixProxyUpdatedText = useMemo(() => {
+    if (!prefixProxyEditor?.json) return prefixProxyEditor?.rawText ?? '';
+    const next: Record<string, unknown> = { ...prefixProxyEditor.json };
+    if ('prefix' in next || prefixProxyEditor.prefix.trim()) {
+      next.prefix = prefixProxyEditor.prefix;
+    }
+    if ('proxy_url' in next || prefixProxyEditor.proxyUrl.trim()) {
+      next.proxy_url = prefixProxyEditor.proxyUrl;
+    }
+    return JSON.stringify(next);
+  }, [
+    prefixProxyEditor?.json,
+    prefixProxyEditor?.prefix,
+    prefixProxyEditor?.proxyUrl,
+    prefixProxyEditor?.rawText,
+  ]);
+
+  const prefixProxyDirty = useMemo(() => {
+    if (!prefixProxyEditor?.json) return false;
+    if (!prefixProxyEditor.originalText) return false;
+    return prefixProxyUpdatedText !== prefixProxyEditor.originalText;
+  }, [prefixProxyEditor?.json, prefixProxyEditor?.originalText, prefixProxyUpdatedText]);
+
   const normalizeProviderKey = (value: string) => value.trim().toLowerCase();
 
   const handlePageSizeChange = (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -362,7 +411,6 @@ export function AuthFilesPage() {
     return Array.from(types);
   }, [files]);
 
-
   const excludedProviderLookup = useMemo(() => {
     const lookup = new Map<string, string>();
     Object.keys(excluded).forEach((provider) => {
@@ -493,7 +541,10 @@ export function AuthFilesPage() {
 
     if (successCount > 0) {
       const suffix = validFiles.length > 1 ? ` (${successCount}/${validFiles.length})` : '';
-      showNotification(`${t('auth_files.upload_success')}${suffix}`, failed.length ? 'warning' : 'success');
+      showNotification(
+        `${t('auth_files.upload_success')}${suffix}`,
+        failed.length ? 'warning' : 'success'
+      );
       await loadFiles();
       await loadKeyStats();
     }
@@ -542,9 +593,7 @@ export function AuthFilesPage() {
         setFiles((prev) => prev.filter((file) => isRuntimeOnlyAuthFile(file)));
       } else {
         // 删除筛选类型的文件
-        const filesToDelete = files.filter(
-          (f) => f.type === filter && !isRuntimeOnlyAuthFile(f)
-        );
+        const filesToDelete = files.filter((f) => f.type === filter && !isRuntimeOnlyAuthFile(f));
 
         if (filesToDelete.length === 0) {
           showNotification(t('auth_files.delete_filtered_none', { type: typeLabel }), 'info');
@@ -592,9 +641,12 @@ export function AuthFilesPage() {
   // 下载文件
   const handleDownload = async (name: string) => {
     try {
-      const response = await apiClient.getRaw(`/auth-files/download?name=${encodeURIComponent(name)}`, {
-        responseType: 'blob'
-      });
+      const response = await apiClient.getRaw(
+        `/auth-files/download?name=${encodeURIComponent(name)}`,
+        {
+          responseType: 'blob',
+        }
+      );
       const blob = new Blob([response.data]);
       const url = window.URL.createObjectURL(blob);
       const a = document.createElement('a');
@@ -609,6 +661,133 @@ export function AuthFilesPage() {
     }
   };
 
+  const openPrefixProxyEditor = async (name: string) => {
+    if (disableControls) return;
+    if (prefixProxyEditor?.fileName === name) {
+      setPrefixProxyEditor(null);
+      return;
+    }
+
+    setPrefixProxyEditor({
+      fileName: name,
+      loading: true,
+      saving: false,
+      error: null,
+      originalText: '',
+      rawText: '',
+      json: null,
+      prefix: '',
+      proxyUrl: '',
+    });
+
+    try {
+      const rawText = await authFilesApi.downloadText(name);
+      const trimmed = rawText.trim();
+
+      let parsed: unknown;
+      try {
+        parsed = JSON.parse(trimmed) as unknown;
+      } catch {
+        setPrefixProxyEditor((prev) => {
+          if (!prev || prev.fileName !== name) return prev;
+          return {
+            ...prev,
+            loading: false,
+            error: t('auth_files.prefix_proxy_invalid_json'),
+            rawText: trimmed,
+            originalText: trimmed,
+          };
+        });
+        return;
+      }
+
+      if (!parsed || typeof parsed !== 'object' || Array.isArray(parsed)) {
+        setPrefixProxyEditor((prev) => {
+          if (!prev || prev.fileName !== name) return prev;
+          return {
+            ...prev,
+            loading: false,
+            error: t('auth_files.prefix_proxy_invalid_json'),
+            rawText: trimmed,
+            originalText: trimmed,
+          };
+        });
+        return;
+      }
+
+      const json = parsed as Record<string, unknown>;
+      const originalText = JSON.stringify(json);
+      const prefix = typeof json.prefix === 'string' ? json.prefix : '';
+      const proxyUrl = typeof json.proxy_url === 'string' ? json.proxy_url : '';
+
+      setPrefixProxyEditor((prev) => {
+        if (!prev || prev.fileName !== name) return prev;
+        return {
+          ...prev,
+          loading: false,
+          originalText,
+          rawText: originalText,
+          json,
+          prefix,
+          proxyUrl,
+          error: null,
+        };
+      });
+    } catch (err: unknown) {
+      const errorMessage = err instanceof Error ? err.message : t('notification.download_failed');
+      setPrefixProxyEditor((prev) => {
+        if (!prev || prev.fileName !== name) return prev;
+        return { ...prev, loading: false, error: errorMessage, rawText: '' };
+      });
+      showNotification(`${t('notification.download_failed')}: ${errorMessage}`, 'error');
+    }
+  };
+
+  const handlePrefixProxyChange = (field: 'prefix' | 'proxyUrl', value: string) => {
+    setPrefixProxyEditor((prev) => {
+      if (!prev) return prev;
+      if (field === 'prefix') return { ...prev, prefix: value };
+      return { ...prev, proxyUrl: value };
+    });
+  };
+
+  const handlePrefixProxySave = async () => {
+    if (!prefixProxyEditor?.json) return;
+    if (!prefixProxyDirty) return;
+
+    const name = prefixProxyEditor.fileName;
+    const payload = prefixProxyUpdatedText;
+    const fileSize = new Blob([payload]).size;
+    if (fileSize > MAX_AUTH_FILE_SIZE) {
+      showNotification(
+        t('auth_files.upload_error_size', { maxSize: formatFileSize(MAX_AUTH_FILE_SIZE) }),
+        'error'
+      );
+      return;
+    }
+
+    setPrefixProxyEditor((prev) => {
+      if (!prev || prev.fileName !== name) return prev;
+      return { ...prev, saving: true };
+    });
+
+    try {
+      const file = new File([payload], name, { type: 'application/json' });
+      await authFilesApi.upload(file);
+      showNotification(t('auth_files.prefix_proxy_saved_success', { name }), 'success');
+      await loadFiles();
+      await loadKeyStats();
+      setPrefixProxyEditor(null);
+    } catch (err: unknown) {
+      const errorMessage = err instanceof Error ? err.message : '';
+      showNotification(`${t('notification.upload_failed')}: ${errorMessage}`, 'error');
+      setPrefixProxyEditor((prev) => {
+        if (!prev || prev.fileName !== name) return prev;
+        return { ...prev, saving: false };
+      });
+    }
+  };
+
   const handleStatusToggle = async (item: AuthFileItem, enabled: boolean) => {
     const name = item.name;
     const nextDisabled = !enabled;
@@ -620,9 +799,7 @@ export function AuthFilesPage() {
 
     try {
       const res = await authFilesApi.setStatus(name, nextDisabled);
-      setFiles((prev) =>
-        prev.map((f) => (f.name === name ? { ...f, disabled: res.disabled } : f))
-      );
+      setFiles((prev) => prev.map((f) => (f.name === name ? { ...f, disabled: res.disabled } : f)));
       showNotification(
         enabled
           ? t('auth_files.status_enabled_success', { name })
@@ -665,7 +842,11 @@ export function AuthFilesPage() {
     } catch (err) {
       // 检测是否是 API 不支持的错误 (404 或特定错误消息)
       const errorMessage = err instanceof Error ? err.message : '';
-      if (errorMessage.includes('404') || errorMessage.includes('not found') || errorMessage.includes('Not Found')) {
+      if (
+        errorMessage.includes('404') ||
+        errorMessage.includes('not found') ||
+        errorMessage.includes('Not Found')
+      ) {
         setModelsError('unsupported');
       } else {
         showNotification(`${t('notification.load_failed')}: ${errorMessage}`, 'error');
@@ -679,7 +860,7 @@ export function AuthFilesPage() {
   const isModelExcluded = (modelId: string, providerType: string): boolean => {
     const providerKey = normalizeProviderKey(providerType);
     const excludedModels = excluded[providerKey] || excluded[providerType] || [];
-    return excludedModels.some(pattern => {
+    return excludedModels.some((pattern) => {
       if (pattern.includes('*')) {
         // 支持通配符匹配
         const regex = new RegExp('^' + pattern.replace(/\*/g, '.*') + '$', 'i');
@@ -713,7 +894,7 @@ export function AuthFilesPage() {
     const models = lookupKey ? excluded[lookupKey] : [];
     setExcludedForm({
       provider: lookupKey || fallbackProvider,
-      modelsText: Array.isArray(models) ? models.join('\n') : ''
+      modelsText: Array.isArray(models) ? models.join('\n') : '',
     });
     setExcludedModalOpen(true);
   };
@@ -770,14 +951,21 @@ export function AuthFilesPage() {
         await loadExcluded();
         showNotification(t('oauth_excluded.delete_success'), 'success');
       } catch (fallbackErr: unknown) {
-        const errorMessage = fallbackErr instanceof Error ? fallbackErr.message : err instanceof Error ? err.message : '';
+        const errorMessage =
+          fallbackErr instanceof Error
+            ? fallbackErr.message
+            : err instanceof Error
+              ? err.message
+              : '';
         showNotification(`${t('oauth_excluded.delete_failed')}: ${errorMessage}`, 'error');
       }
     }
   };
 
   // OAuth 模型映射相关方法
-  const normalizeMappingEntries = (entries?: OAuthModelMappingEntry[]): OAuthModelMappingFormEntry[] => {
+  const normalizeMappingEntries = (
+    entries?: OAuthModelMappingEntry[]
+  ): OAuthModelMappingFormEntry[] => {
     if (!Array.isArray(entries) || entries.length === 0) {
       return [buildEmptyMappingEntry()];
     }
@@ -803,7 +991,11 @@ export function AuthFilesPage() {
     setMappingModalOpen(true);
   };
 
-  const updateMappingEntry = (index: number, field: keyof OAuthModelMappingEntry, value: string | boolean) => {
+  const updateMappingEntry = (
+    index: number,
+    field: keyof OAuthModelMappingEntry,
+    value: string | boolean
+  ) => {
     setMappingForm((prev) => ({
       ...prev,
       mappings: prev.mappings.map((entry, idx) =>
@@ -884,7 +1076,10 @@ export function AuthFilesPage() {
     <div className={styles.filterTags}>
       {existingTypes.map((type) => {
         const isActive = filter === type;
-        const color = type === 'all' ? { bg: 'var(--bg-tertiary)', text: 'var(--text-primary)' } : getTypeColor(type);
+        const color =
+          type === 'all'
+            ? { bg: 'var(--bg-tertiary)', text: 'var(--text-primary)' }
+            : getTypeColor(type);
         const activeTextColor = resolvedTheme === 'dark' ? '#111827' : '#fff';
         return (
           <button
@@ -893,7 +1088,7 @@ export function AuthFilesPage() {
             style={{
               backgroundColor: isActive ? color.text : color.bg,
               color: isActive ? activeTextColor : color.text,
-              borderColor: color.text
+              borderColor: color.text,
             }}
             onClick={() => {
               setFilter(type);
@@ -934,7 +1129,8 @@ export function AuthFilesPage() {
     const rawAuthIndex = item['auth_index'] ?? item.authIndex;
     const authIndexKey = normalizeAuthIndexValue(rawAuthIndex);
 
-    const statusData = (authIndexKey && statusBarCache.get(authIndexKey)) || calculateStatusBarData([]);
+    const statusData =
+      (authIndexKey && statusBarCache.get(authIndexKey)) || calculateStatusBarData([]);
     const hasData = statusData.totalSuccess + statusData.totalFailure > 0;
     const rateClass = !hasData
       ? ''
@@ -982,7 +1178,7 @@ export function AuthFilesPage() {
             style={{
               backgroundColor: typeColor.bg,
               color: typeColor.text,
-              ...(typeColor.border ? { border: typeColor.border } : {})
+              ...(typeColor.border ? { border: typeColor.border } : {}),
             }}
           >
             {getTypeLabel(item.type || 'unknown')}
@@ -991,8 +1187,12 @@ export function AuthFilesPage() {
         </div>
 
         <div className={styles.cardMeta}>
-          <span>{t('auth_files.file_size')}: {item.size ? formatFileSize(item.size) : '-'}</span>
-          <span>{t('auth_files.file_modified')}: {formatModified(item)}</span>
+          <span>
+            {t('auth_files.file_size')}: {item.size ? formatFileSize(item.size) : '-'}
+          </span>
+          <span>
+            {t('auth_files.file_modified')}: {formatModified(item)}
+          </span>
         </div>
 
         <div className={styles.cardStats}>
@@ -1042,6 +1242,16 @@ export function AuthFilesPage() {
               >
                 <IconDownload className={styles.actionIcon} size={16} />
               </Button>
+              <Button
+                variant="secondary"
+                size="sm"
+                onClick={() => void openPrefixProxyEditor(item.name)}
+                className={styles.iconButton}
+                title={t('auth_files.prefix_proxy_button')}
+                disabled={disableControls}
+              >
+                <IconCode className={styles.actionIcon} size={16} />
+              </Button>
               <Button
                 variant="danger"
                 size="sm"
@@ -1069,7 +1279,9 @@ export function AuthFilesPage() {
             </div>
           )}
           {isRuntimeOnly && (
-            <div className={styles.virtualBadge}>{t('auth_files.type_virtual') || '虚拟认证文件'}</div>
+            <div className={styles.virtualBadge}>
+              {t('auth_files.type_virtual') || '虚拟认证文件'}
+            </div>
           )}
         </div>
       </div>
@@ -1094,12 +1306,7 @@ export function AuthFilesPage() {
         title={titleNode}
         extra={
           <div className={styles.headerActions}>
-            <Button
-              variant="secondary"
-              size="sm"
-              onClick={handleHeaderRefresh}
-              disabled={loading}
-            >
+            <Button variant="secondary" size="sm" onClick={handleHeaderRefresh} disabled={loading}>
               {t('common.refresh')}
             </Button>
             <Button
@@ -1109,9 +1316,16 @@ export function AuthFilesPage() {
               disabled={disableControls || loading || deletingAll}
               loading={deletingAll}
             >
-              {filter === 'all' ? t('auth_files.delete_all_button') : `${t('common.delete')} ${getTypeLabel(filter)}`}
+              {filter === 'all'
+                ? t('auth_files.delete_all_button')
+                : `${t('common.delete')} ${getTypeLabel(filter)}`}
             </Button>
-            <Button size="sm" onClick={handleUploadClick} disabled={disableControls || uploading} loading={uploading}>
+            <Button
+              size="sm"
+              onClick={handleUploadClick}
+              disabled={disableControls || uploading}
+              loading={uploading}
+            >
               {t('auth_files.upload_button')}
             </Button>
             <input
@@ -1162,11 +1376,12 @@ export function AuthFilesPage() {
         {loading ? (
           <div className={styles.hint}>{t('common.loading')}</div>
         ) : pageItems.length === 0 ? (
-          <EmptyState title={t('auth_files.search_empty_title')} description={t('auth_files.search_empty_desc')} />
+          <EmptyState
+            title={t('auth_files.search_empty_title')}
+            description={t('auth_files.search_empty_desc')}
+          />
         ) : (
-          <div className={styles.fileGrid}>
-            {pageItems.map(renderFileCard)}
-          </div>
+          <div className={styles.fileGrid}>{pageItems.map(renderFileCard)}</div>
         )}
 
         {/* 分页 */}
@@ -1184,7 +1399,7 @@ export function AuthFilesPage() {
               {t('auth_files.pagination_info', {
                 current: currentPage,
                 total: totalPages,
-                count: filtered.length
+                count: filtered.length,
               })}
             </div>
             <Button
@@ -1327,7 +1542,9 @@ export function AuthFilesPage() {
       <Modal
         open={modelsModalOpen}
         onClose={() => setModelsModalOpen(false)}
-        title={t('auth_files.models_title', { defaultValue: '支持的模型' }) + ` - ${modelsFileName}`}
+        title={
+          t('auth_files.models_title', { defaultValue: '支持的模型' }) + ` - ${modelsFileName}`
+        }
         footer={
           <Button variant="secondary" onClick={() => setModelsModalOpen(false)}>
             {t('common.close')}
@@ -1335,16 +1552,22 @@ export function AuthFilesPage() {
         }
       >
         {modelsLoading ? (
-          <div className={styles.hint}>{t('auth_files.models_loading', { defaultValue: '正在加载模型列表...' })}</div>
+          <div className={styles.hint}>
+            {t('auth_files.models_loading', { defaultValue: '正在加载模型列表...' })}
+          </div>
         ) : modelsError === 'unsupported' ? (
           <EmptyState
             title={t('auth_files.models_unsupported', { defaultValue: '当前版本不支持此功能' })}
-            description={t('auth_files.models_unsupported_desc', { defaultValue: '请更新 CLI Proxy API 到最新版本后重试' })}
+            description={t('auth_files.models_unsupported_desc', {
+              defaultValue: '请更新 CLI Proxy API 到最新版本后重试',
+            })}
           />
         ) : modelsList.length === 0 ? (
           <EmptyState
             title={t('auth_files.models_empty', { defaultValue: '该凭证暂无可用模型' })}
-            description={t('auth_files.models_empty_desc', { defaultValue: '该认证凭证可能尚未被服务器加载或没有绑定任何模型' })}
+            description={t('auth_files.models_empty_desc', {
+              defaultValue: '该认证凭证可能尚未被服务器加载或没有绑定任何模型',
+            })}
           />
         ) : (
           <div className={styles.modelsList}>
@@ -1356,19 +1579,28 @@ export function AuthFilesPage() {
                   className={`${styles.modelItem} ${isExcluded ? styles.modelItemExcluded : ''}`}
                   onClick={() => {
                     navigator.clipboard.writeText(model.id);
-                    showNotification(t('notification.link_copied', { defaultValue: '已复制到剪贴板' }), 'success');
+                    showNotification(
+                      t('notification.link_copied', { defaultValue: '已复制到剪贴板' }),
+                      'success'
+                    );
                   }}
-                  title={isExcluded ? t('auth_files.models_excluded_hint', { defaultValue: '此模型已被 OAuth 排除' }) : t('common.copy', { defaultValue: '点击复制' })}
+                  title={
+                    isExcluded
+                      ? t('auth_files.models_excluded_hint', {
+                          defaultValue: '此模型已被 OAuth 排除',
+                        })
+                      : t('common.copy', { defaultValue: '点击复制' })
+                  }
                 >
                   <span className={styles.modelId}>{model.id}</span>
                   {model.display_name && model.display_name !== model.id && (
                     <span className={styles.modelDisplayName}>{model.display_name}</span>
                   )}
-                  {model.type && (
-                    <span className={styles.modelType}>{model.type}</span>
-                  )}
+                  {model.type && <span className={styles.modelType}>{model.type}</span>}
                   {isExcluded && (
-                    <span className={styles.modelExcludedBadge}>{t('auth_files.models_excluded_badge', { defaultValue: '已排除' })}</span>
+                    <span className={styles.modelExcludedBadge}>
+                      {t('auth_files.models_excluded_badge', { defaultValue: '已排除' })}
+                    </span>
                   )}
                 </div>
               );
@@ -1377,6 +1609,89 @@ export function AuthFilesPage() {
         )}
       </Modal>
 
+      {/* prefix/proxy_url 编辑弹窗 */}
+      <Modal
+        open={Boolean(prefixProxyEditor)}
+        onClose={() => setPrefixProxyEditor(null)}
+        closeDisabled={prefixProxyEditor?.saving === true}
+        width={720}
+        title={
+          prefixProxyEditor?.fileName
+            ? `${t('auth_files.prefix_proxy_button')} - ${prefixProxyEditor.fileName}`
+            : t('auth_files.prefix_proxy_button')
+        }
+        footer={
+          <>
+            <Button
+              variant="secondary"
+              onClick={() => setPrefixProxyEditor(null)}
+              disabled={prefixProxyEditor?.saving === true}
+            >
+              {t('common.cancel')}
+            </Button>
+            <Button
+              onClick={() => void handlePrefixProxySave()}
+              loading={prefixProxyEditor?.saving === true}
+              disabled={
+                disableControls ||
+                prefixProxyEditor?.saving === true ||
+                !prefixProxyDirty ||
+                !prefixProxyEditor?.json
+              }
+            >
+              {t('common.save')}
+            </Button>
+          </>
+        }
+      >
+        {prefixProxyEditor && (
+          <div className={styles.prefixProxyEditor}>
+            {prefixProxyEditor.loading ? (
+              <div className={styles.prefixProxyLoading}>
+                <LoadingSpinner size={14} />
+                <span>{t('auth_files.prefix_proxy_loading')}</span>
+              </div>
+            ) : (
+              <>
+                {prefixProxyEditor.error && (
+                  <div className={styles.prefixProxyError}>{prefixProxyEditor.error}</div>
+                )}
+                <div className={styles.prefixProxyJsonWrapper}>
+                  <label className={styles.prefixProxyLabel}>
+                    {t('auth_files.prefix_proxy_source_label')}
+                  </label>
+                  <textarea
+                    className={styles.prefixProxyTextarea}
+                    rows={10}
+                    readOnly
+                    value={prefixProxyUpdatedText}
+                  />
+                </div>
+                <div className={styles.prefixProxyFields}>
+                  <Input
+                    label={t('auth_files.prefix_label')}
+                    value={prefixProxyEditor.prefix}
+                    disabled={
+                      disableControls || prefixProxyEditor.saving || !prefixProxyEditor.json
+                    }
+                    onChange={(e) => handlePrefixProxyChange('prefix', e.target.value)}
+                  />
+                  <Input
+                    label={t('auth_files.proxy_url_label')}
+                    value={prefixProxyEditor.proxyUrl}
+                    placeholder={t('auth_files.proxy_url_placeholder')}
+                    disabled={
+                      disableControls || prefixProxyEditor.saving || !prefixProxyEditor.json
+                    }
+                    onChange={(e) => handlePrefixProxyChange('proxyUrl', e.target.value)}
+                  />
+                </div>
+              </>
+            )}
+          </div>
+        )}
+      </Modal>
+
       {/* OAuth 排除弹窗 */}
       <Modal
         open={excludedModalOpen}
@@ -1384,7 +1699,11 @@ export function AuthFilesPage() {
         title={t('oauth_excluded.add_title')}
         footer={
           <>
-            <Button variant="secondary" onClick={() => setExcludedModalOpen(false)} disabled={savingExcluded}>
+            <Button
+              variant="secondary"
+              onClick={() => setExcludedModalOpen(false)}
+              disabled={savingExcluded}
+            >
               {t('common.cancel')}
             </Button>
             <Button onClick={saveExcludedModels} loading={savingExcluded}>
@@ -1448,7 +1767,11 @@ export function AuthFilesPage() {
         title={t('oauth_model_mappings.add_title')}
         footer={
           <>
-            <Button variant="secondary" onClick={() => setMappingModalOpen(false)} disabled={savingMappings}>
+            <Button
+              variant="secondary"
+              onClick={() => setMappingModalOpen(false)}
+              disabled={savingMappings}
+            >
               {t('common.cancel')}
             </Button>
             <Button onClick={saveModelMappings} loading={savingMappings}>

From 305ddef900f5790af3b63f3a53084ddb7d741b0c Mon Sep 17 00:00:00 2001
From: LTbinglingfeng <tan13318527080@163.com>
Date: Sat, 24 Jan 2026 14:03:15 +0800
Subject: [PATCH 03/11] fix(ui): improve GSAP page transition smoothness

---
 src/components/common/PageTransition.scss |  8 +++---
 src/components/common/PageTransition.tsx  | 35 ++++++++++-------------
 2 files changed, 19 insertions(+), 24 deletions(-)

diff --git a/src/components/common/PageTransition.scss b/src/components/common/PageTransition.scss
index 6b918cd..81a9e5e 100644
--- a/src/components/common/PageTransition.scss
+++ b/src/components/common/PageTransition.scss
@@ -14,6 +14,8 @@
     gap: $spacing-lg;
     min-height: 0;
     flex: 1;
+    backface-visibility: hidden;
+    transform: translateZ(0);
 
     // During animation, exit layer uses absolute positioning
     &--exit {
@@ -22,17 +24,15 @@
       z-index: 1;
       overflow: hidden;
       pointer-events: none;
+      will-change: transform, opacity;
     }
   }
 
   &--animating &__layer {
     will-change: transform, opacity;
-    backface-visibility: hidden;
-    transform-style: preserve-3d;
   }
 
-  // When both layers exist, current layer also needs positioning
-  &--animating &__layer:not(&__layer--exit) {
+  &--animating &__layer:not(.page-transition__layer--exit) {
     position: relative;
     z-index: 0;
   }
diff --git a/src/components/common/PageTransition.tsx b/src/components/common/PageTransition.tsx
index 1da4636..9d230b0 100644
--- a/src/components/common/PageTransition.tsx
+++ b/src/components/common/PageTransition.tsx
@@ -71,26 +71,17 @@ export function PageTransition({
           ? 'forward'
           : 'backward';
 
-    let cancelled = false;
-
-    queueMicrotask(() => {
-      if (cancelled) return;
-      setTransitionDirection(nextDirection);
-      setLayers((prev) => {
-        const prevCurrent = prev[prev.length - 1];
-        return [
-          prevCurrent
-            ? { ...prevCurrent, status: 'exiting' }
-            : { key: location.key, location, status: 'exiting' },
-          { key: location.key, location, status: 'current' },
-        ];
-      });
-      setIsAnimating(true);
+    setTransitionDirection(nextDirection);
+    setLayers((prev) => {
+      const prevCurrent = prev[prev.length - 1];
+      return [
+        prevCurrent
+          ? { ...prevCurrent, status: 'exiting' }
+          : { key: location.key, location, status: 'exiting' },
+        { key: location.key, location, status: 'current' },
+      ];
     });
-
-    return () => {
-      cancelled = true;
-    };
+    setIsAnimating(true);
   }, [
     isAnimating,
     location,
@@ -152,8 +143,12 @@ export function PageTransition({
         opacity: 1,
         duration: TRANSITION_DURATION,
         ease: 'power2.out', // smooth settle
-        clearProps: 'transform,opacity',
         force3D: true,
+        onComplete: () => {
+          if (currentLayerRef.current) {
+            gsap.set(currentLayerRef.current, { clearProps: 'transform,opacity' });
+          }
+        },
       },
       ENTER_DELAY
     );

From 2715f44a5ed5ba62391588024cf847736c3301c8 Mon Sep 17 00:00:00 2001
From: LTbinglingfeng <tan13318527080@163.com>
Date: Sat, 24 Jan 2026 14:16:58 +0800
Subject: [PATCH 04/11] fix(ui): use crossfade animation with subtle movement
 for page transitions

---
 src/components/common/PageTransition.tsx | 27 ++++++++++--------------
 1 file changed, 11 insertions(+), 16 deletions(-)

diff --git a/src/components/common/PageTransition.tsx b/src/components/common/PageTransition.tsx
index 9d230b0..3dd107f 100644
--- a/src/components/common/PageTransition.tsx
+++ b/src/components/common/PageTransition.tsx
@@ -9,9 +9,8 @@ interface PageTransitionProps {
   scrollContainerRef?: React.RefObject<HTMLElement | null>;
 }
 
-const TRANSITION_DURATION = 0.5;
-const EXIT_DURATION = 0.45;
-const ENTER_DELAY = 0.08;
+const TRANSITION_DURATION = 0.35;
+const TRAVEL_DISTANCE = 60;
 
 type LayerStatus = 'current' | 'exiting';
 
@@ -103,11 +102,8 @@ export function PageTransition({
       scrollContainer.scrollTo({ top: 0, left: 0, behavior: 'auto' });
     }
 
-    const containerHeight = scrollContainer?.clientHeight ?? 0;
-    const viewportHeight = typeof window === 'undefined' ? 0 : window.innerHeight;
-    const travelDistance = Math.max(containerHeight, viewportHeight, 1);
-    const enterFromY = transitionDirection === 'forward' ? travelDistance : -travelDistance;
-    const exitToY = transitionDirection === 'forward' ? -travelDistance : travelDistance;
+    const enterFromY = transitionDirection === 'forward' ? TRAVEL_DISTANCE : -TRAVEL_DISTANCE;
+    const exitToY = transitionDirection === 'forward' ? -TRAVEL_DISTANCE : TRAVEL_DISTANCE;
     const exitBaseY = scrollOffset ? -scrollOffset : 0;
 
     const tl = gsap.timeline({
@@ -117,24 +113,23 @@ export function PageTransition({
       },
     });
 
-    // Exit animation: fly out to top (slow-to-fast)
+    // Exit animation: fade out with slight movement (runs simultaneously)
     if (exitingLayerRef.current) {
       gsap.set(exitingLayerRef.current, { y: exitBaseY });
-      tl.fromTo(
+      tl.to(
         exitingLayerRef.current,
-        { y: exitBaseY, opacity: 1 },
         {
           y: exitBaseY + exitToY,
           opacity: 0,
-          duration: EXIT_DURATION,
-          ease: 'power2.in', // fast finish to clear screen
+          duration: TRANSITION_DURATION,
+          ease: 'circ.out',
           force3D: true,
         },
         0
       );
     }
 
-    // Enter animation: slide in from bottom (slow-to-fast)
+    // Enter animation: fade in with slight movement (runs simultaneously)
     tl.fromTo(
       currentLayerRef.current,
       { y: enterFromY, opacity: 0 },
@@ -142,7 +137,7 @@ export function PageTransition({
         y: 0,
         opacity: 1,
         duration: TRANSITION_DURATION,
-        ease: 'power2.out', // smooth settle
+        ease: 'circ.out',
         force3D: true,
         onComplete: () => {
           if (currentLayerRef.current) {
@@ -150,7 +145,7 @@ export function PageTransition({
           }
         },
       },
-      ENTER_DELAY
+      0
     );
 
     return () => {

From c89bbd5098ea315e94ca62063535da14fd7c2011 Mon Sep 17 00:00:00 2001
From: LTbinglingfeng <tan13318527080@163.com>
Date: Sat, 24 Jan 2026 15:30:45 +0800
Subject: [PATCH 05/11] feat(auth-files): add auth-file model suggestions for
 OAuth mappings

---
 src/components/common/PageTransition.tsx |  24 ++-
 src/components/providers/utils.ts        |   2 +-
 src/i18n/locales/en.json                 |  18 +-
 src/i18n/locales/zh-CN.json              |  18 +-
 src/pages/AuthFilesPage.tsx              | 235 +++++++++++++++++++++--
 src/services/api/models.ts               |   2 +-
 6 files changed, 257 insertions(+), 42 deletions(-)

diff --git a/src/components/common/PageTransition.tsx b/src/components/common/PageTransition.tsx
index 3dd107f..6c5c133 100644
--- a/src/components/common/PageTransition.tsx
+++ b/src/components/common/PageTransition.tsx
@@ -30,10 +30,10 @@ export function PageTransition({
   const location = useLocation();
   const currentLayerRef = useRef<HTMLDivElement>(null);
   const exitingLayerRef = useRef<HTMLDivElement>(null);
+  const transitionDirectionRef = useRef<TransitionDirection>('forward');
   const exitScrollOffsetRef = useRef(0);
 
   const [isAnimating, setIsAnimating] = useState(false);
-  const [transitionDirection, setTransitionDirection] = useState<TransitionDirection>('forward');
   const [layers, setLayers] = useState<Layer[]>(() => [
     {
       key: location.key,
@@ -70,7 +70,7 @@ export function PageTransition({
           ? 'forward'
           : 'backward';
 
-    setTransitionDirection(nextDirection);
+    transitionDirectionRef.current = nextDirection;
     setLayers((prev) => {
       const prevCurrent = prev[prev.length - 1];
       return [
@@ -96,12 +96,16 @@ export function PageTransition({
 
     if (!currentLayerRef.current) return;
 
+    const currentLayerEl = currentLayerRef.current;
+    const exitingLayerEl = exitingLayerRef.current;
+
     const scrollContainer = resolveScrollContainer();
     const scrollOffset = exitScrollOffsetRef.current;
     if (scrollContainer && scrollOffset > 0) {
       scrollContainer.scrollTo({ top: 0, left: 0, behavior: 'auto' });
     }
 
+    const transitionDirection = transitionDirectionRef.current;
     const enterFromY = transitionDirection === 'forward' ? TRAVEL_DISTANCE : -TRAVEL_DISTANCE;
     const exitToY = transitionDirection === 'forward' ? -TRAVEL_DISTANCE : TRAVEL_DISTANCE;
     const exitBaseY = scrollOffset ? -scrollOffset : 0;
@@ -114,10 +118,10 @@ export function PageTransition({
     });
 
     // Exit animation: fade out with slight movement (runs simultaneously)
-    if (exitingLayerRef.current) {
-      gsap.set(exitingLayerRef.current, { y: exitBaseY });
+    if (exitingLayerEl) {
+      gsap.set(exitingLayerEl, { y: exitBaseY });
       tl.to(
-        exitingLayerRef.current,
+        exitingLayerEl,
         {
           y: exitBaseY + exitToY,
           opacity: 0,
@@ -131,7 +135,7 @@ export function PageTransition({
 
     // Enter animation: fade in with slight movement (runs simultaneously)
     tl.fromTo(
-      currentLayerRef.current,
+      currentLayerEl,
       { y: enterFromY, opacity: 0 },
       {
         y: 0,
@@ -140,8 +144,8 @@ export function PageTransition({
         ease: 'circ.out',
         force3D: true,
         onComplete: () => {
-          if (currentLayerRef.current) {
-            gsap.set(currentLayerRef.current, { clearProps: 'transform,opacity' });
+          if (currentLayerEl) {
+            gsap.set(currentLayerEl, { clearProps: 'transform,opacity' });
           }
         },
       },
@@ -150,9 +154,9 @@ export function PageTransition({
 
     return () => {
       tl.kill();
-      gsap.killTweensOf([currentLayerRef.current, exitingLayerRef.current]);
+      gsap.killTweensOf([currentLayerEl, exitingLayerEl]);
     };
-  }, [isAnimating, transitionDirection, resolveScrollContainer]);
+  }, [isAnimating, resolveScrollContainer]);
 
   return (
     <div className={`page-transition${isAnimating ? ' page-transition--animating' : ''}`}>
diff --git a/src/components/providers/utils.ts b/src/components/providers/utils.ts
index e44bd91..7ba75a2 100644
--- a/src/components/providers/utils.ts
+++ b/src/components/providers/utils.ts
@@ -46,7 +46,7 @@ export const normalizeOpenAIBaseUrl = (baseUrl: string): string => {
 export const buildOpenAIModelsEndpoint = (baseUrl: string): string => {
   const trimmed = normalizeOpenAIBaseUrl(baseUrl);
   if (!trimmed) return '';
-  return trimmed.endsWith('/v1') ? `${trimmed}/models` : `${trimmed}/v1/models`;
+  return `${trimmed}/models`;
 };
 
 export const buildOpenAIChatCompletionsEndpoint = (baseUrl: string): string => {
diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
index 5525bd4..f424856 100644
--- a/src/i18n/locales/en.json
+++ b/src/i18n/locales/en.json
@@ -293,12 +293,12 @@
     "openai_model_name_placeholder": "Model name, e.g. moonshotai/kimi-k2:free",
     "openai_model_alias_placeholder": "Model alias (optional)",
     "openai_models_add_btn": "Add Model",
-    "openai_models_fetch_button": "Fetch via /v1/models",
-    "openai_models_fetch_title": "Pick Models from /v1/models",
-    "openai_models_fetch_hint": "Call the /v1/models endpoint using the Base URL above, sending the first API key as Bearer plus custom headers.",
+    "openai_models_fetch_button": "Fetch via /models",
+    "openai_models_fetch_title": "Pick Models from /models",
+    "openai_models_fetch_hint": "Call the /models endpoint using the Base URL above, sending the first API key as Bearer plus custom headers.",
     "openai_models_fetch_url_label": "Request URL",
     "openai_models_fetch_refresh": "Refresh",
-    "openai_models_fetch_loading": "Fetching models from /v1/models...",
+    "openai_models_fetch_loading": "Fetching models from /models...",
     "openai_models_fetch_empty": "No models returned. Please check the endpoint or auth.",
     "openai_models_fetch_error": "Failed to fetch models",
     "openai_models_fetch_back": "Back to edit",
@@ -519,6 +519,12 @@
     "provider_label": "Provider",
     "provider_placeholder": "e.g. gemini-cli / vertex",
     "provider_hint": "Defaults to the current filter; pick an existing provider or type a new name.",
+    "model_source_label": "Auth file model source",
+    "model_source_placeholder": "Select an auth file (for model suggestions)",
+    "model_source_hint": "Pick an auth file to enable model suggestions for “Source model name”. You can still type custom values.",
+    "model_source_loading": "Loading models...",
+    "model_source_unsupported": "The current CPA version does not support fetching model lists (manual input still works).",
+    "model_source_loaded": "{{count}} models loaded. Use the dropdown in “Source model name”, or type custom values.",
     "mappings_label": "Model mappings",
     "mapping_name_placeholder": "Source model name",
     "mapping_alias_placeholder": "Alias (required)",
@@ -799,9 +805,9 @@
     "not_loaded": "Not Loaded",
     "seconds_ago": "seconds ago",
     "models_title": "Available Models",
-    "models_desc": "Shows the /v1/models response and uses saved API keys for auth automatically.",
+    "models_desc": "Shows the /models response and uses saved API keys for auth automatically.",
     "models_loading": "Loading available models...",
-    "models_empty": "No models returned by /v1/models",
+    "models_empty": "No models returned by /models",
     "models_error": "Failed to load model list",
     "models_count": "{{count}} available models",
     "version_check_title": "Update Check",
diff --git a/src/i18n/locales/zh-CN.json b/src/i18n/locales/zh-CN.json
index f5d88bc..98b64c3 100644
--- a/src/i18n/locales/zh-CN.json
+++ b/src/i18n/locales/zh-CN.json
@@ -293,12 +293,12 @@
     "openai_model_name_placeholder": "模型名称，如 moonshotai/kimi-k2:free",
     "openai_model_alias_placeholder": "模型别名 (可选)",
     "openai_models_add_btn": "添加模型",
-    "openai_models_fetch_button": "从 /v1/models 获取",
-    "openai_models_fetch_title": "从 /v1/models 选择模型",
-    "openai_models_fetch_hint": "使用上方 Base URL 调用 /v1/models 端点，附带首个 API Key（Bearer）与自定义请求头。",
+    "openai_models_fetch_button": "从 /models 获取",
+    "openai_models_fetch_title": "从 /models 选择模型",
+    "openai_models_fetch_hint": "使用上方 Base URL 调用 /models 端点，附带首个 API Key（Bearer）与自定义请求头。",
     "openai_models_fetch_url_label": "请求地址",
     "openai_models_fetch_refresh": "重新获取",
-    "openai_models_fetch_loading": "正在从 /v1/models 获取模型列表...",
+    "openai_models_fetch_loading": "正在从 /models 获取模型列表...",
     "openai_models_fetch_empty": "未获取到模型，请检查端点或鉴权信息。",
     "openai_models_fetch_error": "获取模型失败",
     "openai_models_fetch_back": "返回编辑",
@@ -519,6 +519,12 @@
     "provider_label": "提供商",
     "provider_placeholder": "例如 gemini-cli / vertex",
     "provider_hint": "默认选中当前筛选的提供商，也可直接输入或选择其他名称。",
+    "model_source_label": "模型来源认证文件",
+    "model_source_placeholder": "选择认证文件（用于原模型下拉建议）",
+    "model_source_hint": "选择一个认证文件后，“原模型名称”支持下拉选择；也可手动输入自定义模型。",
+    "model_source_loading": "正在加载模型列表...",
+    "model_source_unsupported": "当前 CPA 版本不支持获取模型列表（仍可手动输入）。",
+    "model_source_loaded": "已加载 {{count}} 个模型，可在“原模型名称”中下拉选择；也可手动输入。",
     "mappings_label": "模型映射",
     "mapping_name_placeholder": "原模型名称",
     "mapping_alias_placeholder": "别名 (必填)",
@@ -799,9 +805,9 @@
     "not_loaded": "未加载",
     "seconds_ago": "秒前",
     "models_title": "可用模型列表",
-    "models_desc": "展示 /v1/models 返回的模型，并自动使用服务器保存的 API Key 进行鉴权。",
+    "models_desc": "展示 /models 返回的模型，并自动使用服务器保存的 API Key 进行鉴权。",
     "models_loading": "正在加载可用模型...",
-    "models_empty": "未从 /v1/models 获取到模型数据",
+    "models_empty": "未从 /models 获取到模型数据",
     "models_error": "获取模型列表失败",
     "models_count": "可用模型 {{count}} 个",
     "version_check_title": "版本检查",
diff --git a/src/pages/AuthFilesPage.tsx b/src/pages/AuthFilesPage.tsx
index 5b018db..75491d0 100644
--- a/src/pages/AuthFilesPage.tsx
+++ b/src/pages/AuthFilesPage.tsx
@@ -36,6 +36,7 @@ import styles from './AuthFilesPage.module.scss';
 type ThemeColors = { bg: string; text: string; border?: string };
 type TypeColorSet = { light: ThemeColors; dark?: ThemeColors };
 type ResolvedTheme = 'light' | 'dark';
+type AuthFileModelItem = { id: string; display_name?: string; type?: string; owned_by?: string };
 
 // 标签类型颜色配置（对齐重构前 styles.css 的 file-type-badge 颜色）
 const TYPE_COLORS: Record<string, TypeColorSet> = {
@@ -203,6 +204,7 @@ export function AuthFilesPage() {
   const [search, setSearch] = useState('');
   const [page, setPage] = useState(1);
   const [pageSize, setPageSize] = useState(9);
+  const [pageSizeInput, setPageSizeInput] = useState('9');
   const [uploading, setUploading] = useState(false);
   const [deleting, setDeleting] = useState<string | null>(null);
   const [deletingAll, setDeletingAll] = useState(false);
@@ -217,12 +219,11 @@ export function AuthFilesPage() {
   // 模型列表弹窗相关
   const [modelsModalOpen, setModelsModalOpen] = useState(false);
   const [modelsLoading, setModelsLoading] = useState(false);
-  const [modelsList, setModelsList] = useState<
-    { id: string; display_name?: string; type?: string }[]
-  >([]);
+  const [modelsList, setModelsList] = useState<AuthFileModelItem[]>([]);
   const [modelsFileName, setModelsFileName] = useState('');
   const [modelsFileType, setModelsFileType] = useState('');
   const [modelsError, setModelsError] = useState<'unsupported' | null>(null);
+  const modelsCacheRef = useRef<Map<string, AuthFileModelItem[]>>(new Map());
 
   // OAuth 排除模型相关
   const [excluded, setExcluded] = useState<Record<string, string[]>>({});
@@ -242,6 +243,10 @@ export function AuthFilesPage() {
     provider: '',
     mappings: [buildEmptyMappingEntry()],
   });
+  const [mappingModelsFileName, setMappingModelsFileName] = useState('');
+  const [mappingModelsList, setMappingModelsList] = useState<AuthFileModelItem[]>([]);
+  const [mappingModelsLoading, setMappingModelsLoading] = useState(false);
+  const [mappingModelsError, setMappingModelsError] = useState<'unsupported' | null>(null);
   const [savingMappings, setSavingMappings] = useState(false);
 
   const [prefixProxyEditor, setPrefixProxyEditor] = useState<PrefixProxyEditorState | null>(null);
@@ -251,8 +256,105 @@ export function AuthFilesPage() {
   const excludedUnsupportedRef = useRef(false);
   const mappingsUnsupportedRef = useRef(false);
 
+  const normalizeProviderKey = (value: string) => value.trim().toLowerCase();
+
   const disableControls = connectionStatus !== 'connected';
 
+  useEffect(() => {
+    setPageSizeInput(String(pageSize));
+  }, [pageSize]);
+
+  const modelSourceFileOptions = useMemo(() => {
+    const normalizedProvider = normalizeProviderKey(mappingForm.provider);
+    const matching: string[] = [];
+    const others: string[] = [];
+    const seen = new Set<string>();
+
+    files.forEach((file) => {
+      const isRuntimeOnly = isRuntimeOnlyAuthFile(file);
+      const isAistudio = (file.type || '').toLowerCase() === 'aistudio';
+      const canShowModels = !isRuntimeOnly || isAistudio;
+      if (!canShowModels) return;
+
+      const fileName = String(file.name || '').trim();
+      if (!fileName) return;
+      if (seen.has(fileName)) return;
+      seen.add(fileName);
+
+      if (!normalizedProvider) {
+        matching.push(fileName);
+        return;
+      }
+
+      const typeKey = normalizeProviderKey(String(file.type || ''));
+      const providerKey = normalizeProviderKey(String(file.provider || ''));
+      const isMatch = typeKey === normalizedProvider || providerKey === normalizedProvider;
+      if (isMatch) {
+        matching.push(fileName);
+      } else {
+        others.push(fileName);
+      }
+    });
+
+    matching.sort((a, b) => a.localeCompare(b));
+    others.sort((a, b) => a.localeCompare(b));
+    return [...matching, ...others];
+  }, [files, mappingForm.provider]);
+
+  useEffect(() => {
+    if (!mappingModalOpen) return;
+
+    const fileName = mappingModelsFileName.trim();
+    if (!fileName) {
+      setMappingModelsList([]);
+      setMappingModelsError(null);
+      setMappingModelsLoading(false);
+      return;
+    }
+
+    const cached = modelsCacheRef.current.get(fileName);
+    if (cached) {
+      setMappingModelsList(cached);
+      setMappingModelsError(null);
+      setMappingModelsLoading(false);
+      return;
+    }
+
+    let cancelled = false;
+    setMappingModelsLoading(true);
+    setMappingModelsError(null);
+
+    authFilesApi
+      .getModelsForAuthFile(fileName)
+      .then((models) => {
+        if (cancelled) return;
+        modelsCacheRef.current.set(fileName, models);
+        setMappingModelsList(models);
+      })
+      .catch((err: unknown) => {
+        if (cancelled) return;
+        const errorMessage = err instanceof Error ? err.message : '';
+        if (
+          errorMessage.includes('404') ||
+          errorMessage.includes('not found') ||
+          errorMessage.includes('Not Found')
+        ) {
+          setMappingModelsList([]);
+          setMappingModelsError('unsupported');
+          return;
+        }
+        showNotification(`${t('notification.load_failed')}: ${errorMessage}`, 'error');
+      })
+      .finally(() => {
+        if (cancelled) return;
+        setMappingModelsLoading(false);
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [mappingModalOpen, mappingModelsFileName, showNotification, t]);
+
   const prefixProxyUpdatedText = useMemo(() => {
     if (!prefixProxyEditor?.json) return prefixProxyEditor?.rawText ?? '';
     const next: Record<string, unknown> = { ...prefixProxyEditor.json };
@@ -276,12 +378,39 @@ export function AuthFilesPage() {
     return prefixProxyUpdatedText !== prefixProxyEditor.originalText;
   }, [prefixProxyEditor?.json, prefixProxyEditor?.originalText, prefixProxyUpdatedText]);
 
-  const normalizeProviderKey = (value: string) => value.trim().toLowerCase();
+  const commitPageSizeInput = (rawValue: string) => {
+    const trimmed = rawValue.trim();
+    if (!trimmed) {
+      setPageSizeInput(String(pageSize));
+      return;
+    }
+
+    const value = Number(trimmed);
+    if (!Number.isFinite(value)) {
+      setPageSizeInput(String(pageSize));
+      return;
+    }
+
+    const next = clampCardPageSize(value);
+    setPageSize(next);
+    setPageSizeInput(String(next));
+    setPage(1);
+  };
 
   const handlePageSizeChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const value = event.currentTarget.valueAsNumber;
-    if (!Number.isFinite(value)) return;
-    setPageSize(clampCardPageSize(value));
+    const rawValue = event.currentTarget.value;
+    setPageSizeInput(rawValue);
+
+    const trimmed = rawValue.trim();
+    if (!trimmed) return;
+
+    const parsed = Number(trimmed);
+    if (!Number.isFinite(parsed)) return;
+
+    const rounded = Math.round(parsed);
+    if (rounded < MIN_CARD_PAGE_SIZE || rounded > MAX_CARD_PAGE_SIZE) return;
+
+    setPageSize(rounded);
     setPage(1);
   };
 
@@ -835,9 +964,18 @@ export function AuthFilesPage() {
     setModelsList([]);
     setModelsError(null);
     setModelsModalOpen(true);
+
+    const cached = modelsCacheRef.current.get(item.name);
+    if (cached) {
+      setModelsList(cached);
+      setModelsLoading(false);
+      return;
+    }
+
     setModelsLoading(true);
     try {
       const models = await authFilesApi.getModelsForAuthFile(item.name);
+      modelsCacheRef.current.set(item.name, models);
       setModelsList(models);
     } catch (err) {
       // 检测是否是 API 不支持的错误 (404 或特定错误消息)
@@ -984,10 +1122,30 @@ export function AuthFilesPage() {
       ? mappingProviderLookup.get(fallbackProvider.toLowerCase())
       : undefined;
     const mappings = lookupKey ? modelMappings[lookupKey] : [];
+    const providerValue = lookupKey || fallbackProvider;
+
+    const normalizedProviderKey = normalizeProviderKey(providerValue);
+    const defaultModelsFileName = files
+      .filter((file) => {
+        const isRuntimeOnly = isRuntimeOnlyAuthFile(file);
+        const isAistudio = (file.type || '').toLowerCase() === 'aistudio';
+        const canShowModels = !isRuntimeOnly || isAistudio;
+        if (!canShowModels) return false;
+        if (!normalizedProviderKey) return false;
+        const typeKey = normalizeProviderKey(String(file.type || ''));
+        const providerKey = normalizeProviderKey(String(file.provider || ''));
+        return typeKey === normalizedProviderKey || providerKey === normalizedProviderKey;
+      })
+      .map((file) => file.name)
+      .sort((a, b) => a.localeCompare(b))[0];
+
     setMappingForm({
-      provider: lookupKey || fallbackProvider,
+      provider: providerValue,
       mappings: normalizeMappingEntries(mappings),
     });
+    setMappingModelsFileName(defaultModelsFileName || '');
+    setMappingModelsList([]);
+    setMappingModelsError(null);
     setMappingModalOpen(true);
   };
 
@@ -1310,7 +1468,15 @@ export function AuthFilesPage() {
               {t('common.refresh')}
             </Button>
             <Button
-              variant="secondary"
+              size="sm"
+              onClick={handleUploadClick}
+              disabled={disableControls || uploading}
+              loading={uploading}
+            >
+              {t('auth_files.upload_button')}
+            </Button>
+            <Button
+              variant="danger"
               size="sm"
               onClick={handleDeleteAll}
               disabled={disableControls || loading || deletingAll}
@@ -1320,14 +1486,6 @@ export function AuthFilesPage() {
                 ? t('auth_files.delete_all_button')
                 : `${t('common.delete')} ${getTypeLabel(filter)}`}
             </Button>
-            <Button
-              size="sm"
-              onClick={handleUploadClick}
-              disabled={disableControls || uploading}
-              loading={uploading}
-            >
-              {t('auth_files.upload_button')}
-            </Button>
             <input
               ref={fileInputRef}
               type="file"
@@ -1365,8 +1523,14 @@ export function AuthFilesPage() {
                 min={MIN_CARD_PAGE_SIZE}
                 max={MAX_CARD_PAGE_SIZE}
                 step={1}
-                value={pageSize}
+                value={pageSizeInput}
                 onChange={handlePageSizeChange}
+                onBlur={(e) => commitPageSizeInput(e.currentTarget.value)}
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter') {
+                    e.currentTarget.blur();
+                  }
+                }}
               />
             </div>
           </div>
@@ -1815,6 +1979,33 @@ export function AuthFilesPage() {
             </div>
           )}
         </div>
+        <div className={styles.providerField}>
+          <Input
+            id="oauth-model-mapping-model-source"
+            list="oauth-model-mapping-model-source-options"
+            label={t('oauth_model_mappings.model_source_label')}
+            hint={
+              mappingModelsLoading
+                ? t('oauth_model_mappings.model_source_loading')
+                : mappingModelsError === 'unsupported'
+                  ? t('oauth_model_mappings.model_source_unsupported')
+                  : !mappingModelsFileName.trim()
+                    ? t('oauth_model_mappings.model_source_hint')
+                    : t('oauth_model_mappings.model_source_loaded', {
+                        count: mappingModelsList.length,
+                      })
+            }
+            placeholder={t('oauth_model_mappings.model_source_placeholder')}
+            value={mappingModelsFileName}
+            onChange={(e) => setMappingModelsFileName(e.target.value)}
+            disabled={savingMappings}
+          />
+          <datalist id="oauth-model-mapping-model-source-options">
+            {modelSourceFileOptions.map((fileName) => (
+              <option key={fileName} value={fileName} />
+            ))}
+          </datalist>
+        </div>
         <div className={styles.formGroup}>
           <label>{t('oauth_model_mappings.mappings_label')}</label>
           <div className="header-input-list">
@@ -1824,6 +2015,7 @@ export function AuthFilesPage() {
                   <input
                     className="input"
                     placeholder={t('oauth_model_mappings.mapping_name_placeholder')}
+                    list={mappingModelsList.length ? 'oauth-model-mapping-model-options' : undefined}
                     value={entry.name}
                     onChange={(e) => updateMappingEntry(index, 'name', e.target.value)}
                     disabled={savingMappings}
@@ -1868,6 +2060,13 @@ export function AuthFilesPage() {
               {t('oauth_model_mappings.add_mapping')}
             </Button>
           </div>
+          <datalist id="oauth-model-mapping-model-options">
+            {mappingModelsList.map((model) => (
+              <option key={model.id} value={model.id}>
+                {model.display_name && model.display_name !== model.id ? model.display_name : null}
+              </option>
+            ))}
+          </datalist>
           <div className={styles.hint}>{t('oauth_model_mappings.mappings_hint')}</div>
         </div>
       </Modal>
diff --git a/src/services/api/models.ts b/src/services/api/models.ts
index b6d9dd6..fc2299e 100644
--- a/src/services/api/models.ts
+++ b/src/services/api/models.ts
@@ -20,7 +20,7 @@ const normalizeBaseUrl = (baseUrl: string): string => {
 const buildModelsEndpoint = (baseUrl: string): string => {
   const normalized = normalizeBaseUrl(baseUrl);
   if (!normalized) return '';
-  return normalized.endsWith('/v1') ? `${normalized}/models` : `${normalized}/v1/models`;
+  return `${normalized}/models`;
 };
 
 export const modelsApi = {

From 268b92c59b584f3b70a810762c85423d4c7f40b7 Mon Sep 17 00:00:00 2001
From: LTbinglingfeng <tan13318527080@163.com>
Date: Sat, 24 Jan 2026 15:55:31 +0800
Subject: [PATCH 06/11] feat(ui): implement custom AutocompleteInput and
 refactor model mapping UI

---
 .../providers/AmpcodeSection/AmpcodeModal.tsx |  67 +++--
 src/components/ui/AutocompleteInput.tsx       | 175 +++++++++++
 src/pages/AiProvidersPage.tsx                 | 144 +++++----
 src/pages/AuthFilesPage.tsx                   | 282 +++++++++---------
 src/pages/LogsPage.tsx                        |  35 ++-
 src/pages/SystemPage.tsx                      |  21 +-
 6 files changed, 484 insertions(+), 240 deletions(-)
 create mode 100644 src/components/ui/AutocompleteInput.tsx

diff --git a/src/components/providers/AmpcodeSection/AmpcodeModal.tsx b/src/components/providers/AmpcodeSection/AmpcodeModal.tsx
index 3b201e5..876a272 100644
--- a/src/components/providers/AmpcodeSection/AmpcodeModal.tsx
+++ b/src/components/providers/AmpcodeSection/AmpcodeModal.tsx
@@ -21,7 +21,7 @@ interface AmpcodeModalProps {
 
 export function AmpcodeModal({ isOpen, disableControls, onClose, onBusyChange }: AmpcodeModalProps) {
   const { t } = useTranslation();
-  const { showNotification } = useNotificationStore();
+  const { showNotification, showConfirmation } = useNotificationStore();
   const config = useConfigStore((state) => state.config);
   const updateConfigValue = useConfigStore((state) => state.updateConfigValue);
   const clearCache = useConfigStore((state) => state.clearCache);
@@ -81,32 +81,34 @@ export function AmpcodeModal({ isOpen, disableControls, onClose, onBusyChange }:
   }, [clearCache, config?.ampcode, isOpen, onBusyChange, t, updateConfigValue]);
 
   const clearAmpcodeUpstreamApiKey = async () => {
-    if (!window.confirm(t('ai_providers.ampcode_clear_upstream_api_key_confirm'))) return;
-    setSaving(true);
-    setError('');
-    try {
-      await ampcodeApi.clearUpstreamApiKey();
-      const previous = config?.ampcode ?? {};
-      const next: AmpcodeConfig = { ...previous };
-      delete next.upstreamApiKey;
-      updateConfigValue('ampcode', next);
-      clearCache('ampcode');
-      showNotification(t('notification.ampcode_upstream_api_key_cleared'), 'success');
-    } catch (err: unknown) {
-      const message = getErrorMessage(err);
-      setError(message);
-      showNotification(`${t('notification.update_failed')}: ${message}`, 'error');
-    } finally {
-      setSaving(false);
-    }
+    showConfirmation({
+      title: t('ai_providers.ampcode_clear_upstream_api_key_title', { defaultValue: 'Clear Upstream API Key' }),
+      message: t('ai_providers.ampcode_clear_upstream_api_key_confirm'),
+      variant: 'danger',
+      confirmText: t('common.confirm'),
+      onConfirm: async () => {
+        setSaving(true);
+        setError('');
+        try {
+          await ampcodeApi.clearUpstreamApiKey();
+          const previous = config?.ampcode ?? {};
+          const next: AmpcodeConfig = { ...previous };
+          delete next.upstreamApiKey;
+          updateConfigValue('ampcode', next);
+          clearCache('ampcode');
+          showNotification(t('notification.ampcode_upstream_api_key_cleared'), 'success');
+        } catch (err: unknown) {
+          const message = getErrorMessage(err);
+          setError(message);
+          showNotification(`${t('notification.update_failed')}: ${message}`, 'error');
+        } finally {
+          setSaving(false);
+        }
+      },
+    });
   };
 
-  const saveAmpcode = async () => {
-    if (!loaded && mappingsDirty) {
-      const confirmed = window.confirm(t('ai_providers.ampcode_mappings_overwrite_confirm'));
-      if (!confirmed) return;
-    }
-
+  const performSaveAmpcode = async () => {
     setSaving(true);
     setError('');
     try {
@@ -173,6 +175,21 @@ export function AmpcodeModal({ isOpen, disableControls, onClose, onBusyChange }:
     }
   };
 
+  const saveAmpcode = async () => {
+    if (!loaded && mappingsDirty) {
+      showConfirmation({
+        title: t('ai_providers.ampcode_mappings_overwrite_title', { defaultValue: 'Overwrite Mappings' }),
+        message: t('ai_providers.ampcode_mappings_overwrite_confirm'),
+        variant: 'secondary', // Not dangerous, just a warning
+        confirmText: t('common.confirm'),
+        onConfirm: performSaveAmpcode,
+      });
+      return;
+    }
+
+    await performSaveAmpcode();
+  };
+
   return (
     <Modal
       open={isOpen}
diff --git a/src/components/ui/AutocompleteInput.tsx b/src/components/ui/AutocompleteInput.tsx
new file mode 100644
index 0000000..86c252c
--- /dev/null
+++ b/src/components/ui/AutocompleteInput.tsx
@@ -0,0 +1,175 @@
+import { useEffect, useRef, useState, type ChangeEvent, type KeyboardEvent, type ReactNode } from 'react';
+import { IconChevronDown } from './icons';
+
+interface AutocompleteInputProps {
+  label?: string;
+  value: string;
+  onChange: (value: string) => void;
+  options: string[] | { value: string; label?: string }[];
+  placeholder?: string;
+  disabled?: boolean;
+  hint?: string;
+  error?: string;
+  className?: string;
+  wrapperClassName?: string;
+  wrapperStyle?: React.CSSProperties;
+  id?: string;
+  rightElement?: ReactNode;
+}
+
+export function AutocompleteInput({
+  label,
+  value,
+  onChange,
+  options,
+  placeholder,
+  disabled,
+  hint,
+  error,
+  className = '',
+  wrapperClassName = '',
+  wrapperStyle,
+  id,
+  rightElement
+}: AutocompleteInputProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [highlightedIndex, setHighlightedIndex] = useState(-1);
+  const containerRef = useRef<HTMLDivElement>(null);
+  
+  const normalizedOptions = options.map(opt => 
+    typeof opt === 'string' ? { value: opt, label: opt } : { value: opt.value, label: opt.label || opt.value }
+  );
+
+  const filteredOptions = normalizedOptions.filter(opt => {
+    const v = value.toLowerCase();
+    return opt.value.toLowerCase().includes(v) || (opt.label && opt.label.toLowerCase().includes(v));
+  });
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
+        setIsOpen(false);
+      }
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
+
+  const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
+    onChange(e.target.value);
+    setIsOpen(true);
+    setHighlightedIndex(-1);
+  };
+
+  const handleSelect = (selectedValue: string) => {
+    onChange(selectedValue);
+    setIsOpen(false);
+  };
+
+  const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
+    if (disabled) return;
+
+    if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      if (!isOpen) {
+          setIsOpen(true);
+          return;
+      }
+      setHighlightedIndex(prev => 
+        prev < filteredOptions.length - 1 ? prev + 1 : prev
+      );
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      setHighlightedIndex(prev => prev > 0 ? prev - 1 : 0);
+    } else if (e.key === 'Enter') {
+      if (isOpen && highlightedIndex >= 0 && highlightedIndex < filteredOptions.length) {
+        e.preventDefault();
+        handleSelect(filteredOptions[highlightedIndex].value);
+      } else if (isOpen) {
+          e.preventDefault();
+          setIsOpen(false);
+      }
+    } else if (e.key === 'Escape') {
+      setIsOpen(false);
+    } else if (e.key === 'Tab') {
+      setIsOpen(false);
+    }
+  };
+
+  return (
+    <div className={`form-group ${wrapperClassName}`} ref={containerRef} style={wrapperStyle}>
+      {label && <label htmlFor={id}>{label}</label>}
+      <div style={{ position: 'relative' }}>
+        <input 
+            id={id}
+            className={`input ${className}`.trim()} 
+            value={value}
+            onChange={handleInputChange}
+            onFocus={() => setIsOpen(true)}
+            onKeyDown={handleKeyDown}
+            placeholder={placeholder}
+            disabled={disabled}
+            autoComplete="off"
+            style={{ paddingRight: 32 }}
+        />
+        <div 
+            style={{ 
+                position: 'absolute', 
+                right: 8, 
+                top: '50%', 
+                transform: 'translateY(-50%)',
+                display: 'flex',
+                alignItems: 'center',
+                pointerEvents: disabled ? 'none' : 'auto',
+                cursor: 'pointer',
+                height: '100%'
+            }}
+            onClick={() => !disabled && setIsOpen(!isOpen)}
+        >
+            {rightElement}
+            <IconChevronDown size={16} style={{ opacity: 0.5, marginLeft: 4 }} />
+        </div>
+
+        {isOpen && filteredOptions.length > 0 && !disabled && (
+            <div className="autocomplete-dropdown" style={{
+                position: 'absolute',
+                top: 'calc(100% + 4px)',
+                left: 0,
+                right: 0,
+                zIndex: 1000,
+                backgroundColor: 'var(--bg-secondary)',
+                border: '1px solid var(--border-color)',
+                borderRadius: 'var(--radius-md)',
+                maxHeight: 200,
+                overflowY: 'auto',
+                boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)'
+            }}>
+                {filteredOptions.map((opt, index) => (
+                    <div
+                        key={`${opt.value}-${index}`}
+                        onClick={() => handleSelect(opt.value)}
+                        style={{
+                            padding: '8px 12px',
+                            cursor: 'pointer',
+                            backgroundColor: index === highlightedIndex ? 'var(--bg-tertiary)' : 'transparent',
+                            color: 'var(--text-primary)',
+                            display: 'flex',
+                            flexDirection: 'column',
+                            fontSize: '0.9rem'
+                        }}
+                        onMouseEnter={() => setHighlightedIndex(index)}
+                    >
+                        <span style={{ fontWeight: 500 }}>{opt.value}</span>
+                        {opt.label && opt.label !== opt.value && (
+                            <span style={{ fontSize: '0.85em', color: 'var(--text-secondary)' }}>{opt.label}</span>
+                        )}
+                    </div>
+                ))}
+            </div>
+        )}
+      </div>
+      {hint && <div className="hint">{hint}</div>}
+      {error && <div className="error-box">{error}</div>}
+    </div>
+  );
+}
diff --git a/src/pages/AiProvidersPage.tsx b/src/pages/AiProvidersPage.tsx
index d437b9b..9b24f62 100644
--- a/src/pages/AiProvidersPage.tsx
+++ b/src/pages/AiProvidersPage.tsx
@@ -28,7 +28,7 @@ import styles from './AiProvidersPage.module.scss';
 
 export function AiProvidersPage() {
   const { t } = useTranslation();
-  const { showNotification } = useNotificationStore();
+  const { showNotification, showConfirmation } = useNotificationStore();
   const resolvedTheme = useThemeStore((state) => state.resolvedTheme);
   const connectionStatus = useAuthStore((state) => state.connectionStatus);
 
@@ -180,18 +180,25 @@ export function AiProvidersPage() {
   const deleteGemini = async (index: number) => {
     const entry = geminiKeys[index];
     if (!entry) return;
-    if (!window.confirm(t('ai_providers.gemini_delete_confirm'))) return;
-    try {
-      await providersApi.deleteGeminiKey(entry.apiKey);
-      const next = geminiKeys.filter((_, idx) => idx !== index);
-      setGeminiKeys(next);
-      updateConfigValue('gemini-api-key', next);
-      clearCache('gemini-api-key');
-      showNotification(t('notification.gemini_key_deleted'), 'success');
-    } catch (err: unknown) {
-      const message = getErrorMessage(err);
-      showNotification(`${t('notification.delete_failed')}: ${message}`, 'error');
-    }
+    showConfirmation({
+      title: t('ai_providers.gemini_delete_title', { defaultValue: 'Delete Gemini Key' }),
+      message: t('ai_providers.gemini_delete_confirm'),
+      variant: 'danger',
+      confirmText: t('common.confirm'),
+      onConfirm: async () => {
+        try {
+          await providersApi.deleteGeminiKey(entry.apiKey);
+          const next = geminiKeys.filter((_, idx) => idx !== index);
+          setGeminiKeys(next);
+          updateConfigValue('gemini-api-key', next);
+          clearCache('gemini-api-key');
+          showNotification(t('notification.gemini_key_deleted'), 'success');
+        } catch (err: unknown) {
+          const message = getErrorMessage(err);
+          showNotification(`${t('notification.delete_failed')}: ${message}`, 'error');
+        }
+      },
+    });
   };
 
   const setConfigEnabled = async (
@@ -352,27 +359,34 @@ export function AiProvidersPage() {
     const source = type === 'codex' ? codexConfigs : claudeConfigs;
     const entry = source[index];
     if (!entry) return;
-    if (!window.confirm(t(`ai_providers.${type}_delete_confirm`))) return;
-    try {
-      if (type === 'codex') {
-        await providersApi.deleteCodexConfig(entry.apiKey);
-        const next = codexConfigs.filter((_, idx) => idx !== index);
-        setCodexConfigs(next);
-        updateConfigValue('codex-api-key', next);
-        clearCache('codex-api-key');
-        showNotification(t('notification.codex_config_deleted'), 'success');
-      } else {
-        await providersApi.deleteClaudeConfig(entry.apiKey);
-        const next = claudeConfigs.filter((_, idx) => idx !== index);
-        setClaudeConfigs(next);
-        updateConfigValue('claude-api-key', next);
-        clearCache('claude-api-key');
-        showNotification(t('notification.claude_config_deleted'), 'success');
-      }
-    } catch (err: unknown) {
-      const message = getErrorMessage(err);
-      showNotification(`${t('notification.delete_failed')}: ${message}`, 'error');
-    }
+    showConfirmation({
+      title: t(`ai_providers.${type}_delete_title`, { defaultValue: `Delete ${type === 'codex' ? 'Codex' : 'Claude'} Config` }),
+      message: t(`ai_providers.${type}_delete_confirm`),
+      variant: 'danger',
+      confirmText: t('common.confirm'),
+      onConfirm: async () => {
+        try {
+          if (type === 'codex') {
+            await providersApi.deleteCodexConfig(entry.apiKey);
+            const next = codexConfigs.filter((_, idx) => idx !== index);
+            setCodexConfigs(next);
+            updateConfigValue('codex-api-key', next);
+            clearCache('codex-api-key');
+            showNotification(t('notification.codex_config_deleted'), 'success');
+          } else {
+            await providersApi.deleteClaudeConfig(entry.apiKey);
+            const next = claudeConfigs.filter((_, idx) => idx !== index);
+            setClaudeConfigs(next);
+            updateConfigValue('claude-api-key', next);
+            clearCache('claude-api-key');
+            showNotification(t('notification.claude_config_deleted'), 'success');
+          }
+        } catch (err: unknown) {
+          const message = getErrorMessage(err);
+          showNotification(`${t('notification.delete_failed')}: ${message}`, 'error');
+        }
+      },
+    });
   };
 
   const saveVertex = async (form: VertexFormState, editIndex: number | null) => {
@@ -427,18 +441,25 @@ export function AiProvidersPage() {
   const deleteVertex = async (index: number) => {
     const entry = vertexConfigs[index];
     if (!entry) return;
-    if (!window.confirm(t('ai_providers.vertex_delete_confirm'))) return;
-    try {
-      await providersApi.deleteVertexConfig(entry.apiKey);
-      const next = vertexConfigs.filter((_, idx) => idx !== index);
-      setVertexConfigs(next);
-      updateConfigValue('vertex-api-key', next);
-      clearCache('vertex-api-key');
-      showNotification(t('notification.vertex_config_deleted'), 'success');
-    } catch (err: unknown) {
-      const message = getErrorMessage(err);
-      showNotification(`${t('notification.delete_failed')}: ${message}`, 'error');
-    }
+    showConfirmation({
+      title: t('ai_providers.vertex_delete_title', { defaultValue: 'Delete Vertex Config' }),
+      message: t('ai_providers.vertex_delete_confirm'),
+      variant: 'danger',
+      confirmText: t('common.confirm'),
+      onConfirm: async () => {
+        try {
+          await providersApi.deleteVertexConfig(entry.apiKey);
+          const next = vertexConfigs.filter((_, idx) => idx !== index);
+          setVertexConfigs(next);
+          updateConfigValue('vertex-api-key', next);
+          clearCache('vertex-api-key');
+          showNotification(t('notification.vertex_config_deleted'), 'success');
+        } catch (err: unknown) {
+          const message = getErrorMessage(err);
+          showNotification(`${t('notification.delete_failed')}: ${message}`, 'error');
+        }
+      },
+    });
   };
 
   const saveOpenai = async (form: OpenAIFormState, editIndex: number | null) => {
@@ -485,18 +506,25 @@ export function AiProvidersPage() {
   const deleteOpenai = async (index: number) => {
     const entry = openaiProviders[index];
     if (!entry) return;
-    if (!window.confirm(t('ai_providers.openai_delete_confirm'))) return;
-    try {
-      await providersApi.deleteOpenAIProvider(entry.name);
-      const next = openaiProviders.filter((_, idx) => idx !== index);
-      setOpenaiProviders(next);
-      updateConfigValue('openai-compatibility', next);
-      clearCache('openai-compatibility');
-      showNotification(t('notification.openai_provider_deleted'), 'success');
-    } catch (err: unknown) {
-      const message = getErrorMessage(err);
-      showNotification(`${t('notification.delete_failed')}: ${message}`, 'error');
-    }
+    showConfirmation({
+      title: t('ai_providers.openai_delete_title', { defaultValue: 'Delete OpenAI Provider' }),
+      message: t('ai_providers.openai_delete_confirm'),
+      variant: 'danger',
+      confirmText: t('common.confirm'),
+      onConfirm: async () => {
+        try {
+          await providersApi.deleteOpenAIProvider(entry.name);
+          const next = openaiProviders.filter((_, idx) => idx !== index);
+          setOpenaiProviders(next);
+          updateConfigValue('openai-compatibility', next);
+          clearCache('openai-compatibility');
+          showNotification(t('notification.openai_provider_deleted'), 'success');
+        } catch (err: unknown) {
+          const message = getErrorMessage(err);
+          showNotification(`${t('notification.delete_failed')}: ${message}`, 'error');
+        }
+      },
+    });
   };
 
   const geminiModalIndex = modal?.type === 'gemini' ? modal.index : null;
diff --git a/src/pages/AuthFilesPage.tsx b/src/pages/AuthFilesPage.tsx
index 75491d0..d3d3ad2 100644
--- a/src/pages/AuthFilesPage.tsx
+++ b/src/pages/AuthFilesPage.tsx
@@ -6,6 +6,7 @@ import { Card } from '@/components/ui/Card';
 import { Button } from '@/components/ui/Button';
 import { LoadingSpinner } from '@/components/ui/LoadingSpinner';
 import { Input } from '@/components/ui/Input';
+import { AutocompleteInput } from '@/components/ui/AutocompleteInput';
 import { Modal } from '@/components/ui/Modal';
 import { EmptyState } from '@/components/ui/EmptyState';
 import { ToggleSwitch } from '@/components/ui/ToggleSwitch';
@@ -193,7 +194,7 @@ function resolveAuthFileStats(file: AuthFileItem, stats: KeyStats): KeyStatBucke
 
 export function AuthFilesPage() {
   const { t } = useTranslation();
-  const { showNotification } = useNotificationStore();
+  const { showNotification, showConfirmation } = useNotificationStore();
   const connectionStatus = useAuthStore((state) => state.connectionStatus);
   const resolvedTheme: ResolvedTheme = useThemeStore((state) => state.resolvedTheme);
 
@@ -689,18 +690,25 @@ export function AuthFilesPage() {
 
   // 删除单个文件
   const handleDelete = async (name: string) => {
-    if (!window.confirm(`${t('auth_files.delete_confirm')} "${name}" ?`)) return;
-    setDeleting(name);
-    try {
-      await authFilesApi.deleteFile(name);
-      showNotification(t('auth_files.delete_success'), 'success');
-      setFiles((prev) => prev.filter((item) => item.name !== name));
-    } catch (err: unknown) {
-      const errorMessage = err instanceof Error ? err.message : '';
-      showNotification(`${t('notification.delete_failed')}: ${errorMessage}`, 'error');
-    } finally {
-      setDeleting(null);
-    }
+    showConfirmation({
+      title: t('auth_files.delete_title', { defaultValue: 'Delete File' }),
+      message: `${t('auth_files.delete_confirm')} "${name}" ?`,
+      variant: 'danger',
+      confirmText: t('common.confirm'),
+      onConfirm: async () => {
+        setDeleting(name);
+        try {
+          await authFilesApi.deleteFile(name);
+          showNotification(t('auth_files.delete_success'), 'success');
+          setFiles((prev) => prev.filter((item) => item.name !== name));
+        } catch (err: unknown) {
+          const errorMessage = err instanceof Error ? err.message : '';
+          showNotification(`${t('notification.delete_failed')}: ${errorMessage}`, 'error');
+        } finally {
+          setDeleting(null);
+        }
+      },
+    });
   };
 
   // 删除全部（根据筛选类型）
@@ -711,60 +719,66 @@ export function AuthFilesPage() {
       ? t('auth_files.delete_filtered_confirm', { type: typeLabel })
       : t('auth_files.delete_all_confirm');
 
-    if (!window.confirm(confirmMessage)) return;
+    showConfirmation({
+      title: t('auth_files.delete_all_title', { defaultValue: 'Delete All Files' }),
+      message: confirmMessage,
+      variant: 'danger',
+      confirmText: t('common.confirm'),
+      onConfirm: async () => {
+        setDeletingAll(true);
+        try {
+          if (!isFiltered) {
+            // 删除全部
+            await authFilesApi.deleteAll();
+            showNotification(t('auth_files.delete_all_success'), 'success');
+            setFiles((prev) => prev.filter((file) => isRuntimeOnlyAuthFile(file)));
+          } else {
+            // 删除筛选类型的文件
+            const filesToDelete = files.filter((f) => f.type === filter && !isRuntimeOnlyAuthFile(f));
 
-    setDeletingAll(true);
-    try {
-      if (!isFiltered) {
-        // 删除全部
-        await authFilesApi.deleteAll();
-        showNotification(t('auth_files.delete_all_success'), 'success');
-        setFiles((prev) => prev.filter((file) => isRuntimeOnlyAuthFile(file)));
-      } else {
-        // 删除筛选类型的文件
-        const filesToDelete = files.filter((f) => f.type === filter && !isRuntimeOnlyAuthFile(f));
+            if (filesToDelete.length === 0) {
+              showNotification(t('auth_files.delete_filtered_none', { type: typeLabel }), 'info');
+              setDeletingAll(false);
+              return;
+            }
 
-        if (filesToDelete.length === 0) {
-          showNotification(t('auth_files.delete_filtered_none', { type: typeLabel }), 'info');
-          setDeletingAll(false);
-          return;
-        }
+            let success = 0;
+            let failed = 0;
+            const deletedNames: string[] = [];
 
-        let success = 0;
-        let failed = 0;
-        const deletedNames: string[] = [];
+            for (const file of filesToDelete) {
+              try {
+                await authFilesApi.deleteFile(file.name);
+                success++;
+                deletedNames.push(file.name);
+              } catch {
+                failed++;
+              }
+            }
 
-        for (const file of filesToDelete) {
-          try {
-            await authFilesApi.deleteFile(file.name);
-            success++;
-            deletedNames.push(file.name);
-          } catch {
-            failed++;
+            setFiles((prev) => prev.filter((f) => !deletedNames.includes(f.name)));
+
+            if (failed === 0) {
+              showNotification(
+                t('auth_files.delete_filtered_success', { count: success, type: typeLabel }),
+                'success'
+              );
+            } else {
+              showNotification(
+                t('auth_files.delete_filtered_partial', { success, failed, type: typeLabel }),
+                'warning'
+              );
+            }
+            setFilter('all');
           }
+        } catch (err: unknown) {
+          const errorMessage = err instanceof Error ? err.message : '';
+          showNotification(`${t('notification.delete_failed')}: ${errorMessage}`, 'error');
+        } finally {
+          setDeletingAll(false);
         }
-
-        setFiles((prev) => prev.filter((f) => !deletedNames.includes(f.name)));
-
-        if (failed === 0) {
-          showNotification(
-            t('auth_files.delete_filtered_success', { count: success, type: typeLabel }),
-            'success'
-          );
-        } else {
-          showNotification(
-            t('auth_files.delete_filtered_partial', { success, failed, type: typeLabel }),
-            'warning'
-          );
-        }
-        setFilter('all');
-      }
-    } catch (err: unknown) {
-      const errorMessage = err instanceof Error ? err.message : '';
-      showNotification(`${t('notification.delete_failed')}: ${errorMessage}`, 'error');
-    } finally {
-      setDeletingAll(false);
-    }
+      },
+    });
   };
 
   // 下载文件
@@ -1067,37 +1081,44 @@ export function AuthFilesPage() {
 
   const deleteExcluded = async (provider: string) => {
     const providerLabel = provider.trim() || provider;
-    if (!window.confirm(t('oauth_excluded.delete_confirm', { provider: providerLabel }))) return;
-    const providerKey = normalizeProviderKey(provider);
-    if (!providerKey) {
-      showNotification(t('oauth_excluded.provider_required'), 'error');
-      return;
-    }
-    try {
-      await authFilesApi.deleteOauthExcludedEntry(providerKey);
-      await loadExcluded();
-      showNotification(t('oauth_excluded.delete_success'), 'success');
-    } catch (err: unknown) {
-      try {
-        const current = await authFilesApi.getOauthExcludedModels();
-        const next: Record<string, string[]> = {};
-        Object.entries(current).forEach(([key, models]) => {
-          if (normalizeProviderKey(key) === providerKey) return;
-          next[key] = models;
-        });
-        await authFilesApi.replaceOauthExcludedModels(next);
-        await loadExcluded();
-        showNotification(t('oauth_excluded.delete_success'), 'success');
-      } catch (fallbackErr: unknown) {
-        const errorMessage =
-          fallbackErr instanceof Error
-            ? fallbackErr.message
-            : err instanceof Error
-              ? err.message
-              : '';
-        showNotification(`${t('oauth_excluded.delete_failed')}: ${errorMessage}`, 'error');
-      }
-    }
+    showConfirmation({
+      title: t('oauth_excluded.delete_title', { defaultValue: 'Delete Exclusion' }),
+      message: t('oauth_excluded.delete_confirm', { provider: providerLabel }),
+      variant: 'danger',
+      confirmText: t('common.confirm'),
+      onConfirm: async () => {
+        const providerKey = normalizeProviderKey(provider);
+        if (!providerKey) {
+          showNotification(t('oauth_excluded.provider_required'), 'error');
+          return;
+        }
+        try {
+          await authFilesApi.deleteOauthExcludedEntry(providerKey);
+          await loadExcluded();
+          showNotification(t('oauth_excluded.delete_success'), 'success');
+        } catch (err: unknown) {
+          try {
+            const current = await authFilesApi.getOauthExcludedModels();
+            const next: Record<string, string[]> = {};
+            Object.entries(current).forEach(([key, models]) => {
+              if (normalizeProviderKey(key) === providerKey) return;
+              next[key] = models;
+            });
+            await authFilesApi.replaceOauthExcludedModels(next);
+            await loadExcluded();
+            showNotification(t('oauth_excluded.delete_success'), 'success');
+          } catch (fallbackErr: unknown) {
+            const errorMessage =
+              fallbackErr instanceof Error
+                ? fallbackErr.message
+                : err instanceof Error
+                  ? err.message
+                  : '';
+            showNotification(`${t('oauth_excluded.delete_failed')}: ${errorMessage}`, 'error');
+          }
+        }
+      },
+    });
   };
 
   // OAuth 模型映射相关方法
@@ -1218,15 +1239,22 @@ export function AuthFilesPage() {
   };
 
   const deleteModelMappings = async (provider: string) => {
-    if (!window.confirm(t('oauth_model_mappings.delete_confirm', { provider }))) return;
-    try {
-      await authFilesApi.deleteOauthModelMappings(provider);
-      await loadModelMappings();
-      showNotification(t('oauth_model_mappings.delete_success'), 'success');
-    } catch (err: unknown) {
-      const errorMessage = err instanceof Error ? err.message : '';
-      showNotification(`${t('oauth_model_mappings.delete_failed')}: ${errorMessage}`, 'error');
-    }
+    showConfirmation({
+      title: t('oauth_model_mappings.delete_title', { defaultValue: 'Delete Mappings' }),
+      message: t('oauth_model_mappings.delete_confirm', { provider }),
+      variant: 'danger',
+      confirmText: t('common.confirm'),
+      onConfirm: async () => {
+        try {
+          await authFilesApi.deleteOauthModelMappings(provider);
+          await loadModelMappings();
+          showNotification(t('oauth_model_mappings.delete_success'), 'success');
+        } catch (err: unknown) {
+          const errorMessage = err instanceof Error ? err.message : '';
+          showNotification(`${t('oauth_model_mappings.delete_failed')}: ${errorMessage}`, 'error');
+        }
+      },
+    });
   };
 
   // 渲染标签筛选器
@@ -1877,20 +1905,15 @@ export function AuthFilesPage() {
         }
       >
         <div className={styles.providerField}>
-          <Input
+          <AutocompleteInput
             id="oauth-excluded-provider"
-            list="oauth-excluded-provider-options"
             label={t('oauth_excluded.provider_label')}
             hint={t('oauth_excluded.provider_hint')}
             placeholder={t('oauth_excluded.provider_placeholder')}
             value={excludedForm.provider}
-            onChange={(e) => setExcludedForm((prev) => ({ ...prev, provider: e.target.value }))}
+            onChange={(val) => setExcludedForm((prev) => ({ ...prev, provider: val }))}
+            options={providerOptions}
           />
-          <datalist id="oauth-excluded-provider-options">
-            {providerOptions.map((provider) => (
-              <option key={provider} value={provider} />
-            ))}
-          </datalist>
           {providerOptions.length > 0 && (
             <div className={styles.providerTagList}>
               {providerOptions.map((provider) => {
@@ -1945,20 +1968,15 @@ export function AuthFilesPage() {
         }
       >
         <div className={styles.providerField}>
-          <Input
+          <AutocompleteInput
             id="oauth-model-alias-provider"
-            list="oauth-model-alias-provider-options"
             label={t('oauth_model_mappings.provider_label')}
             hint={t('oauth_model_mappings.provider_hint')}
             placeholder={t('oauth_model_mappings.provider_placeholder')}
             value={mappingForm.provider}
-            onChange={(e) => setMappingForm((prev) => ({ ...prev, provider: e.target.value }))}
+            onChange={(val) => setMappingForm((prev) => ({ ...prev, provider: val }))}
+            options={providerOptions}
           />
-          <datalist id="oauth-model-alias-provider-options">
-            {providerOptions.map((provider) => (
-              <option key={provider} value={provider} />
-            ))}
-          </datalist>
           {providerOptions.length > 0 && (
             <div className={styles.providerTagList}>
               {providerOptions.map((provider) => {
@@ -1980,9 +1998,8 @@ export function AuthFilesPage() {
           )}
         </div>
         <div className={styles.providerField}>
-          <Input
+          <AutocompleteInput
             id="oauth-model-mapping-model-source"
-            list="oauth-model-mapping-model-source-options"
             label={t('oauth_model_mappings.model_source_label')}
             hint={
               mappingModelsLoading
@@ -1997,14 +2014,10 @@ export function AuthFilesPage() {
             }
             placeholder={t('oauth_model_mappings.model_source_placeholder')}
             value={mappingModelsFileName}
-            onChange={(e) => setMappingModelsFileName(e.target.value)}
+            onChange={(val) => setMappingModelsFileName(val)}
             disabled={savingMappings}
+            options={modelSourceFileOptions}
           />
-          <datalist id="oauth-model-mapping-model-source-options">
-            {modelSourceFileOptions.map((fileName) => (
-              <option key={fileName} value={fileName} />
-            ))}
-          </datalist>
         </div>
         <div className={styles.formGroup}>
           <label>{t('oauth_model_mappings.mappings_label')}</label>
@@ -2012,13 +2025,16 @@ export function AuthFilesPage() {
             {(mappingForm.mappings.length ? mappingForm.mappings : [buildEmptyMappingEntry()]).map(
               (entry, index) => (
                 <div key={entry.id} className={styles.mappingRow}>
-                  <input
-                    className="input"
+                  <AutocompleteInput
+                    wrapperStyle={{ flex: 1, marginBottom: 0 }}
                     placeholder={t('oauth_model_mappings.mapping_name_placeholder')}
-                    list={mappingModelsList.length ? 'oauth-model-mapping-model-options' : undefined}
                     value={entry.name}
-                    onChange={(e) => updateMappingEntry(index, 'name', e.target.value)}
+                    onChange={(val) => updateMappingEntry(index, 'name', val)}
                     disabled={savingMappings}
+                    options={mappingModelsList.map((m) => ({
+                      value: m.id,
+                      label: m.display_name && m.display_name !== m.id ? m.display_name : undefined,
+                    }))}
                   />
                   <span className={styles.mappingSeparator}>→</span>
                   <input
@@ -2027,6 +2043,7 @@ export function AuthFilesPage() {
                     value={entry.alias}
                     onChange={(e) => updateMappingEntry(index, 'alias', e.target.value)}
                     disabled={savingMappings}
+                    style={{ flex: 1 }}
                   />
                   <div className={styles.mappingFork}>
                     <ToggleSwitch
@@ -2060,13 +2077,6 @@ export function AuthFilesPage() {
               {t('oauth_model_mappings.add_mapping')}
             </Button>
           </div>
-          <datalist id="oauth-model-mapping-model-options">
-            {mappingModelsList.map((model) => (
-              <option key={model.id} value={model.id}>
-                {model.display_name && model.display_name !== model.id ? model.display_name : null}
-              </option>
-            ))}
-          </datalist>
           <div className={styles.hint}>{t('oauth_model_mappings.mappings_hint')}</div>
         </div>
       </Modal>
diff --git a/src/pages/LogsPage.tsx b/src/pages/LogsPage.tsx
index 7e58d65..2953ee9 100644
--- a/src/pages/LogsPage.tsx
+++ b/src/pages/LogsPage.tsx
@@ -371,7 +371,7 @@ type TabType = 'logs' | 'errors';
 
 export function LogsPage() {
   const { t } = useTranslation();
-  const { showNotification } = useNotificationStore();
+  const { showNotification, showConfirmation } = useNotificationStore();
   const connectionStatus = useAuthStore((state) => state.connectionStatus);
   const requestLogEnabled = useConfigStore((state) => state.config?.requestLog ?? false);
 
@@ -478,19 +478,26 @@ export function LogsPage() {
   useHeaderRefresh(() => loadLogs(false));
 
   const clearLogs = async () => {
-    if (!window.confirm(t('logs.clear_confirm'))) return;
-    try {
-      await logsApi.clearLogs();
-      setLogState({ buffer: [], visibleFrom: 0 });
-      latestTimestampRef.current = 0;
-      showNotification(t('logs.clear_success'), 'success');
-    } catch (err: unknown) {
-      const message = getErrorMessage(err);
-      showNotification(
-        `${t('notification.delete_failed')}${message ? `: ${message}` : ''}`,
-        'error'
-      );
-    }
+    showConfirmation({
+      title: t('logs.clear_confirm_title', { defaultValue: 'Clear Logs' }),
+      message: t('logs.clear_confirm'),
+      variant: 'danger',
+      confirmText: t('common.confirm'),
+      onConfirm: async () => {
+        try {
+          await logsApi.clearLogs();
+          setLogState({ buffer: [], visibleFrom: 0 });
+          latestTimestampRef.current = 0;
+          showNotification(t('logs.clear_success'), 'success');
+        } catch (err: unknown) {
+          const message = getErrorMessage(err);
+          showNotification(
+            `${t('notification.delete_failed')}${message ? `: ${message}` : ''}`,
+            'error'
+          );
+        }
+      },
+    });
   };
 
   const downloadLogs = () => {
diff --git a/src/pages/SystemPage.tsx b/src/pages/SystemPage.tsx
index 445b34b..d601c45 100644
--- a/src/pages/SystemPage.tsx
+++ b/src/pages/SystemPage.tsx
@@ -11,7 +11,7 @@ import styles from './SystemPage.module.scss';
 
 export function SystemPage() {
   const { t, i18n } = useTranslation();
-  const { showNotification } = useNotificationStore();
+  const { showNotification, showConfirmation } = useNotificationStore();
   const auth = useAuthStore();
   const config = useConfigStore((state) => state.config);
   const fetchConfig = useConfigStore((state) => state.fetchConfig);
@@ -106,12 +106,19 @@ export function SystemPage() {
   };
 
   const handleClearLoginStorage = () => {
-    if (!window.confirm(t('system_info.clear_login_confirm'))) return;
-    auth.logout();
-    if (typeof localStorage === 'undefined') return;
-    const keysToRemove = [STORAGE_KEY_AUTH, 'isLoggedIn', 'apiBase', 'apiUrl', 'managementKey'];
-    keysToRemove.forEach((key) => localStorage.removeItem(key));
-    showNotification(t('notification.login_storage_cleared'), 'success');
+    showConfirmation({
+      title: t('system_info.clear_login_title', { defaultValue: 'Clear Login Storage' }),
+      message: t('system_info.clear_login_confirm'),
+      variant: 'danger',
+      confirmText: t('common.confirm'),
+      onConfirm: () => {
+        auth.logout();
+        if (typeof localStorage === 'undefined') return;
+        const keysToRemove = [STORAGE_KEY_AUTH, 'isLoggedIn', 'apiBase', 'apiUrl', 'managementKey'];
+        keysToRemove.forEach((key) => localStorage.removeItem(key));
+        showNotification(t('notification.login_storage_cleared'), 'success');
+      },
+    });
   };
 
   useEffect(() => {

From 6bdc87aed6b71d20f77824ce0bb511437d6e8baf Mon Sep 17 00:00:00 2001
From: LTbinglingfeng <tan13318527080@163.com>
Date: Sat, 24 Jan 2026 16:35:59 +0800
Subject: [PATCH 07/11] fix(quota): unify Gemini CLI quota groups (Flash/Pro
 series)

---
 src/components/common/PageTransition.tsx | 33 ++++++-----
 src/types/quota.ts                       |  1 +
 src/utils/quota/builders.ts              | 64 ++++++++++++++------
 src/utils/quota/constants.ts             | 74 +++++++++++-------------
 4 files changed, 100 insertions(+), 72 deletions(-)

diff --git a/src/components/common/PageTransition.tsx b/src/components/common/PageTransition.tsx
index 6c5c133..eb0e82c 100644
--- a/src/components/common/PageTransition.tsx
+++ b/src/components/common/PageTransition.tsx
@@ -22,11 +22,7 @@ type Layer = {
 
 type TransitionDirection = 'forward' | 'backward';
 
-export function PageTransition({
-  render,
-  getRouteOrder,
-  scrollContainerRef,
-}: PageTransitionProps) {
+export function PageTransition({ render, getRouteOrder, scrollContainerRef }: PageTransitionProps) {
   const location = useLocation();
   const currentLayerRef = useRef<HTMLDivElement>(null);
   const exitingLayerRef = useRef<HTMLDivElement>(null);
@@ -71,16 +67,25 @@ export function PageTransition({
           : 'backward';
 
     transitionDirectionRef.current = nextDirection;
-    setLayers((prev) => {
-      const prevCurrent = prev[prev.length - 1];
-      return [
-        prevCurrent
-          ? { ...prevCurrent, status: 'exiting' }
-          : { key: location.key, location, status: 'exiting' },
-        { key: location.key, location, status: 'current' },
-      ];
+
+    let cancelled = false;
+    queueMicrotask(() => {
+      if (cancelled) return;
+      setLayers((prev) => {
+        const prevCurrent = prev[prev.length - 1];
+        return [
+          prevCurrent
+            ? { ...prevCurrent, status: 'exiting' }
+            : { key: location.key, location, status: 'exiting' },
+          { key: location.key, location, status: 'current' },
+        ];
+      });
+      setIsAnimating(true);
     });
-    setIsAnimating(true);
+
+    return () => {
+      cancelled = true;
+    };
   }, [
     isAnimating,
     location,
diff --git a/src/types/quota.ts b/src/types/quota.ts
index 5fb2779..3e335a0 100644
--- a/src/types/quota.ts
+++ b/src/types/quota.ts
@@ -55,6 +55,7 @@ export interface AntigravityQuotaGroupDefinition {
 export interface GeminiCliQuotaGroupDefinition {
   id: string;
   label: string;
+  preferredModelId?: string;
   modelIds: string[];
 }
 
diff --git a/src/utils/quota/builders.ts b/src/utils/quota/builders.ts
index 7ec80f6..39d325f 100644
--- a/src/utils/quota/builders.ts
+++ b/src/utils/quota/builders.ts
@@ -8,7 +8,7 @@ import type {
   AntigravityQuotaInfo,
   AntigravityModelsPayload,
   GeminiCliParsedBucket,
-  GeminiCliQuotaBucketState
+  GeminiCliQuotaBucketState,
 } from '@/types';
 import { ANTIGRAVITY_QUOTA_GROUPS, GEMINI_CLI_GROUP_LOOKUP } from './constants';
 import { normalizeQuotaFraction } from './parsers';
@@ -35,7 +35,19 @@ export function buildGeminiCliQuotaBuckets(
 ): GeminiCliQuotaBucketState[] {
   if (buckets.length === 0) return [];
 
-  const grouped = new Map<string, GeminiCliQuotaBucketState & { modelIds: string[] }>();
+  type GeminiCliQuotaBucketGroup = {
+    id: string;
+    label: string;
+    tokenType: string | null;
+    modelIds: string[];
+    preferredModelId?: string;
+    preferredBucket?: GeminiCliParsedBucket;
+    fallbackRemainingFraction: number | null;
+    fallbackRemainingAmount: number | null;
+    fallbackResetTime: string | undefined;
+  };
+
+  const grouped = new Map<string, GeminiCliQuotaBucketGroup>();
 
   buckets.forEach((bucket) => {
     if (isIgnoredGeminiCliModel(bucket.modelId)) return;
@@ -47,37 +59,55 @@ export function buildGeminiCliQuotaBuckets(
     const existing = grouped.get(mapKey);
 
     if (!existing) {
+      const preferredModelId = group?.preferredModelId;
+      const preferredBucket =
+        preferredModelId && bucket.modelId === preferredModelId ? bucket : undefined;
       grouped.set(mapKey, {
         id: `${groupId}${tokenKey ? `-${tokenKey}` : ''}`,
         label,
-        remainingFraction: bucket.remainingFraction,
-        remainingAmount: bucket.remainingAmount,
-        resetTime: bucket.resetTime,
         tokenType: bucket.tokenType,
-        modelIds: [bucket.modelId]
+        modelIds: [bucket.modelId],
+        preferredModelId,
+        preferredBucket,
+        fallbackRemainingFraction: bucket.remainingFraction,
+        fallbackRemainingAmount: bucket.remainingAmount,
+        fallbackResetTime: bucket.resetTime,
       });
       return;
     }
 
-    existing.remainingFraction = minNullableNumber(
-      existing.remainingFraction,
+    existing.fallbackRemainingFraction = minNullableNumber(
+      existing.fallbackRemainingFraction,
       bucket.remainingFraction
     );
-    existing.remainingAmount = minNullableNumber(existing.remainingAmount, bucket.remainingAmount);
-    existing.resetTime = pickEarlierResetTime(existing.resetTime, bucket.resetTime);
+    existing.fallbackRemainingAmount = minNullableNumber(
+      existing.fallbackRemainingAmount,
+      bucket.remainingAmount
+    );
+    existing.fallbackResetTime = pickEarlierResetTime(existing.fallbackResetTime, bucket.resetTime);
     existing.modelIds.push(bucket.modelId);
+
+    if (existing.preferredModelId && bucket.modelId === existing.preferredModelId) {
+      existing.preferredBucket = bucket;
+    }
   });
 
   return Array.from(grouped.values()).map((bucket) => {
     const uniqueModelIds = Array.from(new Set(bucket.modelIds));
+    const preferred = bucket.preferredBucket;
+    const remainingFraction = preferred
+      ? preferred.remainingFraction
+      : bucket.fallbackRemainingFraction;
+    const remainingAmount = preferred ? preferred.remainingAmount : bucket.fallbackRemainingAmount;
+    const resetTime = preferred ? preferred.resetTime : bucket.fallbackResetTime;
     return {
       id: bucket.id,
       label: bucket.label,
-      remainingFraction: bucket.remainingFraction,
-      remainingAmount: bucket.remainingAmount,
-      resetTime: bucket.resetTime,
+      remainingFraction,
+      remainingAmount,
+      resetTime,
       tokenType: bucket.tokenType,
-      modelIds: uniqueModelIds
+      modelIds: uniqueModelIds,
     };
   });
 }
@@ -101,7 +131,7 @@ export function getAntigravityQuotaInfo(entry?: AntigravityQuotaInfo): {
   return {
     remainingFraction,
     resetTime,
-    displayName
+    displayName,
   };
 }
 
@@ -150,7 +180,7 @@ export function buildAntigravityQuotaGroups(
           id,
           remainingFraction,
           resetTime: info.resetTime,
-          displayName: info.displayName
+          displayName: info.displayName,
         };
       })
       .filter((entry): entry is NonNullable<typeof entry> => entry !== null);
@@ -168,7 +198,7 @@ export function buildAntigravityQuotaGroups(
       label,
       models: quotaEntries.map((entry) => entry.id),
       remainingFraction,
-      resetTime
+      resetTime,
     };
   };
 
diff --git a/src/utils/quota/constants.ts b/src/utils/quota/constants.ts
index 259ebbc..330af65 100644
--- a/src/utils/quota/constants.ts
+++ b/src/utils/quota/constants.ts
@@ -5,64 +5,64 @@
 import type {
   AntigravityQuotaGroupDefinition,
   GeminiCliQuotaGroupDefinition,
-  TypeColorSet
+  TypeColorSet,
 } from '@/types';
 
 // Theme colors for type badges
 export const TYPE_COLORS: Record<string, TypeColorSet> = {
   qwen: {
     light: { bg: '#e8f5e9', text: '#2e7d32' },
-    dark: { bg: '#1b5e20', text: '#81c784' }
+    dark: { bg: '#1b5e20', text: '#81c784' },
   },
   gemini: {
     light: { bg: '#e3f2fd', text: '#1565c0' },
-    dark: { bg: '#0d47a1', text: '#64b5f6' }
+    dark: { bg: '#0d47a1', text: '#64b5f6' },
   },
   'gemini-cli': {
     light: { bg: '#e7efff', text: '#1e4fa3' },
-    dark: { bg: '#1c3f73', text: '#a8c7ff' }
+    dark: { bg: '#1c3f73', text: '#a8c7ff' },
   },
   aistudio: {
     light: { bg: '#f0f2f5', text: '#2f343c' },
-    dark: { bg: '#373c42', text: '#cfd3db' }
+    dark: { bg: '#373c42', text: '#cfd3db' },
   },
   claude: {
     light: { bg: '#fce4ec', text: '#c2185b' },
-    dark: { bg: '#880e4f', text: '#f48fb1' }
+    dark: { bg: '#880e4f', text: '#f48fb1' },
   },
   codex: {
     light: { bg: '#fff3e0', text: '#ef6c00' },
-    dark: { bg: '#e65100', text: '#ffb74d' }
+    dark: { bg: '#e65100', text: '#ffb74d' },
   },
   antigravity: {
     light: { bg: '#e0f7fa', text: '#006064' },
-    dark: { bg: '#004d40', text: '#80deea' }
+    dark: { bg: '#004d40', text: '#80deea' },
   },
   iflow: {
     light: { bg: '#f3e5f5', text: '#7b1fa2' },
-    dark: { bg: '#4a148c', text: '#ce93d8' }
+    dark: { bg: '#4a148c', text: '#ce93d8' },
   },
   empty: {
     light: { bg: '#f5f5f5', text: '#616161' },
-    dark: { bg: '#424242', text: '#bdbdbd' }
+    dark: { bg: '#424242', text: '#bdbdbd' },
   },
   unknown: {
     light: { bg: '#f0f0f0', text: '#666666', border: '1px dashed #999999' },
-    dark: { bg: '#3a3a3a', text: '#aaaaaa', border: '1px dashed #666666' }
-  }
+    dark: { bg: '#3a3a3a', text: '#aaaaaa', border: '1px dashed #666666' },
+  },
 };
 
 // Antigravity API configuration
 export const ANTIGRAVITY_QUOTA_URLS = [
   'https://daily-cloudcode-pa.googleapis.com/v1internal:fetchAvailableModels',
   'https://daily-cloudcode-pa.sandbox.googleapis.com/v1internal:fetchAvailableModels',
-  'https://cloudcode-pa.googleapis.com/v1internal:fetchAvailableModels'
+  'https://cloudcode-pa.googleapis.com/v1internal:fetchAvailableModels',
 ];
 
 export const ANTIGRAVITY_REQUEST_HEADERS = {
   Authorization: 'Bearer $TOKEN$',
   'Content-Type': 'application/json',
-  'User-Agent': 'antigravity/1.11.5 windows/amd64'
+  'User-Agent': 'antigravity/1.11.5 windows/amd64',
 };
 
 export const ANTIGRAVITY_QUOTA_GROUPS: AntigravityQuotaGroupDefinition[] = [
@@ -73,40 +73,40 @@ export const ANTIGRAVITY_QUOTA_GROUPS: AntigravityQuotaGroupDefinition[] = [
       'claude-sonnet-4-5-thinking',
       'claude-opus-4-5-thinking',
       'claude-sonnet-4-5',
-      'gpt-oss-120b-medium'
-    ]
+      'gpt-oss-120b-medium',
+    ],
   },
   {
     id: 'gemini-3-pro',
     label: 'Gemini 3 Pro',
-    identifiers: ['gemini-3-pro-high', 'gemini-3-pro-low']
+    identifiers: ['gemini-3-pro-high', 'gemini-3-pro-low'],
   },
   {
     id: 'gemini-2-5-flash',
     label: 'Gemini 2.5 Flash',
-    identifiers: ['gemini-2.5-flash', 'gemini-2.5-flash-thinking']
+    identifiers: ['gemini-2.5-flash', 'gemini-2.5-flash-thinking'],
   },
   {
     id: 'gemini-2-5-flash-lite',
     label: 'Gemini 2.5 Flash Lite',
-    identifiers: ['gemini-2.5-flash-lite']
+    identifiers: ['gemini-2.5-flash-lite'],
   },
   {
     id: 'gemini-2-5-cu',
     label: 'Gemini 2.5 CU',
-    identifiers: ['rev19-uic3-1p']
+    identifiers: ['rev19-uic3-1p'],
   },
   {
     id: 'gemini-3-flash',
     label: 'Gemini 3 Flash',
-    identifiers: ['gemini-3-flash']
+    identifiers: ['gemini-3-flash'],
   },
   {
     id: 'gemini-image',
     label: 'gemini-3-pro-image',
     identifiers: ['gemini-3-pro-image'],
-    labelFromModel: true
-  }
+    labelFromModel: true,
+  },
 ];
 
 // Gemini CLI API configuration
@@ -115,30 +115,22 @@ export const GEMINI_CLI_QUOTA_URL =
 
 export const GEMINI_CLI_REQUEST_HEADERS = {
   Authorization: 'Bearer $TOKEN$',
-  'Content-Type': 'application/json'
+  'Content-Type': 'application/json',
 };
 
 export const GEMINI_CLI_QUOTA_GROUPS: GeminiCliQuotaGroupDefinition[] = [
   {
-    id: 'gemini-2-5-flash-series',
-    label: 'Gemini 2.5 Flash Series',
-    modelIds: ['gemini-2.5-flash', 'gemini-2.5-flash-lite']
+    id: 'gemini-flash-series',
+    label: 'Gemini Flash Series',
+    preferredModelId: 'gemini-3-flash-preview',
+    modelIds: ['gemini-3-flash-preview', 'gemini-2.5-flash', 'gemini-2.5-flash-lite'],
   },
   {
-    id: 'gemini-2-5-pro',
-    label: 'Gemini 2.5 Pro',
-    modelIds: ['gemini-2.5-pro']
+    id: 'gemini-pro-series',
+    label: 'Gemini Pro Series',
+    preferredModelId: 'gemini-3-pro-preview',
+    modelIds: ['gemini-3-pro-preview', 'gemini-2.5-pro'],
   },
-  {
-    id: 'gemini-3-pro-preview',
-    label: 'Gemini 3 Pro Preview',
-    modelIds: ['gemini-3-pro-preview']
-  },
-  {
-    id: 'gemini-3-flash-preview',
-    label: 'Gemini 3 Flash Preview',
-    modelIds: ['gemini-3-flash-preview']
-  }
 ];
 
 export const GEMINI_CLI_GROUP_LOOKUP = new Map(
@@ -155,5 +147,5 @@ export const CODEX_USAGE_URL = 'https://chatgpt.com/backend-api/wham/usage';
 export const CODEX_REQUEST_HEADERS = {
   Authorization: 'Bearer $TOKEN$',
   'Content-Type': 'application/json',
-  'User-Agent': 'codex_cli_rs/0.76.0 (Debian 13.0.0; x86_64) WindowsTerminal'
+  'User-Agent': 'codex_cli_rs/0.76.0 (Debian 13.0.0; x86_64) WindowsTerminal',
 };

From 2539710075042801ad1ce8c18a50d2e42c753c36 Mon Sep 17 00:00:00 2001
From: LTbinglingfeng <tan13318527080@163.com>
Date: Sat, 24 Jan 2026 17:17:29 +0800
Subject: [PATCH 08/11] fix(status-bar): extend health monitor window to 200
 minutes

---
 src/utils/usage.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/utils/usage.ts b/src/utils/usage.ts
index 48ac4df..a01e3c4 100644
--- a/src/utils/usage.ts
+++ b/src/utils/usage.ts
@@ -903,11 +903,11 @@ export function calculateStatusBarData(
   authIndexFilter?: number
 ): StatusBarData {
   const BLOCK_COUNT = 20;
-  const BLOCK_DURATION_MS = 5 * 60 * 1000; // 5 minutes
-  const HOUR_MS = 60 * 60 * 1000;
+  const BLOCK_DURATION_MS = 10 * 60 * 1000; // 10 minutes
+  const WINDOW_MS = 200 * 60 * 1000; // 200 minutes
 
   const now = Date.now();
-  const hourAgo = now - HOUR_MS;
+  const windowStart = now - WINDOW_MS;
 
   // Initialize blocks
   const blockStats: Array<{ success: number; failure: number }> = Array.from(
@@ -921,7 +921,7 @@ export function calculateStatusBarData(
   // Filter and bucket the usage details
   usageDetails.forEach((detail) => {
     const timestamp = Date.parse(detail.timestamp);
-    if (Number.isNaN(timestamp) || timestamp < hourAgo || timestamp > now) {
+    if (Number.isNaN(timestamp) || timestamp < windowStart || timestamp > now) {
       return;
     }
 

From f22d392b21ee88629731d55cf22b9cc2d5adabd0 Mon Sep 17 00:00:00 2001
From: LTbinglingfeng <tan13318527080@163.com>
Date: Sat, 24 Jan 2026 18:04:59 +0800
Subject: [PATCH 09/11] fix

---
 src/services/api/models.ts | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/services/api/models.ts b/src/services/api/models.ts
index fc2299e..7441af0 100644
--- a/src/services/api/models.ts
+++ b/src/services/api/models.ts
@@ -23,9 +23,18 @@ const buildModelsEndpoint = (baseUrl: string): string => {
   return `${normalized}/models`;
 };
 
+const buildV1ModelsEndpoint = (baseUrl: string): string => {
+  const normalized = normalizeBaseUrl(baseUrl);
+  if (!normalized) return '';
+  return `${normalized}/v1/models`;
+};
+
 export const modelsApi = {
+  /**
+   * Fetch available models from /v1/models endpoint (for system info page)
+   */
   async fetchModels(baseUrl: string, apiKey?: string, headers: Record<string, string> = {}) {
-    const endpoint = buildModelsEndpoint(baseUrl);
+    const endpoint = buildV1ModelsEndpoint(baseUrl);
     if (!endpoint) {
       throw new Error('Invalid base url');
     }
@@ -42,6 +51,9 @@ export const modelsApi = {
     return normalizeModelList(payload, { dedupe: true });
   },
 
+  /**
+   * Fetch models from /models endpoint via api-call (for OpenAI provider discovery)
+   */
   async fetchModelsViaApiCall(
     baseUrl: string,
     apiKey?: string,

From 76e9eb4aa0fcea5d65ccbbff3cd11a0ec47c2e84 Mon Sep 17 00:00:00 2001
From: LTbinglingfeng <tan13318527080@163.com>
Date: Sun, 25 Jan 2026 00:01:15 +0800
Subject: [PATCH 10/11] feat(auth-files): add disabled state styling for file
 cards

---
 src/pages/AuthFilesPage.module.scss | 10 ++++++++++
 src/pages/AuthFilesPage.tsx         | 27 +++++++++++++++------------
 2 files changed, 25 insertions(+), 12 deletions(-)

diff --git a/src/pages/AuthFilesPage.module.scss b/src/pages/AuthFilesPage.module.scss
index 26ccbc5..08dbd5c 100644
--- a/src/pages/AuthFilesPage.module.scss
+++ b/src/pages/AuthFilesPage.module.scss
@@ -446,6 +446,16 @@
   }
 }
 
+.fileCardDisabled {
+  opacity: 0.6;
+
+  &:hover {
+    transform: none;
+    box-shadow: none;
+    border-color: var(--border-color);
+  }
+}
+
 .cardHeader {
   display: flex;
   align-items: center;
diff --git a/src/pages/AuthFilesPage.tsx b/src/pages/AuthFilesPage.tsx
index d3d3ad2..58b2eb3 100644
--- a/src/pages/AuthFilesPage.tsx
+++ b/src/pages/AuthFilesPage.tsx
@@ -1349,19 +1349,22 @@ export function AuthFilesPage() {
   };
 
   // 渲染单个认证文件卡片
-  const renderFileCard = (item: AuthFileItem) => {
-    const fileStats = resolveAuthFileStats(item, keyStats);
-    const isRuntimeOnly = isRuntimeOnlyAuthFile(item);
-    const isAistudio = (item.type || '').toLowerCase() === 'aistudio';
-    const showModelsButton = !isRuntimeOnly || isAistudio;
-    const typeColor = getTypeColor(item.type || 'unknown');
+	  const renderFileCard = (item: AuthFileItem) => {
+	    const fileStats = resolveAuthFileStats(item, keyStats);
+	    const isRuntimeOnly = isRuntimeOnlyAuthFile(item);
+	    const isAistudio = (item.type || '').toLowerCase() === 'aistudio';
+	    const showModelsButton = !isRuntimeOnly || isAistudio;
+	    const typeColor = getTypeColor(item.type || 'unknown');
 
-    return (
-      <div key={item.name} className={styles.fileCard}>
-        <div className={styles.cardHeader}>
-          <span
-            className={styles.typeBadge}
-            style={{
+	    return (
+	      <div
+	        key={item.name}
+	        className={`${styles.fileCard} ${item.disabled ? styles.fileCardDisabled : ''}`}
+	      >
+	        <div className={styles.cardHeader}>
+	          <span
+	            className={styles.typeBadge}
+	            style={{
               backgroundColor: typeColor.bg,
               color: typeColor.text,
               ...(typeColor.border ? { border: typeColor.border } : {}),

From 034c086e31c09de53643e341009cae67c0d2395b Mon Sep 17 00:00:00 2001
From: hkfires <10558748+hkfires@users.noreply.github.com>
Date: Sun, 25 Jan 2026 11:29:34 +0800
Subject: [PATCH 11/11] feat(usage): show per-model success/failure counts

---
 src/components/usage/ModelStatsCard.tsx | 12 +++++++++-
 src/pages/UsagePage.module.scss         | 12 ++++++++++
 src/utils/usage.ts                      | 31 +++++++++++++++++++++----
 3 files changed, 49 insertions(+), 6 deletions(-)

diff --git a/src/components/usage/ModelStatsCard.tsx b/src/components/usage/ModelStatsCard.tsx
index 859fa16..763cf10 100644
--- a/src/components/usage/ModelStatsCard.tsx
+++ b/src/components/usage/ModelStatsCard.tsx
@@ -6,6 +6,8 @@ import styles from '@/pages/UsagePage.module.scss';
 export interface ModelStat {
   model: string;
   requests: number;
+  successCount: number;
+  failureCount: number;
   tokens: number;
   cost: number;
 }
@@ -38,7 +40,15 @@ export function ModelStatsCard({ modelStats, loading, hasPrices }: ModelStatsCar
               {modelStats.map((stat) => (
                 <tr key={stat.model}>
                   <td className={styles.modelCell}>{stat.model}</td>
-                  <td>{stat.requests.toLocaleString()}</td>
+                  <td>
+                    <span className={styles.requestCountCell}>
+                      <span>{stat.requests.toLocaleString()}</span>
+                      <span className={styles.requestBreakdown}>
+                        (<span className={styles.statSuccess}>{stat.successCount.toLocaleString()}</span>{' '}
+                        <span className={styles.statFailure}>{stat.failureCount.toLocaleString()}</span>)
+                      </span>
+                    </span>
+                  </td>
                   <td>{formatTokensInMillions(stat.tokens)}</td>
                   {hasPrices && <td>{stat.cost > 0 ? formatUsd(stat.cost) : '--'}</td>}
                 </tr>
diff --git a/src/pages/UsagePage.module.scss b/src/pages/UsagePage.module.scss
index 962913a..bce9d85 100644
--- a/src/pages/UsagePage.module.scss
+++ b/src/pages/UsagePage.module.scss
@@ -456,6 +456,18 @@
   word-break: break-all;
 }
 
+.requestCountCell {
+  display: inline-flex;
+  align-items: baseline;
+  gap: 6px;
+  font-variant-numeric: tabular-nums;
+}
+
+.requestBreakdown {
+  color: var(--text-secondary);
+  white-space: nowrap;
+}
+
 // Pricing Section (80%比例)
 .pricingSection {
   display: flex;
diff --git a/src/utils/usage.ts b/src/utils/usage.ts
index a01e3c4..48bf20c 100644
--- a/src/utils/usage.ts
+++ b/src/utils/usage.ts
@@ -579,6 +579,8 @@ export function getApiStats(usageData: any, modelPrices: Record<string, ModelPri
 export function getModelStats(usageData: any, modelPrices: Record<string, ModelPrice>): Array<{
   model: string;
   requests: number;
+  successCount: number;
+  failureCount: number;
   tokens: number;
   cost: number;
 }> {
@@ -586,20 +588,39 @@ export function getModelStats(usageData: any, modelPrices: Record<string, ModelP
     return [];
   }
 
-  const modelMap = new Map<string, { requests: number; tokens: number; cost: number }>();
+  const modelMap = new Map<string, { requests: number; successCount: number; failureCount: number; tokens: number; cost: number }>();
 
   Object.values(usageData.apis as Record<string, any>).forEach(apiData => {
     const models = apiData?.models || {};
     Object.entries(models as Record<string, any>).forEach(([modelName, modelData]) => {
-      const existing = modelMap.get(modelName) || { requests: 0, tokens: 0, cost: 0 };
+      const existing = modelMap.get(modelName) || { requests: 0, successCount: 0, failureCount: 0, tokens: 0, cost: 0 };
       existing.requests += modelData.total_requests || 0;
       existing.tokens += modelData.total_tokens || 0;
 
+      const details = Array.isArray(modelData.details) ? modelData.details : [];
+
       const price = modelPrices[modelName];
-      if (price) {
-        const details = Array.isArray(modelData.details) ? modelData.details : [];
+
+      const hasExplicitCounts =
+        typeof modelData.success_count === 'number' || typeof modelData.failure_count === 'number';
+      if (hasExplicitCounts) {
+        existing.successCount += Number(modelData.success_count) || 0;
+        existing.failureCount += Number(modelData.failure_count) || 0;
+      }
+
+      if (details.length > 0 && (!hasExplicitCounts || price)) {
         details.forEach((detail: any) => {
-          existing.cost += calculateCost({ ...detail, __modelName: modelName }, modelPrices);
+          if (!hasExplicitCounts) {
+            if (detail?.failed === true) {
+              existing.failureCount += 1;
+            } else {
+              existing.successCount += 1;
+            }
+          }
+
+          if (price) {
+            existing.cost += calculateCost({ ...detail, __modelName: modelName }, modelPrices);
+          }
         });
       }
       modelMap.set(modelName, existing);