style(sidebar): redesign sidebar icons with sharper visual languag

fix(auth): clear usage stats store on logout

src/components/config/DiffModal.tsx

@@ -50,7 +50,7 @@ function computeUnifiedDiff(original: string, modified: string): DiffResult {
   let totalAdditions = 0;
   let totalDeletions = 0;
 
-  const hunks: Hunk[] = chunks.map((chunk) => {
+  const hunks: Hunk[] = chunks.map((chunk: Chunk) => {
     const lines: UnifiedLine[] = [];
 
     const hasDel = chunk.fromA < chunk.toA;

src/components/layout/MainLayout.tsx

@@ -13,15 +13,15 @@ import { Button } from '@/components/ui/Button';
 import { PageTransition } from '@/components/common/PageTransition';
 import { MainRoutes } from '@/router/MainRoutes';
 import {
-  IconBot,
-  IconChartLine,
-  IconFileText,
-  IconInfo,
-  IconLayoutDashboard,
-  IconScrollText,
-  IconSettings,
-  IconShield,
-  IconTimer,
+  IconSidebarAuthFiles,
+  IconSidebarConfig,
+  IconSidebarDashboard,
+  IconSidebarLogs,
+  IconSidebarOauth,
+  IconSidebarProviders,
+  IconSidebarQuota,
+  IconSidebarSystem,
+  IconSidebarUsage,
 } from '@/components/ui/icons';
 import { INLINE_LOGO_JPEG } from '@/assets/logoInline';
 import {
@@ -35,17 +35,18 @@ import { versionApi } from '@/services/api';
 import { triggerHeaderRefresh } from '@/hooks/useHeaderRefresh';
 import { LANGUAGE_LABEL_KEYS, LANGUAGE_ORDER } from '@/utils/constants';
 import { isSupportedLanguage } from '@/utils/language';
+import type { Theme } from '@/types';
 
 const sidebarIcons: Record<string, ReactNode> = {
-  dashboard: <IconLayoutDashboard size={18} />,
-  aiProviders: <IconBot size={18} />,
-  authFiles: <IconFileText size={18} />,
-  oauth: <IconShield size={18} />,
-  quota: <IconTimer size={18} />,
-  usage: <IconChartLine size={18} />,
-  config: <IconSettings size={18} />,
-  logs: <IconScrollText size={18} />,
-  system: <IconInfo size={18} />,
+  dashboard: <IconSidebarDashboard size={18} />,
+  aiProviders: <IconSidebarProviders size={18} />,
+  authFiles: <IconSidebarAuthFiles size={18} />,
+  oauth: <IconSidebarOauth size={18} />,
+  quota: <IconSidebarQuota size={18} />,
+  usage: <IconSidebarUsage size={18} />,
+  config: <IconSidebarConfig size={18} />,
+  logs: <IconSidebarLogs size={18} />,
+  system: <IconSidebarSystem size={18} />,
 };
 
 // Header action icons - smaller size for header buttons
@@ -117,6 +118,12 @@ const headerIcons = {
       <path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9z" />
     </svg>
   ),
+  whiteTheme: (
+    <svg {...headerIconProps}>
+      <circle cx="12" cy="12" r="7" />
+      <circle cx="12" cy="12" r="3" fill="currentColor" stroke="none" />
+    </svg>
+  ),
   autoTheme: (
     <svg {...headerIconProps}>
       <defs>
@@ -125,7 +132,13 @@ const headerIcons = {
         </clipPath>
       </defs>
       <circle cx="12" cy="12" r="4" />
-      <circle cx="12" cy="12" r="4" clipPath="url(#mainLayoutAutoThemeSunLeftHalf)" fill="currentColor" />
+      <circle
+        cx="12"
+        cy="12"
+        r="4"
+        clipPath="url(#mainLayoutAutoThemeSunLeftHalf)"
+        fill="currentColor"
+      />
       <path d="M12 2v2" />
       <path d="M12 20v2" />
       <path d="M4.93 4.93l1.41 1.41" />
@@ -145,6 +158,57 @@ const headerIcons = {
   ),
 };
 
+const THEME_CARDS: Array<{
+  key: Theme;
+  labelKey: string;
+  colors: { bg: string; card: string; border: string; text: string; textMuted: string };
+}> = [
+  {
+    key: 'auto',
+    labelKey: 'theme.auto',
+    colors: {
+      bg: 'linear-gradient(135deg, #faf9f5 0 50%, #151412 50% 100%)',
+      card: 'linear-gradient(135deg, #f0eee8 0 50%, #1d1b18 50% 100%)',
+      border: '#bdb6ae',
+      text: '#2d2a26',
+      textMuted: 'linear-gradient(135deg, #a29c95 0 50%, #9c958d 50% 100%)',
+    },
+  },
+  {
+    key: 'white',
+    labelKey: 'theme.white',
+    colors: {
+      bg: '#ffffff',
+      card: '#ffffff',
+      border: '#e5e5e5',
+      text: '#2d2a26',
+      textMuted: '#a29c95',
+    },
+  },
+  {
+    key: 'light',
+    labelKey: 'theme.light',
+    colors: {
+      bg: '#faf9f5',
+      card: '#f0eee8',
+      border: '#e3e1db',
+      text: '#2d2a26',
+      textMuted: '#a29c95',
+    },
+  },
+  {
+    key: 'dark',
+    labelKey: 'theme.dark',
+    colors: {
+      bg: '#151412',
+      card: '#1d1b18',
+      border: '#3a3530',
+      text: '#f6f4f1',
+      textMuted: '#9c958d',
+    },
+  },
+];
+
 const parseVersionSegments = (version?: string | null) => {
   if (!version) return null;
   const cleaned = version.trim().replace(/^v/i, '');
@@ -186,7 +250,7 @@ export function MainLayout() {
   const clearCache = useConfigStore((state) => state.clearCache);
 
   const theme = useThemeStore((state) => state.theme);
-  const cycleTheme = useThemeStore((state) => state.cycleTheme);
+  const setTheme = useThemeStore((state) => state.setTheme);
   const language = useLanguageStore((state) => state.language);
   const setLanguage = useLanguageStore((state) => state.setLanguage);
 
@@ -194,9 +258,11 @@ export function MainLayout() {
   const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
   const [checkingVersion, setCheckingVersion] = useState(false);
   const [languageMenuOpen, setLanguageMenuOpen] = useState(false);
+  const [themeMenuOpen, setThemeMenuOpen] = useState(false);
   const [brandExpanded, setBrandExpanded] = useState(true);
   const contentRef = useRef<HTMLDivElement | null>(null);
   const languageMenuRef = useRef<HTMLDivElement | null>(null);
+  const themeMenuRef = useRef<HTMLDivElement | null>(null);
   const brandCollapseTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
   const headerRef = useRef<HTMLElement | null>(null);
 
@@ -304,6 +370,32 @@ export function MainLayout() {
     };
   }, [languageMenuOpen]);
 
+  useEffect(() => {
+    if (!themeMenuOpen) {
+      return;
+    }
+
+    const handlePointerDown = (event: MouseEvent) => {
+      if (!themeMenuRef.current?.contains(event.target as Node)) {
+        setThemeMenuOpen(false);
+      }
+    };
+
+    const handleEscape = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        setThemeMenuOpen(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handlePointerDown);
+    document.addEventListener('keydown', handleEscape);
+
+    return () => {
+      document.removeEventListener('mousedown', handlePointerDown);
+      document.removeEventListener('keydown', handleEscape);
+    };
+  }, [themeMenuOpen]);
+
   const handleBrandClick = useCallback(() => {
     if (!brandExpanded) {
       setBrandExpanded(true);
@@ -319,8 +411,22 @@ export function MainLayout() {
 
   const toggleLanguageMenu = useCallback(() => {
     setLanguageMenuOpen((prev) => !prev);
+    setThemeMenuOpen(false);
   }, []);
 
+  const toggleThemeMenu = useCallback(() => {
+    setThemeMenuOpen((prev) => !prev);
+    setLanguageMenuOpen(false);
+  }, []);
+
+  const handleThemeSelect = useCallback(
+    (nextTheme: Theme) => {
+      setTheme(nextTheme);
+      setThemeMenuOpen(false);
+    },
+    [setTheme]
+  );
+
   const handleLanguageSelect = useCallback(
     (nextLanguage: string) => {
       if (!isSupportedLanguage(nextLanguage)) {
@@ -338,7 +444,6 @@ export function MainLayout() {
     });
   }, [fetchConfig]);
 
-
   const statusClass =
     connectionStatus === 'connected'
       ? 'success'
@@ -421,7 +526,7 @@ export function MainLayout() {
     clearCache();
     const results = await Promise.allSettled([
       fetchConfig(undefined, true),
-      triggerHeaderRefresh()
+      triggerHeaderRefresh(),
     ]);
     const rejected = results.find((result) => result.status === 'rejected');
     if (rejected && rejected.status === 'rejected') {
@@ -536,7 +641,10 @@ export function MainLayout() {
             >
               {headerIcons.update}
             </Button>
-            <div className={`language-menu ${languageMenuOpen ? 'open' : ''}`} ref={languageMenuRef}>
+            <div
+              className={`language-menu ${languageMenuOpen ? 'open' : ''}`}
+              ref={languageMenuRef}
+            >
               <Button
                 variant="ghost"
                 size="sm"
@@ -549,7 +657,11 @@ export function MainLayout() {
                 {headerIcons.language}
               </Button>
               {languageMenuOpen && (
-                <div className="notification entering language-menu-popover" role="menu" aria-label={t('language.switch')}>
+                <div
+                  className="notification entering language-menu-popover"
+                  role="menu"
+                  aria-label={t('language.switch')}
+                >
                   {LANGUAGE_ORDER.map((lang) => (
                     <button
                       key={lang}
@@ -566,13 +678,79 @@ export function MainLayout() {
                 </div>
               )}
             </div>
-            <Button variant="ghost" size="sm" onClick={cycleTheme} title={t('theme.switch')}>
-              {theme === 'auto'
-                ? headerIcons.autoTheme
-                : theme === 'dark'
-                  ? headerIcons.moon
-                  : headerIcons.sun}
-            </Button>
+            <div className={`theme-menu ${themeMenuOpen ? 'open' : ''}`} ref={themeMenuRef}>
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={toggleThemeMenu}
+                title={t('theme.switch')}
+                aria-label={t('theme.switch')}
+                aria-haspopup="menu"
+                aria-expanded={themeMenuOpen}
+              >
+                {theme === 'auto'
+                  ? headerIcons.autoTheme
+                  : theme === 'dark'
+                    ? headerIcons.moon
+                    : theme === 'white'
+                      ? headerIcons.whiteTheme
+                      : headerIcons.sun}
+              </Button>
+              {themeMenuOpen && (
+                <div
+                  className="notification entering theme-menu-popover"
+                  role="menu"
+                  aria-label={t('theme.switch')}
+                >
+                  {THEME_CARDS.map((tc) => (
+                    <button
+                      key={tc.key}
+                      type="button"
+                      className={`theme-card ${theme === tc.key ? 'active' : ''}`}
+                      onClick={() => handleThemeSelect(tc.key)}
+                      role="menuitemradio"
+                      aria-checked={theme === tc.key}
+                    >
+                      <div
+                        className="theme-card-preview"
+                        style={{
+                          background: tc.colors.bg,
+                          border: `1px solid ${tc.colors.border}`,
+                        }}
+                      >
+                        <div
+                          className="theme-card-header"
+                          style={{
+                            background: tc.colors.card,
+                            borderBottom: `1px solid ${tc.colors.border}`,
+                          }}
+                        />
+                        <div className="theme-card-body">
+                          <div
+                            className="theme-card-sidebar"
+                            style={{
+                              background: tc.colors.card,
+                              borderRight: `1px solid ${tc.colors.border}`,
+                            }}
+                          />
+                          <div className="theme-card-content" style={{ background: tc.colors.bg }}>
+                            <div
+                              className="theme-card-line"
+                              style={{ background: tc.colors.textMuted }}
+                            />
+                            <div
+                              className="theme-card-line short"
+                              style={{ background: tc.colors.textMuted }}
+                            />
+                          </div>
+                        </div>
+                      </div>
+                      <span className="theme-card-label">{t(tc.labelKey)}</span>
+                    </button>
+                  ))}
+                </div>
+              )}
+            </div>
             <Button variant="ghost" size="sm" onClick={logout} title={t('header.logout')}>
               {headerIcons.logout}
             </Button>

src/components/providers/VertexSection/VertexSection.tsx

@@ -2,6 +2,7 @@ import { Fragment, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Button } from '@/components/ui/Button';
 import { Card } from '@/components/ui/Card';
+import { ToggleSwitch } from '@/components/ui/ToggleSwitch';
 import iconVertex from '@/assets/icons/vertex.svg';
 import type { ProviderKeyConfig } from '@/types';
 import { maskApiKey } from '@/utils/format';
@@ -14,7 +15,7 @@ import {
 import styles from '@/pages/AiProvidersPage.module.scss';
 import { ProviderList } from '../ProviderList';
 import { ProviderStatusBar } from '../ProviderStatusBar';
-import { getStatsBySource } from '../utils';
+import { getStatsBySource, hasDisableAllModelsRule } from '../utils';
 
 interface VertexSectionProps {
   configs: ProviderKeyConfig[];
@@ -26,6 +27,7 @@ interface VertexSectionProps {
   onAdd: () => void;
   onEdit: (index: number) => void;
   onDelete: (index: number) => void;
+  onToggle: (index: number, enabled: boolean) => void;
 }
 
 export function VertexSection({
@@ -38,9 +40,11 @@ export function VertexSection({
   onAdd,
   onEdit,
   onDelete,
+  onToggle,
 }: VertexSectionProps) {
   const { t } = useTranslation();
   const actionsDisabled = disableControls || loading || isSwitching;
+  const toggleDisabled = disableControls || loading || isSwitching;
 
   const statusBarCache = useMemo(() => {
     const cache = new Map<string, ReturnType<typeof calculateStatusBarData>>();
@@ -84,9 +88,19 @@ export function VertexSection({
           onEdit={onEdit}
           onDelete={onDelete}
           actionsDisabled={actionsDisabled}
+          getRowDisabled={(item) => hasDisableAllModelsRule(item.excludedModels)}
+          renderExtraActions={(item, index) => (
+            <ToggleSwitch
+              label={t('ai_providers.config_toggle_label')}
+              checked={!hasDisableAllModelsRule(item.excludedModels)}
+              disabled={toggleDisabled}
+              onChange={(value) => void onToggle(index, value)}
+            />
+          )}
           renderContent={(item, index) => {
             const stats = getStatsBySource(item.apiKey, keyStats, item.prefix);
             const headerEntries = Object.entries(item.headers || {});
+            const configDisabled = hasDisableAllModelsRule(item.excludedModels);
             const excludedModels = item.excludedModels ?? [];
             const statusData = statusBarCache.get(item.apiKey) || calculateStatusBarData([]);
 
@@ -126,6 +140,11 @@ export function VertexSection({
                     ))}
                   </div>
                 )}
+                {configDisabled && (
+                  <div className="status-badge warning" style={{ marginTop: 8, marginBottom: 0 }}>
+                    {t('ai_providers.config_disabled_badge')}
+                  </div>
+                )}
                 {item.models?.length ? (
                   <div className={styles.modelTagList}>
                     <span className={styles.modelCountLabel}>

src/components/quota/quotaConfigs.ts

@@ -675,11 +675,16 @@ const buildClaudeQuotaWindows = (
   return windows;
 };
 
-const CLAUDE_PLAN_TYPE_MAP: Record<string, string> = {
-  default_claude_max_5x: 'plan_max5',
-  default_claude_max_20x: 'plan_max20',
-  default_claude_pro: 'plan_pro',
-  default_claude_ai: 'plan_free',
+const normalizeFlagValue = (value: unknown): boolean | undefined => {
+  if (value === undefined || value === null) return undefined;
+  if (typeof value === 'boolean') return value;
+  if (typeof value === 'number') return value !== 0;
+  if (typeof value === 'string') {
+    const trimmed = value.trim().toLowerCase();
+    if (['true', '1', 'yes', 'y', 'on'].includes(trimmed)) return true;
+    if (['false', '0', 'no', 'n', 'off'].includes(trimmed)) return false;
+  }
+  return undefined;
 };
 
 const parseClaudeProfilePayload = (payload: unknown): ClaudeProfileResponse | null => {
@@ -702,10 +707,15 @@ const parseClaudeProfilePayload = (payload: unknown): ClaudeProfileResponse | nu
 const resolveClaudePlanType = (profile: ClaudeProfileResponse | null): string | null => {
   if (!profile) return null;
 
-  const tier = normalizeStringValue(profile.organization?.rate_limit_tier);
-  if (!tier) return null;
+  const hasClaudeMax = normalizeFlagValue(profile.account?.has_claude_max);
+  if (hasClaudeMax) return 'plan_max';
 
-  return CLAUDE_PLAN_TYPE_MAP[tier] ?? 'plan_unknown';
+  const hasClaudePro = normalizeFlagValue(profile.account?.has_claude_pro);
+  if (hasClaudePro) return 'plan_pro';
+
+  if (hasClaudeMax === false && hasClaudePro === false) return 'plan_free';
+
+  return null;
 };
 
 const fetchClaudeQuota = async (

src/components/ui/SelectionCheckbox.module.scss

@@ -0,0 +1,87 @@
+@use '../../styles/variables' as *;
+
+.root {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: $spacing-sm;
+  cursor: pointer;
+  user-select: none;
+}
+
+.disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  border: 0;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+.box {
+  width: 22px;
+  height: 22px;
+  flex-shrink: 0;
+  border-radius: 7px;
+  border: 1px solid var(--border-color);
+  background: color-mix(in srgb, var(--bg-secondary) 92%, transparent);
+  color: var(--primary-contrast, #fff);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  transition:
+    border-color $transition-fast,
+    background-color $transition-fast,
+    box-shadow $transition-fast,
+    transform $transition-fast;
+}
+
+.root:hover .box {
+  border-color: var(--primary-color);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 16%, transparent);
+}
+
+.root:active .box {
+  transform: scale(0.95);
+}
+
+.disabled:hover .box {
+  border-color: var(--border-color);
+  box-shadow: none;
+}
+
+.disabled:active .box {
+  transform: none;
+}
+
+.input:focus-visible + .box {
+  border-color: var(--primary-color);
+  box-shadow:
+    0 0 0 3px color-mix(in srgb, var(--primary-color) 16%, transparent),
+    0 0 0 1px color-mix(in srgb, var(--primary-color) 50%, transparent);
+}
+
+.boxChecked {
+  border-color: var(--primary-color);
+  background: var(--primary-color);
+}
+
+.boxChecked svg {
+  display: block;
+  stroke-width: 2.4;
+}
+
+.label {
+  color: var(--text-primary);
+  font-size: 14px;
+  font-weight: 500;
+}

src/components/ui/SelectionCheckbox.tsx

@@ -0,0 +1,50 @@
+import type { ChangeEvent, ReactNode } from 'react';
+import { IconCheck } from './icons';
+import styles from './SelectionCheckbox.module.scss';
+
+interface SelectionCheckboxProps {
+  checked: boolean;
+  onChange: (value: boolean) => void;
+  label?: ReactNode;
+  ariaLabel?: string;
+  title?: string;
+  disabled?: boolean;
+  className?: string;
+  labelClassName?: string;
+}
+
+export function SelectionCheckbox({
+  checked,
+  onChange,
+  label,
+  ariaLabel,
+  title,
+  disabled = false,
+  className,
+  labelClassName,
+}: SelectionCheckboxProps) {
+  const rootClassName = [styles.root, disabled ? styles.disabled : '', className]
+    .filter(Boolean)
+    .join(' ');
+  const boxClassName = [styles.box, checked ? styles.boxChecked : ''].filter(Boolean).join(' ');
+  const textClassName = [styles.label, labelClassName].filter(Boolean).join(' ');
+
+  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+    onChange(event.target.checked);
+  };
+
+  return (
+    <label className={rootClassName} title={title}>
+      <input
+        className={styles.input}
+        type="checkbox"
+        checked={checked}
+        onChange={handleChange}
+        aria-label={ariaLabel}
+        disabled={disabled}
+      />
+      <span className={boxClassName}>{checked ? <IconCheck size={12} /> : null}</span>
+      {label ? <span className={textClassName}>{label}</span> : null}
+    </label>
+  );
+}

src/components/ui/icons.tsx

@@ -16,7 +16,15 @@ const baseSvgProps: SVGProps<SVGSVGElement> = {
   strokeLinecap: 'round',
   strokeLinejoin: 'round',
   'aria-hidden': 'true',
-  focusable: 'false'
+  focusable: 'false',
+};
+
+const sidebarSvgProps: SVGProps<SVGSVGElement> = {
+  ...baseSvgProps,
+  strokeWidth: 1.72,
+  strokeLinecap: 'square',
+  strokeLinejoin: 'miter',
+  strokeMiterlimit: 10,
 };
 
 export function IconSlidersHorizontal({ size = 20, ...props }: IconProps) {
@@ -322,3 +330,185 @@ export function IconLayoutDashboard({ size = 20, ...props }: IconProps) {
     </svg>
   );
 }
+
+export function IconSidebarDashboard({ size = 20, ...props }: IconProps) {
+  return (
+    <svg {...sidebarSvgProps} width={size} height={size} {...props}>
+      <rect x="3.75" y="4.5" width="16.5" height="15" rx="1.5" />
+      <path d="M3.75 9.25h16.5" />
+      <path d="M10.5 9.25V19.5" />
+      <rect
+        x="6.1"
+        y="12.1"
+        width="2.3"
+        height="2.3"
+        rx="0.35"
+        fill="currentColor"
+        fillOpacity="0.16"
+      />
+      <polyline points="13.1 15.8 15.2 13.6 16.8 15 18.35 11.95" />
+    </svg>
+  );
+}
+
+export function IconSidebarConfig({ size = 20, ...props }: IconProps) {
+  return (
+    <svg {...sidebarSvgProps} width={size} height={size} {...props}>
+      <path d="M5 8h14" />
+      <path d="M5 16h14" />
+      <path d="M9 6.1 10.9 8 9 9.9 7.1 8Z" fill="currentColor" fillOpacity="0.16" />
+      <rect
+        x="13.6"
+        y="14.1"
+        width="2.9"
+        height="2.9"
+        rx="0.45"
+        fill="currentColor"
+        fillOpacity="0.16"
+      />
+    </svg>
+  );
+}
+
+export function IconSidebarProviders({ size = 20, ...props }: IconProps) {
+  return (
+    <svg {...sidebarSvgProps} width={size} height={size} {...props}>
+      <path d="M12 4.7 14.8 7.5 12 10.3 9.2 7.5Z" fill="currentColor" fillOpacity="0.16" />
+      <rect x="4.6" y="13" width="3.8" height="3.8" rx="0.5" />
+      <rect x="15.6" y="13" width="3.8" height="3.8" rx="0.5" />
+      <rect x="10.1" y="16.5" width="3.8" height="3.8" rx="0.5" />
+      <path d="M12 10.3v6.2" />
+      <path d="M12 10.3 6.5 13" />
+      <path d="M12 10.3 17.5 13" />
+    </svg>
+  );
+}
+
+export function IconSidebarAuthFiles({ size = 20, ...props }: IconProps) {
+  return (
+    <svg {...sidebarSvgProps} width={size} height={size} {...props}>
+      <path d="M7 4.5h7l3 3v11a2.5 2.5 0 0 1-2.5 2.5H7.5A2.5 2.5 0 0 1 5 18.5V7a2.5 2.5 0 0 1 2-2.5Z" />
+      <path d="M14 4.5v3h3" />
+      <path d="M8.4 10.9h5.7" />
+      <path d="M8.4 14.2h4.4" />
+      <path d="M15.9 14.6 18.3 17 15.9 19.4 13.5 17Z" fill="currentColor" fillOpacity="0.16" />
+      <path d="m14.9 17 0.9 0.9 1.8-1.9" />
+    </svg>
+  );
+}
+
+export function IconSidebarOauth({ size = 20, ...props }: IconProps) {
+  return (
+    <svg {...sidebarSvgProps} width={size} height={size} {...props}>
+      <path d="M4.5 8.5h8.2" />
+      <polyline points="10.1 5.6 13 8.5 10.1 11.4" />
+      <path d="M19.5 15.5h-8.2" />
+      <polyline points="13.9 12.6 11 15.5 13.9 18.4" />
+      <path d="M12 9.4 14.6 12 12 14.6 9.4 12Z" fill="currentColor" fillOpacity="0.16" />
+    </svg>
+  );
+}
+
+export function IconSidebarQuota({ size = 20, ...props }: IconProps) {
+  return (
+    <svg {...sidebarSvgProps} width={size} height={size} {...props}>
+      <path d="M5 16.8a7 7 0 0 1 14 0" />
+      <path d="m7.3 13.8 1.4-1.4" />
+      <path d="M12 11V9" />
+      <path d="m16.7 13.8-1.4-1.4" />
+      <path d="M12 16.8 15.5 12.4" />
+      <path d="M12 15.2 13.6 16.8 12 18.4 10.4 16.8Z" fill="currentColor" stroke="none" />
+    </svg>
+  );
+}
+
+export function IconSidebarUsage({ size = 20, ...props }: IconProps) {
+  return (
+    <svg {...sidebarSvgProps} width={size} height={size} {...props}>
+      <path d="M5 5v14a2 2 0 0 0 2 2h12" />
+      <polyline points="7.4 15.5 10.2 12.3 12.7 13.8 16.1 9.1 18.4 10.8" />
+      <rect
+        x="9.55"
+        y="11.65"
+        width="1.3"
+        height="1.3"
+        rx="0.2"
+        fill="currentColor"
+        stroke="none"
+      />
+      <rect
+        x="12.05"
+        y="13.15"
+        width="1.3"
+        height="1.3"
+        rx="0.2"
+        fill="currentColor"
+        stroke="none"
+      />
+      <rect
+        x="15.45"
+        y="8.45"
+        width="1.3"
+        height="1.3"
+        rx="0.2"
+        fill="currentColor"
+        stroke="none"
+      />
+    </svg>
+  );
+}
+
+export function IconSidebarLogs({ size = 20, ...props }: IconProps) {
+  return (
+    <svg {...sidebarSvgProps} width={size} height={size} {...props}>
+      <rect x="4" y="5" width="16" height="14" rx="1.5" />
+      <path d="M4 9h16" />
+      <rect
+        x="6.1"
+        y="6.35"
+        width="1.15"
+        height="1.15"
+        rx="0.15"
+        fill="currentColor"
+        stroke="none"
+      />
+      <rect
+        x="8.55"
+        y="6.35"
+        width="1.15"
+        height="1.15"
+        rx="0.15"
+        fill="currentColor"
+        fillOpacity="0.45"
+        stroke="none"
+      />
+      <path d="m7.1 12.3 2.5 2-2.5 2" />
+      <path d="M11.9 12.2h3.4" />
+      <path d="M11.9 16.4h4.8" />
+    </svg>
+  );
+}
+
+export function IconSidebarSystem({ size = 20, ...props }: IconProps) {
+  return (
+    <svg {...sidebarSvgProps} width={size} height={size} {...props}>
+      <rect x="5" y="5" width="14" height="3.3" rx="0.8" />
+      <rect x="5" y="10.35" width="14" height="3.3" rx="0.8" />
+      <rect x="5" y="15.7" width="14" height="3.3" rx="0.8" />
+      <rect x="6.8" y="6.05" width="1.1" height="1.1" rx="0.15" fill="currentColor" stroke="none" />
+      <rect x="6.8" y="11.4" width="1.1" height="1.1" rx="0.15" fill="currentColor" stroke="none" />
+      <rect
+        x="6.8"
+        y="16.75"
+        width="1.1"
+        height="1.1"
+        rx="0.15"
+        fill="currentColor"
+        stroke="none"
+      />
+      <path d="M10.4 6.6h5.2" />
+      <path d="M10.4 11.95h5.2" />
+      <path d="M10.4 17.3h5.2" />
+    </svg>
+  );
+}

src/features/authFiles/components/AuthFileCard.tsx

@@ -1,10 +1,10 @@
 import { useTranslation } from 'react-i18next';
 import { Button } from '@/components/ui/Button';
 import { LoadingSpinner } from '@/components/ui/LoadingSpinner';
+import { SelectionCheckbox } from '@/components/ui/SelectionCheckbox';
 import { ToggleSwitch } from '@/components/ui/ToggleSwitch';
 import {
   IconBot,
-  IconCheck,
   IconCode,
   IconDownload,
   IconInfo,
@@ -18,6 +18,7 @@ import { formatFileSize } from '@/utils/format';
 import {
   QUOTA_PROVIDER_TYPES,
   formatModified,
+  getAuthFileStatusMessage,
   getTypeColor,
   getTypeLabel,
   isRuntimeOnlyAuthFile,
@@ -105,7 +106,7 @@ export function AuthFileCard(props: AuthFileCardProps) {
   const authIndexKey = normalizeAuthIndex(rawAuthIndex);
   const statusData =
     (authIndexKey && statusBarCache.get(authIndexKey)) || calculateStatusBarData([]);
-  const rawStatusMessage = String(file['status_message'] ?? file.statusMessage ?? '').trim();
+  const rawStatusMessage = getAuthFileStatusMessage(file);
   const hasStatusWarning =
     Boolean(rawStatusMessage) && !HEALTHY_STATUS_MESSAGES.has(rawStatusMessage.toLowerCase());
 
@@ -117,18 +118,14 @@ export function AuthFileCard(props: AuthFileCardProps) {
         <div className={styles.fileCardMain}>
           <div className={styles.cardHeader}>
             {!isRuntimeOnly && (
-              <button
-                type="button"
-                className={`${styles.selectionToggle} ${selected ? styles.selectionToggleActive : ''}`}
-                onClick={() => onToggleSelect(file.name)}
+              <SelectionCheckbox
+                checked={selected}
+                onChange={() => onToggleSelect(file.name)}
                 aria-label={
                   selected ? t('auth_files.batch_deselect') : t('auth_files.batch_select_all')
                 }
-                aria-pressed={selected}
                 title={selected ? t('auth_files.batch_deselect') : t('auth_files.batch_select_all')}
-              >
-                {selected && <IconCheck size={12} />}
-              </button>
+              />
             )}
             <span
               className={styles.typeBadge}

src/features/authFiles/constants.ts

@@ -93,6 +93,16 @@ export const resolveQuotaErrorMessage = (
 
 export const normalizeProviderKey = (value: string) => value.trim().toLowerCase();
 
+export const getAuthFileStatusMessage = (file: AuthFileItem): string => {
+  const raw = file['status_message'] ?? file.statusMessage;
+  if (typeof raw === 'string') return raw.trim();
+  if (raw == null) return '';
+  return String(raw).trim();
+};
+
+export const hasAuthFileStatusMessage = (file: AuthFileItem): boolean =>
+  getAuthFileStatusMessage(file).length > 0;
+
 export const getTypeLabel = (t: TFunction, type: string): string => {
   const key = `auth_files.filter_${type}`;
   const translated = t(key);

src/features/authFiles/hooks/useAuthFilesData.ts

@@ -7,11 +7,17 @@ import type { AuthFileItem } from '@/types';
 import { formatFileSize } from '@/utils/format';
 import { MAX_AUTH_FILE_SIZE } from '@/utils/constants';
 import { downloadBlob } from '@/utils/download';
-import { getTypeLabel, isRuntimeOnlyAuthFile } from '@/features/authFiles/constants';
+import {
+  getTypeLabel,
+  hasAuthFileStatusMessage,
+  isRuntimeOnlyAuthFile,
+} from '@/features/authFiles/constants';
 
 type DeleteAllOptions = {
   filter: string;
+  problemOnly: boolean;
   onResetFilterToAll: () => void;
+  onResetProblemOnly: () => void;
 };
 
 export type UseAuthFilesDataResult = {
@@ -59,7 +65,6 @@ export function useAuthFilesData(options: UseAuthFilesDataOptions): UseAuthFiles
 
   const fileInputRef = useRef<HTMLInputElement | null>(null);
   const selectionCount = selectedFiles.size;
-
   const toggleSelect = useCallback((name: string) => {
     setSelectedFiles((prev) => {
       const next = new Set(prev);
@@ -223,12 +228,17 @@ export function useAuthFilesData(options: UseAuthFilesDataOptions): UseAuthFiles
 
   const handleDeleteAll = useCallback(
     (deleteAllOptions: DeleteAllOptions) => {
-      const { filter, onResetFilterToAll } = deleteAllOptions;
+      const { filter, problemOnly, onResetFilterToAll, onResetProblemOnly } = deleteAllOptions;
       const isFiltered = filter !== 'all';
+      const isProblemOnly = problemOnly === true;
       const typeLabel = isFiltered ? getTypeLabel(t, filter) : t('auth_files.filter_all');
-      const confirmMessage = isFiltered
-        ? t('auth_files.delete_filtered_confirm', { type: typeLabel })
-        : t('auth_files.delete_all_confirm');
+      const confirmMessage = isProblemOnly
+        ? isFiltered
+          ? t('auth_files.delete_problem_filtered_confirm', { type: typeLabel })
+          : t('auth_files.delete_problem_confirm')
+        : isFiltered
+          ? t('auth_files.delete_filtered_confirm', { type: typeLabel })
+          : t('auth_files.delete_all_confirm');
 
       showConfirmation({
         title: t('auth_files.delete_all_title', { defaultValue: 'Delete All Files' }),
@@ -238,18 +248,26 @@ export function useAuthFilesData(options: UseAuthFilesDataOptions): UseAuthFiles
         onConfirm: async () => {
           setDeletingAll(true);
           try {
-            if (!isFiltered) {
+            if (!isFiltered && !isProblemOnly) {
               await authFilesApi.deleteAll();
               showNotification(t('auth_files.delete_all_success'), 'success');
               setFiles((prev) => prev.filter((file) => isRuntimeOnlyAuthFile(file)));
               deselectAll();
             } else {
-              const filesToDelete = files.filter(
-                (f) => f.type === filter && !isRuntimeOnlyAuthFile(f)
-              );
+              const filesToDelete = files.filter((file) => {
+                if (isRuntimeOnlyAuthFile(file)) return false;
+                if (isFiltered && file.type !== filter) return false;
+                if (isProblemOnly && !hasAuthFileStatusMessage(file)) return false;
+                return true;
+              });
 
               if (filesToDelete.length === 0) {
-                showNotification(t('auth_files.delete_filtered_none', { type: typeLabel }), 'info');
+                const emptyMessage = isProblemOnly
+                  ? isFiltered
+                    ? t('auth_files.delete_problem_filtered_none', { type: typeLabel })
+                    : t('auth_files.delete_problem_none')
+                  : t('auth_files.delete_filtered_none', { type: typeLabel });
+                showNotification(emptyMessage, 'info');
                 setDeletingAll(false);
                 return;
               }
@@ -284,18 +302,45 @@ export function useAuthFilesData(options: UseAuthFilesDataOptions): UseAuthFiles
                 return changed ? next : prev;
               });
 
-              if (failed === 0) {
+              if (failed === 0 && isProblemOnly) {
+                showNotification(
+                  isFiltered
+                    ? t('auth_files.delete_problem_filtered_success', {
+                        count: success,
+                        type: typeLabel,
+                      })
+                    : t('auth_files.delete_problem_success', { count: success }),
+                  'success'
+                );
+              } else if (failed === 0) {
                 showNotification(
                   t('auth_files.delete_filtered_success', { count: success, type: typeLabel }),
                   'success'
                 );
+              } else if (isProblemOnly) {
+                showNotification(
+                  isFiltered
+                    ? t('auth_files.delete_problem_filtered_partial', {
+                        success,
+                        failed,
+                        type: typeLabel,
+                      })
+                    : t('auth_files.delete_problem_partial', { success, failed }),
+                  'warning'
+                );
               } else {
                 showNotification(
                   t('auth_files.delete_filtered_partial', { success, failed, type: typeLabel }),
                   'warning'
                 );
               }
-              onResetFilterToAll();
+
+              if (isFiltered) {
+                onResetFilterToAll();
+              }
+              if (isProblemOnly) {
+                onResetProblemOnly();
+              }
             }
           } catch (err: unknown) {
             const errorMessage = err instanceof Error ? err.message : '';

src/features/authFiles/hooks/useAuthFilesPrefixProxyEditor.ts

@@ -260,8 +260,7 @@ export function useAuthFilesPrefixProxyEditor(
     });
 
     try {
-      const file = new File([payload], name, { type: 'application/json' });
-      await authFilesApi.upload(file);
+      await authFilesApi.saveText(name, payload);
       showNotification(t('auth_files.prefix_proxy_saved_success', { name }), 'success');
       await loadFiles();
       await loadKeyStats();

src/features/authFiles/uiState.ts

@@ -1,5 +1,6 @@
 export type AuthFilesUiState = {
   filter?: string;
+  problemOnly?: boolean;
   search?: string;
   page?: number;
   pageSize?: number;
@@ -27,4 +28,3 @@ export const writeAuthFilesUiState = (state: AuthFilesUiState) => {
     // ignore
   }
 };
-

src/i18n/locales/en.json

@@ -342,18 +342,17 @@
     "vertex_add_modal_title": "Add Vertex API Configuration",
     "vertex_add_modal_key_label": "API Key:",
     "vertex_add_modal_key_placeholder": "Please enter Vertex API key",
-    "vertex_add_modal_url_label": "Base URL (Required):",
+    "vertex_add_modal_url_label": "Base URL:",
     "vertex_add_modal_url_placeholder": "e.g.: https://example.com/api",
     "vertex_add_modal_proxy_label": "Proxy URL (Optional):",
     "vertex_add_modal_proxy_placeholder": "e.g.: socks5://proxy.example.com:1080",
     "vertex_edit_modal_title": "Edit Vertex API Configuration",
     "vertex_edit_modal_key_label": "API Key:",
-    "vertex_edit_modal_url_label": "Base URL (Required):",
+    "vertex_edit_modal_url_label": "Base URL:",
     "vertex_edit_modal_proxy_label": "Proxy URL (Optional):",
     "vertex_delete_confirm": "Are you sure you want to delete this Vertex configuration?",
-    "vertex_models_label": "Model aliases (alias required):",
+    "vertex_models_label": "Model aliases:",
     "vertex_models_add_btn": "Add Mapping",
-    "vertex_models_hint": "Each alias needs both the original model and the alias.",
     "vertex_models_count": "Alias count",
     "ampcode_title": "Amp CLI Integration (ampcode)",
     "ampcode_modal_title": "Configure Ampcode",
@@ -469,6 +468,10 @@
     "delete_confirm": "Are you sure you want to delete file",
     "delete_all_confirm": "Are you sure you want to delete all auth files? This operation cannot be undone!",
     "delete_filtered_confirm": "Are you sure you want to delete all {{type}} auth files? This operation cannot be undone!",
+    "delete_problem_button": "Delete Problem Files",
+    "delete_problem_button_with_type": "Delete Problematic {{type}} Files",
+    "delete_problem_confirm": "Are you sure you want to delete all problematic auth files? This operation cannot be undone!",
+    "delete_problem_filtered_confirm": "Are you sure you want to delete all problematic {{type}} auth files? This operation cannot be undone!",
     "upload_error_json": "Only JSON files are allowed",
     "upload_error_size": "File size cannot exceed {{maxSize}}",
     "upload_success": "File uploaded successfully",
@@ -478,12 +481,20 @@
     "delete_filtered_success": "Deleted {{count}} {{type}} auth files successfully",
     "delete_filtered_partial": "{{type}} auth files deletion finished: {{success}} succeeded, {{failed}} failed",
     "delete_filtered_none": "No deletable auth files under the current filter ({{type}})",
+    "delete_problem_success": "Deleted {{count}} problematic auth files successfully",
+    "delete_problem_filtered_success": "Deleted {{count}} problematic {{type}} auth files successfully",
+    "delete_problem_partial": "Problematic auth files deletion finished: {{success}} succeeded, {{failed}} failed",
+    "delete_problem_filtered_partial": "Problematic {{type}} auth files deletion finished: {{success}} succeeded, {{failed}} failed",
+    "delete_problem_none": "No deletable problematic auth files under the current filter",
+    "delete_problem_filtered_none": "No deletable problematic {{type}} auth files under the current filter",
     "files_count": "files",
     "pagination_prev": "Previous",
     "pagination_next": "Next",
     "pagination_info": "Page {{current}} / {{total}} · {{count}} files",
     "search_label": "Search configs",
     "search_placeholder": "Filter by name, type, or provider",
+    "problem_filter_label": "Problem Filter",
+    "problem_filter_only": "Only show problematic credentials",
     "page_size_label": "Per page",
     "page_size_unit": "items",
     "view_mode_paged": "Paged",
@@ -593,6 +604,7 @@
     "plan_unknown": "Unknown",
     "plan_free": "Free",
     "plan_pro": "Pro",
+    "plan_max": "Max",
     "plan_max5": "Max 5x",
     "plan_max20": "Max 20x"
   },
@@ -1031,6 +1043,10 @@
     "show_raw_logs": "Show Raw Logs",
     "show_raw_logs_hint": "Show original log text for easier multi-line copy",
     "search_placeholder": "Search logs by content or keyword",
+    "filter_panel_title": "Structured Filters",
+    "filter_panel_expand": "Expand structured filters",
+    "filter_panel_collapse": "Collapse structured filters",
+    "filter_panel_active_count": "{{count}} active",
     "filter_method": "Method",
     "filter_status": "Status",
     "filter_path": "Path",
@@ -1357,7 +1373,6 @@
     "vertex_config_added": "Vertex configuration added successfully",
     "vertex_config_updated": "Vertex configuration updated successfully",
     "vertex_config_deleted": "Vertex configuration deleted successfully",
-    "vertex_base_url_required": "Please enter the Vertex Base URL",
     "config_enabled": "Configuration enabled",
     "config_disabled": "Configuration disabled",
     "field_required": "Required fields cannot be empty",
@@ -1400,6 +1415,7 @@
   "theme": {
     "switch": "Theme",
     "light": "Light",
+    "white": "Pure White",
     "dark": "Dark",
     "switch_to_light": "Switch to light mode",
     "switch_to_dark": "Switch to dark mode",

src/i18n/locales/ru.json

@@ -342,18 +342,17 @@
     "vertex_add_modal_title": "Добавление конфигурации Vertex API",
     "vertex_add_modal_key_label": "API-ключ:",
     "vertex_add_modal_key_placeholder": "Введите API-ключ Vertex",
-    "vertex_add_modal_url_label": "Базовый URL (обязательно):",
+    "vertex_add_modal_url_label": "Базовый URL:",
     "vertex_add_modal_url_placeholder": "например: https://example.com/api",
     "vertex_add_modal_proxy_label": "URL прокси (необязательно):",
     "vertex_add_modal_proxy_placeholder": "например: socks5://proxy.example.com:1080",
     "vertex_edit_modal_title": "Редактирование конфигурации Vertex API",
     "vertex_edit_modal_key_label": "API-ключ:",
-    "vertex_edit_modal_url_label": "Базовый URL (обязательно):",
+    "vertex_edit_modal_url_label": "Базовый URL:",
     "vertex_edit_modal_proxy_label": "URL прокси (необязательно):",
     "vertex_delete_confirm": "Удалить эту конфигурацию Vertex?",
-    "vertex_models_label": "Псевдонимы моделей (требуется псевдоним):",
+    "vertex_models_label": "Псевдонимы моделей:",
     "vertex_models_add_btn": "Добавить сопоставление",
-    "vertex_models_hint": "Каждому псевдониму требуются исходная модель и псевдоним.",
     "vertex_models_count": "Количество псевдонимов",
     "ampcode_title": "Интеграция Amp CLI (ampcode)",
     "ampcode_modal_title": "Настройка Ampcode",
@@ -469,6 +468,10 @@
     "delete_confirm": "Удалить файл",
     "delete_all_confirm": "Удалить все файлы авторизации? Это действие нельзя отменить!",
     "delete_filtered_confirm": "Удалить все файлы авторизации {{type}}? Это действие нельзя отменить!",
+    "delete_problem_button": "Удалить проблемные",
+    "delete_problem_button_with_type": "Удалить проблемные файлы {{type}}",
+    "delete_problem_confirm": "Удалить все проблемные файлы авторизации? Это действие нельзя отменить!",
+    "delete_problem_filtered_confirm": "Удалить все проблемные файлы авторизации {{type}}? Это действие нельзя отменить!",
     "upload_error_json": "Допустимы только файлы JSON",
     "upload_error_size": "Размер файла не может превышать {{maxSize}}",
     "upload_success": "Файл успешно загружен",
@@ -478,12 +481,20 @@
     "delete_filtered_success": "Удалено файлов {{type}}: {{count}}",
     "delete_filtered_partial": "Удаление файлов {{type}} завершено: успешных {{success}}, ошибок {{failed}}",
     "delete_filtered_none": "Нет файлов {{type}} для удаления при текущем фильтре",
+    "delete_problem_success": "Удалено проблемных файлов авторизации: {{count}}",
+    "delete_problem_filtered_success": "Удалено проблемных файлов авторизации {{type}}: {{count}}",
+    "delete_problem_partial": "Удаление проблемных файлов авторизации завершено: успешных {{success}}, ошибок {{failed}}",
+    "delete_problem_filtered_partial": "Удаление проблемных файлов авторизации {{type}} завершено: успешных {{success}}, ошибок {{failed}}",
+    "delete_problem_none": "Нет проблемных файлов авторизации для удаления при текущем фильтре",
+    "delete_problem_filtered_none": "Нет проблемных файлов авторизации {{type}} для удаления при текущем фильтре",
     "files_count": "файлов",
     "pagination_prev": "Предыдущая",
     "pagination_next": "Следующая",
     "pagination_info": "Страница {{current}} / {{total}} · {{count}} файлов",
     "search_label": "Поиск конфигов",
     "search_placeholder": "Фильтр по имени, типу или провайдеру",
+    "problem_filter_label": "Фильтр проблем",
+    "problem_filter_only": "Показывать только проблемные учётные данные",
     "page_size_label": "На странице",
     "page_size_unit": "элементов",
     "view_mode_paged": "Постранично",
@@ -596,6 +607,7 @@
     "plan_unknown": "Неизвестно",
     "plan_free": "Free",
     "plan_pro": "Pro",
+    "plan_max": "Max",
     "plan_max5": "Max 5x",
     "plan_max20": "Max 20x"
   },
@@ -1034,6 +1046,10 @@
     "show_raw_logs": "Показать исходные журналы",
     "show_raw_logs_hint": "Показать текст журнала без обработки для удобного копирования в несколько строк",
     "search_placeholder": "Искать по содержимому или ключевым словам",
+    "filter_panel_title": "Структурные фильтры",
+    "filter_panel_expand": "Развернуть структурные фильтры",
+    "filter_panel_collapse": "Свернуть структурные фильтры",
+    "filter_panel_active_count": "Активно: {{count}}",
     "filter_method": "Метод",
     "filter_status": "Статус",
     "filter_path": "Путь",
@@ -1362,7 +1378,6 @@
     "vertex_config_added": "Конфигурация Vertex успешно добавлена",
     "vertex_config_updated": "Конфигурация Vertex успешно обновлена",
     "vertex_config_deleted": "Конфигурация Vertex успешно удалена",
-    "vertex_base_url_required": "Введите базовый URL Vertex",
     "config_enabled": "Конфигурация включена",
     "config_disabled": "Конфигурация выключена",
     "field_required": "Обязательные поля не могут быть пустыми",
@@ -1405,6 +1420,7 @@
   "theme": {
     "switch": "Тема",
     "light": "Светлая",
+    "white": "Чисто-белая",
     "dark": "Тёмная",
     "switch_to_light": "Переключиться на светлую тему",
     "switch_to_dark": "Переключиться на тёмную тему",

src/i18n/locales/zh-CN.json

@@ -342,18 +342,17 @@
     "vertex_add_modal_title": "添加Vertex API配置",
     "vertex_add_modal_key_label": "API密钥:",
     "vertex_add_modal_key_placeholder": "请输入Vertex API密钥",
-    "vertex_add_modal_url_label": "Base URL (必填):",
+    "vertex_add_modal_url_label": "Base URL:",
     "vertex_add_modal_url_placeholder": "例如: https://example.com/api",
     "vertex_add_modal_proxy_label": "代理 URL (可选):",
     "vertex_add_modal_proxy_placeholder": "例如: socks5://proxy.example.com:1080",
     "vertex_edit_modal_title": "编辑Vertex API配置",
     "vertex_edit_modal_key_label": "API密钥:",
-    "vertex_edit_modal_url_label": "Base URL (必填):",
+    "vertex_edit_modal_url_label": "Base URL:",
     "vertex_edit_modal_proxy_label": "代理 URL (可选):",
     "vertex_delete_confirm": "确定要删除这个Vertex配置吗？",
-    "vertex_models_label": "模型别名 (别名必填):",
+    "vertex_models_label": "模型别名:",
     "vertex_models_add_btn": "添加映射",
-    "vertex_models_hint": "每条别名需要填写原模型与别名。",
     "vertex_models_count": "别名数量",
     "ampcode_title": "Amp CLI 集成 (ampcode)",
     "ampcode_modal_title": "配置 Ampcode",
@@ -469,6 +468,10 @@
     "delete_confirm": "确定要删除文件",
     "delete_all_confirm": "确定要删除所有认证文件吗？此操作不可恢复！",
     "delete_filtered_confirm": "确定要删除筛选出的 {{type}} 认证文件吗？此操作不可恢复！",
+    "delete_problem_button": "删除问题凭证",
+    "delete_problem_button_with_type": "删除 {{type}} 问题凭证",
+    "delete_problem_confirm": "确定要删除所有有问题的认证文件吗？此操作不可恢复！",
+    "delete_problem_filtered_confirm": "确定要删除筛选出的有问题的 {{type}} 认证文件吗？此操作不可恢复！",
     "upload_error_json": "只能上传JSON文件",
     "upload_error_size": "文件大小不能超过 {{maxSize}}",
     "upload_success": "文件上传成功",
@@ -478,12 +481,20 @@
     "delete_filtered_success": "成功删除 {{count}} 个 {{type}} 认证文件",
     "delete_filtered_partial": "{{type}} 认证文件删除完成，成功 {{success}} 个，失败 {{failed}} 个",
     "delete_filtered_none": "当前筛选类型 ({{type}}) 下没有可删除的认证文件",
+    "delete_problem_success": "成功删除 {{count}} 个有问题的认证文件",
+    "delete_problem_filtered_success": "成功删除 {{count}} 个有问题的 {{type}} 认证文件",
+    "delete_problem_partial": "有问题认证文件删除完成，成功 {{success}} 个，失败 {{failed}} 个",
+    "delete_problem_filtered_partial": "有问题的 {{type}} 认证文件删除完成，成功 {{success}} 个，失败 {{failed}} 个",
+    "delete_problem_none": "当前没有可删除的有问题认证文件",
+    "delete_problem_filtered_none": "当前筛选类型 ({{type}}) 下没有可删除的有问题认证文件",
     "files_count": "个文件",
     "pagination_prev": "上一页",
     "pagination_next": "下一页",
     "pagination_info": "第 {{current}} / {{total}} 页 · 共 {{count}} 个文件",
     "search_label": "搜索配置文件",
     "search_placeholder": "输入名称、类型或提供方关键字",
+    "problem_filter_label": "问题筛选",
+    "problem_filter_only": "仅显示有问题凭证",
     "page_size_label": "单页数量",
     "page_size_unit": "个/页",
     "view_mode_paged": "按页显示",
@@ -593,6 +604,7 @@
     "plan_unknown": "未知",
     "plan_free": "免费版",
     "plan_pro": "专业版",
+    "plan_max": "Max",
     "plan_max5": "Max 5x",
     "plan_max20": "Max 20x"
   },
@@ -1031,6 +1043,10 @@
     "show_raw_logs": "显示原始日志",
     "show_raw_logs_hint": "直接显示原始日志文本，方便多行复制",
     "search_placeholder": "搜索日志内容或关键字",
+    "filter_panel_title": "结构化筛选",
+    "filter_panel_expand": "展开结构化筛选",
+    "filter_panel_collapse": "收起结构化筛选",
+    "filter_panel_active_count": "已选 {{count}} 项",
     "filter_method": "请求方法",
     "filter_status": "状态码",
     "filter_path": "路径",
@@ -1357,7 +1373,6 @@
     "vertex_config_added": "Vertex配置添加成功",
     "vertex_config_updated": "Vertex配置更新成功",
     "vertex_config_deleted": "Vertex配置删除成功",
-    "vertex_base_url_required": "请填写Vertex Base URL",
     "config_enabled": "配置已启用",
     "config_disabled": "配置已停用",
     "field_required": "必填字段不能为空",
@@ -1400,6 +1415,7 @@
   "theme": {
     "switch": "主题",
     "light": "亮色",
+    "white": "纯白",
     "dark": "暗色",
     "switch_to_light": "切换到亮色模式",
     "switch_to_dark": "切换到暗色模式",

src/pages/AiProvidersPage.tsx

@@ -164,7 +164,7 @@ export function AiProvidersPage() {
   };
 
   const setConfigEnabled = async (
-    provider: 'gemini' | 'codex' | 'claude',
+    provider: 'gemini' | 'codex' | 'claude' | 'vertex',
     index: number,
     enabled: boolean
   ) => {
@@ -204,7 +204,12 @@ export function AiProvidersPage() {
       return;
     }
 
-    const source = provider === 'codex' ? codexConfigs : claudeConfigs;
+    const source =
+      provider === 'codex'
+        ? codexConfigs
+        : provider === 'claude'
+          ? claudeConfigs
+          : vertexConfigs;
     const current = source[index];
     if (!current) return;
 
@@ -222,17 +227,23 @@ export function AiProvidersPage() {
       setCodexConfigs(nextList);
       updateConfigValue('codex-api-key', nextList);
       clearCache('codex-api-key');
-    } else {
+    } else if (provider === 'claude') {
       setClaudeConfigs(nextList);
       updateConfigValue('claude-api-key', nextList);
       clearCache('claude-api-key');
+    } else {
+      setVertexConfigs(nextList);
+      updateConfigValue('vertex-api-key', nextList);
+      clearCache('vertex-api-key');
     }
 
     try {
       if (provider === 'codex') {
         await providersApi.saveCodexConfigs(nextList);
-      } else {
+      } else if (provider === 'claude') {
         await providersApi.saveClaudeConfigs(nextList);
+      } else {
+        await providersApi.saveVertexConfigs(nextList);
       }
       showNotification(
         enabled ? t('notification.config_enabled') : t('notification.config_disabled'),
@@ -244,10 +255,14 @@ export function AiProvidersPage() {
         setCodexConfigs(previousList);
         updateConfigValue('codex-api-key', previousList);
         clearCache('codex-api-key');
-      } else {
+      } else if (provider === 'claude') {
         setClaudeConfigs(previousList);
         updateConfigValue('claude-api-key', previousList);
         clearCache('claude-api-key');
+      } else {
+        setVertexConfigs(previousList);
+        updateConfigValue('vertex-api-key', previousList);
+        clearCache('vertex-api-key');
       }
       showNotification(`${t('notification.update_failed')}: ${message}`, 'error');
     } finally {
@@ -400,6 +415,7 @@ export function AiProvidersPage() {
             onAdd={() => openEditor('/ai-providers/vertex/new')}
             onEdit={(index) => openEditor(`/ai-providers/vertex/${index}`)}
             onDelete={deleteVertex}
+            onToggle={(index, enabled) => void setConfigEnabled('vertex', index, enabled)}
           />
         </div>
 

src/pages/AiProvidersVertexEditPage.tsx

@@ -192,10 +192,6 @@ export function AiProvidersVertexEditPage() {
 
     const trimmedBaseUrl = (form.baseUrl ?? '').trim();
     const baseUrl = trimmedBaseUrl || undefined;
-    if (!baseUrl) {
-      showNotification(t('notification.vertex_base_url_required'), 'error');
-      return;
-    }
 
     setSaving(true);
     setError('');
@@ -347,7 +343,6 @@ export function AiProvidersVertexEditPage() {
                 removeButtonAriaLabel={t('common.delete')}
                 disabled={disableControls || saving}
               />
-              <div className="hint">{t('ai_providers.vertex_models_hint')}</div>
             </div>
             <div className="form-group">
               <label>{t('ai_providers.excluded_models_label')}</label>

src/pages/AuthFilesPage.module.scss

@@ -161,6 +161,25 @@
   }
 }
 
+.filterToggleItem {
+  min-width: 220px;
+}
+
+.filterToggle {
+  display: flex;
+  align-items: center;
+  min-height: 38px;
+}
+
+.filterToggleLabel {
+  display: inline-flex;
+  align-items: center;
+  color: var(--text-primary);
+  font-size: 14px;
+  font-weight: 500;
+  white-space: nowrap;
+}
+
 .pageSizeSelect {
   padding: 8px 12px;
   border: 1px solid var(--border-color);
@@ -546,45 +565,6 @@
   min-height: 28px;
 }
 
-.selectionToggle {
-  width: 22px;
-  height: 22px;
-  margin: 0;
-  flex-shrink: 0;
-  border-radius: 7px;
-  border: 1px solid var(--border-color);
-  background: color-mix(in srgb, var(--bg-secondary) 92%, transparent);
-  color: var(--primary-contrast, #fff);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  transition:
-    border-color $transition-fast,
-    background-color $transition-fast,
-    box-shadow $transition-fast,
-    transform $transition-fast;
-
-  &:hover {
-    border-color: var(--primary-color);
-    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 16%, transparent);
-  }
-
-  &:active {
-    transform: scale(0.95);
-  }
-}
-
-.selectionToggleActive {
-  border-color: var(--primary-color);
-  background: var(--primary-color);
-}
-
-.selectionToggleActive svg {
-  display: block;
-  stroke-width: 2.4;
-}
-
 .typeBadge {
   padding: 4px 10px;
   border-radius: 12px;

src/pages/AuthFilesPage.tsx

@@ -19,6 +19,7 @@ import { Card } from '@/components/ui/Card';
 import { Button } from '@/components/ui/Button';
 import { Input } from '@/components/ui/Input';
 import { EmptyState } from '@/components/ui/EmptyState';
+import { ToggleSwitch } from '@/components/ui/ToggleSwitch';
 import { copyToClipboard } from '@/utils/clipboard';
 import {
   MAX_CARD_PAGE_SIZE,
@@ -27,6 +28,7 @@ import {
   clampCardPageSize,
   getTypeColor,
   getTypeLabel,
+  hasAuthFileStatusMessage,
   isRuntimeOnlyAuthFile,
   normalizeProviderKey,
   type QuotaProviderType,
@@ -64,6 +66,7 @@ export function AuthFilesPage() {
   const navigate = useNavigate();
 
   const [filter, setFilter] = useState<'all' | string>('all');
+  const [problemOnly, setProblemOnly] = useState(false);
   const [search, setSearch] = useState('');
   const [page, setPage] = useState(1);
   const [pageSize, setPageSize] = useState(9);
@@ -162,6 +165,9 @@ export function AuthFilesPage() {
     if (typeof persisted.filter === 'string' && persisted.filter.trim()) {
       setFilter(persisted.filter);
     }
+    if (typeof persisted.problemOnly === 'boolean') {
+      setProblemOnly(persisted.problemOnly);
+    }
     if (typeof persisted.search === 'string') {
       setSearch(persisted.search);
     }
@@ -174,8 +180,8 @@ export function AuthFilesPage() {
   }, []);
 
   useEffect(() => {
-    writeAuthFilesUiState({ filter, search, page, pageSize });
-  }, [filter, search, page, pageSize]);
+    writeAuthFilesUiState({ filter, problemOnly, search, page, pageSize });
+  }, [filter, problemOnly, search, page, pageSize]);
 
   useEffect(() => {
     setPageSizeInput(String(pageSize));
@@ -248,17 +254,22 @@ export function AuthFilesPage() {
     return Array.from(types);
   }, [files]);
 
+  const filesMatchingProblemFilter = useMemo(
+    () => (problemOnly ? files.filter(hasAuthFileStatusMessage) : files),
+    [files, problemOnly]
+  );
+
   const typeCounts = useMemo(() => {
-    const counts: Record<string, number> = { all: files.length };
-    files.forEach((file) => {
+    const counts: Record<string, number> = { all: filesMatchingProblemFilter.length };
+    filesMatchingProblemFilter.forEach((file) => {
       if (!file.type) return;
       counts[file.type] = (counts[file.type] || 0) + 1;
     });
     return counts;
-  }, [files]);
+  }, [filesMatchingProblemFilter]);
 
   const filtered = useMemo(() => {
-    return files.filter((item) => {
+    return filesMatchingProblemFilter.filter((item) => {
       const matchType = filter === 'all' || item.type === filter;
       const term = search.trim().toLowerCase();
       const matchSearch =
@@ -268,7 +279,7 @@ export function AuthFilesPage() {
         (item.provider || '').toString().toLowerCase().includes(term);
       return matchType && matchSearch;
     });
-  }, [files, filter, search]);
+  }, [filesMatchingProblemFilter, filter, search]);
 
   const totalPages = Math.max(1, Math.ceil(filtered.length / pageSize));
   const currentPage = Math.min(page, totalPages);
@@ -456,6 +467,14 @@ export function AuthFilesPage() {
     </div>
   );
 
+  const deleteAllButtonLabel = problemOnly
+    ? filter === 'all'
+      ? t('auth_files.delete_problem_button')
+      : t('auth_files.delete_problem_button_with_type', { type: getTypeLabel(t, filter) })
+    : filter === 'all'
+      ? t('auth_files.delete_all_button')
+      : `${t('common.delete')} ${getTypeLabel(t, filter)}`;
+
   return (
     <div className={styles.container}>
       <div className={styles.pageHeader}>
@@ -482,14 +501,17 @@ export function AuthFilesPage() {
               variant="danger"
               size="sm"
               onClick={() =>
-                handleDeleteAll({ filter, onResetFilterToAll: () => setFilter('all') })
+                handleDeleteAll({
+                  filter,
+                  problemOnly,
+                  onResetFilterToAll: () => setFilter('all'),
+                  onResetProblemOnly: () => setProblemOnly(false),
+                })
               }
               disabled={disableControls || loading || deletingAll}
               loading={deletingAll}
             >
-              {filter === 'all'
-                ? t('auth_files.delete_all_button')
-                : `${t('common.delete')} ${getTypeLabel(t, filter)}`}
+              {deleteAllButtonLabel}
             </Button>
             <input
               ref={fileInputRef}
@@ -537,6 +559,24 @@ export function AuthFilesPage() {
                 }}
               />
             </div>
+            <div className={`${styles.filterItem} ${styles.filterToggleItem}`}>
+              <label>{t('auth_files.problem_filter_label')}</label>
+              <div className={styles.filterToggle}>
+                <ToggleSwitch
+                  checked={problemOnly}
+                  onChange={(value) => {
+                    setProblemOnly(value);
+                    setPage(1);
+                  }}
+                  ariaLabel={t('auth_files.problem_filter_only')}
+                  label={
+                    <span className={styles.filterToggleLabel}>
+                      {t('auth_files.problem_filter_only')}
+                    </span>
+                  }
+                />
+              </div>
+            </div>
           </div>
         </div>
 

src/pages/LoginPage.module.scss

@@ -169,22 +169,8 @@
 
 // 语言下拉选择
 .languageSelect {
-  white-space: nowrap;
-  border: 1px solid var(--border-color);
-  border-radius: $radius-md;
-  padding: 10px 12px;
-  font-size: 14px;
-  background: var(--bg-primary);
-  color: var(--text-primary);
-  cursor: pointer;
-  height: 40px;
-  box-sizing: border-box;
-
-  &:focus {
-    outline: none;
-    border-color: var(--primary-color);
-    box-shadow: 0 0 0 3px rgba($primary-color, 0.18);
-  }
+  min-width: 108px;
+  flex: 0 0 auto;
 }
 
 // 连接信息框
@@ -218,19 +204,13 @@
 .toggleAdvanced {
   display: flex;
   justify-content: flex-start;
-  align-items: center;
-  gap: $spacing-xs;
+  width: 100%;
+}
+
+.toggleLabel {
   color: var(--text-secondary);
-  cursor: pointer;
-
-  input[type='checkbox'] {
-    cursor: pointer;
-  }
-
-  label {
-    cursor: pointer;
-    font-size: 14px;
-  }
+  font-size: 14px;
+  font-weight: 500;
 }
 
 // 错误提示框

src/pages/LoginPage.tsx

@@ -3,6 +3,8 @@ import { Navigate, useNavigate, useLocation } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { Button } from '@/components/ui/Button';
 import { Input } from '@/components/ui/Input';
+import { Select } from '@/components/ui/Select';
+import { SelectionCheckbox } from '@/components/ui/SelectionCheckbox';
 import { IconEye, IconEyeOff } from '@/components/ui/icons';
 import { useAuthStore, useLanguageStore, useNotificationStore } from '@/stores';
 import { detectApiBaseFromLocation, normalizeApiBase } from '@/utils/connection';
@@ -89,9 +91,16 @@ export function LoginPage() {
   const [error, setError] = useState('');
 
   const detectedBase = useMemo(() => detectApiBaseFromLocation(), []);
+  const languageOptions = useMemo(
+    () =>
+      LANGUAGE_ORDER.map((lang) => ({
+        value: lang,
+        label: t(LANGUAGE_LABEL_KEYS[lang])
+      })),
+    [t]
+  );
   const handleLanguageChange = useCallback(
-    (event: React.ChangeEvent<HTMLSelectElement>) => {
-      const selectedLanguage = event.target.value;
+    (selectedLanguage: string) => {
       if (!isSupportedLanguage(selectedLanguage)) {
         return;
       }
@@ -205,19 +214,14 @@ export function LoginPage() {
               <div className={styles.loginHeader}>
                 <div className={styles.titleRow}>
                   <div className={styles.title}>{t('title.login')}</div>
-                  <select
+                  <Select
                     className={styles.languageSelect}
                     value={language}
+                    options={languageOptions}
                     onChange={handleLanguageChange}
-                    title={t('language.switch')}
-                    aria-label={t('language.switch')}
-                  >
-                    {LANGUAGE_ORDER.map((lang) => (
-                      <option key={lang} value={lang}>
-                        {t(LANGUAGE_LABEL_KEYS[lang])}
-                      </option>
-                    ))}
-                  </select>
+                    fullWidth={false}
+                    ariaLabel={t('language.switch')}
+                  />
                 </div>
                 <div className={styles.subtitle}>{t('login.subtitle')}</div>
               </div>
@@ -229,13 +233,13 @@ export function LoginPage() {
               </div>
 
               <div className={styles.toggleAdvanced}>
-                <input
-                  id="custom-connection-toggle"
-                  type="checkbox"
+                <SelectionCheckbox
                   checked={showCustomBase}
-                  onChange={(e) => setShowCustomBase(e.target.checked)}
+                  onChange={setShowCustomBase}
+                  ariaLabel={t('login.custom_connection_label')}
+                  label={t('login.custom_connection_label')}
+                  labelClassName={styles.toggleLabel}
                 />
-                <label htmlFor="custom-connection-toggle">{t('login.custom_connection_label')}</label>
               </div>
 
               {showCustomBase && (
@@ -278,13 +282,13 @@ export function LoginPage() {
               />
 
               <div className={styles.toggleAdvanced}>
-                <input
-                  id="remember-password-toggle"
-                  type="checkbox"
+                <SelectionCheckbox
                   checked={rememberPassword}
-                  onChange={(e) => setRememberPassword(e.target.checked)}
+                  onChange={setRememberPassword}
+                  ariaLabel={t('login.remember_password_label')}
+                  label={t('login.remember_password_label')}
+                  labelClassName={styles.toggleLabel}
                 />
-                <label htmlFor="remember-password-toggle">{t('login.remember_password_label')}</label>
               </div>
 
               <Button fullWidth onClick={handleSubmit} loading={loading}>

src/pages/LogsPage.module.scss

@@ -121,6 +121,33 @@
   max-width: 420px;
 }
 
+.filterPanelHeader {
+  display: flex;
+  align-items: center;
+  flex: 1 1 100%;
+}
+
+.filterPanelToggle {
+  white-space: nowrap;
+}
+
+.filterPanelButtonContent {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.filterPanelCount {
+  display: inline-flex;
+  align-items: center;
+  padding: 2px 8px;
+  border-radius: $radius-full;
+  background: rgba($primary-color, 0.12);
+  color: var(--primary-color);
+  font-size: 12px;
+  line-height: 1.2;
+}
+
 .structuredFilters {
   display: flex;
   flex-direction: column;
@@ -200,6 +227,20 @@
 }
 
 @include mobile {
+  .filterPanelHeader {
+    width: 100%;
+  }
+
+  .filterPanelToggle {
+    width: 100%;
+  }
+
+  .filterPanelButtonContent {
+    width: 100%;
+    justify-content: space-between;
+    flex-wrap: wrap;
+  }
+
   .filterChipGroup {
     flex-direction: column;
     gap: 6px;

src/pages/LogsPage.tsx

@@ -8,16 +8,20 @@ import { Input } from '@/components/ui/Input';
 import { Modal } from '@/components/ui/Modal';
 import { ToggleSwitch } from '@/components/ui/ToggleSwitch';
 import {
-  IconDownload,
+  IconChevronDown,
+  IconChevronUp,
   IconCode,
+  IconDownload,
   IconEyeOff,
   IconRefreshCw,
   IconSearch,
+  IconSlidersHorizontal,
   IconTimer,
   IconTrash2,
   IconX,
 } from '@/components/ui/icons';
 import { useHeaderRefresh } from '@/hooks/useHeaderRefresh';
+import { useLocalStorage } from '@/hooks/useLocalStorage';
 import { useAuthStore, useConfigStore, useNotificationStore } from '@/stores';
 import { logsApi } from '@/services/api/logs';
 import { copyToClipboard } from '@/utils/clipboard';
@@ -79,6 +83,10 @@ export function LogsPage() {
   const deferredSearchQuery = useDeferredValue(searchQuery);
   const [hideManagementLogs, setHideManagementLogs] = useState(true);
   const [showRawLogs, setShowRawLogs] = useState(false);
+  const [structuredFiltersExpanded, setStructuredFiltersExpanded] = useLocalStorage(
+    'logsPage.structuredFiltersExpanded',
+    true
+  );
   const [errorLogs, setErrorLogs] = useState<ErrorLogItem[]>([]);
   const [loadingErrors, setLoadingErrors] = useState(false);
   const [errorLogsError, setErrorLogsError] = useState('');
@@ -305,6 +313,9 @@ export function LogsPage() {
   }, [baseLines, hideManagementLogs, trimmedSearchQuery]);
 
   const filters = useLogFilters({ parsedLines: parsedSearchLines });
+  const structuredFiltersPanelId = 'logs-structured-filters';
+  const structuredFilterCount =
+    filters.methodFilters.length + filters.statusFilters.length + filters.pathFilters.length;
 
   const { filteredParsedLines, filteredLines, removedCount } = useMemo(() => {
     const filteredParsed = parsedSearchLines.filter((line) => {
@@ -498,86 +509,120 @@ export function LogsPage() {
                 />
               </div>
 
-              <div className={styles.structuredFilters}>
-                <div className={styles.filterChipGroup}>
-                  <span className={styles.filterChipLabel}>{t('logs.filter_method')}</span>
-                  <div className={styles.filterChipList}>
-                    {HTTP_METHODS.map((method) => {
-                      const active = filters.methodFilters.includes(method);
-                      const count = filters.methodCounts[method] ?? 0;
-                      return (
-                        <button
-                          key={method}
-                          type="button"
-                          className={`${styles.filterChip} ${active ? styles.filterChipActive : ''}`}
-                          onClick={() => filters.toggleMethodFilter(method)}
-                          disabled={count === 0 && !active}
-                          aria-pressed={active}
-                        >
-                          {method} ({count})
-                        </button>
-                      );
-                    })}
-                  </div>
-                </div>
-
-                <div className={styles.filterChipGroup}>
-                  <span className={styles.filterChipLabel}>{t('logs.filter_status')}</span>
-                  <div className={styles.filterChipList}>
-                    {STATUS_GROUPS.map((statusGroup) => {
-                      const active = filters.statusFilters.includes(statusGroup);
-                      const count = filters.statusCounts[statusGroup] ?? 0;
-                      return (
-                        <button
-                          key={statusGroup}
-                          type="button"
-                          className={`${styles.filterChip} ${active ? styles.filterChipActive : ''}`}
-                          onClick={() => filters.toggleStatusFilter(statusGroup)}
-                          disabled={count === 0 && !active}
-                          aria-pressed={active}
-                        >
-                          {t(`logs.filter_status_${statusGroup}`)} ({count})
-                        </button>
-                      );
-                    })}
-                  </div>
-                </div>
-
-                <div className={styles.filterChipGroup}>
-                  <span className={styles.filterChipLabel}>{t('logs.filter_path')}</span>
-                  <div className={styles.filterChipList}>
-                    {filters.pathOptions.length === 0 ? (
-                      <span className={styles.filterChipHint}>{t('logs.filter_path_empty')}</span>
-                    ) : (
-                      filters.pathOptions.map(({ path, count }) => {
-                        const active = filters.pathFilters.includes(path);
-                        return (
-                          <button
-                            key={path}
-                            type="button"
-                            className={`${styles.filterChip} ${active ? styles.filterChipActive : ''}`}
-                            onClick={() => filters.togglePathFilter(path)}
-                            aria-pressed={active}
-                            title={path}
-                          >
-                            {path} ({count})
-                          </button>
-                        );
-                      })
-                    )}
-                  </div>
-                </div>
-
+              <div className={styles.filterPanelHeader}>
                 <Button
-                  variant="ghost"
+                  type="button"
+                  variant="secondary"
                   size="sm"
-                  onClick={filters.clearStructuredFilters}
-                  disabled={!filters.hasStructuredFilters}
+                  className={styles.filterPanelToggle}
+                  onClick={() => setStructuredFiltersExpanded((prev) => !prev)}
+                  aria-expanded={structuredFiltersExpanded}
+                  aria-controls={structuredFiltersPanelId}
+                  title={
+                    structuredFiltersExpanded
+                      ? t('logs.filter_panel_collapse')
+                      : t('logs.filter_panel_expand')
+                  }
                 >
-                  {t('logs.clear_filters')}
+                  <span className={styles.filterPanelButtonContent}>
+                    <IconSlidersHorizontal size={16} />
+                    <span>{t('logs.filter_panel_title')}</span>
+                    {structuredFilterCount > 0 && (
+                      <span className={styles.filterPanelCount}>
+                        {t('logs.filter_panel_active_count', { count: structuredFilterCount })}
+                      </span>
+                    )}
+                    {structuredFiltersExpanded ? (
+                      <IconChevronUp size={16} />
+                    ) : (
+                      <IconChevronDown size={16} />
+                    )}
+                  </span>
                 </Button>
               </div>
 
+              {structuredFiltersExpanded && (
+                <div id={structuredFiltersPanelId} className={styles.structuredFilters}>
+                  <div className={styles.filterChipGroup}>
+                    <span className={styles.filterChipLabel}>{t('logs.filter_method')}</span>
+                    <div className={styles.filterChipList}>
+                      {HTTP_METHODS.map((method) => {
+                        const active = filters.methodFilters.includes(method);
+                        const count = filters.methodCounts[method] ?? 0;
+                        return (
+                          <button
+                            key={method}
+                            type="button"
+                            className={`${styles.filterChip} ${active ? styles.filterChipActive : ''}`}
+                            onClick={() => filters.toggleMethodFilter(method)}
+                            disabled={count === 0 && !active}
+                            aria-pressed={active}
+                          >
+                            {method} ({count})
+                          </button>
+                        );
+                      })}
+                    </div>
+                  </div>
+
+                  <div className={styles.filterChipGroup}>
+                    <span className={styles.filterChipLabel}>{t('logs.filter_status')}</span>
+                    <div className={styles.filterChipList}>
+                      {STATUS_GROUPS.map((statusGroup) => {
+                        const active = filters.statusFilters.includes(statusGroup);
+                        const count = filters.statusCounts[statusGroup] ?? 0;
+                        return (
+                          <button
+                            key={statusGroup}
+                            type="button"
+                            className={`${styles.filterChip} ${active ? styles.filterChipActive : ''}`}
+                            onClick={() => filters.toggleStatusFilter(statusGroup)}
+                            disabled={count === 0 && !active}
+                            aria-pressed={active}
+                          >
+                            {t(`logs.filter_status_${statusGroup}`)} ({count})
+                          </button>
+                        );
+                      })}
+                    </div>
+                  </div>
+
+                  <div className={styles.filterChipGroup}>
+                    <span className={styles.filterChipLabel}>{t('logs.filter_path')}</span>
+                    <div className={styles.filterChipList}>
+                      {filters.pathOptions.length === 0 ? (
+                        <span className={styles.filterChipHint}>{t('logs.filter_path_empty')}</span>
+                      ) : (
+                        filters.pathOptions.map(({ path, count }) => {
+                          const active = filters.pathFilters.includes(path);
+                          return (
+                            <button
+                              key={path}
+                              type="button"
+                              className={`${styles.filterChip} ${active ? styles.filterChipActive : ''}`}
+                              onClick={() => filters.togglePathFilter(path)}
+                              aria-pressed={active}
+                              title={path}
+                            >
+                              {path} ({count})
+                            </button>
+                          );
+                        })
+                      )}
+                    </div>
+                  </div>
+
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={filters.clearStructuredFilters}
+                    disabled={!filters.hasStructuredFilters}
+                  >
+                    {t('logs.clear_filters')}
+                  </Button>
+                </div>
+              )}
+
               <ToggleSwitch
                 checked={hideManagementLogs}
                 onChange={setHideManagementLogs}

src/services/api/authFiles.ts

@@ -9,12 +9,39 @@ import type { OAuthModelAliasEntry } from '@/types';
 type StatusError = { status?: number };
 type AuthFileStatusResponse = { status: string; disabled: boolean };
 
+export const AUTH_FILE_INVALID_JSON_OBJECT_ERROR = 'AUTH_FILE_INVALID_JSON_OBJECT';
+
 const getStatusCode = (err: unknown): number | undefined => {
   if (!err || typeof err !== 'object') return undefined;
   if ('status' in err) return (err as StatusError).status;
   return undefined;
 };
 
+const parseAuthFileJsonObject = (rawText: string): Record<string, unknown> => {
+  const trimmed = rawText.trim();
+
+  let parsed: unknown;
+  try {
+    parsed = JSON.parse(trimmed) as unknown;
+  } catch {
+    throw new Error(AUTH_FILE_INVALID_JSON_OBJECT_ERROR);
+  }
+
+  if (!parsed || typeof parsed !== 'object' || Array.isArray(parsed)) {
+    throw new Error(AUTH_FILE_INVALID_JSON_OBJECT_ERROR);
+  }
+
+  return { ...(parsed as Record<string, unknown>) };
+};
+
+const saveAuthFileText = async (name: string, text: string) => {
+  const file = new File([text], name, { type: 'application/json' });
+  await authFilesApi.upload(file);
+};
+
+export const isAuthFileInvalidJsonObjectError = (err: unknown): boolean =>
+  err instanceof Error && err.message === AUTH_FILE_INVALID_JSON_OBJECT_ERROR;
+
 const normalizeOauthExcludedModels = (payload: unknown): Record<string, string[]> => {
   if (!payload || typeof payload !== 'object') return {};
 
@@ -126,6 +153,16 @@ export const authFilesApi = {
     return blob.text();
   },
 
+  async downloadJsonObject(name: string): Promise<Record<string, unknown>> {
+    const rawText = await authFilesApi.downloadText(name);
+    return parseAuthFileJsonObject(rawText);
+  },
+
+  saveText: (name: string, text: string) => saveAuthFileText(name, text),
+
+  saveJsonObject: (name: string, json: Record<string, unknown>) =>
+    saveAuthFileText(name, JSON.stringify(json)),
+
   // OAuth 排除模型
   async getOauthExcludedModels(): Promise<Record<string, string[]>> {
     const data = await apiClient.get('/oauth-excluded-models');

src/stores/useAuthStore.ts

@@ -10,6 +10,7 @@ import { STORAGE_KEY_AUTH } from '@/utils/constants';
 import { secureStorage } from '@/services/storage/secureStorage';
 import { apiClient } from '@/services/api/client';
 import { useConfigStore } from './useConfigStore';
+import { useUsageStatsStore } from './useUsageStatsStore';
 import { detectApiBaseFromLocation, normalizeApiBase } from '@/utils/connection';
 
 interface AuthStoreState extends AuthState {
@@ -136,6 +137,7 @@ export const useAuthStore = create<AuthStoreState>()(
       logout: () => {
         restoreSessionPromise = null;
         useConfigStore.getState().clearCache();
+        useUsageStatsStore.getState().clearUsageStats();
         set({
           isAuthenticated: false,
           apiBase: '',

src/stores/useThemeStore.ts

@@ -25,12 +25,28 @@ const getSystemTheme = (): ResolvedTheme => {
   return 'light';
 };
 
-const applyTheme = (resolved: ResolvedTheme) => {
+const resolveTheme = (theme: Theme): ResolvedTheme | 'white' => {
+  if (theme === 'auto') {
+    return getSystemTheme();
+  }
+  if (theme === 'white') {
+    return 'white';
+  }
+  return theme;
+};
+
+const applyTheme = (resolved: ResolvedTheme | 'white') => {
   if (resolved === 'dark') {
     document.documentElement.setAttribute('data-theme', 'dark');
-  } else {
-    document.documentElement.removeAttribute('data-theme');
+    return;
   }
+
+  if (resolved === 'white') {
+    document.documentElement.setAttribute('data-theme', 'white');
+    return;
+  }
+
+  document.documentElement.removeAttribute('data-theme');
 };
 
 export const useThemeStore = create<ThemeState>()(
@@ -40,14 +56,17 @@ export const useThemeStore = create<ThemeState>()(
       resolvedTheme: 'light',
 
       setTheme: (theme) => {
-        const resolved: ResolvedTheme = theme === 'auto' ? getSystemTheme() : theme;
+        const resolved = resolveTheme(theme);
         applyTheme(resolved);
-        set({ theme, resolvedTheme: resolved });
+        set({
+          theme,
+          resolvedTheme: resolved === 'white' ? 'light' : resolved,
+        });
       },
 
       cycleTheme: () => {
         const { theme, setTheme } = get();
-        const order: Theme[] = ['light', 'dark', 'auto'];
+        const order: Theme[] = ['light', 'white', 'dark', 'auto'];
         const currentIndex = order.indexOf(theme);
         const nextTheme = order[(currentIndex + 1) % order.length];
         setTheme(nextTheme);

src/styles/layout.scss

@@ -81,7 +81,9 @@
     cursor: pointer;
     font-size: 16px;
     font-weight: bold;
-    transition: background $transition-fast, color $transition-fast;
+    transition:
+      background $transition-fast,
+      color $transition-fast;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -118,7 +120,10 @@
       max-width: 320px;
       opacity: 1;
       transform: translateX(0);
-      transition: max-width 0.4s ease, opacity 0.4s ease, transform 0.4s ease;
+      transition:
+        max-width 0.4s ease,
+        opacity 0.4s ease,
+        transform 0.4s ease;
     }
 
     .brand-abbr {
@@ -126,7 +131,9 @@
       transform: translateX(12px);
       opacity: 0;
       pointer-events: none;
-      transition: opacity 0.4s ease, transform 0.4s ease;
+      transition:
+        opacity 0.4s ease,
+        transform 0.4s ease;
     }
 
     &.collapsed {
@@ -220,7 +227,9 @@
         display: flex;
         align-items: center;
         justify-content: space-between;
-        transition: background-color $transition-fast, color $transition-fast;
+        transition:
+          background-color $transition-fast,
+          color $transition-fast;
 
         &:hover {
           background: var(--bg-secondary);
@@ -251,6 +260,125 @@
       }
     }
 
+    .theme-menu {
+      position: relative;
+      display: inline-flex;
+      align-items: center;
+
+      .theme-menu-popover {
+        position: absolute;
+        top: calc(100% + 8px);
+        right: 0;
+        z-index: $z-dropdown;
+        padding: $spacing-sm $spacing-sm $spacing-xs;
+        display: flex;
+        gap: $spacing-xs;
+        width: max-content;
+        max-width: calc(100vw - 16px);
+      }
+
+      .theme-card {
+        border: 2px solid transparent;
+        border-radius: $radius-md;
+        background: transparent;
+        cursor: pointer;
+        padding: 6px 6px 4px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 4px;
+        transition:
+          border-color $transition-fast,
+          background-color $transition-fast;
+
+        &:hover {
+          background: var(--bg-secondary);
+        }
+
+        &:focus-visible {
+          outline: none;
+          box-shadow: 0 0 0 2px rgba($primary-color, 0.22);
+        }
+
+        &.active {
+          border-color: var(--primary-color);
+        }
+      }
+
+      .theme-card-preview {
+        width: 72px;
+        height: 52px;
+        border-radius: $radius-sm;
+        overflow: hidden;
+        display: flex;
+        flex-direction: column;
+      }
+
+      .theme-card-header {
+        height: 10px;
+        flex-shrink: 0;
+      }
+
+      .theme-card-body {
+        flex: 1;
+        display: flex;
+        min-height: 0;
+      }
+
+      .theme-card-sidebar {
+        width: 16px;
+        flex-shrink: 0;
+      }
+
+      .theme-card-content {
+        flex: 1;
+        padding: 5px 8px;
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+        justify-content: center;
+      }
+
+      .theme-card-line {
+        height: 3px;
+        border-radius: 1px;
+
+        &.short {
+          width: 60%;
+        }
+      }
+
+      .theme-card-label {
+        font-size: 11px;
+        color: var(--text-primary);
+        font-weight: 500;
+        white-space: nowrap;
+      }
+
+      @media (max-width: $breakpoint-mobile) {
+        .theme-menu-popover {
+          right: 0;
+          left: auto;
+          transform: none;
+          display: grid;
+          grid-template-columns: repeat(2, minmax(0, 1fr));
+          justify-content: stretch;
+          width: min(188px, calc(100vw - 16px));
+        }
+
+        .theme-card {
+          width: 100%;
+          min-width: 0;
+        }
+
+        .theme-card-label {
+          white-space: normal;
+          text-align: center;
+          line-height: 1.2;
+        }
+      }
+    }
+
     svg {
       display: block;
     }
@@ -322,7 +450,9 @@
   display: flex;
   flex-direction: column;
   gap: $spacing-lg;
-  transition: width $transition-normal, transform $transition-normal;
+  transition:
+    width $transition-normal,
+    transform $transition-normal;
   overflow-y: auto;
   flex-shrink: 0;
   height: 100%;
@@ -347,22 +477,33 @@
   .nav-item {
     padding: 10px 12px;
     border-radius: $radius-md;
+    border: 1px solid transparent;
     color: var(--text-primary);
     font-weight: 600;
     display: flex;
     align-items: center;
     gap: $spacing-sm;
     cursor: pointer;
-    transition: background $transition-fast, color $transition-fast;
+    transition:
+      background $transition-fast,
+      color $transition-fast;
 
     .nav-icon {
-      width: 20px;
-      height: 20px;
+      width: 28px;
+      height: 28px;
       display: inline-flex;
       align-items: center;
       justify-content: center;
       flex-shrink: 0;
-      opacity: 0.9;
+      opacity: 0.96;
+      border-radius: 7px;
+      background: linear-gradient(180deg, rgb(255 255 255 / 0.18), rgb(255 255 255 / 0))
+        var(--bg-secondary);
+      box-shadow: inset 0 0 0 1px var(--border-primary);
+      transition:
+        background $transition-fast,
+        box-shadow $transition-fast,
+        color $transition-fast;
 
       svg {
         width: 18px;
@@ -379,12 +520,24 @@
 
     &:hover {
       background: var(--bg-secondary);
+
+      .nav-icon {
+        background: linear-gradient(180deg, rgb(255 255 255 / 0.24), rgb(255 255 255 / 0))
+          var(--bg-primary);
+        box-shadow: inset 0 0 0 1px var(--border-hover);
+      }
     }
 
     &.active {
       background: rgba($primary-color, 0.14);
       color: var(--primary-color);
       border: 1px solid rgba($primary-color, 0.35);
+
+      .nav-icon {
+        background: linear-gradient(180deg, rgb(255 255 255 / 0.22), rgb(255 255 255 / 0))
+          rgba($primary-color, 0.1);
+        box-shadow: inset 0 0 0 1px rgba($primary-color, 0.26);
+      }
     }
   }
 

src/styles/themes.scss

@@ -56,6 +56,59 @@
   --accent-tertiary: var(--bg-tertiary);
 }
 
+// 纯白主题
+[data-theme='white'] {
+  --bg-secondary: #ffffff;
+  --bg-primary: #ffffff;
+  --bg-tertiary: #f6f6f6;
+  --bg-hover: var(--bg-tertiary);
+  --bg-quinary: #ffffff;
+  --bg-error-light: rgba(198, 87, 70, 0.08);
+
+  --text-primary: #2d2a26;
+  --text-secondary: #6d6760;
+  --text-tertiary: #a29c95;
+  --text-quaternary: #c0bab3;
+  --text-muted: var(--text-tertiary);
+
+  --border-color: #e5e5e5;
+  --border-secondary: var(--border-color);
+  --border-primary: #d9d9d9;
+  --border-hover: #cccccc;
+
+  --primary-color: #8b8680;
+  --primary-hover: #7f7a74;
+  --primary-active: #726d67;
+  --primary-contrast: #ffffff;
+
+  --success-color: #10b981;
+  --warning-color: #c65746;
+  --error-color: #c65746;
+  --danger-color: var(--error-color);
+  --info-color: var(--primary-color);
+
+  --warning-bg: rgba(198, 87, 70, 0.12);
+  --warning-border: rgba(198, 87, 70, 0.35);
+  --warning-text: var(--warning-color);
+
+  --success-badge-bg: #d1fae5;
+  --success-badge-text: #065f46;
+  --success-badge-border: #6ee7b7;
+
+  --failure-badge-bg: rgba(198, 87, 70, 0.14);
+  --failure-badge-text: #8a3a30;
+  --failure-badge-border: rgba(198, 87, 70, 0.35);
+
+  --count-badge-bg: rgba(139, 134, 128, 0.18);
+  --count-badge-text: var(--primary-active);
+
+  --shadow: 0 1px 2px 0 rgb(0 0 0 / 0.08);
+  --shadow-lg: 0 10px 18px -3px rgb(0 0 0 / 0.1);
+
+  --radius-md: 8px;
+  --accent-tertiary: var(--bg-tertiary);
+}
+
 // 深色主题（#191919）
 [data-theme='dark'] {
   // 极简暖灰：深色模式（提升对比度与层级）

src/types/common.ts

@@ -2,7 +2,7 @@
  * 通用类型定义
  */
 
-export type Theme = 'light' | 'dark' | 'auto';
+export type Theme = 'light' | 'white' | 'dark' | 'auto';
 
 export type Language = 'zh-CN' | 'en' | 'ru';