feat:打开文件

src/App.js

@@ -3,6 +3,7 @@ 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 {openFile} from "./redux/clickFile_reducer"
 import {store} from "./redux/store";
 function App() {
 

src/comment/TopMenu.js

@@ -47,12 +47,17 @@ exports.menuRebuild = (mainWindow) => {
                                     })
                                     for (let i = 0; i < files.length; i++) {
                                         const state = await stat(result.filePaths[0] + '/' + files[i]);
+                                        if (state.isDirectory()
+                                            ||files[i].endsWith(".md")
+                                            ||files[i].endsWith(".html")
+                                            ||files[i].endsWith(".lexical")){
                                             fileChildList.push({
                                                 'fileName': files[i],
                                                 "filePath": result.filePaths[0]+ '/' +files[i],
                                                 'dirFlag': state.isDirectory()
                                             })
                                         }
+                                    }
                                     mainWindow.webContents.send('openDirectory', fileStateList)
                                 } catch (err) {
                                     console.error(err);

src/components/ItemTree/index.jsx

@@ -3,33 +3,9 @@ import { Input, Tree } from 'antd';
 import {FolderOutlined,FileMarkdownOutlined} from '@ant-design/icons';
 const { Search } = Input;
 import store from "../../redux/store";
-const defaultData = [
+import {clickFile} from "../../redux/clickFile_reducer";
-    // {
+
-    //     "title": "/media/shixiaohua/homedisk",
+const defaultData = [];
-    //     "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 = [];
 const generateList = (data) => {
@@ -65,17 +41,22 @@ const getParentKey = (key, tree) => {
 function generateChildList(fileList){
     const result = []
     for (let i = 0; i < fileList.length; i++) {
-        const {fileName,filePath}=fileList[i];
+        const {fileName,filePath,dirFlag}=fileList[i];
         result.push({
             "key":filePath,
             "title":fileName,
             "icon":<FolderOutlined />,
+            "dirFlag":dirFlag,
             "children":[]
         });
     }
     return result;
 }
 const ItemTree = () => {
+    const [expandedKeys, setExpandedKeys] = useState([]);
+    const [searchValue, setSearchValue] = useState('');
+    const [defaultValueState, setDefaultValueState] = useState([]);
+    const [autoExpandParent, setAutoExpandParent] = useState(true);
 
     useEffect(()=>{
         store.subscribe(() =>{
@@ -84,7 +65,7 @@ const ItemTree = () => {
             for (let i = 0; i < fileDirDate.length; i++) {
                 const node = fileDirDate[i];
                 console.log("node:",node)
-                const { fileName,filePath,childList } = node;
+                const { fileName,filePath,childList,dirFlag } = node;
                 const childListM=[]
                 if (childList.length>0) {
                     childListM.push(...generateChildList(childList));
@@ -96,6 +77,7 @@ const ItemTree = () => {
                         "key":filePath,
                         "title":fileName,
                         "icon":<FolderOutlined />,
+                        "dirFlag":dirFlag,
                         "children":childListM
                     });
                 }
@@ -105,10 +87,6 @@ const ItemTree = () => {
         })
     },[])
 
-    const [expandedKeys, setExpandedKeys] = useState([]);
-    const [searchValue, setSearchValue] = useState('');
-    const [defaultValueState, setDefaultValueState] = useState([]);
-    const [autoExpandParent, setAutoExpandParent] = useState(true);
     const onExpand = (newExpandedKeys) => {
         setExpandedKeys(newExpandedKeys);
         setAutoExpandParent(false);
@@ -127,6 +105,12 @@ const ItemTree = () => {
         setSearchValue(value);
         setAutoExpandParent(true);
     };
+    const onSelect = (selectedKeys,e) =>{
+        if (e.selected){
+            console.log('onSelect.selectedKeys',selectedKeys,e)
+            store.dispatch(clickFile({"fileName":e.node.title,"filePath":e.node.key}))
+        }
+    }
     // const treeData = useMemo(() => {
     //     const loop = (data) =>
     //         data.map((item) => {
@@ -174,6 +158,7 @@ const ItemTree = () => {
                 showIcon ={true}
                 // treeNodes 数据，如果设置则不需要手动构造 TreeNode 节点（key 在整个树范围内唯一）
                 treeData={defaultValueState}
+                onSelect={onSelect}
             />
         </div>
     );

src/pages/Note/index.jsx

@@ -1,4 +1,4 @@
-import React, {useRef, useState } from 'react';
+import React, {useEffect, useRef, useState} from 'react';
 import {
     MenuFoldOutlined,
     MenuUnfoldOutlined,
@@ -10,39 +10,31 @@ import { Layout, Menu, Button, theme, Avatar,Tabs } from 'antd';
 import Hlexical from './Hlexical';
 import ItemTree from "../../components/ItemTree";
 import './index.less'
+import store from "../../redux/store";
 const {Header, Sider, Content} = Layout;
-
-
-const initialItems = [
-    {
-        label: 'Tab 1',
-        children: <div className="HlexicalName"><Hlexical/></div>,
-        key: '1',
-    },
-    {
-        label: 'Tab 2',
-        children: 'Content of Tab 2',
-        key: '2',
-    },
-    {
-        label: 'Tab 3',
-        children: 'Content of Tab 3',
-        key: '3',
-        closable: false,
-    },
-];
-
 const Note = () => {
     const [collapsed, setCollapsed] = useState(false);
     //   const {
     //     token: { colorBgContainer },
     //   } = theme.useToken();
     const colorBgContainer = '#800080'
-
+    const [activeKey, setActiveKey] = useState();
-
+    const [items, setItems] = useState([]);
-    const [activeKey, setActiveKey] = useState(initialItems[0].key);
-    const [items, setItems] = useState(initialItems);
     const newTabIndex = useRef(0);
+    store.subscribe(() => {
+            const openFile = store.getState().clickFileMessage.data;
+            console.log("store.getState().clickFileMessage.data:",openFile,items)
+            if (items.filter(fileItem => fileItem.key === openFile.filePath).length === 0) {
+                setItems([...items,
+                    {
+                        label: openFile.fileName,
+                        children: <div className="HlexicalName"><Hlexical/></div>,
+                        key: openFile.filePath,
+                    }
+                ])
+            }
+        }
+    )
     const onChange = (newActiveKey) => {
         setActiveKey(newActiveKey);
     };

src/redux/clickFile_reducer.js

@@ -0,0 +1,16 @@
+import { createSlice } from '@reduxjs/toolkit'
+
+export const clickFileSlice = createSlice({
+    name: 'clickFile',
+    initialState: {
+        data: {}
+    },
+    reducers: {
+        clickFile: (state, action) => {
+            console.log("clickFileSlice:clickFile", state, action)
+            state.data=action.payload
+        }
+    }
+})
+export const { clickFile } = clickFileSlice.actions
+export default clickFileSlice.reducer

src/redux/dirMessage_reducer.js

@@ -21,9 +21,7 @@ export const dirMessageSlice = createSlice({
                     state.data=[...new Set([...state.data,...action.payload])];
                     console.log('state.data:',state.data)
                 }
-
             }
-            
         }
     }
 })

src/redux/store.js

@@ -2,12 +2,14 @@ import { configureStore } from '@reduxjs/toolkit'
 import historyReducer from './historyRecord_reducer'
 import redirectReducer from './redirectUrl_reducer'
 import dirMessageReducer from './dirMessage_reducer'
+import clickFileReducer from './clickFile_reducer'
 // 用于支持异步函数
 export const store = configureStore({
     reducer: {
         historyRecord:historyReducer,
         redirectUrl:redirectReducer,
-        dirMessage:dirMessageReducer
+        dirMessage:dirMessageReducer,
+        clickFileMessage:clickFileReducer
     }
 })
 export default store