feat:打开目录显示

src/App.js

@@ -2,6 +2,8 @@ import React from 'react';
 import routes from './routes'
 import {Outlet, useNavigate, useRoutes} from 'react-router-dom'
 import useIpcRenderer from '../src/utils/useIpcRenderer'
+import {dirAdd} from "./redux/dirMessage_reducer";
+import {store} from "./redux/store";
 function App() {
 
   let navigateFunction = useNavigate();
@@ -11,10 +13,14 @@ function App() {
   const redirectUrl =(event,args)=> {
     nativeTo(args)
   }
+  const addNewDir =(event,args)=> {
+    store.dispatch(dirAdd(args))
+  }
 
   console.log("routes",routes)
   const element = useRoutes(routes)
   useIpcRenderer({'redirectUrl':redirectUrl})
+  useIpcRenderer({'openDirectory':addNewDir})
   return (
     <>
       {/* 注册路由 */}

src/comment/TopMenu.js

@@ -33,7 +33,7 @@ exports.menuRebuild=(mainWindow)=> {
                             console.log(result.canceled)
                             // 不取消就发送目录
                             if (!result.canceled) {
-                                console.log(result.filePaths)
+                                console.log('result.filePaths',result.filePaths)
                                 const {readdir,stat} = require('fs/promises')
                                 try {
                                     const files = await readdir(result.filePaths[0]);
@@ -43,7 +43,7 @@ exports.menuRebuild=(mainWindow)=> {
                                         fileStats.push({'fileName': files[i], 'dir':state.isDirectory()})
                                     }
                                     mainWindow.webContents.send('openDirectory',
-                                        {'fileDir':result.filePaths,'fileList':fileStats}
+                                        {'fileDir':result.filePaths[0],'fileList':fileStats}
                                     )
                                 } catch (err) {
                                     console.error(err);

src/components/ItemTree/index.jsx

@@ -1,36 +1,34 @@
-import React, { useMemo, useState } from 'react';
+import React, {useEffect, useMemo, useState} from 'react';
 import { Input, Tree } from 'antd';
 import {FolderOutlined,FileMarkdownOutlined} from '@ant-design/icons';
 const { Search } = Input;
-// const x = 3;
+import store from "../../redux/store";
-// const y = 2;
-// const z = 1;
 const defaultData = [
-    {
+    // {
-        "title": "/media/shixiaohua/homedisk",
+    //     "title": "/media/shixiaohua/homedisk",
-        "key": "0-0",
+    //     "key": "0-0",
-        "icon": <FolderOutlined />,
+    //     "icon": <FolderOutlined />,
-        "children": [
+    //     "children": [
-            {
+    //         {
-                "title": "electron",
+    //             "title": "electron",
-                "key": "0-0-0",
+    //             "key": "0-0-0",
-                "icon": <FolderOutlined />,
+    //             "icon": <FolderOutlined />,
-                "children": [
+    //             "children": [
-                    {
+    //                 {
-                        "title": "leaf",
+    //                     "title": "leaf",
-                        "key": "0-0-0-0",
+    //                     "key": "0-0-0-0",
-                        "icon": <FileMarkdownOutlined />
+    //                     "icon": <FileMarkdownOutlined />
-                    }
+    //                 }
-                ]
+    //             ]
-            }
+    //         }
-        ]
+    //     ]
-    },
+    // },
-    {
+    // {
-        "title": "media",
+    //     "title": "media",
-        "key": "0-1",
+    //     "key": "0-1",
-        "icon": <FolderOutlined />,
+    //     "icon": <FolderOutlined />,
-        "children": []
+    //     "children": []
-    }
+    // }
 ];
 // 将树平铺用于查找
 const dataList = [];
@@ -63,9 +61,48 @@ const getParentKey = (key, tree) => {
     }
     return parentKey;
 };
+
+function generateChildList(fileList){
+    const result = []
+    for (let i = 0; i < fileList.length; i++) {
+        const {fileName,dir}=fileList[i];
+        result.push({
+            "key":fileName,
+            "title":fileName,
+            "icon":<FolderOutlined />,
+            "children":[]
+        });
+    }
+    return result;
+}
 const ItemTree = () => {
+
+    useEffect(()=>{
+        store.subscribe(() =>{
+            console.log("打开目录")
+            let fileDirDate = store.getState().dirMessage.data;
+            for (let i = 0; i < fileDirDate.length; i++) {
+                const node = fileDirDate[i];
+                console.log('dataNode:',node)
+                const { fileDir,fileList } = node;
+                const childList=[]
+                if (fileList) {
+                    childList.push(generateChildList(fileList));
+                }
+                defaultData.push({
+                    "key":fileDir,
+                    "title":fileDir,
+                    "icon":<FolderOutlined />,
+                    "children":childList
+                });
+            }
+            setDefaultValueState(defaultData)
+        })
+    },defaultData)
+
     const [expandedKeys, setExpandedKeys] = useState([]);
     const [searchValue, setSearchValue] = useState('');
+    const [defaultValueState, setDefaultValueState] = useState([]);
     const [autoExpandParent, setAutoExpandParent] = useState(true);
     const onExpand = (newExpandedKeys) => {
         setExpandedKeys(newExpandedKeys);
@@ -85,36 +122,36 @@ const ItemTree = () => {
         setSearchValue(value);
         setAutoExpandParent(true);
     };
-    const treeData = useMemo(() => {
+    // const treeData = useMemo(() => {
-        const loop = (data) =>
+    //     const loop = (data) =>
-            data.map((item) => {
+    //         data.map((item) => {
-                const strTitle = item.title;
+    //             const strTitle = item.title;
-                const index = strTitle.indexOf(searchValue);
+    //             const index = strTitle.indexOf(searchValue);
-                const beforeStr = strTitle.substring(0, index);
+    //             const beforeStr = strTitle.substring(0, index);
-                const afterStr = strTitle.slice(index + searchValue.length);
+    //             const afterStr = strTitle.slice(index + searchValue.length);
-                const title =
+    //             const title =
-                    index > -1 ? (
+    //                 index > -1 ? (
-                        <span>{beforeStr}
+    //                     <span>{beforeStr}
-                            <span className="site-tree-search-value">{searchValue}</span>{afterStr}</span>
+    //                         <span className="site-tree-search-value">{searchValue}</span>{afterStr}</span>
-                    ) : (
+    //                 ) : (
-                        <span>{strTitle}</span>
+    //                     <span>{strTitle}</span>
-                    );
+    //                 );
-                if (item.children) {
+    //             if (item.children) {
-                    return {
+    //                 return {
-                        title,
+    //                     title,
-                        key: item.key,
+    //                     key: item.key,
-                        icon: item.icon,
+    //                     icon: item.icon,
-                        children: loop(item.children),
+    //                     children: loop(item.children),
-                    };
+    //                 };
-                }
+    //             }
-                return {
+    //             return {
-                    title,
+    //                 title,
-                    icon: item.icon,
+    //                 icon: item.icon,
-                    key: item.key,
+    //                 key: item.key,
-                };
+    //             };
-            });
+    //         });
-        return loop(defaultData);
+    //     return loop(defaultData);
-    }, [searchValue]);
+    // }, [searchValue]);
     return (
         <div>
             <Search
@@ -131,7 +168,7 @@ const ItemTree = () => {
                 autoExpandParent={autoExpandParent}
                 showIcon ={true}
                 // treeNodes 数据，如果设置则不需要手动构造 TreeNode 节点（key 在整个树范围内唯一）
-                treeData={treeData}
+                treeData={defaultValueState}
             />
         </div>
     );

src/redux/dirMessage_reducer.js

@@ -0,0 +1,21 @@
+import { createSlice } from '@reduxjs/toolkit'
+
+export const dirMessageSlice = createSlice({
+    name: 'dirMessage',
+    initialState: {
+        data: []
+    },
+    reducers: {
+        dirAdd: (state, action) => {
+            console.log("dirMessage:dirAdd", state, action)
+            if(action.payload){
+                // 路径跳转
+                state.data=[...state.data,action.payload];
+            }
+            
+        }
+    }
+})
+export const { dirAdd } = dirMessageSlice.actions
+
+export default dirMessageSlice.reducer

src/redux/store.js

@@ -1,11 +1,13 @@
 import { configureStore } from '@reduxjs/toolkit'
 import historyReducer from './historyRecord_reducer'
 import redirectReducer from './redirectUrl_reducer'
+import dirMessageReducer from './dirMessage_reducer'
 // 用于支持异步函数
-// import thunk from 'redux-thunk'
+export const store = configureStore({
-export default configureStore({
     reducer: {
         historyRecord:historyReducer,
-        redirectUrl:redirectReducer
+        redirectUrl:redirectReducer,
+        dirMessage:dirMessageReducer
     }
 })
+export default store