diff --git a/widget/src/index.ts b/widget/src/index.ts index bbca1d59..85468ad0 100644 --- a/widget/src/index.ts +++ b/widget/src/index.ts @@ -1,4 +1,4 @@ -interface TailchatWidgetOptions { +export interface TailchatWidgetOptions { /** * @default https://nightly.paw.msgbyte.com/ */ @@ -42,6 +42,7 @@ const defaultFrameStyle: Partial = { const iconSize = 32; const iconSvg = ``; +const closeIconSvg = ``; /** * 创建聊天小部件 @@ -86,7 +87,28 @@ export function createTailchatWidget(_options: TailchatWidgetOptions) { ..._options.frameStyle, }); + // closeBtn + const closeBtnEl = document.createElement('div'); + closeBtnEl.innerHTML = closeIconSvg; + applyStyle(closeBtnEl, { + position: 'absolute', + right: '0', + top: `-${iconSize}px`, + backgroundColor: 'white', + cursor: 'pointer', + boxShadow: '0px -1px 4px rgba(0, 0, 0, 0.2)', + borderRadius: '50% 50% 0 0', + }); + closeBtnEl.addEventListener('click', () => { + // 关闭操作 + iconContainer.style.display = 'flex'; + if (frameContainer) { + frameContainer.style.display = 'none'; + } + }); + _frameContainer.appendChild(frameEl); + _frameContainer.appendChild(closeBtnEl); container.appendChild(_frameContainer); } else { // 已创建