freefire/jiang13-forum
2
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 4 Wiki Activity

fix: 待审通知实时回填审核态并重构消息页体验

Browse Source
This commit is contained in:
姜十三
2026-09-02 01:39:27 +08:00
parent 2e9c42a34c
commit 1c0f7ede55
18 changed files with 1458 additions and 463 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/api/client.ts
View File

@@ -664,6 +664,8 @@ export const api = {
},
markNotificationsRead: () =>
request<{ message: string }>('/api/messages/notifications/read', { method: 'POST' }),
markMessageRead: (id: number) =>
request<{ message: string }>(`/api/messages/${id}/read`, { method: 'POST' }),
sendMessage: (body: { to_user_id: number; subject?: string; content: string }) =>
request<{ message: PrivateMessage }>('/api/messages', {
method: 'POST', body: JSON.stringify(body),

6
frontend/src/api/types.ts
View File

@@ -717,9 +717,13 @@ export interface PrivateMessage {
to_user_id: number;
subject: string;
content: string;
kind: 'user' | 'system' | 'reject' | 'report_result' | string;
kind: 'user' | 'system' | 'reject' | 'report_result' | 'reply' | 'mention' | 'moderation' | string;
related_post_id?: number;
related_report_id?: number;
related_comment_id?: number;
related_floor?: number;
/** 待审目标实时状态：pending|published|rejected|deleted */
related_status?: string;
is_read: boolean;
created_at: string;
from_user?: User;

26
frontend/src/layouts/MainLayout.tsx
View File

@@ -72,6 +72,8 @@ export default function MainLayout() {
const [recentComments, setRecentComments] = useState<RecentComment[]>(() => getCachedRecentComments());
const [recentUsers, setRecentUsers] = useState<RecentUser[]>(() => getCachedRecentUsers());
const [unreadMessages, setUnreadMessages] = useState(() => getBootUnread());
const [dmUnread, setDmUnread] = useState(0);
const [notifyUnread, setNotifyUnread] = useState(0);
const [tags, setTags] = useState<TagCount[]>(() => getCachedTags());
const [tagsLoading, setTagsLoading] = useState(() => getCachedTags().length === 0);
const [postOutline, setPostOutline] = useState<{
@@ -309,13 +311,29 @@ export default function MainLayout() {
const refreshUnreadMessages = useCallback(() => {
if (!user) {
setUnreadMessages(0);
setDmUnread(0);
setNotifyUnread(0);
return;
}
api.messageUnreadCount()
.then((r) => setUnreadMessages(r.count || 0))
.catch(() => setUnreadMessages(0));
.then((r) => {
setUnreadMessages(r.count || 0);
setDmUnread(r.dm_count ?? 0);
setNotifyUnread(r.notify_count ?? 0);
})
.catch(() => {
setUnreadMessages(0);
setDmUnread(0);
setNotifyUnread(0);
});
}, [user]);
/** 仅有通知未读时直达通知 Tab，避免先看到空私信列表 */
const openMessages = useCallback(() => {
const path = notifyUnread > 0 && dmUnread === 0 ? '/messages?tab=notify' : '/messages';
void transitionTo(nav, path);
}, [nav, notifyUnread, dmUnread]);
useEffect(() => {
refreshUnreadMessages();
const onRefresh = () => refreshUnreadMessages();
@@ -667,7 +685,7 @@ export default function MainLayout() {
className="header-icon-btn header-msg-btn"
title={unreadMessages > 0 ? `${unreadMessages} 条未读消息` : '站内消息'}
aria-label={unreadMessages > 0 ? `站内消息，${unreadMessages} 条未读` : '站内消息'}
onClick={() => void transitionTo(nav, '/messages')}
onClick={openMessages}
>
<Mail size={18} aria-hidden />
{unreadMessages > 0 && (
@@ -691,7 +709,7 @@ export default function MainLayout() {
<DropdownMenuItem onClick={() => void transitionTo(nav, '/profile')}>
账号设置{typeof user.points === 'number' ? ` · ${user.points} 积分` : ''}
</DropdownMenuItem>
<DropdownMenuItem onClick={() => void transitionTo(nav, '/messages')}>
<DropdownMenuItem onClick={openMessages}>
站内消息{unreadMessages > 0 ? ` (${unreadMessages})` : ''}
</DropdownMenuItem>
<DropdownMenuItem onClick={() => void transitionTo(nav, '/favorites')}>我的收藏</DropdownMenuItem>

648
frontend/src/pages/MessagesPage.tsx
View File

@@ -1,6 +1,18 @@
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { Link, useNavigate, useSearchParams } from 'react-router-dom';
import { ArrowLeft, Bell, CheckCheck, Inbox, Mail, Send } from 'lucide-react';
import {
ArrowLeft,
AtSign,
Bell,
CheckCheck,
Flag,
Inbox,
Mail,
MessageCircleReply,
Send,
ShieldAlert,
XCircle,
} from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Spinner } from '@/components/ui/spinner';
import { notify } from '@/lib/notify';
@@ -9,7 +21,7 @@ import type { MessageConversation, PrivateMessage, User } from '../api/types';
import { useAuth } from '../hooks/useAuth';
import { loginPath } from '../utils/authRedirect';
import { useNoIndexSEO } from '../hooks/usePageSEO';
import { formatTime } from '../utils/content';
import { formatDateTime, formatTime } from '../utils/content';
import { postPath } from '../utils/permalink';
import { userPath } from '../utils/userPath';
import { InFlowSiteFooter } from '../components/SiteFooter';
@@ -20,7 +32,6 @@ import { PAGE_SOFT_REFRESH_COMMIT_EVENT } from '../utils/softRefresh';
type MsgTab = 'dm' | 'notify';
type ConvSnap = { conversations: MessageConversation[]; total: number; page: number };
type NotifySnap = { notifications: PrivateMessage[]; total: number; page: number };
type ThreadSnap = { messages: PrivateMessage[]; total: number; peerUser: User | null };
const NOTIFY_KINDS = [
@@ -28,23 +39,91 @@ const NOTIFY_KINDS = [
{ key: 'reply', label: '回复' },
{ key: 'mention', label: '@提及' },
{ key: 'moderation', label: '待审' },
{ key: 'reject', label: '拒帖' },
{ key: 'reject', label: '未通过' },
{ key: 'report_result', label: '举报' },
{ key: 'system', label: '系统' },
] as const;
function kindLabel(kind: string) {
function kindLabel(kind: string, relatedStatus?: string) {
if (kind === 'moderation') {
if (relatedStatus && relatedStatus !== 'pending') return '审核';
return '待审';
}
switch (kind) {
case 'reject': return '拒帖通知';
case 'reject': return '未通过';
case 'report_result': return '举报结果';
case 'reply': return '回复提醒';
case 'mention': return '@提及';
case 'moderation': return '待审提醒';
case 'system': return '系统通知';
default: return '通知';
}
}
function statusLabel(status?: string) {
switch (status) {
case 'pending': return '待审';
case 'published': return '已通过';
case 'rejected': return '未通过';
case 'deleted': return '已删除';
default: return '';
}
}
/** 仍待处理的审核通知（无状态按待审处理，兼容未回填） */
function isPendingModeration(m: PrivateMessage) {
return m.kind === 'moderation' && (!m.related_status || m.related_status === 'pending');
}
function KindIcon({ kind }: { kind: string }) {
const props = { size: 15, 'aria-hidden': true as const };
switch (kind) {
case 'reply': return <MessageCircleReply {...props} />;
case 'mention': return <AtSign {...props} />;
case 'moderation': return <ShieldAlert {...props} />;
case 'reject': return <XCircle {...props} />;
case 'report_result': return <Flag {...props} />;
default: return <Bell {...props} />;
}
}
/** 按通知类型生成跳转目标与 CTA 文案（待审跳前台帖/楼层） */
function notifyTarget(m: PrivateMessage): { to: string; label: string } | null {
const postID = m.related_post_id;
const commentID = m.related_comment_id;
const floor = m.related_floor && m.related_floor > 0 ? m.related_floor : 0;
const looksLikeComment =
(m.subject || '').includes('评论') || (m.content || '').includes('评论');
if (m.kind === 'moderation') {
if (!postID) return null;
const isComment = !!commentID || looksLikeComment;
const path = isComment && floor > 0
? `${postPath(postID)}#floor-${floor}`
: postPath(postID);
const pending = isPendingModeration(m);
if (isComment) {
return { to: path, label: pending ? '去审核评论' : '查看评论' };
}
return { to: path, label: pending ? '去审核帖子' : '查看帖子' };
}
if (postID) {
const path = floor > 0 ? `${postPath(postID)}#floor-${floor}` : postPath(postID);
if (m.kind === 'reply' || m.kind === 'mention') {
return { to: path, label: floor > 0 ? '查看回复' : '查看帖子' };
}
if (m.kind === 'reject' && (commentID || looksLikeComment)) {
return { to: path, label: '查看评论' };
}
if (m.kind === 'report_result' && floor > 0) {
return { to: path, label: '查看评论' };
}
return { to: path, label: '查看帖子' };
}
return null;
}
function peerTitle(conv: MessageConversation | null, peerUser: User | null | undefined, peerId: number) {
if (peerId === 0 || conv?.is_system) return '系统通知';
return peerUser?.nickname || conv?.peer_user?.nickname || `用户 #${peerId}`;
@@ -72,7 +151,7 @@ function AvatarBubble({
if (system) {
return (
<span className="pm-avatar pm-avatar--system" aria-hidden>
<Bell size={16} />
<Bell size={14} />
</span>
);
}
@@ -83,7 +162,6 @@ function AvatarBubble({
}
function parseTab(raw: string | null, peer: string | null): MsgTab {
// 带 peer 时强制私信页（用户主页「发私信」入口）
if (peer !== null && peer !== '') return 'dm';
return raw === 'notify' ? 'notify' : 'dm';
}
@@ -121,16 +199,23 @@ export default function MessagesPage() {
const [notifyLoading, setNotifyLoading] = useState(false);
const [notifyUnread, setNotifyUnread] = useState(0);
const [dmUnread, setDmUnread] = useState(0);
const [unreadOnly, setUnreadOnly] = useState(false);
const threadEndRef = useRef<HTMLDivElement>(null);
const threadScrollRef = useRef<HTMLDivElement>(null);
const stickToBottomRef = useRef(true);
const notifyLoadSeq = useRef(0);
const dmConversations = useMemo(
() => conversations.filter((c) => !c.is_system && c.peer_user_id > 0),
[conversations],
);
const visibleNotifications = useMemo(
() => (unreadOnly ? notifications.filter((m) => !m.is_read) : notifications),
[notifications, unreadOnly],
);
const refreshUnreadSplit = useCallback(async () => {
try {
const r = await api.messageUnreadCount();
@@ -173,18 +258,9 @@ export default function MessagesPage() {
}
}, []);
// 通知列表不走 session 短路，保证 related_status 实时
const loadNotifications = useCallback(async (page = 1, append = false, kind = 'all') => {
const key = `messages:notify:${kind}:${page}`;
if (!append) {
const hit = getSessionSnapshot<NotifySnap>(key);
if (hit) {
setNotifications(hit.notifications);
setNotifyTotal(hit.total);
setNotifyPage(hit.page);
setNotifyLoading(false);
return;
}
}
const seq = ++notifyLoadSeq.current;
setNotifyLoading(true);
try {
const r = await api.messageNotifications({
@@ -192,24 +268,16 @@ export default function MessagesPage() {
size: 30,
kind: kind === 'all' ? undefined : kind,
});
if (seq !== notifyLoadSeq.current) return;
const next = r.notifications || [];
setNotifyTotal(r.total || 0);
setNotifyPage(r.page || page);
// 打开通知页时标已读（首屏）
if (!append && page === 1) {
await api.markNotificationsRead().catch(() => undefined);
const marked = next.map((m) => ({ ...m, is_read: true }));
setNotifications(marked);
setSessionSnapshot(key, { notifications: marked, total: r.total || 0, page: r.page || page });
setNotifyUnread(0);
window.dispatchEvent(new Event('messages-unread-refresh'));
} else {
setNotifications((prev) => (append ? [...prev, ...next] : next));
}
setNotifications((prev) => (append ? [...prev, ...next] : next));
} catch (e: unknown) {
if (seq !== notifyLoadSeq.current) return;
notify.error(e instanceof Error ? e.message : '加载通知失败');
} finally {
setNotifyLoading(false);
if (seq === notifyLoadSeq.current) setNotifyLoading(false);
}
}, []);
@@ -221,18 +289,16 @@ export default function MessagesPage() {
nav(loginPath('/messages'));
return;
}
void refreshUnreadSplit();
if (tab === 'dm') {
if (!getSessionSnapshot('messages:conv:1')) void refreshUnreadSplit();
loadConversations(1);
} else {
if (!getSessionSnapshot(`messages:notify:${notifyKind}:1`)) void refreshUnreadSplit();
loadNotifications(1, false, notifyKind);
}
}, [user, authLoading, nav, tab, notifyKind, loadConversations, loadNotifications, refreshUnreadSplit]);
useEffect(() => {
const onForce = () => {
// 下拉预热会话列表后直接重读；线程快照需作废以便重拉
void refreshUnreadSplit();
if (tab === 'dm') {
void loadConversations(1);
@@ -241,8 +307,6 @@ export default function MessagesPage() {
setThreadEpoch(n => n + 1);
}
} else {
// 通知列表：预热未覆盖 kind，作废后重拉
deleteSessionSnapshot(`messages:notify:${notifyKind}:1`);
void loadNotifications(1, false, notifyKind);
}
};
@@ -365,6 +429,23 @@ export default function MessagesPage() {
}
};
const openNotification = async (m: PrivateMessage) => {
const target = notifyTarget(m);
if (!m.is_read) {
setNotifications((prev) => prev.map((item) => (item.id === m.id ? { ...item, is_read: true } : item)));
setNotifyUnread((n) => Math.max(0, n - 1));
api.markMessageRead(m.id)
.then(() => {
window.dispatchEvent(new Event('messages-unread-refresh'));
void refreshUnreadSplit();
})
.catch(() => undefined);
}
if (target) {
nav(target.to);
}
};
const loadOlder = async () => {
if (!peerSelected || selectedPeer === null || messages.length === 0) return;
const oldest = messages[0]?.id;
@@ -452,15 +533,10 @@ export default function MessagesPage() {
return (
<div className="page-wrap">
<div className="page-inner-wide">
<Button variant="ghost" className="mb-3" onClick={() => nav('/')}>
<ArrowLeft />
返回
</Button>
<div className="pm-page-head">
<div>
<h1 className="page-title">站内消息</h1>
<p className="page-desc">私信与系统通知分开查看，回复提醒可直达帖子</p>
<p className="page-desc">点开才标已读；待审可直达帖内位置</p>
</div>
{unreadForTab > 0 && (
<Button variant="outline" size="sm" onClick={markAll}>
@@ -470,246 +546,288 @@ export default function MessagesPage() {
)}
</div>
<div className="pm-tabs" role="tablist" aria-label="消息类型">
<button
type="button"
role="tab"
aria-selected={tab === 'dm'}
className={cn('pm-tab', tab === 'dm' && 'active')}
onClick={() => setTab('dm')}
>
<Mail size={15} aria-hidden />
私信
{dmUnread > 0 && <span className="pm-tab__badge">{dmUnread > 99 ? '99+' : dmUnread}</span>}
</button>
<button
type="button"
role="tab"
aria-selected={tab === 'notify'}
className={cn('pm-tab', tab === 'notify' && 'active')}
onClick={() => setTab('notify')}
>
<Bell size={15} aria-hidden />
通知
{notifyUnread > 0 && <span className="pm-tab__badge">{notifyUnread > 99 ? '99+' : notifyUnread}</span>}
</button>
</div>
{tab === 'notify' ? (
<div className="pm-notify content-surface">
<div className="pm-notify-filters" role="tablist" aria-label="通知类型">
{NOTIFY_KINDS.map((k) => (
<button
key={k.key}
type="button"
role="tab"
aria-selected={notifyKind === k.key}
className={cn('pm-notify-filter', notifyKind === k.key && 'active')}
onClick={() => setKind(k.key)}
>
{k.label}
</button>
))}
</div>
{notifyLoading && notifications.length === 0 ? (
<div className="flex justify-center py-16"><Spinner /></div>
) : notifications.length === 0 ? (
<div className="pm-empty">
<Bell size={28} strokeWidth={1.5} aria-hidden />
<p>暂无通知</p>
<span>有人回复你、审核结果等会出现在这里</span>
</div>
) : (
<ul className="pm-notify-list">
{notifications.map((m) => (
<li key={m.id} className={cn('pm-notify-item', !m.is_read && 'unread')}>
<div className="pm-notify-item__kind">{kindLabel(m.kind)}</div>
{m.subject && <div className="pm-notify-item__subject">{m.subject}</div>}
<div className="pm-notify-item__text">{m.content}</div>
<div className="pm-notify-item__meta">
<time>{formatTime(m.created_at)}</time>
{m.related_post_id ? (
<Link className="pm-notify-item__link" to={postPath(m.related_post_id)}>
查看帖子
</Link>
) : null}
</div>
</li>
))}
</ul>
)}
{notifyTotal > notifications.length && (
<div className="pm-list-more">
<Button
variant="ghost"
size="sm"
disabled={notifyLoading}
onClick={() => loadNotifications(notifyPage + 1, true, notifyKind)}
>
加载更多通知
</Button>
</div>
)}
<div className="pm-workspace content-surface">
<div className="pm-tabs" role="tablist" aria-label="消息类型">
<button
type="button"
role="tab"
aria-selected={tab === 'dm'}
className={cn('pm-tab', tab === 'dm' && 'active')}
onClick={() => setTab('dm')}
>
<Mail size={15} aria-hidden />
私信
{dmUnread > 0 && <span className="pm-tab__badge">{dmUnread > 99 ? '99+' : dmUnread}</span>}
</button>
<button
type="button"
role="tab"
aria-selected={tab === 'notify'}
className={cn('pm-tab', tab === 'notify' && 'active')}
onClick={() => setTab('notify')}
>
<Bell size={15} aria-hidden />
通知
{notifyUnread > 0 && <span className="pm-tab__badge">{notifyUnread > 99 ? '99+' : notifyUnread}</span>}
</button>
</div>
) : (
<div className={cn('pm-layout content-surface', peerSelected && 'pm-layout--thread')}>
<aside className="pm-list" aria-label="会话列表">
{listLoading && dmConversations.length === 0 ? (
<div className="flex justify-center py-10"><Spinner /></div>
) : dmConversations.length === 0 ? (
{tab === 'notify' ? (
<div className="pm-notify">
<div className="pm-notify-toolbar">
<div className="pm-notify-filters" role="tablist" aria-label="通知类型">
{NOTIFY_KINDS.map((k) => (
<button
key={k.key}
type="button"
role="tab"
aria-selected={notifyKind === k.key}
className={cn(
'pm-notify-filter',
notifyKind === k.key && 'active',
)}
onClick={() => setKind(k.key)}
>
{k.label}
</button>
))}
</div>
<button
type="button"
className={cn('pm-notify-unread-toggle', unreadOnly && 'active')}
aria-pressed={unreadOnly}
onClick={() => setUnreadOnly((v) => !v)}
>
只看未读
</button>
</div>
{notifyLoading && notifications.length === 0 ? (
<div className="flex justify-center py-16"><Spinner /></div>
) : visibleNotifications.length === 0 ? (
<div className="pm-empty">
<Inbox size={28} strokeWidth={1.5} aria-hidden />
<p>还没有私信</p>
<span>在用户主页点击「发私信」开始对话</span>
<Bell size={28} strokeWidth={1.5} aria-hidden />
<p>{unreadOnly ? '没有未读通知' : '暂无通知'}</p>
<span>{unreadOnly ? '切换筛选查看全部通知' : '有人回复你、审核结果等会出现在这里'}</span>
</div>
) : (
dmConversations.map((c) => {
const name = peerTitle(c, c.peer_user, c.peer_user_id);
const active = peerSelected && selectedPeer === c.peer_user_id;
return (
<button
key={c.peer_user_id}
type="button"
className={cn('pm-conv-item', active && 'active', c.unread_count > 0 && 'unread')}
onClick={() => openPeer(c.peer_user_id)}
>
<AvatarBubble
name={name}
avatar={c.peer_user?.avatar}
/>
<div className="pm-conv-item__body">
<div className="pm-conv-item__top">
<span className="pm-conv-item__name">{name}</span>
<span className="pm-conv-item__time">
{formatTime(c.last_message?.created_at || c.updated_at)}
</span>
</div>
<div className="pm-conv-item__preview">
<span>{previewText(c.last_message)}</span>
{c.unread_count > 0 && (
<span className="pm-conv-item__badge">
{c.unread_count > 99 ? '99+' : c.unread_count}
</span>
<ul className="pm-notify-list">
{visibleNotifications.map((m) => {
const target = notifyTarget(m);
const pendingMod = isPendingModeration(m);
const st = statusLabel(m.related_status);
const clickable = !!target || !m.is_read;
return (
<li key={m.id}>
<button
type="button"
className={cn(
'pm-notify-item',
!m.is_read && 'unread',
pendingMod && 'pm-notify-item--moderation',
clickable && 'pm-notify-item--clickable',
)}
</div>
</div>
</button>
);
})
onClick={() => void openNotification(m)}
disabled={!clickable}
>
<span className="pm-notify-item__icon" aria-hidden>
<KindIcon kind={m.kind} />
</span>
<div className="pm-notify-item__body">
<div className="pm-notify-item__top">
<span className="pm-notify-item__kind">
{kindLabel(m.kind, m.related_status)}
</span>
{m.kind === 'moderation' && st && m.related_status && m.related_status !== 'pending' && (
<span className={cn('pm-notify-status', `pm-notify-status--${m.related_status}`)}>
{st}
</span>
)}
{!m.is_read && <span className="pm-notify-item__dot" aria-label="未读" />}
<time className="pm-notify-item__time">{formatTime(m.created_at)}</time>
</div>
{m.subject && <div className="pm-notify-item__subject">{m.subject}</div>}
<div className="pm-notify-item__text">{m.content}</div>
{target && (
<span className="pm-notify-item__cta">{target.label} →</span>
)}
</div>
</button>
</li>
);
})}
</ul>
)}
{convTotal > conversations.length && (
{notifyTotal > notifications.length && (
<div className="pm-list-more">
<Button
variant="ghost"
size="sm"
disabled={listLoading}
onClick={() => loadConversations(convPage + 1, true)}
disabled={notifyLoading}
onClick={() => loadNotifications(notifyPage + 1, true, notifyKind)}
>
加载更多会话
加载更多通知
</Button>
</div>
)}
</aside>
<section className="pm-thread" aria-label="会话内容">
{!peerSelected || selectedPeer === null ? (
<div className="pm-empty pm-empty--thread">
<Send size={32} strokeWidth={1.4} aria-hidden />
<p>选择左侧会话开始聊天</p>
<span>系统通知请切换到「通知」页签</span>
</div>
) : (
<>
<header className="pm-thread-head">
<button type="button" className="pm-thread-back" onClick={closeThread} aria-label="返回会话列表">
<ArrowLeft size={18} />
</button>
<AvatarBubble
name={title}
avatar={peerUser?.avatar || activeConv?.peer_user?.avatar}
/>
<div className="pm-thread-head__meta">
<Link to={userPath(selectedPeer)} className="pm-thread-head__name">{title}</Link>
<span className="pm-thread-head__sub">私信对话</span>
</div>
</header>
<div
className="pm-thread-scroll"
ref={threadScrollRef}
onScroll={(e) => {
const t = e.currentTarget;
stickToBottomRef.current = t.scrollHeight - t.scrollTop - t.clientHeight < 80;
}}
>
{threadLoading ? (
<div className="flex justify-center py-16"><Spinner /></div>
) : (
<>
{msgTotal > messages.length && (
<div className="pm-thread-older">
<Button variant="ghost" size="sm" loading={loadingOlder} onClick={loadOlder}>
查看更早消息
</Button>
</div>
) : (
<div className={cn('pm-layout', peerSelected && 'pm-layout--thread')}>
<aside className="pm-list" aria-label="会话列表">
{listLoading && dmConversations.length === 0 ? (
<div className="flex justify-center py-10"><Spinner /></div>
) : dmConversations.length === 0 ? (
<div className="pm-empty">
<Inbox size={28} strokeWidth={1.5} aria-hidden />
<p>还没有私信</p>
<span>在用户主页点击「发私信」开始对话</span>
</div>
) : (
dmConversations.map((c) => {
const name = peerTitle(c, c.peer_user, c.peer_user_id);
const active = peerSelected && selectedPeer === c.peer_user_id;
return (
<button
key={c.peer_user_id}
type="button"
className={cn('pm-conv-item', active && 'active', c.unread_count > 0 && 'unread')}
onClick={() => openPeer(c.peer_user_id)}
>
<AvatarBubble name={name} avatar={c.peer_user?.avatar} />
<div className="pm-conv-item__body">
<div className="pm-conv-item__top">
<span className="pm-conv-item__name">{name}</span>
<span className="pm-conv-item__time">
{formatDateTime(c.last_message?.created_at || c.updated_at)}
</span>
</div>
)}
{messages.length === 0 ? (
<div className="pm-empty">还没有消息，打个招呼吧</div>
) : (
messages.map((m) => {
const mine = m.from_user_id === user.id;
return (
<div
key={m.id}
className={cn('pm-bubble-row', mine && 'pm-bubble-row--mine')}
>
<div className={cn('pm-bubble', mine && 'pm-bubble--mine')}>
<div className="pm-bubble__text">{m.content}</div>
<div className="pm-bubble__meta">
<time>{formatTime(m.created_at)}</time>
<div className="pm-conv-item__preview">
<span>{previewText(c.last_message)}</span>
{c.unread_count > 0 && (
<span className="pm-conv-item__badge">
{c.unread_count > 99 ? '99+' : c.unread_count}
</span>
)}
</div>
</div>
</button>
);
})
)}
{convTotal > conversations.length && (
<div className="pm-list-more">
<Button
variant="ghost"
size="sm"
disabled={listLoading}
onClick={() => loadConversations(convPage + 1, true)}
>
加载更多会话
</Button>
</div>
)}
</aside>
<section className="pm-thread" aria-label="会话内容">
{!peerSelected || selectedPeer === null ? (
<div className="pm-empty pm-empty--thread">
<Send size={32} strokeWidth={1.4} aria-hidden />
<p>选择左侧会话开始聊天</p>
<span>系统通知请切换到「通知」页签</span>
</div>
) : (
<>
<header className="pm-thread-head">
<button type="button" className="pm-thread-back" onClick={closeThread} aria-label="返回会话列表">
<ArrowLeft size={18} />
</button>
<AvatarBubble
name={title}
avatar={peerUser?.avatar || activeConv?.peer_user?.avatar}
/>
<div className="pm-thread-head__meta">
<Link to={userPath(selectedPeer)} className="pm-thread-head__name">{title}</Link>
<span className="pm-thread-head__sub">私信对话</span>
</div>
</header>
<div
className="pm-thread-scroll"
ref={threadScrollRef}
onScroll={(e) => {
const t = e.currentTarget;
stickToBottomRef.current = t.scrollHeight - t.scrollTop - t.clientHeight < 80;
}}
>
{threadLoading ? (
<div className="flex justify-center py-16"><Spinner /></div>
) : (
<>
{msgTotal > messages.length && (
<div className="pm-thread-older">
<Button variant="ghost" size="sm" loading={loadingOlder} onClick={loadOlder}>
查看更早消息
</Button>
</div>
)}
{messages.length === 0 ? (
<div className="pm-empty">还没有消息，打个招呼吧</div>
) : (
messages.map((m) => {
const mine = m.from_user_id === user.id;
return (
<div
key={m.id}
className={cn('pm-bubble-row', mine && 'pm-bubble-row--mine')}
>
<div className={cn('pm-bubble', mine && 'pm-bubble--mine')}>
<div className="pm-bubble__text">{m.content}</div>
<div className="pm-bubble__meta">
<time>{formatDateTime(m.created_at)}</time>
</div>
</div>
</div>
</div>
);
})
)}
<div ref={threadEndRef} />
</>
)}
</div>
);
})
)}
<div ref={threadEndRef} />
</>
)}
</div>
{canCompose && (
<footer className="pm-composer">
<textarea
className="pm-composer__input"
value={draft}
onChange={(e) => setDraft(e.target.value)}
rows={2}
maxLength={4000}
placeholder={`发送给 ${title}…`}
onKeyDown={(e) => {
if (e.key === 'Enter' && !e.shiftKey) {
e.preventDefault();
void send();
}
}}
/>
<Button
className="pm-composer__send"
loading={sending}
disabled={!draft.trim()}
onClick={() => void send()}
>
<Send size={16} />
发送
</Button>
</footer>
)}
</>
)}
</section>
</div>
)}
{canCompose && (
<footer className="pm-composer">
<textarea
className="pm-composer__input"
value={draft}
onChange={(e) => setDraft(e.target.value)}
rows={2}
maxLength={4000}
placeholder={`发送给 ${title}…`}
onKeyDown={(e) => {
if (e.key === 'Enter' && !e.shiftKey) {
e.preventDefault();
void send();
}
}}
/>
<Button
className="pm-composer__send"
loading={sending}
disabled={!draft.trim()}
onClick={() => void send()}
>
<Send size={16} />
发送
</Button>
</footer>
)}
</>
)}
</section>
</div>
)}
</div>
<InFlowSiteFooter />
</div>
</div>

54
frontend/src/pages/admin/AdminCommentsPage.tsx
View File

@@ -1,5 +1,5 @@
import { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { useEffect, useRef, useState } from 'react';
import { useNavigate, useSearchParams } from 'react-router-dom';
import { Trash2, RotateCcw } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
@@ -40,6 +40,8 @@ function formatAdminTime(iso: string) {
export default function AdminCommentsPage() {
const nav = useNavigate();
const [searchParams, setSearchParams] = useSearchParams();
const focusId = Number(searchParams.get('id') || 0) || 0;
const { ready } = useAdminGuard();
const [tab, setTab] = useState<Tab>('pending');
const [comments, setComments] = useState<Comment[]>([]);
@@ -49,6 +51,9 @@ export default function AdminCommentsPage() {
const [totalPages, setTotalPages] = useState(1);
const [pendingCount, setPendingCount] = useState(0);
const [revComment, setRevComment] = useState<Comment | null>(null);
const [highlightId, setHighlightId] = useState<number | null>(focusId > 0 ? focusId : null);
const focusTriedRef = useRef(false);
const highlightTimer = useRef<ReturnType<typeof setTimeout>>();
const loadList = (p = page, st: Tab = tab) => {
setLoading(true);
@@ -90,6 +95,45 @@ export default function AdminCommentsPage() {
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [ready, tab]);
// 从通知深链 ?id= 定位并高亮待审行
useEffect(() => {
if (!ready || loading || focusId <= 0 || focusTriedRef.current) return;
if (tab === 'trash') return;
const found = comments.find((c) => c.id === focusId);
if (found) {
focusTriedRef.current = true;
setHighlightId(focusId);
requestAnimationFrame(() => {
document.getElementById(`admin-comment-row-${focusId}`)?.scrollIntoView({
behavior: 'smooth',
block: 'center',
});
});
clearTimeout(highlightTimer.current);
highlightTimer.current = setTimeout(() => setHighlightId(null), 2800);
const next = new URLSearchParams(searchParams);
next.delete('id');
setSearchParams(next, { replace: true });
return;
}
// pending 未找到则切到全部再试一次
if (tab === 'pending') {
setTab('all');
setPage(1);
return;
}
focusTriedRef.current = true;
notify.warning('该评论可能已审核或不在当前列表');
const next = new URLSearchParams(searchParams);
next.delete('id');
setSearchParams(next, { replace: true });
}, [ready, loading, comments, focusId, tab, searchParams, setSearchParams]);
useEffect(() => () => clearTimeout(highlightTimer.current), []);
const approve = async (id: number) => {
try {
const r = await api.adminApproveComment(id);
@@ -268,7 +312,11 @@ export default function AdminCommentsPage() {
</thead>
<tbody>
{comments.map(c => (
<tr key={c.id}>
<tr
key={c.id}
id={`admin-comment-row-${c.id}`}
className={cn(highlightId === c.id && 'admin-row-highlight')}
>
<td>{c.id}</td>
<td>#{c.floor}</td>
<td>

52
frontend/src/pages/admin/AdminPostsPage.tsx
View File

@@ -1,5 +1,5 @@
import { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { useEffect, useRef, useState } from 'react';
import { useNavigate, useSearchParams } from 'react-router-dom';
import { Search, Lock, LockOpen, MessageSquareOff, Trash2, RotateCcw } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
@@ -32,6 +32,8 @@ function formatAdminTime(iso: string) {
export default function AdminPostsPage() {
const nav = useNavigate();
const [searchParams, setSearchParams] = useSearchParams();
const focusId = Number(searchParams.get('id') || 0) || 0;
const { ready } = useAdminGuard();
const [tab, setTab] = useState<Tab>('pending');
const [posts, setPosts] = useState<PostItem[]>([]);
@@ -42,6 +44,9 @@ export default function AdminPostsPage() {
const [pendingCount, setPendingCount] = useState(0);
const [keyword, setKeyword] = useState('');
const [search, setSearch] = useState('');
const [highlightId, setHighlightId] = useState<number | null>(focusId > 0 ? focusId : null);
const focusTriedRef = useRef(false);
const highlightTimer = useRef<ReturnType<typeof setTimeout>>();
const loadActive = (p = page, kw = search, status = tab === 'pending' ? 'pending' : 'all') => {
setLoading(true);
@@ -92,6 +97,43 @@ export default function AdminPostsPage() {
// eslint-disable-next-line react-hooks/exhaustive-deps -- 仅随 tab/search/ready 刷新
}, [ready, search, tab]);
// 从通知深链 ?id= 定位并高亮
useEffect(() => {
if (!ready || loading || focusId <= 0 || focusTriedRef.current) return;
if (tab === 'trash') return;
const found = posts.find((p) => p.id === focusId);
if (found) {
focusTriedRef.current = true;
setHighlightId(focusId);
requestAnimationFrame(() => {
document.getElementById(`admin-post-row-${focusId}`)?.scrollIntoView({
behavior: 'smooth',
block: 'center',
});
});
clearTimeout(highlightTimer.current);
highlightTimer.current = setTimeout(() => setHighlightId(null), 2800);
const next = new URLSearchParams(searchParams);
next.delete('id');
setSearchParams(next, { replace: true });
return;
}
if (tab === 'pending') {
setTab('active');
return;
}
focusTriedRef.current = true;
notify.warning('该帖子可能已审核或不在当前列表');
const next = new URLSearchParams(searchParams);
next.delete('id');
setSearchParams(next, { replace: true });
}, [ready, loading, posts, focusId, tab, searchParams, setSearchParams]);
useEffect(() => () => clearTimeout(highlightTimer.current), []);
const switchTab = (next: Tab) => {
if (next === tab) return;
setTab(next);
@@ -352,7 +394,11 @@ export default function AdminPostsPage() {
{posts.map(p => {
const edited = p.updated_at && isTimeDiffSignificant(p.created_at, p.updated_at);
return (
<tr key={p.id}>
<tr
key={p.id}
id={`admin-post-row-${p.id}`}
className={cn(highlightId === p.id && 'admin-row-highlight')}
>
<td>{p.id}</td>
<td className="max-w-[200px] truncate">
<button type="button" className="admin-text-link" onClick={() => nav(`/post/${p.id}`)}>

397
frontend/src/styles/global.css
View File

@@ -12608,6 +12608,10 @@ button.profile-stat:hover strong {
.admin-table th, .admin-table td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--j13-border); }
.admin-table th { font-weight: 600; color: hsl(var(--muted-foreground)); background: hsl(var(--muted) / 0.3); }
.admin-table tr:last-child td { border-bottom: none; }
.admin-table tr.admin-row-highlight td {
background: color-mix(in srgb, #f97316 14%, transparent);
transition: background 0.4s ease;
}
.admin-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.admin-table-email { max-width: 200px; word-break: break-all; }
.admin-table-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; }
@@ -12783,37 +12787,50 @@ button.profile-stat:hover strong {
align-items: flex-start;
justify-content: space-between;
gap: 12px;
margin-bottom: 12px;
margin-bottom: 14px;
}
.pm-page-head .page-desc {
margin-bottom: 0;
}
.pm-workspace {
overflow: hidden;
padding: 0;
}
.pm-tabs {
display: flex;
gap: 0.35rem;
margin-bottom: 0.85rem;
gap: 0;
padding: 0 1rem;
border-bottom: 1px solid var(--j13-border-light);
background: var(--j13-bg-surface);
}
.pm-tab {
position: relative;
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.4rem 0.85rem;
border: 1px solid var(--j13-border, #e2e8f0);
border-radius: 0.4rem;
gap: 0.4rem;
padding: 0.75rem 1rem;
border: 0;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
background: transparent;
color: var(--color-text-2, #475569);
color: var(--color-text-3);
font-size: 0.875rem;
font-weight: 560;
cursor: pointer;
}
.pm-tab:hover {
border-color: color-mix(in srgb, var(--j13-green, #18a058) 40%, var(--j13-border, #e2e8f0));
color: var(--color-text-1);
}
.pm-tab.active {
border-color: color-mix(in srgb, var(--j13-green, #18a058) 45%, transparent);
background: color-mix(in srgb, var(--j13-green, #18a058) 10%, transparent);
color: var(--j13-green, #18a058);
color: var(--j13-green);
border-bottom-color: var(--j13-green);
font-weight: 650;
}
.pm-tab__badge {
@@ -12828,30 +12845,60 @@ button.profile-stat:hover strong {
}
.pm-notify {
padding: 0.85rem 1rem 1rem;
border-radius: 0.5rem;
padding: 0;
}
.pm-notify-toolbar {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0.5rem 1rem;
padding: 0.65rem 1rem 0;
border-bottom: 1px solid var(--j13-border-light);
}
.pm-notify-filters {
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
margin-bottom: 0.85rem;
gap: 0;
}
.pm-notify-filter {
padding: 0.25rem 0.65rem;
padding: 0.45rem 0.7rem;
border: 0;
border-radius: 999px;
background: color-mix(in srgb, var(--j13-muted, #94a3b8) 14%, transparent);
color: var(--color-text-3, #64748b);
font-size: 0.78rem;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
background: transparent;
color: var(--color-text-3);
font-size: 0.8rem;
cursor: pointer;
}
.pm-notify-filter:hover {
color: var(--color-text-1);
}
.pm-notify-filter.active {
background: color-mix(in srgb, var(--j13-green, #18a058) 16%, transparent);
color: var(--j13-green, #18a058);
color: var(--j13-green);
border-bottom-color: var(--j13-green);
font-weight: 650;
}
.pm-notify-unread-toggle {
padding: 0.35rem 0.55rem;
border: 0;
background: transparent;
color: var(--color-text-3);
font-size: 0.78rem;
cursor: pointer;
user-select: none;
white-space: nowrap;
}
.pm-notify-unread-toggle:hover,
.pm-notify-unread-toggle.active {
color: var(--j13-green);
font-weight: 600;
}
@@ -12859,68 +12906,182 @@ button.profile-stat:hover strong {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.65rem;
}
.pm-notify-item {
padding: 0.75rem 0.85rem;
border: 1px solid var(--j13-border, #e2e8f0);
border-radius: 0.45rem;
background: var(--j13-card, #fff);
display: flex;
align-items: flex-start;
gap: 0.75rem;
width: 100%;
padding: 0.9rem 1rem;
border: 0;
border-bottom: 1px solid var(--j13-border-light);
border-left: 3px solid transparent;
background: transparent;
text-align: left;
font: inherit;
color: inherit;
cursor: default;
transition: background 0.12s;
}
.pm-notify-item--clickable {
cursor: pointer;
}
.pm-notify-item--clickable:hover {
background: color-mix(in srgb, var(--j13-green) 5%, transparent);
}
.pm-notify-item.unread {
border-color: color-mix(in srgb, var(--j13-green, #18a058) 35%, var(--j13-border, #e2e8f0));
background: color-mix(in srgb, var(--j13-green, #18a058) 5%, var(--j13-card, #fff));
border-left-color: var(--j13-green);
background: color-mix(in srgb, var(--j13-green) 4%, transparent);
}
.pm-notify-item.unread .pm-notify-item__subject {
font-weight: 700;
color: var(--color-text-1);
}
.pm-notify-item:not(.unread) .pm-notify-item__subject {
font-weight: 560;
color: var(--color-text-2);
}
.pm-notify-item:not(.unread) .pm-notify-item__text {
color: var(--color-text-3);
}
/* 仅仍待审：极淡警示底与左侧细条 */
.pm-notify-item--moderation.unread {
border-left-color: color-mix(in srgb, #f97316 55%, var(--j13-border-light));
background: color-mix(in srgb, #f97316 4%, transparent);
}
.pm-notify-item--moderation:not(.unread) {
background: color-mix(in srgb, #f97316 3%, transparent);
}
.pm-notify-item__icon {
flex-shrink: 0;
width: 1.85rem;
height: 1.85rem;
border-radius: 0.4rem;
display: inline-flex;
align-items: center;
justify-content: center;
margin-top: 0.1rem;
background: color-mix(in srgb, var(--j13-muted, #94a3b8) 12%, transparent);
color: var(--color-text-3);
}
.pm-notify-item__body {
flex: 1;
min-width: 0;
}
.pm-notify-item__top {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.35rem 0.45rem;
margin-bottom: 0.2rem;
}
.pm-notify-item__kind {
font-size: 0.72rem;
font-weight: 650;
color: var(--j13-green, #18a058);
margin-bottom: 0.25rem;
font-weight: 600;
color: var(--color-text-3);
}
.pm-notify-item--moderation .pm-notify-item__kind {
color: color-mix(in srgb, #c2410c 70%, var(--color-text-3));
}
.pm-notify-status {
display: inline-flex;
align-items: center;
padding: 0.05rem 0.35rem;
border-radius: 0.2rem;
font-size: 0.66rem;
font-weight: 600;
line-height: 1.35;
letter-spacing: 0.01em;
}
.pm-notify-status--pending {
background: color-mix(in srgb, #f97316 10%, transparent);
color: color-mix(in srgb, #c2410c 75%, var(--color-text-2));
}
.pm-notify-status--published {
background: color-mix(in srgb, var(--j13-green) 10%, transparent);
color: color-mix(in srgb, var(--j13-green) 80%, var(--color-text-2));
}
.pm-notify-status--rejected {
background: color-mix(in srgb, var(--j13-muted, #94a3b8) 14%, transparent);
color: var(--color-text-3);
}
.pm-notify-status--deleted {
background: color-mix(in srgb, var(--j13-muted, #94a3b8) 12%, transparent);
color: var(--color-text-4);
}
.pm-notify-item__dot {
width: 0.4rem;
height: 0.4rem;
border-radius: 50%;
background: var(--j13-green);
flex-shrink: 0;
}
.pm-notify-item--moderation .pm-notify-item__dot {
background: color-mix(in srgb, #f97316 70%, var(--j13-muted, #94a3b8));
}
.pm-notify-item__time {
margin-left: auto;
font-size: 0.72rem;
color: var(--color-text-4);
}
.pm-notify-item__subject {
font-weight: 650;
margin-bottom: 0.25rem;
margin-bottom: 0.15rem;
font-size: 0.92rem;
line-height: 1.4;
}
.pm-notify-item__text {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
white-space: pre-wrap;
word-break: break-word;
color: var(--color-text-2, #475569);
font-size: 0.9rem;
color: var(--color-text-2);
font-size: 0.84rem;
line-height: 1.5;
}
.pm-notify-item__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.75rem;
margin-top: 0.55rem;
font-size: 0.75rem;
color: var(--color-text-4, #94a3b8);
.pm-notify-item__cta {
display: inline-block;
margin-top: 0.4rem;
font-size: 0.78rem;
font-weight: 600;
color: var(--j13-green);
}
.pm-notify-item__link {
color: var(--j13-green, #18a058);
text-decoration: none;
font-weight: 560;
}
.pm-notify-item__link:hover {
text-decoration: underline;
.pm-notify-item--moderation .pm-notify-item__cta {
color: color-mix(in srgb, #c2410c 65%, var(--color-text-2));
}
.pm-layout {
display: grid;
grid-template-columns: minmax(200px, 240px) 1fr;
height: min(72vh, 680px);
min-height: 480px;
grid-template-columns: 280px 1fr;
height: min(70vh, 640px);
min-height: 460px;
overflow: hidden;
}
@@ -12931,8 +13092,8 @@ button.profile-stat:hover strong {
}
.pm-avatar {
width: 40px;
height: 40px;
width: 36px;
height: 36px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
@@ -12944,7 +13105,7 @@ button.profile-stat:hover strong {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 15px;
font-size: 14px;
font-weight: 600;
color: var(--j13-green);
background: var(--j13-green-bg);
@@ -12958,9 +13119,9 @@ button.profile-stat:hover strong {
.pm-conv-item {
display: flex;
align-items: center;
gap: 12px;
gap: 10px;
width: 100%;
padding: 12px 14px;
padding: 11px 12px;
border: none;
border-bottom: 1px solid var(--j13-border-light);
background: transparent;
@@ -12968,26 +13129,20 @@ button.profile-stat:hover strong {
font: inherit;
color: inherit;
cursor: pointer;
transition: background 0.15s;
transition: background 0.12s;
}
.pm-conv-item:hover {
background: color-mix(in srgb, var(--j13-bg-surface) 70%, transparent);
background: color-mix(in srgb, var(--j13-bg-surface) 75%, transparent);
}
.pm-conv-item.active {
background: var(--j13-bg-surface);
box-shadow: inset 3px 0 0 var(--j13-green);
box-shadow: inset 2px 0 0 var(--j13-green);
}
.pm-conv-item.unread .pm-conv-item__name {
font-weight: 700;
color: var(--color-text-1);
}
.pm-conv-item.unread .pm-conv-item__preview > span:first-child {
color: var(--color-text-1);
font-weight: 500;
}
.pm-conv-item__body {
@@ -13000,22 +13155,25 @@ button.profile-stat:hover strong {
justify-content: space-between;
align-items: baseline;
gap: 8px;
margin-bottom: 3px;
margin-bottom: 2px;
}
.pm-conv-item__name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 14px;
font-size: 13.5px;
font-weight: 600;
color: var(--color-text-1);
}
.pm-conv-item__time {
flex-shrink: 0;
font-size: 11px;
font-size: 10.5px;
color: var(--color-text-4);
text-align: right;
max-width: 7.5rem;
line-height: 1.25;
}
.pm-conv-item__preview {
@@ -13039,7 +13197,7 @@ button.profile-stat:hover strong {
height: 18px;
padding: 0 5px;
border-radius: 999px;
background: #e11d48;
background: hsl(var(--destructive));
color: #fff;
font-size: 10px;
font-weight: 700;
@@ -13064,7 +13222,7 @@ button.profile-stat:hover strong {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 16px;
padding: 11px 14px;
border-bottom: 1px solid var(--j13-border-light);
flex-shrink: 0;
}
@@ -13116,10 +13274,8 @@ a.pm-thread-head__name:hover {
flex: 1;
min-height: 0;
overflow-y: auto;
padding: 16px 18px;
background:
radial-gradient(ellipse at top, var(--j13-green-bg), transparent 55%),
var(--j13-bg-workspace);
padding: 16px 16px;
background: var(--j13-bg-workspace);
}
.pm-thread-older {
@@ -13138,70 +13294,33 @@ a.pm-thread-head__name:hover {
justify-content: flex-end;
}
.pm-bubble-row--system {
justify-content: center;
}
.pm-bubble {
max-width: min(78%, 480px);
padding: 10px 12px;
border-radius: 14px 14px 14px 4px;
background: var(--j13-bg-surface);
border: 1px solid var(--j13-border-light);
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
padding: 9px 12px;
border-radius: 12px 12px 12px 4px;
background: var(--j13-bg-block-muted);
border: 1px solid transparent;
}
.pm-bubble--mine {
border-radius: 14px 14px 4px 14px;
border-radius: 12px 12px 4px 12px;
background: var(--j13-green-soft);
border-color: color-mix(in srgb, var(--j13-green) 22%, var(--j13-border-light));
}
.pm-bubble--system {
max-width: min(92%, 520px);
border-radius: 12px;
background: var(--j13-bg-surface);
border-color: var(--j13-border);
}
.pm-bubble__kind {
display: inline-block;
margin-bottom: 6px;
padding: 1px 7px;
border-radius: 999px;
background: var(--j13-bg-block-muted);
color: var(--color-text-2);
font-size: 11px;
font-weight: 600;
}
.pm-bubble__subject {
margin-bottom: 4px;
font-size: 13px;
font-weight: 600;
color: var(--color-text-1);
border-color: color-mix(in srgb, var(--j13-green) 18%, transparent);
}
.pm-bubble__text {
white-space: pre-wrap;
word-break: break-word;
font-size: 14px;
line-height: 1.65;
line-height: 1.6;
color: var(--color-text-1);
}
.pm-bubble__link {
display: inline-block;
margin-top: 8px;
font-size: 12px;
font-weight: 500;
}
.pm-bubble__meta {
display: flex;
align-items: center;
gap: 8px;
margin-top: 6px;
margin-top: 5px;
font-size: 11px;
color: var(--color-text-4);
}
@@ -13234,7 +13353,7 @@ a.pm-thread-head__name:hover {
max-height: 140px;
resize: none;
border: 1px solid var(--j13-border);
border-radius: 12px;
border-radius: 10px;
padding: 10px 12px;
font: inherit;
font-size: 14px;
@@ -13295,22 +13414,20 @@ a.pm-thread-head__name:hover {
}
.pm-field input,
.pm-field textarea,
.pm-field select {
width: 100%;
.pm-field select,
.pm-field textarea {
border: 1px solid var(--j13-border);
border-radius: 6px;
border-radius: 8px;
padding: 8px 10px;
font: inherit;
font-size: 13px;
color: var(--color-text-1);
background: var(--j13-bg-surface);
outline: none;
color: var(--color-text-1);
}
.pm-field input:focus,
.pm-field textarea:focus,
.pm-field select:focus {
.pm-field select:focus,
.pm-field textarea:focus {
outline: none;
border-color: var(--j13-green);
}
@@ -13340,6 +13457,14 @@ a.pm-thread-head__name:hover {
.pm-thread-back {
display: inline-flex;
}
.pm-composer {
flex-wrap: wrap;
}
.pm-composer__send {
width: 100%;
}
}
/* —— 用户徽章 / 等级 —— */