feat:更新和移除目录

src/components/ItemTree/index.jsx

@@ -1,6 +1,7 @@
 import React, {useEffect, useMemo, useState} from 'react';
 import {Input, Tree} from 'antd';
-import {FolderOutlined, FileMarkdownOutlined, FileOutlined} from '@ant-design/icons';
+import {FolderOutlined, FileMarkdownOutlined, FileOutlined, DeleteOutlined, RedoOutlined} from '@ant-design/icons';
+import {message, Popconfirm} from 'antd';
 import "./index.less"
 
 const {Search} = Input;
@@ -51,7 +52,7 @@ function generateChildList(fileList) {
         }
         result.push({
             "key": filePath,
-            "title": fileName,
+            "title": titleExtended(fileName,dirFlag),
             "icon": dirFlag ? <FolderOutlined/> : fileName.endsWith(".md") ? <FileMarkdownOutlined/> : <FileOutlined/>,
             "dirFlag": dirFlag,
             "children": childListM
@@ -60,6 +61,41 @@ function generateChildList(fileList) {
     return result;
 }
 
+const titleExtended = (fileName, dirFlag) => {
+
+    const confirm = (e) => {
+        console.log(e);
+        message.success('Click on Yes');
+    };
+    const cancel = (e) => {
+        console.log(e);
+        message.error('Click on No');
+    };
+    return <span >{fileName}
+        {dirFlag && <span style={{float: "right"}}>
+            <Popconfirm
+                title="更新当前目录"
+                description="更新当前目录内容"
+                onConfirm={confirm}
+                onCancel={cancel}
+                okText="确认"
+                cancelText="取消"
+            >
+                <RedoOutlined/>
+            </Popconfirm>
+            <Popconfirm
+                title="关闭当前目录"
+                description="从列表中移除目录并不会删除本地文件"
+                onConfirm={confirm}
+                onCancel={cancel}
+                okText="确认"
+                cancelText="取消"
+            >
+                <DeleteOutlined/>
+            </Popconfirm>
+        </span>}
+    </span>
+}
 /**
  * 将文件信息改为树信息
  * @param fileDirDate
@@ -78,17 +114,18 @@ const flushTree = (fileDirDate) => {
             }
             defaultValueStateSet.push({
                 "key": filePath,
-                "title": fileName,
+                "title": titleExtended(fileName.substring(fileName.lastIndexOf("/")+1), dirFlag),
                 "icon": <FolderOutlined/>,
                 "dirFlag": dirFlag,
                 "children": childListM
             });
+
         }
     }
     return defaultValueStateSet;
 }
 const ItemTree = (prop) => {
-    console.log("prop.filePath:",prop.filePath)
+    console.log("prop.filePath:", prop.filePath)
     const [expandedKeys, setExpandedKeys] = useState([]);
     const [searchValue, setSearchValue] = useState('');
     const dispatch = useDispatch()
@@ -105,7 +142,7 @@ const ItemTree = (prop) => {
 
     const addChildNode = (valueState, fileStateList) => {
         valueState.forEach(file => {
-            if (fileStateList[0].key.startsWith(file.key)){
+            if (fileStateList[0].key.startsWith(file.key)) {
                 if (file.key === fileStateList[0].key) {
                     file.children = fileStateList[0].children
                 } else if (Array.isArray(file.children) && file.children.length > 0) {
@@ -141,7 +178,7 @@ const ItemTree = (prop) => {
                             // 添加下级节点
                             addChildNode(defaultValueState, flushTree(fileStateList))
                             const result = [...defaultValueState]
-                            console.log("[...defaultValueState]:",result)
+                            console.log("[...defaultValueState]:", result)
                             setDefaultValueState(result)
                         }
                     })
@@ -192,7 +229,7 @@ const ItemTree = (prop) => {
     //     return loop(defaultData);
     // }, [searchValue]);
     return (
-        <div>
+        <div style={{height: "100%"}}>
             <Search
                 style={{marginBottom: 8,}}
                 placeholder="Search"

src/components/ItemTree/index.less

@@ -1,7 +1,28 @@
 @import '~antd/dist/antd.less';
 .ant-tree-node-content-wrapper {
   display: inline-block;
-  width: 176px;
+  width: 200px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.ant-tree-treenode-switcher-close{
+  display: inline-block;
+  width: 200px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.ant-tree-treenode-switcher-close{
+  display: inline-block;
+  width: 200px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.ant-tree-treenode-switcher-open{
+  display: inline-block;
+  width: 200px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;

src/pages/Note/index.less

@@ -1,4 +1,8 @@
 .HlexicalName {
-  height: 100vh;
+  // 顶上有标题设置100h后下面会多处一部分
+  // height: 100vh;
   width: auto;
 }
+.ant-tabs-top .ant-tabs-nav{
+  margin-bottom: 0;
+}

src/redux/dirMessage_reducer.js

@@ -16,13 +16,30 @@ export const dirMessageSlice = createSlice({
         dirAdd: (state, action) => {
             console.log("dirMessage:dirAdd", state, action)
             if (action.payload) {
-                // 新添加进来的目录，要判断是否重复，如果重复则提示
-                let filter = state.data.filter((fileMessage) =>
-                    fileMessage.filePath === action.payload[0].filePath
+                // 新添加进来的目录，要判断是否包含或者被包含，如果包含则统一树结构
+                let fileFilter = state.data.filter((fileMessage) =>
+                    fileMessage.filePath.startsWith(action.payload[0].filePath)
                 );
-                if (filter.length > 0) {
-                    console.log('filter', filter)
-                } else {
+                let actionFilter = state.data.filter((fileMessage) =>
+                    action.payload[0].filePath.startsWith(fileMessage.filePath)
+                );
+                let equalsFilter = state.data.filter((fileMessage) =>
+                    action.payload[0].filePath===fileMessage.filePath
+                );
+                // 打开相同目录不用处理
+                if (equalsFilter.length > 0) {
+                    console.log('equalsFilter', filter)
+                }
+                // 打开上级目录
+                else if (actionFilter.length>0){
+
+                }
+                // 打开下级目录
+                else if (fileFilter.length>0){
+
+                }
+                // 无关目录
+                else {
                     // 添加进当前目录
                     state.data = [...new Set([...state.data, ...action.payload])];
                     console.log('state.data:', state.data)

src/store/fileListState.js

@@ -1,8 +0,0 @@
-const schema = {
-    "fileId": {
-        type: 'number',
-        maximum: 100,
-        minimum: 1,
-        default: 50
-    }
-}