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

package/vue3/index.es.min.js

@@ -1,5 +1,236 @@
-import { ref, onBeforeMount, watch, createBlock, openBlock, unref, withCtx, createElementBlock, Fragment, renderList, onMounted, computed, nextTick, withDirectives, createCommentVNode, createVNode, createElementVNode, normalizeClass, withModifiers, toDisplayString, vModelText, createTextVNode, pushScopeId, popScopeId } from "vue";
-import { Select, Popover, Tag, Loading, clickoutside } from "bkui-vue";
+import { ref, onBeforeMount, defineComponent, watch, createBlock, openBlock, unref, withCtx, createElementBlock, Fragment, renderList, createElementVNode, createCommentVNode, toDisplayString, withModifiers, normalizeClass, nextTick, onMounted, withDirectives, createVNode, isRef, vModelText, createTextVNode, computed } from "vue";
+import { Select, Tag, Popover, Loading, clickoutside } from "bkui-vue";
+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 = ref({});
+  const loading = 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;
+    }
+  };
+  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__ */ 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 = ref([]);
+    const loading = ref(false);
+    const selectedUser = ref(props.modelValue || "");
+    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;
+      }
+    };
+    watch(selectedUser, (newVal) => {
+      emit("update:modelValue", newVal);
+      const selectedUserInfo = options.value.find((user) => user.id === newVal);
+      emit("change", selectedUserInfo || null);
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(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: withCtx(() => [
+          (openBlock(true), createElementBlock(
+            Fragment,
+            null,
+            renderList(options.value, (item) => {
+              return openBlock(), createBlock(unref(Select).Option, {
+                key: item.id,
+                label: item.name,
+                value: item.id
+              }, {
+                default: withCtx(() => [
+                  createElementVNode("div", _hoisted_1$3, [
+                    createElementVNode(
+                      "span",
+                      _hoisted_2$2,
+                      toDisplayString(item.name),
+                      1
+                      /* TEXT */
+                    ),
+                    item.tenantId !== props.tenantId && item.tenantId && unref(tenants)[item.tenantId] ? (openBlock(), createElementBlock(
+                      "span",
+                      _hoisted_3$2,
+                      "@" + toDisplayString(unref(tenants)[item.tenantId]),
+                      1
+                      /* TEXT */
+                    )) : 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>
@@ -2157,716 +2388,711 @@ _extends(Remove, {
 });
 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 = ref([]);
+  const loading = ref(false);
+  const searchQuery = 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__ */ 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 = ref([]);
-    const loading = ref(false);
-    const selectedUser = ref(props.modelValue);
-    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");
     };
-    watch(selectedUser, (newVal) => {
-      console.log("newVal", newVal);
-      emit("update:modelValue", newVal);
-    });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(Select), {
-        filterable: "",
-        "input-search": true,
-        "remote-method": fetchUsers,
-        modelValue: selectedUser.value,
-        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => selectedUser.value = $event)
+      return openBlock(), createBlock(unref(Tag), {
+        class: normalizeClass(["user-tag", { draggable: _ctx.draggable, active: _ctx.active }]),
+        closable: "",
+        onClick: withModifiers(handleClick, ["stop"]),
+        onClose: handleClose
       }, {
         default: withCtx(() => [
-          (openBlock(true), createElementBlock(
-            Fragment,
-            null,
-            renderList(options.value, (item) => {
-              return openBlock(), createBlock(unref(Select).Option, {
-                key: item.id,
-                value: item.id,
-                label: item.name
-              }, null, 8, ["value", "label"]);
-            }),
-            128
-            /* KEYED_FRAGMENT */
-          ))
+          createElementVNode("div", _hoisted_1$2, [
+            createElementVNode(
+              "span",
+              _hoisted_2$1,
+              toDisplayString(_ctx.user.name),
+              1
+              /* TEXT */
+            ),
+            _ctx.showTenant && _ctx.user.tenantId && _ctx.tenants[_ctx.user.tenantId] ? (openBlock(), createElementBlock(
+              "span",
+              _hoisted_3$1,
+              " @" + toDisplayString(_ctx.tenants[_ctx.user.tenantId]),
+              1
+              /* TEXT */
+            )) : 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) => (pushScopeId("data-v-5e8a952d"), n = n(), popScopeId(), n);
-const _hoisted_1 = { class: "popover-content" };
-const _hoisted_2 = { key: 0 };
-const _hoisted_3 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createElementVNode(
-  "div",
-  { class: "no-data" },
-  [
-    /* @__PURE__ */ 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__ */ 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 = clickoutside;
-    const vLoading = Loading;
     const props = __props;
     const emit = __emit;
-    const selectedUsers = ref(props.modelValue || []);
-    const searchQuery = ref("");
-    const loading = ref(false);
-    const showDropdown = ref(false);
-    const searchInput = ref(null);
+    const { tenants } = useTenantData(props.apiBaseUrl, props.tenantId);
+    const {
+      searchResults,
+      loading: searchLoading,
+      searchQuery,
+      handleSearchInput
+    } = useUserSearch(props.apiBaseUrl, props.tenantId);
     const containerRef = ref(null);
-    const tagInlineContainerRef = ref(null);
+    const tagsContainerRef = ref(null);
+    const sortableContainerRef = ref(null);
+    const collapsedContainerRef = ref(null);
+    const inlineInputRef = ref(null);
+    const lastInputRef = ref(null);
+    const collapsedInputRef = ref(null);
     const isFocused = ref(false);
-    const visibleUsers = ref([]);
-    const hiddenCount = ref(0);
-    const userList = ref([]);
-    let searchTimer = null;
+    const showDropdown = ref(false);
     const activeTagIndex = ref(-1);
-    const measureEl = ref(null);
     const sortableInstance = ref(null);
-    const apiConfig = {
-      baseUrl: `${props.apiBaseUrl}/api/v3/open-web/tenant/users/-/search/`,
-      headers: {
-        "x-bk-tenant-id": props.tenantId
-      }
+    const visibleUsers = ref([]);
+    const hiddenCount = 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);
     };
-    watch(() => props.modelValue, (val) => {
-      selectedUsers.value = val || [];
-    });
-    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;
+      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 = "";
+      nextTick(() => {
+        calculateVisibleUsers();
+      });
+    };
+    const handleContainerClick = () => {
+      activeTagIndex.value = -1;
+      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);
+      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 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) {
+        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;
+    };
+    watch(() => props.selectedUsers, () => {
+      visibleUsers.value = [...props.selectedUsers];
+      if (!isFocused.value) {
+        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 });
+    watch(isFocused, (newVal) => {
+      if (newVal) {
+        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;
     };
-    watch(() => selectedUsers.value.length, () => {
-      calculateVisibleTags();
-    });
     onMounted(() => {
-      window.addEventListener("resize", calculateVisibleTags);
-      calculateVisibleTags();
-      updateInputWidth();
       initSortable();
+      calculateVisibleUsers();
+      window.addEventListener("resize", handleResize);
+      nextTick(() => {
+        calculateVisibleUsers();
+      });
     });
-    const handleBlur = () => {
-      isFocused.value = false;
-      activeTagIndex.value = -1;
-      showDropdown.value = false;
-      searchQuery.value = "";
-      calculateVisibleTags();
+    return (_ctx, _cache) => {
+      return withDirectives((openBlock(), createElementBlock("div", {
+        ref_key: "containerRef",
+        ref: containerRef,
+        class: "multiple-selector"
+      }, [
+        createCommentVNode(" 聚焦状态 - 可编辑模式 "),
+        isFocused.value ? (openBlock(), createElementBlock(
+          "div",
+          {
+            key: 0,
+            ref_key: "tagsContainerRef",
+            ref: tagsContainerRef,
+            class: "tags-container focused",
+            onClick: withModifiers(handleContainerClick, ["stop"])
+          },
+          [
+            createCommentVNode(" 用户标签列表 "),
+            createElementVNode(
+              "div",
+              {
+                ref_key: "sortableContainerRef",
+                ref: sortableContainerRef,
+                class: "tag-list"
+              },
+              [
+                (openBlock(true), createElementBlock(
+                  Fragment,
+                  null,
+                  renderList(__props.selectedUsers, (user, index2) => {
+                    return openBlock(), createElementBlock("div", {
+                      key: user.id,
+                      class: "tag-wrapper",
+                      onClick: withModifiers(($event) => handleTagClick(index2), ["stop"])
+                    }, [
+                      createVNode(UserTag, {
+                        user,
+                        tenants: 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"]),
+                      createCommentVNode(" 在当前激活标签后插入输入框 "),
+                      index2 === activeTagIndex.value && activeTagIndex.value !== __props.selectedUsers.length - 1 ? withDirectives((openBlock(), createElementBlock(
+                        "input",
+                        {
+                          key: 0,
+                          ref_for: true,
+                          ref_key: "inlineInputRef",
+                          ref: inlineInputRef,
+                          class: "search-input inline",
+                          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(searchQuery) ? searchQuery.value = $event : null),
+                          onFocus: handleInputFocus,
+                          onInput: handleInput,
+                          onKeydown: handleKeyDown,
+                          onPaste: handlePaste
+                        },
+                        null,
+                        544
+                        /* NEED_HYDRATION, NEED_PATCH */
+                      )), [
+                        [vModelText, unref(searchQuery)]
+                      ]) : createCommentVNode("v-if", true)
+                    ], 8, _hoisted_1$1);
+                  }),
+                  128
+                  /* KEYED_FRAGMENT */
+                )),
+                createCommentVNode(" 最后一个输入框 "),
+                activeTagIndex.value === -1 || activeTagIndex.value === __props.selectedUsers.length - 1 ? withDirectives((openBlock(), createElementBlock("input", {
+                  key: 0,
+                  ref_key: "lastInputRef",
+                  ref: lastInputRef,
+                  class: "search-input last",
+                  "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => isRef(searchQuery) ? searchQuery.value = $event : null),
+                  placeholder: !__props.selectedUsers.length ? __props.placeholder : "",
+                  onFocus: handleInputFocus,
+                  onInput: handleInput,
+                  onKeydown: handleKeyDown,
+                  onPaste: handlePaste
+                }, null, 40, _hoisted_2)), [
+                  [vModelText, unref(searchQuery)]
+                ]) : createCommentVNode("v-if", true)
+              ],
+              512
+              /* NEED_PATCH */
+            )
+          ],
+          512
+          /* NEED_PATCH */
+        )) : (openBlock(), createElementBlock(
+          Fragment,
+          { key: 1 },
+          [
+            createCommentVNode(" 未聚焦状态 - 只读展示模式 "),
+            createElementVNode(
+              "div",
+              {
+                ref_key: "collapsedContainerRef",
+                ref: collapsedContainerRef,
+                class: "tags-container collapsed",
+                onClick: withModifiers(handleFocus, ["stop"])
+              },
+              [
+                (openBlock(true), createElementBlock(
+                  Fragment,
+                  null,
+                  renderList(visibleUsers.value, (user) => {
+                    return openBlock(), createBlock(UserTag, {
+                      key: user.id,
+                      user,
+                      tenants: 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 */
+                )),
+                createCommentVNode(" 显示折叠标签数量 "),
+                hiddenCount.value > 0 ? (openBlock(), createBlock(unref(Tag), {
+                  key: 0,
+                  class: "tag-more",
+                  onClick: withModifiers(handleFocus, ["stop"])
+                }, {
+                  default: withCtx(() => [
+                    createTextVNode(
+                      " +" + toDisplayString(hiddenCount.value),
+                      1
+                      /* TEXT */
+                    )
+                  ]),
+                  _: 1
+                  /* STABLE */
+                })) : createCommentVNode("v-if", true),
+                createCommentVNode(" 搜索输入框 "),
+                withDirectives(createElementVNode("input", {
+                  ref_key: "collapsedInputRef",
+                  ref: collapsedInputRef,
+                  class: "search-input collapsed",
+                  "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => isRef(searchQuery) ? searchQuery.value = $event : null),
+                  placeholder: !__props.selectedUsers.length ? __props.placeholder : "",
+                  onFocus: handleFocus
+                }, null, 40, _hoisted_3), [
+                  [vModelText, unref(searchQuery)]
+                ])
+              ],
+              512
+              /* NEED_PATCH */
+            )
+          ],
+          2112
+          /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
+        )),
+        createCommentVNode(" 下拉选项列表 "),
+        createVNode(unref(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: withCtx(() => [
+            createVNode(unref(Loading), {
+              class: "dropdown-content",
+              loading: unref(searchLoading),
+              size: "small",
+              mode: "spin"
+            }, {
+              default: withCtx(() => [
+                unref(searchResults).length === 0 ? (openBlock(), createElementBlock("div", _hoisted_4, [
+                  createElementVNode(
+                    "span",
+                    null,
+                    toDisplayString(unref(searchQuery).length > 1 ? "未找到匹配用户" : "请输入关键词搜索"),
+                    1
+                    /* TEXT */
+                  )
+                ])) : (openBlock(true), createElementBlock(
+                  Fragment,
+                  { key: 1 },
+                  renderList(unref(searchResults), (user) => {
+                    return openBlock(), createElementBlock("div", {
+                      class: "user-option",
+                      key: user.id,
+                      onMousedown: withModifiers(($event) => addUser(user), ["prevent"])
+                    }, [
+                      createElementVNode(
+                        "span",
+                        _hoisted_6,
+                        toDisplayString(user.name),
+                        1
+                        /* TEXT */
+                      ),
+                      user.tenantId !== __props.tenantId && user.tenantId && unref(tenants)[user.tenantId] ? (openBlock(), createElementBlock(
+                        "span",
+                        _hoisted_7,
+                        "@" + toDisplayString(unref(tenants)[user.tenantId]),
+                        1
+                        /* TEXT */
+                      )) : createCommentVNode("v-if", true)
+                    ], 40, _hoisted_5);
+                  }),
+                  128
+                  /* KEYED_FRAGMENT */
+                ))
+              ]),
+              _: 1
+              /* STABLE */
+            }, 8, ["loading"])
+          ]),
+          _: 1
+          /* STABLE */
+        }, 8, ["disabled", "is-show", "width"])
+      ])), [
+        [unref(clickoutside), handleClickOutside]
+      ]);
     };
-    const dragOptions = computed(() => ({
-      animation: 150,
-      ghostClass: "ghost-tag",
-      chosenClass: "chosen-tag",
-      dragClass: "drag-tag",
-      handle: ".tag-item",
-      // 根据draggable属性决定是否启用排序
-      sort: props.draggable
-    }));
-    const initSortable = () => {
-      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__ */ 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 = ref([]);
+    const selectedUser = ref(props.multiple ? "" : props.modelValue);
+    const selectedUserIds = 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;
+      }
     };
-    watch([
-      () => selectedUsers.value,
-      () => props.draggable,
-      () => isFocused.value
-    ], () => {
-      initSortable();
-    }, { deep: true });
-    const handleDragChange = () => {
-      emit("change", selectedUsers.value);
+    const handleUpdateUser = (user) => {
+      emit("change", user);
     };
-    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);
     };
+    watch(selectedUser, (newVal) => {
+      if (!props.multiple) {
+        emit("update:modelValue", newVal);
+      }
+    });
+    onBeforeMount(() => {
+      initSelectedUsers();
+    });
     return (_ctx, _cache) => {
-      return withDirectives((openBlock(), createElementBlock("section", null, [
+      return openBlock(), createElementBlock("section", _hoisted_1, [
         createCommentVNode(" 单选模式 "),
-        !__props.multiple ? (openBlock(), createBlock(_sfc_main$1, {
+        !_ctx.multiple ? (openBlock(), 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"])) : (openBlock(), 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: unref(tenants),
+          onChange: handleUpdateUser
+        }, null, 8, ["modelValue", "api-base-url", "placeholder", "tenant-id", "tenants"])) : (openBlock(), createElementBlock(
           Fragment,
           { key: 1 },
           [
-            createCommentVNode(" 使用 popover 包裹内容 "),
-            createVNode(unref(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: withCtx(() => [
-                withDirectives((openBlock(), createElementBlock("div", _hoisted_1, [
-                  userList.value.length === 0 ? (openBlock(), createElementBlock("div", _hoisted_2, _hoisted_4)) : (openBlock(true), createElementBlock(
-                    Fragment,
-                    { key: 1 },
-                    renderList(userList.value, (item) => {
-                      return openBlock(), createElementBlock("div", {
-                        key: item.id,
-                        class: "user-option",
-                        onMousedown: withModifiers(($event) => addUser(item), ["prevent"])
-                      }, [
-                        item.avatar ? (openBlock(), createElementBlock("img", {
-                          key: 0,
-                          class: "user-avatar",
-                          src: item.avatar,
-                          alt: "用户头像"
-                        }, null, 8, _hoisted_6)) : (openBlock(), createElementBlock(
-                          "span",
-                          _hoisted_7,
-                          toDisplayString(getAvatarText(item.name)),
-                          1
-                          /* TEXT */
-                        )),
-                        createElementVNode(
-                          "span",
-                          _hoisted_8,
-                          toDisplayString(item.name),
-                          1
-                          /* TEXT */
-                        )
-                      ], 40, _hoisted_5);
-                    }),
-                    128
-                    /* KEYED_FRAGMENT */
-                  ))
-                ])), [
-                  [unref(vLoading), { mode: "spin", size: "small", loading: loading.value }]
-                ])
-              ]),
-              default: withCtx(() => [
-                createElementVNode(
-                  "div",
-                  {
-                    ref_key: "containerRef",
-                    ref: containerRef,
-                    class: normalizeClass(["tag-input-container", { "is-focused": isFocused.value, "is-single": !__props.multiple }])
-                  },
-                  [
-                    createCommentVNode(" 多选模式 "),
-                    createCommentVNode(" 聚焦状态 - 使用单一draggable "),
-                    isFocused.value ? (openBlock(), createElementBlock(
-                      Fragment,
-                      { key: 0 },
-                      [
-                        createCommentVNode(" 多选模式 "),
-                        createElementVNode(
-                          "div",
-                          _hoisted_9,
-                          [
-                            (openBlock(true), createElementBlock(
-                              Fragment,
-                              null,
-                              renderList(selectedUsers.value, (element, index2) => {
-                                return openBlock(), createElementBlock("div", {
-                                  key: element.id,
-                                  class: "tag-wrapper",
-                                  onClick: withModifiers(($event) => handleTagClick(index2), ["stop"])
-                                }, [
-                                  createVNode(unref(Tag), {
-                                    class: normalizeClass(["tag-item", { "draggable": __props.draggable, "active": index2 === activeTagIndex.value }]),
-                                    size: "small",
-                                    closable: "",
-                                    onClose: ($event) => removeUser(element),
-                                    onClick: withModifiers(($event) => handleTagClick(index2), ["stop"])
-                                  }, {
-                                    default: withCtx(() => [
-                                      createElementVNode("div", _hoisted_11, [
-                                        createElementVNode(
-                                          "span",
-                                          _hoisted_12,
-                                          toDisplayString(element.name),
-                                          1
-                                          /* TEXT */
-                                        )
-                                      ])
-                                    ]),
-                                    _: 2
-                                    /* DYNAMIC */
-                                  }, 1032, ["class", "onClose", "onClick"]),
-                                  createCommentVNode(" 在当前激活的标签后插入输入框 "),
-                                  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 ? withDirectives((openBlock(), 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)), [
-                                    [vModelText, searchQuery.value]
-                                  ]) : createCommentVNode("v-if", true)
-                                ], 8, _hoisted_10);
-                              }),
-                              128
-                              /* KEYED_FRAGMENT */
-                            ))
-                          ],
-                          512
-                          /* NEED_PATCH */
-                        ),
-                        createCommentVNode(" 如果激活索引是最后一个或没有激活的标签，将输入框放在最后 "),
-                        activeTagIndex.value === -1 || activeTagIndex.value === selectedUsers.value.length - 1 ? withDirectives((openBlock(), 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)), [
-                          [vModelText, searchQuery.value]
-                        ]) : createCommentVNode("v-if", true)
-                      ],
-                      64
-                      /* STABLE_FRAGMENT */
-                    )) : (openBlock(), createElementBlock(
-                      Fragment,
-                      { key: 1 },
-                      [
-                        createCommentVNode(" 失焦状态 "),
-                        createCommentVNode(" 多选模式 "),
-                        createElementVNode(
-                          "div",
-                          {
-                            ref_key: "tagInlineContainerRef",
-                            ref: tagInlineContainerRef,
-                            class: "tag-inline-container",
-                            onClick: withModifiers(handleFocus, ["stop"])
-                          },
-                          [
-                            (openBlock(true), createElementBlock(
-                              Fragment,
-                              null,
-                              renderList(visibleUsers.value, (user) => {
-                                return openBlock(), createBlock(unref(Tag), {
-                                  key: user.id,
-                                  class: "tag-item",
-                                  closable: "",
-                                  onClose: ($event) => removeUser(user),
-                                  onClick: withModifiers(handleFocus, ["stop"])
-                                }, {
-                                  default: withCtx(() => [
-                                    createElementVNode("div", _hoisted_15, [
-                                      createElementVNode(
-                                        "span",
-                                        _hoisted_16,
-                                        toDisplayString(user.name),
-                                        1
-                                        /* TEXT */
-                                      )
-                                    ])
-                                  ]),
-                                  _: 2
-                                  /* DYNAMIC */
-                                }, 1032, ["onClose"]);
-                              }),
-                              128
-                              /* KEYED_FRAGMENT */
-                            )),
-                            createCommentVNode(" 显示折叠标签数量 "),
-                            hiddenCount.value > 0 ? (openBlock(), createBlock(unref(Tag), {
-                              key: 0,
-                              class: "tag-item tag-more",
-                              onClick: withModifiers(handleFocus, ["stop"])
-                            }, {
-                              default: withCtx(() => [
-                                createTextVNode(
-                                  " +" + toDisplayString(hiddenCount.value),
-                                  1
-                                  /* TEXT */
-                                )
-                              ]),
-                              _: 1
-                              /* STABLE */
-                            })) : createCommentVNode("v-if", true),
-                            createCommentVNode(" 修改这里的输入框样式 "),
-                            withDirectives(createElementVNode("input", {
-                              ref_key: "searchInput",
-                              ref: searchInput,
-                              "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => searchQuery.value = $event),
-                              placeholder: selectedUsers.value.length ? "" : __props.placeholder,
-                              class: normalizeClass(["tag-input full-width", { "placeholder-style": !selectedUsers.value.length }]),
-                              onFocus: handleFocus
-                            }, null, 42, _hoisted_17), [
-                              [vModelText, searchQuery.value]
-                            ])
-                          ],
-                          512
-                          /* NEED_PATCH */
-                        )
-                      ],
-                      64
-                      /* STABLE_FRAGMENT */
-                    ))
-                  ],
-                  2
-                  /* CLASS */
-                )
-              ]),
-              _: 1
-              /* STABLE */
-            }, 8, ["is-show", "width", "disabled"])
+            createCommentVNode(" 多选模式 "),
+            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 */
         ))
-      ])), [
-        [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"]]);
 export {
   BkUserSelector,
   BkUserSelector as default