refactor: 添加好友界面

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';

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';

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>

web/tailwind.config.js

@@ -22,6 +22,9 @@ module.exports = {
         18: '4.5rem',
         142: '35.5rem',
       },
+      lineHeight: {
+        13: '3.25rem',
+      },
     },
   },
   variants: {