311 lines
10 KiB
TypeScript
311 lines
10 KiB
TypeScript
import React, { useState, useEffect } from "react";
|
|
import { Search, X } from "lucide-react";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Input } from "@/components/ui/input";
|
|
import { ScrollArea } from "@/components/ui/scroll-area";
|
|
import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog";
|
|
import { get } from "@/api/request";
|
|
|
|
// 群组接口类型
|
|
interface WechatGroup {
|
|
id: string;
|
|
chatroomId: string;
|
|
name: string;
|
|
avatar: string;
|
|
ownerWechatId: string;
|
|
ownerNickname: string;
|
|
ownerAvatar: string;
|
|
}
|
|
|
|
interface GroupsResponse {
|
|
code: number;
|
|
msg: string;
|
|
data: {
|
|
list: Array<{
|
|
id: number;
|
|
chatroomId: string;
|
|
name: string;
|
|
avatar?: string;
|
|
ownerWechatId?: string;
|
|
ownerNickname?: string;
|
|
ownerAvatar?: string;
|
|
}>;
|
|
total: number;
|
|
page: number;
|
|
limit: number;
|
|
};
|
|
}
|
|
|
|
const fetchGroupsList = async (params: {
|
|
page: number;
|
|
limit: number;
|
|
}): Promise<GroupsResponse> => {
|
|
return get<GroupsResponse>(
|
|
`/v1/chatroom?page=${params.page}&limit=${params.limit}`
|
|
);
|
|
};
|
|
|
|
interface GroupSelectionProps {
|
|
selectedGroups: string[];
|
|
onSelect: (groups: string[]) => void;
|
|
onSelectDetail?: (groups: WechatGroup[]) => void; // 新增
|
|
placeholder?: string;
|
|
className?: string;
|
|
}
|
|
|
|
export default function GroupSelection({
|
|
selectedGroups,
|
|
onSelect,
|
|
onSelectDetail,
|
|
placeholder = "选择群聊",
|
|
className = "",
|
|
}: GroupSelectionProps) {
|
|
const [dialogOpen, setDialogOpen] = useState(false);
|
|
const [groups, setGroups] = useState<WechatGroup[]>([]);
|
|
const [searchQuery, setSearchQuery] = useState("");
|
|
const [currentPage, setCurrentPage] = useState(1);
|
|
const [totalPages, setTotalPages] = useState(1);
|
|
const [totalGroups, setTotalGroups] = useState(0);
|
|
const [loading, setLoading] = useState(false);
|
|
|
|
// 打开弹窗并请求第一页群组
|
|
const openDialog = () => {
|
|
setCurrentPage(1);
|
|
setDialogOpen(true);
|
|
fetchGroups(1);
|
|
};
|
|
|
|
// 当页码变化时，拉取对应页数据（弹窗已打开时）
|
|
useEffect(() => {
|
|
if (dialogOpen && currentPage !== 1) {
|
|
fetchGroups(currentPage);
|
|
}
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [currentPage]);
|
|
|
|
// 获取群组列表API
|
|
const fetchGroups = async (page: number) => {
|
|
setLoading(true);
|
|
try {
|
|
const res = await fetchGroupsList({ page, limit: 20 });
|
|
if (res && res.code === 200 && res.data) {
|
|
setGroups(
|
|
res.data.list.map((group) => ({
|
|
id: group.id?.toString() || "",
|
|
chatroomId: group.chatroomId || "",
|
|
name: group.name || "",
|
|
avatar: group.avatar || "",
|
|
ownerWechatId: group.ownerWechatId || "",
|
|
ownerNickname: group.ownerNickname || "",
|
|
ownerAvatar: group.ownerAvatar || "",
|
|
}))
|
|
);
|
|
setTotalGroups(res.data.total || 0);
|
|
setTotalPages(Math.ceil((res.data.total || 0) / 20));
|
|
}
|
|
} catch (error) {
|
|
console.error("获取群组列表失败:", error);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
// 过滤群组
|
|
const filteredGroups = groups.filter(
|
|
(group) =>
|
|
group.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
|
group.chatroomId.toLowerCase().includes(searchQuery.toLowerCase())
|
|
);
|
|
|
|
// 处理群组选择
|
|
const handleGroupToggle = (groupId: string) => {
|
|
let newIds: string[];
|
|
if (selectedGroups.includes(groupId)) {
|
|
newIds = selectedGroups.filter((id) => id !== groupId);
|
|
} else {
|
|
newIds = [...selectedGroups, groupId];
|
|
}
|
|
onSelect(newIds);
|
|
if (onSelectDetail) {
|
|
const selectedObjs = groups.filter((g) => newIds.includes(g.id));
|
|
onSelectDetail(selectedObjs);
|
|
}
|
|
};
|
|
|
|
// 获取显示文本
|
|
const getDisplayText = () => {
|
|
if (selectedGroups.length === 0) return "";
|
|
return `已选择 ${selectedGroups.length} 个群聊`;
|
|
};
|
|
|
|
const handleConfirm = () => {
|
|
setDialogOpen(false);
|
|
};
|
|
|
|
return (
|
|
<>
|
|
{/* 输入框 */}
|
|
<div className={`relative ${className}`}>
|
|
<span className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400">
|
|
<svg
|
|
width="20"
|
|
height="20"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth="2"
|
|
d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
|
|
/>
|
|
</svg>
|
|
</span>
|
|
<Input
|
|
placeholder={placeholder}
|
|
className="pl-10 h-12 rounded-xl border-gray-200 text-base"
|
|
readOnly
|
|
onClick={openDialog}
|
|
value={getDisplayText()}
|
|
/>
|
|
</div>
|
|
|
|
{/* 群组选择弹窗 */}
|
|
<Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
|
|
<DialogContent className="max-w-xl max-h-[90vh] flex flex-col p-0 gap-0 overflow-hidden bg-white">
|
|
<div className="p-6">
|
|
<DialogTitle className="text-center text-xl font-medium mb-6">
|
|
选择群聊
|
|
</DialogTitle>
|
|
<div className="relative mb-4">
|
|
<Input
|
|
placeholder="搜索群聊"
|
|
value={searchQuery}
|
|
onChange={(e) => setSearchQuery(e.target.value)}
|
|
className="pl-10 py-2 rounded-full border-gray-200"
|
|
/>
|
|
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-400" />
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className="absolute right-2 top-1/2 -translate-y-1/2 h-6 w-6 rounded-full"
|
|
onClick={() => setSearchQuery("")}
|
|
>
|
|
<X className="h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
<ScrollArea className="flex-1 overflow-y-auto">
|
|
{loading ? (
|
|
<div className="flex items-center justify-center h-full">
|
|
<div className="text-gray-500">加载中...</div>
|
|
</div>
|
|
) : filteredGroups.length > 0 ? (
|
|
<div className="divide-y">
|
|
{filteredGroups.map((group) => (
|
|
<label
|
|
key={group.id}
|
|
className="flex items-center px-6 py-4 hover:bg-gray-50 cursor-pointer"
|
|
onClick={() => handleGroupToggle(group.id)}
|
|
>
|
|
<div className="mr-3 flex items-center justify-center">
|
|
<div
|
|
className={`w-5 h-5 rounded-full border ${
|
|
selectedGroups.includes(group.id)
|
|
? "border-blue-600"
|
|
: "border-gray-300"
|
|
} flex items-center justify-center`}
|
|
>
|
|
{selectedGroups.includes(group.id) && (
|
|
<div className="w-3 h-3 rounded-full bg-blue-600"></div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center space-x-3 flex-1">
|
|
<div className="w-10 h-10 rounded-full bg-gradient-to-r from-blue-400 to-purple-500 flex items-center justify-center text-white text-sm font-medium overflow-hidden">
|
|
{group.avatar ? (
|
|
<img
|
|
src={group.avatar}
|
|
alt={group.name}
|
|
className="w-full h-full object-cover"
|
|
/>
|
|
) : (
|
|
group.name.charAt(0)
|
|
)}
|
|
</div>
|
|
<div className="flex-1">
|
|
<div className="font-medium">{group.name}</div>
|
|
<div className="text-sm text-gray-500">
|
|
群ID: {group.chatroomId}
|
|
</div>
|
|
{group.ownerNickname && (
|
|
<div className="text-sm text-gray-400">
|
|
群主: {group.ownerNickname}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</label>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<div className="flex items-center justify-center h-full">
|
|
<div className="text-gray-500">没有找到群聊</div>
|
|
</div>
|
|
)}
|
|
</ScrollArea>
|
|
|
|
<div className="border-t p-4 flex items-center justify-between bg-white">
|
|
<div className="text-sm text-gray-500">
|
|
总计 {totalGroups} 个群聊
|
|
</div>
|
|
<div className="flex items-center space-x-2">
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() => setCurrentPage(Math.max(1, currentPage - 1))}
|
|
disabled={currentPage === 1 || loading}
|
|
className="px-2 py-0 h-8 min-w-0"
|
|
>
|
|
<
|
|
</Button>
|
|
<span className="text-sm">
|
|
{currentPage} / {totalPages}
|
|
</span>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() =>
|
|
setCurrentPage(Math.min(totalPages, currentPage + 1))
|
|
}
|
|
disabled={currentPage === totalPages || loading}
|
|
className="px-2 py-0 h-8 min-w-0"
|
|
>
|
|
>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="border-t p-4 flex items-center justify-between bg-white">
|
|
<Button
|
|
variant="outline"
|
|
onClick={() => setDialogOpen(false)}
|
|
className="px-6 rounded-full border-gray-300"
|
|
>
|
|
取消
|
|
</Button>
|
|
<Button
|
|
onClick={handleConfirm}
|
|
className="px-6 bg-blue-600 hover:bg-blue-700 rounded-full"
|
|
>
|
|
确定 ({selectedGroups.length})
|
|
</Button>
|
|
</div>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</>
|
|
);
|
|
}
|