parent
2961feb2e9
commit
cc77d3465a
@ -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 ( |
||||
<div className="Editor-Demo"> |
||||
<div className="Editor-header"><DatePicker /></div> |
||||
<Editor value={data.value} onChange={data.onChange}/> |
||||
</div> |
||||
) |
||||
export default |
||||
function App () { |
||||
const element = useRoutes(routes) |
||||
return element |
||||
} |
||||
|
@ -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