diff --git a/src/frontend/src/components/NotificationCenter.tsx b/src/frontend/src/components/NotificationCenter.tsx
index 46aaa09..ec1356b 100644
--- a/src/frontend/src/components/NotificationCenter.tsx
+++ b/src/frontend/src/components/NotificationCenter.tsx
@@ -156,31 +156,30 @@ export default function NotificationCenter({ onClose }: { onClose: () => void })
                 <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
                   {g.items.map(n => {
                     const s = TYPE_STYLES[n.type];
-                    const isExpanded = expanded === n.id;
                     return (
-                      <div key={n.id} style={{
+                      <div key={n.id} onClick={() => {
+                        // 直接操作：有任务链接就跳转，否则标记已读
+                        if (n.taskId) { handleViewTask(n); }
+                        else if (!n.read) { handleMarkRead(n); }
+                      }} style={{
                         padding: '8px 10px', borderRadius: 8,
                         background: 'var(--panel2)', border: `1px solid ${n.read ? 'var(--line)' : s.color + '44'}`,
                         opacity: n.read ? 0.5 : 1,
+                        cursor: 'pointer',
+                        transition: 'opacity 0.15s',
                       }}>
-                        <div style={{ display: 'flex', gap: 6, alignItems: 'center', cursor: 'pointer' }} onClick={() => setExpanded(isExpanded ? null : n.id)}>
+                        <div style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
                           <span style={{ fontSize: 12 }}>{s.icon}</span>
                           <span style={{ fontSize: 11, fontWeight: 600, flex: 1 }}>{n.title}</span>
                           <span style={{ fontSize: 9, background: 'var(--panel)', padding: '1px 4px', borderRadius: 3, color: 'var(--muted)' }}>
                             {n.source === 'mail' ? '✉️' : '📡'}
                           </span>
+                          {!n.read && <span style={{ width: 6, height: 6, borderRadius: 3, background: s.color }} />}
                         </div>
                         <div style={{ fontSize: 10, color: 'var(--muted)', marginTop: 2 }}>{n.message}</div>
-                        {isExpanded && (
-                          <div style={{ display: 'flex', gap: 6, marginTop: 6 }}>
-                            {n.taskId && (
-                              <button onClick={() => handleViewTask(n)} style={{ fontSize: 10, padding: '2px 8px', borderRadius: 4, border: '1px solid var(--acc)', background: 'transparent', color: 'var(--acc)', cursor: 'pointer' }}>查看任务</button>
-                            )}
-                            {!n.read && (
-                              <button onClick={() => handleMarkRead(n)} style={{ fontSize: 10, padding: '2px 8px', borderRadius: 4, border: '1px solid var(--line)', background: 'transparent', color: 'var(--muted)', cursor: 'pointer' }}>已读</button>
-                            )}
-                          </div>
-                        )}
+                        <div style={{ fontSize: 9, color: 'var(--muted)', marginTop: 2, opacity: 0.6 }}>
+                          {n.taskId ? '👆 点击查看任务' : !n.read ? '👆 点击标记已读' : ''}
+                        </div>
                       </div>
                     );
                   })}