From e8f531d38b6cc26e88f51d3085b45a588f9e521e Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Tue, 13 Jul 2021 12:03:36 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E6=B7=BB=E5=8A=A0=E5=A5=BD?=
 =?UTF-8?q?=E5=8F=8B=E6=97=B6=E6=98=BE=E7=A4=BA=E4=B8=AA=E4=BA=BA=E5=94=AF?=
 =?UTF-8?q?=E4=B8=80=E6=A0=87=E8=AF=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Content/Personal/Friends/AddFriend.tsx    | 28 +++++++++++++++++--
 web/src/styles/overwrite.less                 |  4 +++
 2 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/web/src/routes/Main/Content/Personal/Friends/AddFriend.tsx b/web/src/routes/Main/Content/Personal/Friends/AddFriend.tsx
index 694df8e3..ea47cc7d 100644
--- a/web/src/routes/Main/Content/Personal/Friends/AddFriend.tsx
+++ b/web/src/routes/Main/Content/Personal/Friends/AddFriend.tsx
@@ -1,12 +1,13 @@
 import { Avatar } from '@/components/Avatar';
 import { Highlight } from '@/components/Highlight';
-import { Button, Divider, Empty } from 'antd';
+import { Button, Divider, Empty, Typography } from 'antd';
 import {
   addFriendRequest,
   searchUserWithUniqueName,
   showErrorToasts,
   showToasts,
   t,
+  useAppSelector,
   useAsyncFn,
   UserBaseInfo,
 } from 'pawchat-shared';
@@ -70,6 +71,25 @@ const SearchFriendResult: React.FC<{
 });
 SearchFriendResult.displayName = 'SearchFriendResult';
 
+const SelfIdentify: React.FC = React.memo(() => {
+  const userInfo = useAppSelector((state) => state.user.info);
+  const uniqueName = `${userInfo?.nickname}#${userInfo?.discriminator}`;
+
+  return (
+    <div>
+      <Divider />
+
+      <div className="rounded-md border border-black border-opacity-30 px-4 py-3 bg-black bg-opacity-10 text-center">
+        <div>您的个人唯一标识</div>
+        <Typography.Title level={4} copyable={true}>
+          {uniqueName}
+        </Typography.Title>
+      </div>
+    </div>
+  );
+});
+SelfIdentify.displayName = 'SelfIdentify';
+
 export const AddFriend: React.FC = React.memo(() => {
   const [uniqueName, setUniqueName] = useState('');
   const [{ loading, value }, searchUser] = useAsyncFn(async () => {
@@ -108,7 +128,11 @@ export const AddFriend: React.FC = React.memo(() => {
         </Button>
       </div>
 
-      <SearchFriendResult result={value} />
+      {Array.isArray(value) ? (
+        <SearchFriendResult result={value} />
+      ) : (
+        <SelfIdentify />
+      )}
     </div>
   );
 });
diff --git a/web/src/styles/overwrite.less b/web/src/styles/overwrite.less
index 1586dadf..3d05d69b 100644
--- a/web/src/styles/overwrite.less
+++ b/web/src/styles/overwrite.less
@@ -6,3 +6,7 @@
 .ant-message .anticon {
   vertical-align: text-top;
 }
+
+.ant-typography-expand {
+  vertical-align: text-bottom;
+}