@blueking/bk-user-selector 0.0.6 → 0.0.8

package/vue3/index.umd.min.js

@@ -3,7 +3,7 @@
 })(this, function(exports2, vue, bkuiVue) {
   "use strict";
   var __vite_style__ = document.createElement("style");
-  __vite_style__.textContent = ".user-tag[data-v-203c36cb] {\n  margin-right: 4px;\n}\n.user-tag.draggable[data-v-203c36cb] {\n  cursor: move;\n}\n.user-tag.active[data-v-203c36cb] {\n  background-color: #e1ecff;\n  border-color: #3a84ff;\n}\n.user-tag .tag-content .user-name[data-v-203c36cb] {\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-203c36cb] {\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-50540b99] {\n  position: relative;\n  width: 100%;\n}\n.multiple-selector .tags-container[data-v-50540b99] {\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-50540b99] {\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-50540b99] {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n}\n.multiple-selector .tag-list[data-v-50540b99] {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n}\n.multiple-selector .tag-wrapper[data-v-50540b99] {\n  display: inline-flex;\n  align-items: center;\n  max-width: 100%;\n}\n.multiple-selector .search-input[data-v-50540b99] {\n  outline: none;\n  border: none;\n  height: 28px;\n  min-width: 10px;\n  background: transparent;\n}\n.multiple-selector .search-input[data-v-50540b99]::placeholder {\n  color: #c4c6cc;\n}\n.multiple-selector .search-input.inline[data-v-50540b99] {\n  min-width: 10px;\n}\n.multiple-selector .search-input.last[data-v-50540b99], .multiple-selector .search-input.collapsed[data-v-50540b99] {\n  flex: 1;\n  min-width: 60px;\n}\n.dropdown-content[data-v-50540b99] {\n  min-height: 40px;\n  max-height: 300px;\n  overflow-y: auto;\n  padding: 5px 0;\n}\n.dropdown-content .no-data[data-v-50540b99] {\n  padding: 10px;\n  text-align: center;\n  color: #979ba5;\n}\n.dropdown-content .user-option[data-v-50540b99] {\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-50540b99]:hover {\n  background-color: #f5f7fa;\n}\n.dropdown-content .user-option .tenant-name[data-v-50540b99] {\n  color: #f59500;\n  margin-left: 4px;\n  padding: 0 4px;\n}\n.me-tag[data-v-50540b99] {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  background-color: #e1ecff;\n  color: #4d4f56;\n  border-radius: 50%;\n  padding: 0 8px;\n  height: 24px;\n  width: 24px;\n  cursor: pointer;\n  font-size: 12px;\n  position: absolute;\n  right: 8px;\n  top: 50%;\n  transform: translateY(-50%);\n  z-index: 1;\n}\n.me-tag[data-v-50540b99]:hover {\n  background-color: #cddffe;\n  color: #3a84ff;\n}\n.me-tag.disabled[data-v-50540b99] {\n  background-color: #f0f1f5;\n  color: #c4c6cc;\n  cursor: not-allowed;\n}.single-selector[data-v-308925e9] {\n  position: relative;\n  width: 100%;\n}\n.input-container[data-v-308925e9] {\n  position: relative;\n  display: flex;\n  align-items: center;\n  min-height: 32px;\n  border: 1px solid #dcdee5;\n  border-radius: 2px;\n  padding: 0 8px;\n  background-color: #fff;\n}\n.input-container[data-v-308925e9]:focus-within {\n  border-color: #3a84ff;\n  box-shadow: 0 0 0 2px rgba(58, 132, 255, 0.1);\n}\n.search-input[data-v-308925e9] {\n  flex: 1;\n  outline: none;\n  border: none;\n  height: 30px;\n  background: transparent;\n}\n.search-input[data-v-308925e9]::placeholder {\n  color: #c4c6cc;\n}\n.selected-user[data-v-308925e9] {\n  display: inline-flex;\n  align-items: center;\n  background-color: #f0f1f5;\n  border-radius: 2px;\n  padding: 0 8px;\n  margin-right: 8px;\n  height: 24px;\n  max-width: calc(100% - 32px);\n}\n.selected-user .tenant-name[data-v-308925e9] {\n  color: #f59500;\n  margin-left: 4px;\n}\n.selected-user .close-icon[data-v-308925e9] {\n  margin-left: 4px;\n  cursor: pointer;\n  font-style: normal;\n}\n.dropdown-content[data-v-308925e9] {\n  min-height: 40px;\n  max-height: 300px;\n  overflow-y: auto;\n  padding: 5px 0;\n}\n.dropdown-content .no-data[data-v-308925e9] {\n  padding: 10px;\n  text-align: center;\n  color: #979ba5;\n}\n.dropdown-content .user-option[data-v-308925e9] {\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-308925e9]:hover {\n  background-color: #f5f7fa;\n}\n.dropdown-content .user-option .tenant-name[data-v-308925e9] {\n  color: #f59500;\n  margin-left: 4px;\n  padding: 0 4px;\n}\n.me-tag[data-v-308925e9] {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  background-color: #e1ecff;\n  color: #4d4f56;\n  border-radius: 50%;\n  padding: 0 8px;\n  height: 24px;\n  width: 24px;\n  cursor: pointer;\n  font-size: 12px;\n  position: absolute;\n  right: 8px;\n  top: 50%;\n  transform: translateY(-50%);\n  z-index: 1;\n}\n.me-tag[data-v-308925e9]:hover {\n  background-color: #cddffe;\n  color: #3a84ff;\n}\n.me-tag.disabled[data-v-308925e9] {\n  background-color: #f0f1f5;\n  color: #c4c6cc;\n  cursor: not-allowed;\n}.bk-user-selector[data-v-fe084750] {\n  width: 100%;\n  position: relative;\n  font-size: 12px;\n}/*$vite$:1*/";
+  __vite_style__.textContent = ".me-tag[data-v-887b7c44] {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  background-color: #e1ecff;\n  color: #4d4f56;\n  border-radius: 50%;\n  padding: 0 8px;\n  height: 24px;\n  width: 24px;\n  cursor: pointer;\n  font-size: 12px;\n  position: absolute;\n  right: 8px;\n  top: 50%;\n  transform: translateY(-50%);\n  z-index: 1;\n}\n.me-tag[data-v-887b7c44]:hover {\n  background-color: #cddffe;\n  color: #3a84ff;\n}\n.me-tag.disabled[data-v-887b7c44] {\n  background-color: #f0f1f5;\n  color: #c4c6cc;\n  cursor: not-allowed;\n}.dropdown-content[data-v-c68dfcac] {\n  min-height: 40px;\n  max-height: 300px;\n  overflow-y: auto;\n  padding: 5px 0;\n}\n.dropdown-content .no-data[data-v-c68dfcac] {\n  padding: 10px;\n  text-align: center;\n  color: #979ba5;\n}\n.dropdown-content .user-group .group-header[data-v-c68dfcac] {\n  padding: 8px 12px;\n  color: #979ba5;\n  display: flex;\n  align-items: center;\n}\n.dropdown-content .user-group .group-header .group-count[data-v-c68dfcac] {\n  margin-left: 4px;\n}\n.dropdown-content .user-option[data-v-c68dfcac] {\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-c68dfcac]:hover {\n  background-color: #f5f7fa;\n}\n.dropdown-content .user-option .tenant-name[data-v-c68dfcac] {\n  color: #f59500;\n  margin-left: 4px;\n  padding: 0 4px;\n}.bk-user-selector-popover.bk-popover.bk-pop2-content {\n  padding: 0;\n}.user-tag[data-v-203c36cb] {\n  margin-right: 4px;\n}\n.user-tag.draggable[data-v-203c36cb] {\n  cursor: move;\n}\n.user-tag.active[data-v-203c36cb] {\n  background-color: #e1ecff;\n  border-color: #3a84ff;\n}\n.user-tag .tag-content .user-name[data-v-203c36cb] {\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-203c36cb] {\n  color: #f59500;\n  margin-left: 3px;\n  white-space: nowrap;\n  padding: 0 3px;\n  border-radius: 2px;\n}.multiple-selector[data-v-a09f11c3] {\n  position: relative;\n  width: 100%;\n}\n.multiple-selector .tags-container[data-v-a09f11c3] {\n  min-height: 32px;\n  border: 1px solid #dcdee5;\n  border-radius: 2px;\n  padding: 1px 10px 1px 8px;\n  transition: all 0.2s ease;\n  background-color: #fff;\n}\n.multiple-selector .tags-container.focused[data-v-a09f11c3] {\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-a09f11c3] {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n}\n.multiple-selector .tag-list[data-v-a09f11c3] {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n}\n.multiple-selector .tag-wrapper[data-v-a09f11c3] {\n  display: inline-flex;\n  align-items: center;\n  max-width: 100%;\n}\n.multiple-selector .search-input[data-v-a09f11c3] {\n  outline: none;\n  border: none;\n  height: 28px;\n  min-width: 10px;\n  background: transparent;\n}\n.multiple-selector .search-input[data-v-a09f11c3]::placeholder {\n  color: #c4c6cc;\n}\n.multiple-selector .search-input.inline[data-v-a09f11c3] {\n  min-width: 10px;\n}\n.multiple-selector .search-input.last[data-v-a09f11c3], .multiple-selector .search-input.collapsed[data-v-a09f11c3] {\n  flex: 1;\n  min-width: 60px;\n}.single-selector[data-v-8b8dd0fd] {\n  position: relative;\n  width: 100%;\n}\n.input-container[data-v-8b8dd0fd] {\n  position: relative;\n  display: flex;\n  align-items: center;\n  min-height: 32px;\n  border: 1px solid #dcdee5;\n  border-radius: 2px;\n  padding: 0 8px;\n  background-color: #fff;\n}\n.input-container[data-v-8b8dd0fd]:focus-within {\n  border-color: #3a84ff;\n  box-shadow: 0 0 0 2px rgba(58, 132, 255, 0.1);\n}\n.search-input[data-v-8b8dd0fd] {\n  flex: 1;\n  outline: none;\n  border: none;\n  height: 30px;\n  background: transparent;\n}\n.search-input[data-v-8b8dd0fd]::placeholder {\n  color: #c4c6cc;\n}\n.selected-user[data-v-8b8dd0fd] {\n  display: inline-flex;\n  align-items: center;\n  background-color: #f0f1f5;\n  border-radius: 2px;\n  padding: 0 8px;\n  margin-right: 8px;\n  height: 24px;\n  max-width: calc(100% - 32px);\n}\n.selected-user .tenant-name[data-v-8b8dd0fd] {\n  color: #f59500;\n  margin-left: 4px;\n}\n.selected-user .close-icon[data-v-8b8dd0fd] {\n  margin-left: 4px;\n  cursor: pointer;\n  font-style: normal;\n}.bk-user-selector[data-v-bc7b4ccd] {\n  width: 100%;\n  position: relative;\n  font-size: 12px;\n}/*$vite$:1*/";
   document.head.appendChild(__vite_style__);
   const getTenants = async (apiBaseUrl, tenantId) => {
     if (!apiBaseUrl || !tenantId) {
@@ -2965,6 +2965,270 @@
       clearSearch
     };
   };
+  const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
+    ...{
+      name: "MeTag"
+    },
+    __name: "me-tag",
+    props: {
+      /**
+       * 当前用户ID
+       */
+      currentUserId: {
+        type: String,
+        default: ""
+      },
+      /**
+       * 是否禁用
+       */
+      isDisabled: {
+        type: Boolean,
+        default: false
+      }
+    },
+    emits: ["click"],
+    setup(__props, { emit: __emit }) {
+      const props = __props;
+      const emit = __emit;
+      const handleClick = () => {
+        if (props.isDisabled) return;
+        emit("click");
+      };
+      return (_ctx, _cache) => {
+        return __props.currentUserId ? (vue.openBlock(), vue.createElementBlock(
+          "div",
+          {
+            key: 0,
+            class: vue.normalizeClass(["me-tag", { disabled: __props.isDisabled }]),
+            onClick: vue.withModifiers(handleClick, ["stop"])
+          },
+          " 我 ",
+          2
+          /* CLASS */
+        )) : vue.createCommentVNode("v-if", true);
+      };
+    }
+  });
+  const _export_sfc = (sfc, props) => {
+    const target = sfc.__vccOpts || sfc;
+    for (const [key, val] of props) {
+      target[key] = val;
+    }
+    return target;
+  };
+  const MeTag = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-887b7c44"]]);
+  const _hoisted_1$4 = {
+    key: 0,
+    class: "no-data"
+  };
+  const _hoisted_2$3 = { class: "group-name" };
+  const _hoisted_3$3 = { class: "group-count" };
+  const _hoisted_4$1 = ["onMousedown"];
+  const _hoisted_5 = {
+    key: 0,
+    class: "tenant-name"
+  };
+  const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
+    ...{
+      name: "SelectionPopover"
+    },
+    __name: "selection-popover",
+    props: {
+      /**
+       * 是否显示下拉菜单
+       */
+      isShow: {
+        type: Boolean,
+        default: false
+      },
+      /**
+       * 容器宽度
+       */
+      containerWidth: {
+        type: [Number, String],
+        default: "auto"
+      },
+      /**
+       * 是否加载中
+       */
+      loading: {
+        type: Boolean,
+        default: false
+      },
+      /**
+       * 搜索结果选项
+       */
+      options: {
+        type: Array,
+        default: () => []
+      },
+      /**
+       * 搜索关键词
+       */
+      searchQuery: {
+        type: String,
+        default: ""
+      },
+      /**
+       * 当前租户ID
+       */
+      tenantId: {
+        type: String,
+        default: ""
+      },
+      /**
+       * 租户信息映射
+       */
+      tenants: {
+        type: Object,
+        default: () => ({})
+      },
+      /**
+       * 用户组
+       */
+      userGroup: {
+        type: Array,
+        default: () => []
+      },
+      /**
+       * 用户组名称
+       */
+      userGroupName: {
+        type: String,
+        default: "用户群组"
+      }
+    },
+    emits: ["select-user"],
+    setup(__props, { emit: __emit }) {
+      const props = __props;
+      const emit = __emit;
+      const groupedUsers = vue.computed(() => {
+        const groups = {};
+        console.log("props.options", props.options);
+        if (Array.isArray(props.userGroup) && props.userGroup.length > 0) {
+          groups[props.userGroupName] = props.userGroup.map((group) => ({
+            id: group.id,
+            name: group.name,
+            tenantId: ""
+          }));
+        }
+        props.options.forEach((user) => {
+          const groupName = user.data_source_type === "real" ? "用户" : "虚拟账号";
+          if (!groups[groupName]) {
+            groups[groupName] = [];
+          }
+          groups[groupName].push(user);
+        });
+        return groups;
+      });
+      const selectUser = (user) => {
+        emit("select-user", user);
+      };
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createBlock(vue.unref(bkuiVue.Popover), {
+          "ext-cls": "bk-user-selector-popover",
+          arrow: false,
+          "is-show": __props.isShow,
+          width: __props.containerWidth,
+          placement: "bottom-start",
+          theme: "light",
+          trigger: "manual"
+        }, {
+          content: vue.withCtx(() => [
+            vue.createVNode(vue.unref(bkuiVue.Loading), {
+              class: "dropdown-content",
+              loading: __props.loading,
+              size: "mini",
+              mode: "spin"
+            }, {
+              default: vue.withCtx(() => [
+                __props.options.length === 0 && __props.userGroup.length === 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$4, [
+                  vue.createElementVNode(
+                    "span",
+                    null,
+                    vue.toDisplayString(__props.searchQuery.length > 1 ? "未找到匹配用户" : "请输入关键词搜索"),
+                    1
+                    /* TEXT */
+                  )
+                ])) : (vue.openBlock(true), vue.createElementBlock(
+                  vue.Fragment,
+                  { key: 1 },
+                  vue.renderList(groupedUsers.value, (group, groupName) => {
+                    return vue.openBlock(), vue.createElementBlock("div", {
+                      class: "user-group",
+                      key: groupName
+                    }, [
+                      vue.createElementVNode(
+                        "div",
+                        {
+                          class: "group-header",
+                          onMousedown: _cache[0] || (_cache[0] = vue.withModifiers(() => {
+                          }, ["prevent"]))
+                        },
+                        [
+                          vue.createElementVNode(
+                            "span",
+                            _hoisted_2$3,
+                            vue.toDisplayString(groupName),
+                            1
+                            /* TEXT */
+                          ),
+                          vue.createElementVNode(
+                            "span",
+                            _hoisted_3$3,
+                            "(" + vue.toDisplayString(group.length) + ")",
+                            1
+                            /* TEXT */
+                          )
+                        ],
+                        32
+                        /* NEED_HYDRATION */
+                      ),
+                      (vue.openBlock(true), vue.createElementBlock(
+                        vue.Fragment,
+                        null,
+                        vue.renderList(group, (user) => {
+                          return vue.openBlock(), vue.createElementBlock("div", {
+                            class: "user-option",
+                            key: user.id,
+                            onMousedown: vue.withModifiers(($event) => selectUser(user), ["prevent"])
+                          }, [
+                            vue.createElementVNode(
+                              "span",
+                              null,
+                              vue.toDisplayString(user.name),
+                              1
+                              /* TEXT */
+                            ),
+                            user.tenantId !== __props.tenantId && user.tenantId && __props.tenants[user.tenantId] ? (vue.openBlock(), vue.createElementBlock(
+                              "span",
+                              _hoisted_5,
+                              "@" + vue.toDisplayString(__props.tenants[user.tenantId]),
+                              1
+                              /* TEXT */
+                            )) : vue.createCommentVNode("v-if", true)
+                          ], 40, _hoisted_4$1);
+                        }),
+                        128
+                        /* KEYED_FRAGMENT */
+                      ))
+                    ]);
+                  }),
+                  128
+                  /* KEYED_FRAGMENT */
+                ))
+              ]),
+              _: 1
+              /* STABLE */
+            }, 8, ["loading"])
+          ]),
+          _: 1
+          /* STABLE */
+        }, 8, ["is-show", "width"]);
+      };
+    }
+  });
+  const SelectionPopover = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-c68dfcac"]]);
   const _hoisted_1$3 = { class: "tag-content" };
   const _hoisted_2$2 = { class: "user-name" };
   const _hoisted_3$2 = {
@@ -3024,26 +3288,10 @@
       };
     }
   });
-  const _export_sfc = (sfc, props) => {
-    const target = sfc.__vccOpts || sfc;
-    for (const [key, val] of props) {
-      target[key] = val;
-    }
-    return target;
-  };
   const UserTag = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-203c36cb"]]);
   const _hoisted_1$2 = ["onClick"];
   const _hoisted_2$1 = ["placeholder"];
   const _hoisted_3$1 = ["placeholder"];
-  const _hoisted_4$1 = {
-    key: 0,
-    class: "no-data"
-  };
-  const _hoisted_5$1 = ["onMousedown"];
-  const _hoisted_6$1 = {
-    key: 0,
-    class: "tenant-name"
-  };
   const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "BkUserSelectorMultiple"
@@ -3112,6 +3360,20 @@
       exactSearchKey: {
         type: String,
         default: "bk_username"
+      },
+      /**
+       * 用户组
+       */
+      userGroup: {
+        type: Array,
+        default: () => []
+      },
+      /**
+       * 用户组名称
+       */
+      userGroupName: {
+        type: String,
+        default: "用户群组"
       }
     },
     emits: ["update:selectedUsers", "add-user", "remove-user"],
@@ -3137,6 +3399,9 @@
       const sortableInstance = vue.ref(null);
       const visibleUsers = vue.ref([]);
       const hiddenCount = vue.ref(0);
+      const options = vue.computed(() => {
+        return searchResults.value.filter((user) => !props.selectedUsers.some((selectedUser) => selectedUser.id === user.id));
+      });
       const initSortable = () => {
         if (!props.draggable || !sortableContainerRef.value) return;
         if (sortableInstance.value) {
@@ -3174,7 +3439,11 @@
       };
       const handleFocus = () => {
         isFocused.value = true;
-        showDropdown.value = false;
+        if (props.userGroup.length > 0) {
+          showDropdown.value = true;
+        } else {
+          showDropdown.value = false;
+        }
         activeTagIndex.value = -1;
         vue.nextTick(() => {
           if (lastInputRef.value) {
@@ -3425,17 +3694,11 @@
                     [vue.vModelText, vue.unref(searchQuery)]
                   ]) : vue.createCommentVNode("v-if", true),
                   vue.createCommentVNode(' "我"标签 '),
-                  __props.currentUserId ? (vue.openBlock(), vue.createElementBlock(
-                    "div",
-                    {
-                      key: 1,
-                      class: vue.normalizeClass(["me-tag", { disabled: __props.currentUserId && __props.selectedUsers.some((user) => user.id === __props.currentUserId) }]),
-                      onClick: _cache[2] || (_cache[2] = vue.withModifiers(($event) => addCurrentUser(), ["stop"]))
-                    },
-                    " 我 ",
-                    2
-                    /* CLASS */
-                  )) : vue.createCommentVNode("v-if", true)
+                  vue.createVNode(MeTag, {
+                    "current-user-id": __props.currentUserId,
+                    "is-disabled": !!__props.currentUserId && __props.selectedUsers.some((user) => user.id === __props.currentUserId),
+                    onClick: addCurrentUser
+                  }, null, 8, ["current-user-id", "is-disabled"])
                 ],
                 512
                 /* NEED_PATCH */
@@ -3475,7 +3738,7 @@
                     /* KEYED_FRAGMENT */
                   )),
                   vue.createCommentVNode(" 显示折叠标签数量 "),
-                  hiddenCount.value > 0 ? (vue.openBlock(), vue.createBlock(vue.unref(bkuiVue.Tag), {
+                  hiddenCount.value > 0 ? vue.withDirectives((vue.openBlock(), vue.createBlock(vue.unref(bkuiVue.Tag), {
                     key: 0,
                     onClick: vue.withModifiers(handleFocus, ["stop"])
                   }, {
@@ -3488,30 +3751,29 @@
                     ]),
                     _: 1
                     /* STABLE */
-                  })) : vue.createCommentVNode("v-if", true),
+                  })), [
+                    [vue.unref(bkuiVue.bkTooltips), {
+                      content: __props.selectedUsers.slice(visibleUsers.value.length).map((user) => user.display_name).join(","),
+                      placement: "top"
+                    }]
+                  ]) : vue.createCommentVNode("v-if", true),
                   vue.createCommentVNode(" 搜索输入框 "),
                   vue.withDirectives(vue.createElementVNode("input", {
                     ref_key: "collapsedInputRef",
                     ref: collapsedInputRef,
                     class: "search-input collapsed",
-                    "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => vue.isRef(searchQuery) ? searchQuery.value = $event : null),
+                    "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$1), [
                     [vue.vModelText, vue.unref(searchQuery)]
                   ]),
                   vue.createCommentVNode(' 未聚焦状态下的"我"标签 '),
-                  __props.currentUserId ? (vue.openBlock(), vue.createElementBlock(
-                    "div",
-                    {
-                      key: 1,
-                      class: vue.normalizeClass(["me-tag", { disabled: __props.currentUserId && __props.selectedUsers.some((user) => user[props.exactSearchKey] === __props.currentUserId) }]),
-                      onClick: _cache[4] || (_cache[4] = vue.withModifiers(($event) => addCurrentUser(), ["stop"]))
-                    },
-                    " 我 ",
-                    2
-                    /* CLASS */
-                  )) : vue.createCommentVNode("v-if", true)
+                  vue.createVNode(MeTag, {
+                    "current-user-id": __props.currentUserId,
+                    "is-disabled": !!__props.currentUserId && __props.selectedUsers.some((user) => user[props.exactSearchKey] === __props.currentUserId),
+                    onClick: addCurrentUser
+                  }, null, 8, ["current-user-id", "is-disabled"])
                 ],
                 512
                 /* NEED_PATCH */
@@ -3521,75 +3783,26 @@
             /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
           )),
           vue.createCommentVNode(" 下拉选项列表 "),
-          vue.createVNode(vue.unref(bkuiVue.Popover), {
-            "ext-cls": "bk-user-selector-popover",
-            arrow: false,
+          vue.createVNode(SelectionPopover, {
+            "container-width": containerRef.value ? containerRef.value.offsetWidth : "auto",
             "is-show": showDropdown.value,
-            width: containerRef.value ? containerRef.value.offsetWidth : "auto",
-            placement: "bottom-start",
-            theme: "light",
-            trigger: "manual"
-          }, {
-            content: vue.withCtx(() => [
-              vue.createVNode(vue.unref(bkuiVue.Loading), {
-                class: "dropdown-content",
-                loading: vue.unref(searchLoading),
-                size: "mini",
-                mode: "spin"
-              }, {
-                default: vue.withCtx(() => [
-                  vue.unref(searchResults).length === 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$1, [
-                    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",
-                          null,
-                          vue.toDisplayString(user.name),
-                          1
-                          /* TEXT */
-                        ),
-                        user.tenantId !== __props.tenantId && user.tenantId && __props.tenants[user.tenantId] ? (vue.openBlock(), vue.createElementBlock(
-                          "span",
-                          _hoisted_6$1,
-                          "@" + vue.toDisplayString(__props.tenants[user.tenantId]),
-                          1
-                          /* TEXT */
-                        )) : vue.createCommentVNode("v-if", true)
-                      ], 40, _hoisted_5$1);
-                    }),
-                    128
-                    /* KEYED_FRAGMENT */
-                  ))
-                ]),
-                _: 1
-                /* STABLE */
-              }, 8, ["loading"])
-            ]),
-            _: 1
-            /* STABLE */
-          }, 8, ["is-show", "width"])
+            loading: vue.unref(searchLoading),
+            options: options.value,
+            "search-query": vue.unref(searchQuery),
+            "tenant-id": __props.tenantId,
+            tenants: __props.tenants,
+            "user-group": __props.userGroup,
+            "user-group-name": __props.userGroupName,
+            onSelectUser: addUser
+          }, null, 8, ["container-width", "is-show", "loading", "options", "search-query", "tenant-id", "tenants", "user-group", "user-group-name"])
         ])), [
           [vue.unref(bkuiVue.clickoutside), handleClickOutside]
         ]);
       };
     }
   });
-  const MultipleSelector = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-50540b99"]]);
-  const _withScopeId = (n) => (vue.pushScopeId("data-v-308925e9"), n = n(), vue.popScopeId(), n);
+  const MultipleSelector = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-a09f11c3"]]);
+  const _withScopeId = (n) => (vue.pushScopeId("data-v-8b8dd0fd"), n = n(), vue.popScopeId(), n);
   const _hoisted_1$1 = { class: "input-container" };
   const _hoisted_2 = {
     key: 0,
@@ -3603,15 +3816,6 @@
     /* HOISTED */
   ));
   const _hoisted_4 = ["placeholder"];
-  const _hoisted_5 = {
-    key: 0,
-    class: "no-data"
-  };
-  const _hoisted_6 = ["onMousedown"];
-  const _hoisted_7 = {
-    key: 0,
-    class: "tenant-name"
-  };
   const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "BkUserSelectorSingle"
@@ -3619,12 +3823,14 @@
     __name: "single-selector",
     props: {
       modelValue: {},
-      placeholder: {},
+      tenants: {},
       apiBaseUrl: {},
       tenantId: {},
-      tenants: {},
+      placeholder: {},
       currentUserId: {},
-      exactSearchKey: {}
+      exactSearchKey: {},
+      userGroup: {},
+      userGroupName: {}
     },
     emits: ["update:modelValue", "change"],
     setup(__props, { emit: __emit }) {
@@ -3638,7 +3844,15 @@
       const searchQuery = vue.ref("");
       const showDropdown = vue.ref(false);
       const selectedUserInfo = vue.computed(() => {
-        return options.value.find((user) => user.id === selectedUser.value);
+        const userGroup = (props.userGroup || []).map((group) => ({
+          id: group.id,
+          name: group.name,
+          tenantId: ""
+        }));
+        const list = [...options.value, ...userGroup];
+        const selectedUserInfo2 = list.find((user) => user.id === selectedUser.value);
+        emit("change", selectedUserInfo2 || null);
+        return selectedUserInfo2;
       });
       vue.onBeforeMount(async () => {
         if (typeof props.modelValue === "string" && props.modelValue) {
@@ -3662,7 +3876,7 @@
           const formattedResults = formatUsers(result);
           if (formattedResults.length > 0) {
             options.value = formattedResults;
-            selectUser(formattedResults[0]);
+            addUser(formattedResults[0]);
           }
         } catch (error) {
           console.error("获取当前用户信息失败:", error);
@@ -3676,7 +3890,7 @@
         isLoading.value = true;
         try {
           const result = await searchUsers(props.apiBaseUrl, props.tenantId, keyword);
-          options.value = formatUsers(result);
+          options.value = formatUsers(result).filter((user) => !selectedUser.value || user.id !== selectedUser.value);
           console.log("options.value", options.value);
         } catch (error) {
           console.error("获取用户列表失败:", error);
@@ -3685,7 +3899,8 @@
           isLoading.value = false;
         }
       };
-      const selectUser = (user) => {
+      const addUser = (user) => {
+        console.log("addUser", user);
         selectedUser.value = user.id;
         searchQuery.value = "";
         showDropdown.value = false;
@@ -3695,7 +3910,7 @@
         searchQuery.value = "";
       };
       const handleInputFocus = () => {
-        if (searchQuery.value.length >= 2) {
+        if (searchQuery.value.length >= 2 || Array.isArray(props.userGroup) && props.userGroup.length > 0) {
           showDropdown.value = true;
         }
       };
@@ -3708,12 +3923,10 @@
         showDropdown.value = false;
       };
       vue.watch(selectedUser, (newVal) => {
+        console.log("selectedUser", newVal);
         emit("update:modelValue", newVal);
-        const selectedUserInfo2 = options.value.find((user) => user.id === newVal);
-        emit("change", selectedUserInfo2 || null);
       });
       return (_ctx, _cache) => {
-        var _a;
         return vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
           ref_key: "containerRef",
           ref: containerRef,
@@ -3755,87 +3968,32 @@
               [vue.vModelText, searchQuery.value]
             ]),
             vue.createCommentVNode(' "我"标签 '),
-            _ctx.currentUserId ? (vue.openBlock(), vue.createElementBlock(
-              "div",
-              {
-                key: 1,
-                class: vue.normalizeClass(["me-tag", { disabled: _ctx.currentUserId && ((_a = selectedUserInfo.value) == null ? void 0 : _a[_ctx.exactSearchKey]) === _ctx.currentUserId }]),
-                onClick: _cache[1] || (_cache[1] = ($event) => addCurrentUser())
-              },
-              " 我 ",
-              2
-              /* CLASS */
-            )) : vue.createCommentVNode("v-if", true)
+            vue.createVNode(MeTag, {
+              "is-disabled": !!_ctx.currentUserId && !!selectedUserInfo.value && selectedUserInfo.value[_ctx.exactSearchKey || "bk_username"] === _ctx.currentUserId,
+              "current-user-id": _ctx.currentUserId,
+              onClick: addCurrentUser
+            }, null, 8, ["is-disabled", "current-user-id"])
           ]),
-          vue.createCommentVNode(" 下拉选项列表 "),
-          vue.createVNode(vue.unref(bkuiVue.Popover), {
-            "ext-cls": "bk-user-selector-popover",
-            arrow: false,
+          vue.createCommentVNode(" 使用新的公共下拉选项组件 "),
+          vue.createVNode(SelectionPopover, {
+            "container-width": containerRef.value ? containerRef.value.offsetWidth : "auto",
             "is-show": showDropdown.value,
-            width: containerRef.value ? containerRef.value.offsetWidth : "auto",
-            placement: "bottom-start",
-            theme: "light",
-            trigger: "manual"
-          }, {
-            content: vue.withCtx(() => [
-              vue.createVNode(vue.unref(bkuiVue.Loading), {
-                class: "dropdown-content",
-                loading: isLoading.value,
-                size: "mini",
-                mode: "spin"
-              }, {
-                default: vue.withCtx(() => [
-                  options.value.length === 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5, [
-                    vue.createElementVNode(
-                      "span",
-                      null,
-                      vue.toDisplayString(searchQuery.value.length > 1 ? "未找到匹配用户" : "请输入关键词搜索"),
-                      1
-                      /* TEXT */
-                    )
-                  ])) : (vue.openBlock(true), vue.createElementBlock(
-                    vue.Fragment,
-                    { key: 1 },
-                    vue.renderList(options.value, (user) => {
-                      return vue.openBlock(), vue.createElementBlock("div", {
-                        class: "user-option",
-                        key: user.id,
-                        onMousedown: vue.withModifiers(($event) => selectUser(user), ["prevent"])
-                      }, [
-                        vue.createElementVNode(
-                          "span",
-                          null,
-                          vue.toDisplayString(user.name),
-                          1
-                          /* TEXT */
-                        ),
-                        user.tenantId !== _ctx.tenantId && user.tenantId && _ctx.tenants[user.tenantId] ? (vue.openBlock(), vue.createElementBlock(
-                          "span",
-                          _hoisted_7,
-                          "@" + vue.toDisplayString(_ctx.tenants[user.tenantId]),
-                          1
-                          /* TEXT */
-                        )) : vue.createCommentVNode("v-if", true)
-                      ], 40, _hoisted_6);
-                    }),
-                    128
-                    /* KEYED_FRAGMENT */
-                  ))
-                ]),
-                _: 1
-                /* STABLE */
-              }, 8, ["loading"])
-            ]),
-            _: 1
-            /* STABLE */
-          }, 8, ["is-show", "width"])
+            loading: isLoading.value,
+            options: options.value,
+            "search-query": searchQuery.value,
+            "tenant-id": _ctx.tenantId,
+            tenants: _ctx.tenants,
+            "user-group": _ctx.userGroup,
+            "user-group-name": _ctx.userGroupName,
+            onSelectUser: addUser
+          }, null, 8, ["container-width", "is-show", "loading", "options", "search-query", "tenant-id", "tenants", "user-group", "user-group-name"])
         ])), [
           [vue.unref(bkuiVue.clickoutside), handleClickOutside]
         ]);
       };
     }
   });
-  const SingleSelector = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-308925e9"]]);
+  const SingleSelector = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-8b8dd0fd"]]);
   const _hoisted_1 = { class: "bk-user-selector" };
   const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     ...{
@@ -3843,14 +4001,16 @@
     },
     __name: "user-selector",
     props: {
-      apiBaseUrl: { default: "" },
-      tenantId: { default: "" },
-      placeholder: { default: "请输入人员名称搜索" },
       modelValue: { default: "" },
       draggable: { type: Boolean, default: false },
       multiple: { type: Boolean, default: false },
+      apiBaseUrl: { default: "" },
+      tenantId: { default: "" },
+      placeholder: { default: "请输入人员名称搜索" },
       currentUserId: { default: "" },
-      exactSearchKey: { default: "" }
+      exactSearchKey: { default: "bk_username" },
+      userGroup: { default: () => [] },
+      userGroupName: { default: "用户群组" }
     },
     emits: ["update:modelValue", "change"],
     setup(__props, { emit: __emit }) {
@@ -3910,8 +4070,10 @@
             placeholder: _ctx.placeholder,
             "tenant-id": _ctx.tenantId,
             tenants: vue.unref(tenants),
+            "user-group": _ctx.userGroup,
+            "user-group-name": _ctx.userGroupName,
             onChange: handleUpdateUser
-          }, null, 8, ["modelValue", "api-base-url", "current-user-id", "exact-search-key", "placeholder", "tenant-id", "tenants"])) : (vue.openBlock(), vue.createElementBlock(
+          }, null, 8, ["modelValue", "api-base-url", "current-user-id", "exact-search-key", "placeholder", "tenant-id", "tenants", "user-group", "user-group-name"])) : (vue.openBlock(), vue.createElementBlock(
             vue.Fragment,
             { key: 1 },
             [
@@ -3927,8 +4089,10 @@
                 "selected-users": selectedUsers.value,
                 "tenant-id": _ctx.tenantId,
                 tenants: vue.unref(tenants),
+                "user-group": _ctx.userGroup,
+                "user-group-name": _ctx.userGroupName,
                 "onUpdate:selectedUsers": handleUpdateSelectedUsers
-              }, null, 8, ["modelValue", "api-base-url", "current-user-id", "draggable", "exact-search-key", "placeholder", "selected-users", "tenant-id", "tenants"])
+              }, null, 8, ["modelValue", "api-base-url", "current-user-id", "draggable", "exact-search-key", "placeholder", "selected-users", "tenant-id", "tenants", "user-group", "user-group-name"])
             ],
             2112
             /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
@@ -3937,7 +4101,7 @@
       };
     }
   });
-  const BkUserSelector = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-fe084750"]]);
+  const BkUserSelector = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-bc7b4ccd"]]);
   exports2.BkUserSelector = BkUserSelector;
   exports2.default = BkUserSelector;
   Object.defineProperties(exports2, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });