replace el-tabs

src/views/Charts/Charts.vue

@@ -1,21 +1,20 @@
 <template>
     <div id="chart" class="x-container">
-        <el-tabs v-model="activeTab" class="charts-tabs">
-            <el-tab-pane :label="t('view.charts.instance_activity.header')" name="instance"></el-tab-pane>
-            <el-tab-pane :label="t('view.charts.mutual_friend.tab_label')" name="mutual"></el-tab-pane>
-        </el-tabs>
-        <div v-show="activeTab === 'instance'">
-            <InstanceActivity />
-        </div>
-        <div v-show="activeTab === 'mutual'">
-            <MutualFriends />
-        </div>
+        <TabsUnderline v-model="activeTab" :items="chartTabs" :unmount-on-hide="false" class="charts-tabs">
+            <template #instance>
+                <InstanceActivity />
+            </template>
+            <template #mutual>
+                <MutualFriends />
+            </template>
+        </TabsUnderline>
         <el-backtop target="#chart" :right="30" :bottom="30"></el-backtop>
     </div>
 </template>
 
 <script setup>
-    import { defineAsyncComponent } from 'vue';
+    import { computed, defineAsyncComponent } from 'vue';
+    import { TabsUnderline } from '@/components/ui/tabs';
     import { storeToRefs } from 'pinia';
     import { useI18n } from 'vue-i18n';
 
@@ -27,10 +26,14 @@
     const { t } = useI18n();
     const chartsStore = useChartsStore();
     const { activeTab } = storeToRefs(chartsStore);
+    const chartTabs = computed(() => [
+        { value: 'instance', label: t('view.charts.instance_activity.header') },
+        { value: 'mutual', label: t('view.charts.mutual_friend.tab_label') }
+    ]);
 </script>
 
 <style scoped>
-    :deep(.el-tabs__header) {
+    :deep(.charts-tabs [data-slot='tabs-list']) {
         margin: 0;
     }
 </style>