feat:打开目录显示
This commit is contained in:
parent
9fda560ba3
commit
fa2222386e
|
|
@ -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 (
|
||||
<>
|
||||
{/* 注册路由 */}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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": <FolderOutlined />,
|
||||
"children": [
|
||||
{
|
||||
"title": "electron",
|
||||
"key": "0-0-0",
|
||||
"icon": <FolderOutlined />,
|
||||
"children": [
|
||||
{
|
||||
"title": "leaf",
|
||||
"key": "0-0-0-0",
|
||||
"icon": <FileMarkdownOutlined />
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"title": "media",
|
||||
"key": "0-1",
|
||||
"icon": <FolderOutlined />,
|
||||
"children": []
|
||||
}
|
||||
// {
|
||||
// "title": "/media/shixiaohua/homedisk",
|
||||
// "key": "0-0",
|
||||
// "icon": <FolderOutlined />,
|
||||
// "children": [
|
||||
// {
|
||||
// "title": "electron",
|
||||
// "key": "0-0-0",
|
||||
// "icon": <FolderOutlined />,
|
||||
// "children": [
|
||||
// {
|
||||
// "title": "leaf",
|
||||
// "key": "0-0-0-0",
|
||||
// "icon": <FileMarkdownOutlined />
|
||||
// }
|
||||
// ]
|
||||
// }
|
||||
// ]
|
||||
// },
|
||||
// {
|
||||
// "title": "media",
|
||||
// "key": "0-1",
|
||||
// "icon": <FolderOutlined />,
|
||||
// "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 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 ? (
|
||||
<span>{beforeStr}
|
||||
<span className="site-tree-search-value">{searchValue}</span>{afterStr}</span>
|
||||
) : (
|
||||
<span>{strTitle}</span>
|
||||
);
|
||||
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 ? (
|
||||
// <span>{beforeStr}
|
||||
// <span className="site-tree-search-value">{searchValue}</span>{afterStr}</span>
|
||||
// ) : (
|
||||
// <span>{strTitle}</span>
|
||||
// );
|
||||
// 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 (
|
||||
<div>
|
||||
<Search
|
||||
|
|
@ -131,7 +168,7 @@ const ItemTree = () => {
|
|||
autoExpandParent={autoExpandParent}
|
||||
showIcon ={true}
|
||||
// treeNodes 数据，如果设置则不需要手动构造 TreeNode 节点（key 在整个树范围内唯一）
|
||||
treeData={treeData}
|
||||
treeData={defaultValueState}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
@ -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
|
||||
}
|
||||
})
|
||||
})
|
||||
export default store
|
||||
Loading…
Reference in New Issue