朋友圈自动同步

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

@@ -0,0 +1,114 @@
+"use client"
+
+import { useState } from "react"
+import { Dialog, DialogContent, DialogHeader, DialogTitle } 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"
+
+interface ContentLibrarySelectionDialogProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  selectedLibraries: string[]
+  onSelect: (libraries: string[]) => void
+}
+
+export function ContentLibrarySelectionDialog({
+  open,
+  onOpenChange,
+  selectedLibraries,
+  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 [tempSelectedLibraries, setTempSelectedLibraries] = useState<string[]>(selectedLibraries)
+
+  const toggleLibrary = (libraryId: string) => {
+    setTempSelectedLibraries((prev) =>
+      prev.includes(libraryId) ? prev.filter((id) => id !== libraryId) : [...prev, libraryId]
+    )
+  }
+
+  const handleConfirm = () => {
+    onSelect(tempSelectedLibraries)
+    onOpenChange(false)
+  }
+
+  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">
+          <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" />
+            <Input
+              placeholder="搜索内容库"
+              className="pl-10"
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+            />
+          </div>
+
+          <ScrollArea className="h-[300px] pr-4">
+            <div className="space-y-2">
+              {filteredLibraries.map((library) => (
+                <div
+                  key={library.id}
+                  className="flex items-center justify-between p-3 rounded-lg border hover:bg-gray-50 cursor-pointer"
+                  onClick={() => toggleLibrary(library.id)}
+                >
+                  <div>
+                    <h3 className="font-medium">{library.name}</h3>
+                    <p className="text-sm text-gray-500">{library.count}条内容</p>
+                  </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>
+
+        <div className="flex border-t p-4">
+          <Button
+            variant="outline"
+            className="flex-1 mr-2"
+            onClick={handleCancel}
+          >
+            取消
+          </Button>
+          <Button
+            className="flex-1"
+            onClick={handleConfirm}
+            disabled={tempSelectedLibraries.length === 0}
+          >
+            确定 ({tempSelectedLibraries.length})
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}