群列表+群成员接口外加对接

This commit is contained in:
wong
2025-04-22 19:17:14 +08:00
parent 793ee5cb4f
commit 46ba136255
18 changed files with 1137 additions and 123 deletions

View File

@@ -1,7 +1,7 @@
"use client"
import { useState, useEffect, use } from "react"
import { ChevronLeft, X } from "lucide-react"
import { ChevronLeft, X, Users } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
@@ -13,31 +13,13 @@ import { useRouter } from "next/navigation"
import { DateRangePicker } from "@/components/ui/date-range-picker"
import { WechatFriendSelector } from "@/components/WechatFriendSelector"
import { WechatGroupSelector } from "@/components/WechatGroupSelector"
import { WechatGroupMemberSelector } from "@/components/WechatGroupMemberSelector"
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"
import { api } from "@/lib/api"
import { showToast } from "@/lib/toast"
import { format, parse } from "date-fns"
interface WechatFriend {
id: string
nickname: string
wechatId: string
avatar: string
gender?: "male" | "female"
customer?: string
alias?: string
ownerNickname?: string
ownerAlias?: string
}
interface WechatGroup {
id: string
name: string
memberCount: number
avatar: string
owner: string
customer: string
}
import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar"
import { WechatFriend, WechatGroup, WechatGroupMember } from "@/types/wechat"
interface ContentLibraryDetail {
id: string
@@ -46,6 +28,9 @@ interface ContentLibraryDetail {
status: number
sourceFriends: any[]
sourceGroups: any[]
selectedFriends?: WechatFriend[]
selectedGroups?: WechatGroup[]
selectedGroupMembers?: WechatGroupMember[]
keywordInclude: string[]
keywordExclude: string[]
isEnabled: number
@@ -75,6 +60,7 @@ export default function EditContentLibraryPage({ params }: { params: Promise<{ i
endDate: "",
selectedFriends: [] as WechatFriend[],
selectedGroups: [] as WechatGroup[],
selectedGroupMembers: [] as WechatGroupMember[],
useAI: false,
aiPrompt: "",
enabled: true,
@@ -82,6 +68,8 @@ export default function EditContentLibraryPage({ params }: { params: Promise<{ i
const [isWechatFriendSelectorOpen, setIsWechatFriendSelectorOpen] = useState(false)
const [isWechatGroupSelectorOpen, setIsWechatGroupSelectorOpen] = useState(false)
const [isWechatGroupMemberSelectorOpen, setIsWechatGroupMemberSelectorOpen] = useState(false)
const [currentGroupId, setCurrentGroupId] = useState<string>("")
const [loading, setLoading] = useState(false)
const [isLoadingData, setIsLoadingData] = useState(true)
@@ -99,7 +87,8 @@ export default function EditContentLibraryPage({ params }: { params: Promise<{ i
// 直接使用API返回的好友和群组数据
const friends = data.selectedFriends || [];
const groups = data.sourceGroups || [];
const groups = data.selectedGroups || [];
const groupMembers = data.selectedGroupMembers || [];
setFormData({
name: data.name,
@@ -110,6 +99,7 @@ export default function EditContentLibraryPage({ params }: { params: Promise<{ i
endDate: data.timeEnd || "",
selectedFriends: friends,
selectedGroups: groups,
selectedGroupMembers: groupMembers,
useAI: !!data.aiPrompt,
aiPrompt: data.aiPrompt || "",
enabled: data.status === 1,
@@ -145,6 +135,11 @@ export default function EditContentLibraryPage({ params }: { params: Promise<{ i
}))
}
const handleSelectGroupMembers = (groupId: string) => {
setCurrentGroupId(groupId)
setIsWechatGroupMemberSelectorOpen(true)
}
const handleSubmit = async () => {
if (!formData.name) {
showToast("请输入内容库名称", "error")
@@ -171,6 +166,7 @@ export default function EditContentLibraryPage({ params }: { params: Promise<{ i
sourceType: formData.sourceType === "friends" ? 1 : 2,
friends: formData.selectedFriends.map(f => f.id),
groups: formData.selectedGroups.map(g => g.id),
groupMembers: formData.selectedGroupMembers.map(m => m.id),
keywordInclude: formData.keywordsInclude.split(",").map(k => k.trim()).filter(Boolean),
keywordExclude: formData.keywordsExclude.split(",").map(k => k.trim()).filter(Boolean),
aiPrompt: formData.useAI ? formData.aiPrompt : "",
@@ -289,13 +285,60 @@ export default function EditContentLibraryPage({ params }: { params: Promise<{ i
/>
<span>{group.name}</span>
</div>
<Button variant="ghost" size="sm" onClick={() => removeGroup(group.id)}>
<X className="h-4 w-4" />
</Button>
<div className="flex items-center">
<Button
variant="ghost"
size="sm"
onClick={() => handleSelectGroupMembers(group.id)}
className="mr-1"
>
<Users className="h-4 w-4" />
</Button>
<Button variant="ghost" size="sm" onClick={() => removeGroup(group.id)}>
<X className="h-4 w-4" />
</Button>
</div>
</div>
))}
</div>
)}
{formData.selectedGroupMembers.length > 0 && (
<div className="mt-4">
<div className="flex items-center justify-between mb-2">
<Label className="text-sm font-medium"> ({formData.selectedGroupMembers.length})</Label>
<Button
variant="ghost"
size="sm"
onClick={() => setFormData({...formData, selectedGroupMembers: []})}
>
</Button>
</div>
<div className="flex flex-wrap gap-2 p-2 bg-gray-50 rounded-md max-h-[150px] overflow-y-auto">
{formData.selectedGroupMembers.map((member) => (
<div key={member.id} className="flex items-center bg-white px-2 py-1 rounded border">
<Avatar className="h-6 w-6 mr-2">
<AvatarImage src={member.avatar} />
<AvatarFallback>{member.nickname?.[0] || '?'}</AvatarFallback>
</Avatar>
<span className="text-sm">{member.nickname}</span>
<Button
variant="ghost"
size="sm"
className="h-6 w-6 p-0 ml-1"
onClick={() => setFormData({
...formData,
selectedGroupMembers: formData.selectedGroupMembers.filter(m => m.id !== member.id)
})}
>
<X className="h-3 w-3" />
</Button>
</div>
))}
</div>
</div>
)}
</TabsContent>
</Tabs>
</div>
@@ -425,6 +468,14 @@ export default function EditContentLibraryPage({ params }: { params: Promise<{ i
selectedGroups={formData.selectedGroups}
onSelect={(groups) => setFormData({ ...formData, selectedGroups: groups })}
/>
<WechatGroupMemberSelector
open={isWechatGroupMemberSelectorOpen}
onOpenChange={setIsWechatGroupMemberSelectorOpen}
groupId={currentGroupId}
selectedMembers={formData.selectedGroupMembers}
onSelect={(members) => setFormData({ ...formData, selectedGroupMembers: members })}
/>
</div>
)
}

View File

@@ -1,7 +1,7 @@
"use client"
import { useState } from "react"
import { ChevronLeft, X } from "lucide-react"
import { ChevronLeft, X, Users } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
@@ -13,29 +13,14 @@ import { useRouter } from "next/navigation"
import { DateRangePicker } from "@/components/ui/date-range-picker"
import { WechatFriendSelector } from "@/components/WechatFriendSelector"
import { WechatGroupSelector } from "@/components/WechatGroupSelector"
import { WechatGroupMemberSelector } from "@/components/WechatGroupMemberSelector"
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"
import { api } from "@/lib/api"
import { showToast } from "@/lib/toast"
import { format } from "date-fns"
import { zhCN } from "date-fns/locale"
interface WechatFriend {
id: string
nickname: string
wechatId: string
avatar: string
gender: "male" | "female"
customer: string
}
interface WechatGroup {
id: string
name: string
memberCount: number
avatar: string
owner: string
customer: string
}
import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar"
import { WechatFriend, WechatGroup, WechatGroupMember } from "@/types/wechat"
interface ApiResponse<T = any> {
code: number
@@ -54,6 +39,7 @@ export default function NewContentLibraryPage() {
endDate: "",
selectedFriends: [] as WechatFriend[],
selectedGroups: [] as WechatGroup[],
selectedGroupMembers: [] as WechatGroupMember[],
useAI: false,
aiPrompt: "",
enabled: true,
@@ -61,6 +47,8 @@ export default function NewContentLibraryPage() {
const [isWechatFriendSelectorOpen, setIsWechatFriendSelectorOpen] = useState(false)
const [isWechatGroupSelectorOpen, setIsWechatGroupSelectorOpen] = useState(false)
const [isWechatGroupMemberSelectorOpen, setIsWechatGroupMemberSelectorOpen] = useState(false)
const [currentGroupId, setCurrentGroupId] = useState<string>("")
const [loading, setLoading] = useState(false)
const removeFriend = (friendId: string) => {
@@ -77,6 +65,11 @@ export default function NewContentLibraryPage() {
}))
}
const handleSelectGroupMembers = (groupId: string) => {
setCurrentGroupId(groupId)
setIsWechatGroupMemberSelectorOpen(true)
}
const handleSubmit = async () => {
if (!formData.name) {
showToast("请输入内容库名称", "error")
@@ -100,6 +93,7 @@ export default function NewContentLibraryPage() {
sourceType: formData.sourceType === "friends" ? 1 : 2,
friends: formData.selectedFriends.map(f => f.id),
groups: formData.selectedGroups.map(g => g.id),
groupMembers: formData.selectedGroupMembers.map(m => m.id),
keywordInclude: formData.keywordsInclude.split(",").map(k => k.trim()).filter(Boolean),
keywordExclude: formData.keywordsExclude.split(",").map(k => k.trim()).filter(Boolean),
aiPrompt: formData.useAI ? formData.aiPrompt : "",
@@ -204,13 +198,60 @@ export default function NewContentLibraryPage() {
/>
<span>{group.name}</span>
</div>
<Button variant="ghost" size="sm" onClick={() => removeGroup(group.id)}>
<X className="h-4 w-4" />
</Button>
<div className="flex items-center">
<Button
variant="ghost"
size="sm"
onClick={() => handleSelectGroupMembers(group.id)}
className="mr-1"
>
<Users className="h-4 w-4" />
</Button>
<Button variant="ghost" size="sm" onClick={() => removeGroup(group.id)}>
<X className="h-4 w-4" />
</Button>
</div>
</div>
))}
</div>
)}
{formData.selectedGroupMembers.length > 0 && (
<div className="mt-4">
<div className="flex items-center justify-between mb-2">
<Label className="text-sm font-medium"> ({formData.selectedGroupMembers.length})</Label>
<Button
variant="ghost"
size="sm"
onClick={() => setFormData({...formData, selectedGroupMembers: []})}
>
</Button>
</div>
<div className="flex flex-wrap gap-2 p-2 bg-gray-50 rounded-md max-h-[150px] overflow-y-auto">
{formData.selectedGroupMembers.map((member) => (
<div key={member.id} className="flex items-center bg-white px-2 py-1 rounded border">
<Avatar className="h-6 w-6 mr-2">
<AvatarImage src={member.avatar} />
<AvatarFallback>{member.nickname?.[0] || '?'}</AvatarFallback>
</Avatar>
<span className="text-sm">{member.nickname}</span>
<Button
variant="ghost"
size="sm"
className="h-6 w-6 p-0 ml-1"
onClick={() => setFormData({
...formData,
selectedGroupMembers: formData.selectedGroupMembers.filter(m => m.id !== member.id)
})}
>
<X className="h-3 w-3" />
</Button>
</div>
))}
</div>
</div>
)}
</TabsContent>
</Tabs>
</div>
@@ -340,6 +381,14 @@ export default function NewContentLibraryPage() {
selectedGroups={formData.selectedGroups}
onSelect={(groups) => setFormData({ ...formData, selectedGroups: groups })}
/>
<WechatGroupMemberSelector
open={isWechatGroupMemberSelectorOpen}
onOpenChange={setIsWechatGroupMemberSelectorOpen}
groupId={currentGroupId}
selectedMembers={formData.selectedGroupMembers}
onSelect={(members) => setFormData({ ...formData, selectedGroupMembers: members })}
/>
</div>
)
}

View File

@@ -1,7 +1,7 @@
"use client"
import { useState, useEffect, useCallback } from "react"
import { ChevronLeft, Filter, Search, RefreshCw, Plus, Edit, Trash2, Eye, MoreVertical } from "lucide-react"
import { ChevronLeft, Filter, Search, RefreshCw, Plus, Edit, Trash2, Eye, MoreVertical, Users } from "lucide-react"
import { Card } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
@@ -12,6 +12,7 @@ import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigge
import Image from "next/image"
import { api } from "@/lib/api"
import { showToast } from "@/lib/toast"
import { WechatGroupMemberSelector } from "@/components/WechatGroupMemberSelector"
interface ApiResponse<T = any> {
code: number
@@ -24,6 +25,16 @@ interface LibraryListResponse {
total: number
}
interface WechatGroupMember {
id: string
nickname: string
wechatId: string
avatar: string
gender?: "male" | "female"
role?: "owner" | "admin" | "member"
joinTime?: string
}
interface ContentLibrary {
id: string
name: string
@@ -41,6 +52,8 @@ interface ContentLibrary {
// 新增字段
sourceFriends: string[]
sourceGroups: string[]
friendsData?: any[]
groupsData?: any[]
keywordInclude: string[]
keywordExclude: string[]
isEnabled: number
@@ -52,6 +65,7 @@ interface ContentLibrary {
createTime: string
updateTime: string
sourceType: number
selectedGroupMembers?: WechatGroupMember[]
}
export default function ContentLibraryPage() {
@@ -60,6 +74,9 @@ export default function ContentLibraryPage() {
const [searchQuery, setSearchQuery] = useState("")
const [activeTab, setActiveTab] = useState("all")
const [loading, setLoading] = useState(false)
const [isGroupMemberSelectorOpen, setIsGroupMemberSelectorOpen] = useState(false)
const [currentGroupId, setCurrentGroupId] = useState<string>("")
const [selectedGroupMembers, setSelectedGroupMembers] = useState<WechatGroupMember[]>([])
// 获取内容库列表
const fetchLibraries = useCallback(async () => {
@@ -76,13 +93,25 @@ export default function ContentLibraryPage() {
if (response.code === 200 && response.data) {
// 转换数据格式以匹配原有UI
const transformedLibraries = response.data.list.map((item: any) => {
// 提取好友数据,确保有头像
const friendsData = Array.isArray(item.selectedFriends) ? item.selectedFriends : [];
const groupsData = Array.isArray(item.selectedGroups) ? item.selectedGroups : [];
const transformedItem: ContentLibrary = {
id: item.id,
name: item.name,
source: item.sourceType === 1 ? "friends" : "groups",
targetAudience: [
...(item.sourceFriends || []).map((id: string) => ({ id, nickname: `好友${id}`, avatar: "/placeholder.svg" })),
...(item.sourceGroups || []).map((id: string) => ({ id, nickname: `群组${id}`, avatar: "/placeholder.svg" }))
...friendsData.map((friend: any) => ({
id: friend.id,
nickname: friend.nickname || `好友${friend.id}`,
avatar: friend.avatar || "/placeholder.svg"
})),
...groupsData.map((group: any) => ({
id: group.id,
nickname: group.name || `群组${group.id}`,
avatar: group.avatar || "/placeholder.svg"
}))
],
creator: item.creatorName || "系统",
creatorName: item.creatorName,
@@ -92,6 +121,8 @@ export default function ContentLibraryPage() {
// 新增字段
sourceFriends: item.sourceFriends || [],
sourceGroups: item.sourceGroups || [],
friendsData: friendsData,
groupsData: groupsData,
keywordInclude: item.keywordInclude || [],
keywordExclude: item.keywordExclude || [],
isEnabled: item.isEnabled,
@@ -102,7 +133,8 @@ export default function ContentLibraryPage() {
status: item.status,
createTime: item.createTime,
updateTime: item.updateTime,
sourceType: item.sourceType
sourceType: item.sourceType,
selectedGroupMembers: item.selectedGroupMembers || []
}
return transformedItem
})
@@ -158,6 +190,17 @@ export default function ContentLibraryPage() {
fetchLibraries()
}
const handleSelectGroupMembers = (groupId: string) => {
setCurrentGroupId(groupId)
setSelectedGroupMembers([])
setIsGroupMemberSelectorOpen(true)
}
const handleSaveSelectedMembers = (members: WechatGroupMember[]) => {
setSelectedGroupMembers(members)
showToast(`已选择 ${members.length} 名群成员`, "success")
}
const filteredLibraries = libraries.filter(
(library) =>
library.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
@@ -245,7 +288,43 @@ export default function ContentLibraryPage() {
<div className="text-sm text-gray-500 space-y-1">
<div className="flex items-center space-x-1">
<span></span>
<div className="w-4 h-4 bg-gray-200 rounded-full"></div>
{library.sourceType === 1 && library.sourceFriends?.length > 0 ? (
<div className="flex -space-x-1 overflow-hidden">
{(library.friendsData || []).slice(0, 3).map((friend) => (
<img
key={friend.id}
src={friend.avatar || "/placeholder.svg"}
alt={friend.nickname || `好友${friend.id}`}
className="inline-block h-6 w-6 rounded-full ring-2 ring-white"
/>
))}
{library.sourceFriends.length > 3 && (
<span className="flex items-center justify-center h-6 w-6 rounded-full bg-gray-200 text-xs font-medium text-gray-800">
+{library.sourceFriends.length - 3}
</span>
)}
</div>
) : library.sourceType === 2 && library.sourceGroups?.length > 0 ? (
<div className="flex items-center space-x-2">
<div className="flex -space-x-1 overflow-hidden">
{(library.groupsData || []).slice(0, 3).map((group) => (
<img
key={group.id}
src={group.avatar || "/placeholder.svg"}
alt={group.name || `群组${group.id}`}
className="inline-block h-6 w-6 rounded-full ring-2 ring-white"
/>
))}
{library.sourceGroups.length > 3 && (
<span className="flex items-center justify-center h-6 w-6 rounded-full bg-gray-200 text-xs font-medium text-gray-800">
+{library.sourceGroups.length - 3}
</span>
)}
</div>
</div>
) : (
<div className="w-6 h-6 bg-gray-200 rounded-full"></div>
)}
</div>
<div>{library.creator}</div>
<div>{library.itemCount}</div>
@@ -287,6 +366,14 @@ export default function ContentLibraryPage() {
</div>
</Card>
</div>
<WechatGroupMemberSelector
open={isGroupMemberSelectorOpen}
onOpenChange={setIsGroupMemberSelectorOpen}
groupId={currentGroupId}
selectedMembers={selectedGroupMembers}
onSelect={handleSaveSelectedMembers}
/>
</div>
)
}