feat: restore original admin shell quality

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

@@ -1,11 +1,20 @@
 <script lang="ts" setup>
-import { computed, defineAsyncComponent, useSlots } from 'vue';
+import { computed, useSlots } from 'vue';
 
-import { preferences } from '@vben/preferences';
+import { useRefresh } from '@vben/hooks';
+import { RotateCw } from '@vben/icons';
+import { preferences, usePreferences } from '@vben/preferences';
+import { useAccessStore } from '@vben/stores';
 
-const ThemeToggle = defineAsyncComponent(
-  () => import('../../widgets/theme-toggle/theme-toggle.vue'),
-);
+import { VbenFullScreen, VbenIconButton } from '@vben-core/shadcn-ui';
+
+import {
+  GlobalSearch,
+  LanguageToggle,
+  PreferencesButton,
+  ThemeToggle,
+  TimezoneButton,
+} from '../../widgets';
 
 interface Props {
   /**
@@ -22,19 +31,55 @@ withDefaults(defineProps<Props>(), {
   theme: 'light',
 });
 
+const emit = defineEmits<{ clearPreferencesAndLogout: [] }>();
+
 const REFERENCE_VALUE = 50;
 
+const accessStore = useAccessStore();
 const slots = useSlots();
+const { refresh } = useRefresh();
+const { globalSearchShortcutKey, preferencesButtonPosition } =
+  usePreferences();
 
 const rightSlots = computed(() => {
   const list = [{ index: REFERENCE_VALUE + 100, name: 'user-dropdown' }];
 
+  if (preferences.widget.globalSearch) {
+    list.push({
+      index: REFERENCE_VALUE,
+      name: 'global-search',
+    });
+  }
+  if (preferencesButtonPosition.value.header) {
+    list.push({
+      index: REFERENCE_VALUE + 10,
+      name: 'preferences',
+    });
+  }
   if (preferences.widget.themeToggle) {
     list.push({
       index: REFERENCE_VALUE + 20,
       name: 'theme-toggle',
     });
   }
+  if (preferences.widget.languageToggle) {
+    list.push({
+      index: REFERENCE_VALUE + 30,
+      name: 'language-toggle',
+    });
+  }
+  if (preferences.widget.timezone) {
+    list.push({
+      index: REFERENCE_VALUE + 40,
+      name: 'timezone',
+    });
+  }
+  if (preferences.widget.fullscreen) {
+    list.push({
+      index: REFERENCE_VALUE + 50,
+      name: 'fullscreen',
+    });
+  }
   if (preferences.widget.notification) {
     list.push({
       index: REFERENCE_VALUE + 60,
@@ -54,6 +99,13 @@ 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')) {
@@ -63,6 +115,9 @@ const leftSlots = computed(() => {
   return list.sort((a, b) => a.index - b.index);
 });
 
+function clearPreferencesAndLogout() {
+  emit('clearPreferencesAndLogout');
+}
 </script>
 
 <template>
@@ -71,6 +126,11 @@ const leftSlots = computed(() => {
     :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">
@@ -91,9 +151,31 @@ const leftSlots = computed(() => {
   <div class="flex h-full min-w-0 flex-shrink-0 items-center">
     <template v-for="slot in rightSlots" :key="slot.name">
       <slot :name="slot.name">
-        <template v-if="slot.name === 'theme-toggle'">
+        <template v-if="slot.name === 'global-search'">
+          <GlobalSearch
+            :enable-shortcut-key="globalSearchShortcutKey"
+            :menus="accessStore.accessMenus"
+            class="mr-1 sm:mr-4"
+          />
+        </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>
+        <template v-else-if="slot.name === 'language-toggle'">
+          <LanguageToggle class="mr-1" />
+        </template>
+        <template v-else-if="slot.name === 'fullscreen'">
+          <VbenFullScreen class="mr-1" />
+        </template>
+        <template v-else-if="slot.name === 'timezone'">
+          <TimezoneButton class="mr-1 mt-[2px]" />
+        </template>
       </slot>
     </template>
   </div>