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;