handleChoose(e, item.id)}>
-
{item.name}
-
-
handleCreate(e, item.id)}/>
handleSetting(e, item.id)}/>
-
+ return item.father == fatherId &&
+
handleChoose(e, item.id)}>
+
{item.name}
+
+ {depth < 3 &&
handleCreate(e, item.id)}/>}
handleSetting(e, item.id)}/>
-
{DirectoryStructureTree({tree: item.children})}
- } else {
- return
-
handleChoose(e, item.id)}>
-
{item.name}
-
handleCreate(e, item.id)}/>
handleSetting(e, item.id)}/>
-
-
- }
+
{ depth < 3 && }
+
})
-}
\ No newline at end of file
+}
diff --git a/src/components/DirectoryStructureTree/index.module.scss b/src/components/DirectoryStructureTree/index.module.scss
index c425806..07eff3d 100644
--- a/src/components/DirectoryStructureTree/index.module.scss
+++ b/src/components/DirectoryStructureTree/index.module.scss
@@ -35,7 +35,7 @@
width: 25px;
}
- & > img:nth-child(2){
+ & > img.setting{
width: 22px;
margin-left: 10px;
}
@@ -44,4 +44,4 @@
& > div.titleChoose{
background: #ffc93c99 !important;
}
-}
\ No newline at end of file
+}
diff --git a/src/components/Editor/index.jsx b/src/components/Editor/index.jsx
index 7700ba5..c5ae782 100644
--- a/src/components/Editor/index.jsx
+++ b/src/components/Editor/index.jsx
@@ -68,9 +68,6 @@ export default function Editor(props) {
}
}, [props.element])
- useEffect(() => {
- // console.log(style)
- }, [style])
function hrefClick(e) {
e.stopPropagation();
@@ -173,4 +170,4 @@ export default function Editor(props) {
return null
break
}
-}
\ No newline at end of file
+}
diff --git a/src/components/Editor/index.module.scss b/src/components/Editor/index.module.scss
index 10b0a65..52071c0 100644
--- a/src/components/Editor/index.module.scss
+++ b/src/components/Editor/index.module.scss
@@ -3,6 +3,9 @@
position: relative;
min-height: 3rem;
}
+@mixin span{
+ padding: 10px;
+}
// 单元素结构
.singleFrame {
@include frame;
@@ -23,7 +26,7 @@
// 行内文本
.span{
@include frame;
- padding: 10px;
+ @include span;
width: auto;
height: auto;
}
@@ -75,4 +78,4 @@
// 视频
.video{
-}
\ No newline at end of file
+}
diff --git a/src/components/Vision/index.jsx b/src/components/Vision/index.jsx
new file mode 100644
index 0000000..d1b0c67
--- /dev/null
+++ b/src/components/Vision/index.jsx
@@ -0,0 +1,136 @@
+import css from "./index.module.scss";
+import {useEffect, useState} from "react";
+import svgImg from "@/assets/img.svg";
+
+export default function Vision(props){
+ const [element, setElement] = useState({})
+ const [style, setStyle] = useState({})
+ const [href, setHref] = useState({url: '', state: 0,})
+ const [img, setImg] = useState(svgImg)
+ const [inputValue, setInputValue] = useState('')
+ if(!props.element) return null
+ useEffect(() => {
+ let nowElement = null
+ if(!props.element) return
+ nowElement = typeof props.element.body == 'string' ? JSON.parse(props.element.body) : props.element
+ setElement(nowElement)
+ if (nowElement.config && nowElement.config.styleReal) {
+ const styleReal = nowElement.config.styleReal
+ const styleTem = {
+ backgroundImage: styleReal.background
+ ?`url('/ossStatic/${styleReal.background
+ }')`:null,
+ backgroundColor: '#'+styleReal['background-color'],
+ position: styleReal.position,
+ width: styleReal.width + styleReal['width-mx'],
+ height: styleReal.height + styleReal['height-mx'],
+ backdropFilter: styleReal['backdrop-filter'],
+ top: styleReal.top + styleReal['top-mx'],
+ right: styleReal.right + styleReal['right-mx'],
+ bottom: styleReal.bottom + styleReal['bottom-mx'],
+ left: styleReal.left + styleReal['left-mx'],
+ margin: styleReal.margin,
+ padding: styleReal.padding,
+ borderRadius: styleReal['border-radius'] + styleReal['border-radius-mx'],
+ border: styleReal.border,
+ overflow: styleReal.overflow,
+ color: '#'+styleReal.color,
+ fontSize: styleReal['font-size'] + styleReal['font-size-mx'],
+ fontWeight: styleReal['font-weight'],
+ lineHeight: styleReal['line-height'] + styleReal['line-height-mx'],
+ textIndent: styleReal['text-indent'] + styleReal['text-indent-mx'],
+ textAlign: styleReal['text-align'],
+ whiteSpace: styleReal['white-space'],
+ }
+ if(styleReal['all-center']){
+ styleTem.display = 'flex';
+ styleTem['alignItems'] = 'center';
+ styleTem['justifyContent'] = 'center';
+ }
+ setStyle(styleTem)
+ setHref({
+ url: styleReal.href,
+ state: styleReal['href-mx']
+ })
+ }else{
+ setStyle({})
+ }
+
+ if(nowElement.identify == 'image' && nowElement.inputValue){
+ setImg('/ossStatic/' + nowElement.inputValue)
+ }
+ if (nowElement.inputValue) {
+ setInputValue(nowElement.inputValue)
+ }
+ }, [props.element])
+
+ function hrefClick(e) {
+ console.log('AAA')
+ console.log(href)
+ e.stopPropagation();
+ if (!href.url) return;
+ if (href.url.length < 3) return
+ if (href.state == '0') {
+ window.location.href = href.url
+ } else {
+ window.open(href.url)
+ }
+ }
+
+
+ switch (element.identify) {
+ // 单元素结构
+ case 'singleFrame':
+ return
+ {
+ Array.isArray(element.childElement) ? element.childElement.map(item => {
+ {return }
+ }) :
+ }
+
+ break;
+ // 横向多元素结构
+ case 'transverseFrame':
+ return
+ {
+ Array.isArray(element.childElement) ? element.childElement.map(item => {
+ {return }
+ }) :
+ }
+
+ break;
+ // 纵向多元素结构
+ case 'longitudinalFrame':
+ return
+ {
+ Array.isArray(element.childElement) ? element.childElement.map(item => {
+ {return }
+ }) :
+ }
+
+ break;
+ // 行内文本
+ case 'span':
+ //
{inputValue}
+ return
{inputValue}
+ break;
+ // 块文本
+ case 'blockText':
+ return
+ break;
+ // 图像
+ case 'image':
+ return
+
+
+ break;
+ // 视频
+ case 'video':
+ break;
+
+ default:
+ return null
+ break
+ }
+}
diff --git a/src/components/Vision/index.module.scss b/src/components/Vision/index.module.scss
new file mode 100644
index 0000000..24d1ac7
--- /dev/null
+++ b/src/components/Vision/index.module.scss
@@ -0,0 +1,81 @@
+// 框架
+@mixin frame{
+ position: relative;
+ //min-height: 3rem;
+}
+@mixin span{
+ //padding: 10px;
+}
+// 单元素结构
+.singleFrame {
+ @include frame;
+}
+// 横向多元素结构
+.transverseFrame{
+ display: flex;
+ flex-wrap: wrap;
+ @include frame;
+}
+// 纵向多元素结构
+.longitudinalFrame {
+ display: flex;
+ flex-direction: column;
+ @include frame;
+}
+
+// 行内文本
+.span{
+ @include frame;
+ @include span;
+ width: auto;
+ height: auto;
+}
+.spanDiv{
+ position: relative;
+ display: flex;
+ padding: 5px;
+ box-sizing: border-box;
+ & > input{
+ position: relative;
+ display: block;
+ flex: 1;
+ line-height: 1.5em;
+ background: #ffffff99;
+ border: 1px solid #333;
+ font-size: inherit;
+ color: inherit;
+ }
+}
+.editInput{
+ position: relative;
+ min-height: 2em;
+}
+// 块文本
+.blockText{
+
+}
+// 图像
+.image{
+ position: relative;
+ @include frame;
+ padding: 0;
+ width: 100px;
+ & > input{
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ min-width: 30px;
+ min-height: 20px;
+ opacity: 0;
+ display: block;
+ }
+ & > img{
+ position: relative;
+ }
+}
+// 视频
+.video{
+
+}
diff --git a/src/config/sys22.js b/src/config/sys22.js
index d909d08..d31b31a 100644
--- a/src/config/sys22.js
+++ b/src/config/sys22.js
@@ -1,8 +1,8 @@
-import icon from '../assets/react.svg'
+import icon from '../assets/logo.png'
export const config = {
projectName:'西安升帮联创技术服务有限公司',
icon,
-}
\ No newline at end of file
+}
diff --git a/src/request/api.js b/src/request/api.js
index c3e2d91..da73a5b 100644
--- a/src/request/api.js
+++ b/src/request/api.js
@@ -6,6 +6,11 @@ export default {
params:data
})
},
+ getContainerPage(data){
+ return instance.get('/container/getPage',{
+ params:data
+ })
+ },
createContainer(data){
const formData = new FormData()
Object.keys(data).map(item => {
@@ -50,4 +55,4 @@ export default {
})
return instance.put('/menu/updateMenu/',formData)
}
-}
\ No newline at end of file
+}
diff --git a/src/router/index.jsx b/src/router/index.jsx
index 0b4b037..9570629 100644
--- a/src/router/index.jsx
+++ b/src/router/index.jsx
@@ -1,18 +1,30 @@
import { Navigate } from 'react-router-dom'
import EditPageNew from '@/view/EditPageNew'
+import Home from "@/view/Home/index.jsx";
+import Show from "@/view/Show/index.jsx";
export default [
// 路由表
{
path:'/',
+ element:
+ },
+ {
+ path:'/home',
+ element:
,
+ children:[
+ {
+ path:':route',
+ element:
+ }
+ ]
+ },
+ {
+ path:'/edit',
element:
},
// {
- // path:'/signIn',
- // element:
- // },
- // {
// path:'/signUp',
// element:
// },
@@ -26,8 +38,8 @@ export default [
// }
// ]
// },
- // {
- // path: "",
- // element:
- // }
-]
\ No newline at end of file
+ {
+ path: "*",
+ element:
+ }
+]
diff --git a/src/store/defaultStore.js b/src/store/defaultStore.js
index 8271d34..7a03560 100644
--- a/src/store/defaultStore.js
+++ b/src/store/defaultStore.js
@@ -9,6 +9,9 @@ class DefaultStore {
// 系统配置
config = config;
+ // 当前页内容
+ nowPageContent = null
+
// 目录结构树
directoryStructureTree = [
{
@@ -41,7 +44,7 @@ class DefaultStore {
// 菜单列表
menuList = [];
// 当前MenuId
- menuId = 10;
+ menuId = 0;
// 创建子菜单的ID
newMenuChidlrenId = null;
// 设置菜单
@@ -81,6 +84,7 @@ class DefaultStore {
templateContainer: observable,
newMenuChidlrenId: observable,
settingMenuId: observable,
+ nowPageContent: observable,
containerList: computed,
@@ -102,7 +106,8 @@ class DefaultStore {
createMneuItem: action,
setNewMenuChildren: action,
setSettingMenuId: action,
- setChooseMenuId: action
+ setChooseMenuId: action,
+ getNowPageContent: action
});
}
@@ -212,8 +217,11 @@ class DefaultStore {
async getMenuList(){
const response = await api.getMenuList()
runInAction(() => {
- this.menuList = response.data.data
- console.log(this.menuList)
+ const menuList = response.data.data
+ menuList.sort((a, b) => {
+ return a.rank - b.rank
+ })
+ this.menuList = menuList
})
}
// 添加菜单
@@ -231,6 +239,13 @@ class DefaultStore {
await api.updateMenuItem(data)
this.getMenuList()
}
+
+ async getNowPageContent(data){
+ const response = await api.getContainerPage(data)
+ runInAction(() => {
+ this.nowPageContent = response.data.data
+ })
+ }
}
-export default DefaultStore
\ No newline at end of file
+export default DefaultStore
diff --git a/src/view/EditPageNew/index.jsx b/src/view/EditPageNew/index.jsx
index 8b65491..c51f78d 100644
--- a/src/view/EditPageNew/index.jsx
+++ b/src/view/EditPageNew/index.jsx
@@ -407,6 +407,8 @@ export default function EditPageNew() {
defaultStore.createMneuItem(menuData)
}
setDeleteMenuState(false)
+ const menu = {name:'', route:'', rank:0, father:0, icon: '', remarks:''}
+ setMenuData({...menu})
}
// 确认删除
function handleDeleteMenuItem(){
diff --git a/src/view/Home/index.jsx b/src/view/Home/index.jsx
new file mode 100644
index 0000000..885d6b0
--- /dev/null
+++ b/src/view/Home/index.jsx
@@ -0,0 +1,72 @@
+import css from './index.module.scss'
+import logo from '@/assets/logo.png'
+import {useEffect, useState} from "react";
+import {defaultStore} from "@/store/index.js";
+import { Outlet, useNavigate } from "react-router-dom";
+import {autorun} from "mobx";
+
+export default function Home() {
+ const [menuList, setMenuList] = useState([])
+ const navigate = useNavigate()
+
+ useEffect(() => {
+ defaultStore.getMenuList()
+ }, [0])
+ useEffect(() => {
+ const a = autorun(() => {
+ if (defaultStore.menuList == menuList) return
+ setMenuList(defaultStore.menuList)
+ })
+ return () => {
+ a()
+ }
+ })
+ useEffect(() => {
+ // console.log(menuList)
+ }, [menuList])
+ // const history = useHistory()
+
+ function goto(router){
+ navigate(router)
+ }
+
+ return
+
+
+
+
+
+
+
+}
diff --git a/src/view/Home/index.module.scss b/src/view/Home/index.module.scss
new file mode 100644
index 0000000..423cfa8
--- /dev/null
+++ b/src/view/Home/index.module.scss
@@ -0,0 +1,197 @@
+@import '@/assets/default.scss';
+
+div.home {
+ position: relative;
+ width: 100%;
+ height: 100%;
+ overflow: auto;
+ min-width: 1000px;
+
+ & > header {
+ position: relative;
+ width: 100%;
+ background: #fefefe;
+ border-bottom: 1px solid #99999933;
+
+ & > nav {
+ position: relative;
+ max-width: 1200px;
+ margin: 0 auto;
+ height: 70px;
+ display: flex;
+
+ & > div.menu1Box:first-child {
+ padding: 0 1rem;
+ }
+
+ & > div.menu1Box:nth-child(n+2) {
+ padding: 0 3.5rem;
+
+
+ &:hover {
+ & > div.container {
+ max-height: 200px;
+ }
+
+ & > div.border {
+ background-color: #2c5e99;
+ }
+ }
+ }
+
+ & > div.menu1Box:nth-child(n+3) {
+ &:before {
+ content: "";
+ position: absolute;
+ display: inline-block;
+ width: 2px;
+ height: 30px;
+ background: #33333366;
+ border-radius: 10px;
+ left: -1px;
+ }
+ }
+
+ & > div.menu1Box {
+ position: relative;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+ height: 100%;
+ //font-weight: 600;
+ & > div.logo {
+ position: relative;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ img {
+ width: 60px;
+ }
+ }
+
+ & > div.border {
+ position: absolute;
+ width: 100%;
+ height: 3px;
+ background-color: transparent;
+ bottom: 0px;
+ transition: background-color ease-in-out 300ms;
+ }
+
+ & > div.title1 {
+ letter-spacing: 0.5rem;
+ font-size: 1.2rem;
+ color: #333;
+ }
+
+ & > div.container {
+ position: absolute;
+ max-height: 0;
+ transition: max-height ease-in-out 300ms;
+ overflow: hidden;
+ top: 70px;
+ width: 100%;
+ margin: 0;
+ z-index: 100;
+ background: #99999918;
+
+ & > div.menu2Box:first-child {
+ margin-top: 0.5rem;
+ }
+
+ & > div.menu2Box:last-child {
+ margin-bottom: 0.5rem;
+ }
+ }
+
+ & > div.container > div.menu2Box {
+ position: relative;
+ //top:80px;
+ width: 100%;
+
+ & > div.title2:last-child {
+ margin-bottom: 1rem;
+ }
+
+ & > div.title2 {
+ position: relative;
+ line-height: 2em;
+ font-size: 1rem;
+ font-weight: bold;
+ padding: 0 0.5rem;
+
+ & > div.text {
+ position: relative;
+ color: #444;
+ @include autoHide;
+ padding-left: 0.5rem;
+ transition: all ease-in-out 300ms;
+ }
+
+ & > div.background {
+ position: absolute;
+ height: 100%;
+ left: 0;
+ width: 0;
+ transition: all ease-in-out 500ms;
+ }
+
+ &:before {
+ position: absolute;
+ display: inline-block;
+ content: "";
+ height: 1.2rem;
+ width: 2px;
+ background: #33333399;
+ border-radius: 10px;
+ margin-right: 0.5rem;
+ top: 5px;
+ }
+
+ &:hover {
+ & > div.background {
+ width: 100%;
+ background: #2c5e99;
+ }
+
+ & > div.text {
+ color: #fefefe;
+ }
+ }
+ }
+
+ & > div.menu3Box {
+ position: relative;
+
+ & > div.title3 {
+ position: relative;
+ padding-left: 1.1rem;
+ font-size: 1rem;
+ @include autoHide;
+ line-height: 1.8em;
+ transition: background-color ease-in-out 300ms;
+
+ &:hover {
+ color: #2c5e99;
+ }
+
+ &:before {
+ position: relative;
+ display: inline-block;
+ content: ">";
+ height: 0.5rem;
+ margin-right: 0.5rem;
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+
+ & > div.main {
+
+ }
+}
diff --git a/src/view/Show/index.jsx b/src/view/Show/index.jsx
new file mode 100644
index 0000000..17cab4b
--- /dev/null
+++ b/src/view/Show/index.jsx
@@ -0,0 +1,26 @@
+import { useParams } from 'react-router-dom'
+import {useEffect, useState} from "react";
+import {defaultStore} from "@/store/index.js";
+import {autorun} from "mobx";
+import Vision from '@/components/Vision'
+
+export default function Show(props){
+ const [pageData, setPageData] = useState([])
+ const params = useParams()
+ console.log(params)
+ useEffect(() => {
+ defaultStore.getNowPageContent({route:params.route})
+ },[params])
+ useEffect(() => {
+ const a = autorun(() => {
+ if(!defaultStore.nowPageContent) return;
+ setPageData(defaultStore.nowPageContent)
+ })
+ return () => {
+ a()
+ }
+ },[pageData])
+ return pageData.map(item => {
+ return
+ })
+}