78 lines
2.4 KiB
TypeScript
78 lines
2.4 KiB
TypeScript
"use client"
|
|
|
|
import { useState } from "react"
|
|
import { useRouter } from "next/navigation"
|
|
import { DeviceSelector } from "@/app/components/common/DeviceSelector"
|
|
import { Button } from "@/components/ui/button"
|
|
import { ChevronLeft } from "lucide-react"
|
|
|
|
export default function ScenarioDevicesPage({ params }: { params: { channel: string } }) {
|
|
const router = useRouter()
|
|
const [selectedDevices, setSelectedDevices] = useState<string[]>([])
|
|
|
|
// 获取渠道中文名称
|
|
const getChannelName = (channel: string) => {
|
|
const channelMap: Record<string, string> = {
|
|
douyin: "抖音",
|
|
kuaishou: "快手",
|
|
xiaohongshu: "小红书",
|
|
weibo: "微博",
|
|
haibao: "海报",
|
|
phone: "电话",
|
|
order: "订单",
|
|
weixinqun: "微信群",
|
|
gongzhonghao: "公众号",
|
|
payment: "付款码",
|
|
api: "API",
|
|
}
|
|
return channelMap[channel] || channel
|
|
}
|
|
|
|
const channelName = getChannelName(params.channel)
|
|
|
|
const handleSave = async () => {
|
|
try {
|
|
// 这里应该是实际的API调用来保存选中的设备
|
|
await new Promise((resolve) => setTimeout(resolve, 1000))
|
|
router.back()
|
|
} catch (error) {
|
|
console.error("保存失败:", error)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="flex-1 bg-gray-50 min-h-screen">
|
|
<header className="sticky top-0 z-10 bg-white/80 backdrop-blur-sm border-b">
|
|
<div className="flex items-center p-4">
|
|
<div className="flex items-center space-x-3">
|
|
<Button variant="ghost" size="icon" onClick={() => router.back()}>
|
|
<ChevronLeft className="h-5 w-5" />
|
|
</Button>
|
|
<h1 className="text-xl font-semibold text-blue-600">{channelName}设备选择</h1>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<div className="p-4">
|
|
<DeviceSelector
|
|
title={`${channelName}设备选择`}
|
|
selectedDevices={selectedDevices}
|
|
onDevicesChange={setSelectedDevices}
|
|
multiple={true}
|
|
maxSelection={5}
|
|
className="mb-4"
|
|
/>
|
|
|
|
<div className="fixed bottom-0 left-0 right-0 bg-white p-4 border-t flex justify-end space-x-2">
|
|
<Button variant="outline" onClick={() => router.back()}>
|
|
取消
|
|
</Button>
|
|
<Button onClick={handleSave} disabled={selectedDevices.length === 0}>
|
|
保存 ({selectedDevices.length})
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|