完善认证功能，添加实名认证和回调处理逻辑

src/app/admin/identify/page.tsx

@@ -1,12 +1,102 @@
+'use client'
 import {Button} from '@/components/ui/button'
 import banner from './_assets/banner.webp'
 import personal from './_assets/personal.webp'
 import Image from 'next/image'
 import Page from '@/components/page'
+import {Dialog, DialogContent, DialogFooter, DialogTitle, DialogTrigger} from '@/components/ui/dialog'
+import {Form, FormField} from '@/components/ui/form'
+import {useForm} from 'react-hook-form'
+import zod from 'zod'
+import {zodResolver} from '@hookform/resolvers/zod'
+import {Identify} from '@/actions/auth/identify'
+import {toast} from 'sonner'
+import {useContext, useEffect, useRef, useState} from 'react'
+import * as qrcode from 'qrcode'
+import {AuthContext} from '@/components/providers/AuthProvider'
 
 export type IdentifyPageProps = {}
 
-export default async function IdentifyPage(props: IdentifyPageProps) {
+export default function IdentifyPage(props: IdentifyPageProps) {
+
+  // ======================
+  // 填写信息
+  // ======================
+
+  const schema = zod.object({
+    type: zod.enum([`personal`, `enterprise`], {errorMap: () => ({message: `请选择认证类型`})}).default('personal'),
+    name: zod.string().min(2, {message: `姓名至少2个字符`}),
+    iden_no: zod.string().length(18, {message: `身份证号码必须为18位`}),
+  })
+  type Schema = zod.infer<typeof schema>
+
+  const form = useForm<Schema>({
+    resolver: zodResolver(schema),
+    defaultValues: {
+      type: `personal`,
+      name: ``,
+      iden_no: ``,
+    },
+  })
+
+  const handler = form.handleSubmit(
+    async (value) => {
+      const resp = await Identify({
+        type: value.type === `personal` ? 1 : 2,
+        name: value.name,
+        iden_no: value.iden_no,
+      })
+      if (resp.success) {
+        form.reset()
+        if (!resp.data?.identified) {
+          setStep('scan')
+          setTarget(resp.data.target)
+        }
+        else {
+          toast.success('认证已完成')
+        }
+      }
+      else {
+        console.log(resp.message)
+        toast.error(`认证信息提交失败：请稍后重试`)
+      }
+    },
+  )
+
+  // ======================
+  // 扫码认证
+  // ======================
+
+  const [step, setStep] = useState<'form' | 'scan'>('form')
+  const [target, setTarget] = useState('')
+  const [openDialog, setOpenDialog] = useState(false)
+  const canvas = useRef<HTMLCanvasElement>(null)
+
+  useEffect(() => {
+    if (canvas.current && target) {
+      qrcode.toCanvas(canvas.current, target, {
+        width: 256,
+        margin: 0,
+      }, (error) => {
+        if (error) {
+          console.error(error)
+          toast.error(`二维码生成失败：请稍后重试`)
+        }
+      })
+    }
+  }, [target])
+
+  // ======================
+  // 用户数据
+  // ======================
+
+  const ctx = useContext(AuthContext)
+  console.log('render identify page')
+
+  // ======================
+  // render
+  // ======================
+
   return (
     <Page mode={`blank`}>
       <div className={`flex-3/4 flex flex-col bg-white rounded-lg overflow-hidden gap-16`}>
@@ -26,7 +116,62 @@ export default async function IdentifyPage(props: IdentifyPageProps) {
               <h3 className={`text-center text-lg font-bold`}>个人认证</h3>
               <p className={`text-sm text-gray-600`}>平台授权支付宝安全认证，不会泄露您的认证信息</p>
             </div>
-            <Button className={`w-full`}>去认证</Button>
+            {ctx.profile?.id_token ? (
+              <div className={`flex flex-col gap-4`}>
+                <p className={`text-sm text-gray-600`}>已完成实名认证</p>
+              </div>
+            ) : (
+              <Dialog open={openDialog} onOpenChange={setOpenDialog}>
+                <DialogTrigger asChild>
+                  <Button className={`w-full`}>去认证</Button>
+                </DialogTrigger>
+                <DialogContent>
+                  <DialogTitle>
+                    {step === 'form' ? `实名认证` : `扫码完成认证`}
+                  </DialogTitle>
+                  {step === 'form' && (
+                    <Form form={form} handler={handler} className={`flex flex-col gap-4`}>
+                      <FormField<Schema> name={`name`} label={`姓名`}>
+                        {({id, field}) => (
+                          <input
+                            {...field}
+                            id={id}
+                            placeholder={`请输入姓名`}
+                            className={`border rounded p-2 w-full`}
+                            autoComplete={`name`}
+                          />
+                        )}
+                      </FormField>
+                      <FormField<Schema> name={`iden_no`} label={`身份证号`}>
+                        {({id, field}) => (
+                          <input
+                            {...field}
+                            id={id}
+                            placeholder={`请输入身份证号`}
+                            className={`border rounded p-2 w-full`}
+                          />
+                        )}
+                      </FormField>
+                      <DialogFooter>
+                        <Button type={`submit`} className={`w-full mt-4`}>提交</Button>
+                      </DialogFooter>
+                    </Form>
+                  )}
+                  {step === 'scan' && (
+                    <div className={`flex flex-col gap-4 items-center`}>
+                      <canvas ref={canvas} width={256} height={256}/>
+                      <p className={`text-sm text-gray-600`}>请扫码完成认证</p>
+                      <Button onClick={async () => {
+                        await ctx.refreshProfile()
+                        setOpenDialog(false)
+                      }}>
+                        已完成认证
+                      </Button>
+                    </div>
+                  )}
+                </DialogContent>
+              </Dialog>
+            )}
           </section>
         </div>
       </div>

src/app/admin/layout.tsx

@@ -32,16 +32,16 @@ export default async function DashboardLayout(props: DashboardLayoutProps) {
       <header className={`flex-none basis-20 flex items-stretch`}>
         {/* logo */}
         <div className={`flex-none basis-60 flex items-center justify-center`}>
-          <Image src={logo} alt={`logo`} height={40}/>
+          <Link href={'/'}><Image src={logo} alt={`logo`} height={40}/></Link>
         </div>
 
         {/* title */}
-        <div className={`flex-auto overflow-hidden flex items-center`}>
+        <div className={`flex-auto overflow-hidden flex items-center pl-4`}>
           欢迎来到，蓝狐代理
         </div>
 
         {/* profile */}
-        <div className={`flex-none basis-80 flex items-center justify-end`}>
+        <div className={`flex-none basis-80 flex items-center justify-end pr-4`}>
           <Profile/>
         </div>
       </header>