From ca37b65962ca7c18ba0c63af8cc8ce6f93370b8d Mon Sep 17 00:00:00 2001
From: Ayaka Rizumu <464388324@qq.com>
Date: Fri, 30 Dec 2022 23:29:34 +0800
Subject: [PATCH] fix: prevent hydration mismatch after refreshing settings
 (#663)

---
 pages/settings.vue | 104 +++++++++++++++++++++++----------------------
 1 file changed, 53 insertions(+), 51 deletions(-)

diff --git a/pages/settings.vue b/pages/settings.vue
index 00b12923..26c300fc 100644
--- a/pages/settings.vue
+++ b/pages/settings.vue
@@ -9,58 +9,60 @@ const isRootPath = computedEager(() => route.name === 'settings')
 </script>
 
 <template>
-  <div min-h-screen flex>
-    <div border="r base" :class="isRootPath ? 'block lg:flex-none flex-1' : 'hidden lg:block'">
-      <MainContent>
-        <template #title>
-          <div text-lg font-bold flex items-center gap-2 @click="$scrollToTop">
-            <div i-ri:settings-4-line />
-            <span>{{ $t('nav.settings') }}</span>
+  <div>
+    <div min-h-screen flex>
+      <div border="r base" :class="isRootPath ? 'block lg:flex-none flex-1' : 'hidden lg:block'">
+        <MainContent>
+          <template #title>
+            <div text-lg font-bold flex items-center gap-2 @click="$scrollToTop">
+              <div i-ri:settings-4-line />
+              <span>{{ $t('nav.settings') }}</span>
+            </div>
+          </template>
+          <div xl:w-97 lg:w-78 w-full>
+            <SettingsNavItem
+              v-show="currentUser"
+              :command="!!currentUser"
+              icon="i-ri:user-line"
+              :text="$t('settings.profile.label')"
+              to="/settings/profile"
+            />
+            <SettingsNavItem
+              command
+              icon="i-ri-compasses-2-line"
+              :text="$t('settings.interface.label')"
+              to="/settings/interface"
+            />
+            <SettingsNavItem
+              command
+              icon="i-ri-globe-line"
+              :text="$t('settings.language.label')"
+              to="/settings/language"
+            />
+            <SettingsNavItem
+              command
+              icon="i-ri:settings-2-line"
+              :text="$t('settings.preferences.label')"
+              to="/settings/preferences"
+            />
+            <SettingsNavItem
+              command
+              icon="i-ri-group-line"
+              :text="$t('settings.users.label')"
+              to="/settings/users"
+            />
+            <SettingsNavItem
+              command
+              icon="i-ri:information-line"
+              :text="$t('settings.about.label')"
+              to="/settings/about"
+            />
           </div>
-        </template>
-        <div xl:w-97 lg:w-78 w-full>
-          <SettingsNavItem
-            v-show="currentUser"
-            :command="!!currentUser"
-            icon="i-ri:user-line"
-            :text="$t('settings.profile.label')"
-            to="/settings/profile"
-          />
-          <SettingsNavItem
-            command
-            icon="i-ri-compasses-2-line"
-            :text="$t('settings.interface.label')"
-            to="/settings/interface"
-          />
-          <SettingsNavItem
-            command
-            icon="i-ri-globe-line"
-            :text="$t('settings.language.label')"
-            to="/settings/language"
-          />
-          <SettingsNavItem
-            command
-            icon="i-ri:settings-2-line"
-            :text="$t('settings.preferences.label')"
-            to="/settings/preferences"
-          />
-          <SettingsNavItem
-            command
-            icon="i-ri-group-line"
-            :text="$t('settings.users.label')"
-            to="/settings/users"
-          />
-          <SettingsNavItem
-            command
-            icon="i-ri:information-line"
-            :text="$t('settings.about.label')"
-            to="/settings/about"
-          />
-        </div>
-      </MainContent>
-    </div>
-    <div flex-1 :class="isRootPath ? 'hidden lg:block' : 'block'">
-      <NuxtPage />
+        </MainContent>
+      </div>
+      <div flex-1 :class="isRootPath ? 'hidden lg:block' : 'block'">
+        <NuxtPage />
+      </div>
     </div>
   </div>
 </template>