系统消息：无跳转链接的通知永远停留在"新"，改为整张卡片可点击标记已读

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

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

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

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

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