@blueking/bkflow-canvas-editor 0.0.37 → 0.0.39

package/README.md

@@ -36,7 +36,7 @@ npm install @blueking/bkflow-canvas-editor
       scope_type: 'space',
       scope_value: 123,
     }, // 作用域数据（必需）
-    fetchUserApi: `${window.BK_COMPONENT_API_URL}/api/c/compapi/v2/usermanage/fs_list_users/`, // 用户查询 API（可选）
+    fetchUserApi: `${window.BK_COMPONENT_API_URL}/api/c/compapi/v2/usermanage/fs_list_users/`, // @deprecated 仅保留向后兼容，推荐使用 memberSelectorConfig
     // 可选：使用自定义 axios 实例
     // axiosInstance: customAxiosInstance,
     // 可选：axios 配置
@@ -46,6 +46,22 @@ npm install @blueking/bkflow-canvas-editor
     // },
   };
 
+  // 人员选择器配置（可选）
+  // legacy 模式：使用组件内置的 UserSelector
+  const memberSelectorConfig = {
+    mode: 'legacy',
+    fetchUserApi: `${window.BK_COMPONENT_API_URL}/api/c/compapi/v2/usermanage/fs_list_users/`,
+  };
+  // tenant 模式：使用 @blueking/bk-user-selector（需接入方单独安装该 npm 包）
+  // const memberSelectorConfig = {
+  //   mode: 'tenant',
+  //   tenantId: 'default',
+  //   apiBaseUrl: 'https://bk-user.example.com',
+  //   currentUserId: 'admin',
+  //   enableMultiTenantMode: false,
+  //   hasAvatar: false,
+  // };
+
   const handleEdit = () => {
     // 跳转到编辑页面
   };
@@ -941,13 +957,64 @@ interface FlowApiConfig {
     scope_type: string;
     scope_value: number;
   };
-  /** 用户查询 API 地址（可选） */
+  /**
+   * 用户查询 API 地址
+   * @deprecated 请改用 FlowEdit/FlowView/FlowCreateTask 的 memberSelectorConfig prop。
+   * 仅保留以后兼容旧版本。
+   */
   fetchUserApi?: string;
   /** 是否启用第三方插件（可选，默认为 true） */
   enableThirdPlugin?: boolean;
 }
 ```
 
+### MemberSelectorConfig
+
+`FlowEdit` / `FlowView` / `FlowCreateTask` 组件提供可选的 `memberSelectorConfig` prop，用于控制人员选择器的行为。未传入时默认为 `{ mode: 'legacy' }`。
+
+```typescript
+type MemberSelectorConfig =
+  | {
+      /** legacy 模式：使用组件内置的 UserSelector */
+      mode?: 'legacy';
+      /** 用户查询 API 地址 */
+      fetchUserApi?: string;
+    }
+  | {
+      /** tenant 模式：使用多租户人员选择器 @blueking/bk-user-selector */
+      mode: 'tenant';
+      /** 租户 ID（必填） */
+      tenantId: string;
+      /** bk-user 服务的 API 基础地址（必填） */
+      apiBaseUrl: string;
+      /** 当前登录用户 ID */
+      currentUserId?: string;
+      /** 是否启用跨租户搜索，默认 false */
+      enableMultiTenantMode?: boolean;
+      /** 是否展示头像，默认 false */
+      hasAvatar?: boolean;
+      /** 头像 CDN 基础地址 */
+      avatarBaseUrl?: string;
+      /** 最近选择的用户 ID 列表 */
+      recentUserIds?: string[];
+    };
+```
+
+使用示例：
+
+```vue
+<FlowEdit
+  :flow-id="flowId"
+  :api-config="apiConfig"
+  :member-selector-config="{
+    mode: 'tenant',
+    tenantId: 'default',
+    apiBaseUrl: 'https://bk-user.example.com',
+  }" />
+```
+
+> 提示：选择 `tenant` 模式时，接入方需安装可选 peer 依赖 `@blueking/bk-user-selector`。它仅在 tenant 模式下被动态加载，legacy 模式下未安装也不会报错。
+
 组件内部会自动实现所有 API 方法，包括：
 
 - `fetchFlowDetail` - 获取流程详情