feat: thread pool and i18n optimize

threadpool/console-new/package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@ahooksjs/use-url-state": "^3.5.1",
     "@ant-design/icons": "^5.2.6",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",

threadpool/console-new/src/App.tsx

@@ -6,6 +6,8 @@ import Login from '@/page/login';
 import { MenuProps } from 'antd';
 import { useTran } from './hooks';
 import { STR_MAP } from './config/i18n/locales/constants';
+import IconFont from './components/icon';
+
 type MenuItem = Required<MenuProps>['items'][number];
 
 const App = () => {
@@ -13,14 +15,15 @@ const App = () => {
     {
       label: useTran(STR_MAP.DYNAMIC_THREAD_POOL),
       key: STR_MAP.DYNAMIC_THREAD_POOL,
+      icon: <IconFont type="icon-hot-for-ux"></IconFont>,
       children: [
-        { label: <Link to={'/thread-poll/index'}>{useTran(STR_MAP.THREAD_POOL)}</Link>, key: STR_MAP.THREAD_POOL },
+        { label: <Link to={'/thread-poll/index'}>{useTran(STR_MAP.THREAD_POOL)}</Link>, key: '/thread-poll/index' },
       ],
     },
   ];
 
   return (
-    <LayoutCom sideMenuList={sideMenuList} isSider={true}>
+    <LayoutCom sideMenuList={sideMenuList} isSider={true} isHeader={true}>
       <Routes>
         <Route path="/Login" Component={Login}></Route>
         {routeList.map(item => (

threadpool/console-new/src/components/header/index.tsx

@@ -1,7 +1,7 @@
 import React, { useContext } from 'react';
 import style from './index.module.less';
 import { UserOutlined } from '@ant-design/icons';
-import { Avatar, Button, Col, Dropdown, Row, Switch, Tag } from 'antd';
+import { Avatar, Button, Col, Dropdown, Row, Switch } from 'antd';
 import { useThemeMode } from '@/hooks';
 import { MyContext } from '@/context';
 import IconFont from '@/components/icon';

threadpool/console-new/src/components/icon/index.tsx

@@ -5,7 +5,7 @@ interface Props {
 }
 
 const MyIcon = createFromIconfontCN({
-  scriptUrl: '//at.alicdn.com/t/c/font_4254722_1xl4w1k5c53.js', // 在 iconfont.cn 上生成
+  scriptUrl: '//at.alicdn.com/t/c/font_4254722_3l4m6by7h34.js', // 在 iconfont.cn 上生成
 });
 
 const IconFont = (props: Props) => {

threadpool/console-new/src/components/layout-com/index.module.less

@@ -9,14 +9,13 @@
     align-items: center;
   }
   .sider {
-    height: calc(100vh - 48px);
     padding-top: 24px;
   }
   .content {
     margin: 10px 10px 0px;
     border-radius: 12px 12px 0 0;
-    min-height: 100%;
     flex: 1;
-    padding: 10px 12px;
+    padding: 16px;
+    overflow-y: auto;
   }
 }

threadpool/console-new/src/components/layout-com/index.tsx

@@ -1,9 +1,10 @@
-import { useState, useContext, ReactNode } from 'react';
+import { useState, useContext, ReactNode, useEffect } from 'react';
 import { DefaultTheme, ThemeContext } from 'styled-components';
 import { Layout, Menu, MenuProps } from 'antd';
 import HeaderChild from '../header';
-import { IMenuList } from '@/typings';
 import style from './index.module.less';
+import { useLocation } from 'react-router-dom';
+import { useThemeMode } from '@/hooks';
 type MenuItem = Required<MenuProps>['items'][number];
 
 const { Header, Sider, Content } = Layout;
@@ -12,27 +13,49 @@ interface ILayoutCom {
   children?: ReactNode;
   sideMenuList: MenuItem[];
   isSider?: boolean;
+  isHeader?: boolean;
 }
 const LayoutCom = (props: ILayoutCom) => {
-  const { sideMenuList, children, isSider = true } = props;
+  const { sideMenuList, children, isSider = true, isHeader = true } = props;
   const myThemes: DefaultTheme = useContext<any>(ThemeContext);
-  const [current, setCurrent] = useState('mail');
+  const [currentKey, setCurrentKey] = useState<string>('');
+  const { isDark } = useThemeMode();
+
+  const location = useLocation();
+  useEffect(() => {
+    setCurrentKey(location.pathname);
+  }, [location]);
+
   const onClick = (e: any) => {
-    setCurrent(e.key);
+    setCurrentKey(e.key);
   };
 
+  useEffect(() => {
+    document.body.style.backgroundColor = myThemes.backgroundColor.bg1;
+  }, [isDark, myThemes]);
+
   return (
     <main className={style.container} style={{ backgroundColor: myThemes.backgroundColor.bg1 }}>
-      <Header className={style.header}>
+      {isHeader && (
-        <HeaderChild />
+        <Header className={style.header}>
-      </Header>
+          <HeaderChild />
-      <Layout style={{ backgroundColor: myThemes.backgroundColor.bg1, height: 'calc(100vh - 64px)' }}>
+        </Header>
+      )}
+      <Layout
+        style={{ backgroundColor: myThemes.backgroundColor.bg1, height: `calc(100vh - ${isHeader ? '64px' : 0})` }}
+      >
         {isSider && (
-          <Sider className={style.sider} style={{ backgroundColor: myThemes.backgroundColor.bg1 }}>
+          <Sider className={style.sider} style={{ backgroundColor: myThemes.backgroundColor.bg1 }} collapsible>
-            <Menu onClick={onClick} selectedKeys={[current]} mode="inline" items={sideMenuList} />
+            <Menu onClick={onClick} selectedKeys={[currentKey]} mode="inline" items={sideMenuList} />
           </Sider>
         )}
-        <Content className={style.content} style={{ backgroundColor: myThemes.backgroundColor.bgContent }}>
+        <Content
+          className={style.content}
+          style={{
+            backgroundColor: myThemes.backgroundColor.bgContent,
+            height: `calc(100vh - ${isHeader ? '64px' : 0})`,
+          }}
+        >
           {children}
         </Content>
       </Layout>

threadpool/console-new/src/config/i18n/locales/constants.ts

@@ -1,9 +1,20 @@
 export enum STR_MAP {
   DYNAMIC_THREAD_POOL = 'dynamicThreadPool',
-  THREAD_POOL = 'threadPool',
+  THREAD_POOL_MANAGE = 'threadPoolManage',
   PROJECT = 'project',
   SEARCH = 'search',
   ADD = 'add',
-  SERIAL_NUMBER = 'serial_number',
+  SERIAL_NUMBER = 'serialNumber',
   TENANTRY = 'tenantry',
+  THREAD_POOL = 'threadPool',
+  CORE_THREAD = 'coreThread',
+  MAXIMUM_THREAD = 'maximumThread',
+  QUEUE_TYPE = 'queueType',
+  QUEUE_CAPACITY = 'queueCapacity',
+  REJECTION_STRATEGY = 'rejectionStrategy',
+  EXECUTION_TIMEOUT = 'executionTimeout',
+  ALARM_OR_NOT = 'alarmOrNot',
+  CREATION_TIME = 'creationTime',
+  UPDATE_TIME = 'update time',
+  EDIT = 'edit',
 }

threadpool/console-new/src/config/i18n/locales/en.ts

@@ -2,12 +2,23 @@ import { STR_MAP } from './constants';
 
 const enTranslationMap: { [key: string]: string } = {
   [STR_MAP.DYNAMIC_THREAD_POOL]: 'Dynamic thread pool',
-  [STR_MAP.THREAD_POOL]: 'Thread pool management',
+  [STR_MAP.THREAD_POOL_MANAGE]: 'Thread pool management',
   [STR_MAP.PROJECT]: 'project',
   [STR_MAP.SEARCH]: 'search',
   [STR_MAP.ADD]: 'add',
   [STR_MAP.SERIAL_NUMBER]: 'number',
   [STR_MAP.TENANTRY]: 'tenantry',
+  [STR_MAP.THREAD_POOL]: 'thread pool',
+  [STR_MAP.CORE_THREAD]: 'core thread',
+  [STR_MAP.MAXIMUM_THREAD]: 'maximum thread',
+  [STR_MAP.QUEUE_TYPE]: 'queue type',
+  [STR_MAP.QUEUE_CAPACITY]: 'queue capacity',
+  [STR_MAP.REJECTION_STRATEGY]: 'rejection strategy',
+  [STR_MAP.EXECUTION_TIMEOUT]: 'execution timeout',
+  [STR_MAP.ALARM_OR_NOT]: 'alarm or not',
+  [STR_MAP.CREATION_TIME]: 'creation time',
+  [STR_MAP.UPDATE_TIME]: 'update time',
+  [STR_MAP.EDIT]: 'edit',
 };
 
 export default enTranslationMap;

threadpool/console-new/src/config/i18n/locales/zh.ts

@@ -2,12 +2,23 @@ import { STR_MAP } from './constants';
 
 const zhTranslationMap: { [key: string]: string } = {
   [STR_MAP.DYNAMIC_THREAD_POOL]: '动态线程池',
-  [STR_MAP.THREAD_POOL]: '线程池管理',
+  [STR_MAP.THREAD_POOL_MANAGE]: '线程池管理',
   [STR_MAP.PROJECT]: '项目',
   [STR_MAP.SEARCH]: '搜索',
   [STR_MAP.ADD]: '添加',
   [STR_MAP.SERIAL_NUMBER]: '序号',
   [STR_MAP.TENANTRY]: '租户',
+  [STR_MAP.THREAD_POOL]: '线程池',
+  [STR_MAP.CORE_THREAD]: '核心线程',
+  [STR_MAP.MAXIMUM_THREAD]: '最大线程',
+  [STR_MAP.QUEUE_TYPE]: '队列类型',
+  [STR_MAP.QUEUE_CAPACITY]: '队列容量',
+  [STR_MAP.REJECTION_STRATEGY]: '拒绝策略',
+  [STR_MAP.EXECUTION_TIMEOUT]: '执行超时',
+  [STR_MAP.ALARM_OR_NOT]: '是否报警',
+  [STR_MAP.CREATION_TIME]: '创建时间',
+  [STR_MAP.UPDATE_TIME]: '更新时间',
+  [STR_MAP.EDIT]: '操作',
 };
 
 export default zhTranslationMap;

threadpool/console-new/src/config/theme/dark-algorithm.ts

@@ -2,7 +2,6 @@ import { theme } from 'antd';
 import { darkDefaultTheme } from '.';
 export const darkAlgorithm = {
   token: {
-    borderRadius: 6,
     colorPrimary: darkDefaultTheme.primary,
     fontSize: 14,
     fontSizeHeading1: 18,
@@ -11,6 +10,8 @@ export const darkAlgorithm = {
     Layout: {
       bodyBg: darkDefaultTheme.backgroundColor.bg1,
       headerBg: darkDefaultTheme.backgroundColor.bgHeader,
+      triggerBg: darkDefaultTheme.backgroundColor.bg1,
+      triggerColor: darkDefaultTheme.fontColor.fc1,
     },
     Button: {
       // fontSize: 14,
@@ -35,12 +36,14 @@ export const darkAlgorithm = {
     },
     Menu: {
       itemBg: darkDefaultTheme.backgroundColor.bg1,
+      // itemSelectedBg: darkDefaultTheme.primary,
+      // itemSelectedColor: darkDefaultTheme.fontColor.fc1,
       activeBarWidth: 0,
       activeBarHeight: 0,
       activeBarBorderWidth: 0,
-      subMenuItemBorderRadius: 8,
+      // subMenuItemBorderRadius: 8,
-      horizontalItemBorderRadius: 8,
+      // horizontalItemBorderRadius: 8,
-      itemBorderRadius: 8,
+      // itemBorderRadius: 8,
     },
   },
   algorithm: theme.darkAlgorithm,

threadpool/console-new/src/config/theme/default-algnorithm.ts

@@ -2,7 +2,6 @@ import { theme } from 'antd';
 import { lightDefaultTheme } from '.';
 export const defaultAlgorithm = {
   token: {
-    borderRadius: 6,
     colorPrimary: lightDefaultTheme.primary,
     fontSize: 14,
     fontSizeHeading1: 18,
@@ -11,6 +10,8 @@ export const defaultAlgorithm = {
     Layout: {
       bodyBg: lightDefaultTheme.backgroundColor.bg1,
       headerBg: lightDefaultTheme.backgroundColor.bgHeader,
+      triggerBg: lightDefaultTheme.backgroundColor.bg1,
+      triggerColor: lightDefaultTheme.fontColor.fc1,
     },
     Button: {
       // fontSize: 14,
@@ -33,12 +34,14 @@ export const defaultAlgorithm = {
     },
     Menu: {
       itemBg: lightDefaultTheme.backgroundColor.bg1,
+      // itemSelectedBg: lightDefaultTheme.primary,
+      // itemSelectedColor: lightDefaultTheme.fontColor.fc1,
       activeBarWidth: 0,
       activeBarHeight: 0,
       activeBarBorderWidth: 0,
-      subMenuItemBorderRadius: 8,
+      // subMenuItemBorderRadius: 8,
-      horizontalItemBorderRadius: 8,
+      // horizontalItemBorderRadius: 8,
-      itemBorderRadius: 8,
+      // itemBorderRadius: 8,
     },
   },
   algorithm: theme.defaultAlgorithm,

threadpool/console-new/src/hooks/index.ts

@@ -1,2 +1,3 @@
 export * from './useThemeMode';
 export * from './useTransLate';
+export * from './useFormToUrl';

threadpool/console-new/src/hooks/useFormToUrl.ts

@@ -0,0 +1,52 @@
+import { useEffect, useMemo, useState } from 'react';
+import { parse } from 'qs';
+import useUrlState from '@ahooksjs/use-url-state';
+import { FormInstance } from 'antd';
+
+export function useFormStateToUrl<T extends Record<string, any>>(
+  form: FormInstance,
+  params?: T
+): {
+  urlState: any;
+  isFirstMount: boolean;
+  handleSetUrlState: () => void;
+} {
+  const [state, setState] = useState<any>();
+  const [urlState, setUrlState] = useUrlState<any>();
+  const [count, setCount] = useState<number>(0);
+
+  useEffect(() => {
+    const url = window.location.search.split('?')[1] ?? null;
+    const urlParams = parse(url) as T;
+    const result: Partial<T> = {};
+    setState(urlParams);
+    for (const key in params) {
+      if (Object.prototype.hasOwnProperty.call(params, key)) {
+        const paramValue = urlParams[key];
+        if (paramValue ?? false) {
+          if (typeof params[key] === 'number') {
+            const parsedValue = parseFloat(paramValue);
+            if (!isNaN(parsedValue)) {
+              result[key] = parsedValue as T[keyof T];
+            }
+          } else {
+            result[key] = paramValue as T[keyof T];
+          }
+        }
+      }
+    }
+    form.setFieldsValue(result);
+    setCount(count => count + 1);
+  }, [setState, setCount, form, params]);
+
+  const handleSetUrlState = () => {
+    const values = form.getFieldsValue();
+    setUrlState({ ...state, ...values });
+  };
+
+  const isFirstMount = useMemo(() => {
+    return count === 1;
+  }, [count]);
+
+  return { urlState, isFirstMount, handleSetUrlState };
+}

threadpool/console-new/src/hooks/useThemeMode.tsx

@@ -1,16 +0,0 @@
-import { useContext, useEffect } from 'react';
-import { useLocalStorageState } from 'ahooks';
-import { MyContext, THEME_NAME } from '@/context';
-
-const useThemeMode = (): { isDark: boolean | undefined; setIsDark: (isDark: boolean) => void } => {
-  const [isDark, setIsDark] = useLocalStorageState<boolean>('current-mode', { defaultValue: false });
-  const { setThemeName } = useContext<any>(MyContext);
-
-  useEffect(() => {
-    isDark ? setThemeName(THEME_NAME.DARK) : setThemeName(THEME_NAME.DEFAULT);
-  }, [isDark, setThemeName]);
-
-  return { isDark, setIsDark };
-};
-
-export default useThemeMode;

threadpool/console-new/src/page/tenant/index.tsx

@@ -0,0 +1,88 @@
+import { useAntdTable } from 'ahooks';
+import { Button, Form, Input, Row, Space, Table, Col } from 'antd';
+import React, { useState } from 'react';
+import { fetchTenantList } from './service';
+
+const baseColumns = [
+  {
+    title: '序号',
+    dataIndex: 'num',
+  },
+  {
+    title: '租户',
+    dataIndex: 'tenant',
+  },
+  {
+    title: '租户名称',
+    dataIndex: 'tenantName',
+  },
+  {
+    title: '负责人',
+    dataIndex: 'creator',
+  },
+  {
+    title: '修改时间',
+    dataIndex: 'data',
+  },
+];
+
+const Tenant: React.FC = () => {
+  const [editVisible, setEditVisible] = useState(false);
+  const [form] = Form.useForm();
+  const { tableProps, search } = useAntdTable(fetchTenantList, { form });
+  const actions = (type: string) => {
+    switch (type) {
+      case 'create':
+        setEditVisible(true);
+        break;
+      case 'edit':
+        setEditVisible(true);
+        break;
+      case 'delete':
+        break;
+      default:
+        break;
+    }
+  };
+
+  return (
+    <div>
+      <Form>
+        <Row>
+          <Col span={6}>
+            <Form.Item name="note" rules={[{ required: true }]}>
+              <Input placeholder="租户" />
+            </Form.Item>
+          </Col>
+          <Col span={18}>
+            <Space>
+              <Button onClick={() => search.submit()}>搜索</Button>
+              <Button onClick={() => setEditVisible(true)}>添加</Button>
+            </Space>
+          </Col>
+        </Row>
+      </Form>
+      <Table
+        {...tableProps}
+        rowKey="num"
+        columns={[
+          ...baseColumns,
+          {
+            title: '操作',
+            key: 'action',
+            render: (text: string, record: any) => {
+              return (
+                <Space>
+                  <Button onClick={() => actions('edit')}>编辑</Button>
+                  <Button onClick={() => actions('edit')}>删除</Button>
+                </Space>
+              );
+            },
+          },
+        ]}
+      />
+    </div>
+  );
+};
+
+export default Tenant;

threadpool/console-new/src/page/tenant/router.tsx

@@ -0,0 +1,8 @@
+import { lazy } from 'react';
+import { IRouterList } from '@/typings';
+
+const Tenant = lazy(() => import('./index'));
+
+const routerList: IRouterList[] = [{ path: '/tenant', component: () => <Tenant /> }];
+
+export default routerList;

threadpool/console-new/src/page/tenant/service.ts

@@ -0,0 +1,46 @@
+import request from '@/utils';
+
+const fetchTenantList = async (
+  pageProps: { current: number; pageSize: number },
+  formData: { tencent: string | number }
+) => {
+  // mock request
+  return {
+    total: 3,
+    list: [
+      {
+        num: '1',
+        tenant: 'admin',
+        tenantName: 'admin',
+        creator: 'admin',
+        data: 'admin',
+      },
+    ],
+  };
+  const res = await request('/tenants', {
+    method: 'POST',
+    params: {
+      ...formData,
+      pageNum: pageProps.current,
+      pageSize: pageProps.pageSize,
+    },
+  });
+
+  if (res && res.success) {
+    return {
+      total: 3,
+      list: [
+        {
+          num: '1',
+          tenant: 'admin',
+          tenantName: 'admin',
+          creator: 'admin',
+          data: 'admin',
+        },
+      ],
+    };
+  }
+  throw new Error(res.msg || '接口异常');
+};
+
+export { fetchTenantList };

threadpool/console-new/src/page/thread-pool/index.tsx

@@ -1,26 +1,69 @@
 import { Button, Form, Select, Space, Table, Typography } from 'antd';
-import { useTran } from '@/hooks';
+import { useFormStateToUrl, useTran } from '@/hooks';
 import { STR_MAP } from '@/config/i18n/locales/constants';
 import { ColumnProps } from 'antd/es/table';
 const { Title } = Typography;
 const { Item } = Form;
 
+const params = { project: 0, thpool: 0 };
 const ThreadPoll = () => {
   const [form] = Form.useForm();
+  const { handleSetUrlState } = useFormStateToUrl<{ project: number; thpool: number }>(form, params);
   const columns: ColumnProps<any>[] = [
     {
       title: useTran(STR_MAP.SERIAL_NUMBER),
       dataIndex: 'order',
     },
     {
-      title: useTran(STR_MAP.SERIAL_NUMBER),
+      title: useTran(STR_MAP.PROJECT),
+      dataIndex: 'project',
+    },
+    {
+      title: useTran(STR_MAP.TENANTRY),
       dataIndex: 'tenantry',
     },
     {
-      title: useTran(STR_MAP.SERIAL_NUMBER),
+      title: useTran(STR_MAP.THREAD_POOL),
+      dataIndex: 'thread_pool',
+    },
+    {
+      title: useTran(STR_MAP.MAXIMUM_THREAD),
+      dataIndex: 'maximum_thread',
+    },
+    {
+      title: useTran(STR_MAP.QUEUE_TYPE),
+      dataIndex: 'queue_type',
+    },
+    {
+      title: useTran(STR_MAP.REJECTION_STRATEGY),
+      dataIndex: 'tenantry',
+    },
+    {
+      title: useTran(STR_MAP.EXECUTION_TIMEOUT),
+      dataIndex: 'tenantry',
+    },
+    {
+      title: useTran(STR_MAP.ALARM_OR_NOT),
+      dataIndex: 'tenantry',
+    },
+    {
+      title: useTran(STR_MAP.CREATION_TIME),
+      dataIndex: 'tenantry',
+    },
+    {
+      title: useTran(STR_MAP.UPDATE_TIME),
+      dataIndex: 'tenantry',
+    },
+    {
+      title: useTran(STR_MAP.EDIT),
       dataIndex: 'tenantry',
     },
   ];
+
+  const handleSubmit = () => {
+    handleSetUrlState();
+  };
+
   return (
     <Space direction="vertical" style={{ width: '100%' }} size="large">
       <Title>{useTran(STR_MAP.THREAD_POOL)}</Title>
@@ -33,7 +76,9 @@ const ThreadPoll = () => {
         </Item>
         <Item style={{ flex: 4 }}>
           <Space>
-            <Button type="primary">{useTran(STR_MAP.SEARCH)}</Button>
+            <Button type="primary" htmlType="submit" onClick={handleSubmit}>
+              {useTran(STR_MAP.SEARCH)}
+            </Button>
             <Button type="primary">{useTran(STR_MAP.ADD)}</Button>
           </Space>
         </Item>

threadpool/console-new/src/route/index.tsx

@@ -2,6 +2,7 @@ import { IRouterList } from '@/typings';
 import homeRouter from '@/page/home/router';
 import aboutRouter from '@/page/about/router';
 import ThreadPoolRouter from '@/page/thread-pool/router';
+import tenantRouter from '@/page/tenant/router';
 
-const routerList: IRouterList[] = [...homeRouter, ...aboutRouter, ...ThreadPoolRouter];
+const routerList: IRouterList[] = [...homeRouter, ...aboutRouter, ...tenantRouter, ...ThreadPoolRouter];
 export default routerList;

threadpool/console-new/src/utils/request/index.ts

@@ -12,8 +12,8 @@ interface HeaderConfig extends Record<string, any> {
 interface RequestOptions {
   headers?: HeaderConfig;
   method?: HttpMethods;
-  params?: { [key: string]: string } | null;
+  params?: { [key: string]: any } | null;
-  body?: { [key: string]: string } | null;
+  body?: { [key: string]: any } | null;
   timeout?: number;
   credentials?: boolean;
   moda?: 'cors' | 'same-origin';

threadpool/console-new/yarn.lock

@@ -12,6 +12,15 @@
   resolved "https://registry.npmmirror.com/@adobe/css-tools/-/css-tools-4.3.1.tgz#abfccb8ca78075a2b6187345c26243c1a0842f28"
   integrity sha512-/62yikz7NLScCGAAST5SHdnjaDJQBDq0M2muyRTpf2VQhw6StBg2ALiu73zSJQ4fMVLA+0uBhBHAle7Wg+2kSg==
 
+"@ahooksjs/use-url-state@^3.5.1":
+  version "3.5.1"
+  resolved "https://registry.npmmirror.com/@ahooksjs/use-url-state/-/use-url-state-3.5.1.tgz#c3ad04e98cbcbc8f9eba476bcbd3237e9809aa5b"
+  integrity sha512-XTrOLZKOAXahDD1Evg+aSN6qNzoh/FuvRKbUtB/0RhYvz57tyXRPbED0KXK4h2C3ZyHUKBJcVCSDcd6EsTyMyQ==
+  dependencies:
+    ahooks "^3.4.1"
+    query-string "^6.9.0"
+    tslib "^2.4.1"
+
 "@alloc/quick-lru@^5.2.0":
   version "5.2.0"
   resolved "https://registry.npmmirror.com/@alloc/quick-lru/-/quick-lru-5.2.0.tgz#7bf68b20c0a350f936915fcae06f58e32007ce30"
@@ -2793,7 +2802,7 @@ ahooks-v3-count@^1.0.0:
   resolved "https://registry.npmmirror.com/ahooks-v3-count/-/ahooks-v3-count-1.0.0.tgz#ddeb392e009ad6e748905b3cbf63a9fd8262ca80"
   integrity sha512-V7uUvAwnimu6eh/PED4mCDjE7tokeZQLKlxg9lCTMPhN+NjsSbtdacByVlR1oluXQzD3MOw55wylDmQo4+S9ZQ==
 
-ahooks@^3.7.8:
+ahooks@^3.4.1, ahooks@^3.7.8:
   version "3.7.8"
   resolved "https://registry.npmmirror.com/ahooks/-/ahooks-3.7.8.tgz#3fa3c491cd153e884a32b0c4192fc72cf84c4332"
   integrity sha512-e/NMlQWoCjaUtncNFIZk3FG1ImSkV/JhScQSkTqnftakRwdfZWSw6zzoWSG9OMYqPNs2MguDYBUFFC6THelWXA==
@@ -4178,6 +4187,11 @@ decimal.js@^10.2.1:
   resolved "https://registry.npmmirror.com/decimal.js/-/decimal.js-10.4.3.tgz#1044092884d245d1b7f65725fa4ad4c6f781cc23"
   integrity sha512-VBBaLc1MgL5XpzgIP7ny5Z6Nx3UrRkIViUkPUdtl9aya5amy3De1gsUUSB1g3+3sExYNjCAsAznmukyxCb1GRA==
 
+decode-uri-component@^0.2.0:
+  version "0.2.2"
+  resolved "https://registry.npmmirror.com/decode-uri-component/-/decode-uri-component-0.2.2.tgz#e69dbe25d37941171dd540e024c444cd5188e1e9"
+  integrity sha512-FqUYQ+8o158GyGTrMFJms9qh3CqTKvAqgqsTnkLI8sKu0028orqBhxNMFkFen0zGyg6epACD32pjVk58ngIErQ==
+
 dedent@^0.7.0:
   version "0.7.0"
   resolved "https://registry.npmmirror.com/dedent/-/dedent-0.7.0.tgz#2495ddbaf6eb874abb0e1be9df22d2e5a544326c"
@@ -5188,6 +5202,11 @@ fill-range@^7.0.1:
   dependencies:
     to-regex-range "^5.0.1"
 
+filter-obj@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.npmmirror.com/filter-obj/-/filter-obj-1.1.0.tgz#9b311112bc6c6127a16e016c6c5d7f19e0805c5b"
+  integrity sha512-8rXg1ZnX7xzy2NGDVkBVaAy+lSlPNwad13BtgSlLuxfIslyt5Vg64U7tFcCt4WS1R0hvtnQybT/IyCkGZ3DpXQ==
+
 finalhandler@1.2.0:
   version "1.2.0"
   resolved "https://registry.npmmirror.com/finalhandler/-/finalhandler-1.2.0.tgz#7d23fe5731b207b4640e4fcd00aec1f9207a7b32"
@@ -8505,6 +8524,16 @@ qs@^6.11.2:
   dependencies:
     side-channel "^1.0.4"
 
+query-string@^6.9.0:
+  version "6.14.1"
+  resolved "https://registry.npmmirror.com/query-string/-/query-string-6.14.1.tgz#7ac2dca46da7f309449ba0f86b1fd28255b0c86a"
+  integrity sha512-XDxAeVmpfu1/6IjyT/gXHOl+S0vQ9owggJ30hhWKdHAsNPOcasn5o9BW0eejZqL2e4vMjhAxoW3jVHcD6mbcYw==
+  dependencies:
+    decode-uri-component "^0.2.0"
+    filter-obj "^1.1.0"
+    split-on-first "^1.0.0"
+    strict-uri-encode "^2.0.0"
+
 querystringify@^2.1.1:
   version "2.2.0"
   resolved "https://registry.npmmirror.com/querystringify/-/querystringify-2.2.0.tgz#3345941b4153cb9d082d8eee4cda2016a9aef7f6"
@@ -9702,6 +9731,11 @@ spdy@^4.0.2:
     select-hose "^2.0.0"
     spdy-transport "^3.0.0"
 
+split-on-first@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.npmmirror.com/split-on-first/-/split-on-first-1.1.0.tgz#f610afeee3b12bce1d0c30425e76398b78249a5f"
+  integrity sha512-43ZssAJaMusuKWL8sKUBQXHWOpq8d6CfN/u1p4gUzfJkM05C8rxTmYrkIPTXapZpORA6LkkzcUulJ8FqA7Uudw==
+
 sprintf-js@~1.0.2:
   version "1.0.3"
   resolved "https://registry.npmmirror.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"
@@ -9748,6 +9782,11 @@ stop-iteration-iterator@^1.0.0:
   dependencies:
     internal-slot "^1.0.4"
 
+strict-uri-encode@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmmirror.com/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz#b9c7330c7042862f6b142dc274bbcc5866ce3546"
+  integrity sha512-QwiXZgpRcKkhTj2Scnn++4PKtWsH0kpzZ62L2R6c/LUVYv7hVnZqcg2+sMuT6R7Jusu1vviK/MFsu6kNJfWlEQ==
+
 string-argv@0.3.2:
   version "0.3.2"
   resolved "https://registry.npmmirror.com/string-argv/-/string-argv-0.3.2.tgz#2b6d0ef24b656274d957d54e0a4bbf6153dc02b6"