fix(projects): 添加西瓜视频实例在onUnMounted的销毁，多页签居中距离精确

src/layouts/common/GlobalTab/components/MultiTab/index.vue

@@ -71,13 +71,13 @@ function setDropdownConfig(x: number, y: number, currentPath: string) {
 
 // 获取当前激活的tab的clientX
 const tabRef = ref<HTMLElement | null>(null);
-async function getActiveChromeTabClientX() {
+async function getActiveTabClientX() {
   await nextTick();
   const index = app.activeMultiTabIndex;
   if (tabRef.value) {
     const activeTabElement = tabRef.value.children[index];
     const { x, width } = activeTabElement.getBoundingClientRect();
-    const clientX = x + width;
+    const clientX = x + width / 2;
     setTimeout(() => {
       emit('scroll', clientX);
     }, 50);
@@ -103,7 +103,7 @@ useEventListener(window, 'beforeunload', () => {
 watch(
   () => app.activeMultiTabIndex,
   () => {
-    getActiveChromeTabClientX();
+    getActiveTabClientX();
   },
   {
     immediate: true

src/views/component/video/index.vue

@@ -7,24 +7,30 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from 'vue';
+import { ref, onMounted, onUnmounted } from 'vue';
 import { NCard } from 'naive-ui';
 import Player from 'xgplayer';
 
 const domRef = ref<HTMLElement | null>(null);
+const player = ref<Player | null>(null);
 
 function renderXgPlayer() {
   const url = 'https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/byted-player-videos/1.0.0/xgplayer-demo.mp4';
-  const player = new Player({
+  player.value = new Player({
     el: domRef.value!,
     url,
     playbackRate: [0.5, 0.75, 1, 1.5, 2]
   });
-  return player;
+}
+function destroyXgPlayer() {
+  player.value?.destroy();
 }
 
 onMounted(() => {
   renderXgPlayer();
 });
+onUnmounted(() => {
+  destroyXgPlayer();
+});
 </script>
 <style scoped></style>