111

components/i/Nav.vue

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

components/i/UserInfo.vue

 <template>
     <div class="flex flex-col w-full">
-        <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>
-                            <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>
-                        <UIcon name="i-heroicons-chevron-down-20-solid" />
-                    </UButton>
-                </UDropdown>
-            </div>
-            <UDivider />
-        </template>
+        <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_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>
+                            <UIcon name="i-heroicons-chevron-down-20-solid" />
+                        </UButton>
+                    </UDropdown>
+                </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 }
 })