From b15b6b4f4d19cf728f93949af5cad4262e909b8f Mon Sep 17 00:00:00 2001
From: lzh <sickone075@gmail.com>
Date: Thu, 23 Apr 2026 14:51:09 +0800
Subject: [PATCH] =?UTF-8?q?feat(@vben/web-antd):=20=E7=94=A8=E6=88=B7-?=
 =?UTF-8?q?=E9=A1=B9=E7=9B=AE=E7=BB=91=E5=AE=9A=E7=AE=A1=E7=90=86=E5=8F=8C?=
 =?UTF-8?q?=E5=85=A5=E5=8F=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 用户管理页：下拉操作新增 "分配项目" 按钮 + assign-project-form.vue 弹窗
  沿用现有 assign-role-form 的交互（多选 + 覆盖写入）
- 项目管理页：行操作新增 "管理成员" 按钮 + assign-user-form.vue 弹窗
  下拉支持搜索用户 nickname/username
- 新建 api/system/user-project/ 封装 4 个接口
- api/system/project 新增 getAllProjectSimpleList：
  顶栏 simple-list 已改为用户授权过滤，管理员分配场景需要全量下拉
- 空集保存二次确认：清空所有分配/成员时弹 AntModal.confirm，防误操作
- 权限点：system:user:assign-project / system:project:assign-user

设计文档：docs/design/2026-04-23-user-project-binding.md

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 apps/web-antd/src/api/system/project/index.ts |  8 ++
 .../src/api/system/user-project/index.ts      | 46 +++++++++
 .../web-antd/src/views/system/project/data.ts | 46 +++++++++
 .../src/views/system/project/index.vue        | 18 ++++
 .../project/modules/assign-user-form.vue      | 98 +++++++++++++++++++
 apps/web-antd/src/views/system/user/data.ts   | 44 +++++++++
 apps/web-antd/src/views/system/user/index.vue | 18 ++++
 .../user/modules/assign-project-form.vue      | 98 +++++++++++++++++++
 8 files changed, 376 insertions(+)
 create mode 100644 apps/web-antd/src/api/system/user-project/index.ts
 create mode 100644 apps/web-antd/src/views/system/project/modules/assign-user-form.vue
 create mode 100644 apps/web-antd/src/views/system/user/modules/assign-project-form.vue

diff --git a/apps/web-antd/src/api/system/project/index.ts b/apps/web-antd/src/api/system/project/index.ts
index 4d767fb74..524cc09b8 100644
--- a/apps/web-antd/src/api/system/project/index.ts
+++ b/apps/web-antd/src/api/system/project/index.ts
@@ -23,12 +23,20 @@ export function getProjectPage(params: PageParam) {
   );
 }
 
+/** 获取当前登录用户授权的项目精简列表（顶栏项目切换器用） */
 export function getSimpleProjectList() {
   return requestClient.get<SystemProjectApi.Project[]>(
     '/system/project/simple-list',
   );
 }
 
+/** 获取本租户全部启用项目（管理员分配场景下拉数据源） */
+export function getAllProjectSimpleList() {
+  return requestClient.get<SystemProjectApi.Project[]>(
+    '/system/project/all-simple-list',
+  );
+}
+
 export function getProject(id: number) {
   return requestClient.get<SystemProjectApi.Project>(
     `/system/project/get?id=${id}`,
diff --git a/apps/web-antd/src/api/system/user-project/index.ts b/apps/web-antd/src/api/system/user-project/index.ts
new file mode 100644
index 000000000..795a6f2e1
--- /dev/null
+++ b/apps/web-antd/src/api/system/user-project/index.ts
@@ -0,0 +1,46 @@
+import { requestClient } from '#/api/request';
+
+export namespace SystemUserProjectApi {
+  export interface AssignUserProjectsReq {
+    userId: number;
+    projectIds: number[];
+  }
+  export interface AssignProjectUsersReq {
+    projectId: number;
+    userIds: number[];
+  }
+}
+
+/** 给用户覆盖式分配项目 */
+export function assignUserProjects(
+  data: SystemUserProjectApi.AssignUserProjectsReq,
+) {
+  return requestClient.post<boolean>(
+    '/system/user-project/assign-user-projects',
+    data,
+  );
+}
+
+/** 给项目覆盖式分配成员 */
+export function assignProjectUsers(
+  data: SystemUserProjectApi.AssignProjectUsersReq,
+) {
+  return requestClient.post<boolean>(
+    '/system/user-project/assign-project-users',
+    data,
+  );
+}
+
+/** 查询某用户已绑定的项目编号集合 */
+export function getProjectIdsByUserId(userId: number) {
+  return requestClient.get<number[]>(
+    `/system/user-project/list-project-ids-by-user?userId=${userId}`,
+  );
+}
+
+/** 查询某项目下绑定的用户编号集合 */
+export function getUserIdsByProjectId(projectId: number) {
+  return requestClient.get<number[]>(
+    `/system/user-project/list-user-ids-by-project?projectId=${projectId}`,
+  );
+}
diff --git a/apps/web-antd/src/views/system/project/data.ts b/apps/web-antd/src/views/system/project/data.ts
index d4eb1080a..8bd1bf701 100644
--- a/apps/web-antd/src/views/system/project/data.ts
+++ b/apps/web-antd/src/views/system/project/data.ts
@@ -5,6 +5,7 @@ import { CommonStatusEnum, DICT_TYPE } from '@vben/constants';
 import { getDictOptions } from '@vben/hooks';
 
 import { z } from '#/adapter/form';
+import { getSimpleUserList } from '#/api/system/user';
 
 /** 新增/修改的表单 */
 export function useFormSchema(): VbenFormSchema[] {
@@ -83,6 +84,51 @@ export function useFormSchema(): VbenFormSchema[] {
   ];
 }
 
+/** 管理成员的表单（项目 → 多用户） */
+export function useAssignUserFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'id',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '项目名称',
+      component: 'Input',
+      componentProps: {
+        disabled: true,
+      },
+    },
+    {
+      fieldName: 'code',
+      label: '项目编码',
+      component: 'Input',
+      componentProps: {
+        disabled: true,
+      },
+    },
+    {
+      fieldName: 'userIds',
+      label: '成员',
+      component: 'ApiSelect',
+      componentProps: {
+        api: getSimpleUserList,
+        labelField: 'nickname',
+        valueField: 'id',
+        mode: 'multiple',
+        placeholder: '请选择成员（留空表示清空所有成员）',
+        allowClear: true,
+        showSearch: true,
+        optionFilterProp: 'label',
+      },
+    },
+  ];
+}
+
 /** 列表的搜索表单 */
 export function useGridFormSchema(): VbenFormSchema[] {
   return [
diff --git a/apps/web-antd/src/views/system/project/index.vue b/apps/web-antd/src/views/system/project/index.vue
index dec6426bd..708a59ede 100644
--- a/apps/web-antd/src/views/system/project/index.vue
+++ b/apps/web-antd/src/views/system/project/index.vue
@@ -14,6 +14,7 @@ import { deleteProject, getProjectPage } from '#/api/system/project';
 import { $t } from '#/locales';
 
 import { useGridColumns, useGridFormSchema } from './data';
+import AssignUserForm from './modules/assign-user-form.vue';
 import Form from './modules/form.vue';
 
 const [FormModal, formModalApi] = useVbenModal({
@@ -21,6 +22,11 @@ const [FormModal, formModalApi] = useVbenModal({
   destroyOnClose: true,
 });
 
+const [AssignUserModal, assignUserModalApi] = useVbenModal({
+  connectedComponent: AssignUserForm,
+  destroyOnClose: true,
+});
+
 /** 刷新表格 */
 function handleRefresh() {
   gridApi.query();
@@ -36,6 +42,11 @@ function handleEdit(row: SystemProjectApi.Project) {
   formModalApi.setData(row).open();
 }
 
+/** 管理成员 */
+function handleAssignUser(row: SystemProjectApi.Project) {
+  assignUserModalApi.setData(row).open();
+}
+
 /** 删除项目 */
 async function handleDelete(row: SystemProjectApi.Project) {
   const hideLoading = message.loading({
@@ -114,6 +125,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
 <template>
   <Page auto-content-height>
     <FormModal @success="handleRefresh" />
+    <AssignUserModal @success="handleRefresh" />
     <Grid table-title="项目列表">
       <template #toolbar-tools>
         <TableAction
@@ -147,6 +159,12 @@ const [Grid, gridApi] = useVbenVxeGrid({
               auth: ['system:project:update'],
               onClick: handleEdit.bind(null, row),
             },
+            {
+              label: '管理成员',
+              type: 'link',
+              auth: ['system:project:assign-user'],
+              onClick: handleAssignUser.bind(null, row),
+            },
             {
               label: $t('common.delete'),
               type: 'link',
diff --git a/apps/web-antd/src/views/system/project/modules/assign-user-form.vue b/apps/web-antd/src/views/system/project/modules/assign-user-form.vue
new file mode 100644
index 000000000..f4f68c512
--- /dev/null
+++ b/apps/web-antd/src/views/system/project/modules/assign-user-form.vue
@@ -0,0 +1,98 @@
+<script lang="ts" setup>
+import type { SystemProjectApi } from '#/api/system/project';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { message, Modal as AntModal } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import {
+  assignProjectUsers,
+  getUserIdsByProjectId,
+} from '#/api/system/user-project';
+import { $t } from '#/locales';
+
+import { useAssignUserFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
+  layout: 'horizontal',
+  schema: useAssignUserFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    const values = await formApi.getValues();
+    const userIds: number[] = values.userIds ?? [];
+
+    // 空集二次确认：清空该项目所有成员是高危操作
+    if (userIds.length === 0) {
+      const confirmed = await new Promise<boolean>((resolve) => {
+        AntModal.confirm({
+          title: '确认清空项目成员？',
+          content: `即将清空项目【${values.name}】的所有成员，保存后除超管外所有用户都将无法访问该项目。确认继续？`,
+          okText: '确认清空',
+          okType: 'danger',
+          cancelText: '取消',
+          onOk: () => resolve(true),
+          onCancel: () => resolve(false),
+        });
+      });
+      if (!confirmed) {
+        return;
+      }
+    }
+
+    modalApi.lock();
+    try {
+      await assignProjectUsers({
+        projectId: values.id,
+        userIds,
+      });
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      return;
+    }
+    const data = modalApi.getData<SystemProjectApi.Project>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      const userIds = await getUserIdsByProjectId(data.id);
+      await formApi.setValues({
+        ...data,
+        userIds,
+      });
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal title="管理成员">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-antd/src/views/system/user/data.ts b/apps/web-antd/src/views/system/user/data.ts
index fb9ea8fe8..f6279b851 100644
--- a/apps/web-antd/src/views/system/user/data.ts
+++ b/apps/web-antd/src/views/system/user/data.ts
@@ -10,6 +10,7 @@ import { handleTree } from '@vben/utils';
 import { z } from '#/adapter/form';
 import { getDeptList } from '#/api/system/dept';
 import { getSimplePostList } from '#/api/system/post';
+import { getAllProjectSimpleList } from '#/api/system/project';
 import { getSimpleRoleList } from '#/api/system/role';
 import { getRangePickerDefaultProps } from '#/utils';
 
@@ -232,6 +233,49 @@ export function useAssignRoleFormSchema(): VbenFormSchema[] {
   ];
 }
 
+/** 分配项目的表单 */
+export function useAssignProjectFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'id',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'username',
+      label: '用户名称',
+      component: 'Input',
+      componentProps: {
+        disabled: true,
+      },
+    },
+    {
+      fieldName: 'nickname',
+      label: '用户昵称',
+      component: 'Input',
+      componentProps: {
+        disabled: true,
+      },
+    },
+    {
+      fieldName: 'projectIds',
+      label: '项目',
+      component: 'ApiSelect',
+      componentProps: {
+        api: getAllProjectSimpleList,
+        labelField: 'name',
+        valueField: 'id',
+        mode: 'multiple',
+        placeholder: '请选择项目（留空表示清空所有分配）',
+        allowClear: true,
+      },
+    },
+  ];
+}
+
 /** 用户导入的表单 */
 export function useImportFormSchema(): VbenFormSchema[] {
   return [
diff --git a/apps/web-antd/src/views/system/user/index.vue b/apps/web-antd/src/views/system/user/index.vue
index 5d1267a8f..809c8728e 100644
--- a/apps/web-antd/src/views/system/user/index.vue
+++ b/apps/web-antd/src/views/system/user/index.vue
@@ -23,6 +23,7 @@ import {
 import { $t } from '#/locales';
 
 import { useGridColumns, useGridFormSchema } from './data';
+import AssignProjectForm from './modules/assign-project-form.vue';
 import AssignRoleForm from './modules/assign-role-form.vue';
 import DeptTree from './modules/dept-tree.vue';
 import Form from './modules/form.vue';
@@ -44,6 +45,11 @@ const [AssignRoleModal, assignRoleModalApi] = useVbenModal({
   destroyOnClose: true,
 });
 
+const [AssignProjectModal, assignProjectModalApi] = useVbenModal({
+  connectedComponent: AssignProjectForm,
+  destroyOnClose: true,
+});
+
 const [ImportModal, importModalApi] = useVbenModal({
   connectedComponent: ImportForm,
   destroyOnClose: true,
@@ -133,6 +139,11 @@ function handleAssignRole(row: SystemUserApi.User) {
   assignRoleModalApi.setData(row).open();
 }
 
+/** 分配项目 */
+function handleAssignProject(row: SystemUserApi.User) {
+  assignProjectModalApi.setData(row).open();
+}
+
 /** 更新用户状态 */
 async function handleStatusChange(
   newStatus: number,
@@ -205,6 +216,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
     <FormModal @success="handleRefresh" />
     <ResetPasswordModal @success="handleRefresh" />
     <AssignRoleModal @success="handleRefresh" />
+    <AssignProjectModal @success="handleRefresh" />
     <ImportModal @success="handleRefresh" />
 
     <div class="flex h-full w-full">
@@ -280,6 +292,12 @@ const [Grid, gridApi] = useVbenVxeGrid({
                   auth: ['system:permission:assign-user-role'],
                   onClick: handleAssignRole.bind(null, row),
                 },
+                {
+                  label: '分配项目',
+                  type: 'link',
+                  auth: ['system:user:assign-project'],
+                  onClick: handleAssignProject.bind(null, row),
+                },
                 {
                   label: '重置密码',
                   type: 'link',
diff --git a/apps/web-antd/src/views/system/user/modules/assign-project-form.vue b/apps/web-antd/src/views/system/user/modules/assign-project-form.vue
new file mode 100644
index 000000000..d18d0b368
--- /dev/null
+++ b/apps/web-antd/src/views/system/user/modules/assign-project-form.vue
@@ -0,0 +1,98 @@
+<script lang="ts" setup>
+import type { SystemUserApi } from '#/api/system/user';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { message, Modal as AntModal } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import {
+  assignUserProjects,
+  getProjectIdsByUserId,
+} from '#/api/system/user-project';
+import { $t } from '#/locales';
+
+import { useAssignProjectFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
+  layout: 'horizontal',
+  schema: useAssignProjectFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    const values = await formApi.getValues();
+    const projectIds: number[] = values.projectIds ?? [];
+
+    // 空集二次确认：清空该用户的所有项目分配是高危操作
+    if (projectIds.length === 0) {
+      const confirmed = await new Promise<boolean>((resolve) => {
+        AntModal.confirm({
+          title: '确认清空项目分配？',
+          content: `即将清空用户【${values.username}】的所有项目分配，保存后该用户将无法访问任何项目。确认继续？`,
+          okText: '确认清空',
+          okType: 'danger',
+          cancelText: '取消',
+          onOk: () => resolve(true),
+          onCancel: () => resolve(false),
+        });
+      });
+      if (!confirmed) {
+        return;
+      }
+    }
+
+    modalApi.lock();
+    try {
+      await assignUserProjects({
+        userId: values.id,
+        projectIds,
+      });
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      return;
+    }
+    const data = modalApi.getData<SystemUserApi.User>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      const projectIds = await getProjectIdsByUserId(data.id);
+      await formApi.setValues({
+        ...data,
+        projectIds,
+      });
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal title="分配项目">
+    <Form class="mx-4" />
+  </Modal>
+</template>