chore: 调整菜单表格

packages/app/src/apis/menu.ts

@@ -23,11 +23,15 @@ export function addMenu(params: AddMenuParams): BaseResult {
 }
 
 /** 获取菜单列表 */
-export function getMenuList(params: GetMenuListParams): BaseListResult<MenuListData> {
+export function getMenuList(
+  params: GetMenuListParams,
+  signal?: AbortSignal,
+): BaseListResult<MenuListData> {
   return request({
     method: 'GET',
     data: {...params, type: 'PC'},
     url: `${BASE_URL}/getPage`,
+    signal,
   });
 }
 

packages/app/src/hooks/use-table-search-event/index.ts

@@ -3,7 +3,7 @@ import {Context} from 'use-context-selector';
 import {useCallback} from 'react';
 import {useBoolean, useLatest} from 'ahooks';
 
-/** @deprecated chagne to useTableToolEvents  */
+/** @deprecated chagne to useTableSearclToolEvents  */
 export function useTableSearchEvent<T>(
   context: Context<TableSearchContext<T>>,
   payload?: T,

packages/app/src/pages/menu-id/filter/index.tsx

@@ -1,26 +1,32 @@
-import {FilterButtonGroup, FilterField} from '@components';
-import {Card, Row} from 'antd';
-import {FC, useState} from 'react';
-import {useContextSection, useTableSearchEvent} from '@hooks';
+import {FilterButtonGroup, FilterField, FilterFieldWrapper} from '@components';
+import {Card} from 'antd';
+import {FC} from 'react';
+import {useContextSection, useFilterField, useTableSearclToolEvents} from '@hooks';
 import {context, searchContext} from '../context';
 
 const Filter: FC = function () {
-  const [value, onChange] = useState('');
-  const onSearch = useTableSearchEvent(context, {name: value});
-  const {isSearching, refetch} = useContextSection(searchContext, state => state[0]);
+  const [field, {onChange, resetState}] = useFilterField({name: ''}, true);
+  const [, {onSearch, onReset}] = useTableSearclToolEvents(context, field, {
+    resetCallback: resetState,
+  });
+  const {isSearching} = useContextSection(searchContext, state => state[0]);
 
   return (
     <Card>
-      <Row>
-        <FilterField name='childMenuName' label='菜单名称' value={value} onChange={onChange} />
+      <FilterFieldWrapper>
+        <FilterField
+          name='childMenuName'
+          label='菜单名称'
+          value={field.name}
+          onChange={onChange('name')}
+        />
         <FilterButtonGroup
           isSearching={isSearching}
-          onRefresh={refetch}
           onSearch={onSearch}
-          offset={12}
+          onReset={onReset}
           searchTestId='child_menu_search_btn'
         />
-      </Row>
+      </FilterFieldWrapper>
     </Card>
   );
 };

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

@@ -23,7 +23,7 @@ const tableColumns: ColumnsType<MenuListData> = [
   {title: '修改时间', dataIndex: 'modifyTime', key: 'modifyTime', width: MIDDLE_TABLE_WIDTH},
 ];
 
-export function useHandle(data: MenuListData[], refetch: () => void) {
+export function useHandle(refetch: () => void) {
   const [{visible, editId}, {onAdd, onEdit, onClose: onModalClose}] = useTableModalEvent();
   const [pendingId, onDelete] = useTableDeleteEvent(deleteMenu, refetch, {label: '菜单'});
 

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

@@ -14,18 +14,18 @@ const TableList: FC = function () {
     return {pId, name};
   });
 
-  const [{data, count}, {refetch}] = useQueryTableList({
+  const [{data, count, isFetching}, {refetch}] = useQueryTableList({
     queryFn: getMenuList,
     params,
     pageContext,
     searchContext,
   });
-  const [{columns, visible, editId}, {onModalClose, onAdd}] = useHandle(data, refetch);
+  const [{columns, visible, editId}, {onModalClose, onAdd}] = useHandle(refetch);
 
   return (
     <>
       <Card className='table-wrapper'>
-        <TableTools onClick={onAdd} />
+        <TableTools onAdd={onAdd} onRefresh={refetch} isRefreshing={isFetching} />
 
         <Table
           data-testid='child_menu_table'

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

@@ -1,24 +1,26 @@
 import {FilterButtonGroup, FilterField, FilterFieldWrapper} from '@components';
 import {Card} from 'antd';
-import {FC, useState} from 'react';
-import {useContextSection, useTableSearchEvent} from '@hooks';
+import {FC} from 'react';
+import {useTableSearclToolEvents, useContextSection, useFilterField} from '@hooks';
 import {context, searchContext} from '../context';
 
 const Filter: FC = function () {
-  const [value, onChange] = useState('');
-  const onSearch = useTableSearchEvent(context, {name: value});
-  const {isSearching, refetch} = useContextSection(searchContext, state => state[0]);
+  const [field, {onChange, resetState}] = useFilterField({name: ''}, true);
+  const [, {onSearch, onReset}] = useTableSearclToolEvents(context, field, {
+    resetCallback: resetState,
+  });
+  const {isSearching} = useContextSection(searchContext, state => state[0]);
 
   return (
     <Card>
       <FilterFieldWrapper>
-        <FilterField name='menuName' label='菜单名称' value={value} onChange={onChange} />
-        <FilterButtonGroup
-          onSearch={onSearch}
-          onRefresh={refetch}
-          offset={12}
-          isSearching={isSearching}
+        <FilterField
+          name='menuName'
+          label='菜单名称'
+          value={field.name}
+          onChange={onChange('name')}
         />
+        <FilterButtonGroup onSearch={onSearch} isSearching={isSearching} onReset={onReset} />
       </FilterFieldWrapper>
     </Card>
   );

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

@@ -13,7 +13,7 @@ const TableList: FC = function () {
     return {pId: '0', name};
   });
 
-  const [{data, count}, {refetch}] = useQueryTableList({
+  const [{data, count, isFetching}, {refetch}] = useQueryTableList({
     queryFn: getMenuList,
     params,
     pageContext,
@@ -26,7 +26,7 @@ const TableList: FC = function () {
   return (
     <>
       <Card className='table-wrapper'>
-        <TableTools onClick={onAdd} />
+        <TableTools onAdd={onAdd} onRefresh={refetch} isRefreshing={isFetching} />
 
         <Table
           data-testid='menu_table'