From c9f454a299cebea2057180c5ee227763ac2cdaa6 Mon Sep 17 00:00:00 2001
From: cp3hnu <cp3hnu@gmail.com>
Date: Mon, 29 Apr 2024 09:00:48 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9ApageCacheState=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../RightContent/AvatarDropdown.tsx           | 12 ++--
 .../src/components/RightContent/index.tsx     |  2 +-
 react-ui/src/hooks/pageCacheState.ts          | 64 ++++++++++++-------
 3 files changed, 47 insertions(+), 31 deletions(-)

diff --git a/react-ui/src/components/RightContent/AvatarDropdown.tsx b/react-ui/src/components/RightContent/AvatarDropdown.tsx
index fca317ef..5f8d639a 100644
--- a/react-ui/src/components/RightContent/AvatarDropdown.tsx
+++ b/react-ui/src/components/RightContent/AvatarDropdown.tsx
@@ -2,7 +2,7 @@ import { clearSessionToken } from '@/access';
 import { setRemoteMenu } from '@/services/session';
 import { logout } from '@/services/system/auth';
 import { gotoLoginPage } from '@/utils/ui';
-import { LogoutOutlined, SettingOutlined, UserOutlined } from '@ant-design/icons';
+import { LogoutOutlined, UserOutlined } from '@ant-design/icons';
 import { setAlpha } from '@ant-design/pro-components';
 import { useEmotionCss } from '@ant-design/use-emotion-css';
 import { history, useModel } from '@umijs/max';
@@ -127,11 +127,11 @@ const AvatarDropdown: React.FC<GlobalHeaderRightProps> = ({ menu }) => {
             icon: <UserOutlined />,
             label: '个人中心',
           },
-          {
-            key: 'settings',
-            icon: <SettingOutlined />,
-            label: '个人设置',
-          },
+          // {
+          //   key: 'settings',
+          //   icon: <SettingOutlined />,
+          //   label: '个人设置',
+          // },
           {
             type: 'divider' as const,
           },
diff --git a/react-ui/src/components/RightContent/index.tsx b/react-ui/src/components/RightContent/index.tsx
index 6fbfa37c..70e57e23 100644
--- a/react-ui/src/components/RightContent/index.tsx
+++ b/react-ui/src/components/RightContent/index.tsx
@@ -48,7 +48,7 @@ const GlobalHeaderRight: React.FC = () => {
       >
         <QuestionCircleOutlined />
       </span> */}
-      <Avatar menu={false} />
+      <Avatar menu={true} />
       {/* <SelectLang className={actionClassName} /> */}
     </div>
   );
diff --git a/react-ui/src/hooks/pageCacheState.ts b/react-ui/src/hooks/pageCacheState.ts
index c2277a84..7f9f20b2 100644
--- a/react-ui/src/hooks/pageCacheState.ts
+++ b/react-ui/src/hooks/pageCacheState.ts
@@ -4,39 +4,55 @@
  * @Description: 页面状态缓存，pop 回到这个页面的时候，重新构建之前的状态
  */
 
-const pageKeys: string[] = [];
+import { useCallback, useState } from 'react';
 
-export const useCacheState = () => {
-  const { pathname } = window.location;
-  const key = 'pagecache:' + pathname;
+const pageKeys: string[] = [];
+// let stateCaches: Record<string, any> = {};
 
-  const getState = () => {
-    const jsonStr = sessionStorage.getItem(key);
-    if (jsonStr) {
-      removeState();
+// 获取页面缓存
+const getCacheState = (key: string) => {
+  const jsonStr = sessionStorage.getItem(key);
+  if (jsonStr) {
+    removeCacheState(key);
+    try {
       return JSON.parse(jsonStr);
+    } catch (error) {
+      return undefined;
     }
-    return undefined;
-  };
-
-  const setState = (state: any) => {
-    pageKeys.push(key);
-    sessionStorage.setItem(key, JSON.stringify(state));
-  };
-
-  const removeState = () => {
-    sessionStorage.removeItem(key);
-    const index = pageKeys.indexOf(key);
-    if (index !== -1) {
-      pageKeys.splice(index, 1);
-    }
-  };
+  }
+  return undefined;
+};
 
-  return [getState(), setState] as const;
+// 移除页面 state 缓存
+const removeCacheState = (key: string) => {
+  sessionStorage.removeItem(key);
+  const index = pageKeys.indexOf(key);
+  if (index !== -1) {
+    pageKeys.splice(index, 1);
+  }
 };
 
+// 移除所有页面 state 缓存
 export const removeAllPageCacheState = () => {
   pageKeys.forEach((key) => {
     sessionStorage.removeItem(key);
   });
 };
+
+export const useCacheState = () => {
+  const { pathname } = window.location;
+  const key = 'pagecache:' + pathname;
+
+  const setCacheState = useCallback(
+    (state: any) => {
+      if (state) {
+        pageKeys.push(key);
+        sessionStorage.setItem(key, JSON.stringify(state));
+      }
+    },
+    [key],
+  );
+
+  const [cacheState] = useState(() => getCacheState(key));
+  return [cacheState, setCacheState] as const;
+};