feat: enhance user search functionality with pagination support

- Updated SearchUsers function to include pagination parameters (startIdx and num) for improved user search results.
- Modified API response structure to return paginated data, including total user count and current page information.
- Adjusted UsersTable component to handle pagination and search parameters, ensuring a seamless user experience.
- Added internationalization support for new search functionality in the UI.

web/src/components/UsersTable.js

@@ -327,20 +327,22 @@ const UsersTable = () => {
     }
   };
 
-  const searchUsers = async (searchKeyword, searchGroup) => {
+  const searchUsers = async (startIdx, pageSize, searchKeyword, searchGroup) => {
     if (searchKeyword === '' && searchGroup === '') {
-      // if keyword is blank, load files instead.
-      await loadUsers(activePage, pageSize);
-      return;
+        // if keyword is blank, load files instead.
+        await loadUsers(startIdx, pageSize);
+        return;
     }
     setSearching(true);
-    const res = await API.get(`/api/user/search?keyword=${searchKeyword}&group=${searchGroup}`);
+    const res = await API.get(`/api/user/search?keyword=${searchKeyword}&group=${searchGroup}&p=${startIdx}&page_size=${pageSize}`);
     const { success, message, data } = res.data;
     if (success) {
-      setUsers(data);
-      setActivePage(1);
+        const newPageData = data.items;
+        setActivePage(data.page);
+        setUserCount(data.total);
+        setUserFormat(newPageData);
     } else {
-      showError(message);
+        showError(message);
     }
     setSearching(false);
   };
@@ -349,30 +351,15 @@ const UsersTable = () => {
     setSearchKeyword(value.trim());
   };
 
-  const sortUser = (key) => {
-    if (users.length === 0) return;
-    setLoading(true);
-    let sortedUsers = [...users];
-    sortedUsers.sort((a, b) => {
-      return ('' + a[key]).localeCompare(b[key]);
-    });
-    if (sortedUsers[0].id === users[0].id) {
-      sortedUsers.reverse();
-    }
-    setUsers(sortedUsers);
-    setLoading(false);
-  };
-
   const handlePageChange = (page) => {
     setActivePage(page);
-    loadUsers(page, pageSize).then((r) => {});
+    if (searchKeyword === '' && searchGroup === '') {
+        loadUsers(page, pageSize).then();
+    } else {
+        searchUsers(page, pageSize, searchKeyword, searchGroup).then();
+    }
   };
 
-  const pageData = users.slice(
-    (activePage - 1) * ITEMS_PER_PAGE,
-    activePage * ITEMS_PER_PAGE,
-  );
-
   const closeAddUser = () => {
     setShowAddUser(false);
   };
@@ -438,29 +425,32 @@ const UsersTable = () => {
       ></EditUser>
       <Form
         onSubmit={() => {
-          searchUsers(searchKeyword, searchGroup);
+          searchUsers(activePage, pageSize, searchKeyword, searchGroup);
         }}
         labelPosition='left'
       >
         <div style={{ display: 'flex' }}>
           <Space>
-            <Form.Input
-              label={t('搜索关键字')}
-              icon='search'
-              field='keyword'
-              iconPosition='left'
-              placeholder={t('搜索用户的 ID，用户名，显示名称，以及邮箱地址 ...')}
-              value={searchKeyword}
-              loading={searching}
-              onChange={(value) => handleKeywordChange(value)}
-            />
+            <Tooltip content={t('支持搜索用户的 ID、用户名、显示名称和邮箱地址')}>
+              <Form.Input
+                label={t('搜索关键字')}
+                icon='search'
+                field='keyword'
+                iconPosition='left'
+                placeholder={t('搜索关键字')}
+                value={searchKeyword}
+                loading={searching}
+                onChange={(value) => handleKeywordChange(value)}
+              />
+            </Tooltip>
+            
             <Form.Select
               field='group'
               label={t('分组')}
               optionList={groupOptions}
               onChange={(value) => {
                 setSearchGroup(value);
-                searchUsers(searchKeyword, value);
+                searchUsers(activePage, pageSize, searchKeyword, value);
               }}
             />
             <Button

web/src/i18n/locales/en.json

@@ -1240,5 +1240,7 @@
   "时间范围": "Time range",
   "批量设置标签": "Batch set tag",
   "请输入要设置的标签名称": "Please enter the tag name to be set",
-  "请输入标签名称": "Please enter the tag name"
+  "请输入标签名称": "Please enter the tag name",
+  "支持搜索用户的 ID、用户名、显示名称和邮箱地址": "Support searching for user ID, username, display name, and email address",
+  "已注销": "Logged out"
 }