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

This commit is contained in:
wong
2025-04-17 09:46:47 +08:00
parent 4f0ea36691
commit dbeb0aa559
23 changed files with 687 additions and 423 deletions

View File

@@ -1,6 +1,6 @@
"use client"
import { useState, useEffect } from "react"
import { useState, useEffect, use } from "react"
import { useRouter } from "next/navigation"
import { ChevronLeft, Search } from "lucide-react"
import { Button } from "@/components/ui/button"
@@ -38,7 +38,8 @@ interface Task {
config: TaskConfig
}
export default function EditAutoLikePage({ params }: { params: { id: string } }) {
export default function EditAutoLikePage({ params }: { params: Promise<{ id: string }> }) {
const resolvedParams = use(params)
const router = useRouter()
const [currentStep, setCurrentStep] = useState(1)
const [deviceDialogOpen, setDeviceDialogOpen] = useState(false)
@@ -62,7 +63,7 @@ export default function EditAutoLikePage({ params }: { params: { id: string } })
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}`)
const response = await api.get<{code: number, msg: string, data: Task}>(`/v1/workbench/detail?id=${resolvedParams.id}`)
if (response.code === 200 && response.data) {
const task = response.data
@@ -110,7 +111,7 @@ export default function EditAutoLikePage({ params }: { params: { id: string } })
const loadingToast = showToast("正在更新任务...", "loading", true);
try {
const response = await api.post<ApiResponse>('/v1/workbench/update', {
id: params.id,
id: resolvedParams.id,
type: 1,
name: formData.taskName,
interval: formData.likeInterval,

View File

@@ -1,6 +1,6 @@
"use client"
import { useState, useEffect } from "react"
import { useState, useEffect, use } from "react"
import { useRouter } from "next/navigation"
import { ChevronLeft, Search } from "lucide-react"
import { Button } from "@/components/ui/button"
@@ -12,18 +12,23 @@ import { Input } from "@/components/ui/input"
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
interface Task {
id: string
name: string
status: number
config: {
startTime: string
endTime: string
syncCount: number
syncInterval: number
syncType: number
devices: string[]
contentLibraries: string[]
}
}
export default function EditMomentsSyncPage({ params }: { params: { id: string } }) {
export default function EditMomentsSyncPage({ params }: { params: Promise<{ id: string }> }) {
const resolvedParams = use(params)
const router = useRouter()
const [currentStep, setCurrentStep] = useState(1)
const [deviceDialogOpen, setDeviceDialogOpen] = useState(false)
@@ -34,31 +39,30 @@ export default function EditMomentsSyncPage({ params }: { params: { id: string }
startTime: "06:00",
endTime: "23:59",
syncCount: 5,
syncInterval: 30, // 同步间隔默认30分钟
syncInterval: 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}`)
const response = await api.get<{code: number, msg: string, data: Task}>(`/v1/workbench/detail?id=${resolvedParams.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 || [],
startTime: taskData.config.startTime || "06:00",
endTime: taskData.config.endTime || "23:59",
syncCount: taskData.config.syncCount || 5,
syncInterval: taskData.config.syncInterval || 30,
accountType: taskData.config.syncType === 1 ? "business" : "personal",
enabled: !!taskData.status,
selectedDevices: taskData.config.devices || [],
selectedLibraries: taskData.config.contentLibraries || [],
})
} else {
showToast(response.msg || "获取任务详情失败", "error")
@@ -74,17 +78,12 @@ export default function EditMomentsSyncPage({ params }: { params: { id: string }
}
fetchTaskDetail()
}, [params.id, router])
}, [resolvedParams.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))
}
@@ -96,16 +95,16 @@ export default function EditMomentsSyncPage({ params }: { params: { id: string }
const handleComplete = async () => {
try {
const response = await api.post<ApiResponse>('/v1/workbench/update', {
id: params.id,
type: 2, // 朋友圈同步任务类型为2
id: resolvedParams.id,
type: 2,
name: formData.taskName,
syncInterval: formData.syncInterval,
syncCount: formData.syncCount,
syncType: formData.accountType === "business" ? 1 : 2, // 业务号为1人设号为2
syncType: formData.accountType === "business" ? 1 : 2,
startTime: formData.startTime,
endTime: formData.endTime,
accountType: formData.accountType === "business" ? 1 : 2,
status: formData.enabled ? 1 : 0, // 状态0=禁用1=启用
status: formData.enabled ? 1 : 0,
devices: formData.selectedDevices,
contentLibraries: formData.selectedLibraries
});
@@ -150,16 +149,8 @@ export default function EditMomentsSyncPage({ params }: { params: { id: string }
<div className="mt-8">
{currentStep === 1 && (
<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}
formData={formData}
onChange={handleUpdateFormData}
onNext={handleNext}
/>
)}
@@ -249,21 +240,6 @@ export default function EditMomentsSyncPage({ params }: { params: { id: string }
)}
</div>
</div>
<nav className="fixed bottom-0 left-0 right-0 h-16 bg-white border-t flex items-center justify-around px-6">
<button className="flex flex-col items-center text-blue-600">
<span className="text-sm mt-1"></span>
</button>
<button className="flex flex-col items-center text-gray-400">
<span className="text-sm mt-1"></span>
</button>
<button className="flex flex-col items-center text-gray-400">
<span className="text-sm mt-1"></span>
</button>
<button className="flex flex-col items-center text-gray-400">
<span className="text-sm mt-1"></span>
</button>
</nav>
</div>
)
}

View File

@@ -6,6 +6,7 @@ import { Switch } from "@/components/ui/switch"
import { Plus, Minus, Clock, HelpCircle } from "lucide-react"
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
import { useViewMode } from "@/app/components/LayoutWrapper"
import { Label } from "@/components/ui/label"
interface BasicSettingsProps {
formData: {
@@ -24,163 +25,142 @@ interface BasicSettingsProps {
export function BasicSettings({ formData, onChange, onNext }: BasicSettingsProps) {
const { viewMode } = useViewMode()
const handleSyncCountChange = (delta: number) => {
const newValue = Math.max(1, formData.syncCount + delta)
onChange({ syncCount: newValue })
}
const handleSyncIntervalChange = (delta: number) => {
const newValue = Math.max(5, formData.syncInterval + delta)
onChange({ syncInterval: newValue })
}
return (
<div className={`space-y-6 ${viewMode === "desktop" ? "p-6" : "p-4"}`}>
<div className={`grid ${viewMode === "desktop" ? "grid-cols-2 gap-8" : "grid-cols-1 gap-4"}`}>
<div>
<div className="text-base font-medium mb-2"></div>
<Label htmlFor="taskName" className="text-base"></Label>
<Input
id="taskName"
value={formData.taskName}
onChange={(e) => onChange({ taskName: e.target.value })}
placeholder="请输入任务名称"
className="h-12 border-0 border-b border-gray-200 rounded-none focus-visible:ring-0 focus-visible:border-blue-600 px-0 text-base"
className="mt-1.5 h-12 rounded-xl"
/>
</div>
<div>
<div className="text-base font-medium mb-2"></div>
<div className="flex items-center space-x-4">
<div className="relative flex-1">
<Input
type="time"
value={formData.startTime}
onChange={(e) => onChange({ startTime: e.target.value })}
className="h-12 pl-10 rounded-xl border-gray-200 text-base"
/>
<Clock className="absolute left-3 top-4 h-4 w-4 text-gray-400" />
</div>
<span className="text-gray-500"></span>
<div className="relative flex-1">
<Input
type="time"
value={formData.endTime}
onChange={(e) => onChange({ endTime: e.target.value })}
className="h-12 pl-10 rounded-xl border-gray-200 text-base"
/>
<Clock className="absolute left-3 top-4 h-4 w-4 text-gray-400" />
</div>
<Label className="text-base"></Label>
<div className="flex items-center space-x-4 mt-1.5">
<Button
type="button"
variant="outline"
size="icon"
className="h-12 w-12 rounded-xl"
onClick={() => handleSyncCountChange(-1)}
>
<Minus className="h-4 w-4" />
</Button>
<div className="w-20 text-center text-base">{formData.syncCount}</div>
<Button
type="button"
variant="outline"
size="icon"
className="h-12 w-12 rounded-xl"
onClick={() => handleSyncCountChange(1)}
>
<Plus className="h-4 w-4" />
</Button>
<span className="text-gray-500">/</span>
</div>
</div>
<div>
<div className="text-base font-medium mb-2"></div>
<div className="flex items-center space-x-5">
<Label className="text-base"></Label>
<div className="flex items-center space-x-4 mt-1.5">
<Button
type="button"
variant="outline"
size="lg"
onClick={() => onChange({ syncCount: Math.max(1, formData.syncCount - 1) })}
className="h-12 w-12 rounded-xl bg-white border-gray-200"
size="icon"
className="h-12 w-12 rounded-xl"
onClick={() => handleSyncIntervalChange(-5)}
>
<Minus className="h-5 w-5" />
<Minus className="h-4 w-4" />
</Button>
<span className="w-8 text-center text-lg font-medium">{formData.syncCount}</span>
<div className="w-20 text-center text-base">{formData.syncInterval}</div>
<Button
type="button"
variant="outline"
size="lg"
onClick={() => onChange({ syncCount: formData.syncCount + 1 })}
className="h-12 w-12 rounded-xl bg-white border-gray-200"
size="icon"
className="h-12 w-12 rounded-xl"
onClick={() => handleSyncIntervalChange(5)}
>
<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 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" />
<Plus className="h-4 w-4" />
</Button>
<span className="text-gray-500"></span>
</div>
<p className="text-sm text-gray-500 mt-1.5"></p>
</div>
<div>
<div className="text-base font-medium mb-2"></div>
<div className="flex space-x-4">
<div className="flex-1 relative">
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<Button
variant="ghost"
onClick={() => onChange({ accountType: "business" })}
className={`w-full h-12 justify-between rounded-lg ${
formData.accountType === "business"
? "bg-blue-600 hover:bg-blue-600 text-white"
: "bg-white hover:bg-gray-50"
}`}
>
<HelpCircle
className={`h-4 w-4 ${formData.accountType === "business" ? "text-white/70" : "text-gray-400"}`}
/>
</Button>
</TooltipTrigger>
<TooltipContent className="max-w-[300px]">
<p>
</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
</div>
<div className="flex-1 relative">
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<Button
variant="ghost"
onClick={() => onChange({ accountType: "personal" })}
className={`w-full h-12 justify-between rounded-lg ${
formData.accountType === "personal"
? "bg-blue-600 hover:bg-blue-600 text-white"
: "bg-white hover:bg-gray-50"
}`}
>
<HelpCircle
className={`h-4 w-4 ${formData.accountType === "personal" ? "text-white/70" : "text-gray-400"}`}
/>
</Button>
</TooltipTrigger>
<TooltipContent>
<p></p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
</div>
<Label className="text-base"></Label>
<div className="grid grid-cols-2 gap-4 mt-1.5">
<Input
type="time"
value={formData.startTime}
onChange={(e) => onChange({ startTime: e.target.value })}
className="h-12 rounded-xl"
/>
<Input
type="time"
value={formData.endTime}
onChange={(e) => onChange({ endTime: e.target.value })}
className="h-12 rounded-xl"
/>
</div>
</div>
<div className="flex items-center justify-between py-2">
<span className="text-base font-medium"></span>
<div>
<Label className="text-base"></Label>
<div className="grid grid-cols-2 gap-4 mt-1.5">
<button
type="button"
className={`h-12 rounded-xl border ${
formData.accountType === "business"
? "border-blue-500 bg-blue-50 text-blue-600"
: "border-gray-200 text-gray-600"
}`}
onClick={() => onChange({ accountType: "business" })}
>
</button>
<button
type="button"
className={`h-12 rounded-xl border ${
formData.accountType === "personal"
? "border-blue-500 bg-blue-50 text-blue-600"
: "border-gray-200 text-gray-600"
}`}
onClick={() => onChange({ accountType: "personal" })}
>
</button>
</div>
</div>
<div className="flex items-center justify-between">
<Label className="text-base"></Label>
<Switch
checked={formData.enabled}
onCheckedChange={(checked) => onChange({ enabled: checked })}
className="data-[state=checked]:bg-blue-600 h-7 w-12"
/>
</div>
</div>
<Button
onClick={onNext}
className="w-full h-12 bg-blue-600 hover:bg-blue-700 rounded-xl text-base font-medium shadow-sm"
className="w-full h-12 bg-blue-600 hover:bg-blue-700 rounded-xl text-base shadow-sm"
disabled={!formData.taskName}
>
</Button>

View File

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

View File

@@ -1,58 +1,51 @@
"use client"
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 { Badge } from "@/components/ui/badge"
import { Search, RefreshCw, Loader2 } from "lucide-react"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
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 ServerDevice {
id: number
imei: string
memo: string
wechatId: string
alive: number
totalFriend: number
}
interface Device {
id: number
id: string
name: string
imei: string
wxid: string
status: "online" | "offline"
totalFriend: number
wechatId: string
memo?: string
alive: number
usedInPlans: number
lastActiveTime: string
}
interface DeviceSelectionDialogProps {
open: boolean
onOpenChange: (open: boolean) => void
selectedDevices: number[]
onSelect: (devices: number[]) => void
selectedDevices: string[]
onSelect: (devices: string[]) => void
}
export function DeviceSelectionDialog({ open, onOpenChange, selectedDevices, onSelect }: DeviceSelectionDialogProps) {
export function DeviceSelectionDialog({
open,
onOpenChange,
selectedDevices,
onSelect,
}: DeviceSelectionDialogProps) {
const [searchQuery, setSearchQuery] = useState("")
const [statusFilter, setStatusFilter] = useState("all")
const [devices, setDevices] = useState<Device[]>([])
const [loading, setLoading] = useState(false)
const [tempSelectedDevices, setTempSelectedDevices] = useState<number[]>(selectedDevices)
useEffect(() => {
if (open) {
setTempSelectedDevices(selectedDevices)
fetchDevices()
}
}, [open, selectedDevices])
const [devices, setDevices] = useState<Device[]>([])
const [tempSelected, setTempSelected] = useState<string[]>([])
// 获取设备列表
const fetchDevices = async () => {
const loadingToast = showToast("正在加载设备列表...", "loading", true);
setLoading(true)
try {
setLoading(true)
const response = await api.get<{code: number, msg: string, data: {list: ServerDevice[], total: number}}>('/v1/devices?page=1&limit=100')
@@ -71,58 +64,75 @@ export function DeviceSelectionDialog({ open, onOpenChange, selectedDevices, onS
showToast(response.msg || "获取设备列表失败", "error")
}
} catch (error: any) {
console.error('获取设备列表失败:', error)
console.error("获取设备列表失败:", error)
showToast(error?.message || "请检查网络连接", "error")
} finally {
loadingToast.remove();
setLoading(false)
}
}
useEffect(() => {
if (open) {
fetchDevices()
setTempSelected(selectedDevices)
}
}, [open, searchQuery, selectedDevices])
const handleRefresh = () => {
fetchDevices()
}
const handleDeviceToggle = (deviceId: number, checked: boolean) => {
if (checked) {
setTempSelectedDevices(prev => [...prev, deviceId])
} else {
setTempSelectedDevices(prev => prev.filter(id => id !== deviceId))
}
}
const handleConfirm = () => {
onSelect(tempSelectedDevices)
onOpenChange(false)
}
// 过滤设备列表
const filteredDevices = devices.filter(device => {
const matchesSearch = searchQuery === "" ||
const matchesSearch = !searchQuery ||
device.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
device.imei.toLowerCase().includes(searchQuery.toLowerCase()) ||
device.wxid.toLowerCase().includes(searchQuery.toLowerCase())
device.wechatId.toLowerCase().includes(searchQuery.toLowerCase())
const matchesStatus = statusFilter === "all" || device.status === statusFilter
const matchesStatus = statusFilter === "all" ||
(statusFilter === "online" && device.alive === 1) ||
(statusFilter === "offline" && device.alive === 0)
return matchesSearch && matchesStatus
})
const handleDialogOpenChange = (open: boolean) => {
if (!open) {
setTempSelected(selectedDevices)
}
onOpenChange(open)
}
const handleSelectAll = () => {
if (tempSelected.length === filteredDevices.length) {
setTempSelected([])
} else {
setTempSelected(filteredDevices.map(device => device.id))
}
}
const handleDeviceToggle = (deviceId: string) => {
setTempSelected(prev =>
prev.includes(deviceId)
? prev.filter(id => id !== deviceId)
: [...prev, deviceId]
)
}
return (
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent className="max-w-2xl max-h-[80vh] flex flex-col">
<Dialog open={open} onOpenChange={handleDialogOpenChange}>
<DialogContent className="max-w-2xl">
<DialogHeader>
<DialogTitle></DialogTitle>
</DialogHeader>
<div className="flex items-center space-x-4 my-4">
<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="搜索设备IMEI/备注/微信号"
className="pl-9"
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
className="pl-9"
/>
</div>
<Select value={statusFilter} onValueChange={setStatusFilter}>
@@ -140,45 +150,75 @@ export function DeviceSelectionDialog({ open, onOpenChange, selectedDevices, onS
</Button>
</div>
<ScrollArea className="flex-1">
{loading ? (
<div className="flex justify-center items-center py-8">
<Loader2 className="h-8 w-8 animate-spin text-blue-500" />
</div>
) : (
<div className="space-y-2">
{filteredDevices.map((device) => (
<label
<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 || filteredDevices.length === 0}
>
{tempSelected.length === filteredDevices.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>
) : filteredDevices.length === 0 ? (
<div className="flex items-center justify-center h-full text-gray-500">
</div>
) : (
filteredDevices.map((device) => (
<Label
key={device.id}
className="flex items-center space-x-3 p-4 rounded-lg hover:bg-gray-50 cursor-pointer"
style={{paddingLeft: '0px',paddingRight: '0px'}}
className="flex items-center justify-between p-4 rounded-lg border hover:bg-gray-50 cursor-pointer"
htmlFor={device.id}
>
<Checkbox
checked={tempSelectedDevices.includes(device.id)}
onCheckedChange={(checked) => handleDeviceToggle(device.id, checked as boolean)}
className="h-5 w-5"
/>
<div className="flex-1">
<div className="flex items-center justify-between">
<span className="font-medium">{device.name}</span>
<Badge variant={device.status === "online" ? "default" : "secondary"}>
{device.status === "online" ? "在线" : "离线"}
</Badge>
</div>
<div className="text-sm text-gray-500 mt-1">
<div>IMEI: {device.imei || '--'}</div>
<div>: {device.wxid || '--'}</div>
<div>: {device.totalFriend}</div>
<div className="flex items-center space-x-3 flex-1 min-w-0">
<Checkbox
id={device.id}
checked={tempSelected.includes(device.id)}
onCheckedChange={() => handleDeviceToggle(device.id)}
/>
<div className="min-w-0 flex-1">
<div className="font-medium truncate mb-1">{device.memo || device.imei}</div>
<div className="text-sm text-gray-500 truncate mb-1">IMEI: {device.imei}</div>
<div className="text-sm text-gray-500 truncate">{device.wechatId ? `微信号: ${device.wechatId}` : ''}</div>
{device.usedInPlans > 0 && (
<div className="text-sm text-orange-500 mt-1">
{device.usedInPlans}
</div>
)}
</div>
</div>
</label>
))}
</div>
)}
<Badge variant={device.alive === 1 ? "default" : "secondary"}>
{device.alive === 1 ? "在线" : "离线"}
</Badge>
</Label>
))
)}
</div>
</ScrollArea>
<DialogFooter className="mt-4 flex gap-4 -mx-6 px-6">
<Button className="flex-1" onClick={handleConfirm}></Button>
<DialogFooter className="mt-4">
{/* <Button variant="outline" onClick={() => handleDialogOpenChange(false)}>
取消
</Button> */}
<Button onClick={() => {
onSelect(tempSelected)
onOpenChange(false)
}}>
{tempSelected.length > 0 ? ` (${tempSelected.length})` : ''}
</Button>
</DialogFooter>
</DialogContent>
</Dialog>

View File

@@ -201,21 +201,6 @@ export default function NewMomentsSyncPage() {
)}
</div>
</div>
<nav className="fixed bottom-0 left-0 right-0 h-16 bg-white border-t flex items-center justify-around px-6">
<button className="flex flex-col items-center text-blue-600">
<span className="text-sm mt-1"></span>
</button>
<button className="flex flex-col items-center text-gray-400">
<span className="text-sm mt-1"></span>
</button>
<button className="flex flex-col items-center text-gray-400">
<span className="text-sm mt-1"></span>
</button>
<button className="flex flex-col items-center text-gray-400">
<span className="text-sm mt-1"></span>
</button>
</nav>
</div>
)
}

View File

@@ -34,8 +34,11 @@ interface SyncTask {
lastSyncTime: string
createTime: string
creator: string
libraries?: string[]
devices?: string[]
config: {
devices: string[]
contentLibraryNames: string[]
}
creatorName: string
}
export default function MomentsSyncPage() {
@@ -309,19 +312,19 @@ export default function MomentsSyncPage() {
<div className="grid grid-cols-2 gap-4 mb-4">
<div className="text-sm text-gray-500">
<div>{task.devices?.length || 0} </div>
<div>{task.contentLib}</div>
<div>{task.config.devices.length || 0} </div>
<div className="truncate">{task.config.contentLibraryNames?.join('、') || '--'}</div>
</div>
<div className="text-sm text-gray-500">
<div>{task.syncCount} </div>
<div>{task.creator}</div>
<div>{task.syncCount || 0} </div>
<div>{task.creatorName}</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}
{task.lastSyncTime || '--'}
</div>
<div>{task.createTime}</div>
</div>