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 --