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

import Page from '@/components/page'
import {Card, CardContent, CardHeader, CardTitle} from '@/components/ui/card'
import {CheckCircle} from 'lucide-react'
import Image from 'next/image'
import banner from '@/app/admin/identify/_assets/banner.webp'
import RechargeModal from '@/components/composites/recharge'
import {RealnameAuthDialog} from '@/components/composites/dialogs/realname-auth-dialog'
import {ChangePasswordDialog} from '@/components/composites/dialogs/change-password-dialog'
import {getProfile} from '@/actions/auth'
import {Aftersale, BasicForm} from './clients'

export type ProfilePageProps = {}

export default async function ProfilePage(props: ProfilePageProps) {
  const profile = await getProfile()
  if (!profile.success) {
    return (
      <Page>
        获取用户信息失败
      </Page>
    )
  }

  const user = profile.data
  return (
    <Page className="lg:flex-row lg:items-stretch md:flex-col max-sm:flex-col">
      <div className="flex-3/4 flex flex-col gap-4">
        {/* banner */}
        <section className="flex-none relative rounded-lg p-16 pr-4 overflow-hidden flex max-sm:flex-col flex-col gap-4 pl-8 justify-center">
          <Image src={banner} alt="背景图" aria-hidden 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 gap-4 max-md:flex-col max-sm:flex-col">

          <Card className="flex-1 ">
            <CardHeader>
              <CardTitle className="font-normal">帐号余额（元）</CardTitle>
            </CardHeader>
            <CardContent className="flex-auto flex justify-between items-center px-8">
              <p className="text-xl">{user.balance}</p>
              <RechargeModal classNames={{
                trigger: `h-10 px-6`,
              }}/>
            </CardContent>
          </Card>

          <Card className="flex-1">
            <CardHeader>
              <CardTitle className="font-normal">实名认证</CardTitle>
            </CardHeader>
            <CardContent className="flex-auto flex justify-between items-center gap-4 px-4 pr-8">
              {!user.id_token
                ? (
                  <>
                    <p className="text-sm">为了保障您的账户安全和正常使用服务，请您尽快完成实名认证</p>
                    <RealnameAuthDialog
                      hasAuthenticated={!!user.id_token}
                      triggerClassName="w-24"
                    />
                  </>
                )
                : (
                  <>
                    <p className="flex flex-col gap-1">
                      <span>{user.name}</span>
                      <span className="text-sm">{user.id_no}</span>
                    </p>
                    <p className="flex gap-1 items-center">
                      <CheckCircle className="text-done" size={18}/>
                      <span>已认证</span>
                    </p>
                  </>
                )}
            </CardContent>
          </Card>
        </div>

        <div className="flex-none rounded-lg bg-white p-4 flex max-sm:flex-col flex-col gap-8">

          {/* 安全信息 */}
          <div className="flex flex-col gap-4">
            <h3 className="font-normal">安全信息</h3>
            <div className="flex gap-4 items-center">
              <p>{user.phone}</p>
              <ChangePasswordDialog triggerClassName="w-24 h-9"/>
            </div>
          </div>

          {/* 基本信息 */}
          <BasicForm profile={user}/>
        </div>
      </div>

      {/* 侧边栏：客服经理信息 */}
      <Aftersale profile={user}/>

    </Page>
  )
}