feat: 本次提交更新内容如下

场景获客列表搞定

Cunkebao/app/content/page.tsx

@@ -1,7 +1,7 @@
 "use client"
 
-import { useState, useEffect, useCallback } from "react"
-import { ChevronLeft, Filter, Search, RefreshCw, Plus, Edit, Trash2, Eye, MoreVertical, Users } from "lucide-react"
+import { useState } from "react"
+import { ChevronLeft, Filter, Search, RefreshCw, Plus, Edit, Trash2, Eye, MoreVertical } from "lucide-react"
 import { Card } from "@/components/ui/card"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
@@ -10,30 +10,15 @@ 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
-}
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+  DialogDescription,
+} from "@/components/ui/dialog"
+import { toast } from "@/components/ui/use-toast"
 
 interface ContentLibrary {
   id: string
@@ -44,169 +29,87 @@ interface ContentLibrary {
     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 [libraries, setLibraries] = useState<ContentLibrary[]>([
+    {
+      id: "129",
+      name: "微信好友广告",
+      source: "friends",
+      targetAudience: [
+        { id: "1", nickname: "张三", avatar: "/placeholder.svg?height=40&width=40" },
+        { id: "2", nickname: "李四", avatar: "/placeholder.svg?height=40&width=40" },
+        { id: "3", nickname: "王五", avatar: "/placeholder.svg?height=40&width=40" },
+      ],
+      itemCount: 0,
+      lastUpdated: "2024-02-09 12:30",
+      enabled: false,
+    },
+    {
+      id: "127",
+      name: "开发群",
+      source: "groups",
+      targetAudience: [{ id: "4", nickname: "开发群1", avatar: "/placeholder.svg?height=40&width=40" }],
+      itemCount: 0,
+      lastUpdated: "2024-02-09 12:30",
+      enabled: true,
+    },
+  ])
+
   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 [viewLibraryId, setViewLibraryId] = useState<string | null>(null)
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false)
+  const [libraryToDelete, setLibraryToDelete] = useState<string | null>(null)
 
   const handleCreateNew = () => {
-    router.push('/content/new')
+    router.push(`/content/new`)
   }
 
   const handleEdit = (id: string) => {
-    router.push(`/content/${id}/edit`)
+    router.push(`/content/${id}`)
   }
 
-  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 handleDelete = (id: string) => {
+    setLibraryToDelete(id)
+    setDeleteDialogOpen(true)
+  }
+
+  const confirmDelete = () => {
+    if (libraryToDelete) {
+      setLibraries(libraries.filter((lib) => lib.id !== libraryToDelete))
+      toast({
+        title: "删除成功",
+        description: "内容库已成功删除",
+      })
     }
+    setDeleteDialogOpen(false)
+    setLibraryToDelete(null)
   }
 
   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 handleViewLibrary = (id: string) => {
+    setViewLibraryId(id)
   }
 
   const filteredLibraries = libraries.filter(
     (library) =>
-      library.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
-      library.targetAudience.some((target) => target.nickname.toLowerCase().includes(searchQuery.toLowerCase()))
+      (activeTab === "all" || library.source === activeTab) &&
+      (library.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+        library.targetAudience.some((target) => target.nickname.toLowerCase().includes(searchQuery.toLowerCase()))),
   )
 
+  // 查找当前查看的内容库
+  const viewingLibrary = viewLibraryId ? libraries.find((lib) => lib.id === viewLibraryId) : null
+
   return (
     <div className="flex-1 bg-gray-50 min-h-screen">
       <header className="sticky top-0 z-10 bg-white border-b">
@@ -217,7 +120,7 @@ export default function ContentLibraryPage() {
             </Button>
             <h1 className="text-lg font-medium">内容库</h1>
           </div>
-          <Button onClick={() => router.push('/content/new')}>
+          <Button onClick={handleCreateNew}>
             <Plus className="h-4 w-4 mr-2" />
             新建
           </Button>
@@ -234,20 +137,14 @@ export default function ContentLibraryPage() {
                   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}>
+              <Button variant="outline" size="icon">
                 <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 variant="outline" size="icon">
+                <RefreshCw className="h-4 w-4" />
               </Button>
             </div>
 
@@ -260,90 +157,53 @@ export default function ContentLibraryPage() {
             </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>
+              {filteredLibraries.map((library) => (
+                <Card key={library.id} className="p-4">
+                  <div className="flex items-start justify-between">
+                    <div className="space-y-1">
+                      <div className="flex items-center space-x-2">
+                        <h3 className="font-medium">{library.name}</h3>
+                        <Badge variant={library.enabled ? "success" : "secondary"}>
+                          {library.enabled ? "已启用" : "已停用"}
+                        </Badge>
+                      </div>
+                      <div className="text-sm text-gray-500">
+                        <div className="flex items-center space-x-1">
+                          <span>来源：</span>
+                          <div className="flex -space-x-2 overflow-hidden">
+                            {library.targetAudience.slice(0, 3).map((target) => (
+                              <Image
+                                key={target.id}
+                                src={target.avatar || "/placeholder.svg"}
+                                alt={target.nickname}
+                                width={24}
+                                height={24}
+                                className="inline-block h-6 w-6 rounded-full ring-2 ring-white"
+                              />
+                            ))}
+                            {library.targetAudience.length > 3 && (
+                              <span className="flex items-center justify-center w-6 h-6 text-xs font-medium text-white bg-gray-400 rounded-full ring-2 ring-white">
+                                +{library.targetAudience.length - 3}
+                              </span>
                             )}
                           </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>内容数量：{library.itemCount}</div>
+                        <div>更新时间：{library.lastUpdated}</div>
                       </div>
+                    </div>
+                    <div className="flex space-x-2">
                       <DropdownMenu>
                         <DropdownMenuTrigger asChild>
-                          <Button variant="ghost" size="icon" className="h-8 w-8">
+                          <Button variant="ghost" size="sm">
                             <MoreVertical className="h-4 w-4" />
                           </Button>
                         </DropdownMenuTrigger>
                         <DropdownMenuContent align="end">
+                          <DropdownMenuItem onClick={() => handleViewLibrary(library.id)}>
+                            <Eye className="h-4 w-4 mr-2" />
+                            查看
+                          </DropdownMenuItem>
                           <DropdownMenuItem onClick={() => handleEdit(library.id)}>
                             <Edit className="h-4 w-4 mr-2" />
                             编辑
@@ -359,22 +219,97 @@ export default function ContentLibraryPage() {
                         </DropdownMenuContent>
                       </DropdownMenu>
                     </div>
-                  </Card>
-                ))
+                  </div>
+                </Card>
+              ))}
+
+              {filteredLibraries.length === 0 && (
+                <div className="text-center py-8 text-gray-500">未找到匹配的内容库</div>
               )}
             </div>
           </div>
         </Card>
       </div>
 
-      <WechatGroupMemberSelector
-        open={isGroupMemberSelectorOpen}
-        onOpenChange={setIsGroupMemberSelectorOpen}
-        groupId={currentGroupId}
-        selectedMembers={selectedGroupMembers}
-        onSelect={handleSaveSelectedMembers}
-      />
+      {/* 查看内容库详情对话框 */}
+      <Dialog open={!!viewLibraryId} onOpenChange={(open) => !open && setViewLibraryId(null)}>
+        <DialogContent className="sm:max-w-md">
+          <DialogHeader>
+            <DialogTitle>内容库详情</DialogTitle>
+          </DialogHeader>
+          {viewingLibrary && (
+            <div className="space-y-4 py-4">
+              <div>
+                <h3 className="font-medium text-lg">{viewingLibrary.name}</h3>
+                <Badge variant={viewingLibrary.enabled ? "success" : "secondary"} className="mt-2">
+                  {viewingLibrary.enabled ? "已启用" : "已停用"}
+                </Badge>
+              </div>
+
+              <div className="space-y-2">
+                <div className="text-sm text-gray-700 font-medium">来源</div>
+                <div className="flex flex-wrap gap-2">
+                  {viewingLibrary.targetAudience.map((target) => (
+                    <div key={target.id} className="flex items-center space-x-2 bg-gray-100 p-2 rounded-md">
+                      <Image
+                        src={target.avatar || "/placeholder.svg"}
+                        alt={target.nickname}
+                        width={24}
+                        height={24}
+                        className="rounded-full"
+                      />
+                      <span>{target.nickname}</span>
+                    </div>
+                  ))}
+                </div>
+              </div>
+
+              <div className="grid grid-cols-2 gap-4">
+                <div>
+                  <div className="text-sm text-gray-700 font-medium">内容数量</div>
+                  <div>{viewingLibrary.itemCount}</div>
+                </div>
+                <div>
+                  <div className="text-sm text-gray-700 font-medium">更新时间</div>
+                  <div>{viewingLibrary.lastUpdated}</div>
+                </div>
+              </div>
+
+              <div className="flex justify-end space-x-2 pt-4">
+                <Button variant="outline" onClick={() => setViewLibraryId(null)}>
+                  关闭
+                </Button>
+                <Button
+                  onClick={() => {
+                    setViewLibraryId(null)
+                    handleEdit(viewingLibrary.id)
+                  }}
+                >
+                  编辑
+                </Button>
+              </div>
+            </div>
+          )}
+        </DialogContent>
+      </Dialog>
+
+      {/* 删除确认对话框 */}
+      <Dialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>确认删除</DialogTitle>
+            <DialogDescription>您确定要删除此内容库吗？此操作无法撤销，所有相关内容将被永久删除。</DialogDescription>
+          </DialogHeader>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setDeleteDialogOpen(false)}>
+              取消
+            </Button>
+            <Button variant="destructive" onClick={confirmDelete}>
+              删除
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
     </div>
   )
 }
-