调整 usePage

packages/app/src/components/filter-button-group/index.tsx

@@ -15,7 +15,7 @@ const FiterButtonGroup: FC<Props> = function({onSearch, onExport, offset, disabl
     <>
       <Col span={6} style={!disableAlign ? colStyle : void 0} offset={offset}>
         <Space>
-          <Button type='primary' onClick={onSearch}>查询</Button>
+          <Button type='primary' onClick={onSearch} data-testid='search_btn'>查询</Button>
           {onExport && <Button type='default' onClick={onExport}>导出</Button>}
         </Space>
       </Col>

packages/app/src/hooks/usePageContext/index.test.ts

@@ -1,24 +0,0 @@
-import {usePage, createPageContext} from '.';
-import {renderHook} from '@testing-library/react';
-import {PAGE_SIZE_LIST} from '@utils';
-
-describe('usePageContext', function() {
-  it('usePage, createContext 类型正确', function() {
-    expect(usePage).toBeDefined();
-    expect(createPageContext).toBeDefined();
-
-    expect(usePage).toBeInstanceOf(Function);
-    expect(createPageContext).toBeInstanceOf(Function);
-  });
-
-  it('usePage 返回值正确', function() {
-    const {result} = renderHook(function() {
-      const context = createPageContext();
-
-      return usePage(context);
-    });
-
-    expect(result.current[0]).toEqual({page: 1, pageSize: Number(PAGE_SIZE_LIST[0])});
-    expect(result.current[1]).toBeInstanceOf(Function);
-  });
-});

packages/app/src/hooks/usePageContext/index.test.tsx

@@ -0,0 +1,84 @@
+import {PageProvider} from '@components';
+import {usePage, createPageContext} from '.';
+import {fireEvent, render, renderHook} from '@testing-library/react';
+import {PAGE_SIZE_LIST} from '@utils';
+import {FC} from 'react';
+
+describe('usePageContext', function() {
+  it('usePage, createContext 类型正确', function() {
+    expect(usePage).toBeDefined();
+    expect(createPageContext).toBeDefined();
+
+    expect(usePage).toBeInstanceOf(Function);
+    expect(createPageContext).toBeInstanceOf(Function);
+  });
+
+  it('usePage 返回值正确', function() {
+    const {result} = renderHook(function() {
+      const context = createPageContext();
+
+      return usePage(context);
+    });
+
+    expect(result.current[0]).toEqual({page: 1, pageSize: Number(PAGE_SIZE_LIST[0])});
+    expect(result.current[1].onCurrentPageChange).toBeInstanceOf(Function);
+    expect(result.current[1].onPageChange).toBeInstanceOf(Function);
+  });
+
+  it('修改值', function() {
+    const context = createPageContext();
+
+    const Child: FC = function() {
+      const [{page, pageSize}] = usePage(context);
+
+      return (
+        <>
+          <p data-testid='page'>{page}</p>
+          <p data-testid='page_size'>{pageSize}</p>
+        </>
+      );
+    };
+
+    const Button: FC = function() {
+      const [,{onCurrentPageChange, onPageChange}] = usePage(context);
+
+      function onCurrent() {
+        onCurrentPageChange(2);
+      }
+      function onPage() {
+        onPageChange(3, 20);
+      }
+
+      return (
+        <>
+          <button onClick={onCurrent} data-testid='current_btn' />
+          <button onClick={onPage} data-testid='page_btn' />
+        </>
+      );
+    };
+
+    const App: FC = function() {
+      return (
+        <PageProvider context={context}>
+          <Child />
+          <Button />
+        </PageProvider>
+      );
+    };
+
+    const {getByTestId} = render(<App />);
+
+    expect(getByTestId('page').innerHTML).toBe('1');
+    expect(getByTestId('page_size').innerHTML).toBe('10');
+
+    fireEvent.click(getByTestId('current_btn'));
+
+    expect(getByTestId('page').innerHTML).toBe('2');
+    expect(getByTestId('page_size').innerHTML).toBe('10');
+
+    fireEvent.click(getByTestId('page_btn'));
+
+    expect(getByTestId('page').innerHTML).toBe('3');
+    expect(getByTestId('page_size').innerHTML).toBe('20');
+  });
+});

packages/app/src/hooks/usePageContext/index.ts

@@ -2,6 +2,7 @@ import {PAGE_SIZE_LIST} from '@utils';
 import {Dispatch, useCallback, useReducer} from 'react';
 import {createContext} from 'use-context-selector';
 import {useContext} from '..';
+import {produce} from 'immer';
 
 export type PageContextState = {
   page: number,
@@ -10,7 +11,7 @@ export type PageContextState = {
 
 export type PageContextAction = {
   type: 'EDIT_PAGE',
-  payload: PageContextState,
+  payload: Partial<PageContextState>,
 } | {
   type: 'RESET'
 };
@@ -24,8 +25,14 @@ function pageReduce(state: PageContextState, action: PageContextAction): PageCon
   const {type} = action;
 
   switch (type) {
-    case 'EDIT_PAGE':
-      return action.payload;
+    case 'EDIT_PAGE': {
+      const next = produce(state, function(draft) {
+        draft.page = action.payload?.page ?? state.page;
+        draft.pageSize = action.payload?.pageSize ?? state.pageSize;
+      });
+
+      return next;
+    }
     case 'RESET':
       return pageContextInit();
     default:
@@ -50,6 +57,10 @@ export function usePage(context: ReturnType<typeof createPageContext>) {
     dispatch({type: 'EDIT_PAGE', payload: {page, pageSize}});
   }, [dispatch]);
 
-  return [{page, pageSize}, onPageChange] as const;
+  const onCurrentPageChange = useCallback(function(page: number) {
+    dispatch({type: 'EDIT_PAGE', payload: {page}});
+  }, [dispatch]);
+
+  return [{page, pageSize}, {onPageChange, onCurrentPageChange}] as const;
 }
 

packages/app/src/pages/department/filter/hooks.ts

@@ -1,7 +1,7 @@
 import {useState} from 'react';
 import {context, pageContext} from '../context';
 import {exportDepartment} from '@apis';
-import {useContextSection} from '@hooks';
+import {useContextSection, usePage} from '@hooks';
 import {EXPORT_ERROR_TIPS, exportFile} from '@utils';
 import {message} from 'antd';
 
@@ -19,9 +19,10 @@ export function useField() {
 
 export function useHandle(name: string, code: string) {
   const dispatch = useContextSection(context, state => state[1]);
-  const {page, pageSize} = useContextSection(pageContext, state => state[0]);
+  const [{page, pageSize}, {onCurrentPageChange}] = usePage(pageContext);
 
   function onSearch() {
+    onCurrentPageChange(1);
     dispatch({type: 'SEARCH', payload: {name, code}});
   }
 

packages/app/src/pages/department/table/hooks.tsx

@@ -11,7 +11,7 @@ import {deleteConfirm} from '@utils';
 
 export function useList() {
   const [count, setCount] = useState(0);
-  const [{page, pageSize}, onPageChange] = usePage(pageContext);
+  const [{page, pageSize}, {onPageChange}] = usePage(pageContext);
   const {name, code} = useContextSection(context, state => state[0]);
   const {data, isFetching, refetch} = useQuery(
     [name, code, page, pageSize, getDepartmentList.name],

packages/app/src/pages/goods/filter/hooks.ts

@@ -7,8 +7,10 @@ import {exportFile} from '@utils';
 export function useSearch() {
   const [value, setValue] = useState('');
   const dispatch = useContextSection(context, ([, dispatch]) => dispatch);
+  const [, {onCurrentPageChange}] = usePage(pageContext);
 
   function onSearch() {
+    onCurrentPageChange(1);
     dispatch({type: 'SEARCH', payload: {number: value}});
   }
 

packages/app/src/pages/goods/table/index.tsx

@@ -9,7 +9,7 @@ import {pageContext} from '../context';
 const TableList: FC = function() {
   const [{data, isFetching, count}, {refetch}] = useList();
   const [{visible, editId, columns}, {onAdd, onClose}] = useHandle(refetch);
-  const [{page, pageSize}, onPageChange] = usePage(pageContext);
+  const [{page, pageSize}, {onPageChange}] = usePage(pageContext);
 
   return (
     <>

packages/app/src/pages/home/menu/index.tsx

@@ -12,7 +12,7 @@ const Menu: FC<Props> = function({menus}) {
 
   return (
     <AntdMenu
-      data-testid='123'
+      data-testid='menu'
       mode='inline'
       items={menus}
       onOpenChange={onOpenChange}

packages/app/src/pages/home/user/index.tsx

@@ -14,7 +14,7 @@ const User: FC = function() {
     <Dropdown menu={{items, onClick}}>
       <div className={css.user}>
         <Avatar src={face} alt='face' />
-        <span>{name}</span>
+        <span data-testid='user_name'>{name}</span>
       </div>
     </Dropdown>
   );

packages/app/src/pages/login/info/index.tsx

@@ -12,13 +12,14 @@ const LoginInfo: FC = function() {
     <div className={css.loginInfo}>
       <h1>仓储物流管理系统</h1>
 
-      <form className={css.loginForm} onSubmit={onSubmit}>
+      <form className={css.loginForm} onSubmit={onSubmit} data-testid='login_form'>
         <Controller
           control={control}
           name='name'
           render={function({field: {onChange, value}}) {
             return (
               <Input
+                name='accountName'
                 onChange={onChange}
                 value={value}
                 placeholder='请输入账户'
@@ -41,6 +42,7 @@ const LoginInfo: FC = function() {
           render={function({field: {onChange, value}}) {
             return (
               <Input
+                name='accountPassword'
                 onChange={onChange}
                 value={value}
                 placeholder='请输入密码'

packages/app/src/pages/menu-id/filter/hooks.ts

@@ -1,6 +1,6 @@
 import {useEffect, useState} from 'react';
-import {context} from '../context';
-import {useContextSection} from '@hooks';
+import {context, pageContext} from '../context';
+import {useContextSection, usePage} from '@hooks';
 
 export function useField() {
   const name = useContextSection(context, state => state[0].name);
@@ -19,8 +19,10 @@ export function useField() {
 
 export function useHandle(value: string) {
   const dispatch = useContextSection(context, state => state[1]);
+  const [, {onCurrentPageChange}] = usePage(pageContext);
 
   function onSearch() {
+    onCurrentPageChange(1);
     dispatch({type: 'SEARCH', payload: {name: value}});
   }
 

packages/app/src/pages/menu-id/table/hooks.tsx

@@ -10,7 +10,7 @@ import {useContextSection, usePage} from '@hooks';
 import {deleteConfirm} from '@utils';
 
 export function useList() {
-  const [{page, pageSize}, onPageChange] = usePage(pageContext);
+  const [{page, pageSize}, {onPageChange}] = usePage(pageContext);
   const name = useContextSection(context, state => state[0].name);
   const [count, setCount] = useState(0);
   const pid = useContextSection(pIdContext, ([pid]) => pid);

packages/app/src/pages/menu/filter/hooks.ts

@@ -1,6 +1,6 @@
 import {useEffect, useState} from 'react';
-import {context} from '../context';
-import {useContextSection} from '@hooks';
+import {context, pageContext} from '../context';
+import {useContextSection, usePage} from '@hooks';
 
 export function useField() {
   const name = useContextSection(context, state => state[0].name);
@@ -19,8 +19,10 @@ export function useField() {
 
 export function useHandle(value: string) {
   const dispatch = useContextSection(context, state => state[1]);
+  const [, {onCurrentPageChange}] = usePage(pageContext);
 
   function onSearch() {
+    onCurrentPageChange(1);
     dispatch({type: 'SEARCH', payload: {name: value}});
   }
 

packages/app/src/pages/menu/table/hooks.tsx

@@ -10,7 +10,7 @@ import {useContextSection, usePage} from '@hooks';
 import {deleteConfirm} from '@utils';
 
 export function useList() {
-  const [{page, pageSize}, onPageChange] = usePage(pageContext);
+  const [{page, pageSize}, {onPageChange}] = usePage(pageContext);
   const name = useContextSection(context, state => state[0].name);
   const [count, setCount] = useState(0);
 

packages/app/src/pages/role/filter/hooks.ts

@@ -16,12 +16,13 @@ export function useField() {
 
 export function useHandle(value: string) {
   const [{name}, dispatch] = useContext(context);
+  const [{page, pageSize}, {onCurrentPageChange}] = usePage(pageContext);
 
   function onSearch() {
+    onCurrentPageChange(1);
     dispatch({type: 'SEARCH', payload: {name: value}});
   }
 
-  const [{page, pageSize}] = usePage(pageContext);
   function onExport() {
     exportRole({
       page: String(page),

packages/app/src/pages/role/table/index.tsx

@@ -9,7 +9,7 @@ import TreeModal from './tree-modal';
 
 const TableList: FC = function() {
   const [{data, isFetching, count}, refetch] = useList();
-  const [{page, pageSize}, onPageChange] = usePage(pageContext);
+  const [{page, pageSize}, {onPageChange}] = usePage(pageContext);
   const [
     {columns, visible, editId, roleVisible, roleId},
     {onAdd, onClose, onRoleClose},

packages/app/src/pages/storage/filter/hooks.ts

@@ -29,8 +29,10 @@ export function useSearch(state: {
   isNotDisable: string,
 }) {
   const dispatch = useContextSelector(context, ([, dispatch]) => dispatch);
+  const [,{onCurrentPageChange}] = usePage(pageContext);
 
   function onSearch() {
+    onCurrentPageChange(1);
     dispatch({type: 'SEARCH', payload: state});
   }
 

packages/app/src/pages/storage/table/index.tsx

@@ -7,7 +7,7 @@ import {useHandle, useList} from './hooks';
 import {PAGE_SIZE_LIST} from '@utils';
 
 const TableList: FC = function() {
-  const [{page, pageSize}, onPageChange] = usePage(pageContext);
+  const [{page, pageSize}, {onPageChange}] = usePage(pageContext);
   const [{data, isFetching, count}, {refetch}] = useList();
   const [{columns, visible, editId}, {onAdd, onClose}] = useHandle(refetch);
 

packages/app/src/pages/user/filter/hooks.ts

@@ -18,8 +18,10 @@ export function useField() {
 
 export function useSearch(name: string, code: string) {
   const dispatch = useContextSection(context, ([,dispatch]) => dispatch);
+  const [, {onCurrentPageChange}] = usePage(pageContext);
 
   function onSearch() {
+    onCurrentPageChange(1);
     dispatch({type: 'SEARCH', payload: {name, code}});
   }
 

packages/app/src/pages/user/table/index.tsx

@@ -8,7 +8,7 @@ import UserModal from './modal';
 
 const TableList: FC = function() {
   const [{data, isFetching, count}, {refetch}] = useList();
-  const [{page, pageSize}, onPageChange] = usePage(pageContext);
+  const [{page, pageSize}, {onPageChange}] = usePage(pageContext);
   const [{columns, visible, editId}, {onAdd, onClose}] = useHandle(refetch);
 
   return (
@@ -21,6 +21,7 @@ const TableList: FC = function() {
         </section>
 
         <Table
+          data-testid='user_table'
           bordered
           scroll={{x: 2050}}
           columns={columns}

packages/app/src/styles/index.css

@@ -116,3 +116,7 @@ img {
 .display-block {
   display: block;
 }
+
+.ant-layout-content {
+  overflow: auto;
+}

packages/webpack/package.json

@@ -31,7 +31,6 @@
     "fork-ts-checker-webpack-plugin": "7.3.0",
     "html-webpack-plugin": "^5.5.0",
     "identity-obj-proxy": "^3.0.0",
-    "ip": "^1.1.8",
     "jest-environment-jsdom": "^29.3.1",
     "jest-watch-typeahead": "^2.2.0",
     "mini-css-extract-plugin": "^2.6.1",