feat: tabs adds a variety of style configurations

packages/effects/layouts/src/basic/tabbar/tabbar.vue

@@ -41,7 +41,9 @@ if (!preferences.tabbar.persist) {
   <TabsView
     :active="currentActive"
     :context-menus="createContextMenus"
+    :dragable="preferences.tabbar.dragable"
     :show-icon="showIcon"
+    :style-type="preferences.tabbar.styleType"
     :tabs="currentTabs"
     @close="handleClose"
     @sort-tabs="coreTabbarStore.sortTabs"

packages/effects/layouts/src/widgets/preferences/blocks/layout/tabbar.vue

@@ -1,6 +1,10 @@
 <script setup lang="ts">
-import { $t } from '@vben-core/locales';
+import { computed } from 'vue';
 
+import { $t } from '@vben-core/locales';
+import { SelectOption } from '@vben-core/typings';
+
+import SelectItem from '../select-item.vue';
 import SwitchItem from '../switch-item.vue';
 
 defineOptions({
@@ -12,6 +16,28 @@ defineProps<{ disabled?: boolean }>();
 const tabbarEnable = defineModel<boolean>('tabbarEnable');
 const tabbarShowIcon = defineModel<boolean>('tabbarShowIcon');
 const tabbarPersist = defineModel<boolean>('tabbarPersist');
+const tabbarDragable = defineModel<boolean>('tabbarDragable');
+const tabbarStyleType = defineModel<string>('tabbarStyleType');
+
+const styleItems = computed((): SelectOption[] => [
+  {
+    label: $t('preferences.tabbar.styleType.chrome'),
+    value: 'chrome',
+  },
+  {
+    label: $t('preferences.tabbar.styleType.plain'),
+    value: 'plain',
+  },
+  {
+    label: $t('preferences.tabbar.styleType.card'),
+    value: 'card',
+  },
+
+  {
+    label: $t('preferences.tabbar.styleType.brisk'),
+    value: 'brisk',
+  },
+]);
 </script>
 
 <template>
@@ -24,4 +50,10 @@ const tabbarPersist = defineModel<boolean>('tabbarPersist');
   <SwitchItem v-model="tabbarPersist" :disabled="!tabbarEnable">
     {{ $t('preferences.tabbar.persist') }}
   </SwitchItem>
+  <SwitchItem v-model="tabbarDragable" :disabled="!tabbarEnable">
+    {{ $t('preferences.tabbar.dragable') }}
+  </SwitchItem>
+  <SelectItem v-model="tabbarStyleType" :items="styleItems">
+    {{ $t('preferences.tabbar.styleType.title') }}
+  </SelectItem>
 </template>

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

@@ -95,6 +95,8 @@ const breadcrumbHideOnlyOne = defineModel<boolean>('breadcrumbHideOnlyOne');
 const tabbarEnable = defineModel<boolean>('tabbarEnable');
 const tabbarShowIcon = defineModel<boolean>('tabbarShowIcon');
 const tabbarPersist = defineModel<boolean>('tabbarPersist');
+const tabbarDragable = defineModel<boolean>('tabbarDragable');
+const tabbarStyleType = defineModel<string>('tabbarStyleType');
 
 const navigationStyleType = defineModel<NavigationStyleType>(
   'navigationStyleType',
@@ -346,9 +348,11 @@ async function handleReset() {
 
             <Block :title="$t('preferences.tabbar.title')">
               <Tabbar
+                v-model:tabbar-dragable="tabbarDragable"
                 v-model:tabbar-enable="tabbarEnable"
                 v-model:tabbar-persist="tabbarPersist"
                 v-model:tabbar-show-icon="tabbarShowIcon"
+                v-model:tabbar-style-type="tabbarStyleType"
               />
             </Block>
             <Block :title="$t('preferences.widget.title')">