parent
b5b91b8ccb
commit
2e27efcaf8
After Width: | Height: | Size: 703 B |
After Width: | Height: | Size: 1.4 KiB |
@ -1,14 +1,60 @@ |
|||||||
// Nie 2023/2/8 |
// Nie 2023/2/8 |
||||||
import css from './index.module.scss' |
import css from './index.module.scss' |
||||||
|
import svgSetting from '@/assets/setting.svg' |
||||||
|
import svgAdd from '@/assets/add.svg' |
||||||
|
import {defaultStore} from "@/store/index.js"; |
||||||
|
import {useEffect, useState} from "react"; |
||||||
|
import {autorun} from "mobx"; |
||||||
|
|
||||||
export default function DirectoryStructureTree(props) { |
export default function DirectoryStructureTree(props) { |
||||||
|
const [chooseId, setChooseId] = useState(null) |
||||||
|
function handleSetting(e, id) { |
||||||
|
e.stopPropagation(); |
||||||
|
defaultStore.setSettingMenuId(id) |
||||||
|
} |
||||||
|
|
||||||
|
function handleCreate(e, id) { |
||||||
|
e.stopPropagation(); |
||||||
|
defaultStore.setNewMenuChildren(id) |
||||||
|
} |
||||||
|
|
||||||
|
function handleChoose(e, id){ |
||||||
|
e.stopPropagation(); |
||||||
|
defaultStore.setChooseMenuId(id) |
||||||
|
} |
||||||
|
useEffect(() => { |
||||||
|
const a = autorun(() => { |
||||||
|
if(defaultStore.menuId == chooseId) return |
||||||
|
console.log(defaultStore.menuId) |
||||||
|
setChooseId(defaultStore.menuId) |
||||||
|
}) |
||||||
|
return () => { |
||||||
|
a() |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
return props.tree.map((item, index) => { |
return props.tree.map((item, index) => { |
||||||
if (item.children && Array.isArray(item.children)) { |
if (item.children && Array.isArray(item.children)) { |
||||||
return <div key={index} className={css.directoryStructureTree}> |
return <div key={index} className={css.directoryStructureTree}> |
||||||
<div>{item.name}</div> |
<div className={chooseId == item.id ? [css.title, css.titleChoose].join(' ') : css.title} onClick={e => handleChoose(e, item.id)}> |
||||||
|
<div className={css.text}>{item.name}</div> |
||||||
|
<div className={css.cmd}> |
||||||
|
<img src={svgAdd} alt="" onClick={e => handleCreate(e, item.id)}/><img src={svgSetting} alt="" |
||||||
|
onClick={e => handleSetting(e, item.id)}/> |
||||||
|
</div> |
||||||
|
</div> |
||||||
<div>{DirectoryStructureTree({tree: item.children})}</div> |
<div>{DirectoryStructureTree({tree: item.children})}</div> |
||||||
</div> |
</div> |
||||||
} else { |
} else { |
||||||
return <div key={index} className={css.directoryStructureTree}>{item.name}</div> |
return <div key={index} className={css.directoryStructureTree}> |
||||||
|
<div className={chooseId == item.id ? [css.title, css.titleChoose].join(' ') : css.title} onClick={e => handleChoose(e, item.id)}> |
||||||
|
<div className={css.text}>{item.name}</div> |
||||||
|
<div className={css.cmd}><img src={svgAdd} alt="" onClick={e => handleCreate(e, item.id)}/><img |
||||||
|
src={svgSetting} alt="" onClick={e => handleSetting(e, item.id)}/></div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
} |
} |
||||||
}) |
}) |
||||||
} |
} |
@ -1,7 +1,47 @@ |
|||||||
|
@import '@/assets/default.scss'; |
||||||
.directoryStructureTree { |
.directoryStructureTree { |
||||||
position: relative; |
position: relative; |
||||||
line-height: 1.5em; |
line-height: 1.5em; |
||||||
border-radius: 10px; |
border-radius: 10px; |
||||||
margin: 1em; |
margin: 0.5rem 0; |
||||||
|
padding-left: 0.5rem; |
||||||
cursor: pointer; |
cursor: pointer; |
||||||
|
|
||||||
|
& > div.title { |
||||||
|
position: relative; |
||||||
|
display: flex; |
||||||
|
border-radius: 10px; |
||||||
|
padding: 0.3rem 0.5rem; |
||||||
|
transition: background ease-in-out 300ms; |
||||||
|
&:hover{ |
||||||
|
background: #66666622; |
||||||
|
} |
||||||
|
|
||||||
|
& > div.text { |
||||||
|
position: relative; |
||||||
|
flex: 1; |
||||||
|
@include autoHide; |
||||||
|
@include font-serif; |
||||||
|
font-weight: 600; |
||||||
|
} |
||||||
|
|
||||||
|
& > div.cmd { |
||||||
|
position: relative; |
||||||
|
//width: 50px; |
||||||
|
flex-shrink: 0; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
& > img{ |
||||||
|
width: 25px; |
||||||
|
|
||||||
|
} |
||||||
|
& > img:nth-child(2){ |
||||||
|
width: 22px; |
||||||
|
margin-left: 10px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
& > div.titleChoose{ |
||||||
|
background: #ffc93c99 !important; |
||||||
|
} |
||||||
} |
} |
Loading…
Reference in new issue