@blueking/bk-user-selector 0.0.29-beta.2 → 0.0.29-beta.4

package/vue3/index.umd.min.js

@@ -3,7 +3,7 @@
 })(this, function(exports2, vue, bkuiVue) {
   "use strict";
   var __vite_style__ = document.createElement("style");
-  __vite_style__.textContent = ".me-tag[data-v-9ccd9029] {\n  position: absolute;\n  top: 50%;\n  right: 8px;\n  z-index: 1;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 24px;\n  height: 24px;\n  padding: 0 8px;\n  font-size: 12px;\n  color: #4d4f56;\n  cursor: pointer;\n  background-color: #e1ecff;\n  border-radius: 50%;\n  transform: translateY(-50%);\n}\n.me-tag[data-v-9ccd9029]:hover {\n  color: #3a84ff;\n  background-color: #cddffe;\n}\n.me-tag.disabled[data-v-9ccd9029] {\n  color: #c4c6cc;\n  cursor: not-allowed;\n  background-color: #f0f1f5;\n}.dropdown-content[data-v-a4132257] {\n  min-height: 40px;\n  max-height: 300px;\n  padding: 5px 0;\n  overflow-y: auto;\n}\n.dropdown-content .no-data[data-v-a4132257] {\n  padding: 10px;\n  color: #979ba5;\n  text-align: center;\n}\n.dropdown-content .user-group .group-header[data-v-a4132257] {\n  display: flex;\n  align-items: center;\n  padding: 8px 12px;\n  color: #979ba5;\n}\n.dropdown-content .user-group .group-header .group-count[data-v-a4132257] {\n  margin-left: 4px;\n}\n.dropdown-content .user-option[data-v-a4132257] {\n  display: flex;\n  align-items: center;\n  height: 32px;\n  padding: 8px 12px;\n  cursor: pointer;\n}\n.dropdown-content .user-option[data-v-a4132257]:hover {\n  background-color: #f5f7fa;\n}.bk-user-selector-popover.bk-user-selector-pop2-content {\n  padding: 0;\n}.user-tag[data-v-51944a49] {\n  margin-right: 4px;\n  margin-left: 0;\n}\n.user-tag.draggable[data-v-51944a49] {\n  cursor: move;\n}\n.user-tag.active[data-v-51944a49] {\n  background-color: #e1ecff;\n  border-color: #3a84ff;\n}\n.user-tag .tag-content .user-name[data-v-51944a49] {\n  overflow: hidden;\n  font-size: 12px;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}.multiple-selector[data-v-bebe517d] {\n  position: relative;\n  width: 100%;\n}\n.multiple-selector.is-disabled[data-v-bebe517d] {\n  pointer-events: none;\n}\n.multiple-selector .tags-container[data-v-bebe517d] {\n  min-height: 32px;\n  padding: 1px 10px 1px 8px;\n  background-color: #fff;\n  border: 1px solid #c4c6cc;\n  border-radius: 2px;\n  transition: all 0.2s ease;\n}\n.multiple-selector .tags-container.focused[data-v-bebe517d] {\n  border-color: #3a84ff;\n  box-shadow: 0 0 0 2px rgba(58, 132, 255, 0.1);\n}\n.multiple-selector .tags-container.collapsed[data-v-bebe517d] {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n}\n.multiple-selector .tag-list[data-v-bebe517d] {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n}\n.multiple-selector .tag-wrapper[data-v-bebe517d] {\n  display: inline-flex;\n  align-items: center;\n  max-width: 100%;\n}\n.multiple-selector .search-input[data-v-bebe517d] {\n  min-width: 10px;\n  height: 28px;\n  background: transparent;\n  border: none;\n  outline: none;\n}\n.multiple-selector .search-input[data-v-bebe517d]::placeholder {\n  color: #c4c6cc;\n}\n.multiple-selector .search-input.inline[data-v-bebe517d] {\n  min-width: 10px;\n}\n.multiple-selector .search-input.last[data-v-bebe517d], .multiple-selector .search-input.collapsed[data-v-bebe517d] {\n  flex: 1;\n  min-width: 60px;\n}.single-selector[data-v-67f2ee6a] {\n  position: relative;\n  width: 100%;\n}\n.single-selector.is-disabled[data-v-67f2ee6a] {\n  pointer-events: none;\n}\n.input-container[data-v-67f2ee6a] {\n  position: relative;\n  display: flex;\n  align-items: center;\n  min-height: 32px;\n  padding: 0 8px;\n  background-color: #fff;\n  border: 1px solid #c4c6cc;\n  border-radius: 2px;\n}\n.input-container[data-v-67f2ee6a]:focus-within {\n  border-color: #3a84ff;\n  box-shadow: 0 0 0 2px rgba(58, 132, 255, 0.1);\n}\n.search-input[data-v-67f2ee6a] {\n  flex: 1;\n  height: 30px;\n  background: transparent;\n  border: none;\n  outline: none;\n}\n.search-input[data-v-67f2ee6a]::placeholder {\n  color: #c4c6cc;\n}.bk-user-selector[data-v-617ed278] {\n  position: relative;\n  width: 100%;\n  font-size: 12px;\n}\n.bk-user-selector.is-disabled[data-v-617ed278] {\n  cursor: not-allowed;\n  background-color: #dcdee5;\n}";
+  __vite_style__.textContent = ".me-tag[data-v-9ccd9029] {\n  position: absolute;\n  top: 50%;\n  right: 8px;\n  z-index: 1;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 24px;\n  height: 24px;\n  padding: 0 8px;\n  font-size: 12px;\n  color: #4d4f56;\n  cursor: pointer;\n  background-color: #e1ecff;\n  border-radius: 50%;\n  transform: translateY(-50%);\n}\n.me-tag[data-v-9ccd9029]:hover {\n  color: #3a84ff;\n  background-color: #cddffe;\n}\n.me-tag.disabled[data-v-9ccd9029] {\n  color: #c4c6cc;\n  cursor: not-allowed;\n  background-color: #f0f1f5;\n}.dropdown-content[data-v-a4132257] {\n  min-height: 40px;\n  max-height: 300px;\n  padding: 5px 0;\n  overflow-y: auto;\n}\n.dropdown-content .no-data[data-v-a4132257] {\n  padding: 10px;\n  color: #979ba5;\n  text-align: center;\n}\n.dropdown-content .user-group .group-header[data-v-a4132257] {\n  display: flex;\n  align-items: center;\n  padding: 8px 12px;\n  color: #979ba5;\n}\n.dropdown-content .user-group .group-header .group-count[data-v-a4132257] {\n  margin-left: 4px;\n}\n.dropdown-content .user-option[data-v-a4132257] {\n  display: flex;\n  align-items: center;\n  height: 32px;\n  padding: 8px 12px;\n  cursor: pointer;\n}\n.dropdown-content .user-option[data-v-a4132257]:hover {\n  background-color: #f5f7fa;\n}.bk-user-selector-popover.bk-user-selector-pop2-content {\n  padding: 0;\n}.user-tag[data-v-51944a49] {\n  margin-right: 4px;\n  margin-left: 0;\n}\n.user-tag.draggable[data-v-51944a49] {\n  cursor: move;\n}\n.user-tag.active[data-v-51944a49] {\n  background-color: #e1ecff;\n  border-color: #3a84ff;\n}\n.user-tag .tag-content .user-name[data-v-51944a49] {\n  overflow: hidden;\n  font-size: 12px;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}.multiple-selector[data-v-7ff53892] {\n  position: relative;\n  width: 100%;\n}\n.multiple-selector.is-disabled[data-v-7ff53892] {\n  pointer-events: none;\n}\n.multiple-selector .tags-container[data-v-7ff53892] {\n  min-height: 32px;\n  padding: 1px 10px 1px 8px;\n  background-color: #fff;\n  border: 1px solid #c4c6cc;\n  border-radius: 2px;\n  transition: all 0.2s ease;\n}\n.multiple-selector .tags-container.focused[data-v-7ff53892] {\n  border-color: #3a84ff;\n  box-shadow: 0 0 0 2px rgba(58, 132, 255, 0.1);\n}\n.multiple-selector .tags-container.collapsed[data-v-7ff53892] {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n}\n.multiple-selector .tag-list[data-v-7ff53892] {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n}\n.multiple-selector .tag-wrapper[data-v-7ff53892] {\n  display: inline-flex;\n  align-items: center;\n  max-width: 100%;\n}\n.multiple-selector .search-input[data-v-7ff53892] {\n  min-width: 10px;\n  height: 28px;\n  background: transparent;\n  border: none;\n  outline: none;\n}\n.multiple-selector .search-input[data-v-7ff53892]::placeholder {\n  color: #c4c6cc;\n}\n.multiple-selector .search-input.inline[data-v-7ff53892] {\n  min-width: 10px;\n}\n.multiple-selector .search-input.last[data-v-7ff53892], .multiple-selector .search-input.collapsed[data-v-7ff53892] {\n  flex: 1;\n  min-width: 60px;\n}.single-selector[data-v-d56195a1] {\n  position: relative;\n  width: 100%;\n}\n.single-selector.is-disabled[data-v-d56195a1] {\n  pointer-events: none;\n}\n.input-container[data-v-d56195a1] {\n  position: relative;\n  display: flex;\n  align-items: center;\n  min-height: 32px;\n  padding: 0 8px;\n  background-color: #fff;\n  border: 1px solid #c4c6cc;\n  border-radius: 2px;\n}\n.input-container[data-v-d56195a1]:focus-within {\n  border-color: #3a84ff;\n  box-shadow: 0 0 0 2px rgba(58, 132, 255, 0.1);\n}\n.search-input[data-v-d56195a1] {\n  flex: 1;\n  height: 30px;\n  background: transparent;\n  border: none;\n  outline: none;\n}\n.search-input[data-v-d56195a1]::placeholder {\n  color: #c4c6cc;\n}.bk-user-selector[data-v-812cbe5a] {\n  position: relative;\n  width: 100%;\n  font-size: 12px;\n}\n.bk-user-selector.is-disabled[data-v-812cbe5a] {\n  cursor: not-allowed;\n  background-color: #dcdee5;\n}";
   document.head.appendChild(__vite_style__);
   const generateCallbackName = () => {
     const timestamp = Date.now();
@@ -13,10 +13,15 @@
   const jsonpRequest = (requestUrl, options = {}) => {
     return new Promise((resolve, reject) => {
       const url = vue.unref(requestUrl);
-      const { timeout = 1e3 * 60 * 2, params } = options;
+      const { timeout = 1e3 * 60 * 2, params, withCredentials = true } = options;
       const callbackName = generateCallbackName();
       const script = document.createElement("script");
       let timeoutId;
+      if (withCredentials) {
+        script.crossOrigin = "use-credentials";
+      } else {
+        script.crossOrigin = "anonymous";
+      }
       const cleanup = () => {
         if (timeoutId) {
           clearTimeout(timeoutId);
@@ -30,7 +35,7 @@
       };
       window[callbackName] = (data) => {
         cleanup();
-        resolve(data);
+        resolve(data.data || data);
       };
       timeoutId = setTimeout(() => {
         cleanup();
@@ -46,48 +51,6 @@
       document.head.appendChild(script);
     });
   };
-  const useJSONP = (url, options = {}) => {
-    const data = vue.shallowRef(null);
-    const loading = vue.shallowRef(false);
-    const error = vue.shallowRef(null);
-    let abortFlag = false;
-    const executeRequest = async (requestUrl) => {
-      if (!requestUrl) return;
-      loading.value = true;
-      error.value = null;
-      abortFlag = false;
-      try {
-        const result = await jsonpRequest(requestUrl, options);
-        if (!abortFlag) {
-          data.value = result;
-        }
-      } catch (err) {
-        if (!abortFlag) {
-          const errorObj = err instanceof Error ? err : new Error(String(err));
-          error.value = errorObj;
-        }
-      } finally {
-        if (!abortFlag) {
-          loading.value = false;
-        }
-      }
-    };
-    const stopWatcher = vue.watchEffect(() => {
-      executeRequest(vue.unref(url));
-    });
-    vue.onScopeDispose(() => {
-      abortFlag = true;
-      stopWatcher();
-    });
-    return {
-      data,
-      loading,
-      error,
-      refetch: () => {
-        executeRequest(vue.unref(url));
-      }
-    };
-  };
   const getTenants = async (apiBaseUrl, tenantId) => {
     if (!apiBaseUrl || !tenantId) {
       console.warn("获取租户信息需要提供有效的apiBaseUrl和租户ID");
@@ -114,7 +77,7 @@
   };
   const searchUsers = async (params) => {
     const { apiBaseUrl, tenantId, keyword, enableMultiTenantMode = true } = params;
-    if (enableMultiTenantMode) {
+    if (!enableMultiTenantMode) {
       const userList = await getUserList(apiBaseUrl, {
         keyword,
         pageSize: 100,
@@ -150,7 +113,7 @@
   const lookupUsers = async (params) => {
     const { apiBaseUrl, tenantId, exactSearchKey = "bk_username", usersList = [], enableMultiTenantMode = true } = params;
     const users = usersList.filter((user) => user).map((user) => user.trim());
-    if (enableMultiTenantMode) {
+    if (!enableMultiTenantMode) {
       const userList = await getUserList(apiBaseUrl, {
         userIds: users
       }).catch(() => {
@@ -181,18 +144,26 @@
       return [];
     }
   };
-  const formatUsers = (users) => {
+  const formatUsers = (users, enableMultiTenantMode = true) => {
     if (!users || !Array.isArray(users)) return [];
+    if (!enableMultiTenantMode) {
+      return users.map((user) => ({
+        ...user,
+        id: user.username,
+        name: `${user.display_name}(${user.username})`,
+        tenantId: user.owner_tenant_id
+      }));
+    }
     return users.map((user) => ({
-      id: user.bk_username || user.username,
+      id: user.bk_username,
       name: user.display_name,
       tenantId: user.owner_tenant_id,
       ...user
     }));
   };
   const getUserList = async (url, params) => {
-    const { userIds, keyword, pageSize, page, appCode } = params;
-    const { data: userList } = await useJSONP(url, {
+    const { userIds, keyword, pageSize = 20, page, appCode } = params;
+    const data = await jsonpRequest(url, {
       params: {
         exact_lookups: (userIds == null ? void 0 : userIds.join(",")) || void 0,
         fuzzy_lookups: keyword || void 0,
@@ -201,7 +172,7 @@
         app_code: appCode || "bk-magicbox"
       }
     });
-    return userList.value || [];
+    return (data == null ? void 0 : data.results) || [];
   };
   const useTenantData = (apiBaseUrl, tenantId, enableMultiTenantMode = true) => {
     const tenants = vue.ref({});
@@ -3036,7 +3007,7 @@
     }
     return Math.max(1, visibleCount);
   };
-  const useUserSearch = (apiBaseUrl, tenantId) => {
+  const useUserSearch = (apiBaseUrl, tenantId, enableMultiTenantMode = true) => {
     const searchResults = vue.ref([]);
     const loading = vue.ref(false);
     const searchQuery = vue.ref("");
@@ -3055,9 +3026,9 @@
           apiBaseUrl,
           tenantId,
           keyword,
-          enableMultiTenantMode: true
+          enableMultiTenantMode
         });
-        searchResults.value = formatUsers(results);
+        searchResults.value = formatUsers(results, enableMultiTenantMode);
       } catch (error) {
         console.error("用户搜索失败:", error);
         searchResults.value = [];
@@ -3489,7 +3460,7 @@
         searchQuery,
         // clearSearch,
         handleSearchInput
-      } = useUserSearch(props.apiBaseUrl, props.tenantId);
+      } = useUserSearch(props.apiBaseUrl, props.tenantId, props.enableMultiTenantMode);
       const containerRef = vue.ref(null);
       const tagsContainerRef = vue.ref(null);
       const sortableContainerRef = vue.ref(null);
@@ -3616,7 +3587,7 @@
             usersList: [props.currentUserId],
             enableMultiTenantMode: props.enableMultiTenantMode
           });
-          const formattedUsers = formatUsers(result);
+          const formattedUsers = formatUsers(result, props.enableMultiTenantMode);
           if (formattedUsers.length > 0) {
             if (!props.selectedUsers.some((item) => item.id === formattedUsers[0].id)) {
               emit("update:selectedUsers", [...props.selectedUsers, formattedUsers[0]]);
@@ -3644,7 +3615,7 @@
               usersList: users,
               enableMultiTenantMode: props.enableMultiTenantMode
             });
-            const formattedUsers = formatUsers(result);
+            const formattedUsers = formatUsers(result, props.enableMultiTenantMode);
             if (formattedUsers.length > 0) {
               const updatedUsers = [...props.selectedUsers, ...formattedUsers];
               emit("update:selectedUsers", updatedUsers);
@@ -3958,7 +3929,7 @@
       };
     }
   });
-  const MultipleSelector = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-bebe517d"]]);
+  const MultipleSelector = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-7ff53892"]]);
   const _hoisted_1 = { class: "input-container" };
   const _hoisted_2 = ["placeholder"];
   const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
@@ -4019,7 +3990,9 @@
               usersList: [props.modelValue],
               enableMultiTenantMode: props.enableMultiTenantMode
             });
-            options.value = formatUsers(result).filter((user) => !props.excludeUserIds.includes(user.id));
+            options.value = formatUsers(result, props.enableMultiTenantMode).filter(
+              (user) => !props.excludeUserIds.includes(user.id)
+            );
             if (props.userGroup.length > 0) {
               const groupResult = props.userGroup.filter((group) => group.id == props.modelValue);
               options.value = groupResult.map((group) => ({
@@ -4050,7 +4023,7 @@
             usersList: [props.currentUserId],
             enableMultiTenantMode: props.enableMultiTenantMode
           });
-          const formattedResults = formatUsers(result);
+          const formattedResults = formatUsers(result, props.enableMultiTenantMode);
           if (formattedResults.length > 0) {
             options.value = formattedResults.filter((user) => !props.excludeUserIds.includes(user.id));
             addUser(formattedResults[0]);
@@ -4072,7 +4045,7 @@
             keyword,
             enableMultiTenantMode: props.enableMultiTenantMode
           });
-          options.value = formatUsers(result).filter((user) => !selectedUser.value || user.id !== selectedUser.value).filter((user) => !props.excludeUserIds.includes(user.id));
+          options.value = formatUsers(result, props.enableMultiTenantMode).filter((user) => !selectedUser.value || user.id !== selectedUser.value).filter((user) => !props.excludeUserIds.includes(user.id));
         } catch (error) {
           console.error("获取用户列表失败:", error);
           options.value = [];
@@ -4176,7 +4149,7 @@
       };
     }
   });
-  const SingleSelector = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-67f2ee6a"]]);
+  const SingleSelector = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-d56195a1"]]);
   const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "BkUserSelector"
@@ -4234,7 +4207,7 @@
                 usersList: ids,
                 enableMultiTenantMode: props.enableMultiTenantMode
               });
-              selectedUsers.value = [...selected, ...formatUsers(result)];
+              selectedUsers.value = [...selected, ...formatUsers(result, props.enableMultiTenantMode)];
             } catch (error) {
               console.error("获取选中用户信息失败:", error);
             }
@@ -4341,7 +4314,7 @@
       };
     }
   });
-  const BkUserSelector = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-617ed278"]]);
+  const BkUserSelector = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-812cbe5a"]]);
   exports2.BkUserSelector = BkUserSelector;
   exports2.default = BkUserSelector;
   Object.defineProperties(exports2, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });

package/vue3/vue3.css

@@ -71,14 +71,14 @@
   font-size: 12px;
   text-overflow: ellipsis;
   white-space: nowrap;
-}.multiple-selector[data-v-bebe517d] {
+}.multiple-selector[data-v-7ff53892] {
   position: relative;
   width: 100%;
 }
-.multiple-selector.is-disabled[data-v-bebe517d] {
+.multiple-selector.is-disabled[data-v-7ff53892] {
   pointer-events: none;
 }
-.multiple-selector .tags-container[data-v-bebe517d] {
+.multiple-selector .tags-container[data-v-7ff53892] {
   min-height: 32px;
   padding: 1px 10px 1px 8px;
   background-color: #fff;
@@ -86,49 +86,49 @@
   border-radius: 2px;
   transition: all 0.2s ease;
 }
-.multiple-selector .tags-container.focused[data-v-bebe517d] {
+.multiple-selector .tags-container.focused[data-v-7ff53892] {
   border-color: #3a84ff;
   box-shadow: 0 0 0 2px rgba(58, 132, 255, 0.1);
 }
-.multiple-selector .tags-container.collapsed[data-v-bebe517d] {
+.multiple-selector .tags-container.collapsed[data-v-7ff53892] {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
 }
-.multiple-selector .tag-list[data-v-bebe517d] {
+.multiple-selector .tag-list[data-v-7ff53892] {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
 }
-.multiple-selector .tag-wrapper[data-v-bebe517d] {
+.multiple-selector .tag-wrapper[data-v-7ff53892] {
   display: inline-flex;
   align-items: center;
   max-width: 100%;
 }
-.multiple-selector .search-input[data-v-bebe517d] {
+.multiple-selector .search-input[data-v-7ff53892] {
   min-width: 10px;
   height: 28px;
   background: transparent;
   border: none;
   outline: none;
 }
-.multiple-selector .search-input[data-v-bebe517d]::placeholder {
+.multiple-selector .search-input[data-v-7ff53892]::placeholder {
   color: #c4c6cc;
 }
-.multiple-selector .search-input.inline[data-v-bebe517d] {
+.multiple-selector .search-input.inline[data-v-7ff53892] {
   min-width: 10px;
 }
-.multiple-selector .search-input.last[data-v-bebe517d], .multiple-selector .search-input.collapsed[data-v-bebe517d] {
+.multiple-selector .search-input.last[data-v-7ff53892], .multiple-selector .search-input.collapsed[data-v-7ff53892] {
   flex: 1;
   min-width: 60px;
-}.single-selector[data-v-67f2ee6a] {
+}.single-selector[data-v-d56195a1] {
   position: relative;
   width: 100%;
 }
-.single-selector.is-disabled[data-v-67f2ee6a] {
+.single-selector.is-disabled[data-v-d56195a1] {
   pointer-events: none;
 }
-.input-container[data-v-67f2ee6a] {
+.input-container[data-v-d56195a1] {
   position: relative;
   display: flex;
   align-items: center;
@@ -138,25 +138,25 @@
   border: 1px solid #c4c6cc;
   border-radius: 2px;
 }
-.input-container[data-v-67f2ee6a]:focus-within {
+.input-container[data-v-d56195a1]:focus-within {
   border-color: #3a84ff;
   box-shadow: 0 0 0 2px rgba(58, 132, 255, 0.1);
 }
-.search-input[data-v-67f2ee6a] {
+.search-input[data-v-d56195a1] {
   flex: 1;
   height: 30px;
   background: transparent;
   border: none;
   outline: none;
 }
-.search-input[data-v-67f2ee6a]::placeholder {
+.search-input[data-v-d56195a1]::placeholder {
   color: #c4c6cc;
-}.bk-user-selector[data-v-617ed278] {
+}.bk-user-selector[data-v-812cbe5a] {
   position: relative;
   width: 100%;
   font-size: 12px;
 }
-.bk-user-selector.is-disabled[data-v-617ed278] {
+.bk-user-selector.is-disabled[data-v-812cbe5a] {
   cursor: not-allowed;
   background-color: #dcdee5;
 }