feat: add react-router-dom
This commit is contained in:
parent
a168eff501
commit
a6acf68ec4
|
@ -31,6 +31,7 @@
|
||||||
"react-dom": "^18.2.0",
|
"react-dom": "^18.2.0",
|
||||||
"react-icons": "^5.2.1",
|
"react-icons": "^5.2.1",
|
||||||
"react-resizable-panels": "^2.0.20",
|
"react-resizable-panels": "^2.0.20",
|
||||||
|
"react-router-dom": "^6.26.0",
|
||||||
"tailwind-merge": "^2.4.0",
|
"tailwind-merge": "^2.4.0",
|
||||||
"tailwindcss-animate": "^1.0.7"
|
"tailwindcss-animate": "^1.0.7"
|
||||||
},
|
},
|
||||||
|
|
|
@ -68,6 +68,9 @@ importers:
|
||||||
react-resizable-panels:
|
react-resizable-panels:
|
||||||
specifier: ^2.0.20
|
specifier: ^2.0.20
|
||||||
version: 2.0.20(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
|
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:
|
tailwind-merge:
|
||||||
specifier: ^2.4.0
|
specifier: ^2.4.0
|
||||||
version: 2.4.0
|
version: 2.4.0
|
||||||
|
@ -982,6 +985,10 @@ packages:
|
||||||
'@radix-ui/rect@1.1.0':
|
'@radix-ui/rect@1.1.0':
|
||||||
resolution: {integrity: sha512-A9+lCBZoaMJlVKcRBz2YByCG+Cp2t6nAnMnNba+XiWxnj6r4JUFqfsgwocMBZU9LPtdxC6wB56ySYpc7LQIoJg==}
|
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':
|
'@rollup/rollup-android-arm-eabi@4.18.1':
|
||||||
resolution: {integrity: sha512-lncuC4aHicncmbORnx+dUaAgzee9cm/PbIqgWz1PpXuwc+sa1Ct83tnqUDy/GFKleLiN7ZIeytM6KJ4cAn1SxA==}
|
resolution: {integrity: sha512-lncuC4aHicncmbORnx+dUaAgzee9cm/PbIqgWz1PpXuwc+sa1Ct83tnqUDy/GFKleLiN7ZIeytM6KJ4cAn1SxA==}
|
||||||
cpu: [arm]
|
cpu: [arm]
|
||||||
|
@ -2470,6 +2477,19 @@ packages:
|
||||||
react: ^16.14.0 || ^17.0.0 || ^18.0.0
|
react: ^16.14.0 || ^17.0.0 || ^18.0.0
|
||||||
react-dom: ^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:
|
react-style-singleton@2.2.1:
|
||||||
resolution: {integrity: sha512-ZWj0fHEMyWkHzKYUr2Bs/4zU6XLmq9HsgBURm7g5pAVfyn49DgUiNgY2d4lXRlYSiCif9YBGpQleewkcqddc7g==}
|
resolution: {integrity: sha512-ZWj0fHEMyWkHzKYUr2Bs/4zU6XLmq9HsgBURm7g5pAVfyn49DgUiNgY2d4lXRlYSiCif9YBGpQleewkcqddc7g==}
|
||||||
engines: {node: '>=10'}
|
engines: {node: '>=10'}
|
||||||
|
@ -3758,6 +3778,8 @@ snapshots:
|
||||||
|
|
||||||
'@radix-ui/rect@1.1.0': {}
|
'@radix-ui/rect@1.1.0': {}
|
||||||
|
|
||||||
|
'@remix-run/router@1.19.0': {}
|
||||||
|
|
||||||
'@rollup/rollup-android-arm-eabi@4.18.1':
|
'@rollup/rollup-android-arm-eabi@4.18.1':
|
||||||
optional: true
|
optional: true
|
||||||
|
|
||||||
|
@ -5360,6 +5382,18 @@ snapshots:
|
||||||
react: 18.3.1
|
react: 18.3.1
|
||||||
react-dom: 18.3.1(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):
|
react-style-singleton@2.2.1(@types/react@18.3.3)(react@18.3.1):
|
||||||
dependencies:
|
dependencies:
|
||||||
get-nonce: 1.0.1
|
get-nonce: 1.0.1
|
||||||
|
|
14
src/App.tsx
14
src/App.tsx
|
@ -1,10 +1,20 @@
|
||||||
import { ThemeProvider } from "@/components/theme-provider";
|
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() {
|
function App() {
|
||||||
return (
|
return (
|
||||||
<ThemeProvider defaultTheme="light" storageKey="vite-ui-theme">
|
<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>
|
</ThemeProvider>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -5,8 +5,8 @@ import {
|
||||||
IDockviewPanelProps,
|
IDockviewPanelProps,
|
||||||
} from "dockview";
|
} from "dockview";
|
||||||
import { useEffect, useState } from "react";
|
import { useEffect, useState } from "react";
|
||||||
import 'dockview/dist/styles/dockview.css';
|
import "dockview/dist/styles/dockview.css";
|
||||||
import './theme.reset.css'
|
import "./theme.reset.css";
|
||||||
|
|
||||||
const Default = (props: IDockviewPanelProps) => {
|
const Default = (props: IDockviewPanelProps) => {
|
||||||
return (
|
return (
|
||||||
|
@ -28,9 +28,7 @@ const Dockview = (props: { theme?: string }) => {
|
||||||
const [api, setApi] = useState<DockviewApi>();
|
const [api, setApi] = useState<DockviewApi>();
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!api) {
|
if (!api) return;
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const disposables = [
|
const disposables = [
|
||||||
api.onWillDragPanel((e) => {
|
api.onWillDragPanel((e) => {
|
||||||
|
|
7
src/pages/Aorta/index.tsx
Normal file
7
src/pages/Aorta/index.tsx
Normal file
|
@ -0,0 +1,7 @@
|
||||||
|
import React from "react";
|
||||||
|
|
||||||
|
const Aorta = () => {
|
||||||
|
return <div>aorta</div>;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Aorta;
|
|
@ -1,5 +1,7 @@
|
||||||
import Dockview from "./ Dock";
|
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 LayoutMain = () => {
|
||||||
const platform =
|
const platform =
|
||||||
|
@ -8,15 +10,25 @@ const LayoutMain = () => {
|
||||||
platform === "macos" ? "pl-[5rem] pr-[.5rem]" : "pr-[10rem] pl-[2rem]";
|
platform === "macos" ? "pl-[5rem] pr-[.5rem]" : "pr-[10rem] pl-[2rem]";
|
||||||
return (
|
return (
|
||||||
<div className="h-full">
|
<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>
|
||||||
<div className="relative h-[calc(100%-36px)]">
|
<div className="relative h-[calc(100%-36px)]">
|
||||||
<div className="flex h-full">
|
<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">
|
<div className="relative w-[calc(100%-36px)] h-full">
|
||||||
{/* <FlexLayoutComponent /> */}
|
<Outlet />
|
||||||
<Dockview />
|
{/* <Dockview /> */}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -7,6 +7,7 @@ body,
|
||||||
#root {
|
#root {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
@layer base {
|
@layer base {
|
||||||
|
|
Loading…
Reference in New Issue
Block a user