diff --git a/package.json b/package.json index 35838b0..9eaa2c1 100644 --- 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" diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 052e4f6..96b200c 100644 --- 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: {} diff --git a/src/pages/FlexLayoutDemo.tsx b/src/pages/FlexLayoutDemo.tsx index 7ecd7d4..f1394e3 100644 --- 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 = ( -
- {node.getConfig().icon} +
+ {node.getConfig().icon} {renderValues.content}
); @@ -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 = - - - addTab(node)} - key={node.getId() + 'create'}> - + - - -

新建标签页

- - - - renderValues.stickyButtons.push(createTabButton) + const onRenderTabSet = ( + node: TabSetNode | BorderNode, + renderValues: ITabSetRenderValues + ) => { + const createTabButton = ( + + + + + + +

新建标签页

+ + + + ); + renderValues.stickyButtons.push(createTabButton); }; return ( diff --git a/src/pages/Layout.css b/src/pages/Layout.css index 132d18e..b0c9562 100644 --- 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 分割线选中颜色 */ diff --git a/src/pages/Layout.tsx b/src/pages/Layout.tsx index a2307f2..3900742 100644 --- 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 ( -
+
{/* 此处height和 new BrowserWindow的titleBar设置一致 */}
-
+
1
+
+
+ +
diff --git a/src/style/global.css b/src/style/global.css index edd88cf..e074e9f 100644 --- 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%;