门店端适配新表 及操盘手端工作台优化

Cunkebao/app/workspace/moments-sync/components/content-library-selection-dialog.tsx

@@ -1,11 +1,26 @@
 "use client"
 
-import { useState } from "react"
-import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
+import { useState, useEffect } from "react"
+import { Search, RefreshCw, Loader2 } from "lucide-react"
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog"
 import { Input } from "@/components/ui/input"
 import { Button } from "@/components/ui/button"
-import { Search, CheckCircle2, Circle } from "lucide-react"
 import { ScrollArea } from "@/components/ui/scroll-area"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import { Checkbox } from "@/components/ui/checkbox"
+import { Label } from "@/components/ui/label"
+import { Badge } from "@/components/ui/badge"
+import { api } from "@/lib/api"
+import { showToast } from "@/lib/toast"
+
+interface ContentLibrary {
+  id: string
+  name: string
+  sourceType: number
+  creatorName: string
+  updateTime: string
+  status: number
+}
 
 interface ContentLibrarySelectionDialogProps {
   open: boolean
@@ -21,93 +36,162 @@ export function ContentLibrarySelectionDialog({
   onSelect,
 }: ContentLibrarySelectionDialogProps) {
   const [searchQuery, setSearchQuery] = useState("")
-  const [libraries] = useState([
-    { id: "1", name: "卡若朋友圈", count: 58 },
-    { id: "2", name: "暗黑4代练", count: 422 },
-    { id: "3", name: "家装设计", count: 107 },
-    { id: "4", name: "美食分享", count: 321 },
-    { id: "5", name: "旅游攻略", count: 89 },
-  ])
+  const [loading, setLoading] = useState(false)
+  const [libraries, setLibraries] = useState<ContentLibrary[]>([])
+  const [tempSelected, setTempSelected] = useState<string[]>([])
 
-  const [tempSelectedLibraries, setTempSelectedLibraries] = useState<string[]>(selectedLibraries)
+  // 获取内容库列表
+  const fetchLibraries = async () => {
+    setLoading(true)
+    try {
+      const queryParams = new URLSearchParams({
+        page: '1',
+        limit: '100',
+        ...(searchQuery ? { keyword: searchQuery } : {})
+      })
+      const response = await api.get<{
+        code: number
+        msg: string
+        data: {
+          list: ContentLibrary[]
+          total: number
+        }
+      }>(`/v1/content/library/list?${queryParams.toString()}`)
 
-  const toggleLibrary = (libraryId: string) => {
-    setTempSelectedLibraries((prev) =>
-      prev.includes(libraryId) ? prev.filter((id) => id !== libraryId) : [...prev, libraryId]
+      if (response.code === 200 && response.data) {
+        setLibraries(response.data.list)
+      } else {
+        showToast(response.msg || "获取内容库列表失败", "error")
+      }
+    } catch (error: any) {
+      console.error("获取内容库列表失败:", error)
+      showToast(error?.message || "请检查网络连接", "error")
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  useEffect(() => {
+    if (open) {
+      fetchLibraries()
+      setTempSelected(selectedLibraries)
+    }
+  }, [open, searchQuery, selectedLibraries])
+
+  const handleRefresh = () => {
+    fetchLibraries()
+  }
+
+  const handleSelectAll = () => {
+    if (tempSelected.length === libraries.length) {
+      setTempSelected([])
+    } else {
+      setTempSelected(libraries.map(lib => lib.id))
+    }
+  }
+
+  const handleLibraryToggle = (libraryId: string) => {
+    setTempSelected(prev => 
+      prev.includes(libraryId) 
+        ? prev.filter(id => id !== libraryId)
+        : [...prev, libraryId]
     )
   }
 
-  const handleConfirm = () => {
-    onSelect(tempSelectedLibraries)
-    onOpenChange(false)
+  const handleDialogOpenChange = (open: boolean) => {
+    if (!open) {
+      setTempSelected(selectedLibraries)
+    }
+    onOpenChange(open)
   }
 
-  const handleCancel = () => {
-    setTempSelectedLibraries(selectedLibraries)
-    onOpenChange(false)
-  }
-
-  const filteredLibraries = libraries.filter((library) =>
-    library.name.toLowerCase().includes(searchQuery.toLowerCase())
-  )
-
   return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="max-w-md p-0 overflow-hidden">
-        <DialogHeader className="px-4 py-3 border-b">
+    <Dialog open={open} onOpenChange={handleDialogOpenChange}>
+      <DialogContent className="max-w-2xl">
+        <DialogHeader>
           <DialogTitle>选择内容库</DialogTitle>
         </DialogHeader>
 
-        <div className="p-4">
-          <div className="relative mb-4">
-            <Search className="absolute left-3 top-2.5 h-5 w-5 text-gray-400" />
+        <div className="flex items-center space-x-2 my-4">
+          <div className="relative flex-1">
+            <Search className="absolute left-3 top-2.5 h-4 w-4 text-gray-400" />
             <Input
               placeholder="搜索内容库"
-              className="pl-10"
+              className="pl-9"
               value={searchQuery}
               onChange={(e) => setSearchQuery(e.target.value)}
             />
           </div>
+          <Button variant="outline" size="icon" onClick={handleRefresh} disabled={loading}>
+            {loading ? <Loader2 className="h-4 w-4 animate-spin" /> : <RefreshCw className="h-4 w-4" />}
+          </Button>
+        </div>
 
-          <ScrollArea className="h-[300px] pr-4">
-            <div className="space-y-2">
-              {filteredLibraries.map((library) => (
-                <div
+        <div className="flex justify-between items-center mb-2">
+          <div className="text-sm text-gray-500">
+            已选择 {tempSelected.length} 个内容库
+          </div>
+          <div className="flex gap-2">
+            <Button 
+              variant="outline" 
+              size="sm" 
+              onClick={handleSelectAll}
+              disabled={loading || libraries.length === 0}
+            >
+              {tempSelected.length === libraries.length ? "取消全选" : "全选"}
+            </Button>
+          </div>
+        </div>
+
+        <ScrollArea className="h-[400px] -mx-6 px-6">
+          <div className="space-y-2">
+            {loading ? (
+              <div className="flex items-center justify-center h-full text-gray-500">
+                加载中...
+              </div>
+            ) : libraries.length === 0 ? (
+              <div className="flex items-center justify-center h-full text-gray-500">
+                暂无数据
+              </div>
+            ) : (
+              libraries.map((library) => (
+                <Label
                   key={library.id}
-                  className="flex items-center justify-between p-3 rounded-lg border hover:bg-gray-50 cursor-pointer"
-                  onClick={() => toggleLibrary(library.id)}
+                  className="flex items-center justify-between p-4 rounded-lg border hover:bg-gray-50 cursor-pointer"
+                  htmlFor={library.id}
                 >
-                  <div>
-                    <h3 className="font-medium">{library.name}</h3>
-                    <p className="text-sm text-gray-500">{library.count}条内容</p>
+                  <div className="flex items-center space-x-3 flex-1 min-w-0 pr-4">
+                    <Checkbox 
+                      id={library.id}
+                      checked={tempSelected.includes(library.id)}
+                      onCheckedChange={() => handleLibraryToggle(library.id)}
+                    />
+                    <div className="min-w-0 flex-1">
+                      <div className="font-medium truncate mb-1">{library.name}</div>
+                      <div className="text-sm text-gray-500 truncate mb-1">创建人：{library.creatorName}</div>
+                      <div className="text-sm text-gray-500 truncate">更新时间：{new Date(library.updateTime).toLocaleString()}</div>
+                    </div>
                   </div>
-                  {tempSelectedLibraries.includes(library.id) ? (
-                    <CheckCircle2 className="h-6 w-6 text-blue-500" />
-                  ) : (
-                    <Circle className="h-6 w-6 text-gray-300" />
-                  )}
-                </div>
-              ))}
-            </div>
-          </ScrollArea>
-        </div>
+                  {/* <Badge variant={library.status === 1 ? "default" : "secondary"}>
+                    {library.status === 1 ? "启用" : "已停用"}
+                  </Badge> */}
+                </Label>
+              ))
+            )}
+          </div>
+        </ScrollArea>
 
-        <div className="flex border-t p-4">
-          <Button
-            variant="outline"
-            className="flex-1 mr-2"
-            onClick={handleCancel}
-          >
+        <DialogFooter className="mt-4">
+          {/* <Button variant="outline" onClick={() => handleDialogOpenChange(false)}>
             取消
+          </Button> */}
+          <Button onClick={() => {
+            onSelect(tempSelected)
+            onOpenChange(false)
+          }}>
+            确定{tempSelected.length > 0 ? ` (${tempSelected.length})` : ''}
           </Button>
-          <Button
-            className="flex-1"
-            onClick={handleConfirm}
-            disabled={tempSelectedLibraries.length === 0}
-          >
-            确定 ({tempSelectedLibraries.length})
-          </Button>
-        </div>
+        </DialogFooter>
       </DialogContent>
     </Dialog>
   )