feat: add react-router-dom
This commit is contained in:
parent
a168eff501
commit
a6acf68ec4
|
@ -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"
|
||||
},
|
||||
|
|
|
@ -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
|
||||
|
|
14
src/App.tsx
14
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>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -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",
|
||||
|
|
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 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>
|
||||
|
|
|
@ -7,6 +7,7 @@ body,
|
|||
#root {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@layer base {
|
||||
|
|
Loading…
Reference in New Issue
Block a user