diff --git a/src/components/ItemTree/DirAddDir/index.jsx b/src/components/ItemTree/DirAddDir/index.jsx new file mode 100644 index 0000000..c4f412d --- /dev/null +++ b/src/components/ItemTree/DirAddDir/index.jsx @@ -0,0 +1,51 @@ +import React, {useRef, useState} from 'react'; +import {Input, message, Modal} from 'antd'; +import {useDispatch, useSelector} from "react-redux"; +import {newDir} from "../../../utils/File"; +import {dirDirAdd} from "../../../redux/dirMessage_reducer"; +import {isEmpty} from "../../../utils/ObjectUtils"; +import {fileDirFormat} from "../../../utils/PathOperate"; + +const DirAddDir = (prop) => { + console.log("prop",prop) + const [isModalOpen, setIsModalOpen] = useState(false); + const dispatch = useDispatch(); + const inputValue = useRef(null); + const [messageApi, contextHolder] = message.useMessage(); + + const showModal = () => { + setIsModalOpen(true); + }; + const handleOk = () => { + console.log("inputValue",inputValue.current.input.value) + // 如果为空则提示 + if (isEmpty(inputValue.current.input.value)){ + let messageType = messageApi.open({ + type: 'error', + content: '文件夹名不能为空', + }); + return + } + // 新建文件 + let fileName = inputValue.current.input.value; + let filePath = fileDirFormat(prop.fileDir,fileName) + console.log("DirAddDir-filePath",filePath) + newDir(filePath) + // 更新树 + dispatch(dirDirAdd({"filePath":filePath,"fileDir":prop.fileDir,fileName})) + setIsModalOpen(false); + prop.closeMenu() + }; + const handleCancel = () => { + setIsModalOpen(false); + prop.closeMenu() + }; + return <> + {contextHolder} + 添加文件夹 + + + + ; +}; +export default DirAddDir; \ No newline at end of file diff --git a/src/components/ItemTree/DirAddFile/index.jsx b/src/components/ItemTree/DirAddFile/index.jsx index df69c86..7d8e7b8 100644 --- a/src/components/ItemTree/DirAddFile/index.jsx +++ b/src/components/ItemTree/DirAddFile/index.jsx @@ -5,7 +5,7 @@ import {newFile} from "../../../utils/File"; import {dirFileAdd} from "../../../redux/dirMessage_reducer"; import {addTableBarItem} from "../../../redux/tableBarItem_reducer"; import {isEmpty} from "../../../utils/ObjectUtils"; -import {fileNameFormat} from "../../../utils/PathOperate"; +import {fileNameFormat, fullFileNameFormat} from "../../../utils/PathOperate"; const DirAddFile = (prop) => { console.log("prop",prop) @@ -28,16 +28,17 @@ const DirAddFile = (prop) => { return } // 新建文件 - let fileName = fileNameFormat(prop.filePath,inputValue.current.input.value,".lexical") - newFile(fileName) + let fileName = inputValue.current.input.value+".lexical"; + let filePath = fullFileNameFormat(prop.fileDir,fileName) + newFile(filePath) // 更新树 - dispatch(dirFileAdd({"filePath":prop.filePath,fileName})) + dispatch(dirFileAdd({"fileDir":prop.fileDir,"filePath":filePath,fileName})) // 选中key，添加bar dispatch(addTableBarItem({ - label: inputValue.current.input.value+".lexical", - children: fileName, - key: fileName, - activeKey: fileName + label: fileName, + children: filePath, + key: filePath, + activeKey: filePath })) setIsModalOpen(false); prop.closeMenu() diff --git a/src/components/ItemTree/index.jsx b/src/components/ItemTree/index.jsx index 50d87b9..cc21c21 100644 --- a/src/components/ItemTree/index.jsx +++ b/src/components/ItemTree/index.jsx @@ -1,8 +1,8 @@ import React, {useEffect, useMemo, useState} from 'react'; import {Input, Menu, Tree} from 'antd'; -import {FolderOutlined, FileMarkdownOutlined, FileOutlined, DeleteOutlined, RedoOutlined} from '@ant-design/icons'; +import {FolderOutlined, FileMarkdownOutlined, FileOutlined} from '@ant-design/icons'; import "./index.less" -import {getFileDirByPath, getFileFullNameByPath, getFileNameByPath} from "../../utils/PathOperate"; +import {getFileNameByPath} from "../../utils/PathOperate"; const {Search} = Input; import {useSelector, useDispatch} from "react-redux"; import {addExpandedKeys, addTableBarItem, setExpandedKeys} from "../../redux/tableBarItem_reducer"; @@ -14,6 +14,7 @@ import RefreshDir from "./RefreshDir"; import CloseDir from "./CloseDir"; import DirAddFile from "./DirAddFile"; import DirDeleteFile from "./DirDeleteFile"; +import DirAddDir from "./DirAddDir"; // const defaultData = []; // 将树平铺用于查找 const dataList = []; @@ -288,8 +289,12 @@ const ItemTree = (prop) => { setState("")}/> , dirFlag && + + setState("")}/> + , + dirFlag && - itemTreeAddFile(dirMessage)} closeMenu={() => setState("")}/> + itemTreeAddFile(dirMessage)} closeMenu={() => setState("")}/> , !dirFlag && @@ -326,7 +331,7 @@ const ItemTree = (prop) => { // 是否自动展开父节点 autoExpandParent={autoExpandParent} showIcon={true} - selectedKeys={[useSelector(state => state.tableBarItem.activeKey)]} + // selectedKeys={[useSelector(state => state.tableBarItem.activeKey)]} defaultExpandedKeys={useSelector(state => state.tableBarItem.expandedKeyList)} // treeNodes 数据，如果设置则不需要手动构造 TreeNode 节点（key 在整个树范围内唯一） treeData={defaultValueState} diff --git a/src/redux/dirMessage_reducer.js b/src/redux/dirMessage_reducer.js index 7775a31..f31fd5a 100644 --- a/src/redux/dirMessage_reducer.js +++ b/src/redux/dirMessage_reducer.js @@ -110,24 +110,49 @@ export const dirMessageSlice = createSlice({ }, dirFileAdd:(state,action)=>{ console.log("dirMessage:dirFileAdd", state, action) + let fileDir = action.payload.fileDir let filePath = action.payload.filePath let fileName = action.payload.fileName let fileMessage = { - "fileName": getFileFullNameByPath(fileName), - "filePath": fileName, + "fileName": fileName, + "filePath": filePath, "dirFlag": false, "children": [] } // 查找旧文件并且修改文件信息 state.data.forEach(file => { - if (file.filePath === filePath) { + if (file.filePath === fileDir) { if (Array.isArray(file.children)){ file.children.push(fileMessage) }else { file.children=[fileMessage] } - } else if (file.children.length > 0 && file.filePath.startsWith(filePath)) { - dirFileAddChild(file.children, filePath, fileMessage) + } else if (file.children.length > 0 && filePath.startsWith(file.filePath)) { + dirFileAddChild(file.children, fileDir, fileMessage) + } + }) + }, + dirDirAdd:(state,action)=>{ + console.log("dirMessage:dirDirAdd", state, action) + let filePath = action.payload.filePath + let fileDir = action.payload.fileDir + let fileName = action.payload.fileName + let fileMessage = { + "fileName": fileName, + "filePath": fileName, + "dirFlag": true, + "children": [] + } + // 查找旧文件并且修改文件信息 + state.data.forEach(file => { + if (file.filePath === fileDir) { + if (Array.isArray(file.children)){ + file.children.push(fileMessage) + }else { + file.children=[fileMessage] + } + } else if (file.children.length > 0 && fileDir.startsWith(file.filePath)) { + dirFileAddChild(file.children, fileDir, fileMessage) } }) }, @@ -160,16 +185,16 @@ function dirFileRemoveChild(fileList, selectDirKey) { }) } -function dirFileAddChild(fileList, filePath, fileMessage){ +function dirFileAddChild(fileList, fileDir, fileMessage){ fileList.forEach(file => { - if (file.filePath === filePath) { + if (file.filePath === fileDir) { if (Array.isArray(file.children)){ file.children.push(fileMessage) }else { file.children=[fileMessage] } - } else if (file.children.length > 0 && file.filePath.startsWith(filePath)) { - dirFileAddChild(file.children, filePath, fileMessage) + } else if (file.children.length > 0 && fileDir.startsWith(file.filePath)) { + dirFileAddChild(file.children, fileDir, fileMessage) } }) } @@ -229,6 +254,7 @@ export const { dirRemove, updateFileName, dirFileAdd, + dirDirAdd, dirFileRemove, refreshDir } = dirMessageSlice.actions diff --git a/src/utils/File/index.jsx b/src/utils/File/index.jsx index 0303a38..10edf4e 100644 --- a/src/utils/File/index.jsx +++ b/src/utils/File/index.jsx @@ -35,10 +35,12 @@ export async function overWriteFile(filePath,jsonText) { await fs.writeFile(filePath,jsonText,{"encoding":"utf-8"}) } +export async function newDir(filePath) { + await fs.mkdir(filePath) +} export async function newFile(filePath) { await fs.writeFile(filePath,"",{"encoding":"utf-8"}) } - export async function deleteFileAndDir(filePath) { await fs.rm(filePath) } diff --git a/src/utils/PathOperate/index.jsx b/src/utils/PathOperate/index.jsx index c4e7a57..0b11128 100644 --- a/src/utils/PathOperate/index.jsx +++ b/src/utils/PathOperate/index.jsx @@ -17,6 +17,9 @@ export function getFileDirByPath(fileName){ export function fileNameFormat(dir,fileName,ext){ return pathOperate.format({"dir":dir,"base":fileName+ext}) } +export function fileDirFormat(dir,fileName){ + return dir+pathOperate.sep+fileName +} export function fullFileNameFormat(dir,fileName){ return pathOperate.format({"dir":dir,"base":fileName})