refactor: 重写配置预加载逻辑

packages/app/src/components/loading/index.css

@@ -9,7 +9,7 @@
 
 .ld-loading-tip {
   margin-top: 18px;
-  font-size: var(--font-size);
-  color: var(--subtitle-font-color);
-  letter-spacing: 0.1em;
+  font-size: var(--content-font-size);
+  color: var(--font-color);
+  letter-spacing: 0.05em;
 }

packages/app/src/components/menu-icon/index.tsx

@@ -1,7 +1,7 @@
 import {FC} from 'react';
-import {HomeOutlined} from '@ant-design/icons';
+import {HomeTwo} from '@icon-park/react';
 
-export const menuIconMap = new Map<string, typeof HomeOutlined>();
+export const menuIconMap = new Map<string, typeof HomeTwo>();
 
 type Props = {
   name: string;
@@ -12,7 +12,7 @@ const LDMenuIcon: FC<Props> = function({name}) {
 
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   // @ts-ignore
-  return <Icon />;
+  return <Icon className="anticon" theme="outline" />;
 };
 
 export default LDMenuIcon;

packages/app/src/components/table-basic-provider/index.tsx

@@ -13,6 +13,7 @@ import {
   createTablePageContext,
   createTableSearchContext,
   createTableSettingContext,
+  useQueryPageSetting,
 } from '@hooks';
 
 type Props<T extends Record<string, unknown>> = PropsWithChildren<{
@@ -22,7 +23,8 @@ type Props<T extends Record<string, unknown>> = PropsWithChildren<{
   pageContext: ReturnType<typeof createTablePageContext>,
   searchContext: ReturnType<typeof createTableSearchContext>,
   paramsContext: Context<[T, Dispatch<TableSearchParamsAction<T>>]>,
-  settingContext: ReturnType<typeof createTableSettingContext>
+  settingContext: ReturnType<typeof createTableSettingContext>,
+  settingId?: string;
 }>;
 
 function LDTableBasicProvider<T extends Record<string, unknown>>({
@@ -34,17 +36,30 @@ function LDTableBasicProvider<T extends Record<string, unknown>>({
   searchContext,
   paramsContext,
   settingContext,
+  settingId,
 }: Props<T>): ReactElement {
+  const {
+    conditions = '',
+    pageLimit = '',
+    tableOrder = '',
+    tableWidth = '',
+  } = useQueryPageSetting(settingId) ?? {};
+
   return (
     <LDAuthentication>
-      <LDTableSettingProvider context={settingContext}>
+      <LDTableSettingProvider
+        context={settingContext}
+        tableOrder={tableOrder}
+        tableWidth={tableWidth}
+        conditions={conditions}
+      >
         <LDTableSearchParamsProvider
           state={searchState}
           context={paramsContext}
         >
           <LDTablePageProvider
             initPage={initPage}
-            initPageSize={initPageSize}
+            initPageSize={Number(pageLimit || '0') || initPageSize}
             context={pageContext}
           >
             <LDTableSearchProvider context={searchContext}>

packages/app/src/components/table-page-provider/index.tsx

@@ -1,31 +1,23 @@
-import {
-  createTablePageContext,
-  usePageContextReducer,
-  usePreloadSettingData,
-} from '@hooks';
+import {createTablePageContext, usePageContextReducer} from '@hooks';
 import {PropsWithChildren, FC} from 'react';
 import {PAGE_SIZE_LIST} from '@utils';
 
 type Props = {
   initPageSize?: number,
   initPage?: number,
-  preloadKey?: string,
   context: ReturnType<typeof createTablePageContext>,
 };
 
 const LDTablePageProvider: FC<PropsWithChildren<Props>> = function({
   children,
-  initPageSize = PAGE_SIZE_LIST[0],
+  initPageSize = Number(PAGE_SIZE_LIST[0]),
   initPage,
-  preloadKey,
   context,
 }) {
   const {Provider} = context;
 
-  const preloadSetting = usePreloadSettingData(preloadKey);
-
   const state = usePageContextReducer({
-    pageSize: Number(preloadSetting?.pageLimit ?? initPageSize),
+    pageSize: initPageSize,
     page: initPage ?? 1,
   });
 

packages/app/src/components/table-setting-provider/index.tsx

@@ -1,26 +1,23 @@
-import {
-  createTableSettingContext,
-  usePreloadSettingData,
-  useTableSettingReducer,
-} from '@hooks';
+import {createTableSettingContext, useTableSettingReducer} from '@hooks';
 import {FC, PropsWithChildren} from 'react';
 
 type Props = {
   preloadKey?: string,
-  context: ReturnType<typeof createTableSettingContext>
+  context: ReturnType<typeof createTableSettingContext>,
+  conditions: string,
+  tableOrder: string,
+  tableWidth: string,
 };
 
 const TalbeSettingProvider: FC<PropsWithChildren<Props>> = function({
   preloadKey,
   children,
   context,
+  conditions,
+  tableOrder,
+  tableWidth,
 }) {
   const {Provider} = context;
-  const {
-    conditions = '',
-    tableOrder = '',
-    tableWidth = '',
-  } = usePreloadSettingData(preloadKey) ?? {};
   const state = useTableSettingReducer({
     conditions,
     preloadKey,

packages/app/src/hooks/index.ts

@@ -12,7 +12,8 @@ export * from './use-table-modal-event';
 export * from './use-table-delete-event';
 export * from './use-table-search-params';
 export * from './use-select-options-filter';
-export * from './use-preload-setting-data';
+export * from './use-query-page-setting';
 export * from './use-table-setting-context';
 export * from './create-basic-context';
 export * from './use-table-filter-event';
+export * from './use-upload';

packages/app/src/hooks/use-preload-setting-data/index.ts

@@ -1,18 +0,0 @@
-import {PageSettingsData} from '@models';
-import {useMemo} from 'react';
-import {useLoaderData, useLocation} from 'react-router-dom';
-
-export function usePreloadSettingData(key?: string) {
-  const {pathname} = useLocation();
-  const preloadKey = key ?? pathname;
-  const preloadData = useLoaderData() as Map<
-  string, PageSettingsData | null
-  > | undefined;
-
-  return useMemo(
-    function() {
-      return preloadData?.get(preloadKey) ?? null;
-    },
-    [preloadData, preloadKey],
-  );
-}

packages/app/src/hooks/use-query-page-setting/index.ts

@@ -0,0 +1,28 @@
+import {getSettings} from '@apis';
+import {useQuery} from '@tanstack/react-query';
+import {useStoreSelector} from '@hooks';
+import {useLocation} from 'react-router-dom';
+import {userStore} from '@stores';
+
+export function useQueryPageSetting(settingId?: string) {
+  const {pathname} = useLocation();
+  const key = settingId ?? pathname;
+  const userId = useStoreSelector(
+    userStore,
+    state => String(state.id),
+  );
+
+  const {data} = useQuery({
+    queryKey: [getSettings.name, key],
+    async queryFn() {
+      const data = await getSettings({track: key, userId});
+
+      if (data.msg === '200') return data.data;
+
+      return null;
+    },
+    suspense: true,
+  });
+
+  return data;
+}

packages/app/src/hooks/use-upload/index.ts

@@ -0,0 +1,51 @@
+import {BaseResultContent} from '@models';
+import {userStore} from '@stores';
+import {NETWORK_URL} from '@utils';
+import {useBoolean} from 'ahooks';
+import {App, UploadProps} from 'antd';
+import {useMemo} from 'react';
+import {useStore} from 'zustand';
+
+export function useUpload(url: string, onFetch: () => void) {
+  const {id, token} = useStore(userStore);
+  const [isUploading, {set}] = useBoolean();
+  const {message} = App.useApp();
+
+  const props = useMemo<UploadProps<BaseResultContent<unknown>>>(
+    function() {
+      return {
+        name: 'file',
+        action: `${NETWORK_URL}${url}`,
+        headers: {
+          token,
+          userId: String(id),
+        },
+        showUploadList: false,
+        onChange(info) {
+          set(info.file.status === 'uploading');
+
+          if (info.file.status === 'error')
+            message.error('上传失败，请稍后再试');
+
+          if (info.file.status === 'done') {
+            if (info.file.response) {
+              const {msg} = info.file.response;
+
+              if (msg === '200') {
+                message.success('上传成功');
+                onFetch();
+              } else {
+                message.error(info.file.response.errMsg);
+              }
+            } else {
+              message.error('上传失败');
+            }
+          }
+        },
+      };
+    },
+    [id, message, onFetch, set, token, url],
+  );
+
+  return {uploadProps: props, isUploading};
+}

packages/app/src/index.tsx

@@ -9,9 +9,9 @@ import {QUERY_CLIENT} from '@utils';
 import routes from '@routes';
 import {ConfigProvider, ThemeConfig, App} from 'antd';
 import {LDLoading, menuIconMap} from '@components';
-import {HomeOutlined, SettingOutlined} from '@ant-design/icons';
 import {generateMock} from './mock';
 import antdZh from 'antd/locale/zh_CN';
+import {HomeTwo, SettingTwo} from '@icon-park/react';
 
 generateMock();
 
@@ -27,20 +27,20 @@ const antdTheme: ThemeConfig = {
   },
 };
 
-menuIconMap.set('mainMenuIcon', HomeOutlined);
-menuIconMap.set('settingMenuicon', SettingOutlined);
+menuIconMap.set('mainMenuIcon', HomeTwo);
+menuIconMap.set('settingMenuicon', SettingTwo);
 
 root.render(
   <StrictMode>
-    <ConfigProvider theme={antdTheme} locale={antdZh}>
-      <App>
-        <QueryClientProvider client={QUERY_CLIENT}>
-          <Suspense fallback={<LDLoading tip="正在加载中" />}>
+    <Suspense fallback={<LDLoading tip="正在加载中" width="100vw" height="100vh" />}>
+      <ConfigProvider theme={antdTheme} locale={antdZh}>
+        <App>
+          <QueryClientProvider client={QUERY_CLIENT}>
             <RouterProvider router={routes} />
-          </Suspense>
-        </QueryClientProvider>
-      </App>
-    </ConfigProvider>
+          </QueryClientProvider>
+        </App>
+      </ConfigProvider>
+    </Suspense>
   </StrictMode>,
 );
 

packages/app/src/routes/routes.tsx

@@ -1,56 +1,14 @@
 import {Home} from '@pages';
 import {HOME_PATH, MAIN_PATH, MENU_PATH} from './name';
 import {RouteObject, createBrowserRouter} from 'react-router-dom';
-import {userStore} from '@stores';
-import {getSettings} from '@apis';
 import NotFound from '@pages/not-found';
 import Main from '@pages/main';
 import {Menu} from './lazy';
-import {PageSettingsData} from '@models';
-
-async function preloadSettings(url: string) {
-  try {
-    const {id} = userStore.getState();
-
-    const result = await getSettings({userId: String(id), track: url});
-
-    if (result.msg === '200')
-      return new Map([[url, result.data]]);
-
-    return new Map([[url, null]]);
-  } catch (error) {
-    return new Map([[url, null]]);
-  }
-}
-
-async function preloadSettingsList(keys: string[]) {
-  const data = await Promise.allSettled(keys.map(key => preloadSettings(key)));
-  const map = new Map<string, PageSettingsData | null>();
-
-  data.forEach(function(val, idx) {
-    const key = keys[idx];
-
-    if (val.status === 'fulfilled')
-      map.set(key, val.value.get(key) || null);
-    else
-      map.set(key, null);
-  });
-
-  return map;
-}
 
 const routes: RouteObject[] = [
   {path: HOME_PATH, element: <Home />},
   {path: MAIN_PATH, element: <Main />},
-  {
-    path: MENU_PATH,
-    element: <Menu />,
-    async loader() {
-      const keys = [MENU_PATH, '/menu_second_level'];
-
-      return await preloadSettingsList(keys);
-    },
-  },
+  {path: MENU_PATH, element: <Menu />},
   {path: '*', element: <NotFound />},
 ];