修复侧边栏展开/收缩时窗口大小不随缩放比例调整的问题

This commit is contained in:
Linkon
2026-01-20 00:14:49 +08:00
parent e4c27530a6
commit 01bd7be1ed
+46 -10
View File
@@ -1,4 +1,4 @@
import React, { useState } from 'react' import React, { useState, useEffect } from 'react'
import { Button, Tooltip } from 'tdesign-react' import { Button, Tooltip } from 'tdesign-react'
import { import {
HomeIcon, HomeIcon,
@@ -12,6 +12,31 @@ import {
export const GlobalSidebar: React.FC = () => { export const GlobalSidebar: React.FC = () => {
const [expanded, setExpanded] = useState(false) const [expanded, setExpanded] = useState(false)
const [showToggle, setShowToggle] = useState(true) const [showToggle, setShowToggle] = useState(true)
const [zoom, setZoom] = useState(1.0)
useEffect(() => {
if (!(window as any).api) return
// 加载初始缩放值
const loadZoom = async () => {
const res = await (window as any).api.getSetting('window_zoom')
if (res.success && res.data) {
setZoom(res.data)
}
}
loadZoom()
// 监听缩放变化
const unsubscribe = (window as any).api.onSettingChanged((change: any) => {
if (change?.key === 'window_zoom') {
setZoom(change.value)
}
})
return () => {
if (typeof unsubscribe === 'function') unsubscribe()
}
}, [])
const handleExpand = () => { const handleExpand = () => {
// 1. 先隐藏三角 // 1. 先隐藏三角
@@ -20,7 +45,9 @@ export const GlobalSidebar: React.FC = () => {
// 2. 稍后扩大窗口 // 2. 稍后扩大窗口
setTimeout(() => { setTimeout(() => {
if ((window as any).api) { if ((window as any).api) {
;(window as any).api.windowResize(84, 300) const width = Math.round(84 * zoom)
const height = Math.round(300 * zoom)
;(window as any).api.windowResize(width, height)
} }
// 3. 最后显示侧边栏内容 // 3. 最后显示侧边栏内容
setTimeout(() => { setTimeout(() => {
@@ -36,7 +63,9 @@ export const GlobalSidebar: React.FC = () => {
// 2. 稍后缩小窗口 // 2. 稍后缩小窗口
setTimeout(() => { setTimeout(() => {
if ((window as any).api) { if ((window as any).api) {
;(window as any).api.windowResize(24, 300) const width = Math.round(24 * zoom)
const height = Math.round(300 * zoom)
;(window as any).api.windowResize(width, height)
} }
// 3. 最后重新显示三角(等待透明度动画完成) // 3. 最后重新显示三角(等待透明度动画完成)
setTimeout(() => { setTimeout(() => {
@@ -54,7 +83,7 @@ export const GlobalSidebar: React.FC = () => {
<div <div
style={{ style={{
height: '100vh', height: '100vh',
width: '84px', width: `${84 * zoom}px`,
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
justifyContent: 'flex-end', justifyContent: 'flex-end',
@@ -66,7 +95,11 @@ export const GlobalSidebar: React.FC = () => {
<div <div
onClick={handleExpand} onClick={handleExpand}
className={`global-sidebar-toggle ${!showToggle ? 'hidden' : ''}`} className={`global-sidebar-toggle ${!showToggle ? 'hidden' : ''}`}
style={{ willChange: 'opacity, transform' }} style={{
willChange: 'opacity, transform',
width: `${24 * zoom}px`,
height: `${60 * zoom}px`
}}
> >
<ChevronLeftIcon /> <ChevronLeftIcon />
</div> </div>
@@ -77,7 +110,10 @@ export const GlobalSidebar: React.FC = () => {
style={{ style={{
backgroundColor: 'var(--ss-card-bg)', backgroundColor: 'var(--ss-card-bg)',
height: 'fit-content', height: 'fit-content',
willChange: 'opacity, transform' willChange: 'opacity, transform',
width: `${60 * zoom}px`,
padding: `${12 * zoom}px ${8 * zoom}px`,
gap: `${12 * zoom}px`
}} }}
> >
{/* 顶部的关闭/收起按钮 */} {/* 顶部的关闭/收起按钮 */}
@@ -90,19 +126,19 @@ export const GlobalSidebar: React.FC = () => {
<ChevronRightIcon size="20px" /> <ChevronRightIcon size="20px" />
</Button> </Button>
<Tooltip content="主界面" placement="left"> <Tooltip content="主界面" placement="top">
<Button shape="circle" variant="text" onClick={openMain}> <Button shape="circle" variant="text" onClick={openMain}>
<HomeIcon size="24px" /> <HomeIcon size="24px" />
</Button> </Button>
</Tooltip> </Tooltip>
<Tooltip content="积分操作" placement="left"> <Tooltip content="积分操作" placement="top">
<Button shape="circle" variant="text" onClick={() => openMain()}> <Button shape="circle" variant="text" onClick={() => openMain()}>
<UserAddIcon size="24px" /> <UserAddIcon size="24px" />
</Button> </Button>
</Tooltip> </Tooltip>
<Tooltip content="排行榜" placement="left"> <Tooltip content="排行榜" placement="top">
<Button <Button
shape="circle" shape="circle"
variant="text" variant="text"
@@ -112,7 +148,7 @@ export const GlobalSidebar: React.FC = () => {
</Button> </Button>
</Tooltip> </Tooltip>
<Tooltip content="设置" placement="left"> <Tooltip content="设置" placement="top">
<Button <Button
shape="circle" shape="circle"
variant="text" variant="text"