diff --git a/frontend/src/api/http/Axios.ts b/frontend/src/api/http/Axios.ts
index 12eb18d323..4c1ac83742 100644
--- a/frontend/src/api/http/Axios.ts
+++ b/frontend/src/api/http/Axios.ts
@@ -81,7 +81,7 @@ export class MSAxios {
   /**
    * @description:  文件上传
    */
-  uploadFile<T = any>(config: AxiosRequestConfig, params: UploadFileParams) {
+  uploadFile<T = any>(config: AxiosRequestConfig, params: UploadFileParams): Promise<T> {
     const formData = new window.FormData();
     const fileName = params.fileList.length === 1 ? 'file' : 'files';
 
@@ -92,15 +92,44 @@ export class MSAxios {
       const requestData = JSON.stringify(params.request);
       formData.append('request', requestData);
     }
-    return this.axiosInstance.request<T>({
-      ...config,
-      method: 'POST',
-      data: formData,
-      headers: {
-        'Content-type': ContentTypeEnum.FORM_DATA,
-        // @ts-ignore
-        'ignoreCancelToken': true, // 文件上传请求不需要添加到pending中
-      },
+    return new Promise((resolve, reject) => {
+      this.axiosInstance
+        .request<any, AxiosResponse<Result>>({
+          ...config,
+          method: 'POST',
+          data: formData,
+          headers: {
+            'Content-type': ContentTypeEnum.FORM_DATA,
+            // @ts-ignore
+            'ignoreCancelToken': true, // 文件上传请求不需要添加到pending中
+          },
+        })
+        .then((res: AxiosResponse<Result>) => {
+          const transform = this.getTransform();
+          const { requestOptions } = this.options;
+          const opt = { ...requestOptions };
+
+          const { transformRequestHook } = transform || {};
+          // 请求成功后的处理
+          if (transformRequestHook && isFunction(transformRequestHook)) {
+            try {
+              const ret = transformRequestHook(res, opt);
+              resolve(ret);
+            } catch (err) {
+              reject(err || new Error('request error!'));
+            }
+            return;
+          }
+          resolve(res as unknown as Promise<T>);
+        })
+        .catch((e: Error | AxiosError) => {
+          if (axios.isAxiosError(e)) {
+            // 在这可重写axios错误消息
+            // eslint-disable-next-line no-console
+            console.log(e);
+          }
+          reject(e);
+        });
     });
   }
 
diff --git a/frontend/src/api/modules/setting/user.ts b/frontend/src/api/modules/setting/user.ts
index 8552fb3ecb..0e2e3385e2 100644
--- a/frontend/src/api/modules/setting/user.ts
+++ b/frontend/src/api/modules/setting/user.ts
@@ -1,16 +1,56 @@
 import MSR from '@/api/http/index';
-import { GetUserListUrl, CreateUserUrl, UpdateUserUrl } from '@/api/requrls/setting/user';
-import type { UserListItem, CreateUserParams } from '@/models/setting/user';
+import {
+  GetUserListUrl,
+  CreateUserUrl,
+  UpdateUserUrl,
+  DeleteUserUrl,
+  ImportUserUrl,
+  EnableUserUrl,
+  GetSystemRoleUrl,
+} from '@/api/requrls/setting/user';
+import type {
+  UserListItem,
+  CreateUserParams,
+  UpdateUserInfoParams,
+  UpdateUserStausParams,
+  DeleteUserParams,
+  ImportUserParams,
+  SystemRole,
+  ImportResult,
+} from '@/models/setting/user';
 import type { TableQueryParams } from '@/models/common';
 
+// 获取用户列表
 export function getUserList(data: TableQueryParams) {
   return MSR.post<UserListItem[]>({ url: GetUserListUrl, data });
 }
 
+// 批量创建用户
 export function batchCreateUser(data: CreateUserParams) {
   return MSR.post({ url: CreateUserUrl, data });
 }
 
-export function updateUserInfo(data: UserListItem) {
+// 更新用户信息
+export function updateUserInfo(data: UpdateUserInfoParams) {
   return MSR.post({ url: UpdateUserUrl, data });
 }
+
+// 更新用户启用/禁用状态
+export function toggleUserStatus(data: UpdateUserStausParams) {
+  return MSR.post({ url: EnableUserUrl, data });
+}
+
+// 删除用户
+export function deleteUserInfo(data: DeleteUserParams) {
+  return MSR.post({ url: DeleteUserUrl, data });
+}
+
+// 导入用户
+export function importUserInfo(data: ImportUserParams) {
+  return MSR.uploadFile<ImportResult>({ url: ImportUserUrl }, data);
+}
+
+// 获取系统用户组
+export function getSystemRoles() {
+  return MSR.get<SystemRole>({ url: GetSystemRoleUrl });
+}
diff --git a/frontend/src/api/requrls/setting/user.ts b/frontend/src/api/requrls/setting/user.ts
index 7cf61a7c20..1bd8e0649c 100644
--- a/frontend/src/api/requrls/setting/user.ts
+++ b/frontend/src/api/requrls/setting/user.ts
@@ -1,3 +1,7 @@
-export const GetUserListUrl = '/user/page';
-export const CreateUserUrl = '/user/add';
-export const UpdateUserUrl = '/user/update';
+export const GetUserListUrl = '/system/user/page';
+export const CreateUserUrl = '/system/user/add';
+export const UpdateUserUrl = '/system/user/update';
+export const DeleteUserUrl = '/system/user/delete';
+export const ImportUserUrl = '/system/user/import';
+export const EnableUserUrl = '/system/user/update/enable';
+export const GetSystemRoleUrl = '/system/user/get/global/system/role';
diff --git a/frontend/src/components/pure/ms-upload/index.vue b/frontend/src/components/pure/ms-upload/index.vue
index feb4ad16f1..734a744fd3 100644
--- a/frontend/src/components/pure/ms-upload/index.vue
+++ b/frontend/src/components/pure/ms-upload/index.vue
@@ -4,6 +4,7 @@
     v-model:file-list="fileList"
     :accept="UploadAcceptEnum[props.accept]"
     :multiple="props.multiple"
+    :disabled="props.disabled"
     @before-upload="beforeUpload"
   >
     <template #upload-button>
@@ -56,6 +57,7 @@
     multiple: boolean;
     imagePreview: boolean;
     showFileList: boolean;
+    disabled: boolean;
     iconType: string;
     maxSize: number; // 文件大小限制，单位 MB
     [key: string]: any;
@@ -71,6 +73,13 @@
 
   const fileList = ref<FileItem[]>(props.fileList);
 
+  watch(
+    () => props.fileList,
+    (val) => {
+      fileList.value = val;
+    }
+  );
+
   watch(
     () => fileList.value,
     (val) => {
diff --git a/frontend/src/mock/system/user.ts b/frontend/src/mock/system/user.ts
index 5f5e660540..b270c33fe6 100644
--- a/frontend/src/mock/system/user.ts
+++ b/frontend/src/mock/system/user.ts
@@ -1,253 +1,254 @@
-import { mock } from '@/utils/setup-mock';
-import { RequestEnum } from '@/enums/httpEnum';
+// import { mock } from '@/utils/setup-mock';
+// import { RequestEnum } from '@/enums/httpEnum';
 
-const getUserList = () => {
-  return [
-    {
-      id: '103423',
-      name: '大家的',
-      email: 'dehihu@kds.sd',
-      enable: true,
-      createTime: 1686905750716,
-      updateTime: 0,
-      lastOrganizationId: 'string',
-      phone: '18473647583',
-      source: 'string',
-      lastProjectId: 'string',
-      createUser: 'string',
-      updateUser: 'string',
-      organizationList: [
-        {
-          id: 'string',
-          num: 0,
-          name: '组织 1',
-          description: 'blabla',
-          createTime: 0,
-          updateTime: 0,
-          createUser: 'string',
-          updateUser: 'string',
-          deleted: true,
-          deleteUser: 'string',
-          deleteTime: 0,
-          enable: true,
-        },
-        {
-          id: 'string',
-          num: 0,
-          name: '组织 2',
-          description: 'blabla',
-          createTime: 0,
-          updateTime: 0,
-          createUser: 'string',
-          updateUser: 'string',
-          deleted: true,
-          deleteUser: 'string',
-          deleteTime: 0,
-          enable: true,
-        },
-        {
-          id: 'string',
-          num: 0,
-          name: '组织 3',
-          description: 'blabla',
-          createTime: 0,
-          updateTime: 0,
-          createUser: 'string',
-          updateUser: 'string',
-          deleted: true,
-          deleteUser: 'string',
-          deleteTime: 0,
-          enable: true,
-        },
-        {
-          id: 'string',
-          num: 0,
-          name: '组织 4',
-          description: 'blabla',
-          createTime: 0,
-          updateTime: 0,
-          createUser: 'string',
-          updateUser: 'string',
-          deleted: true,
-          deleteUser: 'string',
-          deleteTime: 0,
-          enable: true,
-        },
-      ],
-      userRoleList: [
-        {
-          id: 'string',
-          name: '角色 1',
-          description: 'sdadasd',
-          internal: true,
-          type: 'string',
-          createTime: 0,
-          updateTime: 0,
-          createUser: 'string',
-          scopeId: 'string',
-          pos: 0,
-        },
-        {
-          id: 'string',
-          name: '角色 2',
-          description: 'sdadasd',
-          internal: true,
-          type: 'string',
-          createTime: 0,
-          updateTime: 0,
-          createUser: 'string',
-          scopeId: 'string',
-          pos: 0,
-        },
-        {
-          id: 'string',
-          name: '角色 3',
-          description: 'sdadasd',
-          internal: true,
-          type: 'string',
-          createTime: 0,
-          updateTime: 0,
-          createUser: 'string',
-          scopeId: 'string',
-          pos: 0,
-        },
-        {
-          id: 'string',
-          name: '角色 4',
-          description: 'sdadasd',
-          internal: true,
-          type: 'string',
-          createTime: 0,
-          updateTime: 0,
-          createUser: 'string',
-          scopeId: 'string',
-          pos: 0,
-        },
-      ],
-    },
-    {
-      id: '103233',
-      name: '发热发热',
-      email: 'dehihu@kds.sd',
-      enable: false,
-      createTime: 1686905750716,
-      updateTime: 0,
-      lastOrganizationId: 'string',
-      phone: '18473647583',
-      source: 'string',
-      lastProjectId: 'string',
-      createUser: 'string',
-      updateUser: 'string',
-      organizationList: [
-        {
-          id: 'string',
-          num: 0,
-          name: '组织 1',
-          description: 'blabla',
-          createTime: 0,
-          updateTime: 0,
-          createUser: 'string',
-          updateUser: 'string',
-          deleted: true,
-          deleteUser: 'string',
-          deleteTime: 0,
-          enable: true,
-        },
-        {
-          id: 'string',
-          num: 0,
-          name: '组织 2',
-          description: 'blabla',
-          createTime: 0,
-          updateTime: 0,
-          createUser: 'string',
-          updateUser: 'string',
-          deleted: true,
-          deleteUser: 'string',
-          deleteTime: 0,
-          enable: true,
-        },
-        {
-          id: 'string',
-          num: 0,
-          name: '组织 3',
-          description: 'blabla',
-          createTime: 0,
-          updateTime: 0,
-          createUser: 'string',
-          updateUser: 'string',
-          deleted: true,
-          deleteUser: 'string',
-          deleteTime: 0,
-          enable: true,
-        },
-        {
-          id: 'string',
-          num: 0,
-          name: '组织 4',
-          description: 'blabla',
-          createTime: 0,
-          updateTime: 0,
-          createUser: 'string',
-          updateUser: 'string',
-          deleted: true,
-          deleteUser: 'string',
-          deleteTime: 0,
-          enable: true,
-        },
-      ],
-      userRoleList: [
-        {
-          id: 'string',
-          name: '角色 1',
-          description: 'sdadasd',
-          internal: true,
-          type: 'string',
-          createTime: 0,
-          updateTime: 0,
-          createUser: 'string',
-          scopeId: 'string',
-          pos: 0,
-        },
-        {
-          id: 'string',
-          name: '角色 2',
-          description: 'sdadasd',
-          internal: true,
-          type: 'string',
-          createTime: 0,
-          updateTime: 0,
-          createUser: 'string',
-          scopeId: 'string',
-          pos: 0,
-        },
-        {
-          id: 'string',
-          name: '角色 3',
-          description: 'sdadasd',
-          internal: true,
-          type: 'string',
-          createTime: 0,
-          updateTime: 0,
-          createUser: 'string',
-          scopeId: 'string',
-          pos: 0,
-        },
-        {
-          id: 'string',
-          name: '角色 4',
-          description: 'sdadasd',
-          internal: true,
-          type: 'string',
-          createTime: 0,
-          updateTime: 0,
-          createUser: 'string',
-          scopeId: 'string',
-          pos: 0,
-        },
-      ],
-    },
-  ];
-};
+// const getUserList = () => {
+//   return [
+//     {
+//       id: '103423',
+//       name: '大家的',
+//       email: 'dehihu@kds.sd',
+//       enable: true,
+//       createTime: 1686905750716,
+//       updateTime: 0,
+//       lastOrganizationId: 'string',
+//       phone: '18473647583',
+//       source: 'string',
+//       lastProjectId: 'string',
+//       createUser: 'string',
+//       updateUser: 'string',
+//       organizationList: [
+//         {
+//           id: 'string',
+//           num: 0,
+//           name: '组织 1',
+//           description: 'blabla',
+//           createTime: 0,
+//           updateTime: 0,
+//           createUser: 'string',
+//           updateUser: 'string',
+//           deleted: true,
+//           deleteUser: 'string',
+//           deleteTime: 0,
+//           enable: true,
+//         },
+//         {
+//           id: 'string',
+//           num: 0,
+//           name: '组织 2',
+//           description: 'blabla',
+//           createTime: 0,
+//           updateTime: 0,
+//           createUser: 'string',
+//           updateUser: 'string',
+//           deleted: true,
+//           deleteUser: 'string',
+//           deleteTime: 0,
+//           enable: true,
+//         },
+//         {
+//           id: 'string',
+//           num: 0,
+//           name: '组织 3',
+//           description: 'blabla',
+//           createTime: 0,
+//           updateTime: 0,
+//           createUser: 'string',
+//           updateUser: 'string',
+//           deleted: true,
+//           deleteUser: 'string',
+//           deleteTime: 0,
+//           enable: true,
+//         },
+//         {
+//           id: 'string',
+//           num: 0,
+//           name: '组织 4',
+//           description: 'blabla',
+//           createTime: 0,
+//           updateTime: 0,
+//           createUser: 'string',
+//           updateUser: 'string',
+//           deleted: true,
+//           deleteUser: 'string',
+//           deleteTime: 0,
+//           enable: true,
+//         },
+//       ],
+//       userRoleList: [
+//         {
+//           id: 'string',
+//           name: '角色 1',
+//           description: 'sdadasd',
+//           internal: true,
+//           type: 'string',
+//           createTime: 0,
+//           updateTime: 0,
+//           createUser: 'string',
+//           scopeId: 'string',
+//           pos: 0,
+//         },
+//         {
+//           id: 'string',
+//           name: '角色 2',
+//           description: 'sdadasd',
+//           internal: true,
+//           type: 'string',
+//           createTime: 0,
+//           updateTime: 0,
+//           createUser: 'string',
+//           scopeId: 'string',
+//           pos: 0,
+//         },
+//         {
+//           id: 'string',
+//           name: '角色 3',
+//           description: 'sdadasd',
+//           internal: true,
+//           type: 'string',
+//           createTime: 0,
+//           updateTime: 0,
+//           createUser: 'string',
+//           scopeId: 'string',
+//           pos: 0,
+//         },
+//         {
+//           id: 'string',
+//           name: '角色 4',
+//           description: 'sdadasd',
+//           internal: true,
+//           type: 'string',
+//           createTime: 0,
+//           updateTime: 0,
+//           createUser: 'string',
+//           scopeId: 'string',
+//           pos: 0,
+//         },
+//       ],
+//     },
+//     {
+//       id: '103233',
+//       name: '发热发热',
+//       email: 'dehihu@kds.sd',
+//       enable: false,
+//       createTime: 1686905750716,
+//       updateTime: 0,
+//       lastOrganizationId: 'string',
+//       phone: '18473647583',
+//       source: 'string',
+//       lastProjectId: 'string',
+//       createUser: 'string',
+//       updateUser: 'string',
+//       organizationList: [
+//         {
+//           id: 'string',
+//           num: 0,
+//           name: '组织 1',
+//           description: 'blabla',
+//           createTime: 0,
+//           updateTime: 0,
+//           createUser: 'string',
+//           updateUser: 'string',
+//           deleted: true,
+//           deleteUser: 'string',
+//           deleteTime: 0,
+//           enable: true,
+//         },
+//         {
+//           id: 'string',
+//           num: 0,
+//           name: '组织 2',
+//           description: 'blabla',
+//           createTime: 0,
+//           updateTime: 0,
+//           createUser: 'string',
+//           updateUser: 'string',
+//           deleted: true,
+//           deleteUser: 'string',
+//           deleteTime: 0,
+//           enable: true,
+//         },
+//         {
+//           id: 'string',
+//           num: 0,
+//           name: '组织 3',
+//           description: 'blabla',
+//           createTime: 0,
+//           updateTime: 0,
+//           createUser: 'string',
+//           updateUser: 'string',
+//           deleted: true,
+//           deleteUser: 'string',
+//           deleteTime: 0,
+//           enable: true,
+//         },
+//         {
+//           id: 'string',
+//           num: 0,
+//           name: '组织 4',
+//           description: 'blabla',
+//           createTime: 0,
+//           updateTime: 0,
+//           createUser: 'string',
+//           updateUser: 'string',
+//           deleted: true,
+//           deleteUser: 'string',
+//           deleteTime: 0,
+//           enable: true,
+//         },
+//       ],
+//       userRoleList: [
+//         {
+//           id: 'string',
+//           name: '角色 1',
+//           description: 'sdadasd',
+//           internal: true,
+//           type: 'string',
+//           createTime: 0,
+//           updateTime: 0,
+//           createUser: 'string',
+//           scopeId: 'string',
+//           pos: 0,
+//         },
+//         {
+//           id: 'string',
+//           name: '角色 2',
+//           description: 'sdadasd',
+//           internal: true,
+//           type: 'string',
+//           createTime: 0,
+//           updateTime: 0,
+//           createUser: 'string',
+//           scopeId: 'string',
+//           pos: 0,
+//         },
+//         {
+//           id: 'string',
+//           name: '角色 3',
+//           description: 'sdadasd',
+//           internal: true,
+//           type: 'string',
+//           createTime: 0,
+//           updateTime: 0,
+//           createUser: 'string',
+//           scopeId: 'string',
+//           pos: 0,
+//         },
+//         {
+//           id: 'string',
+//           name: '角色 4',
+//           description: 'sdadasd',
+//           internal: true,
+//           type: 'string',
+//           createTime: 0,
+//           updateTime: 0,
+//           createUser: 'string',
+//           scopeId: 'string',
+//           pos: 0,
+//         },
+//       ],
+//     },
+//   ];
+// };
 
-mock(RequestEnum.POST, '/user/page', getUserList(), 200, true);
+// mock(RequestEnum.POST, '/user/page', getUserList(), 200, true);
+export default {};
diff --git a/frontend/src/models/setting/user.ts b/frontend/src/models/setting/user.ts
index 839250eee1..a20fb0f4f1 100644
--- a/frontend/src/models/setting/user.ts
+++ b/frontend/src/models/setting/user.ts
@@ -1,16 +1,16 @@
+// 用户所属用户组模型
 export interface UserRoleListItem {
   id: string;
   name: string;
   description: string;
-  internal: boolean;
-  type: string;
+  internal: boolean; // 是否内置用户组
+  type: string; // 所属类型 SYSTEM ORGANIZATION PROJECT
   createTime: number;
   updateTime: number;
   createUser: string;
-  scopeId: string;
-  pos: number;
+  scopeId: string; // 应用范围
 }
-
+// 用户所属组织模型
 export interface OrganizationListItem {
   id: string;
   num: number;
@@ -20,12 +20,13 @@ export interface OrganizationListItem {
   updateTime: number;
   createUser: string;
   updateUser: string;
-  deleted: boolean;
+  deleted: boolean; // 是否删除
   deleteUser: string;
   deleteTime: number;
-  enable: boolean;
+  enable: boolean; // 是否启用
 }
 
+// 用户模型
 export interface UserListItem {
   id: string;
   name: string;
@@ -34,15 +35,15 @@ export interface UserListItem {
   enable: boolean;
   createTime: number;
   updateTime: number;
-  language: string;
-  lastOrganizationId: string;
+  language: string; // 语言
+  lastOrganizationId: string; // 当前组织ID
   phone: string;
-  source: string;
-  lastProjectId: string;
+  source: string; // 来源：LOCAL OIDC CAS OAUTH2
+  lastProjectId: string; // 当前项目ID
   createUser: string;
   updateUser: string;
-  organizationList: OrganizationListItem[];
-  userRoleList: UserRoleListItem[];
+  organizationList: OrganizationListItem[]; // 用户所属组织
+  userRoleList: UserRoleListItem[]; // 用户所属用户组
 }
 
 export interface Filter {
@@ -54,13 +55,44 @@ export interface Sort {
 }
 
 // 创建用户模型
-export interface CreateUserInfo {
+export interface SimpleUserInfo {
+  id?: string;
   name: string;
   email: string;
   phone?: string;
 }
 
-export interface CreateUserParams {
-  userInfoList: CreateUserInfo[];
+export interface UpdateUserInfoParams extends SimpleUserInfo {
+  id: string;
   userRoleIdList: string[];
 }
+
+export interface CreateUserParams {
+  userInfoList: SimpleUserInfo[];
+  userRoleIdList: string[];
+}
+export interface UpdateUserStausParams {
+  userIdList: string[];
+  enable: boolean;
+}
+
+export interface ImportUserParams {
+  fileList: (File | undefined)[];
+}
+
+export interface DeleteUserParams {
+  userIdList: string[];
+}
+
+export interface SystemRole {
+  id: string;
+  name: string;
+  selected: boolean;
+  closeable: boolean;
+}
+
+export interface ImportResult {
+  importCount: number;
+  successCount: number;
+  errorMessages: Record<string, any>;
+}
diff --git a/frontend/src/views/setting/system/user/index.vue b/frontend/src/views/setting/system/user/index.vue
index 48928cf769..739fc5ce0f 100644
--- a/frontend/src/views/setting/system/user/index.vue
+++ b/frontend/src/views/setting/system/user/index.vue
@@ -2,18 +2,20 @@
   <div>
     <div class="mb-4 flex items-center justify-between">
       <div>
-        <a-button class="mr-3" type="primary" @click="showUserModal('create')">{{
-          t('system.user.createUser')
-        }}</a-button>
-        <a-button class="mr-3" type="outline" @click="showEmailInviteModal">{{
-          t('system.user.emailInvite')
-        }}</a-button>
+        <a-button class="mr-3" type="primary" @click="showUserModal('create')">
+          {{ t('system.user.createUser') }}
+        </a-button>
+        <a-button class="mr-3" type="outline" @click="showEmailInviteModal">
+          {{ t('system.user.emailInvite') }}
+        </a-button>
         <a-button class="mr-3" type="outline" @click="showImportModal">{{ t('system.user.importUser') }}</a-button>
       </div>
       <a-input-search
+        v-model:model-value="keyword"
         :placeholder="t('system.user.searchUser')"
         class="w-[230px]"
         @search="searchUser"
+        @press-enter="searchUser"
       ></a-input-search>
     </div>
     <ms-base-table
@@ -24,34 +26,42 @@
       @batch-action="handelTableBatch"
     >
       <template #organization="{ record }">
-        <a-tag
-          v-for="org of record.organizationList.slice(0, 2)"
-          :key="org.id"
-          class="mr-[4px] bg-transparent"
-          bordered
-        >
-          {{ org.name }}
-        </a-tag>
-        <a-tag v-show="record.organizationList.length > 2" class="mr-[4px] bg-transparent" bordered>
-          +{{ record.organizationList.length - 2 }}
-        </a-tag>
+        <a-tooltip :content="record.organizationList.filter((e: any) => e).map((e: any) => e.name).join(',')">
+          <div>
+            <a-tag
+              v-for="org of record.organizationList.filter((e: any) => e).slice(0, 2)"
+              :key="org.id"
+              class="mr-[4px] bg-transparent"
+              bordered
+            >
+              {{ org.name }}
+            </a-tag>
+            <a-tag v-show="record.organizationList.length > 2" class="mr-[4px] bg-transparent" bordered>
+              +{{ record.organizationList.length - 2 }}
+            </a-tag>
+          </div>
+        </a-tooltip>
       </template>
       <template #userRole="{ record }">
-        <a-tag
-          v-for="org of record.userRoleList.slice(0, 2)"
-          :key="org.id"
-          class="mr-[4px] border-[rgb(var(--primary-5))] bg-transparent !text-[rgb(var(--primary-5))]"
-          bordered
-        >
-          {{ org.name }}
-        </a-tag>
-        <a-tag
-          v-show="record.organizationList.length > 2"
-          class="mr-[4px] border-[rgb(var(--primary-5))] bg-transparent !text-[rgb(var(--primary-5))]"
-          bordered
-        >
-          +{{ record.organizationList.length - 2 }}
-        </a-tag>
+        <a-tooltip :content="record.userRoleList.map((e: any) => e.name).join(',')">
+          <div>
+            <a-tag
+              v-for="org of record.userRoleList.slice(0, 2)"
+              :key="org.id"
+              class="mr-[4px] border-[rgb(var(--primary-5))] bg-transparent !text-[rgb(var(--primary-5))]"
+              bordered
+            >
+              {{ org.name }}
+            </a-tag>
+            <a-tag
+              v-show="record.organizationList.length > 2"
+              class="mr-[4px] border-[rgb(var(--primary-5))] bg-transparent !text-[rgb(var(--primary-5))]"
+              bordered
+            >
+              +{{ record.organizationList.length - 2 }}
+            </a-tag>
+          </div>
+        </a-tooltip>
       </template>
       <template #enable="{ record }">
         <div v-if="record.enable" class="flex items-center">
@@ -79,88 +89,18 @@
       :title="userFormMode === 'create' ? t('system.user.createUserModalTitle') : t('system.user.editUserModalTitle')"
       title-align="start"
       class="ms-modal-form ms-modal-medium"
-      :loading="loading"
+      :mask-closable="false"
+      @close="handleUserModalClose"
     >
       <a-form ref="userFormRef" class="rounded-[4px]" :model="userForm" layout="vertical">
-        <div class="mb-[16px] overflow-y-auto rounded-[4px] bg-[var(--color-fill-1)] p-[12px]">
-          <a-scrollbar class="max-h-[30vh] overflow-y-auto">
-            <div class="flex flex-wrap items-start justify-between gap-[8px]">
-              <template v-for="(item, i) of userForm.list" :key="`user-item-${item}`">
-                <div class="flex w-full items-start justify-between gap-[8px]">
-                  <a-form-item
-                    :field="`username${item}`"
-                    :class="i > 0 ? 'hidden-item' : 'mb-0 flex-1'"
-                    :rules="[
-                      { required: true, message: t('system.user.createUserNameNotNull') },
-                      { validator: checkUerName },
-                    ]"
-                    :label="i === 0 ? t('system.user.createUserName') : ''"
-                  >
-                    <a-input
-                      v-model="userForm[`username${item}`]"
-                      class="mb-[4px] flex-1"
-                      :placeholder="t('system.user.createUserNamePlaceholder')"
-                      allow-clear
-                    />
-                  </a-form-item>
-                  <a-form-item
-                    :field="`email${item}`"
-                    :class="i > 0 ? 'hidden-item' : 'mb-0 flex-1'"
-                    :rules="[
-                      { required: true, message: t('system.user.createUserEmailNotNull') },
-                      { validator: (value, callback) => checkUerEmail(value, callback, i) },
-                    ]"
-                    :label="i === 0 ? t('system.user.createUserEmail') : ''"
-                  >
-                    <a-input
-                      v-model="userForm[`email${item}`]"
-                      class="mb-[4px] flex-1"
-                      :placeholder="t('system.user.createUserEmailPlaceholder')"
-                      allow-clear
-                    />
-                  </a-form-item>
-                  <a-form-item
-                    :field="`phone${item}`"
-                    :class="i > 0 ? 'hidden-item' : 'mb-0 flex-1'"
-                    :rules="[{ validator: checkUerPhone }]"
-                    :label="i === 0 ? t('system.user.createUserPhone') : ''"
-                  >
-                    <a-input
-                      v-model="userForm[`phone${item}`]"
-                      class="mb-[4px] flex-1"
-                      :placeholder="t('system.user.createUserPhonePlaceholder')"
-                      :max-length="11"
-                      allow-clear
-                    />
-                  </a-form-item>
-                  <div
-                    v-show="userForm.list.length > 1"
-                    :class="[
-                      'flex',
-                      'h-full',
-                      'w-[32px]',
-                      'cursor-pointer',
-                      'items-center',
-                      'justify-center',
-                      i === 0 ? 'mt-[6%]' : 'mt-[5px]',
-                    ]"
-                    @click="removeUserField(item, i)"
-                  >
-                    <icon-minus-circle />
-                  </div>
-                </div>
-              </template>
-            </div>
-          </a-scrollbar>
-          <div v-if="userFormMode === 'create'" class="w-full">
-            <a-button class="px-0" type="text" @click="addUserField">
-              <template #icon>
-                <icon-plus class="text-[14px]" />
-              </template>
-              {{ t('system.user.addUser') }}
-            </a-button>
-          </div>
-        </div>
+        <MsBatchForm
+          ref="batchFormRef"
+          :models="batchFormModels"
+          :form-mode="userFormMode"
+          add-text="system.user.addUser"
+          :default-vals="userForm.list"
+          max-height="250px"
+        ></MsBatchForm>
         <a-form-item class="mb-0" field="userGroup" :label="t('system.user.createUserUserGroup')">
           <a-select
             v-model="userForm.userGroup"
@@ -168,18 +108,30 @@
             :placeholder="t('system.user.createUserUserGroupPlaceholder')"
             allow-clear
           >
-            <a-option v-for="item of userGroupOptions" :key="item.value">{{ item.label }}</a-option>
+            <a-option
+              v-for="item of userGroupOptions"
+              :key="item.id"
+              :tag-props="{ closable: item.closeable }"
+              :value="item.id"
+              :disabled="item.selected"
+            >
+              {{ item.name }}
+            </a-option>
           </a-select>
         </a-form-item>
       </a-form>
       <template #footer>
-        <a-button type="secondary" @click="cancelCreate">{{ t('system.user.editUserModalCancelCreate') }}</a-button>
-        <a-button v-if="userFormMode === 'create'" type="secondary" @click="saveAndContinue">{{
-          t('system.user.editUserModalSaveAndContinue')
-        }}</a-button>
-        <a-button type="primary" @click="beforeCreateUser">{{
-          t(userFormMode === 'create' ? 'system.user.editUserModalCreateUser' : 'system.user.editUserModalEditUser')
-        }}</a-button>
+        <a-button type="secondary" :disabled="loading" @click="cancelCreate">
+          {{ t('system.user.editUserModalCancelCreate') }}
+        </a-button>
+        <a-button v-if="userFormMode === 'create'" type="secondary" :loading="loading" @click="saveAndContinue">
+          {{ t('system.user.editUserModalSaveAndContinue') }}
+        </a-button>
+        <a-button type="primary" :loading="loading" @click="beforeCreateUser">
+          {{
+            t(userFormMode === 'create' ? 'system.user.editUserModalCreateUser' : 'system.user.editUserModalEditUser')
+          }}
+        </a-button>
       </template>
     </a-modal>
     <a-modal
@@ -187,22 +139,25 @@
       :title="t('system.user.importModalTitle')"
       title-align="start"
       class="ms-modal-upload"
-      :loading="importLoading"
     >
       <a-alert class="mb-[16px]" closable>
         {{ t('system.user.importModalTip') }}
-        <a-button type="text" size="small">{{ t('system.user.importDownload') }} </a-button>
+        <a-button type="text" size="small" @click="downLoadUserTemplate">
+          {{ t('system.user.importDownload') }}
+        </a-button>
       </a-alert>
       <MsUpload
-        action="/"
+        v-model:file-list="userImportFile"
         accept="excel"
-        main-text="system.user.importModalDragtext"
-        sub-text="system.user.importModalFileTip"
         :show-file-list="false"
+        :auto-upload="false"
+        :disabled="importLoading"
       ></MsUpload>
       <template #footer>
-        <a-button type="secondary" @click="cancelImport">{{ t('system.user.importModalCancel') }}</a-button>
-        <a-button type="primary" @click="importUser">
+        <a-button type="secondary" :disabled="importLoading" @click="cancelImport">
+          {{ t('system.user.importModalCancel') }}
+        </a-button>
+        <a-button type="primary" :loading="importLoading" :disabled="userImportFile.length === 0" @click="importUser">
           {{ t('system.user.importModalConfirm') }}
         </a-button>
       </template>
@@ -221,20 +176,20 @@
       </template>
       <div v-if="importResult === 'success'" class="flex flex-col items-center justify-center">
         <icon-check-circle-fill class="text-[32px] text-[rgb(var(--success-6))]" />
-        <div class="mb-[8px] mt-[16px] text-[16px] font-medium text-[var(--color-text-000)]">{{
-          t('system.user.importSuccess')
-        }}</div>
-        <div class="sub-text">{{
-          t('system.user.importResultSuccessContent', { successNum: importSuccessCount })
-        }}</div>
+        <div class="mb-[8px] mt-[16px] text-[16px] font-medium text-[var(--color-text-000)]">
+          {{ t('system.user.importSuccess') }}
+        </div>
+        <div class="sub-text">
+          {{ t('system.user.importResultSuccessContent', { successNum: importSuccessCount }) }}
+        </div>
       </div>
       <template v-else>
-        <div>{{
-          t('system.user.importResultContent', { successNum: importSuccessCount, failNum: importFailCount })
-        }}</div>
-        <div
-          >{{ t('system.user.importResultContentSubStart')
-          }}<a-link
+        <div>
+          {{ t('system.user.importResultContent', { successNum: importSuccessCount, failNum: importFailCount }) }}
+        </div>
+        <div>
+          {{ t('system.user.importResultContentSubStart') }}
+          <a-link
             class="text-[rgb(var(--primary-5))]"
             :href="importErrorFileUrl"
             :download="`${t('system.user.importErrorFile')}.pdf`"
@@ -243,9 +198,9 @@
         >
       </template>
       <template #footer>
-        <a-button type="text" class="!text-[var(--color-text-1)]" @click="cancelImport">{{
-          t('system.user.importResultReturn')
-        }}</a-button>
+        <a-button type="text" class="!text-[var(--color-text-1)]" @click="cancelImport">
+          {{ t('system.user.importResultReturn') }}
+        </a-button>
         <a-button type="text" @click="continueImport">
           {{ t('system.user.importResultContinue') }}
         </a-button>
@@ -262,7 +217,7 @@
 </template>
 
 <script setup lang="ts">
-  import { onMounted, ref } from 'vue';
+  import { onBeforeMount, Ref, ref } from 'vue';
   import { Message } from '@arco-design/web-vue';
   import { cloneDeep } from 'lodash-es';
   import useModal from '@/hooks/useModal';
@@ -271,16 +226,28 @@
   import useTable from '@/components/pure/ms-table/useTable';
   import MsButton from '@/components/pure/ms-button/index.vue';
   import MsTableMoreAction from '@/components/pure/ms-table-more-action/index.vue';
-  import { getUserList, batchCreateUser } from '@/api/modules/setting/user';
+  import MsBatchForm from '@/components/bussiness/ms-batch-form/index.vue';
+  import {
+    getUserList,
+    batchCreateUser,
+    updateUserInfo,
+    toggleUserStatus,
+    deleteUserInfo,
+    importUserInfo,
+    getSystemRoles,
+  } from '@/api/modules/setting/user';
   import { validateEmail, validatePhone } from '@/utils/validate';
   import batchModal from './components/batchModal.vue';
   import inviteModal from './components/inviteModal.vue';
   import MsUpload from '@/components/pure/ms-upload/index.vue';
+  import { TableKeyEnum } from '@/enums/tableEnum';
+  import { useTableStore } from '@/store';
 
-  import type { FormInstance, ValidatedError } from '@arco-design/web-vue';
-  import type { MsTableColumn } from '@/components/pure/ms-table/type';
+  import type { FormInstance, ValidatedError, FileItem } from '@arco-design/web-vue';
+  import type { MsTableColumn, BatchActionParams } from '@/components/pure/ms-table/type';
   import type { ActionsItem } from '@/components/pure/ms-table-more-action/types';
-  import type { UserListItem } from '@/models/setting/user';
+  import type { SimpleUserInfo, SystemRole, UserListItem } from '@/models/setting/user';
+  import type { FormItemModel, MsBatchFormInstance } from '@/components/bussiness/ms-batch-form/types';
 
   const { t } = useI18n();
 
@@ -289,39 +256,48 @@
       title: 'system.user.tableColunmEmail',
       dataIndex: 'email',
       width: 200,
+      showInTable: true,
     },
     {
       title: 'system.user.tableColunmName',
       dataIndex: 'name',
+      showInTable: true,
     },
     {
       title: 'system.user.tableColunmPhone',
       dataIndex: 'phone',
+      showInTable: true,
     },
     {
       title: 'system.user.tableColunmOrg',
       slotName: 'organization',
       dataIndex: 'organizationList',
+      showInTable: true,
     },
     {
       title: 'system.user.tableColunmUsergroup',
       slotName: 'userRole',
       dataIndex: 'userRoleList',
+      showInTable: true,
     },
     {
       title: 'system.user.tableColunmStatus',
       slotName: 'enable',
       dataIndex: 'enable',
+      showInTable: true,
     },
     {
       title: 'system.user.tableColunmActions',
       slotName: 'action',
       fixed: 'right',
       width: 90,
+      showInTable: true,
     },
   ];
-
+  const tableStore = useTableStore();
+  tableStore.initColumn(TableKeyEnum.SYSTEM_USER, columns, 'drawer');
   const { propsRes, propsEvent, loadList, setKeyword } = useTable(getUserList, {
+    tableKey: TableKeyEnum.SYSTEM_USER,
     columns,
     scroll: { y: 'auto' },
     selectable: true,
@@ -329,16 +305,182 @@
 
   const keyword = ref('');
 
-  onMounted(async () => {
-    setKeyword(keyword.value);
-    await loadList();
-  });
-
   async function searchUser() {
     setKeyword(keyword.value);
     await loadList();
   }
 
+  const tableSelected = ref<(string | number)[]>([]);
+
+  /**
+   * 处理表格选中
+   */
+  function handleTableSelect(arr: (string | number)[]) {
+    tableSelected.value = arr;
+  }
+  const { openModal } = useModal();
+
+  /**
+   * 重置密码
+   */
+  function resetPassword(record: any, isbatch?: boolean) {
+    let title = t('system.user.resetPswTip', { name: record?.name });
+    let userIdList = [record?.id];
+    if (isbatch) {
+      title = t('system.user.batchResetPswTip', { count: tableSelected.value.length });
+      userIdList = tableSelected.value as string[];
+    }
+    openModal({
+      type: 'warning',
+      title,
+      content: t('system.user.resetPswContent'),
+      okText: t('system.user.resetPswConfirm'),
+      cancelText: t('system.user.resetPswCancel'),
+      onBeforeOk: async () => {
+        try {
+          Message.success(t('system.user.resetPswSuccess'));
+          return true;
+        } catch (error) {
+          console.log(error);
+          return false;
+        }
+      },
+      hideCancel: false,
+    });
+  }
+
+  const modalLoading = ref(false);
+  /**
+   * 禁用用户
+   */
+  function disabledUser(record: any, isbatch?: boolean) {
+    let title = t('system.user.disableUserTip', { name: record?.name });
+    let userIdList = [record?.id];
+    if (isbatch) {
+      title = t('system.user.batchDisableUserTip', { count: tableSelected.value.length });
+      userIdList = tableSelected.value as string[];
+    }
+    openModal({
+      type: 'warning',
+      title,
+      content: t('system.user.disableUserContent'),
+      okText: t('system.user.disableUserConfirm'),
+      cancelText: t('system.user.disableUserCancel'),
+      okButtonProps: {
+        status: 'danger',
+      },
+      cancelButtonProps: {
+        disabled: modalLoading.value,
+      },
+      okLoading: modalLoading.value,
+      maskClosable: false,
+      onBeforeOk: async () => {
+        try {
+          modalLoading.value = true;
+          await toggleUserStatus({
+            userIdList,
+            enable: false,
+          });
+          Message.success(t('system.user.disableUserSuccess'));
+          loadList();
+          return true;
+        } catch (error) {
+          console.log(error);
+          return false;
+        } finally {
+          modalLoading.value = false;
+        }
+      },
+      hideCancel: false,
+    });
+  }
+
+  /**
+   * 启用用户
+   */
+  function enableUser(record: any, isbatch?: boolean) {
+    let title = t('system.user.enableUserTip', { name: record?.name });
+    let userIdList = [record?.id];
+    if (isbatch) {
+      title = t('system.user.batchEnableUserTip', { count: tableSelected.value.length });
+      userIdList = tableSelected.value as string[];
+    }
+    openModal({
+      type: 'info',
+      title,
+      content: t('system.user.enableUserContent'),
+      okText: t('system.user.enableUserConfirm'),
+      cancelText: t('system.user.enableUserCancel'),
+      cancelButtonProps: {
+        disabled: modalLoading.value,
+      },
+      okLoading: modalLoading.value,
+      maskClosable: false,
+      onBeforeOk: async () => {
+        try {
+          modalLoading.value = true;
+          await toggleUserStatus({
+            userIdList,
+            enable: true,
+          });
+          Message.success(t('system.user.enableUserSuccess'));
+          loadList();
+          return true;
+        } catch (error) {
+          console.log(error);
+          return false;
+        } finally {
+          modalLoading.value = false;
+        }
+      },
+      hideCancel: false,
+    });
+  }
+
+  /**
+   * 删除用户
+   */
+  function deleteUser(record: any, isbatch?: boolean) {
+    let title = t('system.user.deleteUserTip', { name: record?.name });
+    let userIdList = [record?.id];
+    if (isbatch) {
+      title = t('system.user.batchDeleteUserTip', { count: tableSelected.value.length });
+      userIdList = tableSelected.value as string[];
+    }
+    openModal({
+      type: 'warning',
+      title,
+      content: t('system.user.deleteUserContent'),
+      okText: t('system.user.deleteUserConfirm'),
+      cancelText: t('system.user.deleteUserCancel'),
+      okButtonProps: {
+        status: 'danger',
+      },
+      cancelButtonProps: {
+        disabled: modalLoading.value,
+      },
+      okLoading: modalLoading.value,
+      maskClosable: false,
+      onBeforeOk: async () => {
+        try {
+          modalLoading.value = true;
+          await deleteUserInfo({
+            userIdList,
+          });
+          Message.success(t('system.user.deleteUserSuccess'));
+          loadList();
+          return true;
+        } catch (error) {
+          console.log(error);
+          return false;
+        } finally {
+          modalLoading.value = false;
+        }
+      },
+      hideCancel: false,
+    });
+  }
+
   const tableActions: ActionsItem[] = [
     {
       label: 'system.user.resetPassword',
@@ -394,7 +536,7 @@
   };
 
   const showBatchModal = ref(false);
-  const batchAction = ref('');
+  const batchAction = ref(''); // 表格选中批量操作动作
   const treeData = ref([
     {
       title: 'Trunk 0-3',
@@ -430,117 +572,30 @@
     },
   ]);
 
-  function handelTableBatch() {
-    batchAction.value = 'batchAddProject';
-    showBatchModal.value = true;
-  }
-
-  const tableSelected = ref<(string | number)[]>([]);
-
   /**
-   * 处理表格选中
+   * 处理表格选中后批量操作
+   * @param event 批量操作事件对象
    */
-  function handleTableSelect(arr: (string | number)[]) {
-    tableSelected.value = arr;
-  }
-  const { openModal } = useModal();
-
-  /**
-   * 重置密码
-   */
-  function resetPassword(record: any) {
-    openModal({
-      type: 'warning',
-      title: t('system.user.resetPswTip', { name: record.name }),
-      content: t('system.user.resetPswContent'),
-      okText: t('system.user.resetPswConfirm'),
-      cancelText: t('system.user.resetPswCancel'),
-      onBeforeOk: async () => {
-        try {
-          Message.success(t('system.user.resetPswSuccess'));
-          return true;
-        } catch (error) {
-          console.log(error);
-          return false;
-        }
-      },
-      hideCancel: false,
-    });
-  }
-
-  /**
-   * 禁用用户
-   */
-  function disabledUser(record: any) {
-    openModal({
-      type: 'warning',
-      title: t('system.user.disableUserTip', { name: record.name }),
-      content: t('system.user.disableUserContent'),
-      okText: t('system.user.disableUserConfirm'),
-      cancelText: t('system.user.disableUserCancel'),
-      okButtonProps: {
-        status: 'danger',
-      },
-      onBeforeOk: async () => {
-        try {
-          Message.success(t('system.user.disableUserSuccess'));
-          return true;
-        } catch (error) {
-          console.log(error);
-          return false;
-        }
-      },
-      hideCancel: false,
-    });
-  }
-
-  /**
-   * 启用用户
-   */
-  function enableUser(record: any) {
-    openModal({
-      type: 'info',
-      title: t('system.user.enableUserTip', { name: record.name }),
-      content: t('system.user.enableUserContent'),
-      okText: t('system.user.enableUserConfirm'),
-      cancelText: t('system.user.enableUserCancel'),
-      onBeforeOk: async () => {
-        try {
-          Message.success(t('system.user.enableUserSuccess'));
-          return true;
-        } catch (error) {
-          console.log(error);
-          return false;
-        }
-      },
-      hideCancel: false,
-    });
-  }
-
-  /**
-   * 删除用户
-   */
-  function deleteUser(record: any) {
-    openModal({
-      type: 'warning',
-      title: t('system.user.deleteUserTip', { name: record.name }),
-      content: t('system.user.deleteUserContent'),
-      okText: t('system.user.deleteUserConfirm'),
-      cancelText: t('system.user.deleteUserCancel'),
-      okButtonProps: {
-        status: 'danger',
-      },
-      onBeforeOk: async () => {
-        try {
-          Message.success(t('system.user.deleteUserSuccess'));
-          return true;
-        } catch (error) {
-          console.log(error);
-          return false;
-        }
-      },
-      hideCancel: false,
-    });
+  function handelTableBatch(event: BatchActionParams) {
+    switch (event.eventTag) {
+      case 'batchAddProject':
+      case 'batchAddUsergroup':
+      case 'batchAddOrgnization':
+        batchAction.value = event.eventTag;
+        showBatchModal.value = true;
+        break;
+      case 'disabled':
+        disabledUser(null, true);
+        break;
+      case 'enable':
+        enableUser(null, true);
+        break;
+      case 'delete':
+        deleteUser(null, true);
+        break;
+      default:
+        break;
+    }
   }
 
   /**
@@ -564,84 +619,80 @@
   }
 
   type UserModalMode = 'create' | 'edit';
+
+  interface UserForm {
+    list: SimpleUserInfo[];
+    userGroup: string[];
+  }
+
   const visible = ref(false);
   const loading = ref(false);
   const userFormMode = ref<UserModalMode>('create');
   const userFormRef = ref<FormInstance | null>(null);
   const defaulUserForm = {
-    email0: '',
-    phone0: '',
-    username0: '',
-    list: [0],
+    list: [
+      {
+        name: '',
+        email: '',
+        phone: '',
+      },
+    ],
     userGroup: [],
   };
-  const userGroupOptions = ref([
-    {
-      label: 'Beijing',
-      value: 'Beijing',
-    },
-    {
-      label: 'Shanghai',
-      value: 'Shanghai',
-    },
-    {
-      label: 'Guangzhou',
-      value: 'Guangzhou',
-    },
-  ]);
-
-  interface UserForm {
-    list: number[];
-    userGroup: string[];
-    [key: string]: any;
-  }
-
   const userForm = ref<UserForm>(cloneDeep(defaulUserForm));
+  const userGroupOptions = ref();
+
+  async function init() {
+    try {
+      userGroupOptions.value = await getSystemRoles();
+      if (userGroupOptions.value.length) {
+        userForm.value.userGroup = userGroupOptions.value
+          .filter((e: SystemRole) => e.selected === true)
+          .map((e: SystemRole) => e.id);
+      }
+    } catch (error) {
+      console.log(error);
+    }
+  }
+
+  onBeforeMount(async () => {
+    setKeyword(keyword.value);
+    init();
+    loadList();
+  });
 
   /**
-   * 触发创建用户表单校验
-   * @param cb 校验通过后执行回调
+   * 重置用户表单
    */
-  function userFormValidate(cb: () => Promise<any>) {
-    userFormRef.value?.validate(async (errors: undefined | Record<string, ValidatedError>) => {
-      if (errors) {
-        return;
-      }
-      try {
-        loading.value = true;
-        await cb();
-      } catch (error) {
-        console.log(error);
-      } finally {
-        loading.value = false;
-      }
-    });
+  function resetUserForm() {
+    userForm.value.list = [];
+    userFormRef.value?.resetFields();
+    userForm.value.userGroup = userGroupOptions.value
+      .filter((e: SystemRole) => e.selected === true)
+      .map((e: SystemRole) => e.id);
   }
 
   /**
-   * 添加用户表单项
+   * 显示用户表单弹窗
+   * @param mode 模式，编辑或创建
+   * @param record 编辑时传入的用户信息
    */
-  function addUserField() {
-    userFormValidate(async () => {
-      const lastIndex = userForm.value.list.length - 1;
-      const lastOrder = userForm.value.list[lastIndex] + 1;
-      userForm.value.list.push(lastOrder); // 序号自增，不会因为删除而重复
-      userForm.value[`username${lastOrder}`] = '';
-      userForm.value[`email${lastOrder}`] = '';
-      userForm.value[`phone${lastOrder}`] = '';
-    });
+  function showUserModal(mode: UserModalMode, record?: UserListItem) {
+    visible.value = true;
+    userFormMode.value = mode;
+    if (mode === 'edit' && record) {
+      userForm.value.list = [{ id: record.id, name: record.name, email: record.email, phone: record.phone }];
+      userForm.value.userGroup = record.userRoleList.map((e) => e.id);
+    }
   }
 
   /**
-   * 移除用户表单项
-   * @param index 表单项的序号
-   * @param i 表单项对应 list 的下标
+   * 处理用户表单弹窗关闭
    */
-  function removeUserField(index: number, i: number) {
-    delete userForm.value[`username${index}`];
-    delete userForm.value[`email${index}`];
-    delete userForm.value[`phone${index}`];
-    userForm.value.list.splice(i, 1);
+  function handleUserModalClose() {
+    if (userFormMode.value === 'edit') {
+      resetUserForm();
+    }
   }
 
   /**
@@ -663,21 +714,11 @@
    * @param callback 失败回调，入参是提示信息
    * @param index 当前输入的表单项对应 list 的下标，用于校验重复输入的时候排除自身
    */
-  function checkUerEmail(value: string | undefined, callback: (error?: string) => void, index: number) {
+  function checkUerEmail(value: string | undefined, callback: (error?: string) => void) {
     if (value === '' || value === undefined) {
       callback(t('system.user.createUserEmailNotNull'));
     } else if (!validateEmail(value)) {
       callback(t('system.user.createUserEmailErr'));
-    } else {
-      const hasEmails: string[] = userForm.value.list.map((item: any, i: number) => {
-        if (i !== index) {
-          return userForm.value[`email${item}`];
-        }
-        return null;
-      });
-      if (hasEmails.includes(value)) {
-        callback(t('createUserEmailNoRepeat'));
-      }
     }
   }
 
@@ -692,41 +733,96 @@
     }
   }
 
+  const batchFormRef = ref<MsBatchFormInstance | null>(null);
+  const batchFormModels: Ref<FormItemModel[]> = ref([
+    {
+      filed: 'name',
+      type: 'input',
+      label: 'system.user.createUserName',
+      rules: [{ required: true, message: t('system.user.createUserNameNotNull') }, { validator: checkUerName }],
+      placeholder: 'system.user.createUserNamePlaceholder',
+    },
+    {
+      filed: 'email',
+      type: 'input',
+      label: 'system.user.createUserEmail',
+      rules: [
+        { required: true, message: t('system.user.createUserEmailNotNull') },
+        { validator: checkUerEmail },
+        { notRepeat: true, message: 'system.user.createUserEmailNoRepeat' },
+      ],
+      placeholder: 'system.user.createUserEmailPlaceholder',
+    },
+    {
+      filed: 'phone',
+      type: 'input',
+      label: 'system.user.createUserPhone',
+      rules: [{ validator: checkUerPhone }],
+      placeholder: 'system.user.createUserPhonePlaceholder',
+    },
+  ]);
+
   /**
    * 取消创建，重置用户表单
    */
   function cancelCreate() {
     visible.value = false;
-    userFormRef.value?.resetFields();
-    userForm.value = cloneDeep(defaulUserForm);
+    resetUserForm();
   }
 
+  /**
+   * 更新用户
+   */
   async function updateUser() {
-    // const params = {
-    //   userInfoList: [
-    //     {
-    //       name: userForm.value.username0,
-    //       email: userForm.value.email0,
-    //       phone: userForm.value.phone0,
-    //     },
-    //   ],
-    //   userRoleIdList: userForm.value.userGroup,
-    // };
-    // await updateUserInfo(params);
+    const activeUser = userForm.value.list[0];
+    const params = {
+      id: activeUser.id as string,
+      name: activeUser.name,
+      email: activeUser.email,
+      phone: activeUser.phone,
+      userRoleIdList: userForm.value.userGroup,
+    };
+    await updateUserInfo(params);
+    Message.success(t('system.user.updateUserSuccess'));
+    visible.value = false;
+    loadList();
   }
 
+  /**
+   * 创建用户
+   */
   async function createUser() {
     const params = {
-      userInfoList: userForm.value.list.map((item: number) => {
-        return {
-          name: userForm.value[`username${item}`],
-          email: userForm.value[`email${item}`],
-          phone: userForm.value[`phone${item}`],
-        };
-      }),
-      userRoleIdList: [],
+      userInfoList: userForm.value.list,
+      userRoleIdList: userForm.value.userGroup,
     };
     await batchCreateUser(params);
+    Message.success(t('system.user.addUserSuccess'));
+    visible.value = false;
+    loadList();
+  }
+
+  /**
+   * 触发创建用户表单校验
+   * @param cb 校验通过后执行回调
+   */
+  function userFormValidate(cb: () => Promise<any>) {
+    userFormRef.value?.validate((errors: undefined | Record<string, ValidatedError>) => {
+      if (errors) {
+        return;
+      }
+      batchFormRef.value?.formValidate(async (list: any) => {
+        try {
+          loading.value = true;
+          userForm.value.list = [...list];
+          await cb();
+        } catch (error) {
+          console.log(error);
+        } finally {
+          loading.value = false;
+        }
+      });
+    });
   }
 
   /**
@@ -746,27 +842,10 @@
   function saveAndContinue() {
     userFormValidate(async () => {
       await createUser();
-      userFormRef.value?.resetFields();
-      userForm.value = cloneDeep(defaulUserForm);
+      resetUserForm();
     });
   }
 
-  /**
-   * 显示用户表单弹窗
-   * @param mode 模式，编辑或创建
-   * @param record 编辑时传入的用户信息
-   */
-  function showUserModal(mode: UserModalMode, record?: UserListItem) {
-    visible.value = true;
-    userFormMode.value = mode;
-    if (mode === 'edit' && record) {
-      userForm.value.username0 = record.name;
-      userForm.value.email0 = record.email;
-      userForm.value.phone0 = record.phone;
-      userForm.value.userGroup = record.userRoleList.map((e) => e.name);
-    }
-  }
-
   const inviteVisible = ref(false);
   function showEmailInviteModal() {
     inviteVisible.value = true;
@@ -774,6 +853,7 @@
 
   const importVisible = ref(false);
   const importLoading = ref(false);
+  const userImportFile = ref<FileItem[]>([]);
   const importResultVisible = ref(false);
   const importSuccessCount = ref(0);
   const importFailCount = ref(0);
@@ -783,18 +863,24 @@
 
   function showImportModal() {
     importVisible.value = true;
+    importFailCount.value = 0;
+    importSuccessCount.value = 0;
+    importResult.value = 'success';
   }
 
   function cancelImport() {
     importVisible.value = false;
     importResultVisible.value = false;
+    userImportFile.value = [];
+    if (importResult.value === 'success' || (importResult.value === 'fail' && importSuccessCount.value > 0)) {
+      loadList();
+    }
   }
 
   /**
    * 根据导入结果展示结果弹窗
    */
   function showImportResult() {
-    importLoading.value = false;
     importVisible.value = false;
     switch (importResult.value) {
       case 'success':
@@ -814,16 +900,37 @@
 
   function continueImport() {
     importResultVisible.value = false;
+    userImportFile.value = [];
     importVisible.value = true;
   }
 
-  function importUser() {
-    importResult.value = 'fail';
-    importSuccessCount.value = 100;
-    importFailCount.value = 20;
-    showImportResult();
+  async function importUser() {
+    try {
+      importLoading.value = true;
+      const res = await importUserInfo({
+        fileList: [userImportFile.value[0].file],
+      });
+      const failCount = res.importCount - res.successCount;
+      if (failCount === res.importCount) {
+        importResult.value = 'allFail';
+      } else if (failCount > 0) {
+        importResult.value = 'fail';
+      } else {
+        importResult.value = 'success';
+      }
+      importSuccessCount.value = res.successCount;
+      importFailCount.value = failCount;
+      showImportResult();
+    } catch (error) {
+      console.log(error);
+    } finally {
+      importLoading.value = false;
+    }
+  }
+
+  function downLoadUserTemplate() {
+    window.open('/templates/user_import.xlsx', '_blank');
   }
 </script>
 
 <style lang="less" scoped></style>
-@/models/setting/user @/api/modules/setting/user
diff --git a/frontend/src/views/setting/system/user/locale/en-US.ts b/frontend/src/views/setting/system/user/locale/en-US.ts
index d6b28cda63..f96ff463a0 100644
--- a/frontend/src/views/setting/system/user/locale/en-US.ts
+++ b/frontend/src/views/setting/system/user/locale/en-US.ts
@@ -11,28 +11,34 @@ export default {
   'system.user.tableEnable': 'Enabled',
   'system.user.tableDisable': 'Disabled',
   'system.user.deleteUserTip': 'Are you sure to delete the user `{name}` ?',
+  'system.user.batchDeleteUserTip': 'Are you sure you want to delete the {count} users selected?',
   'system.user.deleteUserContent': "Only delete user information, does not handle the user's system data",
   'system.user.deleteUserConfirm': 'Delete',
   'system.user.deleteUserCancel': 'Cancel',
-  'system.user.deleteUserSuccess': 'Delete successful',
+  'system.user.deleteUserSuccess': 'Delete successfully',
   'system.user.disableUserTip': 'Are you sure to disable the user `{name}` ?',
+  'system.user.batchDisableUserTip': 'Are you sure to disable the {count} selected users?',
   'system.user.disableUserContent': "Disabled users can't log in to the system",
   'system.user.disableUserConfirm': 'Disabled',
   'system.user.disableUserCancel': 'Cancel',
-  'system.user.disableUserSuccess': 'Disabled successful',
+  'system.user.disableUserSuccess': 'Disabled successfully',
   'system.user.enableUserTip': 'Are you sure to enable the user `{name}` ?',
+  'system.user.batchEnableUserTip': 'Are you sure to enable the {count} selected users?',
   'system.user.enableUserContent': 'Enabled users can log in to the system',
   'system.user.enableUserConfirm': 'Enable',
   'system.user.enableUserCancel': 'Cancel',
-  'system.user.enableUserSuccess': 'Enable successful',
+  'system.user.enableUserSuccess': 'Enable successfully',
   'system.user.resetPswStart': 'Reset the password of',
   'system.user.resetPswTip': 'Reset the password of `{name}` to its initial password?',
+  'system.user.batchResetPswTip': 'Reset the passwords of the selected {count} users to their initial passwords?',
   'system.user.resetPswContent': "The initial password is the user's mailbox, which will take effect at the next login",
   'system.user.resetPswConfirm': 'Reset',
   'system.user.resetPswCancel': 'Cancel',
-  'system.user.resetPswSuccess': 'Reset successful',
+  'system.user.resetPswSuccess': 'Reset successfully',
   'system.user.createUserModalTitle': 'Create a user',
   'system.user.addUser': 'Add user',
+  'system.user.addUserSuccess': 'Added successfully',
+  'system.user.updateUserSuccess': 'Updated successfully',
   'system.user.createUserName': 'Name',
   'system.user.createUserNameNotNull': 'Name cannot be blank',
   'system.user.createUserNameOverLength': 'Name length cannot exceed 50',
@@ -59,7 +65,7 @@ export default {
   'system.user.inviteCancel': 'Cancel',
   'system.user.inviteEmailPlaceholder': 'Enter multiple email addresses, separated by spaces or carriage returns',
   'system.user.inviteSendEmail': 'SendEmail',
-  'system.user.inviteSuccess': 'Invitation successful',
+  'system.user.inviteSuccess': 'Invitation successfully',
   'system.user.importModalTitle': 'Import user',
   'system.user.importDownload': 'Download the template',
   'system.user.importModalTip': 'User groups only support adding user groups that exist in the system',
diff --git a/frontend/src/views/setting/system/user/locale/zh-CN.ts b/frontend/src/views/setting/system/user/locale/zh-CN.ts
index 9cbc59f2fc..14804f2af9 100644
--- a/frontend/src/views/setting/system/user/locale/zh-CN.ts
+++ b/frontend/src/views/setting/system/user/locale/zh-CN.ts
@@ -11,27 +11,33 @@ export default {
   'system.user.tableEnable': '正常',
   'system.user.tableDisable': '禁用',
   'system.user.deleteUserTip': '确认删除 `{name}` 这个用户吗？',
+  'system.user.batchDeleteUserTip': '确认删除已选中的 {count} 个用户吗？',
   'system.user.deleteUserContent': '仅删除用户信息，不处理该用户的系统数据',
   'system.user.deleteUserConfirm': '确认删除',
   'system.user.deleteUserCancel': '取消',
   'system.user.deleteUserSuccess': '删除成功',
   'system.user.disableUserTip': '确认禁用 `{name}` 这个用户吗？',
+  'system.user.batchDisableUserTip': '确认禁用已选中的 {count} 个用户吗？',
   'system.user.disableUserContent': '禁用的用户无法登录系统',
   'system.user.disableUserConfirm': '确认禁用',
   'system.user.disableUserCancel': '取消',
   'system.user.disableUserSuccess': '禁用成功',
   'system.user.enableUserTip': '确认启用 `{name}` 这个用户吗？',
+  'system.user.batchEnableUserTip': '确认启用已选中的 {count} 个用户吗？',
   'system.user.enableUserContent': '启用后用户可以登录系统',
   'system.user.enableUserConfirm': '确认启用',
   'system.user.enableUserCancel': '取消',
   'system.user.enableUserSuccess': '启用成功',
   'system.user.resetPswTip': '是否将 `{name}` 的密码重置为初始密码？',
+  'system.user.batchResetPswTip': '是否将选中的 {count} 个用户的密码重置为初始密码？',
   'system.user.resetPswContent': '初始的密码为用户邮箱，下次登录时生效',
   'system.user.resetPswConfirm': '确认重置',
   'system.user.resetPswCancel': '取消',
   'system.user.resetPswSuccess': '重置成功',
   'system.user.createUserModalTitle': '创建用户',
   'system.user.addUser': '添加用户',
+  'system.user.addUserSuccess': '添加成功',
+  'system.user.updateUserSuccess': '更新成功',
   'system.user.createUserName': '姓名',
   'system.user.createUserNameNotNull': '姓名不能为空',
   'system.user.createUserNameOverLength': '姓名长度不能超过50',