存客宝 React
This commit is contained in:
柳清爽
138
Cunkebao/app/workspace/moments-sync/new/steps/BasicSettings.tsx
Normal file
138
Cunkebao/app/workspace/moments-sync/new/steps/BasicSettings.tsx
Normal file
@@ -0,0 +1,138 @@
|
||||
"use client"
|
||||
|
||||
import { Card } from "@/components/ui/card"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Label } from "@/components/ui/label"
|
||||
import { Switch } from "@/components/ui/switch"
|
||||
import { Minus, Plus, HelpCircle } from "lucide-react"
|
||||
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
|
||||
|
||||
interface BasicSettingsProps {
|
||||
formData: any
|
||||
onChange: (data: any) => void
|
||||
onNext: () => void
|
||||
}
|
||||
|
||||
export function BasicSettings({ formData, onChange, onNext }: BasicSettingsProps) {
|
||||
return (
|
||||
<Card className="p-6">
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<Label htmlFor="taskName" className="required">
|
||||
任务名称
|
||||
</Label>
|
||||
<Input
|
||||
id="taskName"
|
||||
value={formData.taskName}
|
||||
onChange={(e) => onChange({ ...formData, taskName: e.target.value })}
|
||||
placeholder="请输入任务名称"
|
||||
className="mt-2"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label>允许发布的时间段</Label>
|
||||
<div className="flex items-center space-x-2 mt-2">
|
||||
<Input
|
||||
type="time"
|
||||
value={formData.startTime}
|
||||
onChange={(e) => onChange({ ...formData, startTime: e.target.value })}
|
||||
className="w-32"
|
||||
/>
|
||||
<span>至</span>
|
||||
<Input
|
||||
type="time"
|
||||
value={formData.endTime}
|
||||
onChange={(e) => onChange({ ...formData, endTime: e.target.value })}
|
||||
className="w-32"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label>每日同步数量</Label>
|
||||
<div className="flex items-center space-x-4 mt-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
onClick={() => onChange({ ...formData, syncCount: Math.max(1, formData.syncCount - 1) })}
|
||||
aria-label="减少同步数量"
|
||||
>
|
||||
<Minus className="h-4 w-4" />
|
||||
</Button>
|
||||
<span className="w-12 text-center">{formData.syncCount}</span>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
onClick={() => onChange({ ...formData, syncCount: formData.syncCount + 1 })}
|
||||
aria-label="增加同步数量"
|
||||
>
|
||||
<Plus className="h-4 w-4" />
|
||||
</Button>
|
||||
<span className="text-gray-500">条朋友圈</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label>账号类型</Label>
|
||||
<div className="flex space-x-4 mt-2">
|
||||
<div className="flex items-center">
|
||||
<Button
|
||||
variant={formData.accountType === "business" ? "default" : "outline"}
|
||||
onClick={() => onChange({ ...formData, accountType: "business" })}
|
||||
className="w-24"
|
||||
>
|
||||
业务号
|
||||
</Button>
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<HelpCircle className="h-4 w-4 ml-2 text-gray-400" />
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<p>
|
||||
业务号能够循环推送内容库中的内容。当内容库所有内容循环推送完毕后，若有新内容则优先推送新内容，若无新内容则继续循环推送。
|
||||
</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<Button
|
||||
variant={formData.accountType === "personal" ? "default" : "outline"}
|
||||
onClick={() => onChange({ ...formData, accountType: "personal" })}
|
||||
className="w-24"
|
||||
>
|
||||
人设号
|
||||
</Button>
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<HelpCircle className="h-4 w-4 ml-2 text-gray-400" />
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<p>人设号用于实时更新同步，有新动态时进行同步，无新动态则不同步。</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
<Label>是否启用</Label>
|
||||
<Switch
|
||||
checked={formData.enabled}
|
||||
onCheckedChange={(checked) => onChange({ ...formData, enabled: checked })}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Button className="w-full" onClick={onNext}>
|
||||
下一步
|
||||
</Button>
|
||||
</div>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -0,0 +1,280 @@
|
||||
"use client"
|
||||
|
||||
import { useState, useEffect } from "react"
|
||||
import { Card } from "@/components/ui/card"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Search, RefreshCw } from "lucide-react"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"
|
||||
import { toast } from "@/components/ui/use-toast"
|
||||
|
||||
// 定义类型，避免导入错误
|
||||
interface ContentLibrary {
|
||||
id: string
|
||||
name: string
|
||||
source: string
|
||||
creator: string
|
||||
contentCount: number
|
||||
lastUpdated: string
|
||||
type: string
|
||||
status: string
|
||||
}
|
||||
|
||||
interface ContentLibraryResponse {
|
||||
code: number
|
||||
message: string
|
||||
data: {
|
||||
libraries: ContentLibrary[]
|
||||
total: number
|
||||
}
|
||||
}
|
||||
|
||||
interface ContentLibrarySelectResponse {
|
||||
code: number
|
||||
message: string
|
||||
data: {
|
||||
success: boolean
|
||||
libraryId: string
|
||||
name: string
|
||||
}
|
||||
}
|
||||
|
||||
interface ContentSelectorProps {
|
||||
formData: any
|
||||
onChange: (data: any) => void
|
||||
onNext: () => void
|
||||
onPrev: () => void
|
||||
}
|
||||
|
||||
export function ContentSelector({ formData, onChange, onNext, onPrev }: ContentSelectorProps) {
|
||||
const [libraries, setLibraries] = useState<ContentLibrary[]>([])
|
||||
const [searchQuery, setSearchQuery] = useState("")
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [activeTab, setActiveTab] = useState("all")
|
||||
|
||||
useEffect(() => {
|
||||
fetchContentLibraries()
|
||||
}, [])
|
||||
|
||||
const fetchContentLibraries = async () => {
|
||||
setLoading(true)
|
||||
try {
|
||||
// 实际项目中这里应该调用API获取所有内容库
|
||||
const response: ContentLibraryResponse = {
|
||||
code: 0,
|
||||
message: "success",
|
||||
data: {
|
||||
libraries: [
|
||||
{
|
||||
id: "1",
|
||||
name: "微信好友广告",
|
||||
source: "微信",
|
||||
creator: "海尼",
|
||||
contentCount: 12,
|
||||
lastUpdated: "2024-02-09 12:30",
|
||||
type: "moments",
|
||||
status: "active",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "开发群",
|
||||
source: "微信",
|
||||
creator: "karuo",
|
||||
contentCount: 8,
|
||||
lastUpdated: "2024-02-09 12:30",
|
||||
type: "group",
|
||||
status: "inactive",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "产品更新",
|
||||
source: "微信",
|
||||
creator: "张三",
|
||||
contentCount: 15,
|
||||
lastUpdated: "2024-02-10 09:45",
|
||||
type: "moments",
|
||||
status: "active",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "市场活动",
|
||||
source: "微信",
|
||||
creator: "李四",
|
||||
contentCount: 20,
|
||||
lastUpdated: "2024-02-11 14:20",
|
||||
type: "moments",
|
||||
status: "active",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "技术交流",
|
||||
source: "微信",
|
||||
creator: "王五",
|
||||
contentCount: 10,
|
||||
lastUpdated: "2024-02-12 16:35",
|
||||
type: "group",
|
||||
status: "active",
|
||||
},
|
||||
],
|
||||
total: 5,
|
||||
},
|
||||
}
|
||||
|
||||
if (response.code === 0) {
|
||||
setLibraries(response.data.libraries)
|
||||
} else {
|
||||
throw new Error(response.message)
|
||||
}
|
||||
} catch (error) {
|
||||
toast({
|
||||
title: "获取失败",
|
||||
description: "无法获取内容库列表",
|
||||
variant: "destructive",
|
||||
})
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleRefresh = () => {
|
||||
fetchContentLibraries()
|
||||
toast({
|
||||
title: "刷新成功",
|
||||
description: "内容库列表已更新",
|
||||
})
|
||||
}
|
||||
|
||||
const filteredLibraries = libraries.filter((library) => {
|
||||
const matchesTab =
|
||||
activeTab === "all" ||
|
||||
(activeTab === "friends" && library.type === "moments") ||
|
||||
(activeTab === "groups" && library.type === "group")
|
||||
const matchesSearch = library.name.toLowerCase().includes(searchQuery.toLowerCase())
|
||||
return matchesTab && matchesSearch
|
||||
})
|
||||
|
||||
const handleSelectLibrary = async (library: ContentLibrary) => {
|
||||
try {
|
||||
// 实际项目中这里应该调用API
|
||||
const response: ContentLibrarySelectResponse = {
|
||||
code: 0,
|
||||
message: "success",
|
||||
data: {
|
||||
success: true,
|
||||
libraryId: library.id,
|
||||
name: library.name,
|
||||
},
|
||||
}
|
||||
|
||||
if (response.code === 0 && response.data.success) {
|
||||
onChange({
|
||||
...formData,
|
||||
selectedLibrary: library.id,
|
||||
contentFormat: library.type,
|
||||
})
|
||||
toast({
|
||||
title: "选择成功",
|
||||
description: `已选择内容库：${library.name}`,
|
||||
})
|
||||
} else {
|
||||
throw new Error(response.message)
|
||||
}
|
||||
} catch (error) {
|
||||
toast({
|
||||
title: "选择失败",
|
||||
description: "无法选择内容库",
|
||||
variant: "destructive",
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const handleFinish = async () => {
|
||||
try {
|
||||
// 实际项目中这里应该调用API创建计划
|
||||
await new Promise((resolve) => setTimeout(resolve, 1000))
|
||||
toast({
|
||||
title: "创建成功",
|
||||
description: "新计划已创建",
|
||||
})
|
||||
onNext()
|
||||
} catch (error) {
|
||||
toast({
|
||||
title: "创建失败",
|
||||
description: "无法创建新计划",
|
||||
variant: "destructive",
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Card className="p-6">
|
||||
<div className="space-y-6">
|
||||
<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="搜索内容库名称..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
className="pl-9"
|
||||
/>
|
||||
</div>
|
||||
<Button variant="outline" size="icon" onClick={handleRefresh} disabled={loading}>
|
||||
<RefreshCw className={`h-4 w-4 ${loading ? "animate-spin" : ""}`} />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<Tabs defaultValue="all" onValueChange={setActiveTab}>
|
||||
<TabsList>
|
||||
<TabsTrigger value="all">全部</TabsTrigger>
|
||||
<TabsTrigger value="friends">微信好友</TabsTrigger>
|
||||
<TabsTrigger value="groups">聊天群</TabsTrigger>
|
||||
</TabsList>
|
||||
</Tabs>
|
||||
|
||||
<div className="space-y-2">
|
||||
{filteredLibraries.map((library) => (
|
||||
<div
|
||||
key={library.id}
|
||||
className={`flex items-center space-x-3 p-3 rounded-lg cursor-pointer border transition-colors ${
|
||||
formData.selectedLibrary === library.id
|
||||
? "border-blue-500 bg-blue-50"
|
||||
: "border-gray-200 hover:border-blue-500"
|
||||
}`}
|
||||
onClick={() => handleSelectLibrary(library)}
|
||||
>
|
||||
<div className="flex-1">
|
||||
<div className="font-medium">{library.name}</div>
|
||||
<div className="text-sm text-gray-500 mt-1">
|
||||
<div className="flex items-center space-x-2">
|
||||
<span>来源：{library.source}</span>
|
||||
<span>•</span>
|
||||
<span>创建人：{library.creator}</span>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2 mt-1">
|
||||
<Badge variant="outline">内容数量：{library.contentCount}</Badge>
|
||||
<Badge variant="outline">更新时间：{new Date(library.lastUpdated).toLocaleString()}</Badge>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Badge variant="secondary" className={library.status === "inactive" ? "bg-gray-100" : ""}>
|
||||
{library.status === "active" ? "启用" : "已停用"}
|
||||
</Badge>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="flex justify-between">
|
||||
<Button variant="outline" onClick={onPrev}>
|
||||
上一步
|
||||
</Button>
|
||||
<Button onClick={handleFinish} disabled={!formData.selectedLibrary}>
|
||||
完成
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
275
Cunkebao/app/workspace/moments-sync/new/steps/DeviceSelector.tsx
Normal file
275
Cunkebao/app/workspace/moments-sync/new/steps/DeviceSelector.tsx
Normal file
@@ -0,0 +1,275 @@
|
||||
"use client"
|
||||
|
||||
import { useState, useEffect } from "react"
|
||||
import { Card } from "@/components/ui/card"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Search, RefreshCw, X } from "lucide-react"
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
|
||||
import { Checkbox } from "@/components/ui/checkbox"
|
||||
import { toast } from "@/components/ui/use-toast"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import {
|
||||
Pagination,
|
||||
PaginationContent,
|
||||
PaginationItem,
|
||||
PaginationLink,
|
||||
PaginationNext,
|
||||
PaginationPrevious,
|
||||
} from "@/components/ui/pagination"
|
||||
|
||||
// 定义类型，避免导入错误
|
||||
interface Device {
|
||||
id: string
|
||||
imei: string
|
||||
name: string
|
||||
status: string
|
||||
wechatId: string
|
||||
usedInPlans: number
|
||||
}
|
||||
|
||||
interface DeviceResponse {
|
||||
code: number
|
||||
message: string
|
||||
data: {
|
||||
devices: Device[]
|
||||
total: number
|
||||
}
|
||||
}
|
||||
|
||||
interface DeviceSelectResponse {
|
||||
code: number
|
||||
message: string
|
||||
data: {
|
||||
success: boolean
|
||||
deviceIds: string[]
|
||||
}
|
||||
}
|
||||
|
||||
interface DeviceSelectorProps {
|
||||
formData: any
|
||||
onChange: (data: any) => void
|
||||
onNext: () => void
|
||||
onPrev: () => void
|
||||
}
|
||||
|
||||
export function DeviceSelector({ formData, onChange, onNext, onPrev }: DeviceSelectorProps) {
|
||||
const [devices, setDevices] = useState<Device[]>([])
|
||||
const [searchQuery, setSearchQuery] = useState("")
|
||||
const [statusFilter, setStatusFilter] = useState("all")
|
||||
const [currentPage, setCurrentPage] = useState(1)
|
||||
const [loading, setLoading] = useState(false)
|
||||
const itemsPerPage = 5
|
||||
|
||||
useEffect(() => {
|
||||
fetchDevices()
|
||||
}, [])
|
||||
|
||||
const fetchDevices = async () => {
|
||||
setLoading(true)
|
||||
try {
|
||||
// 实际项目中这里应该调用API获取所有设备
|
||||
const response: DeviceResponse = {
|
||||
code: 0,
|
||||
message: "success",
|
||||
data: {
|
||||
devices: Array.from({ length: 42 }, (_, i) => ({
|
||||
id: `device-${i + 1}`,
|
||||
imei: `IMEI-${Math.random().toString(36).substr(2, 9)}`,
|
||||
name: `设备 ${i + 1}`,
|
||||
status: Math.random() > 0.3 ? "online" : "offline",
|
||||
wechatId: `wxid_${Math.random().toString(36).substr(2, 8)}`,
|
||||
usedInPlans: Math.floor(Math.random() * 3),
|
||||
})),
|
||||
total: 42,
|
||||
},
|
||||
}
|
||||
|
||||
if (response.code === 0) {
|
||||
setDevices(response.data.devices)
|
||||
} else {
|
||||
throw new Error(response.message)
|
||||
}
|
||||
} catch (error) {
|
||||
toast({
|
||||
title: "获取失败",
|
||||
description: "无法获取设备列表",
|
||||
variant: "destructive",
|
||||
})
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleRefresh = () => {
|
||||
fetchDevices()
|
||||
toast({
|
||||
title: "刷新成功",
|
||||
description: "设备列表已更新",
|
||||
})
|
||||
}
|
||||
|
||||
const filteredDevices = devices.filter((device) => {
|
||||
const matchesSearch =
|
||||
device.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||
device.imei.toLowerCase().includes(searchQuery.toLowerCase())
|
||||
const matchesStatus = statusFilter === "all" || device.status === statusFilter
|
||||
return matchesSearch && matchesStatus
|
||||
})
|
||||
|
||||
const paginatedDevices = filteredDevices.slice((currentPage - 1) * itemsPerPage, currentPage * itemsPerPage)
|
||||
|
||||
const handleDeviceSelect = async (deviceId: string) => {
|
||||
try {
|
||||
// 实际项目中这里应该调用API
|
||||
const response: DeviceSelectResponse = {
|
||||
code: 0,
|
||||
message: "success",
|
||||
data: {
|
||||
success: true,
|
||||
deviceIds: [deviceId],
|
||||
},
|
||||
}
|
||||
|
||||
if (response.code === 0 && response.data.success) {
|
||||
const updatedSelection = formData.selectedDevices.includes(deviceId)
|
||||
? formData.selectedDevices.filter((id: string) => id !== deviceId)
|
||||
: [...formData.selectedDevices, deviceId]
|
||||
onChange({ ...formData, selectedDevices: updatedSelection })
|
||||
} else {
|
||||
throw new Error(response.message)
|
||||
}
|
||||
} catch (error) {
|
||||
toast({
|
||||
title: "选择失败",
|
||||
description: "无法选择设备",
|
||||
variant: "destructive",
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Card className="p-6">
|
||||
<div className="space-y-4">
|
||||
<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="搜索设备备注或IMEI"
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
className="pl-9"
|
||||
/>
|
||||
</div>
|
||||
<Select value={statusFilter} onValueChange={setStatusFilter}>
|
||||
<SelectTrigger className="w-[120px]">
|
||||
<SelectValue placeholder="全部状态" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">全部状态</SelectItem>
|
||||
<SelectItem value="online">在线</SelectItem>
|
||||
<SelectItem value="offline">离线</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<Button variant="outline" size="icon" onClick={handleRefresh} disabled={loading}>
|
||||
<RefreshCw className={`h-4 w-4 ${loading ? "animate-spin" : ""}`} />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
{paginatedDevices.map((device) => (
|
||||
<Card
|
||||
key={device.id}
|
||||
className={`p-3 hover:shadow-md transition-shadow cursor-pointer ${
|
||||
formData.selectedDevices.includes(device.id) ? "border-blue-500 border-2" : ""
|
||||
}`}
|
||||
onClick={() => handleDeviceSelect(device.id)}
|
||||
>
|
||||
<div className="flex items-center space-x-3">
|
||||
<Checkbox
|
||||
checked={formData.selectedDevices.includes(device.id)}
|
||||
onCheckedChange={() => handleDeviceSelect(device.id)}
|
||||
/>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center justify-between mb-1">
|
||||
<div className="font-medium truncate">{device.name}</div>
|
||||
<div
|
||||
className={`px-2 py-1 rounded-full text-xs ${
|
||||
device.status === "online" ? "bg-green-100 text-green-800" : "bg-gray-100 text-gray-800"
|
||||
}`}
|
||||
>
|
||||
{device.status === "online" ? "在线" : "离线"}
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-sm text-gray-500">IMEI: {device.imei}</div>
|
||||
<div className="text-sm text-gray-500">微信号: {device.wechatId}</div>
|
||||
{device.usedInPlans > 0 && (
|
||||
<div className="text-sm text-orange-500">已用于 {device.usedInPlans} 个计划</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
<Pagination>
|
||||
<PaginationContent>
|
||||
<PaginationPrevious
|
||||
onClick={() => setCurrentPage((prev) => Math.max(1, prev - 1))}
|
||||
disabled={currentPage === 1}
|
||||
/>
|
||||
{Array.from({ length: Math.ceil(filteredDevices.length / itemsPerPage) }, (_, i) => i + 1).map((page) => (
|
||||
<PaginationItem key={page}>
|
||||
<PaginationLink onClick={() => setCurrentPage(page)} isActive={currentPage === page}>
|
||||
{page}
|
||||
</PaginationLink>
|
||||
</PaginationItem>
|
||||
))}
|
||||
<PaginationNext
|
||||
onClick={() =>
|
||||
setCurrentPage((prev) => Math.min(Math.ceil(filteredDevices.length / itemsPerPage), prev + 1))
|
||||
}
|
||||
disabled={currentPage === Math.ceil(filteredDevices.length / itemsPerPage)}
|
||||
/>
|
||||
</PaginationContent>
|
||||
</Pagination>
|
||||
|
||||
<div className="mt-4">
|
||||
<h3 className="font-medium mb-2">已选设备：</h3>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{formData.selectedDevices.map((deviceId: string) => {
|
||||
const device = devices.find((d) => d.id === deviceId)
|
||||
return (
|
||||
device && (
|
||||
<Badge key={deviceId} variant="secondary" className="px-2 py-1 flex items-center space-x-1">
|
||||
<span>{device.name}</span>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="h-4 w-4 p-0 hover:bg-transparent"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
handleDeviceSelect(deviceId)
|
||||
}}
|
||||
>
|
||||
<X className="h-3 w-3" />
|
||||
</Button>
|
||||
</Badge>
|
||||
)
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-between mt-4">
|
||||
<Button variant="outline" onClick={onPrev}>
|
||||
上一步
|
||||
</Button>
|
||||
<Button onClick={onNext} disabled={formData.selectedDevices.length === 0}>
|
||||
下一步
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user