111

components/i/Nav.vue

@@ -19,6 +19,7 @@
             @click="handleClickItem"
         />
         <ISearchHistory @sign="handleOpenSign" />
+        <ClientOnly>
             <UButton
                 v-if="!$isSignIn"
                 class="flex flex-grow gap-2 justify-center"
@@ -26,6 +27,7 @@
                 label="登录"
                 @click="handleOpenSign"
             />
+        </ClientOnly>
     </div>
     <UModal v-model="isOpenSign">
         <ISign @close="handleCloseSign" />

components/i/UserInfo.vue

 <template>
     <div class="flex flex-col w-full">
+        <ClientOnly>
             <template v-if="$isSignIn">
                 <div class="flex flex-grow justify-between items-center p-4">
                     <UDropdown class="flex flex-grow" :items="items">
                         <UButton class="flex flex-grow" color="gray" variant="ghost">
                             <div class="flex flex-grow items-center gap-2">
-                            <UAvatar :src="$info.avatar" />
-                            <div>{{ $info.name }}</div>
+                                <UAvatar :src="$info.avatar_url" />
+                                <div>{{ $info.nickname }}</div>
                                 <UBadge v-if="$info.pro" size="xs" color="yellow" variant="soft" label="PRO" />
                                 <UBadge v-else size="xs" color="gray" variant="soft" label="FREE" />
                             </div>
@@ -16,6 +17,7 @@
                 </div>
                 <UDivider />
             </template>
+        </ClientOnly>
         <div class="flex justify-between gap-2 p-4">
             <UButton
                 class="flex-grow"
@@ -46,7 +48,7 @@
     </div>
 </template>
 <script setup>
-const { $isSignIn, $info } = useUserStore()
+const { $isSignIn, $info } = storeToRefs(useUserStore())
 const { $lang, $langOptions } = useI18nStore()
 const colorMode = useColorMode()
 const isDark = computed({

stores/user.js

@@ -10,9 +10,9 @@ export const useUserStore = defineStore('user', () => {
     //     avatar: 'https://csdn-665-inscode.s3.cn-north-1.jdcloud-oss.com/inscode/202303/622eda98dfef6c4fdb84ccca/1680089871598-75919715-hvlk99ddLLhyNTXtl4TaQAgeFBFz4ZGD/avatar',
     //     pro: 1
     // })
-    const $info = ref(userInfo.value || {})
+    const $info = computed(() => userInfo.value || {})
 
-    const $isSignIn = ref(!!token.value)
+    const $isSignIn = computed(() => !!token.value)
 
     return { $info, $isSignIn }
 })