diff --git a/ui/src/views/system-chat-user/group/index.vue b/ui/src/views/system-chat-user/group/index.vue
index 617962545..133839135 100644
--- a/ui/src/views/system-chat-user/group/index.vue
+++ b/ui/src/views/system-chat-user/group/index.vue
@@ -1,138 +1,140 @@
 <template>
-  <ContentContainer>
-    <template #header>
-      <div class="shared-header">
-        <span class="title">{{ t('views.chatUser.title') }}</span>
-        <el-icon size="12">
-          <rightOutlined></rightOutlined>
-        </el-icon>
-        <span class="sub-title">{{ t('views.chatUser.group.title') }}</span>
-      </div>
-    </template>
-    <el-card style="--el-card-padding: 0" class="user-card">
-      <div class="flex h-full">
-        <div class="user-left border-r p-16">
-          <div class="user-left_title flex-between">
-            <h4 class="medium">{{ $t('views.chatUser.group.title') }}</h4>
-            <el-tooltip effect="dark" :content="`${$t('common.create')}${$t('views.chatUser.group.title')}`"
-              placement="top">
-              <el-button type="primary" text @click="createOrUpdate()">
-                <AppIcon iconName="app-copy"></AppIcon>
-              </el-button>
-            </el-tooltip>
+  <div class="h-full">
+    <ContentContainer>
+      <template #header>
+        <div class="shared-header">
+          <span class="title">{{ t('views.chatUser.title') }}</span>
+          <el-icon size="12">
+            <rightOutlined></rightOutlined>
+          </el-icon>
+          <span class="sub-title">{{ t('views.chatUser.group.title') }}</span>
+        </div>
+      </template>
+      <el-card style="--el-card-padding: 0" class="user-card">
+        <div class="flex h-full">
+          <div class="user-left border-r p-16">
+            <div class="user-left_title flex-between">
+              <h4 class="medium">{{ $t('views.chatUser.group.title') }}</h4>
+              <el-tooltip effect="dark" :content="`${$t('common.create')}${$t('views.chatUser.group.title')}`"
+                placement="top">
+                <el-button type="primary" text @click="createOrUpdate()">
+                  <AppIcon iconName="app-copy"></AppIcon>
+                </el-button>
+              </el-tooltip>
+            </div>
+
+            <div class="p-8">
+              <el-input v-model="filterText" :placeholder="$t('common.search')" prefix-icon="Search" clearable />
+            </div>
+            <div class="list-height-left">
+              <el-scrollbar v-loading="loading">
+                <common-list :data="filterList" @click="clickUserGroup" :default-active="current?.id">
+                  <template #default="{ row }">
+                    <div class="flex-between">
+                      <span class="ellipsis" style="max-width: initial;">{{ row.name }}</span>
+                      <el-dropdown :teleported="false">
+                        <el-button text>
+                          <el-icon class="color-secondary">
+                            <MoreFilled />
+                          </el-icon>
+                        </el-button>
+                        <template #dropdown>
+                          <el-dropdown-menu style="min-width: 80px">
+                            <el-dropdown-item @click.stop="createOrUpdate(row)" class="p-8">
+                              <AppIcon iconName="app-copy"></AppIcon>
+                              {{
+                                $t('common.rename')
+                              }}
+                            </el-dropdown-item>
+                            <el-dropdown-item @click.stop="deleteGroup(row)" class="border-t p-8">
+                              <AppIcon iconName="app-copy"></AppIcon>
+                              {{
+                                $t('common.delete')
+                              }}
+                            </el-dropdown-item>
+                          </el-dropdown-menu>
+                        </template>
+                      </el-dropdown>
+                    </div>
+                  </template>
+                  <template #empty>
+                    <span></span>
+                  </template>
+                </common-list>
+              </el-scrollbar>
+            </div>
           </div>
 
-          <div class="p-8">
-            <el-input v-model="filterText" :placeholder="$t('common.search')" prefix-icon="Search" clearable />
-          </div>
-          <div class="list-height-left">
-            <el-scrollbar v-loading="loading">
-              <common-list :data="filterList" @click="clickUserGroup" :default-active="current?.id">
+          <!-- 右边 -->
+          <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" />
+              <AppIcon iconName="app-wordspace" style="font-size: 16px" class="color-input-placeholder"></AppIcon>
+              <span class="color-input-placeholder ml-4">
+                {{ paginationConfig.total }}
+              </span>
+            </div>
+
+            <div class="flex-between mb-16" style="margin-top: 20px;">
+              <div>
+                <el-button type="primary" @click="createUser()">
+                  {{ t('views.role.member.add') }}
+                </el-button>
+                <el-button :disabled="multipleSelection.length === 0" @click="handleDeleteUser()">
+                  {{ $t('common.delete') }}
+                </el-button>
+              </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-select>
+                <el-input v-if="searchType === 'username'" v-model="searchForm.username" @change="getList"
+                  :placeholder="$t('common.searchBar.placeholder')" style="width: 220px" clearable />
+              </div>
+            </div>
+
+            <app-table :data="tableData" :pagination-config="paginationConfig" @sizeChange="handleSizeChange"
+              @changePage="getList" @selection-change="handleSelectionChange">
+              <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="source" :label="$t('views.userManage.source.label')">
                 <template #default="{ row }">
-                  <div class="flex-between">
-                    <span class="ellipsis" style="max-width: initial;">{{ row.name }}</span>
-                    <el-dropdown :teleported="false">
-                      <el-button text>
-                        <el-icon class="color-secondary">
-                          <MoreFilled />
-                        </el-icon>
-                      </el-button>
-                      <template #dropdown>
-                        <el-dropdown-menu style="min-width: 80px">
-                          <el-dropdown-item @click.stop="createOrUpdate(row)" class="p-8">
-                            <AppIcon iconName="app-copy"></AppIcon>
-                            {{
-                              $t('common.rename')
-                            }}
-                          </el-dropdown-item>
-                          <el-dropdown-item @click.stop="deleteGroup(row)" class="border-t p-8">
-                            <AppIcon iconName="app-copy"></AppIcon>
-                            {{
-                              $t('common.delete')
-                            }}
-                          </el-dropdown-item>
-                        </el-dropdown-menu>
-                      </template>
-                    </el-dropdown>
-                  </div>
+                  {{
+                    row.source === 'LOCAL'
+                      ? $t('views.userManage.source.local')
+                      : row.source === 'wecom'
+                        ? $t('views.userManage.source.wecom')
+                        : row.source === 'lark'
+                          ? $t('views.userManage.source.lark')
+                          : row.source === 'dingtalk'
+                            ? $t('views.userManage.source.dingtalk')
+                            : row.source === 'OAUTH2' || row.source === 'OAuth2'
+                              ? 'OAuth2'
+                              : row.source
+                  }}
                 </template>
-                <template #empty>
-                  <span></span>
+              </el-table-column>
+              <el-table-column :label="$t('common.operation')" width="100" fixed="right">
+                <template #default="{ row }">
+                  <el-tooltip effect="dark" :content="`${$t('views.role.member.delete.button')}`" placement="top">
+                    <el-button type="primary" text @click.stop="handleDeleteUser(row)">
+                      <el-icon>
+                        <EditPen />
+                      </el-icon>
+                    </el-button>
+                  </el-tooltip>
                 </template>
-              </common-list>
-            </el-scrollbar>
+              </el-table-column>
+            </app-table>
           </div>
         </div>
-
-        <!-- 右边 -->
-        <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" />
-            <AppIcon iconName="app-wordspace" style="font-size: 16px" class="color-input-placeholder"></AppIcon>
-            <span class="color-input-placeholder ml-4">
-              {{ paginationConfig.total }}
-            </span>
-          </div>
-
-          <div class="flex-between mb-16" style="margin-top: 20px;">
-            <div>
-              <el-button type="primary" @click="createUser()">
-                {{ t('views.role.member.add') }}
-              </el-button>
-              <el-button :disabled="multipleSelection.length === 0" @click="handleDeleteUser()">
-                {{ $t('common.delete') }}
-              </el-button>
-            </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-select>
-              <el-input v-if="searchType === 'username'" v-model="searchForm.username" @change="getList"
-                :placeholder="$t('common.searchBar.placeholder')" style="width: 220px" clearable />
-            </div>
-          </div>
-
-          <app-table :data="tableData" :pagination-config="paginationConfig" @sizeChange="handleSizeChange"
-            @changePage="getList" @selection-change="handleSelectionChange">
-            <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="source" :label="$t('views.userManage.source.label')">
-              <template #default="{ row }">
-                {{
-                  row.source === 'LOCAL'
-                    ? $t('views.userManage.source.local')
-                    : row.source === 'wecom'
-                      ? $t('views.userManage.source.wecom')
-                      : row.source === 'lark'
-                        ? $t('views.userManage.source.lark')
-                        : row.source === 'dingtalk'
-                          ? $t('views.userManage.source.dingtalk')
-                          : row.source === 'OAUTH2' || row.source === 'OAuth2'
-                            ? 'OAuth2'
-                            : row.source
-                }}
-              </template>
-            </el-table-column>
-            <el-table-column :label="$t('common.operation')" width="100" fixed="right">
-              <template #default="{ row }">
-                <el-tooltip effect="dark" :content="`${$t('views.role.member.delete.button')}`" placement="top">
-                  <el-button type="primary" text @click.stop="handleDeleteUser(row)">
-                    <el-icon>
-                      <EditPen />
-                    </el-icon>
-                  </el-button>
-                </el-tooltip>
-              </template>
-            </el-table-column>
-          </app-table>
-        </div>
-      </div>
-    </el-card>
-  </ContentContainer>
-  <CreateOrUpdateGroupDialog ref="createOrUpdateGroupDialogRef" @refresh="refresh" />
-  <CreateGroupUserDialog ref="createGroupUserDialogRef" @refresh="getList" />
+      </el-card>
+    </ContentContainer>
+    <CreateOrUpdateGroupDialog ref="createOrUpdateGroupDialogRef" @refresh="refresh" />
+    <CreateGroupUserDialog ref="createGroupUserDialogRef" @refresh="getList" />
+  </div>
 </template>
 
 <script lang="ts" setup>
diff --git a/ui/src/views/system-chat-user/user-manage/index.vue b/ui/src/views/system-chat-user/user-manage/index.vue
index c577358ac..4a75640c2 100644
--- a/ui/src/views/system-chat-user/user-manage/index.vue
+++ b/ui/src/views/system-chat-user/user-manage/index.vue
@@ -1,145 +1,147 @@
 <template>
-  <ContentContainer>
-    <template #header>
-      <div class="shared-header">
-        <span class="title">{{ t('views.chatUser.title') }}</span>
-        <el-icon size="12">
-          <rightOutlined></rightOutlined>
-        </el-icon>
-        <span class="sub-title">{{ t('views.chatUser.title') }}</span>
-      </div>
-    </template>
-    <el-card class="h-full">
-      <div class="flex-between mb-16">
-        <div>
-          <el-button type="primary" @click="createUser()">
-            {{ t('views.userManage.createUser') }}
-          </el-button>
-          <el-button @click="syncUsers">
-            {{ $t('views.chatUser.syncUsers') }}
-          </el-button>
-          <el-button :disabled="multipleSelection.length === 0" @click="setUserGroups">
-            {{ $t('views.chatUser.setUserGroups') }}
-          </el-button>
-          <el-button :disabled="multipleSelection.length === 0" @click="handleBatchDelete">
-            {{ $t('common.delete') }}
-          </el-button>
+  <div class="h-full">
+    <ContentContainer>
+      <template #header>
+        <div class="shared-header">
+          <span class="title">{{ t('views.chatUser.title') }}</span>
+          <el-icon size="12">
+            <rightOutlined></rightOutlined>
+          </el-icon>
+          <span class="sub-title">{{ t('views.chatUser.title') }}</span>
         </div>
-        <div class="flex-between complex-search">
-          <el-select class="complex-search__left" v-model="search_type" style="width: 120px"
-            @change="search_type_change">
-            <el-option :label="$t('views.login.loginForm.username.label')" value="name" />
-          </el-select>
-          <el-input v-if="search_type === 'name'" v-model="search_form.name" @change="getList"
-            :placeholder="$t('common.searchBar.placeholder')" style="width: 220px" clearable />
+      </template>
+      <el-card class="h-full">
+        <div class="flex-between mb-16">
+          <div>
+            <el-button type="primary" @click="createUser()">
+              {{ t('views.userManage.createUser') }}
+            </el-button>
+            <el-button @click="syncUsers">
+              {{ $t('views.chatUser.syncUsers') }}
+            </el-button>
+            <el-button :disabled="multipleSelection.length === 0" @click="setUserGroups">
+              {{ $t('views.chatUser.setUserGroups') }}
+            </el-button>
+            <el-button :disabled="multipleSelection.length === 0" @click="handleBatchDelete">
+              {{ $t('common.delete') }}
+            </el-button>
+          </div>
+          <div class="flex-between complex-search">
+            <el-select class="complex-search__left" v-model="search_type" style="width: 120px"
+              @change="search_type_change">
+              <el-option :label="$t('views.login.loginForm.username.label')" value="name" />
+            </el-select>
+            <el-input v-if="search_type === 'name'" v-model="search_form.name" @change="getList"
+              :placeholder="$t('common.searchBar.placeholder')" style="width: 220px" clearable />
+          </div>
         </div>
-      </div>
-      <app-table class="mt-16" :data="userTableData" :pagination-config="paginationConfig"
-        @sizeChange="handleSizeChange" @changePage="getList" v-loading="loading"
-        @selection-change="handleSelectionChange" @sort-change="handleSortChange">
-        <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('common.username')" />
-        <el-table-column prop="is_active" :label="$t('common.status.label')">
-          <template #default="{ row }">
-            <div v-if="row.is_active" class="flex align-center">
-              <el-icon class="color-success mr-8" style="font-size: 16px">
-                <SuccessFilled />
-              </el-icon>
-              <span class="color-secondary">
-                {{ $t('common.status.enabled') }}
+        <app-table class="mt-16" :data="userTableData" :pagination-config="paginationConfig"
+          @sizeChange="handleSizeChange" @changePage="getList" v-loading="loading"
+          @selection-change="handleSelectionChange" @sort-change="handleSortChange">
+          <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('common.username')" />
+          <el-table-column prop="is_active" :label="$t('common.status.label')">
+            <template #default="{ row }">
+              <div v-if="row.is_active" class="flex align-center">
+                <el-icon class="color-success mr-8" style="font-size: 16px">
+                  <SuccessFilled />
+                </el-icon>
+                <span class="color-secondary">
+                  {{ $t('common.status.enabled') }}
+                </span>
+              </div>
+              <div v-else class="flex align-center">
+                <AppIcon iconName="app-disabled" class="color-secondary mr-8"></AppIcon>
+                <span class="color-secondary">
+                  {{ $t('common.status.disabled') }}
+                </span>
+              </div>
+            </template>
+          </el-table-column>
+
+          <el-table-column prop="email" :label="$t('views.login.loginForm.email.label')" show-overflow-tooltip>
+            <template #default="{ row }">
+              {{ row.email || '-' }}
+            </template>
+          </el-table-column>
+          <el-table-column prop="phone" :label="$t('views.userManage.userForm.phone.label')">
+            <template #default="{ row }">
+              {{ row.phone || '-' }}
+            </template>
+          </el-table-column>
+          <el-table-column prop="user_group_names" :label="$t('views.chatUser.group.title')">
+            <template #default="{ row }">
+              <TagGroup :tags="row.user_group_names" />
+            </template>
+          </el-table-column>
+          <el-table-column prop="source" :label="$t('views.userManage.source.label')">
+            <template #default="{ row }">
+              {{
+                row.source === 'LOCAL'
+                  ? $t('views.userManage.source.local')
+                  : row.source === 'wecom'
+                    ? $t('views.userManage.source.wecom')
+                    : row.source === 'lark'
+                      ? $t('views.userManage.source.lark')
+                      : row.source === 'dingtalk'
+                        ? $t('views.userManage.source.dingtalk')
+                        : row.source === 'OAUTH2' || row.source === 'OAuth2'
+                          ? 'OAuth2'
+                          : row.source
+              }}
+            </template>
+          </el-table-column>
+
+          <el-table-column :label="$t('common.createTime')" width="180">
+            <template #default="{ row }">
+              {{ datetimeFormat(row.create_time) }}
+            </template>
+          </el-table-column>
+
+          <el-table-column :label="$t('common.operation')" width="160" align="left" fixed="right">
+            <template #default="{ row }">
+              <span @click.stop>
+                <el-switch size="small" v-model="row.is_active" :before-change="() => changeState(row)" />
               </span>
-            </div>
-            <div v-else class="flex align-center">
-              <AppIcon iconName="app-disabled" class="color-secondary mr-8"></AppIcon>
-              <span class="color-secondary">
-                {{ $t('common.status.disabled') }}
+              <el-divider direction="vertical" />
+              <span class="mr-8">
+                <el-button type="primary" text @click.stop="editUser(row)" :title="$t('common.edit')">
+                  <el-icon>
+                    <EditPen />
+                  </el-icon>
+                </el-button>
               </span>
-            </div>
-          </template>
-        </el-table-column>
 
-        <el-table-column prop="email" :label="$t('views.login.loginForm.email.label')" show-overflow-tooltip>
-          <template #default="{ row }">
-            {{ row.email || '-' }}
-          </template>
-        </el-table-column>
-        <el-table-column prop="phone" :label="$t('views.userManage.userForm.phone.label')">
-          <template #default="{ row }">
-            {{ row.phone || '-' }}
-          </template>
-        </el-table-column>
-        <el-table-column prop="user_group_names" :label="$t('views.chatUser.group.title')">
-          <template #default="{ row }">
-            <TagGroup :tags="row.user_group_names" />
-          </template>
-        </el-table-column>
-        <el-table-column prop="source" :label="$t('views.userManage.source.label')">
-          <template #default="{ row }">
-            {{
-              row.source === 'LOCAL'
-                ? $t('views.userManage.source.local')
-                : row.source === 'wecom'
-                  ? $t('views.userManage.source.wecom')
-                  : row.source === 'lark'
-                    ? $t('views.userManage.source.lark')
-                    : row.source === 'dingtalk'
-                      ? $t('views.userManage.source.dingtalk')
-                      : row.source === 'OAUTH2' || row.source === 'OAuth2'
-                        ? 'OAuth2'
-                        : row.source
-            }}
-          </template>
-        </el-table-column>
+              <span class="mr-8">
+                <el-button type="primary" text @click.stop="editPwdUser(row)"
+                  :title="$t('views.userManage.setting.updatePwd')">
+                  <el-icon>
+                    <Lock />
+                  </el-icon>
+                </el-button>
+              </span>
+              <span>
+                <el-button :disabled="row.role === 'ADMIN'" type="primary" text @click.stop="deleteUserManage(row)"
+                  :title="$t('common.delete')">
+                  <el-icon>
+                    <Delete />
+                  </el-icon>
+                </el-button>
+              </span>
+            </template>
+          </el-table-column>
+        </app-table>
+      </el-card>
+    </ContentContainer>
 
-        <el-table-column :label="$t('common.createTime')" width="180">
-          <template #default="{ row }">
-            {{ datetimeFormat(row.create_time) }}
-          </template>
-        </el-table-column>
-
-        <el-table-column :label="$t('common.operation')" width="160" align="left" fixed="right">
-          <template #default="{ row }">
-            <span @click.stop>
-              <el-switch size="small" v-model="row.is_active" :before-change="() => changeState(row)" />
-            </span>
-            <el-divider direction="vertical" />
-            <span class="mr-8">
-              <el-button type="primary" text @click.stop="editUser(row)" :title="$t('common.edit')">
-                <el-icon>
-                  <EditPen />
-                </el-icon>
-              </el-button>
-            </span>
-
-            <span class="mr-8">
-              <el-button type="primary" text @click.stop="editPwdUser(row)"
-                :title="$t('views.userManage.setting.updatePwd')">
-                <el-icon>
-                  <Lock />
-                </el-icon>
-              </el-button>
-            </span>
-            <span>
-              <el-button :disabled="row.role === 'ADMIN'" type="primary" text @click.stop="deleteUserManage(row)"
-                :title="$t('common.delete')">
-                <el-icon>
-                  <Delete />
-                </el-icon>
-              </el-button>
-            </span>
-          </template>
-        </el-table-column>
-      </app-table>
-    </el-card>
-  </ContentContainer>
-
-  <UserDrawer :title="title" :optionLoading="optionLoading" :chatGroupList="chatGroupList" ref="UserDrawerRef"
-    @refresh="refresh" />
-  <UserPwdDialog ref="UserPwdDialogRef" @refresh="refresh" />
-  <SetUserGroupsDialog :optionLoading="optionLoading" :chatGroupList="chatGroupList" ref="setUserGroupsRef"
-    @refresh="refresh" />
-  <SyncUsersDialog ref="syncUsersDialogRef" @refresh="refresh" />
+    <UserDrawer :title="title" :optionLoading="optionLoading" :chatGroupList="chatGroupList" ref="UserDrawerRef"
+      @refresh="refresh" />
+    <UserPwdDialog ref="UserPwdDialogRef" @refresh="refresh" />
+    <SetUserGroupsDialog :optionLoading="optionLoading" :chatGroupList="chatGroupList" ref="setUserGroupsRef"
+      @refresh="refresh" />
+    <SyncUsersDialog ref="syncUsersDialogRef" @refresh="refresh" />
+  </div>
 </template>
 
 <script lang="ts" setup>