@blueking/bk-user-selector 0.1.0 → 0.1.1

package/vue3/index.es.min.js

@@ -2946,12 +2946,14 @@ const formatUsers = (users, enableMultiTenantMode = true) => {
       ...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
   }));
@@ -3368,10 +3370,12 @@ const useUserSearch = (apiBaseUrl, tenantId, enableMultiTenantMode = true) => {
   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;
@@ -3494,6 +3498,9 @@ const _export_sfc = (sfc, props) => {
   return target;
 };
 const MeTag = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-4f251ce1"]]);
+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 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 UserRender = defineComponent({
   name: "UserRender",
   props: {
@@ -3512,23 +3519,63 @@ const UserRender = defineComponent({
     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 {
@@ -3553,8 +3600,10 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   },
   __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: () => [] },
@@ -3680,11 +3729,13 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
                               }, ["prevent"]))
                             }, [
                               createVNode(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
@@ -3724,7 +3775,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-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__ */ defineComponent({
   ...{
     name: "UserTag"
@@ -3732,8 +3783,10 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   __name: "user-tag",
   props: {
     active: { type: Boolean },
+    avatarBaseUrl: {},
     currentTenantId: {},
     draggable: { type: Boolean },
+    hasAvatar: { type: Boolean },
     renderTag: { type: Function },
     showTenant: { type: Boolean },
     tenants: {},
@@ -3758,11 +3811,13 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       }, {
         default: withCtx(() => [
           createVNode(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 */
@@ -3770,7 +3825,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-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"];
@@ -3786,6 +3841,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     multiple: { type: Boolean, default: false },
     allowCreate: { type: Boolean, default: false },
     apiBaseUrl: { default: "" },
+    avatarBaseUrl: { default: "" },
+    hasAvatar: { type: Boolean, default: false },
     currentUserId: { default: "" },
     disabled: { type: Boolean, default: false },
     emptyText: { default: "" },
@@ -3855,7 +3912,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       () => isMaxCountReached.value || !!props.currentUserId && selectedUsers.value.some((user) => user[props.exactSearchKey] === props.currentUserId)
     );
     const userTagCommonProps = computed(() => ({
+      avatarBaseUrl: props.avatarBaseUrl,
       currentTenantId: props.tenantId,
+      hasAvatar: props.hasAvatar,
       renderTag: props.renderTag,
       tenants
     }));
@@ -4160,8 +4219,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         [
           createCommentVNode(" 下拉选项列表 "),
           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: unref(searchLoading),
             options: displayOptions.value,
@@ -4307,10 +4368,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                           renderList(selectedUsers.value.slice(visibleUsers.value.length), (user) => {
                             return openBlock(), createBlock(unref(UserRender), {
                               key: user.id,
+                              "avatar-base-url": _ctx.avatarBaseUrl,
+                              "has-avatar": _ctx.hasAvatar,
                               "tenant-id": _ctx.tenantId,
                               tenants: unref(tenants),
                               user
-                            }, null, 8, ["tenant-id", "tenants", "user"]);
+                            }, null, 8, ["avatar-base-url", "has-avatar", "tenant-id", "tenants", "user"]);
                           }),
                           128
                           /* KEYED_FRAGMENT */
@@ -4357,7 +4420,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             ]),
             _: 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 */
@@ -4365,7 +4428,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const BkUserSelector = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-65e61c1c"]]);
+const BkUserSelector = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-9975c7e1"]]);
 export {
   BkUserSelector,
   BkUserSelector as default