feat(web): 会话消息中可以点开头像查看信息

TRPGEngine · Feb 23, 2020 · 8972dfd · 8972dfd
1 parent 8f189eb
commit 8972dfd
Show file tree

Hide file tree

Showing 4 changed files with 105 additions and 6 deletions.
diff --git a/src/web/components/FindResultItem.tsx b/src/web/components/FindResultItem.tsx
@@ -10,7 +10,7 @@ import { TRPGState, TRPGDispatch } from '@redux/types/__all__';
 import _get from 'lodash/get';
 import _isNil from 'lodash/isNil';
 import { showModal } from '@redux/actions/ui';
-import GroupInfo from './popover/GroupInfo';
+import PopoverGroupInfo from './popover/GroupInfo';
 import { Popover } from 'antd';
 
 import './FindResultItem.scss';
@@ -118,7 +118,7 @@ class FindResultItem extends React.Component<Props> {
         <div className="find-result-item">
           <Popover
             placement="right"
-            content={<GroupInfo groupUUID={info.uuid} />}
+            content={<PopoverGroupInfo groupUUID={info.uuid} />}
           >
             <div className="avatar">
               <img src={info.avatar || config.defaultImg.getGroup(info.name)} />

diff --git a/src/web/components/messageTypes/Base.tsx b/src/web/components/messageTypes/Base.tsx
@@ -4,6 +4,9 @@ import config from '../../../shared/project.config';
 import { MessageProps } from '@shared/components/MessageHandler';
 import _get from 'lodash/get';
 import { getAbsolutePath } from '@shared/utils/file-helper';
+import Avatar from '../Avatar';
+import { Popover } from 'antd';
+import PopoverUserInfo from '../popover/UserInfo';
 
 class Base<P extends MessageProps = MessageProps> extends React.PureComponent<
   P
@@ -26,6 +29,12 @@ class Base<P extends MessageProps = MessageProps> extends React.PureComponent<
     return _get(info, 'data.name') || name;
   }
 
+  getSenderUUID(): string {
+    const { info } = this.props;
+
+    return _get(info, ['sender_uuid'], '');
+  }
+
   /**
    * 返回信息avatar的地址
    * 获取顺序: 消息信息内头像 -> 传递来的头像(发送者) -> 默认头像
@@ -71,7 +80,25 @@ class Base<P extends MessageProps = MessageProps> extends React.PureComponent<
         </div>
         <div className="content">
           <div className="avatar">
-            <img src={this.getAvatarUrl()} />
+            {me ? (
+              <Avatar
+                name={this.getSenderName()}
+                src={this.getAvatarUrl()}
+                size={38}
+              />
+            ) : (
+              <Popover
+                placement="right"
+                trigger="click"
+                content={<PopoverUserInfo userUUID={this.getSenderUUID()} />}
+              >
+                <Avatar
+                  name={this.getSenderName()}
+                  src={this.getAvatarUrl()}
+                  size={38}
+                />
+              </Popover>
+            )}
           </div>
           <div className="body">{this.getContent()}</div>
         </div>

diff --git a/src/web/components/popover/GroupInfo.tsx b/src/web/components/popover/GroupInfo.tsx
@@ -29,7 +29,7 @@ const Container = styled.div`
 interface Props {
   groupUUID: string;
 }
-const GroupInfo: React.FC<Props> = React.memo((props) => {
+const PopoverGroupInfo: React.FC<Props> = React.memo((props) => {
   const groupInfo = useCachedGroupInfo(props.groupUUID);
 
   const avatar = useMemo(
@@ -62,6 +62,6 @@ const GroupInfo: React.FC<Props> = React.memo((props) => {
     </Container>
   );
 });
-GroupInfo.displayName = 'GroupInfo';
+PopoverGroupInfo.displayName = 'PopoverGroupInfo';
 
-export default GroupInfo;
+export default PopoverGroupInfo;
diff --git a/src/web/components/popover/UserInfo.tsx b/src/web/components/popover/UserInfo.tsx
@@ -0,0 +1,72 @@
+import React, { useMemo } from 'react';
+import { useCachedUserInfo } from '@shared/hooks/cache';
+import styled from 'styled-components';
+import Avatar from '../Avatar';
+import config from '@shared/project.config';
+import _isEmpty from 'lodash/isEmpty';
+
+const Container = styled.div`
+  display: flex;
+  max-width: 240px;
+
+  .avatar {
+    overflow: hidden;
+    border: 1px solid white;
+
+    > img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  .info {
+    flex: 1;
+    margin-left: 10px;
+    overflow: hidden;
+  }
+`;
+
+interface Props {
+  userUUID: string;
+}
+const PopoverUserInfo: React.FC<Props> = React.memo((props) => {
+  const userInfo = useCachedUserInfo(props.userUUID);
+
+  const name = useMemo(() => userInfo.nickname ?? userInfo.username ?? '', [
+    userInfo.nickname,
+    userInfo.username,
+  ]);
+
+  const avatar = useMemo(
+    () =>
+      _isEmpty(userInfo.avatar)
+        ? config.defaultImg.getUser(name)
+        : userInfo.avatar,
+    [userInfo.avatar]
+  );
+
+  return (
+    <Container>
+      <div className="avatar">
+        <Avatar size="large" src={avatar} name={name} />
+      </div>
+      <div className="info">
+        <div>
+          <span>用户名: </span>
+          <span>{name}</span>
+        </div>
+        <div>
+          <span>性别: </span>
+          <span>{userInfo.sex}</span>
+        </div>
+        <div>
+          <span>签名: </span>
+          <p>{userInfo.sign}</p>
+        </div>
+      </div>
+    </Container>
+  );
+});
+PopoverUserInfo.displayName = 'PopoverUserInfo';
+
+export default PopoverUserInfo;