From 8a593f50c3b9ffb6b149f312665d6e95ddec7b70 Mon Sep 17 00:00:00 2001
From: Your Name <aa@bb.com>
Date: Wed, 16 Sep 2026 20:13:41 +0800
Subject: [PATCH] =?UTF-8?q?=E7=B3=BB=E7=BB=9F=E6=B6=88=E6=81=AF=EF=BC=9A?=
 =?UTF-8?q?=E6=97=A0=E8=B7=B3=E8=BD=AC=E9=93=BE=E6=8E=A5=E7=9A=84=E9=80=9A?=
 =?UTF-8?q?=E7=9F=A5=E6=B0=B8=E8=BF=9C=E5=81=9C=E7=95=99=E5=9C=A8"?=
 =?UTF-8?q?=E6=96=B0"=EF=BC=8C=E6=94=B9=E4=B8=BA=E6=95=B4=E5=BC=A0?=
 =?UTF-8?q?=E5=8D=A1=E7=89=87=E5=8F=AF=E7=82=B9=E5=87=BB=E6=A0=87=E8=AE=B0?=
 =?UTF-8?q?=E5=B7=B2=E8=AF=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

readMutation.mutate()此前只挂在"查看XXX"跳转按钮的onClick上，而这个按钮只在
actionRoute()能解析出目标时才渲染——好友申请已通过/拒绝、多数群聊动态类通知
根本没有可跳转目标，导致整张卡片没有任何东西可点，无论过多久都停留在"新"。

改为整张卡片本身是点击目标：有action的card点击后标记已读+跳转，没有action的
只标记已读。原来的"查看…"跳转按钮改成纯文本span（它现在处于卡片自己的点击
区域内，再嵌一层可交互元素会构成非法的按钮嵌套/双重触发，与之前修过的收藏夹
语音播放器按钮嵌套是同一类问题）。

实机验证：一条"好友申请已处理"（无action）点击后"新"角标消失；一条"新的好友
申请"（有action）点击后正确标记已读且跳转到/contacts/requests，无回归。

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 .../features/system/SystemMessagesView.tsx    | 41 +++++++++++++------
 1 file changed, 28 insertions(+), 13 deletions(-)

diff --git a/web/src/features/system/SystemMessagesView.tsx b/web/src/features/system/SystemMessagesView.tsx
index 2aa83d49..24036280 100644
--- a/web/src/features/system/SystemMessagesView.tsx
+++ b/web/src/features/system/SystemMessagesView.tsx
@@ -194,8 +194,30 @@ export function SystemMessagesView() {
             const { icon, className } = iconForEvent(item.event_type);
             const action = actionRoute(item);
             const isUnread = !item.read_at;
+            // The whole card is the click target, not just the "查看…" link below -- most
+            // notifications (好友申请已通过/拒绝, most 群聊动态) have no `actionRoute` at all, so
+            // gating mark-read on that inner link left them with literally nothing clickable
+            // anywhere on the card, permanently stuck showing "新" no matter how long they sat there
+            // (a real, reported bug: "有些消息没有链接，没地方点击就一直是新"). A card with an action
+            // still marks read AND navigates; one without just marks read, since there's nowhere to go.
+            const activate = () => {
+              if (isUnread) readMutation.mutate(item.id);
+              if (action) navigate(action.to);
+            };
             return (
-              <div key={item.id} className={`w-full flex-none rounded-xl bg-white p-[18px] md:w-[560px] ${isUnread ? '' : 'opacity-85'}`}>
+              <div
+                key={item.id}
+                role="button"
+                tabIndex={0}
+                onClick={activate}
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    activate();
+                  }
+                }}
+                className={`w-full flex-none cursor-pointer rounded-xl bg-white p-[18px] text-left md:w-[560px] ${isUnread ? '' : 'opacity-85'}`}
+              >
                 <div className="text-xs text-text-tertiary-3">{formatEventTimestamp(new Date(item.created_at))}</div>
                 <div className="mt-2 flex items-start gap-3">
                   <span className={`grid h-9 w-9 flex-none place-items-center rounded-lg ${className}`}>
@@ -207,18 +229,11 @@ export function SystemMessagesView() {
                       {isUnread ? <b className="flex-none rounded bg-unread px-1 text-[10px] leading-[14px] text-white">新</b> : null}
                     </div>
                     <p className="m-0 text-sm text-[#4a4f57]">{notificationText(item)}</p>
-                    {action ? (
-                      <button
-                        type="button"
-                        onClick={() => {
-                          if (isUnread) readMutation.mutate(item.id);
-                          navigate(action.to);
-                        }}
-                        className="self-start text-sm text-accent"
-                      >
-                        {action.label} ›
-                      </button>
-                    ) : null}
+                    {/* Plain text, not a nested `<button>` -- it's inside the card's own click target
+                        above, and a button-in-button (role="button" div counts the same way) is the
+                        same illegal-nesting/double-fire shape already fixed once in this codebase for
+                        favorites' voice player. */}
+                    {action ? <span className="self-start text-sm text-accent">{action.label} ›</span> : null}
                   </div>
                 </div>
                 {/* 08-system-files.dc.html lines 40/108: only the 安全 category gets this footer --