From 1c28238e8ab38a7ee2a125bb2f41fd55b3824011 Mon Sep 17 00:00:00 2001
From: wangdan-fit2cloud <dan.wang@fit2cloud.com>
Date: Fri, 14 Aug 2026 17:29:38 +0800
Subject: [PATCH] feat: form list

---
 ui/src/components/COMPONENT_README.md         |  36 ++++++
 ui/src/components/mk-form-list/index.vue      |  43 +++++++
 ui/src/styles/element-plus.scss               |   7 ++
 ui/src/views/VIEW_README.md                   |   5 +-
 .../system/identity/roles/AddMemberDrawer.vue |  85 +++++++++++--
 .../components/MemberWorkspaceSetting.vue     | 113 ------------------
 .../system/identity/users/UserFromDrawer.vue  |  98 +++++++++++++--
 .../users/components/UserRoleSetting.vue      | 110 -----------------
 .../users/dialog/BatchSetUserRoleDialog.vue   | 101 ++++++++++++++--
 .../identity/workspaces/AddMemberDrawer.vue   |  83 +++++++++++--
 .../components/MemberRoleSetting.vue          | 111 -----------------
 11 files changed, 420 insertions(+), 372 deletions(-)
 create mode 100644 ui/src/components/mk-form-list/index.vue
 delete mode 100644 ui/src/views/system/identity/roles/components/MemberWorkspaceSetting.vue
 delete mode 100644 ui/src/views/system/identity/users/components/UserRoleSetting.vue
 delete mode 100644 ui/src/views/system/identity/workspaces/components/MemberRoleSetting.vue

diff --git a/ui/src/components/COMPONENT_README.md b/ui/src/components/COMPONENT_README.md
index 99388f1ae91..9702e5a0c6d 100644
--- a/ui/src/components/COMPONENT_README.md
+++ b/ui/src/components/COMPONENT_README.md
@@ -65,6 +65,8 @@ src/components/
 ├── mk-search-list/
 │   ├── index.vue                 # 搜索框与剩余空间滚动列表，手动导入
 │   └── mk-list-item.vue          # 列表与业务分组列表复用的私有行结构
+├── mk-form-list/
+│   └── index.vue                 # 可动态增删的表单行列表，手动导入
 ├── mk-workspace-dropdown/
 │   └── index.vue                 # 工作空间选择下拉框，手动导入
 └── mk-workspace-relation-tags/
@@ -76,6 +78,7 @@ Vue 模板中使用，不需要手动导入。其他共享组件必须从具体
 
 ```ts
 import MkSearchList from '@/components/mk-search-list/index.vue'
+import MkFormList from '@/components/mk-form-list/index.vue'
 import MkWorkspaceDropdown from '@/components/mk-workspace-dropdown/index.vue'
 import MkWorkspaceRelationTags from '@/components/mk-workspace-relation-tags/index.vue'
 ```
@@ -396,6 +399,39 @@ const paginationConfig = ref({
 
 ## 手动导入组件
 
+### MkFormList
+
+用于多个业务字段组成的动态表单行，只负责重复行布局、添加和删除，不管理业务字段、校验规则或
+选项请求。通过 `v-model` 传入行数据，`defaultItem` 创建新行，列表始终至少保留一行。默认插槽
+提供 `item`、`index`，业务组件在插槽中继续声明
+`el-form-item`、字段路径和校验规则。
+
+```vue
+<script setup lang="ts">
+import MkFormList from '@/components/mk-form-list/index.vue'
+
+const roleSettings = defineModel<{ roleId: string; workspaceIds: string[] }[]>({ required: true })
+</script>
+
+<MkFormList
+  v-model="roleSettings"
+  add-text="添加角色"
+  :default-item="{ roleId: '', workspaceIds: [] }"
+>
+  <template #default="{ index, item }">
+    <el-form-item
+      class="flex-1"
+      :label="index===0 ? '角色' : ''"
+      :prop="`roleSettings.${index}.roleId`"
+    >
+      <el-select v-model="item.roleId" />
+    </el-form-item>
+  </template>
+</MkFormList>
+```
+
+`addText` 设置添加按钮文案。删除按钮及第一行与后续行的对齐由组件统一处理。
+
 ### MkSearchList
 
 组合搜索框和占满剩余空间的滚动列表。传入 `data` 时，组件默认按 `name` 过滤并按
diff --git a/ui/src/components/mk-form-list/index.vue b/ui/src/components/mk-form-list/index.vue
new file mode 100644
index 00000000000..a023b249475
--- /dev/null
+++ b/ui/src/components/mk-form-list/index.vue
@@ -0,0 +1,43 @@
+<script setup lang="ts" generic="T">
+defineOptions({ name: 'MkFormList' })
+
+const props = withDefaults(
+  defineProps<{
+    addText: string
+    defaultItem: T
+  }>(),
+  {
+    addText: '添加',
+  },
+)
+const formRows = defineModel<T[]>({ required: true })
+
+defineSlots<{
+  default(props: { index: number; item: T }): unknown
+}>()
+
+function addRow() {
+  formRows.value = [...formRows.value, props.defaultItem]
+}
+
+function removeRow(index: number) {
+  if (formRows.value.length === 1) return
+  formRows.value = formRows.value.filter((_, rowIndex) => rowIndex !== index)
+}
+</script>
+
+<template>
+  <div v-for="(item, index) in formRows" :key="index" class="flex w-full gap-2">
+    <slot :index="index" :item="item" />
+    <el-form-item class="shrink-0" :class="index === 0 ? 'mt-8' : 'mt-0.5'">
+      <el-button :disabled="formRows.length === 1" text @click="removeRow(index)">
+        <MkIcon name="icon_delete-trash_outlined" class="text-N600" />
+      </el-button>
+    </el-form-item>
+  </div>
+
+  <el-button class="-mt-1 mb-6" link type="primary" @click="addRow">
+    <MkIcon name="icon_add_outlined" />
+    <span>{{ addText }}</span>
+  </el-button>
+</template>
diff --git a/ui/src/styles/element-plus.scss b/ui/src/styles/element-plus.scss
index 81fbd55bbba..ecbcb241938 100644
--- a/ui/src/styles/element-plus.scss
+++ b/ui/src/styles/element-plus.scss
@@ -566,6 +566,7 @@
 
 /* select */
 .el-select {
+  --el-select-disabled-border: var(--el-border-color);
   &__caret {
     color: var(--el-text-color-regular);
     font-size: 16px;
@@ -576,6 +577,12 @@
   &__wrapper {
     padding: 4px 12px;
     line-height: 22px;
+    &.is-disabled {
+      background-color: var(--mk-N200);
+      .el-select__caret {
+        color: var(--el-text-color-disabled);
+      }
+    }
   }
   &__input {
     height: 22px;
diff --git a/ui/src/views/VIEW_README.md b/ui/src/views/VIEW_README.md
index 19713bbb665..51106ca4e41 100644
--- a/ui/src/views/VIEW_README.md
+++ b/ui/src/views/VIEW_README.md
@@ -58,8 +58,7 @@ src/views/system/identity/users/
 ├── UserListView.vue               # 用户列表路由页面
 ├── UserFromDrawer.vue             # 用户表单抽屉
 ├── components/
-│   ├── UserGroupSetting.vue       # 用户组与工作空间异步联动设置
-│   └── UserRoleSetting.vue        # 用户角色设置子组件
+│   └── UserGroupSetting.vue       # 用户组与工作空间异步联动设置
 └── dialog/
     ├── BatchSetUserRoleDialog.vue # 批量设置用户角色弹窗
     └── UserPwdDialog.vue          # 修改用户密码弹窗
@@ -72,7 +71,7 @@ src/views/system/identity/users/
 | 路由页面     | `XxxView.vue`                       | `WorkspaceListView.vue`             |
 | 抽屉         | `XxxDrawer.vue`                     | `AddMemberDrawer.vue`               |
 | 弹窗         | `XxxDialog.vue`                     | `CreateOrUpdateWorkspaceDialog.vue` |
-| 页面普通组件 | 按具体业务职责使用 `PascalCase.vue` | `MemberRoleSetting.vue`             |
+| 页面普通组件 | 按具体业务职责使用 `PascalCase.vue` | `UserGroupSetting.vue`              |
 
 不要使用缺少组件职责后缀的页面文件名，也不要把 Dialog 命名为 Drawer 或把 Drawer 命名为
 Dialog。新增或重命名文件时，应同步更新所有导入和页面功能登记。
diff --git a/ui/src/views/system/identity/roles/AddMemberDrawer.vue b/ui/src/views/system/identity/roles/AddMemberDrawer.vue
index 6d1d2e13959..bb2537b1e41 100644
--- a/ui/src/views/system/identity/roles/AddMemberDrawer.vue
+++ b/ui/src/views/system/identity/roles/AddMemberDrawer.vue
@@ -13,7 +13,7 @@ import {
 } from '@/api/types'
 import { useStore } from '@/stores'
 import { MsgSuccess } from '@/utils/message'
-import MemberWorkspaceSetting from './components/MemberWorkspaceSetting.vue'
+import MkFormList from '@/components/mk-form-list/index.vue'
 
 defineOptions({ name: 'AddRoleMemberDrawer' })
 
@@ -115,15 +115,82 @@ defineExpose({ open })
 <template>
   <MkDrawer v-model="visible" title="添加成员" @closed="resetData">
     <el-form ref="formRef" :model="memberForm" label-position="top">
-      <MemberWorkspaceSetting
+      <MkFormList
         v-model="memberForm.members"
-        :remote-user-method="loadUserOptions"
-        :show-workspace="showWorkspace"
-        :user-loading="userOptionsLoading"
-        :user-options="userOptions"
-        :workspace-loading="workspaceOptionsLoading"
-        :workspace-options="workspaceOptions"
-      />
+        add-text="添加成员"
+        :default-item="{ user_ids: [], workspace_ids: [] }"
+      >
+        <template #default="{ index, item: memberSetting }">
+          <el-form-item
+            class="flex-1"
+            :label="index === 0 ? '成员' : ''"
+            :prop="`members.${index}.user_ids`"
+            :rules="{
+              required: true,
+              type: 'array',
+              min: 1,
+              message: '请选择成员',
+              trigger: 'change',
+            }"
+          >
+            <el-select
+              v-model="memberSetting.user_ids"
+              :loading="userOptionsLoading"
+              :remote-method="loadUserOptions"
+              collapse-tags
+              collapse-tags-tooltip
+              filterable
+              fit-input-width
+              multiple
+              placeholder="请选择成员"
+              remote
+              :reserve-keyword="false"
+            >
+              <el-option
+                v-for="userOption in userOptions"
+                :key="userOption.id"
+                :label="userOption.nick_name || userOption.username"
+                :title="userOption.nick_name || userOption.username"
+                :value="userOption.id"
+              />
+            </el-select>
+          </el-form-item>
+
+          <el-form-item
+            v-if="showWorkspace"
+            class="flex-1"
+            :label="index === 0 ? '工作空间' : ''"
+            :prop="`members.${index}.workspace_ids`"
+            :rules="{
+              required: true,
+              type: 'array',
+              min: 1,
+              message: '请选择工作空间',
+              trigger: 'change',
+            }"
+          >
+            <el-select
+              v-model="memberSetting.workspace_ids"
+              :loading="workspaceOptionsLoading"
+              collapse-tags
+              collapse-tags-tooltip
+              filterable
+              fit-input-width
+              multiple
+              placeholder="请选择工作空间"
+              :reserve-keyword="false"
+            >
+              <el-option
+                v-for="workspaceOption in workspaceOptions"
+                :key="workspaceOption.id"
+                :label="workspaceOption.name"
+                :title="workspaceOption.name"
+                :value="workspaceOption.id"
+              />
+            </el-select>
+          </el-form-item>
+        </template>
+      </MkFormList>
     </el-form>
 
     <template #footer>
diff --git a/ui/src/views/system/identity/roles/components/MemberWorkspaceSetting.vue b/ui/src/views/system/identity/roles/components/MemberWorkspaceSetting.vue
deleted file mode 100644
index 5f30d8616ee..00000000000
--- a/ui/src/views/system/identity/roles/components/MemberWorkspaceSetting.vue
+++ /dev/null
@@ -1,113 +0,0 @@
-<script setup lang="ts">
-import type { FormItemRule } from 'element-plus'
-import type { CreateRoleMemberItem, SystemUserOption, WorkspaceItem } from '@/api/types'
-
-defineOptions({ name: 'MemberWorkspaceSetting' })
-
-defineProps<{
-  remoteUserMethod: (keyword: string) => Promise<void>
-  showWorkspace?: boolean
-  userLoading?: boolean
-  userOptions: SystemUserOption[]
-  workspaceLoading?: boolean
-  workspaceOptions: WorkspaceItem[]
-}>()
-
-const memberSettings = defineModel<CreateRoleMemberItem[]>({ required: true })
-
-const memberRequiredRule: FormItemRule = {
-  required: true,
-  type: 'array',
-  min: 1,
-  message: '请选择成员',
-  trigger: 'change',
-}
-const workspaceRequiredRule: FormItemRule = {
-  required: true,
-  type: 'array',
-  min: 1,
-  message: '请选择工作空间',
-  trigger: 'change',
-}
-
-function addMemberSetting() {
-  memberSettings.value = [...memberSettings.value, { user_ids: [], workspace_ids: [] }]
-}
-
-function removeMemberSetting(index: number) {
-  if (memberSettings.value.length === 1) return
-  memberSettings.value = memberSettings.value.filter((_, settingIndex) => settingIndex !== index)
-}
-</script>
-
-<template>
-  <div v-for="(memberSetting, index) in memberSettings" :key="index" class="flex w-full gap-2">
-    <el-form-item
-      class="flex-1"
-      :label="index === 0 ? '成员' : ''"
-      :prop="`members.${index}.user_ids`"
-      :rules="memberRequiredRule"
-    >
-      <el-select
-        v-model="memberSetting.user_ids"
-        :loading="userLoading"
-        :remote-method="remoteUserMethod"
-        collapse-tags
-        collapse-tags-tooltip
-        filterable
-        fit-input-width
-        multiple
-        placeholder="请选择成员"
-        remote
-        :reserve-keyword="false"
-      >
-        <el-option
-          v-for="userOption in userOptions"
-          :key="userOption.id"
-          :label="userOption.nick_name || userOption.username"
-          :title="userOption.nick_name || userOption.username"
-          :value="userOption.id"
-        />
-      </el-select>
-    </el-form-item>
-
-    <el-form-item
-      v-if="showWorkspace"
-      class="flex-1"
-      :label="index === 0 ? '工作空间' : ''"
-      :prop="`members.${index}.workspace_ids`"
-      :rules="workspaceRequiredRule"
-    >
-      <el-select
-        v-model="memberSetting.workspace_ids"
-        :loading="workspaceLoading"
-        collapse-tags
-        collapse-tags-tooltip
-        filterable
-        fit-input-width
-        multiple
-        placeholder="请选择工作空间"
-        :reserve-keyword="false"
-      >
-        <el-option
-          v-for="workspaceOption in workspaceOptions"
-          :key="workspaceOption.id"
-          :label="workspaceOption.name"
-          :title="workspaceOption.name"
-          :value="workspaceOption.id"
-        />
-      </el-select>
-    </el-form-item>
-
-    <el-form-item class="shrink-0" :class="index === 0 ? 'mt-8' : 'mt-0.5'">
-      <el-button :disabled="memberSettings.length === 1" text @click="removeMemberSetting(index)">
-        <MkIcon name="icon_delete-trash_outlined" class="text-N600" />
-      </el-button>
-    </el-form-item>
-  </div>
-
-  <el-button class="-mt-1 mb-6" link type="primary" @click="addMemberSetting">
-    <MkIcon name="icon_add_outlined" />
-    <span>添加成员</span>
-  </el-button>
-</template>
diff --git a/ui/src/views/system/identity/users/UserFromDrawer.vue b/ui/src/views/system/identity/users/UserFromDrawer.vue
index d5e85e28721..5acac64a36a 100644
--- a/ui/src/views/system/identity/users/UserFromDrawer.vue
+++ b/ui/src/views/system/identity/users/UserFromDrawer.vue
@@ -1,14 +1,15 @@
 <script setup lang="ts">
-import { computed, reactive, ref } from 'vue'
+import { computed, nextTick, reactive, ref } from 'vue'
 import JSEncrypt from 'jsencrypt'
 import CommonApi from '@/api/admin/system/common'
 import CurrentUserApi from '@/api/admin/auth/current-user'
 import UserManageApi from '@/api/admin/system/user-manage'
+import { ROLE_TYPE } from '@/api/types'
 import { useStore } from '@/stores'
 import { copyText } from '@/utils/clipboard'
 import { MsgSuccess } from '@/utils/message'
+import MkFormList from '@/components/mk-form-list/index.vue'
 import UserGroupSetting from './components/UserGroupSetting.vue'
-import UserRoleSetting from './components/UserRoleSetting.vue'
 import type {
   ListItem,
   SystemUser,
@@ -63,6 +64,17 @@ const roleSettingOptionsLoading = ref(false)
 const roleOptions = ref<ListItem[]>([])
 const workspaceOptions = ref<ListItem[]>([])
 
+function isAdminRole(roleId: string) {
+  return roleOptions.value.find(({ id }) => id === roleId)?.type === ROLE_TYPE.ADMIN
+}
+
+function handleRoleChange(roleAssignment: SystemUserRoleAssignment, index: number) {
+  if (isAdminRole(roleAssignment.role_id)) {
+    roleAssignment.workspace_ids = []
+    nextTick(() => userFormRef.value?.clearValidate(`role_setting.${index}.workspace_ids`))
+  }
+}
+
 function loadRoleSettingOptions() {
   roleSettingOptionsLoading.value = true
   const roleSettingOptionRequests: Promise<void>[] = []
@@ -90,9 +102,7 @@ const selectedWorkspaceIds = computed(() => {
   if (!auth.isEE && !auth.isPE) {
     return ['default']
   }
-  return [
-    ...new Set(userForm.role_setting.flatMap(({ workspace_ids }) => workspace_ids)),
-  ]
+  return [...new Set(userForm.role_setting.flatMap(({ workspace_ids }) => workspace_ids))]
 })
 
 // 默认密码
@@ -249,12 +259,80 @@ defineExpose({ open })
       </section>
       <section v-if="auth.isEE || auth.isPE">
         <h4 class="mk-title-decoration mb-4 mt-4">角色设置</h4>
-        <UserRoleSetting
+        <MkFormList
           v-model="userForm.role_setting"
-          :loading="roleSettingOptionsLoading"
-          :role-options="roleOptions"
-          :workspace-options="workspaceOptions"
-        />
+          add-text="添加角色"
+          :default-item="{ role_id: '', workspace_ids: [] }"
+        >
+          <template #default="{ index, item: roleAssignment }">
+            <el-form-item
+              class="flex-1"
+              :label="index === 0 ? '角色' : ''"
+              :prop="`role_setting.${index}.role_id`"
+              :rules="{
+                required: true,
+                message: '请选择角色',
+                trigger: 'change',
+              }"
+            >
+              <el-select
+                v-model="roleAssignment.role_id"
+                placeholder="请选择角色"
+                :loading="roleSettingOptionsLoading"
+                clearable
+                filterable
+                fit-input-width
+                @change="handleRoleChange(roleAssignment, index)"
+              >
+                <el-option
+                  v-for="roleOption in roleOptions"
+                  :key="roleOption.id"
+                  :label="roleOption.name"
+                  :title="roleOption.name"
+                  :value="roleOption.id"
+                />
+              </el-select>
+            </el-form-item>
+
+            <!-- 企业版用户的非系统管理员角色需要指定工作空间。 -->
+            <el-form-item
+              v-if="auth.isEE"
+              class="flex-1"
+              :label="index === 0 ? '工作空间' : ''"
+              :prop="`role_setting.${index}.workspace_ids`"
+              :rules="{
+                required: !isAdminRole(roleAssignment.role_id),
+                type: 'array',
+                min: 1,
+                message: '请选择工作空间',
+                trigger: 'change',
+              }"
+            >
+              <el-select
+                v-model="roleAssignment.workspace_ids"
+                :placeholder="isAdminRole(roleAssignment.role_id) ? '' : '请选择工作空间'"
+                :loading="roleSettingOptionsLoading"
+                :disabled="isAdminRole(roleAssignment.role_id)"
+                :validate-event="!isAdminRole(roleAssignment.role_id)"
+                clearable
+                filterable
+                fit-input-width
+                multiple
+                collapse-tags
+                collapse-tags-tooltip
+                :reserve-keyword="false"
+              >
+                <el-option
+                  v-for="workspaceOption in workspaceOptions"
+                  :key="workspaceOption.id"
+                  :label="workspaceOption.name"
+                  :title="workspaceOption.name"
+                  :value="workspaceOption.id"
+                />
+              </el-select>
+            </el-form-item>
+          </template>
+        </MkFormList>
       </section>
       <section v-if="selectedWorkspaceIds.length">
         <h4 class="mk-title-decoration mb-4 mt-4">用户组</h4>
diff --git a/ui/src/views/system/identity/users/components/UserRoleSetting.vue b/ui/src/views/system/identity/users/components/UserRoleSetting.vue
deleted file mode 100644
index 6273c790b53..00000000000
--- a/ui/src/views/system/identity/users/components/UserRoleSetting.vue
+++ /dev/null
@@ -1,110 +0,0 @@
-<script setup lang="ts">
-import type { FormItemRule } from 'element-plus'
-import { ROLE_TYPE, type ListItem, type SystemUserRoleAssignment } from '@/api/types'
-import { useStore } from '@/stores'
-
-defineOptions({ name: 'UserRoleSettingSection' })
-const { auth } = useStore()
-const props = defineProps<{
-  loading?: boolean
-  roleOptions: ListItem[]
-  workspaceOptions: ListItem[]
-}>()
-
-const roleAssignments = defineModel<SystemUserRoleAssignment[]>({ required: true })
-
-const roleRequiredRule: FormItemRule = {
-  required: true,
-  message: '请选择角色',
-  trigger: 'change',
-}
-const workspaceRequiredRule: FormItemRule = {
-  required: true,
-  type: 'array',
-  min: 1,
-  message: '请选择工作空间',
-  trigger: 'change',
-}
-
-function isAdminRole(roleId: string) {
-  return props.roleOptions.find(({ id }) => id === roleId)?.type === ROLE_TYPE.ADMIN
-}
-
-function addRole() {
-  roleAssignments.value = [...roleAssignments.value, { role_id: '', workspace_ids: [] }]
-}
-
-function removeRole(index: number) {
-  if (roleAssignments.value.length === 1) return
-  roleAssignments.value = roleAssignments.value.filter((_, roleIndex) => roleIndex !== index)
-}
-</script>
-
-<template>
-  <div v-for="(roleAssignment, index) in roleAssignments" :key="index" class="flex w-full gap-2">
-    <el-form-item
-      class="flex-1"
-      :label="index === 0 ? '角色' : ''"
-      :prop="`role_setting.${index}.role_id`"
-      :rules="roleRequiredRule"
-    >
-      <el-select
-        v-model="roleAssignment.role_id"
-        placeholder="请选择角色"
-        :loading="loading"
-        clearable
-        filterable
-        fit-input-width
-      >
-        <el-option
-          v-for="roleOption in roleOptions"
-          :key="roleOption.id"
-          :label="roleOption.name"
-          :title="roleOption.name"
-          :value="roleOption.id"
-        />
-      </el-select>
-    </el-form-item>
-
-    <!-- 企业版不设置工作空间 -->
-    <el-form-item
-      v-if="auth.isEE && !isAdminRole(roleAssignment.role_id)"
-      class="flex-1"
-      :label="index === 0 ? '工作空间' : ''"
-      :prop="`role_setting.${index}.workspace_ids`"
-      :rules="workspaceRequiredRule"
-    >
-      <el-select
-        v-model="roleAssignment.workspace_ids"
-        placeholder="请选择工作空间"
-        :loading="loading"
-        clearable
-        filterable
-        fit-input-width
-        multiple
-        collapse-tags
-        collapse-tags-tooltip
-        :reserve-keyword="false"
-      >
-        <el-option
-          v-for="workspaceOption in workspaceOptions"
-          :key="workspaceOption.id"
-          :label="workspaceOption.name"
-          :title="workspaceOption.name"
-          :value="workspaceOption.id"
-        />
-      </el-select>
-    </el-form-item>
-
-    <el-form-item class="shrink-0" :class="index === 0 ? 'mt-8' : 'mt-0.5'">
-      <el-button :disabled="roleAssignments.length === 1" text @click="removeRole(index)">
-        <mk-icon name="icon_delete-trash_outlined" class="text-N600"></mk-icon>
-      </el-button>
-    </el-form-item>
-  </div>
-
-  <el-button link type="primary" @click="addRole" class="-mt-3">
-    <mk-icon name="icon_add_outlined"></mk-icon>
-    <span>添加角色</span>
-  </el-button>
-</template>
diff --git a/ui/src/views/system/identity/users/dialog/BatchSetUserRoleDialog.vue b/ui/src/views/system/identity/users/dialog/BatchSetUserRoleDialog.vue
index 7899ac2a467..beca1bb92bf 100644
--- a/ui/src/views/system/identity/users/dialog/BatchSetUserRoleDialog.vue
+++ b/ui/src/views/system/identity/users/dialog/BatchSetUserRoleDialog.vue
@@ -1,12 +1,17 @@
 <script setup lang="ts">
-import { reactive, ref } from 'vue'
+import { nextTick, reactive, ref } from 'vue'
 import type { FormInstance } from 'element-plus'
 import CurrentUserApi from '@/api/admin/auth/current-user'
 import UserManageApi from '@/api/admin/system/user-manage'
-import { ROLE_TYPE, type ListItem, type BatchSetUserWorkspaceRolesRequest } from '@/api/types'
+import {
+  ROLE_TYPE,
+  type ListItem,
+  type BatchSetUserWorkspaceRolesRequest,
+  type SystemUserRoleAssignment,
+} from '@/api/types'
 import { useStore } from '@/stores'
 import { MsgSuccess } from '@/utils/message'
-import UserRoleSetting from '../components/UserRoleSetting.vue'
+import MkFormList from '@/components/mk-form-list/index.vue'
 
 defineOptions({ name: 'BatchSetUserRoleDialog' })
 
@@ -31,6 +36,18 @@ const batchRoleForm = reactive<BatchSetUserWorkspaceRolesRequest>({
 const roleSettingOptionsLoading = ref(false)
 const roleOptions = ref<ListItem[]>([])
 const workspaceOptions = ref<ListItem[]>([])
+
+function isAdminRole(roleId: string) {
+  return roleOptions.value.find(({ id }) => id === roleId)?.type === ROLE_TYPE.ADMIN
+}
+
+function handleRoleChange(roleAssignment: SystemUserRoleAssignment, index: number) {
+  if (isAdminRole(roleAssignment.role_id)) {
+    roleAssignment.workspace_ids = []
+    nextTick(() => batchRoleFormRef.value?.clearValidate(`role_setting.${index}.workspace_ids`))
+  }
+}
+
 function loadRoleSettingOptions() {
   roleSettingOptionsLoading.value = true
   const optionRequests: Promise<void>[] = [
@@ -134,13 +151,81 @@ defineExpose({ open })
         </el-radio-group>
       </el-form-item>
 
-      <UserRoleSetting
+      <MkFormList
         v-if="auth.isEE || auth.isPE"
         v-model="batchRoleForm.role_setting"
-        :loading="roleSettingOptionsLoading"
-        :role-options="roleOptions"
-        :workspace-options="workspaceOptions"
-      />
+        add-text="添加角色"
+        :default-item="{ role_id: '', workspace_ids: [] }"
+      >
+        <template #default="{ index, item: roleAssignment }">
+          <el-form-item
+            class="flex-1"
+            :label="index === 0 ? '角色' : ''"
+            :prop="`role_setting.${index}.role_id`"
+            :rules="{
+              required: true,
+              message: '请选择角色',
+              trigger: 'change',
+            }"
+          >
+            <el-select
+              v-model="roleAssignment.role_id"
+              placeholder="请选择角色"
+              :loading="roleSettingOptionsLoading"
+              clearable
+              filterable
+              fit-input-width
+              @change="handleRoleChange(roleAssignment, index)"
+            >
+              <el-option
+                v-for="roleOption in roleOptions"
+                :key="roleOption.id"
+                :label="roleOption.name"
+                :title="roleOption.name"
+                :value="roleOption.id"
+              />
+            </el-select>
+          </el-form-item>
+
+          <!-- 企业版用户的非系统管理员角色需要指定工作空间。 -->
+          <el-form-item
+            v-if="auth.isEE"
+            class="flex-1"
+            :label="index === 0 ? '工作空间' : ''"
+            :prop="`role_setting.${index}.workspace_ids`"
+            :rules="{
+              required: !isAdminRole(roleAssignment.role_id),
+              type: 'array',
+              min: 1,
+              message: '请选择工作空间',
+              trigger: 'change',
+            }"
+          >
+            <el-select
+              v-model="roleAssignment.workspace_ids"
+              :placeholder="isAdminRole(roleAssignment.role_id) ? '' : '请选择工作空间'"
+              :loading="roleSettingOptionsLoading"
+              :disabled="isAdminRole(roleAssignment.role_id)"
+              :validate-event="!isAdminRole(roleAssignment.role_id)"
+              clearable
+              filterable
+              fit-input-width
+              multiple
+              collapse-tags
+              collapse-tags-tooltip
+              :reserve-keyword="false"
+            >
+              <el-option
+                v-for="workspaceOption in workspaceOptions"
+                :key="workspaceOption.id"
+                :label="workspaceOption.name"
+                :title="workspaceOption.name"
+                :value="workspaceOption.id"
+              />
+            </el-select>
+          </el-form-item>
+        </template>
+      </MkFormList>
     </el-form>
 
     <template #footer>
diff --git a/ui/src/views/system/identity/workspaces/AddMemberDrawer.vue b/ui/src/views/system/identity/workspaces/AddMemberDrawer.vue
index 285430aaf67..18d446892a5 100644
--- a/ui/src/views/system/identity/workspaces/AddMemberDrawer.vue
+++ b/ui/src/views/system/identity/workspaces/AddMemberDrawer.vue
@@ -11,7 +11,7 @@ import type {
   WorkspaceItem,
 } from '@/api/types'
 import { MsgSuccess } from '@/utils/message'
-import MemberRoleSetting from './components/MemberRoleSetting.vue'
+import MkFormList from '@/components/mk-form-list/index.vue'
 
 defineOptions({ name: 'AddWorkspaceMemberDrawer' })
 
@@ -115,14 +115,81 @@ defineExpose({ open })
 <template>
   <MkDrawer v-model="visible" title="添加成员" @closed="resetData">
     <el-form ref="formRef" :model="memberForm" label-position="top">
-      <MemberRoleSetting
+      <MkFormList
         v-model="memberForm.members"
-        :role-loading="roleOptionsLoading"
-        :role-options="roleOptions"
-        :user-loading="userOptionsLoading"
-        :user-options="userOptions"
-        :remote-user-method="loadUserOptions"
-      />
+        add-text="添加成员"
+        :default-item="{ role_ids: [], user_ids: [] }"
+      >
+        <template #default="{ index, item: memberSetting }">
+          <el-form-item
+            class="flex-1"
+            :label="index === 0 ? '成员' : ''"
+            :prop="`members.${index}.user_ids`"
+            :rules="{
+              required: true,
+              type: 'array',
+              min: 1,
+              message: '请选择成员',
+              trigger: 'change',
+            }"
+          >
+            <el-select
+              v-model="memberSetting.user_ids"
+              :loading="userOptionsLoading"
+              :remote-method="loadUserOptions"
+              collapse-tags
+              collapse-tags-tooltip
+              filterable
+              fit-input-width
+              multiple
+              placeholder="请选择成员"
+              remote
+              :reserve-keyword="false"
+            >
+              <el-option
+                v-for="userOption in userOptions"
+                :key="userOption.id"
+                :label="userOption.nick_name || userOption.username"
+                :title="userOption.nick_name || userOption.username"
+                :value="userOption.id"
+              />
+            </el-select>
+          </el-form-item>
+
+          <el-form-item
+            class="flex-1"
+            :label="index === 0 ? '角色' : ''"
+            :prop="`members.${index}.role_ids`"
+            :rules="{
+              required: true,
+              type: 'array',
+              min: 1,
+              message: '请选择角色',
+              trigger: 'change',
+            }"
+          >
+            <el-select
+              v-model="memberSetting.role_ids"
+              :loading="roleOptionsLoading"
+              collapse-tags
+              collapse-tags-tooltip
+              filterable
+              fit-input-width
+              multiple
+              placeholder="请选择角色"
+              :reserve-keyword="false"
+            >
+              <el-option
+                v-for="roleOption in roleOptions"
+                :key="roleOption.id"
+                :label="roleOption.name"
+                :title="roleOption.name"
+                :value="roleOption.id"
+              />
+            </el-select>
+          </el-form-item>
+        </template>
+      </MkFormList>
     </el-form>
 
     <template #footer>
diff --git a/ui/src/views/system/identity/workspaces/components/MemberRoleSetting.vue b/ui/src/views/system/identity/workspaces/components/MemberRoleSetting.vue
deleted file mode 100644
index 466b13e518b..00000000000
--- a/ui/src/views/system/identity/workspaces/components/MemberRoleSetting.vue
+++ /dev/null
@@ -1,111 +0,0 @@
-<script setup lang="ts">
-import type { FormItemRule } from 'element-plus'
-import type { CreateWorkspaceMemberParamsItem, ListItem, SystemUserOption } from '@/api/types'
-
-defineOptions({ name: 'MemberRoleSetting' })
-
-defineProps<{
-  remoteUserMethod: (keyword: string) => Promise<void>
-  roleLoading?: boolean
-  roleOptions: ListItem[]
-  userLoading?: boolean
-  userOptions: SystemUserOption[]
-}>()
-
-const memberSettings = defineModel<CreateWorkspaceMemberParamsItem[]>({ required: true })
-
-const memberRequiredRule: FormItemRule = {
-  required: true,
-  type: 'array',
-  min: 1,
-  message: '请选择成员',
-  trigger: 'change',
-}
-const roleRequiredRule: FormItemRule = {
-  required: true,
-  type: 'array',
-  min: 1,
-  message: '请选择角色',
-  trigger: 'change',
-}
-
-function addMemberSetting() {
-  memberSettings.value = [...memberSettings.value, { role_ids: [], user_ids: [] }]
-}
-
-function removeMemberSetting(index: number) {
-  if (memberSettings.value.length === 1) return
-  memberSettings.value = memberSettings.value.filter((_, settingIndex) => settingIndex !== index)
-}
-</script>
-
-<template>
-  <div v-for="(memberSetting, index) in memberSettings" :key="index" class="flex w-full gap-2">
-    <el-form-item
-      class="flex-1"
-      :label="index === 0 ? '成员' : ''"
-      :prop="`members.${index}.user_ids`"
-      :rules="memberRequiredRule"
-    >
-      <el-select
-        v-model="memberSetting.user_ids"
-        :loading="userLoading"
-        :remote-method="remoteUserMethod"
-        collapse-tags
-        collapse-tags-tooltip
-        filterable
-        fit-input-width
-        multiple
-        placeholder="请选择成员"
-        remote
-        :reserve-keyword="false"
-      >
-        <el-option
-          v-for="userOption in userOptions"
-          :key="userOption.id"
-          :label="userOption.nick_name || userOption.username"
-          :title="userOption.nick_name || userOption.username"
-          :value="userOption.id"
-        />
-      </el-select>
-    </el-form-item>
-
-    <el-form-item
-      class="flex-1"
-      :label="index === 0 ? '角色' : ''"
-      :prop="`members.${index}.role_ids`"
-      :rules="roleRequiredRule"
-    >
-      <el-select
-        v-model="memberSetting.role_ids"
-        :loading="roleLoading"
-        collapse-tags
-        collapse-tags-tooltip
-        filterable
-        fit-input-width
-        multiple
-        placeholder="请选择角色"
-        :reserve-keyword="false"
-      >
-        <el-option
-          v-for="roleOption in roleOptions"
-          :key="roleOption.id"
-          :label="roleOption.name"
-          :title="roleOption.name"
-          :value="roleOption.id"
-        />
-      </el-select>
-    </el-form-item>
-
-    <el-form-item class="shrink-0" :class="index === 0 ? 'mt-8' : 'mt-0.5'">
-      <el-button :disabled="memberSettings.length === 1" text @click="removeMemberSetting(index)">
-        <MkIcon name="icon_delete-trash_outlined" class="text-N600" />
-      </el-button>
-    </el-form-item>
-  </div>
-
-  <el-button class="-mt-1 mb-6" link type="primary" @click="addMemberSetting">
-    <MkIcon name="icon_add_outlined" />
-    <span>添加成员</span>
-  </el-button>
-</template>