添加气泡

dashboard/src/components/auth/User.tsx

@@ -1,4 +1,4 @@
-import { Avatar, Space } from "antd";
+import { Avatar, Popover, Space } from "antd";
 import { getAvatarColor } from "./Studio";
 
 export interface IUser {
@@ -7,6 +7,7 @@ export interface IUser {
   userName: string;
   avatar?: string;
 }
+
 interface IWidget {
   id?: string;
   nickName?: string;
@@ -14,6 +15,7 @@ interface IWidget {
   avatar?: string;
   showAvatar?: boolean;
   showName?: boolean;
+  showUserName?: boolean;
 }
 const UserWidget = ({
   nickName,
@@ -21,20 +23,40 @@ const UserWidget = ({
   avatar,
   showAvatar = true,
   showName = true,
+  showUserName = false,
 }: IWidget) => {
   return (
-    <Space>
-      {showAvatar ? (
-        <Avatar
-          size="small"
-          src={avatar}
-          style={{ backgroundColor: getAvatarColor(nickName) }}
-        >
-          {nickName?.slice(0, 2)}
-        </Avatar>
-      ) : undefined}
-      {showName ? nickName : undefined}
-    </Space>
+    <Popover
+      content={
+        <div>
+          <div>
+            <Avatar
+              size="large"
+              src={avatar}
+              style={{ backgroundColor: getAvatarColor(nickName) }}
+            >
+              {nickName?.slice(0, 2)}
+            </Avatar>
+          </div>
+          <div>{`${nickName}@${userName}`}</div>
+        </div>
+      }
+    >
+      <Space>
+        {showAvatar ? (
+          <Avatar
+            size={"small"}
+            src={avatar}
+            style={{ backgroundColor: getAvatarColor(nickName) }}
+          >
+            {nickName?.slice(0, 2)}
+          </Avatar>
+        ) : undefined}
+        {showName ? nickName : undefined}
+        {showName && showUserName ? "@" : undefined}
+        {showUserName ? userName : undefined}
+      </Space>
+    </Popover>
   );
 };