feat: Preferences support clearing the cache and logging out

apps/web-antd/src/layouts/basic.vue

@@ -95,7 +95,7 @@ function handleNoticeClear() {
 </script>
 
 <template>
-  <BasicLayout>
+  <BasicLayout @clear-preferences-and-logout="handleLogout">
     <template #user-dropdown>
       <UserDropdown
         :avatar="preferences.app.defaultAvatar"

internal/node-utils/package.json

@@ -36,7 +36,7 @@
     "nanoid": "^5.0.7",
     "pkg-types": "^1.1.3",
     "prettier": "^3.3.2",
-    "rimraf": "^5.0.7",
+    "rimraf": "^5.0.8",
     "zx": "^7.2.3"
   }
 }

package.json

@@ -67,7 +67,7 @@
     "husky": "^9.0.11",
     "is-ci": "^3.0.1",
     "jsdom": "^24.1.0",
-    "rimraf": "^5.0.7",
+    "rimraf": "^5.0.8",
     "taze": "^0.14.2",
     "turbo": "^2.0.6",
     "typescript": "^5.5.3",

packages/@core/forward/preferences/src/index.ts

@@ -17,7 +17,11 @@ const updatePreferences =
 const resetPreferences =
   preferencesManager.resetPreferences.bind(preferencesManager);
 
+const clearPreferencesCache =
+  preferencesManager.clearCache.bind(preferencesManager);
+
 export {
+  clearPreferencesCache,
   // flatPreferences,
   preferences,
   preferencesManager,

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
+        <div class="flex items-center">
-          :disabled="!diffPreference"
+          <VbenIconButton
-          :tooltip="$t('preferences.reset-tip')"
+            :disabled="!diffPreference"
-          class="relative"
+            :tooltip="$t('preferences.reset-tip')"
-        >
+            class="relative"
-          <span
+          >
-            v-if="diffPreference"
+            <span
-            class="bg-primary absolute right-0.5 top-0.5 h-2 w-2 rounded"
+              v-if="diffPreference"
-          ></span>
+              class="bg-primary absolute right-0.5 top-0.5 h-2 w-2 rounded"
-          <IcRoundRestartAlt class="size-5" @click="handleReset" />
+            ></span>
-        </VbenIconButton>
+            <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"

packages/locales/src/langs/en-US.yaml

@@ -165,6 +165,7 @@ preferences:
   interface-control: Interface Layout Control
   copy: Copy Preferences
   copy-success: Copy successful. Please replace in `src/preferences.ts` of the app
+  clear-and-logout: Clear Cache & Logout
   reset-success: Preferences reset successfully
   sidebar: Sidebar
   side-visible: Display Sidebar

packages/locales/src/langs/zh-CN.yaml

@@ -164,6 +164,7 @@ preferences:
   rounded: 圆润
   copy: 复制偏好设置
   copy-success: 拷贝成功，请在 app 下的 `src/preferences.ts`内进行覆盖
+  clear-and-logout: 清空缓存 & 退出登录
   reset-success: 重置偏好设置成功
   sidebar: 侧边栏
   side-visible: 显示侧边栏