@csntgao/uni-base 0.1.0

package/packages/web-components/src/notification-popover.ts

@@ -0,0 +1,615 @@
+import {
+  NotificationCenterClient,
+  type NotificationCenterErrorDetail,
+  type NotificationCenterTransport,
+  type NotificationDto,
+} from '@uniplat/ai-employee-client'
+import { LitElement, css, html, nothing, type TemplateResult } from 'lit'
+import { unsafeSVG } from 'lit/directives/unsafe-svg.js'
+import { prototypeIcon, type PrototypeIconName } from './prototype-icons'
+import type { NotificationCenterTypeIconMap } from './notification-center'
+
+export interface NotificationPopoverConfig {
+  /** Empty means the current principal's notifications across all applications. */
+  applicationName: string
+  transport: NotificationCenterTransport
+  typeIcons?: NotificationCenterTypeIconMap
+}
+
+export interface NotificationCenterRequestedDetail {
+  notificationId?: string
+}
+
+export interface NotificationPopoverEventMap {
+  ready: CustomEvent<Record<string, never>>
+  'unread-count-change': CustomEvent<{ unreadCount: number }>
+  'notification-read': CustomEvent<{ notificationId: string }>
+  'notification-center-requested': CustomEvent<NotificationCenterRequestedDetail>
+  closed: CustomEvent<Record<string, never>>
+  error: CustomEvent<NotificationCenterErrorDetail>
+}
+
+interface NotificationVisual {
+  icon: PrototypeIconName
+  tint: string
+  accent: string
+}
+
+const MAX_VISIBLE_ITEMS = 4
+const DEFAULT_VISUAL: NotificationVisual = {
+  icon: 'bell',
+  tint: '#e6eefe',
+  accent: '#2e6bf5',
+}
+const TYPE_VISUALS: Readonly<Record<string, NotificationVisual>> = {
+  alert: { icon: 'speakerphone', tint: '#fff4e2', accent: '#e8590c' },
+  todo: { icon: 'clipboard-check', tint: '#fff4e2', accent: '#e8590c' },
+  report: { icon: 'coin', tint: '#e6eefe', accent: '#2e6bf5' },
+  care: { icon: 'discount-check', tint: '#e3f7ef', accent: '#0ca678' },
+  certification: { icon: 'discount-check', tint: '#e3f7ef', accent: '#0ca678' },
+  message: { icon: 'message-2', tint: '#efe9fd', accent: '#6741d9' },
+  policy: { icon: 'speakerphone', tint: '#fff4e2', accent: '#e8590c' },
+  service: { icon: 'coin', tint: '#e6eefe', accent: '#2e6bf5' },
+}
+
+/**
+ * Compact 40 prototype notification popover.
+ *
+ * It reuses the notification-center HTTP projection and consumes host-forwarded
+ * realtime events. The host owns the bell trigger, positioning and the single
+ * realtime socket; this component owns the popover panel and close behaviour.
+ */
+export class UniplatNotificationPopover extends LitElement {
+  static override properties = {
+    opened: { type: Boolean, reflect: true, attribute: 'open' },
+    items: { state: true },
+    unreadCount: { state: true },
+    loading: { state: true },
+    markingAllRead: { state: true },
+    visibleError: { state: true },
+  }
+
+  static override styles = css`
+    :host {
+      --uniplat-notification-popover-width: 376px;
+      --uniplat-notification-popover-primary: #2e6bf5;
+      --uniplat-notification-popover-text: #182634;
+      --uniplat-notification-popover-muted: #7a8794;
+      --uniplat-notification-popover-border: #e4ebf3;
+      --uniplat-notification-popover-background: #fff;
+      --uniplat-notification-popover-font-family:
+        'Noto Sans SC', Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
+        'Segoe UI', sans-serif;
+      position: relative;
+      z-index: 200;
+      display: block;
+      width: min(var(--uniplat-notification-popover-width), calc(100vw - 24px));
+      color: var(--uniplat-notification-popover-text);
+      font-family: var(--uniplat-notification-popover-font-family);
+    }
+    :host(:not([open])) {
+      display: none;
+    }
+    * {
+      box-sizing: border-box;
+    }
+    button {
+      font: inherit;
+    }
+    .backdrop {
+      position: fixed;
+      z-index: 0;
+      inset: 0;
+      padding: 0;
+      border: 0;
+      background: transparent;
+      cursor: default;
+    }
+    .panel {
+      position: relative;
+      z-index: 1;
+      width: 100%;
+      overflow: hidden;
+      border: 1px solid var(--uniplat-notification-popover-border);
+      border-radius: 14px;
+      background: var(--uniplat-notification-popover-background);
+      box-shadow: 0 18px 44px rgb(20 40 80 / 16%);
+    }
+    .header {
+      display: flex;
+      align-items: center;
+      gap: 9px;
+      min-height: 49px;
+      padding: 14px 16px;
+      border-bottom: 1px solid #edf1f6;
+    }
+    .title {
+      min-width: 0;
+      flex: 1;
+      font-size: 14.5px;
+      font-weight: 800;
+    }
+    .unread-badge {
+      flex: 0 0 auto;
+      padding: 2px 8px;
+      border-radius: 5px;
+      background: #fdeced;
+      color: #e5484d;
+      font-size: 11.5px;
+      font-weight: 700;
+    }
+    .mark-all {
+      flex: 0 0 auto;
+      padding: 2px 0;
+      border: 0;
+      background: transparent;
+      color: var(--uniplat-notification-popover-primary);
+      font-size: 12.5px;
+      font-weight: 600;
+      cursor: pointer;
+    }
+    .mark-all:hover:not(:disabled) {
+      text-decoration: underline;
+    }
+    .mark-all:disabled {
+      cursor: default;
+      opacity: 0.55;
+    }
+    .list {
+      display: flex;
+      max-height: 352px;
+      flex-direction: column;
+      overflow-y: auto;
+      overscroll-behavior: contain;
+    }
+    .list::-webkit-scrollbar {
+      width: 5px;
+    }
+    .list::-webkit-scrollbar-thumb {
+      border-radius: 3px;
+      background: #b9c4d0;
+    }
+    .item {
+      display: flex;
+      width: 100%;
+      gap: 11px;
+      padding: 13px 16px;
+      border: 0;
+      border-bottom: 1px solid #f3f6fa;
+      background: transparent;
+      color: inherit;
+      text-align: left;
+      cursor: pointer;
+    }
+    .item:hover {
+      background: #f7faff;
+    }
+    .icon-wrap {
+      display: flex;
+      width: 34px;
+      height: 34px;
+      flex: 0 0 auto;
+      align-items: center;
+      justify-content: center;
+      border-radius: 10px;
+      background: var(--item-tint);
+      color: var(--item-accent);
+    }
+    .icon-wrap svg,
+    .icon-wrap img {
+      width: 17px;
+      height: 17px;
+    }
+    .custom-text-icon {
+      font-size: 17px;
+      line-height: 1;
+    }
+    .item-body {
+      min-width: 0;
+      flex: 1;
+    }
+    .item-head {
+      display: flex;
+      align-items: center;
+      gap: 7px;
+    }
+    .item-title {
+      overflow: hidden;
+      min-width: 0;
+      color: var(--uniplat-notification-popover-text);
+      font-size: 13.5px;
+      font-weight: 700;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .unread-dot {
+      width: 7px;
+      height: 7px;
+      flex: 0 0 auto;
+      border-radius: 50%;
+      background: #e5484d;
+    }
+    .summary {
+      display: -webkit-box;
+      overflow: hidden;
+      margin-top: 3px;
+      color: var(--uniplat-notification-popover-muted);
+      font-size: 12px;
+      line-height: 1.65;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 2;
+    }
+    .meta {
+      display: block;
+      margin-top: 5px;
+      color: #a6b1be;
+      font-size: 11px;
+    }
+    .empty,
+    .loading {
+      display: flex;
+      min-height: 112px;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      gap: 7px;
+      padding: 28px 16px;
+      color: #98a4b2;
+      font-size: 13px;
+      text-align: center;
+    }
+    .empty svg {
+      width: 26px;
+      height: 26px;
+      color: #c7d1dd;
+    }
+    .notice {
+      margin: 12px 16px;
+      padding: 10px;
+      border: 1px solid rgb(229 72 77 / 25%);
+      border-radius: 8px;
+      background: rgb(229 72 77 / 6%);
+      color: #c43c40;
+      font-size: 12px;
+      line-height: 1.5;
+    }
+    .footer {
+      display: flex;
+      width: 100%;
+      height: 46px;
+      align-items: center;
+      justify-content: center;
+      gap: 6px;
+      border: 0;
+      border-top: 1px solid #edf1f6;
+      background: var(--uniplat-notification-popover-background);
+      color: var(--uniplat-notification-popover-primary);
+      font-size: 13.5px;
+      font-weight: 700;
+      cursor: pointer;
+    }
+    .footer:hover {
+      background: #f7faff;
+    }
+    .footer svg {
+      width: 15px;
+      height: 15px;
+    }
+  `
+
+  declare opened: boolean
+  declare private items: NotificationDto[]
+  declare private unreadCount: number
+  declare private loading: boolean
+  declare private markingAllRead: boolean
+  declare private visibleError: string
+
+  private client: NotificationCenterClient | null = null
+  private config: NotificationPopoverConfig | null = null
+  private disposeListeners: Array<() => void> = []
+  private outsideClickListening = false
+  private outsideClickGeneration = 0
+  private outsideClickTimer: ReturnType<typeof setTimeout> | null = null
+
+  constructor() {
+    super()
+    this.opened = false
+    this.items = []
+    this.unreadCount = 0
+    this.loading = false
+    this.markingAllRead = false
+    this.visibleError = ''
+  }
+
+  configure(config: NotificationPopoverConfig): void {
+    this.releaseClient()
+    this.config = config
+    this.items = []
+    this.unreadCount = 0
+    this.visibleError = ''
+    if (this.isConnected) void this.startClient()
+  }
+
+  open(): void {
+    this.opened = true
+    this.scheduleOutsideClickListener()
+  }
+
+  close(): void {
+    if (!this.opened) return
+    this.opened = false
+    this.removeOutsideClickListener()
+    this.dispatchSafe('closed', {})
+  }
+
+  toggle(): void {
+    if (this.opened) this.close()
+    else this.open()
+  }
+
+  async refresh(): Promise<void> {
+    await this.client?.refresh()
+  }
+
+  applyRealtimeEvent(event: unknown): void {
+    this.client?.applyRealtimeEvent(event)
+  }
+
+  getUnreadCount(): number {
+    return this.unreadCount
+  }
+
+  override connectedCallback(): void {
+    super.connectedCallback()
+    if (this.config && !this.client) void this.startClient()
+    if (this.opened) this.scheduleOutsideClickListener()
+  }
+
+  override disconnectedCallback(): void {
+    this.removeOutsideClickListener()
+    this.releaseClient()
+    super.disconnectedCallback()
+  }
+
+  override render() {
+    const unreadItems = this.items
+      .filter((item) => item.readStatus === 'unread')
+      .slice(0, MAX_VISIBLE_ITEMS)
+    return html`
+      <button
+        class="backdrop"
+        type="button"
+        aria-label="关闭消息通知"
+        @click=${this.close}
+      ></button>
+      <section class="panel" part="panel" aria-label="消息通知">
+        <header class="header" part="header">
+          <span class="title">消息通知</span>
+          ${
+            this.unreadCount > 0
+              ? html`
+                  <span class="unread-badge">${this.unreadCount} 条未读</span>
+                  <button
+                    class="mark-all"
+                    type="button"
+                    ?disabled=${this.markingAllRead}
+                    @click=${this.markAllRead}
+                  >
+                    全部已读
+                  </button>
+                `
+              : nothing
+          }
+        </header>
+        <div class="list" part="list">
+          ${this.visibleError ? html`<div class="notice">${this.visibleError}</div>` : nothing}
+          ${
+            this.loading
+              ? html`<div class="loading">消息加载中…</div>`
+              : unreadItems.length
+                ? unreadItems.map((item) => this.renderItem(item))
+                : html`<div class="empty">
+                    ${prototypeIcon('mail-check')}<span>暂无未读消息</span>
+                  </div>`
+          }
+        </div>
+        <button class="footer" part="footer" type="button" @click=${this.requestAllNotifications}>
+          查看全部消息 ${prototypeIcon('arrow-right')}
+        </button>
+      </section>
+    `
+  }
+
+  private renderItem(item: NotificationDto) {
+    const visual = this.typeVisual(item.type)
+    return html`
+      <button
+        class="item"
+        part="item"
+        type="button"
+        style=${`--item-tint:${visual.tint};--item-accent:${visual.accent}`}
+        @click=${() => this.requestNotification(item)}
+      >
+        <span class="icon-wrap">${this.renderTypeIcon(item.type, visual)}</span>
+        <span class="item-body">
+          <span class="item-head">
+            <span class="item-title">${item.title}</span>
+            <span class="unread-dot" aria-label="未读"></span>
+          </span>
+          <span class="summary">${item.summary}</span>
+          <span class="meta">${typeLabel(item)} · ${formatCompactTimestamp(item.createdAt)}</span>
+        </span>
+      </button>
+    `
+  }
+
+  private renderTypeIcon(type: string, visual: NotificationVisual): TemplateResult {
+    const custom = this.config?.typeIcons?.[type]
+    if (custom) {
+      const value = custom.trim()
+      const iconUrl = safeIconUrl(value)
+      if (iconUrl) return html`<img src=${iconUrl} alt="" width="17" height="17" />`
+      if (isSafeInlineSvg(value)) return html`${unsafeSVG(value)}`
+      if (/^(?:https?:\/\/|<svg[\s>])/i.test(value)) return prototypeIcon(visual.icon)
+      return html`<span class="custom-text-icon">${value}</span>`
+    }
+    return prototypeIcon(visual.icon)
+  }
+
+  private typeVisual(type: string): NotificationVisual {
+    return TYPE_VISUALS[type.trim()] ?? DEFAULT_VISUAL
+  }
+
+  private async startClient(): Promise<void> {
+    if (!this.config) return
+    this.loading = true
+    this.visibleError = ''
+    try {
+      const client = new NotificationCenterClient({
+        transport: this.config.transport,
+        applicationName: this.config.applicationName,
+        pageSize: MAX_VISIBLE_ITEMS,
+        readStatus: 'unread',
+      })
+      this.client = client
+      this.disposeListeners = [
+        client.on('ready', () => this.dispatchSafe('ready', {})),
+        client.on('inbox', ({ items }) => {
+          this.items = [...items]
+          this.visibleError = ''
+        }),
+        client.on('unread-count-change', ({ unreadCount }) => {
+          this.unreadCount = unreadCount
+          this.dispatchSafe('unread-count-change', { unreadCount })
+        }),
+        client.on('notification-read', (detail) => this.dispatchSafe('notification-read', detail)),
+        client.on('error', (detail) => this.showError(detail)),
+      ]
+      await client.start()
+    } catch {
+      this.showError({
+        code: 'INVALID_CONFIGURATION',
+        message: '消息通知配置不可用。',
+        recoverable: false,
+      })
+    } finally {
+      this.loading = false
+    }
+  }
+
+  private markAllRead = async (): Promise<void> => {
+    if (!this.client || this.markingAllRead) return
+    this.markingAllRead = true
+    try {
+      await this.client.markAllRead()
+    } finally {
+      this.markingAllRead = false
+    }
+  }
+
+  private requestNotification(item: NotificationDto): void {
+    if (item.readStatus === 'unread') void this.client?.markRead(item.id)
+    this.close()
+    this.dispatchSafe('notification-center-requested', { notificationId: item.id })
+  }
+
+  private requestAllNotifications = (): void => {
+    this.close()
+    this.dispatchSafe('notification-center-requested', {})
+  }
+
+  private scheduleOutsideClickListener(): void {
+    const generation = ++this.outsideClickGeneration
+    if (this.outsideClickTimer !== null) clearTimeout(this.outsideClickTimer)
+    this.outsideClickTimer = setTimeout(() => {
+      this.outsideClickTimer = null
+      if (generation !== this.outsideClickGeneration || !this.opened || !this.isConnected) return
+      if (this.outsideClickListening) return
+      this.ownerDocument.addEventListener('click', this.handleDocumentClick)
+      this.outsideClickListening = true
+    }, 0)
+  }
+
+  private removeOutsideClickListener(): void {
+    this.outsideClickGeneration += 1
+    if (this.outsideClickTimer !== null) {
+      clearTimeout(this.outsideClickTimer)
+      this.outsideClickTimer = null
+    }
+    if (!this.outsideClickListening) return
+    this.ownerDocument.removeEventListener('click', this.handleDocumentClick)
+    this.outsideClickListening = false
+  }
+
+  private handleDocumentClick = (event: MouseEvent): void => {
+    if (!this.opened || event.composedPath().includes(this)) return
+    this.close()
+  }
+
+  private showError(detail: NotificationCenterErrorDetail): void {
+    this.visibleError = detail.message
+    this.dispatchSafe('error', detail)
+  }
+
+  private releaseClient(): void {
+    for (const dispose of this.disposeListeners) dispose()
+    this.disposeListeners = []
+    this.client?.destroy()
+    this.client = null
+  }
+
+  private dispatchSafe(type: string, detail: unknown): void {
+    this.dispatchEvent(new CustomEvent(type, { detail, bubbles: true, composed: true }))
+  }
+}
+
+function typeLabel(item: NotificationDto): string {
+  return item.typeName.trim() || item.type.trim()
+}
+
+function formatCompactTimestamp(value: string): string {
+  const timestamp = Date.parse(value)
+  if (!Number.isFinite(timestamp)) return ''
+  const date = new Date(timestamp)
+  const now = new Date()
+  const elapsed = Math.max(0, now.getTime() - timestamp)
+  if (elapsed < 60_000) return '刚刚'
+  if (elapsed < 60 * 60_000) return `${Math.floor(elapsed / 60_000)} 分钟前`
+  if (elapsed < 6 * 60 * 60_000 && date.toDateString() === now.toDateString()) {
+    return `${Math.floor(elapsed / (60 * 60_000))} 小时前`
+  }
+  const hm = `${pad(date.getHours())}:${pad(date.getMinutes())}`
+  if (date.toDateString() === now.toDateString()) return `今天 ${hm}`
+  const yesterday = new Date(now)
+  yesterday.setDate(now.getDate() - 1)
+  if (date.toDateString() === yesterday.toDateString()) return `昨天 ${hm}`
+  const md = `${date.getMonth() + 1}月${date.getDate()}日`
+  return date.getFullYear() === now.getFullYear() ? md : `${date.getFullYear()}年${md}`
+}
+
+function safeIconUrl(value: string): string | null {
+  try {
+    const url = new URL(value)
+    if (!['http:', 'https:'].includes(url.protocol) || url.username || url.password || url.hash) {
+      return null
+    }
+    for (const key of url.searchParams.keys()) {
+      if (/token|ticket|jwt|auth|signature|credential|secret/i.test(key)) return null
+    }
+    return url.href
+  } catch {
+    return null
+  }
+}
+
+function isSafeInlineSvg(value: string): boolean {
+  if (!/^<svg[\s>]/i.test(value)) return false
+  if (/<script|<foreignobject|<image|<use/i.test(value)) return false
+  if (/\son\w+\s*=/i.test(value)) return false
+  if (/javascript:|\b(?:xlink:)?href\s*=|\bstyle\s*=|url\s*\(/i.test(value)) return false
+  return true
+}
+
+function pad(value: number): string {
+  return value < 10 ? `0${value}` : String(value)
+}