@blueking/bk-user-selector 0.1.0 → 0.1.1-beta.1

package/vue3/index.umd.min.js

@@ -3,7 +3,7 @@
 })(this, function(exports2, vue, bkuiVue) {
   "use strict";
   var __vite_style__ = document.createElement("style");
-  __vite_style__.textContent = ".me-tag[data-v-4f251ce1] {\n  position: absolute;\n  top: 50%;\n  right: 8px;\n  z-index: 1;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 24px;\n  height: 24px;\n  padding: 0 8px;\n  font-size: 12px;\n  color: #4d4f56;\n  white-space: nowrap;\n  cursor: pointer;\n  background-color: #e1ecff;\n  border-radius: 50%;\n  transform: translateY(-50%);\n}\n.me-tag[data-v-4f251ce1]:hover {\n  color: #3a84ff;\n  background-color: #cddffe;\n}\n.me-tag.disabled[data-v-4f251ce1] {\n  color: #c4c6cc;\n  cursor: not-allowed;\n  background-color: #f0f1f5;\n}.dropdown-content[data-v-024fc663] {\n  min-height: 40px;\n  max-height: 300px;\n  padding: 5px 0;\n  overflow-y: auto;\n}\n.dropdown-content .no-data[data-v-024fc663] {\n  padding: 10px;\n  color: #979ba5;\n  text-align: center;\n}\n.dropdown-content .user-group .group-header[data-v-024fc663] {\n  display: flex;\n  align-items: center;\n  padding: 8px 12px;\n  color: #979ba5;\n}\n.dropdown-content .user-group .group-header .group-count[data-v-024fc663] {\n  margin-left: 4px;\n}\n.dropdown-content .user-option[data-v-024fc663] {\n  display: flex;\n  align-items: center;\n  height: 32px;\n  padding: 8px 12px;\n  cursor: pointer;\n}\n.dropdown-content .user-option[data-v-024fc663]:hover {\n  background-color: #f5f7fa;\n}.user-tag[data-v-48ac8fc1] {\n  margin-right: 4px;\n  margin-left: 0;\n}\n.user-tag.draggable[data-v-48ac8fc1] {\n  cursor: move;\n}\n.user-tag.active[data-v-48ac8fc1] {\n  background-color: #e1ecff;\n  border-color: #3a84ff;\n}\n.user-tag.is-custom[data-v-48ac8fc1] {\n  color: #ea3636;\n  background-color: #feebea;\n  border-color: rgba(234, 53, 54, 0.3019607843);\n}\n.user-tag.is-custom[data-v-48ac8fc1]:hover {\n  background-color: #fedddc;\n}\n.user-tag .tag-content .user-name[data-v-48ac8fc1] {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  font-size: 12px;\n  white-space: nowrap;\n}.bk-user-selector[data-v-65e61c1c] {\n  position: relative;\n  width: 100%;\n  height: 32px;\n  font-size: 12px;\n}\n.bk-user-selector.is-disabled[data-v-65e61c1c] {\n  pointer-events: none;\n  cursor: not-allowed;\n  background-color: #dcdee5;\n}\n.bk-user-selector .tags-container[data-v-65e61c1c] {\n  position: relative;\n  min-height: 32px;\n  padding: 1px 10px 1px 8px;\n  background-color: #fff;\n  border: 1px solid #c4c6cc;\n  border-radius: 2px;\n  transition: all 0.2s ease;\n}\n.bk-user-selector .tags-container.focused[data-v-65e61c1c] {\n  border-color: #3a84ff;\n  box-shadow: 0 0 0 2px rgba(58, 132, 255, 0.1);\n}\n.bk-user-selector .tags-container.tags-container-collapsed[data-v-65e61c1c] {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n}\n.bk-user-selector .tag-list[data-v-65e61c1c] {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n}\n.bk-user-selector .tag-wrapper[data-v-65e61c1c] {\n  display: inline-flex;\n  align-items: center;\n  max-width: 100%;\n}\n.bk-user-selector .search-input[data-v-65e61c1c] {\n  min-width: 20px;\n  height: 28px;\n  outline: none;\n  background: transparent;\n  border: none;\n}\n.bk-user-selector .search-input[data-v-65e61c1c]::placeholder {\n  color: #c4c6cc;\n}\n.bk-user-selector .search-input.input-inline[data-v-65e61c1c] {\n  min-width: 20px;\n}\n.bk-user-selector .search-input.input-last[data-v-65e61c1c], .bk-user-selector .search-input.search-input-collapsed[data-v-65e61c1c] {\n  flex: 1;\n}\n.hidden-users[data-v-65e61c1c] {\n  padding: 6px 10px;\n}.bk-user-selector-popover {\n  padding: 0 !important;\n}";
+  __vite_style__.textContent = ".me-tag[data-v-4f251ce1] {\n  position: absolute;\n  top: 50%;\n  right: 8px;\n  z-index: 1;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 24px;\n  height: 24px;\n  padding: 0 8px;\n  font-size: 12px;\n  color: #4d4f56;\n  white-space: nowrap;\n  cursor: pointer;\n  background-color: #e1ecff;\n  border-radius: 50%;\n  transform: translateY(-50%);\n}\n.me-tag[data-v-4f251ce1]:hover {\n  color: #3a84ff;\n  background-color: #cddffe;\n}\n.me-tag.disabled[data-v-4f251ce1] {\n  color: #c4c6cc;\n  cursor: not-allowed;\n  background-color: #f0f1f5;\n}.dropdown-content[data-v-d5a338f0] {\n  min-height: 40px;\n  max-height: 300px;\n  padding: 5px 0;\n  overflow-y: auto;\n}\n.dropdown-content .no-data[data-v-d5a338f0] {\n  padding: 10px;\n  color: #979ba5;\n  text-align: center;\n}\n.dropdown-content .user-group .group-header[data-v-d5a338f0] {\n  display: flex;\n  align-items: center;\n  padding: 8px 12px;\n  color: #979ba5;\n}\n.dropdown-content .user-group .group-header .group-count[data-v-d5a338f0] {\n  margin-left: 4px;\n}\n.dropdown-content .user-option[data-v-d5a338f0] {\n  display: flex;\n  align-items: center;\n  height: 32px;\n  padding: 8px 12px;\n  cursor: pointer;\n}\n.dropdown-content .user-option[data-v-d5a338f0]:hover {\n  background-color: #f5f7fa;\n}.user-tag[data-v-1f2e0737] {\n  margin-right: 4px;\n  margin-left: 0;\n}\n.user-tag.draggable[data-v-1f2e0737] {\n  cursor: move;\n}\n.user-tag.active[data-v-1f2e0737] {\n  background-color: #e1ecff;\n  border-color: #3a84ff;\n}\n.user-tag.is-custom[data-v-1f2e0737] {\n  color: #ea3636;\n  background-color: #feebea;\n  border-color: rgba(234, 53, 54, 0.3019607843);\n}\n.user-tag.is-custom[data-v-1f2e0737]:hover {\n  background-color: #fedddc;\n}\n.user-tag .tag-content .user-name[data-v-1f2e0737] {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  font-size: 12px;\n  white-space: nowrap;\n}.bk-user-selector[data-v-9975c7e1] {\n  position: relative;\n  width: 100%;\n  height: 32px;\n  font-size: 12px;\n}\n.bk-user-selector.is-disabled[data-v-9975c7e1] {\n  pointer-events: none;\n  cursor: not-allowed;\n  background-color: #dcdee5;\n}\n.bk-user-selector .tags-container[data-v-9975c7e1] {\n  position: relative;\n  min-height: 32px;\n  padding: 1px 10px 1px 8px;\n  background-color: #fff;\n  border: 1px solid #c4c6cc;\n  border-radius: 2px;\n  transition: all 0.2s ease;\n}\n.bk-user-selector .tags-container.focused[data-v-9975c7e1] {\n  border-color: #3a84ff;\n  box-shadow: 0 0 0 2px rgba(58, 132, 255, 0.1);\n}\n.bk-user-selector .tags-container.tags-container-collapsed[data-v-9975c7e1] {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n}\n.bk-user-selector .tag-list[data-v-9975c7e1] {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n}\n.bk-user-selector .tag-wrapper[data-v-9975c7e1] {\n  display: inline-flex;\n  align-items: center;\n  max-width: 100%;\n}\n.bk-user-selector .search-input[data-v-9975c7e1] {\n  min-width: 20px;\n  height: 28px;\n  outline: none;\n  background: transparent;\n  border: none;\n}\n.bk-user-selector .search-input[data-v-9975c7e1]::placeholder {\n  color: #c4c6cc;\n}\n.bk-user-selector .search-input.input-inline[data-v-9975c7e1] {\n  min-width: 20px;\n}\n.bk-user-selector .search-input.input-last[data-v-9975c7e1], .bk-user-selector .search-input.search-input-collapsed[data-v-9975c7e1] {\n  flex: 1;\n}\n.hidden-users[data-v-9975c7e1] {\n  padding: 6px 10px;\n}.bk-user-selector-popover {\n  padding: 0 !important;\n}";
   document.head.appendChild(__vite_style__);
   var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
   function getDefaultExportFromCjs(x) {
@@ -2913,7 +2913,7 @@
   };
   const lookupUsers = async (params) => {
     const { apiBaseUrl, tenantId, exactSearchKey = "bk_username", usersList = [], enableMultiTenantMode = true } = params;
-    const users = usersList.filter(Boolean).map((user) => user.trim());
+    const users = usersList.filter(Boolean).map((user) => typeof user === "string" ? user.trim() : String(user).trim());
     if (!enableMultiTenantMode) {
       try {
         const userList = await getUserList(apiBaseUrl, { userIds: users });
@@ -2951,12 +2951,14 @@
         ...user,
         id: user.username,
         name: `${user.display_name}(${user.username})`,
+        type: user.data_source_type,
         tenantId: user.owner_tenant_id
       }));
     }
     return users.map((user) => ({
       id: user.bk_username,
       name: user.display_name,
+      type: user.data_source_type,
       tenantId: user.owner_tenant_id,
       ...user
     }));
@@ -3129,7 +3131,8 @@
     "zh-CN": zhCN
   };
   const getPath = (obj, path, variables) => {
-    const pathStack = /^\w/.test(path) ? path.split(".") : [path];
+    const safePath = typeof path === "string" ? path : String(path ?? "");
+    const pathStack = /^\w/.test(safePath) ? safePath.split(".") : [safePath];
     const { length } = pathStack;
     let target = obj;
     let i = 0;
@@ -3139,9 +3142,11 @@
       }
       if (variables) {
         target = target[pathStack[i]];
-        Object.keys(variables).forEach((key) => {
-          target = target.replace(`{${key}}`, variables[key]);
-        });
+        if (typeof target === "string") {
+          Object.keys(variables).forEach((key) => {
+            target = target.replace(`{${key}}`, variables[key]);
+          });
+        }
       } else {
         target = target[pathStack[i]];
       }
@@ -3373,10 +3378,12 @@
     const performSearch = async (keyword) => {
       if (!(keyword == null ? void 0 : keyword.length)) {
         searchResults.value = [];
+        loading.value = false;
         return;
       }
       if (enableMultiTenantMode && (!apiBaseUrl || !tenantId)) {
         console.warn("执行用户搜索需要提供有效的API基础URL和租户ID");
+        loading.value = false;
         return;
       }
       loading.value = true;
@@ -3398,7 +3405,7 @@
     const debouncedSearch = debounce(performSearch, SEARCH_DEBOUNCE_DELAY);
     const handleSearchInput = (value) => {
       loading.value = true;
-      searchQuery.value = value.trim();
+      searchQuery.value = typeof value === "string" ? value.trim() : String(value ?? "").trim();
       debouncedSearch(searchQuery.value);
     };
     const clearSearch = () => {
@@ -3499,6 +3506,9 @@
     return target;
   };
   const MeTag = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-4f251ce1"]]);
+  const UserGroupAvatar = "data:image/svg+xml,%3csvg%20viewBox='0%200%201024%201024'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20style='fill:%20%23A3C5FD;'%3e%3cpath%20fill-rule='evenodd'%20d='M405.7858816%20162.66256256C416.4461344%20160.6535248%20439.8986944%20159.44810208%20457.3815104%20160.25171712%20484.2453504%20161.05533248%20494.052784%20163.4661776%20516.226112%20174.7167888%20567.8217376%20200.43247136%20597.670448%20242.22045568%20606.6250624%20301.28616416%20617.711728%20374.415136%20593.4063488%20443.5260352%20535.8409792%20500.180896%20509.8299584%20525.8965792%20505.565856%20537.5489984%20514.0940608%20557.237568%20521.3430336%20572.9080608%20546.0748224%20586.5695168%20629.2248%20620.3213504%20691.054272%20645.2334208%20760.985536%20687.4232096%20767.8080992%20703.8973216%20774.6306624%20720.3714304%20784.8645056%20752.114224%20791.6870688%20777.4280992%20799.7888608%20807.1618592%20793.3927072%20818.8142784%20761.8383584%20832.4757344%20720.4765728%20850.155264%20669.3073536%20857.3878016%20546.9276416%20862.2094912%20392.9935776%20868.2366048%20227.12002944%20858.5932224%20162.30568672%20840.1100768%20134.5890272%20832.4757344%20108.15159776%20815.1980096%20100.47621504%20799.5275136%2093.6536528%20786.2678656%2094.08006304%20784.2588288%20105.59313696%20746.4889184%20116.67980096%20709.924432%20119.23826176%20705.5045504%20141.41158944%20685.4141728%20143.84821888%20683.2001312%20146.05397248%20681.2036448%20148.2232096%20679.3252416L152.13038144%20676.0501632C159.5946992%20670.0236288%20167.98497088%20664.6722176%20184.94031712%20656.0863296L191.29263904%20652.915344C215.97973152%20640.7492736%20256.51622304%20622.3959904%20329.458464%20589.3821696%20359.7335872%20575.3189056%20371.2466592%20563.6664896%20375.084352%20542.772496%20377.2164032%20530.316464%20374.6579424%20526.7001952%20345.2356416%20496.9664352%20295.34565344%20446.338688%20274.02514592%20396.9163584%20273.59873568%20331.0199232%20273.59873568%20291.24097568%20282.12693888%20265.52529312%20307.71154784%20228.15719168%20332.8697472%20191.19089792%20365.703328%20169.49329056%20405.7858816%20162.66256256ZM668.7713728%20226.60405184C756.683056%20211.50282816%20820.4190272%20263.09867616%20827.0124032%20354.9644544%20831.8475456%20416.6277856%20815.1443264%20461.931456%20770.3093664%20510.1714752%20752.287472%20529.4674848%20747.891888%20536.5986176%20748.3314464%20548.344016%20748.7710048%20555.8946272%20751.4083552%20565.123152%20754.485264%20568.8984576%20757.5621728%20572.2542848%20788.331264%20588.1944672%20823.0563776%20604.1346464%20944.3745024%20659.92528%20966.791984%20682.996592%20958.4403712%20744.6599232%20954.923904%20771.9260224%20956.6821376%20771.0870656%20890.308816%20787.0272448%20867.4517792%20792.8999456%20845.0343008%20798.3531648%20841.0782752%20799.6116%20835.3640128%20801.2895136%20833.1662208%20797.9336864%20830.5288704%20781.5740256%20824.3750528%20739.6261824%20812.0674176%20710.6821696%20790.0894976%20687.6108576%20752.287472%20647.3409248%20703.9360448%20619.6553504%20624.3759712%20593.6476864%20597.5629088%20584.4191616%20560.64%20550.8608864%20560.64%20534.920704%20560.64%20527.7895712%20569.8707264%20514.7857408%20589.6508544%20494.6507744%20620.859504%20461.931456%20639.7605152%20429.631616%20648.5516832%20394.8149056%20655.5846208%20366.7098496%20652.0681504%20283.23364096%20642.837424%20254.7091072%20635.3649312%20231.63779328%20634.4858144%20232.47675008%20668.7713728%20226.60405184Z'%3e%3c/path%3e%3c/svg%3e";
+  const UserAvatar = "data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20width='32px'%20height='32px'%20viewBox='0%200%2032%2032'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3ctitle%3eIcon/用户%3c/title%3e%3cg%20id='Icon/用户'%20stroke='none'%20stroke-width='1'%20fill='none'%20fill-rule='evenodd'%3e%3cg%20id='user-(1)'%20transform='translate(3,%202)'%20fill='%23A3C5FD'%20fill-rule='nonzero'%3e%3cpath%20d='M13.0077612,27.9989067%20C10.3002732,27.9989067%207.59285518,28.0018792%204.88515705,27.997455%20C3.95018807,27.9959342%203.05044678,27.8282323%202.22816433,27.3628696%20C0.998627601,26.6672451%200.29953695,25.6114692%200.0864200465,24.2387462%20C-0.0656962495,23.259079%200.0147040645,22.4675755%200.0874005263,21.4879775%20C0.187970957,20.13461%200.423078914,19.3321844%200.863249688,18.0430358%20C1.22365046,16.9873982%201.73014453,16.0067633%202.49702917,15.175719%20C3.42254341,14.1726178%204.6014447,13.7297906%205.9255989,13.6440041%20C6.33292322,13.6073668%206.66741099,13.712025%206.9979768,13.9263185%20C7.58886318,14.3094892%208.17393665,14.7060014%208.79220674,15.0421658%20C10.1097776,15.758321%2011.5447274,16.1099698%2013.0616182,16.0930337%20C14.6806203,16.0750607%2016.2142496,15.63963%2017.592821,14.8169502%20C18.0555431,14.5407189%2018.5150436,14.256538%2018.9569652,13.9491996%20C19.3610679,13.6681294%2019.7808585,13.5749462%2020.274326,13.6337733%20C21.462472,13.7340074%2022.3872158,14.1103345%2023.2340106,14.8851094%20C23.902636,15.496952%2024.3685096,16.2520257%2024.7518119,17.0611566%20C25.272453,18.1598604%2025.5462904,18.7976948%2025.7441396,19.9861253%20C25.9499728,21.2233595%2026.0256808,22.2792045%2025.9924842,23.5308171%20C25.9627193,24.6543374%2025.6405577,25.6840525%2024.8535729,26.5307194%20C24.1686994,27.2671979%2023.3129402,27.7090574%2022.3211027,27.8808379%20C21.9232331,27.9495501%2021.5154185,27.9922014%2021.1120162,27.9935148%20C18.4104811,28.0036073%2015.7090862,27.9989067%2013.0077612,27.9989067%20L13.0077612,27.9989067%20Z%20M5.91775495,6.98479749%20C5.84814002,3.25685016%209.08684454,-0.00255470186%2013.0162355,1.5025268e-06%20C16.9117994,0.00256071584%2020.1304739,3.23452217%2020.1095656,7.04113598%20C20.0884528,10.8082092%2016.8998935,14.015354%2013.0058002,14.0149393%20C9.10134181,14.0145245%205.83322254,10.7695672%205.91775495,6.98479749%20Z'%20id='形状'%3e%3c/path%3e%3c/g%3e%3c/g%3e%3c/svg%3e";
+  const VirtualAvatar = "data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20width='32px'%20height='32px'%20viewBox='0%200%2032%2032'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3ctitle%3eIcon/虚拟icon%3c/title%3e%3cg%20id='Icon/虚拟icon'%20stroke='none'%20stroke-width='1'%20fill='none'%20fill-rule='evenodd'%3e%3cpath%20d='M27.4705882,3%20C28.315259,3%2029,3.68474098%2029,4.52941178%20L29,22.4623054%20C29,23.3069762%2028.315259,23.9917172%2027.4705882,23.9917172%20L20.5882353,23.9917172%20L20.5882353,27.0244081%20L24.0294118,27.0244081%20C24.2405794,27.0244081%2024.4117647,27.1955933%2024.4117647,27.406761%20L24.4117647,28.617647%20C24.4117647,28.8288148%2024.2405795,29%2024.0294118,29%20L7.97058824,29%20C7.75942054,29%207.58823529,28.8288148%207.58823529,28.617647%20L7.58823529,27.406761%20C7.58823531,27.1955933%207.75942055,27.0244081%207.97058824,27.0244081%20L11.4117647,27.0244081%20L11.4117647,23.9917172%20L4.52941178,23.9917172%20C3.68474098,23.9917172%203,23.3069762%203,22.4623054%20L3,4.52941178%20C3,3.68474098%203.68474098,3%204.52941178,3%20L27.4705882,3%20Z%20M19,24%20L13,24%20L13,27%20L19,27%20L19,24%20Z%20M23.4117647,7%20L8.58823529,7%20C8.03595054,7%207.58823529,7.44771525%207.58823529,8%20L7.58823529,19%20C7.58823529,19.5522847%208.03595054,20%208.58823529,20%20L23.4117647,20%20C23.9640495,20%2024.4117647,19.5522847%2024.4117647,19%20L24.4117647,8%20C24.4117647,7.44771525%2023.9640495,7%2023.4117647,7%20Z%20M12,10%20C12.5522847,10%2013,10.4477153%2013,11%20L13,13%20C13,13.5522847%2012.5522847,14%2012,14%20C11.4477153,14%2011,13.5522847%2011,13%20L11,11%20C11,10.4477153%2011.4477153,10%2012,10%20Z%20M20,10%20C20.5522847,10%2021,10.4477153%2021,11%20L21,13%20C21,13.5522847%2020.5522847,14%2020,14%20C19.4477153,14%2019,13.5522847%2019,13%20L19,11%20C19,10.4477153%2019.4477153,10%2020,10%20Z%20M26,5%20C25.4477153,5%2025,5.44771525%2025,6%20C25,6.55228475%2025.4477153,7%2026,7%20C26.5522847,7%2027,6.55228475%2027,6%20C27,5.44771525%2026.5522847,5%2026,5%20Z'%20id='蒙版'%20fill='%23A3C5FD'%20fill-rule='nonzero'%3e%3c/path%3e%3c/g%3e%3c/svg%3e";
   const UserRender = vue.defineComponent({
     name: "UserRender",
     props: {
@@ -3517,23 +3527,63 @@
       render: {
         type: Function,
         required: false
+      },
+      hasAvatar: {
+        type: Boolean,
+        default: false
+      },
+      avatarBaseUrl: {
+        type: String,
+        default: ""
       }
     },
     setup(props) {
+      const getAvatarUrl = (user) => {
+        if (user.type === "virtual") {
+          return VirtualAvatar;
+        }
+        if (user.type === "userGroup") {
+          return UserGroupAvatar;
+        }
+        if (!props.avatarBaseUrl) {
+          return UserAvatar;
+        }
+        const loginName = user.login_name || user.bk_username || user.id;
+        return `${props.avatarBaseUrl}${loginName}.png?default_when_absent=true`;
+      };
       const defaultRender = (h2, props2) => {
-        return h2("div", [
-          h2("span", props2.user.name),
-          props2.user.tenantId !== props2.tenantId && props2.user.tenantId ? h2(
-            "span",
-            {
+        return h2(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center"
+            }
+          },
+          [
+            props2.hasAvatar ? h2("img", {
+              src: getAvatarUrl(props2.user),
               style: {
-                color: "#f59500",
-                marginLeft: "4px"
+                width: "20px",
+                height: "20px",
+                borderRadius: "50%",
+                marginRight: "6px",
+                flexShrink: 0
               }
-            },
-            `@${props2.tenants[props2.user.tenantId] || props2.user.tenantId}`
-          ) : null
-        ]);
+            }) : null,
+            h2("span", props2.user.name),
+            props2.user.tenantId !== props2.tenantId && props2.user.tenantId ? h2(
+              "span",
+              {
+                style: {
+                  color: "#f59500",
+                  marginLeft: "4px"
+                }
+              },
+              `@${props2.tenants[props2.user.tenantId] || props2.user.tenantId}`
+            ) : null
+          ]
+        );
       };
       return () => {
         try {
@@ -3558,8 +3608,10 @@
     },
     __name: "selection-popover",
     props: {
+      avatarBaseUrl: { default: "" },
       containerWidth: { default: "auto" },
       emptyText: { default: "" },
+      hasAvatar: { type: Boolean, default: false },
       isShow: { type: Boolean, default: false },
       loading: { type: Boolean, default: false },
       options: { default: () => [] },
@@ -3685,11 +3737,13 @@
                                 }, ["prevent"]))
                               }, [
                                 vue.createVNode(vue.unref(UserRender), {
+                                  "avatar-base-url": _ctx.avatarBaseUrl,
+                                  "has-avatar": _ctx.hasAvatar,
                                   render: _ctx.renderListItem,
                                   "tenant-id": _ctx.tenantId,
                                   tenants: _ctx.tenants,
                                   user
-                                }, null, 8, ["render", "tenant-id", "tenants", "user"])
+                                }, null, 8, ["avatar-base-url", "has-avatar", "render", "tenant-id", "tenants", "user"])
                               ], 40, _hoisted_4);
                             }),
                             128
@@ -3729,7 +3783,7 @@
       };
     }
   });
-  const SelectionPopover = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-024fc663"]]);
+  const SelectionPopover = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-d5a338f0"]]);
   const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "UserTag"
@@ -3737,8 +3791,10 @@
     __name: "user-tag",
     props: {
       active: { type: Boolean },
+      avatarBaseUrl: {},
       currentTenantId: {},
       draggable: { type: Boolean },
+      hasAvatar: { type: Boolean },
       renderTag: { type: Function },
       showTenant: { type: Boolean },
       tenants: {},
@@ -3763,11 +3819,13 @@
         }, {
           default: vue.withCtx(() => [
             vue.createVNode(vue.unref(UserRender), {
+              "avatar-base-url": _ctx.avatarBaseUrl,
+              "has-avatar": _ctx.hasAvatar,
               render: _ctx.renderTag,
               "tenant-id": _ctx.currentTenantId,
               tenants: _ctx.tenants,
               user: _ctx.user
-            }, null, 8, ["render", "tenant-id", "tenants", "user"])
+            }, null, 8, ["avatar-base-url", "has-avatar", "render", "tenant-id", "tenants", "user"])
           ]),
           _: 1
           /* STABLE */
@@ -3775,7 +3833,7 @@
       };
     }
   });
-  const UserTag = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-48ac8fc1"]]);
+  const UserTag = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-1f2e0737"]]);
   const _hoisted_1 = ["placeholder"];
   const _hoisted_2 = { class: "hidden-users" };
   const _hoisted_3 = ["placeholder"];
@@ -3791,6 +3849,7 @@
       multiple: { type: Boolean, default: false },
       allowCreate: { type: Boolean, default: false },
       apiBaseUrl: { default: "" },
+      avatarBaseUrl: { default: "" },
       currentUserId: { default: "" },
       disabled: { type: Boolean, default: false },
       emptyText: { default: "" },
@@ -3798,6 +3857,7 @@
       exactSearchKey: { default: DEFAULT_EXACT_SEARCH_KEY },
       excludeUserIds: { default: () => [] },
       freePaste: { type: Boolean, default: false },
+      hasAvatar: { type: Boolean, default: false },
       placeholder: { default: "" },
       renderListItem: {},
       renderTag: {},
@@ -3860,7 +3920,9 @@
         () => isMaxCountReached.value || !!props.currentUserId && selectedUsers.value.some((user) => user[props.exactSearchKey] === props.currentUserId)
       );
       const userTagCommonProps = vue.computed(() => ({
+        avatarBaseUrl: props.avatarBaseUrl,
         currentTenantId: props.tenantId,
+        hasAvatar: props.hasAvatar,
         renderTag: props.renderTag,
         tenants
       }));
@@ -4165,8 +4227,10 @@
           [
             vue.createCommentVNode(" 下拉选项列表 "),
             vue.createVNode(SelectionPopover, {
+              "avatar-base-url": _ctx.avatarBaseUrl,
               "container-width": containerRef.value ? containerRef.value.offsetWidth : "auto",
               "empty-text": computedEmptyText.value,
+              "has-avatar": _ctx.hasAvatar,
               "is-show": showDropdown.value,
               loading: vue.unref(searchLoading),
               options: displayOptions.value,
@@ -4312,10 +4376,12 @@
                             vue.renderList(selectedUsers.value.slice(visibleUsers.value.length), (user) => {
                               return vue.openBlock(), vue.createBlock(vue.unref(UserRender), {
                                 key: user.id,
+                                "avatar-base-url": _ctx.avatarBaseUrl,
+                                "has-avatar": _ctx.hasAvatar,
                                 "tenant-id": _ctx.tenantId,
                                 tenants: vue.unref(tenants),
                                 user
-                              }, null, 8, ["tenant-id", "tenants", "user"]);
+                              }, null, 8, ["avatar-base-url", "has-avatar", "tenant-id", "tenants", "user"]);
                             }),
                             128
                             /* KEYED_FRAGMENT */
@@ -4362,7 +4428,7 @@
               ]),
               _: 1
               /* STABLE */
-            }, 8, ["container-width", "empty-text", "is-show", "loading", "options", "render-list-item", "search-query", "tenant-id", "tenants", "user-group", "user-group-name"])
+            }, 8, ["avatar-base-url", "container-width", "empty-text", "has-avatar", "is-show", "loading", "options", "render-list-item", "search-query", "tenant-id", "tenants", "user-group", "user-group-name"])
           ],
           2
           /* CLASS */
@@ -4370,7 +4436,7 @@
       };
     }
   });
-  const BkUserSelector = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-65e61c1c"]]);
+  const BkUserSelector = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-9975c7e1"]]);
   exports2.BkUserSelector = BkUserSelector;
   exports2.default = BkUserSelector;
   Object.defineProperties(exports2, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });

package/vue3/vue3.css

@@ -25,71 +25,71 @@
   color: #c4c6cc;
   cursor: not-allowed;
   background-color: #f0f1f5;
-}.dropdown-content[data-v-024fc663] {
+}.dropdown-content[data-v-d5a338f0] {
   min-height: 40px;
   max-height: 300px;
   padding: 5px 0;
   overflow-y: auto;
 }
-.dropdown-content .no-data[data-v-024fc663] {
+.dropdown-content .no-data[data-v-d5a338f0] {
   padding: 10px;
   color: #979ba5;
   text-align: center;
 }
-.dropdown-content .user-group .group-header[data-v-024fc663] {
+.dropdown-content .user-group .group-header[data-v-d5a338f0] {
   display: flex;
   align-items: center;
   padding: 8px 12px;
   color: #979ba5;
 }
-.dropdown-content .user-group .group-header .group-count[data-v-024fc663] {
+.dropdown-content .user-group .group-header .group-count[data-v-d5a338f0] {
   margin-left: 4px;
 }
-.dropdown-content .user-option[data-v-024fc663] {
+.dropdown-content .user-option[data-v-d5a338f0] {
   display: flex;
   align-items: center;
   height: 32px;
   padding: 8px 12px;
   cursor: pointer;
 }
-.dropdown-content .user-option[data-v-024fc663]:hover {
+.dropdown-content .user-option[data-v-d5a338f0]:hover {
   background-color: #f5f7fa;
-}.user-tag[data-v-48ac8fc1] {
+}.user-tag[data-v-1f2e0737] {
   margin-right: 4px;
   margin-left: 0;
 }
-.user-tag.draggable[data-v-48ac8fc1] {
+.user-tag.draggable[data-v-1f2e0737] {
   cursor: move;
 }
-.user-tag.active[data-v-48ac8fc1] {
+.user-tag.active[data-v-1f2e0737] {
   background-color: #e1ecff;
   border-color: #3a84ff;
 }
-.user-tag.is-custom[data-v-48ac8fc1] {
+.user-tag.is-custom[data-v-1f2e0737] {
   color: #ea3636;
   background-color: #feebea;
   border-color: rgba(234, 53, 54, 0.3019607843);
 }
-.user-tag.is-custom[data-v-48ac8fc1]:hover {
+.user-tag.is-custom[data-v-1f2e0737]:hover {
   background-color: #fedddc;
 }
-.user-tag .tag-content .user-name[data-v-48ac8fc1] {
+.user-tag .tag-content .user-name[data-v-1f2e0737] {
   overflow: hidden;
   text-overflow: ellipsis;
   font-size: 12px;
   white-space: nowrap;
-}.bk-user-selector[data-v-65e61c1c] {
+}.bk-user-selector[data-v-9975c7e1] {
   position: relative;
   width: 100%;
   height: 32px;
   font-size: 12px;
 }
-.bk-user-selector.is-disabled[data-v-65e61c1c] {
+.bk-user-selector.is-disabled[data-v-9975c7e1] {
   pointer-events: none;
   cursor: not-allowed;
   background-color: #dcdee5;
 }
-.bk-user-selector .tags-container[data-v-65e61c1c] {
+.bk-user-selector .tags-container[data-v-9975c7e1] {
   position: relative;
   min-height: 32px;
   padding: 1px 10px 1px 8px;
@@ -98,42 +98,42 @@
   border-radius: 2px;
   transition: all 0.2s ease;
 }
-.bk-user-selector .tags-container.focused[data-v-65e61c1c] {
+.bk-user-selector .tags-container.focused[data-v-9975c7e1] {
   border-color: #3a84ff;
   box-shadow: 0 0 0 2px rgba(58, 132, 255, 0.1);
 }
-.bk-user-selector .tags-container.tags-container-collapsed[data-v-65e61c1c] {
+.bk-user-selector .tags-container.tags-container-collapsed[data-v-9975c7e1] {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
 }
-.bk-user-selector .tag-list[data-v-65e61c1c] {
+.bk-user-selector .tag-list[data-v-9975c7e1] {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
 }
-.bk-user-selector .tag-wrapper[data-v-65e61c1c] {
+.bk-user-selector .tag-wrapper[data-v-9975c7e1] {
   display: inline-flex;
   align-items: center;
   max-width: 100%;
 }
-.bk-user-selector .search-input[data-v-65e61c1c] {
+.bk-user-selector .search-input[data-v-9975c7e1] {
   min-width: 20px;
   height: 28px;
   outline: none;
   background: transparent;
   border: none;
 }
-.bk-user-selector .search-input[data-v-65e61c1c]::placeholder {
+.bk-user-selector .search-input[data-v-9975c7e1]::placeholder {
   color: #c4c6cc;
 }
-.bk-user-selector .search-input.input-inline[data-v-65e61c1c] {
+.bk-user-selector .search-input.input-inline[data-v-9975c7e1] {
   min-width: 20px;
 }
-.bk-user-selector .search-input.input-last[data-v-65e61c1c], .bk-user-selector .search-input.search-input-collapsed[data-v-65e61c1c] {
+.bk-user-selector .search-input.input-last[data-v-9975c7e1], .bk-user-selector .search-input.search-input-collapsed[data-v-9975c7e1] {
   flex: 1;
 }
-.hidden-users[data-v-65e61c1c] {
+.hidden-users[data-v-9975c7e1] {
   padding: 6px 10px;
 }.bk-user-selector-popover {
   padding: 0 !important;