From a17813450742ed5984989722344e78bb5445e469 Mon Sep 17 00:00:00 2001 From: shixiaohua Date: Thu, 25 Jan 2024 17:56:53 +0800 Subject: [PATCH] =?UTF-8?q?feat:=E5=8F=AA=E6=9C=89=E7=82=B9=E5=87=BB?= =?UTF-8?q?=E6=96=87=E4=BB=B6=E6=97=B6=E6=89=93=E5=BC=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/ItemTree/index.jsx | 70 ++++++++++++++++--------------- src/pages/Note/index.jsx | 3 +- src/redux/clickFile_reducer.js | 1 + src/store/fileListState.js | 8 ++++ src/utils/ObjectUtils.js | 7 ++++ 5 files changed, 54 insertions(+), 35 deletions(-) create mode 100644 src/store/fileListState.js create mode 100644 src/utils/ObjectUtils.js diff --git a/src/components/ItemTree/index.jsx b/src/components/ItemTree/index.jsx index 30532dd..1e0fbe3 100644 --- a/src/components/ItemTree/index.jsx +++ b/src/components/ItemTree/index.jsx @@ -1,7 +1,8 @@ import React, {useEffect, useMemo, useState} from 'react'; -import { Input, Tree } from 'antd'; -import {FolderOutlined,FileMarkdownOutlined} from '@ant-design/icons'; -const { Search } = Input; +import {Input, Tree} from 'antd'; +import {FolderOutlined, FileMarkdownOutlined} from '@ant-design/icons'; + +const {Search} = Input; import store from "../../redux/store"; import {clickFile} from "../../redux/clickFile_reducer"; @@ -11,7 +12,7 @@ const dataList = []; const generateList = (data) => { for (let i = 0; i < data.length; i++) { const node = data[i]; - const { key,title,icon } = node; + const {key, title, icon} = node; dataList.push({ key, title, @@ -38,61 +39,62 @@ const getParentKey = (key, tree) => { return parentKey; }; -function generateChildList(fileList){ +function generateChildList(fileList) { const result = [] for (let i = 0; i < fileList.length; i++) { - const {fileName,filePath,dirFlag}=fileList[i]; + const {fileName, filePath, dirFlag} = fileList[i]; result.push({ - "key":filePath, - "title":fileName, - "icon":, - "dirFlag":dirFlag, - "children":[] + "key": filePath, + "title": fileName, + "icon": , + "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(() =>{ + useEffect(() => { + store.subscribe(() => { let fileDirDate = store.getState().dirMessage.data; - console.log("打开目录fileDirDate:",fileDirDate) + console.log("打开目录fileDirDate:", fileDirDate) for (let i = 0; i < fileDirDate.length; i++) { const node = fileDirDate[i]; - console.log("node:",node) - const { fileName,filePath,childList,dirFlag } = node; - const childListM=[] - if (childList.length>0) { + console.log("node:", node) + const {fileName, filePath, childList, dirFlag} = node; + const childListM = [] + if (childList.length > 0) { childListM.push(...generateChildList(childList)); } - if (defaultData.filter(fileMessage=> - fileMessage.key===filePath - ).length===0){ + if (defaultData.filter(fileMessage => + fileMessage.key === filePath + ).length === 0) { defaultData.push({ - "key":filePath, - "title":fileName, - "icon":, - "dirFlag":dirFlag, - "children":childListM + "key": filePath, + "title": fileName, + "icon": , + "dirFlag": dirFlag, + "children": childListM }); } } - console.log("Array.from(new Set(defaultData)):",Array.from(new Set(defaultData))) + console.log("Array.from(new Set(defaultData)):", Array.from(new Set(defaultData))) setDefaultValueState(Array.from(new Set(defaultData))) }) - },[]) + }, []) const onExpand = (newExpandedKeys) => { setExpandedKeys(newExpandedKeys); setAutoExpandParent(false); }; const onChange = (e) => { - const { value } = e.target; + const {value} = e.target; const newExpandedKeys = dataList .map((item) => { if (item.title.indexOf(value) > -1) { @@ -105,10 +107,10 @@ 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 onSelect = (selectedKeys, e) => { + if (e.selected && !e.node.dirFlag) { + console.log('onSelect.selectedKeys', selectedKeys, e) + store.dispatch(clickFile({"fileName": e.node.title, "filePath": e.node.key})) } } // const treeData = useMemo(() => { @@ -155,7 +157,7 @@ const ItemTree = () => { expandedKeys={expandedKeys} // 是否自动展开父节点 autoExpandParent={autoExpandParent} - showIcon ={true} + showIcon={true} // treeNodes 数据，如果设置则不需要手动构造 TreeNode 节点（key 在整个树范围内唯一） treeData={defaultValueState} onSelect={onSelect} diff --git a/src/pages/Note/index.jsx b/src/pages/Note/index.jsx index 57b03ab..2cecd39 100644 --- a/src/pages/Note/index.jsx +++ b/src/pages/Note/index.jsx @@ -11,6 +11,7 @@ import Hlexical from './Hlexical'; import ItemTree from "../../components/ItemTree"; import './index.less' import store from "../../redux/store"; +import {isEmpty} from "../../utils/ObjectUtils"; const {Header, Sider, Content} = Layout; const Note = () => { const [collapsed, setCollapsed] = useState(false); @@ -24,7 +25,7 @@ const Note = () => { 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) { + if (items.filter(fileItem => fileItem.key === openFile.filePath).length === 0&& !isEmpty(openFile)) { setItems([...items, { label: openFile.fileName, diff --git a/src/redux/clickFile_reducer.js b/src/redux/clickFile_reducer.js index bad75e3..0373533 100644 --- a/src/redux/clickFile_reducer.js +++ b/src/redux/clickFile_reducer.js @@ -3,6 +3,7 @@ import { createSlice } from '@reduxjs/toolkit' export const clickFileSlice = createSlice({ name: 'clickFile', initialState: { + type:"clickFile", data: {} }, reducers: { diff --git a/src/store/fileListState.js b/src/store/fileListState.js new file mode 100644 index 0000000..5b5e9fd --- /dev/null +++ b/src/store/fileListState.js @@ -0,0 +1,8 @@ +const schema = { + "fileId": { + type: 'number', + maximum: 100, + minimum: 1, + default: 50 + } +} \ No newline at end of file diff --git a/src/utils/ObjectUtils.js b/src/utils/ObjectUtils.js new file mode 100644 index 0000000..0d1abcb --- /dev/null +++ b/src/utils/ObjectUtils.js @@ -0,0 +1,7 @@ +export const isEmpty =(object)=>{ + for(let key in object) { + if(object.hasOwnProperty(key)) + return false; + } + return true; +} \ No newline at end of file