diff --git a/src/assets/arrow.svg b/src/assets/arrow.svg new file mode 100644 index 0000000..267fe89 --- /dev/null +++ b/src/assets/arrow.svg @@ -0,0 +1,7 @@ + + + + \ No newline at end of file diff --git a/src/assets/default.scss b/src/assets/default.scss new file mode 100644 index 0000000..032f0d1 --- /dev/null +++ b/src/assets/default.scss @@ -0,0 +1,50 @@ +@font-face { + font-family: Emoji; + src: local("Apple Color Emojiji"), local("Segoe UI Emoji"), local("Segoe UI Symbol"), local("Noto Color Emoji"); + unicode-range: U+1F000-1F644, U+203C-3299; +} +//无线字体： +body { + font-family: system-ui, —apple-system, Segoe UI, Rototo, Emoji, Helvetica, Arial, sans-serif; +} +//衬线字体： +@mixin font-serif { + font-family: Georgia, Cambria, "Times New Roman", Times, serif; +} +//等宽字体 +@mixin font-mono { + font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; +} + +//以上字体总结 来源于B站Up：zhangxinxu https://www.bilibili.com/video/BV1b54y1Z7pu/?spm_id_from=333.337.search-card.all.click&vd_source=2f8cd1eff8d87be6af7bdcbccbd60ade + +@mixin widthAuto{ + /*div宽度适应文字*/ + width:fit-content; + width:-webkit-fit-content; + width:-moz-fit-content; +} +@mixin noSelect{ + /*无法选中*/ + -webkit-touch-callout:none; + -webkit-user-select:none; + -khtml-user-select:none; + -moz-user-select:none; + -ms-user-select:none; + user-select:none; +} +//浸水模糊效果 +@mixin beautifulBlurWhite{ + background-color: rgba(255, 255, 255, 0.8); + backdrop-filter: blur(20px) saturate(5); +} +//浸水模糊效果 +@mixin beautifulBlur{ + backdrop-filter: blur(20px) saturate(1); +} +//壁纸适应效果 +@mixin autoBackgroundImg{ + background-position: center; + background-repeat: no-repeat; + background-size: cover; +} \ No newline at end of file diff --git a/src/assets/help.svg b/src/assets/help.svg new file mode 100644 index 0000000..e8fe35e --- /dev/null +++ b/src/assets/help.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/index.css b/src/assets/index.css index 72dd361..21b756d 100644 --- a/src/assets/index.css +++ b/src/assets/index.css @@ -88,7 +88,7 @@ button:focus-visible { align-items: center; justify-content: center; display: none; - backdrop-filter: blur(50px); + backdrop-filter: blur(10px) saturate(5); animation: modalRootShow ease-in-out 500ms forwards; } @keyframes modalRootShow { @@ -96,12 +96,12 @@ button:focus-visible { background: #33333300; } to{ - background: #66666633; + background: #bbbbbbcc; } } @keyframes modalRootHide { from{ - background: #33333333; + background: #aaaaaacc; } to{ background: #66666600; diff --git a/src/assets/lolipop.svg b/src/assets/lolipop.svg new file mode 100644 index 0000000..2c069b5 --- /dev/null +++ b/src/assets/lolipop.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/DirectoryStructureTree/index.jsx b/src/components/DirectoryStructureTree/index.jsx new file mode 100644 index 0000000..640b145 --- /dev/null +++ b/src/components/DirectoryStructureTree/index.jsx @@ -0,0 +1,13 @@ +import css from './index.module.scss' +export default function DirectoryStructureTree(props){ + return props.tree.map((item, index) => { + if(item.children && Array.isArray(item.children)){ + return
+
{item.name}
+
{DirectoryStructureTree({tree: item.children})}
+
+ }else{ + return
{item.name}
+ } + }) +} \ No newline at end of file diff --git a/src/components/DirectoryStructureTree/index.module.scss b/src/components/DirectoryStructureTree/index.module.scss new file mode 100644 index 0000000..c648cde --- /dev/null +++ b/src/components/DirectoryStructureTree/index.module.scss @@ -0,0 +1,7 @@ +.directoryStructureTree{ + position: relative; + line-height: 1.5em; + border-radius: 10px; + margin: 1em; + cursor: pointer; +} \ No newline at end of file diff --git a/src/components/Modal/index.jsx b/src/components/Modal/index.jsx index ad106b4..e75fad3 100644 --- a/src/components/Modal/index.jsx +++ b/src/components/Modal/index.jsx @@ -61,7 +61,7 @@ export default function Dialog(props){ return createPortal(
-
{props.children}
+
{props.children}
, node ); diff --git a/src/components/Modal/index.module.scss b/src/components/Modal/index.module.scss index 692e7a6..1e1e3a4 100644 --- a/src/components/Modal/index.module.scss +++ b/src/components/Modal/index.module.scss @@ -1,4 +1,4 @@ - +@import '@/assets/default.scss'; $modalShow:modalShow; $modalHide:modalHide; diff --git a/src/store/defaultStore.js b/src/store/defaultStore.js new file mode 100644 index 0000000..2fda191 --- /dev/null +++ b/src/store/defaultStore.js @@ -0,0 +1,45 @@ +import { observable, action, computed, makeObservable} from "mobx"; +import {config} from "@/config/sys22"; + + +class DefaultStore { + // 系统配置 + config = config; + + // 目录结构树 + directoryStructureTree = [ + { + name:'菜单1', + icon:'', + children:[ + { + name:'子菜单' + } + ] + }, + { + name:'菜单2', + icon:'', + }, + ]; + constructor() { + // mobx6 和以前版本这是最大的区别 + makeObservable(this, { + config: observable, + directoryStructureTree: observable, + setName: action, + titleName: computed + }); + + } + setName(v) { + console.log('触发action'); + this.name = v; + } + + get titleName(){ + return this.name+'___111'; + } +} + +export default DefaultStore \ No newline at end of file diff --git a/src/store/index.js b/src/store/index.js index e4f65b5..9381693 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -1,5 +1,7 @@ -import UserStore from './userStore' -import NetStore from "./netStore"; +// import UserStore from './userStore' +// import NetStore from "./netStore"; +import DefaultStore from "@/store/defaultStore.js"; -export const userStore = new UserStore() -export const netStore = new NetStore() \ No newline at end of file +// export const userStore = new UserStore() +// export const netStore = new NetStore() +export const defaultStore = new DefaultStore() \ No newline at end of file diff --git a/src/view/EditPageNew/bg.jpg b/src/view/EditPageNew/bg.jpg new file mode 100644 index 0000000..faf958a Binary files /dev/null and b/src/view/EditPageNew/bg.jpg differ diff --git a/src/view/EditPageNew/index.jsx b/src/view/EditPageNew/index.jsx index 74fa7f0..269e17f 100644 --- a/src/view/EditPageNew/index.jsx +++ b/src/view/EditPageNew/index.jsx @@ -1,3 +1,172 @@ -export default function EditPageNew(){ - return
Edit
+import {useState, useEffect} from 'react' +import {defaultStore} from '@/store/index' +import DirectoryStructureTree from "@/components/DirectoryStructureTree/index.jsx"; +import Modal from '@/components/Modal'; +import Button from "@/components/Button/index.jsx"; +import css from './index.module.scss' +import svgLolipop from '@/assets/lolipop.svg' +import svgHelp from '@/assets/help.svg' +import svgArrow from '@/assets/arrow.svg' + +export default function EditPageNew() { + // 大纲 + const [thumbnailList, setThumbnailList] = useState([{name: '大纲', choose: false}]); + // 添加大纲页面状态 + const [addThumbnailState, setAddThumbnailState] = useState(false); + // 大纲名称 + const [newThumbnailName, setNewThumbnailName] = useState(''); + // 选择大纲的box样式 + const moleculeBoxChoose = [css.moleculeBoxChoose, css.moleculeBox].join(' '); + + // 关闭大纲添加页面 + function closeThumbnailModal() { + setNewThumbnailName('') + setAddThumbnailState(false) + } + + // 确认添加大纲 + function addThumbnail() { + thumbnailList.push({ + name: newThumbnailName + }) + setThumbnailList(thumbnailList) + closeThumbnailModal() + } + + // 选择大纲 + function chooseThumbnail(index) { + thumbnailList.forEach(item => { + item.choose = false; + }) + thumbnailList[index].choose = true + setThumbnailList([...thumbnailList]) + setNowContent(thumbnailList[index]) + } + + useEffect(() => { + console.log(thumbnailList) + }, [thumbnailList]) + + // 当下的页面内容 + const [nowContent, setNowContent] = useState({}) + // 属性页开关 + const [attributeSwitch, setAttributeSwitch] = useState(false); + // 属性页标签位置 + const [attrLabelPosition, setAttrLabelPosition] = useState(0); + // 切换属性标签 + function handleChangeAttrLabelPosition(index){ + setAttrLabelPosition(index) + } + + + return
+
+
+
+
+
+
+
+
目录结构树
+
+
+
+
+ +
+
+
+
+
+
{defaultStore.config.projectName}
+
+
+
+
+
+
+
页面名称
+
+
+
+
+
大纲
+
+
+
+ { + thumbnailList.map((item, index) => { + return
chooseThumbnail(index)}> +
+
{item.name}
+
{item.choose}
+
+
+ }) + } +
+
{ + setAddThumbnailState(true) + }}> +
+
+
+ +
+
添加大纲
+
+
大纲名称
+
{ + setNewThumbnailName(event.target.value) + }}/>
+
+
+
+
+ +
+
+
+
+ +
+
+
{ + setAttributeSwitch(!attributeSwitch) + }}> + +
+
+
+
+
handleChangeAttrLabelPosition(0)}>元素结构树
+
handleChangeAttrLabelPosition(1)}>添加元素
+
handleChangeAttrLabelPosition(2)}>元素属性
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
} \ No newline at end of file diff --git a/src/view/EditPageNew/index.module.scss b/src/view/EditPageNew/index.module.scss new file mode 100644 index 0000000..8424ae8 --- /dev/null +++ b/src/view/EditPageNew/index.module.scss @@ -0,0 +1,500 @@ +@import '@/assets/default.scss'; + +.editPageNew { + @include noSelect; + position: relative; + height: 100%; + width: 100%; + overflow: hidden; + //background: #00ADB5; + display: flex; + flex-direction: column; + padding: 1rem; + box-sizing: border-box; + + & > div.container { + position: relative; + flex: 1; + // + //background: #556270; /* fallback for old browsers */ + //background: -webkit-linear-gradient(to right, #556270, #ff6b6b); /* Chrome 10-25, Safari 5.1-6 */ + //background: linear-gradient(to right, #556270, #ff6b6b); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ + + background: #780206; /* fallback for old browsers */ + background: -webkit-linear-gradient(to right, #061161, #780206); /* Chrome 10-25, Safari 5.1-6 */ + background: linear-gradient(to right, #061161, #780206); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ + + background: #B993D6; /* fallback for old browsers */ + background: -webkit-linear-gradient(to right, #8CA6DB, #B993D6); /* Chrome 10-25, Safari 5.1-6 */ + background: linear-gradient(to right, #8CA6DB33, #B993D633); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ + border-radius: 16px; + overflow: hidden; + box-shadow: 2px 2px 10px 2px #33333333; + + & > div.main { + position: relative; + height: 100%; + display: flex; + + & > div { + position: relative; + display: flex; + flex-direction: column; + overflow: hidden; + } + + // 左侧目录结构树 + & > div.directoryStructureTree { + position: relative; + flex-shrink: 0; + width: 260px; + border-right: 1px solid #fff; + box-sizing: border-box; + padding: 1rem; + + & > div.container { + position: relative; + flex: 1; + overflow: hidden; + display: flex; + flex-direction: column; + border-radius: 10px; + overflow: hidden; + + & > * { + position: relative; + } + + // 头部标题和logo + & > header { + flex-shrink: 0; + height: 100px; + display: flex; + align-items: center; + justify-content: center; + + &:before { + content: ""; + position: absolute; + background-color: #f9949e; + width: 50px; + height: 30px; + } + + & > div { + position: relative; + padding: 1rem; + @include beautifulBlur; + + & > div.svg { + text-align: center; + + & > img { + width: 30px; + } + } + + & > div.title { + line-height: 2rem; + color: #333; + @include font-serif; + font-weight: 600; + font-size: 1.1rem; + } + } + } + + // 主体目录 + & > div.main { + flex: 1; + display: flex; + flex-direction: column; + overflow: hidden; + + &:before, &:after { + content: ''; + position: relative; + width: 80%; + height: 3px; + border-radius: 10px; + background-color: #fff; + margin: 0 auto; + } + + div.container { + position: relative; + flex: 1; + } + } + + // 说明和备注 + & > footer { + flex-shrink: 0; + min-height: 50px; + display: flex; + flex-direction: column-reverse; + align-items: center; + + & > div { + position: relative; + display: flex; + + & > div.svg { + & > img { + width: 1.5rem; + } + } + + & > div.title { + @include font-serif; + color: #333; + font-size: 14px; + } + } + } + } + } + + // 右侧图形编辑器 + & > div.graphicEditor { + flex: 1; + display: flex; + flex-direction: column; + overflow: hidden; + padding: 1rem 1rem 1rem 2rem; + box-sizing: border-box; + + & > div.container { + position: relative; + flex: 1; + display: flex; + flex-direction: column; + // 头部页面描述 + & > header { + position: relative; + flex-shrink: 0; + height: 100px; + } + + // 分割线 + & > div.linner { + position: relative; + flex-shrink: 0; + height: 3px; + background-color: #fefefe; + width: 100%; + border-radius: 10px; + margin: 0 auto; + } + + // 图形编辑器主体 + & > div.main { + position: relative; + flex: 1; + //overflow: hidden; + display: flex; + flex-direction: column; + padding: 1rem 0 0 0; + box-sizing: border-box; + + & > div.container { + position: relative; + flex: 1; + display: flex; + + & > div { + position: relative; + } + + // 左部缩略图 + & > div.left { + width: 200px; + display: flex; + flex-direction: column; + + & > div.title { + position: relative; + @include font-serif; + font-weight: 600; + flex-shrink: 0; + line-height: 2rem; + } + + // 缩略图容器 + & > div.thumbnail { + position: relative; + flex: 1; + overflow: hidden; + padding: 1rem 0; + display: flex; + flex-direction: column; + + & > div.container { + flex: 1; + + // 缩略图列表 + & > div.moleculeList { + // 缩略图 + & > div.moleculeBox { + position: relative; + margin: 1rem; + box-sizing: border-box; + box-shadow: 1px 1px 8px 0px #33333333; + height: 100px; + border-radius: 0.5rem; + cursor: pointer; + //border: 1px solid #17B97800; + transition: box-shadow ease-in-out 300ms, border ease-in-out 300ms; + overflow: hidden; + display: flex; + flex-direction: column; + + &:hover { + box-shadow: 1px 1px 8px 1px #33333344; + } + + & > div { + position: relative; + flex: 1; + margin: 0.5rem; + } + } + + & > div.moleculeBoxChoose { + background: #FC354C33; /* fallback for old browsers */ + background: -webkit-linear-gradient(to right, #0ABFBC33, #FC354C33); /* Chrome 10-25, Safari 5.1-6 */ + background: linear-gradient(to right, #0ABFBC33, #FC354C33); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ + @include beautifulBlur; + } + + } + + // 添加缩略图 + & > div.moleculeAdd { + position: relative; + margin: 1rem; + box-shadow: 1px 1px 8px 0px #33333333; + height: 100px; + border-radius: 0.5rem; + cursor: pointer; + //border: 1px solid #cdcdcd00; + display: flex; + align-items: center; + justify-content: center; + transition: box-shadow ease-in-out 300ms; + + &:hover { + box-shadow: 1px 1px 8px 1px #33333344; + } + + & > div { + font-size: 6rem; + line-height: 6rem; + padding-bottom: 0.5rem; + } + } + + // 缩略图对象 + + } + } + } + + // 中部编辑器 + & > div.middle { + flex: 1; + min-width: 600px; + box-shadow: 2px 2px 10px 1px #33333333; + border-radius: 1rem; + margin-left: 1rem; + } + + // 右部属性区 + & > div.right { + position: relative; + display: flex; + flex-direction: column; + margin-left: 1rem; + //box-shadow: 2px 2px 10px 1px #33333333; + border-radius: 1rem; + transition: width ease-in-out 500ms, box-shadow ease-in-out 500ms, margin-left ease-in-out 500ms; + //padding: 1rem; + // 属性展示开关 + & > div.switch { + position: absolute; + left: -40px; + background: #FFC93C; + height: 60px; + width: 40px; + top: 0; + bottom: 0; + margin: auto 0; + border-radius: 50px 0 0 50px; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + + & > img { + width: 25px; + line-height: 50px; + transition: transform ease-in-out 500ms; + } + } + + & > div.switchClose { + position: absolute; + left: -40px; + background: #FFC93C; + height: 60px; + width: 40px; + top: 0; + bottom: 0; + margin: auto 0; + border-radius: 50px 0 0 50px; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + + & > img { + width: 25px; + line-height: 50px; + transform: rotate(180deg); + transition: transform ease-in-out 500ms; + } + } + + // 属性主体 + & > div.container { + position: relative; + flex: 1; + overflow: hidden; + display: flex; + flex-direction: column; + margin: 1rem; + // 属性切换开关 + & > header { + position: relative; + flex-shrink: 0; + display: flex; + overflow: hidden; + //border-radius: 1rem; + line-height: 2rem; + //background: #fefefe99; + width: 100%; + margin-bottom: 1rem; + //box-shadow: 1px 1px 8px 0px #33333333; + & > div { + @include font-serif; + font-weight: 600; + position: relative; + flex: 1; + text-align: center; + cursor: pointer; + overflow: hidden; + white-space: nowrap; + } + + & > div:first-child { + position: absolute; + background: #3EC1D3; + width: 33.33%; + border-radius: 1rem; + height: 3px; + bottom: 0; + transition: left ease-in-out 300ms; + } + } + + // 属性切换内容 + & > div.main { + position: relative; + overflow: hidden; + flex: 1; + padding: 1rem; + box-sizing: border-box; + background: #66666611; + border-radius: 1rem; + box-shadow: 0px 0px 10px 1px #66666611 inset; + + & > div.container { + position: relative; + width: 298%; + height: 100%; + left: 0; + display: flex; + transition: left ease-in-out 300ms; + & > div{ + position: relative; + } + + & > div.linner { + flex-shrink: 1 !important; + background: #fff; + //width: 1px; + height: 100%; + border-radius: 10px; + } + + & > div.elementStructureTree { + flex: 1; + } + + & > div.addElement { + flex: 1; + } + + & > div.elementAttribute { + flex: 1; + } + } + } + } + } + } + } + } + } + + } + } +} + +// 添加大纲弹窗 +.addThumbnailState { + position: relative; + height: 100%; + display: flex; + flex-direction: column; + + .title { + position: relative; + flex-shrink: 0; + text-align: center; + @include font-serif; + font-weight: 600; + font-size: 1.2rem; + margin: 5px 0; + } + + .main { + position: relative; + flex: 1; + display: flex; + align-items: center; + + & input { + border-bottom: 1px solid #cdcdcd; + margin-left: 1rem; + line-height: 1.2rem; + } + } + + .ok { + position: relative; + flex-shrink: 0; + display: flex; + justify-content: center; + } +} \ No newline at end of file