前端简单界面
Change-Id: I7df9774daf4df8d92b13e659effe426ab0b6180b
diff --git a/pt--frontend/src/components/FriendManager.jsx b/pt--frontend/src/components/FriendManager.jsx
new file mode 100644
index 0000000..d28f93d
--- /dev/null
+++ b/pt--frontend/src/components/FriendManager.jsx
@@ -0,0 +1,156 @@
+import React, { useState, useEffect } from 'react';
+import { addFriend, deleteFriend, getFriendsByUserId } from '../api/friends';
+
+const FriendManager = ({ currentUser, onSelectRelation }) => {
+ const [friendId, setFriendId] = useState('');
+ const [friends, setFriends] = useState([]);
+ const [isLoading, setIsLoading] = useState(false);
+ const [isRefreshing, setIsRefreshing] = useState(false);
+
+ useEffect(() => {
+ if (currentUser?.id) loadFriends(currentUser.id);
+ }, [currentUser]);
+
+ const loadFriends = async (userid) => {
+ setIsRefreshing(true);
+ try {
+ const res = await getFriendsByUserId(userid);
+ setFriends(res.data);
+ } catch (err) {
+ console.error('加载好友失败', err);
+ alert('加载好友失败，请稍后重试');
+ }
+ setIsRefreshing(false);
+ };
+
+ const handleFriendIdChange = (e) => {
+ const value = e.target.value;
+ if (/^\d*$/.test(value)) setFriendId(value);
+ };
+
+ const handleAddFriend = async () => {
+ if (!friendId) return alert('请输入好友ID');
+
+ const newFriendId = parseInt(friendId, 10);
+ if (newFriendId === currentUser.id) return alert('不能添加自己为好友');
+
+ if (friends.some(f => f.friend1 === newFriendId || f.friend2 === newFriendId)) {
+ return alert('该用户已是您的好友');
+ }
+
+ setIsLoading(true);
+ try {
+ const res = await addFriend({ friend1: currentUser.id, friend2: newFriendId });
+ if (res.data) {
+ alert('添加成功');
+ setFriendId('');
+ loadFriends(currentUser.id);
+ } else {
+ alert('添加失败');
+ }
+ } catch (err) {
+ alert('添加好友失败');
+ console.error(err);
+ }
+ setIsLoading(false);
+ };
+
+ /* ---------- 这里开始：删除好友逻辑改为 friend1 + friend2 ---------- */
+ const handleDelete = async (friend1, friend2) => {
+ if (!window.confirm('确认删除该好友吗？')) return;
+ setIsLoading(true);
+ try {
+ const res = await deleteFriend(friend1, friend2);
+ if (res.data) {
+ alert('删除成功');
+ loadFriends(currentUser.id);
+ } else {
+ alert('删除失败');
+ }
+ } catch (err) {
+ alert('删除好友失败');
+ console.error(err);
+ }
+ setIsLoading(false);
+ };
+ /* ------------------------------------------------------------------- */
+
+ return (
+ <div className="max-w-xl mx-auto p-4">
+ <h2 className="text-2xl font-bold mb-4">好友管理</h2>
+
+ {/* 添加好友区域 */}
+ <div className="mb-6 space-y-2">
+ <input
+ type="text"
+ placeholder="输入好友的用户ID"
+ value={friendId}
+ onChange={handleFriendIdChange}
+ className="border p-2 rounded w-full"
+ />
+ <button
+ onClick={handleAddFriend}
+ disabled={isLoading}
+ className={`bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 ${isLoading ? 'opacity-50 cursor-not-allowed' : ''}`}
+ >
+ {isLoading ? '添加中…' : '添加好友'}
+ </button>
+ </div>
+
+ {/* 好友列表 */}
+ <div className="flex justify-between items-center mb-3">
+ <h3 className="text-xl font-semibold">我的好友列表</h3>
+ <button
+ onClick={() => loadFriends(currentUser.id)}
+ disabled={isRefreshing}
+ className="text-sm text-blue-500 hover:underline disabled:text-gray-400"
+ >
+ {isRefreshing ? '刷新中…' : '刷新'}
+ </button>
+ </div>
+
+ {friends.length === 0 ? (
+ <p className="text-gray-500">暂无好友</p>
+ ) : (
+ <ul className="space-y-3">
+ {friends.map((f) => {
+ const friendUserId =
+ f.friend1 === currentUser.id ? f.friend2 : f.friend1;
+ return (
+ <li
+ key={f.relationid}
+ className="border p-3 rounded flex justify-between items-center hover:bg-gray-100 cursor-pointer"
+ onClick={() =>
+ onSelectRelation({
+ relationid: f.relationid,
+ friendId: friendUserId,
+ })
+ }
+ >
+ <div>
+ <p>好友用户ID：{friendUserId}</p>
+ <p className="text-sm text-gray-500">
+ 添加时间：{new Date(f.requestTime).toLocaleString()}
+ </p>
+ </div>
+ <button
+ onClick={(e) => {
+ e.stopPropagation();
+ /* ------- 传入正确的 friend1 & friend2 -------- */
+ handleDelete(f.friend1, f.friend2);
+ }}
+ className="text-red-500 hover:underline"
+ disabled={isLoading}
+ >
+ 删除
+ </button>
+ </li>
+ );
+ })}
+ </ul>
+ )}
+ </div>
+ );
+};
+
+export default FriendManager;