优化横竖切换按钮位置图标并修复侧栏重复显示

This commit is contained in:
JSR
2026-03-18 21:10:04 +08:00
parent ff29ed5fff
commit df72b5e65e
3 changed files with 38 additions and 32 deletions
+1 -1
View File
@@ -141,7 +141,7 @@ function MainContent(): React.JSX.Element {
} }
if (nextPortraitMode) { if (nextPortraitMode) {
await api.windowSetResizable(false) await api.windowSetResizable(false)
await api.windowResize(940, 1280) await api.windowResize(940, 1380)
setSidebarCollapsed(true) setSidebarCollapsed(true)
} else { } else {
await api.windowSetResizable(true) await api.windowSetResizable(true)
+28 -22
View File
@@ -193,7 +193,11 @@ export function Sidebar({
const showFloatingPanel = floatingExpand && collapsed && floatingExpanded const showFloatingPanel = floatingExpand && collapsed && floatingExpanded
const renderSidebarBody = (isCollapsedView: boolean, isFloatingPanel = false) => ( const renderSidebarBody = (
isCollapsedView: boolean,
isFloatingPanel = false,
hideMenu = false
) => (
<> <>
<div <div
data-tauri-drag-region data-tauri-drag-region
@@ -270,27 +274,29 @@ export function Sidebar({
)} )}
</div> </div>
<div style={{ flex: 1, overflowY: "auto", display: "flex", flexDirection: "column" }}> {!hideMenu && (
<Menu <div style={{ flex: 1, overflowY: "auto", display: "flex", flexDirection: "column" }}>
mode="inline" <Menu
inlineCollapsed={isCollapsedView} mode="inline"
selectedKeys={[activeMenu]} inlineCollapsed={isCollapsedView}
onClick={({ key }) => { selectedKeys={[activeMenu]}
onMenuChange(key) onClick={({ key }) => {
if (floatingExpand && collapsed) { onMenuChange(key)
setFloatingExpanded(false) if (floatingExpand && collapsed) {
} setFloatingExpanded(false)
}} }
style={{ }}
width: "100%", style={{
border: "none", width: "100%",
backgroundColor: "transparent", border: "none",
}} backgroundColor: "transparent",
items={menuItems} }}
/> items={menuItems}
</div> />
</div>
)}
{!isCollapsedView && dbStatus.type === "postgresql" && ( {!isCollapsedView && !hideMenu && dbStatus.type === "postgresql" && (
<Card <Card
size="small" size="small"
style={{ style={{
@@ -370,7 +376,7 @@ export function Sidebar({
theme="light" theme="light"
> >
{contextHolder} {contextHolder}
{renderSidebarBody(collapsed)} {renderSidebarBody(collapsed, false, showFloatingPanel)}
{showFloatingPanel && ( {showFloatingPanel && (
<div <div
+9 -9
View File
@@ -4,7 +4,7 @@ import {
BorderOutlined, BorderOutlined,
CloseOutlined, CloseOutlined,
FullscreenExitOutlined, FullscreenExitOutlined,
SwapOutlined, RotateRightOutlined,
} from "@ant-design/icons" } from "@ant-design/icons"
import { useEffect, useState } from "react" import { useEffect, useState } from "react"
@@ -76,20 +76,20 @@ export function WindowControls({
} as React.CSSProperties } as React.CSSProperties
} }
> >
<Button
type="text"
onClick={minimize}
style={{ width: "46px", height: "32px", borderRadius: 0 }}
>
<MinusOutlined />
</Button>
<Button <Button
type="text" type="text"
onClick={onToggleOrientation} onClick={onToggleOrientation}
title={isPortraitMode ? "切换到横屏模式" : "切换到竖屏模式"} title={isPortraitMode ? "切换到横屏模式" : "切换到竖屏模式"}
style={{ width: "46px", height: "32px", borderRadius: 0 }} style={{ width: "46px", height: "32px", borderRadius: 0 }}
> >
<SwapOutlined style={{ transform: "rotate(90deg)" }} /> <RotateRightOutlined />
</Button>
<Button
type="text"
onClick={minimize}
style={{ width: "46px", height: "32px", borderRadius: 0 }}
>
<MinusOutlined />
</Button> </Button>
<Button <Button
type="text" type="text"