@csntgao/uni-base 0.1.0

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

@@ -0,0 +1,1066 @@
+import {
+  NotificationCenterClient,
+  type NotificationCenterClientOptions,
+  type NotificationCenterErrorDetail,
+  type NotificationDto,
+  type NotificationTypeSummary,
+} from '@uniplat/ai-employee-client'
+import { LitElement, css, html, nothing, type TemplateResult } from 'lit'
+import { unsafeSVG } from 'lit/directives/unsafe-svg.js'
+import { renderSafeMarkdown } from './safe-markdown'
+
+export type NotificationCenterTypeIconMap = Readonly<Record<string, string>>
+
+export interface NotificationCenterConfig extends NotificationCenterClientOptions {
+  typeIcons?: NotificationCenterTypeIconMap
+}
+
+export interface NotificationResourceRequestedDetail {
+  resourceType: string
+  id: string
+  aeCode?: string
+  sessionId?: string
+}
+
+export interface NotificationCenterEventMap {
+  ready: CustomEvent<Record<string, never>>
+  'unread-count-change': CustomEvent<{ unreadCount: number }>
+  'notification-read': CustomEvent<{ notificationId: string }>
+  'notification-resource-requested': CustomEvent<NotificationResourceRequestedDetail>
+  error: CustomEvent<NotificationCenterErrorDetail>
+}
+
+/*
+ * 只保留原型 .notif-icon-wrap 的图标与色底；分类展示名一律来自后端
+ * notification_type_name，SDK 不维护 code 到中文名的映射。
+ */
+interface NotificationTypeMeta {
+  icon: string
+  tone: 'alert' | 'info' | 'report'
+}
+
+const TYPE_META: Readonly<Record<string, NotificationTypeMeta>> = {
+  alert: { icon: '⚠️', tone: 'alert' },
+  todo: { icon: '📑', tone: 'info' },
+  report: { icon: '📊', tone: 'report' },
+  care: { icon: '🎂', tone: 'info' },
+}
+const DEFAULT_TYPE_META: NotificationTypeMeta = { icon: '🔔', tone: 'info' }
+const ALL_TAB_LABEL = '全部'
+
+export class UniplatNotificationCenter extends LitElement {
+  static override properties = {
+    items: { state: true },
+    selectedId: { state: true },
+    activeTab: { state: true },
+    availableTypes: { state: true },
+    unreadCount: { state: true },
+    hasMore: { state: true },
+    loading: { state: true },
+    loadingMore: { state: true },
+    markingAllRead: { state: true },
+    visibleError: { state: true },
+  }
+
+  static override styles = css`
+    :host {
+      --uniplat-notification-primary: #3d7eff;
+      --uniplat-notification-background: #fff;
+      --uniplat-notification-surface: #f7f9fc;
+      --uniplat-notification-text: #1a202c;
+      --uniplat-notification-muted: #94a3b8;
+      --uniplat-notification-border: #e2e8f0;
+      --uniplat-notification-alert: #ef4444;
+      --uniplat-notification-warning: #f59e0b;
+      --uniplat-notification-success: #10b981;
+      --uniplat-notification-font-family:
+        'Noto Sans SC', Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
+        'Segoe UI', sans-serif;
+      display: block;
+      height: 100%;
+      color: var(--uniplat-notification-text);
+      font-family: var(--uniplat-notification-font-family);
+      font-size: 13px;
+    }
+    * {
+      box-sizing: border-box;
+    }
+    .nc-panel {
+      display: flex;
+      height: 100%;
+      min-height: 0;
+      flex-direction: column;
+      background: var(--uniplat-notification-background);
+    }
+    /* 原型 .page-bar：42px 高、13px 标题 */
+    .topbar {
+      display: flex;
+      flex: 0 0 auto;
+      align-items: center;
+      gap: 8px;
+      height: 42px;
+      padding: 0 20px;
+      border-bottom: 1px solid var(--uniplat-notification-border);
+      background: var(--uniplat-notification-background);
+    }
+    .topbar-title {
+      display: inline-flex;
+      flex: 1;
+      align-items: center;
+      gap: 6px;
+      font-size: 13px;
+      font-weight: 600;
+    }
+    button {
+      font: inherit;
+    }
+    /* 原型 .btn-outline（顶栏内覆写为 30px / 11px） */
+    .mark-all,
+    .load-more,
+    .mark-read {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      gap: 5px;
+      border: 1px solid var(--uniplat-notification-border);
+      border-radius: 7px;
+      background: var(--uniplat-notification-background);
+      color: #4a5568;
+      cursor: pointer;
+      transition: all 0.15s;
+    }
+    .mark-all:hover:not(:disabled),
+    .load-more:hover:not(:disabled),
+    .mark-read:hover:not(:disabled) {
+      border-color: var(--uniplat-notification-primary);
+      color: var(--uniplat-notification-primary);
+    }
+    .mark-all {
+      flex: 0 0 auto;
+      height: 30px;
+      padding: 0 14px;
+      font-size: 11px;
+    }
+    .mark-all:disabled {
+      cursor: default;
+      opacity: 0.5;
+    }
+    /* 原型 .inbox-layout / .inbox-list / .inbox-detail */
+    .body {
+      display: flex;
+      min-height: 0;
+      flex: 1;
+      overflow: hidden;
+    }
+    .list-pane {
+      display: flex;
+      width: 340px;
+      min-width: 0;
+      flex: 0 0 340px;
+      flex-direction: column;
+      overflow: hidden;
+      border-right: 1px solid var(--uniplat-notification-border);
+      background: var(--uniplat-notification-background);
+    }
+    .list-head {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 16px;
+      border-bottom: 1px solid var(--uniplat-notification-border);
+    }
+    .list-title {
+      font-size: 14px;
+      font-weight: 600;
+    }
+    .list-count {
+      color: var(--uniplat-notification-primary);
+      font-size: 11px;
+    }
+    /*
+     * 原型 .inbox-filters 是隐藏滚动条的单行横向滚动，那是为固定 5 个页签设计的。
+     * 分类改为数据驱动后页签数量不再可控，单行滚动会把新分类裁到容器外且无滚动条
+     * 提示，故改为换行，其余尺寸与配色仍沿用原型。
+     */
+    .tabs {
+      display: flex;
+      gap: 6px;
+      padding: 10px 16px;
+      flex-wrap: wrap;
+      border-bottom: 1px solid var(--uniplat-notification-border);
+    }
+    .tab {
+      flex: 0 0 auto;
+      padding: 3px 8px;
+      border: 0;
+      border-radius: 5px;
+      background: transparent;
+      color: #4a5568;
+      font-size: 11px;
+      cursor: pointer;
+      transition: all 0.15s;
+    }
+    .tab:hover:not(.active) {
+      background: #eef2f7;
+    }
+    .tab.active {
+      background: var(--uniplat-notification-primary);
+      color: #fff;
+    }
+    .list {
+      min-height: 0;
+      flex: 1;
+      overflow-y: auto;
+    }
+    .list::-webkit-scrollbar {
+      width: 3px;
+    }
+    .list::-webkit-scrollbar-thumb {
+      border-radius: 2px;
+      background: var(--uniplat-notification-border);
+    }
+    .empty {
+      padding: 28px 16px;
+      color: var(--uniplat-notification-muted);
+      font-size: 11px;
+      text-align: center;
+    }
+    .notice {
+      margin: 10px 16px;
+      padding: 8px 10px;
+      border: 1px solid rgb(239 68 68 / 25%);
+      border-radius: 8px;
+      background: rgb(239 68 68 / 6%);
+      color: var(--uniplat-notification-alert);
+      font-size: 11px;
+    }
+    /* 原型 .inbox-item：整行分隔线，非浮动圆角卡片 */
+    .nc-item {
+      display: flex;
+      width: 100%;
+      flex-direction: column;
+      gap: 0;
+      padding: 12px 16px;
+      border: 0;
+      border-bottom: 1px solid #f0f4f9;
+      border-left: 2px solid transparent;
+      background: transparent;
+      color: inherit;
+      text-align: left;
+      cursor: pointer;
+      transition: background 0.15s;
+    }
+    .nc-item:hover {
+      background: var(--uniplat-notification-surface);
+    }
+    .nc-item.selected {
+      border-left-color: var(--uniplat-notification-primary);
+      background: rgb(61 126 255 / 12%);
+    }
+    .nc-item-head {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      margin-bottom: 4px;
+    }
+    .nc-item-title {
+      overflow: hidden;
+      flex: 1;
+      font-size: 12px;
+      font-weight: 600;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .nc-item-time {
+      flex: 0 0 auto;
+      color: var(--uniplat-notification-muted);
+      font-size: 10px;
+    }
+    .unread-dot {
+      display: inline-block;
+      width: 6px;
+      height: 6px;
+      flex: 0 0 auto;
+      border-radius: 50%;
+      background: var(--uniplat-notification-primary);
+    }
+    .type-emoji {
+      flex: 0 0 auto;
+      font-size: 12px;
+      line-height: 1;
+    }
+    .type-glyph {
+      display: inline-flex;
+      flex: 0 0 auto;
+    }
+    .type-glyph svg,
+    .type-glyph img {
+      width: 14px;
+      height: 14px;
+    }
+    .nc-item-sub {
+      margin-bottom: 3px;
+      color: #4a5568;
+      font-size: 11px;
+    }
+    .nc-item-summary {
+      overflow: hidden;
+      color: var(--uniplat-notification-muted);
+      font-size: 11px;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .load-more {
+      width: calc(100% - 32px);
+      height: 30px;
+      margin: 10px 16px;
+      font-size: 11px;
+    }
+    .detail-pane {
+      min-width: 0;
+      flex: 1;
+      overflow-y: auto;
+      padding: 24px;
+      background: var(--uniplat-notification-surface);
+    }
+    .detail-pane::-webkit-scrollbar {
+      width: 4px;
+    }
+    .detail-pane::-webkit-scrollbar-thumb {
+      border-radius: 2px;
+      background: var(--uniplat-notification-border);
+    }
+    .detail-empty {
+      display: grid;
+      height: 100%;
+      place-items: center;
+      color: var(--uniplat-notification-muted);
+      font-size: 12px;
+    }
+    /* 原型 .detail-card：详情整体是一张白卡 */
+    .detail-card {
+      margin-bottom: 14px;
+      padding: 20px;
+      border: 1px solid var(--uniplat-notification-border);
+      border-radius: 10px;
+      background: var(--uniplat-notification-background);
+    }
+    .detail-head {
+      display: flex;
+      align-items: flex-start;
+      justify-content: space-between;
+      margin-bottom: 14px;
+      gap: 12px;
+    }
+    .detail-head-main {
+      display: flex;
+      min-width: 0;
+      align-items: center;
+      gap: 12px;
+    }
+    /* 原型 .notif-icon-wrap：34px / 9px 圆角 / 类型色底 */
+    .detail-badge {
+      display: grid;
+      width: 34px;
+      height: 34px;
+      flex: 0 0 auto;
+      place-items: center;
+      border-radius: 9px;
+      font-size: 16px;
+    }
+    .detail-badge.alert {
+      background: rgb(245 158 11 / 10%);
+    }
+    .detail-badge.info {
+      background: rgb(61 126 255 / 10%);
+    }
+    .detail-badge.report {
+      background: rgb(99 102 241 / 10%);
+    }
+    .detail-badge .type-emoji {
+      font-size: 16px;
+    }
+    .detail-badge .type-glyph svg,
+    .detail-badge .type-glyph img {
+      width: 18px;
+      height: 18px;
+    }
+    .detail-heading {
+      min-width: 0;
+      flex: 1;
+    }
+    .detail-title {
+      font-size: 15px;
+      font-weight: 700;
+    }
+    .detail-meta {
+      margin-top: 3px;
+      color: var(--uniplat-notification-muted);
+      font-size: 12px;
+    }
+    /* 原型 .order-status.pending / .done */
+    .read-badge {
+      flex: 0 0 auto;
+      padding: 2px 7px;
+      border-radius: 10px;
+      font-size: 10px;
+      font-weight: 600;
+      white-space: nowrap;
+    }
+    .read-badge.unread {
+      background: rgb(245 158 11 / 10%);
+      color: var(--uniplat-notification-warning);
+    }
+    .read-badge.read {
+      background: rgb(16 185 129 / 10%);
+      color: var(--uniplat-notification-success);
+    }
+    /* 原型 .detail-block-title */
+    .section-title {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      margin: 18px 0 10px;
+      font-size: 12px;
+      font-weight: 600;
+    }
+    .info-card,
+    .content-card,
+    .resource-card,
+    .attachment-card {
+      border: 1px solid var(--uniplat-notification-border);
+      border-radius: 8px;
+      background: var(--uniplat-notification-background);
+    }
+    /* 原型 .msg-card：紧凑两列，无行分隔线 */
+    .info-card {
+      margin-top: 6px;
+      padding: 10px 12px;
+      font-size: 12px;
+    }
+    .info-row {
+      display: flex;
+      justify-content: space-between;
+      padding: 3px 0;
+      gap: 12px;
+    }
+    .info-key {
+      color: var(--uniplat-notification-muted);
+    }
+    .info-value {
+      font-weight: 500;
+      text-align: right;
+    }
+    /* 原型 .notif-fulltext */
+    .content-card {
+      padding: 14px 16px;
+      color: #4a5568;
+      font-size: 13px;
+      line-height: 1.85;
+    }
+    .content-card.plain {
+      white-space: pre-wrap;
+      overflow-wrap: anywhere;
+    }
+    .content-card .md-p {
+      margin: 0 0 10px;
+    }
+    .content-card .md-p:last-child {
+      margin-bottom: 0;
+    }
+    .content-card .md-code {
+      padding: 1px 5px;
+      border-radius: 4px;
+      background: #f1f5f9;
+      font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+      font-size: 12px;
+    }
+    .content-card .md-pre {
+      overflow: auto;
+      padding: 12px 14px;
+      border-radius: 8px;
+      background: #0f172a0d;
+    }
+    .content-card a {
+      color: var(--uniplat-notification-primary);
+    }
+    /* 原型 .order-item + .order-status.processing */
+    .resource-card {
+      display: flex;
+      align-items: center;
+      width: 100%;
+      margin-bottom: 8px;
+      padding: 12px 14px;
+      gap: 8px;
+      color: inherit;
+      text-align: left;
+      cursor: pointer;
+      transition: border-color 0.15s;
+    }
+    .resource-card:hover {
+      border-color: var(--uniplat-notification-primary);
+    }
+    .resource-main {
+      display: flex;
+      min-width: 0;
+      flex: 1;
+      align-items: center;
+      gap: 8px;
+    }
+    .resource-type {
+      flex: 0 0 auto;
+      color: var(--uniplat-notification-muted);
+      font-size: 11px;
+    }
+    .resource-title {
+      overflow: hidden;
+      font-size: 12px;
+      font-weight: 600;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .resource-status {
+      flex: 0 0 auto;
+      padding: 2px 7px;
+      border-radius: 10px;
+      background: rgb(61 126 255 / 10%);
+      color: var(--uniplat-notification-primary);
+      font-size: 10px;
+      font-weight: 600;
+    }
+    /* 原型 .file-item / .file-icon / .file-dl */
+    .attachment-card {
+      display: flex;
+      align-items: center;
+      margin-bottom: 8px;
+      padding: 10px 12px;
+      gap: 10px;
+      transition: border-color 0.15s;
+    }
+    .attachment-card:hover {
+      border-color: var(--uniplat-notification-primary);
+    }
+    .attachment-icon {
+      display: grid;
+      width: 32px;
+      height: 32px;
+      flex: 0 0 auto;
+      place-items: center;
+      border-radius: 8px;
+      background: #eef2f7;
+      font-size: 15px;
+    }
+    .attachment-main {
+      display: flex;
+      min-width: 0;
+      flex: 1;
+      flex-direction: column;
+    }
+    .attachment-name {
+      overflow: hidden;
+      font-size: 12px;
+      font-weight: 500;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .attachment-meta {
+      margin-top: 2px;
+      color: var(--uniplat-notification-muted);
+      font-size: 10px;
+    }
+    .attachment-download {
+      flex: 0 0 auto;
+      margin-left: auto;
+      border: 0;
+      background: transparent;
+      color: var(--uniplat-notification-primary);
+      font-size: 11px;
+      cursor: pointer;
+    }
+    .attachment-download:disabled {
+      cursor: default;
+      opacity: 0.5;
+    }
+    /* 原型 .action-row + .btn-outline */
+    .action-row {
+      display: flex;
+      margin-top: 14px;
+      gap: 8px;
+    }
+    .mark-read {
+      height: 34px;
+      padding: 0 14px;
+      font-size: 12px;
+    }
+  `
+
+  declare private items: NotificationDto[]
+  declare private selectedId: string | null
+  declare private activeTab: string
+  declare private availableTypes: NotificationTypeSummary[]
+  declare private unreadCount: number
+  declare private hasMore: boolean
+  declare private loading: boolean
+  declare private loadingMore: boolean
+  declare private markingAllRead: boolean
+  declare private visibleError: string
+
+  private client: NotificationCenterClient | null = null
+  private config: NotificationCenterConfig | null = null
+  private disposeListeners: Array<() => void> = []
+
+  constructor() {
+    super()
+    this.items = []
+    this.selectedId = null
+    this.activeTab = ''
+    this.availableTypes = []
+    this.unreadCount = 0
+    this.hasMore = false
+    this.loading = false
+    this.loadingMore = false
+    this.markingAllRead = false
+    this.visibleError = ''
+  }
+
+  configure(config: NotificationCenterConfig): void {
+    this.releaseClient()
+    this.config = config
+    this.items = []
+    this.selectedId = null
+    this.activeTab = ''
+    this.availableTypes = []
+    this.unreadCount = 0
+    this.visibleError = ''
+    if (this.isConnected) void this.startClient()
+  }
+
+  async refresh(): Promise<void> {
+    if (!this.client) return
+    await this.client.refresh()
+  }
+
+  /**
+   * Feed a notification realtime event captured by the host socket.
+   *
+   * The component owns no WebSocket: the host keeps its single
+   * `/api/user-realtime/ws` connection and forwards the `notification` channel
+   * event payload here. Calls before `configure()` or after removal are ignored;
+   * the next inbox load carries the server truth.
+   */
+  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()
+  }
+
+  override disconnectedCallback(): void {
+    this.releaseClient()
+    super.disconnectedCallback()
+  }
+
+  override render() {
+    const total = this.items.length
+    return html`
+      <section class="nc-panel" part="panel" aria-label="通知中心">
+        <header class="topbar" part="topbar">
+          <span class="topbar-title"><span aria-hidden="true">🔔</span> 通知中心</span>
+          <button
+            class="mark-all"
+            ?disabled=${this.unreadCount <= 0 || this.markingAllRead}
+            @click=${this.markAllRead}
+          >
+            全部标已读
+          </button>
+        </header>
+        <div class="body">
+          <aside class="list-pane" part="list">
+            <div class="list-head">
+              <span class="list-title">通知</span>
+              <span class="list-count">${total} 条 · ${this.unreadCount} 未读</span>
+            </div>
+            <div class="tabs">
+              ${[{ type: '', name: ALL_TAB_LABEL }, ...this.availableTypes].map(
+                (entry) => html`
+                  <button
+                    class="tab ${entry.type === this.activeTab ? 'active' : ''}"
+                    @click=${() => this.selectTab(entry.type)}
+                  >
+                    ${entry.name || entry.type}
+                  </button>
+                `,
+              )}
+            </div>
+            <div class="list">
+              ${this.visibleError ? html`<div class="notice">${this.visibleError}</div>` : nothing}
+              ${
+                this.loading
+                  ? html`<div class="empty">通知加载中…</div>`
+                  : this.items.length
+                    ? html`
+                        ${this.items.map((item) => this.renderItem(item))}
+                        ${
+                          this.hasMore
+                            ? html`<button class="load-more" @click=${this.loadMore}>
+                                ${this.loadingMore ? '加载中…' : '加载更多'}
+                              </button>`
+                            : nothing
+                        }
+                      `
+                    : html`<div class="empty">该分类暂无通知</div>`
+              }
+            </div>
+          </aside>
+          <section class="detail-pane" part="detail">${this.renderDetail()}</section>
+        </div>
+      </section>
+    `
+  }
+
+  private renderItem(item: NotificationDto) {
+    const label = typeLabel(item)
+    return html`
+      <button
+        class="nc-item ${item.id === this.selectedId ? 'selected' : ''}"
+        @click=${() => this.selectNotification(item)}
+      >
+        <span class="nc-item-head">
+          ${item.readStatus === 'unread' ? html`<span class="unread-dot" aria-label="未读"></span>` : nothing}
+          ${this.renderTypeIcon(item.type)}
+          <span class="nc-item-title">${item.title}</span>
+          <span class="nc-item-time">${formatTimestamp(item.createdAt)}</span>
+        </span>
+        <span class="nc-item-sub">${this.sourceName(item)} · ${label}</span>
+        <span class="nc-item-summary">${item.summary}</span>
+      </button>
+    `
+  }
+
+  private renderDetail() {
+    const selected = this.items.find((item) => item.id === this.selectedId)
+    if (!selected) {
+      return html`<div class="detail-empty">选择左侧一条通知查看详情</div>`
+    }
+    const meta = this.typeMeta(selected.type)
+    return html`
+      <article class="detail-card">
+        <header class="detail-head">
+          <div class="detail-head-main">
+            <span class="detail-badge ${meta.tone}">${this.renderTypeIcon(selected.type)}</span>
+            <div class="detail-heading">
+              <div class="detail-title">${selected.title}</div>
+              <div class="detail-meta">
+                ${this.sourceName(selected)} · ${formatTimestamp(selected.createdAt)}
+              </div>
+            </div>
+          </div>
+          <span class="read-badge ${selected.readStatus}">
+            ${selected.readStatus === 'read' ? '已读' : '未读'}
+          </span>
+        </header>
+        <div class="section-title"><span aria-hidden="true">📋</span> 基本信息</div>
+        <div class="info-card">
+          <div class="info-row">
+            <span class="info-key">通知类型</span
+            ><span class="info-value">${typeLabel(selected)}</span>
+          </div>
+          <div class="info-row">
+            <span class="info-key">通知来源</span
+            ><span class="info-value">${this.sourceName(selected)}</span>
+          </div>
+          <div class="info-row">
+            <span class="info-key">推送时间</span
+            ><span class="info-value">${formatTimestamp(selected.createdAt)}</span>
+          </div>
+          <div class="info-row">
+            <span class="info-key">状态</span
+            ><span class="info-value">${selected.readStatus === 'read' ? '已读' : '未读'}</span>
+          </div>
+        </div>
+        <div class="section-title"><span aria-hidden="true">📄</span> 通知内容</div>
+        <div class="content-card ${selected.contentType === 'markdown' ? '' : 'plain'}">
+          ${selected.contentType === 'markdown' ? renderSafeMarkdown(selected.content) : selected.content}
+        </div>
+        ${
+          selected.resources.length
+            ? html`
+                <div class="section-title"><span aria-hidden="true">🔗</span> 关联资源</div>
+                ${selected.resources.map(
+                  (resource) => html`
+                    <button class="resource-card" @click=${() => this.openResource(resource)}>
+                      <span class="resource-main">
+                        <span class="resource-type">${resourceTypeLabel(resource.type)}</span>
+                        <span class="resource-title">${resource.title || resource.id}</span>
+                      </span>
+                      <span class="resource-status">查看 →</span>
+                    </button>
+                  `,
+                )}
+              `
+            : nothing
+        }
+        ${
+          selected.attachments.length
+            ? html`
+                <div class="section-title"><span aria-hidden="true">📎</span> 关联文件</div>
+                ${selected.attachments.map(
+                  (attachment) => html`
+                    <div class="attachment-card">
+                      <span class="attachment-icon" aria-hidden="true"
+                        >${attachmentIcon(attachment.mimeType, attachment.name)}</span
+                      >
+                      <span class="attachment-main">
+                        <span class="attachment-name">${attachment.name || attachment.fileId}</span>
+                        <span class="attachment-meta">
+                          ${[attachment.mimeType, formatSize(attachment.sizeBytes)]
+                            .filter(Boolean)
+                            .join(' · ')}
+                        </span>
+                      </span>
+                      <button
+                        class="attachment-download"
+                        ?disabled=${!attachment.fileId}
+                        @click=${() => this.downloadAttachment(attachment)}
+                      >
+                        下载
+                      </button>
+                    </div>
+                  `,
+                )}
+              `
+            : nothing
+        }
+        ${
+          selected.readStatus === 'unread'
+            ? html`<div class="action-row">
+                <button class="mark-read" @click=${() => this.markSelectedRead(selected.id)}>
+                  标为已读
+                </button>
+              </div>`
+            : nothing
+        }
+      </article>
+    `
+  }
+
+  private renderTypeIcon(type: string): TemplateResult {
+    const custom = this.config?.typeIcons?.[type]
+    if (custom) {
+      const value = custom.trim()
+      if (isHttpUrl(value)) {
+        return html`<span class="type-glyph"
+          ><img src=${value} alt="" width="16" height="16"
+        /></span>`
+      }
+      if (isSafeInlineSvg(value)) {
+        return html`<span class="type-glyph">${unsafeSVG(value)}</span>`
+      }
+      return html`<span class="type-emoji">${value}</span>`
+    }
+    return html`<span class="type-emoji">${this.typeMeta(type).icon}</span>`
+  }
+
+  private typeMeta(type: string): NotificationTypeMeta {
+    return TYPE_META[type] ?? DEFAULT_TYPE_META
+  }
+
+  private sourceName(item: NotificationDto): string {
+    return item.source?.name || item.source?.code || '系统通知'
+  }
+
+  private async startClient(): Promise<void> {
+    if (!this.config) return
+    this.loading = true
+    this.visibleError = ''
+    try {
+      const client = new NotificationCenterClient(this.config)
+      this.client = client
+      this.disposeListeners = [
+        client.on('ready', () => this.dispatchSafe('ready', {})),
+        client.on('inbox', ({ items, hasMore }) => {
+          this.items = [...items]
+          this.hasMore = hasMore
+          // A successful projection clears any transient failure banner.
+          this.visibleError = ''
+          if (this.selectedId && !this.items.some((item) => item.id === this.selectedId)) {
+            this.selectedId = null
+          }
+        }),
+        client.on('types-change', ({ types }) => {
+          this.availableTypes = [...types]
+          // 当前筛选的分类若已不在目录中，回到「全部」，避免停在空列表上。
+          if (this.activeTab && !this.availableTypes.some((e) => e.type === this.activeTab)) {
+            this.selectTab('')
+          }
+        }),
+        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 selectTab(key: string): void {
+    if (key === this.activeTab || !this.client) return
+    this.activeTab = key
+    this.selectedId = null
+    void this.client.setTypeFilter(key ? [key] : [])
+  }
+
+  private selectNotification(item: NotificationDto): void {
+    this.selectedId = item.id
+    if (item.readStatus === 'unread') void this.client?.markRead(item.id)
+  }
+
+  private markSelectedRead(notificationId: string): void {
+    void this.client?.markRead(notificationId)
+  }
+
+  private loadMore = (): void => {
+    if (!this.client || this.loadingMore) return
+    this.loadingMore = true
+    void this.client.loadMore().finally(() => {
+      this.loadingMore = 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 openResource(resource: NotificationDto['resources'][number]): void {
+    const detail: NotificationResourceRequestedDetail = {
+      resourceType: resource.type,
+      id: resource.id,
+    }
+    if (resource.aeCode) detail.aeCode = resource.aeCode
+    if (resource.type === 'session') detail.sessionId = resource.id
+    this.dispatchSafe('notification-resource-requested', detail)
+  }
+
+  private async downloadAttachment(
+    attachment: NotificationDto['attachments'][number],
+  ): Promise<void> {
+    if (!this.client || !attachment.fileId) return
+    try {
+      const blob = await this.client.downloadAttachment(attachment.fileId, attachment.name)
+      saveBlob(blob, attachment.name || 'download')
+    } catch {
+      this.visibleError = '附件下载失败，请稍后重试。'
+    }
+  }
+
+  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 }))
+  }
+}
+
+/** 分类展示名优先用后端 notification_type_name，缺省回退到原始 code。 */
+function typeLabel(item: NotificationDto): string {
+  return item.typeName.trim() || item.type.trim()
+}
+
+function resourceTypeLabel(type: string): string {
+  if (type === 'service_order') return '关联服务单'
+  if (type === 'ai_employee') return '关联数字员工'
+  if (type === 'session') return '关联会话'
+  if (type === 'file') return '关联文件'
+  return '关联资源'
+}
+
+function isHttpUrl(value: string): boolean {
+  return /^https?:\/\//i.test(value)
+}
+
+function isSafeInlineSvg(value: string): boolean {
+  if (!/^<svg[\s>]/i.test(value)) return false
+  if (/<script|<foreignobject/i.test(value)) return false
+  if (/\son\w+\s*=/i.test(value)) return false
+  if (/javascript:/i.test(value)) return false
+  return true
+}
+
+function saveBlob(blob: Blob, filename: string): void {
+  if (typeof document === 'undefined' || typeof URL.createObjectURL !== 'function') return
+  const url = URL.createObjectURL(blob)
+  const anchor = document.createElement('a')
+  anchor.href = url
+  anchor.download = filename
+  document.body.append(anchor)
+  anchor.click()
+  anchor.remove()
+  setTimeout(() => URL.revokeObjectURL(url), 0)
+}
+
+function formatTimestamp(value: string): string {
+  const timestamp = Date.parse(value)
+  if (!Number.isFinite(timestamp)) return ''
+  const date = new Date(timestamp)
+  const now = new Date()
+  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}`
+  // 原型只使用「今天 / 昨天 / M月D日」三种相对形式，跨年时补上年份。
+  const md = `${date.getMonth() + 1}月${date.getDate()}日`
+  if (date.getFullYear() === now.getFullYear()) return `${md} ${hm}`
+  return `${date.getFullYear()}年${md} ${hm}`
+}
+
+// 原型 files[].icon 只用 📕（PDF/报告）与 📊（表格）两种，其余回退为回形针。
+function attachmentIcon(mimeType: string, name: string): string {
+  const hint = `${mimeType} ${name}`.toLowerCase()
+  if (hint.includes('pdf')) return '📕'
+  if (/sheet|excel|csv|\.xlsx?\b|\.csv\b/.test(hint)) return '📊'
+  return '📎'
+}
+
+function formatSize(bytes: number): string {
+  if (!bytes || bytes <= 0) return ''
+  if (bytes < 1024) return `${bytes} B`
+  const kb = bytes / 1024
+  if (kb < 1024) return `${kb.toFixed(1)} KB`
+  return `${(kb / 1024).toFixed(1)} MB`
+}
+
+function pad(value: number): string {
+  return value < 10 ? `0${value}` : String(value)
+}