Browse Source

♻️ refactor(contacts): 优化联系人列表数据处理逻辑

- 移除冗余的dataSource状态管理,直接使用useQuery返回的data
- 优化分页逻辑,将total计算移至渲染阶段
- 修复代码格式问题,调整变量声明位置
- 增加状态注释,提高代码可读性
yourname 9 months ago
parent
commit
19b84fc795
1 changed files with 15 additions and 17 deletions
  1. 15 17
      src/client/admin/pages/Contacts.tsx

+ 15 - 17
src/client/admin/pages/Contacts.tsx

@@ -13,7 +13,7 @@ type LinkmanListResponse = InferResponseType<typeof linkmanClient.$get, 200>;
 type ClientItem = InferResponseType<typeof clientClient.$get, 200>['data'][0];
 type ClientItem = InferResponseType<typeof clientClient.$get, 200>['data'][0];
 
 
 const Contacts: React.FC = () => {
 const Contacts: React.FC = () => {
-  const {message} = App.useApp();
+  const { message } = App.useApp();
   const [form] = Form.useForm();
   const [form] = Form.useForm();
   const [modalVisible, setModalVisible] = useState(false);
   const [modalVisible, setModalVisible] = useState(false);
   const [editingKey, setEditingKey] = useState<string | null>(null);
   const [editingKey, setEditingKey] = useState<string | null>(null);
@@ -43,27 +43,22 @@ const Contacts: React.FC = () => {
     return response.json() as Promise<LinkmanListResponse>;
     return response.json() as Promise<LinkmanListResponse>;
   };
   };
   
   
-  const { data, isLoading: loading, refetch } = useQuery(
-    ['contacts', pagination.current, pagination.pageSize, searchText],
-    () => fetchContacts({ page: pagination.current, pageSize: pagination.pageSize }),
-    {
-      onSuccess: (result) => {
-        setDataSource(result.data);
-        setPagination({
-          ...pagination,
-          total: result.pagination.total,
-        });
-      },
-    }
-  );
-  
-  const [dataSource, setDataSource] = useState<LinkmanItem[]>([]);
+  // 分页状态
   const [pagination, setPagination] = useState({
   const [pagination, setPagination] = useState({
     current: 1,
     current: 1,
     pageSize: 10,
     pageSize: 10,
     total: 0,
     total: 0,
   });
   });
   
   
+  const { data, isLoading: loading, refetch } = useQuery(
+    ['contacts', pagination.current, pagination.pageSize, searchText],
+    () => fetchContacts({ page: pagination.current, pageSize: pagination.pageSize })
+  );
+
+  // 直接使用data处理数据
+  const dataSource = data?.data || [];
+  const total = data?.pagination.total || 0;
+  
   // 搜索
   // 搜索
   const handleSearch = () => {
   const handleSearch = () => {
     setPagination({ ...pagination, current: 1 });
     setPagination({ ...pagination, current: 1 });
@@ -278,7 +273,10 @@ const Contacts: React.FC = () => {
         dataSource={dataSource}
         dataSource={dataSource}
         rowKey="id"
         rowKey="id"
         loading={loading}
         loading={loading}
-        pagination={pagination}
+        pagination={{
+          ...pagination,
+          total
+        }}
         onChange={handleTableChange}
         onChange={handleTableChange}
         bordered
         bordered
       />
       />