新增点击头像/昵称查看用户资料弹窗，接入消息气泡/@提及/群成员列表

新增全局 UserCardRoot（stores/userCard.ts 驱动，挂载在 AppShell 里，模式同
ConfirmDialogRoot），复用 getUserProfile 数据源，展示头像/昵称/性别地区/签名，
非本人时带发消息/语音/视频快捷操作，底部"查看完整资料"跳转到完整的
/contacts/{id} 页面。

接入点：
- MessageBubble.tsx：群聊和单聊的对方头像/昵称（原来只有群聊头像/昵称是
  Link 到完整资料页，单聊完全没有交互）
- drafty.tsx：@提及实体（Drafty.mention 的 uid 存在 ent[].data.val 里，
  之前渲染完全没读这个字段），"所有人"哨兵值除外
- GroupMembersModal.tsx / GroupDetailColumn.tsx：群成员列表的行内和紧凑
  头像格子

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

web/src/app/AppShell.tsx

@@ -3,6 +3,7 @@ import { useEffect } from 'react';
 import { useQuery, useQueryClient } from '@tanstack/react-query';
 import { Outlet, useNavigate } from 'react-router-dom';
 
+import { UserCardRoot } from '@/app/UserCardRoot';
 import { CallRoot } from '@/features/calls/CallRoot';
 import { useBootstrap } from '@/lib/api/hooks';
 import { getMe } from '@/lib/api/profile';
@@ -98,6 +99,7 @@ export function AppShell() {
         </div>
       </div>
       <CallRoot />
+      <UserCardRoot />
     </div>
   );
 }

web/src/app/UserCardRoot.tsx

@@ -0,0 +1,138 @@
+import { useQuery } from '@tanstack/react-query';
+import { useNavigate } from 'react-router-dom';
+
+import { Avatar } from '@/app/Avatar';
+import { Icon } from '@/app/Icon';
+import { ImApiError } from '@/lib/api/client';
+import { getUserProfile } from '@/lib/api/friends';
+import { useEscapeKey } from '@/lib/hooks';
+import { useCallStore } from '@/stores/calls';
+import { useSessionStore } from '@/stores/session';
+import { closeUserCard, useUserCardStore } from '@/stores/userCard';
+
+const GENDER_LABEL: Record<string, string> = { male: '男', female: '女' };
+
+/** Mounted once at the app root (App.tsx) -- renders whatever `openUserCard()` (stores/userCard.ts)
+ *  most recently asked for. A lighter, faster-to-reach sibling of FriendProfileView's full `/contacts/
+ *  :userId` page (same `getUserProfile` data source, same relationship-aware action gating), not a
+ *  replacement for it -- "查看完整资料" below still routes there for remark-editing/QR code/etc. */
+export function UserCardRoot() {
+  const userId = useUserCardStore((s) => s.userId);
+  // Always registered (hooks can't be conditional), matching ConfirmDialogRoot's own reasoning --
+  // a no-op onEscape while no card is open is harmless.
+  useEscapeKey(closeUserCard);
+  if (!userId) return null;
+  // key={userId} so switching straight from one card to another (tapping a different @mention
+  // before closing the first) resets the query/local state instead of showing stale data mid-fetch.
+  return <UserCardPanel key={userId} userId={userId} />;
+}
+
+function UserCardPanel({ userId }: { userId: string }) {
+  const navigate = useNavigate();
+  const myUserId = useSessionStore((s) => s.myUserId);
+  const isSelf = !!myUserId && myUserId === userId;
+
+  const query = useQuery({
+    queryKey: ['user-profile', userId],
+    queryFn: () => getUserProfile(userId),
+  });
+  const profile = query.data;
+  const name = profile ? profile.remark || profile.display_name : '';
+
+  const goToFullProfile = () => {
+    closeUserCard();
+    navigate(isSelf ? '/settings/profile' : `/contacts/${userId}`);
+  };
+
+  return (
+    <div className="fixed inset-0 z-[100] flex items-center justify-center bg-[#22262d]/25" onClick={closeUserCard}>
+      <div className="w-[300px] overflow-hidden rounded-xl bg-white shadow-modal" onClick={(e) => e.stopPropagation()}>
+        <div className="flex items-center justify-end px-3 pt-3">
+          <button
+            type="button"
+            onClick={closeUserCard}
+            className="grid h-7 w-7 place-items-center rounded-full text-text-tertiary-2 hover:bg-surface-input"
+          >
+            <Icon name="close" className="text-[18px]" />
+          </button>
+        </div>
+
+        {query.isLoading ? (
+          <div className="flex h-44 items-center justify-center text-sm text-text-tertiary-4">加载中…</div>
+        ) : !profile ? (
+          <div className="flex h-44 flex-col items-center justify-center gap-2 px-6 text-center text-sm text-text-tertiary-4">
+            {query.error instanceof ImApiError && query.error.status === 403 ? (
+              '对方设置了资料保护，暂时无法查看'
+            ) : query.error instanceof ImApiError && query.error.status === 404 ? (
+              '未找到该用户'
+            ) : (
+              <>
+                <span>加载失败，请重试</span>
+                <button type="button" onClick={() => query.refetch()} className="text-accent">
+                  重试
+                </button>
+              </>
+            )}
+          </div>
+        ) : (
+          <div className="flex flex-col items-center px-6 pb-6">
+            <Avatar id={profile.user_id} name={name} avatarFileId={profile.avatar_file_id} className="h-18 w-18 flex-none rounded-2xl text-xl" />
+            <strong className="mt-3 max-w-full truncate text-base font-semibold text-text-heading">{name}</strong>
+            {profile.remark ? <span className="mt-0.5 max-w-full truncate text-[13px] text-text-tertiary-2">昵称：{profile.display_name}</span> : null}
+            {profile.gender || profile.region ? (
+              <span className="mt-0.5 text-[13px] text-text-tertiary-2">
+                {[profile.gender ? GENDER_LABEL[profile.gender] || profile.gender : null, profile.region].filter(Boolean).join(' · ')}
+              </span>
+            ) : null}
+            {profile.signature ? <p className="m-0 mt-2 line-clamp-3 text-center text-sm text-text-secondary">{profile.signature}</p> : null}
+
+            {!isSelf ? (
+              <div className="mt-5 flex w-full items-center gap-2">
+                <button
+                  type="button"
+                  disabled={profile.capabilities?.can_send === false}
+                  onClick={() => {
+                    closeUserCard();
+                    navigate(`/messages/${profile.user_id}`);
+                  }}
+                  className="flex h-9 flex-1 items-center justify-center gap-1.5 rounded-lg bg-btn text-sm font-medium text-white shadow-btn-sm disabled:opacity-50"
+                >
+                  <Icon name="chat_bubble" className="text-base" />
+                  发消息
+                </button>
+                <button
+                  type="button"
+                  disabled={profile.capabilities?.can_call === false}
+                  onClick={() => {
+                    if (useCallStore.getState().phase !== 'idle') return;
+                    closeUserCard();
+                    useCallStore.getState().startCall(profile.user_id, name, 'audio');
+                  }}
+                  className="grid h-9 w-9 flex-none place-items-center rounded-lg bg-surface-input text-accent disabled:opacity-50"
+                >
+                  <Icon name="call" className="text-base" />
+                </button>
+                <button
+                  type="button"
+                  disabled={profile.capabilities?.can_call === false}
+                  onClick={() => {
+                    if (useCallStore.getState().phase !== 'idle') return;
+                    closeUserCard();
+                    useCallStore.getState().startCall(profile.user_id, name, 'video');
+                  }}
+                  className="grid h-9 w-9 flex-none place-items-center rounded-lg bg-surface-input text-accent disabled:opacity-50"
+                >
+                  <Icon name="videocam" className="text-base" />
+                </button>
+              </div>
+            ) : null}
+
+            <button type="button" onClick={goToFullProfile} className="mt-3 text-[13px] text-accent">
+              查看完整资料
+            </button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

web/src/features/groups/GroupDetailColumn.tsx

@@ -34,6 +34,7 @@ import { requestConfirm } from '@/stores/confirmDialog';
 import { notify } from '@/stores/globalToast';
 import { requestActionToken } from '@/stores/securityChallenge';
 import { useSessionStore } from '@/stores/session';
+import { openUserCard } from '@/stores/userCard';
 
 interface GroupDetailColumnProps {
   topicId: string;
@@ -363,7 +364,12 @@ export function GroupDetailColumn({ topicId, peerName, onClose, onOpenHistory }:
             </button>
             <div className="grid grid-cols-5 gap-2 md:mt-2">
               {members.slice(0, 9).map((m) => (
-                <div key={m.user_id} className="relative flex flex-col items-center gap-1">
+                <button
+                  key={m.user_id}
+                  type="button"
+                  onClick={() => openUserCard(m.user_id)}
+                  className="relative flex flex-col items-center gap-1"
+                >
                   {/* README §4.10/#1e: mobile member-grid avatars are 44px, one size up from
                       desktop's 40px (unconditional here before this fix). */}
                   <Avatar
@@ -374,7 +380,7 @@ export function GroupDetailColumn({ topicId, peerName, onClose, onOpenHistory }:
                   />
                   <RoleCorner role={m.role} />
                   <span className="w-full truncate text-center text-[11px] text-text-secondary">{m.display_name || m.user_id}</span>
-                </div>
+                </button>
               ))}
               {canInvite ? (
                 // Goes straight to the invite-candidates view (GroupMembersModal's `initialView=

web/src/features/groups/GroupMembersModal.tsx

@@ -10,6 +10,7 @@ import { canRemoveMember, getAllGroupMembers, inviteGroupMembers, removeGroupMem
 import { avatarBgClass, avatarLetter } from '@/lib/avatar';
 import { useEscapeKey } from '@/lib/hooks';
 import { requestConfirm } from '@/stores/confirmDialog';
+import { openUserCard } from '@/stores/userCard';
 
 const ROLE_LABEL: Record<GroupRole, string> = { owner: '群主', admin: '管理员', member: '' };
 // README §4.3: role tags are a BORDER style, no fill -- matches MessageBubble.tsx's already-correct
@@ -190,10 +191,12 @@ export function GroupMembersModal({ topicId, canInvite, myUserId, myRole, initia
           ) : (
             filtered.map((m) => (
               <div key={m.user_id} className="flex w-full items-center gap-3 rounded-lg px-3 py-2">
-                <span className={`grid h-9 w-9 flex-none place-items-center rounded-lg text-sm font-medium text-white ${avatarBgClass(m.user_id)}`}>
+                <button type="button" onClick={() => openUserCard(m.user_id)} className="flex min-w-0 flex-1 items-center gap-3 text-left">
-                  {avatarLetter(m.display_name)}
+                  <span className={`grid h-9 w-9 flex-none place-items-center rounded-lg text-sm font-medium text-white ${avatarBgClass(m.user_id)}`}>
-                </span>
+                    {avatarLetter(m.display_name)}
-                <span className="flex-1 truncate text-sm text-text-body">{m.display_name || m.user_id}</span>
+                  </span>
+                  <span className="min-w-0 flex-1 truncate text-sm text-text-body">{m.display_name || m.user_id}</span>
+                </button>
                 <RoleTag role={m.role} />
                 {canRemoveMember(myUserId, myRole, m) ? (
                   <button

web/src/features/messages/MessageBubble.tsx

@@ -23,6 +23,7 @@ import { isFailedStatus, isSendingStatus, outgoingStatusLabel } from '@/lib/mess
 import { groupSenderLabel } from '@/lib/messages/sender-name';
 import { retryMessage } from '@/lib/tinode/send';
 import { ensureTopicAttached } from '@/lib/tinode/topics';
+import { openUserCard } from '@/stores/userCard';
 
 /** 设计稿 4.3：气泡上方角色标签，边框样式（不是填色）-- 群主 #ff951c、管理员 #1677ff，均不加背景。
  *  与 GroupMembersModal/GroupDetailColumn 里另外两种角色标签（填色 tag、圆角数字角标）故意不共用
@@ -173,10 +174,10 @@ export function MessageRow({
             relationship isn't a case this app has ever needed to support. Not during `selectMode`
             either -- the checkbox is the only thing a tap in this row should do while bulk-selecting,
             not navigate away and lose whatever's already been picked. */}
-        {isGroup && !mine && !selectMode && msg.from ? (
+        {!mine && !selectMode && msg.from ? (
-          <Link to={`/contacts/${msg.from}`} className="flex-none no-underline">
+          <button type="button" onClick={() => openUserCard(msg.from!)} className="flex-none">
-            <Avatar id={msg.from} name={groupSenderLabel(senderName)} avatarFileId={avatarFileId} className="h-9 w-9 rounded-lg text-sm" />
+            <Avatar id={msg.from} name={isGroup ? groupSenderLabel(senderName) : peerName} avatarFileId={avatarFileId} className="h-9 w-9 rounded-lg text-sm" />
-          </Link>
+          </button>
         ) : (
           <Avatar
             id={msg.from || (isGroup ? '' : peerName)}
@@ -190,9 +191,9 @@ export function MessageRow({
           {isGroup ? (
             <div className={`flex items-center gap-1 px-0.5 text-xs text-text-tertiary-4 ${mine ? 'flex-row-reverse' : ''}`}>
               {!mine && !selectMode && msg.from ? (
-                <Link to={`/contacts/${msg.from}`} className="text-text-tertiary-4 no-underline hover:underline">
+                <button type="button" onClick={() => openUserCard(msg.from!)} className="text-text-tertiary-4 hover:underline">
                   {groupSenderLabel(senderName)}
-                </Link>
+                </button>
               ) : (
                 <span>{mine ? '我' : groupSenderLabel(senderName)}</span>
               )}

web/src/lib/messages/drafty.tsx

@@ -5,6 +5,8 @@ import { Drafty, type DraftyContent } from 'tinode-sdk';
 import { AudioAttachment, FileAttachment, ImageAttachment, VideoAttachment } from '@/features/messages/AttachmentPreview';
 import { SafeLink } from '@/features/messages/SafeLink';
 import { flatTextContentOf } from '@/lib/messages/dispatch';
+import { MENTION_ALL_SENTINEL } from '@/lib/messages/mentions';
+import { openUserCard } from '@/stores/userCard';
 
 /**
  * Bubble content renderer for the Drafty style tags this app currently sends/receives. Grown
@@ -72,12 +74,24 @@ function makeFormatNode(highlightQuery: string | undefined) {
         );
       case 'BR':
         return <br key={key} />;
-      case 'MN':
+      case 'MN': {
+        // The mention's uid lives on the entity's own `data` (Drafty.mention(name, uid) -- SDK
+        // source: `ent:[{tp:'MN', data:{val:uid}}]`), not on `values`/`children` (that's just the
+        // rendered label text). MENTION_ALL_SENTINEL ("所有人") isn't a real user -- nothing to open.
+        const uid = typeof data?.val === 'string' ? data.val : undefined;
+        if (uid && uid !== MENTION_ALL_SENTINEL) {
+          return (
+            <button key={key} type="button" onClick={() => openUserCard(uid)} className="inline border-0 bg-transparent p-0 text-accent hover:underline">
+              {children}
+            </button>
+          );
+        }
         return (
           <span key={key} className="text-accent">
             {children}
           </span>
         );
+      }
       case 'HL':
         return (
           <mark key={key} className="bg-warn-bg">

web/src/stores/userCard.ts

@@ -0,0 +1,23 @@
+import { create } from 'zustand';
+
+/**
+ * "Tap any avatar/name -> profile popup", app-wide (message bubbles, @mentions inside message text,
+ * group member rows/grid, etc.) -- one global store + a single `<UserCardRoot>` mounted once at the
+ * app root (App.tsx), the same shape as `stores/confirmDialog.ts`/`stores/calls.ts`: callable from any
+ * event handler with no natural "own a piece of JSX for this" home (a Drafty-rendered mention span
+ * deep inside message content, for one), not a per-component `useState`.
+ */
+interface UserCardState {
+  userId: string | null;
+}
+
+export const useUserCardStore = create<UserCardState>(() => ({ userId: null }));
+
+export function openUserCard(userId: string) {
+  if (!userId) return;
+  useUserCardStore.setState({ userId });
+}
+
+export function closeUserCard() {
+  useUserCardStore.setState({ userId: null });
+}