feat:创建目录

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}
+        <span onClick={showModal}>添加文件夹</span>
+        <Modal title="新建文件夹" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
+            <Input ref={inputValue} placeholder="文件夹名不能为空" />
+        </Modal>
+    </>;
+};
+export default DirAddDir;

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")
+        let fileName = inputValue.current.input.value+".lexical";
-        newFile(fileName)
+        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",
+            label: fileName,
-            children: fileName,
+            children: filePath,
-            key: fileName,
+            key: filePath,
-            activeKey: fileName
+            activeKey: filePath
         }))
         setIsModalOpen(false);
         prop.closeMenu()

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) => {
                 <RefreshDir filePath={key} refreshDir={refreshDir} closeMenu={() => setState("")}/>
             </Menu.Item>,
             dirFlag &&
+            <Menu.Item key='7'>
+                <DirAddDir fileDir={key} closeMenu={() => setState("")}/>
+            </Menu.Item>,
+            dirFlag &&
             <Menu.Item key='3'>
-                <DirAddFile filePath={key} itemTreeAddFile = {(dirMessage)=>itemTreeAddFile(dirMessage)} closeMenu={() => setState("")}/>
+                <DirAddFile fileDir={key} itemTreeAddFile = {(dirMessage)=>itemTreeAddFile(dirMessage)} closeMenu={() => setState("")}/>
             </Menu.Item>,
             !dirFlag &&
             <Menu.Item key='4'>
@@ -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}

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),
+                "fileName": fileName,
-                "filePath": 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)) {
+                } else if (file.children.length > 0 && filePath.startsWith(file.filePath)) {
-                    dirFileAddChild(file.children, filePath, fileMessage)
+                    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)) {
+        } else if (file.children.length > 0 && fileDir.startsWith(file.filePath)) {
-            dirFileAddChild(file.children, filePath, fileMessage)
+            dirFileAddChild(file.children, fileDir, fileMessage)
         }
     })
 }
@@ -229,6 +254,7 @@ export const {
     dirRemove,
     updateFileName,
     dirFileAdd,
+    dirDirAdd,
     dirFileRemove,
     refreshDir
 } = dirMessageSlice.actions

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)
 }

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})