parent
2961feb2e9
commit
cc77d3465a
@ -1,17 +1,8 @@ |
|||||||
import {Editor} from 'amis-editor' |
import { NavLink, useRoutes } from 'react-router-dom' |
||||||
import { DatePicker } from 'antd'; |
import routes from './routes/index.jsx' //导入路由表 |
||||||
export default function App(){ |
|
||||||
|
|
||||||
const data = { |
export default |
||||||
value:{}, |
function App () { |
||||||
onChange: (value ) => { |
const element = useRoutes(routes) |
||||||
console.log(value) |
return element |
||||||
} |
|
||||||
} |
|
||||||
return ( |
|
||||||
<div className="Editor-Demo"> |
|
||||||
<div className="Editor-header"><DatePicker /></div> |
|
||||||
<Editor value={data.value} onChange={data.onChange}/> |
|
||||||
</div> |
|
||||||
) |
|
||||||
} |
} |
||||||
|
|||||||
@ -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 ( |
||||||
|
<div className={css.main}> |
||||||
|
<div className={css.left}></div> |
||||||
|
<div className={css.right}> |
||||||
|
<div className="Editor-Demo"> |
||||||
|
<div className="Editor-header"></div> |
||||||
|
<Editor value={data.value} onChange={data.onChange}/> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
||||||
@ -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; |
||||||
|
} |
||||||
|
} |
||||||
@ -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 <div className={css.main}> |
||||||
|
<header> |
||||||
|
<div> |
||||||
|
<div className={css.nav}></div> |
||||||
|
<div className={css.cmd}> |
||||||
|
<div> |
||||||
|
<div className={css.title}>管理</div> |
||||||
|
<div className={css.menuBox}> |
||||||
|
<div onClick={gotoEdit}>页面管理</div> |
||||||
|
<div onClick={gotoBackManagement}>后台管理</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</header> |
||||||
|
<div className={css.body}> |
||||||
|
<Outlet></Outlet> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
} |
||||||
@ -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; |
||||||
|
} |
||||||
|
} |
||||||
@ -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: <Home/>, |
||||||
|
children: [ |
||||||
|
{ |
||||||
|
path: 'edit', |
||||||
|
element: <Edit/>, |
||||||
|
} |
||||||
|
] |
||||||
|
}, |
||||||
|
{ |
||||||
|
path: '/', //当路径的端口号后面没有地址时就渲染'<Navigate>' |
||||||
|
element: <Navigate to="/amis"/> //只要`<Navigate>`组件被渲染，就会修改路径，切换视图 |
||||||
|
} |
||||||
|
// { |
||||||
|
// path: '/home', //路径，这里式一级路由，所以在路径前要带上'/' |
||||||
|
// element: <Home/>, //在该路径下需要渲染的元素节点 |
||||||
|
// children: [ //home下的子路由 //该路径下的子路由 |
||||||
|
// { |
||||||
|
// path: 'message', //子路由的路径，不需要'/'，如果加了'/'则会覆盖掉前面的路由路径 |
||||||
|
// element: <Message/>, //子路由下需要渲染的元素节点 |
||||||
|
// children: [ //message下的子路由 //子路由的子路由，下面称为孙子路由 |
||||||
|
// { |
||||||
|
// //使用params的方式传参时，需要在path上声明接收参数 |
||||||
|
// // path: 'detail/:id/:title/:msg', |
||||||
|
// path: 'detail', //孙子路由的路径，一样不需要'/'，否则将会覆盖前面的路由路径 |
||||||
|
// element: <Detail/> //孙子路由下需要渲染的元素节点 |
||||||
|
// } |
||||||
|
// ] |
||||||
|
// }, |
||||||
|
// { |
||||||
|
// path: 'news', |
||||||
|
// element: <News/>, |
||||||
|
// children: [ |
||||||
|
// { |
||||||
|
// path: 'detail', |
||||||
|
// element: <Detail/> |
||||||
|
// } |
||||||
|
// ] |
||||||
|
// }, |
||||||
|
// ] |
||||||
|
// }, |
||||||
|
] |
||||||
Loading…
Reference in new issue