feat(VisualConfigEditor): enhance sidebar behavior and styling for better responsiveness

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' },