web/src/app/admin/identify/page.tsx

'use client'
import {Button} from '@/components/ui/button'
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/user'
import {toast} from 'sonner'
import {ReactNode, Suspense, use, useEffect, useRef, useState} from 'react'
import * as qrcode from 'qrcode'
import {useProfileStore} from '@/components/stores/profile'
import {merge} from '@/lib/utils'
import banner from './_assets/banner.webp'
import personal from './_assets/personal.webp'
import step1 from './_assets/step1.webp'
import step2 from './_assets/step2.webp'
import step3 from './_assets/step3.webp'
import {Card, CardContent, CardHeader, CardTitle} from '@/components/ui/card'
import {CheckCircleIcon, WorkflowIcon} from 'lucide-react'

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>

export type IdentifyPageProps = {}

export default function IdentifyPage(props: IdentifyPageProps) {
  // ======================
  // 填写信息
  // ======================

  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 {
        toast.error(resp.message || `认证失败：请稍后重试`)
      }
    },
  )

  // ======================
  // 扫码认证
  // ======================

  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 profile = useProfileStore(store => store.profile)
  const refreshProfile = useProfileStore(store => store.refreshProfile)

  // 重置认证流程
  const handleDialogOpenChange = async (open: boolean) => {
    setOpenDialog(open)
    if (!open) {
      setStep('form')
      setTarget('')
      await refreshProfile()
    }
  }

  // ======================
  // render
  // ======================

  return (
    <Page className="flex-row max-md:flex-col">
      <div className="flex-3/4 flex flex-col bg-white rounded-lg gap-16 max-md:gap-0">

        {/* banner */}
        <section className="flex-none basis-40 relative flex flex-col gap-4 pl-8 pr-4 justify-center">
          <Image src={banner} alt="背景图" className="absolute inset-0 w-full h-full object-cover"/>
          <h3 className="text-lg font-bold z-10 relative">蓝狐HTTP邀请您参与【先测后买】服务</h3>
          <p className="text-sm text-gray-600 z-10 relative">为了保障您的账户安全，请先完成实名认证，即可获取福利套餐测试资格</p>
        </section>

        <div className="flex-auto flex justify-center items-start max-md:m-4">
          {/* 个人认证 */}
          <section className="w-96 bg-gray-50 p-8 rounded-md flex flex-col gap-4 items-center">
            <Image src={personal} alt="个人认证"/>
            <div>
              <h3 className="text-center text-lg font-bold">个人认证</h3>
              <p className="text-sm text-gray-600">
                平台不会收集您的个人信息，您的信息仅用于账户安全认证
              </p>
            </div>
            <Suspense>
              <IfNotIdentofy>
                <Dialog open={openDialog} onOpenChange={handleDialogOpenChange}>
                  <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={() => handleDialogOpenChange(false)}>
                          已完成扫脸认证
                        </Button>
                      </div>
                    )}
                  </DialogContent>
                </Dialog>
              </IfNotIdentofy>
            </Suspense>
          </section>
        </div>
      </div>

      <Card className="flex-none basis-80">
        <CardHeader>
          <CardTitle>
            <WorkflowIcon size={18}/>
            操作引导
          </CardTitle>
        </CardHeader>
        <CardContent className="flex flex-col px-4">
          <p className="text-sm text-weak mb-4">
            为响应国家相关规定，使用HTTP代理需完成实名认证。认证服务由支付宝提供，您的个人信息将受到严格保护，仅用于账户安全认证
          </p>
          <p className="flex gap-2 items-center justify-between w-56 self-center">
            <span className="flex gap-2">
              <span className="bg-primary/25 text-primary w-8 h-8 rounded-full flex items-center justify-center">01</span>
              <span>注册账号</span>
            </span>
            <Image alt="步骤配图" src={step1}/>
          </p>
          <div className="h-16 w-56 px-4 flex self-center">
            <div className={merge(
              `w-0 h-full border-x border-primary border-dashed relative`,
              `after:absolute after:-left-[3px] after:bottom-0 after:w-1.5 after:h-1.5 after:rounded-full after:bg-primary`,
            )}>
            </div>
          </div>
          <p className="flex gap-2 items-center justify-between w-56 self-center">
            <span className="flex gap-2">
              <span className="bg-primary/25 text-primary w-8 h-8 rounded-full flex items-center justify-center">02</span>
              <span>实名认证</span>
            </span>
            <Image alt="步骤配图" src={step2}/>
          </p>
          <div className="h-16 w-56 px-4 flex self-center">
            <div className={merge(
              `w-0 h-full border-x border-primary border-dashed relative`,
              `after:absolute after:-left-[3px] after:bottom-0 after:w-1.5 after:h-1.5 after:rounded-full after:bg-primary`,
            )}>
            </div>
          </div>
          <p className="flex gap-2 items-center justify-between w-56 self-center">
            <span className="flex gap-2">
              <span className="bg-primary/25 text-primary w-8 h-8 rounded-full flex items-center justify-center">03</span>
              <span>支付订单</span>
            </span>
            <Image alt="步骤配图" src={step3}/>
          </p>
        </CardContent>
      </Card>
    </Page>
  )
}

function IfNotIdentofy(props: {children: ReactNode}) {
  const profile = use(useProfileStore(store => store.profile))
  return !profile?.id_token
    ? props.children
    : (
      <p className="flex gap-2 items-center">
        <CheckCircleIcon className="text-done"/>
        <span>已完成实名认证</span>
      </p>
    )
}