From acd41555f9c647a5279db9bbcc3e024759cb799b Mon Sep 17 00:00:00 2001
From: hongawen <83944980@qq.com>
Date: Mon, 18 May 2026 22:25:04 +0800
Subject: [PATCH] =?UTF-8?q?refactor(projects):=201=E3=80=81=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=E6=96=B0=E5=A2=9E=20=E4=BA=A7=E5=93=81=E5=92=8C?=
 =?UTF-8?q?=E6=96=B0=E5=A2=9E=E9=A1=B9=E7=9B=AE=EF=BC=9B2=E3=80=81?=
 =?UTF-8?q?=E8=B0=83=E6=95=B4=E8=A7=92=E8=89=B2=E6=8F=90=E7=A4=BA=E4=BF=A1?=
 =?UTF-8?q?=E6=81=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/service/api/product-shared.ts             |    3 -
 src/service/api/product.ts                    |   22 +
 src/service/api/project-shared.ts             |    3 -
 src/service/api/project.ts                    |   22 +
 src/typings/api/product.d.ts                  |   30 +-
 src/typings/api/project.d.ts                  |   31 +-
 src/typings/api/system-manage.d.ts            |    4 +-
 src/typings/components.d.ts                   |    4 +
 .../product-create-team-member-dialog.vue     |   98 +-
 .../list/modules/product-create-team-step.vue |  316 ++---
 .../list/modules/product-operate-dialog.vue   |  228 +++-
 src/views/product/setting/index.vue           |   81 +-
 .../modules/member-batch-remove-dialog.vue    |   75 ++
 .../setting/modules/setting-team-panel.vue    |  117 +-
 .../components/product-team-batch-dialog.vue  | 1157 +++++++++++++++++
 .../project-create-team-member-dialog.vue     |   64 +-
 .../list/modules/project-create-team-step.vue |  316 ++---
 .../list/modules/project-operate-dialog.vue   |  231 +++-
 src/views/project/project/setting/index.vue   |   81 +-
 .../modules/member-batch-remove-dialog.vue    |   81 ++
 .../setting/modules/setting-team-panel.vue    |  110 +-
 .../components/project-team-batch-dialog.vue  | 1157 +++++++++++++++++
 22 files changed, 3588 insertions(+), 643 deletions(-)
 create mode 100644 src/views/product/setting/modules/member-batch-remove-dialog.vue
 create mode 100644 src/views/product/shared/components/product-team-batch-dialog.vue
 create mode 100644 src/views/project/project/setting/modules/member-batch-remove-dialog.vue
 create mode 100644 src/views/project/shared/components/project-team-batch-dialog.vue

diff --git a/src/service/api/product-shared.ts b/src/service/api/product-shared.ts
index ca8b373..6a02a8d 100644
--- a/src/service/api/product-shared.ts
+++ b/src/service/api/product-shared.ts
@@ -33,8 +33,6 @@ interface ProductMemberResponse {
   roleId: string | number;
   roleName: string;
   roleCode: string;
-  /** 多角色合并展示的非主角色名列表 */
-  additionalRoleNames?: string[] | null;
   managerFlag: boolean;
   status: 0 | 1;
   joinedTime: string;
@@ -76,7 +74,6 @@ export function normalizeProductMember(response: ProductMemberResponse): Api.Pro
     roleId: normalizeStringId(response.roleId),
     roleName: response.roleName || '',
     roleCode: response.roleCode || '',
-    additionalRoleNames: response.additionalRoleNames ?? [],
     managerFlag: Boolean(response.managerFlag),
     status: response.status,
     joinedTime: response.joinedTime,
diff --git a/src/service/api/product.ts b/src/service/api/product.ts
index c74363b..076b362 100644
--- a/src/service/api/product.ts
+++ b/src/service/api/product.ts
@@ -574,6 +574,19 @@ export async function fetchCreateProductMember(id: string, data: Api.Product.Cre
   return mapServiceResult(result as ServiceRequestResult<string | number>, normalizeStringId);
 }
 
+export async function fetchBatchCreateProductMembers(id: string, data: Api.Product.BatchCreateProductMembersParams) {
+  const result = await request<Array<string | number>>({
+    ...safeJsonRequestConfig,
+    url: `${PRODUCT_PREFIX}/${id}/members/batch`,
+    method: 'post',
+    data
+  });
+
+  return mapServiceResult(result as ServiceRequestResult<Array<string | number>>, list =>
+    Array.isArray(list) ? list.map(normalizeStringId) : []
+  );
+}
+
 export function fetchUpdateProductMember(id: string, memberId: string, data: Api.Product.UpdateProductMemberParams) {
   return request<boolean>({
     ...safeJsonRequestConfig,
@@ -583,6 +596,15 @@ export function fetchUpdateProductMember(id: string, memberId: string, data: Api
   });
 }
 
+export function fetchBatchInactiveProductMembers(id: string, data: Api.Product.BatchInactiveProductMembersParams) {
+  return request<boolean>({
+    ...safeJsonRequestConfig,
+    url: `${PRODUCT_PREFIX}/${id}/members/batch/inactive`,
+    method: 'post',
+    data
+  });
+}
+
 export function fetchInactiveProductMember(
   id: string,
   memberId: string,
diff --git a/src/service/api/project-shared.ts b/src/service/api/project-shared.ts
index a0dd2a5..b709815 100644
--- a/src/service/api/project-shared.ts
+++ b/src/service/api/project-shared.ts
@@ -147,8 +147,6 @@ export interface ProjectMemberResponse {
   roleId: string | number;
   roleName: string;
   roleCode: string;
-  /** 多角色合并展示的非主角色名列表 */
-  additionalRoleNames?: string[] | null;
   managerFlag: boolean;
   status: 0 | 1;
   joinedTime: string;
@@ -227,7 +225,6 @@ export function normalizeProjectMember(response: ProjectMemberResponse): Api.Pro
     roleId: normalizeStringId(response.roleId),
     roleName: response.roleName || '',
     roleCode: response.roleCode || '',
-    additionalRoleNames: response.additionalRoleNames ?? [],
     managerFlag: Boolean(response.managerFlag),
     status: response.status,
     joinedTime: response.joinedTime,
diff --git a/src/service/api/project.ts b/src/service/api/project.ts
index bd7ef75..de92e98 100644
--- a/src/service/api/project.ts
+++ b/src/service/api/project.ts
@@ -284,6 +284,28 @@ export function fetchInactiveProjectMember(
   });
 }
 
+export async function fetchBatchCreateProjectMembers(id: string, data: Api.Project.BatchCreateProjectMembersParams) {
+  const result = await request<Array<string | number>>({
+    ...safeJsonRequestConfig,
+    url: `${PROJECT_PREFIX}/${id}/members/batch`,
+    method: 'post',
+    data
+  });
+
+  return mapServiceResult(result as ServiceRequestResult<Array<string | number>>, list =>
+    Array.isArray(list) ? list.map(normalizeStringId) : []
+  );
+}
+
+export function fetchBatchInactiveProjectMembers(id: string, data: Api.Project.BatchInactiveProjectMembersParams) {
+  return request<boolean>({
+    ...safeJsonRequestConfig,
+    url: `${PROJECT_PREFIX}/${id}/members/batch/inactive`,
+    method: 'post',
+    data
+  });
+}
+
 /** 获取项目设置 */
 export async function fetchGetProjectSettings(id: string) {
   const result = await fetchGetProject(id);
diff --git a/src/typings/api/product.d.ts b/src/typings/api/product.d.ts
index f9bc3d4..556ebea 100644
--- a/src/typings/api/product.d.ts
+++ b/src/typings/api/product.d.ts
@@ -99,15 +99,10 @@ declare namespace Api {
       userNickname: string;
       /** 角色 ID */
       roleId: string;
-      /** 角色名称（主角色） */
+      /** 角色名称 */
       roleName: string;
-      /** 角色编码（主角色） */
+      /** 角色编码 */
       roleCode: string;
-      /**
-       * 非主角色的中文名列表（多角色合并展示用，按字典序升序）
-       * 单角色时为空数组 [];典型场景：创建者 + 经理重合时，主行 manager，creator 名进此列表
-       */
-      additionalRoleNames: string[];
       /** 是否当前产品经理 */
       managerFlag: boolean;
       /** 成员状态 */
@@ -215,6 +210,20 @@ declare namespace Api {
       previousManagerRoleId?: string | null;
     }
 
+    /**
+     * 批量新增产品成员参数
+     *
+     * 刻意不复用 CreateProductMemberParams：批量接口不承担「产品经理交接」语义，
+     * 后端兜底拒绝 roleId 为产品经理角色的项。
+     */
+    interface BatchCreateProductMembersParams {
+      members: Array<{
+        userId: string;
+        roleId: string;
+        remark?: string | null;
+      }>;
+    }
+
     /**
      * 产品创建（含初始团队）原子接口参数
      *
@@ -223,7 +232,7 @@ declare namespace Api {
     interface CreateProductWithTeamParams {
       product: SaveProductParams;
       members: CreateProductMemberParams[];
-      /** 关心人 user_id 数组（选填）；后端按 (user, object, role) 三元组幂等写入 product_watcher 角色 */
+      /** 关注人 user_id 数组（选填）；后端按 (user, object, role) 三元组幂等写入 product_watcher 角色 */
       watcherUserIds?: string[];
     }
 
@@ -239,6 +248,11 @@ declare namespace Api {
       reason?: string | null;
     }
 
+    interface BatchInactiveProductMembersParams {
+      memberIds: string[];
+      reason?: string | null;
+    }
+
     // ========== 产品需求相关类型定义 ==========
     /** 需求状态编码 */
     type RequirementStatusCode =
diff --git a/src/typings/api/project.d.ts b/src/typings/api/project.d.ts
index 15d1358..ea7bd72 100644
--- a/src/typings/api/project.d.ts
+++ b/src/typings/api/project.d.ts
@@ -519,15 +519,10 @@ declare namespace Api {
       userNickname: string;
       /** 角色 ID */
       roleId: string;
-      /** 角色名称（主角色） */
+      /** 角色名称 */
       roleName: string;
-      /** 角色编码（主角色） */
+      /** 角色编码 */
       roleCode: string;
-      /**
-       * 非主角色的中文名列表（多角色合并展示用，按字典序升序）
-       * 单角色时为空数组 [];典型场景：创建者 + 负责人重合时，主行 manager，creator 名进此列表
-       */
-      additionalRoleNames: string[];
       /** 是否项目负责人 */
       managerFlag: boolean;
       /** 成员状态 */
@@ -625,6 +620,26 @@ declare namespace Api {
       reason: string | null;
     }
 
+    /**
+     * 批量新增项目成员参数
+     *
+     * 刻意不复用 CreateProjectMemberParams：批量接口不承担"项目负责人交接"语义，
+     * 后端兜底拒绝 roleId 为项目负责人角色的项。
+     */
+    interface BatchCreateProjectMembersParams {
+      members: Array<{
+        userId: string;
+        roleId: string;
+        remark?: string | null;
+      }>;
+    }
+
+    /** 批量移出项目成员参数 */
+    interface BatchInactiveProjectMembersParams {
+      memberIds: string[];
+      reason?: string | null;
+    }
+
     /**
      * 项目创建（含初始团队）原子接口参数
      *
@@ -633,7 +648,7 @@ declare namespace Api {
     interface CreateProjectWithTeamParams {
       project: SaveProjectParams;
       members: CreateProjectMemberParams[];
-      /** 关心人 user_id 数组（选填）；后端按 (user, object, role) 三元组幂等写入 project_watcher 角色 */
+      /** 关注人 user_id 数组（选填）；后端按 (user, object, role) 三元组幂等写入 project_watcher 角色 */
       watcherUserIds?: string[];
     }
 
diff --git a/src/typings/api/system-manage.d.ts b/src/typings/api/system-manage.d.ts
index 7fbcbbb..92a57dc 100644
--- a/src/typings/api/system-manage.d.ts
+++ b/src/typings/api/system-manage.d.ts
@@ -47,6 +47,8 @@ declare namespace Api {
       type: RoleType;
       /** remark */
       remark?: string | null;
+      /** 是否在前端选择面板可见：0 不可见 / 1 可见，缺省视作可见 */
+      visible?: 0 | 1 | null;
       /** create time */
       createTime: number;
     }
@@ -226,7 +228,7 @@ declare namespace Api {
 
     type PostList = PageResult<Post>;
 
-    type RoleSimple = Pick<Role, 'id' | 'name' | 'code' | 'status' | 'sort'>;
+    type RoleSimple = Pick<Role, 'id' | 'name' | 'code' | 'status' | 'sort' | 'remark' | 'visible'>;
 
     type RoleSimpleList = RoleSimple[];
 
diff --git a/src/typings/components.d.ts b/src/typings/components.d.ts
index 90fe525..3497532 100644
--- a/src/typings/components.d.ts
+++ b/src/typings/components.d.ts
@@ -100,6 +100,10 @@ declare module 'vue' {
     IconCarbonStop: typeof import('~icons/carbon/stop')['default']
     'IconCharm:download': typeof import('~icons/charm/download')['default']
     'IconEp:arrowDown': typeof import('~icons/ep/arrow-down')['default']
+    'IconEp:box': typeof import('~icons/ep/box')['default']
+    'IconEp:files': typeof import('~icons/ep/files')['default']
+    'IconEp:infoFilled': typeof import('~icons/ep/info-filled')['default']
+    'IconEp:plus': typeof import('~icons/ep/plus')['default']
     IconEpRemoveFilled: typeof import('~icons/ep/remove-filled')['default']
     IconEpSuccessFilled: typeof import('~icons/ep/success-filled')['default']
     'IconF7:circleFill': typeof import('~icons/f7/circle-fill')['default']
diff --git a/src/views/product/list/modules/product-create-team-member-dialog.vue b/src/views/product/list/modules/product-create-team-member-dialog.vue
index 7c677b4..bf46329 100644
--- a/src/views/product/list/modules/product-create-team-member-dialog.vue
+++ b/src/views/product/list/modules/product-create-team-member-dialog.vue
@@ -1,14 +1,10 @@
 <script setup lang="ts">
 import { computed, nextTick, reactive, watch } from 'vue';
-import { PRODUCT_MANAGER_ROLE_CODE } from '@/constants/business';
 import { useForm, useFormRules } from '@/hooks/common/form';
 import BusinessFormDialog from '@/components/custom/business-form-dialog.vue';
-import BusinessUserSelect from '@/components/custom/business-user-select.vue';
 
 defineOptions({ name: 'ProductCreateTeamMemberDialog' });
 
-type OperateMode = 'create' | 'edit';
-
 interface DraftMemberInput {
   userId: string;
   roleId: string;
@@ -16,22 +12,16 @@ interface DraftMemberInput {
 }
 
 interface Props {
-  mode: OperateMode;
   initial: DraftMemberInput | null;
   userOptions: Api.SystemManage.UserSimple[];
   roleOptions: Api.SystemManage.RoleSimple[];
-  /** 已使用且不可选的 userId（编辑模式应当排除当前行自身） */
-  disabledUserIds?: readonly string[];
 }
 
 interface Emits {
   (e: 'submit', payload: DraftMemberInput): void;
 }
 
-const props = withDefaults(defineProps<Props>(), {
-  disabledUserIds: () => []
-});
-
+const props = defineProps<Props>();
 const emit = defineEmits<Emits>();
 
 const visible = defineModel<boolean>('visible', { default: false });
@@ -39,31 +29,21 @@ const visible = defineModel<boolean>('visible', { default: false });
 const { formRef, validate } = useForm();
 const { createRequiredRule } = useFormRules();
 
-const model = reactive<DraftMemberInput>({
-  userId: '',
-  roleId: '',
-  remark: ''
-});
-
-const dialogTitle = computed(() => (props.mode === 'create' ? '新增团队成员' : '调整成员角色'));
+const model = reactive<DraftMemberInput>({ userId: '', roleId: '', remark: '' });
 
 const userLabelMap = computed(() => new Map(props.userOptions.map(item => [String(item.id), item.nickname])));
 
+const selectableRoles = computed(() => props.roleOptions.filter(role => role.visible !== 0));
+
 const rules = computed(
   () =>
     ({
-      userId: props.mode === 'create' ? [createRequiredRule('请选择成员用户')] : [],
       roleId: [createRequiredRule('请选择角色')]
     }) satisfies Record<string, App.Global.FormRule[]>
 );
 
-function isManagerRole(role: Api.SystemManage.RoleSimple) {
-  return role.code === PRODUCT_MANAGER_ROLE_CODE;
-}
-
 async function handleConfirm() {
   await validate();
-
   emit('submit', {
     userId: model.userId,
     roleId: model.roleId,
@@ -72,34 +52,21 @@ async function handleConfirm() {
 }
 
 watch(visible, async value => {
-  if (!value) {
-    return;
-  }
-
+  if (!value) return;
   model.userId = props.initial?.userId || '';
   model.roleId = props.initial?.roleId || '';
   model.remark = props.initial?.remark || '';
-
   await nextTick();
   formRef.value?.clearValidate();
 });
 </script>
 
 <template>
-  <BusinessFormDialog v-model="visible" :title="dialogTitle" preset="sm" @confirm="handleConfirm">
+  <BusinessFormDialog v-model="visible" title="调整成员角色" preset="sm" @confirm="handleConfirm">
     <ElForm ref="formRef" :model="model" :rules="rules" label-position="top" :validate-on-rule-change="false">
       <ElRow :gutter="16">
         <ElCol :span="24">
-          <ElFormItem v-if="mode === 'create'" label="成员用户" prop="userId">
-            <BusinessUserSelect
-              v-model="model.userId"
-              :options="userOptions"
-              :disabled-user-ids="disabledUserIds"
-              disabled-label="已添加"
-              placeholder="请选择成员用户"
-            />
-          </ElFormItem>
-          <ElFormItem v-else label="成员用户">
+          <ElFormItem label="成员用户">
             <ElInput
               :model-value="userLabelMap.get(String(model.userId)) || ''"
               readonly
@@ -111,17 +78,13 @@ watch(visible, async value => {
         <ElCol :span="24">
           <ElFormItem label="目标角色" prop="roleId">
             <ElSelect v-model="model.roleId" class="w-full" placeholder="请选择角色">
-              <ElOption
-                v-for="role in roleOptions"
-                :key="role.id"
-                :label="role.name"
-                :value="role.id"
-                :disabled="isManagerRole(role)"
-              >
-                <span>{{ role.name }}</span>
-                <span v-if="isManagerRole(role)" class="product-create-team-member-dialog__role-hint">
-                  （已由第 1 步指定）
-                </span>
+              <ElOption v-for="role in selectableRoles" :key="role.id" :label="role.name" :value="role.id">
+                <div class="product-create-team-member-dialog__role-option">
+                  <span class="product-create-team-member-dialog__role-option-name">{{ role.name }}</span>
+                  <ElTooltip v-if="role.remark" :content="role.remark" placement="right" :show-after="120">
+                    <icon-ep:info-filled class="product-create-team-member-dialog__role-option-info" @click.stop />
+                  </ElTooltip>
+                </div>
               </ElOption>
             </ElSelect>
           </ElFormItem>
@@ -144,12 +107,6 @@ watch(visible, async value => {
 </template>
 
 <style scoped>
-.product-create-team-member-dialog__role-hint {
-  margin-left: 8px;
-  color: rgb(148 163 184 / 96%);
-  font-size: 12px;
-}
-
 :deep(.product-create-team-member-dialog__readonly-input .el-input__wrapper) {
   background: linear-gradient(180deg, rgb(241 245 249 / 98%), rgb(226 232 240 / 94%)), rgb(241 245 249);
   box-shadow: 0 0 0 1px rgb(203 213 225 / 96%) inset;
@@ -166,4 +123,31 @@ watch(visible, async value => {
   -webkit-text-fill-color: rgb(51 65 85 / 96%);
   cursor: default;
 }
+
+.product-create-team-member-dialog__role-option {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  width: 100%;
+}
+
+.product-create-team-member-dialog__role-option-name {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.product-create-team-member-dialog__role-option-info {
+  flex-shrink: 0;
+  font-size: 14px;
+  color: var(--el-text-color-placeholder);
+  cursor: help;
+}
+
+.product-create-team-member-dialog__role-option-info:hover {
+  color: var(--el-color-primary);
+}
 </style>
diff --git a/src/views/product/list/modules/product-create-team-step.vue b/src/views/product/list/modules/product-create-team-step.vue
index 144cb9a..9fa3cb1 100644
--- a/src/views/product/list/modules/product-create-team-step.vue
+++ b/src/views/product/list/modules/product-create-team-step.vue
@@ -1,8 +1,9 @@
 <script setup lang="ts">
-import { computed, onMounted, ref, watch } from 'vue';
+import { computed, ref, watch } from 'vue';
 import { PRODUCT_MANAGER_ROLE_CODE } from '@/constants/business';
-import { fetchGetRoleSimpleList } from '@/service/api';
-import { getProductTeamTableHeight } from '../../setting/shared';
+import ProductTeamBatchDialog, {
+  type BatchMemberPayload
+} from '@/views/product/shared/components/product-team-batch-dialog.vue';
 import ProductCreateTeamMemberDialog from './product-create-team-member-dialog.vue';
 import type { ProductCreateBaseForm } from './product-create-base-form.vue';
 
@@ -21,57 +22,34 @@ interface DraftMember {
 interface Props {
   baseInfo: ProductCreateBaseForm;
   userOptions: Api.SystemManage.UserSimple[];
+  roleOptions: Api.SystemManage.RoleSimple[];
+  roleLoading: boolean;
+  managerRoleError: string;
 }
 
 const props = defineProps<Props>();
 
 const emit = defineEmits<{
   (e: 'update:members', members: Api.Product.CreateProductMemberParams[]): void;
-  (e: 'update:watcherUserIds', watcherUserIds: string[]): void;
 }>();
 
-const roleOptions = ref<Api.SystemManage.RoleSimple[]>([]);
-const roleLoading = ref(false);
-const managerRoleError = ref('');
 const members = ref<DraftMember[]>([]);
 
 const memberDialogVisible = ref(false);
-const memberDialogMode = ref<'create' | 'edit'>('create');
 const editingKey = ref<string | null>(null);
 
-const watcherUserIds = ref<string[]>([]);
+const batchDialogVisible = ref(false);
 
-// 关心人候选用户：排除已在团队成员列表中的用户（包含产品经理本人）
-const watcherUserOptions = computed(() => {
-  const memberUserIds = new Set(members.value.map(item => item.userId).filter(Boolean));
-  return props.userOptions.filter(user => !memberUserIds.has(user.id));
-});
-
-const teamTableHeight = getProductTeamTableHeight(4);
+const batchDisabledUserIds = computed(() => members.value.map(item => item.userId).filter(Boolean));
 
 const userLabelMap = computed(() => new Map(props.userOptions.map(item => [String(item.id), item.nickname])));
 
-const managerRole = computed(() => roleOptions.value.find(item => item.code === PRODUCT_MANAGER_ROLE_CODE) ?? null);
-
-// 弹框传入的禁选用户列表：新增时排除所有已选；编辑时排除自身以外的已选
-const dialogDisabledUserIds = computed(() => {
-  return members.value
-    .filter(item => !editingKey.value || item.key !== editingKey.value)
-    .map(item => item.userId)
-    .filter(Boolean);
-});
+const managerRole = computed(() => props.roleOptions.find(item => item.code === PRODUCT_MANAGER_ROLE_CODE) ?? null);
 
 const dialogInitial = computed(() => {
-  if (memberDialogMode.value === 'create' || !editingKey.value) {
-    return null;
-  }
-
+  if (!editingKey.value) return null;
   const target = members.value.find(item => item.key === editingKey.value);
-
-  if (!target) {
-    return null;
-  }
-
+  if (!target) return null;
   return { userId: target.userId, roleId: target.roleId, remark: target.remark };
 });
 
@@ -80,31 +58,13 @@ function getUserNickname(userId: string) {
 }
 
 function getRoleName(roleId: string) {
-  return roleOptions.value.find(item => item.id === roleId)?.name || '--';
+  return props.roleOptions.find(item => item.id === roleId)?.name || '--';
 }
 
 function generateKey() {
   return `${Date.now()}_${Math.random().toString(36).slice(2, 8)}`;
 }
 
-async function loadRoles() {
-  roleLoading.value = true;
-  managerRoleError.value = '';
-
-  const { data } = await fetchGetRoleSimpleList({ scopeType: 'object', objectType: 'product' });
-
-  roleLoading.value = false;
-
-  roleOptions.value = data ?? [];
-
-  if (!managerRole.value) {
-    managerRoleError.value = '未找到产品经理角色，请联系管理员';
-    return;
-  }
-
-  refreshManagerRow();
-}
-
 function refreshManagerRow() {
   const managerUserId = props.baseInfo.managerUserId;
 
@@ -132,14 +92,25 @@ function refreshManagerRow() {
   emitMembers();
 }
 
-function openCreate() {
-  memberDialogMode.value = 'create';
-  editingKey.value = null;
-  memberDialogVisible.value = true;
+function openBatch() {
+  batchDialogVisible.value = true;
+}
+
+function handleBatchSubmit(payloads: BatchMemberPayload[]) {
+  for (const p of payloads) {
+    members.value.push({
+      key: generateKey(),
+      userId: p.userId,
+      roleId: p.roleId,
+      remark: p.remark,
+      locked: false
+    });
+  }
+  batchDialogVisible.value = false;
+  emitMembers();
 }
 
 function openEdit(row: DraftMember) {
-  memberDialogMode.value = 'edit';
   editingKey.value = row.key;
   memberDialogVisible.value = true;
 }
@@ -149,27 +120,16 @@ function removeMember(key: string) {
   emitMembers();
 }
 
-function handleMemberSubmit(payload: { userId: string; roleId: string; remark: string }) {
-  if (memberDialogMode.value === 'create') {
-    members.value.push({
-      key: generateKey(),
-      userId: payload.userId,
+function handleMemberEditSubmit(payload: { userId: string; roleId: string; remark: string }) {
+  if (!editingKey.value) return;
+  const idx = members.value.findIndex(item => item.key === editingKey.value);
+  if (idx >= 0) {
+    members.value[idx] = {
+      ...members.value[idx],
       roleId: payload.roleId,
-      remark: payload.remark,
-      locked: false
-    });
-  } else if (editingKey.value) {
-    const idx = members.value.findIndex(item => item.key === editingKey.value);
-
-    if (idx >= 0) {
-      members.value[idx] = {
-        ...members.value[idx],
-        roleId: payload.roleId,
-        remark: payload.remark
-      };
-    }
+      remark: payload.remark
+    };
   }
-
   memberDialogVisible.value = false;
   emitMembers();
 }
@@ -188,8 +148,8 @@ function emitMembers() {
 }
 
 async function runValidate(): Promise<boolean> {
-  if (managerRoleError.value) {
-    window.$message?.error(managerRoleError.value);
+  if (props.managerRoleError) {
+    window.$message?.error(props.managerRoleError);
     return false;
   }
 
@@ -214,43 +174,32 @@ async function runValidate(): Promise<boolean> {
   return true;
 }
 
-function handleWatcherChange(ids: string[]) {
-  watcherUserIds.value = ids;
-  emit('update:watcherUserIds', ids);
-}
-
-// 团队成员变化时，剔除已被加入团队的关心人，避免重叠
-watch(
-  () => members.value.map(item => item.userId).join(','),
-  () => {
-    const memberUserIds = new Set(members.value.map(item => item.userId).filter(Boolean));
-    const filtered = watcherUserIds.value.filter(id => !memberUserIds.has(id));
-
-    if (filtered.length !== watcherUserIds.value.length) {
-      handleWatcherChange(filtered);
-    }
-  }
-);
-
-onMounted(loadRoles);
-
 watch(
   () => props.baseInfo.managerUserId,
   () => {
-    if (!managerRoleError.value && managerRole.value) {
+    if (!props.managerRoleError && managerRole.value) {
       refreshManagerRow();
     }
   }
 );
 
+// roleOptions 异步加载到位后,补一次 locked 行刷新
+watch(managerRole, () => {
+  if (!props.managerRoleError && managerRole.value && props.baseInfo.managerUserId) {
+    refreshManagerRow();
+  }
+});
+
 defineExpose({ validate: runValidate });
 </script>
 
 <template>
   <div v-loading="roleLoading" class="team-step">
-    <div class="team-step__toolbar">
-      <ElButton type="primary" plain :disabled="Boolean(managerRoleError)" @click="openCreate">新增成员</ElButton>
-    </div>
+    <button type="button" class="team-step__add" :disabled="Boolean(managerRoleError)" @click="openBatch">
+      <icon-ep:plus class="team-step__add-icon" />
+      <span>新增成员</span>
+      <span class="team-step__add-hint">从部门 / 管理链路 / 全公司 批量选人</span>
+    </button>
 
     <ElAlert
       v-if="managerRoleError"
@@ -261,62 +210,49 @@ defineExpose({ validate: runValidate });
       class="team-step__alert"
     />
 
-    <ElTable :data="members" :height="teamTableHeight" border row-key="key" empty-text="点击右上角“新增成员”添加">
-      <ElTableColumn type="index" label="序号" width="64" align="center" />
-      <ElTableColumn label="成员姓名" min-width="120">
-        <template #default="{ row }">
-          {{ getUserNickname(row.userId) }}
-        </template>
-      </ElTableColumn>
-      <ElTableColumn label="当前角色" min-width="140">
-        <template #default="{ row }">
-          {{ getRoleName(row.roleId) }}
-        </template>
-      </ElTableColumn>
-      <ElTableColumn label="备注" min-width="200" show-overflow-tooltip>
-        <template #default="{ row }">
-          {{ row.remark || '--' }}
-        </template>
-      </ElTableColumn>
-      <ElTableColumn label="操作" width="150" fixed="right" align="center">
-        <template #default="{ row }">
-          <div class="team-step__actions">
-            <ElButton link type="primary" :disabled="row.locked" @click="openEdit(row)">编辑</ElButton>
-            <ElButton link type="danger" :disabled="row.locked" @click="removeMember(row.key)">移除</ElButton>
-          </div>
-        </template>
-      </ElTableColumn>
-    </ElTable>
-
-    <div class="watcher-row">
-      <span class="watcher-row__label">
-        关心人
-        <span class="watcher-row__optional">（选填）</span>
-      </span>
-      <ElSelect
-        :model-value="watcherUserIds"
-        multiple
-        filterable
-        clearable
-        collapse-tags
-        collapse-tags-tooltip
-        :max-collapse-tags="3"
-        placeholder="可在列表 / 概览看到此产品的关注人"
-        class="watcher-row__select"
-        @update:model-value="handleWatcherChange"
-      >
-        <ElOption v-for="item in watcherUserOptions" :key="item.id" :value="item.id" :label="item.nickname" />
-      </ElSelect>
+    <div class="team-step__table-wrap">
+      <ElTable :data="members" height="100%" border row-key="key" empty-text="点击右上角“新增成员”添加">
+        <ElTableColumn type="index" label="序号" width="64" align="center" />
+        <ElTableColumn label="成员姓名" min-width="120">
+          <template #default="{ row }">
+            {{ getUserNickname(row.userId) }}
+          </template>
+        </ElTableColumn>
+        <ElTableColumn label="当前角色" min-width="140">
+          <template #default="{ row }">
+            {{ getRoleName(row.roleId) }}
+          </template>
+        </ElTableColumn>
+        <ElTableColumn label="备注" min-width="200" show-overflow-tooltip>
+          <template #default="{ row }">
+            {{ row.remark || '--' }}
+          </template>
+        </ElTableColumn>
+        <ElTableColumn label="操作" width="150" fixed="right" align="center">
+          <template #default="{ row }">
+            <div class="team-step__actions">
+              <ElButton link type="primary" :disabled="row.locked" @click="openEdit(row)">编辑</ElButton>
+              <ElButton link type="danger" :disabled="row.locked" @click="removeMember(row.key)">移除</ElButton>
+            </div>
+          </template>
+        </ElTableColumn>
+      </ElTable>
     </div>
 
     <ProductCreateTeamMemberDialog
       v-model:visible="memberDialogVisible"
-      :mode="memberDialogMode"
       :initial="dialogInitial"
       :user-options="userOptions"
       :role-options="roleOptions"
-      :disabled-user-ids="dialogDisabledUserIds"
-      @submit="handleMemberSubmit"
+      @submit="handleMemberEditSubmit"
+    />
+
+    <ProductTeamBatchDialog
+      v-model:visible="batchDialogVisible"
+      :user-options="userOptions"
+      :role-options="roleOptions"
+      :disabled-user-ids="batchDisabledUserIds"
+      @submit="handleBatchSubmit"
     />
   </div>
 </template>
@@ -326,16 +262,65 @@ defineExpose({ validate: runValidate });
   display: flex;
   flex-direction: column;
   gap: 14px;
+  height: 100%;
   min-height: 0;
 }
 
-.team-step__toolbar {
+.team-step__add {
   display: flex;
-  justify-content: flex-end;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  width: 100%;
+  height: 44px;
+  padding: 0 16px;
+  border: 1px dashed var(--el-border-color-darker);
+  border-radius: 6px;
+  background: transparent;
+  color: var(--el-text-color-regular);
+  font-size: 13px;
+  cursor: pointer;
+  transition:
+    border-color 0.2s ease,
+    color 0.2s ease,
+    background-color 0.2s ease;
+  flex-shrink: 0;
+}
+
+.team-step__add:hover:not(:disabled) {
+  border-color: var(--el-color-primary);
+  color: var(--el-color-primary);
+  background: var(--el-color-primary-light-9);
+}
+
+.team-step__add:disabled {
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+
+.team-step__add-icon {
+  font-size: 16px;
+}
+
+.team-step__add-hint {
+  color: var(--el-text-color-placeholder);
+  font-size: 12px;
+  font-weight: 400;
+}
+
+.team-step__add:hover:not(:disabled) .team-step__add-hint {
+  color: var(--el-color-primary);
+  opacity: 0.7;
 }
 
 .team-step__alert {
   margin: 0;
+  flex-shrink: 0;
+}
+
+.team-step__table-wrap {
+  flex: 1 1 auto;
+  min-height: 0;
 }
 
 .team-step__actions {
@@ -343,27 +328,4 @@ defineExpose({ validate: runValidate });
   align-items: center;
   gap: 12px;
 }
-
-.watcher-row {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-
-.watcher-row__label {
-  flex: 0 0 auto;
-  font-size: 13px;
-  font-weight: 500;
-  color: rgb(60 70 95 / 96%);
-}
-
-.watcher-row__optional {
-  color: rgb(140 150 170 / 96%);
-  font-weight: 400;
-}
-
-.watcher-row__select {
-  flex: 1 1 auto;
-  min-width: 0;
-}
 </style>
diff --git a/src/views/product/list/modules/product-operate-dialog.vue b/src/views/product/list/modules/product-operate-dialog.vue
index 64b796a..e50c922 100644
--- a/src/views/product/list/modules/product-operate-dialog.vue
+++ b/src/views/product/list/modules/product-operate-dialog.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import { computed, nextTick, ref, watch } from 'vue';
+import { PRODUCT_MANAGER_ROLE_CODE } from '@/constants/business';
 import { RDMS_OBJECT_DIRECTION_DICT_CODE } from '@/constants/dict';
-import { fetchCreateProductWithTeam, fetchGetProduct, fetchUpdateProduct } from '@/service/api';
+import { fetchCreateProductWithTeam, fetchGetProduct, fetchGetRoleSimpleList, fetchUpdateProduct } from '@/service/api';
 import { useForm, useFormRules } from '@/hooks/common/form';
 import BusinessFormDialog from '@/components/custom/business-form-dialog.vue';
 import DictSelect from '@/components/custom/dict-select.vue';
@@ -112,9 +113,29 @@ const baseFormRef = ref<InstanceType<typeof ProductCreateBaseForm> | null>(null)
 const teamStepRef = ref<InstanceType<typeof ProductCreateTeamStep> | null>(null);
 const currentStep = ref<1 | 2>(1);
 
+// === 新增模式:角色列表(父级加载,下发给 team-step 与批量弹层) ===
+const roleOptions = ref<Api.SystemManage.RoleSimple[]>([]);
+const roleLoading = ref(false);
+const managerRoleError = ref('');
+
+const managerRole = computed(() => roleOptions.value.find(item => item.code === PRODUCT_MANAGER_ROLE_CODE) ?? null);
+
+async function loadRoles() {
+  roleLoading.value = true;
+  managerRoleError.value = '';
+
+  const { data } = await fetchGetRoleSimpleList({ scopeType: 'object', objectType: 'product' });
+
+  roleLoading.value = false;
+  roleOptions.value = data ?? [];
+
+  if (!managerRole.value) {
+    managerRoleError.value = '未找到产品经理角色,请联系管理员';
+  }
+}
+
 const createBaseModel = ref<ProductCreateBaseFormModel>(createBaseInfo());
 const draftMembers = ref<Api.Product.CreateProductMemberParams[]>([]);
-const draftWatcherUserIds = ref<string[]>([]);
 
 function createBaseInfo(): ProductCreateBaseFormModel {
   return { code: '', name: '', directionCode: '', managerUserId: null, description: '' };
@@ -158,8 +179,7 @@ async function handleCreateSubmit() {
       managerUserId: createBaseModel.value.managerUserId as string,
       description: getNullableText(createBaseModel.value.description)
     },
-    members: draftMembers.value,
-    watcherUserIds: draftWatcherUserIds.value.length > 0 ? draftWatcherUserIds.value : undefined
+    members: draftMembers.value
   };
 
   const { error, data } = await fetchCreateProductWithTeam(payload);
@@ -188,8 +208,8 @@ watch(visible, async value => {
     editModel.value = createEditModel();
     createBaseModel.value = createBaseInfo();
     draftMembers.value = [];
-    draftWatcherUserIds.value = [];
     await nextTick();
+    await loadRoles();
     editFormRef.value?.clearValidate();
     return;
   }
@@ -295,7 +315,7 @@ watch(visible, async value => {
     </ElForm>
   </BusinessFormDialog>
 
-  <!-- 新增模式：两步向导（复合内容特例，自定义 ElDialog 880px） -->
+  <!-- 新增模式:两步向导(复合内容特例,1080px,左侧概念区 + 右侧步骤面板) -->
   <ElDialog
     v-else
     v-model="visible"
@@ -304,43 +324,85 @@ watch(visible, async value => {
     :close-on-click-modal="false"
     destroy-on-close
     align-center
-    width="760px"
+    width="1080px"
   >
-    <div class="product-create-dialog__stepbar">
-      <div class="product-create-dialog__step" :class="{ 'is-active': currentStep === 1, 'is-done': currentStep > 1 }">
-        <span class="product-create-dialog__step-index">1</span>
-        <span class="product-create-dialog__step-text">
-          <strong>基础资料</strong>
-          <small>定义产品身份和负责人</small>
-        </span>
-      </div>
-      <div class="product-create-dialog__step" :class="{ 'is-active': currentStep === 2 }">
-        <span class="product-create-dialog__step-index">2</span>
-        <span class="product-create-dialog__step-text">
-          <strong>初始化团队</strong>
-          <small>配置对象域成员角色</small>
-        </span>
-      </div>
-    </div>
+    <div class="product-create-dialog__split">
+      <aside class="product-create-dialog__guide">
+        <div class="product-create-dialog__guide-hero">
+          <div class="product-create-dialog__guide-hero-icon">
+            <icon-ep:box />
+          </div>
+          <div class="product-create-dialog__guide-hero-text">
+            <div class="product-create-dialog__guide-hero-title">产品</div>
+            <div class="product-create-dialog__guide-hero-sub">需求 · 项目 · 迭代 的承载单元</div>
+          </div>
+        </div>
 
-    <div class="product-create-dialog__body">
-      <div v-show="currentStep === 1" class="product-create-dialog__panel">
-        <ProductCreateBaseForm ref="baseFormRef" v-model="createBaseModel" :manager-user-options="managerUserOptions" />
-      </div>
-      <div v-show="currentStep === 2" class="product-create-dialog__panel">
-        <ProductCreateTeamStep
-          ref="teamStepRef"
-          :base-info="createBaseModel"
-          :user-options="managerUserOptions"
-          @update:members="draftMembers = $event"
-          @update:watcher-user-ids="draftWatcherUserIds = $event"
-        />
+        <p class="product-create-dialog__guide-lead">
+          产品与需求池管理,提供多维度的需求规划工具,打通客户、业务团队和产研团队之间的协作。
+        </p>
+
+        <section class="product-create-dialog__guide-section">
+          <h4>包含</h4>
+          <p>需求、变更、迭代、模块、文档、状态、统计报表。</p>
+        </section>
+
+        <section class="product-create-dialog__guide-section">
+          <h4>参与人</h4>
+          <p>产品经理(必填,创建后锁定) · 团队角色(业务专员 / 游客 / 关注人)。</p>
+        </section>
+
+        <section class="product-create-dialog__guide-section">
+          <h4>命名建议</h4>
+          <p>建议使用业务团队约定俗成的简短名称,产品创建后不再轻易调整,会影响下游引用。</p>
+        </section>
+      </aside>
+
+      <div class="product-create-dialog__main">
+        <div class="product-create-dialog__stepbar">
+          <div
+            class="product-create-dialog__step"
+            :class="{ 'is-active': currentStep === 1, 'is-done': currentStep > 1 }"
+          >
+            <span class="product-create-dialog__step-index">1</span>
+            <span class="product-create-dialog__step-text">
+              <strong>基础资料</strong>
+            </span>
+          </div>
+          <div class="product-create-dialog__step" :class="{ 'is-active': currentStep === 2 }">
+            <span class="product-create-dialog__step-index">2</span>
+            <span class="product-create-dialog__step-text">
+              <strong>初始化团队</strong>
+            </span>
+          </div>
+        </div>
+
+        <div class="product-create-dialog__body">
+          <div v-show="currentStep === 1" class="product-create-dialog__panel">
+            <ProductCreateBaseForm
+              ref="baseFormRef"
+              v-model="createBaseModel"
+              :manager-user-options="managerUserOptions"
+            />
+          </div>
+          <div v-show="currentStep === 2" class="product-create-dialog__panel">
+            <ProductCreateTeamStep
+              ref="teamStepRef"
+              :base-info="createBaseModel"
+              :user-options="managerUserOptions"
+              :role-options="roleOptions"
+              :role-loading="roleLoading"
+              :manager-role-error="managerRoleError"
+              @update:members="draftMembers = $event"
+            />
+          </div>
+        </div>
       </div>
     </div>
 
     <template #footer>
       <div class="product-create-dialog__footer">
-        <span class="product-create-dialog__footer-meta">第 {{ currentStep }} 步，共 2 步</span>
+        <span class="product-create-dialog__footer-meta">第 {{ currentStep }} 步,共 2 步</span>
         <ElSpace :size="10">
           <ElButton @click="closeDialog">取消</ElButton>
           <ElButton v-if="currentStep === 2" @click="goPrev">上一步</ElButton>
@@ -378,6 +440,92 @@ watch(visible, async value => {
   padding: 0;
 }
 
+.product-create-dialog__split {
+  display: grid;
+  grid-template-columns: 280px 1fr;
+  min-height: 0;
+}
+
+.product-create-dialog__guide {
+  padding: 28px 24px;
+  background: linear-gradient(180deg, #f7f9fc 0%, #fafbfc 100%);
+  border-right: 1px solid rgb(229 233 242 / 96%);
+  overflow-y: auto;
+  max-height: min(720px, calc(100vh - 160px));
+}
+
+.product-create-dialog__guide-hero {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 24px;
+  padding-bottom: 20px;
+  border-bottom: 1px solid rgb(229 233 242 / 96%);
+}
+
+.product-create-dialog__guide-hero-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 44px;
+  height: 44px;
+  border-radius: 10px;
+  background: var(--el-color-primary-light-9);
+  color: var(--el-color-primary);
+  font-size: 22px;
+  flex-shrink: 0;
+}
+
+.product-create-dialog__guide-hero-text {
+  min-width: 0;
+}
+
+.product-create-dialog__guide-hero-title {
+  font-size: 15px;
+  font-weight: 650;
+  color: var(--el-text-color-primary);
+  line-height: 1.4;
+}
+
+.product-create-dialog__guide-hero-sub {
+  margin-top: 2px;
+  font-size: 12px;
+  color: var(--el-text-color-secondary);
+  line-height: 1.4;
+}
+
+.product-create-dialog__guide-lead {
+  margin: 0 0 24px;
+  font-size: 13.5px;
+  line-height: 1.8;
+  color: var(--el-text-color-regular);
+}
+
+.product-create-dialog__guide-section + .product-create-dialog__guide-section {
+  margin-top: 20px;
+}
+
+.product-create-dialog__guide-section h4 {
+  margin: 0 0 6px;
+  font-size: 12.5px;
+  font-weight: 700;
+  color: var(--el-text-color-primary);
+  letter-spacing: 0.4px;
+}
+
+.product-create-dialog__guide-section p {
+  margin: 0;
+  font-size: 13px;
+  line-height: 1.75;
+  color: var(--el-text-color-regular);
+}
+
+.product-create-dialog__main {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
 .product-create-dialog__stepbar {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -433,13 +581,15 @@ watch(visible, async value => {
 }
 
 .product-create-dialog__body {
-  min-height: 0;
-  max-height: min(560px, calc(100vh - 240px));
-  overflow: auto;
+  height: min(520px, calc(100vh - 240px));
+  overflow: hidden;
 }
 
 .product-create-dialog__panel {
+  height: 100%;
   padding: 24px;
+  overflow: auto;
+  box-sizing: border-box;
 }
 
 .product-create-dialog__footer {
diff --git a/src/views/product/setting/index.vue b/src/views/product/setting/index.vue
index 5d594a6..54d610a 100644
--- a/src/views/product/setting/index.vue
+++ b/src/views/product/setting/index.vue
@@ -4,6 +4,8 @@ import { useMediaQuery } from '@vueuse/core';
 import { LAYOUT_SCROLL_EL_ID } from '@sa/materials';
 import { objectContextDomainConfigs } from '@/constants/object-context';
 import {
+  fetchBatchCreateProductMembers,
+  fetchBatchInactiveProductMembers,
   fetchChangeProductStatus,
   fetchCreateProductMember,
   fetchDeleteProduct,
@@ -19,8 +21,12 @@ import { useAuthStore } from '@/store/modules/auth';
 import { useObjectContextStore } from '@/store/modules/object-context';
 import { useThemeStore } from '@/store/modules/theme';
 import { useRouterPush } from '@/hooks/common/router';
+import ProductTeamBatchDialog, {
+  type BatchMemberPayload
+} from '@/views/product/shared/components/product-team-batch-dialog.vue';
 import { useCurrentProduct } from '../shared/use-current-product';
 import BaseInfoDialog from './modules/base-info-dialog.vue';
+import MemberBatchRemoveDialog from './modules/member-batch-remove-dialog.vue';
 import MemberOperateDialog from './modules/member-operate-dialog.vue';
 import MemberRemoveDialog from './modules/member-remove-dialog.vue';
 import ProductDeleteDialog from './modules/product-delete-dialog.vue';
@@ -70,7 +76,11 @@ const pageLoading = ref(false);
 const memberLoading = ref(false);
 const baseInfoVisible = ref(false);
 const memberOperateVisible = ref(false);
+const memberBatchVisible = ref(false);
 const memberRemoveVisible = ref(false);
+const memberBatchRemoveVisible = ref(false);
+const teamPanelRef = ref<InstanceType<typeof SettingTeamPanel> | null>(null);
+const selectedBatchRemoveMembers = ref<Api.Product.ProductMember[]>([]);
 const statusActionVisible = ref(false);
 const deleteVisible = ref(false);
 const memberOperateMode = ref<'create' | 'edit'>('create');
@@ -217,9 +227,7 @@ function scrollToSection(key: string) {
 }
 
 function openCreateMember() {
-  memberOperateMode.value = 'create';
-  selectedMember.value = null;
-  memberOperateVisible.value = true;
+  memberBatchVisible.value = true;
 }
 
 function openEditMember(member: Api.Product.ProductMember) {
@@ -233,6 +241,12 @@ function openRemoveMember(member: Api.Product.ProductMember) {
   memberRemoveVisible.value = true;
 }
 
+function openBatchRemoveMember(targetMembers: Api.Product.ProductMember[]) {
+  if (!targetMembers.length) return;
+  selectedBatchRemoveMembers.value = targetMembers;
+  memberBatchRemoveVisible.value = true;
+}
+
 function openLifecycleAction(action: Api.Product.ProductLifecycleAction) {
   selectedAction.value = action;
   statusActionVisible.value = true;
@@ -288,6 +302,29 @@ async function handleSubmitMemberOperate(event: {
   }
 }
 
+async function handleSubmitMemberBatch(payloads: BatchMemberPayload[]) {
+  if (!currentObjectId.value || !payloads.length) {
+    return;
+  }
+
+  const { error } = await fetchBatchCreateProductMembers(currentObjectId.value, {
+    members: payloads.map(item => ({
+      userId: item.userId,
+      roleId: item.roleId,
+      remark: item.remark.trim() || null
+    }))
+  });
+
+  if (error) {
+    return;
+  }
+
+  window.$message?.success(`已新增 ${payloads.length} 名成员`);
+  memberBatchVisible.value = false;
+
+  await Promise.all([loadMembers(), loadSettings()]);
+}
+
 async function handleSubmitRemoveMember(payload: Api.Product.InactiveProductMemberParams) {
   if (!currentObjectId.value || !selectedMember.value?.id) {
     return;
@@ -305,6 +342,30 @@ async function handleSubmitRemoveMember(payload: Api.Product.InactiveProductMemb
   await Promise.all([loadMembers(), loadSettings()]);
 }
 
+async function handleSubmitBatchRemoveMember(payload: { reason: string | null }) {
+  if (!currentObjectId.value || !selectedBatchRemoveMembers.value.length) {
+    return;
+  }
+
+  const memberIds = selectedBatchRemoveMembers.value.map(item => item.id).filter((id): id is string => Boolean(id));
+
+  if (!memberIds.length) return;
+
+  const { error } = await fetchBatchInactiveProductMembers(currentObjectId.value, {
+    memberIds,
+    reason: payload.reason
+  });
+
+  if (error) return;
+
+  window.$message?.success(`已移出 ${memberIds.length} 名成员`);
+  memberBatchRemoveVisible.value = false;
+  selectedBatchRemoveMembers.value = [];
+  teamPanelRef.value?.clearSelection();
+
+  await Promise.all([loadMembers(), loadSettings()]);
+}
+
 async function handleSubmitLifecycleAction(payload: Api.Product.ChangeProductStatusParams) {
   if (!currentObjectId.value || !selectedAction.value) {
     return;
@@ -393,6 +454,7 @@ watch(
 
         <section :id="sectionIdMap.team" class="product-setting-page__section">
           <SettingTeamPanel
+            ref="teamPanelRef"
             :members="members"
             :role-options="roleOptions"
             :loading="memberLoading"
@@ -400,6 +462,7 @@ watch(
             @create="openCreateMember"
             @edit="openEditMember"
             @remove="openRemoveMember"
+            @batch-remove="openBatchRemoveMember"
           />
         </section>
 
@@ -427,11 +490,23 @@ watch(
       :disabled-user-ids="members.filter(member => member.status === 0).map(member => member.userId)"
       @submit="handleSubmitMemberOperate"
     />
+    <ProductTeamBatchDialog
+      v-model:visible="memberBatchVisible"
+      :user-options="userOptions"
+      :role-options="roleOptions"
+      :disabled-user-ids="members.filter(member => member.status === 0).map(member => member.userId)"
+      @submit="handleSubmitMemberBatch"
+    />
     <MemberRemoveDialog
       v-model:visible="memberRemoveVisible"
       :member="selectedMember"
       @submit="handleSubmitRemoveMember"
     />
+    <MemberBatchRemoveDialog
+      v-model:visible="memberBatchRemoveVisible"
+      :members="selectedBatchRemoveMembers"
+      @submit="handleSubmitBatchRemoveMember"
+    />
     <StatusActionDialog
       v-model:visible="statusActionVisible"
       :action="selectedAction"
diff --git a/src/views/product/setting/modules/member-batch-remove-dialog.vue b/src/views/product/setting/modules/member-batch-remove-dialog.vue
new file mode 100644
index 0000000..2cc02e3
--- /dev/null
+++ b/src/views/product/setting/modules/member-batch-remove-dialog.vue
@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import { computed, reactive, watch } from 'vue';
+import BusinessFormDialog from '@/components/custom/business-form-dialog.vue';
+
+defineOptions({ name: 'MemberBatchRemoveDialog' });
+
+interface Props {
+  members: Api.Product.ProductMember[];
+}
+
+interface Emits {
+  (e: 'submit', payload: { reason: string | null }): void;
+}
+
+const props = defineProps<Props>();
+const emit = defineEmits<Emits>();
+
+const visible = defineModel<boolean>('visible', {
+  default: false
+});
+
+const model = reactive({
+  reason: ''
+});
+
+const previewNames = computed(() => {
+  const names = props.members.map(item => item.userNickname || item.userId || '').filter(Boolean);
+
+  if (names.length <= 5) {
+    return names.join('、');
+  }
+
+  return `${names.slice(0, 5).join('、')} 等 ${names.length} 人`;
+});
+
+function handleConfirm() {
+  emit('submit', {
+    reason: model.reason.trim() || null
+  });
+}
+
+watch(
+  () => visible.value,
+  value => {
+    if (!value) {
+      return;
+    }
+
+    model.reason = '';
+  }
+);
+</script>
+
+<template>
+  <BusinessFormDialog v-model="visible" title="批量移出成员" preset="sm" @confirm="handleConfirm">
+    <ElAlert
+      :title="`确认将选中的 ${props.members.length} 名成员（${previewNames}）从当前产品团队中移出吗？`"
+      type="warning"
+      :closable="false"
+      class="mb-16px"
+    />
+    <ElForm label-position="top">
+      <ElFormItem label="移出原因">
+        <ElInput
+          v-model="model.reason"
+          type="textarea"
+          :rows="4"
+          maxlength="500"
+          show-word-limit
+          placeholder="请输入移出原因（统一应用到所有选中成员）"
+        />
+      </ElFormItem>
+    </ElForm>
+  </BusinessFormDialog>
+</template>
diff --git a/src/views/product/setting/modules/setting-team-panel.vue b/src/views/product/setting/modules/setting-team-panel.vue
index 23fa53d..1a50826 100644
--- a/src/views/product/setting/modules/setting-team-panel.vue
+++ b/src/views/product/setting/modules/setting-team-panel.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed, ref, watch } from 'vue';
+import type { TableInstance } from 'element-plus';
 import { filterProductMembers, formatProductMemberDate, getProductTeamTableHeight } from '../shared';
 
 defineOptions({ name: 'SettingTeamPanel' });
@@ -15,6 +16,7 @@ interface Emits {
   (e: 'create'): void;
   (e: 'edit', member: Api.Product.ProductMember): void;
   (e: 'remove', member: Api.Product.ProductMember): void;
+  (e: 'batch-remove', members: Api.Product.ProductMember[]): void;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -26,19 +28,41 @@ const emit = defineEmits<Emits>();
 const searchKeyword = ref('');
 const selectedRoleId = ref('');
 const teamTableHeight = getProductTeamTableHeight(5);
+const tableRef = ref<TableInstance | null>(null);
+const selectedRows = ref<Api.Product.ProductMember[]>([]);
+const selectedCount = computed(() => selectedRows.value.length);
+
+function isRowSelectable(row: Api.Product.ProductMember) {
+  return row.status === 0 && !row.managerFlag;
+}
+
+function handleSelectionChange(rows: Api.Product.ProductMember[]) {
+  selectedRows.value = rows;
+}
+
+function handleBatchRemove() {
+  if (!selectedRows.value.length) return;
+  emit('batch-remove', [...selectedRows.value]);
+}
+
+function clearSelection() {
+  tableRef.value?.clearSelection();
+  selectedRows.value = [];
+}
+
+defineExpose({ clearSelection });
 const roleFilterOptions = computed(() => {
-  const roleMap = new Map<string, string>();
+  const seen = new Set<string>();
+  const result: Api.SystemManage.RoleSimple[] = [];
 
   props.roleOptions.forEach(role => {
-    if (!roleMap.has(role.id)) {
-      roleMap.set(role.id, role.name);
-    }
+    if (role.visible === 0) return;
+    if (seen.has(role.id)) return;
+    seen.add(role.id);
+    result.push(role);
   });
 
-  return [...roleMap.entries()].map(([value, label]) => ({
-    value,
-    label
-  }));
+  return result;
 });
 const filteredMembers = computed(() =>
   filterProductMembers(props.members, {
@@ -49,7 +73,7 @@ const filteredMembers = computed(() =>
 const hasFilter = computed(() => Boolean(searchKeyword.value.trim() || selectedRoleId.value));
 
 watch(roleFilterOptions, options => {
-  if (selectedRoleId.value && !options.some(item => item.value === selectedRoleId.value)) {
+  if (selectedRoleId.value && !options.some(item => item.id === selectedRoleId.value)) {
     selectedRoleId.value = '';
   }
 });
@@ -72,12 +96,14 @@ function getMemberStatusTagType(status: Api.Product.ProductMemberStatus) {
         </div>
         <div class="setting-team-panel__toolbar">
           <ElSelect v-model="selectedRoleId" clearable placeholder="筛选角色" class="setting-team-panel__role-filter">
-            <ElOption
-              v-for="option in roleFilterOptions"
-              :key="option.value"
-              :label="option.label"
-              :value="option.value"
-            />
+            <ElOption v-for="role in roleFilterOptions" :key="role.id" :label="role.name" :value="role.id">
+              <div class="setting-team-panel__role-option">
+                <span class="setting-team-panel__role-option-name">{{ role.name }}</span>
+                <ElTooltip v-if="role.remark" :content="role.remark" placement="right" :show-after="120">
+                  <icon-ep:info-filled class="setting-team-panel__role-option-info" @click.stop />
+                </ElTooltip>
+              </div>
+            </ElOption>
           </ElSelect>
           <ElInput v-model="searchKeyword" clearable placeholder="搜索成员姓名" class="setting-team-panel__search" />
           <ElButton
@@ -89,35 +115,42 @@ function getMemberStatusTagType(status: Api.Product.ProductMemberStatus) {
           >
             新增成员
           </ElButton>
+          <ElButton
+            v-if="!props.readonly"
+            v-auth="{ code: 'project:product:update', source: 'object' }"
+            type="danger"
+            plain
+            :disabled="selectedCount === 0"
+            @click="handleBatchRemove"
+          >
+            批量移出{{ selectedCount > 0 ? `（${selectedCount}）` : '' }}
+          </ElButton>
         </div>
       </div>
     </template>
 
     <ElTable
+      ref="tableRef"
       v-loading="props.loading"
       :data="filteredMembers"
       :height="teamTableHeight"
       :empty-text="hasFilter ? '未找到匹配成员' : '暂无成员'"
       border
       row-key="id"
+      @selection-change="handleSelectionChange"
     >
+      <ElTableColumn
+        v-if="!props.readonly"
+        type="selection"
+        width="48"
+        align="center"
+        :selectable="(row: Api.Product.ProductMember) => isRowSelectable(row)"
+      />
       <ElTableColumn type="index" label="序号" width="64" align="center" />
       <ElTableColumn prop="userNickname" label="成员姓名" min-width="140" />
       <ElTableColumn label="当前角色" min-width="180">
         <template #default="{ row }">
-          <div class="setting-team-panel__role-cell">
-            <span class="setting-team-panel__role-main">{{ row.roleName || '--' }}</span>
-            <ElTag
-              v-for="extra in row.additionalRoleNames"
-              :key="extra"
-              size="small"
-              type="info"
-              effect="plain"
-              class="setting-team-panel__role-extra"
-            >
-              {{ extra }}
-            </ElTag>
-          </div>
+          {{ row.roleName || '--' }}
         </template>
       </ElTableColumn>
       <ElTableColumn label="成员状态" width="110" align="center">
@@ -196,15 +229,31 @@ function getMemberStatusTagType(status: Api.Product.ProductMemberStatus) {
   gap: 12px;
 }
 
-.setting-team-panel__role-cell {
-  display: inline-flex;
+.setting-team-panel__role-option {
+  display: flex;
   align-items: center;
-  flex-wrap: wrap;
-  gap: 6px;
+  justify-content: space-between;
+  gap: 8px;
+  width: 100%;
 }
 
-.setting-team-panel__role-extra {
-  font-weight: 400;
+.setting-team-panel__role-option-name {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.setting-team-panel__role-option-info {
+  flex-shrink: 0;
+  font-size: 14px;
+  color: var(--el-text-color-placeholder);
+  cursor: help;
+}
+
+.setting-team-panel__role-option-info:hover {
+  color: var(--el-color-primary);
 }
 
 @media (width <= 768px) {
diff --git a/src/views/product/shared/components/product-team-batch-dialog.vue b/src/views/product/shared/components/product-team-batch-dialog.vue
new file mode 100644
index 0000000..ce4a2a5
--- /dev/null
+++ b/src/views/product/shared/components/product-team-batch-dialog.vue
@@ -0,0 +1,1157 @@
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
+import { PRODUCT_MANAGER_ROLE_CODE } from '@/constants/business';
+import { fetchGetDeptSimpleList, fetchGetUserManagementRelationTree } from '@/service/api';
+import BusinessFormDialog from '@/components/custom/business-form-dialog.vue';
+import { buildMenuTree } from '@/views/system/shared/menu-tree';
+import IconEpUser from '~icons/ep/user';
+import IconEpOfficeBuilding from '~icons/ep/office-building';
+
+defineOptions({ name: 'ProductTeamBatchDialog' });
+
+type Source = 'dept' | 'chain' | 'all';
+
+export interface BatchMemberPayload {
+  userId: string;
+  roleId: string;
+  remark: string;
+}
+
+interface Props {
+  userOptions: Api.SystemManage.UserSimple[];
+  roleOptions: Api.SystemManage.RoleSimple[];
+  /** 已加入产品的 userId(包含产品经理 locked 行),作为禁选 */
+  disabledUserIds: readonly string[];
+}
+
+interface Emits {
+  (e: 'submit', payloads: BatchMemberPayload[]): void;
+}
+
+const props = defineProps<Props>();
+const emit = defineEmits<Emits>();
+
+const visible = defineModel<boolean>('visible', { default: false });
+
+const source = ref<Source>('dept');
+const currentNodeId = ref<string | null>(null);
+const selected = ref<Set<string>>(new Set());
+const roleOverrides = ref<Map<string, string>>(new Map());
+const hideAdded = ref(false);
+const treeSearch = ref('');
+const userSearch = ref('');
+const defaultRoleId = ref('');
+const batchRemark = ref('');
+
+const deptTree = ref<Api.SystemManage.DeptSimple[]>([]);
+const deptTreeLoading = ref(false);
+let deptTreeLoaded = false;
+
+async function ensureDeptTree() {
+  if (deptTreeLoaded) return;
+  deptTreeLoading.value = true;
+  const { data } = await fetchGetDeptSimpleList();
+  deptTreeLoading.value = false;
+  // 后端返回平铺数组(每条带 parentId),前端按 parentId 组装为嵌套树
+  deptTree.value = data ? buildMenuTree(data) : [];
+  deptTreeLoaded = true;
+}
+
+const chainTree = ref<Api.SystemManage.UserManagementRelationTreeRespVO[]>([]);
+const chainTreeLoading = ref(false);
+let chainTreeLoaded = false;
+
+async function ensureChainTree() {
+  if (chainTreeLoaded) return;
+  chainTreeLoading.value = true;
+  const { data } = await fetchGetUserManagementRelationTree({ fromUserIndex: false });
+  chainTreeLoading.value = false;
+  chainTree.value = data ?? [];
+  chainTreeLoaded = true;
+}
+
+const disabledUserIdSet = computed(() => new Set(props.disabledUserIds.map(String)));
+
+const selectableRoles = computed(() =>
+  props.roleOptions.filter(role => role.code !== PRODUCT_MANAGER_ROLE_CODE && role.visible !== 0)
+);
+
+const selectedCount = computed(() => selected.value.size);
+const visibleSelectedIds = computed(() => [...selected.value].slice(0, 4));
+const overflowSelectedCount = computed(() => Math.max(0, selected.value.size - 4));
+
+const overflowPopoverVisible = ref(false);
+const overflowReferenceEl = ref<HTMLElement | null>(null);
+
+function handleOverflowOutsideClick(e: MouseEvent) {
+  if (!overflowPopoverVisible.value) return;
+  const target = e.target as HTMLElement | null;
+  if (!target) return;
+  // 点击在 popover 自身 / 任意 popper / dropdown 菜单 / reference 按钮上,都不关
+  if (target.closest('.team-batch__overflow-popper')) return;
+  if (target.closest('.el-popper')) return;
+  if (target.closest('.el-dropdown-menu')) return;
+  if (target.closest('.el-dropdown__popper')) return;
+  if (overflowReferenceEl.value?.contains(target)) return;
+  overflowPopoverVisible.value = false;
+}
+
+onMounted(() => document.addEventListener('mousedown', handleOverflowOutsideClick, true));
+onBeforeUnmount(() => document.removeEventListener('mousedown', handleOverflowOutsideClick, true));
+const overrideCount = computed(() => {
+  let count = 0;
+  for (const uid of roleOverrides.value.keys()) {
+    if (selected.value.has(uid)) count += 1;
+  }
+  return count;
+});
+
+const confirmDisabled = computed(() => selectedCount.value === 0 || !defaultRoleId.value);
+
+function resetState() {
+  source.value = 'dept';
+  currentNodeId.value = null;
+  selected.value = new Set();
+  roleOverrides.value = new Map();
+  hideAdded.value = false;
+  treeSearch.value = '';
+  userSearch.value = '';
+  defaultRoleId.value = '';
+  batchRemark.value = '';
+  overflowPopoverVisible.value = false;
+}
+
+function collectDeptIds(node: Api.SystemManage.DeptSimple): string[] {
+  const ids: string[] = [String(node.id)];
+  if (node.children) {
+    for (const c of node.children) ids.push(...collectDeptIds(c));
+  }
+  return ids;
+}
+
+function getDeptUserIds(node: Api.SystemManage.DeptSimple): string[] {
+  const deptIds = new Set(collectDeptIds(node));
+  return props.userOptions
+    .filter(u => u.deptId !== null && u.deptId !== undefined && deptIds.has(String(u.deptId)))
+    .map(u => String(u.id));
+}
+
+type TreeCheckState = 'none' | 'partial' | 'all';
+
+function getDeptCheckState(node: Api.SystemManage.DeptSimple): TreeCheckState {
+  const ids = getDeptUserIds(node).filter(id => !disabledUserIdSet.value.has(id));
+  if (!ids.length) return 'none';
+  const sel = ids.filter(id => selected.value.has(id)).length;
+  if (sel === 0) return 'none';
+  if (sel === ids.length) return 'all';
+  return 'partial';
+}
+
+function findDeptNode(list: Api.SystemManage.DeptSimple[], key: string): Api.SystemManage.DeptSimple | null {
+  for (const n of list) {
+    if (String(n.id) === key) return n;
+    if (n.children) {
+      const r = findDeptNode(n.children, key);
+      if (r) return r;
+    }
+  }
+  return null;
+}
+
+function chainNodeKey(node: Api.SystemManage.UserManagementRelationTreeRespVO): string {
+  return node.id ?? `chain_${node.userId}`;
+}
+
+function getChainUserIds(node: Api.SystemManage.UserManagementRelationTreeRespVO): string[] {
+  const ids = new Set<string>([String(node.userId)]);
+  if (node.children) {
+    for (const c of node.children) {
+      for (const id of getChainUserIds(c)) ids.add(id);
+    }
+  }
+  return [...ids];
+}
+
+function getChainCheckState(node: Api.SystemManage.UserManagementRelationTreeRespVO): TreeCheckState {
+  const ids = getChainUserIds(node).filter(id => !disabledUserIdSet.value.has(id));
+  if (!ids.length) return 'none';
+  const sel = ids.filter(id => selected.value.has(id)).length;
+  if (sel === 0) return 'none';
+  if (sel === ids.length) return 'all';
+  return 'partial';
+}
+
+function findChainNode(
+  list: Api.SystemManage.UserManagementRelationTreeRespVO[],
+  key: string
+): Api.SystemManage.UserManagementRelationTreeRespVO | null {
+  for (const n of list) {
+    if (chainNodeKey(n) === key) return n;
+    if (n.children) {
+      const r = findChainNode(n.children, key);
+      if (r) return r;
+    }
+  }
+  return null;
+}
+
+function toggleChainCheck(node: Api.SystemManage.UserManagementRelationTreeRespVO) {
+  const ids = getChainUserIds(node).filter(id => !disabledUserIdSet.value.has(id));
+  const state = getChainCheckState(node);
+  if (state === 'all') {
+    for (const id of ids) {
+      selected.value.delete(id);
+      roleOverrides.value.delete(id);
+    }
+  } else {
+    for (const id of ids) selected.value.add(id);
+  }
+  selected.value = new Set(selected.value);
+  roleOverrides.value = new Map(roleOverrides.value);
+}
+
+function activateNode(key: string) {
+  currentNodeId.value = key;
+}
+
+function handleDeptNodeClick(data: Api.SystemManage.DeptSimple) {
+  activateNode(String(data.id));
+}
+
+function handleChainNodeClick(data: Api.SystemManage.UserManagementRelationTreeRespVO) {
+  activateNode(chainNodeKey(data));
+}
+
+function toggleDeptCheck(node: Api.SystemManage.DeptSimple) {
+  const ids = getDeptUserIds(node).filter(id => !disabledUserIdSet.value.has(id));
+  const state = getDeptCheckState(node);
+  if (state === 'all') {
+    for (const id of ids) {
+      selected.value.delete(id);
+      roleOverrides.value.delete(id);
+    }
+  } else {
+    for (const id of ids) selected.value.add(id);
+  }
+  selected.value = new Set(selected.value);
+  roleOverrides.value = new Map(roleOverrides.value);
+}
+
+const deptTreeProps = { children: 'children', label: 'name' } as const;
+const chainTreeProps = { children: 'children', label: 'userNickname' } as const;
+
+function getDeptCheckStateClass(node: Api.SystemManage.DeptSimple) {
+  const s = getDeptCheckState(node);
+  return { 'is-checked': s === 'all', 'is-partial': s === 'partial' };
+}
+
+function getDeptMetaText(node: Api.SystemManage.DeptSimple): string {
+  const total = getDeptUserIds(node).length;
+  return total > 0 ? `${total} 人` : '';
+}
+
+function getChainCheckStateClass(node: Api.SystemManage.UserManagementRelationTreeRespVO) {
+  const s = getChainCheckState(node);
+  return { 'is-checked': s === 'all', 'is-partial': s === 'partial' };
+}
+
+function getChainMetaText(node: Api.SystemManage.UserManagementRelationTreeRespVO): string {
+  const total = getChainUserIds(node).length;
+  return total > 1 ? `${total} 人` : '';
+}
+
+function visibleUserIds(): string[] {
+  if (source.value === 'all') return props.userOptions.map(u => String(u.id));
+  if (!currentNodeId.value) return props.userOptions.map(u => String(u.id));
+  if (source.value === 'dept') {
+    const node = findDeptNode(deptTree.value, currentNodeId.value);
+    return node ? getDeptUserIds(node) : props.userOptions.map(u => String(u.id));
+  }
+  if (source.value === 'chain') {
+    const node = findChainNode(chainTree.value, currentNodeId.value);
+    return node ? getChainUserIds(node) : props.userOptions.map(u => String(u.id));
+  }
+  return props.userOptions.map(u => String(u.id));
+}
+
+function matchDeptKeyword(node: Api.SystemManage.DeptSimple, kw: string): boolean {
+  if (!kw) return true;
+  if (node.name.toLowerCase().includes(kw)) return true;
+  if (node.children) return node.children.some(c => matchDeptKeyword(c, kw));
+  return false;
+}
+
+function matchChainKeyword(node: Api.SystemManage.UserManagementRelationTreeRespVO, kw: string): boolean {
+  if (!kw) return true;
+  if (node.userNickname.toLowerCase().includes(kw)) return true;
+  if (node.children) return node.children.some(c => matchChainKeyword(c, kw));
+  return false;
+}
+
+const visibleDeptTree = computed(() => {
+  const kw = treeSearch.value.trim().toLowerCase();
+  if (!kw) return deptTree.value;
+  return deptTree.value.filter(n => matchDeptKeyword(n, kw));
+});
+
+const visibleChainTree = computed(() => {
+  const kw = treeSearch.value.trim().toLowerCase();
+  if (!kw) return chainTree.value;
+  return chainTree.value.filter(n => matchChainKeyword(n, kw));
+});
+
+const filteredUserIds = computed(() => {
+  let ids = visibleUserIds();
+  if (hideAdded.value) ids = ids.filter(id => !disabledUserIdSet.value.has(id));
+  const kw = userSearch.value.trim().toLowerCase();
+  if (kw) {
+    ids = ids.filter(id => {
+      const u = getUserById(id);
+      if (!u) return false;
+      return u.nickname.toLowerCase().includes(kw) || (u.username ?? '').toLowerCase().includes(kw);
+    });
+  }
+  return ids;
+});
+
+async function switchSource(next: Source) {
+  if (source.value === next) return;
+  source.value = next;
+  currentNodeId.value = null;
+  treeSearch.value = '';
+  if (next === 'dept') await ensureDeptTree();
+  else if (next === 'chain') await ensureChainTree();
+}
+
+function toggleUser(uid: string) {
+  if (disabledUserIdSet.value.has(uid)) return;
+  if (selected.value.has(uid)) {
+    selected.value.delete(uid);
+    roleOverrides.value.delete(uid);
+  } else {
+    selected.value.add(uid);
+  }
+  selected.value = new Set(selected.value);
+  roleOverrides.value = new Map(roleOverrides.value);
+}
+
+function clearAll() {
+  selected.value = new Set();
+  roleOverrides.value = new Map();
+}
+
+function getUserById(uid: string) {
+  return props.userOptions.find(u => String(u.id) === uid);
+}
+
+function getRoleNameById(roleId: string): string {
+  return props.roleOptions.find(r => r.id === roleId)?.name ?? '';
+}
+
+function setRoleOverride(uid: string, roleId: string | null) {
+  if (roleId === null) roleOverrides.value.delete(uid);
+  else roleOverrides.value.set(uid, roleId);
+  roleOverrides.value = new Map(roleOverrides.value);
+}
+
+function clearUserFilter() {
+  userSearch.value = '';
+  hideAdded.value = false;
+}
+
+async function handleConfirm() {
+  if (confirmDisabled.value) return;
+  const payloads: BatchMemberPayload[] = [...selected.value].map(uid => ({
+    userId: uid,
+    roleId: roleOverrides.value.get(uid) ?? defaultRoleId.value,
+    remark: batchRemark.value.trim()
+  }));
+  emit('submit', payloads);
+}
+
+watch(visible, async value => {
+  if (!value) {
+    resetState();
+    return;
+  }
+  if (source.value === 'dept') await ensureDeptTree();
+  else if (source.value === 'chain') await ensureChainTree();
+});
+</script>
+
+<template>
+  <BusinessFormDialog
+    v-model="visible"
+    title="新增团队成员"
+    preset="lg"
+    width="820px"
+    max-body-height="540px"
+    :confirm-disabled="confirmDisabled"
+    :confirm-text="`确认添加(${selectedCount})`"
+    @confirm="handleConfirm"
+  >
+    <div class="team-batch">
+      <div class="team-batch__tabs">
+        <button
+          v-for="tab in [
+            { key: 'dept', label: '部门' },
+            { key: 'chain', label: '团队' },
+            { key: 'all', label: '全部用户' }
+          ]"
+          :key="tab.key"
+          class="team-batch__tab"
+          :class="{ 'is-active': source === tab.key }"
+          type="button"
+          @click="switchSource(tab.key as Source)"
+        >
+          {{ tab.label }}
+        </button>
+      </div>
+
+      <div class="team-batch__picker" :class="{ 'is-single': source === 'all' }">
+        <!-- 左栏:dept / chain 树,all 时隐藏 -->
+        <div v-if="source !== 'all'" class="team-batch__col team-batch__col--tree">
+          <div class="team-batch__col-head">{{ source === 'dept' ? '部门' : '团队' }}</div>
+          <div class="team-batch__search">
+            <ElInput
+              v-model="treeSearch"
+              size="small"
+              clearable
+              :placeholder="source === 'dept' ? '搜索部门…' : '搜索成员…'"
+            />
+          </div>
+          <div v-loading="source === 'dept' ? deptTreeLoading : chainTreeLoading" class="team-batch__col-body">
+            <ElTree
+              v-if="source === 'dept'"
+              :data="visibleDeptTree"
+              :props="deptTreeProps"
+              node-key="id"
+              :expand-on-click-node="false"
+              :default-expand-all="true"
+              :indent="14"
+              class="team-batch__tree"
+              @node-click="handleDeptNodeClick"
+            >
+              <template #default="{ data }">
+                <div class="team-batch__node" :class="{ 'is-active': currentNodeId === String(data.id) }">
+                  <span
+                    class="team-batch__node-check"
+                    :class="getDeptCheckStateClass(data)"
+                    @click.stop="toggleDeptCheck(data)"
+                  />
+                  <IconEpOfficeBuilding class="team-batch__node-icon" />
+                  <span class="team-batch__node-label">{{ data.name }}</span>
+                  <span v-if="getDeptMetaText(data)" class="team-batch__node-meta">
+                    {{ getDeptMetaText(data) }}
+                  </span>
+                </div>
+              </template>
+            </ElTree>
+            <ElTree
+              v-else
+              :data="visibleChainTree"
+              :props="chainTreeProps"
+              node-key="userId"
+              :expand-on-click-node="false"
+              :default-expand-all="true"
+              :indent="14"
+              class="team-batch__tree"
+              @node-click="handleChainNodeClick"
+            >
+              <template #default="{ data }">
+                <div class="team-batch__node" :class="{ 'is-active': currentNodeId === chainNodeKey(data) }">
+                  <span
+                    class="team-batch__node-check"
+                    :class="getChainCheckStateClass(data)"
+                    @click.stop="toggleChainCheck(data)"
+                  />
+                  <IconEpUser class="team-batch__node-icon" />
+                  <span class="team-batch__node-label">{{ data.userNickname }}</span>
+                  <span v-if="getChainMetaText(data)" class="team-batch__node-meta">
+                    {{ getChainMetaText(data) }}
+                  </span>
+                </div>
+              </template>
+            </ElTree>
+          </div>
+        </div>
+        <!-- 右栏:候选用户 -->
+        <div class="team-batch__col team-batch__col--users">
+          <div class="team-batch__col-head team-batch__col-head--user">
+            <span>
+              候选用户(
+              <span>{{ filteredUserIds.length }}</span>
+              人)
+            </span>
+            <label class="team-batch__hide-added">
+              <ElCheckbox v-model="hideAdded">隐藏已添加</ElCheckbox>
+            </label>
+          </div>
+          <div class="team-batch__search">
+            <ElInput v-model="userSearch" size="small" clearable placeholder="搜索用户名 / 部门…" />
+          </div>
+          <div class="team-batch__col-body">
+            <div v-if="!filteredUserIds.length" class="team-batch__empty">
+              该节点下没有匹配用户
+              <button
+                v-if="userSearch || hideAdded"
+                type="button"
+                class="team-batch__link team-batch__empty-action"
+                @click="clearUserFilter"
+              >
+                清除筛选条件
+              </button>
+            </div>
+            <div
+              v-for="uid in filteredUserIds"
+              :key="uid"
+              class="team-batch__user-row"
+              :class="{ 'is-disabled': disabledUserIdSet.has(uid) }"
+              @click="toggleUser(uid)"
+            >
+              <span class="team-batch__node-check" :class="{ 'is-checked': selected.has(uid) }" />
+              <span class="team-batch__user-avatar">{{ (getUserById(uid)?.nickname ?? '?').slice(0, 1) }}</span>
+              <div class="team-batch__user-main">
+                <div class="team-batch__user-name">{{ getUserById(uid)?.nickname }}</div>
+              </div>
+              <span v-if="disabledUserIdSet.has(uid)" class="team-batch__user-tag">已添加</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="team-batch__selected">
+        <div class="team-batch__selected-head">
+          <span>
+            已选
+            <strong>{{ selectedCount }}</strong>
+            人
+            <span v-if="overrideCount > 0">
+              · 其中
+              <strong class="team-batch__override-cnt">{{ overrideCount }}</strong>
+              人已自定义角色
+            </span>
+          </span>
+          <button type="button" class="team-batch__link team-batch__link--danger" @click="clearAll">清空</button>
+        </div>
+        <div v-if="selectedCount === 0" class="team-batch__selected-empty">从左侧勾选用户后会出现在这里</div>
+        <div v-else class="team-batch__chips">
+          <span v-for="uid in visibleSelectedIds" :key="uid" class="team-batch__chip">
+            <span class="team-batch__chip-name">{{ getUserById(uid)?.nickname }}</span>
+            <ElDropdown
+              trigger="click"
+              @command="roleId => setRoleOverride(uid, roleId === '__default__' ? null : (roleId as string))"
+            >
+              <button type="button" class="team-batch__chip-role" :class="{ 'is-override': roleOverrides.has(uid) }">
+                {{
+                  roleOverrides.get(uid)
+                    ? getRoleNameById(roleOverrides.get(uid)!)
+                    : defaultRoleId
+                      ? getRoleNameById(defaultRoleId)
+                      : '默认'
+                }}
+                ▾
+              </button>
+              <template #dropdown>
+                <ElDropdownMenu>
+                  <ElDropdownItem command="__default__">使用默认</ElDropdownItem>
+                  <ElDropdownItem v-for="role in selectableRoles" :key="role.id" :command="role.id">
+                    <div class="team-batch__role-option">
+                      <span class="team-batch__role-option-name">{{ role.name }}</span>
+                      <ElTooltip v-if="role.remark" :content="role.remark" placement="right" :show-after="120">
+                        <icon-ep:info-filled class="team-batch__role-option-info" @click.stop />
+                      </ElTooltip>
+                    </div>
+                  </ElDropdownItem>
+                </ElDropdownMenu>
+              </template>
+            </ElDropdown>
+            <button type="button" class="team-batch__chip-x" @click="toggleUser(uid)">×</button>
+          </span>
+          <ElPopover
+            v-if="overflowSelectedCount > 0"
+            :visible="overflowPopoverVisible"
+            placement="top-end"
+            :width="360"
+            popper-class="team-batch__overflow-popper"
+          >
+            <template #reference>
+              <button
+                ref="overflowReferenceEl"
+                type="button"
+                class="team-batch__chip-more"
+                @click="overflowPopoverVisible = !overflowPopoverVisible"
+              >
+                +{{ overflowSelectedCount }} 更多
+              </button>
+            </template>
+            <div class="team-batch__overflow-head">
+              <span>
+                另外
+                <strong>{{ overflowSelectedCount }}</strong>
+                人
+              </span>
+              <button type="button" class="team-batch__link team-batch__link--danger" @click="clearAll">
+                清空全部
+              </button>
+            </div>
+            <div class="team-batch__overflow-chips">
+              <span v-for="uid in [...selected].slice(4)" :key="uid" class="team-batch__chip">
+                <span class="team-batch__chip-name">{{ getUserById(uid)?.nickname }}</span>
+                <ElDropdown
+                  trigger="click"
+                  @command="roleId => setRoleOverride(uid, roleId === '__default__' ? null : (roleId as string))"
+                >
+                  <button
+                    type="button"
+                    class="team-batch__chip-role"
+                    :class="{ 'is-override': roleOverrides.has(uid) }"
+                  >
+                    {{
+                      roleOverrides.get(uid)
+                        ? getRoleNameById(roleOverrides.get(uid)!)
+                        : defaultRoleId
+                          ? getRoleNameById(defaultRoleId)
+                          : '默认'
+                    }}
+                    ▾
+                  </button>
+                  <template #dropdown>
+                    <ElDropdownMenu>
+                      <ElDropdownItem command="__default__">使用默认</ElDropdownItem>
+                      <ElDropdownItem v-for="role in selectableRoles" :key="role.id" :command="role.id">
+                        <div class="team-batch__role-option">
+                          <span class="team-batch__role-option-name">{{ role.name }}</span>
+                          <ElTooltip v-if="role.remark" :content="role.remark" placement="right" :show-after="120">
+                            <icon-ep:info-filled class="team-batch__role-option-info" @click.stop />
+                          </ElTooltip>
+                        </div>
+                      </ElDropdownItem>
+                    </ElDropdownMenu>
+                  </template>
+                </ElDropdown>
+                <button type="button" class="team-batch__chip-x" @click="toggleUser(uid)">×</button>
+              </span>
+            </div>
+          </ElPopover>
+        </div>
+      </div>
+
+      <div class="team-batch__params">
+        <div class="team-batch__params-grid">
+          <div class="team-batch__field">
+            <label class="team-batch__field-label">
+              默认角色
+              <span class="team-batch__required">*</span>
+            </label>
+            <ElSelect v-model="defaultRoleId" placeholder="请选择默认角色">
+              <ElOption v-for="role in selectableRoles" :key="role.id" :label="role.name" :value="role.id">
+                <div class="team-batch__role-option">
+                  <span class="team-batch__role-option-name">{{ role.name }}</span>
+                  <ElTooltip v-if="role.remark" :content="role.remark" placement="right" :show-after="120">
+                    <icon-ep:info-filled class="team-batch__role-option-info" @click.stop />
+                  </ElTooltip>
+                </div>
+              </ElOption>
+            </ElSelect>
+          </div>
+          <div class="team-batch__field">
+            <label class="team-batch__field-label">备注(可选,统一应用)</label>
+            <ElInput v-model="batchRemark" maxlength="200" placeholder="如:本次批量加入" />
+          </div>
+        </div>
+      </div>
+    </div>
+  </BusinessFormDialog>
+</template>
+
+<style scoped>
+.team-batch {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.team-batch__tabs {
+  display: flex;
+  gap: 2px;
+  border-bottom: 1px solid var(--el-border-color);
+}
+
+.team-batch__tab {
+  padding: 6px 14px;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  font-size: 12.5px;
+  color: var(--el-text-color-regular);
+  border-bottom: 2px solid transparent;
+  margin-bottom: -1px;
+}
+
+.team-batch__tab.is-active {
+  color: var(--el-color-primary);
+  border-bottom-color: var(--el-color-primary);
+  font-weight: 600;
+}
+
+.team-batch__picker {
+  display: grid;
+  grid-template-columns: 240px 1fr;
+  gap: 12px;
+  height: min(260px, 40vh);
+  min-height: 240px;
+}
+
+.team-batch__col {
+  display: flex;
+  flex-direction: column;
+  border: 1px solid var(--el-border-color);
+  border-radius: 8px;
+  overflow: hidden;
+  background: #fff;
+}
+
+.team-batch__col-head {
+  padding: 6px 10px;
+  border-bottom: 1px solid var(--el-border-color);
+  background: #fafbfc;
+  font-size: 12px;
+  color: var(--el-text-color-regular);
+}
+
+.team-batch__col-body {
+  flex: 1;
+  overflow-y: auto;
+}
+
+.team-batch__placeholder {
+  padding: 24px;
+  color: var(--el-text-color-placeholder);
+  font-size: 12px;
+  text-align: center;
+}
+
+.team-batch__params {
+  border: 1px solid var(--el-border-color);
+  border-radius: 6px;
+  background: #fff;
+}
+
+.team-batch__tree {
+  padding: 4px;
+  background: transparent;
+}
+
+.team-batch__tree :deep(.el-tree-node__content) {
+  height: 32px;
+  padding-right: 8px !important;
+  border-radius: 4px;
+  transition: background-color 0.15s ease;
+}
+
+.team-batch__tree :deep(.el-tree-node__content:hover) {
+  background: var(--el-fill-color-light);
+}
+
+.team-batch__tree :deep(.el-tree-node__expand-icon) {
+  padding: 4px;
+  color: var(--el-text-color-placeholder);
+  font-size: 14px;
+}
+
+.team-batch__tree :deep(.el-tree-node__expand-icon.is-leaf) {
+  color: transparent;
+}
+
+.team-batch__node {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+  height: 100%;
+  font-size: 13px;
+  color: var(--el-text-color-primary);
+}
+
+.team-batch__node.is-active {
+  color: var(--el-color-primary);
+  font-weight: 500;
+}
+
+.team-batch__node-check {
+  position: relative;
+  flex-shrink: 0;
+  width: 14px;
+  height: 14px;
+  border: 1px solid var(--el-border-color);
+  border-radius: 2px;
+  background: var(--el-bg-color);
+  cursor: pointer;
+  transition:
+    border-color 0.15s ease,
+    background-color 0.15s ease;
+}
+
+.team-batch__node-check:hover {
+  border-color: var(--el-color-primary);
+}
+
+.team-batch__node-check.is-checked {
+  background: var(--el-color-primary);
+  border-color: var(--el-color-primary);
+}
+
+.team-batch__node-check.is-checked::after {
+  content: '';
+  position: absolute;
+  top: 1px;
+  left: 4px;
+  width: 3px;
+  height: 7px;
+  border: solid #fff;
+  border-width: 0 1px 1px 0;
+  transform: rotate(45deg);
+}
+
+.team-batch__node-check.is-partial {
+  background: var(--el-color-primary);
+  border-color: var(--el-color-primary);
+}
+
+.team-batch__node-check.is-partial::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 8px;
+  height: 2px;
+  margin: -1px 0 0 -4px;
+  background: #fff;
+  border-radius: 1px;
+}
+
+.team-batch__node-icon {
+  flex-shrink: 0;
+  font-size: 15px;
+  color: var(--el-text-color-secondary);
+  transition: color 0.15s ease;
+}
+
+.team-batch__node.is-active .team-batch__node-icon {
+  color: var(--el-color-primary);
+}
+
+.team-batch__node-label {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.team-batch__node-meta {
+  flex-shrink: 0;
+  padding-left: 6px;
+  font-size: 12px;
+  color: var(--el-text-color-placeholder);
+  font-variant-numeric: tabular-nums;
+}
+
+.team-batch__node.is-active .team-batch__node-meta {
+  color: var(--el-color-primary);
+  opacity: 0.7;
+}
+
+.team-batch__user-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 0 10px;
+  height: 36px;
+  border-bottom: 1px solid var(--el-border-color-lighter);
+  cursor: pointer;
+}
+
+.team-batch__user-row:hover {
+  background: var(--el-fill-color);
+}
+
+.team-batch__user-row.is-disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+
+.team-batch__user-row.is-disabled:hover {
+  background: transparent;
+}
+
+.team-batch__user-avatar {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, #c7d2fe, #93c5fd);
+  color: #fff;
+  font-size: 12px;
+  font-weight: 600;
+  flex-shrink: 0;
+}
+
+.team-batch__user-main {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.team-batch__user-name {
+  font-size: 13px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.team-batch__user-tag {
+  flex-shrink: 0;
+  padding: 1px 7px;
+  border-radius: 999px;
+  font-size: 11px;
+  background: var(--el-color-warning-light-7);
+  color: var(--el-color-warning-dark-2);
+}
+
+.team-batch__empty {
+  padding: 40px 0;
+  text-align: center;
+  color: var(--el-text-color-placeholder);
+  font-size: 12px;
+}
+
+.team-batch__selected {
+  padding: 8px 12px;
+  background: #f8fafc;
+  border: 1px solid var(--el-border-color);
+  border-radius: 6px;
+}
+
+.team-batch__selected-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 6px;
+  font-size: 11.5px;
+  color: var(--el-text-color-regular);
+}
+
+.team-batch__selected-head strong {
+  color: var(--el-color-primary);
+  font-weight: 700;
+  font-size: 12.5px;
+}
+
+.team-batch__selected-empty {
+  display: flex;
+  align-items: center;
+  min-height: 26px;
+  color: var(--el-text-color-placeholder);
+  font-size: 11.5px;
+}
+
+.team-batch__chips {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px;
+  min-height: 26px;
+}
+
+.team-batch__chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 4px 2px 8px;
+  background: #fff;
+  border: 1px solid var(--el-border-color-darker);
+  border-radius: 999px;
+  font-size: 11.5px;
+}
+
+.team-batch__chip-x {
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: var(--el-fill-color);
+  color: var(--el-text-color-regular);
+  border: none;
+  cursor: pointer;
+  font-size: 11px;
+}
+
+.team-batch__chip-x:hover {
+  background: var(--el-color-danger);
+  color: #fff;
+}
+
+.team-batch__chip-more {
+  display: inline-flex;
+  align-items: center;
+  height: 24px;
+  padding: 0 10px;
+  border-radius: 999px;
+  border: 1px dashed var(--el-border-color-darker);
+  background: transparent;
+  color: var(--el-color-primary);
+  font-size: 11.5px;
+  cursor: pointer;
+  transition:
+    border-color 0.15s ease,
+    background-color 0.15s ease;
+}
+
+.team-batch__chip-more:hover {
+  border-color: var(--el-color-primary);
+  background: var(--el-color-primary-light-9);
+}
+
+.team-batch__overflow-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 8px;
+  font-size: 12px;
+  color: var(--el-text-color-regular);
+}
+
+.team-batch__overflow-head strong {
+  color: var(--el-color-primary);
+  font-weight: 700;
+}
+
+.team-batch__overflow-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  max-height: 260px;
+  overflow-y: auto;
+}
+
+.team-batch__link {
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  font-size: 11.5px;
+  padding: 0;
+}
+
+.team-batch__link--danger {
+  color: var(--el-color-danger);
+}
+
+.team-batch__link:hover {
+  text-decoration: underline;
+}
+
+.team-batch__params {
+  padding: 10px 12px;
+}
+
+.team-batch__params-grid {
+  display: grid;
+  grid-template-columns: 240px 1fr;
+  gap: 12px;
+}
+
+.team-batch__field {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.team-batch__field-label {
+  font-size: 11.5px;
+  color: var(--el-text-color-primary);
+  font-weight: 500;
+}
+
+.team-batch__required {
+  color: var(--el-color-danger);
+}
+
+.team-batch__picker.is-single {
+  grid-template-columns: 1fr;
+}
+
+.team-batch__chip-role {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  padding: 0 6px;
+  height: 18px;
+  border-radius: 999px;
+  background: var(--el-color-primary-light-9);
+  color: var(--el-color-primary);
+  font-size: 11px;
+  cursor: pointer;
+  border: none;
+}
+
+.team-batch__chip-role.is-override {
+  background: var(--el-color-warning-light-7);
+  color: var(--el-color-warning-dark-2);
+}
+
+.team-batch__override-cnt {
+  color: var(--el-color-warning-dark-2);
+  font-weight: 700;
+}
+
+.team-batch__search {
+  padding: 6px 10px;
+  border-bottom: 1px solid var(--el-border-color);
+}
+
+.team-batch__col-head--user {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.team-batch__hide-added {
+  font-size: 11.5px;
+}
+
+.team-batch__empty-action {
+  display: block;
+  margin: 6px auto 0;
+}
+
+.team-batch__role-option {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  width: 100%;
+}
+
+.team-batch__role-option-name {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.team-batch__role-option-info {
+  flex-shrink: 0;
+  font-size: 14px;
+  color: var(--el-text-color-placeholder);
+  cursor: help;
+}
+
+.team-batch__role-option-info:hover {
+  color: var(--el-color-primary);
+}
+</style>
diff --git a/src/views/project/list/modules/project-create-team-member-dialog.vue b/src/views/project/list/modules/project-create-team-member-dialog.vue
index c90d653..84f3b22 100644
--- a/src/views/project/list/modules/project-create-team-member-dialog.vue
+++ b/src/views/project/list/modules/project-create-team-member-dialog.vue
@@ -1,14 +1,10 @@
 <script setup lang="ts">
 import { computed, nextTick, reactive, watch } from 'vue';
-import { PROJECT_MANAGER_ROLE_CODE } from '@/constants/business';
 import { useForm, useFormRules } from '@/hooks/common/form';
 import BusinessFormDialog from '@/components/custom/business-form-dialog.vue';
-import BusinessUserSelect from '@/components/custom/business-user-select.vue';
 
 defineOptions({ name: 'ProjectCreateTeamMemberDialog' });
 
-type OperateMode = 'create' | 'edit';
-
 interface DraftMemberInput {
   userId: string;
   roleId: string;
@@ -16,22 +12,16 @@ interface DraftMemberInput {
 }
 
 interface Props {
-  mode: OperateMode;
   initial: DraftMemberInput | null;
   userOptions: Api.SystemManage.UserSimple[];
   roleOptions: Api.SystemManage.RoleSimple[];
-  /** 已使用且不可选的 userId（编辑模式应当排除当前行自身） */
-  disabledUserIds?: readonly string[];
 }
 
 interface Emits {
   (e: 'submit', payload: DraftMemberInput): void;
 }
 
-const props = withDefaults(defineProps<Props>(), {
-  disabledUserIds: () => []
-});
-
+const props = defineProps<Props>();
 const emit = defineEmits<Emits>();
 
 const visible = defineModel<boolean>('visible', { default: false });
@@ -39,31 +29,19 @@ const visible = defineModel<boolean>('visible', { default: false });
 const { formRef, validate } = useForm();
 const { createRequiredRule } = useFormRules();
 
-const model = reactive<DraftMemberInput>({
-  userId: '',
-  roleId: '',
-  remark: ''
-});
-
-const dialogTitle = computed(() => (props.mode === 'create' ? '新增团队成员' : '调整成员角色'));
+const model = reactive<DraftMemberInput>({ userId: '', roleId: '', remark: '' });
 
 const userLabelMap = computed(() => new Map(props.userOptions.map(item => [String(item.id), item.nickname])));
 
 const rules = computed(
   () =>
     ({
-      userId: props.mode === 'create' ? [createRequiredRule('请选择成员用户')] : [],
       roleId: [createRequiredRule('请选择角色')]
     }) satisfies Record<string, App.Global.FormRule[]>
 );
 
-function isManagerRole(role: Api.SystemManage.RoleSimple) {
-  return role.code === PROJECT_MANAGER_ROLE_CODE;
-}
-
 async function handleConfirm() {
   await validate();
-
   emit('submit', {
     userId: model.userId,
     roleId: model.roleId,
@@ -72,34 +50,21 @@ async function handleConfirm() {
 }
 
 watch(visible, async value => {
-  if (!value) {
-    return;
-  }
-
+  if (!value) return;
   model.userId = props.initial?.userId || '';
   model.roleId = props.initial?.roleId || '';
   model.remark = props.initial?.remark || '';
-
   await nextTick();
   formRef.value?.clearValidate();
 });
 </script>
 
 <template>
-  <BusinessFormDialog v-model="visible" :title="dialogTitle" preset="sm" @confirm="handleConfirm">
+  <BusinessFormDialog v-model="visible" title="调整成员角色" preset="sm" @confirm="handleConfirm">
     <ElForm ref="formRef" :model="model" :rules="rules" label-position="top" :validate-on-rule-change="false">
       <ElRow :gutter="16">
         <ElCol :span="24">
-          <ElFormItem v-if="mode === 'create'" label="成员用户" prop="userId">
-            <BusinessUserSelect
-              v-model="model.userId"
-              :options="userOptions"
-              :disabled-user-ids="disabledUserIds"
-              disabled-label="已添加"
-              placeholder="请选择成员用户"
-            />
-          </ElFormItem>
-          <ElFormItem v-else label="成员用户">
+          <ElFormItem label="成员用户">
             <ElInput
               :model-value="userLabelMap.get(String(model.userId)) || ''"
               readonly
@@ -111,18 +76,7 @@ watch(visible, async value => {
         <ElCol :span="24">
           <ElFormItem label="目标角色" prop="roleId">
             <ElSelect v-model="model.roleId" class="w-full" placeholder="请选择角色">
-              <ElOption
-                v-for="role in roleOptions"
-                :key="role.id"
-                :label="role.name"
-                :value="role.id"
-                :disabled="isManagerRole(role)"
-              >
-                <span>{{ role.name }}</span>
-                <span v-if="isManagerRole(role)" class="project-create-team-member-dialog__role-hint">
-                  （已由第 1 步指定）
-                </span>
-              </ElOption>
+              <ElOption v-for="role in roleOptions" :key="role.id" :label="role.name" :value="role.id" />
             </ElSelect>
           </ElFormItem>
         </ElCol>
@@ -144,12 +98,6 @@ watch(visible, async value => {
 </template>
 
 <style scoped>
-.project-create-team-member-dialog__role-hint {
-  margin-left: 8px;
-  color: rgb(148 163 184 / 96%);
-  font-size: 12px;
-}
-
 :deep(.project-create-team-member-dialog__readonly-input .el-input__wrapper) {
   background: linear-gradient(180deg, rgb(241 245 249 / 98%), rgb(226 232 240 / 94%)), rgb(241 245 249);
   box-shadow: 0 0 0 1px rgb(203 213 225 / 96%) inset;
diff --git a/src/views/project/list/modules/project-create-team-step.vue b/src/views/project/list/modules/project-create-team-step.vue
index 00d7384..326aab2 100644
--- a/src/views/project/list/modules/project-create-team-step.vue
+++ b/src/views/project/list/modules/project-create-team-step.vue
@@ -1,8 +1,9 @@
 <script setup lang="ts">
-import { computed, onMounted, ref, watch } from 'vue';
+import { computed, ref, watch } from 'vue';
 import { PROJECT_MANAGER_ROLE_CODE } from '@/constants/business';
-import { fetchGetRoleSimpleList } from '@/service/api';
-import { getProjectTeamTableHeight } from '@/views/project/project/setting/shared';
+import ProjectTeamBatchDialog, {
+  type BatchMemberPayload
+} from '@/views/project/shared/components/project-team-batch-dialog.vue';
 import ProjectCreateTeamMemberDialog from './project-create-team-member-dialog.vue';
 import type { ProjectCreateBaseForm } from './project-create-base-form.vue';
 
@@ -21,57 +22,34 @@ interface DraftMember {
 interface Props {
   baseInfo: ProjectCreateBaseForm;
   userOptions: Api.SystemManage.UserSimple[];
+  roleOptions: Api.SystemManage.RoleSimple[];
+  roleLoading: boolean;
+  managerRoleError: string;
 }
 
 const props = defineProps<Props>();
 
 const emit = defineEmits<{
   (e: 'update:members', members: Api.Project.CreateProjectMemberParams[]): void;
-  (e: 'update:watcherUserIds', watcherUserIds: string[]): void;
 }>();
 
-const roleOptions = ref<Api.SystemManage.RoleSimple[]>([]);
-const roleLoading = ref(false);
-const managerRoleError = ref('');
 const members = ref<DraftMember[]>([]);
 
 const memberDialogVisible = ref(false);
-const memberDialogMode = ref<'create' | 'edit'>('create');
 const editingKey = ref<string | null>(null);
 
-const watcherUserIds = ref<string[]>([]);
+const batchDialogVisible = ref(false);
 
-// 关心人候选用户：排除已在团队成员列表中的用户（包含项目负责人本人）
-const watcherUserOptions = computed(() => {
-  const memberUserIds = new Set(members.value.map(item => item.userId).filter(Boolean));
-  return props.userOptions.filter(user => !memberUserIds.has(user.id));
-});
-
-const teamTableHeight = getProjectTeamTableHeight(4);
+const batchDisabledUserIds = computed(() => members.value.map(item => item.userId).filter(Boolean));
 
 const userLabelMap = computed(() => new Map(props.userOptions.map(item => [String(item.id), item.nickname])));
 
-const managerRole = computed(() => roleOptions.value.find(item => item.code === PROJECT_MANAGER_ROLE_CODE) ?? null);
-
-// 弹框传入的禁选用户列表：新增时排除所有已选；编辑时排除自身以外的已选
-const dialogDisabledUserIds = computed(() => {
-  return members.value
-    .filter(item => !editingKey.value || item.key !== editingKey.value)
-    .map(item => item.userId)
-    .filter(Boolean);
-});
+const managerRole = computed(() => props.roleOptions.find(item => item.code === PROJECT_MANAGER_ROLE_CODE) ?? null);
 
 const dialogInitial = computed(() => {
-  if (memberDialogMode.value === 'create' || !editingKey.value) {
-    return null;
-  }
-
+  if (!editingKey.value) return null;
   const target = members.value.find(item => item.key === editingKey.value);
-
-  if (!target) {
-    return null;
-  }
-
+  if (!target) return null;
   return { userId: target.userId, roleId: target.roleId, remark: target.remark };
 });
 
@@ -80,31 +58,13 @@ function getUserNickname(userId: string) {
 }
 
 function getRoleName(roleId: string) {
-  return roleOptions.value.find(item => item.id === roleId)?.name || '--';
+  return props.roleOptions.find(item => item.id === roleId)?.name || '--';
 }
 
 function generateKey() {
   return `${Date.now()}_${Math.random().toString(36).slice(2, 8)}`;
 }
 
-async function loadRoles() {
-  roleLoading.value = true;
-  managerRoleError.value = '';
-
-  const { data } = await fetchGetRoleSimpleList({ scopeType: 'object', objectType: 'project' });
-
-  roleLoading.value = false;
-
-  roleOptions.value = data ?? [];
-
-  if (!managerRole.value) {
-    managerRoleError.value = '未找到项目经理角色，请联系管理员';
-    return;
-  }
-
-  refreshManagerRow();
-}
-
 function refreshManagerRow() {
   const managerUserId = props.baseInfo.managerUserId;
 
@@ -132,14 +92,25 @@ function refreshManagerRow() {
   emitMembers();
 }
 
-function openCreate() {
-  memberDialogMode.value = 'create';
-  editingKey.value = null;
-  memberDialogVisible.value = true;
+function openBatch() {
+  batchDialogVisible.value = true;
+}
+
+function handleBatchSubmit(payloads: BatchMemberPayload[]) {
+  for (const p of payloads) {
+    members.value.push({
+      key: generateKey(),
+      userId: p.userId,
+      roleId: p.roleId,
+      remark: p.remark,
+      locked: false
+    });
+  }
+  batchDialogVisible.value = false;
+  emitMembers();
 }
 
 function openEdit(row: DraftMember) {
-  memberDialogMode.value = 'edit';
   editingKey.value = row.key;
   memberDialogVisible.value = true;
 }
@@ -149,27 +120,16 @@ function removeMember(key: string) {
   emitMembers();
 }
 
-function handleMemberSubmit(payload: { userId: string; roleId: string; remark: string }) {
-  if (memberDialogMode.value === 'create') {
-    members.value.push({
-      key: generateKey(),
-      userId: payload.userId,
+function handleMemberEditSubmit(payload: { userId: string; roleId: string; remark: string }) {
+  if (!editingKey.value) return;
+  const idx = members.value.findIndex(item => item.key === editingKey.value);
+  if (idx >= 0) {
+    members.value[idx] = {
+      ...members.value[idx],
       roleId: payload.roleId,
-      remark: payload.remark,
-      locked: false
-    });
-  } else if (editingKey.value) {
-    const idx = members.value.findIndex(item => item.key === editingKey.value);
-
-    if (idx >= 0) {
-      members.value[idx] = {
-        ...members.value[idx],
-        roleId: payload.roleId,
-        remark: payload.remark
-      };
-    }
+      remark: payload.remark
+    };
   }
-
   memberDialogVisible.value = false;
   emitMembers();
 }
@@ -188,8 +148,8 @@ function emitMembers() {
 }
 
 async function runValidate(): Promise<boolean> {
-  if (managerRoleError.value) {
-    window.$message?.error(managerRoleError.value);
+  if (props.managerRoleError) {
+    window.$message?.error(props.managerRoleError);
     return false;
   }
 
@@ -214,43 +174,32 @@ async function runValidate(): Promise<boolean> {
   return true;
 }
 
-function handleWatcherChange(ids: string[]) {
-  watcherUserIds.value = ids;
-  emit('update:watcherUserIds', ids);
-}
-
-// 团队成员变化时，剔除已被加入团队的关心人，避免重叠
-watch(
-  () => members.value.map(item => item.userId).join(','),
-  () => {
-    const memberUserIds = new Set(members.value.map(item => item.userId).filter(Boolean));
-    const filtered = watcherUserIds.value.filter(id => !memberUserIds.has(id));
-
-    if (filtered.length !== watcherUserIds.value.length) {
-      handleWatcherChange(filtered);
-    }
-  }
-);
-
-onMounted(loadRoles);
-
 watch(
   () => props.baseInfo.managerUserId,
   () => {
-    if (!managerRoleError.value && managerRole.value) {
+    if (!props.managerRoleError && managerRole.value) {
       refreshManagerRow();
     }
   }
 );
 
+// roleOptions 异步加载到位后,补一次 locked 行刷新
+watch(managerRole, () => {
+  if (!props.managerRoleError && managerRole.value && props.baseInfo.managerUserId) {
+    refreshManagerRow();
+  }
+});
+
 defineExpose({ validate: runValidate });
 </script>
 
 <template>
   <div v-loading="roleLoading" class="team-step">
-    <div class="team-step__toolbar">
-      <ElButton type="primary" plain :disabled="Boolean(managerRoleError)" @click="openCreate">新增成员</ElButton>
-    </div>
+    <button type="button" class="team-step__add" :disabled="Boolean(managerRoleError)" @click="openBatch">
+      <icon-ep:plus class="team-step__add-icon" />
+      <span>新增成员</span>
+      <span class="team-step__add-hint">从部门 / 管理链路 / 全公司 批量选人</span>
+    </button>
 
     <ElAlert
       v-if="managerRoleError"
@@ -261,62 +210,49 @@ defineExpose({ validate: runValidate });
       class="team-step__alert"
     />
 
-    <ElTable :data="members" :height="teamTableHeight" border row-key="key" empty-text="点击右上角“新增成员”添加">
-      <ElTableColumn type="index" label="序号" width="64" align="center" />
-      <ElTableColumn label="成员姓名" min-width="120">
-        <template #default="{ row }">
-          {{ getUserNickname(row.userId) }}
-        </template>
-      </ElTableColumn>
-      <ElTableColumn label="当前角色" min-width="140">
-        <template #default="{ row }">
-          {{ getRoleName(row.roleId) }}
-        </template>
-      </ElTableColumn>
-      <ElTableColumn label="备注" min-width="200" show-overflow-tooltip>
-        <template #default="{ row }">
-          {{ row.remark || '--' }}
-        </template>
-      </ElTableColumn>
-      <ElTableColumn label="操作" width="150" fixed="right" align="center">
-        <template #default="{ row }">
-          <div class="team-step__actions">
-            <ElButton link type="primary" :disabled="row.locked" @click="openEdit(row)">编辑</ElButton>
-            <ElButton link type="danger" :disabled="row.locked" @click="removeMember(row.key)">移除</ElButton>
-          </div>
-        </template>
-      </ElTableColumn>
-    </ElTable>
-
-    <div class="watcher-row">
-      <span class="watcher-row__label">
-        关心人
-        <span class="watcher-row__optional">（选填）</span>
-      </span>
-      <ElSelect
-        :model-value="watcherUserIds"
-        multiple
-        filterable
-        clearable
-        collapse-tags
-        collapse-tags-tooltip
-        :max-collapse-tags="3"
-        placeholder="可在列表 / 概览看到此项目的关注人"
-        class="watcher-row__select"
-        @update:model-value="handleWatcherChange"
-      >
-        <ElOption v-for="item in watcherUserOptions" :key="item.id" :value="item.id" :label="item.nickname" />
-      </ElSelect>
+    <div class="team-step__table-wrap">
+      <ElTable :data="members" height="100%" border row-key="key" empty-text="点击右上角“新增成员”添加">
+        <ElTableColumn type="index" label="序号" width="64" align="center" />
+        <ElTableColumn label="成员姓名" min-width="120">
+          <template #default="{ row }">
+            {{ getUserNickname(row.userId) }}
+          </template>
+        </ElTableColumn>
+        <ElTableColumn label="当前角色" min-width="140">
+          <template #default="{ row }">
+            {{ getRoleName(row.roleId) }}
+          </template>
+        </ElTableColumn>
+        <ElTableColumn label="备注" min-width="200" show-overflow-tooltip>
+          <template #default="{ row }">
+            {{ row.remark || '--' }}
+          </template>
+        </ElTableColumn>
+        <ElTableColumn label="操作" width="150" fixed="right" align="center">
+          <template #default="{ row }">
+            <div class="team-step__actions">
+              <ElButton link type="primary" :disabled="row.locked" @click="openEdit(row)">编辑</ElButton>
+              <ElButton link type="danger" :disabled="row.locked" @click="removeMember(row.key)">移除</ElButton>
+            </div>
+          </template>
+        </ElTableColumn>
+      </ElTable>
     </div>
 
     <ProjectCreateTeamMemberDialog
       v-model:visible="memberDialogVisible"
-      :mode="memberDialogMode"
       :initial="dialogInitial"
       :user-options="userOptions"
       :role-options="roleOptions"
-      :disabled-user-ids="dialogDisabledUserIds"
-      @submit="handleMemberSubmit"
+      @submit="handleMemberEditSubmit"
+    />
+
+    <ProjectTeamBatchDialog
+      v-model:visible="batchDialogVisible"
+      :user-options="userOptions"
+      :role-options="roleOptions"
+      :disabled-user-ids="batchDisabledUserIds"
+      @submit="handleBatchSubmit"
     />
   </div>
 </template>
@@ -326,16 +262,65 @@ defineExpose({ validate: runValidate });
   display: flex;
   flex-direction: column;
   gap: 14px;
+  height: 100%;
   min-height: 0;
 }
 
-.team-step__toolbar {
+.team-step__add {
   display: flex;
-  justify-content: flex-end;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  width: 100%;
+  height: 44px;
+  padding: 0 16px;
+  border: 1px dashed var(--el-border-color-darker);
+  border-radius: 6px;
+  background: transparent;
+  color: var(--el-text-color-regular);
+  font-size: 13px;
+  cursor: pointer;
+  transition:
+    border-color 0.2s ease,
+    color 0.2s ease,
+    background-color 0.2s ease;
+  flex-shrink: 0;
+}
+
+.team-step__add:hover:not(:disabled) {
+  border-color: var(--el-color-primary);
+  color: var(--el-color-primary);
+  background: var(--el-color-primary-light-9);
+}
+
+.team-step__add:disabled {
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+
+.team-step__add-icon {
+  font-size: 16px;
+}
+
+.team-step__add-hint {
+  color: var(--el-text-color-placeholder);
+  font-size: 12px;
+  font-weight: 400;
+}
+
+.team-step__add:hover:not(:disabled) .team-step__add-hint {
+  color: var(--el-color-primary);
+  opacity: 0.7;
 }
 
 .team-step__alert {
   margin: 0;
+  flex-shrink: 0;
+}
+
+.team-step__table-wrap {
+  flex: 1 1 auto;
+  min-height: 0;
 }
 
 .team-step__actions {
@@ -343,27 +328,4 @@ defineExpose({ validate: runValidate });
   align-items: center;
   gap: 12px;
 }
-
-.watcher-row {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-
-.watcher-row__label {
-  flex: 0 0 auto;
-  font-size: 13px;
-  font-weight: 500;
-  color: rgb(60 70 95 / 96%);
-}
-
-.watcher-row__optional {
-  color: rgb(140 150 170 / 96%);
-  font-weight: 400;
-}
-
-.watcher-row__select {
-  flex: 1 1 auto;
-  min-width: 0;
-}
 </style>
diff --git a/src/views/project/list/modules/project-operate-dialog.vue b/src/views/project/list/modules/project-operate-dialog.vue
index 28dd27c..4a7d6eb 100644
--- a/src/views/project/list/modules/project-operate-dialog.vue
+++ b/src/views/project/list/modules/project-operate-dialog.vue
@@ -2,8 +2,14 @@
 import { computed, nextTick, ref, watch } from 'vue';
 import { ElCol, ElDatePicker, ElFormItem, ElInput, ElRow } from 'element-plus';
 import dayjs from 'dayjs';
+import { PROJECT_MANAGER_ROLE_CODE } from '@/constants/business';
 import { RDMS_OBJECT_DIRECTION_DICT_CODE, RDMS_PROJECT_TYPE_DICT_CODE } from '@/constants/dict';
-import { fetchCreateProjectWithTeam, fetchGetProductPage, fetchUpdateProject } from '@/service/api';
+import {
+  fetchCreateProjectWithTeam,
+  fetchGetProductPage,
+  fetchGetRoleSimpleList,
+  fetchUpdateProject
+} from '@/service/api';
 import { useDict } from '@/hooks/business/dict';
 import { useForm, useFormRules } from '@/hooks/common/form';
 import BusinessFormDialog from '@/components/custom/business-form-dialog.vue';
@@ -265,9 +271,29 @@ const baseFormRef = ref<InstanceType<typeof ProjectCreateBaseForm> | null>(null)
 const teamStepRef = ref<InstanceType<typeof ProjectCreateTeamStep> | null>(null);
 const currentStep = ref<1 | 2>(1);
 
+// === 新增模式:角色列表(父级加载,下发给 team-step 与批量弹层) ===
+const roleOptions = ref<Api.SystemManage.RoleSimple[]>([]);
+const roleLoading = ref(false);
+const managerRoleError = ref('');
+
+const managerRole = computed(() => roleOptions.value.find(item => item.code === PROJECT_MANAGER_ROLE_CODE) ?? null);
+
+async function loadRoles() {
+  roleLoading.value = true;
+  managerRoleError.value = '';
+
+  const { data } = await fetchGetRoleSimpleList({ scopeType: 'object', objectType: 'project' });
+
+  roleLoading.value = false;
+  roleOptions.value = data ?? [];
+
+  if (!managerRole.value) {
+    managerRoleError.value = '未找到项目经理角色,请联系管理员';
+  }
+}
+
 const createBaseModel = ref<ProjectCreateBaseFormModel>(createBaseInfo());
 const draftMembers = ref<Api.Project.CreateProjectMemberParams[]>([]);
-const draftWatcherUserIds = ref<string[]>([]);
 
 function createBaseInfo(): ProjectCreateBaseFormModel {
   return {
@@ -325,8 +351,7 @@ async function handleCreateSubmit() {
       plannedEndDate: createBaseModel.value.plannedEndDate,
       projectDesc: getNullableText(createBaseModel.value.projectDesc)
     },
-    members: draftMembers.value,
-    watcherUserIds: draftWatcherUserIds.value.length > 0 ? draftWatcherUserIds.value : undefined
+    members: draftMembers.value
   };
 
   const { error, data } = await fetchCreateProjectWithTeam(payload);
@@ -355,8 +380,8 @@ watch(visible, async value => {
     editModel.value = createEditModel();
     createBaseModel.value = createBaseInfo();
     draftMembers.value = [];
-    draftWatcherUserIds.value = [];
     await nextTick();
+    await loadRoles();
     editFormRef.value?.clearValidate();
     return;
   }
@@ -521,7 +546,7 @@ watch(visible, async value => {
     </ElForm>
   </BusinessFormDialog>
 
-  <!-- 新增模式：两步向导（复合内容特例，自定义 ElDialog 880px） -->
+  <!-- 新增模式:两步向导(复合内容特例,1080px,左侧概念区 + 右侧步骤面板) -->
   <ElDialog
     v-else
     v-model="visible"
@@ -530,37 +555,79 @@ watch(visible, async value => {
     :close-on-click-modal="false"
     destroy-on-close
     align-center
-    width="760px"
+    width="1080px"
   >
-    <div class="project-create-dialog__stepbar">
-      <div class="project-create-dialog__step" :class="{ 'is-active': currentStep === 1, 'is-done': currentStep > 1 }">
-        <span class="project-create-dialog__step-index">1</span>
-        <span class="project-create-dialog__step-text">
-          <strong>基础资料</strong>
-          <small>定义项目身份和负责人</small>
-        </span>
-      </div>
-      <div class="project-create-dialog__step" :class="{ 'is-active': currentStep === 2 }">
-        <span class="project-create-dialog__step-index">2</span>
-        <span class="project-create-dialog__step-text">
-          <strong>初始化团队</strong>
-          <small>配置对象域成员角色</small>
-        </span>
-      </div>
-    </div>
+    <div class="project-create-dialog__split">
+      <aside class="project-create-dialog__guide">
+        <div class="project-create-dialog__guide-hero">
+          <div class="project-create-dialog__guide-hero-icon">
+            <icon-ep:files />
+          </div>
+          <div class="project-create-dialog__guide-hero-text">
+            <div class="project-create-dialog__guide-hero-title">项目</div>
+            <div class="project-create-dialog__guide-hero-sub">需求 · 任务 · 交付 的协同载体</div>
+          </div>
+        </div>
 
-    <div class="project-create-dialog__body">
-      <div v-show="currentStep === 1" class="project-create-dialog__panel">
-        <ProjectCreateBaseForm ref="baseFormRef" v-model="createBaseModel" :manager-user-options="managerUserOptions" />
-      </div>
-      <div v-show="currentStep === 2" class="project-create-dialog__panel">
-        <ProjectCreateTeamStep
-          ref="teamStepRef"
-          :base-info="createBaseModel"
-          :user-options="managerUserOptions"
-          @update:members="draftMembers = $event"
-          @update:watcher-user-ids="draftWatcherUserIds = $event"
-        />
+        <p class="project-create-dialog__guide-lead">
+          项目帮助组织持续规划和交付业务价值,围绕计划周期、负责人和团队推进研发工作,串起需求、任务、缺陷和成果。
+        </p>
+
+        <section class="project-create-dialog__guide-section">
+          <h4>包含</h4>
+          <p>需求、执行、任务、工作日志、缺陷、文档、统计报表。</p>
+        </section>
+
+        <section class="project-create-dialog__guide-section">
+          <h4>参与人</h4>
+          <p>项目经理(必填,创建后锁定) · 团队角色(开发 / 测试 / 业务 / 关注人)。</p>
+        </section>
+
+        <section class="project-create-dialog__guide-section">
+          <h4>命名建议</h4>
+          <p>建议使用业务团队约定俗成的简短名称,关联所属产品后会继承产品方向,影响下游归类。</p>
+        </section>
+      </aside>
+
+      <div class="project-create-dialog__main">
+        <div class="project-create-dialog__stepbar">
+          <div
+            class="project-create-dialog__step"
+            :class="{ 'is-active': currentStep === 1, 'is-done': currentStep > 1 }"
+          >
+            <span class="project-create-dialog__step-index">1</span>
+            <span class="project-create-dialog__step-text">
+              <strong>基础资料</strong>
+            </span>
+          </div>
+          <div class="project-create-dialog__step" :class="{ 'is-active': currentStep === 2 }">
+            <span class="project-create-dialog__step-index">2</span>
+            <span class="project-create-dialog__step-text">
+              <strong>初始化团队</strong>
+            </span>
+          </div>
+        </div>
+
+        <div class="project-create-dialog__body">
+          <div v-show="currentStep === 1" class="project-create-dialog__panel">
+            <ProjectCreateBaseForm
+              ref="baseFormRef"
+              v-model="createBaseModel"
+              :manager-user-options="managerUserOptions"
+            />
+          </div>
+          <div v-show="currentStep === 2" class="project-create-dialog__panel">
+            <ProjectCreateTeamStep
+              ref="teamStepRef"
+              :base-info="createBaseModel"
+              :user-options="managerUserOptions"
+              :role-options="roleOptions"
+              :role-loading="roleLoading"
+              :manager-role-error="managerRoleError"
+              @update:members="draftMembers = $event"
+            />
+          </div>
+        </div>
       </div>
     </div>
 
@@ -608,6 +675,92 @@ watch(visible, async value => {
   padding: 0;
 }
 
+.project-create-dialog__split {
+  display: grid;
+  grid-template-columns: 280px 1fr;
+  min-height: 0;
+}
+
+.project-create-dialog__guide {
+  padding: 28px 24px;
+  background: linear-gradient(180deg, #f7f9fc 0%, #fafbfc 100%);
+  border-right: 1px solid rgb(229 233 242 / 96%);
+  overflow-y: auto;
+  max-height: min(720px, calc(100vh - 160px));
+}
+
+.project-create-dialog__guide-hero {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 24px;
+  padding-bottom: 20px;
+  border-bottom: 1px solid rgb(229 233 242 / 96%);
+}
+
+.project-create-dialog__guide-hero-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 44px;
+  height: 44px;
+  border-radius: 10px;
+  background: var(--el-color-primary-light-9);
+  color: var(--el-color-primary);
+  font-size: 22px;
+  flex-shrink: 0;
+}
+
+.project-create-dialog__guide-hero-text {
+  min-width: 0;
+}
+
+.project-create-dialog__guide-hero-title {
+  font-size: 15px;
+  font-weight: 650;
+  color: var(--el-text-color-primary);
+  line-height: 1.4;
+}
+
+.project-create-dialog__guide-hero-sub {
+  margin-top: 2px;
+  font-size: 12px;
+  color: var(--el-text-color-secondary);
+  line-height: 1.4;
+}
+
+.project-create-dialog__guide-lead {
+  margin: 0 0 24px;
+  font-size: 13.5px;
+  line-height: 1.8;
+  color: var(--el-text-color-regular);
+}
+
+.project-create-dialog__guide-section + .project-create-dialog__guide-section {
+  margin-top: 20px;
+}
+
+.project-create-dialog__guide-section h4 {
+  margin: 0 0 6px;
+  font-size: 12.5px;
+  font-weight: 700;
+  color: var(--el-text-color-primary);
+  letter-spacing: 0.4px;
+}
+
+.project-create-dialog__guide-section p {
+  margin: 0;
+  font-size: 13px;
+  line-height: 1.75;
+  color: var(--el-text-color-regular);
+}
+
+.project-create-dialog__main {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
 .project-create-dialog__stepbar {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -663,13 +816,15 @@ watch(visible, async value => {
 }
 
 .project-create-dialog__body {
-  min-height: 0;
-  max-height: min(560px, calc(100vh - 240px));
-  overflow: auto;
+  height: min(520px, calc(100vh - 240px));
+  overflow: hidden;
 }
 
 .project-create-dialog__panel {
+  height: 100%;
   padding: 24px;
+  overflow: auto;
+  box-sizing: border-box;
 }
 
 .project-create-dialog__footer {
diff --git a/src/views/project/project/setting/index.vue b/src/views/project/project/setting/index.vue
index d6f04f2..50667be 100644
--- a/src/views/project/project/setting/index.vue
+++ b/src/views/project/project/setting/index.vue
@@ -4,6 +4,8 @@ import { useMediaQuery } from '@vueuse/core';
 import { LAYOUT_SCROLL_EL_ID } from '@sa/materials';
 import { objectContextDomainConfigs } from '@/constants/object-context';
 import {
+  fetchBatchCreateProjectMembers,
+  fetchBatchInactiveProjectMembers,
   fetchChangeProjectStatus,
   fetchCreateProjectMember,
   fetchDeleteProject,
@@ -18,8 +20,12 @@ import {
 import { useObjectContextStore } from '@/store/modules/object-context';
 import { useThemeStore } from '@/store/modules/theme';
 import { useRouterPush } from '@/hooks/common/router';
+import ProjectTeamBatchDialog, {
+  type BatchMemberPayload
+} from '@/views/project/shared/components/project-team-batch-dialog.vue';
 import { useCurrentProject } from '../../shared/use-current-project';
 import BaseInfoDialog from './modules/base-info-dialog.vue';
+import MemberBatchRemoveDialog from './modules/member-batch-remove-dialog.vue';
 import MemberOperateDialog from './modules/member-operate-dialog.vue';
 import MemberRemoveDialog from './modules/member-remove-dialog.vue';
 import ProjectDeleteDialog from './modules/project-delete-dialog.vue';
@@ -68,7 +74,11 @@ const pageLoading = ref(false);
 const memberLoading = ref(false);
 const baseInfoVisible = ref(false);
 const memberOperateVisible = ref(false);
+const memberBatchVisible = ref(false);
 const memberRemoveVisible = ref(false);
+const memberBatchRemoveVisible = ref(false);
+const teamPanelRef = ref<InstanceType<typeof SettingTeamPanel> | null>(null);
+const selectedBatchRemoveMembers = ref<Api.Project.ProjectMember[]>([]);
 const statusActionVisible = ref(false);
 const deleteVisible = ref(false);
 const memberOperateMode = ref<'create' | 'edit'>('create');
@@ -211,9 +221,7 @@ function scrollToSection(key: string) {
 }
 
 function openCreateMember() {
-  memberOperateMode.value = 'create';
-  selectedMember.value = null;
-  memberOperateVisible.value = true;
+  memberBatchVisible.value = true;
 }
 
 function openEditMember(member: Api.Project.ProjectMember) {
@@ -227,6 +235,12 @@ function openRemoveMember(member: Api.Project.ProjectMember) {
   memberRemoveVisible.value = true;
 }
 
+function openBatchRemoveMember(targetMembers: Api.Project.ProjectMember[]) {
+  if (!targetMembers.length) return;
+  selectedBatchRemoveMembers.value = targetMembers;
+  memberBatchRemoveVisible.value = true;
+}
+
 function openLifecycleAction(action: Api.Project.ProjectLifecycleAction) {
   selectedAction.value = action;
   statusActionVisible.value = true;
@@ -299,6 +313,53 @@ async function handleSubmitRemoveMember(payload: Api.Project.InactiveProjectMemb
   await Promise.all([loadMembers(), loadSettings()]);
 }
 
+async function handleSubmitMemberBatch(payloads: BatchMemberPayload[]) {
+  if (!currentObjectId.value || !payloads.length) {
+    return;
+  }
+
+  const { error } = await fetchBatchCreateProjectMembers(currentObjectId.value, {
+    members: payloads.map(item => ({
+      userId: item.userId,
+      roleId: item.roleId,
+      remark: item.remark.trim() || null
+    }))
+  });
+
+  if (error) {
+    return;
+  }
+
+  window.$message?.success(`已新增 ${payloads.length} 名成员`);
+  memberBatchVisible.value = false;
+
+  await Promise.all([loadMembers(), loadSettings()]);
+}
+
+async function handleSubmitBatchRemoveMember(payload: { reason: string | null }) {
+  if (!currentObjectId.value || !selectedBatchRemoveMembers.value.length) {
+    return;
+  }
+
+  const memberIds = selectedBatchRemoveMembers.value.map(item => item.id).filter((id): id is string => Boolean(id));
+
+  if (!memberIds.length) return;
+
+  const { error } = await fetchBatchInactiveProjectMembers(currentObjectId.value, {
+    memberIds,
+    reason: payload.reason
+  });
+
+  if (error) return;
+
+  window.$message?.success(`已移出 ${memberIds.length} 名成员`);
+  memberBatchRemoveVisible.value = false;
+  selectedBatchRemoveMembers.value = [];
+  teamPanelRef.value?.clearSelection();
+
+  await Promise.all([loadMembers(), loadSettings()]);
+}
+
 async function handleSubmitLifecycleAction(payload: Api.Project.ChangeProjectStatusParams) {
   if (!currentObjectId.value || !selectedAction.value) {
     return;
@@ -387,6 +448,7 @@ watch(
 
         <section :id="sectionIdMap.team" class="project-setting-page__section">
           <SettingTeamPanel
+            ref="teamPanelRef"
             :members="members"
             :role-options="roleOptions"
             :loading="memberLoading"
@@ -394,6 +456,7 @@ watch(
             @create="openCreateMember"
             @edit="openEditMember"
             @remove="openRemoveMember"
+            @batch-remove="openBatchRemoveMember"
           />
         </section>
 
@@ -432,6 +495,18 @@ watch(
       :member="selectedMember"
       @submit="handleSubmitRemoveMember"
     />
+    <ProjectTeamBatchDialog
+      v-model:visible="memberBatchVisible"
+      :user-options="userOptions"
+      :role-options="roleOptions"
+      :disabled-user-ids="members.filter(member => member.status === 0).map(member => member.userId)"
+      @submit="handleSubmitMemberBatch"
+    />
+    <MemberBatchRemoveDialog
+      v-model:visible="memberBatchRemoveVisible"
+      :members="selectedBatchRemoveMembers"
+      @submit="handleSubmitBatchRemoveMember"
+    />
     <StatusActionDialog
       v-model:visible="statusActionVisible"
       :action="selectedAction"
diff --git a/src/views/project/project/setting/modules/member-batch-remove-dialog.vue b/src/views/project/project/setting/modules/member-batch-remove-dialog.vue
new file mode 100644
index 0000000..eb83283
--- /dev/null
+++ b/src/views/project/project/setting/modules/member-batch-remove-dialog.vue
@@ -0,0 +1,81 @@
+<script setup lang="ts">
+import { computed, reactive, watch } from 'vue';
+import BusinessFormDialog from '@/components/custom/business-form-dialog.vue';
+
+defineOptions({ name: 'ProjectMemberBatchRemoveDialog' });
+
+interface Props {
+  members: Api.Project.ProjectMember[];
+}
+
+interface Emits {
+  (e: 'submit', payload: { reason: string | null }): void;
+}
+
+const props = defineProps<Props>();
+const emit = defineEmits<Emits>();
+
+const visible = defineModel<boolean>('visible', {
+  default: false
+});
+
+const model = reactive({
+  reason: ''
+});
+
+const previewNames = computed(() => {
+  const names = props.members.map(item => item.userNickname || item.userId || '').filter(Boolean);
+
+  if (names.length <= 5) {
+    return names.join('、');
+  }
+
+  return `${names.slice(0, 5).join('、')} 等 ${names.length} 人`;
+});
+
+function handleConfirm() {
+  emit('submit', {
+    reason: model.reason.trim() || null
+  });
+}
+
+watch(
+  () => visible.value,
+  value => {
+    if (!value) {
+      return;
+    }
+
+    model.reason = '';
+  }
+);
+</script>
+
+<template>
+  <BusinessFormDialog v-model="visible" title="批量移出成员" preset="sm" @confirm="handleConfirm">
+    <ElAlert
+      :title="`确认将选中的 ${props.members.length} 名成员（${previewNames}）从当前项目团队中移出吗？`"
+      type="warning"
+      :closable="false"
+      class="mb-12px"
+    />
+    <ElAlert
+      title="若任一成员仍担任未关闭执行的负责人，后端会整体拒绝；请先完成执行负责人交接后再批量移出。"
+      type="info"
+      :closable="false"
+      class="mb-16px"
+    />
+    <ElForm label-position="top">
+      <ElFormItem label="移出原因">
+        <ElInput
+          v-model="model.reason"
+          type="textarea"
+          :rows="4"
+          maxlength="500"
+          show-word-limit
+          placeholder="请输入移出原因（统一应用到所有选中成员）"
+        />
+      </ElFormItem>
+    </ElForm>
+  </BusinessFormDialog>
+</template>
diff --git a/src/views/project/project/setting/modules/setting-team-panel.vue b/src/views/project/project/setting/modules/setting-team-panel.vue
index 7ac1c9b..5e9fd2d 100644
--- a/src/views/project/project/setting/modules/setting-team-panel.vue
+++ b/src/views/project/project/setting/modules/setting-team-panel.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed, ref, watch } from 'vue';
+import type { TableInstance } from 'element-plus';
 import { filterProjectMembers, formatProjectMemberDate, getProjectTeamTableHeight } from '../shared';
 
 defineOptions({ name: 'ProjectSettingTeamPanel' });
@@ -15,6 +16,7 @@ interface Emits {
   (e: 'create'): void;
   (e: 'edit', member: Api.Project.ProjectMember): void;
   (e: 'remove', member: Api.Project.ProjectMember): void;
+  (e: 'batch-remove', members: Api.Project.ProjectMember[]): void;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -26,19 +28,41 @@ const emit = defineEmits<Emits>();
 const searchKeyword = ref('');
 const selectedRoleId = ref('');
 const teamTableHeight = getProjectTeamTableHeight(5);
+const tableRef = ref<TableInstance | null>(null);
+const selectedRows = ref<Api.Project.ProjectMember[]>([]);
+const selectedCount = computed(() => selectedRows.value.length);
+
+function isRowSelectable(row: Api.Project.ProjectMember) {
+  return row.status === 0 && !row.managerFlag;
+}
+
+function handleSelectionChange(rows: Api.Project.ProjectMember[]) {
+  selectedRows.value = rows;
+}
+
+function handleBatchRemove() {
+  if (!selectedRows.value.length) return;
+  emit('batch-remove', [...selectedRows.value]);
+}
+
+function clearSelection() {
+  tableRef.value?.clearSelection();
+  selectedRows.value = [];
+}
+
+defineExpose({ clearSelection });
 const roleFilterOptions = computed(() => {
-  const roleMap = new Map<string, string>();
+  const seen = new Set<string>();
+  const result: Api.SystemManage.RoleSimple[] = [];
 
   props.roleOptions.forEach(role => {
-    if (!roleMap.has(role.id)) {
-      roleMap.set(role.id, role.name);
-    }
+    if (role.visible === 0) return;
+    if (seen.has(role.id)) return;
+    seen.add(role.id);
+    result.push(role);
   });
 
-  return [...roleMap.entries()].map(([value, label]) => ({
-    value,
-    label
-  }));
+  return result;
 });
 const filteredMembers = computed(() =>
   filterProjectMembers(props.members, {
@@ -49,7 +73,7 @@ const filteredMembers = computed(() =>
 const hasFilter = computed(() => Boolean(searchKeyword.value.trim() || selectedRoleId.value));
 
 watch(roleFilterOptions, options => {
-  if (selectedRoleId.value && !options.some(item => item.value === selectedRoleId.value)) {
+  if (selectedRoleId.value && !options.some(item => item.id === selectedRoleId.value)) {
     selectedRoleId.value = '';
   }
 });
@@ -72,44 +96,46 @@ function getMemberStatusTagType(status: Api.Project.ProjectMemberStatus) {
         </div>
         <div class="setting-team-panel__toolbar">
           <ElSelect v-model="selectedRoleId" clearable placeholder="筛选角色" class="setting-team-panel__role-filter">
-            <ElOption
-              v-for="option in roleFilterOptions"
-              :key="option.value"
-              :label="option.label"
-              :value="option.value"
-            />
+            <ElOption v-for="role in roleFilterOptions" :key="role.id" :label="role.name" :value="role.id">
+              <div class="setting-team-panel__role-option">
+                <span class="setting-team-panel__role-option-name">{{ role.name }}</span>
+                <ElTooltip v-if="role.remark" :content="role.remark" placement="right" :show-after="120">
+                  <icon-ep:info-filled class="setting-team-panel__role-option-info" @click.stop />
+                </ElTooltip>
+              </div>
+            </ElOption>
           </ElSelect>
           <ElInput v-model="searchKeyword" clearable placeholder="搜索成员姓名" class="setting-team-panel__search" />
           <ElButton type="primary" plain :disabled="props.readonly" @click="emit('create')">新增成员</ElButton>
+          <ElButton type="danger" plain :disabled="props.readonly || selectedCount === 0" @click="handleBatchRemove">
+            批量移出{{ selectedCount > 0 ? `（${selectedCount}）` : '' }}
+          </ElButton>
         </div>
       </div>
     </template>
 
     <ElTable
+      ref="tableRef"
       v-loading="props.loading"
       :data="filteredMembers"
       :height="teamTableHeight"
       :empty-text="hasFilter ? '未找到匹配成员' : '暂无成员'"
       border
       row-key="id"
+      @selection-change="handleSelectionChange"
     >
+      <ElTableColumn
+        v-if="!props.readonly"
+        type="selection"
+        width="48"
+        align="center"
+        :selectable="(row: Api.Project.ProjectMember) => isRowSelectable(row)"
+      />
       <ElTableColumn type="index" label="序号" width="64" align="center" />
       <ElTableColumn prop="userNickname" label="成员姓名" min-width="140" />
       <ElTableColumn label="当前角色" min-width="180">
         <template #default="{ row }">
-          <div class="setting-team-panel__role-cell">
-            <span class="setting-team-panel__role-main">{{ row.roleName || '--' }}</span>
-            <ElTag
-              v-for="extra in row.additionalRoleNames"
-              :key="extra"
-              size="small"
-              type="info"
-              effect="plain"
-              class="setting-team-panel__role-extra"
-            >
-              {{ extra }}
-            </ElTag>
-          </div>
+          {{ row.roleName || '--' }}
         </template>
       </ElTableColumn>
       <ElTableColumn label="成员状态" width="110" align="center">
@@ -186,15 +212,31 @@ function getMemberStatusTagType(status: Api.Project.ProjectMemberStatus) {
   gap: 12px;
 }
 
-.setting-team-panel__role-cell {
-  display: inline-flex;
+.setting-team-panel__role-option {
+  display: flex;
   align-items: center;
-  flex-wrap: wrap;
-  gap: 6px;
+  justify-content: space-between;
+  gap: 8px;
+  width: 100%;
 }
 
-.setting-team-panel__role-extra {
-  font-weight: 400;
+.setting-team-panel__role-option-name {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.setting-team-panel__role-option-info {
+  flex-shrink: 0;
+  font-size: 14px;
+  color: var(--el-text-color-placeholder);
+  cursor: help;
+}
+
+.setting-team-panel__role-option-info:hover {
+  color: var(--el-color-primary);
 }
 
 @media (width <= 768px) {
diff --git a/src/views/project/shared/components/project-team-batch-dialog.vue b/src/views/project/shared/components/project-team-batch-dialog.vue
new file mode 100644
index 0000000..9c65a82
--- /dev/null
+++ b/src/views/project/shared/components/project-team-batch-dialog.vue
@@ -0,0 +1,1157 @@
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
+import { PROJECT_MANAGER_ROLE_CODE } from '@/constants/business';
+import { fetchGetDeptSimpleList, fetchGetUserManagementRelationTree } from '@/service/api';
+import BusinessFormDialog from '@/components/custom/business-form-dialog.vue';
+import { buildMenuTree } from '@/views/system/shared/menu-tree';
+import IconEpUser from '~icons/ep/user';
+import IconEpOfficeBuilding from '~icons/ep/office-building';
+
+defineOptions({ name: 'ProjectTeamBatchDialog' });
+
+type Source = 'dept' | 'chain' | 'all';
+
+export interface BatchMemberPayload {
+  userId: string;
+  roleId: string;
+  remark: string;
+}
+
+interface Props {
+  userOptions: Api.SystemManage.UserSimple[];
+  roleOptions: Api.SystemManage.RoleSimple[];
+  /** 已加入项目的 userId(包含项目经理 locked 行),作为禁选 */
+  disabledUserIds: readonly string[];
+}
+
+interface Emits {
+  (e: 'submit', payloads: BatchMemberPayload[]): void;
+}
+
+const props = defineProps<Props>();
+const emit = defineEmits<Emits>();
+
+const visible = defineModel<boolean>('visible', { default: false });
+
+const source = ref<Source>('dept');
+const currentNodeId = ref<string | null>(null);
+const selected = ref<Set<string>>(new Set());
+const roleOverrides = ref<Map<string, string>>(new Map());
+const hideAdded = ref(false);
+const treeSearch = ref('');
+const userSearch = ref('');
+const defaultRoleId = ref('');
+const batchRemark = ref('');
+
+const deptTree = ref<Api.SystemManage.DeptSimple[]>([]);
+const deptTreeLoading = ref(false);
+let deptTreeLoaded = false;
+
+async function ensureDeptTree() {
+  if (deptTreeLoaded) return;
+  deptTreeLoading.value = true;
+  const { data } = await fetchGetDeptSimpleList();
+  deptTreeLoading.value = false;
+  // 后端返回平铺数组(每条带 parentId),前端按 parentId 组装为嵌套树
+  deptTree.value = data ? buildMenuTree(data) : [];
+  deptTreeLoaded = true;
+}
+
+const chainTree = ref<Api.SystemManage.UserManagementRelationTreeRespVO[]>([]);
+const chainTreeLoading = ref(false);
+let chainTreeLoaded = false;
+
+async function ensureChainTree() {
+  if (chainTreeLoaded) return;
+  chainTreeLoading.value = true;
+  const { data } = await fetchGetUserManagementRelationTree({ fromUserIndex: false });
+  chainTreeLoading.value = false;
+  chainTree.value = data ?? [];
+  chainTreeLoaded = true;
+}
+
+const disabledUserIdSet = computed(() => new Set(props.disabledUserIds.map(String)));
+
+const selectableRoles = computed(() =>
+  props.roleOptions.filter(role => role.code !== PROJECT_MANAGER_ROLE_CODE && role.visible !== 0)
+);
+
+const selectedCount = computed(() => selected.value.size);
+const visibleSelectedIds = computed(() => [...selected.value].slice(0, 4));
+const overflowSelectedCount = computed(() => Math.max(0, selected.value.size - 4));
+
+const overflowPopoverVisible = ref(false);
+const overflowReferenceEl = ref<HTMLElement | null>(null);
+
+function handleOverflowOutsideClick(e: MouseEvent) {
+  if (!overflowPopoverVisible.value) return;
+  const target = e.target as HTMLElement | null;
+  if (!target) return;
+  // 点击在 popover 自身 / 任意 popper / dropdown 菜单 / reference 按钮上,都不关
+  if (target.closest('.team-batch__overflow-popper')) return;
+  if (target.closest('.el-popper')) return;
+  if (target.closest('.el-dropdown-menu')) return;
+  if (target.closest('.el-dropdown__popper')) return;
+  if (overflowReferenceEl.value?.contains(target)) return;
+  overflowPopoverVisible.value = false;
+}
+
+onMounted(() => document.addEventListener('mousedown', handleOverflowOutsideClick, true));
+onBeforeUnmount(() => document.removeEventListener('mousedown', handleOverflowOutsideClick, true));
+const overrideCount = computed(() => {
+  let count = 0;
+  for (const uid of roleOverrides.value.keys()) {
+    if (selected.value.has(uid)) count += 1;
+  }
+  return count;
+});
+
+const confirmDisabled = computed(() => selectedCount.value === 0 || !defaultRoleId.value);
+
+function resetState() {
+  source.value = 'dept';
+  currentNodeId.value = null;
+  selected.value = new Set();
+  roleOverrides.value = new Map();
+  hideAdded.value = false;
+  treeSearch.value = '';
+  userSearch.value = '';
+  defaultRoleId.value = '';
+  batchRemark.value = '';
+  overflowPopoverVisible.value = false;
+}
+
+function collectDeptIds(node: Api.SystemManage.DeptSimple): string[] {
+  const ids: string[] = [String(node.id)];
+  if (node.children) {
+    for (const c of node.children) ids.push(...collectDeptIds(c));
+  }
+  return ids;
+}
+
+function getDeptUserIds(node: Api.SystemManage.DeptSimple): string[] {
+  const deptIds = new Set(collectDeptIds(node));
+  return props.userOptions
+    .filter(u => u.deptId !== null && u.deptId !== undefined && deptIds.has(String(u.deptId)))
+    .map(u => String(u.id));
+}
+
+type TreeCheckState = 'none' | 'partial' | 'all';
+
+function getDeptCheckState(node: Api.SystemManage.DeptSimple): TreeCheckState {
+  const ids = getDeptUserIds(node).filter(id => !disabledUserIdSet.value.has(id));
+  if (!ids.length) return 'none';
+  const sel = ids.filter(id => selected.value.has(id)).length;
+  if (sel === 0) return 'none';
+  if (sel === ids.length) return 'all';
+  return 'partial';
+}
+
+function findDeptNode(list: Api.SystemManage.DeptSimple[], key: string): Api.SystemManage.DeptSimple | null {
+  for (const n of list) {
+    if (String(n.id) === key) return n;
+    if (n.children) {
+      const r = findDeptNode(n.children, key);
+      if (r) return r;
+    }
+  }
+  return null;
+}
+
+function chainNodeKey(node: Api.SystemManage.UserManagementRelationTreeRespVO): string {
+  return node.id ?? `chain_${node.userId}`;
+}
+
+function getChainUserIds(node: Api.SystemManage.UserManagementRelationTreeRespVO): string[] {
+  const ids = new Set<string>([String(node.userId)]);
+  if (node.children) {
+    for (const c of node.children) {
+      for (const id of getChainUserIds(c)) ids.add(id);
+    }
+  }
+  return [...ids];
+}
+
+function getChainCheckState(node: Api.SystemManage.UserManagementRelationTreeRespVO): TreeCheckState {
+  const ids = getChainUserIds(node).filter(id => !disabledUserIdSet.value.has(id));
+  if (!ids.length) return 'none';
+  const sel = ids.filter(id => selected.value.has(id)).length;
+  if (sel === 0) return 'none';
+  if (sel === ids.length) return 'all';
+  return 'partial';
+}
+
+function findChainNode(
+  list: Api.SystemManage.UserManagementRelationTreeRespVO[],
+  key: string
+): Api.SystemManage.UserManagementRelationTreeRespVO | null {
+  for (const n of list) {
+    if (chainNodeKey(n) === key) return n;
+    if (n.children) {
+      const r = findChainNode(n.children, key);
+      if (r) return r;
+    }
+  }
+  return null;
+}
+
+function toggleChainCheck(node: Api.SystemManage.UserManagementRelationTreeRespVO) {
+  const ids = getChainUserIds(node).filter(id => !disabledUserIdSet.value.has(id));
+  const state = getChainCheckState(node);
+  if (state === 'all') {
+    for (const id of ids) {
+      selected.value.delete(id);
+      roleOverrides.value.delete(id);
+    }
+  } else {
+    for (const id of ids) selected.value.add(id);
+  }
+  selected.value = new Set(selected.value);
+  roleOverrides.value = new Map(roleOverrides.value);
+}
+
+function activateNode(key: string) {
+  currentNodeId.value = key;
+}
+
+function handleDeptNodeClick(data: Api.SystemManage.DeptSimple) {
+  activateNode(String(data.id));
+}
+
+function handleChainNodeClick(data: Api.SystemManage.UserManagementRelationTreeRespVO) {
+  activateNode(chainNodeKey(data));
+}
+
+function toggleDeptCheck(node: Api.SystemManage.DeptSimple) {
+  const ids = getDeptUserIds(node).filter(id => !disabledUserIdSet.value.has(id));
+  const state = getDeptCheckState(node);
+  if (state === 'all') {
+    for (const id of ids) {
+      selected.value.delete(id);
+      roleOverrides.value.delete(id);
+    }
+  } else {
+    for (const id of ids) selected.value.add(id);
+  }
+  selected.value = new Set(selected.value);
+  roleOverrides.value = new Map(roleOverrides.value);
+}
+
+const deptTreeProps = { children: 'children', label: 'name' } as const;
+const chainTreeProps = { children: 'children', label: 'userNickname' } as const;
+
+function getDeptCheckStateClass(node: Api.SystemManage.DeptSimple) {
+  const s = getDeptCheckState(node);
+  return { 'is-checked': s === 'all', 'is-partial': s === 'partial' };
+}
+
+function getDeptMetaText(node: Api.SystemManage.DeptSimple): string {
+  const total = getDeptUserIds(node).length;
+  return total > 0 ? `${total} 人` : '';
+}
+
+function getChainCheckStateClass(node: Api.SystemManage.UserManagementRelationTreeRespVO) {
+  const s = getChainCheckState(node);
+  return { 'is-checked': s === 'all', 'is-partial': s === 'partial' };
+}
+
+function getChainMetaText(node: Api.SystemManage.UserManagementRelationTreeRespVO): string {
+  const total = getChainUserIds(node).length;
+  return total > 1 ? `${total} 人` : '';
+}
+
+function visibleUserIds(): string[] {
+  if (source.value === 'all') return props.userOptions.map(u => String(u.id));
+  if (!currentNodeId.value) return props.userOptions.map(u => String(u.id));
+  if (source.value === 'dept') {
+    const node = findDeptNode(deptTree.value, currentNodeId.value);
+    return node ? getDeptUserIds(node) : props.userOptions.map(u => String(u.id));
+  }
+  if (source.value === 'chain') {
+    const node = findChainNode(chainTree.value, currentNodeId.value);
+    return node ? getChainUserIds(node) : props.userOptions.map(u => String(u.id));
+  }
+  return props.userOptions.map(u => String(u.id));
+}
+
+function matchDeptKeyword(node: Api.SystemManage.DeptSimple, kw: string): boolean {
+  if (!kw) return true;
+  if (node.name.toLowerCase().includes(kw)) return true;
+  if (node.children) return node.children.some(c => matchDeptKeyword(c, kw));
+  return false;
+}
+
+function matchChainKeyword(node: Api.SystemManage.UserManagementRelationTreeRespVO, kw: string): boolean {
+  if (!kw) return true;
+  if (node.userNickname.toLowerCase().includes(kw)) return true;
+  if (node.children) return node.children.some(c => matchChainKeyword(c, kw));
+  return false;
+}
+
+const visibleDeptTree = computed(() => {
+  const kw = treeSearch.value.trim().toLowerCase();
+  if (!kw) return deptTree.value;
+  return deptTree.value.filter(n => matchDeptKeyword(n, kw));
+});
+
+const visibleChainTree = computed(() => {
+  const kw = treeSearch.value.trim().toLowerCase();
+  if (!kw) return chainTree.value;
+  return chainTree.value.filter(n => matchChainKeyword(n, kw));
+});
+
+const filteredUserIds = computed(() => {
+  let ids = visibleUserIds();
+  if (hideAdded.value) ids = ids.filter(id => !disabledUserIdSet.value.has(id));
+  const kw = userSearch.value.trim().toLowerCase();
+  if (kw) {
+    ids = ids.filter(id => {
+      const u = getUserById(id);
+      if (!u) return false;
+      return u.nickname.toLowerCase().includes(kw) || (u.username ?? '').toLowerCase().includes(kw);
+    });
+  }
+  return ids;
+});
+
+async function switchSource(next: Source) {
+  if (source.value === next) return;
+  source.value = next;
+  currentNodeId.value = null;
+  treeSearch.value = '';
+  if (next === 'dept') await ensureDeptTree();
+  else if (next === 'chain') await ensureChainTree();
+}
+
+function toggleUser(uid: string) {
+  if (disabledUserIdSet.value.has(uid)) return;
+  if (selected.value.has(uid)) {
+    selected.value.delete(uid);
+    roleOverrides.value.delete(uid);
+  } else {
+    selected.value.add(uid);
+  }
+  selected.value = new Set(selected.value);
+  roleOverrides.value = new Map(roleOverrides.value);
+}
+
+function clearAll() {
+  selected.value = new Set();
+  roleOverrides.value = new Map();
+}
+
+function getUserById(uid: string) {
+  return props.userOptions.find(u => String(u.id) === uid);
+}
+
+function getRoleNameById(roleId: string): string {
+  return props.roleOptions.find(r => r.id === roleId)?.name ?? '';
+}
+
+function setRoleOverride(uid: string, roleId: string | null) {
+  if (roleId === null) roleOverrides.value.delete(uid);
+  else roleOverrides.value.set(uid, roleId);
+  roleOverrides.value = new Map(roleOverrides.value);
+}
+
+function clearUserFilter() {
+  userSearch.value = '';
+  hideAdded.value = false;
+}
+
+async function handleConfirm() {
+  if (confirmDisabled.value) return;
+  const payloads: BatchMemberPayload[] = [...selected.value].map(uid => ({
+    userId: uid,
+    roleId: roleOverrides.value.get(uid) ?? defaultRoleId.value,
+    remark: batchRemark.value.trim()
+  }));
+  emit('submit', payloads);
+}
+
+watch(visible, async value => {
+  if (!value) {
+    resetState();
+    return;
+  }
+  if (source.value === 'dept') await ensureDeptTree();
+  else if (source.value === 'chain') await ensureChainTree();
+});
+</script>
+
+<template>
+  <BusinessFormDialog
+    v-model="visible"
+    title="新增团队成员"
+    preset="lg"
+    width="820px"
+    max-body-height="540px"
+    :confirm-disabled="confirmDisabled"
+    :confirm-text="`确认添加(${selectedCount})`"
+    @confirm="handleConfirm"
+  >
+    <div class="team-batch">
+      <div class="team-batch__tabs">
+        <button
+          v-for="tab in [
+            { key: 'dept', label: '部门' },
+            { key: 'chain', label: '团队' },
+            { key: 'all', label: '全部用户' }
+          ]"
+          :key="tab.key"
+          class="team-batch__tab"
+          :class="{ 'is-active': source === tab.key }"
+          type="button"
+          @click="switchSource(tab.key as Source)"
+        >
+          {{ tab.label }}
+        </button>
+      </div>
+
+      <div class="team-batch__picker" :class="{ 'is-single': source === 'all' }">
+        <!-- 左栏:dept / chain 树,all 时隐藏 -->
+        <div v-if="source !== 'all'" class="team-batch__col team-batch__col--tree">
+          <div class="team-batch__col-head">{{ source === 'dept' ? '部门' : '团队' }}</div>
+          <div class="team-batch__search">
+            <ElInput
+              v-model="treeSearch"
+              size="small"
+              clearable
+              :placeholder="source === 'dept' ? '搜索部门…' : '搜索成员…'"
+            />
+          </div>
+          <div v-loading="source === 'dept' ? deptTreeLoading : chainTreeLoading" class="team-batch__col-body">
+            <ElTree
+              v-if="source === 'dept'"
+              :data="visibleDeptTree"
+              :props="deptTreeProps"
+              node-key="id"
+              :expand-on-click-node="false"
+              :default-expand-all="true"
+              :indent="14"
+              class="team-batch__tree"
+              @node-click="handleDeptNodeClick"
+            >
+              <template #default="{ data }">
+                <div class="team-batch__node" :class="{ 'is-active': currentNodeId === String(data.id) }">
+                  <span
+                    class="team-batch__node-check"
+                    :class="getDeptCheckStateClass(data)"
+                    @click.stop="toggleDeptCheck(data)"
+                  />
+                  <IconEpOfficeBuilding class="team-batch__node-icon" />
+                  <span class="team-batch__node-label">{{ data.name }}</span>
+                  <span v-if="getDeptMetaText(data)" class="team-batch__node-meta">
+                    {{ getDeptMetaText(data) }}
+                  </span>
+                </div>
+              </template>
+            </ElTree>
+            <ElTree
+              v-else
+              :data="visibleChainTree"
+              :props="chainTreeProps"
+              node-key="userId"
+              :expand-on-click-node="false"
+              :default-expand-all="true"
+              :indent="14"
+              class="team-batch__tree"
+              @node-click="handleChainNodeClick"
+            >
+              <template #default="{ data }">
+                <div class="team-batch__node" :class="{ 'is-active': currentNodeId === chainNodeKey(data) }">
+                  <span
+                    class="team-batch__node-check"
+                    :class="getChainCheckStateClass(data)"
+                    @click.stop="toggleChainCheck(data)"
+                  />
+                  <IconEpUser class="team-batch__node-icon" />
+                  <span class="team-batch__node-label">{{ data.userNickname }}</span>
+                  <span v-if="getChainMetaText(data)" class="team-batch__node-meta">
+                    {{ getChainMetaText(data) }}
+                  </span>
+                </div>
+              </template>
+            </ElTree>
+          </div>
+        </div>
+        <!-- 右栏:候选用户 -->
+        <div class="team-batch__col team-batch__col--users">
+          <div class="team-batch__col-head team-batch__col-head--user">
+            <span>
+              候选用户(
+              <span>{{ filteredUserIds.length }}</span>
+              人)
+            </span>
+            <label class="team-batch__hide-added">
+              <ElCheckbox v-model="hideAdded">隐藏已添加</ElCheckbox>
+            </label>
+          </div>
+          <div class="team-batch__search">
+            <ElInput v-model="userSearch" size="small" clearable placeholder="搜索用户名 / 部门…" />
+          </div>
+          <div class="team-batch__col-body">
+            <div v-if="!filteredUserIds.length" class="team-batch__empty">
+              该节点下没有匹配用户
+              <button
+                v-if="userSearch || hideAdded"
+                type="button"
+                class="team-batch__link team-batch__empty-action"
+                @click="clearUserFilter"
+              >
+                清除筛选条件
+              </button>
+            </div>
+            <div
+              v-for="uid in filteredUserIds"
+              :key="uid"
+              class="team-batch__user-row"
+              :class="{ 'is-disabled': disabledUserIdSet.has(uid) }"
+              @click="toggleUser(uid)"
+            >
+              <span class="team-batch__node-check" :class="{ 'is-checked': selected.has(uid) }" />
+              <span class="team-batch__user-avatar">{{ (getUserById(uid)?.nickname ?? '?').slice(0, 1) }}</span>
+              <div class="team-batch__user-main">
+                <div class="team-batch__user-name">{{ getUserById(uid)?.nickname }}</div>
+              </div>
+              <span v-if="disabledUserIdSet.has(uid)" class="team-batch__user-tag">已添加</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="team-batch__selected">
+        <div class="team-batch__selected-head">
+          <span>
+            已选
+            <strong>{{ selectedCount }}</strong>
+            人
+            <span v-if="overrideCount > 0">
+              · 其中
+              <strong class="team-batch__override-cnt">{{ overrideCount }}</strong>
+              人已自定义角色
+            </span>
+          </span>
+          <button type="button" class="team-batch__link team-batch__link--danger" @click="clearAll">清空</button>
+        </div>
+        <div v-if="selectedCount === 0" class="team-batch__selected-empty">从左侧勾选用户后会出现在这里</div>
+        <div v-else class="team-batch__chips">
+          <span v-for="uid in visibleSelectedIds" :key="uid" class="team-batch__chip">
+            <span class="team-batch__chip-name">{{ getUserById(uid)?.nickname }}</span>
+            <ElDropdown
+              trigger="click"
+              @command="roleId => setRoleOverride(uid, roleId === '__default__' ? null : (roleId as string))"
+            >
+              <button type="button" class="team-batch__chip-role" :class="{ 'is-override': roleOverrides.has(uid) }">
+                {{
+                  roleOverrides.get(uid)
+                    ? getRoleNameById(roleOverrides.get(uid)!)
+                    : defaultRoleId
+                      ? getRoleNameById(defaultRoleId)
+                      : '默认'
+                }}
+                ▾
+              </button>
+              <template #dropdown>
+                <ElDropdownMenu>
+                  <ElDropdownItem command="__default__">使用默认</ElDropdownItem>
+                  <ElDropdownItem v-for="role in selectableRoles" :key="role.id" :command="role.id">
+                    <div class="team-batch__role-option">
+                      <span class="team-batch__role-option-name">{{ role.name }}</span>
+                      <ElTooltip v-if="role.remark" :content="role.remark" placement="right" :show-after="120">
+                        <icon-ep:info-filled class="team-batch__role-option-info" @click.stop />
+                      </ElTooltip>
+                    </div>
+                  </ElDropdownItem>
+                </ElDropdownMenu>
+              </template>
+            </ElDropdown>
+            <button type="button" class="team-batch__chip-x" @click="toggleUser(uid)">×</button>
+          </span>
+          <ElPopover
+            v-if="overflowSelectedCount > 0"
+            :visible="overflowPopoverVisible"
+            placement="top-end"
+            :width="360"
+            popper-class="team-batch__overflow-popper"
+          >
+            <template #reference>
+              <button
+                ref="overflowReferenceEl"
+                type="button"
+                class="team-batch__chip-more"
+                @click="overflowPopoverVisible = !overflowPopoverVisible"
+              >
+                +{{ overflowSelectedCount }} 更多
+              </button>
+            </template>
+            <div class="team-batch__overflow-head">
+              <span>
+                另外
+                <strong>{{ overflowSelectedCount }}</strong>
+                人
+              </span>
+              <button type="button" class="team-batch__link team-batch__link--danger" @click="clearAll">
+                清空全部
+              </button>
+            </div>
+            <div class="team-batch__overflow-chips">
+              <span v-for="uid in [...selected].slice(4)" :key="uid" class="team-batch__chip">
+                <span class="team-batch__chip-name">{{ getUserById(uid)?.nickname }}</span>
+                <ElDropdown
+                  trigger="click"
+                  @command="roleId => setRoleOverride(uid, roleId === '__default__' ? null : (roleId as string))"
+                >
+                  <button
+                    type="button"
+                    class="team-batch__chip-role"
+                    :class="{ 'is-override': roleOverrides.has(uid) }"
+                  >
+                    {{
+                      roleOverrides.get(uid)
+                        ? getRoleNameById(roleOverrides.get(uid)!)
+                        : defaultRoleId
+                          ? getRoleNameById(defaultRoleId)
+                          : '默认'
+                    }}
+                    ▾
+                  </button>
+                  <template #dropdown>
+                    <ElDropdownMenu>
+                      <ElDropdownItem command="__default__">使用默认</ElDropdownItem>
+                      <ElDropdownItem v-for="role in selectableRoles" :key="role.id" :command="role.id">
+                        <div class="team-batch__role-option">
+                          <span class="team-batch__role-option-name">{{ role.name }}</span>
+                          <ElTooltip v-if="role.remark" :content="role.remark" placement="right" :show-after="120">
+                            <icon-ep:info-filled class="team-batch__role-option-info" @click.stop />
+                          </ElTooltip>
+                        </div>
+                      </ElDropdownItem>
+                    </ElDropdownMenu>
+                  </template>
+                </ElDropdown>
+                <button type="button" class="team-batch__chip-x" @click="toggleUser(uid)">×</button>
+              </span>
+            </div>
+          </ElPopover>
+        </div>
+      </div>
+
+      <div class="team-batch__params">
+        <div class="team-batch__params-grid">
+          <div class="team-batch__field">
+            <label class="team-batch__field-label">
+              默认角色
+              <span class="team-batch__required">*</span>
+            </label>
+            <ElSelect v-model="defaultRoleId" placeholder="请选择默认角色">
+              <ElOption v-for="role in selectableRoles" :key="role.id" :label="role.name" :value="role.id">
+                <div class="team-batch__role-option">
+                  <span class="team-batch__role-option-name">{{ role.name }}</span>
+                  <ElTooltip v-if="role.remark" :content="role.remark" placement="right" :show-after="120">
+                    <icon-ep:info-filled class="team-batch__role-option-info" @click.stop />
+                  </ElTooltip>
+                </div>
+              </ElOption>
+            </ElSelect>
+          </div>
+          <div class="team-batch__field">
+            <label class="team-batch__field-label">备注(可选,统一应用)</label>
+            <ElInput v-model="batchRemark" maxlength="200" placeholder="如:本次批量加入" />
+          </div>
+        </div>
+      </div>
+    </div>
+  </BusinessFormDialog>
+</template>
+
+<style scoped>
+.team-batch {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.team-batch__tabs {
+  display: flex;
+  gap: 2px;
+  border-bottom: 1px solid var(--el-border-color);
+}
+
+.team-batch__tab {
+  padding: 6px 14px;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  font-size: 12.5px;
+  color: var(--el-text-color-regular);
+  border-bottom: 2px solid transparent;
+  margin-bottom: -1px;
+}
+
+.team-batch__tab.is-active {
+  color: var(--el-color-primary);
+  border-bottom-color: var(--el-color-primary);
+  font-weight: 600;
+}
+
+.team-batch__picker {
+  display: grid;
+  grid-template-columns: 240px 1fr;
+  gap: 12px;
+  height: min(260px, 40vh);
+  min-height: 240px;
+}
+
+.team-batch__col {
+  display: flex;
+  flex-direction: column;
+  border: 1px solid var(--el-border-color);
+  border-radius: 8px;
+  overflow: hidden;
+  background: #fff;
+}
+
+.team-batch__col-head {
+  padding: 6px 10px;
+  border-bottom: 1px solid var(--el-border-color);
+  background: #fafbfc;
+  font-size: 12px;
+  color: var(--el-text-color-regular);
+}
+
+.team-batch__col-body {
+  flex: 1;
+  overflow-y: auto;
+}
+
+.team-batch__placeholder {
+  padding: 24px;
+  color: var(--el-text-color-placeholder);
+  font-size: 12px;
+  text-align: center;
+}
+
+.team-batch__params {
+  border: 1px solid var(--el-border-color);
+  border-radius: 6px;
+  background: #fff;
+}
+
+.team-batch__tree {
+  padding: 4px;
+  background: transparent;
+}
+
+.team-batch__tree :deep(.el-tree-node__content) {
+  height: 32px;
+  padding-right: 8px !important;
+  border-radius: 4px;
+  transition: background-color 0.15s ease;
+}
+
+.team-batch__tree :deep(.el-tree-node__content:hover) {
+  background: var(--el-fill-color-light);
+}
+
+.team-batch__tree :deep(.el-tree-node__expand-icon) {
+  padding: 4px;
+  color: var(--el-text-color-placeholder);
+  font-size: 14px;
+}
+
+.team-batch__tree :deep(.el-tree-node__expand-icon.is-leaf) {
+  color: transparent;
+}
+
+.team-batch__node {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+  height: 100%;
+  font-size: 13px;
+  color: var(--el-text-color-primary);
+}
+
+.team-batch__node.is-active {
+  color: var(--el-color-primary);
+  font-weight: 500;
+}
+
+.team-batch__node-check {
+  position: relative;
+  flex-shrink: 0;
+  width: 14px;
+  height: 14px;
+  border: 1px solid var(--el-border-color);
+  border-radius: 2px;
+  background: var(--el-bg-color);
+  cursor: pointer;
+  transition:
+    border-color 0.15s ease,
+    background-color 0.15s ease;
+}
+
+.team-batch__node-check:hover {
+  border-color: var(--el-color-primary);
+}
+
+.team-batch__node-check.is-checked {
+  background: var(--el-color-primary);
+  border-color: var(--el-color-primary);
+}
+
+.team-batch__node-check.is-checked::after {
+  content: '';
+  position: absolute;
+  top: 1px;
+  left: 4px;
+  width: 3px;
+  height: 7px;
+  border: solid #fff;
+  border-width: 0 1px 1px 0;
+  transform: rotate(45deg);
+}
+
+.team-batch__node-check.is-partial {
+  background: var(--el-color-primary);
+  border-color: var(--el-color-primary);
+}
+
+.team-batch__node-check.is-partial::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 8px;
+  height: 2px;
+  margin: -1px 0 0 -4px;
+  background: #fff;
+  border-radius: 1px;
+}
+
+.team-batch__node-icon {
+  flex-shrink: 0;
+  font-size: 15px;
+  color: var(--el-text-color-secondary);
+  transition: color 0.15s ease;
+}
+
+.team-batch__node.is-active .team-batch__node-icon {
+  color: var(--el-color-primary);
+}
+
+.team-batch__node-label {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.team-batch__node-meta {
+  flex-shrink: 0;
+  padding-left: 6px;
+  font-size: 12px;
+  color: var(--el-text-color-placeholder);
+  font-variant-numeric: tabular-nums;
+}
+
+.team-batch__node.is-active .team-batch__node-meta {
+  color: var(--el-color-primary);
+  opacity: 0.7;
+}
+
+.team-batch__user-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 0 10px;
+  height: 36px;
+  border-bottom: 1px solid var(--el-border-color-lighter);
+  cursor: pointer;
+}
+
+.team-batch__user-row:hover {
+  background: var(--el-fill-color);
+}
+
+.team-batch__user-row.is-disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+
+.team-batch__user-row.is-disabled:hover {
+  background: transparent;
+}
+
+.team-batch__user-avatar {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, #c7d2fe, #93c5fd);
+  color: #fff;
+  font-size: 12px;
+  font-weight: 600;
+  flex-shrink: 0;
+}
+
+.team-batch__user-main {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.team-batch__user-name {
+  font-size: 13px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.team-batch__user-tag {
+  flex-shrink: 0;
+  padding: 1px 7px;
+  border-radius: 999px;
+  font-size: 11px;
+  background: var(--el-color-warning-light-7);
+  color: var(--el-color-warning-dark-2);
+}
+
+.team-batch__empty {
+  padding: 40px 0;
+  text-align: center;
+  color: var(--el-text-color-placeholder);
+  font-size: 12px;
+}
+
+.team-batch__selected {
+  padding: 8px 12px;
+  background: #f8fafc;
+  border: 1px solid var(--el-border-color);
+  border-radius: 6px;
+}
+
+.team-batch__selected-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 6px;
+  font-size: 11.5px;
+  color: var(--el-text-color-regular);
+}
+
+.team-batch__selected-head strong {
+  color: var(--el-color-primary);
+  font-weight: 700;
+  font-size: 12.5px;
+}
+
+.team-batch__selected-empty {
+  display: flex;
+  align-items: center;
+  min-height: 26px;
+  color: var(--el-text-color-placeholder);
+  font-size: 11.5px;
+}
+
+.team-batch__chips {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px;
+  min-height: 26px;
+}
+
+.team-batch__chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 4px 2px 8px;
+  background: #fff;
+  border: 1px solid var(--el-border-color-darker);
+  border-radius: 999px;
+  font-size: 11.5px;
+}
+
+.team-batch__chip-x {
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: var(--el-fill-color);
+  color: var(--el-text-color-regular);
+  border: none;
+  cursor: pointer;
+  font-size: 11px;
+}
+
+.team-batch__chip-x:hover {
+  background: var(--el-color-danger);
+  color: #fff;
+}
+
+.team-batch__chip-more {
+  display: inline-flex;
+  align-items: center;
+  height: 24px;
+  padding: 0 10px;
+  border-radius: 999px;
+  border: 1px dashed var(--el-border-color-darker);
+  background: transparent;
+  color: var(--el-color-primary);
+  font-size: 11.5px;
+  cursor: pointer;
+  transition:
+    border-color 0.15s ease,
+    background-color 0.15s ease;
+}
+
+.team-batch__chip-more:hover {
+  border-color: var(--el-color-primary);
+  background: var(--el-color-primary-light-9);
+}
+
+.team-batch__overflow-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 8px;
+  font-size: 12px;
+  color: var(--el-text-color-regular);
+}
+
+.team-batch__overflow-head strong {
+  color: var(--el-color-primary);
+  font-weight: 700;
+}
+
+.team-batch__overflow-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  max-height: 260px;
+  overflow-y: auto;
+}
+
+.team-batch__link {
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  font-size: 11.5px;
+  padding: 0;
+}
+
+.team-batch__link--danger {
+  color: var(--el-color-danger);
+}
+
+.team-batch__link:hover {
+  text-decoration: underline;
+}
+
+.team-batch__params {
+  padding: 10px 12px;
+}
+
+.team-batch__params-grid {
+  display: grid;
+  grid-template-columns: 240px 1fr;
+  gap: 12px;
+}
+
+.team-batch__field {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.team-batch__field-label {
+  font-size: 11.5px;
+  color: var(--el-text-color-primary);
+  font-weight: 500;
+}
+
+.team-batch__required {
+  color: var(--el-color-danger);
+}
+
+.team-batch__picker.is-single {
+  grid-template-columns: 1fr;
+}
+
+.team-batch__chip-role {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  padding: 0 6px;
+  height: 18px;
+  border-radius: 999px;
+  background: var(--el-color-primary-light-9);
+  color: var(--el-color-primary);
+  font-size: 11px;
+  cursor: pointer;
+  border: none;
+}
+
+.team-batch__chip-role.is-override {
+  background: var(--el-color-warning-light-7);
+  color: var(--el-color-warning-dark-2);
+}
+
+.team-batch__override-cnt {
+  color: var(--el-color-warning-dark-2);
+  font-weight: 700;
+}
+
+.team-batch__search {
+  padding: 6px 10px;
+  border-bottom: 1px solid var(--el-border-color);
+}
+
+.team-batch__col-head--user {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.team-batch__hide-added {
+  font-size: 11.5px;
+}
+
+.team-batch__empty-action {
+  display: block;
+  margin: 6px auto 0;
+}
+
+.team-batch__role-option {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  width: 100%;
+}
+
+.team-batch__role-option-name {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.team-batch__role-option-info {
+  flex-shrink: 0;
+  font-size: 14px;
+  color: var(--el-text-color-placeholder);
+  cursor: help;
+}
+
+.team-batch__role-option-info:hover {
+  color: var(--el-color-primary);
+}
+</style>