refactor: 好友搜索结果与界面

shared/api/request.ts

@@ -43,6 +43,11 @@ export function createRequest() {
 
   ins.interceptors.response.use(
     (val) => {
+      /**
+       * 预处理返回的数据
+       */
+      val.data = _get(val.data, 'data', val.data);
+
       return val;
     },
     (err) => {

shared/index.tsx

@@ -30,7 +30,12 @@ export { setTokenGetter } from './manager/request';
 export { setServiceUrl } from './manager/service';
 
 // model
-export { loginWithEmail, registerWithEmail } from './model/user';
+export type { UserBaseInfo } from './model/user';
+export {
+  loginWithEmail,
+  registerWithEmail,
+  searchUserWithUniqueName,
+} from './model/user';
 
 // redux
 export { userActions } from './redux/slices';

shared/model/user.ts

@@ -4,6 +4,7 @@ export interface UserBaseInfo {
   _id: string;
   email: string;
   nickname: string;
+  discriminator: string;
   avatar: string | null;
 }
 
@@ -63,3 +64,17 @@ export async function registerWithEmail(
 
   return data;
 }
+
+/**
+ * 使用唯一标识名搜索用户
+ * @param uniqueName 唯一标识用户昵称: 用户昵称#0000
+ */
+export async function searchUserWithUniqueName(
+  uniqueName: string
+): Promise<UserBaseInfo> {
+  const { data } = await request.post('/api/user/searchUserWithUniqueName', {
+    uniqueName,
+  });
+
+  return data;
+}

web/src/dark.less

@@ -5,7 +5,7 @@
   }
 
   // 分割线
-  .ant-divider-horizontal.ant-divider-with-text {
+  .ant-divider {
     border-top-color: rgba(255,255,255,0.12);
     color: rgba(255,255,255,0.85);
   }

web/src/routes/Main/Content/PageContent.tsx

@@ -77,7 +77,7 @@ export const PageContent: React.FC<PageContentProps> = React.memo((props) => {
 
   const sidebarEl = _isNil(sidebar) ? null : (
     <div
-      className={clsx('bg-gray-800 p-2', {
+      className={clsx('bg-gray-800 p-2 flex-shrink-0', {
         'w-60': showSidebar,
       })}
     >
@@ -102,7 +102,7 @@ export const PageContent: React.FC<PageContentProps> = React.memo((props) => {
     <>
       {sidebarEl}
 
-      <div className="flex flex-auto bg-gray-700 relative">
+      <div className="flex flex-auto bg-gray-700 relative overflow-auto">
         {contentMaskEl}
         {contentEl}
       </div>

web/src/routes/Main/Content/Personal/Friends/AddFriend.tsx

@@ -1,7 +1,66 @@
+import { Avatar } from '@/components/Avatar';
 import { Highlight } from '@/components/Highlight';
-import React from 'react';
+import { Button, Divider, Empty } from 'antd';
+import {
+  searchUserWithUniqueName,
+  useAsyncFn,
+  UserBaseInfo,
+} from 'pawchat-shared';
+import React, { useState } from 'react';
+
+const SearchFriendResult: React.FC<{
+  result: UserBaseInfo | undefined | null;
+}> = React.memo(({ result }) => {
+  if (result === undefined) {
+    return null;
+  }
+
+  if (result === null) {
+    return <Empty />;
+  }
+
+  return (
+    <div>
+      <Divider />
+
+      <div className="rounded-md border border-black border-opacity-30 px-4 py-3 bg-black bg-opacity-10 flex justify-between items-center">
+        <div>
+          <Avatar
+            className="mb-3"
+            size={60}
+            name={result.nickname}
+            src={result.avatar}
+          />
+          <div className="text-lg">
+            {result.nickname}
+            <span className="text-opacity-60 text-sm text-white">
+              #{result.discriminator}
+            </span>
+          </div>
+        </div>
+
+        <Button type="primary" className="bg-green-700 border-0">
+          申请好友
+        </Button>
+      </div>
+    </div>
+  );
+});
+SearchFriendResult.displayName = 'SearchFriendResult';
 
 export const AddFriend: React.FC = React.memo(() => {
+  const [uniqueName, setUniqueName] = useState('');
+  const [{ loading, value }, searchUser] = useAsyncFn(async () => {
+    // 搜索用户
+    try {
+      const data = await searchUserWithUniqueName(uniqueName);
+
+      return data;
+    } catch (err) {
+      console.error(err);
+    }
+  }, [uniqueName]);
+
   return (
     <div className="px-8 py-2">
       <div className="text-lg my-2">添加好友</div>
@@ -12,13 +71,21 @@ export const AddFriend: React.FC = React.memo(() => {
       <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"
+          placeholder="用户昵称#0000"
+          onChange={(e) => setUniqueName(e.target.value)}
         />
 
-        <div className="h-8 bg-indigo-600 text-white px-4 py-0.5 cursor-pointer rounded flex items-center">
-          <div>查找好友</div>
-        </div>
+        <Button
+          type="primary"
+          className="bg-indigo-600 border-none"
+          loading={loading}
+          onClick={searchUser}
+        >
+          查找好友
+        </Button>
       </div>
+
+      <SearchFriendResult result={value} />
     </div>
   );
 });