feat: new interface pendant can be configured to display hidden

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

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { usePreferences } from '@vben-core/preferences';
+import { preferences, usePreferences } from '@vben-core/preferences';
 import { VbenFullScreen } from '@vben-core/shadcn-ui';
 import { useCoreAccessStore } from '@vben-core/stores';
 
@@ -33,14 +33,15 @@ const { globalSearchShortcutKey } = usePreferences();
   </div>
   <div class="flex h-full min-w-0 flex-shrink-0 items-center">
     <GlobalSearch
+      v-if="preferences.widget.globalSearch"
       :enable-shortcut-key="globalSearchShortcutKey"
       :menus="accessStore.accessMenus"
       class="mr-4"
     />
-    <ThemeToggle class="mr-2" />
-    <LanguageToggle class="mr-2" />
-    <VbenFullScreen class="mr-2" />
-    <slot name="notification"></slot>
+    <ThemeToggle v-if="preferences.widget.themeToggle" class="mr-2" />
+    <LanguageToggle v-if="preferences.widget.languageToggle" class="mr-2" />
+    <VbenFullScreen v-if="preferences.widget.fullscreen" class="mr-2" />
+    <slot v-if="preferences.widget.notification" name="notification"></slot>
     <slot name="user-dropdown"></slot>
   </div>
 </template>

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

@@ -38,7 +38,7 @@ const headerMenuTheme = computed(() => {
 });
 
 const theme = computed(() => {
-  const dark = isDark.value || preferences.app.semiDarkMenu;
+  const dark = isDark.value || preferences.theme.semiDarkMenu;
   return dark ? 'dark' : 'light';
 });
 
@@ -122,6 +122,7 @@ function clearPreferencesAndLogout() {
     :footer-fixed="preferences.footer.fixed"
     :header-hidden="preferences.header.hidden"
     :header-mode="preferences.header.mode"
+    :header-toggle-sidebar-button="preferences.widget.sidebarToggle"
     :header-visible="preferences.header.enable"
     :is-mobile="preferences.app.isMobile"
     :layout="layout"
@@ -131,7 +132,7 @@ function clearPreferencesAndLogout() {
     :sidebar-expand-on-hover="preferences.sidebar.expandOnHover"
     :sidebar-extra-collapse="preferences.sidebar.extraCollapse"
     :sidebar-hidden="preferences.sidebar.hidden"
-    :sidebar-semi-dark="preferences.app.semiDarkMenu"
+    :sidebar-semi-dark="preferences.theme.semiDarkMenu"
     :sidebar-theme="theme"
     :sidebar-width="preferences.sidebar.width"
     :tabbar-enable="preferences.tabbar.enable"
@@ -158,7 +159,7 @@ function clearPreferencesAndLogout() {
 
     <template #floating-groups>
       <CozeAssistant
-        v-if="preferences.app.aiAssistant"
+        v-if="preferences.widget.aiAssistant"
         :is-mobile="preferences.app.isMobile"
       />
       <VbenBackTop />

packages/business/layouts/src/widgets/preferences/blocks/general/general.vue

@@ -13,7 +13,6 @@ defineOptions({
 
 const appLocale = defineModel<string>('appLocale');
 const appDynamicTitle = defineModel<boolean>('appDynamicTitle');
-const appAiAssistant = defineModel<boolean>('appAiAssistant');
 
 const localeItems: SelectListItem[] = SUPPORT_LANGUAGES.map((item) => ({
   label: item.text,
@@ -28,7 +27,4 @@ const localeItems: SelectListItem[] = SUPPORT_LANGUAGES.map((item) => ({
   <SwitchItem v-model="appDynamicTitle">
     {{ $t('preferences.dynamic-title') }}
   </SwitchItem>
-  <SwitchItem v-model="appAiAssistant">
-    {{ $t('preferences.ai-assistant') }}
-  </SwitchItem>
 </template>

packages/business/layouts/src/widgets/preferences/blocks/index.ts

@@ -10,6 +10,7 @@ export { default as Layout } from './layout/layout.vue';
 export { default as Navigation } from './layout/navigation.vue';
 export { default as Sidebar } from './layout/sidebar.vue';
 export { default as Tabbar } from './layout/tabbar.vue';
+export { default as Widget } from './layout/widget.vue';
 export { default as GlobalShortcutKeys } from './shortcut-keys/global.vue';
 export { default as SwitchItem } from './switch-item.vue';
 export { default as BuiltinTheme } from './theme/builtin.vue';

packages/business/layouts/src/widgets/preferences/blocks/layout/interface-control.vue

@@ -1,21 +0,0 @@
-<script setup lang="ts">
-import { $t } from '@vben-core/locales';
-
-import SwitchItem from '../switch-item.vue';
-
-defineOptions({
-  name: 'PreferenceInterfaceControl',
-});
-
-const tabsVisible = defineModel<boolean>('tabsVisible');
-const logoVisible = defineModel<boolean>('logoVisible');
-</script>
-
-<template>
-  <SwitchItem v-model="tabsVisible">
-    {{ $t('preferences.tabbar.enable') }}
-  </SwitchItem>
-  <SwitchItem v-model="logoVisible">
-    {{ $t('preferences.logo-visible') }}
-  </SwitchItem>
-</template>

packages/business/layouts/src/widgets/preferences/blocks/layout/widget.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { $t } from '@vben-core/locales';
+
+import SwitchItem from '../switch-item.vue';
+
+defineOptions({
+  name: 'PreferenceInterfaceControl',
+});
+
+const widgetGlobalSearch = defineModel<boolean>('widgetGlobalSearch');
+const widgetFullscreen = defineModel<boolean>('widgetFullscreen');
+const widgetLanguageToggle = defineModel<boolean>('widgetLanguageToggle');
+const widgetNotification = defineModel<boolean>('widgetNotification');
+const widgetThemeToggle = defineModel<boolean>('widgetThemeToggle');
+const widgetAiAssistant = defineModel<boolean>('widgetAiAssistant');
+const widgetSidebarToggle = defineModel<boolean>('widgetSidebarToggle');
+</script>
+
+<template>
+  <SwitchItem v-model="widgetGlobalSearch">
+    {{ $t('preferences.widget.global-search') }}
+  </SwitchItem>
+  <SwitchItem v-model="widgetThemeToggle">
+    {{ $t('preferences.widget.theme-toggle') }}
+  </SwitchItem>
+  <SwitchItem v-model="widgetLanguageToggle">
+    {{ $t('preferences.widget.language-toggle') }}
+  </SwitchItem>
+  <SwitchItem v-model="widgetFullscreen">
+    {{ $t('preferences.widget.fullscreen') }}
+  </SwitchItem>
+  <SwitchItem v-model="widgetNotification">
+    {{ $t('preferences.widget.notification') }}
+  </SwitchItem>
+  <SwitchItem v-model="widgetAiAssistant">
+    {{ $t('preferences.widget.ai-assistant') }}
+  </SwitchItem>
+  <SwitchItem v-model="widgetSidebarToggle">
+    {{ $t('preferences.widget.sidebar-toggle') }}
+  </SwitchItem>
+</template>

packages/business/layouts/src/widgets/preferences/preferences-sheet.vue

@@ -51,6 +51,7 @@ import {
   Sidebar,
   Tabbar,
   Theme,
+  Widget,
 } from './blocks';
 import IconSetting from './icons/setting.vue';
 import { useOpenPreferences } from './use-open-preferences';
@@ -59,7 +60,6 @@ const emit = defineEmits<{ clearPreferencesAndLogout: [] }>();
 const { toast } = useToast();
 const appLocale = defineModel<SupportedLanguagesType>('appLocale');
 const appDynamicTitle = defineModel<boolean>('appDynamicTitle');
-const appAiAssistant = defineModel<boolean>('appAiAssistant');
 const appLayout = defineModel<LayoutType>('appLayout');
 const appColorGrayMode = defineModel<boolean>('appColorGrayMode');
 const appColorWeakMode = defineModel<boolean>('appColorWeakMode');
@@ -129,6 +129,14 @@ const shortcutKeysGlobalPreferences = defineModel<boolean>(
   'shortcutKeysGlobalPreferences',
 );
 
+const widgetGlobalSearch = defineModel<boolean>('widgetGlobalSearch');
+const widgetFullscreen = defineModel<boolean>('widgetFullscreen');
+const widgetLanguageToggle = defineModel<boolean>('widgetLanguageToggle');
+const widgetNotification = defineModel<boolean>('widgetNotification');
+const widgetThemeToggle = defineModel<boolean>('widgetThemeToggle');
+const widgetAiAssistant = defineModel<boolean>('widgetAiAssistant');
+const widgetSidebarToggle = defineModel<boolean>('widgetSidebarToggle');
+
 const {
   diffPreference,
   isDark,
@@ -245,7 +253,6 @@ async function handleReset() {
           <template #general>
             <Block :title="$t('preferences.general')">
               <General
-                v-model:app-ai-assistant="appAiAssistant"
                 v-model:app-dynamic-title="appDynamicTitle"
                 v-model:app-locale="appLocale"
               />
@@ -346,6 +353,17 @@ async function handleReset() {
                 v-model:tabbar-show-icon="tabbarShowIcon"
               />
             </Block>
+            <Block :title="$t('preferences.widget.title')">
+              <Widget
+                v-model:widget-ai-assistant="widgetAiAssistant"
+                v-model:widget-fullscreen="widgetFullscreen"
+                v-model:widget-global-search="widgetGlobalSearch"
+                v-model:widget-language-toggle="widgetLanguageToggle"
+                v-model:widget-notification="widgetNotification"
+                v-model:widget-sidebar-toggle="widgetSidebarToggle"
+                v-model:widget-theme-toggle="widgetThemeToggle"
+              />
+            </Block>
             <Block :title="$t('preferences.footer.title')">
               <Footer
                 v-model:footer-enable="footerEnable"