plan pages

Cunkebao/app/scenarios/phone/new/components/PhoneImportDialog.tsx

@@ -0,0 +1,138 @@
+"use client"
+
+import type React from "react"
+
+import { useState } from "react"
+import { Upload } from "lucide-react"
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog"
+import { Button } from "@/components/ui/button"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import { toast } from "@/components/ui/use-toast"
+
+interface PhoneImportDialogProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  onImport: (numbers: string[]) => void
+}
+
+export function PhoneImportDialog({ open, onOpenChange, onImport }: PhoneImportDialogProps) {
+  const [manualInput, setManualInput] = useState("")
+  const [importing, setImporting] = useState(false)
+
+  const handleManualImport = () => {
+    const numbers = manualInput
+      .split(/[\n,，]/)
+      .map((n) => n.trim())
+      .filter((n) => n && /^1[3-9]\d{9}$/.test(n))
+
+    if (numbers.length === 0) {
+      toast({
+        title: "没有有效的电话号码",
+        description: "请输入正确格式的手机号码",
+        variant: "destructive",
+      })
+      return
+    }
+
+    onImport(numbers)
+    setManualInput("")
+    toast({
+      title: "导入成功",
+      description: `成功导入 ${numbers.length} 个电话号码`,
+    })
+  }
+
+  const handleFileUpload = async (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0]
+    if (!file) return
+
+    setImporting(true)
+    try {
+      // 这里应该解析Excel/CSV文件
+      // 模拟导入过程
+      await new Promise((resolve) => setTimeout(resolve, 1000))
+
+      // 模拟导入的号码
+      const mockNumbers = ["13800138000", "13900139000", "13700137000"]
+
+      onImport(mockNumbers)
+      toast({
+        title: "导入成功",
+        description: `成功导入 ${mockNumbers.length} 个电话号码`,
+      })
+    } catch (error) {
+      toast({
+        title: "导入失败",
+        description: "文件解析失败，请检查文件格式",
+        variant: "destructive",
+      })
+    } finally {
+      setImporting(false)
+    }
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-[425px]">
+        <DialogHeader>
+          <DialogTitle>导入电话号码</DialogTitle>
+          <DialogDescription>支持批量导入Excel/CSV文件或手动输入</DialogDescription>
+        </DialogHeader>
+
+        <Tabs defaultValue="manual" className="w-full">
+          <TabsList className="grid w-full grid-cols-2">
+            <TabsTrigger value="manual">手动输入</TabsTrigger>
+            <TabsTrigger value="file">文件导入</TabsTrigger>
+          </TabsList>
+
+          <TabsContent value="manual" className="space-y-4">
+            <div>
+              <label className="text-sm font-medium">电话号码</label>
+              <textarea
+                className="w-full mt-1 px-3 py-2 border rounded-md"
+                rows={6}
+                placeholder="每行一个号码，或用逗号分隔"
+                value={manualInput}
+                onChange={(e) => setManualInput(e.target.value)}
+              />
+              <p className="text-xs text-gray-500 mt-1">支持格式：13800138000，每行一个或逗号分隔</p>
+            </div>
+            <Button className="w-full" onClick={handleManualImport}>
+              确认导入
+            </Button>
+          </TabsContent>
+
+          <TabsContent value="file" className="space-y-4">
+            <div className="border-2 border-dashed rounded-lg p-8 text-center">
+              <Upload className="h-12 w-12 mx-auto text-gray-400 mb-4" />
+              <p className="text-sm text-gray-600 mb-2">点击或拖拽文件到此处</p>
+              <p className="text-xs text-gray-500 mb-4">支持 Excel (.xlsx, .xls) 和 CSV 文件</p>
+              <input
+                type="file"
+                accept=".xlsx,.xls,.csv"
+                onChange={handleFileUpload}
+                className="hidden"
+                id="file-upload"
+                disabled={importing}
+              />
+              <label htmlFor="file-upload">
+                <Button as="span" disabled={importing}>
+                  {importing ? "导入中..." : "选择文件"}
+                </Button>
+              </label>
+            </div>
+
+            <div className="bg-gray-50 p-3 rounded-md">
+              <p className="text-xs text-gray-600 mb-2">文件格式示例：</p>
+              <div className="bg-white p-2 rounded border text-xs font-mono">
+                <div>姓名,电话,来源,备注</div>
+                <div>张三,13800138000,网站,意向客户</div>
+                <div>李四,13900139000,广告,待跟进</div>
+              </div>
+            </div>
+          </TabsContent>
+        </Tabs>
+      </DialogContent>
+    </Dialog>
+  )
+}