huayu-web
/
assistant-note
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat:创建目录

This commit is contained in:
shixiaohua 2024-02-20 14:57:14 +08:00
parent 367d54f35c
commit ed000101b8
6 changed files with 110 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
src/components/ItemTree/DirAddDir/index.jsx Normal file
View File

@ -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;

17
src/components/ItemTree/DirAddFile/index.jsx
View File

@ -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()

13
src/components/ItemTree/index.jsx
View File

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

44
src/redux/dirMessage_reducer.js
View File

@ -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

4
src/utils/File/index.jsx
View File

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

3
src/utils/PathOperate/index.jsx
View File

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