73 lines
2.2 KiB
TypeScript
73 lines
2.2 KiB
TypeScript
"use client"
|
|
|
|
import { useState } from "react"
|
|
import { Button } from "@/components/ui/button"
|
|
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
|
|
import { Input } from "@/components/ui/input"
|
|
import { Search, Plus } from "lucide-react"
|
|
import { Table } from "@/components/ui/table"
|
|
|
|
interface WechatAccountSelectorProps {
|
|
selectedAccounts: string[]
|
|
onChange: (accounts: string[]) => void
|
|
}
|
|
|
|
export function WechatAccountSelector({ selectedAccounts, onChange }: WechatAccountSelectorProps) {
|
|
const [open, setOpen] = useState(false)
|
|
|
|
return (
|
|
<div className="mt-1.5 space-x-2">
|
|
<Button type="button" variant="outline" size="sm" onClick={() => setOpen(true)} className="h-9">
|
|
<Plus className="h-4 w-4 mr-2" />
|
|
选择客户
|
|
</Button>
|
|
|
|
<Button type="button" variant="outline" size="sm" onClick={() => setOpen(true)} className="h-9">
|
|
<Plus className="h-4 w-4 mr-2" />
|
|
外部账号
|
|
</Button>
|
|
|
|
<Dialog open={open} onOpenChange={setOpen}>
|
|
<DialogContent className="max-w-4xl">
|
|
<DialogHeader>
|
|
<DialogTitle>选择微信账号</DialogTitle>
|
|
</DialogHeader>
|
|
|
|
<div className="relative">
|
|
<Search className="absolute left-3 top-2.5 h-4 w-4 text-gray-400" />
|
|
<Input placeholder="请输入关键字筛选" className="pl-9" />
|
|
</div>
|
|
|
|
<Table>
|
|
<thead>
|
|
<tr>
|
|
<th>序号</th>
|
|
<th>微信号</th>
|
|
<th>在线状态</th>
|
|
<th>操作</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td colSpan={4} className="text-center py-4 text-gray-500">
|
|
暂无数据
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</Table>
|
|
|
|
<div className="flex justify-end space-x-4">
|
|
<Button variant="outline" onClick={() => setOpen(false)}>
|
|
取消
|
|
</Button>
|
|
<Button onClick={() => setOpen(false)} className="bg-blue-600 hover:bg-blue-700">
|
|
确定
|
|
</Button>
|
|
</div>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</div>
|
|
)
|
|
}
|
|
|