381 lines
15 KiB
TypeScript
381 lines
15 KiB
TypeScript
"use client"
|
||
|
||
import { useState, useEffect, useCallback } from "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"
|
||
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"
|
||
import { Badge } from "@/components/ui/badge"
|
||
import { useRouter } from "next/navigation"
|
||
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
|
||
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
|
||
msg: string
|
||
data: T
|
||
}
|
||
|
||
interface LibraryListResponse {
|
||
list: ContentLibrary[]
|
||
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
|
||
source: "friends" | "groups"
|
||
targetAudience: {
|
||
id: string
|
||
nickname: string
|
||
avatar: string
|
||
}[]
|
||
creator: string
|
||
creatorName?: string
|
||
itemCount: number
|
||
lastUpdated: string
|
||
enabled: boolean
|
||
// 新增字段
|
||
sourceFriends: string[]
|
||
sourceGroups: string[]
|
||
friendsData?: any[]
|
||
groupsData?: any[]
|
||
keywordInclude: string[]
|
||
keywordExclude: string[]
|
||
isEnabled: number
|
||
aiPrompt: string
|
||
timeEnabled: number
|
||
timeStart: string
|
||
timeEnd: string
|
||
status: number
|
||
createTime: string
|
||
updateTime: string
|
||
sourceType: number
|
||
selectedGroupMembers?: WechatGroupMember[]
|
||
}
|
||
|
||
export default function ContentLibraryPage() {
|
||
const router = useRouter()
|
||
const [libraries, setLibraries] = useState<ContentLibrary[]>([])
|
||
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 () => {
|
||
setLoading(true)
|
||
try {
|
||
const queryParams = new URLSearchParams({
|
||
page: '1',
|
||
limit: '100',
|
||
...(searchQuery ? { keyword: searchQuery } : {}),
|
||
...(activeTab !== 'all' ? { sourceType: activeTab === 'friends' ? '1' : '2' } : {})
|
||
})
|
||
const response = await api.get<ApiResponse<LibraryListResponse>>(`/v1/content/library/list?${queryParams.toString()}`)
|
||
|
||
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: [
|
||
...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,
|
||
itemCount: item.itemCount,
|
||
lastUpdated: item.updateTime,
|
||
enabled: item.isEnabled === 1,
|
||
// 新增字段
|
||
sourceFriends: item.sourceFriends || [],
|
||
sourceGroups: item.sourceGroups || [],
|
||
friendsData: friendsData,
|
||
groupsData: groupsData,
|
||
keywordInclude: item.keywordInclude || [],
|
||
keywordExclude: item.keywordExclude || [],
|
||
isEnabled: item.isEnabled,
|
||
aiPrompt: item.aiPrompt || '',
|
||
timeEnabled: item.timeEnabled,
|
||
timeStart: item.timeStart || '',
|
||
timeEnd: item.timeEnd || '',
|
||
status: item.status,
|
||
createTime: item.createTime,
|
||
updateTime: item.updateTime,
|
||
sourceType: item.sourceType,
|
||
selectedGroupMembers: item.selectedGroupMembers || []
|
||
}
|
||
return transformedItem
|
||
})
|
||
setLibraries(transformedLibraries)
|
||
} else {
|
||
showToast(response.msg || "获取内容库列表失败", "error")
|
||
}
|
||
} catch (error: any) {
|
||
console.error("获取内容库列表失败:", error)
|
||
showToast(error?.message || "请检查网络连接", "error")
|
||
} finally {
|
||
setLoading(false)
|
||
}
|
||
}, [searchQuery, activeTab])
|
||
|
||
// 首次加载和搜索条件变化时获取列表
|
||
useEffect(() => {
|
||
fetchLibraries()
|
||
}, [searchQuery, activeTab, fetchLibraries])
|
||
|
||
const handleCreateNew = () => {
|
||
router.push('/content/new')
|
||
}
|
||
|
||
const handleEdit = (id: string) => {
|
||
router.push(`/content/${id}/edit`)
|
||
}
|
||
|
||
const handleDelete = async (id: string) => {
|
||
try {
|
||
const response = await api.delete<ApiResponse>(`/v1/content/library/delete?id=${id}`)
|
||
if (response.code === 200) {
|
||
showToast("删除成功", "success")
|
||
fetchLibraries()
|
||
} else {
|
||
showToast(response.msg || "删除失败", "error")
|
||
}
|
||
} catch (error: any) {
|
||
console.error("删除内容库失败:", error)
|
||
showToast(error?.message || "请检查网络连接", "error")
|
||
}
|
||
}
|
||
|
||
const handleViewMaterials = (id: string) => {
|
||
router.push(`/content/${id}/materials`)
|
||
}
|
||
|
||
const handleSearch = () => {
|
||
fetchLibraries()
|
||
}
|
||
|
||
const handleRefresh = () => {
|
||
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()) ||
|
||
library.targetAudience.some((target) => target.nickname.toLowerCase().includes(searchQuery.toLowerCase()))
|
||
)
|
||
|
||
return (
|
||
<div className="flex-1 bg-gray-50 min-h-screen">
|
||
<header className="sticky top-0 z-10 bg-white border-b">
|
||
<div className="flex items-center justify-between p-4">
|
||
<div className="flex items-center space-x-3">
|
||
<Button variant="ghost" size="icon" onClick={() => router.back()}>
|
||
<ChevronLeft className="h-5 w-5" />
|
||
</Button>
|
||
<h1 className="text-lg font-medium">内容库</h1>
|
||
</div>
|
||
<Button onClick={() => router.push('/content/new')}>
|
||
<Plus className="h-4 w-4 mr-2" />
|
||
新建
|
||
</Button>
|
||
</div>
|
||
</header>
|
||
|
||
<div className="p-4 space-y-4">
|
||
<Card className="p-4">
|
||
<div className="space-y-4">
|
||
<div className="flex items-center space-x-2">
|
||
<div className="relative flex-1">
|
||
<Search className="absolute left-3 top-2.5 h-4 w-4 text-gray-400" />
|
||
<Input
|
||
placeholder="搜索内容库..."
|
||
value={searchQuery}
|
||
onChange={(e) => setSearchQuery(e.target.value)}
|
||
onKeyDown={(e) => e.key === 'Enter' && handleSearch()}
|
||
className="pl-9"
|
||
/>
|
||
</div>
|
||
<Button variant="outline" size="icon" onClick={handleSearch}>
|
||
<Filter className="h-4 w-4" />
|
||
</Button>
|
||
<Button
|
||
variant="outline"
|
||
size="icon"
|
||
onClick={handleRefresh}
|
||
disabled={loading}
|
||
>
|
||
<RefreshCw className={`h-4 w-4 ${loading ? 'animate-spin' : ''}`} />
|
||
</Button>
|
||
</div>
|
||
|
||
<Tabs defaultValue="all" value={activeTab} onValueChange={setActiveTab}>
|
||
<TabsList className="grid w-full grid-cols-3">
|
||
<TabsTrigger value="all">全部</TabsTrigger>
|
||
<TabsTrigger value="friends">微信好友</TabsTrigger>
|
||
<TabsTrigger value="groups">聊天群</TabsTrigger>
|
||
</TabsList>
|
||
</Tabs>
|
||
|
||
<div className="space-y-3">
|
||
{loading ? (
|
||
<div className="flex justify-center items-center py-12">
|
||
<RefreshCw className="h-8 w-8 text-blue-500 animate-spin" />
|
||
</div>
|
||
) : filteredLibraries.length === 0 ? (
|
||
<div className="flex justify-center items-center py-12">
|
||
<div className="text-center">
|
||
<p className="text-gray-500 mb-4">暂无数据</p>
|
||
<Button onClick={() => router.push('/content/new')} size="sm">
|
||
<Plus className="h-4 w-4 mr-2" />
|
||
新建内容库
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
) : (
|
||
filteredLibraries.map((library) => (
|
||
<Card key={library.id} className="p-4 hover:bg-gray-50">
|
||
<div className="flex items-start justify-between">
|
||
<div className="space-y-2">
|
||
<div className="flex items-center space-x-2">
|
||
<h3 className="font-medium text-base">{library.name}</h3>
|
||
<Badge variant={library.isEnabled === 1 ? "default" : "secondary"} className="text-xs">
|
||
已启用
|
||
</Badge>
|
||
</div>
|
||
<div className="text-sm text-gray-500 space-y-1">
|
||
<div className="flex items-center space-x-1">
|
||
<span>来源：</span>
|
||
{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>
|
||
<div>更新时间：{new Date(library.updateTime).toLocaleString('zh-CN', {
|
||
year: 'numeric',
|
||
month: '2-digit',
|
||
day: '2-digit',
|
||
hour: '2-digit',
|
||
minute: '2-digit'
|
||
})}</div>
|
||
</div>
|
||
</div>
|
||
<DropdownMenu>
|
||
<DropdownMenuTrigger asChild>
|
||
<Button variant="ghost" size="icon" className="h-8 w-8">
|
||
<MoreVertical className="h-4 w-4" />
|
||
</Button>
|
||
</DropdownMenuTrigger>
|
||
<DropdownMenuContent align="end">
|
||
<DropdownMenuItem onClick={() => handleEdit(library.id)}>
|
||
<Edit className="h-4 w-4 mr-2" />
|
||
编辑
|
||
</DropdownMenuItem>
|
||
<DropdownMenuItem onClick={() => handleDelete(library.id)}>
|
||
<Trash2 className="h-4 w-4 mr-2" />
|
||
删除
|
||
</DropdownMenuItem>
|
||
<DropdownMenuItem onClick={() => handleViewMaterials(library.id)}>
|
||
<Eye className="h-4 w-4 mr-2" />
|
||
查看素材
|
||
</DropdownMenuItem>
|
||
</DropdownMenuContent>
|
||
</DropdownMenu>
|
||
</div>
|
||
</Card>
|
||
))
|
||
)}
|
||
</div>
|
||
</div>
|
||
</Card>
|
||
</div>
|
||
|
||
<WechatGroupMemberSelector
|
||
open={isGroupMemberSelectorOpen}
|
||
onOpenChange={setIsGroupMemberSelectorOpen}
|
||
groupId={currentGroupId}
|
||
selectedMembers={selectedGroupMembers}
|
||
onSelect={handleSaveSelectedMembers}
|
||
/>
|
||
</div>
|
||
)
|
||
}
|
||
|