From e27094d0f2ec0cb38322f3260f165f2a563c3d40 Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Wed, 28 Dec 2022 23:17:04 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E4=BC=98=E5=8C=96UserAvatar=20?=
 =?UTF-8?q?=E5=92=8C=20UserName=20=E7=9A=84props=EF=BC=8C=E5=85=81?=
 =?UTF-8?q?=E8=AE=B8=E6=8E=A5=E5=8F=97=E6=9B=B4=E5=A4=9A=E7=9A=84=E5=8F=82?=
 =?UTF-8?q?=E6=95=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/web/src/components/UserAvatar.tsx | 19 ++++++++++++-------
 client/web/src/components/UserName.tsx   | 15 +++++++++++----
 client/web/tailchat.d.ts                 |  8 +++++++-
 3 files changed, 30 insertions(+), 12 deletions(-)

diff --git a/client/web/src/components/UserAvatar.tsx b/client/web/src/components/UserAvatar.tsx
index a3267747..c80f0409 100644
--- a/client/web/src/components/UserAvatar.tsx
+++ b/client/web/src/components/UserAvatar.tsx
@@ -2,19 +2,24 @@ import React from 'react';
 import { Avatar } from 'tailchat-design';
 import { useCachedUserInfo } from 'tailchat-shared';
 
+interface UserAvatarProps {
+  userId: string;
+  className?: string;
+  style?: React.CSSProperties;
+  size?: 'large' | 'small' | 'default' | number;
+}
+
 /**
  * 用户头像组件
  */
-export const UserAvatar: React.FC<{
-  userId: string;
-  className?: string;
-}> = React.memo((props) => {
-  const { userId, className } = props;
-  const cachedUserInfo = useCachedUserInfo(userId);
+export const UserAvatar: React.FC<UserAvatarProps> = React.memo((props) => {
+  const cachedUserInfo = useCachedUserInfo(props.userId);
 
   return (
     <Avatar
-      className={className}
+      className={props.className}
+      style={props.style}
+      size={props.size}
       src={cachedUserInfo.avatar}
       name={cachedUserInfo.nickname}
     />
diff --git a/client/web/src/components/UserName.tsx b/client/web/src/components/UserName.tsx
index 194f828e..97d43eb4 100644
--- a/client/web/src/components/UserName.tsx
+++ b/client/web/src/components/UserName.tsx
@@ -1,13 +1,20 @@
 import React from 'react';
 import { useCachedUserInfo } from 'tailchat-shared';
 
-export const UserName: React.FC<{
+interface UserNameProps {
   userId: string;
   className?: string;
-}> = React.memo((props) => {
-  const { userId, className } = props;
+  style?: React.CSSProperties;
+}
+
+export const UserName: React.FC<UserNameProps> = React.memo((props) => {
+  const { userId, className, style } = props;
   const cachedUserInfo = useCachedUserInfo(userId);
 
-  return <span className={className}>{cachedUserInfo.nickname}</span>;
+  return (
+    <span className={className} style={style}>
+      {cachedUserInfo.nickname}
+    </span>
+  );
 });
 UserName.displayName = 'UserName';
diff --git a/client/web/tailchat.d.ts b/client/web/tailchat.d.ts
index e60fe980..0893ecc3 100644
--- a/client/web/tailchat.d.ts
+++ b/client/web/tailchat.d.ts
@@ -474,11 +474,17 @@ declare module '@capital/component' {
 
   export const ErrorBoundary: any;
 
-  export const UserAvatar: any;
+  export const UserAvatar: React.FC<{
+    userId: string;
+    className?: string;
+    style?: React.CSSProperties;
+    size?: 'large' | 'small' | 'default' | number;
+  }>;
 
   export const UserName: React.FC<{
     userId: string;
     className?: string;
+    style?: React.CSSProperties;
   }>;
 
   export const Markdown: any;