From 693d821e1aa74ec954b207f3d5b7001e6f2b079f Mon Sep 17 00:00:00 2001 From: Supra4E8C Date: Sun, 22 Mar 2026 23:28:16 +0800 Subject: [PATCH] feat(VisualConfigEditor): enhance sidebar behavior and styling for better responsiveness --- .../config/VisualConfigEditor.module.scss | 60 +++++- src/components/config/VisualConfigEditor.tsx | 186 ++++++++++++++---- src/features/authFiles/constants.ts | 38 ++-- 3 files changed, 231 insertions(+), 53 deletions(-) diff --git a/src/components/config/VisualConfigEditor.module.scss b/src/components/config/VisualConfigEditor.module.scss index e6c3287..bd185fc 100644 --- a/src/components/config/VisualConfigEditor.module.scss +++ b/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 { diff --git a/src/components/config/VisualConfigEditor.tsx b/src/components/config/VisualConfigEditor.tsx index 986c797..435f83e 100644 --- a/src/components/config/VisualConfigEditor.tsx +++ b/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('server'); + const workspaceRef = useRef(null); + const sidebarAnchorRef = useRef(null); + const floatingSidebarRef = useRef(null); const sectionRefs = useRef>>({}); 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 = ( +
+ {sections.map((section, index) => { + const Icon = section.icon; + + return ( + + ); + })} +
+ ); + return (
@@ -395,44 +527,13 @@ export function VisualConfigEditor({
-
-
); } diff --git a/src/features/authFiles/constants.ts b/src/features/authFiles/constants.ts index 276b123..93e60c2 100644 --- a/src/features/authFiles/constants.ts +++ b/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 = { + // 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' },