From a6acf68ec42c7fde8a1d6ef76049bed3e0659b13 Mon Sep 17 00:00:00 2001 From: mozzie Date: Mon, 5 Aug 2024 15:13:48 +0800 Subject: [PATCH] feat: add react-router-dom --- package.json | 1 + pnpm-lock.yaml | 34 ++++++++++++++++++++++++++++++++++ src/App.tsx | 14 ++++++++++++-- src/pages/ Dock/index.tsx | 10 ++++------ src/pages/Aorta/index.tsx | 7 +++++++ src/pages/Layout.tsx | 24 ++++++++++++++++++------ src/style/global.css | 1 + 7 files changed, 77 insertions(+), 14 deletions(-) create mode 100644 src/pages/Aorta/index.tsx diff --git a/package.json b/package.json index c2a4a14..1208108 100644 --- a/package.json +++ b/package.json @@ -31,6 +31,7 @@ "react-dom": "^18.2.0", "react-icons": "^5.2.1", "react-resizable-panels": "^2.0.20", + "react-router-dom": "^6.26.0", "tailwind-merge": "^2.4.0", "tailwindcss-animate": "^1.0.7" }, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 62666c3..bd99541 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -68,6 +68,9 @@ importers: react-resizable-panels: specifier: ^2.0.20 version: 2.0.20(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + react-router-dom: + specifier: ^6.26.0 + version: 6.26.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1) tailwind-merge: specifier: ^2.4.0 version: 2.4.0 @@ -982,6 +985,10 @@ packages: '@radix-ui/rect@1.1.0': resolution: {integrity: sha512-A9+lCBZoaMJlVKcRBz2YByCG+Cp2t6nAnMnNba+XiWxnj6r4JUFqfsgwocMBZU9LPtdxC6wB56ySYpc7LQIoJg==} + '@remix-run/router@1.19.0': + resolution: {integrity: sha512-zDICCLKEwbVYTS6TjYaWtHXxkdoUvD/QXvyVZjGCsWz5vyH7aFeONlPffPdW+Y/t6KT0MgXb2Mfjun9YpWN1dA==} + engines: {node: '>=14.0.0'} + '@rollup/rollup-android-arm-eabi@4.18.1': resolution: {integrity: sha512-lncuC4aHicncmbORnx+dUaAgzee9cm/PbIqgWz1PpXuwc+sa1Ct83tnqUDy/GFKleLiN7ZIeytM6KJ4cAn1SxA==} cpu: [arm] @@ -2470,6 +2477,19 @@ packages: react: ^16.14.0 || ^17.0.0 || ^18.0.0 react-dom: ^16.14.0 || ^17.0.0 || ^18.0.0 + react-router-dom@6.26.0: + resolution: {integrity: sha512-RRGUIiDtLrkX3uYcFiCIxKFWMcWQGMojpYZfcstc63A1+sSnVgILGIm9gNUA6na3Fm1QuPGSBQH2EMbAZOnMsQ==} + engines: {node: '>=14.0.0'} + peerDependencies: + react: '>=16.8' + react-dom: '>=16.8' + + react-router@6.26.0: + resolution: {integrity: sha512-wVQq0/iFYd3iZ9H2l3N3k4PL8EEHcb0XlU2Na8nEwmiXgIUElEH6gaJDtUQxJ+JFzmIXaQjfdpcGWaM6IoQGxg==} + engines: {node: '>=14.0.0'} + peerDependencies: + react: '>=16.8' + react-style-singleton@2.2.1: resolution: {integrity: sha512-ZWj0fHEMyWkHzKYUr2Bs/4zU6XLmq9HsgBURm7g5pAVfyn49DgUiNgY2d4lXRlYSiCif9YBGpQleewkcqddc7g==} engines: {node: '>=10'} @@ -3758,6 +3778,8 @@ snapshots: '@radix-ui/rect@1.1.0': {} + '@remix-run/router@1.19.0': {} + '@rollup/rollup-android-arm-eabi@4.18.1': optional: true @@ -5360,6 +5382,18 @@ snapshots: react: 18.3.1 react-dom: 18.3.1(react@18.3.1) + react-router-dom@6.26.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1): + dependencies: + '@remix-run/router': 1.19.0 + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + react-router: 6.26.0(react@18.3.1) + + react-router@6.26.0(react@18.3.1): + dependencies: + '@remix-run/router': 1.19.0 + react: 18.3.1 + react-style-singleton@2.2.1(@types/react@18.3.3)(react@18.3.1): dependencies: get-nonce: 1.0.1 diff --git a/src/App.tsx b/src/App.tsx index 61d49c2..165f2ea 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,10 +1,20 @@ import { ThemeProvider } from "@/components/theme-provider"; -import Layout from "./pages/Layout"; +import LayoutMain from "@/pages/Layout"; +import { BrowserRouter as Router, Routes, Route } from "react-router-dom"; +import Aorta from "@/pages/Aorta"; +import Dockview from "@/pages/ Dock"; function App() { return ( - + + + }> + } /> + } /> + + + ); } diff --git a/src/pages/ Dock/index.tsx b/src/pages/ Dock/index.tsx index 27ce2a1..cbe4c3c 100644 --- a/src/pages/ Dock/index.tsx +++ b/src/pages/ Dock/index.tsx @@ -5,8 +5,8 @@ import { IDockviewPanelProps, } from "dockview"; import { useEffect, useState } from "react"; -import 'dockview/dist/styles/dockview.css'; -import './theme.reset.css' +import "dockview/dist/styles/dockview.css"; +import "./theme.reset.css"; const Default = (props: IDockviewPanelProps) => { return ( @@ -28,9 +28,7 @@ const Dockview = (props: { theme?: string }) => { const [api, setApi] = useState(); useEffect(() => { - if (!api) { - return; - } + if (!api) return; const disposables = [ api.onWillDragPanel((e) => { @@ -83,7 +81,7 @@ const Dockview = (props: { theme?: string }) => { event.api.addPanel({ id: "panel_2", component: "default", - + position: { direction: "right", referencePanel: "panel_1", diff --git a/src/pages/Aorta/index.tsx b/src/pages/Aorta/index.tsx new file mode 100644 index 0000000..50f62aa --- /dev/null +++ b/src/pages/Aorta/index.tsx @@ -0,0 +1,7 @@ +import React from "react"; + +const Aorta = () => { + return
aorta
; +}; + +export default Aorta; diff --git a/src/pages/Layout.tsx b/src/pages/Layout.tsx index 8849025..fabd959 100644 --- a/src/pages/Layout.tsx +++ b/src/pages/Layout.tsx @@ -1,5 +1,7 @@ import Dockview from "./ Dock"; -import FlexLayoutComponent from "./FlexLayoutDemo"; +import { Outlet, Link } from "react-router-dom"; +import { GoFileDirectory } from "react-icons/go"; +import Aorta from "@/pages/Aorta"; const LayoutMain = () => { const platform = @@ -8,15 +10,25 @@ const LayoutMain = () => { platform === "macos" ? "pl-[5rem] pr-[.5rem]" : "pr-[10rem] pl-[2rem]"; return (
-
- 标题栏 +
+
Cvpilot
-
123
+
+
    +
  • + 1 + +
    • +
  • + 2 +
    • +
+
- {/* */} - + + {/* */}
diff --git a/src/style/global.css b/src/style/global.css index e074e9f..a7e5459 100644 --- a/src/style/global.css +++ b/src/style/global.css @@ -7,6 +7,7 @@ body, #root { height: 100%; margin: 0; + overflow: hidden; } @layer base {