fnvtk/cunkebao_v3
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

朋友圈自动同步

Browse Source
This commit is contained in:
wong
2025-04-11 16:15:48 +08:00
parent 2411bb6d05
commit 0cd689e6ae
20 changed files with 1862 additions and 207 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
Cunkebao/app/components/LayoutWrapper.tsx
View File

@@ -4,22 +4,55 @@ import { usePathname } from "next/navigation"
import BottomNav from "./BottomNav"
import { VideoTutorialButton } from "@/components/VideoTutorialButton"
import type React from "react"
import { createContext, useContext, useState, useEffect } from "react"
// 创建视图模式上下文
const ViewModeContext = createContext<{ viewMode: "desktop" | "mobile" }>({ viewMode: "desktop" })
// 创建视图模式钩子函数
export function useViewMode() {
const context = useContext(ViewModeContext)
if (!context) {
throw new Error("useViewMode must be used within a LayoutWrapper")
}
return context
}
export default function LayoutWrapper({ children }: { children: React.ReactNode }) {
const pathname = usePathname()
const [viewMode, setViewMode] = useState<"desktop" | "mobile">("desktop")
// 检测视图模式
useEffect(() => {
const checkViewMode = () => {
setViewMode(window.innerWidth < 768 ? "mobile" : "desktop")
}
// 初始检测
checkViewMode()
// 监听窗口大小变化
window.addEventListener("resize", checkViewMode)
return () => {
window.removeEventListener("resize", checkViewMode)
}
}, [])
// 只在四个主页显示底部导航栏：首页、场景获客、工作台和我的
const mainPages = ["/", "/scenarios", "/workspace", "/profile"]
const showBottomNav = mainPages.includes(pathname)
return (
<div className="mx-auto w-full">
<main className="w-full mx-auto bg-white min-h-screen flex flex-col relative lg:max-w-7xl xl:max-w-[1200px]">
{children}
{showBottomNav && <BottomNav />}
{showBottomNav && <VideoTutorialButton />}
</main>
</div>
<ViewModeContext.Provider value={{ viewMode }}>
<div className="mx-auto w-full">
<main className="w-full mx-auto bg-white min-h-screen flex flex-col relative lg:max-w-7xl xl:max-w-[1200px]">
{children}
{showBottomNav && <BottomNav />}
{showBottomNav && <VideoTutorialButton />}
</main>
</div>
</ViewModeContext.Provider>
)
}

235
Cunkebao/app/workspace/auto-like/[id]/edit/page.tsx Normal file
View File

@@ -0,0 +1,235 @@
"use client"
import { useState, useEffect } from "react"
import { useRouter } from "next/navigation"
import { ChevronLeft, Search } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { StepIndicator } from "../../components/step-indicator"
import { BasicSettings } from "../../components/basic-settings"
import { DeviceSelectionDialog } from "../../components/device-selection-dialog"
import { TagSelector } from "../../components/tag-selector"
import { api, ApiResponse } from "@/lib/api"
import { showToast } from "@/lib/toast"
interface TaskConfig {
id: number
workbenchId: number
interval: number
maxLikes: number
startTime: string
endTime: string
contentTypes: string[]
devices: number[]
targetGroups: string[]
tagOperator: number
createTime: string
updateTime: string
}
interface Task {
id: number
name: string
type: number
status: number
autoStart: number
createTime: string
updateTime: string
config: TaskConfig
}
export default function EditAutoLikePage({ params }: { params: { id: string } }) {
const router = useRouter()
const [currentStep, setCurrentStep] = useState(1)
const [deviceDialogOpen, setDeviceDialogOpen] = useState(false)
const [loading, setLoading] = useState(true)
const [formData, setFormData] = useState({
taskName: "",
likeInterval: 5,
maxLikesPerDay: 200,
timeRange: { start: "08:00", end: "22:00" },
contentTypes: ["text", "image", "video"],
enabled: true,
selectedDevices: [] as number[],
selectedTags: [] as string[],
tagOperator: "and" as "and" | "or",
})
useEffect(() => {
fetchTaskDetail()
}, [])
const fetchTaskDetail = async () => {
const loadingToast = showToast("正在加载任务信息...", "loading", true);
try {
const response = await api.get<{code: number, msg: string, data: Task}>(`/v1/workbench/detail?id=${params.id}`)
if (response.code === 200 && response.data) {
const task = response.data
setFormData({
taskName: task.name,
likeInterval: task.config.interval,
maxLikesPerDay: task.config.maxLikes,
timeRange: {
start: task.config.startTime,
end: task.config.endTime
},
contentTypes: task.config.contentTypes,
enabled: task.status === 1,
selectedDevices: task.config.devices,
selectedTags: task.config.targetGroups,
tagOperator: task.config.tagOperator === 1 ? "and" : "or"
})
} else {
showToast(response.msg || "获取任务信息失败", "error")
router.back()
}
} catch (error: any) {
console.error("获取任务详情失败:", error)
showToast(error?.message || "请检查网络连接", "error")
router.back()
} finally {
loadingToast.remove()
setLoading(false)
}
}
const handleUpdateFormData = (data: Partial<typeof formData>) => {
setFormData((prev) => ({ ...prev, ...data }))
}
const handleNext = () => {
setCurrentStep((prev) => Math.min(prev + 1, 3))
}
const handlePrev = () => {
setCurrentStep((prev) => Math.max(prev - 1, 1))
}
const handleComplete = async () => {
const loadingToast = showToast("正在更新任务...", "loading", true);
try {
const response = await api.post<ApiResponse>('/v1/workbench/update', {
id: params.id,
type: 1,
name: formData.taskName,
interval: formData.likeInterval,
maxLikes: formData.maxLikesPerDay,
startTime: formData.timeRange.start,
endTime: formData.timeRange.end,
contentTypes: formData.contentTypes,
enabled: formData.enabled,
devices: formData.selectedDevices,
targetGroups: formData.selectedTags,
tagOperator: formData.tagOperator === 'and' ? 1 : 2
});
if (response.code === 200) {
loadingToast.remove();
showToast(response.msg || "更新成功", "success");
router.push("/workspace/auto-like");
} else {
loadingToast.remove();
showToast(response.msg || "请稍后再试", "error");
}
} catch (error: any) {
console.error("更新自动点赞任务失败:", error);
loadingToast.remove();
showToast(error?.message || "请检查网络连接或稍后再试", "error");
}
};
if (loading) {
return null;
}
return (
<div className="min-h-screen bg-[#F8F9FA] pb-20">
<header className="sticky top-0 z-10 bg-white">
<div className="flex items-center h-14 px-4">
<Button variant="ghost" size="icon" onClick={() => router.back()} className="hover:bg-gray-50">
<ChevronLeft className="h-6 w-6" />
</Button>
<h1 className="ml-2 text-lg font-medium">编辑自动点赞</h1>
</div>
</header>
<div className="mt-8">
<StepIndicator currentStep={currentStep} />
<div className="mt-8">
{currentStep === 1 && (
<BasicSettings formData={formData} onChange={handleUpdateFormData} onNext={handleNext} />
)}
{currentStep === 2 && (
<div className="space-y-6 px-6">
<div className="relative">
<Search className="absolute left-3 top-4 h-5 w-5 text-gray-400" />
<Input
placeholder="选择设备"
className="h-12 pl-11 rounded-xl border-gray-200 text-base"
onClick={() => setDeviceDialogOpen(true)}
readOnly
value={formData.selectedDevices.length > 0 ? `已选择 ${formData.selectedDevices.length} 个设备` : ""}
/>
</div>
{formData.selectedDevices.length > 0 && (
<div className="text-base text-gray-500">已选设备：{formData.selectedDevices.length} 个</div>
)}
<div className="flex space-x-4 pt-4">
<Button variant="outline" onClick={handlePrev} className="flex-1 h-12 rounded-xl text-base">
上一步
</Button>
<Button
onClick={handleNext}
className="flex-1 h-12 bg-blue-600 hover:bg-blue-700 rounded-xl text-base shadow-sm"
disabled={formData.selectedDevices.length === 0}
>
下一步
</Button>
</div>
<DeviceSelectionDialog
open={deviceDialogOpen}
onOpenChange={setDeviceDialogOpen}
selectedDevices={formData.selectedDevices}
onSelect={(devices) => {
handleUpdateFormData({ selectedDevices: devices })
setDeviceDialogOpen(false)
}}
/>
</div>
)}
{currentStep === 3 && (
<div className="px-6">
<TagSelector
selectedTags={formData.selectedTags}
tagOperator={formData.tagOperator}
onTagsChange={(tags) => handleUpdateFormData({ selectedTags: tags })}
onOperatorChange={(operator) => handleUpdateFormData({ tagOperator: operator })}
onBack={handlePrev}
onComplete={handleComplete}
/>
<div className="flex space-x-4 pt-4">
<Button variant="outline" onClick={handlePrev} className="flex-1 h-12 rounded-xl text-base">
上一步
</Button>
<Button
onClick={handleComplete}
className="flex-1 h-12 bg-blue-600 hover:bg-blue-700 rounded-xl text-base shadow-sm"
>
完成
</Button>
</div>
</div>
)}
</div>
</div>
</div>
)
}

6
Cunkebao/app/workspace/auto-like/page.tsx
View File

@@ -294,7 +294,11 @@ export default function AutoLikePage() {
<div className="grid grid-cols-2 gap-4 mb-4">
<div className="text-sm text-gray-500">
<div>执行设备：{task.config.devices.length} 个</div>
<div>目标人群：{task.config.targetGroups.join(', ')}</div>
<div>目标人群：{
task.config.targetGroups.length > 2
? `${task.config.targetGroups[0]} 等${task.config.targetGroups.length - 1}个标签`
: task.config.targetGroups.join(', ')
}</div>
</div>
<div className="text-sm text-gray-500">
<div>点赞间隔：{task.config.interval} 秒</div>

147
Cunkebao/app/workspace/moments-sync/[id]/edit/page.tsx
View File

@@ -1,33 +1,90 @@
"use client"
import { useState } from "react"
import { useState, useEffect } from "react"
import { useRouter } from "next/navigation"
import { ChevronLeft, Search } from "lucide-react"
import { Button } from "@/components/ui/button"
import { StepIndicator } from "../../components/step-indicator"
import { BasicSettings } from "../../components/basic-settings"
import { DeviceSelectionDialog } from "../../components/device-selection-dialog"
import { ContentLibrarySelectionDialog } from "../../components/content-library-selection-dialog"
import { Input } from "@/components/ui/input"
import { api, ApiResponse } from "@/lib/api"
import { showToast } from "@/lib/toast"
export default function EditMomentsSyncPage() {
// 定义基本设置表单数据类型，与BasicSettings组件的formData类型匹配
interface BasicSettingsFormData {
taskName: string
startTime: string
endTime: string
syncCount: number
syncInterval: number
accountType: "business" | "personal"
enabled: boolean
}
export default function EditMomentsSyncPage({ params }: { params: { id: string } }) {
const router = useRouter()
const [currentStep, setCurrentStep] = useState(1)
const [deviceDialogOpen, setDeviceDialogOpen] = useState(false)
const [libraryDialogOpen, setLibraryDialogOpen] = useState(false)
const [isLoading, setIsLoading] = useState(true)
const [formData, setFormData] = useState({
taskName: "同步卡若主号",
taskName: "",
startTime: "06:00",
endTime: "23:59",
syncCount: 5,
accountType: "business" as const,
syncInterval: 30, // 同步间隔，默认30分钟
accountType: "business" as "business" | "personal",
enabled: true,
selectedDevices: [] as string[],
selectedLibraries: [] as string[],
})
// 获取任务详情
useEffect(() => {
const fetchTaskDetail = async () => {
setIsLoading(true)
try {
const response = await api.get<ApiResponse>(`/v1/workbench/detail?id=${params.id}`)
if (response.code === 200 && response.data) {
const taskData = response.data
setFormData({
taskName: taskData.name || "",
startTime: taskData.startTime || "06:00",
endTime: taskData.endTime || "23:59",
syncCount: taskData.syncCount || 5,
syncInterval: taskData.syncInterval || 30,
accountType: taskData.syncType === 1 ? "business" : "personal",
enabled: !!taskData.enabled,
selectedDevices: taskData.devices || [],
selectedLibraries: taskData.contentLibraries || [],
})
} else {
showToast(response.msg || "获取任务详情失败", "error")
router.back()
}
} catch (error: any) {
console.error("获取任务详情失败:", error)
showToast(error?.message || "获取任务详情失败", "error")
router.back()
} finally {
setIsLoading(false)
}
}
fetchTaskDetail()
}, [params.id, router])
const handleUpdateFormData = (data: Partial<typeof formData>) => {
setFormData((prev) => ({ ...prev, ...data }))
}
// 专门用于基本设置的更新函数
const handleBasicSettingsUpdate = (data: Partial<BasicSettingsFormData>) => {
setFormData((prev) => ({ ...prev, ...data }))
}
const handleNext = () => {
setCurrentStep((prev) => Math.min(prev + 1, 3))
}
@@ -36,9 +93,44 @@ export default function EditMomentsSyncPage() {
setCurrentStep((prev) => Math.max(prev - 1, 1))
}
const handleComplete = () => {
console.log("Form submitted:", formData)
router.push("/workspace/moments-sync")
const handleComplete = async () => {
try {
const response = await api.post<ApiResponse>('/v1/workbench/update', {
id: params.id,
type: 2, // 朋友圈同步任务类型为2
name: formData.taskName,
syncInterval: formData.syncInterval,
syncCount: formData.syncCount,
syncType: formData.accountType === "business" ? 1 : 2, // 业务号为1，人设号为2
startTime: formData.startTime,
endTime: formData.endTime,
accountType: formData.accountType === "business" ? 1 : 2,
status: formData.enabled ? 1 : 0, // 状态：0=禁用，1=启用
devices: formData.selectedDevices,
contentLibraries: formData.selectedLibraries
});
if (response.code === 200) {
showToast(response.msg || "更新成功", "success");
router.push("/workspace/moments-sync");
} else {
showToast(response.msg || "请稍后再试", "error");
}
} catch (error: any) {
console.error("更新朋友圈同步任务失败:", error);
showToast(error?.message || "请检查网络连接或稍后再试", "error");
}
};
if (isLoading) {
return (
<div className="min-h-screen bg-[#F8F9FA] flex justify-center items-center">
<div className="text-center">
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto mb-4"></div>
<p className="text-gray-500">加载中...</p>
</div>
</div>
)
}
return (
@@ -57,7 +149,19 @@ export default function EditMomentsSyncPage() {
<div className="mt-8">
{currentStep === 1 && (
<BasicSettings formData={formData} onChange={handleUpdateFormData} onNext={handleNext} />
<BasicSettings
formData={{
taskName: formData.taskName,
startTime: formData.startTime,
endTime: formData.endTime,
syncCount: formData.syncCount,
syncInterval: formData.syncInterval,
accountType: formData.accountType,
enabled: formData.enabled
}}
onChange={handleBasicSettingsUpdate}
onNext={handleNext}
/>
)}
{currentStep === 2 && (
@@ -69,6 +173,7 @@ export default function EditMomentsSyncPage() {
className="h-12 pl-11 rounded-xl border-gray-200 text-base"
onClick={() => setDeviceDialogOpen(true)}
readOnly
value={formData.selectedDevices.length > 0 ? `已选择 ${formData.selectedDevices.length} 个设备` : ""}
/>
</div>
@@ -83,6 +188,7 @@ export default function EditMomentsSyncPage() {
<Button
onClick={handleNext}
className="flex-1 h-12 bg-blue-600 hover:bg-blue-700 rounded-xl text-base shadow-sm"
disabled={formData.selectedDevices.length === 0}
>
下一步
</Button>
@@ -104,9 +210,19 @@ export default function EditMomentsSyncPage() {
<div className="space-y-6 px-6">
<div className="relative">
<Search className="absolute left-3 top-4 h-5 w-5 text-gray-400" />
<Input placeholder="选择内容库" className="h-12 pl-11 rounded-xl border-gray-200 text-base" />
<Input
placeholder="选择内容库"
className="h-12 pl-11 rounded-xl border-gray-200 text-base"
onClick={() => setLibraryDialogOpen(true)}
readOnly
value={formData.selectedLibraries.length > 0 ? `已选择 ${formData.selectedLibraries.length} 个内容库` : ""}
/>
</div>
{formData.selectedLibraries.length > 0 && (
<div className="text-base text-gray-500">已选内容库：{formData.selectedLibraries.length} 个</div>
)}
<div className="flex space-x-4 pt-4">
<Button variant="outline" onClick={handlePrev} className="flex-1 h-12 rounded-xl text-base">
上一步
@@ -114,10 +230,21 @@ export default function EditMomentsSyncPage() {
<Button
onClick={handleComplete}
className="flex-1 h-12 bg-blue-600 hover:bg-blue-700 rounded-xl text-base shadow-sm"
disabled={formData.selectedLibraries.length === 0}
>
完成
保存
</Button>
</div>
<ContentLibrarySelectionDialog
open={libraryDialogOpen}
onOpenChange={setLibraryDialogOpen}
selectedLibraries={formData.selectedLibraries}
onSelect={(libraries) => {
handleUpdateFormData({ selectedLibraries: libraries })
setLibraryDialogOpen(false)
}}
/>
</div>
)}
</div>

423
Cunkebao/app/workspace/moments-sync/[id]/page.tsx
View File

@@ -2,52 +2,216 @@
import { useState, useEffect } from "react"
import { useRouter } from "next/navigation"
import { ChevronLeft } from "lucide-react"
import { ChevronLeft, MoreVertical, Clock, Edit, Trash2, Copy, RefreshCw, FileText, MessageSquare, History } from "lucide-react"
import { Card } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Avatar } from "@/components/ui/avatar"
import { Switch } from "@/components/ui/switch"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from "@/components/ui/alert-dialog"
import { api, ApiResponse } from "@/lib/api"
import { showToast } from "@/lib/toast"
interface SyncTask {
// 定义任务详情的接口
interface TaskDetail {
id: string
name: string
status: "running" | "paused"
deviceCount: number
contentLib: string
syncType: number
accountType: number
syncCount: number
syncInterval: number
startTime: string
endTime: string
enabled: boolean
devices: {
id: string
name: string
avatar: string
}[]
contentLibraries: {
id: string
name: string
count: number
}[]
lastSyncTime: string
createTime: string
creator: string
}
export default function ViewMomentsSyncTask({ params }: { params: { id: string } }) {
// 定义同步历史的接口
interface SyncHistory {
id: string
syncTime: string
content: string
contentType: "text" | "image" | "video"
status: "success" | "failed"
errorMessage?: string
}
export default function MomentsSyncDetailPage({ params }: { params: { id: string } }) {
const router = useRouter()
const [task, setTask] = useState<SyncTask | null>(null)
const [taskDetail, setTaskDetail] = useState<TaskDetail | null>(null)
const [syncHistory, setSyncHistory] = useState<SyncHistory[]>([])
const [isLoading, setIsLoading] = useState(true)
const [activeTab, setActiveTab] = useState("overview")
const [showDeleteAlert, setShowDeleteAlert] = useState(false)
// 获取任务详情
useEffect(() => {
// Fetch task data from API
// For now, we'll use mock data
setTask({
id: params.id,
name: "同步卡若主号",
deviceCount: 2,
contentLib: "卡若朋友圈",
syncCount: 307,
lastSyncTime: "2025-02-06 13:12:35",
createTime: "2024-11-20 19:04:14",
creator: "karuo",
status: "running",
})
}, [params.id])
const fetchTaskDetail = async () => {
setIsLoading(true)
try {
const response = await api.get<ApiResponse>(`/v1/workbench/detail?id=${params.id}`)
if (response.code === 200 && response.data) {
setTaskDetail(response.data)
// 获取同步历史
if (activeTab === "history") {
fetchSyncHistory()
}
} else {
showToast(response.msg || "获取任务详情失败", "error")
router.push("/workspace/moments-sync")
}
} catch (error: any) {
console.error("获取任务详情失败:", error)
showToast(error?.message || "获取任务详情失败", "error")
router.push("/workspace/moments-sync")
} finally {
setIsLoading(false)
}
}
const toggleTaskStatus = () => {
if (task) {
setTask({ ...task, status: task.status === "running" ? "paused" : "running" })
fetchTaskDetail()
}, [params.id, router])
// 获取同步历史
const fetchSyncHistory = async () => {
try {
const response = await api.get<ApiResponse>(`/v1/workbench/sync/history?id=${params.id}`)
if (response.code === 200 && response.data) {
setSyncHistory(response.data.list || [])
} else {
setSyncHistory([])
}
} catch (error) {
console.error("获取同步历史失败:", error)
setSyncHistory([])
}
}
if (!task) {
return <div>Loading...</div>
// 切换Tab时加载数据
const handleTabChange = (value: string) => {
setActiveTab(value)
if (value === "history" && syncHistory.length === 0) {
fetchSyncHistory()
}
}
// 切换任务状态
const toggleTaskStatus = async () => {
if (!taskDetail) return
try {
const newStatus = taskDetail.status === "running" ? "paused" : "running"
const response = await api.post<ApiResponse>('/v1/workbench/update/status', {
id: params.id,
status: newStatus === "running" ? 1 : 0
})
if (response.code === 200) {
setTaskDetail({
...taskDetail,
status: newStatus
})
showToast(`任务已${newStatus === "running" ? "启用" : "暂停"}`, "success")
} else {
showToast(response.msg || "操作失败", "error")
}
} catch (error: any) {
console.error("更新任务状态失败:", error)
showToast(error?.message || "更新任务状态失败", "error")
}
}
// 编辑任务
const handleEdit = () => {
router.push(`/workspace/moments-sync/${params.id}/edit`)
}
// 确认删除
const confirmDelete = () => {
setShowDeleteAlert(true)
}
// 执行删除
const handleDelete = async () => {
try {
const response = await api.post<ApiResponse>('/v1/workbench/delete', {
id: params.id
})
if (response.code === 200) {
showToast("删除成功", "success")
router.push("/workspace/moments-sync")
} else {
showToast(response.msg || "删除失败", "error")
}
} catch (error: any) {
console.error("删除任务失败:", error)
showToast(error?.message || "删除任务失败", "error")
} finally {
setShowDeleteAlert(false)
}
}
// 复制任务
const handleCopy = async () => {
try {
const response = await api.post<ApiResponse>('/v1/workbench/copy', {
id: params.id
})
if (response.code === 200) {
showToast("复制成功，正在跳转到新任务", "success")
// 假设后端返回了新任务的ID
if (response.data?.id) {
router.push(`/workspace/moments-sync/${response.data.id}`)
} else {
router.push("/workspace/moments-sync")
}
} else {
showToast(response.msg || "复制失败", "error")
}
} catch (error: any) {
console.error("复制任务失败:", error)
showToast(error?.message || "复制任务失败", "error")
}
}
if (isLoading) {
return (
<div className="min-h-screen bg-[#F8F9FA] flex justify-center items-center">
<div className="text-center">
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto mb-4"></div>
<p className="text-gray-500">加载中...</p>
</div>
</div>
)
}
if (!taskDetail) {
return (
<div className="min-h-screen bg-[#F8F9FA] flex justify-center items-center">
<div className="text-center">
<p className="text-gray-500 mb-4">任务不存在或已被删除</p>
<Button onClick={() => router.push("/workspace/moments-sync")}>返回列表</Button>
</div>
</div>
)
}
return (
@@ -55,53 +219,192 @@ export default function ViewMomentsSyncTask({ params }: { params: { id: string }
<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()}>
<Button variant="ghost" size="icon" onClick={() => router.push("/workspace/moments-sync")}>
<ChevronLeft className="h-5 w-5" />
</Button>
<h1 className="text-lg font-medium">查看朋友圈同步任务</h1>
<h1 className="text-lg font-medium">任务详情</h1>
</div>
<div className="flex items-center space-x-2">
<Switch
checked={taskDetail.status === "running"}
onCheckedChange={toggleTaskStatus}
/>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="ghost" size="icon">
<MoreVertical className="h-5 w-5" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuItem onClick={handleEdit}>
<Edit className="h-4 w-4 mr-2" />
编辑
</DropdownMenuItem>
<DropdownMenuItem onClick={handleCopy}>
<Copy className="h-4 w-4 mr-2" />
复制
</DropdownMenuItem>
<DropdownMenuItem onClick={confirmDelete} className="text-red-500 hover:text-red-600">
<Trash2 className="h-4 w-4 mr-2" />
删除
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</div>
<Button onClick={() => router.push(`/workspace/moments-sync/${task.id}/edit`)}>编辑任务</Button>
</div>
</header>
<div className="p-4">
<Card className="p-6">
<div className="flex items-center justify-between mb-6">
<div className="flex items-center space-x-2">
<h2 className="text-2xl font-bold">{task.name}</h2>
<Badge variant={task.status === "running" ? "success" : "secondary"}>
{task.status === "running" ? "进行中" : "已暂停"}
</Badge>
</div>
<Switch checked={task.status === "running"} onCheckedChange={toggleTaskStatus} />
</div>
<div className="grid grid-cols-2 gap-6 mb-6">
<div>
<h3 className="text-lg font-semibold mb-2">任务详情</h3>
<div className="space-y-2">
<p>推送设备：{task.deviceCount} 个</p>
<p>内容库：{task.contentLib}</p>
<p>已同步：{task.syncCount} 条</p>
<p>创建人：{task.creator}</p>
<Card className="mb-4">
<div className="p-4 border-b">
<div className="flex items-center justify-between mb-4">
<div className="flex items-center space-x-2">
<h2 className="text-xl font-semibold">{taskDetail.name}</h2>
<Badge variant={taskDetail.status === "running" ? "success" : "secondary"}>
{taskDetail.status === "running" ? "进行中" : "已暂停"}
</Badge>
</div>
</div>
<div>
<h3 className="text-lg font-semibold mb-2">时间信息</h3>
<div className="space-y-2">
<p>创建时间：{task.createTime}</p>
<p>上次同步：{task.lastSyncTime}</p>
</div>
<div className="grid grid-cols-2 gap-4 text-sm text-gray-500">
<div>创建时间：{taskDetail.createTime}</div>
<div>创建人：{taskDetail.creator}</div>
<div>上次同步：{taskDetail.lastSyncTime}</div>
<div>已同步：{taskDetail.syncCount} 条</div>
</div>
</div>
<div className="border-t pt-4">
<h3 className="text-lg font-semibold mb-2">同步内容预览</h3>
{/* Add content preview here */}
<p className="text-gray-500">暂无内容预览</p>
</div>
</Card>
<Tabs value={activeTab} onValueChange={handleTabChange} className="mb-4">
<TabsList className="grid grid-cols-3">
<TabsTrigger value="overview">基本信息</TabsTrigger>
<TabsTrigger value="devices">设备列表</TabsTrigger>
<TabsTrigger value="history">同步历史</TabsTrigger>
</TabsList>
<TabsContent value="overview" className="mt-4">
<Card className="p-4">
<div className="space-y-4">
<div>
<div className="font-medium mb-1">账号类型</div>
<div className="text-gray-600">{taskDetail.accountType === 1 ? "业务号" : "人设号"}</div>
</div>
<div>
<div className="font-medium mb-1">同步类型</div>
<div className="text-gray-600">{taskDetail.syncType === 1 ? "循环同步" : "实时更新"}</div>
</div>
<div>
<div className="font-medium mb-1">同步间隔</div>
<div className="text-gray-600">{taskDetail.syncInterval} 分钟</div>
</div>
<div>
<div className="font-medium mb-1">每日同步数量</div>
<div className="text-gray-600">{taskDetail.syncCount} 条</div>
</div>
<div>
<div className="font-medium mb-1">允许发布时间段</div>
<div className="text-gray-600">{taskDetail.startTime} - {taskDetail.endTime}</div>
</div>
<div>
<div className="font-medium mb-1">内容库</div>
<div className="flex flex-wrap gap-2 mt-1">
{taskDetail.contentLibraries.map((lib) => (
<Badge key={lib.id} variant="outline" className="bg-blue-50">
{lib.name}
</Badge>
))}
</div>
</div>
</div>
</Card>
</TabsContent>
<TabsContent value="devices" className="mt-4">
<Card className="p-4">
{taskDetail.devices.length === 0 ? (
<div className="text-center py-8 text-gray-500">暂无关联设备</div>
) : (
<div className="divide-y">
{taskDetail.devices.map((device) => (
<div key={device.id} className="flex items-center py-3 first:pt-0 last:pb-0">
<Avatar className="h-10 w-10 mr-3">
{device.avatar ? (
<img src={device.avatar} alt={device.name} />
) : (
<div className="bg-blue-100 text-blue-600 h-full w-full flex items-center justify-center">
{device.name.charAt(0)}
</div>
)}
</Avatar>
<div>
<div className="font-medium">{device.name}</div>
<div className="text-xs text-gray-500">ID: {device.id}</div>
</div>
</div>
))}
</div>
)}
</Card>
</TabsContent>
<TabsContent value="history" className="mt-4">
<Card className="p-4">
<div className="flex items-center justify-between mb-4">
<h3 className="font-medium">同步历史</h3>
<Button variant="outline" size="sm" onClick={fetchSyncHistory}>
<RefreshCw className="h-4 w-4 mr-2" />
刷新
</Button>
</div>
{syncHistory.length === 0 ? (
<div className="text-center py-8 text-gray-500">暂无同步历史</div>
) : (
<div className="space-y-4">
{syncHistory.map((record) => (
<div key={record.id} className="border rounded-lg p-3">
<div className="flex items-center justify-between mb-2">
<div className="flex items-center">
{record.contentType === "text" && <FileText className="h-4 w-4 mr-2 text-gray-500" />}
{record.contentType === "image" && <img className="h-4 w-4 mr-2" src="/icons/image.svg" alt="图片" />}
{record.contentType === "video" && <img className="h-4 w-4 mr-2" src="/icons/video.svg" alt="视频" />}
<Badge variant={record.status === "success" ? "success" : "destructive"} className="text-xs">
{record.status === "success" ? "成功" : "失败"}
</Badge>
</div>
<div className="text-xs text-gray-500">{record.syncTime}</div>
</div>
<div className="text-sm text-gray-700 line-clamp-2">{record.content}</div>
{record.status === "failed" && record.errorMessage && (
<div className="mt-2 text-xs text-red-500">
错误信息: {record.errorMessage}
</div>
)}
</div>
))}
</div>
)}
</Card>
</TabsContent>
</Tabs>
</div>
{/* 删除确认对话框 */}
<AlertDialog open={showDeleteAlert} onOpenChange={setShowDeleteAlert}>
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>确认删除</AlertDialogTitle>
<AlertDialogDescription>
删除后，此任务将无法恢复。确定要删除吗？
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel>取消</AlertDialogCancel>
<AlertDialogAction onClick={handleDelete} className="bg-red-500 hover:bg-red-600">
删除
</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
</div>
)
}

25
Cunkebao/app/workspace/moments-sync/components/basic-settings.tsx
View File

@@ -13,6 +13,7 @@ interface BasicSettingsProps {
startTime: string
endTime: string
syncCount: number
syncInterval: number
accountType: "business" | "personal"
enabled: boolean
}
@@ -85,6 +86,30 @@ export function BasicSettings({ formData, onChange, onNext }: BasicSettingsProps
</div>
</div>
<div>
<div className="text-base font-medium mb-2">同步间隔</div>
<div className="flex items-center space-x-5">
<Button
variant="outline"
size="lg"
onClick={() => onChange({ syncInterval: Math.max(10, formData.syncInterval - 10) })}
className="h-12 w-12 rounded-xl bg-white border-gray-200"
>
<Minus className="h-5 w-5" />
</Button>
<span className="w-8 text-center text-lg font-medium">{formData.syncInterval}</span>
<Button
variant="outline"
size="lg"
onClick={() => onChange({ syncInterval: Math.min(120, formData.syncInterval + 10) })}
className="h-12 w-12 rounded-xl bg-white border-gray-200"
>
<Plus className="h-5 w-5" />
</Button>
<span className="text-gray-500">分钟</span>
</div>
</div>
<div>
<div className="text-base font-medium mb-2">账号类型</div>
<div className="flex space-x-4">

114
Cunkebao/app/workspace/moments-sync/components/content-library-selection-dialog.tsx Normal file
View File

@@ -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>
)
}

95
Cunkebao/app/workspace/moments-sync/new/page.tsx
View File

@@ -7,19 +7,34 @@ import { Button } from "@/components/ui/button"
import { StepIndicator } from "../components/step-indicator"
import { BasicSettings } from "../components/basic-settings"
import { DeviceSelectionDialog } from "../components/device-selection-dialog"
import { ContentLibrarySelectionDialog } from "../components/content-library-selection-dialog"
import { Input } from "@/components/ui/input"
import { toast } from "@/components/ui/use-toast"
import { api, ApiResponse } from "@/lib/api"
import { showToast } from "@/lib/toast"
// 定义基本设置表单数据类型，与BasicSettings组件的formData类型匹配
interface BasicSettingsFormData {
taskName: string
startTime: string
endTime: string
syncCount: number
syncInterval: number
accountType: "business" | "personal"
enabled: boolean
}
export default function NewMomentsSyncPage() {
const router = useRouter()
const [currentStep, setCurrentStep] = useState(1)
const [deviceDialogOpen, setDeviceDialogOpen] = useState(false)
const [libraryDialogOpen, setLibraryDialogOpen] = useState(false)
const [formData, setFormData] = useState({
taskName: "",
startTime: "06:00",
endTime: "23:59",
syncCount: 5,
accountType: "business" as const,
syncInterval: 30, // 同步间隔，默认30分钟
accountType: "business" as "business" | "personal",
enabled: true,
selectedDevices: [] as string[],
selectedLibraries: [] as string[],
@@ -29,6 +44,11 @@ export default function NewMomentsSyncPage() {
setFormData((prev) => ({ ...prev, ...data }))
}
// 专门用于基本设置的更新函数
const handleBasicSettingsUpdate = (data: Partial<BasicSettingsFormData>) => {
setFormData((prev) => ({ ...prev, ...data }))
}
const handleNext = () => {
setCurrentStep((prev) => Math.min(prev + 1, 3))
}
@@ -38,13 +58,31 @@ export default function NewMomentsSyncPage() {
}
const handleComplete = async () => {
console.log("Form submitted:", formData)
await new Promise((resolve) => setTimeout(resolve, 1000))
toast({
title: "创建成<E5BBBA><E68890><EFBFBD>",
description: "朋友圈同步任务已创建并开始执行",
})
router.push("/workspace/moments-sync")
try {
const response = await api.post<ApiResponse>('/v1/workbench/create', {
type: 2, // 朋友圈同步任务类型为2
name: formData.taskName,
syncInterval: formData.syncInterval,
syncCount: formData.syncCount,
syncType: formData.accountType === "business" ? 1 : 2, // 业务号为1，人设号为2
startTime: formData.startTime,
endTime: formData.endTime,
accountType: formData.accountType === "business" ? 1 : 2,
status: formData.enabled ? 1 : 0, // 状态：0=禁用，1=启用
devices: formData.selectedDevices,
contentLibraries: formData.selectedLibraries
});
if (response.code === 200) {
showToast(response.msg || "创建成功", "success");
router.push("/workspace/moments-sync");
} else {
showToast(response.msg || "请稍后再试", "error");
}
} catch (error: any) {
console.error("创建朋友圈同步任务失败:", error);
showToast(error?.message || "请检查网络连接或稍后再试", "error");
}
}
return (
@@ -63,7 +101,19 @@ export default function NewMomentsSyncPage() {
<div className="mt-8">
{currentStep === 1 && (
<BasicSettings formData={formData} onChange={handleUpdateFormData} onNext={handleNext} />
<BasicSettings
formData={{
taskName: formData.taskName,
startTime: formData.startTime,
endTime: formData.endTime,
syncCount: formData.syncCount,
syncInterval: formData.syncInterval,
accountType: formData.accountType,
enabled: formData.enabled
}}
onChange={handleBasicSettingsUpdate}
onNext={handleNext}
/>
)}
{currentStep === 2 && (
@@ -75,6 +125,7 @@ export default function NewMomentsSyncPage() {
className="h-12 pl-11 rounded-xl border-gray-200 text-base"
onClick={() => setDeviceDialogOpen(true)}
readOnly
value={formData.selectedDevices.length > 0 ? `已选择 ${formData.selectedDevices.length} 个设备` : ""}
/>
</div>
@@ -89,6 +140,7 @@ export default function NewMomentsSyncPage() {
<Button
onClick={handleNext}
className="flex-1 h-12 bg-blue-600 hover:bg-blue-700 rounded-xl text-base shadow-sm"
disabled={formData.selectedDevices.length === 0}
>
下一步
</Button>
@@ -110,9 +162,19 @@ export default function NewMomentsSyncPage() {
<div className="space-y-6 px-6">
<div className="relative">
<Search className="absolute left-3 top-4 h-5 w-5 text-gray-400" />
<Input placeholder="选择内容库" className="h-12 pl-11 rounded-xl border-gray-200 text-base" />
<Input
placeholder="选择内容库"
className="h-12 pl-11 rounded-xl border-gray-200 text-base"
onClick={() => setLibraryDialogOpen(true)}
readOnly
value={formData.selectedLibraries.length > 0 ? `已选择 ${formData.selectedLibraries.length} 个内容库` : ""}
/>
</div>
{formData.selectedLibraries.length > 0 && (
<div className="text-base text-gray-500">已选内容库：{formData.selectedLibraries.length} 个</div>
)}
<div className="flex space-x-4 pt-4">
<Button variant="outline" onClick={handlePrev} className="flex-1 h-12 rounded-xl text-base">
上一步
@@ -120,10 +182,21 @@ export default function NewMomentsSyncPage() {
<Button
onClick={handleComplete}
className="flex-1 h-12 bg-blue-600 hover:bg-blue-700 rounded-xl text-base shadow-sm"
disabled={formData.selectedLibraries.length === 0}
>
完成
</Button>
</div>
<ContentLibrarySelectionDialog
open={libraryDialogOpen}
onOpenChange={setLibraryDialogOpen}
selectedLibraries={formData.selectedLibraries}
onSelect={(libraries) => {
handleUpdateFormData({ selectedLibraries: libraries })
setLibraryDialogOpen(false)
}}
/>
</div>
)}
</div>

340
Cunkebao/app/workspace/moments-sync/page.tsx
View File

@@ -1,7 +1,7 @@
"use client"
import { useState } from "react"
import { ChevronLeft, Plus, Filter, Search, RefreshCw, MoreVertical, Clock, Edit, Trash2, Eye } from "lucide-react"
import { useState, useEffect } from "react"
import { ChevronLeft, Plus, Filter, Search, RefreshCw, MoreVertical, Clock, Edit, Trash2, Eye, Copy } from "lucide-react"
import { Card } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
@@ -10,6 +10,18 @@ import { Badge } from "@/components/ui/badge"
import { useRouter } from "next/navigation"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
import { Switch } from "@/components/ui/switch"
import { api, ApiResponse } from "@/lib/api"
import { showToast } from "@/lib/toast"
import {
AlertDialog,
AlertDialogAction,
AlertDialogCancel,
AlertDialogContent,
AlertDialogDescription,
AlertDialogFooter,
AlertDialogHeader,
AlertDialogTitle
} from "@/components/ui/alert-dialog"
interface SyncTask {
id: string
@@ -21,55 +33,146 @@ interface SyncTask {
lastSyncTime: string
createTime: string
creator: string
libraries?: string[]
}
export default function MomentsSyncPage() {
const router = useRouter()
const [tasks, setTasks] = useState<SyncTask[]>([
{
id: "1",
name: "同步卡若主号",
deviceCount: 2,
contentLib: "卡若朋友圈",
syncCount: 307,
lastSyncTime: "2025-02-06 13:12:35",
createTime: "2024-11-20 19:04:14",
creator: "karuo",
status: "running",
},
{
id: "2",
name: "暗黑4业务",
deviceCount: 1,
contentLib: "暗黑4代练",
syncCount: 622,
lastSyncTime: "2024-03-04 14:09:35",
createTime: "2024-03-04 14:29:04",
creator: "lkdie",
status: "paused",
},
])
const [tasks, setTasks] = useState<SyncTask[]>([])
const [isLoading, setIsLoading] = useState(true)
const [searchQuery, setSearchQuery] = useState("")
const [showDeleteAlert, setShowDeleteAlert] = useState(false)
const [taskToDelete, setTaskToDelete] = useState<string | null>(null)
const handleDelete = (taskId: string) => {
setTasks(tasks.filter((task) => task.id !== taskId))
// 获取任务列表
const fetchTasks = async () => {
const loadingToast = showToast("正在加载任务列表...", "loading", true);
setIsLoading(true)
try {
const response = await api.get<ApiResponse>('/v1/workbench/list?type=2')
if (response.code === 200 && response.data) {
setTasks(response.data.list || [])
} else {
showToast(response.msg || "获取任务列表失败", "error")
}
} catch (error: any) {
console.error("获取朋友圈同步任务列表失败:", error)
showToast(error?.message || "请检查网络连接", "error")
} finally {
loadingToast.remove();
setIsLoading(false)
}
}
// 组件加载时获取任务列表
useEffect(() => {
fetchTasks()
}, [])
// 搜索任务
const handleSearch = () => {
fetchTasks()
}
// 切换任务状态
const toggleTaskStatus = async (taskId: string, currentStatus: "running" | "paused") => {
const loadingToast = showToast("正在更新任务状态...", "loading", true);
try {
const newStatus = currentStatus === "running" ? "paused" : "running"
const response = await api.post<ApiResponse>('/v1/workbench/update-status', {
id: taskId,
status: newStatus === "running" ? 1 : 0
})
if (response.code === 200) {
setTasks(
tasks.map((task) =>
task.id === taskId ? { ...task, status: newStatus } : task
)
)
loadingToast.remove();
showToast(`任务已${newStatus === "running" ? "启用" : "暂停"}`, "success")
} else {
loadingToast.remove();
showToast(response.msg || "操作失败", "error")
}
} catch (error: any) {
console.error("更新任务状态失败:", error)
loadingToast.remove();
showToast(error?.message || "更新任务状态失败", "error")
}
}
// 确认删除
const confirmDelete = (taskId: string) => {
setTaskToDelete(taskId)
setShowDeleteAlert(true)
}
// 执行删除
const handleDelete = async () => {
if (!taskToDelete) return
const loadingToast = showToast("正在删除任务...", "loading", true);
try {
const response = await api.delete<ApiResponse>(`/v1/workbench/delete?id=${taskToDelete}`)
if (response.code === 200) {
setTasks(tasks.filter((task) => task.id !== taskToDelete))
loadingToast.remove();
showToast("删除成功", "success")
} else {
loadingToast.remove();
showToast(response.msg || "删除失败", "error")
}
} catch (error: any) {
console.error("删除任务失败:", error)
loadingToast.remove();
showToast(error?.message || "删除任务失败", "error")
} finally {
setTaskToDelete(null)
setShowDeleteAlert(false)
}
}
// 编辑任务
const handleEdit = (taskId: string) => {
router.push(`/workspace/moments-sync/${taskId}/edit`)
}
// 查看任务详情
const handleView = (taskId: string) => {
router.push(`/workspace/moments-sync/${taskId}`)
}
const toggleTaskStatus = (taskId: string) => {
setTasks(
tasks.map((task) =>
task.id === taskId ? { ...task, status: task.status === "running" ? "paused" : "running" } : task,
),
)
// 复制任务
const handleCopy = async (taskId: string) => {
const loadingToast = showToast("正在复制任务...", "loading", true);
try {
const response = await api.post<ApiResponse>('/v1/workbench/copy', {
id: taskId
})
if (response.code === 200) {
loadingToast.remove();
showToast("复制成功", "success")
fetchTasks() // 重新获取列表
} else {
loadingToast.remove();
showToast(response.msg || "复制失败", "error")
}
} catch (error: any) {
console.error("复制任务失败:", error)
loadingToast.remove();
showToast(error?.message || "复制任务失败", "error")
}
}
// 过滤任务
const filteredTasks = tasks.filter(
(task) => task.name.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">
@@ -94,75 +197,132 @@ export default function MomentsSyncPage() {
<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="搜索任务名称" className="pl-9" />
<Input
placeholder="搜索任务名称"
className="pl-9"
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
onKeyDown={(e) => e.key === 'Enter' && handleSearch()}
/>
</div>
<Button variant="outline" size="icon">
<Button variant="outline" size="icon" onClick={handleSearch}>
<Filter className="h-4 w-4" />
</Button>
<Button variant="outline" size="icon">
<RefreshCw className="h-4 w-4" />
<Button
variant="outline"
size="icon"
onClick={fetchTasks}
disabled={isLoading}
>
<RefreshCw className={`h-4 w-4 ${isLoading ? 'animate-spin' : ''}`} />
</Button>
</div>
</Card>
<div className="space-y-4">
{tasks.map((task) => (
<Card key={task.id} className="p-4">
<div className="flex items-center justify-between mb-4">
<div className="flex items-center space-x-2">
<h3 className="font-medium">{task.name}</h3>
<Badge variant={task.status === "running" ? "success" : "secondary"}>
{task.status === "running" ? "进行中" : "已暂停"}
</Badge>
{isLoading ? (
<div className="flex justify-center items-center py-12">
<div className="flex flex-col items-center">
<RefreshCw className="h-8 w-8 text-blue-500 animate-spin mb-4" />
<p className="text-gray-500">加载中...</p>
</div>
</div>
) : filteredTasks.length === 0 ? (
<div className="flex justify-center items-center py-12">
<div className="flex flex-col items-center">
<p className="text-gray-500 mb-4">暂无数据</p>
<Link href="/workspace/moments-sync/new">
<Button size="sm">
<Plus className="h-4 w-4 mr-2" />
新建任务
</Button>
</Link>
</div>
</div>
) : (
<div className="space-y-4">
{filteredTasks.map((task) => (
<Card key={task.id} className="p-4">
<div className="flex items-center justify-between mb-4">
<div className="flex items-center space-x-2">
<h3 className="font-medium">{task.name}</h3>
<Badge variant={task.status === 1 ? "success" : "secondary"}>
{task.status === "running" ? "进行中" : "已暂停"}
</Badge>
</div>
<div className="flex items-center space-x-2">
<Switch
checked={task.status === 1}
onCheckedChange={() => toggleTaskStatus(task.id, task.status)}
/>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="ghost" size="sm">
<MoreVertical className="h-4 w-4" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuItem onClick={() => handleView(task.id)}>
<Eye className="h-4 w-4 mr-2" />
查看
</DropdownMenuItem>
<DropdownMenuItem onClick={() => handleEdit(task.id)}>
<Edit className="h-4 w-4 mr-2" />
编辑
</DropdownMenuItem>
<DropdownMenuItem onClick={() => handleCopy(task.id)}>
<Copy className="h-4 w-4 mr-2" />
复制
</DropdownMenuItem>
<DropdownMenuItem onClick={() => confirmDelete(task.id)}>
<Trash2 className="h-4 w-4 mr-2" />
删除
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</div>
</div>
<div className="flex items-center space-x-2">
<Switch checked={task.status === "running"} onCheckedChange={() => toggleTaskStatus(task.id)} />
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="ghost" size="sm">
<MoreVertical className="h-4 w-4" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuItem onClick={() => handleView(task.id)}>
<Eye className="h-4 w-4 mr-2" />
查看
</DropdownMenuItem>
<DropdownMenuItem onClick={() => handleEdit(task.id)}>
<Edit className="h-4 w-4 mr-2" />
编辑
</DropdownMenuItem>
<DropdownMenuItem onClick={() => handleDelete(task.id)}>
<Trash2 className="h-4 w-4 mr-2" />
删除
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</div>
</div>
<div className="grid grid-cols-2 gap-4 mb-4">
<div className="text-sm text-gray-500">
<div>推送设备：{task.deviceCount} 个</div>
<div>内容库：{task.contentLib}</div>
<div className="grid grid-cols-2 gap-4 mb-4">
<div className="text-sm text-gray-500">
<div>推送设备：{task.deviceCount} 个</div>
<div>内容库：{task.contentLib}</div>
</div>
<div className="text-sm text-gray-500">
<div>已同步：{task.syncCount} 条</div>
<div>创建人：{task.creator}</div>
</div>
</div>
<div className="text-sm text-gray-500">
<div>已同步：{task.syncCount} 条</div>
<div>创建人：{task.creator}</div>
</div>
</div>
<div className="flex items-center justify-between text-xs text-gray-500 border-t pt-4">
<div className="flex items-center">
<Clock className="w-4 h-4 mr-1" />
上次同步：{task.lastSyncTime}
<div className="flex items-center justify-between text-xs text-gray-500 border-t pt-4">
<div className="flex items-center">
<Clock className="w-4 h-4 mr-1" />
上次同步：{task.lastSyncTime}
</div>
<div>创建时间：{task.createTime}</div>
</div>
<div>创建时间：{task.createTime}</div>
</div>
</Card>
))}
</div>
</Card>
))}
</div>
)}
</div>
{/* 删除确认对话框 */}
<AlertDialog open={showDeleteAlert} onOpenChange={setShowDeleteAlert}>
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>确认删除</AlertDialogTitle>
<AlertDialogDescription>
删除后，此任务将无法恢复。确定要删除吗？
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel>取消</AlertDialogCancel>
<AlertDialogAction onClick={handleDelete} className="bg-red-500 hover:bg-red-600">
删除
</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
</div>
)
}

1
Cunkebao/components/ui/badge.tsx
View File

@@ -12,6 +12,7 @@ const badgeVariants = cva(
secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
destructive: "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
outline: "text-foreground",
success: "border-transparent bg-green-500 text-white shadow hover:bg-green-600",
},
},
defaultVariants: {