feat: layout

src/pages/Layout.css

@@ -1,15 +1,18 @@
 /* Layout.css */
-.custom-tab-strip{
+.custom-tab-strip {
   border-bottom-color: hsl(var(--border));
+  padding-left: 0;
 }
 
-/* 覆盖默认的 FlexLayout 分割线选中颜色 */
-.custom-layout-class .flexlayout__splitter_drag {
-  background-color: blue;
-  /* 选中时的颜色 */
+.flexlayout__tabset_tabbar_inner_tab_container {
+  border-top: 0;
+  padding-left: 0;
 }
 
-.custom-layout-class .flexlayout__splitter:hover {
-  background-color: lightblue;
-  /* 鼠标悬停时的颜色 */
+.flexlayout__tab_button--selected {
+  background: hsl(var(--secondary));
+}
+
+.flexlayout__tabset-selected {
+  background: transparent;
 }

src/pages/Layout.tsx

@@ -2,29 +2,25 @@ import { Button } from "@/components/ui/button";
 import { CommandDialogDemo } from "./CommandDialogDemo";
 import FlexLayoutComponent from "./FlexLayoutDemo";
 import { VscLayoutSidebarLeftOff } from "react-icons/vsc";
+import { useEffect, useState } from "react";
 
 const LayoutMain = () => {
-  const platform = document.querySelector('html')?.getAttribute('platform')
-  const titlebarStyles = platform === 'macos' ? 'pl-[10rem] pr-[2rem]' : 'pr-[10rem] pl-[2rem]'
+  const platform =
+    document.querySelector("html")?.getAttribute("platform") ?? "macos";
+  const titleBarStyles =
+    platform === "macos" ? "pl-[5rem] pr-[.5rem]" : "pr-[10rem] pl-[2rem]";
   return (
-    <div className="h-screen">
-      {/* 此处height和 new BrowserWindow的titleBar设置一致 */}
-      <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 className="right no-drag">
-          <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">
-            <VscLayoutSidebarLeftOff />
-          </button>
-        </div>
+    <div className="h-full">
+      <div className={`title-bar drag border h-[36px] ${titleBarStyles}`}>
+        标题栏
       </div>
-      <div className="h-[calc(100%-36px)] relative">
-        <FlexLayoutComponent />
+      <div className="relative h-[calc(100%-36px)]">
+        <div className="flex h-full">
+          <div className="workspace w-[36px] h-full border-r">123</div>
+          <div className="relative w-[calc(100%-36px)] h-full">
+            <FlexLayoutComponent />
+          </div>
+        </div>
       </div>
     </div>
   );