@qiqb/message-domain 0.0.0-stage → 0.1.4

package/build/components/MessageReminderDisplay.js

@@ -0,0 +1,353 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { BellOutlined, CloseOutlined, ExclamationCircleOutlined, InfoCircleOutlined, LeftOutlined, RightOutlined, WarningOutlined, } from '@ant-design/icons';
+import { Alert, Button, Card, Modal, Tag, theme } from 'antd';
+import { useEffect, useId, useLayoutEffect, useMemo, useRef, useState, } from 'react';
+import { createPortal } from 'react-dom';
+import './message-reminder-display.less';
+const levelLabels = {
+    NORMAL: '普通',
+    IMPORTANT: '重要',
+    SEVERE: '严重',
+};
+const levelPriority = {
+    NORMAL: 0,
+    IMPORTANT: 1,
+    SEVERE: 2,
+};
+function receiptId(record) {
+    return record.receiptId || record.id;
+}
+/** 预览消息由外层使用独立标识传入，可抢先展示但不会改变真实消息的严重程度。 */
+function isPreview(record) {
+    return receiptId(record).startsWith('preview:');
+}
+/** 历史消息及未知扩展值采用兼容默认值，级别不参与提醒方式的选择。 */
+function reminderMode(record) {
+    return record.reminderMode === 'FULLSCREEN' ||
+        record.reminderMode === 'CAROUSEL'
+        ? record.reminderMode
+        : 'FLOATING';
+}
+function messageLevel(record) {
+    return record.messageLevel === 'SEVERE' || record.messageLevel === 'IMPORTANT'
+        ? record.messageLevel
+        : 'NORMAL';
+}
+function levelType(level) {
+    return level === 'SEVERE'
+        ? 'error'
+        : level === 'IMPORTANT'
+            ? 'warning'
+            : 'info';
+}
+// Tag 的普通状态使用预设蓝色；Alert 的 info 不是 Tag 支持的预设状态。
+function levelTagColor(level) {
+    return level === 'NORMAL' ? 'processing' : levelType(level);
+}
+function LevelIcon({ level }) {
+    if (level === 'SEVERE')
+        return _jsx(WarningOutlined, {});
+    if (level === 'IMPORTANT')
+        return _jsx(ExclamationCircleOutlined, {});
+    return _jsx(InfoCircleOutlined, {});
+}
+function displayTime(record) {
+    const value = record.occurredAt || record.createTime;
+    if (!value)
+        return '时间未提供';
+    const date = new Date(value);
+    return Number.isNaN(date.getTime())
+        ? value
+        : new Intl.DateTimeFormat('zh-CN', {
+            dateStyle: 'medium',
+            timeStyle: 'short',
+        }).format(date);
+}
+/**
+ * 纯展示层：三种模式各自维护展示队列，仅轮播 UI 计时，不查询、不轮询、不自动标记已读。
+ * 外层决定哪些消息进入队列，以及查看详情、关闭和确认后何时移除消息。
+ */
+export default function MessageReminderDisplay({ messages, carouselTarget, onDismiss, onOpen, onConfirm, confirmingIds = [], confirmError, onDisplayed, }) {
+    const { token } = theme.useToken();
+    const [portalTarget, setPortalTarget] = useState();
+    const [carouselId, setCarouselId] = useState();
+    const [floatingId, setFloatingId] = useState();
+    const lastPreviewFloatingId = useRef();
+    const [departingCarousel, setDepartingCarousel] = useState();
+    const previousCarouselRef = useRef();
+    const [visibleCarouselTarget, setVisibleCarouselTarget] = useState();
+    // 页面槽位与预览槽位切换时，可见性只对原槽位有效，不能沿用旧节点的观察结果。
+    const carouselVisible = !!carouselTarget && visibleCarouselTarget === carouselTarget;
+    const [carouselHovered, setCarouselHovered] = useState(false);
+    const [carouselFocused, setCarouselFocused] = useState(false);
+    const [documentHidden, setDocumentHidden] = useState(() => typeof document !== 'undefined' && document.hidden);
+    const lastPreviewCarouselId = useRef();
+    const [localConfirmingId, setLocalConfirmingId] = useState();
+    const [localConfirmError, setLocalConfirmError] = useState();
+    const carouselRef = useRef(null);
+    const confirmingRef = useRef();
+    const displayedIds = useRef(new Set());
+    const mounted = useRef(true);
+    const bodyId = useId();
+    const floating = useMemo(() => messages.filter((record) => reminderMode(record) === 'FLOATING'), [messages]);
+    const carousel = useMemo(() => messages.filter((record) => reminderMode(record) === 'CAROUSEL'), [messages]);
+    const fullscreen = useMemo(() => messages
+        .filter((record) => reminderMode(record) === 'FULLSCREEN')
+        // 预览先于真实队列，确保低级别预览也能马上看见；其余同级保留外层次序。
+        .sort((a, b) => Number(isPreview(b)) - Number(isPreview(a)) ||
+        levelPriority[messageLevel(b)] - levelPriority[messageLevel(a)]), [messages]);
+    const previewFloating = floating.find(isPreview);
+    const previewFloatingId = previewFloating
+        ? receiptId(previewFloating)
+        : undefined;
+    // 多条浮动消息合成一个面板；只上报当前可见项，切换前的消息仍保留提醒机会。
+    const selectedFloatingId = previewFloatingId && previewFloatingId !== lastPreviewFloatingId.current
+        ? previewFloatingId
+        : floatingId;
+    const floatingIndex = Math.max(0, floating.findIndex((record) => receiptId(record) === selectedFloatingId));
+    const floatingMessage = floating[floatingIndex];
+    const visibleFloatingId = floatingMessage
+        ? receiptId(floatingMessage)
+        : undefined;
+    const previewCarousel = carousel.find(isPreview);
+    const previewCarouselId = previewCarousel
+        ? receiptId(previewCarousel)
+        : undefined;
+    // 新预览在当前渲染便抢先显示，后续仍允许用户手动切换或自动轮播。
+    const selectedCarouselId = previewCarouselId && previewCarouselId !== lastPreviewCarouselId.current
+        ? previewCarouselId
+        : carouselId;
+    const carouselIndex = Math.max(0, carousel.findIndex((record) => receiptId(record) === selectedCarouselId));
+    const carouselMessage = carousel[carouselIndex];
+    const carouselMessageRef = useRef(carouselMessage);
+    carouselMessageRef.current = carouselMessage;
+    const visibleCarouselId = carouselMessage
+        ? receiptId(carouselMessage)
+        : undefined;
+    // 外层轮询会创建新对象；只按标识序列重建计时器，避免相同队列不断刷新后永不轮播。
+    const carouselOrderKey = JSON.stringify(carousel.map(receiptId));
+    const fullscreenMessage = fullscreen[0];
+    const fullscreenId = fullscreenMessage
+        ? receiptId(fullscreenMessage)
+        : undefined;
+    const fullscreenIdRef = useRef(fullscreenId);
+    fullscreenIdRef.current = fullscreenId;
+    const hasFullscreen = !!fullscreenMessage;
+    const confirmBusy = !!localConfirmingId ||
+        (!!fullscreenId && confirmingIds.includes(fullscreenId));
+    useEffect(() => {
+        mounted.current = true;
+        // 浮动与全屏 Portal 放在 body，避免应用容器裁剪；轮播单独进入页面布局槽位。
+        const container = document.createElement('div');
+        container.className = 'qiqb-message-reminder-portal';
+        document.body.appendChild(container);
+        setPortalTarget(container);
+        return () => {
+            mounted.current = false;
+            // 微应用卸载时清理自行创建的节点，不残留遮罩或通知卡片。
+            container.remove();
+        };
+    }, []);
+    useEffect(() => {
+        if (!portalTarget || !onDisplayed || documentHidden)
+            return;
+        // 全屏遮罩覆盖其他两种提醒时，只报告前景全屏消息；确认结束后再报告可见的卡片和轮播。
+        const visibleRecords = fullscreenMessage
+            ? [fullscreenMessage]
+            : [
+                ...(floatingMessage ? [floatingMessage] : []),
+                ...(carouselTarget && carouselVisible && carouselMessage
+                    ? [carouselMessage]
+                    : []),
+            ];
+        for (const record of visibleRecords) {
+            const id = receiptId(record);
+            if (!displayedIds.current.has(id)) {
+                displayedIds.current.add(id);
+                onDisplayed(record);
+            }
+        }
+    }, [
+        portalTarget,
+        onDisplayed,
+        floatingMessage,
+        documentHidden,
+        carouselVisible,
+        carouselMessage,
+        carouselTarget,
+        fullscreenMessage,
+    ]);
+    useEffect(() => {
+        // 预览抢先一次；用户切换、关闭当前项后继续按浮动队列顺序展示。
+        lastPreviewFloatingId.current = previewFloatingId;
+        if (floatingId !== visibleFloatingId)
+            setFloatingId(visibleFloatingId);
+    }, [floatingId, visibleFloatingId, previewFloatingId]);
+    useEffect(() => {
+        // 新预览只抢先一次；真实消息刷新、手动切换均不会把当前项强制切回预览。
+        lastPreviewCarouselId.current = previewCarouselId;
+        if (!visibleCarouselId) {
+            setCarouselId(undefined);
+            setCarouselHovered(false);
+            setCarouselFocused(false);
+        }
+        else if (visibleCarouselId !== carouselId) {
+            setCarouselId(visibleCarouselId);
+        }
+    }, [visibleCarouselId, carouselId, previewCarouselId]);
+    useLayoutEffect(() => {
+        const record = carouselMessageRef.current;
+        const previous = previousCarouselRef.current;
+        previousCarouselRef.current = carouselTarget ? record : undefined;
+        // 仅在收件标识切换时保留短暂离场内容，接口返回同一条的新对象不会重复播放动画。
+        if (!carouselTarget ||
+            !record ||
+            !previous ||
+            receiptId(previous) === receiptId(record)) {
+            setDepartingCarousel(undefined);
+            return;
+        }
+        setDepartingCarousel(previous);
+        const timer = window.setTimeout(() => setDepartingCarousel(undefined), 260);
+        return () => window.clearTimeout(timer);
+    }, [visibleCarouselId, carouselTarget]);
+    useEffect(() => {
+        // 槽位切换会重建 Portal；分页按钮移除也可能没有 blur，按当前 DOM 校准暂停状态。
+        const element = carouselRef.current;
+        setCarouselHovered(!!element?.matches(':hover'));
+        setCarouselFocused(!!element?.contains(document.activeElement));
+    }, [carouselTarget, carouselOrderKey]);
+    useEffect(() => {
+        const updateVisibility = () => setDocumentHidden(document.hidden);
+        updateVisibility();
+        document.addEventListener('visibilitychange', updateVisibility);
+        return () => document.removeEventListener('visibilitychange', updateVisibility);
+    }, []);
+    useEffect(() => {
+        const element = carouselRef.current;
+        setVisibleCarouselTarget(undefined);
+        if (!carouselTarget || !element)
+            return;
+        if (typeof IntersectionObserver === 'undefined') {
+            setVisibleCarouselTarget(carouselTarget);
+            return;
+        }
+        let active = true;
+        // 页面已滚到下方时，新消息只排队；回到消息栏后才记录展示并开始自动切换。
+        const observer = new IntersectionObserver(([entry]) => {
+            if (active)
+                setVisibleCarouselTarget(entry.isIntersecting && entry.intersectionRatio >= 0.5
+                    ? carouselTarget
+                    : undefined);
+        }, { threshold: 0.5 });
+        observer.observe(element);
+        return () => {
+            active = false;
+            observer.disconnect();
+        };
+    }, [carouselTarget, !!carouselMessage, portalTarget]);
+    useEffect(() => {
+        const ids = JSON.parse(carouselOrderKey);
+        // 悬停、键盘操作、后台标签页以及全屏确认期间暂停，恢复后给用户完整的五秒阅读时间。
+        if (!portalTarget ||
+            !carouselTarget ||
+            !carouselVisible ||
+            ids.length < 2 ||
+            carouselHovered ||
+            carouselFocused ||
+            documentHidden ||
+            hasFullscreen)
+            return;
+        const timer = window.setTimeout(() => {
+            const currentIndex = Math.max(0, ids.indexOf(visibleCarouselId || ''));
+            setCarouselId(ids[(currentIndex + 1) % ids.length]);
+        }, 5000);
+        return () => window.clearTimeout(timer);
+    }, [
+        carouselOrderKey,
+        visibleCarouselId,
+        carouselHovered,
+        carouselFocused,
+        documentHidden,
+        hasFullscreen,
+        carouselVisible,
+        portalTarget,
+        carouselTarget,
+    ]);
+    useEffect(() => {
+        setLocalConfirmError(undefined);
+    }, [fullscreenId]);
+    // 遮罩、滚动锁定与键盘焦点交给 Ant Design Modal，阅读确认仍由外层业务回调控制。
+    const confirm = async () => {
+        if (!fullscreenMessage || confirmBusy || confirmingRef.current)
+            return;
+        const id = receiptId(fullscreenMessage);
+        confirmingRef.current = id;
+        setLocalConfirmingId(id);
+        setLocalConfirmError(undefined);
+        try {
+            await onConfirm(fullscreenMessage);
+            // 展示层不主动关闭；外层确认成功后更新 messages，失败时保留当前提醒。
+        }
+        catch (error) {
+            if (mounted.current && fullscreenIdRef.current === id) {
+                setLocalConfirmError(error instanceof Error && error.message
+                    ? error.message
+                    : '确认失败，请重试。');
+            }
+        }
+        finally {
+            confirmingRef.current = undefined;
+            if (mounted.current)
+                setLocalConfirmingId(undefined);
+        }
+    };
+    const changeCarousel = (step) => {
+        if (!carousel.length)
+            return;
+        const index = (carouselIndex + step + carousel.length) % carousel.length;
+        setCarouselId(receiptId(carousel[index]));
+    };
+    const changeFloating = (step) => {
+        if (!floating.length)
+            return;
+        const index = (floatingIndex + step + floating.length) % floating.length;
+        setFloatingId(receiptId(floating[index]));
+    };
+    const themeStyle = {
+        '--reminder-surface': token.colorBgElevated,
+        '--reminder-text': token.colorText,
+        '--reminder-muted': token.colorTextSecondary,
+        '--reminder-border': token.colorBorderSecondary,
+        '--reminder-shadow': token.boxShadowSecondary,
+        '--reminder-mask': token.colorBgMask,
+        '--reminder-radius': `${token.borderRadiusLG}px`,
+        '--reminder-normal': token.colorInfo,
+        '--reminder-normal-bg': token.colorInfoBg,
+        '--reminder-normal-border': token.colorInfoBorder,
+        '--reminder-important': token.colorWarning,
+        '--reminder-important-bg': token.colorWarningBg,
+        '--reminder-important-border': token.colorWarningBorder,
+        '--reminder-severe': token.colorError,
+        '--reminder-severe-bg': token.colorErrorBg,
+        '--reminder-severe-border': token.colorErrorBorder,
+        '--reminder-floating-z': token.zIndexPopupBase + 20,
+        '--reminder-fullscreen-z': token.zIndexPopupBase + 100,
+    };
+    // 空队列仍保留已关闭的 Modal 实例，让关闭动画和焦点归还完整执行。
+    if (!portalTarget)
+        return null;
+    const renderCarouselContent = (record) => (_jsxs(_Fragment, { children: [_jsx("strong", { title: record.title, children: record.title }), _jsx("span", { className: "qiqb-message-reminder-carousel-separator", "aria-hidden": true, children: "\u00B7" }), _jsx("span", { className: "qiqb-message-reminder-carousel-summary", title: record.content, children: record.content })] }));
+    return (_jsxs(_Fragment, { children: [carouselTarget &&
+                carouselMessage &&
+                createPortal(_jsx("div", { className: "qiqb-message-reminders qiqb-message-reminders-inline", style: themeStyle, children: _jsx("section", { className: "qiqb-message-reminder-carousel-region", ref: carouselRef, "data-level": messageLevel(carouselMessage), "aria-label": "\u8F6E\u64AD\u6D88\u606F\u63D0\u9192", onMouseEnter: () => setCarouselHovered(true), onMouseLeave: () => setCarouselHovered(false), onFocusCapture: () => setCarouselFocused(true), onBlurCapture: (event) => {
+                            // 焦点在条带内部按钮间移动时保持暂停，离开整个条带才恢复。
+                            if (!event.currentTarget.contains(event.relatedTarget)) {
+                                setCarouselFocused(false);
+                            }
+                        }, children: _jsx(Alert, { className: "qiqb-message-reminder-carousel", type: levelType(messageLevel(carouselMessage)), banner: true, showIcon: true, icon: _jsx(LevelIcon, { level: messageLevel(carouselMessage) }), message: _jsxs("div", { className: "qiqb-message-reminder-carousel-content", children: [_jsx("span", { className: "qiqb-message-reminder-carousel-level", children: levelLabels[messageLevel(carouselMessage)] }), _jsxs("div", { className: "qiqb-message-reminder-carousel-viewport", "aria-live": "polite", "aria-atomic": "true", children: [_jsx("div", { className: "qiqb-message-reminder-carousel-message is-current", children: renderCarouselContent(carouselMessage) }, receiptId(carouselMessage)), departingCarousel && (_jsx("div", { className: "qiqb-message-reminder-carousel-message is-departing", "aria-hidden": "true", children: renderCarouselContent(departingCarousel) }, `departing:${receiptId(departingCarousel)}`))] })] }), action: _jsxs("div", { className: "qiqb-message-reminder-carousel-actions", children: [_jsx(Button, { className: "qiqb-message-reminder-carousel-view", type: "text", size: "small", loading: confirmingIds.includes(receiptId(carouselMessage)), disabled: confirmingIds.includes(receiptId(carouselMessage)), onClick: () => onOpen(carouselMessage), children: "\u67E5\u770B" }), carousel.length > 1 && (_jsxs("div", { className: "qiqb-message-reminder-carousel-navigation", "aria-label": "\u5207\u6362\u6D88\u606F", children: [_jsx(Button, { type: "text", size: "small", "aria-label": "\u4E0A\u4E00\u6761\u63D0\u9192", icon: _jsx(LeftOutlined, {}), onClick: () => changeCarousel(-1) }), _jsxs("span", { className: "qiqb-message-reminder-counter", children: [carouselIndex + 1, " / ", carousel.length] }), _jsx(Button, { type: "text", size: "small", "aria-label": "\u4E0B\u4E00\u6761\u63D0\u9192", icon: _jsx(RightOutlined, {}), onClick: () => changeCarousel(1) })] })), _jsx(Button, { className: "qiqb-message-reminder-carousel-close", type: "text", size: "small", "aria-label": "\u5173\u95ED\u5F53\u524D\u8F6E\u64AD\u63D0\u9192", icon: _jsx(CloseOutlined, {}), onClick: () => onDismiss(receiptId(carouselMessage)) })] }) }) }) }), carouselTarget), createPortal(_jsxs("div", { className: "qiqb-message-reminders", style: themeStyle, children: [floatingMessage && (_jsx("section", { className: "qiqb-message-reminder-floating-stack", "aria-label": "\u6D6E\u52A8\u6D88\u606F\u63D0\u9192", hidden: hasFullscreen, children: _jsxs(Card, { className: "qiqb-message-reminder-floating-card", size: "small", "data-level": messageLevel(floatingMessage), title: _jsxs(_Fragment, { children: [_jsx(BellOutlined, {}), " \u6D88\u606F\u63D0\u9192"] }), extra: _jsx(Button, { type: "text", size: "small", "aria-label": `关闭提醒：${floatingMessage.title}`, icon: _jsx(CloseOutlined, {}), onClick: () => onDismiss(receiptId(floatingMessage)) }), children: [_jsxs("article", { role: "status", "aria-live": "polite", children: [_jsxs("div", { className: "qiqb-message-reminder-floating-header", children: [_jsxs(Tag, { color: levelTagColor(messageLevel(floatingMessage)), children: [_jsx(LevelIcon, { level: messageLevel(floatingMessage) }), ' ', levelLabels[messageLevel(floatingMessage)]] }), _jsx("h3", { children: floatingMessage.title })] }), _jsx("p", { className: "qiqb-message-reminder-floating-summary", children: floatingMessage.content })] }, visibleFloatingId), _jsxs("div", { className: "qiqb-message-reminder-floating-footer", children: [_jsx("span", { children: floatingMessage.sourceSystem || '业务消息' }), _jsx(Button, { type: "link", size: "small", loading: confirmingIds.includes(receiptId(floatingMessage)), disabled: confirmingIds.includes(receiptId(floatingMessage)), onClick: () => onOpen(floatingMessage), children: "\u67E5\u770B\u6D88\u606F" })] }), floating.length > 1 && (_jsxs("div", { className: "qiqb-message-reminder-floating-navigation", "aria-label": "\u5207\u6362\u6D6E\u52A8\u6D88\u606F", children: [_jsx(Button, { type: "text", size: "small", "aria-label": "\u4E0A\u4E00\u6761\u6D6E\u52A8\u63D0\u9192", icon: _jsx(LeftOutlined, {}), onClick: () => changeFloating(-1) }), _jsxs("span", { className: "qiqb-message-reminder-counter", children: [floatingIndex + 1, " / ", floating.length] }), _jsx(Button, { type: "text", size: "small", "aria-label": "\u4E0B\u4E00\u6761\u6D6E\u52A8\u63D0\u9192", icon: _jsx(RightOutlined, {}), onClick: () => changeFloating(1) })] }))] }) })), _jsx(Modal, { open: hasFullscreen, centered: true, width: 640, rootClassName: "qiqb-message-reminders", 
+                        // Ant Design 5 读取 rootStyle，6 的语义样式以 styles.root 为准。
+                        rootStyle: themeStyle, styles: { root: themeStyle }, className: "qiqb-message-reminder-fullscreen", zIndex: token.zIndexPopupBase + 100, 
+                        // 正式全屏不能用关闭、遮罩或 Escape 绕过阅读确认。
+                        closable: false, maskClosable: false, keyboard: false, "aria-describedby": bodyId, title: fullscreenMessage && (_jsxs("div", { className: "qiqb-message-reminder-fullscreen-header", children: [_jsx(BellOutlined, {}), " \u6D88\u606F\u63D0\u9192", _jsx(Tag, { color: levelTagColor(messageLevel(fullscreenMessage)), children: levelLabels[messageLevel(fullscreenMessage)] }), _jsxs("span", { className: "qiqb-message-reminder-fullscreen-count", children: ["\u5F85\u786E\u8BA4 ", fullscreen.length, " \u6761"] })] })), footer: fullscreenMessage ? (_jsxs("div", { className: "qiqb-message-reminder-fullscreen-footer", children: [_jsx("span", { children: "\u786E\u8BA4\u4EC5\u8868\u793A\u4F60\u5DF2\u9605\u8BFB\u8FD9\u6761\u6D88\u606F\u3002" }), _jsxs("div", { children: [_jsx(Button, { loading: confirmingIds.includes(receiptId(fullscreenMessage)), disabled: confirmBusy, onClick: () => onOpen(fullscreenMessage), children: "\u67E5\u770B\u8BE6\u60C5" }), _jsx(Button, { type: "primary", loading: confirmBusy, onClick: () => void confirm(), children: "\u6211\u5DF2\u77E5\u6653" })] })] })) : null, children: fullscreenMessage && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "qiqb-message-reminder-fullscreen-scroll", tabIndex: 0, role: "document", children: [_jsx("h2", { children: fullscreenMessage.title }), _jsxs("div", { className: "qiqb-message-reminder-fullscreen-meta", children: [_jsxs("span", { children: ["\u6765\u6E90\uFF1A", fullscreenMessage.sourceSystem || '业务消息'] }), _jsxs("span", { children: ["\u65F6\u95F4\uFF1A", displayTime(fullscreenMessage)] })] }), _jsx("div", { className: "qiqb-message-reminder-fullscreen-body", id: bodyId, children: fullscreenMessage.content })] }), (confirmError || localConfirmError) && (_jsx(Alert, { className: "qiqb-message-reminder-confirm-error", type: "error", showIcon: true, message: confirmError || localConfirmError }))] })) })] }), portalTarget)] }));
+}

package/build/components/MessageWorkspace.d.ts

@@ -0,0 +1,16 @@
+import type { CSSProperties, ReactNode } from 'react';
+import './message-workspace.less';
+/** 消息页和抽屉共用宿主主题色，切换平台明暗主题时不留下固定白底。 */
+export declare function useMessageTheme(): CSSProperties;
+interface Props {
+    title: string;
+    description: string;
+    icon?: ReactNode;
+    extra?: ReactNode;
+    /** 页面可在领域主题下调整自身布局，不影响主题/订阅等其他消息页面。 */
+    className?: string;
+    children: ReactNode;
+}
+/** 只在消息领域内统一页面框架，避免把订阅语义放进跨领域 shared 包。 */
+export default function MessageWorkspace({ title, description, icon, extra, className, children, }: Props): import("react").JSX.Element;
+export {};

package/build/components/MessageWorkspace.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { BellOutlined } from '@ant-design/icons';
+import { PageContainer } from '@ant-design/pro-components';
+import { theme } from 'antd';
+import './message-workspace.less';
+/** 消息页和抽屉共用宿主主题色，切换平台明暗主题时不留下固定白底。 */
+export function useMessageTheme() {
+    const { token } = theme.useToken();
+    return {
+        '--message-bg': token.colorBgLayout,
+        '--message-surface': token.colorBgContainer,
+        '--message-fill': token.colorFillAlter,
+        '--message-text': token.colorText,
+        '--message-muted': token.colorTextSecondary,
+        '--message-border': token.colorBorderSecondary,
+        '--message-primary': token.colorPrimary,
+        '--message-primary-bg': token.colorPrimaryBg,
+        '--message-success': token.colorSuccess,
+        '--message-radius': `${token.borderRadiusLG}px`,
+    };
+}
+/** 只在消息领域内统一页面框架，避免把订阅语义放进跨领域 shared 包。 */
+export default function MessageWorkspace({ title, description, icon = _jsx(BellOutlined, {}), extra, className, children, }) {
+    const messageTheme = useMessageTheme();
+    return (_jsx(PageContainer, { pageHeaderRender: false, className: "qiqb-message-page", children: _jsxs("div", { className: ['qiqb-message', className].filter(Boolean).join(' '), style: messageTheme, children: [_jsxs("header", { className: "qiqb-message-heading", children: [_jsxs("div", { className: "qiqb-message-heading-main", children: [_jsx("div", { className: "qiqb-message-heading-icon", "aria-hidden": true, children: icon }), _jsxs("div", { children: [_jsx("h1", { children: title }), _jsx("p", { children: description })] })] }), extra && _jsx("div", { className: "qiqb-message-heading-actions", children: extra })] }), children] }) }));
+}

package/build/components/message-navigation.less

@@ -0,0 +1,89 @@
+.qiqb-message-navigation {
+  // 导航弹层适配窄屏和宿主主题，正文作为纯文本预览，不执行消息中的 HTML。
+  width: 360px;
+  max-width: calc(100vw - 48px);
+  color: var(--message-nav-text);
+
+  &-heading {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding-bottom: 8px;
+  }
+
+  &-list {
+    max-height: min(420px, 55vh);
+    overflow-y: auto;
+    margin: 8px 0;
+  }
+
+  &-item {
+    display: block;
+    width: 100%;
+    padding: 12px 8px;
+    border: 0;
+    border-bottom: 1px solid var(--message-nav-border);
+    border-radius: 4px;
+    color: inherit;
+    background: transparent;
+    font: inherit;
+    text-align: left;
+    cursor: pointer;
+
+    &:hover,
+    &:focus-visible {
+      background: var(--message-nav-hover);
+    }
+  }
+
+  &-title,
+  &-summary,
+  &-meta {
+    display: block;
+    overflow-wrap: anywhere;
+  }
+
+  &-title {
+    margin-bottom: 4px;
+    font-weight: 600;
+  }
+
+  &-summary {
+    display: -webkit-box;
+    overflow: hidden;
+    color: var(--message-nav-muted);
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+  }
+
+  &-meta {
+    margin-top: 6px;
+    color: var(--message-nav-muted);
+    font-size: 12px;
+  }
+
+  &-footer {
+    margin-top: 8px;
+    border-top: 1px solid var(--message-nav-border);
+    text-align: center;
+  }
+
+  &-icon {
+    position: relative;
+    display: inline-flex;
+
+    &-disconnected {
+      color: var(--message-nav-warning);
+    }
+  }
+
+  &-disconnected-mark {
+    // 右上角继续显示真实未读数，右下角插头标识表示连接断开。
+    position: absolute;
+    right: -5px;
+    bottom: -4px;
+    padding: 1px;
+    border-radius: 50%;
+    background: var(--message-nav-background);
+  }
+}