feat: 添加pageCacheState，处理返回恢复之前的状态

react-ui/config/config.ts

@@ -110,6 +110,7 @@ export default defineConfig({
    */
   antd: {
     configProvider: {},
+    appConfig: {},
   },
   /**
    * @name 网络请求配置

react-ui/src/app.tsx

@@ -1,8 +1,7 @@
 import RightContent from '@/components/RightContent';
 import themes from '@/styles/theme.less';
 import type { Settings as LayoutSettings } from '@ant-design/pro-components';
-import type { RunTimeLayoutConfig } from '@umijs/max';
-import { history } from '@umijs/max';
+import { RuntimeConfig, history } from '@umijs/max';
 import { RuntimeAntdConfig } from 'umi';
 import defaultSettings from '../config/defaultSettings';
 import '../public/fonts/font.css';
@@ -10,6 +9,7 @@ import { getAccessToken } from './access';
 import './dayjsConfig';
 import { PageEnum } from './enums/pagesEnums';
 import './global.less';
+import { removeAllPageCacheState } from './hooks/pageCacheState';
 import {
   getRemoteMenu,
   getRoutersInfo,
@@ -29,8 +29,7 @@ export async function getInitialState(): Promise<{
   loading?: boolean;
   fetchUserInfo?: () => Promise<API.CurrentUser | undefined>;
 }> {
-  console.log('getInitialState');
-
+  // console.log('getInitialState');
   const fetchUserInfo = async () => {
     try {
       const response = await getUserInfo({
@@ -67,7 +66,7 @@ export async function getInitialState(): Promise<{
 }
 
 // ProLayout 支持的api https://procomponents.ant.design/components/layout
-export const layout: RunTimeLayoutConfig = ({ initialState }) => {
+export const layout: RuntimeConfig['layout'] = ({ initialState }) => {
   return {
     rightContentRender: () => <RightContent />,
     waterMarkProps: {
@@ -137,30 +136,36 @@ export const layout: RunTimeLayoutConfig = ({ initialState }) => {
       // if (initialState?.loading) return <PageLoading />;
       return <>{children}</>;
     },
+    menuProps: {
+      onClick: () => {
+        removeAllPageCacheState();
+      },
+    },
     ...initialState?.settings,
   };
 };
 
-export async function onRouteChange({ clientRoutes, location }: any) {
+export const onRouteChange: RuntimeConfig['onRouteChange'] = async (e) => {
+  const { location } = e;
   const menus = getRemoteMenu();
-  // console.log('onRouteChange', clientRoutes, location, menus);
+  console.log('onRouteChange', e);
   if (menus === null && location.pathname !== PageEnum.LOGIN) {
     console.log('refresh');
     history.go(0);
   }
-}
+};
 
-export function patchRoutes({ routes, routeComponents }: any) {
-  //console.log('patchRoutes', routes, routeComponents);
-}
+export const patchRoutes: RuntimeConfig['patchRoutes'] = (e) => {
+  console.log('patchRoutes', e);
+};
 
-export async function patchClientRoutes({ routes }: any) {
-  // console.log('patchClientRoutes', routes);
-  patchRouteWithRemoteMenus(routes);
-}
+export const patchClientRoutes: RuntimeConfig['patchClientRoutes'] = (e) => {
+  console.log('patchClientRoutes', e);
+  patchRouteWithRemoteMenus(e.routes);
+};
 
 export function render(oldRender: () => void) {
-  // console.log('render get routers', oldRender);
+  console.log('render');
   const token = getAccessToken();
   if (!token || token?.length === 0) {
     oldRender();

react-ui/src/hooks/pageCacheState.ts

@@ -0,0 +1,42 @@
+/*
+ * @Author: 赵伟
+ * @Date: 2024-04-28 11:49:48
+ * @Description: 页面状态缓存，pop 回到这个页面的时候，重新构建之前的状态
+ */
+
+const pageKeys: string[] = [];
+
+export const useCacheState = () => {
+  const { pathname } = window.location;
+  const key = 'pagecache:' + pathname;
+
+  const getState = () => {
+    const jsonStr = sessionStorage.getItem(key);
+    if (jsonStr) {
+      removeState();
+      return JSON.parse(jsonStr);
+    }
+    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 [getState(), setState] as const;
+};
+
+export const removeAllPageCacheState = () => {
+  pageKeys.forEach((key) => {
+    sessionStorage.removeItem(key);
+  });
+};

react-ui/src/pages/Mirror/info.tsx

@@ -9,6 +9,7 @@ import KFIcon from '@/components/KFIcon';
 import PageTitle from '@/components/PageTitle';
 import SubAreaTitle from '@/components/SubAreaTitle';
 import { useDomSize } from '@/hooks';
+import { useCacheState } from '@/hooks/pageCacheState';
 import {
   deleteMirrorVersionReq,
   getMirrorInfoReq,
@@ -20,13 +21,13 @@ import { mirrorNameKey } from '@/utils/sessionKeys';
 import { modalConfirm } from '@/utils/ui';
 import { useNavigate, useParams, useSearchParams } from '@umijs/max';
 import {
+  App,
   Button,
   Col,
   ConfigProvider,
   Flex,
   Row,
   Table,
-  message,
   type TablePaginationConfig,
   type TableProps,
 } from 'antd';
@@ -56,17 +57,19 @@ function MirrorInfo() {
   const navigate = useNavigate();
   const urlParams = useParams();
   const [searchParams] = useSearchParams();
+  const [cacheState, setCacheState] = useCacheState();
   const [mirrorInfo, setMirrorInfo] = useState<MirrorInfoData>({});
   const [tableData, setTableData] = useState<MirrorVersionData[]>([]);
   const [topRef, { height: topHeight }] = useDomSize<HTMLDivElement>(0, 0, [mirrorInfo]);
   const [total, setTotal] = useState(0);
-  const [pagination, setPagination] = useState<TablePaginationConfig>({
-    showSizeChanger: true,
-    showQuickJumper: true,
-    current: 1,
-    pageSize: 10,
-  });
+  const [pagination, setPagination] = useState<TablePaginationConfig>(
+    cacheState?.pagination ?? {
+      current: 1,
+      pageSize: 10,
+    },
+  );
   const isPublic = searchParams.get('isPublic') === 'true';
+  const { message } = App.useApp();
   useEffect(() => {
     getMirrorInfo();
   }, []);
@@ -115,7 +118,7 @@ function MirrorInfo() {
       // 如果是一页的唯一数据，删除时，请求第一页的数据
       // 否则直接刷新这一页的数据
       // 避免回到第一页
-      if (tableData.length > 1) {
+      if (tableData.length === 1) {
         setPagination((prev) => ({
           ...prev,
           current: 1,
@@ -147,6 +150,9 @@ function MirrorInfo() {
   const createMirrorVersion = () => {
     navigate(`/dataset/mirror/create`);
     sessionStorage.setItem(mirrorNameKey, mirrorInfo.name || '');
+    setCacheState({
+      pagination,
+    });
   };
 
   const columns: TableProps<MirrorVersionData>['columns'] = [
@@ -256,13 +262,14 @@ function MirrorInfo() {
               </Col>
             </Row>
           </div>
-          <Flex justify="space-between" align="center" style={{ marginTop: '40px' }}>
+          <Flex justify="flex-start" align="center" style={{ marginTop: '40px' }}>
             <SubAreaTitle
               title="镜像版本"
               image={require('@/assets/img/mirror-version.png')}
             ></SubAreaTitle>
             {!isPublic && (
               <Button
+                style={{ marginRight: 0, marginLeft: 'auto' }}
                 type="default"
                 onClick={createMirrorVersion}
                 icon={<KFIcon type="icon-xinjian2" />}
@@ -270,6 +277,14 @@ function MirrorInfo() {
                 新增镜像版本
               </Button>
             )}
+            <Button
+              style={{ marginLeft: '20px' }}
+              type="default"
+              onClick={getMirrorVersionList}
+              icon={<KFIcon type="icon-shuaxin" />}
+            >
+              刷新
+            </Button>
           </Flex>
         </div>
         <div
@@ -280,7 +295,7 @@ function MirrorInfo() {
             dataSource={tableData}
             columns={columns}
             scroll={{ y: 'calc(100% - 55px)' }}
-            pagination={{ ...pagination, total }}
+            pagination={{ ...pagination, total, showSizeChanger: true, showQuickJumper: true }}
             onChange={handleTableChange}
             rowKey="id"
           />

react-ui/src/pages/Mirror/list.tsx

@@ -7,11 +7,12 @@ import CommonTableCell from '@/components/CommonTableCell';
 import DateTableCell from '@/components/DateTableCell';
 import KFIcon from '@/components/KFIcon';
 import { CommonTabKeys } from '@/enums';
+import { useCacheState } from '@/hooks/pageCacheState';
 import { deleteMirrorReq, getMirrorListReq } from '@/services/mirror';
 import themes from '@/styles/theme.less';
 import { to } from '@/utils/promise';
 import { modalConfirm } from '@/utils/ui';
-import { useNavigate, useSearchParams } from '@umijs/max';
+import { useNavigate } from '@umijs/max';
 import {
   Button,
   ConfigProvider,
@@ -50,20 +51,17 @@ export type MirrorData = {
 
 function MirrorList() {
   const navigate = useNavigate();
-  const [searchParams, setSearchParams] = useSearchParams();
-  const isPrivate = searchParams.get('isPublic') === 'false';
-  const [activeTab, setActiveTab] = useState<string>(
-    isPrivate ? CommonTabKeys.Private : CommonTabKeys.Public,
-  );
-  const [searchText, setSearchText] = useState('');
+  const [cacheState, setCacheState] = useCacheState();
+  const [activeTab, setActiveTab] = useState<string>(cacheState?.activeTab ?? CommonTabKeys.Public);
+  const [searchText, setSearchText] = useState(cacheState?.searchText);
   const [tableData, setTableData] = useState<MirrorData[]>([]);
   const [total, setTotal] = useState(0);
-  const [pagination, setPagination] = useState<TablePaginationConfig>({
-    showSizeChanger: true,
-    showQuickJumper: true,
-    current: 1,
-    pageSize: 10,
-  });
+  const [pagination, setPagination] = useState<TablePaginationConfig>(
+    cacheState?.pagination ?? {
+      current: 1,
+      pageSize: 10,
+    },
+  );
 
   useEffect(() => {
     getMirrorList();
@@ -73,17 +71,12 @@ function MirrorList() {
   const hanleTabChange: TabsProps['onChange'] = (value) => {
     setSearchText('');
     setPagination({
-      showSizeChanger: true,
-      showQuickJumper: true,
       current: 1,
       pageSize: 10,
     });
     setTotal(0);
     setTableData([]);
     setActiveTab(value);
-    setSearchParams([['isPublic', value === CommonTabKeys.Public ? 'true' : 'false']], {
-      replace: true,
-    });
   };
   // 获取镜像列表
   const getMirrorList = async (params?: Record<string, any>) => {
@@ -131,11 +124,11 @@ function MirrorList() {
 
   // 查看详情
   const toDetail = (record: MirrorData) => {
-    console.log('record', record);
-    navigate(`/dataset/mirror/${record.id}?isPublic=${activeTab === CommonTabKeys.Public}`, {
-      state: {
-        isPublic: activeTab === CommonTabKeys.Public,
-      },
+    navigate(`/dataset/mirror/${record.id}?isPublic=${activeTab === CommonTabKeys.Public}`);
+    setCacheState({
+      activeTab,
+      pagination,
+      searchText,
     });
   };
 
@@ -153,6 +146,11 @@ function MirrorList() {
   // 创建镜像
   const createMirror = () => {
     navigate(`/dataset/mirror/create`);
+    setCacheState({
+      activeTab,
+      pagination,
+      searchText,
+    });
   };
 
   // 分页切换
@@ -276,7 +274,12 @@ function MirrorList() {
             dataSource={tableData}
             columns={columns}
             scroll={{ y: 'calc(100% - 55px)' }}
-            pagination={{ ...pagination, total: total }}
+            pagination={{
+              ...pagination,
+              total: total,
+              showSizeChanger: true,
+              showQuickJumper: true,
+            }}
             onChange={handleTableChange}
             rowKey="id"
           />