feat: Preferences support clearing the cache and logging out

packages/business/layouts/src/basic/layout.vue

@@ -28,6 +28,8 @@ import { Breadcrumb } from './widgets';
 
 defineOptions({ name: 'BasicLayout' });
 
+const emit = defineEmits<{ clearPreferencesAndLogout: [] }>();
+
 const { isDark, isHeaderNav, isMixedNav, isSideMixedNav, layout } =
   usePreferences();
 
@@ -106,6 +108,10 @@ function toggleSidebar() {
     },
   });
 }
+
+function clearPreferencesAndLogout() {
+  emit('clearPreferencesAndLogout');
+}
 </script>
 
 <template>
@@ -147,7 +153,9 @@ function toggleSidebar() {
     "
   >
     <template v-if="preferences.app.showPreference" #preferences>
-      <PreferencesWidget />
+      <PreferencesWidget
+        @clear-preferences-and-logout="clearPreferencesAndLogout"
+      />
     </template>
 
     <template #floating-groups>

packages/business/widgets/src/preferences/preferences.vue

@@ -18,6 +18,7 @@ import { computed, ref } from 'vue';
 import { $t, loadLocaleMessages } from '@vben/locales';
 import { IcRoundFolderCopy, IcRoundRestartAlt } from '@vben-core/iconify';
 import {
+  clearPreferencesCache,
   preferences,
   resetPreferences,
   usePreferences,
@@ -53,6 +54,8 @@ import {
 import Trigger from './trigger.vue';
 import { useOpenPreferences } from './use-open-preferences';
 
+const emit = defineEmits<{ clearPreferencesAndLogout: [] }>();
+
 const appLocale = defineModel<SupportedLanguagesType>('appLocale');
 const appDynamicTitle = defineModel<boolean>('appDynamicTitle');
 const appAiAssistant = defineModel<boolean>('appAiAssistant');
@@ -166,6 +169,12 @@ async function handleCopy() {
   toast($t('preferences.copy-success'));
 }
 
+async function handleClearCache() {
+  resetPreferences();
+  clearPreferencesCache();
+  emit('clearPreferencesAndLogout');
+}
+
 async function handleReset() {
   if (!diffPreference.value) {
     return;
@@ -187,17 +196,19 @@ async function handleReset() {
         <Trigger />
       </template>
       <template #extra>
-        <VbenIconButton
-          :disabled="!diffPreference"
-          :tooltip="$t('preferences.reset-tip')"
-          class="relative"
-        >
-          <span
-            v-if="diffPreference"
-            class="bg-primary absolute right-0.5 top-0.5 h-2 w-2 rounded"
-          ></span>
-          <IcRoundRestartAlt class="size-5" @click="handleReset" />
-        </VbenIconButton>
+        <div class="flex items-center">
+          <VbenIconButton
+            :disabled="!diffPreference"
+            :tooltip="$t('preferences.reset-tip')"
+            class="relative"
+          >
+            <span
+              v-if="diffPreference"
+              class="bg-primary absolute right-0.5 top-0.5 h-2 w-2 rounded"
+            ></span>
+            <IcRoundRestartAlt class="size-5" @click="handleReset" />
+          </VbenIconButton>
+        </div>
       </template>
 
       <div class="p-4 pt-4">
@@ -328,9 +339,18 @@ async function handleReset() {
       </div>
 
       <template #footer>
+        <VbenButton
+          class="mx-4 w-full"
+          size="sm"
+          variant="outline"
+          @click="handleClearCache"
+        >
+          <IcRoundRestartAlt class="mr-2 size-4" />
+          {{ $t('preferences.clear-and-logout') }}
+        </VbenButton>
         <VbenButton
           :disabled="!diffPreference"
-          class="mx-6 w-full"
+          class="mr-4 w-full"
           size="sm"
           variant="default"
           @click="handleCopy"