feat: 视频播放器风格修正，卸载页面时卸载视频播放器

src/style/xgplayer.scss

@@ -545,7 +545,7 @@
 }
 .xgplayer .xg-options-list li:hover,
 .xgplayer .xg-options-list li.selected {
-	color: red;
+	color: #13c16d;
 	opacity: 1;
 }
 .xgplayer .xg-options-list li:nth-child(1) {
@@ -622,7 +622,7 @@
 		color: #fffc;
 	}
 	.xgplayer-mobile .xg-options-list li.selected {
-		color: red;
+		color: #13c16d;
 	}
 }
 .xgplayer xg-thumbnail {
@@ -1093,7 +1093,7 @@
 	line-height: 24px;
 }
 .xgplayer xg-trigger .time-preview .xg-cur {
-	color: red;
+	color: #13c16d;
 }
 .xgplayer xg-trigger .time-preview .xg-separator {
 	font-size: 14px;
@@ -1118,7 +1118,7 @@
 .xgplayer xg-trigger .time-preview .xg-bar .xg-curbar {
 	width: 0;
 	height: 100%;
-	background-color: red;
+	background-color: #13c16d;
 }
 .xgplayer xg-trigger .time-preview .xg-bar.hide {
 	display: none;
@@ -1147,7 +1147,7 @@
 	text-align: center;
 }
 .xgplayer xg-trigger .xg-top-note i {
-	color: red;
+	color: #13c16d;
 	margin: 0 5px;
 }
 .xgplayer xg-trigger .xg-playbackrate {
@@ -1208,13 +1208,13 @@
 		color: #fff;
 	}
 	.xgplayer-mobile xg-trigger .time-preview span.xg-cur {
-		color: red;
+		color: #13c16d;
 	}
 	.xgplayer-mobile xg-trigger .time-preview .xg-bar {
 		background-color: #ffffff4d;
 	}
 	.xgplayer-mobile xg-trigger .time-preview .xg-bar.xg-curbar {
-		background-color: red;
+		background-color: #13c16d;
 	}
 }
 @keyframes loadingRotate {
@@ -1645,7 +1645,7 @@ xg-loading-inner {
 .xgplayer .xgplayer-drag {
 	bottom: 0;
 	left: 0;
-	background: linear-gradient(-90deg, #5dc1ff 0%, #13c16d 100%);
+	background: linear-gradient(180deg, #5dc1ff 0%, #13c16d 100%);
 	max-height: 76px;
 }
 .xgplayer .xgplayer-drag:after {
@@ -1810,7 +1810,7 @@ xg-loading-inner {
 .xgplayer .xgplayer-prompt .highlight {
 	display: inline-block;
 	margin-left: 6px;
-	color: red;
+	color: #13c16d;
 	cursor: pointer;
 }
 .xgplayer.xgplayer-is-error .xgplayer-prompt.show {

src/views/miaoDirectory.vue

@@ -43,18 +43,20 @@
                 <n-scrollbar>
                     <transition-group name="dirItem">
                         <miaoDirectoryItem v-for="dir in showData_directory" :item="dir" :key="dir.uid"
-                            :color="props.color" :selectedItem="selectedItem.value"
+                            :color="props.color" :selectedItem="selectedItem.value" @delete="handleItemDelete(dir)"
-                            @delete="handleItemDelete(dir)" @click="handleItemClick(dir)"
+                            @click="handleItemClick(dir)" @drag-start="handleItemDragStart"
-                            @drag-start="handleItemDragStart" @rename="handleItemRename(dir)"
+                            @rename="handleItemRename(dir)" @on-selected="handleItemSelect(dir)" />
-                            @on-selected="handleItemSelect(dir)" />
                     </transition-group>
                     <transition-group name="dirItem">
                         <miaoDirectoryItem v-for="file in showData_files" :item="file" :key="file.uid"
-                            :color="props.color" :selectedItem="selectedItem.value"
+                            :color="props.color" :selectedItem="selectedItem.value" @click="handleItemClick(file)"
-                            @click="handleItemClick(file)" @download="handleItemDownload(file)"
+                            @download="handleItemDownload(file)" @delete="handleItemDelete(file)"
-                            @delete="handleItemDelete(file)" @drag-start="handleItemDragStart"
+                            @drag-start="handleItemDragStart" @rename="handleItemRename(file)"
-                            @rename="handleItemRename(file)" @on-selected="handleItemSelect(file)" />
+                            @on-selected="handleItemSelect(file)" />
                     </transition-group>
+                    <!-- <n-virtual-list :item="showData_all" :item-size="50">
+
+                    </n-virtual-list> -->
                 </n-scrollbar>
             </div>
             <div class="container-bottom" :style="{
@@ -186,6 +188,13 @@ const showData_files = computed<VirtualFile[]>(() => {
         : []
     return data
 })
+// const showData_all = computed<(VirtualDirectory | VirtualFile)[]>(() => {
+//     const data = currentDirectory.value?.directorys
+//         ? [...currentDirectory.value?.directorys]
+//         : []
+//     data.push(...currentDirectory.value?.files)
+//     return data
+// })
 
 // 用于监听拖拽文件事件
 const rootDomRef = ref<HTMLDivElement>()

src/views/miaoVideoPlayer.vue

@@ -10,7 +10,7 @@
 <script lang="ts" setup>
 import { VirtualFile } from '@/class/VirtualDirectory';
 import miaoDropHandler from '@/components/miaoDropHandler.vue';
-import { onMounted, ref } from 'vue';
+import { onBeforeUnmount, onMounted, ref } from 'vue';
 import useViretualPages from '@/hooks/useVirtualPages';
 import XGPlayer from 'xgplayer'
 import '@/style/xgplayer.scss'
@@ -29,13 +29,13 @@ const view = views.getView(props.id)
 const videoPath = ref<string>('');
 const xgPlayer = ref()
 
+let _player: XGPlayer
 const setVideo = (() => {
-    let player: any
     return (url: string) => {
-        if (player) {
+        if (_player) {
-            player.src = url
+            _player.src = url
         } else {
-            player = new XGPlayer({
+            _player = new XGPlayer({
                 el: xgPlayer.value,
                 url,
                 width: '100%',
@@ -74,6 +74,10 @@ onMounted(() => {
         setVideo(currentFiles.value[0].url)
     }
 });
+
+onBeforeUnmount(() => {
+    _player.destroy()
+})
 </script>
 
 <style scoped lang="scss">