backup

src/components/ItemTree/CloseDir/index.jsx

@@ -8,8 +8,7 @@ function CloseDir (prop) {
     const dispatch = useDispatch()
     const closeDir = ()=>{
         dispatch(dirRemove({selectDirKey: prop.filePath}))
-        prop.closeMenu()
     }
-    return <span  onClick={closeDir}>关闭目录</span>
+    return <span className="menuItemClick" onClick={closeDir}>关闭目录</span>
 }
 export default CloseDir;

src/components/ItemTree/DirAddDir/index.jsx

@@ -34,15 +34,13 @@ const DirAddDir = (prop) => {
         // 更新树
         dispatch(dirDirAdd({"filePath":filePath,"fileDir":prop.fileDir,fileName}))
         setIsModalOpen(false);
-        prop.closeMenu()
     };
     const handleCancel = () => {
         setIsModalOpen(false);
-        prop.closeMenu()
     };
     return <>
         {contextHolder}
-        <span onClick={showModal}>添加文件夹</span>
+        <span className="menuItemClick" onClick={showModal}>添加文件夹</span>
         <Modal title="新建文件夹" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
             <Input ref={inputValue} placeholder="文件夹名不能为空" />
         </Modal>

src/components/ItemTree/DirAddFile/index.jsx

@@ -28,7 +28,7 @@ const DirAddFile = (prop) => {
             return
         }
         // 新建文件
-        let fileName = inputValue.current.input.value+".lexical";
+        let fileName = inputValue.current.input.value+prop.fileExt;
         let filePath = fullFileNameFormat(prop.fileDir,fileName)
         newFile(filePath)
         // 更新树
@@ -41,15 +41,13 @@ const DirAddFile = (prop) => {
             activeKey: filePath
         }))
         setIsModalOpen(false);
-        prop.closeMenu()
     };
     const handleCancel = () => {
         setIsModalOpen(false);
-        prop.closeMenu()
     };
     return <>
         {contextHolder}
-        <span onClick={showModal}>添加文件</span>
+        <span className="menuItemClick" onClick={showModal}>{prop.fileExt}</span>
         <Modal title="新建文件名" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
             <Input ref={inputValue} placeholder="文件名不能为空" />
         </Modal>

src/components/ItemTree/DirDeleteFile/index.jsx

@@ -34,11 +34,9 @@ const DirDeleteFile = (prop) => {
             }
         }
         dispatch(setActiveKey({"activeKey":newActiveKey}));
-        prop.closeMenu()
     };
     const cancelDeleteFile = () => {
 
-        prop.closeMenu()
     };
     return <Popconfirm
         placement="right"
@@ -49,7 +47,7 @@ const DirDeleteFile = (prop) => {
         okText="确认"
         cancelText="取消"
     >
-        <span>删除文件</span>
+        <span className="menuItemClick">删除文件</span>
     </Popconfirm>;
 };
 export default DirDeleteFile;

src/components/ItemTree/RefreshDir/index.jsx

@@ -2,11 +2,11 @@ import React from 'react';
 const RefreshDir = (prop) => {
     console.log("RefreshDir:prop", prop)
     const refreshDir = () => {
+        console.log("RefreshDir:refreshDir", prop)
         prop.refreshDir(prop.filePath)
-        prop.closeMenu()
     };
     return (
-        <span onClick={refreshDir}>更新目录</span>
+        <span className="menuItemClick" onClick={refreshDir}>更新目录</span>
     );
 };
 export default RefreshDir;

src/components/ItemTree/UpdateFileName/index.jsx

@@ -30,15 +30,13 @@ const UpdateFileName = (prop) => {
             dispatch(updateFileNameBar({"oldFilePath":prop.filePath,"newFilePath":newFilePath}))
 
         }
-        prop.closeMenu()
     };
     const handleCancel = () => {
         setIsModalOpen(false);
-        prop.closeMenu()
     };
     return (
         <>
-            <span onClick={showModal}>修改文件名</span>
+            <span className="menuItemClick" onClick={showModal}>修改文件名</span>
             <Modal title="修改文件名" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
                 <Input ref={inputValue} placeholder={prop.fileName} />
             </Modal>

src/components/ItemTree/index.jsx

@@ -2,7 +2,7 @@ import React, {Fragment, useEffect, useMemo, useState} from 'react';
 import {Input, Menu, Tree} from 'antd';
 import {FolderOutlined, FileMarkdownOutlined, FileOutlined} from '@ant-design/icons';
 import "./index.less"
-import {getFileNameByPath} from "../../utils/PathOperate";
+import {getFileDirByPath, getFileFullNameByPath, getFileNameByPath} from "../../utils/PathOperate";
 const {Search} = Input;
 import {useSelector, useDispatch} from "react-redux";
 import {addExpandedKeys, addTableBarItem, setExpandedKeys} from "../../redux/tableBarItem_reducer";
@@ -49,6 +49,12 @@ const getParentKey = (key, tree) => {
     return parentKey;
 };
 
+const menuItemClickMap = new Map();
+menuItemClickMap.set('1', <DirAddDir/>);
+menuItemClickMap.set('b', 2);
+menuItemClickMap.set('c', 3);
+
+
 function generateChildList(fileList) {
     const result = []
     for (let i = 0; i < fileList.length; i++) {
@@ -100,6 +106,17 @@ const flushTree = (fileDirDate) => {
     }
     return defaultValueStateSet;
 }
+
+function getMenuItem(key, label, children, icon,  type) {
+    return {
+        key,
+        icon,
+        children,
+        label,
+        type,
+    };
+}
+
 const ItemTree = (prop) => {
     console.log("prop.filePath:", prop.filePath)
     const dispatch = useDispatch()
@@ -280,37 +297,29 @@ const ItemTree = (prop) => {
             popupBg: "#ec0f0f",
             zIndex: "9999"
         };
-        const menuItem = [
+        const menuItem = []
-            !dirFlag &&
+        if (dirFlag){
-            <Menu.Item key='1'>
+            menuItem.push(getMenuItem('1',<DirAddDir fileDir={key} />))
-                <UpdateFileName fileName={title} filePath={key} closeMenu={() => setState("")}/>
+            menuItem.push(getMenuItem('2',"添加文件",[
-            </Menu.Item>,
+                getMenuItem("2-1",<DirAddFile fileDir={key} fileExt=".markdown"/>),
-            dirFlag &&
+                getMenuItem("2-2",<DirAddFile fileDir={key} fileExt=".lexical"/>)]
-            <Menu.Item key='2'>
+                ),null, 'group'
-                <RefreshDir filePath={key} refreshDir={refreshDir} closeMenu={() => setState("")}/>
+            )
-            </Menu.Item>,
+            menuItem.push(getMenuItem('3',<RefreshDir filePath={key} refreshDir={refreshDir} />))
-            dirFlag &&
+            menuItem.push(getMenuItem('4',<CloseDir filePath={key}/>))
-            <Menu.Item key='7'>
+        }else {
-                <DirAddDir fileDir={key} closeMenu={() => setState("")}/>
+            menuItem.push(getMenuItem('5',<UpdateFileName fileName={title} filePath={key}/>))
-            </Menu.Item>,
+            menuItem.push(getMenuItem('6',<DirDeleteFile filePath={key} />))
-            dirFlag &&
+        }
-            <Menu.Item key='3'>
-                <DirAddFile fileDir={key} itemTreeAddFile = {(dirMessage)=>itemTreeAddFile(dirMessage)} closeMenu={() => setState("")}/>
-            </Menu.Item>,
-            !dirFlag &&
-            <Menu.Item key='4'>
-                <DirDeleteFile filePath={key} closeMenu={() => setState("")}></DirDeleteFile>
-            </Menu.Item>,
-            dirFlag &&
-            <Menu.Item key='5'>
-                <CloseDir filePath={key} closeMenu={() => setState("")}/>
-            </Menu.Item>,
-            <Menu.Item key='6' onClick={() => {setState("")}}>关闭菜单</Menu.Item>
-        ]
         return <Fragment>
             {createPortal(
-                <Menu style={tmpStyle} >
+                <Menu style={tmpStyle}  onClick={e =>
-                    {menuItem}
+                            {
+                                console.log('onClick',e)
+                            }
+                        }
+                      // onMouseLeave={e => {setState("");}}
+                      items={menuItem}>
                 </Menu>,
                 document.body
             )}

src/components/ItemTree/index.less

@@ -34,3 +34,16 @@
 .HlexicalName {
   height: 94.5%;
 }
+.ant-menu-item {
+  margin: 0px  !important;
+}
+.ant-menu-submenu{
+  margin: 0px  !important;
+}
+.ant-menu-submenu-title{
+  margin: 0px  !important;
+}
+.menuItemClick{
+  height: 100%;
+  display:inline-block;
+}

src/pages/Note/Hlexical/index.jsx

@@ -31,6 +31,7 @@ import {LinkPlugin} from "@lexical/react/LexicalLinkPlugin";
 import AutoLinkPlugin from "./plugins/AutoLinkPlugin";
 import ListMaxIndentLevelPlugin from "./plugins/ListMaxIndentLevelPlugin";
 import CodeHighlightPlugin from "./plugins/CodeHighlightPlugin";
+import {getFileNameByPath} from "../../../utils/PathOperate";
 
 const {ipcRenderer} = window.require('electron')
 
@@ -154,10 +155,15 @@ export default function Hlexical(props) {
             console.log("saveDialogReturnValuePromise", saveDialogReturnValuePromise)
             saveDialogReturnValuePromise.then(result => {
                 if (!result.canceled) {
-
+                    let fileKey = getFileNameByPath(result.filePath)
-                    overWriteFile(result.filePath, resultSave)
+                    if (isEmpty(fileKey)){
+                        fileKey = fileKey+".lexical"
+                    }
+                    overWriteFile(fileKey, resultSave)
                     // 修改当前文件名
                     dispatch(updatedSavedFile({filePath: result.filePath}))
+                    // 文件目录更新
+                    dispatch()
                 }
             })
             return

src/pages/Note/Hlexical/index.less

@@ -59,7 +59,8 @@ body {
   .editor-inner {
     background: #fff;
     position: relative;
-    height:95%
+    height:95%;
+    overflow: hidden auto;
   }
   
   .editor-input {
@@ -427,7 +428,6 @@ body {
   .toolbar .toolbar-item .text {
     display: flex;
     line-height: 20px;
-    width: 200px;
     vertical-align: middle;
     font-size: 14px;
     color: #777;

src/pages/Note/index.jsx

@@ -87,7 +87,7 @@ const Note = () => {
                     <p style={{color: colorBgContainer, 'fontSize': 60}}>上善若水</p>
                 </div>
             </Sider>
-            <Sider trigger={null} collapsedWidth={0} collapsible collapsed={collapsed}
+            <Sider trigger={null} collapsedWidth={0} width="300px" collapsible collapsed={collapsed}
             //       style={{overflow:"auto"}}
             >
                 <Tabs id="itemTreeTabs" defaultActiveKey="1" items={itemTreeTab}

src/redux/dirMessage_reducer.js

@@ -51,6 +51,9 @@ export const dirMessageSlice = createSlice({
                     console.log('state.data:', state.data)
                 }
             }
+        },
+        newFileAdd :(state,action)=>{
+
         },
         dirRemove:(state,action)=>{
             console.log("dirMessage:dirRemove", state, action)
@@ -139,7 +142,7 @@ export const dirMessageSlice = createSlice({
             let fileName = action.payload.fileName
             let fileMessage = {
                 "fileName": fileName,
-                "filePath": fileName,
+                "filePath": filePath,
                 "dirFlag": true,
                 "children": []
             }
@@ -251,6 +254,7 @@ function updateFileNameChild(fileList, oldFilePath, newFilePath) {
 
 export const {
     dirAdd,
+    newFileAdd,
     nextDirAdd,
     dirRemove,
     updateFileName,

src/utils/PathOperate/index.jsx

@@ -3,6 +3,10 @@ const pathOperate = window.require("path")
 export function getFileNameByPath(fileName){
     return pathOperate.parse(fileName).name
 }
+
+export function getFileExtByPath(fileName){
+    return pathOperate.parse(fileName).ext
+}
 export function getFileFullNameByPath(fileName){
     return pathOperate.parse(fileName).base
 }