web/src/app/admin/profile/clients.tsx

'use client'
import {update} from '@/actions/user'
import {useProfileStore} from '@/components/stores/profile'
import {Button} from '@/components/ui/button'
import {Form, FormField} from '@/components/ui/form'
import {Input} from '@/components/ui/input'
import {User} from '@/lib/models'
import {merge} from '@/lib/utils'
import {zodResolver} from '@hookform/resolvers/zod'
import {useEffect, useRef} from 'react'
import {useForm} from 'react-hook-form'
import {toast} from 'sonner'
import z from 'zod'
import * as qrcode from 'qrcode'
import {Card, CardHeader, CardTitle, CardContent} from '@/components/ui/card'
import {QrCodeIcon} from 'lucide-react'
import Image from 'next/image'

export function Aftersale(props: {
  profile: User
}) {
  const admin = props.profile.admin_id
  const canvasRef = useRef(null)

  useEffect(() => {
    if (admin && canvasRef.current) {
      qrcode.toCanvas(canvasRef.current, String(admin), {
        width: 180,
        margin: 0,
      }).catch((err) => {
        console.error(err)
      })
    }
  }, [admin])

  return (
    <Card className="flex-none max-sm:flex-col">
      <CardHeader>
        <CardTitle>
          <QrCodeIcon size={18}/>
          关于售后
        </CardTitle>
      </CardHeader>
      <CardContent className="flex flex-col gap-8">

        <div className="flex flex-col gap-4">
          <p className="text-weak text-sm">
            1.全国100万+动态IP代理资源免费测试，先测后买让您安心使用。
          </p>

          <p className="text-weak text-sm">
            2.注册即享新人福利，专业的客户经理，多维度为您提供在线代理相关答疑
          </p>

          <p className="text-weak text-sm">
            3.1V1专属售后答疑，技术团队7*24小时在线支持提供专属解决方案
          </p>
        </div>

        <div className="flex flex-col gap-4 items-center">
          <p>您的专属客服经理</p>
          <div>
            <Image src="/img/qrcode.jpg" alt="logo" width={80} height={80} unoptimized className="flex-none size-20 sm:size-44 bg-gray-100"/>
          </div>
          <p className="text-xs text-weak">
            扫描上方二维码添加客服经理微信
            <br/>
            获取更多帮助与支持
          </p>
        </div>
      </CardContent>
    </Card>
  )
}

export function BasicForm(props: {
  profile: User
}) {
  const schema = z.object({
    username: z.string(),
    email: z.string(),
    contact_qq: z.string(),
    contact_wechat: z.string(),
  })
  type Schema = z.infer<typeof schema>
  const form = useForm<Schema>({
    resolver: zodResolver(schema),
    defaultValues: {
      username: props.profile.username || '',
      email: props.profile.email || '',
      contact_qq: props.profile.contact_qq || '',
      contact_wechat: props.profile.contact_wechat || '',
    },
  })
  const handler = form.handleSubmit(async (value) => {
    try {
      const resp = await update(value)
      if (!resp.success) {
        throw new Error(resp.message)
      }

      await refreshProfile()
      toast.success(`保存成功`)
    }
    catch (e) {
      console.error(e)
      toast.error(`保存失败`, {
        description: e instanceof Error ? e.message : String(e),
      })
    }
  })

  const refreshProfile = useProfileStore(store => store.refreshProfile)

  return (
    <div className="flex flex-col gap-4 flex-1 w-full">
      <h3 className="font-normal">基本信息</h3>
      <Form
        form={form}
        handler={handler}
        className={merge(
          `grid grid-cols-2 gap-4 max-md:grid-cols-1 items-start`,
        )}
      >
        <FormField<Schema>
          name="username"
          label={<span className="w-full flex justify-end">用户名</span>}
          className="grid grid-cols-[48px_1fr] grid-rows-[auto_auto] gap-x-4"
          classNames={{
            message: `col-start-2`,
          }}
        >
          {({field}) => (
            <Input {...field} placeholder="请输入用户名" className="w-48 max-xl:w-full"/>
          )}
        </FormField>
        <FormField<Schema>
          name="email"
          label={<span className="w-full flex justify-end">邮箱</span>}
          className="grid grid-cols-[48px_1fr] grid-rows-[auto_auto] gap-x-4"
          classNames={{
            message: `col-start-2`,
          }}
        >
          {({field}) => (
            <Input {...field} placeholder="请输入邮箱" className="w-48 max-xl:w-full"/>
          )}
        </FormField>
        <FormField<Schema>
          name="contact_qq"
          label={<span className="w-full flex justify-end">QQ</span>}
          className="grid grid-cols-[48px_1fr] grid-rows-[auto_auto] gap-x-4"
          classNames={{
            message: `col-start-2`,
          }}
        >
          {({field}) => (
            <Input {...field} placeholder="请输入QQ号" className="w-48 max-xl:w-full"/>
          )}
        </FormField>
        <FormField<Schema>
          name="contact_wechat"
          label={<span className="w-full flex justify-end">微信</span>}
          className="grid grid-cols-[48px_1fr] grid-rows-[auto_auto] gap-x-4"
          classNames={{
            message: `col-start-2`,
          }}
        >
          {({field}) => (
            <Input {...field} placeholder="请输入微信号" className="w-48 max-xl:w-full"/>
          )}
        </FormField>
        <div className="flex justify-end gap-4 md:col-span-2 justify-self-stretch">
          <Button
            theme="outline"
            type="button"
            onClick={() => form.reset({
              username: props.profile.username || '',
              email: props.profile.email || '',
              contact_qq: props.profile.contact_qq || '',
              contact_wechat: props.profile.contact_wechat || '',
            })}>
            撤销
          </Button>
          <Button>保存</Button>
        </div>
      </Form>
    </div>
  )
}