新增邀请码页面，新增添加好友功能
Change-Id: Ifa0a5c355ab3693eecfe919de06fa9bef8171695
diff --git a/react-ui/src/pages/Message/index.tsx b/react-ui/src/pages/Message/index.tsx
index 04f9881..9ae9467 100644
--- a/react-ui/src/pages/Message/index.tsx
+++ b/react-ui/src/pages/Message/index.tsx
@@ -1,8 +1,10 @@
import React, { useState, useEffect } from 'react';
-import { Card, List, Avatar, Input, Button, Row, Col, message } from 'antd';
+import { Card, List, Avatar, Input, Button, Row, Col, message, Modal, Form } from 'antd';
+import { UserAddOutlined, SearchOutlined } from '@ant-design/icons';
import { SysUserMessage, ChatContact } from './data.d';
-import { getChatContactList, getChatHistory, sendMessage, getUserInfo } from './service';
+import { getChatContactList, getChatHistory, sendMessage, getUserInfo, addFriend } from './service';
import './index.less';
+import { useModel } from 'umi';
const MessagePage: React.FC = () => {
const [chatContacts, setChatContacts] = useState<ChatContact[]>([]);
@@ -11,6 +13,12 @@
const [chatMessages, setChatMessages] = useState<SysUserMessage[]>([]);
const [loading, setLoading] = useState(false);
const [sending, setSending] = useState(false);
+ const { initialState } = useModel('@@initialState');
+ const ccuserId = initialState?.currentUser?.userId || '';
+ // 添加好友相关状态
+ const [addFriendVisible, setAddFriendVisible] = useState(false);
+ const [addFriendLoading, setAddFriendLoading] = useState(false);
+ const [form] = Form.useForm();
// 获取聊天对象列表
const fetchChatContacts = async () => {
@@ -36,7 +44,7 @@
setLoading(true);
const response = await getChatHistory({
userId,
- currentUserId: 1, // 假设当前用户ID为1，实际应该从用户状态获取
+ currentUserId: Number(ccuserId), // 假设当前用户ID为1，实际应该从用户状态获取
pageSize: 100 // 获取最近100条消息
});
@@ -110,6 +118,26 @@
}
};
+ // 添加好友
+ const handleAddFriend = async (values: { username: string }) => {
+ try {
+ setAddFriendLoading(true);
+ await addFriend({ userId: Number(ccuserId), authorUsername: values.username });
+ message.success('好友添加成功');
+
+ // 重新获取聊天对象列表
+ await fetchChatContacts();
+
+ // 关闭弹窗并重置表单
+ setAddFriendVisible(false);
+ form.resetFields();
+ } catch (error) {
+ message.error('添加好友失败，请检查用户名是否正确');
+ } finally {
+ setAddFriendLoading(false);
+ }
+ };
+
// 选择聊天对象
const handleSelectUser = (userId: number) => {
setSelectedUserId(userId);
@@ -137,7 +165,6 @@
// 获取用户名
const getUserName = (userId: number) => {
const contact = chatContacts.find(c => c.userId === userId);
-
return contact?.nickName || `用户${userId}`;
};
@@ -159,7 +186,19 @@
{/* 左侧聊天对象列表 */}
<Col span={8}>
<Card
- title="聊天列表"
+ title={
+ <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+ <span>聊天列表</span>
+ <Button
+ type="primary"
+ icon={<UserAddOutlined />}
+ size="small"
+ onClick={() => setAddFriendVisible(true)}
+ >
+ 添加好友
+ </Button>
+ </div>
+ }
bordered={false}
style={{ height: '100%' }}
loading={loading && !selectedUserId}
@@ -180,11 +219,11 @@
className={selectedUserId === contact.userId ? 'selected' : ''}
>
<List.Item.Meta
- // avatar={
- // <Avatar size="large">
- // {contact.nickName.charAt(0)}
- // </Avatar>
- // }
+ avatar={
+ <Avatar size="large">
+ {contact.nickName.charAt(0).toUpperCase()}
+ </Avatar>
+ }
title={
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
<span style={{
@@ -355,6 +394,59 @@
</div>
</Col>
</Row>
+
+ {/* 添加好友弹窗 */}
+ <Modal
+ title="添加好友"
+ open={addFriendVisible}
+ onCancel={() => {
+ setAddFriendVisible(false);
+ form.resetFields();
+ }}
+ footer={null}
+ width={400}
+ >
+ <Form
+ form={form}
+ layout="vertical"
+ onFinish={handleAddFriend}
+ style={{ marginTop: '20px' }}
+ >
+ <Form.Item
+ label="用户名"
+ name="username"
+ rules={[
+ { required: true, message: '请输入用户名' },
+ { min: 2, message: '用户名至少2个字符' },
+ { max: 20, message: '用户名最多20个字符' }
+ ]}
+ >
+ <Input
+ placeholder="请输入要添加的用户名"
+ prefix={<SearchOutlined />}
+ size="large"
+ />
+ </Form.Item>
+ <Form.Item style={{ marginBottom: 0, textAlign: 'right' }}>
+ <Button
+ onClick={() => {
+ setAddFriendVisible(false);
+ form.resetFields();
+ }}
+ style={{ marginRight: '8px' }}
+ >
+ 取消
+ </Button>
+ <Button
+ type="primary"
+ htmlType="submit"
+ loading={addFriendLoading}
+ >
+ 添加
+ </Button>
+ </Form.Item>
+ </Form>
+ </Modal>
</div>
);
};