From bac35b5f383eac41b074ab8cb6b2dff54b1caf70 Mon Sep 17 00:00:00 2001 From: shixiaohua Date: Mon, 5 Feb 2024 16:34:41 +0800 Subject: [PATCH] =?UTF-8?q?feat:=E7=82=B9=E5=87=BB=E6=96=87=E4=BB=B6?= =?UTF-8?q?=E5=A4=B9=E8=87=AA=E5=8A=A8=E6=89=93=E5=BC=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/comment/TopMenu.js | 4 +- src/components/ItemTree/index.jsx | 112 +++++++++++++++++++----------- src/redux/dirMessage_reducer.js | 5 -- 3 files changed, 73 insertions(+), 48 deletions(-) diff --git a/src/comment/TopMenu.js b/src/comment/TopMenu.js index 045793b..3ae3353 100644 --- a/src/comment/TopMenu.js +++ b/src/comment/TopMenu.js @@ -61,7 +61,9 @@ exports.menuRebuild = (mainWindow) => { if (!result.canceled) { console.log('result.filePaths', result.filePaths) try { - mainWindow.webContents.send('openDirectory', readDirLocal(result.filePaths[0])) + readDirLocal(result.filePaths[0]).then(dirDirectory=>{ + mainWindow.webContents.send('openDirectory', dirDirectory) + }) } catch (err) { console.error(err); } diff --git a/src/components/ItemTree/index.jsx b/src/components/ItemTree/index.jsx index f88405a..6e2d64a 100644 --- a/src/components/ItemTree/index.jsx +++ b/src/components/ItemTree/index.jsx @@ -1,13 +1,14 @@ import React, {useEffect, useMemo, useState} from 'react'; import {Input, Tree} from 'antd'; -import {FolderOutlined, FileMarkdownOutlined,FileOutlined} from '@ant-design/icons'; +import {FolderOutlined, FileMarkdownOutlined, FileOutlined} from '@ant-design/icons'; import "./index.less" + const {Search} = Input; -import {useSelector,useDispatch} from "react-redux"; +import {useSelector, useDispatch} from "react-redux"; import {addTableBarItem} from "../../redux/tableBarItem_reducer"; import {readDir} from "../../utils/File"; import {nextDirAdd} from "../../redux/dirMessage_reducer"; -const defaultData = []; +// const defaultData = []; // 将树平铺用于查找 const dataList = []; const generateList = (data) => { @@ -24,7 +25,7 @@ const generateList = (data) => { } } }; -generateList(defaultData); +// generateList(defaultData); const getParentKey = (key, tree) => { let parentKey; for (let i = 0; i < tree.length; i++) { @@ -43,15 +44,15 @@ const getParentKey = (key, tree) => { function generateChildList(fileList) { const result = [] for (let i = 0; i < fileList.length; i++) { - const {fileName, filePath, dirFlag,childList} = fileList[i]; + const {fileName, filePath, dirFlag, childList} = fileList[i]; const childListM = [] - if (Array.isArray(childList)&&childList.length > 0) { + if (Array.isArray(childList) && childList.length > 0) { childListM.push(...generateChildList(childList)); } result.push({ "key": filePath, "title": fileName, - "icon": dirFlag?:fileName.endsWith(".md")?:, + "icon": dirFlag ? : fileName.endsWith(".md") ? : , "dirFlag": dirFlag, "children": childListM }); @@ -59,48 +60,64 @@ function generateChildList(fileList) { return result; } -const ItemTree = () => { - const [expandedKeys, setExpandedKeys] = useState([]); - const [searchValue, setSearchValue] = useState(''); - const dispatch = useDispatch() - const [autoExpandParent, setAutoExpandParent] = useState(true); - +/** + * 将文件信息改为树信息 + * @param fileDirDate + * @returns {*[]} + */ +const flushTree = (fileDirDate) => { const defaultValueStateSet = []; - let fileDirDate = useSelector(state => state.dirMessage.data); - if (fileDirDate.length>0){ + if (Array.isArray(fileDirDate) && fileDirDate.length > 0) { for (let i = 0; i < fileDirDate.length; i++) { const node = fileDirDate[i]; console.log("node:", node) const {fileName, filePath, childList, dirFlag} = node; const childListM = [] - if (childList.length > 0) { + if (Array.isArray(childList) && childList.length > 0) { childListM.push(...generateChildList(childList)); } - if (defaultData.filter(fileMessage => fileMessage.key === filePath).length === 0) { - defaultData.push({ - "key": filePath, - "title": fileName, - "icon": , - "dirFlag": dirFlag, - "children": childListM - }); - } + defaultValueStateSet.push({ + "key": filePath, + "title": fileName, + "icon": , + "dirFlag": dirFlag, + "children": childListM + }); } - console.log("Array.from(new Set(defaultData)):", Array.from(new Set(defaultData))) - defaultValueStateSet.push(...Array.from(new Set(defaultData))) } - const [defaultValueState, setDefaultValueState] = useState(defaultValueStateSet); + return defaultValueStateSet; +} +const ItemTree = () => { + const [expandedKeys, setExpandedKeys] = useState([]); + const [searchValue, setSearchValue] = useState(''); + const dispatch = useDispatch() + const [autoExpandParent, setAutoExpandParent] = useState(true); + let filePath = useSelector(state => state.dirMessage.data); + const [defaultValueState, setDefaultValueState] = useState(flushTree(filePath)); const onExpand = (newExpandedKeys) => { setExpandedKeys(newExpandedKeys); setAutoExpandParent(false); }; + + const addChildNode = (valueState, fileStateList) => { + valueState.forEach(file => { + if (fileStateList[0].key.startsWith(file.key)){ + if (file.key === fileStateList[0].key) { + file.children = fileStateList[0].children + } else if (Array.isArray(file.children) && file.children.length > 0) { + addChildNode(file.children, fileStateList) + } + } + }) + } + const onChange = (e) => { const {value} = e.target; const newExpandedKeys = dataList .map((item) => { if (item.title.indexOf(value) > -1) { - return getParentKey(item.key, defaultData); + return getParentKey(item.key, defaultValueState); } return null; }) @@ -112,21 +129,32 @@ const ItemTree = () => { const onSelect = (selectedKeys, e) => { if (e.selected) { console.log('onSelect.selectedKeys', selectedKeys, e) - if (e.node.dirFlag){ + if (e.node.dirFlag) { // 加载目录下一级文件信息 - readDir(e.node.key).then(fileStateList=>{ - dispatch(nextDirAdd({selectDirKey:e.node.key,fileStateList})) - }) - }else { + if (!Array.isArray(e.node.children) || e.node.children.length === 0) { + readDir(e.node.key).then(fileStateList => { + if (Array.isArray(fileStateList[0].childList) && fileStateList[0].childList.length > 0) { + dispatch(nextDirAdd({selectDirKey: e.node.key, fileStateList})) + // 添加下级节点 + addChildNode(defaultValueState, flushTree(fileStateList)) + const result = [...defaultValueState] + console.log("[...defaultValueState]:",result) + setDefaultValueState(result) + } + }) + } + // 打开当前目录 + expandedKeys.push(e.node.key) + setExpandedKeys([...expandedKeys]); + setAutoExpandParent(false); + } else { // 打开文件 - dispatch(addTableBarItem( - { - label: e.node.title, - children: e.node.key, - key: e.node.key, - activeKey:e.node.key - } - )) + dispatch(addTableBarItem({ + label: e.node.title, + children: e.node.key, + key: e.node.key, + activeKey: e.node.key + })) } } } diff --git a/src/redux/dirMessage_reducer.js b/src/redux/dirMessage_reducer.js index 70bc36c..13f0eff 100644 --- a/src/redux/dirMessage_reducer.js +++ b/src/redux/dirMessage_reducer.js @@ -36,11 +36,6 @@ export const dirMessageSlice = createSlice({ // 便利文件树，找到对应的key并加入其中， // 如果包含下级目录则不更新，在刷新中更新。 state.data.forEach(file => { - console.log("file.filePath===selectDirKey && file.dirFlag && file.childList.length===0", - file.filePath, - file.dirFlag, - file.childList.length, - selectDirKey) if (file.filePath === selectDirKey && file.dirFlag && file.childList.length === 0) { file.childList.push(action.payload.fileStateList[0].childList) } else if (file.childList.length > 0) {