feat: 增加删除好友功能

shared/i18n/langs/en-US/translation.json

@@ -90,6 +90,7 @@
   "kcefdbe2d": "Modify avatar success",
   "kd2c1a316": "Login",
   "kd2e5e126": "Panel Manage",
+  "kd417f93a": "Do you want to delete the other party from your friend list? Note: You will not disappear from the other party's friend list",
   "kd4ff36fa": "Search Friends",
   "kd637a30": "Group Invite Service",
   "kda67b115": "Unknown panel type",
@@ -98,11 +99,14 @@
   "kdd4c838c": "Jump to Group",
   "kdd6c18f8": "Service exception",
   "ke187440d": "Panel type cannot be empty",
+  "kecbd7449": "Delete",
   "ked2baf28": "Loading...",
   "ked5385d5": "Create Panel",
   "keda14478": "You are the group manager, leaving the group will cause the group to be dissolved",
   "kef25594f": "Nickname#0000",
   "kefc07278": "Back to login",
+  "kf02c6db": "Friend List",
+  "kf0d97e0b": "Friend deleted successfully",
   "kf15499b4": "Logout",
   "kf1eac01c": "Failed to load group information",
   "kf22210a": "Loading plugin list",

shared/i18n/langs/zh-CN/translation.json

@@ -90,6 +90,7 @@
   "kcefdbe2d": "修改头像成功",
   "kd2c1a316": "登录",
   "kd2e5e126": "面板管理",
+  "kd417f93a": "是否要从自己的好友列表中删除对方? 注意:你不会从对方的好友列表消失",
   "kd4ff36fa": "查找好友",
   "kd637a30": "群组邀请服务",
   "kda67b115": "未知的面板类型",
@@ -98,11 +99,14 @@
   "kdd4c838c": "跳转到群组",
   "kdd6c18f8": "服务异常",
   "ke187440d": "面板类型不能为空",
+  "kecbd7449": "删除",
   "ked2baf28": "加载中...",
   "ked5385d5": "创建面板",
   "keda14478": "您是群组管理者，退出群组会导致解散群组",
   "kef25594f": "用户昵称#0000",
   "kefc07278": "返回登录",
+  "kf02c6db": "好友列表",
+  "kf0d97e0b": "好友删除成功",
   "kf15499b4": "退出登录",
   "kf1eac01c": "群组信息加载失败",
   "kf22210a": "正在加载插件列表",

shared/index.tsx

@@ -69,6 +69,7 @@ export {
   cancelFriendRequest,
   acceptFriendRequest,
   denyFriendRequest,
+  removeFriend,
 } from './model/friend';
 export type { FriendRequest } from './model/friend';
 export {

shared/manager/ui.ts

@@ -12,7 +12,7 @@ export const [showToasts, setToasts] =
  * 一个封装方法, 用于直接抛出错误
  * @param error 错误信息
  */
-export function showErrorToasts(error: Error) {
+export function showErrorToasts(error: unknown) {
   let msg = '';
   if (error instanceof Error) {
     msg = error.message;

shared/model/friend.ts

@@ -50,3 +50,12 @@ export async function cancelFriendRequest(requestId: string): Promise<void> {
     requestId,
   });
 }
+
+/**
+ * 移除好友(单项)
+ */
+export async function removeFriend(friendUserId: string): Promise<void> {
+  await request.post('/api/friend/removeFriend', {
+    friendUserId,
+  });
+}

shared/redux/slices/user.ts

@@ -44,6 +44,13 @@ const userSlice = createSlice({
 
       state.friends.push(action.payload);
     },
+    removeFriend(state, action: PayloadAction<string>) {
+      const friendId = action.payload;
+      const index = state.friends.indexOf(friendId);
+      if (index >= 0) {
+        state.friends.splice(index, 1);
+      }
+    },
     appendFriendRequest(state, action: PayloadAction<FriendRequest>) {
       if (state.friendRequests.some(({ _id }) => _id === action.payload._id)) {
         return;

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

@@ -1,13 +1,19 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import {
   createDMConverse,
+  removeFriend,
+  showAlert,
+  showErrorToasts,
+  showToasts,
   t,
+  useAppDispatch,
   useAppSelector,
   useAsyncRequest,
+  userActions,
 } from 'tailchat-shared';
 import { UserListItem } from '@/components/UserListItem';
 import { IconBtn } from '@/components/IconBtn';
-import { Tooltip } from 'antd';
+import { Dropdown, Menu, Tooltip } from 'antd';
 import { useHistory } from 'react-router';
 
 /**
@@ -16,6 +22,7 @@ import { useHistory } from 'react-router';
 export const FriendList: React.FC = React.memo(() => {
   const friends = useAppSelector((state) => state.user.friends);
   const history = useHistory();
+  const dispatch = useAppDispatch();
 
   const [, handleCreateConverse] = useAsyncRequest(
     async (targetId: string) => {
@@ -25,9 +32,26 @@ export const FriendList: React.FC = React.memo(() => {
     [history]
   );
 
+  const handleRemoveFriend = useCallback(async (targetId: string) => {
+    showAlert({
+      message: t(
+        '是否要从自己的好友列表中删除对方? 注意:你不会从对方的好友列表消失'
+      ),
+      onConfirm: async () => {
+        try {
+          await removeFriend(targetId);
+          showToasts(t('好友删除成功'), 'success');
+          dispatch(userActions.removeFriend(targetId));
+        } catch (err) {
+          showErrorToasts(err);
+        }
+      },
+    });
+  }, []);
+
   return (
     <div className="py-2.5 px-5">
-      <div>好友列表</div>
+      <div>{t('好友列表')}</div>
       <div>
         {friends.map((friendId) => (
           <UserListItem
@@ -42,6 +66,27 @@ export const FriendList: React.FC = React.memo(() => {
                   />
                 </div>
               </Tooltip>,
+              <div key="more">
+                <Dropdown
+                  overlay={
+                    <Menu>
+                      <Menu.Item
+                        key="delete"
+                        danger={true}
+                        onClick={() => handleRemoveFriend(friendId)}
+                      >
+                        {t('删除')}
+                      </Menu.Item>
+                    </Menu>
+                  }
+                  trigger={['click']}
+                  placement="bottomRight"
+                >
+                  <div>
+                    <IconBtn icon="mdi:dots-vertical" />
+                  </div>
+                </Dropdown>
+              </div>,
             ]}
           />
         ))}

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

@@ -20,7 +20,7 @@ export const FriendPanel: React.FC = React.memo(() => {
   return (
     <div className="w-full">
       <PillTabs>
-        <PillTabPane tab={'全部'} key="1">
+        <PillTabPane tab={t('全部')} key="1">
           <FriendList />
         </PillTabPane>
         <PillTabPane
@@ -44,7 +44,7 @@ export const FriendPanel: React.FC = React.memo(() => {
           <RequestReceived requests={received} />
         </PillTabPane>
         <PillTabPane
-          tab={<span className="text-green-400">添加好友</span>}
+          tab={<span className="text-green-400">{t('添加好友')}</span>}
           key="4"
         >
           <AddFriend />