@blueking/bk-user-selector 0.0.1-beta.2 → 0.0.2-beta.1

package/vue3/index.umd.min.js

@@ -3,8 +3,239 @@
 })(this, function(exports2, vue, bkuiVue) {
   "use strict";
   var __vite_style__ = document.createElement("style");
-  __vite_style__.textContent = "\n.user-selector[data-v-5e8a952d] {\n  width: 100%;\n}\n.form-item[data-v-5e8a952d] {\n  display: flex;\n  align-items: center;\n  margin-bottom: 15px;\n}\n.form-label[data-v-5e8a952d] {\n  width: 80px;\n  text-align: right;\n  padding-right: 10px;\n  font-size: 14px;\n  color: #63656e;\n}\n.form-required[data-v-5e8a952d] {\n  color: #ea3636;\n  margin-right: 4px;\n}\n.form-content[data-v-5e8a952d] {\n  flex: 1;\n  position: relative;\n}\n.tag-input-container[data-v-5e8a952d] {\n  display: flex;\n  flex-wrap: wrap;\n  border: 1px solid #dcdee5;\n  border-radius: 2px;\n  min-height: 32px;\n  align-items: center;\n  padding: 2px 8px;\n  gap: 4px;\n}\n.tag-inline-container[data-v-5e8a952d] {\n  display: flex;\n  flex-wrap: nowrap;\n  align-items: center;\n  gap: 4px;\n  flex-grow: 1;\n  min-height: 24px;\n}\n.is-focused[data-v-5e8a952d] {\n  border-color: #3a84ff;\n}\n.tag-group[data-v-5e8a952d] {\n  display: contents;\n  /* 让draggable的内容直接成为父容器的子元素 */\n}\n.tag-item[data-v-5e8a952d] {\n  flex-shrink: 0;\n  height: 24px;\n  line-height: 24px;\n  margin: 0;\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n}\n.tag-content[data-v-5e8a952d] {\n  display: flex;\n  align-items: center;\n  height: 100%;\n}\n\n/* 输入框样式 */\n.tag-input[data-v-5e8a952d] {\n  flex-grow: 0;\n  width: 10px;\n  min-width: 10px;\n  max-width: 100%;\n  border: none;\n  outline: none;\n  height: 32px;\n  font-size: 14px;\n  padding: 0 8px;\n  background: transparent;\n  cursor: text;\n  transition: width 0.1s ease-in-out;\n}\n.tag-input[data-v-5e8a952d]::placeholder {\n  color: #c4c6cc;\n  font-size: 12px;\n}\n.full-width[data-v-5e8a952d] {\n  flex-grow: 1;\n  padding: 0 8px;\n  /* 添加统一的内边距 */\n}\n.popover-content[data-v-5e8a952d] {\n  min-height: 80px;\n  max-height: 250px;\n  overflow-y: auto;\n  background-color: #fff;\n}\n.user-option[data-v-5e8a952d] {\n  display: flex;\n  align-items: center;\n  padding: 8px 12px;\n  cursor: pointer;\n}\n.user-option[data-v-5e8a952d]:hover {\n  background-color: #f5f7fa;\n}\n.user-avatar[data-v-5e8a952d] {\n  width: 24px;\n  height: 24px;\n  border-radius: 50%;\n  margin-right: 8px;\n}\n.user-avatar-text[data-v-5e8a952d] {\n  width: 24px;\n  height: 24px;\n  line-height: 24px;\n  text-align: center;\n  border-radius: 50%;\n  background-color: #3a84ff;\n  color: white;\n  font-size: 12px;\n  margin-right: 8px;\n}\n.user-name[data-v-5e8a952d] {\n  font-size: 12px;\n}\n\n/* 拖拽相关样式 */\n.draggable[data-v-5e8a952d] {\n  cursor: move;\n  padding-left: 4px;\n}\n.ghost-tag[data-v-5e8a952d] {\n  opacity: 0.5;\n  background: #c8ebfb;\n}\n.chosen-tag[data-v-5e8a952d] {\n  box-shadow: 0 0 2px 2px #3a84ff;\n}\n.drag-tag[data-v-5e8a952d] {\n  opacity: 0.8;\n}\n.drag-handle[data-v-5e8a952d] {\n  display: inline-flex;\n  align-items: center;\n  margin-right: 4px;\n  opacity: 0.6;\n  cursor: move;\n}\n.drag-handle svg[data-v-5e8a952d] {\n  fill: currentColor;\n}\n.tag-wrapper[data-v-5e8a952d] {\n  display: flex;\n  align-items: center;\n  padding: 0;\n  height: 24px;\n}\n.inline-input[data-v-5e8a952d] {\n  margin-left: 4px;\n  min-width: 10px;\n  padding: 0 2px;\n}\n\n/* 测量元素样式 */\n.measure-text[data-v-5e8a952d] {\n  position: absolute;\n  visibility: hidden;\n  height: 0;\n  white-space: pre;\n  font-size: 14px;\n  font-family: inherit;\n  padding: 0 2px;\n}\n\n/* 单选模式样式 */\n.is-single[data-v-5e8a952d] {\n  cursor: pointer;\n}\n.single-select[data-v-5e8a952d] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  height: 100%;\n}\n.single-value[data-v-5e8a952d] {\n  display: flex;\n  align-items: center;\n  padding: 0 8px;\n  margin-right: 4px;\n  height: 24px;\n}\n.single-input[data-v-5e8a952d] {\n  flex: 1;\n  width: auto;\n}\n.placeholder[data-v-5e8a952d] {\n  color: #c4c6cc;\n}\n.dropdown-arrow[data-v-5e8a952d] {\n  margin-left: 8px;\n  font-size: 10px;\n  color: #979ba5;\n}\n.clear-icon[data-v-5e8a952d] {\n  margin-left: 8px;\n  font-size: 14px;\n  color: #979ba5;\n  cursor: pointer;\n}\n.clear-icon[data-v-5e8a952d]:hover {\n  color: #63656e;\n}\n.no-data[data-v-5e8a952d] {\n  padding: 8px 12px;\n  font-size: 12px;\n  text-align: center;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n/*$vite$:1*/";
+  __vite_style__.textContent = ".user-option[data-v-0ae61279] {\n  display: flex;\n  align-items: center;\n}\n.user-option .user-name[data-v-0ae61279] {\n  font-size: 14px;\n}\n.user-option .tenant-name[data-v-0ae61279] {\n  font-size: 12px;\n  color: #f59500;\n  margin-left: 4px;\n  padding: 0 4px;\n  background: rgba(245, 149, 0, 0.1);\n  border-radius: 2px;\n}.user-tag[data-v-cf26d9e2] {\n  margin-right: 4px;\n}\n.user-tag.draggable[data-v-cf26d9e2] {\n  cursor: move;\n}\n.user-tag.active[data-v-cf26d9e2] {\n  background-color: #e1ecff;\n  border-color: #3a84ff;\n}\n.user-tag .tag-content .user-name[data-v-cf26d9e2] {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  font-size: 12px;\n}\n.user-tag .tag-content .tenant-name[data-v-cf26d9e2] {\n  color: #f59500;\n  margin-left: 3px;\n  white-space: nowrap;\n  padding: 0 3px;\n  border-radius: 2px;\n}.bk-user-selector-popover.bk-popover.bk-pop2-content {\n  padding: 0;\n}.multiple-selector[data-v-6a1779a9] {\n  position: relative;\n  width: 100%;\n}\n.multiple-selector .tags-container[data-v-6a1779a9] {\n  min-height: 32px;\n  border: 1px solid #dcdee5;\n  border-radius: 2px;\n  padding: 1px 4px;\n  transition: all 0.2s ease;\n  background-color: #fff;\n}\n.multiple-selector .tags-container.focused[data-v-6a1779a9] {\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-6a1779a9] {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n}\n.multiple-selector .tag-list[data-v-6a1779a9] {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n}\n.multiple-selector .tag-wrapper[data-v-6a1779a9] {\n  display: inline-flex;\n  align-items: center;\n  max-width: 100%;\n}\n.multiple-selector .search-input[data-v-6a1779a9] {\n  outline: none;\n  border: none;\n  font-size: 14px;\n  height: 28px;\n  background: transparent;\n}\n.multiple-selector .search-input[data-v-6a1779a9]::placeholder {\n  color: #C4C6CC;\n}\n.multiple-selector .search-input.inline[data-v-6a1779a9] {\n  width: 4px;\n  min-width: 4px;\n}\n.multiple-selector .search-input.last[data-v-6a1779a9], .multiple-selector .search-input.collapsed[data-v-6a1779a9] {\n  flex: 1;\n  min-width: 60px;\n}\n.multiple-selector .tag-more[data-v-6a1779a9] {\n  background-color: #f0f1f5;\n  color: #63656e;\n  margin: 0 4px 4px 0;\n  cursor: pointer;\n}\n.dropdown-content[data-v-6a1779a9] {\n  min-height: 40px;\n  max-height: 300px;\n  overflow-y: auto;\n  padding: 5px 0;\n}\n.dropdown-content .no-data[data-v-6a1779a9] {\n  padding: 10px;\n  text-align: center;\n  color: #979ba5;\n}\n.dropdown-content .user-option[data-v-6a1779a9] {\n  padding: 8px 12px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  height: 32px;\n}\n.dropdown-content .user-option[data-v-6a1779a9]:hover {\n  background-color: #f5f7fa;\n}\n.dropdown-content .user-option .user-name[data-v-6a1779a9] {\n  font-size: 14px;\n}\n.dropdown-content .user-option .tenant-name[data-v-6a1779a9] {\n  font-size: 12px;\n  color: #f59500;\n  margin-left: 4px;\n  padding: 0 4px;\n  background: rgba(245, 149, 0, 0.1);\n  border-radius: 2px;\n}.bk-user-selector[data-v-144c2518] {\n  width: 100%;\n  position: relative;\n}/*$vite$:1*/";
   document.head.appendChild(__vite_style__);
+  const getTenants = async (apiBaseUrl, tenantId) => {
+    if (!apiBaseUrl || !tenantId) {
+      console.warn("获取租户信息需要提供有效的API基础URL和租户ID");
+      return [];
+    }
+    try {
+      const url = `${apiBaseUrl}/api/v3/open-web/tenant/data-source-owner-tenants/`;
+      const response = await fetch(url, {
+        method: "GET",
+        headers: {
+          "x-bk-tenant-id": tenantId
+        },
+        credentials: "include"
+      });
+      if (!response.ok) {
+        throw new Error(`获取租户信息失败: ${response.status} ${response.statusText}`);
+      }
+      const data = await response.json();
+      return data.data || [];
+    } catch (error) {
+      console.error("获取租户信息失败:", error);
+      return [];
+    }
+  };
+  const searchUsers = async (apiBaseUrl, tenantId, keyword = "") => {
+    if (!keyword || !apiBaseUrl || !tenantId) {
+      console.warn("搜索用户需要提供有效的API基础URL、租户ID和关键词");
+      return [];
+    }
+    try {
+      const url = `${apiBaseUrl}/api/v3/open-web/tenant/users/-/search/?keyword=${encodeURIComponent(keyword)}`;
+      const response = await fetch(url, {
+        method: "GET",
+        headers: {
+          "x-bk-tenant-id": tenantId
+        },
+        credentials: "include"
+      });
+      if (!response.ok) {
+        throw new Error(`搜索用户失败: ${response.status} ${response.statusText}`);
+      }
+      const data = await response.json();
+      return data.data || [];
+    } catch (error) {
+      console.error("搜索用户失败:", error);
+      return [];
+    }
+  };
+  const lookupUsers = async (apiBaseUrl, tenantId, users = []) => {
+    if (users.length === 0 || !apiBaseUrl || !tenantId) {
+      console.warn("批量查找用户需要提供有效的API基础URL、租户ID和至少一个用户名");
+      return [];
+    }
+    try {
+      const url = `${apiBaseUrl}/api/v3/open-web/tenant/users/-/lookup/?lookups=${users.join(",")}&lookup_fields=bk_username`;
+      const response = await fetch(url, {
+        method: "GET",
+        headers: {
+          "x-bk-tenant-id": tenantId
+        },
+        credentials: "include"
+      });
+      if (!response.ok) {
+        throw new Error(`批量查找用户失败: ${response.status} ${response.statusText}`);
+      }
+      const data = await response.json();
+      return data.data || [];
+    } catch (error) {
+      console.error("批量查找用户失败:", error);
+      return [];
+    }
+  };
+  const formatUsers = (users) => {
+    if (!users || !Array.isArray(users)) return [];
+    return users.map((user) => ({
+      id: user.bk_username,
+      name: user.display_name,
+      tenantId: user.owner_tenant_id
+    }));
+  };
+  const useTenantData = (apiBaseUrl, tenantId) => {
+    const tenants = vue.ref({});
+    const loading = vue.ref(false);
+    const fetchTenants = async () => {
+      if (!apiBaseUrl || !tenantId) {
+        console.warn("获取租户需要提供有效的API基础URL和租户ID");
+        return;
+      }
+      loading.value = true;
+      try {
+        const result = await getTenants(apiBaseUrl, tenantId);
+        const tenantMap = {};
+        result.forEach((item) => {
+          if (item.id && item.name) {
+            tenantMap[item.id] = item.name;
+          }
+        });
+        tenants.value = tenantMap;
+      } catch (error) {
+        console.error("获取租户数据失败:", error);
+      } finally {
+        loading.value = false;
+      }
+    };
+    vue.onBeforeMount(() => {
+      fetchTenants();
+    });
+    return {
+      tenants,
+      loading,
+      fetchTenants
+    };
+  };
+  const _hoisted_1$3 = { class: "user-option" };
+  const _hoisted_2$2 = { class: "user-name" };
+  const _hoisted_3$2 = {
+    key: 0,
+    class: "tenant-name"
+  };
+  const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
+    ...{
+      name: "BkUserSelectorSingle"
+    },
+    __name: "single-selector",
+    props: {
+      modelValue: {},
+      placeholder: {},
+      apiBaseUrl: {},
+      tenantId: {},
+      tenants: {}
+    },
+    emits: ["update:modelValue", "change"],
+    setup(__props, { emit: __emit }) {
+      const props = __props;
+      const emit = __emit;
+      const { tenants } = useTenantData(props.apiBaseUrl || "", props.tenantId || "");
+      const options = vue.ref([]);
+      const loading = vue.ref(false);
+      const selectedUser = vue.ref(props.modelValue || "");
+      vue.onBeforeMount(async () => {
+        if (typeof props.modelValue === "string" && props.modelValue) {
+          try {
+            loading.value = true;
+            const result = await lookupUsers(props.apiBaseUrl || "", props.tenantId || "", [props.modelValue]);
+            options.value = formatUsers(result);
+          } catch (error) {
+            console.error("获取用户信息失败:", error);
+          } finally {
+            loading.value = false;
+          }
+        }
+      });
+      const fetchUsers = async (keyword = "") => {
+        if (!keyword || keyword.length < 2) return [];
+        loading.value = true;
+        try {
+          const result = await searchUsers(props.apiBaseUrl || "", props.tenantId || "", keyword);
+          const formattedResults = formatUsers(result);
+          options.value = formattedResults;
+          return formattedResults;
+        } catch (error) {
+          console.error("获取用户列表失败:", error);
+          return [];
+        } finally {
+          loading.value = false;
+        }
+      };
+      vue.watch(selectedUser, (newVal) => {
+        emit("update:modelValue", newVal);
+        const selectedUserInfo = options.value.find((user) => user.id === newVal);
+        emit("change", selectedUserInfo || null);
+      });
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createBlock(vue.unref(bkuiVue.Select), {
+          modelValue: selectedUser.value,
+          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => selectedUser.value = $event),
+          placeholder: _ctx.placeholder,
+          "input-search": true,
+          "remote-method": fetchUsers,
+          filterable: ""
+        }, {
+          default: vue.withCtx(() => [
+            (vue.openBlock(true), vue.createElementBlock(
+              vue.Fragment,
+              null,
+              vue.renderList(options.value, (item) => {
+                return vue.openBlock(), vue.createBlock(vue.unref(bkuiVue.Select).Option, {
+                  key: item.id,
+                  label: item.name,
+                  value: item.id
+                }, {
+                  default: vue.withCtx(() => [
+                    vue.createElementVNode("div", _hoisted_1$3, [
+                      vue.createElementVNode(
+                        "span",
+                        _hoisted_2$2,
+                        vue.toDisplayString(item.name),
+                        1
+                        /* TEXT */
+                      ),
+                      item.tenantId !== props.tenantId && item.tenantId && vue.unref(tenants)[item.tenantId] ? (vue.openBlock(), vue.createElementBlock(
+                        "span",
+                        _hoisted_3$2,
+                        "@" + vue.toDisplayString(vue.unref(tenants)[item.tenantId]),
+                        1
+                        /* TEXT */
+                      )) : vue.createCommentVNode("v-if", true)
+                    ])
+                  ]),
+                  _: 2
+                  /* DYNAMIC */
+                }, 1032, ["label", "value"]);
+              }),
+              128
+              /* KEYED_FRAGMENT */
+            ))
+          ]),
+          _: 1
+          /* STABLE */
+        }, 8, ["modelValue", "placeholder"]);
+      };
+    }
+  });
+  const _export_sfc = (sfc, props) => {
+    const target = sfc.__vccOpts || sfc;
+    for (const [key, val] of props) {
+      target[key] = val;
+    }
+    return target;
+  };
+  const SingleSelector = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-0ae61279"]]);
   /**!
    * Sortable 1.15.6
    * @author	RubaXa   <trash@rubaxa.org>
@@ -2162,716 +2393,711 @@
   });
   Sortable.mount(new AutoScrollPlugin());
   Sortable.mount(Remove, Revert);
-  const _sfc_main$1 = {
-    __name: "single",
-    props: {
-      modelValue: {
-        type: String,
-        default: ""
-      },
-      apiBaseUrl: {
-        type: String,
-        default: ""
-      },
-      tenantId: {
-        type: String,
-        default: ""
+  const debounce = (fn, delay) => {
+    let timer = null;
+    return function(...args) {
+      if (timer) {
+        clearTimeout(timer);
+      }
+      timer = window.setTimeout(() => {
+        fn(...args);
+        timer = null;
+      }, delay);
+    };
+  };
+  const calculateVisibleTags = (container, items, containerWidth) => {
+    if (!container || !items.length) return 0;
+    let totalWidth = 0;
+    let visibleCount = 0;
+    for (let i = 0; i < items.length; i++) {
+      const item = items[i];
+      if (!item) continue;
+      const style = window.getComputedStyle(item);
+      const width = item.offsetWidth;
+      const marginLeft = parseInt(style.marginLeft, 10) || 0;
+      const marginRight = parseInt(style.marginRight, 10) || 0;
+      totalWidth += width + marginLeft + marginRight;
+      if (totalWidth > containerWidth) {
+        break;
+      }
+      visibleCount++;
+    }
+    return Math.max(1, visibleCount);
+  };
+  const useUserSearch = (apiBaseUrl, tenantId) => {
+    const searchResults = vue.ref([]);
+    const loading = vue.ref(false);
+    const searchQuery = vue.ref("");
+    const performSearch = async (keyword) => {
+      if (!keyword || keyword.length < 2) {
+        searchResults.value = [];
+        return;
+      }
+      if (!apiBaseUrl || !tenantId) {
+        console.warn("执行用户搜索需要提供有效的API基础URL和租户ID");
+        return;
+      }
+      loading.value = true;
+      try {
+        const results = await searchUsers(apiBaseUrl, tenantId, keyword);
+        searchResults.value = formatUsers(results);
+      } catch (error) {
+        console.error("用户搜索失败:", error);
+        searchResults.value = [];
+      } finally {
+        loading.value = false;
       }
+    };
+    const debouncedSearch = debounce(performSearch, 300);
+    const handleSearchInput = (value) => {
+      searchQuery.value = value;
+      debouncedSearch(value);
+    };
+    const clearSearch = () => {
+      searchQuery.value = "";
+      searchResults.value = [];
+    };
+    return {
+      searchResults,
+      loading,
+      searchQuery,
+      performSearch,
+      handleSearchInput,
+      clearSearch
+    };
+  };
+  const _hoisted_1$2 = { class: "tag-content" };
+  const _hoisted_2$1 = { class: "user-name" };
+  const _hoisted_3$1 = {
+    key: 0,
+    class: "tenant-name"
+  };
+  const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
+    ...{
+      name: "UserTag"
     },
-    emits: ["update:modelValue", "change"],
+    __name: "user-tag",
+    props: {
+      user: {},
+      tenants: {},
+      currentTenantId: {},
+      draggable: { type: Boolean },
+      active: { type: Boolean },
+      showTenant: { type: Boolean }
+    },
+    emits: ["click", "close"],
     setup(__props, { emit: __emit }) {
-      const props = __props;
       const emit = __emit;
-      const options = vue.ref([]);
-      const loading = vue.ref(false);
-      const selectedUser = vue.ref(props.modelValue);
-      vue.onBeforeMount(async () => {
-        if (props.modelValue) {
-          const url = `${props.apiBaseUrl}/api/v3/open-web/tenant/users/-/lookup/?lookups=${props.modelValue}&lookup_fields=bk_username`;
-          const response = await fetch(url, {
-            method: "GET",
-            headers: {
-              ...apiConfig.headers
-            },
-            credentials: "include"
-            // 包含cookie
-          });
-          const data = await response.json();
-          console.log("data", data);
-          options.value = data.data.map((item) => ({
-            id: item.bk_username,
-            name: item.display_name
-          }));
-        }
-      });
-      const apiConfig = {
-        baseUrl: `${props.apiBaseUrl}/api/v3/open-web/tenant/users/-/search/`,
-        headers: {
-          "x-bk-tenant-id": props.tenantId
-        }
+      const handleClick = () => {
+        emit("click");
       };
-      const fetchUsers = async (keyword = "") => {
-        var _a;
-        if (!keyword || keyword.length < 2) return [];
-        loading.value = true;
-        try {
-          const url = `${apiConfig.baseUrl}?keyword=${encodeURIComponent(keyword)}`;
-          const response = await fetch(url, {
-            method: "GET",
-            headers: {
-              ...apiConfig.headers
-            },
-            credentials: "include"
-            // 包含cookie
-          });
-          const data = await response.json();
-          console.log("data", data);
-          const result = ((_a = data.data) == null ? void 0 : _a.filter((item) => {
-            var _a2;
-            return !((_a2 = selectedUser.value) == null ? void 0 : _a2.includes(item.bk_username));
-          }).map((item) => ({
-            id: item.bk_username,
-            name: item.display_name
-          }))) || [];
-          options.value = result;
-          return result;
-        } catch (error) {
-          console.error("获取用户列表失败:", error);
-          return [];
-        } finally {
-          loading.value = false;
-        }
+      const handleClose = () => {
+        emit("close");
       };
-      vue.watch(selectedUser, (newVal) => {
-        console.log("newVal", newVal);
-        emit("update:modelValue", newVal);
-      });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createBlock(vue.unref(bkuiVue.Select), {
-          filterable: "",
-          "input-search": true,
-          "remote-method": fetchUsers,
-          modelValue: selectedUser.value,
-          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => selectedUser.value = $event)
+        return vue.openBlock(), vue.createBlock(vue.unref(bkuiVue.Tag), {
+          class: vue.normalizeClass(["user-tag", { draggable: _ctx.draggable, active: _ctx.active }]),
+          closable: "",
+          onClick: vue.withModifiers(handleClick, ["stop"]),
+          onClose: handleClose
         }, {
           default: vue.withCtx(() => [
-            (vue.openBlock(true), vue.createElementBlock(
-              vue.Fragment,
-              null,
-              vue.renderList(options.value, (item) => {
-                return vue.openBlock(), vue.createBlock(vue.unref(bkuiVue.Select).Option, {
-                  key: item.id,
-                  value: item.id,
-                  label: item.name
-                }, null, 8, ["value", "label"]);
-              }),
-              128
-              /* KEYED_FRAGMENT */
-            ))
+            vue.createElementVNode("div", _hoisted_1$2, [
+              vue.createElementVNode(
+                "span",
+                _hoisted_2$1,
+                vue.toDisplayString(_ctx.user.name),
+                1
+                /* TEXT */
+              ),
+              _ctx.showTenant && _ctx.user.tenantId && _ctx.tenants[_ctx.user.tenantId] ? (vue.openBlock(), vue.createElementBlock(
+                "span",
+                _hoisted_3$1,
+                " @" + vue.toDisplayString(_ctx.tenants[_ctx.user.tenantId]),
+                1
+                /* TEXT */
+              )) : vue.createCommentVNode("v-if", true)
+            ])
           ]),
           _: 1
           /* STABLE */
-        }, 8, ["modelValue"]);
+        }, 8, ["class"]);
       };
     }
+  });
+  const UserTag = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-cf26d9e2"]]);
+  const _hoisted_1$1 = ["onClick"];
+  const _hoisted_2 = ["placeholder"];
+  const _hoisted_3 = ["placeholder"];
+  const _hoisted_4 = {
+    key: 0,
+    class: "no-data"
   };
-  const _export_sfc = (sfc, props) => {
-    const target = sfc.__vccOpts || sfc;
-    for (const [key, val] of props) {
-      target[key] = val;
-    }
-    return target;
-  };
-  const _withScopeId = (n) => (vue.pushScopeId("data-v-5e8a952d"), n = n(), vue.popScopeId(), n);
-  const _hoisted_1 = { class: "popover-content" };
-  const _hoisted_2 = { key: 0 };
-  const _hoisted_3 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ vue.createElementVNode(
-    "div",
-    { class: "no-data" },
-    [
-      /* @__PURE__ */ vue.createElementVNode("span", null, "暂无数据")
-    ],
-    -1
-    /* HOISTED */
-  ));
-  const _hoisted_4 = [
-    _hoisted_3
-  ];
   const _hoisted_5 = ["onMousedown"];
-  const _hoisted_6 = ["src"];
+  const _hoisted_6 = { class: "user-name" };
   const _hoisted_7 = {
-    key: 1,
-    class: "user-avatar-text"
+    key: 0,
+    class: "tenant-name"
   };
-  const _hoisted_8 = { class: "user-name" };
-  const _hoisted_9 = {
-    ref: "sortableContainer",
-    class: "tag-group"
-  };
-  const _hoisted_10 = ["onClick"];
-  const _hoisted_11 = { class: "tag-content" };
-  const _hoisted_12 = { class: "user-name" };
-  const _hoisted_13 = ["placeholder"];
-  const _hoisted_14 = ["placeholder"];
-  const _hoisted_15 = { class: "tag-content" };
-  const _hoisted_16 = { class: "user-name" };
-  const _hoisted_17 = ["placeholder"];
-  const _sfc_main = {
-    __name: "index",
+  const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
+    ...{
+      name: "BkUserSelectorMultiple"
+    },
+    __name: "multiple-selector",
     props: {
-      // 文本标签
-      label: {
-        type: String,
-        default: "人员选择"
-      },
-      // 是否必填
-      required: {
-        type: Boolean,
-        default: false
+      /**
+       * 绑定值
+       */
+      modelValue: {
+        type: Array,
+        default: () => []
       },
-      // 占位文字
+      /**
+       * 占位文本
+       */
       placeholder: {
         type: String,
         default: "请输入人员名称搜索"
       },
-      // 默认选中的用户(单选时为字符串，多选时为数组)
-      modelValue: {
-        type: [String, Array],
-        default: ""
-      },
-      // 是否支持拖拽排序
+      /**
+       * 是否可拖拽
+       */
       draggable: {
         type: Boolean,
         default: false
       },
-      // 是否多选
-      multiple: {
-        type: Boolean,
-        default: false
-      },
-      // 接口基础URL
+      /**
+       * API 基础 URL
+       */
       apiBaseUrl: {
         type: String,
         default: ""
       },
-      // 租户ID
+      /**
+       * 租户 ID
+       */
       tenantId: {
         type: String,
         default: ""
+      },
+      /**
+       * 已选用户
+       */
+      selectedUsers: {
+        type: Array,
+        default: () => []
       }
     },
-    emits: ["update:modelValue", "change"],
+    emits: ["update:selectedUsers", "add-user", "remove-user"],
     setup(__props, { emit: __emit }) {
-      const vClickoutside = bkuiVue.clickoutside;
-      const vLoading = bkuiVue.Loading;
       const props = __props;
       const emit = __emit;
-      const selectedUsers = vue.ref(props.modelValue || []);
-      const searchQuery = vue.ref("");
-      const loading = vue.ref(false);
-      const showDropdown = vue.ref(false);
-      const searchInput = vue.ref(null);
+      const { tenants } = useTenantData(props.apiBaseUrl, props.tenantId);
+      const {
+        searchResults,
+        loading: searchLoading,
+        searchQuery,
+        handleSearchInput
+      } = useUserSearch(props.apiBaseUrl, props.tenantId);
       const containerRef = vue.ref(null);
-      const tagInlineContainerRef = vue.ref(null);
+      const tagsContainerRef = vue.ref(null);
+      const sortableContainerRef = vue.ref(null);
+      const collapsedContainerRef = vue.ref(null);
+      const inlineInputRef = vue.ref(null);
+      const lastInputRef = vue.ref(null);
+      const collapsedInputRef = vue.ref(null);
       const isFocused = vue.ref(false);
-      const visibleUsers = vue.ref([]);
-      const hiddenCount = vue.ref(0);
-      const userList = vue.ref([]);
-      let searchTimer = null;
+      const showDropdown = vue.ref(false);
       const activeTagIndex = vue.ref(-1);
-      const measureEl = vue.ref(null);
       const sortableInstance = vue.ref(null);
-      const apiConfig = {
-        baseUrl: `${props.apiBaseUrl}/api/v3/open-web/tenant/users/-/search/`,
-        headers: {
-          "x-bk-tenant-id": props.tenantId
-        }
+      const visibleUsers = vue.ref([]);
+      const hiddenCount = vue.ref(0);
+      const initSortable = () => {
+        if (!props.draggable || !sortableContainerRef.value) return;
+        if (sortableInstance.value) {
+          sortableInstance.value.destroy();
+        }
+        sortableInstance.value = new Sortable(sortableContainerRef.value, {
+          animation: 150,
+          draggable: ".tag-wrapper",
+          onEnd: (evt) => {
+            const { oldIndex: oldIndex2, newIndex: newIndex2 } = evt;
+            if (oldIndex2 === newIndex2 || oldIndex2 === void 0 || newIndex2 === void 0) return;
+            const updatedUsers = [...props.selectedUsers];
+            const [movedUser] = updatedUsers.splice(oldIndex2, 1);
+            updatedUsers.splice(newIndex2, 0, movedUser);
+            emit("update:selectedUsers", updatedUsers);
+            activeTagIndex.value = newIndex2;
+          }
+        });
       };
-      const fetchUsers = async (keyword = "") => {
-        var _a;
-        if (!keyword) return [];
-        loading.value = true;
-        try {
-          const url = `${apiConfig.baseUrl}?keyword=${encodeURIComponent(keyword)}`;
-          const response = await fetch(url, {
-            method: "GET",
-            headers: {
-              ...apiConfig.headers
-            },
-            credentials: "include"
-            // 包含cookie
-          });
-          const data = await response.json();
-          const selectedIds = selectedUsers.value.map((user) => user.id);
-          return ((_a = data.data) == null ? void 0 : _a.filter((item) => !selectedIds.includes(item.bk_username)).map((item) => ({
-            id: item.bk_username,
-            name: item.login_name,
-            avatar: item.avatar_url || ""
-          }))) || [];
-        } catch (error) {
-          console.error("获取用户列表失败:", error);
-          return [];
-        } finally {
-          loading.value = false;
+      const calculateVisibleUsers = () => {
+        if (!collapsedContainerRef.value || !props.selectedUsers.length) {
+          visibleUsers.value = [];
+          hiddenCount.value = 0;
+          return;
         }
+        const containerWidth = collapsedContainerRef.value.offsetWidth;
+        const tagElements = collapsedContainerRef.value.querySelectorAll(".user-tag");
+        const visibleCount = calculateVisibleTags(
+          collapsedContainerRef.value,
+          tagElements,
+          containerWidth - 100
+          // 为输入框和更多标签预留空间
+        );
+        visibleUsers.value = props.selectedUsers.slice(0, visibleCount);
+        hiddenCount.value = Math.max(0, props.selectedUsers.length - visibleCount);
       };
-      vue.watch(() => props.modelValue, (val) => {
-        selectedUsers.value = val || [];
-      });
-      vue.watch(() => selectedUsers.value, (val) => {
-        emit("update:modelValue", val);
-      });
-      const getAvatarText = (name) => name ? name.charAt(0) : "";
-      const updateInputWidth = () => {
-        if (!searchInput.value || !measureEl.value) return;
-        measureEl.value.textContent = searchQuery.value || searchInput.value.placeholder || "";
-        const width = Math.max(20, measureEl.value.offsetWidth + 10);
-        searchInput.value.style.width = `${width}px`;
+      const handleFocus = () => {
+        isFocused.value = true;
+        showDropdown.value = false;
+        activeTagIndex.value = -1;
+        vue.nextTick(() => {
+          if (lastInputRef.value) {
+            lastInputRef.value.focus();
+          }
+        });
       };
-      const handleInput = () => {
-        if (searchTimer) {
-          clearTimeout(searchTimer);
-        }
-        loading.value = true;
-        showDropdown.value = true;
-        searchTimer = setTimeout(async () => {
-          if (searchQuery.value.length >= 2) {
-            userList.value = await fetchUsers(searchQuery.value);
-          } else {
-            userList.value = [];
+      const handleClickOutside = () => {
+        isFocused.value = false;
+        showDropdown.value = false;
+        activeTagIndex.value = -1;
+        searchQuery.value = "";
+        vue.nextTick(() => {
+          calculateVisibleUsers();
+        });
+      };
+      const handleContainerClick = () => {
+        activeTagIndex.value = -1;
+        vue.nextTick(() => {
+          if (lastInputRef.value) {
+            lastInputRef.value.focus();
           }
-          loading.value = false;
-        }, 300);
-        updateInputWidth();
+        });
       };
       const handleTagClick = (index2) => {
         activeTagIndex.value = index2;
-        setTimeout(() => {
-          var _a;
-          (_a = searchInput.value) == null ? void 0 : _a.focus();
-        }, 0);
+        vue.nextTick(() => {
+          if (activeTagIndex.value === props.selectedUsers.length - 1) {
+            if (lastInputRef.value) {
+              lastInputRef.value.focus();
+            }
+          } else if (inlineInputRef.value) {
+            inlineInputRef.value.focus();
+          }
+        });
       };
-      const handleFocus = () => {
+      const handleInputFocus = () => {
         if (!isFocused.value) {
           isFocused.value = true;
-          activeTagIndex.value = selectedUsers.value.length - 1;
         }
-        showDropdown.value = true;
-        setTimeout(() => {
-          var _a;
-          (_a = searchInput.value) == null ? void 0 : _a.focus();
-        }, 0);
+        if (searchQuery.value.length >= 2) {
+          showDropdown.value = true;
+        }
       };
-      const addUser = (user) => {
-        if (!selectedUsers.value.some((item) => item.id === user.id)) {
+      const handleInput = () => {
+        handleSearchInput(searchQuery.value);
+        showDropdown.value = searchQuery.value.length >= 2;
+      };
+      const handlePaste = (event) => {
+        var _a;
+        const pastedText = ((_a = event.clipboardData) == null ? void 0 : _a.getData("text")) || "";
+        if (pastedText.trim()) {
+          searchQuery.value = pastedText.trim();
+          handleInput();
+        }
+      };
+      const handleKeyDown = (event) => {
+        if (event.key === "Backspace" && !searchQuery.value && props.selectedUsers.length > 0) {
           if (activeTagIndex.value >= 0) {
-            const updatedUsers = [...selectedUsers.value];
-            updatedUsers.splice(activeTagIndex.value + 1, 0, user);
-            selectedUsers.value = updatedUsers;
-            activeTagIndex.value += 1;
+            const userToRemove = props.selectedUsers[activeTagIndex.value];
+            removeUser(userToRemove);
+            if (activeTagIndex.value > 0) {
+              activeTagIndex.value = activeTagIndex.value - 1;
+            } else {
+              activeTagIndex.value = -1;
+            }
           } else {
-            selectedUsers.value = [...selectedUsers.value, user];
-            activeTagIndex.value = selectedUsers.value.length - 1;
+            const lastUser = props.selectedUsers[props.selectedUsers.length - 1];
+            removeUser(lastUser);
           }
-          emit("change", selectedUsers.value);
+        }
+      };
+      const addUser = (user) => {
+        if (!user || !user.id) return;
+        if (!props.selectedUsers.some((item) => item.id === user.id)) {
+          const updatedUsers = [...props.selectedUsers, user];
+          emit("update:selectedUsers", updatedUsers);
+          emit("add-user", user);
         }
         searchQuery.value = "";
-        userList.value = [];
-        setTimeout(() => {
-          var _a;
-          (_a = searchInput.value) == null ? void 0 : _a.focus();
-        }, 0);
+        showDropdown.value = false;
       };
       const removeUser = (user) => {
-        selectedUsers.value = selectedUsers.value.filter((item) => item.id !== user.id);
-        emit("change", selectedUsers.value);
-      };
-      const calculateVisibleTags = async () => {
-        if (!props.multiple) {
-          return;
-        }
-        await vue.nextTick();
-        if (selectedUsers.value.length === 0) {
-          visibleUsers.value = [];
-          hiddenCount.value = 0;
-          return;
+        if (!user || !user.id) return;
+        const updatedUsers = props.selectedUsers.filter((item) => item.id !== user.id);
+        emit("update:selectedUsers", updatedUsers);
+        emit("remove-user", user);
+        if (activeTagIndex.value >= updatedUsers.length) {
+          activeTagIndex.value = updatedUsers.length - 1;
         }
-        if (isFocused.value) {
-          visibleUsers.value = [...selectedUsers.value];
-          hiddenCount.value = 0;
-          return;
+        if (!isFocused.value) {
+          vue.nextTick(() => {
+            calculateVisibleUsers();
+          });
         }
-        const container = tagInlineContainerRef.value;
-        const originalStyle = {
-          flexWrap: container.style.flexWrap,
-          height: container.style.height,
-          whiteSpace: container.style.whiteSpace,
-          overflow: container.style.overflow
-        };
-        container.style.flexWrap = "wrap";
-        container.style.height = "auto";
-        container.style.whiteSpace = "normal";
-        container.style.overflow = "visible";
-        const tagElements = container.querySelectorAll(".tag-item");
-        if (tagElements.length === 0) {
-          Object.assign(container.style, originalStyle);
-          visibleUsers.value = [];
-          hiddenCount.value = 0;
-          return;
+      };
+      vue.watch(() => props.selectedUsers, () => {
+        visibleUsers.value = [...props.selectedUsers];
+        if (!isFocused.value) {
+          vue.nextTick(() => {
+            calculateVisibleUsers();
+          });
         }
-        const firstRowTop = tagElements[0].offsetTop;
-        const visibleIndexes = [];
-        for (let i = 0; i < tagElements.length; i++) {
-          if (tagElements[i].offsetTop === firstRowTop) {
-            visibleIndexes.push(i);
-          } else {
-            break;
-          }
+      }, { deep: true });
+      vue.watch(isFocused, (newVal) => {
+        if (newVal) {
+          vue.nextTick(() => {
+            initSortable();
+          });
         }
-        let visibleCount = visibleIndexes.length;
-        if (visibleCount < selectedUsers.value.length) {
-          const moreTagElement = document.createElement("span");
-          moreTagElement.className = "tag-item tag-more";
-          moreTagElement.textContent = `+${selectedUsers.value.length - visibleCount}`;
-          container.appendChild(moreTagElement);
-          if (moreTagElement.offsetTop > firstRowTop) {
-            visibleCount = Math.max(0, visibleCount - 1);
-          }
-          container.removeChild(moreTagElement);
+      });
+      const handleResize = () => {
+        if (!isFocused.value) {
+          calculateVisibleUsers();
         }
-        Object.assign(container.style, originalStyle);
-        visibleUsers.value = selectedUsers.value.slice(0, visibleCount);
-        hiddenCount.value = selectedUsers.value.length - visibleCount;
       };
-      vue.watch(() => selectedUsers.value.length, () => {
-        calculateVisibleTags();
-      });
       vue.onMounted(() => {
-        window.addEventListener("resize", calculateVisibleTags);
-        calculateVisibleTags();
-        updateInputWidth();
         initSortable();
+        calculateVisibleUsers();
+        window.addEventListener("resize", handleResize);
+        vue.nextTick(() => {
+          calculateVisibleUsers();
+        });
       });
-      const handleBlur = () => {
-        isFocused.value = false;
-        activeTagIndex.value = -1;
-        showDropdown.value = false;
-        searchQuery.value = "";
-        calculateVisibleTags();
+      return (_ctx, _cache) => {
+        return vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
+          ref_key: "containerRef",
+          ref: containerRef,
+          class: "multiple-selector"
+        }, [
+          vue.createCommentVNode(" 聚焦状态 - 可编辑模式 "),
+          isFocused.value ? (vue.openBlock(), vue.createElementBlock(
+            "div",
+            {
+              key: 0,
+              ref_key: "tagsContainerRef",
+              ref: tagsContainerRef,
+              class: "tags-container focused",
+              onClick: vue.withModifiers(handleContainerClick, ["stop"])
+            },
+            [
+              vue.createCommentVNode(" 用户标签列表 "),
+              vue.createElementVNode(
+                "div",
+                {
+                  ref_key: "sortableContainerRef",
+                  ref: sortableContainerRef,
+                  class: "tag-list"
+                },
+                [
+                  (vue.openBlock(true), vue.createElementBlock(
+                    vue.Fragment,
+                    null,
+                    vue.renderList(__props.selectedUsers, (user, index2) => {
+                      return vue.openBlock(), vue.createElementBlock("div", {
+                        key: user.id,
+                        class: "tag-wrapper",
+                        onClick: vue.withModifiers(($event) => handleTagClick(index2), ["stop"])
+                      }, [
+                        vue.createVNode(UserTag, {
+                          user,
+                          tenants: vue.unref(tenants),
+                          "current-tenant-id": __props.tenantId,
+                          draggable: __props.draggable,
+                          active: index2 === activeTagIndex.value,
+                          "show-tenant": true,
+                          onClick: ($event) => handleTagClick(index2),
+                          onClose: ($event) => removeUser(user)
+                        }, null, 8, ["user", "tenants", "current-tenant-id", "draggable", "active", "onClick", "onClose"]),
+                        vue.createCommentVNode(" 在当前激活标签后插入输入框 "),
+                        index2 === activeTagIndex.value && activeTagIndex.value !== __props.selectedUsers.length - 1 ? vue.withDirectives((vue.openBlock(), vue.createElementBlock(
+                          "input",
+                          {
+                            key: 0,
+                            ref_for: true,
+                            ref_key: "inlineInputRef",
+                            ref: inlineInputRef,
+                            class: "search-input inline",
+                            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => vue.isRef(searchQuery) ? searchQuery.value = $event : null),
+                            onFocus: handleInputFocus,
+                            onInput: handleInput,
+                            onKeydown: handleKeyDown,
+                            onPaste: handlePaste
+                          },
+                          null,
+                          544
+                          /* NEED_HYDRATION, NEED_PATCH */
+                        )), [
+                          [vue.vModelText, vue.unref(searchQuery)]
+                        ]) : vue.createCommentVNode("v-if", true)
+                      ], 8, _hoisted_1$1);
+                    }),
+                    128
+                    /* KEYED_FRAGMENT */
+                  )),
+                  vue.createCommentVNode(" 最后一个输入框 "),
+                  activeTagIndex.value === -1 || activeTagIndex.value === __props.selectedUsers.length - 1 ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("input", {
+                    key: 0,
+                    ref_key: "lastInputRef",
+                    ref: lastInputRef,
+                    class: "search-input last",
+                    "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => vue.isRef(searchQuery) ? searchQuery.value = $event : null),
+                    placeholder: !__props.selectedUsers.length ? __props.placeholder : "",
+                    onFocus: handleInputFocus,
+                    onInput: handleInput,
+                    onKeydown: handleKeyDown,
+                    onPaste: handlePaste
+                  }, null, 40, _hoisted_2)), [
+                    [vue.vModelText, vue.unref(searchQuery)]
+                  ]) : vue.createCommentVNode("v-if", true)
+                ],
+                512
+                /* NEED_PATCH */
+              )
+            ],
+            512
+            /* NEED_PATCH */
+          )) : (vue.openBlock(), vue.createElementBlock(
+            vue.Fragment,
+            { key: 1 },
+            [
+              vue.createCommentVNode(" 未聚焦状态 - 只读展示模式 "),
+              vue.createElementVNode(
+                "div",
+                {
+                  ref_key: "collapsedContainerRef",
+                  ref: collapsedContainerRef,
+                  class: "tags-container collapsed",
+                  onClick: vue.withModifiers(handleFocus, ["stop"])
+                },
+                [
+                  (vue.openBlock(true), vue.createElementBlock(
+                    vue.Fragment,
+                    null,
+                    vue.renderList(visibleUsers.value, (user) => {
+                      return vue.openBlock(), vue.createBlock(UserTag, {
+                        key: user.id,
+                        user,
+                        tenants: vue.unref(tenants),
+                        "current-tenant-id": __props.tenantId,
+                        "show-tenant": true,
+                        onClick: handleFocus,
+                        onClose: ($event) => removeUser(user)
+                      }, null, 8, ["user", "tenants", "current-tenant-id", "onClose"]);
+                    }),
+                    128
+                    /* KEYED_FRAGMENT */
+                  )),
+                  vue.createCommentVNode(" 显示折叠标签数量 "),
+                  hiddenCount.value > 0 ? (vue.openBlock(), vue.createBlock(vue.unref(bkuiVue.Tag), {
+                    key: 0,
+                    class: "tag-more",
+                    onClick: vue.withModifiers(handleFocus, ["stop"])
+                  }, {
+                    default: vue.withCtx(() => [
+                      vue.createTextVNode(
+                        " +" + vue.toDisplayString(hiddenCount.value),
+                        1
+                        /* TEXT */
+                      )
+                    ]),
+                    _: 1
+                    /* STABLE */
+                  })) : vue.createCommentVNode("v-if", true),
+                  vue.createCommentVNode(" 搜索输入框 "),
+                  vue.withDirectives(vue.createElementVNode("input", {
+                    ref_key: "collapsedInputRef",
+                    ref: collapsedInputRef,
+                    class: "search-input collapsed",
+                    "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => vue.isRef(searchQuery) ? searchQuery.value = $event : null),
+                    placeholder: !__props.selectedUsers.length ? __props.placeholder : "",
+                    onFocus: handleFocus
+                  }, null, 40, _hoisted_3), [
+                    [vue.vModelText, vue.unref(searchQuery)]
+                  ])
+                ],
+                512
+                /* NEED_PATCH */
+              )
+            ],
+            2112
+            /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
+          )),
+          vue.createCommentVNode(" 下拉选项列表 "),
+          vue.createVNode(vue.unref(bkuiVue.Popover), {
+            "ext-cls": "bk-user-selector-popover",
+            arrow: false,
+            disabled: !showDropdown.value,
+            "is-show": showDropdown.value,
+            width: containerRef.value ? containerRef.value.offsetWidth : "auto",
+            boundary: "document.body",
+            placement: "bottom-start",
+            theme: "light",
+            trigger: "manual"
+          }, {
+            content: vue.withCtx(() => [
+              vue.createVNode(vue.unref(bkuiVue.Loading), {
+                class: "dropdown-content",
+                loading: vue.unref(searchLoading),
+                size: "small",
+                mode: "spin"
+              }, {
+                default: vue.withCtx(() => [
+                  vue.unref(searchResults).length === 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4, [
+                    vue.createElementVNode(
+                      "span",
+                      null,
+                      vue.toDisplayString(vue.unref(searchQuery).length > 1 ? "未找到匹配用户" : "请输入关键词搜索"),
+                      1
+                      /* TEXT */
+                    )
+                  ])) : (vue.openBlock(true), vue.createElementBlock(
+                    vue.Fragment,
+                    { key: 1 },
+                    vue.renderList(vue.unref(searchResults), (user) => {
+                      return vue.openBlock(), vue.createElementBlock("div", {
+                        class: "user-option",
+                        key: user.id,
+                        onMousedown: vue.withModifiers(($event) => addUser(user), ["prevent"])
+                      }, [
+                        vue.createElementVNode(
+                          "span",
+                          _hoisted_6,
+                          vue.toDisplayString(user.name),
+                          1
+                          /* TEXT */
+                        ),
+                        user.tenantId !== __props.tenantId && user.tenantId && vue.unref(tenants)[user.tenantId] ? (vue.openBlock(), vue.createElementBlock(
+                          "span",
+                          _hoisted_7,
+                          "@" + vue.toDisplayString(vue.unref(tenants)[user.tenantId]),
+                          1
+                          /* TEXT */
+                        )) : vue.createCommentVNode("v-if", true)
+                      ], 40, _hoisted_5);
+                    }),
+                    128
+                    /* KEYED_FRAGMENT */
+                  ))
+                ]),
+                _: 1
+                /* STABLE */
+              }, 8, ["loading"])
+            ]),
+            _: 1
+            /* STABLE */
+          }, 8, ["disabled", "is-show", "width"])
+        ])), [
+          [vue.unref(bkuiVue.clickoutside), handleClickOutside]
+        ]);
       };
-      const dragOptions = vue.computed(() => ({
-        animation: 150,
-        ghostClass: "ghost-tag",
-        chosenClass: "chosen-tag",
-        dragClass: "drag-tag",
-        handle: ".tag-item",
-        // 根据draggable属性决定是否启用排序
-        sort: props.draggable
-      }));
-      const initSortable = () => {
-        vue.nextTick(() => {
-          const sortableContainerEl = document.querySelector(".tag-group");
-          console.log(sortableContainerEl, "sortableContainerEl");
-          if (sortableContainerEl && props.draggable) {
-            if (sortableInstance.value) {
-              sortableInstance.value.destroy();
+    }
+  });
+  const MultipleSelector = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-6a1779a9"]]);
+  const _hoisted_1 = { class: "bk-user-selector" };
+  const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+    ...{
+      name: "BkUserSelector"
+    },
+    __name: "user-selector",
+    props: {
+      label: { default: "人员选择" },
+      required: { type: Boolean, default: false },
+      placeholder: { default: "请输入人员名称搜索" },
+      modelValue: { default: "" },
+      draggable: { type: Boolean, default: false },
+      multiple: { type: Boolean, default: false },
+      apiBaseUrl: { default: "" },
+      tenantId: { default: "" }
+    },
+    emits: ["update:modelValue", "change"],
+    setup(__props, { emit: __emit }) {
+      const props = __props;
+      const emit = __emit;
+      const { tenants } = useTenantData(props.apiBaseUrl, props.tenantId);
+      const selectedUsers = vue.ref([]);
+      const selectedUser = vue.ref(props.multiple ? "" : props.modelValue);
+      const selectedUserIds = vue.computed(() => {
+        return props.multiple ? selectedUsers.value.map((user) => user.id) : [];
+      });
+      const initSelectedUsers = async () => {
+        if (props.multiple) {
+          const ids = Array.isArray(props.modelValue) ? props.modelValue : [];
+          if (ids.length > 0) {
+            try {
+              const result = await lookupUsers(props.apiBaseUrl, props.tenantId, ids);
+              selectedUsers.value = formatUsers(result);
+            } catch (error) {
+              console.error("获取选中用户信息失败:", error);
             }
-            sortableInstance.value = Sortable.create(sortableContainerEl, {
-              ...dragOptions.value,
-              onEnd: (evt) => {
-                const newOrder = [...selectedUsers.value];
-                const { oldIndex: oldIndex2, newIndex: newIndex2 } = evt;
-                if (oldIndex2 !== newIndex2) {
-                  const movedItem = newOrder.splice(oldIndex2, 1)[0];
-                  newOrder.splice(newIndex2, 0, movedItem);
-                  selectedUsers.value = newOrder;
-                  handleDragChange();
-                }
-              }
-            });
           }
-        });
+        } else {
+          selectedUser.value = props.modelValue;
+        }
       };
-      vue.watch([
-        () => selectedUsers.value,
-        () => props.draggable,
-        () => isFocused.value
-      ], () => {
-        initSortable();
-      }, { deep: true });
-      const handleDragChange = () => {
-        emit("change", selectedUsers.value);
+      const handleUpdateUser = (user) => {
+        emit("change", user);
       };
-      vue.watch(searchQuery, () => {
-        updateInputWidth();
-      });
-      const handleUpdateSelected = (user) => {
-        selectedUsers.value = [user];
+      const handleUpdateSelectedUsers = (users) => {
+        selectedUsers.value = users;
+        emit("update:modelValue", users.map((user) => user.id));
+        emit("change", users);
       };
+      vue.watch(selectedUser, (newVal) => {
+        if (!props.multiple) {
+          emit("update:modelValue", newVal);
+        }
+      });
+      vue.onBeforeMount(() => {
+        initSelectedUsers();
+      });
       return (_ctx, _cache) => {
-        return vue.withDirectives((vue.openBlock(), vue.createElementBlock("section", null, [
+        return vue.openBlock(), vue.createElementBlock("section", _hoisted_1, [
           vue.createCommentVNode(" 单选模式 "),
-          !__props.multiple ? (vue.openBlock(), vue.createBlock(_sfc_main$1, {
+          !_ctx.multiple ? (vue.openBlock(), vue.createBlock(SingleSelector, {
             key: 0,
-            modelValue: selectedUsers.value,
-            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => selectedUsers.value = $event),
-            placeholder: __props.placeholder,
-            "api-base-url": __props.apiBaseUrl,
-            "tenant-id": __props.tenantId,
-            "onUpdate:selected": handleUpdateSelected
-          }, null, 8, ["modelValue", "placeholder", "api-base-url", "tenant-id"])) : (vue.openBlock(), vue.createElementBlock(
+            modelValue: selectedUser.value,
+            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => selectedUser.value = $event),
+            "api-base-url": _ctx.apiBaseUrl,
+            placeholder: _ctx.placeholder,
+            "tenant-id": _ctx.tenantId,
+            tenants: vue.unref(tenants),
+            onChange: handleUpdateUser
+          }, null, 8, ["modelValue", "api-base-url", "placeholder", "tenant-id", "tenants"])) : (vue.openBlock(), vue.createElementBlock(
             vue.Fragment,
             { key: 1 },
             [
-              vue.createCommentVNode(" 使用 popover 包裹内容 "),
-              vue.createVNode(vue.unref(bkuiVue.Popover), {
-                placement: "bottom-start",
-                theme: "light",
-                trigger: "manual",
-                arrow: false,
-                "is-show": showDropdown.value,
-                width: containerRef.value ? containerRef.value.offsetWidth : "auto",
-                disabled: !showDropdown.value
-              }, {
-                content: vue.withCtx(() => [
-                  vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
-                    userList.value.length === 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, _hoisted_4)) : (vue.openBlock(true), vue.createElementBlock(
-                      vue.Fragment,
-                      { key: 1 },
-                      vue.renderList(userList.value, (item) => {
-                        return vue.openBlock(), vue.createElementBlock("div", {
-                          key: item.id,
-                          class: "user-option",
-                          onMousedown: vue.withModifiers(($event) => addUser(item), ["prevent"])
-                        }, [
-                          item.avatar ? (vue.openBlock(), vue.createElementBlock("img", {
-                            key: 0,
-                            class: "user-avatar",
-                            src: item.avatar,
-                            alt: "用户头像"
-                          }, null, 8, _hoisted_6)) : (vue.openBlock(), vue.createElementBlock(
-                            "span",
-                            _hoisted_7,
-                            vue.toDisplayString(getAvatarText(item.name)),
-                            1
-                            /* TEXT */
-                          )),
-                          vue.createElementVNode(
-                            "span",
-                            _hoisted_8,
-                            vue.toDisplayString(item.name),
-                            1
-                            /* TEXT */
-                          )
-                        ], 40, _hoisted_5);
-                      }),
-                      128
-                      /* KEYED_FRAGMENT */
-                    ))
-                  ])), [
-                    [vue.unref(vLoading), { mode: "spin", size: "small", loading: loading.value }]
-                  ])
-                ]),
-                default: vue.withCtx(() => [
-                  vue.createElementVNode(
-                    "div",
-                    {
-                      ref_key: "containerRef",
-                      ref: containerRef,
-                      class: vue.normalizeClass(["tag-input-container", { "is-focused": isFocused.value, "is-single": !__props.multiple }])
-                    },
-                    [
-                      vue.createCommentVNode(" 多选模式 "),
-                      vue.createCommentVNode(" 聚焦状态 - 使用单一draggable "),
-                      isFocused.value ? (vue.openBlock(), vue.createElementBlock(
-                        vue.Fragment,
-                        { key: 0 },
-                        [
-                          vue.createCommentVNode(" 多选模式 "),
-                          vue.createElementVNode(
-                            "div",
-                            _hoisted_9,
-                            [
-                              (vue.openBlock(true), vue.createElementBlock(
-                                vue.Fragment,
-                                null,
-                                vue.renderList(selectedUsers.value, (element, index2) => {
-                                  return vue.openBlock(), vue.createElementBlock("div", {
-                                    key: element.id,
-                                    class: "tag-wrapper",
-                                    onClick: vue.withModifiers(($event) => handleTagClick(index2), ["stop"])
-                                  }, [
-                                    vue.createVNode(vue.unref(bkuiVue.Tag), {
-                                      class: vue.normalizeClass(["tag-item", { "draggable": __props.draggable, "active": index2 === activeTagIndex.value }]),
-                                      size: "small",
-                                      closable: "",
-                                      onClose: ($event) => removeUser(element),
-                                      onClick: vue.withModifiers(($event) => handleTagClick(index2), ["stop"])
-                                    }, {
-                                      default: vue.withCtx(() => [
-                                        vue.createElementVNode("div", _hoisted_11, [
-                                          vue.createElementVNode(
-                                            "span",
-                                            _hoisted_12,
-                                            vue.toDisplayString(element.name),
-                                            1
-                                            /* TEXT */
-                                          )
-                                        ])
-                                      ]),
-                                      _: 2
-                                      /* DYNAMIC */
-                                    }, 1032, ["class", "onClose", "onClick"]),
-                                    vue.createCommentVNode(" 在当前激活的标签后插入输入框 "),
-                                    vue.createElementVNode(
-                                      "span",
-                                      {
-                                        ref_for: true,
-                                        ref_key: "measureEl",
-                                        ref: measureEl,
-                                        class: "measure-text",
-                                        "aria-hidden": "true"
-                                      },
-                                      null,
-                                      512
-                                      /* NEED_PATCH */
-                                    ),
-                                    index2 === activeTagIndex.value && activeTagIndex.value !== selectedUsers.value.length - 1 ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("input", {
-                                      key: 0,
-                                      ref_for: true,
-                                      ref_key: "searchInput",
-                                      ref: searchInput,
-                                      "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => searchQuery.value = $event),
-                                      placeholder: selectedUsers.value.length ? "" : __props.placeholder,
-                                      class: "tag-input inline-input",
-                                      onInput: handleInput,
-                                      onFocus: handleFocus
-                                    }, null, 40, _hoisted_13)), [
-                                      [vue.vModelText, searchQuery.value]
-                                    ]) : vue.createCommentVNode("v-if", true)
-                                  ], 8, _hoisted_10);
-                                }),
-                                128
-                                /* KEYED_FRAGMENT */
-                              ))
-                            ],
-                            512
-                            /* NEED_PATCH */
-                          ),
-                          vue.createCommentVNode(" 如果激活索引是最后一个或没有激活的标签，将输入框放在最后 "),
-                          activeTagIndex.value === -1 || activeTagIndex.value === selectedUsers.value.length - 1 ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("input", {
-                            key: 0,
-                            ref_key: "searchInput",
-                            ref: searchInput,
-                            "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => searchQuery.value = $event),
-                            placeholder: selectedUsers.value.length ? "" : __props.placeholder,
-                            class: "tag-input single-input",
-                            onInput: handleInput,
-                            onFocus: handleFocus
-                          }, null, 40, _hoisted_14)), [
-                            [vue.vModelText, searchQuery.value]
-                          ]) : vue.createCommentVNode("v-if", true)
-                        ],
-                        64
-                        /* STABLE_FRAGMENT */
-                      )) : (vue.openBlock(), vue.createElementBlock(
-                        vue.Fragment,
-                        { key: 1 },
-                        [
-                          vue.createCommentVNode(" 失焦状态 "),
-                          vue.createCommentVNode(" 多选模式 "),
-                          vue.createElementVNode(
-                            "div",
-                            {
-                              ref_key: "tagInlineContainerRef",
-                              ref: tagInlineContainerRef,
-                              class: "tag-inline-container",
-                              onClick: vue.withModifiers(handleFocus, ["stop"])
-                            },
-                            [
-                              (vue.openBlock(true), vue.createElementBlock(
-                                vue.Fragment,
-                                null,
-                                vue.renderList(visibleUsers.value, (user) => {
-                                  return vue.openBlock(), vue.createBlock(vue.unref(bkuiVue.Tag), {
-                                    key: user.id,
-                                    class: "tag-item",
-                                    closable: "",
-                                    onClose: ($event) => removeUser(user),
-                                    onClick: vue.withModifiers(handleFocus, ["stop"])
-                                  }, {
-                                    default: vue.withCtx(() => [
-                                      vue.createElementVNode("div", _hoisted_15, [
-                                        vue.createElementVNode(
-                                          "span",
-                                          _hoisted_16,
-                                          vue.toDisplayString(user.name),
-                                          1
-                                          /* TEXT */
-                                        )
-                                      ])
-                                    ]),
-                                    _: 2
-                                    /* DYNAMIC */
-                                  }, 1032, ["onClose"]);
-                                }),
-                                128
-                                /* KEYED_FRAGMENT */
-                              )),
-                              vue.createCommentVNode(" 显示折叠标签数量 "),
-                              hiddenCount.value > 0 ? (vue.openBlock(), vue.createBlock(vue.unref(bkuiVue.Tag), {
-                                key: 0,
-                                class: "tag-item tag-more",
-                                onClick: vue.withModifiers(handleFocus, ["stop"])
-                              }, {
-                                default: vue.withCtx(() => [
-                                  vue.createTextVNode(
-                                    " +" + vue.toDisplayString(hiddenCount.value),
-                                    1
-                                    /* TEXT */
-                                  )
-                                ]),
-                                _: 1
-                                /* STABLE */
-                              })) : vue.createCommentVNode("v-if", true),
-                              vue.createCommentVNode(" 修改这里的输入框样式 "),
-                              vue.withDirectives(vue.createElementVNode("input", {
-                                ref_key: "searchInput",
-                                ref: searchInput,
-                                "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => searchQuery.value = $event),
-                                placeholder: selectedUsers.value.length ? "" : __props.placeholder,
-                                class: vue.normalizeClass(["tag-input full-width", { "placeholder-style": !selectedUsers.value.length }]),
-                                onFocus: handleFocus
-                              }, null, 42, _hoisted_17), [
-                                [vue.vModelText, searchQuery.value]
-                              ])
-                            ],
-                            512
-                            /* NEED_PATCH */
-                          )
-                        ],
-                        64
-                        /* STABLE_FRAGMENT */
-                      ))
-                    ],
-                    2
-                    /* CLASS */
-                  )
-                ]),
-                _: 1
-                /* STABLE */
-              }, 8, ["is-show", "width", "disabled"])
+              vue.createCommentVNode(" 多选模式 "),
+              vue.createVNode(MultipleSelector, {
+                modelValue: selectedUserIds.value,
+                "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => selectedUserIds.value = $event),
+                "api-base-url": _ctx.apiBaseUrl,
+                placeholder: _ctx.placeholder,
+                "tenant-id": _ctx.tenantId,
+                draggable: _ctx.draggable,
+                "selected-users": selectedUsers.value,
+                "onUpdate:selectedUsers": handleUpdateSelectedUsers
+              }, null, 8, ["modelValue", "api-base-url", "placeholder", "tenant-id", "draggable", "selected-users"])
             ],
             2112
             /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
           ))
-        ])), [
-          [vue.unref(vClickoutside), handleBlur]
         ]);
       };
     }
-  };
-  const BkUserSelector = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-5e8a952d"]]);
+  });
+  const BkUserSelector = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-144c2518"]]);
   exports2.BkUserSelector = BkUserSelector;
   exports2.default = BkUserSelector;
   Object.defineProperties(exports2, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });