From cc77d3465ae14822153f6daeeeec9ea1e373446d Mon Sep 17 00:00:00 2001 From: expressgy Date: Sun, 25 Jun 2023 01:01:23 +0800 Subject: [PATCH] router --- index.html | 2 +- package-lock.json | 61 ++++++++++++++++++++++ package.json | 1 + src/App.jsx | 21 +++----- src/main.jsx | 6 ++- src/pages/Edit/index.jsx | 25 +++++++++ src/pages/Edit/index.module.scss | 19 +++++++ src/pages/Home/index.jsx | 33 ++++++++++++ src/pages/Home/index.module.scss | 87 ++++++++++++++++++++++++++++++++ src/routes/index.jsx | 49 ++++++++++++++++++ src/scss/style.scss | 4 +- 11 files changed, 289 insertions(+), 19 deletions(-) create mode 100644 src/pages/Edit/index.jsx create mode 100644 src/pages/Edit/index.module.scss create mode 100644 src/pages/Home/index.jsx create mode 100644 src/pages/Home/index.module.scss create mode 100644 src/routes/index.jsx diff --git a/index.html b/index.html index 79c4701..25e8fad 100644 --- a/index.html +++ b/index.html @@ -1,5 +1,5 @@ - + diff --git a/package-lock.json b/package-lock.json index 3db917e..4e250b9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -24,6 +24,7 @@ "qs": "6.5.1", "react": "^16.14.0", "react-dom": "^16.14.0", + "react-router-dom": "^6.14.0", "sass": "^1.63.4" }, "devDependencies": { @@ -1204,6 +1205,14 @@ "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz", "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==" }, + "node_modules/@remix-run/router": { + "version": "1.7.0", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.7.0.tgz", + "integrity": "sha512-Eu1V3kz3mV0wUpVTiFHuaT8UD1gj/0VnoFHQYX35xlslQUpe8CuYoKFn9d4WZFHm3yDywz6ALZuGdnUPKrNeAw==", + "engines": { + "node": ">=14" + } + }, "node_modules/@restart/hooks": { "version": "0.3.27", "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.3.27.tgz", @@ -5469,6 +5478,36 @@ "node": ">=0.10.0" } }, + "node_modules/react-router": { + "version": "6.14.0", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.14.0.tgz", + "integrity": "sha512-OD+vkrcGbvlwkspUFDgMzsu1RXwdjNh83YgG/28lBnDzgslhCgxIqoExLlxsfTpIygp7fc+Hd3esloNwzkm2xA==", + "dependencies": { + "@remix-run/router": "1.7.0" + }, + "engines": { + "node": ">=14" + }, + "peerDependencies": { + "react": ">=16.8" + } + }, + "node_modules/react-router-dom": { + "version": "6.14.0", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.14.0.tgz", + "integrity": "sha512-YEwlApKwzMMMbGbhh+Q7MsloTldcwMgHxUY/1g0uA62+B1hZo2jsybCWIDCL8zvIDB1FA0pBKY9chHbZHt+2dQ==", + "dependencies": { + "@remix-run/router": "1.7.0", + "react-router": "6.14.0" + }, + "engines": { + "node": ">=14" + }, + "peerDependencies": { + "react": ">=16.8", + "react-dom": ">=16.8" + } + }, "node_modules/react-textarea-autosize": { "version": "8.3.3", "resolved": "https://registry.npmjs.org/react-textarea-autosize/-/react-textarea-autosize-8.3.3.tgz", @@ -7313,6 +7352,11 @@ } } }, + "@remix-run/router": { + "version": "1.7.0", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.7.0.tgz", + "integrity": "sha512-Eu1V3kz3mV0wUpVTiFHuaT8UD1gj/0VnoFHQYX35xlslQUpe8CuYoKFn9d4WZFHm3yDywz6ALZuGdnUPKrNeAw==" + }, "@restart/hooks": { "version": "0.3.27", "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.3.27.tgz", @@ -10469,6 +10513,23 @@ "integrity": "sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==", "dev": true }, + "react-router": { + "version": "6.14.0", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.14.0.tgz", + "integrity": "sha512-OD+vkrcGbvlwkspUFDgMzsu1RXwdjNh83YgG/28lBnDzgslhCgxIqoExLlxsfTpIygp7fc+Hd3esloNwzkm2xA==", + "requires": { + "@remix-run/router": "1.7.0" + } + }, + "react-router-dom": { + "version": "6.14.0", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.14.0.tgz", + "integrity": "sha512-YEwlApKwzMMMbGbhh+Q7MsloTldcwMgHxUY/1g0uA62+B1hZo2jsybCWIDCL8zvIDB1FA0pBKY9chHbZHt+2dQ==", + "requires": { + "@remix-run/router": "1.7.0", + "react-router": "6.14.0" + } + }, "react-textarea-autosize": { "version": "8.3.3", "resolved": "https://registry.npmjs.org/react-textarea-autosize/-/react-textarea-autosize-8.3.3.tgz", diff --git a/package.json b/package.json index 19b40bb..0fa55ba 100644 --- a/package.json +++ b/package.json @@ -26,6 +26,7 @@ "qs": "6.5.1", "react": "^16.14.0", "react-dom": "^16.14.0", + "react-router-dom": "^6.14.0", "sass": "^1.63.4" }, "devDependencies": { diff --git a/src/App.jsx b/src/App.jsx index 591bdbf..2397798 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,17 +1,8 @@ -import {Editor} from 'amis-editor' -import { DatePicker } from 'antd'; -export default function App(){ +import { NavLink, useRoutes } from 'react-router-dom' +import routes from './routes/index.jsx' //导入路由表 - const data = { - value:{}, - onChange: (value ) => { - console.log(value) - } - } - return ( -
-
- -
- ) +export default +function App () { + const element = useRoutes(routes) + return element } diff --git a/src/main.jsx b/src/main.jsx index 8c78990..9997426 100644 --- a/src/main.jsx +++ b/src/main.jsx @@ -22,9 +22,13 @@ import 'amis-editor-core/lib/style.css'; import './scss/style.scss'; import {setDefaultTheme} from 'amis'; import 'antd/dist/reset.css'; +import { BrowserRouter } from "react-router-dom"; setDefaultTheme('cxd'); // react < 18 -ReactDOM.render(, document.getElementById('root')); +ReactDOM.render( + + + , document.getElementById('root')); // node -v 18.16.0 diff --git a/src/pages/Edit/index.jsx b/src/pages/Edit/index.jsx new file mode 100644 index 0000000..47f3c4d --- /dev/null +++ b/src/pages/Edit/index.jsx @@ -0,0 +1,25 @@ +import {Editor} from 'amis-editor' +import { useEffect } from 'react'; +import css from './index.module.scss' +export default function Edit(){ + useEffect(() => { + console.log('EDIT') + }) + const data = { + value:{}, + onChange: (value ) => { + console.log(value) + } + } + return ( +
+
+
+
+
+ +
+
+
+ ) +} \ No newline at end of file diff --git a/src/pages/Edit/index.module.scss b/src/pages/Edit/index.module.scss new file mode 100644 index 0000000..a531a37 --- /dev/null +++ b/src/pages/Edit/index.module.scss @@ -0,0 +1,19 @@ +.main{ + position: relative; + height: 100%; + display: flex; + overflow: hidden; + & > div{ + position: relative; + } + & > div.left{ + height: 100%; + flex-shrink: 0; + width: 200px; + border-right: 1px solid #cdcdcd; + } + & > div.right{ + height: 100%; + flex:1; + } +} \ No newline at end of file diff --git a/src/pages/Home/index.jsx b/src/pages/Home/index.jsx new file mode 100644 index 0000000..b087e03 --- /dev/null +++ b/src/pages/Home/index.jsx @@ -0,0 +1,33 @@ +import css from './index.module.scss'; +import {useNavigate, Outlet} from 'react-router-dom' + +export default function Home(){ + const navigate = useNavigate() + + function gotoEdit(){ + navigate('/amis/edit') + } + function gotoBackManagement(){ + window.location.href = '/' + } + + return
+
+
+
+
+
+
管理
+
+
页面管理
+
后台管理
+
+
+
+
+
+
+ +
+
+} \ No newline at end of file diff --git a/src/pages/Home/index.module.scss b/src/pages/Home/index.module.scss new file mode 100644 index 0000000..47bff06 --- /dev/null +++ b/src/pages/Home/index.module.scss @@ -0,0 +1,87 @@ +.main { + position: relative; + height: 100%; + width: 100%; + overflow: hidden; + + display: flex; + flex-direction: column; + + & > header { + position: relative; + flex-shrink: 0; + height: 80px; + border-bottom: 1px solid #cdcdcd; + z-index: 10000 !important; + overflow: visible; + & > div{ + position: relative; + margin: 0 auto; + max-width: 1200px; + min-width: 800px; + height: 100%; + display: flex; + & > div.nav{ + position: relative; + flex: 1; + } + & > div.cmd{ + position: relative; + flex-shrink: 0; + min-width: 100px; + display: flex; + align-items: center; + justify-content: center; + & > div{ + position: relative; + cursor: pointer; + width: 100%; + &:hover .menuBox{ + height: 6em; + padding: 1em 0em; + border: 1px solid #cdcdcd; + } + & > div.title{ + position: relative; + height: 2.1em; + padding: 0 1em; + line-height: 2em; + border: 2px solid #cdcdcd; + border-radius: 10px; + font-size: 1em; + font-weight: bold; + text-align: center; + color: #666; + } + & > div.menuBox{ + position: absolute; + line-height: 2em; + height: 0; + //top: 2.5em; + overflow: hidden; + transition: height ease-in-out 300ms, padding ease-in-out 300ms; + background: #dedede; + width: 100%; + border-radius: 10px; + //border: 1px solid #cdcdcdff; + & > div{ + padding: 0em 1em; + text-align: center; + &:hover{ + background: #fefefe; + transition: background ease-in-out 300ms; + } + } + + } + } + + } + } + } + & > div.body{ + position: relative; + flex: 1; + overflow: hidden; + } +} diff --git a/src/routes/index.jsx b/src/routes/index.jsx new file mode 100644 index 0000000..b1470e8 --- /dev/null +++ b/src/routes/index.jsx @@ -0,0 +1,49 @@ +import { Navigate } from 'react-router-dom' +import Edit from '../pages/Edit/index.jsx' +import Home from "../pages/Home/index.jsx"; + +//eslint-disable-next-line +export default [ + { + path: '/amis', + element: , + children: [ + { + path: 'edit', + element: , + } + ] + }, + { + path: '/', //当路径的端口号后面没有地址时就渲染'' + element: //只要``组件被渲染，就会修改路径，切换视图 + } + // { + // path: '/home', //路径，这里式一级路由，所以在路径前要带上'/' + // element: , //在该路径下需要渲染的元素节点 + // children: [ //home下的子路由 //该路径下的子路由 + // { + // path: 'message', //子路由的路径，不需要'/'，如果加了'/'则会覆盖掉前面的路由路径 + // element: , //子路由下需要渲染的元素节点 + // children: [ //message下的子路由 //子路由的子路由，下面称为孙子路由 + // { + // //使用params的方式传参时，需要在path上声明接收参数 + // // path: 'detail/:id/:title/:msg', + // path: 'detail', //孙子路由的路径，一样不需要'/'，否则将会覆盖前面的路由路径 + // element: //孙子路由下需要渲染的元素节点 + // } + // ] + // }, + // { + // path: 'news', + // element: , + // children: [ + // { + // path: 'detail', + // element: + // } + // ] + // }, + // ] + // }, +] \ No newline at end of file diff --git a/src/scss/style.scss b/src/scss/style.scss index cae1275..e466036 100644 --- a/src/scss/style.scss +++ b/src/scss/style.scss @@ -13,7 +13,7 @@ $disabled-bg-color: #f7f7f9; // 禁用背景颜色 html { font-size: 16px; } -html,body{ +html,body,#root{ position: relative; height: 100%; width: 100%; @@ -40,7 +40,7 @@ html,body{ .Editor-Demo { position: relative; - height: 100vh; + height: 100%; min-height: 510px; display: flex; flex-direction: column;