PANDA-JSR/SecScore
2
1
Fork 0
mirror of https://github.com/SECTL/SecScore.git synced 2026-07-21 18:19:03 +08:00
Code Issues Packages Projects Releases Wiki Activity

优化竖屏导航展开样式与左上角收起按钮

Browse Source
This commit is contained in:
JSR
2026-03-18 22:06:43 +08:00
parent f2985c2b83
commit c10a719438
2 changed files with 62 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/ContentArea.tsx
+11 -4
View File
@@ -100,6 +100,7 @@ export function ContentArea({
: t("permissions.view")} : t("permissions.view")}
</Tag> </Tag>
) )
const useFloatingSidebarToggle = floatingExpand && sidebarCollapsed
return ( return (
<Layout <Layout
@@ -128,14 +129,20 @@ export function ContentArea({
<div <div
style={ style={
{ {
paddingLeft: "8px", paddingLeft: useFloatingSidebarToggle ? 0 : "8px",
display: "flex", display: "flex",
alignItems: "center", alignItems: "center",
height: "100%", height: useFloatingSidebarToggle ? "auto" : "100%",
WebkitAppRegion: "no-drag", WebkitAppRegion: "no-drag",
flexShrink: 0, flexShrink: 0,
position: "relative", position: useFloatingSidebarToggle ? "fixed" : "relative",
zIndex: floatingExpand && sidebarCollapsed && floatingExpanded ? 1301 : 1, left: useFloatingSidebarToggle ? "8px" : undefined,
top: useFloatingSidebarToggle ? "4px" : undefined,
zIndex: useFloatingSidebarToggle
? 1402
: floatingExpand && sidebarCollapsed && floatingExpanded
? 1301
: 1,
} as React.CSSProperties } as React.CSSProperties
} }
> >
src/components/Sidebar.tsx
+51 -46
View File
@@ -194,51 +194,53 @@ export function Sidebar({
const renderSidebarBody = (isCollapsedView: boolean, hideMenu = false) => ( const renderSidebarBody = (isCollapsedView: boolean, hideMenu = false) => (
<> <>
<div {!(isCollapsedView && floatingExpand && collapsed) && (
data-tauri-drag-region <div
style={ data-tauri-drag-region
{ style={
padding: isCollapsedView ? "20px 8px 12px" : "24px 24px 16px", {
textAlign: "center", padding: isCollapsedView ? "20px 8px 12px" : "24px 24px 16px",
WebkitAppRegion: "drag", textAlign: "center",
userSelect: "none", WebkitAppRegion: "drag",
flexShrink: 0, userSelect: "none",
} as React.CSSProperties flexShrink: 0,
} } as React.CSSProperties
> }
<img >
src={appLogo} <img
style={{ src={appLogo}
width: isCollapsedView ? "40px" : "48px", style={{
height: isCollapsedView ? "40px" : "48px", width: isCollapsedView ? "40px" : "48px",
marginBottom: isCollapsedView ? "0" : "12px", height: isCollapsedView ? "40px" : "48px",
}} marginBottom: isCollapsedView ? "0" : "12px",
alt="logo" }}
/> alt="logo"
{!isCollapsedView && ( />
<> {!isCollapsedView && (
<h2 <>
style={{ <h2
color: "var(--ss-sidebar-text, var(--ss-text-main))", style={{
margin: 0, color: "var(--ss-sidebar-text, var(--ss-text-main))",
fontSize: "20px", margin: 0,
}} fontSize: "20px",
> }}
SecScore >
</h2> SecScore
<div </h2>
style={{ <div
fontSize: "12px", style={{
color: "var(--ss-sidebar-text, var(--ss-text-main))", fontSize: "12px",
opacity: 0.8, color: "var(--ss-sidebar-text, var(--ss-text-main))",
marginTop: "4px", opacity: 0.8,
}} marginTop: "4px",
> }}
{t("settings.about.appName")} >
</div> {t("settings.about.appName")}
</> </div>
)} </>
</div> )}
</div>
)}
{!hideMenu && ( {!hideMenu && (
<div style={{ flex: 1, overflowY: "auto", display: "flex", flexDirection: "column" }}> <div style={{ flex: 1, overflowY: "auto", display: "flex", flexDirection: "column" }}>
@@ -352,7 +354,10 @@ export function Sidebar({
top: 0, top: 0,
bottom: 0, bottom: 0,
width: "200px", width: "200px",
background: "var(--ss-sidebar-bg)", background:
"linear-gradient(0deg, rgba(250, 250, 250, 0.72), rgba(250, 250, 250, 0.72)), var(--ss-sidebar-bg)",
backdropFilter: "blur(14px)",
WebkitBackdropFilter: "blur(14px)",
borderRight: "1px solid var(--ss-border-color)", borderRight: "1px solid var(--ss-border-color)",
boxShadow: "6px 0 18px rgba(0, 0, 0, 0.12)", boxShadow: "6px 0 18px rgba(0, 0, 0, 0.12)",
zIndex: 1200, zIndex: 1200,