@blueking/bk-user-display-name
Version:
多租户环境用于显示用户名称的组件
1 lines • 2.9 kB
JavaScript
;Object.defineProperty(exports,"__esModule",{value:!0}),exports.USER_ID_FIELD=exports.CUSTOM_ELEMENT_NAME=void 0,exports.CUSTOM_ELEMENT_NAME="bk-user-display-name",exports.USER_ID_FIELD="user-id";class BkUserDisplayName extends HTMLElement{constructor(){super()}static configure(e){e.apiBaseUrl&&(this.apiBaseUrl=e.apiBaseUrl),e.tenantId&&(this.tenantId=e.tenantId),"number"==typeof e.cacheDuration&&(this.cacheDuration=e.cacheDuration),void 0!==e.emptyText&&(this.emptyText=e.emptyText)}createFetchConfig(){return{credentials:"include",headers:{"X-Bk-Tenant-Id":BkUserDisplayName.tenantId}}}async fetchUser(e){const t=BkUserDisplayName.pendingRequests.get(e);if(t)return t;const s=fetch(`${BkUserDisplayName.apiBaseUrl}/api/v3/open-web/tenant/users/${e}/display_info/`,this.createFetchConfig()).then(e=>e.json()).finally(()=>{BkUserDisplayName.pendingRequests.delete(e)});return BkUserDisplayName.pendingRequests.set(e,s),s}async fetchUsers(e){return fetch(`${BkUserDisplayName.apiBaseUrl}/api/v3/open-web/tenant/users/-/display_info/?bk_usernames=${e.join(",")}`,this.createFetchConfig()).then(e=>e.json())}isCacheValid(e){return Date.now()-e.timestamp<BkUserDisplayName.cacheDuration}parseUserIds(e){return decodeURIComponent(e).split(/[,，;]/).filter(e=>e.trim()).map(e=>e.trim())}async getSingleUserDisplayName(e){var t;const s=BkUserDisplayName.userCache.get(e);let a;return s&&this.isCacheValid(s)?a=s.data:(a=await this.fetchUser(e),BkUserDisplayName.userCache.set(e,{data:a,timestamp:Date.now()})),(null===(t=a.data)||void 0===t?void 0:t.display_name)||e}async getMultipleUsersDisplayName(e){const t=await this.fetchUsers(e);return e.map(e=>{var s;const a=null===(s=t.data)||void 0===s?void 0:s.find(t=>t.bk_username===e);return(null==a?void 0:a.display_name)||e}).join(", ")}async getDisplayName(){var e;const t=null===(e=this.getAttribute(exports.USER_ID_FIELD))||void 0===e?void 0:e.trim();if(!t)return"";if(!BkUserDisplayName.apiBaseUrl||!BkUserDisplayName.tenantId)return t;const s=this.parseUserIds(t);try{return 1===s.length?await this.getSingleUserDisplayName(t):await this.getMultipleUsersDisplayName(s)}catch(e){return console.error("DisplayName 获取用户数据失败:",e),t}}async updateDisplay(){this.getAttribute(exports.USER_ID_FIELD)?(this.textContent="...",this.textContent=await this.getDisplayName()):this.textContent=BkUserDisplayName.emptyText}attributeChangedCallback(e,t,s){e===exports.USER_ID_FIELD&&t!==s&&this.updateDisplay()}}exports.default=BkUserDisplayName,BkUserDisplayName.userCache=new Map,BkUserDisplayName.cacheDuration=3e5,BkUserDisplayName.pendingRequests=new Map,BkUserDisplayName.apiBaseUrl="",BkUserDisplayName.tenantId="",BkUserDisplayName.emptyText="--",BkUserDisplayName.observedAttributes=[exports.USER_ID_FIELD],customElements.get(exports.CUSTOM_ELEMENT_NAME)||customElements.define(exports.CUSTOM_ELEMENT_NAME,BkUserDisplayName);