@csntgao/uni-base 0.1.0

package/packages/web-components/src/customer-support-chat.ts

@@ -0,0 +1,862 @@
+import {
+  CustomerSupportClient,
+  CustomerSupportClientError,
+  type AiEmployeeConnectionState,
+  type CustomerSupportClientOptions,
+  type CustomerSupportErrorDetail,
+  type CustomerSupportMessage,
+  type CustomerSupportSession,
+} from '@uniplat/ai-employee-client'
+import { LitElement, css, html, nothing } from 'lit'
+import { prototypeIcon } from './prototype-icons'
+
+export type CustomerSupportChatConfig = CustomerSupportClientOptions
+
+export interface CustomerSupportChatEventMap {
+  ready: CustomEvent<{ sessionId: string | null }>
+  'message-sent': CustomEvent<{ sessionId: string; message: CustomerSupportMessage }>
+  'message-received': CustomEvent<{ sessionId: string; message: CustomerSupportMessage }>
+  'connection-state-change': CustomEvent<{ state: AiEmployeeConnectionState }>
+  'ai-chat-requested': CustomEvent<Record<string, never>>
+  closed: CustomEvent<Record<string, never>>
+  error: CustomEvent<CustomerSupportErrorDetail>
+}
+
+export class UniplatCustomerSupportChat extends LitElement {
+  static override properties = {
+    drawerOpen: { state: true },
+    messages: { state: true },
+    draft: { state: true },
+    sending: { state: true },
+    loading: { state: true },
+    visibleError: { state: true },
+    connectionState: { state: true },
+    currentSession: { state: true },
+    sessionPanelOpen: { state: true },
+    sessions: { state: true },
+    loadingSessions: { state: true },
+  }
+
+  static override styles = css`
+    :host {
+      --uniplat-customer-support-primary: #2e6bf5;
+      --uniplat-customer-support-background: #fff;
+      --uniplat-customer-support-surface: #f7fafd;
+      --uniplat-customer-support-text: #25303f;
+      --uniplat-customer-support-muted: #8b98a6;
+      --uniplat-customer-support-border: #e4ebf3;
+      --uniplat-customer-support-width: 420px;
+      --uniplat-customer-support-height: 100dvh;
+      --uniplat-customer-support-z-index: 510;
+      display: contents;
+      color: var(--uniplat-customer-support-text);
+      font-family:
+        Inter,
+        ui-sans-serif,
+        system-ui,
+        -apple-system,
+        BlinkMacSystemFont,
+        'Segoe UI',
+        sans-serif;
+    }
+
+    * {
+      box-sizing: border-box;
+    }
+
+    .drawer {
+      position: fixed;
+      z-index: var(--uniplat-customer-support-z-index);
+      inset: 0 0 0 auto;
+      display: flex;
+      width: var(--uniplat-customer-support-width);
+      max-width: 96vw;
+      height: var(--uniplat-customer-support-height);
+      flex-direction: column;
+      overflow: hidden;
+      border-left: 1px solid var(--uniplat-customer-support-border);
+      background: var(--uniplat-customer-support-background);
+      box-shadow: -14px 0 34px rgb(20 40 80 / 8%);
+    }
+
+    .header {
+      display: flex;
+      flex: 0 0 auto;
+      align-items: center;
+      gap: 10px;
+      padding: 16px 18px;
+      border-bottom: 1px solid #edf1f6;
+    }
+
+    button {
+      font: inherit;
+    }
+    .icon-button {
+      position: relative;
+      display: grid;
+      width: 34px;
+      height: 34px;
+      flex: 0 0 auto;
+      place-items: center;
+      padding: 0;
+      border: 0;
+      border-radius: 9px;
+      background: transparent;
+      color: #5a6673;
+      cursor: pointer;
+    }
+    .icon-button:hover,
+    .icon-button:focus-visible {
+      background: #f0f3f8;
+    }
+    .icon-button svg {
+      width: 19px;
+      height: 19px;
+    }
+    .conversation-unread,
+    .session-item-unread {
+      display: inline-grid;
+      min-width: 18px;
+      height: 18px;
+      place-items: center;
+      padding: 0 5px;
+      border-radius: 999px;
+      background: #d83a34;
+      color: #fff;
+      font-size: 10px;
+      font-weight: 700;
+      line-height: 1;
+    }
+    .conversation-unread {
+      position: absolute;
+      top: -3px;
+      right: -3px;
+    }
+    .advisor-mark {
+      display: grid;
+      width: 38px;
+      height: 38px;
+      flex: 0 0 auto;
+      place-items: center;
+      border-radius: 11px;
+      background: #eaf1fe;
+      color: var(--uniplat-customer-support-primary);
+    }
+    .advisor-mark svg {
+      width: 20px;
+      height: 20px;
+    }
+    .heading {
+      min-width: 0;
+      flex: 1;
+    }
+    .title {
+      overflow: hidden;
+      color: #182634;
+      font-size: 16px;
+      font-weight: 800;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .subtitle {
+      margin-top: 2px;
+      color: var(--uniplat-customer-support-muted);
+      font-size: 12.5px;
+    }
+
+    .status {
+      display: flex;
+      flex: 0 0 auto;
+      align-items: center;
+      gap: 6px;
+      padding: 10px 18px;
+      border-bottom: 1px solid #edf1f6;
+      color: #667384;
+      font-size: 12.5px;
+    }
+    .status-icon {
+      position: relative;
+      display: grid;
+      width: 14px;
+      height: 14px;
+      flex: 0 0 auto;
+      place-items: center;
+    }
+    .status-icon svg {
+      width: 14px;
+      height: 14px;
+    }
+    .status.success {
+      color: #49ad75;
+    }
+    .status.pending {
+      color: #e99a2c;
+    }
+    .status.muted {
+      color: #98a5b5;
+    }
+    .status-spinner {
+      width: 13px;
+      height: 13px;
+      border: 2px solid currentColor;
+      border-right-color: transparent;
+      border-radius: 50%;
+      animation: status-spin 0.8s linear infinite;
+    }
+    .status-stop {
+      display: grid;
+      width: 13px;
+      height: 13px;
+      place-items: center;
+      border: 1.5px solid currentColor;
+      border-radius: 50%;
+    }
+    .status-stop::after {
+      width: 5px;
+      height: 5px;
+      border-radius: 1px;
+      background: currentColor;
+      content: '';
+    }
+    @keyframes status-spin {
+      to {
+        transform: rotate(360deg);
+      }
+    }
+    @media (prefers-reduced-motion: reduce) {
+      .status-spinner {
+        animation: none;
+      }
+    }
+
+    .messages {
+      display: flex;
+      min-height: 0;
+      flex: 1;
+      flex-direction: column;
+      gap: 14px;
+      overflow-y: auto;
+      padding: 18px 14px;
+      background: var(--uniplat-customer-support-surface);
+    }
+    .empty {
+      margin: auto;
+      color: #98a5b5;
+      font-size: 14px;
+    }
+    .notice {
+      padding: 11px 12px;
+      border: 1px solid #efc1bc;
+      border-radius: 10px;
+      background: #fff8f7;
+      color: #b42318;
+      font-size: 13px;
+    }
+    .message-row {
+      display: flex;
+      align-items: flex-start;
+      gap: 9px;
+    }
+    .message-row.customer {
+      justify-content: flex-end;
+    }
+    .message-row.system {
+      justify-content: center;
+    }
+    .sender-avatar {
+      display: grid;
+      width: 30px;
+      height: 30px;
+      flex: 0 0 auto;
+      place-items: center;
+      border-radius: 50%;
+      background: #eaf1fe;
+      color: var(--uniplat-customer-support-primary);
+    }
+    .sender-avatar svg {
+      width: 16px;
+      height: 16px;
+    }
+    .message-column {
+      max-width: 82%;
+    }
+    .sender-name {
+      margin: 0 0 4px;
+      color: #98a5b5;
+      font-size: 12px;
+    }
+    .bubble {
+      padding: 12px 14px;
+      border: 1px solid #e1e8f1;
+      border-radius: 2px 12px 12px 12px;
+      background: #fff;
+      color: #25303f;
+      font-size: 14px;
+      line-height: 1.75;
+      overflow-wrap: anywhere;
+      white-space: pre-wrap;
+    }
+    .customer .bubble {
+      border-color: var(--uniplat-customer-support-primary);
+      border-radius: 12px 2px 12px 12px;
+      background: var(--uniplat-customer-support-primary);
+      color: #fff;
+    }
+    .system .bubble {
+      padding: 6px 10px;
+      border: 0;
+      border-radius: 999px;
+      background: #edf1f6;
+      color: #778494;
+      font-size: 12px;
+    }
+
+    .composer {
+      flex: 0 0 auto;
+      padding: 12px 14px 16px;
+      border-top: 1px solid #edf1f6;
+    }
+    .composer-row {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+    }
+    textarea {
+      min-width: 0;
+      height: 44px;
+      max-height: 116px;
+      flex: 1;
+      resize: none;
+      padding: 10px 12px;
+      border: 1px solid #e2e9f3;
+      border-radius: 10px;
+      outline: none;
+      color: #25303f;
+      font: inherit;
+      line-height: 22px;
+    }
+    textarea:focus {
+      border-color: var(--uniplat-customer-support-primary);
+    }
+    .send {
+      height: 44px;
+      flex: 0 0 auto;
+      padding: 0 18px;
+      border: 0;
+      border-radius: 10px;
+      background: var(--uniplat-customer-support-primary);
+      color: #fff;
+      font-weight: 700;
+      cursor: pointer;
+    }
+    .send:disabled {
+      cursor: default;
+      opacity: 0.45;
+    }
+    .composer-actions {
+      display: flex;
+      align-items: center;
+      margin-top: 10px;
+    }
+    .ai-service-button {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      padding: 0;
+      border: 0;
+      background: transparent;
+      color: var(--uniplat-customer-support-primary);
+      font-weight: 700;
+      cursor: pointer;
+    }
+    .ai-service-button:hover,
+    .ai-service-button:focus-visible {
+      text-decoration: underline;
+    }
+    .ai-service-button svg {
+      width: 17px;
+      height: 17px;
+    }
+
+    .session-panel {
+      position: absolute;
+      z-index: 2;
+      inset: 0;
+      display: flex;
+      flex-direction: column;
+      background: #fff;
+    }
+    .session-list {
+      min-height: 0;
+      flex: 1;
+      overflow-y: auto;
+      padding: 8px 10px;
+    }
+    .session-item {
+      display: flex;
+      width: 100%;
+      align-items: flex-start;
+      gap: 11px;
+      padding: 12px;
+      border: 0;
+      border-radius: 12px;
+      background: transparent;
+      color: inherit;
+      text-align: left;
+      cursor: pointer;
+    }
+    .session-item.current,
+    .session-item:hover {
+      background: #f1f5ff;
+    }
+    .session-copy {
+      min-width: 0;
+      flex: 1;
+    }
+    .session-title,
+    .session-preview {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .session-title {
+      color: #182634;
+      font-size: 14px;
+      font-weight: 700;
+    }
+    .session-preview {
+      margin-top: 3px;
+      color: #8b98a6;
+      font-size: 12.5px;
+    }
+    .session-time {
+      flex: 0 0 auto;
+      color: #a6b1be;
+      font-size: 11.5px;
+    }
+    .session-meta {
+      display: flex;
+      flex: 0 0 auto;
+      flex-direction: column;
+      align-items: flex-end;
+      gap: 7px;
+    }
+
+    @media (max-width: 520px) {
+      .drawer {
+        width: 100vw;
+        max-width: none;
+      }
+    }
+  `
+
+  declare private drawerOpen: boolean
+  declare private messages: CustomerSupportMessage[]
+  declare private draft: string
+  declare private sending: boolean
+  declare private loading: boolean
+  declare private visibleError: string
+  declare private connectionState: AiEmployeeConnectionState
+  declare private currentSession: CustomerSupportSession | null
+  declare private sessionPanelOpen: boolean
+  declare private sessions: CustomerSupportSession[]
+  declare private loadingSessions: boolean
+
+  private client: CustomerSupportClient | null = null
+  private config: CustomerSupportChatConfig | null = null
+  private disposeListeners: Array<() => void> = []
+
+  constructor() {
+    super()
+    this.drawerOpen = false
+    this.messages = []
+    this.draft = ''
+    this.sending = false
+    this.loading = false
+    this.visibleError = ''
+    this.connectionState = 'idle'
+    this.currentSession = null
+    this.sessionPanelOpen = false
+    this.sessions = []
+    this.loadingSessions = false
+  }
+
+  configure(config: CustomerSupportChatConfig): void {
+    this.releaseClient()
+    this.config = config
+    this.messages = []
+    this.currentSession = null
+    this.sessions = []
+    this.visibleError = ''
+  }
+
+  async open(): Promise<void> {
+    this.drawerOpen = true
+    if (!this.client) await this.startClient()
+  }
+
+  close(): void {
+    this.drawerOpen = false
+    this.sessionPanelOpen = false
+    this.dispatchSafe('closed', {})
+  }
+
+  override disconnectedCallback(): void {
+    this.releaseClient()
+    super.disconnectedCallback()
+  }
+
+  override render() {
+    if (!this.drawerOpen) return nothing
+    return html`
+      <section class="drawer" part="drawer" aria-label="人工客服">
+        ${this.renderMain()} ${this.sessionPanelOpen ? this.renderSessionPanel() : nothing}
+      </section>
+    `
+  }
+
+  private renderMain() {
+    const status = this.statusPresentation()
+    const unreadCount = this.totalUnreadCount()
+    return html`
+      <header class="header" part="header">
+        <button class="icon-button" aria-label="我的客服会话" @click=${this.openSessionPanel}>
+          ${prototypeIcon('messages')}
+          ${
+            unreadCount > 0
+              ? html`<span class="conversation-unread" aria-label="${unreadCount} 条未读"
+                  >${formatUnreadCount(unreadCount)}</span
+                >`
+              : nothing
+          }
+        </button>
+        <span class="advisor-mark">${prototypeIcon('headset')}</span>
+        <div class="heading">
+          <div class="title">企业客服人工顾问</div>
+          <div class="subtitle">${this.headerSubtitle()}</div>
+        </div>
+        <button class="icon-button" aria-label="关闭人工客服" @click=${this.close}>
+          ${prototypeIcon('x')}
+        </button>
+      </header>
+      <div class="status ${status.tone}" role="status" aria-live="polite">
+        <span class="status-icon" aria-hidden="true">${this.renderStatusIcon(status.icon)}</span>
+        ${status.label}
+      </div>
+      <main class="messages" part="messages">
+        ${this.visibleError ? html`<div class="notice">${this.visibleError}</div>` : nothing}
+        ${
+          this.loading
+            ? html`<div class="empty">正在加载客服会话…</div>`
+            : this.messages.length
+              ? this.messages.map((message) => this.renderMessage(message))
+              : html`<div class="empty">开始和人工客服对话吧</div>`
+        }
+      </main>
+      <footer class="composer" part="composer">
+        <div class="composer-row">
+          <textarea
+            .value=${this.draft}
+            placeholder="输入你的问题……"
+            aria-label="客服消息"
+            @input=${this.handleDraftInput}
+            @keydown=${this.handleDraftKeydown}
+          ></textarea>
+          <button class="send" ?disabled=${this.sending || !this.draft.trim()} @click=${this.send}>
+            发送
+          </button>
+        </div>
+        <div class="composer-actions">
+          <button class="ai-service-button" type="button" @click=${this.requestAiChat}>
+            ${prototypeIcon('robot')}转AI客服
+          </button>
+        </div>
+      </footer>
+    `
+  }
+
+  private renderMessage(message: CustomerSupportMessage) {
+    if (message.senderType === 'system') {
+      return html`<div class="message-row system">
+        <div class="bubble">${message.content}</div>
+      </div>`
+    }
+    const customer = message.senderType === 'customer'
+    return html`
+      <div class="message-row ${customer ? 'customer' : 'agent'}">
+        ${customer ? nothing : html`<span class="sender-avatar">${prototypeIcon('headset')}</span>`}
+        <div class="message-column">
+          ${
+            customer
+              ? nothing
+              : html`<div class="sender-name">${message.senderName || '人工顾问'}</div>`
+          }
+          <div class="bubble">${message.content}</div>
+        </div>
+      </div>
+    `
+  }
+
+  private renderSessionPanel() {
+    return html`
+      <section class="session-panel" aria-label="我的客服会话">
+        <header class="header">
+          <button class="icon-button" aria-label="返回当前会话" @click=${this.closeSessionPanel}>
+            ${prototypeIcon('arrow-left')}
+          </button>
+          <div class="heading"><div class="title">我的会话</div></div>
+          <button class="icon-button" aria-label="开启新客服会话" @click=${this.createConversation}>
+            ${prototypeIcon('plus')}
+          </button>
+          <button class="icon-button" aria-label="关闭人工客服" @click=${this.close}>
+            ${prototypeIcon('x')}
+          </button>
+        </header>
+        <div class="session-list">
+          ${
+            this.loadingSessions
+              ? html`<div class="empty">正在加载会话…</div>`
+              : this.sessions.map(
+                  (session) => html`
+                    <button
+                      class="session-item ${session.id === this.currentSession?.id ? 'current' : ''}"
+                      @click=${() => this.selectSession(session.id)}
+                    >
+                      <span class="advisor-mark">${prototypeIcon('headset')}</span>
+                      <span class="session-copy">
+                        <span class="session-title">${session.title}</span>
+                        <span class="session-preview">${session.lastMessage || '暂无消息'}</span>
+                      </span>
+                      <span class="session-meta">
+                        <span class="session-time">${relativeTime(session.updatedAt)}</span>
+                        ${
+                          session.id !== this.currentSession?.id && session.unreadCount > 0
+                            ? html`<span
+                                class="session-item-unread"
+                                aria-label="${session.unreadCount} 条未读"
+                                >${formatUnreadCount(session.unreadCount)}</span
+                              >`
+                            : nothing
+                        }
+                      </span>
+                    </button>
+                  `,
+                )
+          }
+        </div>
+      </section>
+    `
+  }
+
+  private async startClient(): Promise<void> {
+    if (!this.config) {
+      this.showError({
+        code: 'INVALID_CONFIGURATION',
+        message: '人工客服暂未配置。',
+        recoverable: false,
+      })
+      return
+    }
+    this.loading = true
+    this.visibleError = ''
+    try {
+      const client = new CustomerSupportClient(this.config)
+      this.client = client
+      this.disposeListeners = [
+        client.on('ready', (detail) => this.dispatchSafe('ready', detail)),
+        client.on('session', ({ session }) => {
+          this.currentSession = session
+        }),
+        client.on('sessions', ({ sessions }) => {
+          this.sessions = [...sessions]
+        }),
+        client.on('history', ({ messages }) => {
+          this.messages = [...messages]
+          this.scrollToEnd()
+        }),
+        client.on('message', (detail) => {
+          this.messages = [...client.messages]
+          this.dispatchSafe(detail.source === 'local' ? 'message-sent' : 'message-received', {
+            sessionId: detail.sessionId,
+            message: detail.message,
+          })
+          this.scrollToEnd()
+        }),
+        client.on('connection-state-change', ({ current }) => {
+          this.connectionState = current
+          if (current === 'connected') this.visibleError = ''
+          this.dispatchSafe('connection-state-change', { state: current })
+        }),
+        client.on('error', (detail) => this.showError(detail)),
+      ]
+      await client.start()
+    } catch {
+      this.showError({
+        code: 'INVALID_CONFIGURATION',
+        message: '人工客服配置不可用。',
+        recoverable: false,
+      })
+    } finally {
+      this.loading = false
+    }
+  }
+
+  private handleDraftInput(event: Event): void {
+    this.draft = (event.currentTarget as HTMLTextAreaElement).value
+  }
+
+  private handleDraftKeydown(event: KeyboardEvent): void {
+    if (event.key !== 'Enter' || event.shiftKey || event.isComposing) return
+    event.preventDefault()
+    void this.send()
+  }
+
+  private async send(): Promise<void> {
+    const content = this.draft.trim()
+    if (!content || !this.client || this.sending) return
+    this.sending = true
+    this.visibleError = ''
+    try {
+      await this.client.sendMessage(content)
+      this.draft = ''
+    } catch (error) {
+      if (!(error instanceof CustomerSupportClientError)) {
+        this.visibleError = '消息发送失败，请稍后重试。'
+      }
+    } finally {
+      this.sending = false
+    }
+  }
+
+  private openSessionPanel = async (): Promise<void> => {
+    if (!this.client) return
+    this.sessionPanelOpen = true
+    this.loadingSessions = true
+    try {
+      this.sessions = [...(await this.client.listSessions())]
+    } catch {
+      this.visibleError = '客服会话列表加载失败，请稍后重试。'
+    } finally {
+      this.loadingSessions = false
+    }
+  }
+
+  private closeSessionPanel = (): void => {
+    this.sessionPanelOpen = false
+  }
+
+  private createConversation = async (): Promise<void> => {
+    if (!this.client) return
+    try {
+      this.client.prepareNewConversation()
+      this.currentSession = null
+      this.messages = []
+      this.sessionPanelOpen = false
+    } catch {
+      this.visibleError = '暂时无法开启新的客服会话。'
+    }
+  }
+
+  private async selectSession(sessionId: string): Promise<void> {
+    if (!this.client || sessionId === this.currentSession?.id) {
+      this.sessionPanelOpen = false
+      return
+    }
+    this.loading = true
+    try {
+      await this.client.bindSession(sessionId)
+      this.sessionPanelOpen = false
+    } catch {
+      this.visibleError = '暂时无法打开该客服会话。'
+    } finally {
+      this.loading = false
+    }
+  }
+
+  private headerSubtitle(): string {
+    if (!this.currentSession) return '尚未建立客服会话'
+    if (this.currentSession.status === 'active') return '人工客服已接入，可直接发送消息'
+    if (this.currentSession.status === 'waiting') return '等待客服接入'
+    return '客服会话已结束'
+  }
+
+  private totalUnreadCount(): number {
+    return this.sessions.reduce(
+      (total, session) =>
+        session.id === this.currentSession?.id ? total : total + session.unreadCount,
+      0,
+    )
+  }
+
+  private statusPresentation(): CustomerSupportStatusPresentation {
+    const realtimeConnected = this.connectionState === 'connected'
+    if (!this.currentSession) {
+      return realtimeConnected
+        ? { tone: 'success', icon: 'check', label: '客服通道已连接' }
+        : { tone: 'pending', icon: 'loading', label: '正在连接客服通道' }
+    }
+    if (this.currentSession.status === 'closed') {
+      return { tone: 'muted', icon: 'stop', label: '会话已结束' }
+    }
+    if (this.currentSession.status === 'waiting') {
+      return { tone: 'pending', icon: 'loading', label: '等待客服接入' }
+    }
+    return realtimeConnected
+      ? { tone: 'success', icon: 'check', label: '人工客服在线' }
+      : { tone: 'pending', icon: 'loading', label: '正在恢复实时连接' }
+  }
+
+  private renderStatusIcon(icon: CustomerSupportStatusIcon) {
+    if (icon === 'check') return prototypeIcon('circle-check-filled')
+    if (icon === 'stop') return html`<span class="status-stop"></span>`
+    return html`<span class="status-spinner"></span>`
+  }
+
+  private requestAiChat = (): void => this.dispatchSafe('ai-chat-requested', {})
+
+  private showError(detail: CustomerSupportErrorDetail): void {
+    this.visibleError = detail.message
+    this.dispatchSafe('error', detail)
+  }
+
+  private scrollToEnd(): void {
+    void this.updateComplete.then(() => {
+      const container = this.renderRoot.querySelector<HTMLElement>('.messages')
+      if (container) container.scrollTop = container.scrollHeight
+    })
+  }
+
+  private releaseClient(): void {
+    for (const dispose of this.disposeListeners) dispose()
+    this.disposeListeners = []
+    this.client?.destroy()
+    this.client = null
+    this.connectionState = 'idle'
+  }
+
+  private dispatchSafe(type: string, detail: unknown): void {
+    this.dispatchEvent(new CustomEvent(type, { detail, bubbles: true, composed: true }))
+  }
+}
+
+type CustomerSupportStatusIcon = 'check' | 'loading' | 'stop'
+
+interface CustomerSupportStatusPresentation {
+  tone: 'success' | 'pending' | 'muted'
+  icon: CustomerSupportStatusIcon
+  label: string
+}
+
+function formatUnreadCount(value: number): string {
+  return value > 99 ? '99+' : String(value)
+}
+
+function relativeTime(value: string): string {
+  const timestamp = Date.parse(value)
+  if (!Number.isFinite(timestamp)) return ''
+  const minutes = Math.max(0, Math.floor((Date.now() - timestamp) / 60_000))
+  if (minutes < 1) return '刚刚'
+  if (minutes < 60) return `${minutes} 分钟前`
+  if (minutes < 1_440) return `${Math.floor(minutes / 60)} 小时前`
+  return `${Math.floor(minutes / 1_440)} 天前`
+}