feat: add tree data persist

Author: moonrailgun

src/renderer/store/tree.ts

@@ -3,6 +3,7 @@ import {
   TreeDataType,
 } from '@arco-design/web-react/es/Tree/interface';
 import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
 import { immer } from 'zustand/middleware/immer';
 
 export type WebsiteTreeNode = Pick<TreeDataType, 'title'> & {
@@ -44,97 +45,103 @@ const defaultTreeData = [
 ];
 
 export const useTreeStore = create<TreeStoreState>()(
-  immer((set) => ({
-    treeData: defaultTreeData,
-    selectedNode: null,
-    setSelectedNode: (selectedNode: WebsiteTreeNode) => {
-      set({
-        selectedNode,
-      });
-    },
-
-    setTreeData: (treeData: WebsiteTreeNode[]) => {
-      set({
-        treeData,
-      });
-    },
-    addTreeNode: (treeNode: WebsiteTreeNode) => {
-      set((state) => {
-        state.treeData.push(treeNode);
-      });
-    },
-    addTreeNodeChildren: (parentKey: string, treeNode: WebsiteTreeNode) => {
-      set((state) => {
-        const treeData = state.treeData;
-
-        const targetTreeNode = findTreeNode(treeData, parentKey);
-        if (!targetTreeNode) {
-          return;
-        }
-
-        if (!targetTreeNode.children) {
-          targetTreeNode.children = [];
-        }
-        targetTreeNode.children.push(treeNode);
-      });
-    },
-    moveTreeNode: (
-      dragNode: NodeInstance | null,
-      dropNode: NodeInstance | null,
-      dropPosition: number
-    ) => {
-      set((state) => {
-        if (!dragNode) {
-          return;
-        }
-
-        if (!dropNode) {
-          return;
-        }
-
-        const loop = (
-          data: TreeDataType[],
-          key: string,
-          callback: (
-            item: TreeDataType,
-            index: number,
-            arr: TreeDataType[]
-          ) => void
-        ) => {
-          data.some((item, index, arr) => {
-            if (item.key === key) {
-              callback(item, index, arr);
-              return true;
-            }
-
-            if (item.children) {
-              return loop(item.children, key, callback);
-            }
-          });
-        };
-
-        const data = [...state.treeData];
-        let dragItem: TreeDataType;
-        loop(data, dragNode.props._key ?? '', (item, index, arr) => {
-          arr.splice(index, 1);
-          dragItem = item;
+  persist(
+    immer((set) => ({
+      treeData: defaultTreeData,
+      selectedNode: null,
+      setSelectedNode: (selectedNode: WebsiteTreeNode) => {
+        set({
+          selectedNode,
         });
+      },
 
-        if (dropPosition === 0) {
-          loop(data, dropNode.props._key ?? '', (item, index, arr) => {
-            item.children = item.children || [];
-            item.children.push(dragItem);
-          });
-        } else {
-          loop(data, dropNode.props._key ?? '', (item, index, arr) => {
-            arr.splice(dropPosition < 0 ? index : index + 1, 0, dragItem);
+      setTreeData: (treeData: WebsiteTreeNode[]) => {
+        set({
+          treeData,
+        });
+      },
+      addTreeNode: (treeNode: WebsiteTreeNode) => {
+        set((state) => {
+          state.treeData.push(treeNode);
+        });
+      },
+      addTreeNodeChildren: (parentKey: string, treeNode: WebsiteTreeNode) => {
+        set((state) => {
+          const treeData = state.treeData;
+
+          const targetTreeNode = findTreeNode(treeData, parentKey);
+          if (!targetTreeNode) {
+            return;
+          }
+
+          if (!targetTreeNode.children) {
+            targetTreeNode.children = [];
+          }
+          targetTreeNode.children.push(treeNode);
+        });
+      },
+      moveTreeNode: (
+        dragNode: NodeInstance | null,
+        dropNode: NodeInstance | null,
+        dropPosition: number
+      ) => {
+        set((state) => {
+          if (!dragNode) {
+            return;
+          }
+
+          if (!dropNode) {
+            return;
+          }
+
+          const loop = (
+            data: TreeDataType[],
+            key: string,
+            callback: (
+              item: TreeDataType,
+              index: number,
+              arr: TreeDataType[]
+            ) => void
+          ) => {
+            data.some((item, index, arr) => {
+              if (item.key === key) {
+                callback(item, index, arr);
+                return true;
+              }
+
+              if (item.children) {
+                return loop(item.children, key, callback);
+              }
+            });
+          };
+
+          const data = [...state.treeData];
+          let dragItem: TreeDataType;
+          loop(data, dragNode.props._key ?? '', (item, index, arr) => {
+            arr.splice(index, 1);
+            dragItem = item;
           });
-        }
 
-        state.treeData = [...data];
-      });
-    },
-  }))
+          if (dropPosition === 0) {
+            loop(data, dropNode.props._key ?? '', (item, index, arr) => {
+              item.children = item.children || [];
+              item.children.push(dragItem);
+            });
+          } else {
+            loop(data, dropNode.props._key ?? '', (item, index, arr) => {
+              arr.splice(dropPosition < 0 ? index : index + 1, 0, dragItem);
+            });
+          }
+
+          state.treeData = [...data];
+        });
+      },
+    })),
+    {
+      name: 'webbox-tree',
+      partialize: (state) => ({ treeData: state.treeData }),
+    }
+  )
 );
 
 function findTreeNode(