From f5740cae37d4337e26bffb26d15cb34471dce887 Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Sat, 10 Jul 2021 20:40:42 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E6=B7=BB=E5=8A=A0=E5=A5=BD?=
 =?UTF-8?q?=E5=8F=8B=E7=95=8C=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/components/Highlight.tsx              | 10 ++++++++
 .../Content/Personal/Friends/AddFriend.tsx    | 25 +++++++++++++++++++
 .../Main/Content/Personal/Friends/index.tsx   |  3 ++-
 web/tailwind.config.js                        |  3 +++
 4 files changed, 40 insertions(+), 1 deletion(-)
 create mode 100644 web/src/components/Highlight.tsx
 create mode 100644 web/src/routes/Main/Content/Personal/Friends/AddFriend.tsx

diff --git a/web/src/components/Highlight.tsx b/web/src/components/Highlight.tsx
new file mode 100644
index 00000000..27675faf
--- /dev/null
+++ b/web/src/components/Highlight.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+
+export const Highlight: React.FC = React.memo((props) => {
+  return (
+    <span className="bg-black bg-opacity-20 rounded py-1 px-2">
+      {props.children}
+    </span>
+  );
+});
+Highlight.displayName = 'Highlight';
diff --git a/web/src/routes/Main/Content/Personal/Friends/AddFriend.tsx b/web/src/routes/Main/Content/Personal/Friends/AddFriend.tsx
new file mode 100644
index 00000000..db6c9e1d
--- /dev/null
+++ b/web/src/routes/Main/Content/Personal/Friends/AddFriend.tsx
@@ -0,0 +1,25 @@
+import { Highlight } from '@/components/Highlight';
+import React from 'react';
+
+export const AddFriend: React.FC = React.memo(() => {
+  return (
+    <div className="px-8 py-2">
+      <div className="text-lg my-2">添加好友</div>
+      <div className="my-1">
+        您可以使用完整的 <Highlight>用户昵称#标识</Highlight> 来添加好友
+      </div>
+
+      <div className="px-4 my-3 flex border border-black border-opacity-30 rounded items-center">
+        <input
+          className="bg-transparent flex-1 text-base leading-13 outline-none"
+          placeholder="用户名#0000"
+        />
+
+        <div className="h-8 bg-indigo-600 text-white px-4 py-0.5 cursor-pointer rounded flex items-center">
+          <div>查找好友</div>
+        </div>
+      </div>
+    </div>
+  );
+});
+AddFriend.displayName = 'AddFriend';
diff --git a/web/src/routes/Main/Content/Personal/Friends/index.tsx b/web/src/routes/Main/Content/Personal/Friends/index.tsx
index 98f53a10..9e9e8cf6 100644
--- a/web/src/routes/Main/Content/Personal/Friends/index.tsx
+++ b/web/src/routes/Main/Content/Personal/Friends/index.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { useAppSelector } from '@/hooks/useAppSelector';
 import { PillTabPane, PillTabs } from '@/components/PillTabs';
+import { AddFriend } from './AddFriend';
 
 /**
  * 主要内容组件
@@ -43,7 +44,7 @@ export const FriendPanel: React.FC = React.memo(() => {
           tab={<span className="text-green-400">添加好友</span>}
           key="4"
         >
-          添加好友
+          <AddFriend />
         </PillTabPane>
       </PillTabs>
     </div>
diff --git a/web/tailwind.config.js b/web/tailwind.config.js
index 2bfafd1f..07dad970 100644
--- a/web/tailwind.config.js
+++ b/web/tailwind.config.js
@@ -22,6 +22,9 @@ module.exports = {
         18: '4.5rem',
         142: '35.5rem',
       },
+      lineHeight: {
+        13: '3.25rem',
+      },
     },
   },
   variants: {