Skip to content

feat: add user-center username fuzzy search #883

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Seechi-Yolo merged 1 commit into from
Aug 19, 2026
Merged

feat: add user-center username fuzzy search #883

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
180 changes: 180 additions & 0 deletions packages/base/src/page/UserCenter/__tests__/__snapshots__/index.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -166,6 +166,66 @@ exports[`base/UserCenter should render user list when it first entered the user
<div
class="lazy-load-wrapper segmented-item-content lazy-load-wrapper-show css-952l0m"
>
<div
class="ant-spin-nested-loading css-dev-only-do-not-override-1kh50jg"
>
<div
class="ant-spin-container"
>
<div
class="ant-space css-dev-only-do-not-override-1kh50jg ant-space-horizontal ant-space-align-center full-width-element flex-space-between actiontech-table-toolbar-namespace css-c38ntt"
style="flex-wrap: wrap; margin-bottom: -8px;"
>
<div
class="ant-space-item"
style="margin-right: 8px; padding-bottom: 8px;"
>
<div
class="ant-space css-dev-only-do-not-override-1kh50jg ant-space-horizontal ant-space-align-center"
>
<div
class="ant-space-item"
>
<span
class="ant-input-affix-wrapper basic-input-wrapper actiontech-table-search-input-namespace css-1f6svkh ant-input-affix-wrapper-sm css-dev-only-do-not-override-mlhibv"
>
<input
class="ant-input ant-input-sm css-dev-only-do-not-override-mlhibv"
id="actiontech-table-search-input"
placeholder="请输入要搜索的 用户名"
type="text"
value=""
/>
<span
class="ant-input-suffix"
>
<svg
class="custom-icon custom-icon-search"
height="14"
viewBox="0 0 14 14"
width="14"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="m10.518 9.693 2.499 2.498-.826.825-2.498-2.498a5.252 5.252 0 0 1-8.527-4.101 5.25 5.25 0 0 1 5.25-5.25 5.252 5.252 0 0 1 4.102 8.526m-1.17-.433a4.082 4.082 0 0 0-2.931-6.927 4.08 4.08 0 0 0-4.084 4.084 4.082 4.082 0 0 0 6.927 2.93z"
/>
</svg>
</span>
</span>
</div>
</div>
</div>
<div
class="ant-space-item"
style="padding-bottom: 8px;"
>
<div
class="ant-space css-dev-only-do-not-override-1kh50jg ant-space-horizontal ant-space-align-center"
/>
</div>
</div>
</div>
</div>
<div
class="ant-table-wrapper actiontech-table-namespace css-1p8avck css-dev-only-do-not-override-bj9uhl"
>
Expand Down Expand Up @@ -935,6 +995,66 @@ exports[`base/UserCenter switch to operate permission list 1`] = `
<div
class="lazy-load-wrapper segmented-item-content lazy-load-wrapper-hidden css-952l0m"
>
<div
class="ant-spin-nested-loading css-dev-only-do-not-override-1kh50jg"
>
<div
class="ant-spin-container"
>
<div
class="ant-space css-dev-only-do-not-override-1kh50jg ant-space-horizontal ant-space-align-center full-width-element flex-space-between actiontech-table-toolbar-namespace css-c38ntt"
style="flex-wrap: wrap; margin-bottom: -8px;"
>
<div
class="ant-space-item"
style="margin-right: 8px; padding-bottom: 8px;"
>
<div
class="ant-space css-dev-only-do-not-override-1kh50jg ant-space-horizontal ant-space-align-center"
>
<div
class="ant-space-item"
>
<span
class="ant-input-affix-wrapper basic-input-wrapper actiontech-table-search-input-namespace css-1f6svkh ant-input-affix-wrapper-sm css-dev-only-do-not-override-mlhibv"
>
<input
class="ant-input ant-input-sm css-dev-only-do-not-override-mlhibv"
id="actiontech-table-search-input"
placeholder="请输入要搜索的 用户名"
type="text"
value=""
/>
<span
class="ant-input-suffix"
>
<svg
class="custom-icon custom-icon-search"
height="14"
viewBox="0 0 14 14"
width="14"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="m10.518 9.693 2.499 2.498-.826.825-2.498-2.498a5.252 5.252 0 0 1-8.527-4.101 5.25 5.25 0 0 1 5.25-5.25 5.252 5.252 0 0 1 4.102 8.526m-1.17-.433a4.082 4.082 0 0 0-2.931-6.927 4.08 4.08 0 0 0-4.084 4.084 4.082 4.082 0 0 0 6.927 2.93z"
/>
</svg>
</span>
</span>
</div>
</div>
</div>
<div
class="ant-space-item"
style="padding-bottom: 8px;"
>
<div
class="ant-space css-dev-only-do-not-override-1kh50jg ant-space-horizontal ant-space-align-center"
/>
</div>
</div>
</div>
</div>
<div
class="ant-table-wrapper actiontech-table-namespace css-1p8avck css-dev-only-do-not-override-bj9uhl"
>
Expand Down Expand Up @@ -2002,6 +2122,66 @@ exports[`base/UserCenter switch to role list 1`] = `
<div
class="lazy-load-wrapper segmented-item-content lazy-load-wrapper-hidden css-952l0m"
>
<div
class="ant-spin-nested-loading css-dev-only-do-not-override-1kh50jg"
>
<div
class="ant-spin-container"
>
<div
class="ant-space css-dev-only-do-not-override-1kh50jg ant-space-horizontal ant-space-align-center full-width-element flex-space-between actiontech-table-toolbar-namespace css-c38ntt"
style="flex-wrap: wrap; margin-bottom: -8px;"
>
<div
class="ant-space-item"
style="margin-right: 8px; padding-bottom: 8px;"
>
<div
class="ant-space css-dev-only-do-not-override-1kh50jg ant-space-horizontal ant-space-align-center"
>
<div
class="ant-space-item"
>
<span
class="ant-input-affix-wrapper basic-input-wrapper actiontech-table-search-input-namespace css-1f6svkh ant-input-affix-wrapper-sm css-dev-only-do-not-override-mlhibv"
>
<input
class="ant-input ant-input-sm css-dev-only-do-not-override-mlhibv"
id="actiontech-table-search-input"
placeholder="请输入要搜索的 用户名"
type="text"
value=""
/>
<span
class="ant-input-suffix"
>
<svg
class="custom-icon custom-icon-search"
height="14"
viewBox="0 0 14 14"
width="14"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="m10.518 9.693 2.499 2.498-.826.825-2.498-2.498a5.252 5.252 0 0 1-8.527-4.101 5.25 5.25 0 0 1 5.25-5.25 5.252 5.252 0 0 1 4.102 8.526m-1.17-.433a4.082 4.082 0 0 0-2.931-6.927 4.08 4.08 0 0 0-4.084 4.084 4.082 4.082 0 0 0 6.927 2.93z"
/>
</svg>
</span>
</span>
</div>
</div>
</div>
<div
class="ant-space-item"
style="padding-bottom: 8px;"
>
<div
class="ant-space css-dev-only-do-not-override-1kh50jg ant-space-horizontal ant-space-align-center"
/>
</div>
</div>
</div>
</div>
<div
class="ant-table-wrapper actiontech-table-namespace css-1p8avck css-dev-only-do-not-override-bj9uhl"
>
Expand Down
9 changes: 9 additions & 0 deletions packages/base/src/page/UserCenter/__tests__/index.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,9 @@ describe('base/UserCenter', () => {
page_index: 1,
page_size: 20
});
expect(
getBySelector('#actiontech-table-search-input', baseElement)
).toHaveAttribute('placeholder', '请输入要搜索的 用户名');
fireEvent.click(screen.getByText('添加用户'));
await act(async () => jest.advanceTimersByTime(300));
expect(dispatchSpy).toHaveBeenCalledWith({
Expand Down Expand Up @@ -70,6 +73,9 @@ describe('base/UserCenter', () => {
page_index: 1,
page_size: 20
});
expect(
screen.queryByPlaceholderText('请输入要搜索的 用户名')
).not.toBeVisible();
expect(baseElement).toMatchSnapshot();
fireEvent.click(screen.getByText('添加角色'));
await act(async () => jest.advanceTimersByTime(300));
Expand All @@ -94,6 +100,9 @@ describe('base/UserCenter', () => {
page_size: 20,
filter_by_target: ListOpPermissionsFilterByTargetEnum.all
});
expect(
screen.queryByPlaceholderText('请输入要搜索的 用户名')
).not.toBeVisible();
expect(baseElement).toMatchSnapshot();
});

Expand Down
3 changes: 3 additions & 0 deletions ...ages/base/src/page/UserCenter/components/PermissionList/__tests__/PermissionList.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,9 @@ describe('base/UserCenter/PermissionList', () => {

expect(permissionListSpy).toHaveBeenCalledTimes(1);
expect(baseElement).toMatchSnapshot();
expect(
queryBySelector('#actiontech-table-search-input', baseElement)
).not.toBeInTheDocument();
expect(screen.getAllByText('创建项目')).toHaveLength(2);
expect(screen.getByText('修改项目')).toBeInTheDocument();
expect(screen.getAllByText('数据源')).toHaveLength(2);
Expand Down
3 changes: 3 additions & 0 deletions packages/base/src/page/UserCenter/components/RoleList/__tests__/RoleList.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,9 @@ describe('base/UserCenter/RoleList', () => {
await act(async () => jest.advanceTimersByTime(3300));
expect(roleListSpy).toHaveBeenCalledTimes(1);
expect(baseElement).toMatchSnapshot();
expect(
queryBySelector('#actiontech-table-search-input', baseElement)
).not.toBeInTheDocument();
expect(screen.getByText('test role 1')).toBeInTheDocument();
expect(screen.getAllByText('编 辑')).toHaveLength(3);
expect(screen.getAllByText('删 除')).toHaveLength(3);
Expand Down
29 changes: 25 additions & 4 deletions packages/base/src/page/UserCenter/components/UserList/List.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { useTranslation } from 'react-i18next';
import { useRequest } from 'ahooks';
import {
ActiontechTable,
TableToolbar,
useTableRequestError,
useTableRequestParams
} from '@actiontech/shared/lib/components/ActiontechTable';
Expand Down Expand Up @@ -34,10 +35,13 @@ const UserList: React.FC<{ activePage: UserCenterListEnum }> = ({
const { requestErrorMessage, handleTableRequestError } =
useTableRequestError();

const { pagination, tableChange } = useTableRequestParams<
IListUser,
IListUsersParams
>();
const {
pagination,
tableChange,
searchKeyword,
setSearchKeyword,
refreshBySearchKeyword
} = useTableRequestParams<IListUser, IListUsersParams>();

const {
data: userList,
Expand All @@ -48,6 +52,10 @@ const UserList: React.FC<{ activePage: UserCenterListEnum }> = ({
const params: IListUsersParams = {
...pagination
};
const nameFuzzy = searchKeyword.trim();
if (nameFuzzy) {
params.filter_by_name_fuzzy = nameFuzzy;
}
return handleTableRequestError(User.ListUsers(params));
},
{
Expand Down Expand Up @@ -105,6 +113,19 @@ const UserList: React.FC<{ activePage: UserCenterListEnum }> = ({
return (
<>
{contextHolder}
<TableToolbar
loading={loading}
searchInput={{
onChange: setSearchKeyword,
defaultValue: searchKeyword,
onSearch: () => {
refreshBySearchKeyword();
},
placeholder: t('common.form.placeholder.searchInput', {
name: t('common.username')
})
}}
/>
<ActiontechTable
rowKey="uid"
dataSource={userList?.list}
Expand Down
Loading
Loading