修复未登录时提取ip时的套餐显示和不调用获取套餐接口

src/app/admin/clients.tsx

@@ -105,23 +105,21 @@ export function Header() {
           theme="ghost"
           className="w-9 h-9 ml-4 md:ml-0"
           onClick={toggleNavbar}>
-          {navbar
-            ? <PanelLeftCloseIcon/>
-            : <PanelLeftOpenIcon/>
-          }
+          {navbar ? <PanelLeftCloseIcon/> : <PanelLeftOpenIcon/>}
         </Button>
-        <span className="max-md:hidden">
-          欢迎来到，蓝狐代理
-        </span>
+        <span className="max-md:hidden">欢迎来到，蓝狐代理</span>
+        <div className="max-md:hidden h-5 w-px bg-gray-300 mx-2"/>
+        <Link
+          href="/admin/identify"
+          className="max-md:hidden flex items-center gap-1.5 text-sm text-blue-600 hover:text-blue-800 transition-colors"
+        >
+          <IdCard size={16}/>
+          <span>实名认证</span>
+        </Link>
       </div>
 
-      {/* right */}
-      <div className="flex-none flex items-center justify-end pr-4 max-md:hidden gap-2">
-        <Link
-          href="/"
-          className={merge(
-            `flex-none h-16 flex items-center justify-center`,
-          )}>
+      <div className="flex-none flex items-center justify-end pr-4 max-md:hidden gap-3">
+        <Link href="/" className="flex-none h-16 flex items-center justify-center text-sm">
           返回首页
         </Link>
         <Suspense>
@@ -176,7 +174,7 @@ export function Navbar() {
         <TooltipProvider>
           <NavItem href="/admin" icon={<UserRound size={20}/>} label="账户总览" expand={navbar}/>
           <NavTitle label="快速开始"/>
-          <NavItem href="/admin/identify" icon={<IdCard size={20}/>} label="实名认证" expand={navbar}/>
+          {/* <NavItem href="/admin/identify" icon={<IdCard size={20}/>} label="实名认证" expand={navbar}/> */}
           <NavItem href="/admin/whitelist" icon={<LockKeyhole size={20}/>} label="白名单" expand={navbar}/>
           <NavItem href="/admin/purchase" icon={<ShoppingCart size={20}/>} label="购买套餐" expand={navbar}/>
           <NavItem href="/admin/extract" icon={<HardDriveUpload size={20}/>} label="提取 IP" expand={navbar}/>

src/components/composites/extract/index.tsx

@@ -9,7 +9,7 @@ import {Button} from '@/components/ui/button'
 import {useForm, useFormContext, useWatch} from 'react-hook-form'
 import {Alert, AlertTitle} from '@/components/ui/alert'
 import {ArrowRight, Box, CircleAlert, CopyIcon, ExternalLinkIcon, LinkIcon, Loader, Plus, Timer} from 'lucide-react'
-import {memo, ReactNode, useEffect, useRef, useState} from 'react'
+import {memo, ReactNode, Suspense, use, useEffect, useRef, useState} from 'react'
 import {useStatus} from '@/lib/states'
 import {allResource} from '@/actions/resource'
 import {Resource} from '@/lib/models'
@@ -113,7 +113,9 @@ const FormFields = memo(() => {
   return (
     <div className="flex flex-col gap-6 items-stretch max-w-[calc(160px*4+1rem*3)]">
       {/* 选择套餐 */}
-      <SelectResource/>
+      <Suspense>
+        <SelectResource/>
+      </Suspense>
 
       {/* 地区筛选 */}
       <SelectRegion/>
@@ -332,8 +334,13 @@ FormFields.displayName = 'FormFields'
 function SelectResource() {
   const [resources, setResources] = useState<Resource[]>([])
   const [status, setStatus] = useStatus()
-  const profile = useProfileStore(state => state.profile)
+  const profile = use(useProfileStore(store => store.profile))
   const getResources = async () => {
+    if (!profile) {
+      setStatus('done')
+      setResources([])
+      return
+    }
     setStatus('load')
     try {
       const resp = await allResource()
@@ -352,7 +359,7 @@ function SelectResource() {
   useEffect(() => {
     getResources().then()
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [])
+  }, [profile])
 
   return (
     <FormField name="resource" className="md:max-w-[calc(160px*2+1rem)]" label="选择套餐" classNames={{label: 'max-md:text-sm'}}>
@@ -372,8 +379,8 @@ function SelectResource() {
               </div>
             ) : !profile ? (
               <div className="p-4 flex gap-1 items-center">
-                <Loader className="animate-spin" size={20}/>
-                <span>请先登录账号，<Link href="/login" className="text-blue-600 hover:underline">去登录</Link></span>
+                {/* <Loader className="animate-spin" size={20}/> */}
+                <span className="text-gray-600">请先登录账号，<Link href="/login" className="text-blue-600 hover:text-blue-700 font-medium">去登录</Link></span>
               </div>
             ) : resources.length === 0 ? (
               <div className="p-4 flex gap-1 items-center">