150 lines
4.4 KiB
TypeScript
150 lines
4.4 KiB
TypeScript
import { Eye, EyeOff } from "lucide-react"
|
|
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 { Label } from "@/components/ui/label"
|
|
|
|
interface EditInfoDialogProps {
|
|
open: boolean
|
|
onOpenChange: (open: boolean) => void
|
|
initialData?: {
|
|
username: string
|
|
taobao: string
|
|
password: string
|
|
email: string
|
|
wechat: string
|
|
qq: string
|
|
}
|
|
onSave?: (data: any) => void
|
|
}
|
|
|
|
export function EditInfoDialog({
|
|
open,
|
|
onOpenChange,
|
|
initialData = {
|
|
username: "191****1234",
|
|
taobao: "191****1234",
|
|
password: "********",
|
|
email: "123456123@qq.com",
|
|
wechat: "",
|
|
qq: "",
|
|
},
|
|
onSave,
|
|
}: EditInfoDialogProps) {
|
|
const [formData, setFormData] = useState(initialData)
|
|
const [showPassword, setShowPassword] = useState(false)
|
|
|
|
const handleChange = (field: string, value: string) => {
|
|
setFormData(prev => ({ ...prev, [field]: value }))
|
|
}
|
|
|
|
const handleSubmit = () => {
|
|
onSave?.(formData)
|
|
onOpenChange(false)
|
|
}
|
|
|
|
return (
|
|
<Dialog open={open} onOpenChange={onOpenChange}>
|
|
<DialogContent className="sm:max-w-[480px] p-6">
|
|
<DialogHeader>
|
|
<DialogTitle className="text-xl font-semibold text-center">
|
|
编辑信息
|
|
</DialogTitle>
|
|
</DialogHeader>
|
|
|
|
<div className="space-y-4 mt-2">
|
|
{/* 用户名 */}
|
|
<div className="space-y-1.5">
|
|
<Label className="text-sm text-gray-600">用户名</Label>
|
|
<Input
|
|
value={formData.username}
|
|
onChange={e => handleChange("username", e.target.value)}
|
|
className="h-11 bg-gray-50 border-gray-200"
|
|
/>
|
|
</div>
|
|
|
|
{/* 淘宝会员名 */}
|
|
<div className="space-y-1.5">
|
|
<Label className="text-sm text-gray-600">淘宝会员名</Label>
|
|
<Input
|
|
value={formData.taobao}
|
|
onChange={e => handleChange("taobao", e.target.value)}
|
|
className="h-11 bg-gray-50 border-gray-200"
|
|
/>
|
|
</div>
|
|
|
|
{/* 密码 */}
|
|
<div className="space-y-1.5">
|
|
<Label className="text-sm text-gray-600">密码</Label>
|
|
<div className="relative">
|
|
<Input
|
|
type={showPassword ? "text" : "password"}
|
|
value={formData.password}
|
|
onChange={e => handleChange("password", e.target.value)}
|
|
className="h-11 bg-gray-50 border-gray-200 pr-10"
|
|
/>
|
|
<button
|
|
type="button"
|
|
onClick={() => setShowPassword(!showPassword)}
|
|
className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600"
|
|
>
|
|
{showPassword ? (
|
|
<EyeOff className="h-4 w-4" />
|
|
) : (
|
|
<Eye className="h-4 w-4" />
|
|
)}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 邮箱 */}
|
|
<div className="space-y-1.5">
|
|
<Label className="text-sm text-gray-600">邮箱</Label>
|
|
<Input
|
|
value={formData.email}
|
|
onChange={e => handleChange("email", e.target.value)}
|
|
className="h-11 bg-gray-50 border-gray-200"
|
|
/>
|
|
</div>
|
|
|
|
{/* 微信 */}
|
|
<div className="space-y-1.5">
|
|
<Label className="text-sm text-gray-600">微信</Label>
|
|
<Input
|
|
value={formData.wechat}
|
|
onChange={e => handleChange("wechat", e.target.value)}
|
|
placeholder="请输入"
|
|
className="h-11 bg-gray-50 border-gray-200"
|
|
/>
|
|
</div>
|
|
|
|
{/* QQ */}
|
|
<div className="space-y-1.5">
|
|
<Label className="text-sm text-gray-600">QQ</Label>
|
|
<Input
|
|
value={formData.qq}
|
|
onChange={e => handleChange("qq", e.target.value)}
|
|
placeholder="请输入"
|
|
className="h-11 bg-gray-50 border-gray-200"
|
|
/>
|
|
</div>
|
|
|
|
{/* 保存按钮 */}
|
|
<Button
|
|
onClick={handleSubmit}
|
|
className="w-full h-11 mt-2 bg-blue-600 hover:bg-blue-700 text-white font-medium"
|
|
>
|
|
保存
|
|
</Button>
|
|
</div>
|
|
</DialogContent>
|
|
</Dialog>
|
|
)
|
|
}
|