This commit is contained in:
shixiaohua 2024-02-22 16:11:01 +08:00
parent c7008cb5ca
commit f36bdfc262
13 changed files with 80 additions and 53 deletions

View File

@ -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;

View File

@ -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>

View File

@ -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>

View File

@ -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;

View File

@ -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;

View File

@ -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>

View File

@ -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 = [
!dirFlag &&
<Menu.Item key='1'>
<UpdateFileName fileName={title} filePath={key} closeMenu={() => setState("")}/>
</Menu.Item>,
dirFlag &&
<Menu.Item key='2'>
<RefreshDir filePath={key} refreshDir={refreshDir} closeMenu={() => setState("")}/>
</Menu.Item>,
dirFlag &&
<Menu.Item key='7'>
<DirAddDir fileDir={key} closeMenu={() => setState("")}/>
</Menu.Item>,
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>
]
const menuItem = []
if (dirFlag){
menuItem.push(getMenuItem('1',<DirAddDir fileDir={key} />))
menuItem.push(getMenuItem('2',"添加文件",[
getMenuItem("2-1",<DirAddFile fileDir={key} fileExt=".markdown"/>),
getMenuItem("2-2",<DirAddFile fileDir={key} fileExt=".lexical"/>)]
),null, 'group'
)
menuItem.push(getMenuItem('3',<RefreshDir filePath={key} refreshDir={refreshDir} />))
menuItem.push(getMenuItem('4',<CloseDir filePath={key}/>))
}else {
menuItem.push(getMenuItem('5',<UpdateFileName fileName={title} filePath={key}/>))
menuItem.push(getMenuItem('6',<DirDeleteFile filePath={key} />))
}
return <Fragment>
{createPortal(
<Menu style={tmpStyle} >
{menuItem}
<Menu style={tmpStyle} onClick={e =>
{
console.log('onClick',e)
}
}
// onMouseLeave={e => {setState("");}}
items={menuItem}>
</Menu>,
document.body
)}

View File

@ -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;
}

View File

@ -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) {
overWriteFile(result.filePath, resultSave)
let fileKey = getFileNameByPath(result.filePath)
if (isEmpty(fileKey)){
fileKey = fileKey+".lexical"
}
overWriteFile(fileKey, resultSave)
//
dispatch(updatedSavedFile({filePath: result.filePath}))
//
dispatch()
}
})
return

View File

@ -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;

View File

@ -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}

View File

@ -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,

View File

@ -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
}