perf: 💄 Optimize the display effect of the tabs bar

components.d.ts

@@ -9,6 +9,7 @@ declare module 'vue' {
   export interface GlobalComponents {
     ElAutocomplete: typeof import('element-plus/es')['ElAutocomplete']
     ElButton: typeof import('element-plus/es')['ElButton']
+    ElCard: typeof import('element-plus/es')['ElCard']
     ElCol: typeof import('element-plus/es')['ElCol']
     ElCollapse: typeof import('element-plus/es')['ElCollapse']
     ElCollapseItem: typeof import('element-plus/es')['ElCollapseItem']
@@ -30,6 +31,7 @@ declare module 'vue' {
     ElRadioButton: typeof import('element-plus/es')['ElRadioButton']
     ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
     ElRow: typeof import('element-plus/es')['ElRow']
+    ElSegmented: typeof import('element-plus/es')['ElSegmented']
     ElSelect: typeof import('element-plus/es')['ElSelect']
     ElSwitch: typeof import('element-plus/es')['ElSwitch']
     ElTable: typeof import('element-plus/es')['ElTable']

src/App.vue

@@ -1,29 +1,37 @@
 <template>
   <el-config-provider :locale="locale">
-    <div class="absolute inset-0 px-4 pb-4 h-full">
+    <div
-      <el-tabs
+      class="absolute inset-0 h-full flex flex-col px-4 pb-4 pt-1 space-y-4 overflow-hidden"
-        v-model="activeTab"
+    >
-        class="el-tabs-flex"
+      <div
-        addable
+        class="flex items-center flex-none border-b border-gray-200 dark:border-gray-700 pb-1"
-        @tab-change="onTabChange"
       >
-        <template #add-icon>
+        <div class="flex-none">
+          <el-segmented
+            v-slot="{ item }"
+            v-model="activeTab"
+            :options="tabsModel"
+            @change="onTabChange"
+          >
+            <div class="">
+              {{ $t(item.label) }}
+            </div>
+          </el-segmented>
+        </div>
+        <div class="flex-1 w-0 flex items-center justify-end">
           <Quick />
-        </template>
+        </div>
-        <el-tab-pane
+      </div>
-          v-for="(item, index) of tabsModel"
+
-          :key="index"
+      <div class="flex-1 h-0 overflow-auto">
-          :label="$t(item.label)"
+        <template v-for="item of tabsModel" :key="item.value">
-          :name="item.prop"
-          lazy
-        >
           <component
             :is="item.component"
             v-if="isRender(item)"
-            :ref="item.prop"
+            v-show="item.value === activeTab"
-          />
+          ></component>
-        </el-tab-pane>
+        </template>
-      </el-tabs>
+      </div>
     </div>
   </el-config-provider>
 </template>
@@ -50,23 +58,23 @@ const locale = computed(() => {
   return value
 })
 
-const tabsModel = ref([
+const tabsModel = [
   {
     label: 'device.list',
-    prop: 'Device',
+    value: 'Device',
-    component: markRaw(Device),
+    component: Device,
   },
   {
     label: 'preferences.name',
-    prop: 'Preference',
+    value: 'Preference',
-    component: markRaw(Preference),
+    component: Preference,
   },
   {
     label: 'about.name',
-    prop: 'About',
+    value: 'About',
-    component: markRaw(About),
+    component: About,
   },
-])
+]
 
 const activeTab = ref('Device')
 provide('activeTab', activeTab)
@@ -105,7 +113,7 @@ async function showTips() {
 }
 
 function isRender(item) {
-  if (renderTab.value === item.prop) {
+  if (renderTab.value === item?.value) {
     return rendered.value
   }
 
@@ -126,12 +134,12 @@ function reRenderPost() {
   renderSign.value = true
 }
 
-async function onTabChange(prop) {
+async function onTabChange(value) {
   if (!renderSign.value) {
     return false
   }
 
-  if (['Device', 'Preference'].includes(prop)) {
+  if (['Device', 'Preference'].includes(value)) {
     reRender()
   }
 
@@ -146,15 +154,11 @@ defineExpose({
 
 <style lang="postcss" scoped>
 :deep() {
-  .el-tabs__header {
+  .el-segmented {
-    @apply !mb-3;
+    --el-border-radius-base: 5px;
-  }
+    --el-segmented-bg-color: transparent;
-  .el-tabs__new-tab {
+    --el-segmented-item-selected-bg-color: var(--el-color-primary-light-9);
-    @apply !absolute !inset-y-0 !right-0 !border-none !w-auto;
+    --el-segmented-item-selected-color: rgba(var(--color-primary-500), 1);
-  }
-
-  .el-tabs__nav-wrap:after {
-    @apply !h-px;
   }
 }
 </style>

src/components/Preference/index.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="h-full flex flex-col overflow-hidden pt-1">
+  <div class="h-full flex flex-col overflow-hidden">
     <div
-      class="mr-4 pb-4 flex items-center justify-between flex-none border-b border-gray-200 dark:border-gray-700"
+      class="mr-4 pb-2 flex items-center justify-between flex-none border-b border-gray-200 dark:border-gray-700"
     >
       <div class="">
         <ScopeSelect