mirror of
https://github.com/SECTL/SecScore.git
synced 2026-07-21 18:19:03 +08:00
修复侧边栏展开/收缩时窗口大小不随缩放比例调整的问题
This commit is contained in:
@@ -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"
|
||||||
|
|||||||
Reference in New Issue
Block a user