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

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">