diff --git a/dist_20230222_V1.zip b/dist_20230222_V1.zip new file mode 100644 index 0000000..136b65d Binary files /dev/null and b/dist_20230222_V1.zip differ diff --git a/dist_20230222_V2.zip b/dist_20230222_V2.zip new file mode 100644 index 0000000..e07ad09 Binary files /dev/null and b/dist_20230222_V2.zip differ diff --git a/index.html b/index.html index 25e8fad..3e280e9 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,7 @@ - Vite + React + 西安升帮联创技术服务有限公司
diff --git a/src/components/DirectoryStructureTree/index.jsx b/src/components/DirectoryStructureTree/index.jsx index 4406da4..3ff2bf1 100644 --- a/src/components/DirectoryStructureTree/index.jsx +++ b/src/components/DirectoryStructureTree/index.jsx @@ -7,7 +7,10 @@ import {useEffect, useState} from "react"; import {autorun} from "mobx"; export default function DirectoryStructureTree(props) { - const [chooseId, setChooseId] = useState(null) + const [chooseId, setChooseId] = useState(0) + // const [fatherId, setFatherId] = useState(0) + // const [depth, setDepth] = useState(1) + function handleSetting(e, id) { e.stopPropagation(); defaultStore.setSettingMenuId(id) @@ -18,43 +21,41 @@ export default function DirectoryStructureTree(props) { defaultStore.setNewMenuChildren(id) } - function handleChoose(e, id){ + function handleChoose(e, id) { e.stopPropagation(); defaultStore.setChooseMenuId(id) } + useEffect(() => { const a = autorun(() => { - if(defaultStore.menuId == chooseId) return - console.log(defaultStore.menuId) + if (defaultStore.menuId == chooseId) return setChooseId(defaultStore.menuId) }) return () => { a() } - }) - + },[chooseId]) + // if (props.fatherId) { + // setFatherId(props.fatherId) + // } + // if(props.depth){ + // setDepth(props.depth) + // } + const depth = props.depth || 1; + const fatherId = props.fatherId || 0; return props.tree.map((item, index) => { - if (item.children && Array.isArray(item.children)) { - return
-
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 + }) +}