feat: 布局

2024-07-17 16:00:35 +08:00 · 2024-07-17 16:00:35 +08:00 · d9e8ff195c
commit d9e8ff195c
parent c0ab592944
6 changed files with 109 additions and 54 deletions
--- a/package.json
+++ b/package.json
@ -16,6 +16,7 @@
    "@radix-ui/react-slot": "^1.1.0",
    "@radix-ui/react-toast": "^1.2.1",
    "@radix-ui/react-tooltip": "^1.1.2",
+    "@types/react-icons": "^3.0.0",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.1.1",
    "cmdk": "^1.0.0",
@ -27,6 +28,7 @@
    "react-day-picker": "^8.10.1",
    "react-desktop": "^0.3.9",
    "react-dom": "^18.2.0",
+    "react-icons": "^5.2.1",
    "react-resizable-panels": "^2.0.20",
    "tailwind-merge": "^2.4.0",
    "tailwindcss-animate": "^1.0.7"
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -23,6 +23,9 @@ importers:
      '@radix-ui/react-tooltip':
        specifier: ^1.1.2
        version: 1.1.2(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@types/react-icons':
+        specifier: ^3.0.0
+        version: 3.0.0(react@18.3.1)
      class-variance-authority:
        specifier: ^0.7.0
        version: 0.7.0
@ -56,6 +59,9 @@ importers:
      react-dom:
        specifier: ^18.2.0
        version: 18.3.1(react@18.3.1)
+      react-icons:
+        specifier: ^5.2.1
+        version: 5.2.1(react@18.3.1)
      react-resizable-panels:
        specifier: ^2.0.20
        version: 2.0.20(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@ -1110,6 +1116,10 @@ packages:
  '@types/react-dom@18.3.0':
    resolution: {integrity: sha512-EhwApuTmMBmXuFOikhQLIBUn6uFg81SwLMOAUgodJF14SOBOCMdU04gDoYi0WOJJHD144TL32z4yDqCW3dnkQg==}

+  '@types/react-icons@3.0.0':
+    resolution: {integrity: sha512-Vefs6LkLqF61vfV7AiAqls+vpR94q67gunhMueDznG+msAkrYgRxl7gYjNem/kZ+as2l2mNChmF1jRZzzQQtMg==}
+    deprecated: This is a stub types definition. react-icons provides its own type definitions, so you do not need this installed.
+
  '@types/react@18.3.3':
    resolution: {integrity: sha512-hti/R0pS0q1/xx+TsI73XIqk26eBsISZ2R0wUijXIngRK9R/e7Xw/cXVxQK7R5JjW+SV4zGcn5hXjudkN/pLIw==}

@ -2403,6 +2413,11 @@ packages:
    peerDependencies:
      react: ^18.3.1

+  react-icons@5.2.1:
+    resolution: {integrity: sha512-zdbW5GstTzXaVKvGSyTaBalt7HSfuK5ovrzlpyiWHAFXndXTdd/1hdDHI4xBM1Mn7YriT6aqESucFl9kEXzrdw==}
+    peerDependencies:
+      react: '*'
+
  react-is@16.13.1:
    resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}

@ -3852,6 +3867,12 @@ snapshots:
    dependencies:
      '@types/react': 18.3.3

+  '@types/react-icons@3.0.0(react@18.3.1)':
+    dependencies:
+      react-icons: 5.2.1(react@18.3.1)
+    transitivePeerDependencies:
+      - react
+
  '@types/react@18.3.3':
    dependencies:
      '@types/prop-types': 15.7.12
@ -4011,7 +4032,7 @@ snapshots:

  app-builder-bin@4.0.0: {}

-  app-builder-lib@24.13.3(dmg-builder@24.13.3(electron-builder-squirrel-windows@24.13.3))(electron-builder-squirrel-windows@24.13.3(dmg-builder@24.13.3)):
+  app-builder-lib@24.13.3(dmg-builder@24.13.3(electron-builder-squirrel-windows@24.13.3(dmg-builder@24.13.3)))(electron-builder-squirrel-windows@24.13.3(dmg-builder@24.13.3)):
    dependencies:
      '@develar/schema-utils': 2.6.5
      '@electron/notarize': 2.2.1
@ -4025,7 +4046,7 @@ snapshots:
      builder-util-runtime: 9.2.4
      chromium-pickle-js: 0.2.0
      debug: 4.3.5
-      dmg-builder: 24.13.3(electron-builder-squirrel-windows@24.13.3)
+      dmg-builder: 24.13.3(electron-builder-squirrel-windows@24.13.3(dmg-builder@24.13.3))
      ejs: 3.1.10
      electron-builder-squirrel-windows: 24.13.3(dmg-builder@24.13.3)
      electron-publish: 24.13.1
@ -4397,9 +4418,9 @@ snapshots:

  dlv@1.1.3: {}

-  dmg-builder@24.13.3(electron-builder-squirrel-windows@24.13.3):
+  dmg-builder@24.13.3(electron-builder-squirrel-windows@24.13.3(dmg-builder@24.13.3)):
    dependencies:
-      app-builder-lib: 24.13.3(dmg-builder@24.13.3(electron-builder-squirrel-windows@24.13.3))(electron-builder-squirrel-windows@24.13.3(dmg-builder@24.13.3))
+      app-builder-lib: 24.13.3(dmg-builder@24.13.3(electron-builder-squirrel-windows@24.13.3(dmg-builder@24.13.3)))(electron-builder-squirrel-windows@24.13.3(dmg-builder@24.13.3))
      builder-util: 24.13.1
      builder-util-runtime: 9.2.4
      fs-extra: 10.1.0
@ -4439,7 +4460,7 @@ snapshots:

  electron-builder-squirrel-windows@24.13.3(dmg-builder@24.13.3):
    dependencies:
-      app-builder-lib: 24.13.3(dmg-builder@24.13.3(electron-builder-squirrel-windows@24.13.3))(electron-builder-squirrel-windows@24.13.3(dmg-builder@24.13.3))
+      app-builder-lib: 24.13.3(dmg-builder@24.13.3(electron-builder-squirrel-windows@24.13.3(dmg-builder@24.13.3)))(electron-builder-squirrel-windows@24.13.3(dmg-builder@24.13.3))
      archiver: 5.3.2
      builder-util: 24.13.1
      fs-extra: 10.1.0
@ -4449,11 +4470,11 @@ snapshots:

  electron-builder@24.13.3(electron-builder-squirrel-windows@24.13.3(dmg-builder@24.13.3)):
    dependencies:
-      app-builder-lib: 24.13.3(dmg-builder@24.13.3(electron-builder-squirrel-windows@24.13.3))(electron-builder-squirrel-windows@24.13.3(dmg-builder@24.13.3))
+      app-builder-lib: 24.13.3(dmg-builder@24.13.3(electron-builder-squirrel-windows@24.13.3(dmg-builder@24.13.3)))(electron-builder-squirrel-windows@24.13.3(dmg-builder@24.13.3))
      builder-util: 24.13.1
      builder-util-runtime: 9.2.4
      chalk: 4.1.2
-      dmg-builder: 24.13.3(electron-builder-squirrel-windows@24.13.3)
+      dmg-builder: 24.13.3(electron-builder-squirrel-windows@24.13.3(dmg-builder@24.13.3))
      fs-extra: 10.1.0
      is-ci: 3.0.1
      lazy-val: 1.0.5
@ -5281,6 +5302,10 @@ snapshots:
      react: 18.3.1
      scheduler: 0.23.2

+  react-icons@5.2.1(react@18.3.1):
+    dependencies:
+      react: 18.3.1
+
  react-is@16.13.1: {}

  react-refresh@0.14.2: {}
--- a/src/pages/FlexLayoutDemo.tsx
+++ b/src/pages/FlexLayoutDemo.tsx
@ -1,23 +1,43 @@
 import React from "react";
-import { Actions, BorderNode, DockLocation, IJsonModel, ITabRenderValues, ITabSetRenderValues, Layout, Model, TabNode, TabSetNode } from "flexlayout-react";
+import {
+  Actions,
+  BorderNode,
+  DockLocation,
+  IJsonModel,
+  ITabRenderValues,
+  ITabSetRenderValues,
+  Layout,
+  Model,
+  TabNode,
+  TabSetNode,
+} from "flexlayout-react";
 import "flexlayout-react/style/light.css";
 import "./Layout.css";
-import { Button } from "@/components/ui/button"
+import { Button } from "@/components/ui/button";
 import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
-} from "@/components/ui/tooltip"
+} from "@/components/ui/tooltip";
+import { VscAdd } from "react-icons/vsc";

 const json: IJsonModel = {
  global: {
    tabEnableFloat: false,
-    tabSetMinWidth: 100,
+    tabSetMinWidth: 150,
    tabSetMinHeight: 200,
-    tabSetTabStripHeight: 48,//tab栏高度
+    /**
+     * 选项卡栏高度
+     */
+    tabSetTabStripHeight: 32, //tab栏高度
+    /**
+     * 四周边缘定位
+     */
+    enableEdgeDock: false,
    borderMinSize: 100,
    splitterSize: 2,
+    tabSetClassNameTabStrip: "custom-tab-strip",
  },
  borders: [],
  layout: {
@ -30,10 +50,10 @@ const json: IJsonModel = {
        children: [
          {
            type: "tab",
-            id: 'tab1',
-            name: "One",
+            id: "tab1",
+            name: "测试22222222222",
            component: "tabComponent",
-            config: { icon: "📘" }
+            config: { icon: "📘" },
          },
        ],
      },
@ -43,10 +63,10 @@ const json: IJsonModel = {
        children: [
          {
            type: "tab",
-            id: 'tab2',
+            id: "tab2",
            name: "Two",
            component: "tabComponent",
-            config: { icon: "📘" }
+            config: { icon: "📘" },
          },
        ],
      },
@ -54,10 +74,7 @@ const json: IJsonModel = {
  },
 };

-
-
 const FlexLayoutComponent: React.FC = () => {
-
  const model = Model.fromJson(json);

  const factory = (node: TabNode) => {
@ -69,8 +86,8 @@ const FlexLayoutComponent: React.FC = () => {

  const renderTab = (node: TabNode, renderValues: ITabRenderValues) => {
    renderValues.content = (
-      <div style={{ display: "flex", alignItems: "center" }}>
-        <span style={{ marginRight: 5 }}>{node.getConfig().icon}</span>
+      <div className="text-xs">
+        <span>{node.getConfig().icon}</span>
        {renderValues.content}
      </div>
    );
@ -82,30 +99,41 @@ const FlexLayoutComponent: React.FC = () => {
      type: "tab",
      name: "New Tab",
      component: "tabComponent",
-      config: { icon: '' }
+      config: { icon: "" },
    };

    // 使用 FlexLayout 的 addAction 执行添加 tab 的动作
-    const addAction = Actions.addNode(newTab, node.getId(), DockLocation.CENTER, -1);
+    const addAction = Actions.addNode(
+      newTab,
+      node.getId(),
+      DockLocation.CENTER,
+      -1
+    );
    node.getModel().doAction(addAction);
  };

-  const onRenderTabSet = (node: TabSetNode | BorderNode, renderValues: ITabSetRenderValues) => {
-
-    const createTabButton = <TooltipProvider>
-      <Tooltip>
-        <TooltipTrigger>
-          <span
-            onClick={() => addTab(node)}
-            key={node.getId() + 'create'}>
-            +</span>
-        </TooltipTrigger>
-        <TooltipContent side="bottom">
-          <p>新建标签页</p>
-        </TooltipContent>
-      </Tooltip>
-    </TooltipProvider>
-    renderValues.stickyButtons.push(createTabButton)
+  const onRenderTabSet = (
+    node: TabSetNode | BorderNode,
+    renderValues: ITabSetRenderValues
+  ) => {
+    const createTabButton = (
+      <TooltipProvider key={node.getId() + "create"}>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <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"
+              onClick={() => addTab(node)}
+            >
+              <VscAdd />
+            </button>
+          </TooltipTrigger>
+          <TooltipContent side="bottom">
+            <p>新建标签页</p>
+          </TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+    );
+    renderValues.stickyButtons.push(createTabButton);
  };

  return (
--- a/src/pages/Layout.css
+++ b/src/pages/Layout.css
@ -1,14 +1,6 @@
 /* Layout.css */
-
-.custom-layout-class .flexlayout__tab_button {
-  border-radius: 10px 10px 0 0;
-  padding: 5px;
-  margin-right: 5px;
-  cursor: pointer;
-}
-
-.custom-layout-class .flexlayout__tab_button:hover {
-  background-color: #45a049;
+.custom-tab-strip{
+  border-bottom-color: hsl(var(--border));
 }

 /* 覆盖默认的 FlexLayout 分割线选中颜色 */
--- a/src/pages/Layout.tsx
+++ b/src/pages/Layout.tsx
@ -1,17 +1,25 @@
+import { Button } from "@/components/ui/button";
 import { CommandDialogDemo } from "./CommandDialogDemo";
 import FlexLayoutComponent from "./FlexLayoutDemo";
+import { VscLayoutSidebarLeftOff } from "react-icons/vsc";

 const LayoutMain = () => {
  return (
-    <div className="h-screen items-center">
+    <div className="h-screen">
      {/* 此处height和 new BrowserWindow的titleBar设置一致 */}
      <div
-        className="drag bg-slate-50 px-20 flex items-center"
+        className="drag bg px-20 flex items-center justify-between"
        style={{ height: 36 }}
      >
-        <div className="no-drag w-screen inline-flex">
+        <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>
      <div className="h-[calc(100%-36px)] relative">
        <FlexLayoutComponent />
--- a/src/style/global.css
+++ b/src/style/global.css
@ -11,7 +11,7 @@ body,

@layer base {
  :root {
-    --background: 0 0% 100%;
+    --background: 0 0% 97.25%;
    --foreground: 240 10% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 240 10% 3.9%;