diff --git a/ui/src/api/application/work-flow-version.ts b/ui/src/api/application/workflow-version.ts
similarity index 100%
rename from ui/src/api/application/work-flow-version.ts
rename to ui/src/api/application/workflow-version.ts
diff --git a/ui/src/components/app-icon/icons/menu.ts b/ui/src/components/app-icon/icons/menu.ts
index da3bf2a8..7ece9832 100644
--- a/ui/src/components/app-icon/icons/menu.ts
+++ b/ui/src/components/app-icon/icons/menu.ts
@@ -261,4 +261,25 @@ export default {
       ])
     },
   },
+  'app-user-chat': {
+    iconReader: () => {
+      return h('i', [
+        h(
+          'svg',
+          {
+            style: { height: '100%', width: '100%' },
+            viewBox: '0 0 1024 1024',
+            version: '1.1',
+            xmlns: 'http://www.w3.org/2000/svg',
+          },
+          [
+            h('path', {
+              d: 'M426.666667 512a213.333333 213.333333 0 1 1 0.085333-426.752A213.333333 213.333333 0 0 1 426.666667 512z m0-85.333333a128 128 0 0 0 0-256 128 128 0 0 0 0 256z m-384 384a256 256 0 0 1 256-256h256a256 256 0 0 1 256 256v108.330666c0 23.552-19.2 42.666667-42.666667 42.666667H85.333333c-23.466667 0-42.666667-19.114667-42.666666-42.666667V810.666667z m682.666666 0a170.666667 170.666667 0 0 0-170.666666-170.666667H298.666667a170.666667 170.666667 0 0 0-170.666667 170.666667v65.664h597.333333V810.666667z m21.333334-426.666667h213.333333a21.333333 21.333333 0 0 1 21.333333 21.333333v42.666667a21.333333 21.333333 0 0 1-21.333333 21.333333h-213.333333a21.333333 21.333333 0 0 1-21.333334-21.333333v-42.666667a21.333333 21.333333 0 0 1 21.333334-21.333333z m128 170.666667h85.333333a21.333333 21.333333 0 0 1 21.333333 21.333333v42.666667a21.333333 21.333333 0 0 1-21.333333 21.333333h-85.333333a21.333333 21.333333 0 0 1-21.333334-21.333333v-42.666667a21.333333 21.333333 0 0 1 21.333334-21.333333z',
+              fill: 'currentColor',
+            }),
+          ],
+        ),
+      ])
+    },
+  },
 }
diff --git a/ui/src/router/modules/system.ts b/ui/src/router/modules/system.ts
index ee863a56..55a122e4 100644
--- a/ui/src/router/modules/system.ts
+++ b/ui/src/router/modules/system.ts
@@ -192,8 +192,8 @@ const systemRouter = {
       path: '/system/chat',
       name: 'SystemChat',
       meta: {
-        icon: 'app-shared',
-        iconActive: 'app-shared-active',
+        icon: 'app-user-chat',
+        iconActive: 'app-user-chat',
         title: 'views.chatUser.title',
         activeMenu: '/system',
         parentPath: '/system',
@@ -225,7 +225,7 @@ const systemRouter = {
               ),
             ],
           },
-          component: () => import('@/views/system-chat-user/user-manage/index.vue'),
+          component: () => import('@/views/system-chat-user/chat-user/index.vue'),
         },
         {
           path: '/system/chat/group',
diff --git a/ui/src/views/application-workflow/component/PublishHistory.vue b/ui/src/views/application-workflow/component/PublishHistory.vue
index 8fb3d323..39801603 100644
--- a/ui/src/views/application-workflow/component/PublishHistory.vue
+++ b/ui/src/views/application-workflow/component/PublishHistory.vue
@@ -71,7 +71,7 @@
 <script setup lang="ts">
 import { ref, onMounted, computed } from 'vue'
 import { useRoute } from 'vue-router'
-import workFlowVersionApi from '@/api/application/work-flow-version'
+import workFlowVersionApi from '@/api/application/workflow-version'
 import { datetimeFormat } from '@/utils/time'
 import { MsgSuccess, MsgError } from '@/utils/message'
 import { t } from '@/locales'
diff --git a/ui/src/views/system-chat-user/user-manage/component/SetUserGroupsDialog.vue b/ui/src/views/system-chat-user/chat-user/component/SetUserGroupsDialog.vue
similarity index 100%
rename from ui/src/views/system-chat-user/user-manage/component/SetUserGroupsDialog.vue
rename to ui/src/views/system-chat-user/chat-user/component/SetUserGroupsDialog.vue
diff --git a/ui/src/views/system-chat-user/user-manage/component/SyncUsersDialog.vue b/ui/src/views/system-chat-user/chat-user/component/SyncUsersDialog.vue
similarity index 100%
rename from ui/src/views/system-chat-user/user-manage/component/SyncUsersDialog.vue
rename to ui/src/views/system-chat-user/chat-user/component/SyncUsersDialog.vue
diff --git a/ui/src/views/system-chat-user/user-manage/component/UserDrawer.vue b/ui/src/views/system-chat-user/chat-user/component/UserDrawer.vue
similarity index 100%
rename from ui/src/views/system-chat-user/user-manage/component/UserDrawer.vue
rename to ui/src/views/system-chat-user/chat-user/component/UserDrawer.vue
diff --git a/ui/src/views/system-chat-user/user-manage/component/UserPwdDialog.vue b/ui/src/views/system-chat-user/chat-user/component/UserPwdDialog.vue
similarity index 100%
rename from ui/src/views/system-chat-user/user-manage/component/UserPwdDialog.vue
rename to ui/src/views/system-chat-user/chat-user/component/UserPwdDialog.vue
diff --git a/ui/src/views/system-chat-user/chat-user/index.vue b/ui/src/views/system-chat-user/chat-user/index.vue
new file mode 100644
index 00000000..b060ed58
--- /dev/null
+++ b/ui/src/views/system-chat-user/chat-user/index.vue
@@ -0,0 +1,460 @@
+<template>
+  <div class="chat-user p-24">
+    <el-breadcrumb separator-icon="ArrowRight" class="mb-16">
+      <el-breadcrumb-item>{{ t('views.chatUser.title') }}</el-breadcrumb-item>
+      <el-breadcrumb-item>
+        <h5 class="ml-4 color-text-primary">{{ t('views.chatUser.title') }}</h5>
+      </el-breadcrumb-item>
+    </el-breadcrumb>
+    <el-card>
+      <div class="flex-between mb-16">
+        <div>
+          <el-button
+            type="primary"
+            @click="createUser()"
+            v-hasPermission="
+              new ComplexPermission(
+                [
+                  RoleConst.ADMIN,
+                  RoleConst.WORKSPACE_MANAGE.getWorkspaceRole,
+                  RoleConst.USER.getWorkspaceRole,
+                ],
+                [PermissionConst.WORKSPACE_CHAT_USER_CREATE.getWorkspacePermission],
+                [],
+                'OR',
+              )
+            "
+          >
+            {{ t('views.userManage.createUser') }}
+          </el-button>
+          <el-button @click="syncUsers">
+            {{ $t('views.chatUser.syncUsers') }}
+          </el-button>
+          <el-button
+            :disabled="multipleSelection.length === 0"
+            @click="setUserGroups"
+            v-hasPermission="
+              new ComplexPermission(
+                [
+                  RoleConst.ADMIN,
+                  RoleConst.WORKSPACE_MANAGE.getWorkspaceRole,
+                  RoleConst.USER.getWorkspaceRole,
+                ],
+                [PermissionConst.WORKSPACE_CHAT_USER_GROUP.getWorkspacePermission],
+                [],
+                'OR',
+              )
+            "
+          >
+            {{ $t('views.chatUser.setUserGroups') }}
+          </el-button>
+          <el-button
+            :disabled="multipleSelection.length === 0"
+            @click="handleBatchDelete"
+            v-hasPermission="
+              new ComplexPermission(
+                [
+                  RoleConst.ADMIN,
+                  RoleConst.WORKSPACE_MANAGE.getWorkspaceRole,
+                  RoleConst.USER.getWorkspaceRole,
+                ],
+                [PermissionConst.WORKSPACE_CHAT_USER_DELETE.getWorkspacePermission],
+                [],
+                'OR',
+              )
+            "
+          >
+            {{ $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="username" />
+            <el-option :label="$t('views.userManage.userForm.nick_name.label')" value="nick_name" />
+          </el-select>
+          <el-input
+            v-if="search_type === 'username'"
+            v-model="search_form.username"
+            @change="getList"
+            style="width: 220px"
+            clearable
+          />
+          <el-input
+            v-if="search_type === 'nick_name'"
+            v-model="search_form.nick_name"
+            @change="getList"
+            style="width: 220px"
+            clearable
+          />
+        </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')" width="100">
+          <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')"
+          width="120"
+        >
+          <template #default="{ row }">
+            {{ row.phone || '-' }}
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="user_group_names"
+          :label="$t('views.chatUser.group.title')"
+          min-width="110"
+        >
+          <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.localCreate')
+                : 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>
+            <el-divider direction="vertical" />
+            <span class="mr-8">
+              <el-button
+                type="primary"
+                text
+                @click.stop="editUser(row)"
+                :title="$t('common.edit')"
+                v-hasPermission="
+                  new ComplexPermission(
+                    [
+                      RoleConst.ADMIN,
+                      RoleConst.WORKSPACE_MANAGE.getWorkspaceRole,
+                      RoleConst.USER.getWorkspaceRole,
+                    ],
+                    [PermissionConst.WORKSPACE_CHAT_USER_EDIT.getWorkspacePermission],
+                    [],
+                    'OR',
+                  )
+                "
+              >
+                <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')"
+                v-hasPermission="
+                  new ComplexPermission(
+                    [
+                      RoleConst.ADMIN,
+                      RoleConst.WORKSPACE_MANAGE.getWorkspaceRole,
+                      RoleConst.USER.getWorkspaceRole,
+                    ],
+                    [PermissionConst.WORKSPACE_CHAT_USER_EDIT.getWorkspacePermission],
+                    [],
+                    'OR',
+                  )
+                "
+              >
+                <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')"
+                v-hasPermission="
+                  new ComplexPermission(
+                    [
+                      RoleConst.ADMIN,
+                      RoleConst.WORKSPACE_MANAGE.getWorkspaceRole,
+                      RoleConst.USER.getWorkspaceRole,
+                    ],
+                    [PermissionConst.WORKSPACE_CHAT_USER_DELETE.getWorkspacePermission],
+                    [],
+                    'OR',
+                  )
+                "
+              >
+                <el-icon>
+                  <Delete />
+                </el-icon>
+              </el-button>
+            </span>
+          </template>
+        </el-table-column>
+      </app-table>
+    </el-card>
+
+    <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>
+import { onMounted, ref, reactive } from 'vue'
+import UserDrawer from './component/UserDrawer.vue'
+import UserPwdDialog from './component/UserPwdDialog.vue'
+import SetUserGroupsDialog from './component/SetUserGroupsDialog.vue'
+import SyncUsersDialog from './component/SyncUsersDialog.vue'
+import userManageApi from '@/api/system/chat-user'
+import { datetimeFormat } from '@/utils/time'
+import { MsgSuccess, MsgConfirm } from '@/utils/message'
+import { t } from '@/locales'
+import type { ChatUserItem } from '@/api/type/systemChatUser'
+import SystemGroupApi from '@/api/system/user-group'
+import type { ListItem } from '@/api/type/common'
+import { PermissionConst, RoleConst } from '@/utils/permission/data'
+import { ComplexPermission } from '@/utils/permission/type'
+
+const search_type = ref('username')
+const search_form = ref<{
+  username: string
+  nick_name?: string
+}>({
+  username: '',
+  nick_name: '',
+})
+const search_type_change = () => {
+  search_form.value = { username: '', nick_name: '' }
+}
+
+const loading = ref(false)
+
+const multipleSelection = ref<any[]>([])
+
+function handleSelectionChange(val: any[]) {
+  multipleSelection.value = val
+}
+
+const paginationConfig = reactive({
+  current_page: 1,
+  page_size: 20,
+  total: 0,
+})
+
+const userTableData = ref<ChatUserItem[]>([])
+
+function getList() {
+  const params = {
+    [search_type.value]: search_form.value[search_type.value as keyof typeof search_form.value],
+  }
+  return userManageApi.getUserManage(paginationConfig, params, loading).then((res) => {
+    userTableData.value = res.data.records
+    paginationConfig.total = res.data.total
+  })
+}
+
+const orderBy = ref<string>('')
+
+function handleSortChange({ prop, order }: { prop: string; order: string }) {
+  orderBy.value = order === 'ascending' ? prop : `-${prop}`
+  getList()
+}
+
+function handleSizeChange() {
+  paginationConfig.current_page = 1
+  getList()
+}
+
+function changeState(row: ChatUserItem) {
+  const obj = {
+    ...row,
+    is_active: !row.is_active,
+  }
+  const str = obj.is_active ? t('common.status.enableSuccess') : t('common.status.disableSuccess')
+  userManageApi
+    .putUserManage(row.id, obj, loading)
+    .then(() => {
+      getList()
+      MsgSuccess(str)
+      return true
+    })
+    .catch(() => {
+      return false
+    })
+}
+
+const title = ref('')
+const UserDrawerRef = ref()
+
+function editUser(row: ChatUserItem) {
+  title.value = t('views.userManage.editUser')
+  UserDrawerRef.value.open(row)
+}
+
+function createUser() {
+  title.value = t('views.userManage.createUser')
+  UserDrawerRef.value.open()
+}
+
+function deleteUserManage(row: ChatUserItem) {
+  MsgConfirm(`${t('views.userManage.delete.confirmTitle')}${row.nick_name} ?`, '', {
+    confirmButtonText: t('common.confirm'),
+    confirmButtonClass: 'danger',
+  })
+    .then(() => {
+      loading.value = true
+      userManageApi.delUserManage(row.id, loading).then(() => {
+        MsgSuccess(t('common.deleteSuccess'))
+        getList()
+      })
+    })
+    .catch(() => {})
+}
+
+const UserPwdDialogRef = ref()
+
+function editPwdUser(row: ChatUserItem) {
+  UserPwdDialogRef.value.open(row)
+}
+
+function refresh() {
+  getList()
+}
+
+onMounted(() => {
+  getChatGroupList()
+  getList()
+})
+
+const optionLoading = ref(false)
+const chatGroupList = ref<ListItem[]>([])
+
+async function getChatGroupList() {
+  try {
+    const res = await SystemGroupApi.getUserGroup(optionLoading)
+    chatGroupList.value = res.data
+  } catch (e) {
+    console.error(e)
+  }
+}
+
+function handleBatchDelete() {
+  MsgConfirm(t('views.chatUser.batchDeleteUser', { count: multipleSelection.value.length }), '', {
+    confirmButtonText: t('common.confirm'),
+    confirmButtonClass: 'danger',
+  })
+    .then(() => {
+      userManageApi
+        .batchDelete(
+          multipleSelection.value.map((item) => item.id),
+          loading,
+        )
+        .then(async () => {
+          MsgSuccess(t('common.deleteSuccess'))
+          await getList()
+        })
+    })
+    .catch(() => {})
+}
+
+const setUserGroupsRef = ref<InstanceType<typeof SetUserGroupsDialog>>()
+
+function setUserGroups() {
+  setUserGroupsRef.value?.open(multipleSelection.value.map((item) => item.id))
+}
+
+const syncUsersDialogRef = ref<InstanceType<typeof SyncUsersDialog>>()
+
+function syncUsers() {
+  syncUsersDialogRef.value?.open()
+}
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/ui/src/views/system-chat-user/group/index.vue b/ui/src/views/system-chat-user/group/index.vue
index c621b153..c56ea067 100644
--- a/ui/src/views/system-chat-user/group/index.vue
+++ b/ui/src/views/system-chat-user/group/index.vue
@@ -1,39 +1,61 @@
 <template>
-  <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">
+  <div class="group p-24">
+    <el-breadcrumb separator-icon="ArrowRight" class="mb-16">
+      <el-breadcrumb-item>{{ t('views.chatUser.title') }}</el-breadcrumb-item>
+      <el-breadcrumb-item>
+        <h5 class="ml-4 color-text-primary">{{ t('views.chatUser.group.title') }}</h5>
+      </el-breadcrumb-item>
+    </el-breadcrumb>
+    <el-card style="--el-card-padding: 0">
+      <div class="flex">
+        <div class="user-left border-r p-16">
+          <div class="p-8 pb-0 mb-12">
+            <div class="flex-between mb-16">
               <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()"
-                  v-hasPermission="new ComplexPermission([RoleConst.ADMIN, RoleConst.WORKSPACE_MANAGE.getWorkspaceRole],
-                  [PermissionConst.WORKSPACE_USER_GROUP_CREATE.getWorkspacePermission], [], 'OR')">
-                  <AppIcon iconName="app-copy"></AppIcon>
+              <el-tooltip
+                effect="dark"
+                :content="`${$t('common.create')}${$t('views.chatUser.group.title')}`"
+                placement="top"
+              >
+                <el-button
+                  type="primary"
+                  text
+                  @click="createOrUpdate()"
+                  v-hasPermission="
+                    new ComplexPermission(
+                      [RoleConst.ADMIN, RoleConst.WORKSPACE_MANAGE.getWorkspaceRole],
+                      [PermissionConst.WORKSPACE_USER_GROUP_CREATE.getWorkspacePermission],
+                      [],
+                      'OR',
+                    )
+                  "
+                >
+                  <el-icon :size="18"><Plus /></el-icon>
                 </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-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"
+                @mouseenter="mouseenter"
+                @mouseleave="mouseId = ''"
+              >
+                <template #default="{ row }">
+                  <div class="flex-between">
+                    <span class="ellipsis">{{ row.name }}</span>
+                    <div @click.stop v-show="mouseId === row.id">
                       <el-dropdown :teleported="false">
                         <el-button text>
                           <el-icon class="color-secondary">
@@ -42,115 +64,182 @@
                         </el-button>
                         <template #dropdown>
                           <el-dropdown-menu style="min-width: 80px">
-                            <el-dropdown-item @click.stop="createOrUpdate(row)" class="p-8"
-                              v-if="hasPermission(new ComplexPermission(
-                              [RoleConst.ADMIN,RoleConst.WORKSPACE_MANAGE.getWorkspaceRole],
-                              [PermissionConst.WORKSPACE_USER_GROUP_EDIT.getWorkspacePermission], [], 'OR'), 'OR')">
-                              <AppIcon iconName="app-copy"></AppIcon>
-                              {{
-                                $t('common.rename')
-                              }}
-                            </el-dropdown-item>
-                            <el-dropdown-item @click.stop="deleteGroup(row)" class="border-t p-8"
-                              v-if="row.id !== 'default'&&
-                              hasPermission(new ComplexPermission(
-                              [RoleConst.ADMIN,RoleConst.WORKSPACE_MANAGE.getWorkspaceRole],
-                              [PermissionConst.WORKSPACE_USER_GROUP_DELETE.getWorkspacePermission], [], 'OR'), 'OR')"
+                            <el-dropdown-item
+                              @click.stop="createOrUpdate(row)"
+                              class="p-8"
+                              v-if="
+                                hasPermission(
+                                  new ComplexPermission(
+                                    [RoleConst.ADMIN, RoleConst.WORKSPACE_MANAGE.getWorkspaceRole],
+                                    [
+                                      PermissionConst.WORKSPACE_USER_GROUP_EDIT
+                                        .getWorkspacePermission,
+                                    ],
+                                    [],
+                                    'OR',
+                                  ),
+                                  'OR',
+                                )
+                              "
                             >
-                              <AppIcon iconName="app-copy"></AppIcon>
-                              {{
-                                $t('common.delete')
-                              }}
+                               <el-icon><EditPen /></el-icon>
+                              {{ $t('common.rename') }}
+                            </el-dropdown-item>
+                            <el-dropdown-item
+                              @click.stop="deleteGroup(row)"
+                              class="border-t p-8"
+                              v-if="
+                                row.id !== 'default' &&
+                                hasPermission(
+                                  new ComplexPermission(
+                                    [RoleConst.ADMIN, RoleConst.WORKSPACE_MANAGE.getWorkspaceRole],
+                                    [
+                                      PermissionConst.WORKSPACE_USER_GROUP_DELETE
+                                        .getWorkspacePermission,
+                                    ],
+                                    [],
+                                    'OR',
+                                  ),
+                                  'OR',
+                                )
+                              "
+                            >
+                              <el-icon><Delete /></el-icon>
+                              {{ $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="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-workspace" 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()"
-                  v-hasPermission="new ComplexPermission([RoleConst.ADMIN, RoleConst.WORKSPACE_MANAGE.getWorkspaceRole],
-                  [PermissionConst.WORKSPACE_USER_GROUP_ADD_MEMBER.getWorkspacePermission], [], 'OR')"
-                >
-                  {{ t('views.role.member.add') }}
-                </el-button>
-                <el-button :disabled="multipleSelection.length === 0" @click="handleDeleteUser()"
-                  v-hasPermission="new ComplexPermission([RoleConst.ADMIN, RoleConst.WORKSPACE_MANAGE.getWorkspaceRole],
-                  [PermissionConst.WORKSPACE_USER_GROUP_DELETE.getWorkspacePermission], [], 'OR')"
-                >
-                  {{ $t('common.remove') }}
-                </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
-                  }}
+                  </div>
                 </template>
-              </el-table-column>
-              <el-table-column :label="$t('common.operation')" width="100" fixed="right">
-                <template #default="{ row }">
-                  <el-tooltip effect="dark" :content="`${$t('common.remove')}`" placement="top">
-                    <el-button type="primary" text @click.stop="handleDeleteUser(row)"
-                      v-hasPermission="new ComplexPermission([RoleConst.ADMIN, RoleConst.WORKSPACE_MANAGE.getWorkspaceRole],
-                      [PermissionConst.WORKSPACE_USER_GROUP_REMOVE_MEMBER.getWorkspacePermission], [], 'OR')"
-                    >
-                      <el-icon>
-                        <EditPen />
-                      </el-icon>
-                    </el-button>
-                  </el-tooltip>
+                <template #empty>
+                  <span></span>
                 </template>
-              </el-table-column>
-            </app-table>
+              </common-list>
+            </el-scrollbar>
           </div>
         </div>
-      </el-card>
-    </ContentContainer>
+
+        <!-- 右边 -->
+        <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-workspace"
+              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()"
+                v-hasPermission="
+                  new ComplexPermission(
+                    [RoleConst.ADMIN, RoleConst.WORKSPACE_MANAGE.getWorkspaceRole],
+                    [PermissionConst.WORKSPACE_USER_GROUP_ADD_MEMBER.getWorkspacePermission],
+                    [],
+                    'OR',
+                  )
+                "
+              >
+                {{ t('views.role.member.add') }}
+              </el-button>
+              <el-button
+                :disabled="multipleSelection.length === 0"
+                @click="handleDeleteUser()"
+                v-hasPermission="
+                  new ComplexPermission(
+                    [RoleConst.ADMIN, RoleConst.WORKSPACE_MANAGE.getWorkspaceRole],
+                    [PermissionConst.WORKSPACE_USER_GROUP_DELETE.getWorkspacePermission],
+                    [],
+                    'OR',
+                  )
+                "
+              >
+                {{ $t('common.remove') }}
+              </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('common.remove')}`" placement="top">
+                  <el-button
+                    type="primary"
+                    text
+                    @click.stop="handleDeleteUser(row)"
+                    v-hasPermission="
+                      new ComplexPermission(
+                        [RoleConst.ADMIN, RoleConst.WORKSPACE_MANAGE.getWorkspaceRole],
+                        [PermissionConst.WORKSPACE_USER_GROUP_REMOVE_MEMBER.getWorkspacePermission],
+                        [],
+                        'OR',
+                      )
+                    "
+                  >
+                    <el-icon>
+                      <EditPen />
+                    </el-icon>
+                  </el-button>
+                </el-tooltip>
+              </template>
+            </el-table-column>
+          </app-table>
+        </div>
+      </div>
+    </el-card>
+
     <CreateOrUpdateGroupDialog ref="createOrUpdateGroupDialogRef" @refresh="refresh" />
     <CreateGroupUserDialog ref="createGroupUserDialogRef" @refresh="getList" />
   </div>
@@ -161,7 +250,6 @@ 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 iconMap from '@/components/app-icon/icons/common'
 import CreateOrUpdateGroupDialog from './component/CreateOrUpdateGroupDialog.vue'
 import CreateGroupUserDialog from './component/CreateGroupUserDialog.vue'
 import type { ListItem } from '@/api/type/common'
@@ -176,8 +264,6 @@ const list = ref<ListItem[]>([])
 const filterList = ref<ListItem[]>([]) // 搜索过滤后列表
 const current = ref<ListItem>()
 
-const rightOutlined = iconMap['right-outlined'].iconReader()
-
 async function getUserGroupList() {
   try {
     const res = await SystemGroupApi.getUserGroup(loading)
@@ -197,9 +283,7 @@ function filter(list: ListItem[], filterText: string) {
   if (!filterText.length) {
     return list
   }
-  return list.filter((v: ListItem) =>
-    v.name.toLowerCase().includes(filterText.toLowerCase()),
-  )
+  return list.filter((v: ListItem) => v.name.toLowerCase().includes(filterText.toLowerCase()))
 }
 
 watch(filterText, (val: string) => {
@@ -213,7 +297,7 @@ function clickUserGroup(item: ListItem) {
 const createOrUpdateGroupDialogRef = ref<InstanceType<typeof CreateOrUpdateGroupDialog>>()
 
 function createOrUpdate(item?: ListItem) {
-  createOrUpdateGroupDialogRef.value?.open(item);
+  createOrUpdateGroupDialogRef.value?.open(item)
 }
 
 function deleteGroup(item: ListItem) {
@@ -232,12 +316,11 @@ function deleteGroup(item: ListItem) {
         current.value = item.id === current.value?.id ? list.value[0] : current.value
       })
     })
-    .catch(() => {
-    })
+    .catch(() => {})
 }
 
 async function refresh(group?: ListItem) {
-  await getUserGroupList();
+  await getUserGroupList()
   // 创建角色后选中新建的角色
   current.value = group ? group : current.value
 }
@@ -259,7 +342,12 @@ const tableData = ref<ChatUserGroupUserItem[]>([])
 async function getList() {
   if (!current.value?.id) return
   try {
-    const res = await SystemGroupApi.getUserListByGroup(current.value?.id, paginationConfig, searchForm.value.username, rightLoading)
+    const res = await SystemGroupApi.getUserListByGroup(
+      current.value?.id,
+      paginationConfig,
+      searchForm.value.username,
+      rightLoading,
+    )
     tableData.value = res.data.records
     paginationConfig.total = res.data.total
   } catch (error) {
@@ -272,14 +360,17 @@ function handleSizeChange() {
   getList()
 }
 
-watch(() => current.value?.id, () => {
-  getList()
-})
+watch(
+  () => current.value?.id,
+  () => {
+    getList()
+  },
+)
 
 const createGroupUserDialogRef = ref<InstanceType<typeof CreateGroupUserDialog>>()
 
 function createUser() {
-  createGroupUserDialogRef.value?.open(current.value?.id as string);
+  createGroupUserDialogRef.value?.open(current.value?.id as string)
 }
 
 const multipleSelection = ref<any[]>([])
@@ -290,7 +381,9 @@ function handleSelectionChange(val: any[]) {
 
 function handleDeleteUser(item?: ChatUserGroupUserItem) {
   MsgConfirm(
-    item ? `${t('views.workspace.member.delete.confirmTitle')}${item.nick_name} ?` : t('views.chatUser.group.batchDeleteMember', { count: multipleSelection.value.length }),
+    item
+      ? `${t('views.workspace.member.delete.confirmTitle')}${item.nick_name} ?`
+      : t('views.chatUser.group.batchDeleteMember', { count: multipleSelection.value.length }),
     '',
     {
       confirmButtonText: t('common.confirm'),
@@ -298,66 +391,36 @@ function handleDeleteUser(item?: ChatUserGroupUserItem) {
     },
   )
     .then(() => {
-      SystemGroupApi.postRemoveMember(current.value?.id as string, { group_relation_ids: item ? [item.user_group_relation_id] : multipleSelection.value.map(item => (item.user_group_relation_id)) }, loading).then(async () => {
+      SystemGroupApi.postRemoveMember(
+        current.value?.id as string,
+        {
+          group_relation_ids: item
+            ? [item.user_group_relation_id]
+            : multipleSelection.value.map((item) => item.user_group_relation_id),
+        },
+        loading,
+      ).then(async () => {
         MsgSuccess(t('common.removeSuccess'))
         await getList()
       })
     })
-    .catch(() => {
-    })
+    .catch(() => {})
+}
+const mouseId = ref('')
+
+function mouseenter(row: any) {
+  mouseId.value = row.id
 }
 </script>
 
 <style lang="scss" scoped>
-.shared-header {
-  color: #646a73;
-  font-weight: 400;
-  font-size: 14px;
-  line-height: 22px;
-  display: flex;
-  align-items: center;
-
-  :deep(.el-icon i) {
-    height: 12px;
-  }
-
-  .sub-title {
-    color: #1f2329;
-  }
-}
-
-.content-container {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-
-  :deep(.content-container__main) {
-    flex: 1;
-    overflow: hidden;
-  }
-}
-
-:deep(.user-card) {
-  height: 100%;
-  overflow: hidden;
-}
-
 .user-left {
   box-sizing: border-box;
   width: var(--setting-left-width);
   min-width: var(--setting-left-width);
 
-  .user-left_title {
-    padding: 8px;
-  }
-
   .list-height-left {
     height: calc(100vh - 271px);
-
-    :deep(.common-list li) {
-      padding-right: 4px;
-      padding-left: 8px;
-    }
   }
 }
 
diff --git a/ui/src/views/system-chat-user/user-manage/index.vue b/ui/src/views/system-chat-user/user-manage/index.vue
deleted file mode 100644
index 5d5ebe3b..00000000
--- a/ui/src/views/system-chat-user/user-manage/index.vue
+++ /dev/null
@@ -1,388 +0,0 @@
-<template>
-  <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>
-      </template>
-      <el-card class="h-full">
-        <div class="flex-between mb-16">
-          <div>
-            <el-button type="primary" @click="createUser()"
-                       v-hasPermission="new ComplexPermission([RoleConst.ADMIN, RoleConst.WORKSPACE_MANAGE.getWorkspaceRole, RoleConst.USER.getWorkspaceRole,],
-              [PermissionConst.WORKSPACE_CHAT_USER_CREATE.getWorkspacePermission],[],'OR')"
-            >
-              {{ t('views.userManage.createUser') }}
-            </el-button>
-            <el-button @click="syncUsers">
-              {{ $t('views.chatUser.syncUsers') }}
-            </el-button>
-            <el-button :disabled="multipleSelection.length === 0" @click="setUserGroups"
-                       v-hasPermission="new ComplexPermission([RoleConst.ADMIN, RoleConst.WORKSPACE_MANAGE.getWorkspaceRole, RoleConst.USER.getWorkspaceRole,],
-                [PermissionConst.WORKSPACE_CHAT_USER_GROUP.getWorkspacePermission],[],'OR')"
-            >
-              {{ $t('views.chatUser.setUserGroups') }}
-            </el-button>
-            <el-button :disabled="multipleSelection.length === 0" @click="handleBatchDelete"
-                       v-hasPermission="new ComplexPermission([RoleConst.ADMIN, RoleConst.WORKSPACE_MANAGE.getWorkspaceRole, RoleConst.USER.getWorkspaceRole,],
-                [PermissionConst.WORKSPACE_CHAT_USER_DELETE.getWorkspacePermission],[],'OR')"
-            >
-              {{ $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="username"/>
-              <el-option :label="$t('views.userManage.userForm.nick_name.label')"
-                         value="nick_name"/>
-            </el-select>
-            <el-input v-if="search_type === 'username'" v-model="search_form.username"
-                      @change="getList"
-                      style="width: 220px"
-                      clearable/>
-            <el-input v-if="search_type === 'nick_name'" v-model="search_form.nick_name"
-                      @change="getList"
-                      style="width: 220px" clearable/>
-          </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') }}
-                </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')"
-                           min-width="100">
-            <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.localCreate')
-                  : 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>
-              <el-divider direction="vertical"/>
-              <span class="mr-8">
-                <el-button type="primary" text @click.stop="editUser(row)"
-                           :title="$t('common.edit')"
-                           v-hasPermission="new ComplexPermission([RoleConst.ADMIN, RoleConst.WORKSPACE_MANAGE.getWorkspaceRole, RoleConst.USER.getWorkspaceRole,],
-                    [PermissionConst.WORKSPACE_CHAT_USER_EDIT.getWorkspacePermission],[],'OR')"
-                >
-                  <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')"
-                           v-hasPermission="new ComplexPermission([RoleConst.ADMIN, RoleConst.WORKSPACE_MANAGE.getWorkspaceRole, RoleConst.USER.getWorkspaceRole,],
-                [PermissionConst.WORKSPACE_CHAT_USER_EDIT.getWorkspacePermission],[],'OR')"
-                >
-                  <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')"
-                           v-hasPermission="new ComplexPermission([RoleConst.ADMIN, RoleConst.WORKSPACE_MANAGE.getWorkspaceRole, RoleConst.USER.getWorkspaceRole,],
-                [PermissionConst.WORKSPACE_CHAT_USER_DELETE.getWorkspacePermission],[],'OR')"
-                >
-                  <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"/>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import {onMounted, ref, reactive} from 'vue'
-import UserDrawer from './component/UserDrawer.vue'
-import UserPwdDialog from './component/UserPwdDialog.vue'
-import SetUserGroupsDialog from './component/SetUserGroupsDialog.vue'
-import SyncUsersDialog from './component/SyncUsersDialog.vue'
-import userManageApi from '@/api/system/chat-user'
-import {datetimeFormat} from '@/utils/time'
-import {MsgSuccess, MsgConfirm} from '@/utils/message'
-import {t} from '@/locales'
-import iconMap from '@/components/app-icon/icons/common'
-import type {ChatUserItem} from '@/api/type/systemChatUser'
-import SystemGroupApi from '@/api/system/user-group'
-import type {ListItem} from '@/api/type/common'
-import {PermissionConst, RoleConst} from '@/utils/permission/data'
-import {ComplexPermission} from '@/utils/permission/type'
-
-const rightOutlined = iconMap['right-outlined'].iconReader()
-
-const search_type = ref('name')
-const search_form = ref<{
-  username: string,
-  nick_name?: string,
-}>({
-  username: '',
-  nick_name: '',
-})
-const search_type_change = () => {
-  search_form.value = {username: '', nick_name: ''}
-}
-
-const loading = ref(false)
-
-const multipleSelection = ref<any[]>([])
-
-function handleSelectionChange(val: any[]) {
-  multipleSelection.value = val
-}
-
-const paginationConfig = reactive({
-  current_page: 1,
-  page_size: 20,
-  total: 0,
-})
-
-const userTableData = ref<ChatUserItem[]>([])
-
-function getList() {
-  const params = {
-    [search_type.value]: search_form.value[search_type.value as keyof typeof search_form.value],
-  }
-  return userManageApi
-    .getUserManage(paginationConfig, params, loading)
-    .then((res) => {
-      userTableData.value = res.data.records
-      paginationConfig.total = res.data.total
-    })
-}
-
-const orderBy = ref<string>('')
-
-function handleSortChange({prop, order}: { prop: string; order: string }) {
-  orderBy.value = order === 'ascending' ? prop : `-${prop}`
-  getList()
-}
-
-function handleSizeChange() {
-  paginationConfig.current_page = 1
-  getList()
-}
-
-function changeState(row: ChatUserItem) {
-  const obj = {
-    ...row,
-    is_active: !row.is_active,
-  }
-  const str = obj.is_active ? t('common.status.enableSuccess') : t('common.status.disableSuccess')
-  userManageApi
-    .putUserManage(row.id, obj, loading)
-    .then(() => {
-      getList()
-      MsgSuccess(str)
-      return true
-    })
-    .catch(() => {
-      return false
-    })
-}
-
-const title = ref('')
-const UserDrawerRef = ref()
-
-function editUser(row: ChatUserItem) {
-  title.value = t('views.userManage.editUser')
-  UserDrawerRef.value.open(row)
-}
-
-function createUser() {
-  title.value = t('views.userManage.createUser')
-  UserDrawerRef.value.open()
-}
-
-function deleteUserManage(row: ChatUserItem) {
-  MsgConfirm(
-    `${t('views.userManage.delete.confirmTitle')}${row.nick_name} ?`,
-    '',
-    {
-      confirmButtonText: t('common.confirm'),
-      confirmButtonClass: 'danger',
-    },
-  )
-    .then(() => {
-      loading.value = true
-      userManageApi.delUserManage(row.id, loading).then(() => {
-        MsgSuccess(t('common.deleteSuccess'))
-        getList()
-      })
-    })
-    .catch(() => {
-    })
-}
-
-const UserPwdDialogRef = ref()
-
-function editPwdUser(row: ChatUserItem) {
-  UserPwdDialogRef.value.open(row)
-}
-
-function refresh() {
-  getList()
-}
-
-onMounted(() => {
-  getChatGroupList()
-  getList()
-})
-
-const optionLoading = ref(false)
-const chatGroupList = ref<ListItem[]>([])
-
-async function getChatGroupList() {
-  try {
-    const res = await SystemGroupApi.getUserGroup(optionLoading)
-    chatGroupList.value = res.data
-  } catch (e) {
-    console.error(e)
-  }
-}
-
-function handleBatchDelete() {
-  MsgConfirm(
-    t('views.chatUser.batchDeleteUser', {count: multipleSelection.value.length}),
-    '',
-    {
-      confirmButtonText: t('common.confirm'),
-      confirmButtonClass: 'danger',
-    },
-  )
-    .then(() => {
-      userManageApi.batchDelete(multipleSelection.value.map(item => (item.id)), loading).then(async () => {
-        MsgSuccess(t('common.deleteSuccess'))
-        await getList()
-      })
-    })
-    .catch(() => {
-    })
-}
-
-const setUserGroupsRef = ref<InstanceType<typeof SetUserGroupsDialog>>()
-
-function setUserGroups() {
-  setUserGroupsRef.value?.open(multipleSelection.value.map(item => (item.id)))
-}
-
-const syncUsersDialogRef = ref<InstanceType<typeof SyncUsersDialog>>()
-
-function syncUsers() {
-  syncUsersDialogRef.value?.open()
-}
-</script>
-
-<style lang="scss" scoped>
-.shared-header {
-  color: #646a73;
-  font-weight: 400;
-  font-size: 14px;
-  line-height: 22px;
-  display: flex;
-  align-items: center;
-
-  :deep(.el-icon i) {
-    height: 12px;
-  }
-
-  .sub-title {
-    color: #1f2329;
-  }
-}
-
-.content-container {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-
-  :deep(.content-container__main) {
-    flex: 1;
-  }
-}
-</style>
diff --git a/ui/src/views/system/role/index.vue b/ui/src/views/system/role/index.vue
index 92e0aadf..e0f6df65 100644
--- a/ui/src/views/system/role/index.vue
+++ b/ui/src/views/system/role/index.vue
@@ -2,9 +2,9 @@
   <div class="role-manage p-16-24">
     <h2 class="mb-16">{{ $t('views.role.title') }}</h2>
     <el-card style="--el-card-padding: 0">
-      <div class="flex h-full">
-        <div class="role-left border-r">
-          <div class="p-24 pb-0">
+      <div class="flex main-calc-height">
+        <div class="role-left border-r p-16">
+          <div class="p-8 pb-0 mb-12">
             <el-input
               v-model="filterText"
               :placeholder="$t('common.search')"
@@ -14,115 +14,113 @@
           </div>
           <div class="list-height-left">
             <el-scrollbar v-loading="loading">
-              <div class="p-16">
-                <div class="color-secondary lighter ml-8 mb-8">
-                  <span>{{ $t('views.role.internalRole') }}</span>
-                </div>
-                <common-list
-                  :data="filterInternalRole"
-                  @click="clickRole"
-                  :default-active="currentRole?.id"
-                  @mouseenter="mouseenter"
-                  @mouseleave="mouseId = ''"
-                >
-                  <template #default="{ row }">
-                    <div class="flex-between">
-                      <span class="mr-8">{{ row.role_name }}</span>
-                      <div @click.stop v-show="mouseId === row.id">
-                        <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="createOrUpdateRole(row)" class="p-8">
-                                <el-icon><EditPen /></el-icon>
-                                {{ $t('common.rename') }}
-                              </el-dropdown-item>
-                              <el-dropdown-item @click.stop="deleteRole(row)" class="border-t p-8">
-                                <el-icon><Delete /></el-icon>
-                                {{ $t('common.delete') }}
-                              </el-dropdown-item>
-                            </el-dropdown-menu>
-                          </template>
-                        </el-dropdown>
-                      </div>
-                    </div>
-                  </template>
-                  <template #empty>
-                    <span></span>
-                  </template>
-                </common-list>
-
-                <div class="ml-8 border-t flex-between mb-8" style="padding-top: 12px">
-                  <span class="color-secondary lighter">{{ $t('views.role.customRole') }}</span>
-                  <el-tooltip
-                    effect="dark"
-                    :content="`${$t('common.create')}${$t('views.role.customRole')}`"
-                    placement="top"
-                  >
-                    <el-button
-                      type="primary"
-                      text
-                      @click="createOrUpdateRole()"
-                      v-hasPermission="
-                        new ComplexPermission(
-                          [RoleConst.ADMIN, RoleConst.WORKSPACE_MANAGE.getWorkspaceRole],
-                          [PermissionConst.ROLE_CREATE.getWorkspacePermission],
-                          [],
-                          'OR',
-                        )
-                      "
-                    >
-                      <el-icon :size="18"><Plus /></el-icon>
-                    </el-button>
-                  </el-tooltip>
-                </div>
-                <common-list
-                  :data="filterCustomRole"
-                  @click="clickRole"
-                  :default-active="currentRole?.id"
-                  @mouseenter="mouseenter"
-                  @mouseleave="mouseId = ''"
-                >
-                  <template #default="{ row }">
-                    <div class="flex-between">
-                      <span>
-                        {{ row.role_name }}
-                        <span class="color-input-placeholder ml-4"
-                          >({{ roleTypeMap[row.type as RoleTypeEnum] }})</span
-                        >
-                      </span>
-                      <div @click.stop v-show="mouseId === row.id">
-                        <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="createOrUpdateRole(row)" class="p-8">
-                                <el-icon><EditPen /></el-icon>
-                                {{ $t('common.rename') }}
-                              </el-dropdown-item>
-                              <el-dropdown-item @click.stop="deleteRole(row)" class="border-t p-8">
-                                <el-icon><Delete /></el-icon>
-                                {{ $t('common.delete') }}
-                              </el-dropdown-item>
-                            </el-dropdown-menu>
-                          </template>
-                        </el-dropdown>
-                      </div>
-                    </div>
-                  </template>
-                  <template #empty>
-                    <span></span>
-                  </template>
-                </common-list>
+              <div class="color-secondary lighter ml-8 mb-8">
+                <span>{{ $t('views.role.internalRole') }}</span>
               </div>
+              <common-list
+                :data="filterInternalRole"
+                @click="clickRole"
+                :default-active="currentRole?.id"
+                @mouseenter="mouseenter"
+                @mouseleave="mouseId = ''"
+              >
+                <template #default="{ row }">
+                  <div class="flex-between">
+                    <span class="mr-8">{{ row.role_name }}</span>
+                    <div @click.stop v-show="mouseId === row.id">
+                      <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="createOrUpdateRole(row)" class="p-8">
+                              <el-icon><EditPen /></el-icon>
+                              {{ $t('common.rename') }}
+                            </el-dropdown-item>
+                            <el-dropdown-item @click.stop="deleteRole(row)" class="border-t p-8">
+                              <el-icon><Delete /></el-icon>
+                              {{ $t('common.delete') }}
+                            </el-dropdown-item>
+                          </el-dropdown-menu>
+                        </template>
+                      </el-dropdown>
+                    </div>
+                  </div>
+                </template>
+                <template #empty>
+                  <span></span>
+                </template>
+              </common-list>
+
+              <div class="ml-8 border-t flex-between mb-8" style="padding-top: 12px">
+                <span class="color-secondary lighter">{{ $t('views.role.customRole') }}</span>
+                <el-tooltip
+                  effect="dark"
+                  :content="`${$t('common.create')}${$t('views.role.customRole')}`"
+                  placement="top"
+                >
+                  <el-button
+                    type="primary"
+                    text
+                    @click="createOrUpdateRole()"
+                    v-hasPermission="
+                      new ComplexPermission(
+                        [RoleConst.ADMIN, RoleConst.WORKSPACE_MANAGE.getWorkspaceRole],
+                        [PermissionConst.ROLE_CREATE.getWorkspacePermission],
+                        [],
+                        'OR',
+                      )
+                    "
+                  >
+                    <el-icon :size="18"><Plus /></el-icon>
+                  </el-button>
+                </el-tooltip>
+              </div>
+              <common-list
+                :data="filterCustomRole"
+                @click="clickRole"
+                :default-active="currentRole?.id"
+                @mouseenter="mouseenter"
+                @mouseleave="mouseId = ''"
+              >
+                <template #default="{ row }">
+                  <div class="flex-between">
+                    <span>
+                      {{ row.role_name }}
+                      <span class="color-input-placeholder ml-4"
+                        >({{ roleTypeMap[row.type as RoleTypeEnum] }})</span
+                      >
+                    </span>
+                    <div @click.stop v-show="mouseId === row.id">
+                      <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="createOrUpdateRole(row)" class="p-8">
+                              <el-icon><EditPen /></el-icon>
+                              {{ $t('common.rename') }}
+                            </el-dropdown-item>
+                            <el-dropdown-item @click.stop="deleteRole(row)" class="border-t p-8">
+                              <el-icon><Delete /></el-icon>
+                              {{ $t('common.delete') }}
+                            </el-dropdown-item>
+                          </el-dropdown-menu>
+                        </template>
+                      </el-dropdown>
+                    </div>
+                  </div>
+                </template>
+                <template #empty>
+                  <span></span>
+                </template>
+              </common-list>
             </el-scrollbar>
           </div>
         </div>
@@ -242,12 +240,14 @@ function deleteRole(item: RoleItem) {
     },
   )
     .then(() => {
-      loadPermissionApi('role').deleteRole(item.id, loading).then(async () => {
-        MsgSuccess(t('common.deleteSuccess'))
-        await getRole()
-        currentRole.value =
-          item.id === currentRole.value?.id ? internalRoleList.value[0] : currentRole.value
-      })
+      loadPermissionApi('role')
+        .deleteRole(item.id, loading)
+        .then(async () => {
+          MsgSuccess(t('common.deleteSuccess'))
+          await getRole()
+          currentRole.value =
+            item.id === currentRole.value?.id ? internalRoleList.value[0] : currentRole.value
+        })
     })
     .catch(() => {})
 }
diff --git a/ui/src/views/system/workspace/index.vue b/ui/src/views/system/workspace/index.vue
index 01c189ff..345f4ed5 100644
--- a/ui/src/views/system/workspace/index.vue
+++ b/ui/src/views/system/workspace/index.vue
@@ -2,9 +2,9 @@
   <div class="workspace-manage p-16-24">
     <h2 class="mb-16">{{ $t('views.workspace.title') }}</h2>
     <el-card style="--el-card-padding: 0">
-      <div class="flex h-full">
-        <div class="workspace-left border-r">
-          <div class="p-24 pb-0">
+      <div class="flex main-calc-height">
+        <div class="workspace-left border-r p-16">
+          <div class="p-8 pb-0 mt-8 mb-12">
             <div class="flex-between mb-12">
               <h4 class="medium">{{ $t('views.workspace.list') }}</h4>
               <el-tooltip
@@ -31,64 +31,62 @@
           </div>
           <div class="list-height-left">
             <el-scrollbar v-loading="loading">
-              <div class="p-16">
-                <common-list
-                  :data="filterList"
-                  @click="clickWorkspace"
-                  :default-active="currentWorkspace?.id"
-                  @mouseenter="mouseenter"
-                  @mouseleave="mouseId = ''"
-                >
-                  <template #default="{ row }">
-                    <div class="flex-between">
-                      <span class="ellipsis">{{ row.name }}</span>
-                      <div @click.stop v-show="mouseId === row.id">
-                        <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="createOrUpdateWorkspace(row)"
-                                class="p-8"
-                                v-if="
-                                  hasPermission(
-                                    [RoleConst.ADMIN, PermissionConst.WORKSPACE_EDIT],
-                                    'OR',
-                                  )
-                                "
-                              >
-                                <el-icon><EditPen /></el-icon>
-                                {{ $t('common.rename') }}
-                              </el-dropdown-item>
-                              <el-dropdown-item
-                                @click.stop="deleteWorkspace(row)"
-                                class="border-t p-8"
-                                v-if="
-                                  row.id !== 'default' &&
-                                  hasPermission(
-                                    [RoleConst.ADMIN, PermissionConst.WORKSPACE_DELETE],
-                                    'OR',
-                                  )
-                                "
-                              >
-                                <el-icon><Delete /></el-icon>
-                                {{ $t('common.delete') }}
-                              </el-dropdown-item>
-                            </el-dropdown-menu>
-                          </template>
-                        </el-dropdown>
-                      </div>
+              <common-list
+                :data="filterList"
+                @click="clickWorkspace"
+                :default-active="currentWorkspace?.id"
+                @mouseenter="mouseenter"
+                @mouseleave="mouseId = ''"
+              >
+                <template #default="{ row }">
+                  <div class="flex-between">
+                    <span class="ellipsis">{{ row.name }}</span>
+                    <div @click.stop v-show="mouseId === row.id">
+                      <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="createOrUpdateWorkspace(row)"
+                              class="p-8"
+                              v-if="
+                                hasPermission(
+                                  [RoleConst.ADMIN, PermissionConst.WORKSPACE_EDIT],
+                                  'OR',
+                                )
+                              "
+                            >
+                              <el-icon><EditPen /></el-icon>
+                              {{ $t('common.rename') }}
+                            </el-dropdown-item>
+                            <el-dropdown-item
+                              @click.stop="deleteWorkspace(row)"
+                              class="border-t p-8"
+                              v-if="
+                                row.id !== 'default' &&
+                                hasPermission(
+                                  [RoleConst.ADMIN, PermissionConst.WORKSPACE_DELETE],
+                                  'OR',
+                                )
+                              "
+                            >
+                              <el-icon><Delete /></el-icon>
+                              {{ $t('common.delete') }}
+                            </el-dropdown-item>
+                          </el-dropdown-menu>
+                        </template>
+                      </el-dropdown>
                     </div>
-                  </template>
-                  <template #empty>
-                    <span></span>
-                  </template>
-                </common-list>
-              </div>
+                  </div>
+                </template>
+                <template #empty>
+                  <span></span>
+                </template>
+              </common-list>
             </el-scrollbar>
           </div>
         </div>