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 |
||||
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) { |
||||
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) => { |
||||
if (item.children && Array.isArray(item.children)) { |
||||
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> |
||||
} 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 { |
||||
position: relative; |
||||
line-height: 1.5em; |
||||
border-radius: 10px; |
||||
margin: 1em; |
||||
margin: 0.5rem 0; |
||||
padding-left: 0.5rem; |
||||
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