feat(styles): refactor filter section layout and improve filter tag styling

src/components/config/VisualConfigEditor.module.scss

@@ -232,20 +232,74 @@
 }
 
 .sidebar {
-  position: sticky;
-  top: 88px;
+  position: relative;
   align-self: start;
 
   @media (max-width: 1024px) {
     position: static;
   }
+
+  @include mobile {
+    display: none;
+  }
+}
+
+.sidebarPlaceholder {
+  min-height: 1px;
 }
 
 .sidebarRail {
+  max-height: calc(100vh - var(--header-height, 64px) - 36px);
+  overflow-y: auto;
+  overflow-x: hidden;
   padding: 12px;
   border-radius: 26px;
   border: 1px solid color-mix(in srgb, var(--border-color) 84%, transparent);
-  background: color-mix(in srgb, var(--bg-primary) 70%, transparent);
+  background: color-mix(in srgb, var(--bg-primary) 76%, transparent);
+  backdrop-filter: blur(14px);
+  -webkit-backdrop-filter: blur(14px);
+  box-shadow: 0 24px 56px -34px rgba(0, 0, 0, 0.42);
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+.floatingSidebarContainer {
+  position: fixed;
+  left: var(--visual-config-floating-left, 16px);
+  top: var(--visual-config-floating-top, 120px);
+  width: var(--visual-config-floating-width, 280px);
+  max-height: var(--visual-config-floating-max-height, calc(100vh - 136px));
+  z-index: 45;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.18s ease;
+
+  @media (max-width: 1024px) {
+    display: none;
+  }
+}
+
+.floatingSidebarRail {
+  max-height: inherit;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: 12px;
+  border-radius: 26px;
+  border: 1px solid color-mix(in srgb, var(--border-color) 84%, transparent);
+  background: color-mix(in srgb, var(--bg-primary) 76%, transparent);
+  backdrop-filter: blur(14px);
+  -webkit-backdrop-filter: blur(14px);
+  box-shadow: 0 24px 56px -34px rgba(0, 0, 0, 0.42);
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
 }
 
 .navList {

src/components/config/VisualConfigEditor.tsx

@@ -1,4 +1,5 @@
 import {
+  useLayoutEffect,
   useCallback,
   useEffect,
   useId,
@@ -8,6 +9,7 @@ import {
   type ComponentType,
   type ReactNode,
 } from 'react';
+import { createPortal } from 'react-dom';
 import { useTranslation } from 'react-i18next';
 import { Input } from '@/components/ui/Input';
 import { Select } from '@/components/ui/Select';
@@ -24,6 +26,7 @@ import {
   type IconProps,
 } from '@/components/ui/icons';
 import { ConfigSection } from '@/components/config/ConfigSection';
+import { useMediaQuery } from '@/hooks/useMediaQuery';
 import type {
   PayloadFilterRule,
   PayloadParamValidationErrorCode,
@@ -174,6 +177,8 @@ export function VisualConfigEditor({
   onChange,
 }: VisualConfigEditorProps) {
   const { t } = useTranslation();
+  const isMobile = useMediaQuery('(max-width: 768px)');
+  const isFloatingSidebar = useMediaQuery('(min-width: 1025px)');
   const routingStrategyLabelId = useId();
   const routingStrategyHintId = `${routingStrategyLabelId}-hint`;
   const keepaliveInputId = useId();
@@ -183,6 +188,9 @@ export function VisualConfigEditor({
   const nonstreamKeepaliveHintId = `${nonstreamKeepaliveInputId}-hint`;
   const nonstreamKeepaliveErrorId = `${nonstreamKeepaliveInputId}-error`;
   const [activeSectionId, setActiveSectionId] = useState<VisualSectionId>('server');
+  const workspaceRef = useRef<HTMLDivElement | null>(null);
+  const sidebarAnchorRef = useRef<HTMLElement | null>(null);
+  const floatingSidebarRef = useRef<HTMLDivElement | null>(null);
   const sectionRefs = useRef<Partial<Record<VisualSectionId, HTMLElement | null>>>({});
 
   const isKeepaliveDisabled =
@@ -348,6 +356,130 @@ export function VisualConfigEditor({
     sectionRefs.current[sectionId]?.scrollIntoView({ behavior: 'smooth', block: 'start' });
   }, []);
 
+  useLayoutEffect(() => {
+    const floatingElement = floatingSidebarRef.current;
+    const anchorElement = sidebarAnchorRef.current;
+    const workspaceElement = workspaceRef.current;
+    if (!floatingElement) return undefined;
+
+    const clearFloatingStyles = () => {
+      floatingElement.style.removeProperty('--visual-config-floating-left');
+      floatingElement.style.removeProperty('--visual-config-floating-top');
+      floatingElement.style.removeProperty('--visual-config-floating-width');
+      floatingElement.style.removeProperty('--visual-config-floating-max-height');
+      floatingElement.style.removeProperty('opacity');
+      floatingElement.style.removeProperty('pointer-events');
+    };
+
+    if (isMobile || !isFloatingSidebar || !anchorElement || !workspaceElement) {
+      clearFloatingStyles();
+      return undefined;
+    }
+
+    const getHeaderHeight = () => {
+      const header = document.querySelector('.main-header') as HTMLElement | null;
+      if (header) return header.getBoundingClientRect().height;
+
+      const raw = getComputedStyle(document.documentElement).getPropertyValue('--header-height');
+      const parsed = Number.parseFloat(raw);
+      return Number.isFinite(parsed) ? parsed : 64;
+    };
+
+    const getContentScroller = () => document.querySelector('.content') as HTMLElement | null;
+    let frameId = 0;
+
+    const updateFloatingPosition = () => {
+      frameId = 0;
+
+      const anchorRect = anchorElement.getBoundingClientRect();
+      const workspaceRect = workspaceElement.getBoundingClientRect();
+      const floatingHeight = floatingElement.getBoundingClientRect().height;
+      const stickyTop = getHeaderHeight() + 20;
+      const viewportPadding = 16;
+      const maxTop = workspaceRect.bottom - floatingHeight;
+      const unclampedTop = Math.min(Math.max(anchorRect.top, stickyTop), maxTop);
+      const top = Math.max(unclampedTop, viewportPadding);
+      const left = Math.max(anchorRect.left, viewportPadding);
+      const width = Math.max(
+        Math.min(anchorRect.width, window.innerWidth - left - viewportPadding),
+        220
+      );
+      const maxHeight = Math.max(window.innerHeight - top - viewportPadding, 160);
+      const isVisible = workspaceRect.bottom > stickyTop + 24 && anchorRect.top < window.innerHeight;
+
+      floatingElement.style.setProperty('--visual-config-floating-left', `${left}px`);
+      floatingElement.style.setProperty('--visual-config-floating-top', `${top}px`);
+      floatingElement.style.setProperty('--visual-config-floating-width', `${width}px`);
+      floatingElement.style.setProperty('--visual-config-floating-max-height', `${maxHeight}px`);
+      floatingElement.style.opacity = isVisible ? '1' : '0';
+      floatingElement.style.pointerEvents = isVisible ? 'auto' : 'none';
+    };
+
+    const requestPositionUpdate = () => {
+      if (frameId) cancelAnimationFrame(frameId);
+      frameId = requestAnimationFrame(updateFloatingPosition);
+    };
+
+    requestPositionUpdate();
+
+    const contentScroller = getContentScroller();
+    window.addEventListener('resize', requestPositionUpdate);
+    window.addEventListener('scroll', requestPositionUpdate, { passive: true });
+    contentScroller?.addEventListener('scroll', requestPositionUpdate, { passive: true });
+
+    const resizeObserver =
+      typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(requestPositionUpdate);
+    resizeObserver?.observe(anchorElement);
+    resizeObserver?.observe(workspaceElement);
+    resizeObserver?.observe(floatingElement);
+
+    return () => {
+      if (frameId) cancelAnimationFrame(frameId);
+      resizeObserver?.disconnect();
+      window.removeEventListener('resize', requestPositionUpdate);
+      window.removeEventListener('scroll', requestPositionUpdate);
+      contentScroller?.removeEventListener('scroll', requestPositionUpdate);
+      clearFloatingStyles();
+    };
+  }, [isFloatingSidebar, isMobile]);
+
+  const navContent = (
+    <div className={styles.navList}>
+      {sections.map((section, index) => {
+        const Icon = section.icon;
+
+        return (
+          <button
+            key={section.id}
+            type="button"
+            className={`${styles.navButton} ${
+              activeSectionId === section.id ? styles.navButtonActive : ''
+            }`}
+            onClick={() => handleSectionJump(section.id)}
+          >
+            <span className={styles.navIndex}>{String(index + 1).padStart(2, '0')}</span>
+            <span className={styles.navMain}>
+              <span className={styles.navHeadingRow}>
+                <span className={styles.navLabelWrap}>
+                  <span className={styles.navIcon}>
+                    <Icon size={14} />
+                  </span>
+                  <span className={styles.navLabel}>{section.title}</span>
+                </span>
+                {section.errorCount > 0 ? (
+                  <span className={styles.navBadge} aria-hidden="true">
+                    {section.errorCount}
+                  </span>
+                ) : null}
+              </span>
+              <span className={styles.navDescription}>{section.description}</span>
+            </span>
+          </button>
+        );
+      })}
+    </div>
+  );
+
   return (
     <div className={styles.visualEditor}>
       <div className={styles.overview}>
@@ -395,44 +527,13 @@ export function VisualConfigEditor({
         </div>
       </div>
 
-      <div className={styles.workspace}>
-        <aside className={styles.sidebar}>
-          <div className={styles.sidebarRail}>
-            <div className={styles.navList}>
-              {sections.map((section, index) => {
-                const Icon = section.icon;
-
-                return (
-                  <button
-                    key={section.id}
-                    type="button"
-                    className={`${styles.navButton} ${
-                      activeSectionId === section.id ? styles.navButtonActive : ''
-                    }`}
-                    onClick={() => handleSectionJump(section.id)}
-                  >
-                    <span className={styles.navIndex}>{String(index + 1).padStart(2, '0')}</span>
-                    <span className={styles.navMain}>
-                      <span className={styles.navHeadingRow}>
-                        <span className={styles.navLabelWrap}>
-                          <span className={styles.navIcon}>
-                            <Icon size={14} />
-                          </span>
-                          <span className={styles.navLabel}>{section.title}</span>
-                        </span>
-                        {section.errorCount > 0 ? (
-                          <span className={styles.navBadge} aria-hidden="true">
-                            {section.errorCount}
-                          </span>
-                        ) : null}
-                      </span>
-                      <span className={styles.navDescription}>{section.description}</span>
-                    </span>
-                  </button>
-                );
-              })}
-            </div>
-          </div>
+      <div ref={workspaceRef} className={styles.workspace}>
+        <aside ref={sidebarAnchorRef} className={styles.sidebar}>
+          {isFloatingSidebar ? (
+            <div className={styles.sidebarPlaceholder} aria-hidden="true" />
+          ) : (
+            <div className={styles.sidebarRail}>{navContent}</div>
+          )}
         </aside>
 
         <div className={styles.sections}>
@@ -940,6 +1041,15 @@ export function VisualConfigEditor({
           </ConfigSection>
         </div>
       </div>
+
+      {!isMobile && isFloatingSidebar && typeof document !== 'undefined'
+        ? createPortal(
+            <div ref={floatingSidebarRef} className={styles.floatingSidebarContainer}>
+              <div className={styles.floatingSidebarRail}>{navContent}</div>
+            </div>,
+            document.body
+          )
+        : null}
     </div>
   );
 }

src/features/authFiles/constants.ts

@@ -45,43 +45,57 @@ export const INTEGER_STRING_PATTERN = /^[+-]?\d+$/;
 export const TRUTHY_TEXT_VALUES = new Set(['true', '1', 'yes', 'y', 'on']);
 export const FALSY_TEXT_VALUES = new Set(['false', '0', 'no', 'n', 'off']);
 
-// 标签类型颜色配置（对齐重构前 styles.css 的 file-type-badge 颜色）
+// 标签类型颜色配置 — 基于各提供商 Logo 品牌色调配，确保彼此不重复
 export const TYPE_COLORS: Record<string, TypeColorSet> = {
+  // Qwen logo: 紫罗兰渐变 #6336E7 → #6F69F7
   qwen: {
-    light: { bg: '#e8f5e9', text: '#2e7d32' },
-    dark: { bg: '#1b5e20', text: '#81c784' },
+    light: { bg: '#ede5fd', text: '#5530c7' },
+    dark: { bg: '#36208a', text: '#b5a3f0' },
   },
+  // Kimi logo: 亮蓝 #027AFF（K字 + 蓝色圆点）
   kimi: {
-    light: { bg: '#fff4e5', text: '#ad6800' },
-    dark: { bg: '#7c4a03', text: '#ffd591' },
+    light: { bg: '#dce8ff', text: '#0560cf' },
+    dark: { bg: '#003880', text: '#70b5ff' },
   },
+  // Gemini logo: 多色蓝 #3186FF（偏柔和的蓝）
   gemini: {
     light: { bg: '#e3f2fd', text: '#1565c0' },
     dark: { bg: '#0d47a1', text: '#64b5f6' },
   },
+  // Gemini-CLI: 同 Gemini 图标，用更深的海军蓝区分
   'gemini-cli': {
-    light: { bg: '#e7efff', text: '#1e4fa3' },
+    light: { bg: '#e0e8ff', text: '#1e4fa3' },
     dark: { bg: '#1c3f73', text: '#a8c7ff' },
   },
+  // AI Studio: 使用 Gemini 图标，中性灰标签
   aistudio: {
     light: { bg: '#f0f2f5', text: '#2f343c' },
     dark: { bg: '#373c42', text: '#cfd3db' },
   },
+  // Claude logo: 陶土橙 #D97757
   claude: {
-    light: { bg: '#fce4ec', text: '#c2185b' },
-    dark: { bg: '#880e4f', text: '#f48fb1' },
+    light: { bg: '#fbece4', text: '#c05621' },
+    dark: { bg: '#5e2c14', text: '#e8a882' },
   },
+  // Codex logo: 靛蓝渐变 #B1A7FF → #3941FF
   codex: {
-    light: { bg: '#fff3e0', text: '#ef6c00' },
-    dark: { bg: '#e65100', text: '#ffb74d' },
+    light: { bg: '#eae7ff', text: '#3538d4' },
+    dark: { bg: '#262395', text: '#b5b0ff' },
   },
+  // Antigravity logo: 多色（主色 #3789F9 蓝 + #53A89A 青绿），用青色区分
   antigravity: {
     light: { bg: '#e0f7fa', text: '#006064' },
     dark: { bg: '#004d40', text: '#80deea' },
   },
+  // iFlow logo: 品红紫渐变 #5C5CFF → #AE5CFF，偏品红以区别于 Qwen 的紫罗兰
   iflow: {
-    light: { bg: '#f3e5f5', text: '#7b1fa2' },
-    dark: { bg: '#4a148c', text: '#ce93d8' },
+    light: { bg: '#f5e3fc', text: '#9025c8' },
+    dark: { bg: '#521490', text: '#d49cf5' },
+  },
+  // Vertex logo: Google 蓝 #4285F4
+  vertex: {
+    light: { bg: '#e4edfd', text: '#2b5fbc' },
+    dark: { bg: '#1a3d80', text: '#89b3f7' },
   },
   empty: {
     light: { bg: '#f5f5f5', text: '#616161' },

src/pages/AuthFilesPage.module.scss

@@ -80,127 +80,41 @@
 
 // 筛选区域
 .filterSection {
-  display: grid;
-  grid-template-columns: 248px minmax(0, 1fr);
-  gap: 20px;
-  align-items: start;
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-md;
   margin-bottom: $spacing-lg;
-
-  @include tablet {
-    grid-template-columns: 220px minmax(0, 1fr);
-  }
-
-  @include mobile {
-    grid-template-columns: 1fr;
-    gap: $spacing-md;
-  }
 }
 
 .filterRail {
-  position: sticky;
-  top: 16px;
   display: flex;
   flex-direction: column;
-  gap: 14px;
-  padding: 16px;
-  border-radius: 18px;
+  gap: 12px;
+  padding: 14px 16px;
+  border-radius: 16px;
   border: 1px solid color-mix(in srgb, var(--border-color) 82%, transparent);
   background:
     linear-gradient(180deg, color-mix(in srgb, var(--bg-secondary) 94%, transparent), transparent),
     color-mix(in srgb, var(--bg-primary) 90%, transparent);
   box-shadow:
     inset 0 1px 0 color-mix(in srgb, #fff 52%, transparent),
-    0 18px 32px -30px rgba(0, 0, 0, 0.35);
-  align-self: start;
+    0 12px 24px -22px rgba(0, 0, 0, 0.25);
 
   @include mobile {
-    position: static;
-    padding: 14px;
+    padding: 12px;
   }
 }
 
-.filterRailHeader {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.filterRailEyebrow {
-  font-size: 11px;
-  font-weight: 700;
-  color: var(--text-tertiary);
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-}
-
-.filterRailHero {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.filterRailHeroTitle {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  min-width: 0;
-}
-
-.filterRailHeroIcon {
-  width: 42px;
-  height: 42px;
-  flex: 0 0 auto;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 14px;
-  border: 1px solid color-mix(in srgb, var(--border-color) 82%, transparent);
-  background: color-mix(in srgb, var(--bg-secondary) 88%, transparent);
-}
-
-.filterRailHeroIconImage {
-  width: 22px;
-  height: 22px;
-  object-fit: contain;
-}
-
-.filterRailHeroIconFallback {
-  font-size: 18px;
-  font-weight: 700;
-  line-height: 1;
-  color: var(--text-primary);
-}
 
 .filterAllIconWrap {
   position: relative;
-  overflow: hidden;
   border-color: color-mix(in srgb, var(--primary-color) 20%, var(--border-color));
-  background:
-    radial-gradient(
-      circle at 30% 28%,
-      color-mix(in srgb, var(--primary-color) 22%, #ffffff),
-      transparent 58%
-    ),
-    linear-gradient(
-      145deg,
-      color-mix(in srgb, var(--bg-secondary) 94%, var(--primary-color) 8%),
-      color-mix(in srgb, var(--bg-primary) 92%, var(--primary-color) 5%)
-    );
-  box-shadow:
-    inset 0 1px 0 color-mix(in srgb, #fff 54%, transparent),
-    0 10px 22px -18px color-mix(in srgb, var(--primary-color) 50%, transparent);
-}
-
-.filterAllIconWrap::after {
-  content: '';
-  position: absolute;
-  inset: auto 7px 7px auto;
-  width: 10px;
-  height: 10px;
-  border-radius: 999px;
-  background: color-mix(in srgb, var(--primary-color) 18%, transparent);
-  filter: blur(1px);
-  opacity: 0.9;
+  background: linear-gradient(
+    145deg,
+    color-mix(in srgb, var(--bg-secondary) 94%, var(--primary-color) 8%),
+    color-mix(in srgb, var(--bg-primary) 92%, var(--primary-color) 5%)
+  );
+  box-shadow: 0 10px 22px -18px color-mix(in srgb, var(--primary-color) 50%, transparent);
 }
 
 .filterAllIcon {
@@ -210,63 +124,6 @@
   color: color-mix(in srgb, var(--primary-color) 70%, var(--text-primary));
 }
 
-.filterRailHeroText {
-  display: flex;
-  flex-direction: column;
-  gap: 3px;
-  min-width: 0;
-}
-
-.filterRailTitle {
-  font-size: 16px;
-  font-weight: 700;
-  color: var(--text-primary);
-  line-height: 1.2;
-  @include text-ellipsis;
-}
-
-.filterRailDescription {
-  font-size: 12px;
-  color: var(--text-secondary);
-  line-height: 1.35;
-}
-
-.filterRailMeta {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  flex-wrap: wrap;
-}
-
-.filterRailCount {
-  display: inline-grid;
-  place-items: center;
-  min-width: 38px;
-  height: 30px;
-  padding: 0 10px;
-  border-radius: 999px;
-  background: color-mix(in srgb, var(--primary-color) 16%, transparent);
-  color: var(--text-primary);
-  font-size: 13px;
-  font-weight: 700;
-  font-variant-numeric: tabular-nums;
-  line-height: 1;
-  text-align: center;
-}
-
-.filterRailMode {
-  display: inline-flex;
-  align-items: center;
-  min-height: 30px;
-  padding: 6px 10px;
-  border-radius: 999px;
-  border: 1px solid var(--warning-border);
-  background: var(--warning-bg);
-  color: var(--warning-text);
-  font-size: 11px;
-  font-weight: 700;
-  line-height: 1.2;
-}
 
 .filterContent {
   display: flex;
@@ -277,24 +134,17 @@
 
 .filterTags {
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
+  flex-wrap: wrap;
   gap: 8px;
-
-  @include mobile {
-    flex-direction: column;
-    overflow: visible;
-    padding-bottom: 0;
-  }
 }
 
 .filterTag {
   display: inline-flex;
   align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-  width: 100%;
-  padding: 10px 12px;
-  border-radius: 14px;
+  gap: 8px;
+  padding: 7px 12px 7px 8px;
+  border-radius: 999px;
   font-size: 13px;
   font-weight: 600;
   line-height: 1.2;
@@ -302,28 +152,18 @@
   background: color-mix(in srgb, var(--filter-surface) 56%, var(--bg-secondary));
   color: var(--text-primary);
   cursor: pointer;
+  white-space: nowrap;
   transition:
     transform $transition-fast,
     border-color $transition-fast,
     background-color $transition-fast,
     box-shadow $transition-fast;
-  text-align: left;
 
   &:hover {
-    transform: translateX(2px);
+    transform: translateY(-1px);
     border-color: color-mix(in srgb, var(--filter-color) 52%, var(--border-color));
     background: color-mix(in srgb, var(--filter-surface) 72%, var(--bg-secondary));
-    box-shadow: 0 14px 24px -24px color-mix(in srgb, var(--filter-color) 65%, transparent);
-  }
-
-  @include mobile {
-    width: 100%;
-    min-width: 0;
-    flex: 1 1 auto;
-
-    &:hover {
-      transform: translateY(-1px);
-    }
+    box-shadow: 0 8px 18px -14px color-mix(in srgb, var(--filter-color) 65%, transparent);
   }
 }
 
@@ -334,9 +174,11 @@
     color-mix(in srgb, var(--filter-surface) 74%, var(--bg-primary)),
     color-mix(in srgb, var(--filter-surface) 44%, var(--bg-secondary))
   );
-  box-shadow:
-    inset 3px 0 0 var(--filter-color),
-    0 16px 30px -26px color-mix(in srgb, var(--filter-color) 58%, transparent);
+  box-shadow: 0 8px 20px -16px color-mix(in srgb, var(--filter-color) 58%, transparent);
+
+  &:hover {
+    transform: translateY(0);
+  }
 }
 
 .filterTagLabel {
@@ -347,20 +189,20 @@
 }
 
 .filterTagIconWrap {
-  width: 34px;
-  height: 34px;
+  width: 28px;
+  height: 28px;
   flex: 0 0 auto;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  border-radius: 12px;
+  border-radius: 9px;
   border: 1px solid color-mix(in srgb, var(--filter-color) 16%, var(--border-color));
   background: color-mix(in srgb, var(--filter-surface) 74%, var(--bg-primary));
 }
 
 .filterTagIcon {
-  width: 18px;
-  height: 18px;
+  width: 16px;
+  height: 16px;
   flex: 0 0 auto;
   object-fit: contain;
 }
@@ -381,13 +223,13 @@
 .filterTagCount {
   display: inline-grid;
   place-items: center;
-  min-width: 34px;
-  height: 28px;
-  padding: 0 10px;
+  min-width: 22px;
+  height: 22px;
+  padding: 0 7px;
   border-radius: 999px;
   background: color-mix(in srgb, var(--filter-color) 14%, transparent);
   color: var(--filter-color);
-  font-size: 12px;
+  font-size: 11px;
   font-weight: 700;
   font-variant-numeric: tabular-nums;
   flex: 0 0 auto;
@@ -654,24 +496,25 @@
   }
 }
 
+// 卡片渐变背景 — 基于 TYPE_COLORS light.bg 转 rgba
 .antigravityCard {
   background-image: linear-gradient(180deg, rgba(224, 247, 250, 0.12), rgba(224, 247, 250, 0));
 }
 
 .claudeCard {
-  background-image: linear-gradient(180deg, rgba(252, 228, 236, 0.18), rgba(252, 228, 236, 0));
+  background-image: linear-gradient(180deg, rgba(251, 236, 228, 0.18), rgba(251, 236, 228, 0));
 }
 
 .codexCard {
-  background-image: linear-gradient(180deg, rgba(255, 243, 224, 0.18), rgba(255, 243, 224, 0));
+  background-image: linear-gradient(180deg, rgba(234, 231, 255, 0.18), rgba(234, 231, 255, 0));
 }
 
 .geminiCliCard {
-  background-image: linear-gradient(180deg, rgba(231, 239, 255, 0.2), rgba(231, 239, 255, 0));
+  background-image: linear-gradient(180deg, rgba(224, 232, 255, 0.2), rgba(224, 232, 255, 0));
 }
 
 .kimiCard {
-  background-image: linear-gradient(180deg, rgba(255, 244, 229, 0.2), rgba(255, 244, 229, 0));
+  background-image: linear-gradient(180deg, rgba(220, 232, 255, 0.2), rgba(220, 232, 255, 0));
 }
 
 .quotaSection {
@@ -830,45 +673,161 @@
 }
 
 .premiumPlanValue {
+  position: relative;
   display: inline-flex;
   align-items: center;
   font-weight: 700;
   font-size: 12px;
   padding: 2px 8px;
   border-radius: 999px;
-  background: linear-gradient(135deg, #fdf3d7, #f0d060);
-  border: 1px solid #e0b830;
-  box-shadow: 0 1px 4px rgba(200, 160, 0, 0.18);
-  color: #7a5c00;
+  overflow: visible;
+  isolation: isolate;
+  background:
+    radial-gradient(
+      circle at 18% 24%,
+      rgba(255, 255, 255, 0.96) 0%,
+      rgba(255, 255, 255, 0.72) 18%,
+      rgba(255, 255, 255, 0) 42%
+    ),
+    linear-gradient(135deg, #fff9e3 0%, #ffe07f 52%, #e0aa14 100%);
+  border: 1px solid rgba(217, 165, 22, 0.72);
+  box-shadow:
+    0 1px 3px rgba(133, 92, 0, 0.16),
+    0 0 0 1px rgba(255, 255, 255, 0.22) inset,
+    0 0 16px rgba(255, 214, 98, 0.28);
+  color: #6b4b00;
+  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);
   text-transform: capitalize;
 
-  @media (dynamic-range: high) {
-    background: linear-gradient(
-      135deg,
-      color(display-p3 0.99 0.95 0.82),
-      color(display-p3 0.97 0.82 0.28)
+  &::before {
+    content: '';
+    position: absolute;
+    inset: -6px -9px;
+    border-radius: inherit;
+    background: radial-gradient(
+      circle at 18% 22%,
+      rgba(255, 255, 255, 0.9) 0%,
+      rgba(255, 237, 158, 0.58) 32%,
+      rgba(255, 215, 91, 0) 72%
     );
-    border-color: color(display-p3 0.9 0.73 0.12);
-    box-shadow: 0 1px 8px color(display-p3 1 0.84 0 / 0.25);
-    color: color(display-p3 0.5 0.38 0);
+    filter: blur(9px);
+    opacity: 0.75;
+    pointer-events: none;
+    z-index: -1;
+  }
+
+  @media (dynamic-range: high) {
+    background:
+      radial-gradient(
+        circle at 18% 24%,
+        color(display-p3 1 0.99 0.94) 0%,
+        color(display-p3 1 0.97 0.82 / 0.82) 18%,
+        color(display-p3 1 0.95 0.7 / 0) 42%
+      ),
+      linear-gradient(
+        135deg,
+        color(display-p3 1 0.98 0.88),
+        color(display-p3 0.99 0.86 0.34),
+        color(display-p3 0.92 0.68 0.05)
+      );
+    border-color: color(display-p3 0.9 0.73 0.12 / 0.85);
+    box-shadow:
+      0 1px 4px color(display-p3 0.45 0.28 0 / 0.22),
+      0 0 0 1px color(display-p3 1 0.98 0.86 / 0.3) inset,
+      0 0 18px color(display-p3 1 0.89 0.2 / 0.36);
+    color: color(display-p3 0.43 0.3 0);
+  }
+
+  @supports (color: #{'color(rec2100-linear 1 1 1)'}) {
+    @media (dynamic-range: high) {
+      dynamic-range-limit: no-limit;
+      box-shadow:
+        0 1px 4px color(display-p3 0.45 0.28 0 / 0.22),
+        0 0 0 1px color(display-p3 1 0.98 0.86 / 0.3) inset,
+        0 0 14px color(display-p3 1 0.89 0.2 / 0.36),
+        0 0 30px #{'color(rec2100-linear 3.6 2.9 0.7 / 0.48)'};
+
+      &::before {
+        background: radial-gradient(
+          circle at 18% 22%,
+          #{'color(rec2100-linear 6.5 6.2 5.4 / 0.92)'} 0%,
+          #{'color(rec2100-linear 2.4 2 0.6 / 0.62)'} 34%,
+          #{'color(rec2100-linear 1 0.85 0.12 / 0)'} 76%
+        );
+        opacity: 0.92;
+      }
+    }
   }
 }
 
 :global([data-theme='dark']) .premiumPlanValue {
-  background: linear-gradient(135deg, #3d3210, #5a4a18);
-  border-color: #8b7030;
-  box-shadow: 0 1px 8px rgba(180, 140, 0, 0.2);
-  color: #e8c84c;
+  background:
+    radial-gradient(
+      circle at 18% 24%,
+      rgba(255, 229, 138, 0.32) 0%,
+      rgba(255, 214, 98, 0.18) 18%,
+      rgba(255, 214, 98, 0) 44%
+    ),
+    linear-gradient(135deg, #4f3d0b 0%, #6e5510 48%, #8f6d10 100%);
+  border-color: rgba(226, 180, 50, 0.7);
+  box-shadow:
+    0 1px 6px rgba(0, 0, 0, 0.28),
+    0 0 0 1px rgba(255, 220, 120, 0.16) inset,
+    0 0 18px rgba(255, 196, 44, 0.22);
+  color: #fff0a8;
+  text-shadow: 0 0 10px rgba(255, 212, 79, 0.22);
+
+  &::before {
+    background: radial-gradient(
+      circle at 18% 24%,
+      rgba(255, 229, 138, 0.42) 0%,
+      rgba(255, 197, 66, 0.28) 34%,
+      rgba(255, 187, 0, 0) 74%
+    );
+    opacity: 0.8;
+  }
 
   @media (dynamic-range: high) {
-    background: linear-gradient(
-      135deg,
-      color(display-p3 0.24 0.2 0.06),
-      color(display-p3 0.38 0.3 0.08)
-    );
-    border-color: color(display-p3 0.58 0.46 0.15);
-    box-shadow: 0 1px 12px color(display-p3 0.8 0.65 0 / 0.2);
-    color: color(display-p3 0.95 0.82 0.25);
+    background:
+      radial-gradient(
+        circle at 18% 24%,
+        color(display-p3 1 0.89 0.38 / 0.38) 0%,
+        color(display-p3 1 0.82 0.2 / 0.2) 18%,
+        color(display-p3 1 0.82 0.2 / 0) 44%
+      ),
+      linear-gradient(
+        135deg,
+        color(display-p3 0.33 0.25 0.04),
+        color(display-p3 0.48 0.36 0.08),
+        color(display-p3 0.62 0.46 0.09)
+      );
+    border-color: color(display-p3 0.78 0.6 0.16 / 0.78);
+    box-shadow:
+      0 1px 8px color(display-p3 0 0 0 / 0.32),
+      0 0 0 1px color(display-p3 0.95 0.8 0.24 / 0.18) inset,
+      0 0 20px color(display-p3 1 0.76 0.1 / 0.28);
+    color: color(display-p3 1 0.93 0.58);
+  }
+
+  @supports (color: #{'color(rec2100-linear 1 1 1)'}) {
+    @media (dynamic-range: high) {
+      dynamic-range-limit: no-limit;
+      box-shadow:
+        0 1px 8px color(display-p3 0 0 0 / 0.32),
+        0 0 0 1px color(display-p3 0.95 0.8 0.24 / 0.18) inset,
+        0 0 16px color(display-p3 1 0.76 0.1 / 0.28),
+        0 0 28px #{'color(rec2100-linear 4.8 3.5 0.45 / 0.4)'};
+
+      &::before {
+        background: radial-gradient(
+          circle at 18% 24%,
+          #{'color(rec2100-linear 5.6 4.1 0.75 / 0.64)'} 0%,
+          #{'color(rec2100-linear 2.2 1.5 0.2 / 0.34)'} 34%,
+          #{'color(rec2100-linear 1.2 0.9 0.06 / 0)'} 74%
+        );
+        opacity: 0.95;
+      }
+    }
   }
 }
 

src/pages/AuthFilesPage.tsx

@@ -342,11 +342,6 @@ export function AuthFilesPage() {
     return counts;
   }, [filesMatchingProblemFilter]);
 
-  const activeFilterLabel =
-    filter === 'all' ? t('auth_files.filter_all') : getTypeLabel(t, String(filter));
-  const activeFilterCount = typeCounts[String(filter)] ?? 0;
-  const activeFilterIcon = getAuthFileIcon(String(filter), resolvedTheme);
-
   const filtered = useMemo(() => {
     return filesMatchingProblemFilter.filter((item) => {
       const matchType = filter === 'all' || item.type === filter;
@@ -539,42 +534,7 @@ export function AuthFilesPage() {
   );
 
   const renderFilterTags = () => (
-    <aside className={styles.filterRail}>
-      <div className={styles.filterRailHeader}>
-        <span className={styles.filterRailEyebrow}>
-          {t('nav.ai_providers', { defaultValue: 'Providers' })}
-        </span>
-        <div className={styles.filterRailHero}>
-          <div className={styles.filterRailHeroTitle}>
-            {filter === 'all' ? (
-              <span className={`${styles.filterRailHeroIcon} ${styles.filterAllIconWrap}`}>
-                <IconFilterAll className={styles.filterAllIcon} size={22} />
-              </span>
-            ) : (
-              <div className={styles.filterRailHeroIcon}>
-                {activeFilterIcon ? (
-                  <img src={activeFilterIcon} alt="" className={styles.filterRailHeroIconImage} />
-                ) : (
-                  <span className={styles.filterRailHeroIconFallback}>
-                    {activeFilterLabel.slice(0, 1).toUpperCase()}
-                  </span>
-                )}
-              </div>
-            )}
-            <div className={styles.filterRailHeroText}>
-              <span className={styles.filterRailTitle}>{activeFilterLabel}</span>
-              <span className={styles.filterRailDescription}>{t('auth_files.title_section')}</span>
-            </div>
-          </div>
-          <div className={styles.filterRailMeta}>
-            <span className={styles.filterRailCount}>{activeFilterCount}</span>
-            {problemOnly && (
-              <span className={styles.filterRailMode}>{t('auth_files.problem_filter_only')}</span>
-            )}
-          </div>
-        </div>
-      </div>
-
+    <div className={styles.filterRail}>
       <div className={styles.filterTags}>
         {existingTypes.map((type) => {
           const isActive = filter === type;
@@ -602,7 +562,7 @@ export function AuthFilesPage() {
               <span className={styles.filterTagLabel}>
                 {type === 'all' ? (
                   <span className={`${styles.filterTagIconWrap} ${styles.filterAllIconWrap}`}>
-                    <IconFilterAll className={styles.filterAllIcon} size={18} />
+                    <IconFilterAll className={styles.filterAllIcon} size={16} />
                   </span>
                 ) : (
                   <span className={styles.filterTagIconWrap}>
@@ -622,7 +582,7 @@ export function AuthFilesPage() {
           );
         })}
       </div>
-    </aside>
+    </div>
   );
 
   const titleNode = (

src/pages/QuotaPage.module.scss

@@ -151,10 +151,11 @@
   align-items: center;
 }
 
+// 卡片渐变背景 — 基于 TYPE_COLORS light.bg 转 rgba
 .claudeCard {
   background-image: linear-gradient(180deg,
-      rgba(252, 228, 236, 0.18),
-      rgba(252, 228, 236, 0));
+      rgba(251, 236, 228, 0.18),
+      rgba(251, 236, 228, 0));
 }
 
 .antigravityCard {
@@ -165,20 +166,20 @@
 
 .codexCard {
   background-image: linear-gradient(180deg,
-      rgba(255, 243, 224, 0.18),
-      rgba(255, 243, 224, 0));
+      rgba(234, 231, 255, 0.18),
+      rgba(234, 231, 255, 0));
 }
 
 .geminiCliCard {
   background-image: linear-gradient(180deg,
-      rgba(231, 239, 255, 0.2),
-      rgba(231, 239, 255, 0));
+      rgba(224, 232, 255, 0.2),
+      rgba(224, 232, 255, 0));
 }
 
 .kimiCard {
   background-image: linear-gradient(180deg,
-      rgba(255, 244, 229, 0.2),
-      rgba(255, 244, 229, 0));
+      rgba(220, 232, 255, 0.2),
+      rgba(220, 232, 255, 0));
 }
 
 .quotaSection {
@@ -319,41 +320,161 @@
 }
 
 .premiumPlanValue {
+  position: relative;
   display: inline-flex;
   align-items: center;
   font-weight: 700;
   font-size: 12px;
   padding: 2px 8px;
   border-radius: 999px;
-  background: linear-gradient(135deg, #fdf3d7, #f0d060);
-  border: 1px solid #e0b830;
-  box-shadow: 0 1px 4px rgba(200, 160, 0, 0.18);
-  color: #7a5c00;
+  overflow: visible;
+  isolation: isolate;
+  background:
+    radial-gradient(
+      circle at 18% 24%,
+      rgba(255, 255, 255, 0.96) 0%,
+      rgba(255, 255, 255, 0.72) 18%,
+      rgba(255, 255, 255, 0) 42%
+    ),
+    linear-gradient(135deg, #fff9e3 0%, #ffe07f 52%, #e0aa14 100%);
+  border: 1px solid rgba(217, 165, 22, 0.72);
+  box-shadow:
+    0 1px 3px rgba(133, 92, 0, 0.16),
+    0 0 0 1px rgba(255, 255, 255, 0.22) inset,
+    0 0 16px rgba(255, 214, 98, 0.28);
+  color: #6b4b00;
+  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);
   text-transform: capitalize;
 
+  &::before {
+    content: '';
+    position: absolute;
+    inset: -6px -9px;
+    border-radius: inherit;
+    background: radial-gradient(
+      circle at 18% 22%,
+      rgba(255, 255, 255, 0.9) 0%,
+      rgba(255, 237, 158, 0.58) 32%,
+      rgba(255, 215, 91, 0) 72%
+    );
+    filter: blur(9px);
+    opacity: 0.75;
+    pointer-events: none;
+    z-index: -1;
+  }
+
   @media (dynamic-range: high) {
-    background: linear-gradient(135deg,
-      color(display-p3 0.99 0.95 0.82),
-      color(display-p3 0.97 0.82 0.28));
-    border-color: color(display-p3 0.90 0.73 0.12);
-    box-shadow: 0 1px 8px color(display-p3 1.0 0.84 0.0 / 0.25);
-    color: color(display-p3 0.50 0.38 0.0);
+    background:
+      radial-gradient(
+        circle at 18% 24%,
+        color(display-p3 1 0.99 0.94) 0%,
+        color(display-p3 1 0.97 0.82 / 0.82) 18%,
+        color(display-p3 1 0.95 0.7 / 0) 42%
+      ),
+      linear-gradient(
+        135deg,
+        color(display-p3 1 0.98 0.88),
+        color(display-p3 0.99 0.86 0.34),
+        color(display-p3 0.92 0.68 0.05)
+      );
+    border-color: color(display-p3 0.9 0.73 0.12 / 0.85);
+    box-shadow:
+      0 1px 4px color(display-p3 0.45 0.28 0 / 0.22),
+      0 0 0 1px color(display-p3 1 0.98 0.86 / 0.3) inset,
+      0 0 18px color(display-p3 1 0.89 0.2 / 0.36);
+    color: color(display-p3 0.43 0.3 0);
+  }
+
+  @supports (color: #{'color(rec2100-linear 1 1 1)'}) {
+    @media (dynamic-range: high) {
+      dynamic-range-limit: no-limit;
+      box-shadow:
+        0 1px 4px color(display-p3 0.45 0.28 0 / 0.22),
+        0 0 0 1px color(display-p3 1 0.98 0.86 / 0.3) inset,
+        0 0 14px color(display-p3 1 0.89 0.2 / 0.36),
+        0 0 30px #{'color(rec2100-linear 3.6 2.9 0.7 / 0.48)'};
+
+      &::before {
+        background: radial-gradient(
+          circle at 18% 22%,
+          #{'color(rec2100-linear 6.5 6.2 5.4 / 0.92)'} 0%,
+          #{'color(rec2100-linear 2.4 2 0.6 / 0.62)'} 34%,
+          #{'color(rec2100-linear 1 0.85 0.12 / 0)'} 76%
+        );
+        opacity: 0.92;
+      }
+    }
   }
 }
 
 :global([data-theme='dark']) .premiumPlanValue {
-  background: linear-gradient(135deg, #3d3210, #5a4a18);
-  border-color: #8b7030;
-  box-shadow: 0 1px 8px rgba(180, 140, 0, 0.2);
-  color: #e8c84c;
+  background:
+    radial-gradient(
+      circle at 18% 24%,
+      rgba(255, 229, 138, 0.32) 0%,
+      rgba(255, 214, 98, 0.18) 18%,
+      rgba(255, 214, 98, 0) 44%
+    ),
+    linear-gradient(135deg, #4f3d0b 0%, #6e5510 48%, #8f6d10 100%);
+  border-color: rgba(226, 180, 50, 0.7);
+  box-shadow:
+    0 1px 6px rgba(0, 0, 0, 0.28),
+    0 0 0 1px rgba(255, 220, 120, 0.16) inset,
+    0 0 18px rgba(255, 196, 44, 0.22);
+  color: #fff0a8;
+  text-shadow: 0 0 10px rgba(255, 212, 79, 0.22);
+
+  &::before {
+    background: radial-gradient(
+      circle at 18% 24%,
+      rgba(255, 229, 138, 0.42) 0%,
+      rgba(255, 197, 66, 0.28) 34%,
+      rgba(255, 187, 0, 0) 74%
+    );
+    opacity: 0.8;
+  }
 
   @media (dynamic-range: high) {
-    background: linear-gradient(135deg,
-      color(display-p3 0.24 0.20 0.06),
-      color(display-p3 0.38 0.30 0.08));
-    border-color: color(display-p3 0.58 0.46 0.15);
-    box-shadow: 0 1px 12px color(display-p3 0.80 0.65 0.0 / 0.2);
-    color: color(display-p3 0.95 0.82 0.25);
+    background:
+      radial-gradient(
+        circle at 18% 24%,
+        color(display-p3 1 0.89 0.38 / 0.38) 0%,
+        color(display-p3 1 0.82 0.2 / 0.2) 18%,
+        color(display-p3 1 0.82 0.2 / 0) 44%
+      ),
+      linear-gradient(
+        135deg,
+        color(display-p3 0.33 0.25 0.04),
+        color(display-p3 0.48 0.36 0.08),
+        color(display-p3 0.62 0.46 0.09)
+      );
+    border-color: color(display-p3 0.78 0.6 0.16 / 0.78);
+    box-shadow:
+      0 1px 8px color(display-p3 0 0 0 / 0.32),
+      0 0 0 1px color(display-p3 0.95 0.8 0.24 / 0.18) inset,
+      0 0 20px color(display-p3 1 0.76 0.1 / 0.28);
+    color: color(display-p3 1 0.93 0.58);
+  }
+
+  @supports (color: #{'color(rec2100-linear 1 1 1)'}) {
+    @media (dynamic-range: high) {
+      dynamic-range-limit: no-limit;
+      box-shadow:
+        0 1px 8px color(display-p3 0 0 0 / 0.32),
+        0 0 0 1px color(display-p3 0.95 0.8 0.24 / 0.18) inset,
+        0 0 16px color(display-p3 1 0.76 0.1 / 0.28),
+        0 0 28px #{'color(rec2100-linear 4.8 3.5 0.45 / 0.4)'};
+
+      &::before {
+        background: radial-gradient(
+          circle at 18% 24%,
+          #{'color(rec2100-linear 5.6 4.1 0.75 / 0.64)'} 0%,
+          #{'color(rec2100-linear 2.2 1.5 0.2 / 0.34)'} 34%,
+          #{'color(rec2100-linear 1.2 0.9 0.06 / 0)'} 74%
+        );
+        opacity: 0.95;
+      }
+    }
   }
 }
 

src/utils/quota/constants.ts

@@ -8,18 +8,18 @@ import type {
   TypeColorSet,
 } from '@/types';
 
-// Theme colors for type badges
+// Theme colors for type badges — 与 authFiles/constants.ts 保持同步
 export const TYPE_COLORS: Record<string, TypeColorSet> = {
   qwen: {
-    light: { bg: '#e8f5e9', text: '#2e7d32' },
-    dark: { bg: '#1b5e20', text: '#81c784' },
+    light: { bg: '#ede5fd', text: '#5530c7' },
+    dark: { bg: '#36208a', text: '#b5a3f0' },
   },
   gemini: {
     light: { bg: '#e3f2fd', text: '#1565c0' },
     dark: { bg: '#0d47a1', text: '#64b5f6' },
   },
   'gemini-cli': {
-    light: { bg: '#e7efff', text: '#1e4fa3' },
+    light: { bg: '#e0e8ff', text: '#1e4fa3' },
     dark: { bg: '#1c3f73', text: '#a8c7ff' },
   },
   aistudio: {
@@ -27,24 +27,28 @@ export const TYPE_COLORS: Record<string, TypeColorSet> = {
     dark: { bg: '#373c42', text: '#cfd3db' },
   },
   claude: {
-    light: { bg: '#fce4ec', text: '#c2185b' },
-    dark: { bg: '#880e4f', text: '#f48fb1' },
+    light: { bg: '#fbece4', text: '#c05621' },
+    dark: { bg: '#5e2c14', text: '#e8a882' },
   },
   codex: {
-    light: { bg: '#fff3e0', text: '#ef6c00' },
-    dark: { bg: '#e65100', text: '#ffb74d' },
+    light: { bg: '#eae7ff', text: '#3538d4' },
+    dark: { bg: '#262395', text: '#b5b0ff' },
   },
   kimi: {
-    light: { bg: '#fff4e5', text: '#ad6800' },
-    dark: { bg: '#7c4a03', text: '#ffd591' },
+    light: { bg: '#dce8ff', text: '#0560cf' },
+    dark: { bg: '#003880', text: '#70b5ff' },
   },
   antigravity: {
     light: { bg: '#e0f7fa', text: '#006064' },
     dark: { bg: '#004d40', text: '#80deea' },
   },
   iflow: {
-    light: { bg: '#f3e5f5', text: '#7b1fa2' },
-    dark: { bg: '#4a148c', text: '#ce93d8' },
+    light: { bg: '#f5e3fc', text: '#9025c8' },
+    dark: { bg: '#521490', text: '#d49cf5' },
+  },
+  vertex: {
+    light: { bg: '#e4edfd', text: '#2b5fbc' },
+    dark: { bg: '#1a3d80', text: '#89b3f7' },
   },
   empty: {
     light: { bg: '#f5f5f5', text: '#616161' },