修复动静态ip标题跳转问题 & 添加admin页面

src/components/composites/dialogs/editInfoDialog.tsx

@@ -1,5 +1,8 @@
+import { zodResolver } from "@hookform/resolvers/zod"
 import { Eye, EyeOff } from "lucide-react"
-import { useState } from "react"
+import { useEffect, useState } from "react"
+import { Controller, useForm } from "react-hook-form"
+import { z } from "zod"
 import { Button } from "@/components/ui/button"
 import {
   Dialog,
@@ -7,45 +10,70 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@/components/ui/dialog"
+import { FieldError } from "@/components/ui/field"
 import { Input } from "@/components/ui/input"
 import { Label } from "@/components/ui/label"
 
+export type EditInfoValues = {
+  username: string
+  taobao: string
+  password: string
+  email: string
+  wechat: string
+  qq: string
+}
+
+const editInfoSchema = z.object({
+  username: z.string().trim().min(1, "请输入用户名"),
+  taobao: z.string(),
+  password: z.string().min(1, "请输入密码"),
+  email: z
+    .string()
+    .refine(
+      v => !v || /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v),
+      "请输入正确的邮箱",
+    ),
+  wechat: z.string(),
+  qq: z.string(),
+})
+
 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
+  initialData?: EditInfoValues
+  onSave?: (data: EditInfoValues) => void
+}
+
+const DEFAULT_INITIAL_DATA: EditInfoValues = {
+  username: "191****1234",
+  taobao: "191****1234",
+  password: "********",
+  email: "123456123@qq.com",
+  wechat: "",
+  qq: "",
 }
 
 export function EditInfoDialog({
   open,
   onOpenChange,
-  initialData = {
-    username: "191****1234",
-    taobao: "191****1234",
-    password: "********",
-    email: "123456123@qq.com",
-    wechat: "",
-    qq: "",
-  },
+  initialData = DEFAULT_INITIAL_DATA,
   onSave,
 }: EditInfoDialogProps) {
-  const [formData, setFormData] = useState(initialData)
   const [showPassword, setShowPassword] = useState(false)
 
-  const handleChange = (field: string, value: string) => {
-    setFormData(prev => ({ ...prev, [field]: value }))
-  }
+  const form = useForm<EditInfoValues>({
+    resolver: zodResolver(editInfoSchema),
+    defaultValues: initialData,
+  })
 
-  const handleSubmit = () => {
-    onSave?.(formData)
+  useEffect(() => {
+    if (open) {
+      form.reset(initialData)
+    }
+  }, [open, initialData, form])
+
+  const onSubmit = (data: EditInfoValues) => {
+    onSave?.(data)
     onOpenChange(false)
   }
 
@@ -58,91 +86,123 @@ export function EditInfoDialog({
           </DialogTitle>
         </DialogHeader>
 
-        <div className="space-y-4 mt-2">
-          {/* 用户名 */}
+        <form className="space-y-4 mt-2" onSubmit={form.handleSubmit(onSubmit)}>
           <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"
+            <Controller
+              name="username"
+              control={form.control}
+              render={({ field, fieldState }) => (
+                <>
+                  <Input
+                    {...field}
+                    className="h-11 bg-gray-50 border-gray-200"
+                  />
+                  <FieldError>{fieldState.error?.message}</FieldError>
+                </>
+              )}
             />
           </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"
+            <Controller
+              name="taobao"
+              control={form.control}
+              render={({ field }) => (
+                <Input
+                  {...field}
+                  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>
+            <Controller
+              name="password"
+              control={form.control}
+              render={({ field, fieldState }) => (
+                <>
+                  <div className="relative">
+                    <Input
+                      {...field}
+                      type={showPassword ? "text" : "password"}
+                      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>
+                  <FieldError>{fieldState.error?.message}</FieldError>
+                </>
+              )}
+            />
           </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"
+            <Controller
+              name="email"
+              control={form.control}
+              render={({ field, fieldState }) => (
+                <>
+                  <Input
+                    {...field}
+                    className="h-11 bg-gray-50 border-gray-200"
+                  />
+                  <FieldError>{fieldState.error?.message}</FieldError>
+                </>
+              )}
             />
           </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"
+            <Controller
+              name="wechat"
+              control={form.control}
+              render={({ field }) => (
+                <Input
+                  {...field}
+                  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"
+            <Controller
+              name="qq"
+              control={form.control}
+              render={({ field }) => (
+                <Input
+                  {...field}
+                  placeholder="请输入"
+                  className="h-11 bg-gray-50 border-gray-200"
+                />
+              )}
             />
           </div>
 
-          {/* 保存按钮 */}
           <Button
-            onClick={handleSubmit}
+            type="submit"
             className="w-full h-11 mt-2 bg-blue-600 hover:bg-blue-700 text-white font-medium"
           >
             保存
           </Button>
-        </div>
+        </form>
       </DialogContent>
     </Dialog>
   )