From 5b5bf9a2882257ccf1742f61807538258f09d9e7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=A9=98=E7=8C=AB?= <14495495+small-ginger-cat@user.noreply.gitee.com> Date: Thu, 14 May 2026 16:11:52 +0800 Subject: [PATCH 1/2] fix: Distribution dialog flicker --- frontend/components/animate-ui/radix/dialog.tsx | 2 +- frontend/components/animate-ui/radix/tabs.tsx | 10 +++++----- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/frontend/components/animate-ui/radix/dialog.tsx b/frontend/components/animate-ui/radix/dialog.tsx index 1a638ca..16aaea7 100644 --- a/frontend/components/animate-ui/radix/dialog.tsx +++ b/frontend/components/animate-ui/radix/dialog.tsx @@ -128,7 +128,7 @@ function DialogContent({ initial={{opacity: 0}} animate={{opacity: 1}} exit={{opacity: 0}} - transition={{duration: 0.15, ease: 'easeOut'}} + transition={{duration: 0}} /> diff --git a/frontend/components/animate-ui/radix/tabs.tsx b/frontend/components/animate-ui/radix/tabs.tsx index e74fe85..cb3bb31 100644 --- a/frontend/components/animate-ui/radix/tabs.tsx +++ b/frontend/components/animate-ui/radix/tabs.tsx @@ -162,10 +162,10 @@ function TabsContent({ data-slot="tabs-content" className={cn('flex-1 outline-none', className)} layout - initial={{opacity: 0, y: -10}} - animate={{opacity: 1, y: 0}} - exit={{opacity: 0, y: 10}} - transition={{...transition, duration: 0.1}} + initial={{opacity: 0}} + animate={{opacity: 1}} + exit={{opacity: 0}} + transition={transition} {...props} > {children} @@ -188,7 +188,7 @@ function TabsContents({ }: TabsContentsProps) { const containerRef = React.useRef(null); - const [height, setHeight] = React.useState(0); + const [height, setHeight] = React.useState('auto'); React.useEffect(() => { if (!containerRef.current) return; From a657bfba2102133c1326e42ef1cce4d951425223 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=A9=98=E7=8C=AB?= <14495495+small-ginger-cat@user.noreply.gitee.com> Date: Thu, 14 May 2026 16:12:11 +0800 Subject: [PATCH 2/2] feat: Add dock responsive position adjustment --- .../common/layout/ManagementBar.tsx | 40 ++++++++++++++++--- 1 file changed, 34 insertions(+), 6 deletions(-) diff --git a/frontend/components/common/layout/ManagementBar.tsx b/frontend/components/common/layout/ManagementBar.tsx index b62b2c1..200d8ca 100644 --- a/frontend/components/common/layout/ManagementBar.tsx +++ b/frontend/components/common/layout/ManagementBar.tsx @@ -55,7 +55,12 @@ type DockPosition = { y: number; }; -type DockPositions = Partial>; +type StoredDockPosition = DockPosition & { + viewportWidth?: number; + viewportHeight?: number; +}; + +type DockPositions = Partial>; /** * 获取信任等级对应的文本描述 @@ -123,7 +128,11 @@ export function ManagementBar() { const nextPositions = { ...readDockPositions(), - [viewport]: position, + [viewport]: { + ...position, + viewportWidth: window.innerWidth, + viewportHeight: window.innerHeight, + }, }; window.localStorage.setItem(DOCK_STORAGE_KEY, JSON.stringify(nextPositions)); @@ -167,6 +176,25 @@ export function ManagementBar() { return clampDockPosition(basePosition); }, [clampDockPosition, getDockRect]); + const getScaledDockPosition = useCallback((position: StoredDockPosition): DockPosition => { + if (typeof window === 'undefined' || !position.viewportWidth || !position.viewportHeight) { + return clampDockPosition(position); + } + + const {width, height} = getDockRect(); + const oldMaxX = Math.max(DOCK_MARGIN, position.viewportWidth - width - DOCK_MARGIN); + const oldMaxY = Math.max(DOCK_MARGIN, position.viewportHeight - height - DOCK_MARGIN); + const nextMaxX = Math.max(DOCK_MARGIN, window.innerWidth - width - DOCK_MARGIN); + const nextMaxY = Math.max(DOCK_MARGIN, window.innerHeight - height - DOCK_MARGIN); + const xRatio = oldMaxX === DOCK_MARGIN ? 0 : (position.x - DOCK_MARGIN) / (oldMaxX - DOCK_MARGIN); + const yRatio = oldMaxY === DOCK_MARGIN ? 0 : (position.y - DOCK_MARGIN) / (oldMaxY - DOCK_MARGIN); + + return clampDockPosition({ + x: DOCK_MARGIN + xRatio * (nextMaxX - DOCK_MARGIN), + y: DOCK_MARGIN + yRatio * (nextMaxY - DOCK_MARGIN), + }); + }, [clampDockPosition, getDockRect]); + const syncDockPosition = useCallback((nextViewport?: DockViewport) => { if (typeof window === 'undefined') return; @@ -175,9 +203,9 @@ export function ManagementBar() { setDockViewport(viewport); const savedPosition = readDockPositions()[viewport]; - const nextPosition = clampDockPosition(savedPosition ?? getDefaultDockPosition(viewport)); + const nextPosition = savedPosition ? getScaledDockPosition(savedPosition) : getDefaultDockPosition(viewport); setDockPosition(nextPosition); - }, [clampDockPosition, getDefaultDockPosition, getViewport, readDockPositions]); + }, [getDefaultDockPosition, getScaledDockPosition, getViewport, readDockPositions]); useEffect(() => { setMounted(true); @@ -206,7 +234,7 @@ export function ManagementBar() { dockViewportRef.current = viewport; setDockViewport(viewport); - setDockPosition((current) => clampDockPosition(savedPosition ?? current ?? getDefaultDockPosition(viewport))); + setDockPosition(savedPosition ? getScaledDockPosition(savedPosition) : getDefaultDockPosition(viewport)); }); }; @@ -216,7 +244,7 @@ export function ManagementBar() { window.cancelAnimationFrame(frameId); window.removeEventListener('resize', handleResize); }; - }, [clampDockPosition, getDefaultDockPosition, getViewport, mounted, readDockPositions, syncDockPosition]); + }, [getDefaultDockPosition, getScaledDockPosition, getViewport, mounted, readDockPositions, syncDockPosition]); useEffect(() => { const handleOpenPaymentSettings = () => {