From fa2222386e35f2b4f20cbd1818ca67b5f1bc1972 Mon Sep 17 00:00:00 2001 From: shixiaohua Date: Wed, 24 Jan 2024 17:59:31 +0800 Subject: [PATCH] =?UTF-8?q?feat:=E6=89=93=E5=BC=80=E7=9B=AE=E5=BD=95?= =?UTF-8?q?=E6=98=BE=E7=A4=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.js | 6 + src/comment/TopMenu.js | 4 +- src/components/ItemTree/index.jsx | 157 +++++++++++++--------- src/components/ItemTree/itemTreeData.json | 0 src/redux/dirMessage_reducer.js | 21 +++ src/redux/store.js | 10 +- 6 files changed, 132 insertions(+), 66 deletions(-) delete mode 100644 src/components/ItemTree/itemTreeData.json create mode 100644 src/redux/dirMessage_reducer.js diff --git a/src/App.js b/src/App.js index 7dca826..1894346 100644 --- a/src/App.js +++ b/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 ( <> {/* 注册路由 */} diff --git a/src/comment/TopMenu.js b/src/comment/TopMenu.js index e7a68a9..a85a8e3 100644 --- a/src/comment/TopMenu.js +++ b/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); diff --git a/src/components/ItemTree/index.jsx b/src/components/ItemTree/index.jsx index f57f49d..a618a0c 100644 --- a/src/components/ItemTree/index.jsx +++ b/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; -// const y = 2; -// const z = 1; +import store from "../../redux/store"; const defaultData = [ - { - "title": "/media/shixiaohua/homedisk", - "key": "0-0", - "icon": , - "children": [ - { - "title": "electron", - "key": "0-0-0", - "icon": , - "children": [ - { - "title": "leaf", - "key": "0-0-0-0", - "icon": - } - ] - } - ] - }, - { - "title": "media", - "key": "0-1", - "icon": , - "children": [] - } + // { + // "title": "/media/shixiaohua/homedisk", + // "key": "0-0", + // "icon": , + // "children": [ + // { + // "title": "electron", + // "key": "0-0-0", + // "icon": , + // "children": [ + // { + // "title": "leaf", + // "key": "0-0-0-0", + // "icon": + // } + // ] + // } + // ] + // }, + // { + // "title": "media", + // "key": "0-1", + // "icon": , + // "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":, + "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":, + "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 loop = (data) => - data.map((item) => { - const strTitle = item.title; - const index = strTitle.indexOf(searchValue); - const beforeStr = strTitle.substring(0, index); - const afterStr = strTitle.slice(index + searchValue.length); - const title = - index > -1 ? ( - {beforeStr} - {searchValue}{afterStr} - ) : ( - {strTitle} - ); - if (item.children) { - return { - title, - key: item.key, - icon: item.icon, - children: loop(item.children), - }; - } - return { - title, - icon: item.icon, - key: item.key, - }; - }); - return loop(defaultData); - }, [searchValue]); + // const treeData = useMemo(() => { + // const loop = (data) => + // data.map((item) => { + // const strTitle = item.title; + // const index = strTitle.indexOf(searchValue); + // const beforeStr = strTitle.substring(0, index); + // const afterStr = strTitle.slice(index + searchValue.length); + // const title = + // index > -1 ? ( + // {beforeStr} + // {searchValue}{afterStr} + // ) : ( + // {strTitle} + // ); + // if (item.children) { + // return { + // title, + // key: item.key, + // icon: item.icon, + // children: loop(item.children), + // }; + // } + // return { + // title, + // icon: item.icon, + // key: item.key, + // }; + // }); + // return loop(defaultData); + // }, [searchValue]); return (
{ autoExpandParent={autoExpandParent} showIcon ={true} // treeNodes 数据，如果设置则不需要手动构造 TreeNode 节点（key 在整个树范围内唯一） - treeData={treeData} + treeData={defaultValueState} />
); diff --git a/src/components/ItemTree/itemTreeData.json b/src/components/ItemTree/itemTreeData.json deleted file mode 100644 index e69de29..0000000 diff --git a/src/redux/dirMessage_reducer.js b/src/redux/dirMessage_reducer.js new file mode 100644 index 0000000..ae765f4 --- /dev/null +++ b/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 diff --git a/src/redux/store.js b/src/redux/store.js index 7cce9c5..86683ce 100644 --- a/src/redux/store.js +++ b/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 default configureStore({ +export const store = configureStore({ reducer: { historyRecord:historyReducer, - redirectUrl:redirectReducer + redirectUrl:redirectReducer, + dirMessage:dirMessageReducer } -}) \ No newline at end of file +}) +export default store \ No newline at end of file