From a72bbaabf7f6e715313bb34eb1a26e70aeaafd02 Mon Sep 17 00:00:00 2001
From: Aresn <admin@aresn.com>
Date: Fri, 24 May 2024 19:04:36 +0800
Subject: [PATCH] 111

---
 components/i/Nav.vue      | 16 +++++++++-------
 components/i/UserInfo.vue | 36 +++++++++++++++++++-----------------
 stores/user.js            |  4 ++--
 3 files changed, 30 insertions(+), 26 deletions(-)

diff --git a/components/i/Nav.vue b/components/i/Nav.vue
index 011909e..f9f913b 100644
--- a/components/i/Nav.vue
+++ b/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" />
diff --git a/components/i/UserInfo.vue b/components/i/UserInfo.vue
index ee2b17b..7cf9e1b 100644
--- a/components/i/UserInfo.vue
+++ b/components/i/UserInfo.vue
@@ -1,21 +1,23 @@
 <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({
diff --git a/stores/user.js b/stores/user.js
index cfd5c46..3100ab0 100644
--- a/stores/user.js
+++ b/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 }
 })
-- 
GitLab