diff --git a/ui/src/api/system/user-group.ts b/ui/src/api/system/user-group.ts
index e6826bfde..ac1d23c23 100644
--- a/ui/src/api/system/user-group.ts
+++ b/ui/src/api/system/user-group.ts
@@ -1,8 +1,8 @@
-import { Result } from '@/request/Result'
-import { get, post, del } from '@/request/index'
-import type { Ref } from 'vue'
-import type { ChatUserGroupUserItem, } from '@/api/type/systemChatUser'
-import type { pageRequest, PageList, ListItem } from '@/api/type/common'
+import {Result} from '@/request/Result'
+import {get, post, del} from '@/request/index'
+import type {Ref} from 'vue'
+import type {ChatUserGroupUserItem,} from '@/api/type/systemChatUser'
+import type {pageRequest, PageList, ListItem} from '@/api/type/common'
 
 const prefix = '/system/group'
 
@@ -67,12 +67,12 @@ const postRemoveMember: (
 const getUserListByGroup: (
   user_group_id: string,
   page: pageRequest,
-  username: string,
+  params ?: any,
   loading?: Ref<boolean>,
-) => Promise<Result<PageList<ChatUserGroupUserItem[]>>> = (user_group_id, page, username, loading) => {
+) => Promise<Result<PageList<ChatUserGroupUserItem[]>>> = (user_group_id, page, params, loading) => {
   return get(
     `${prefix}/${user_group_id}/user_list/${page.current_page}/${page.page_size}`,
-    username ? { username } : undefined,
+    params ? params : undefined,
     loading,
   )
 }
diff --git a/ui/src/views/system-chat-user/group/index.vue b/ui/src/views/system-chat-user/group/index.vue
index 079c745eb..b32f33b80 100644
--- a/ui/src/views/system-chat-user/group/index.vue
+++ b/ui/src/views/system-chat-user/group/index.vue
@@ -27,7 +27,9 @@
                       [PermissionConst.WORKSPACE_USER_GROUP_CREATE, PermissionConst.USER_GROUP_CREATE],
                       [],'OR',)"
                 >
-                  <el-icon :size="18"><Plus /></el-icon>
+                  <el-icon :size="18">
+                    <Plus/>
+                  </el-icon>
                 </el-button>
               </el-tooltip>
             </div>
@@ -57,7 +59,7 @@
                       <el-dropdown :teleported="false">
                         <el-button text>
                           <el-icon class="color-secondary">
-                            <MoreFilled />
+                            <MoreFilled/>
                           </el-icon>
                         </el-button>
                         <template #dropdown>
@@ -70,7 +72,9 @@
                                     [PermissionConst.WORKSPACE_USER_GROUP_EDIT, PermissionConst.USER_GROUP_EDIT],
                                     [],'OR',),'OR',)"
                             >
-                               <el-icon><EditPen /></el-icon>
+                              <el-icon>
+                                <EditPen/>
+                              </el-icon>
                               {{ $t('common.rename') }}
                             </el-dropdown-item>
                             <el-dropdown-item
@@ -81,7 +85,9 @@
                                     [PermissionConst.WORKSPACE_USER_GROUP_DELETE, PermissionConst.USER_GROUP_DELETE],
                                     [],'OR',),'OR',)"
                             >
-                              <el-icon><Delete /></el-icon>
+                              <el-icon>
+                                <Delete/>
+                              </el-icon>
                               {{ $t('common.delete') }}
                             </el-dropdown-item>
                           </el-dropdown-menu>
@@ -102,7 +108,7 @@
         <div class="user-right" v-loading="rightLoading">
           <div class="flex align-center">
             <h4 class="medium">{{ current?.name }}</h4>
-            <el-divider direction="vertical" class="mr-8 ml-8" />
+            <el-divider direction="vertical" class="mr-8 ml-8"/>
             <AppIcon
               iconName="app-workspace"
               style="font-size: 16px"
@@ -140,7 +146,9 @@
             </div>
             <div class="flex-between complex-search">
               <el-select class="complex-search__left" v-model="searchType" style="width: 120px">
-                <el-option :label="$t('views.login.loginForm.username.label')" value="username" />
+                <el-option :label="$t('views.login.loginForm.username.label')" value="username"/>
+                <el-option :label="$t('views.userManage.userForm.nick_name.label')"
+                           value="nick_name"/>
               </el-select>
               <el-input
                 v-if="searchType === 'username'"
@@ -150,6 +158,14 @@
                 style="width: 220px"
                 clearable
               />
+              <el-input
+                v-else-if="searchType === 'nick_name'"
+                v-model="searchForm.nick_name"
+                @change="getList"
+                :placeholder="$t('common.searchBar.placeholder')"
+                style="width: 220px"
+                clearable
+              />
             </div>
           </div>
 
@@ -160,12 +176,12 @@
             @changePage="getList"
             @selection-change="handleSelectionChange"
           >
-            <el-table-column type="selection" width="55" />
+            <el-table-column type="selection" width="55"/>
             <el-table-column
               prop="nick_name"
               :label="$t('views.userManage.userForm.nick_name.label')"
             />
-            <el-table-column prop="username" :label="$t('views.login.loginForm.username.label')" />
+            <el-table-column prop="username" :label="$t('views.login.loginForm.username.label')"/>
             <el-table-column prop="source" :label="$t('views.userManage.source.label')">
               <template #default="{ row }">
                 {{
@@ -197,7 +213,7 @@
                         [],'OR',)"
                   >
                     <el-icon>
-                      <EditPen />
+                      <EditPen/>
                     </el-icon>
                   </el-button>
                 </el-tooltip>
@@ -208,23 +224,23 @@
       </div>
     </el-card>
 
-    <CreateOrUpdateGroupDialog ref="createOrUpdateGroupDialogRef" @refresh="refresh" />
-    <CreateGroupUserDialog ref="createGroupUserDialogRef" @refresh="getList" />
+    <CreateOrUpdateGroupDialog ref="createOrUpdateGroupDialogRef" @refresh="refresh"/>
+    <CreateGroupUserDialog ref="createGroupUserDialogRef" @refresh="getList"/>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { onMounted, ref, watch, reactive } from 'vue'
+import {onMounted, ref, watch, reactive} from 'vue'
 import SystemGroupApi from '@/api/system/user-group'
-import { t } from '@/locales'
-import type { ChatUserGroupUserItem } from '@/api/type/systemChatUser'
+import {t} from '@/locales'
+import type {ChatUserGroupUserItem} from '@/api/type/systemChatUser'
 import CreateOrUpdateGroupDialog from './component/CreateOrUpdateGroupDialog.vue'
 import CreateGroupUserDialog from './component/CreateGroupUserDialog.vue'
-import type { ListItem } from '@/api/type/common'
-import { MsgSuccess, MsgConfirm } from '@/utils/message'
-import { PermissionConst, RoleConst } from '@/utils/permission/data'
-import { ComplexPermission } from '@/utils/permission/type'
-import { hasPermission } from '@/utils/permission/index'
+import type {ListItem} from '@/api/type/common'
+import {MsgSuccess, MsgConfirm} from '@/utils/message'
+import {PermissionConst, RoleConst} from '@/utils/permission/data'
+import {ComplexPermission} from '@/utils/permission/type'
+import {hasPermission} from '@/utils/permission/index'
 
 const filterText = ref('')
 const loading = ref(false)
@@ -284,7 +300,8 @@ function deleteGroup(item: ListItem) {
         current.value = item.id === current.value?.id ? list.value[0] : current.value
       })
     })
-    .catch(() => {})
+    .catch(() => {
+    })
 }
 
 async function refresh(group?: ListItem) {
@@ -298,6 +315,7 @@ const rightLoading = ref(false)
 const searchType = ref('username')
 const searchForm = ref<Record<string, any>>({
   username: '',
+  nick_name: '',
 })
 const paginationConfig = reactive({
   current_page: 1,
@@ -310,10 +328,13 @@ const tableData = ref<ChatUserGroupUserItem[]>([])
 async function getList() {
   if (!current.value?.id) return
   try {
+    const params = {
+      [searchType.value]: searchForm.value[searchType.value as keyof typeof searchForm.value],
+    }
     const res = await SystemGroupApi.getUserListByGroup(
       current.value?.id,
       paginationConfig,
-      searchForm.value.username,
+      params,
       rightLoading,
     )
     tableData.value = res.data.records
@@ -351,7 +372,7 @@ function handleDeleteUser(item?: ChatUserGroupUserItem) {
   MsgConfirm(
     item
       ? `${t('views.workspace.member.delete.confirmTitle')}${item.nick_name} ?`
-      : t('views.chatUser.group.batchDeleteMember', { count: multipleSelection.value.length }),
+      : t('views.chatUser.group.batchDeleteMember', {count: multipleSelection.value.length}),
     '',
     {
       confirmButtonText: t('common.confirm'),
@@ -372,8 +393,10 @@ function handleDeleteUser(item?: ChatUserGroupUserItem) {
         await getList()
       })
     })
-    .catch(() => {})
+    .catch(() => {
+    })
 }
+
 const mouseId = ref('')
 
 function mouseenter(row: any) {