Trim layout widgets runtime

web/packages/effects/layouts/src/basic/header/header.vue

@@ -1,20 +1,27 @@
 <script lang="ts" setup>
-import { computed, useSlots } from 'vue';
+import { computed, defineAsyncComponent, useSlots } from 'vue';
 
-import { useRefresh } from '@vben/hooks';
-import { RotateCw } from '@vben/icons';
 import { preferences, usePreferences } from '@vben/preferences';
 import { useAccessStore } from '@vben/stores';
 
-import { VbenFullScreen, VbenIconButton } from '@vben-core/shadcn-ui';
-
-import {
-  GlobalSearch,
-  LanguageToggle,
-  PreferencesButton,
-  ThemeToggle,
-  TimezoneButton,
-} from '../../widgets';
+const GlobalSearch = defineAsyncComponent(
+  () => import('../../widgets/global-search/global-search.vue'),
+);
+const LanguageToggle = defineAsyncComponent(
+  () => import('../../widgets/language-toggle.vue'),
+);
+const ThemeToggle = defineAsyncComponent(
+  () => import('../../widgets/theme-toggle/theme-toggle.vue'),
+);
+const TimezoneButton = defineAsyncComponent(
+  () => import('../../widgets/timezone/timezone-button.vue'),
+);
+const VbenFullScreen = defineAsyncComponent(
+  () =>
+    import(
+      '../../../../../@core/ui-kit/shadcn-ui/src/components/full-screen/full-screen.vue'
+    ),
+);
 
 interface Props {
   /**
@@ -31,14 +38,11 @@ withDefaults(defineProps<Props>(), {
   theme: 'light',
 });
 
-const emit = defineEmits<{ clearPreferencesAndLogout: [] }>();
-
 const REFERENCE_VALUE = 50;
 
 const accessStore = useAccessStore();
-const { globalSearchShortcutKey, preferencesButtonPosition } = usePreferences();
+const { globalSearchShortcutKey } = usePreferences();
 const slots = useSlots();
-const { refresh } = useRefresh();
 
 const rightSlots = computed(() => {
   const list = [{ index: REFERENCE_VALUE + 100, name: 'user-dropdown' }];
@@ -49,12 +53,6 @@ const rightSlots = computed(() => {
     });
   }
 
-  if (preferencesButtonPosition.value.header) {
-    list.push({
-      index: REFERENCE_VALUE + 10,
-      name: 'preferences',
-    });
-  }
   if (preferences.widget.themeToggle) {
     list.push({
       index: REFERENCE_VALUE + 20,
@@ -98,13 +96,6 @@ const rightSlots = computed(() => {
 const leftSlots = computed(() => {
   const list: Array<{ index: number; name: string }> = [];
 
-  if (preferences.widget.refresh) {
-    list.push({
-      index: 0,
-      name: 'refresh',
-    });
-  }
-
   Object.keys(slots).forEach((key) => {
     const name = key.split('-');
     if (key.startsWith('header-left')) {
@@ -114,9 +105,6 @@ const leftSlots = computed(() => {
   return list.sort((a, b) => a.index - b.index);
 });
 
-function clearPreferencesAndLogout() {
-  emit('clearPreferencesAndLogout');
-}
 </script>
 
 <template>
@@ -125,11 +113,6 @@ function clearPreferencesAndLogout() {
     :key="slot.name"
   >
     <slot :name="slot.name">
-      <template v-if="slot.name === 'refresh'">
-        <VbenIconButton class="my-0 mr-1 rounded-md" @click="refresh">
-          <RotateCw class="size-4" />
-        </VbenIconButton>
-      </template>
     </slot>
   </template>
   <div class="flex-center hidden lg:block">
@@ -158,12 +141,6 @@ function clearPreferencesAndLogout() {
           />
         </template>
 
-        <template v-else-if="slot.name === 'preferences'">
-          <PreferencesButton
-            class="mr-1"
-            @clear-preferences-and-logout="clearPreferencesAndLogout"
-          />
-        </template>
         <template v-else-if="slot.name === 'theme-toggle'">
           <ThemeToggle class="mr-1 mt-[2px]" />
         </template>