feat(pages): ✨ add ElBacktop

Author: AnzhiZhang

pages/plugins/[id].vue

@@ -1,8 +1,16 @@
 <template>
   <div id="plugin">
+    <ElBacktop
+        style="left: 40px;"
+        :visibility-height="backtopVisibilityHeight"
+    />
     <aside id="aside">
-      <PagePluginsInfoCard1 :brief="pluginBrief"/>
+      <PagePluginsInfoCard1
+          ref="infoCard1"
+          :brief="pluginBrief"
+      />
       <PagePluginsInfoCard2
+          ref="infoCard2"
           :brief="pluginBrief"
           :data="pluginData"
           @view-all="viewAllRelease"
@@ -85,13 +93,24 @@
 <script setup lang="ts">
 import {ComputedRef} from "vue";
 import {PluginData, PluginDataBrief} from "~/types/plugins";
+import {PagePluginsInfoCard1, PagePluginsInfoCard2} from "#components";
 
 // ----------------------------------------------------------------------------
 // basic constants
 // ----------------------------------------------------------------------------
 const {t} = useI18n();
 const id = useRoute().params.id as string;
 
+// ----------------------------------------------------------------------------
+// component refs
+// ----------------------------------------------------------------------------
+const infoCard1 = ref<InstanceType<typeof PagePluginsInfoCard1> | null>(null);
+const infoCard2 = ref<InstanceType<typeof PagePluginsInfoCard2> | null>(null);
+const backtopVisibilityHeight = ref(0);
+
+onMounted(() => {
+  backtopVisibilityHeight.value = (infoCard1.value!.$el.clientHeight + infoCard2.value!.$el.clientHeight) / 2;
+});
 // ----------------------------------------------------------------------------
 // votes store
 // ----------------------------------------------------------------------------

pages/plugins/index.vue

@@ -1,5 +1,6 @@
 <template>
   <div id="plugins">
+    <ElBacktop style="left: 40px;"/>
     <div
         id="plugins-search"
         class="box"