diff --git a/client/web/plugins/com.msgbyte.bbcode/src/index.tsx b/client/web/plugins/com.msgbyte.bbcode/src/index.tsx
index 9fefff9d..39447a21 100644
--- a/client/web/plugins/com.msgbyte.bbcode/src/index.tsx
+++ b/client/web/plugins/com.msgbyte.bbcode/src/index.tsx
@@ -36,7 +36,7 @@ regMessageTextDecorators(() => ({
 
     return `[${h}]${plain}[/card]`;
   },
-  mention: (userId, userName) => `[at=${userId} origin="${userName}"][/at]`, // keep empty content to auto generate with context, useful for friend nickname. NOTE: `origin` is not meaningless just for react-mention to locate text.
+  mention: (userId, userName) => `[at=${userId}]${userName}[/at]`,
   emoji: (emojiCode) => `[emoji]${stripColons(emojiCode)}[/emoji]`,
   serialize: (plain: string) => (serialize ? serialize(plain) : plain),
 }));
diff --git a/client/web/plugins/com.msgbyte.bbcode/src/tags/MentionTag.tsx b/client/web/plugins/com.msgbyte.bbcode/src/tags/MentionTag.tsx
index 5ac5e93d..55ded3e3 100644
--- a/client/web/plugins/com.msgbyte.bbcode/src/tags/MentionTag.tsx
+++ b/client/web/plugins/com.msgbyte.bbcode/src/tags/MentionTag.tsx
@@ -4,14 +4,12 @@ import type { TagProps } from '../bbcode/type';
 
 export const MentionTag: React.FC<TagProps> = React.memo((props) => {
   const { node } = props;
-  const userName = node.content.join('');
+  const fallbackName = node.content.join('');
   const userId = node.attrs.at;
 
-  const hasUserName = userName !== '';
-
   return (
     <span className="plugin-bbcode-mention-tag" data-userid={userId}>
-      @{hasUserName ? userName : <UserName userId={userId} />}
+      @{<UserName userId={userId} fallbackName={fallbackName} />}
     </span>
   );
 });
diff --git a/client/web/src/components/UserName.tsx b/client/web/src/components/UserName.tsx
index 03b695a1..1e71c036 100644
--- a/client/web/src/components/UserName.tsx
+++ b/client/web/src/components/UserName.tsx
@@ -1,11 +1,16 @@
 import React from 'react';
-import { useCachedUserInfo, useFriendNickname } from 'tailchat-shared';
+import {
+  isValidStr,
+  useCachedUserInfo,
+  useFriendNickname,
+} from 'tailchat-shared';
 
 interface UserNameProps {
   userId: string;
   className?: string;
   style?: React.CSSProperties;
   showDiscriminator?: boolean;
+  fallbackName?: string;
 }
 
 /**
@@ -31,7 +36,7 @@ UserNamePure.displayName = 'UserNamePure';
  * 增加好友名称patch的 UserName
  */
 export const UserName: React.FC<UserNameProps> = React.memo((props) => {
-  const { userId, showDiscriminator, className, style } = props;
+  const { userId, showDiscriminator, className, style, fallbackName } = props;
   const cachedUserInfo = useCachedUserInfo(userId);
   const friendNickname = useFriendNickname(userId);
 
@@ -43,7 +48,8 @@ export const UserName: React.FC<UserNameProps> = React.memo((props) => {
           <span className="opacity-60">({cachedUserInfo.nickname})</span>
         </>
       ) : (
-        cachedUserInfo.nickname ?? <span>&nbsp;</span>
+        cachedUserInfo.nickname ??
+        (isValidStr(fallbackName) ? fallbackName : <span>&nbsp;</span>)
       )}
 
       {showDiscriminator && (