feat: layout
This commit is contained in:
parent
0346d4b964
commit
375876ad77
|
@ -1,15 +1,18 @@
|
||||||
/* Layout.css */
|
/* Layout.css */
|
||||||
.custom-tab-strip {
|
.custom-tab-strip {
|
||||||
border-bottom-color: hsl(var(--border));
|
border-bottom-color: hsl(var(--border));
|
||||||
|
padding-left: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 覆盖默认的 FlexLayout 分割线选中颜色 */
|
.flexlayout__tabset_tabbar_inner_tab_container {
|
||||||
.custom-layout-class .flexlayout__splitter_drag {
|
border-top: 0;
|
||||||
background-color: blue;
|
padding-left: 0;
|
||||||
/* 选中时的颜色 */
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.custom-layout-class .flexlayout__splitter:hover {
|
.flexlayout__tab_button--selected {
|
||||||
background-color: lightblue;
|
background: hsl(var(--secondary));
|
||||||
/* 鼠标悬停时的颜色 */
|
}
|
||||||
|
|
||||||
|
.flexlayout__tabset-selected {
|
||||||
|
background: transparent;
|
||||||
}
|
}
|
|
@ -2,31 +2,27 @@ import { Button } from "@/components/ui/button";
|
||||||
import { CommandDialogDemo } from "./CommandDialogDemo";
|
import { CommandDialogDemo } from "./CommandDialogDemo";
|
||||||
import FlexLayoutComponent from "./FlexLayoutDemo";
|
import FlexLayoutComponent from "./FlexLayoutDemo";
|
||||||
import { VscLayoutSidebarLeftOff } from "react-icons/vsc";
|
import { VscLayoutSidebarLeftOff } from "react-icons/vsc";
|
||||||
|
import { useEffect, useState } from "react";
|
||||||
|
|
||||||
const LayoutMain = () => {
|
const LayoutMain = () => {
|
||||||
const platform = document.querySelector('html')?.getAttribute('platform')
|
const platform =
|
||||||
const titlebarStyles = platform === 'macos' ? 'pl-[10rem] pr-[2rem]' : 'pr-[10rem] pl-[2rem]'
|
document.querySelector("html")?.getAttribute("platform") ?? "macos";
|
||||||
|
const titleBarStyles =
|
||||||
|
platform === "macos" ? "pl-[5rem] pr-[.5rem]" : "pr-[10rem] pl-[2rem]";
|
||||||
return (
|
return (
|
||||||
<div className="h-screen">
|
<div className="h-full">
|
||||||
{/* 此处height和 new BrowserWindow的titleBar设置一致 */}
|
<div className={`title-bar drag border h-[36px] ${titleBarStyles}`}>
|
||||||
<div
|
标题栏
|
||||||
className={`drag bg ${titlebarStyles} flex items-center justify-between`}
|
|
||||||
style={{ height: 36 }}
|
|
||||||
>
|
|
||||||
<div className="left">1</div>
|
|
||||||
<div className="no-drag inline-flex">
|
|
||||||
<CommandDialogDemo />
|
|
||||||
</div>
|
</div>
|
||||||
<div className="right no-drag">
|
<div className="relative h-[calc(100%-36px)]">
|
||||||
<button className="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 hover:bg-accent hover:text-accent-foreground h-6 w-6">
|
<div className="flex h-full">
|
||||||
<VscLayoutSidebarLeftOff />
|
<div className="workspace w-[36px] h-full border-r">123</div>
|
||||||
</button>
|
<div className="relative w-[calc(100%-36px)] h-full">
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="h-[calc(100%-36px)] relative">
|
|
||||||
<FlexLayoutComponent />
|
<FlexLayoutComponent />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue
Block a user