@qiqb/message-domain 0.0.0-stage → 0.1.4

package/build/pages/inbox/InboxPage.js

@@ -0,0 +1,265 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { ArrowRightOutlined, CheckOutlined, InboxOutlined, ReadOutlined, ReloadOutlined, } from '@ant-design/icons';
+import { Button, Drawer, Grid, Pagination, Segmented, Select, Skeleton, Space, Tag, } from 'antd';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import MessageWorkspace, { useMessageTheme, } from '../../components/MessageWorkspace.js';
+import { getMessageDomainRuntime, navigate, useLocation } from '../../runtime/index.js';
+import { dispatchMessageReceiptRead, subscribeMessageReceiptRead, } from '../../runtime/reminderEvents.js';
+import { getInboxMessage, getMessageTopics, getUnreadMessageCount, isInternalMessagePath, markInboxMessageRead, pageInboxMessages, showMessageError, } from '../../services/MessageController.js';
+import './inbox.less';
+const receiptId = (record) => record.receiptId || record.id;
+function isExpired(record) {
+    return (!!record.expiresAt && new Date(record.expiresAt).getTime() <= Date.now());
+}
+/** 只强调发布时保存的重要/严重级别，历史消息不额外占用普通级别标签。 */
+function messageLevelTag(record) {
+    if (record.messageLevel === 'SEVERE')
+        return _jsx(Tag, { color: "error", children: "\u4E25\u91CD" });
+    if (record.messageLevel === 'IMPORTANT')
+        return _jsx(Tag, { color: "warning", children: "\u91CD\u8981" });
+    return null;
+}
+/** 服务端本地时间不附带时区，按浏览器本地时间展示；无效值保留原文便于识别。 */
+function formatTime(value, short = false) {
+    if (!value)
+        return '—';
+    const date = new Date(value.replace(' ', 'T'));
+    if (Number.isNaN(date.getTime()))
+        return value;
+    return date.toLocaleString('zh-CN', {
+        ...(short ? {} : { year: 'numeric' }),
+        month: '2-digit',
+        day: '2-digit',
+        hour: '2-digit',
+        minute: '2-digit',
+        hour12: false,
+    });
+}
+export default function InboxPage() {
+    const location = useLocation();
+    const confirmedReadAt = useRef(new Map());
+    const screens = Grid.useBreakpoint();
+    const compact = screens.md === false;
+    const messageTheme = useMessageTheme();
+    const mounted = useRef(true);
+    const readRequests = useRef(new Map());
+    const listVersion = useRef(0);
+    const detailVersion = useRef(0);
+    const countVersion = useRef(0);
+    const [query, setQuery] = useState({ current: 1, pageSize: 10 });
+    const [refreshKey, setRefreshKey] = useState(0);
+    const [records, setRecords] = useState([]);
+    const [topics, setTopics] = useState([]);
+    const [total, setTotal] = useState(0);
+    const [loading, setLoading] = useState(true);
+    const [listFailed, setListFailed] = useState(false);
+    const [unreadCount, setUnreadCount] = useState();
+    const [countLoading, setCountLoading] = useState(false);
+    const [detailId, setDetailId] = useState();
+    const [detail, setDetail] = useState();
+    const [detailLoading, setDetailLoading] = useState(false);
+    const [detailFailed, setDetailFailed] = useState(false);
+    const [busyIds, setBusyIds] = useState([]);
+    const topicName = (record) => topics.find((topic) => topic.code === record.topicCode)?.name ||
+        record.topicName ||
+        record.topicCode;
+    const refreshCount = useCallback(async () => {
+        if (!mounted.current)
+            return;
+        const version = ++countVersion.current;
+        setCountLoading(true);
+        try {
+            const { data } = await getUnreadMessageCount();
+            if (version === countVersion.current)
+                setUnreadCount(data?.count || 0);
+        }
+        catch (error) {
+            if (version === countVersion.current)
+                showMessageError(error, '加载未读数量失败');
+        }
+        finally {
+            if (version === countVersion.current)
+                setCountLoading(false);
+        }
+    }, []);
+    useEffect(() => {
+        void refreshCount();
+    }, [refreshCount]);
+    useEffect(() => {
+        let cancelled = false;
+        void getMessageTopics()
+            .then(({ data }) => {
+            if (!cancelled)
+                setTopics(data || []);
+        })
+            .catch((error) => {
+            if (!cancelled)
+                showMessageError(error, '加载消息主题失败');
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, []);
+    useEffect(() => {
+        const version = ++listVersion.current;
+        setLoading(true);
+        setListFailed(false);
+        void pageInboxMessages({ ...query })
+            .then(({ data }) => {
+            if (version !== listVersion.current)
+                return;
+            const resultTotal = data?.total || 0;
+            // 未读列表中的最后一条被阅读后，退回有效页，避免留在空白分页上。
+            if (query.current > 1 &&
+                (query.current - 1) * query.pageSize >= resultTotal) {
+                setQuery((current) => ({
+                    ...current,
+                    current: Math.max(1, Math.ceil(resultTotal / current.pageSize)),
+                }));
+                return;
+            }
+            setRecords(data?.records || []);
+            setTotal(resultTotal);
+        })
+            .catch((error) => {
+            if (version !== listVersion.current)
+                return;
+            setListFailed(true);
+            showMessageError(error, '加载我的消息失败');
+        })
+            .finally(() => {
+            if (version === listVersion.current)
+                setLoading(false);
+        });
+        return () => {
+            ++listVersion.current;
+        };
+    }, [query, refreshKey]);
+    useEffect(() => {
+        mounted.current = true;
+        return () => {
+            // 页面卸载后不再让迟到的详情/数量请求回写状态。
+            mounted.current = false;
+            ++detailVersion.current;
+            ++countVersion.current;
+        };
+    }, []);
+    const refresh = () => {
+        setRefreshKey((value) => value + 1);
+        void refreshCount();
+    };
+    const markRead = (record) => {
+        if (!mounted.current)
+            return Promise.resolve();
+        const id = receiptId(record);
+        // 慢网下反复打开同一消息时共享在途确认；不同消息仍可独立阅读。
+        const pending = readRequests.current.get(id);
+        if (pending)
+            return pending;
+        setBusyIds((current) => [...current, id]);
+        const operation = (async () => {
+            try {
+                await markInboxMessageRead(id);
+                // 已发出的确认正常完成；页面离开后不再补发查询或提示上一页的错误。
+                if (!mounted.current)
+                    return;
+                // 统一广播成功确认；全局提醒和本页列表同步，出现提醒本身不会调用这里。
+                dispatchMessageReceiptRead(id);
+            }
+            catch (error) {
+                if (mounted.current)
+                    showMessageError(error, '标记已读失败，请重试');
+            }
+            finally {
+                readRequests.current.delete(id);
+                if (mounted.current)
+                    setBusyIds((current) => current.filter((value) => value !== id));
+            }
+        })();
+        readRequests.current.set(id, operation);
+        return operation;
+    };
+    const loadDetail = async (id) => {
+        const version = ++detailVersion.current;
+        setDetailId(id);
+        setDetail(undefined);
+        setDetailLoading(true);
+        setDetailFailed(false);
+        try {
+            const { data } = await getInboxMessage(id);
+            if (version !== detailVersion.current)
+                return;
+            if (!data)
+                throw new Error('消息详情不存在');
+            // 迟到的旧详情不能覆盖已经完成的阅读确认，尤其是从全局提醒跳转的同一消息。
+            const confirmed = confirmedReadAt.current.get(id);
+            if (confirmed)
+                data.readAt = confirmed;
+            setDetail(data);
+            // 用户明确打开并且详情加载成功后，才确认阅读；切换筛选不会自动阅读消息。
+            if (!data.readAt)
+                await markRead(data);
+        }
+        catch (error) {
+            if (version === detailVersion.current) {
+                setDetailFailed(true);
+                showMessageError(error, '加载消息详情失败');
+            }
+        }
+        finally {
+            if (version === detailVersion.current)
+                setDetailLoading(false);
+        }
+    };
+    useEffect(() => {
+        const onRead = ({ id, readAt }) => {
+            confirmedReadAt.current.set(id, readAt);
+            setDetail((current) => current && receiptId(current) === id ? { ...current, readAt } : current);
+            setRecords((current) => current.map((record) => receiptId(record) === id ? { ...record, readAt } : record));
+            setRefreshKey((value) => value + 1);
+            void refreshCount();
+        };
+        return subscribeMessageReceiptRead(onRead);
+    }, [refreshCount]);
+    useEffect(() => {
+        const id = new URLSearchParams(location.search).get(getMessageDomainRuntime().receiptQueryParam);
+        if (id)
+            void loadDetail(id);
+        // URL 定位来自全局提醒；只有地址变化才加载，普通列表状态更新不能反复读取详情。
+    }, [location.search]);
+    const reader = (_jsx("section", { className: "qiqb-inbox-reader", "aria-label": "\u6D88\u606F\u8BE6\u60C5", "aria-busy": detailLoading, children: detailLoading && !detail ? (_jsx("div", { className: "qiqb-inbox-reader-body", children: _jsx(Skeleton, { active: true, title: { width: '60%' }, paragraph: { rows: 8 } }) })) : detail ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "qiqb-inbox-reader-top", children: [_jsxs("div", { className: "qiqb-inbox-reader-heading", children: [_jsxs("h2", { className: "qiqb-inbox-reader-title", children: [detail.title, ' ', _jsx("span", { className: "qiqb-inbox-reader-topic", children: topicName(detail) })] }), (isInternalMessagePath(detail.targetPath) || !detail.readAt) && (_jsxs(Space, { className: "qiqb-inbox-reader-actions", size: 8, wrap: true, children: [isInternalMessagePath(detail.targetPath) && (_jsx(Button, { type: "primary", size: "small", icon: _jsx(ArrowRightOutlined, {}), onClick: () => navigate(detail.targetPath), children: "\u67E5\u770B\u76F8\u5173\u4E1A\u52A1" })), !detail.readAt && (_jsx(Button, { size: "small", icon: _jsx(CheckOutlined, {}), loading: busyIds.includes(receiptId(detail)), onClick: () => void markRead(detail), children: "\u6807\u8BB0\u5DF2\u8BFB" }))] }))] }), _jsxs("div", { className: "qiqb-inbox-reader-info", children: [_jsxs(Space, { size: [8, 4], wrap: true, children: [messageLevelTag(detail), _jsx("span", { children: detail.sourceSystem.toUpperCase() }), _jsxs("span", { children: ["\u6536\u5230\u4E8E ", formatTime(detail.createTime)] })] }), _jsxs("span", { className: "qiqb-inbox-read-state", children: [detail.readAt ? (_jsxs(_Fragment, { children: [_jsx(CheckOutlined, {}), " \u5DF2\u8BFB"] })) : ('未读'), isExpired(detail) && _jsx(Tag, { children: "\u5DF2\u8FC7\u671F" })] })] })] }), _jsxs("div", { className: "qiqb-inbox-reader-body", children: [_jsx("div", { className: "qiqb-inbox-message-content", children: detail.content }), _jsxs("dl", { className: "qiqb-inbox-detail-meta", children: [_jsxs("div", { children: [_jsx("dt", { children: "\u53D1\u751F\u65F6\u95F4" }), _jsx("dd", { children: formatTime(detail.occurredAt) })] }), detail.businessType && (_jsxs("div", { children: [_jsx("dt", { children: "\u4E1A\u52A1\u7C7B\u578B" }), _jsx("dd", { children: detail.businessType })] })), detail.businessId && (_jsxs("div", { children: [_jsx("dt", { children: "\u4E1A\u52A1\u7F16\u53F7" }), _jsx("dd", { children: detail.businessId })] })), detail.expiresAt && (_jsxs("div", { children: [_jsx("dt", { children: "\u6709\u6548\u671F\u81F3" }), _jsx("dd", { children: formatTime(detail.expiresAt) })] }))] })] })] })) : (_jsxs("div", { className: "qiqb-message-state qiqb-inbox-reader-placeholder", children: [_jsx("span", { className: "qiqb-message-state-icon", children: _jsx(ReadOutlined, {}) }), _jsx("h3", { children: detailFailed ? '暂时无法打开这条消息' : '选择一条消息开始阅读' }), _jsx("p", { children: detailFailed
+                        ? '消息详情加载失败，请重试。'
+                        : '在左侧查看消息，阅读详情或前往相关业务。' }), detailFailed && detailId && (_jsx(Button, { onClick: () => void loadDetail(detailId), children: "\u91CD\u65B0\u52A0\u8F7D" }))] })) }));
+    return (_jsxs(MessageWorkspace, { title: "\u6211\u7684\u6D88\u606F", description: "\u96C6\u4E2D\u67E5\u770B\u4E1A\u52A1\u63D0\u9192\uFF0C\u53CA\u65F6\u8DDF\u8FDB\u4E0E\u4F60\u76F8\u5173\u7684\u6D88\u606F\u3002", icon: _jsx(InboxOutlined, {}), className: "qiqb-inbox-workspace", children: [_jsxs("div", { className: "qiqb-message-surface", children: [_jsxs("div", { className: "qiqb-message-toolbar qiqb-inbox-toolbar", children: [_jsxs("div", { className: "qiqb-inbox-filters", children: [_jsx(Segmented, { "aria-label": "\u7B5B\u9009\u9605\u8BFB\u72B6\u6001", value: query.unread === undefined
+                                            ? 'ALL'
+                                            : query.unread
+                                                ? 'UNREAD'
+                                                : 'READ', options: [
+                                            { label: '全部消息', value: 'ALL' },
+                                            { label: '未读', value: 'UNREAD' },
+                                            { label: '已读', value: 'READ' },
+                                        ], onChange: (value) => setQuery((current) => ({
+                                            ...current,
+                                            current: 1,
+                                            unread: value === 'ALL' ? undefined : value === 'UNREAD',
+                                        })) }), _jsx(Select, { className: "qiqb-message-filter-select", "aria-label": "\u7B5B\u9009\u6D88\u606F\u4E3B\u9898", placeholder: "\u5168\u90E8\u6D88\u606F\u4E3B\u9898", allowClear: true, showSearch: true, optionFilterProp: "label", value: query.topicCode, options: topics.map((topic) => ({
+                                            value: topic.code,
+                                            label: topic.name,
+                                        })), onChange: (topicCode) => setQuery((current) => ({ ...current, current: 1, topicCode })) })] }), _jsxs("div", { className: "qiqb-inbox-toolbar-summary", children: [_jsx("span", { className: "qiqb-message-caption", "aria-live": "polite", children: listFailed ? '加载失败' : '共 ' + total + ' 条' }), _jsxs("span", { className: "qiqb-inbox-unread-summary", children: ["\u672A\u8BFB", ' ', _jsx("strong", { "aria-live": "polite", children: unreadCount === undefined ? '—' : unreadCount })] }), _jsx(Button, { size: "small", icon: _jsx(ReloadOutlined, {}), loading: loading || countLoading, onClick: refresh, children: "\u5237\u65B0" })] })] }), _jsxs("div", { className: "qiqb-inbox-layout", children: [_jsxs("section", { className: "qiqb-inbox-list", "aria-label": "\u6D88\u606F\u5217\u8868", "aria-busy": loading, children: [_jsx("div", { className: "qiqb-inbox-list-body", children: loading ? (_jsx("div", { className: "qiqb-inbox-list-skeleton", children: [0, 1, 2].map((key) => (_jsx(Skeleton, { active: true, title: true, paragraph: { rows: 2 } }, key))) })) : listFailed ? (_jsxs("div", { className: "qiqb-message-state", children: [_jsx("span", { className: "qiqb-message-state-icon", children: _jsx(InboxOutlined, {}) }), _jsx("h3", { children: "\u6D88\u606F\u52A0\u8F7D\u5931\u8D25" }), _jsx("p", { children: "\u8BF7\u91CD\u65B0\u52A0\u8F7D\u540E\u7EE7\u7EED\u67E5\u770B\u3002" }), _jsx(Button, { onClick: refresh, children: "\u91CD\u65B0\u52A0\u8F7D" })] })) : records.length ? (records.map((record) => (_jsxs("button", { type: "button", className: [
+                                                'qiqb-inbox-item',
+                                                receiptId(record) === detailId ? 'is-selected' : '',
+                                                !record.readAt ? 'is-unread' : '',
+                                            ].join(' '), "aria-pressed": receiptId(record) === detailId, onClick: () => void loadDetail(receiptId(record)), children: [_jsxs("span", { className: "qiqb-inbox-item-heading", children: [_jsxs("span", { className: "qiqb-inbox-item-title-group", children: [_jsxs("span", { className: "qiqb-inbox-item-title", title: record.title, children: [!record.readAt && (_jsx("span", { className: "qiqb-inbox-unread-dot", "aria-label": "\u672A\u8BFB" })), record.title] }), _jsx("span", { className: "qiqb-inbox-item-topic", title: topicName(record), children: topicName(record) })] }), _jsx("time", { children: formatTime(record.createTime, true) })] }), _jsx("span", { className: "qiqb-inbox-item-preview", children: record.content || '点击查看消息详情' }), _jsxs("span", { className: "qiqb-inbox-item-footer", children: [_jsxs("span", { className: "qiqb-inbox-item-meta", children: [messageLevelTag(record), _jsx("span", { className: "qiqb-inbox-item-source", children: record.sourceSystem.toUpperCase() }), record.businessId && (_jsx("span", { className: "qiqb-inbox-item-business", title: '业务编号：' + record.businessId, children: record.businessId }))] }), _jsx("span", { className: "qiqb-inbox-item-state", children: isExpired(record)
+                                                                ? '已过期'
+                                                                : record.readAt
+                                                                    ? '已读'
+                                                                    : '未读' })] })] }, receiptId(record))))) : (_jsxs("div", { className: "qiqb-message-state", children: [_jsx("span", { className: "qiqb-message-state-icon", children: _jsx(InboxOutlined, {}) }), _jsx("h3", { children: query.unread === true
+                                                        ? '未读消息已处理完'
+                                                        : '这里还没有消息' }), _jsx("p", { children: query.topicCode || query.unread !== undefined
+                                                        ? '试试切换阅读状态或消息主题。'
+                                                        : '订阅感兴趣的主题后，新的消息会出现在这里。' })] })) }), total > 0 && !listFailed && (_jsx("div", { className: "qiqb-inbox-pagination", children: _jsx(Pagination, { size: "small", simple: true, current: query.current, pageSize: query.pageSize, total: total, showSizeChanger: false, onChange: (current) => setQuery((previous) => ({ ...previous, current })) }) }))] }), !compact && reader] })] }), _jsx(Drawer, { title: "\u9605\u8BFB\u6D88\u606F", open: compact && !!detailId, width: "100%", rootClassName: "qiqb-inbox-mobile", rootStyle: messageTheme, styles: { body: { padding: 0 } }, onClose: () => {
+                    setDetailId(undefined);
+                    ++detailVersion.current;
+                    setDetailLoading(false);
+                }, children: _jsx("div", { className: "qiqb-message", children: reader }) })] }));
+}

package/build/pages/inbox/inbox.less

@@ -0,0 +1,430 @@
+/* 收件箱单独收紧页头，其他消息管理页面继续使用领域默认间距。 */
+.qiqb-inbox-workspace {
+  .qiqb-message-heading {
+    gap: 12px;
+    margin-bottom: 12px;
+  }
+
+  .qiqb-message-heading-main {
+    gap: 10px;
+
+    h1 {
+      font-size: 20px;
+    }
+
+    p {
+      margin-top: 0;
+      font-size: 12px;
+    }
+  }
+
+  .qiqb-message-heading-icon {
+    flex-basis: 36px;
+    width: 36px;
+    height: 36px;
+    border-radius: 10px;
+    font-size: 18px;
+  }
+}
+
+.qiqb-message {
+  .qiqb-inbox-toolbar {
+    gap: 10px 16px;
+    padding: 10px 16px;
+  }
+
+  .qiqb-inbox-filters,
+  .qiqb-inbox-toolbar-summary {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 10px;
+    min-width: 0;
+  }
+
+  .qiqb-inbox-toolbar-summary {
+    margin-left: auto;
+  }
+
+  .qiqb-inbox-unread-summary {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    color: var(--message-muted);
+    font-size: 12px;
+
+    strong {
+      min-width: 22px;
+      padding: 1px 6px;
+      color: var(--message-primary);
+      background: var(--message-primary-bg);
+      border-radius: 4px;
+      font-weight: 500;
+      font-variant-numeric: tabular-nums;
+      text-align: center;
+    }
+  }
+
+  .qiqb-inbox-layout {
+    display: grid;
+    /* 宽屏限制摘要列宽，把主要空间留给正文；小桌面仍保证标题可读。 */
+    grid-template-columns: minmax(300px, min(38%, 480px)) minmax(0, 1fr);
+    height: clamp(400px, calc(100vh - 216px), 780px);
+  }
+
+  .qiqb-inbox-list {
+    display: flex;
+    min-width: 0;
+    min-height: 0;
+    flex-direction: column;
+    border-right: 1px solid var(--message-border);
+  }
+
+  .qiqb-inbox-list-body {
+    flex: 1;
+    min-height: 0;
+    overflow: auto;
+    scrollbar-width: thin;
+  }
+
+  .qiqb-inbox-list-skeleton {
+    padding: 16px;
+
+    > div + div {
+      margin-top: 20px;
+    }
+  }
+
+  .qiqb-inbox-item {
+    display: flex;
+    width: 100%;
+    min-width: 0;
+    flex-direction: column;
+    gap: 5px;
+    padding: 11px 16px 11px 13px;
+    color: var(--message-text);
+    background: transparent;
+    border: 0;
+    border-bottom: 1px solid var(--message-border);
+    border-left: 3px solid transparent;
+    font: inherit;
+    text-align: left;
+    cursor: pointer;
+    transition: background 0.16s ease, border-color 0.16s ease;
+
+    &:hover {
+      background: var(--message-fill);
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--message-primary);
+      outline-offset: -3px;
+    }
+
+    &.is-selected {
+      background: var(--message-primary-bg);
+      border-left-color: var(--message-primary);
+    }
+
+    &.is-unread .qiqb-inbox-item-title {
+      font-weight: 600;
+    }
+  }
+
+  .qiqb-inbox-item-heading,
+  .qiqb-inbox-item-footer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    min-width: 0;
+    color: var(--message-muted);
+    font-size: 12px;
+    line-height: 20px;
+
+    time {
+      flex-shrink: 0;
+      font-size: 11px;
+      font-variant-numeric: tabular-nums;
+    }
+  }
+
+  .qiqb-inbox-item-title-group {
+    display: flex;
+    flex: 1;
+    align-items: baseline;
+    gap: 8px;
+    min-width: 0;
+    overflow: hidden;
+  }
+
+  .qiqb-inbox-item-title {
+    display: block;
+    flex: 0 1 auto;
+    min-width: 0;
+    overflow: hidden;
+    color: var(--message-text);
+    font-size: 14px;
+    line-height: 22px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .qiqb-inbox-unread-dot {
+    display: inline-block;
+    width: 6px;
+    height: 6px;
+    margin: 0 7px 2px 0;
+    background: var(--message-primary);
+    border-radius: 50%;
+  }
+
+  .qiqb-inbox-item-preview {
+    display: block;
+    overflow: hidden;
+    color: var(--message-muted);
+    font-size: 13px;
+    line-height: 20px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  /* 级别、来源与编号共享一行；长业务字段只在列表省略，详情保留完整值。 */
+  .qiqb-inbox-item-meta {
+    display: flex;
+    flex: 1;
+    align-items: center;
+    gap: 8px;
+    min-width: 0;
+    overflow: hidden;
+
+    .ant-tag {
+      flex-shrink: 0;
+      margin: 0;
+      padding-inline: 4px;
+      font-size: 11px;
+      line-height: 18px;
+    }
+  }
+
+  .qiqb-inbox-item-topic,
+  .qiqb-inbox-item-source,
+  .qiqb-inbox-item-business {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .qiqb-inbox-item-topic {
+    /* 附加主题最多占标题区域约三分之一，避免长主题挤掉消息标题。 */
+    flex: 0 0 auto;
+    max-width: 35%;
+    color: var(--message-muted);
+    font-size: 12px;
+  }
+
+  .qiqb-inbox-item-source,
+  .qiqb-inbox-item-business {
+    padding-left: 8px;
+    border-left: 1px solid var(--message-border);
+    line-height: 14px;
+  }
+
+  .qiqb-inbox-item-source {
+    /* 编号过长时仍保留来源系统，方便识别消息来自哪个业务。 */
+    flex-shrink: 0;
+    max-width: 28%;
+
+    /* 普通消息没有级别标签，来源位于首项时不显示多余的分隔线。 */
+    &:first-child {
+      padding-left: 0;
+      border-left: 0;
+    }
+  }
+
+  .qiqb-inbox-item-state {
+    flex-shrink: 0;
+    font-size: 11px;
+  }
+
+  .qiqb-inbox-pagination {
+    display: flex;
+    flex-shrink: 0;
+    justify-content: center;
+    padding: 10px 12px;
+    border-top: 1px solid var(--message-border);
+  }
+
+  .qiqb-inbox-reader {
+    display: flex;
+    min-width: 0;
+    min-height: 0;
+    flex-direction: column;
+    /* 标题、主题和正文共同滚动，长标题不会挤掉正文的阅读空间。 */
+    overflow: auto;
+    background: var(--message-surface);
+    scrollbar-width: thin;
+  }
+
+  .qiqb-inbox-reader-top {
+    flex-shrink: 0;
+    padding: 16px 22px;
+    border-bottom: 1px solid var(--message-border);
+
+    .ant-tag {
+      max-width: 100%;
+      margin-inline-end: 0;
+      white-space: normal;
+      overflow-wrap: anywhere;
+    }
+  }
+
+  .qiqb-inbox-reader-heading,
+  .qiqb-inbox-reader-info {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    gap: 8px 12px;
+    min-width: 0;
+  }
+
+  .qiqb-inbox-reader-title {
+    display: block;
+    flex: 1;
+    min-width: 160px;
+    margin: 0;
+    color: var(--message-text);
+    font-size: 18px;
+    font-weight: 600;
+    line-height: 1.5;
+    overflow-wrap: anywhere;
+  }
+
+  .qiqb-inbox-reader-topic {
+    margin-left: 10px;
+    color: var(--message-muted);
+    font-size: 12px;
+    font-weight: 400;
+  }
+
+  .qiqb-inbox-reader-actions {
+    flex-shrink: 0;
+  }
+
+  .qiqb-inbox-reader-info {
+    margin-top: 8px;
+    color: var(--message-muted);
+    font-size: 12px;
+    line-height: 22px;
+
+    > .ant-space {
+      flex: 1;
+      min-width: 0;
+      overflow-wrap: anywhere;
+    }
+  }
+
+  .qiqb-inbox-read-state {
+    display: inline-flex;
+    align-items: center;
+    flex-shrink: 0;
+    gap: 6px;
+    color: var(--message-muted);
+    font-size: 12px;
+  }
+
+  .qiqb-inbox-reader-body {
+    flex: 1;
+    flex-shrink: 0;
+    padding: 20px 22px;
+  }
+
+  .qiqb-inbox-message-content {
+    font-size: 14px;
+    line-height: 1.8;
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+  }
+
+  .qiqb-inbox-detail-meta {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 10px 24px;
+    margin: 20px 0 0;
+    padding-top: 16px;
+    border-top: 1px solid var(--message-border);
+    font-size: 12px;
+    line-height: 20px;
+
+    > div {
+      display: flex;
+      gap: 12px;
+      min-width: 0;
+    }
+
+    dt {
+      flex-shrink: 0;
+      color: var(--message-muted);
+    }
+
+    dd {
+      min-width: 0;
+      margin: 0;
+      color: var(--message-text);
+      overflow-wrap: anywhere;
+    }
+  }
+
+  .qiqb-inbox-reader-placeholder {
+    flex: 1;
+    min-height: 0;
+  }
+
+  @media (max-width: 991px) {
+    .qiqb-inbox-detail-meta {
+      grid-template-columns: minmax(0, 1fr);
+    }
+  }
+
+  @media (max-width: 767px) {
+    .qiqb-inbox-filters {
+      width: 100%;
+
+      .qiqb-message-filter-select {
+        flex: 1;
+        width: auto;
+        min-width: 140px;
+      }
+    }
+
+    .qiqb-inbox-layout {
+      grid-template-columns: minmax(0, 1fr);
+      height: auto;
+      min-height: 360px;
+    }
+
+    .qiqb-inbox-list-body {
+      max-height: 65vh;
+    }
+
+    .qiqb-inbox-list {
+      border-right: 0;
+    }
+
+    .qiqb-inbox-reader-body {
+      padding: 16px;
+    }
+
+    .qiqb-inbox-reader-top {
+      padding: 14px 16px;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .qiqb-inbox-item {
+      transition: none;
+    }
+  }
+}

package/build/pages/subscription/PersonalSubscriptionPage.d.ts

@@ -0,0 +1 @@
+export default function PersonalSubscriptionPage(): import("react").JSX.Element;