更新新用户登录后台修改密码和实名认证提示框和修改控制台展示和取消控制台中的个人中心跳转

src/components/composites/dialogs/change-password-dialog.tsx

@@ -0,0 +1,212 @@
+'use client'
+import {useEffect, useRef, useState} from 'react'
+import {Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle, DialogTrigger} from '@/components/ui/dialog'
+import {Button} from '@/components/ui/button'
+import {Form, FormField} from '@/components/ui/form'
+import {Input} from '@/components/ui/input'
+import {useForm} from 'react-hook-form'
+import {zodResolver} from '@hookform/resolvers/zod'
+import * as z from 'zod'
+import {toast} from 'sonner'
+import {useRouter} from 'next/navigation'
+import {sendSMS} from '@/actions/verify'
+import {updatePassword} from '@/actions/user'
+
+interface ChangePasswordDialogProps {
+  triggerClassName?: string
+  open?: boolean
+  onOpenChange?: (open: boolean) => void
+  onSuccess?: () => void
+}
+
+export function ChangePasswordDialog({
+  triggerClassName,
+  open,
+  onOpenChange,
+  onSuccess,
+}: ChangePasswordDialogProps) {
+  const [internalOpen, setInternalOpen] = useState(false)
+  const router = useRouter()
+
+  const actualOpen = open !== undefined ? open : internalOpen
+  const actualOnOpenChange = onOpenChange || setInternalOpen
+
+  // 表单验证规则
+  const schema = z.object({
+    phone: z.string().regex(/^1\d{10}$/, `请输入正确的手机号`),
+    captcha: z.string().nonempty('请输入验证码'),
+    code: z.string().regex(/^\d{6}$/, `请输入正确的验证码`),
+    password: z.string().min(6, `密码至少6位`),
+    confirm_password: z.string(),
+  }).refine(data => data.password === data.confirm_password, {
+    message: '两次输入的密码不一致',
+    path: ['confirm_password'],
+  })
+
+  type Schema = z.infer<typeof schema>
+
+  // 表单初始化
+  const form = useForm<Schema>({
+    resolver: zodResolver(
+      schema.refine(
+        data => /^(?=.*[a-z])(?=.*[A-Z]).{6,}$/.test(data.password),
+        {
+          message: '密码需包含大小写字母，且不少于6位',
+          path: ['password'],
+        },
+      ),
+    ),
+    defaultValues: {
+      phone: '',
+      captcha: '',
+      code: '',
+      password: '',
+      confirm_password: '',
+    },
+  })
+
+  // 提交处理
+  const handler = form.handleSubmit(async (value) => {
+    try {
+      const resp = await updatePassword({
+        phone: value.phone,
+        code: value.code,
+        password: value.password,
+      })
+      if (!resp.success) {
+        throw new Error(resp.message)
+      }
+
+      toast.success(`保存成功，请重新登录`)
+      onSuccess?.()
+      actualOnOpenChange(false)
+      router.replace('/login')
+    }
+    catch (e) {
+      console.error(e)
+      toast.error(`保存失败`, {
+        description: e instanceof Error ? e.message : String(e),
+      })
+    }
+  })
+
+  // 验证码相关状态
+  const [captchaUrl, setCaptchaUrl] = useState(`/captcha?t=${new Date().getTime()}`)
+  const [captchaWait, setCaptchaWait] = useState(0)
+  const interval = useRef<NodeJS.Timeout>(null)
+
+  // 刷新验证码
+  const refreshCaptcha = () => {
+    setCaptchaUrl(`/captcha?t=${new Date().getTime()}`)
+  }
+
+  // 发送短信验证码
+  const sendVerifier = async () => {
+    const result = await form.trigger(['phone', 'captcha'])
+    if (!result) return
+
+    const {phone, captcha} = form.getValues()
+    const resp = await sendSMS({phone, captcha})
+    if (!resp.success) {
+      toast.error(resp.message)
+      refreshCaptcha()
+      return
+    }
+
+    setCaptchaWait(60)
+    interval.current = setInterval(() => {
+      setCaptchaWait((wait) => {
+        if (wait <= 1) {
+          clearInterval(interval.current!)
+          return 0
+        }
+        return wait - 1
+      })
+    }, 1000)
+
+    toast.success(`验证码已发送，请注意查收`)
+  }
+
+  // 清理定时器
+  useEffect(() => {
+    return () => {
+      if (interval.current) {
+        clearInterval(interval.current)
+      }
+    }
+  }, [])
+
+  return (
+    <Dialog open={actualOpen} onOpenChange={actualOnOpenChange}>
+      <DialogTrigger asChild>
+        <Button theme="outline" className={triggerClassName || 'w-24 h-9'}>修改密码</Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>修改密码</DialogTitle>
+        </DialogHeader>
+        <Form form={form} handler={handler} className="flex flex-col gap-4 mt-4">
+          {/* 手机号输入 */}
+          <FormField<Schema> name="phone" label="手机号" className="flex-auto">
+            {({field}) => (
+              <Input {...field} placeholder="请输入手机号" autoComplete="tel-national"/>
+            )}
+          </FormField>
+
+          {/* 图形验证码 */}
+          <FormField<Schema> name="captcha" label="验证码">
+            {({field}) => (
+              <div className="flex gap-4">
+                <Input {...field} placeholder="请输入验证码" autoComplete="one-time-code"/>
+                <Button className="p-0 bg-transparent" onClick={refreshCaptcha} type="button">
+                  <img src={captchaUrl} alt="验证码" className="h-10"/>
+                </Button>
+              </div>
+            )}
+          </FormField>
+
+          {/* 短信验证码 */}
+          <FormField<Schema> name="code" label="短信令牌" className="flex-auto">
+            {({field}) => (
+              <div className="flex gap-4">
+                <Input {...field} placeholder="请输入验证码" autoComplete="one-time-code"/>
+                <Button theme="outline" type="button" className="w-36" onClick={() => sendVerifier()}>
+                  {captchaWait > 0 ? `重新发送(${captchaWait})` : `获取短信令牌`}
+                </Button>
+              </div>
+            )}
+          </FormField>
+
+          {/* 新密码 */}
+          <FormField<Schema> name="password" label="新密码" className="flex-auto">
+            {({field}) => (
+              <Input {...field} placeholder="请输入新密码" type="password" autoComplete="new-password"/>
+            )}
+          </FormField>
+
+          {/* 确认密码 */}
+          <FormField<Schema> name="confirm_password" label="确认密码" className="flex-auto">
+            {({field}) => (
+              <Input {...field} placeholder="请再次输入新密码" type="password" autoComplete="new-password"/>
+            )}
+          </FormField>
+        </Form>
+
+        <DialogFooter>
+          <Button
+            theme="outline"
+            type="button"
+            onClick={() => {
+              actualOnOpenChange(false)
+              form.reset()
+            }}>
+            关闭
+          </Button>
+          <Button onClick={handler}>
+            保存
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}

src/components/composites/dialogs/realname-auth-dialog.tsx

@@ -0,0 +1,65 @@
+'use client'
+import {Button} from '@/components/ui/button'
+import {Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger} from '@/components/ui/dialog'
+import {useRouter} from 'next/navigation'
+import {useState} from 'react'
+
+interface RealnameAuthDialogProps {
+  hasAuthenticated: boolean
+  triggerClassName?: string
+  open?: boolean
+  onOpenChange?: (open: boolean) => void
+  onSuccess?: () => void
+}
+
+export function RealnameAuthDialog({
+  hasAuthenticated,
+  triggerClassName,
+  open,
+  onOpenChange,
+  onSuccess,
+}: RealnameAuthDialogProps) {
+  const [internalOpen, setInternalOpen] = useState(false)
+  const router = useRouter()
+
+  const actualOpen = open !== undefined ? open : internalOpen
+  const actualOnOpenChange = onOpenChange || setInternalOpen
+
+  if (hasAuthenticated) {
+    return null
+  }
+
+  return (
+    <Dialog open={actualOpen} onOpenChange={actualOnOpenChange}>
+      <DialogTrigger asChild>
+        <Button theme="outline" className={triggerClassName || 'w-24'}>
+          去认证
+        </Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>实名认证</DialogTitle>
+        </DialogHeader>
+        <div className="py-4 space-y-4">
+          <p>为了保障您的账户安全和正常使用服务，请您尽快完成实名认证</p>
+          <div className="flex justify-end gap-2">
+            <Button
+              theme="outline"
+              onClick={() => actualOnOpenChange(false)}
+            >
+              稍后再说
+            </Button>
+            <Button
+              onClick={() => {
+                router.push('/admin/identify')
+                onSuccess?.()
+              }}
+            >
+              立即认证
+            </Button>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}

src/components/composites/user-center/index.tsx

@@ -2,7 +2,7 @@
 import {useProfileStore} from '@/components/stores-provider'
 import {Button} from '@/components/ui/button'
 import {Avatar, AvatarFallback, AvatarImage} from '@/components/ui/avatar'
-import {LoaderIcon, LogOutIcon, UserIcon, UserPenIcon} from 'lucide-react'
+import {LogOutIcon, UserIcon} from 'lucide-react'
 import {usePathname, useRouter} from 'next/navigation'
 import {logout} from '@/actions/auth'
 import {HoverCard, HoverCardContent, HoverCardTrigger} from '@/components/ui/hover-card'
@@ -27,8 +27,18 @@ export default function UserCenter(props: UserCenterProps) {
 
   // 展示与跳转
   const pathname = usePathname()
-  const toAdminPage = () => {
-    if (!pathname.startsWith('/admin')) {
+  const isAdminPage = pathname.startsWith('/admin') // 判断是否在后台页面
+  const displayName = () => {
+    if (props.profile.name) return props.profile.name // 优先显示用户名
+    if (props.profile.phone) {
+      const phone = props.profile.phone
+      return `${phone.substring(0, 3)}****${phone.substring(7)}`
+    }
+    return null
+  }
+
+  const handleAvatarClick = () => {
+    if (!isAdminPage) {
       router.push('/admin')
     }
   }
@@ -39,23 +49,28 @@ export default function UserCenter(props: UserCenterProps) {
         <Button
           theme="ghost"
           className="flex gap-2 items-center h-12"
-          onClick={toAdminPage}
+          onClick={handleAvatarClick}
         >
           <Avatar>
             <AvatarImage src={props.profile.avatar} alt="avatar"/>
             <AvatarFallback className="bg-primary-muted"><UserIcon/></AvatarFallback>
           </Avatar>
-          <span>{props.profile.name}</span>
+          {/* 根据是否在后台页面显示不同内容 */}
+          {isAdminPage ? (
+            <span>{displayName() || '用户'}</span> // 后台显示姓名/脱敏手机号/默认"用户"
+          ) : (
+            <span>进入控制台</span> // 前台显示"进入控制台"
+          )}
         </Button>
       </HoverCardTrigger>
       <HoverCardContent className="w-36 p-1" align="end">
-        <Button
+        {/* <Button
           theme="ghost"
           className="w-full justify-start text-sm h-9 px-3"
           onClick={() => router.push('/admin/profile')}>
           <UserPenIcon/>
           个人中心
-        </Button>
+        </Button> */}
         <Button
           theme="ghost"
           color="fail"