feat: add react-router-dom

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"
   },

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

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 (
     <ThemeProvider defaultTheme="light" storageKey="vite-ui-theme">
-      <Layout />
+      <Router>
+        <Routes>
+          <Route path="/" element={<LayoutMain />}>
+            <Route index element={<Aorta />} />
+            <Route path="dockerview" element={<Dockview />} />
+          </Route>
+        </Routes>
+      </Router>
     </ThemeProvider>
   );
 }

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<DockviewApi>();
 
   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",

src/pages/Aorta/index.tsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+const Aorta = () => {
+  return <div>aorta</div>;
+};
+
+export default Aorta;

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 (
     <div className="h-full">
-      <div className={`title-bar drag border h-[36px] ${titleBarStyles}`}>
-        标题栏
+      <div className={`title-bar drag border h-[36px] flex ${titleBarStyles}`}>
+        <div className="flex-1 flex items-center justify-center">Cvpilot</div>
       </div>
       <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="workspace w-[36px] h-full border-r">
+            <ul className="flex flex-col items-center pt-2">
+              <li className="w-[22px] h-[22px] flex flex-col items-center justify-center">
+                <Link to="/">1</Link>
+                <GoFileDirectory />
+              </li>
+              <li>
+                <Link to="/dockerview">2</Link>
+              </li>
+            </ul>
+          </div>
           <div className="relative w-[calc(100%-36px)] h-full">
-            {/* <FlexLayoutComponent /> */}
-            <Dockview />
+            <Outlet />
+            {/* <Dockview /> */}
           </div>
         </div>
       </div>

src/style/global.css

@@ -7,6 +7,7 @@ body,
 #root {
   height: 100%;
   margin: 0;
+  overflow: hidden;
 }
 
 @layer base {