diff --git a/shared/index.tsx b/shared/index.tsx
index 59c26923..56865f28 100644
--- a/shared/index.tsx
+++ b/shared/index.tsx
@@ -28,6 +28,13 @@ export { useRafState } from './hooks/useRafState';
 export { getStorage, setStorage, useStorage } from './manager/storage';
 export { setTokenGetter } from './manager/request';
 export { setServiceUrl } from './manager/service';
+export {
+  showToasts,
+  setToasts,
+  showAlert,
+  setAlert,
+  showErrorToasts,
+} from './manager/ui';
 
 // model
 export type { UserBaseInfo } from './model/user';
diff --git a/shared/manager/ui.ts b/shared/manager/ui.ts
new file mode 100644
index 00000000..850563cc
--- /dev/null
+++ b/shared/manager/ui.ts
@@ -0,0 +1,31 @@
+import { buildRegFn } from './buildRegFn';
+
+/**
+ * 通用UI api设置
+ */
+
+type ToastsType = 'info' | 'success' | 'error' | 'warning';
+export const [showToasts, setToasts] =
+  buildRegFn<(message: string, type?: ToastsType) => void>('toasts');
+
+/**
+ * 一个封装方法, 用于直接抛出错误
+ * @param error 错误信息
+ */
+export function showErrorToasts(error: Error) {
+  let msg = '';
+  if (error instanceof Error) {
+    msg = error.message;
+  } else {
+    msg = String(error);
+  }
+
+  showToasts(msg, 'error');
+}
+
+interface AlertOptions {
+  message: React.ReactNode;
+  onConfirm?: () => void | Promise<void>;
+}
+export const [showAlert, setAlert] =
+  buildRegFn<(options: AlertOptions) => void>('alert');
diff --git a/web/src/App.tsx b/web/src/App.tsx
index ef519f0e..dd873229 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -4,8 +4,6 @@ import { useStorage } from 'pawchat-shared';
 import clsx from 'clsx';
 import { Loadable } from './components/Loadable';
 
-import './dark.less';
-
 const MainRoute = Loadable(() =>
   import('./routes/Main').then((module) => module.MainRoute)
 );
diff --git a/web/src/index.tsx b/web/src/index.tsx
index af891394..238746de 100644
--- a/web/src/index.tsx
+++ b/web/src/index.tsx
@@ -4,6 +4,7 @@ import ReactDOM from 'react-dom';
 import { App } from './App';
 
 import 'antd/dist/antd.css';
+import './styles/antd.less';
 import 'tailwindcss/tailwind.css';
 
 ReactDOM.render(<App />, document.querySelector('#app'));
diff --git a/web/src/init.tsx b/web/src/init.tsx
index 99dc2d62..aa0aa86f 100644
--- a/web/src/init.tsx
+++ b/web/src/init.tsx
@@ -1,7 +1,10 @@
+import { message, Modal } from 'antd';
 import {
   buildStorage,
+  setAlert,
   setServiceUrl,
   setStorage,
+  setToasts,
   setTokenGetter,
 } from 'pawchat-shared';
 import { getUserJWT } from './utils/jwt-helper';
@@ -18,3 +21,22 @@ if (window.localStorage.getItem('serviceUrl')) {
 } else if (process.env.SERVICE_URL) {
   setServiceUrl(() => String(process.env.SERVICE_URL));
 }
+
+setToasts((msg, type = 'info') => {
+  message.open({
+    type,
+    duration: 30000,
+    content: String(msg),
+  });
+});
+
+setAlert((options) => {
+  Modal.confirm({
+    content: options.message,
+    onOk: async () => {
+      if (typeof options.onConfirm === 'function') {
+        await options.onConfirm();
+      }
+    },
+  });
+});
diff --git a/web/src/routes/Main/Content/Personal/Friends/AddFriend.tsx b/web/src/routes/Main/Content/Personal/Friends/AddFriend.tsx
index 67096b99..48dad4f1 100644
--- a/web/src/routes/Main/Content/Personal/Friends/AddFriend.tsx
+++ b/web/src/routes/Main/Content/Personal/Friends/AddFriend.tsx
@@ -3,14 +3,19 @@ import { Highlight } from '@/components/Highlight';
 import { Button, Divider, Empty } from 'antd';
 import {
   searchUserWithUniqueName,
+  showErrorToasts,
   useAsyncFn,
   UserBaseInfo,
 } from 'pawchat-shared';
-import React, { useState } from 'react';
+import React, { useCallback, useState } from 'react';
 
 const SearchFriendResult: React.FC<{
   result: UserBaseInfo | undefined | null;
 }> = React.memo(({ result }) => {
+  const handleAddFriend = useCallback((userId: string) => {
+    console.log(userId);
+  }, []);
+
   if (result === undefined) {
     return null;
   }
@@ -39,7 +44,11 @@ const SearchFriendResult: React.FC<{
           </div>
         </div>
 
-        <Button type="primary" className="bg-green-700 border-0">
+        <Button
+          type="primary"
+          className="bg-green-600 border-0"
+          onClick={() => handleAddFriend(result._id)}
+        >
           申请好友
         </Button>
       </div>
@@ -57,7 +66,7 @@ export const AddFriend: React.FC = React.memo(() => {
 
       return data;
     } catch (err) {
-      console.error(err);
+      showErrorToasts(err);
     }
   }, [uniqueName]);
 
@@ -68,7 +77,7 @@ export const AddFriend: React.FC = React.memo(() => {
         您可以使用完整的 <Highlight>用户昵称#标识</Highlight> 来添加好友
       </div>
 
-      <div className="px-4 my-3 flex border border-black border-opacity-30 rounded items-center">
+      <div className="px-4 my-3 flex border border-black border-opacity-30 rounded items-center bg-black bg-opacity-10">
         <input
           className="bg-transparent flex-1 text-base leading-13 outline-none"
           placeholder="用户昵称#0000"
@@ -77,7 +86,8 @@ export const AddFriend: React.FC = React.memo(() => {
 
         <Button
           type="primary"
-          className="bg-indigo-600 border-none"
+          className="bg-indigo-600 disabled:opacity-80 border-none"
+          disabled={uniqueName === ''}
           loading={loading}
           onClick={searchUser}
         >
diff --git a/web/src/styles/antd.less b/web/src/styles/antd.less
new file mode 100644
index 00000000..6f50751a
--- /dev/null
+++ b/web/src/styles/antd.less
@@ -0,0 +1,2 @@
+@import "./overwrite.less";
+@import "./dark.less";
diff --git a/web/src/dark.less b/web/src/styles/dark.less
similarity index 100%
rename from web/src/dark.less
rename to web/src/styles/dark.less
diff --git a/web/src/styles/overwrite.less b/web/src/styles/overwrite.less
new file mode 100644
index 00000000..1586dadf
--- /dev/null
+++ b/web/src/styles/overwrite.less
@@ -0,0 +1,8 @@
+/**
+ * 这里主要是处理tailwindcss与 antd 一起用的时候的兼容问题
+ * 与重写部分antd的样式
+ */
+
+.ant-message .anticon {
+  vertical-align: text-top;
+}