feat: 新增大量社区功能与基础组件，优化站点整体体验
- 新增事件总线式toast通知系统 - 新增头像、阅读进度、404/500错误页等基础组件 - 重构页脚、布局、分页、点赞按钮等现有组件 - 新增用户个人页、通知中心、帖子编辑/发布/置顶/推荐管理功能 - 优化登录注册页面样式与交互 - 修复路径类型文件引用，更新站点元信息与字体配置
This commit is contained in:
@@ -100,15 +100,23 @@ export default function NotificationBell() {
|
||||
<div className="relative" ref={dropdownRef}>
|
||||
<button
|
||||
onClick={handleToggle}
|
||||
className="relative p-2 rounded-lg hover:opacity-80"
|
||||
style={{ color: "var(--text)" }}
|
||||
aria-label="通知"
|
||||
className="relative w-10 h-10 flex items-center justify-center rounded-full transition-colors"
|
||||
style={{
|
||||
color: open ? "var(--accent)" : "var(--ink-2)",
|
||||
border: "1px solid " + (open ? "var(--accent)" : "var(--line)"),
|
||||
background: open ? "var(--accent-soft)" : "var(--panel)",
|
||||
}}
|
||||
>
|
||||
<Bell size={18} />
|
||||
<Bell size={17} />
|
||||
{unread > 0 && (
|
||||
<span
|
||||
className="absolute -top-0.5 -right-0.5 min-w-[16px] h-4 px-1 rounded-full text-xs text-white flex items-center justify-center font-bold"
|
||||
style={{ background: "var(--primary)" }}
|
||||
className="absolute -top-1 -right-1 min-w-[18px] h-[18px] px-1 text-[10px] font-bold flex items-center justify-center rounded-full"
|
||||
style={{
|
||||
background: "var(--clay)",
|
||||
color: "#fff",
|
||||
border: "2px solid var(--bg)",
|
||||
}}
|
||||
>
|
||||
{unread > 99 ? "99+" : unread}
|
||||
</span>
|
||||
@@ -117,77 +125,94 @@ export default function NotificationBell() {
|
||||
|
||||
{open && (
|
||||
<div
|
||||
className="absolute right-0 mt-2 w-80 rounded-xl border shadow-xl overflow-hidden z-50"
|
||||
style={{ borderColor: "var(--border)", background: "var(--bg)" }}
|
||||
className="absolute right-0 mt-2.5 w-[340px] max-w-[calc(100vw-2rem)] overflow-hidden z-50 j13-toast-in"
|
||||
style={{
|
||||
background: "var(--panel)",
|
||||
border: "1px solid var(--line)",
|
||||
borderRadius: "var(--r)",
|
||||
boxShadow: "var(--shadow-lg)",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="flex items-center justify-between px-4 py-3 border-b"
|
||||
style={{ borderColor: "var(--border)" }}
|
||||
className="flex items-center justify-between px-5 py-3.5"
|
||||
style={{ borderBottom: "1px solid var(--line)" }}
|
||||
>
|
||||
<span className="font-semibold" style={{ color: "var(--text)" }}>通知</span>
|
||||
<span className="font-bold text-[15px]" style={{ color: "var(--ink)" }}>通知</span>
|
||||
{unread > 0 && (
|
||||
<button
|
||||
onClick={handleMarkAllRead}
|
||||
className="flex items-center gap-1 text-xs hover:opacity-80"
|
||||
style={{ color: "var(--primary)" }}
|
||||
className="flex items-center gap-1 text-xs meta hover:text-[var(--accent)] transition-colors"
|
||||
>
|
||||
<CheckCheck size={14} /> 全部已读
|
||||
<CheckCheck size={13} /> 全部已读
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="max-h-96 overflow-y-auto">
|
||||
<div className="max-h-[24rem] overflow-y-auto">
|
||||
{loading ? (
|
||||
<p className="text-center py-8 text-sm" style={{ color: "var(--text-secondary)" }}>加载中...</p>
|
||||
<p className="text-center py-10 meta">加载中...</p>
|
||||
) : notifications.length === 0 ? (
|
||||
<p className="text-center py-8 text-sm" style={{ color: "var(--text-secondary)" }}>暂无通知</p>
|
||||
<div className="text-center py-12">
|
||||
<Bell size={26} className="mx-auto mb-2.5" style={{ color: "var(--ink-3)" }} />
|
||||
<p className="meta">还没有通知</p>
|
||||
</div>
|
||||
) : (
|
||||
notifications.map((n) => (
|
||||
<button
|
||||
key={n.id}
|
||||
onClick={() => handleClickNotification(n)}
|
||||
className="w-full text-left px-4 py-3 border-b hover:opacity-90 transition-opacity"
|
||||
className="w-full text-left px-4 py-3.5 flex items-start gap-3 transition-colors"
|
||||
style={{
|
||||
borderColor: "var(--border)",
|
||||
background: n.is_read ? "transparent" : "var(--bg-secondary)",
|
||||
borderBottom: "1px solid var(--line)",
|
||||
background: n.is_read ? "transparent" : "var(--panel-2)",
|
||||
}}
|
||||
>
|
||||
<div className="flex items-start gap-2">
|
||||
<span style={{ color: n.type === "like" ? "#ef4444" : "var(--primary)" }}>
|
||||
{n.type === "like" ? <Heart size={16} /> : <MessageCircle size={16} />}
|
||||
</span>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm" style={{ color: "var(--text)" }}>
|
||||
<span className="font-medium">{n.actor.nickname}</span>{" "}
|
||||
<span style={{ color: "var(--text-secondary)" }}>{actionText(n)}</span>
|
||||
<span
|
||||
className="w-9 h-9 shrink-0 rounded-full flex items-center justify-center"
|
||||
style={{
|
||||
color: n.type === "like" ? "var(--clay)" : "var(--accent)",
|
||||
background:
|
||||
n.type === "like" ? "var(--clay-soft)" : "var(--accent-soft)",
|
||||
}}
|
||||
>
|
||||
{n.type === "like" ? <Heart size={15} /> : <MessageCircle size={15} />}
|
||||
</span>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm leading-snug" style={{ color: "var(--ink)" }}>
|
||||
<span className="font-medium">{n.actor.nickname}</span>{" "}
|
||||
<span className="meta">{actionText(n)}</span>
|
||||
</p>
|
||||
<p className="text-xs mt-1 truncate" style={{ color: "var(--ink-2)" }}>
|
||||
《{n.post.title}》
|
||||
</p>
|
||||
{n.content && (
|
||||
<p className="text-xs mt-1 line-clamp-1" style={{ color: "var(--ink-3)" }}>
|
||||
{n.content}
|
||||
</p>
|
||||
<p className="text-xs mt-0.5 truncate" style={{ color: "var(--text-secondary)" }}>
|
||||
《{n.post.title}》
|
||||
</p>
|
||||
{n.content && (
|
||||
<p className="text-xs mt-1 line-clamp-1" style={{ color: "var(--text-secondary)" }}>
|
||||
{n.content}
|
||||
</p>
|
||||
)}
|
||||
<p className="text-xs mt-1" style={{ color: "var(--text-secondary)" }}>
|
||||
{formatTime(n.created_at)}
|
||||
</p>
|
||||
</div>
|
||||
{!n.is_read && (
|
||||
<span
|
||||
className="w-2 h-2 rounded-full shrink-0 mt-1.5"
|
||||
style={{ background: "var(--primary)" }}
|
||||
/>
|
||||
)}
|
||||
<p className="meta mt-1.5 text-xs">{formatTime(n.created_at)}</p>
|
||||
</div>
|
||||
{!n.is_read && (
|
||||
<span
|
||||
className="w-2.5 h-2.5 shrink-0 mt-2 rounded-full"
|
||||
style={{ background: "var(--clay)" }}
|
||||
/>
|
||||
)}
|
||||
</button>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="px-4 py-2 border-t text-center" style={{ borderColor: "var(--border)" }}>
|
||||
<Link href="/notifications" className="text-sm hover:underline" style={{ color: "var(--primary)" }}>
|
||||
查看全部通知
|
||||
<div
|
||||
className="px-4 py-2.5 text-center"
|
||||
style={{ borderTop: "1px solid var(--line)" }}
|
||||
>
|
||||
<Link
|
||||
href="/notifications"
|
||||
onClick={() => setOpen(false)}
|
||||
className="meta text-xs hover:text-[var(--accent)] transition-colors"
|
||||
>
|
||||
查看全部通知 →
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user