feat: 1.新增视频播放插件。2.新增插件中心

src/views/miaoDirectory.vue

@@ -43,14 +43,14 @@
                 <n-scrollbar>
                     <transition-group name="dirItem">
                         <miaoDirectoryItem v-for="dir in showData_directory" :item="dir" :key="dir.uid"
-                            :color="props.color" :selected="selectedItem.value.includes(dir)"
+                            :color="props.color" :selectedItem="selectedItem.value"
                             @delete="handleItemDelete(dir)" @click="handleItemClick(dir)"
                             @drag-start="handleItemDragStart" @rename="handleItemRename(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" :selected="selectedItem.value.includes(file)"
+                            :color="props.color" :selectedItem="selectedItem.value"
                             @click="handleItemClick(file)" @download="handleItemDownload(file)"
                             @delete="handleItemDelete(file)" @drag-start="handleItemDragStart"
                             @rename="handleItemRename(file)" @on-selected="handleItemSelect(file)" />
@@ -159,23 +159,18 @@ class SelectedItem {
 // 已选择的item，用于多选功能
 const selectedItem = reactive(new SelectedItem())
 
-const currentObjects = defineModel<VirtualDirectory[]>('currentObjects', {
+const currentDirectorys = defineModel<VirtualDirectory[]>('currentDirectorys', {
     required: true
 })
 
 // 目前展示的Dir
 const currentDirectory = computed(() => {
-    return currentObjects.value[0]
+    return currentDirectorys.value[0]
 })
 
 // 当前组件在views中的序号
 const index = computed(() => {
-    for (let i in views) {
-        if (views[i].uid === props.id) {
-            return parseInt(i)
-        }
-    }
-    return 0
+    return views.getIndex(props.id)
 })
 
 // 用于展示的数据，后续会增加排序等操作
@@ -208,7 +203,7 @@ const setCurrentDirectory = async (virtualDirectory: VirtualDirectory) => {
     } else {
         virtualDirectory.update()
     }
-    currentObjects.value[0] = virtualDirectory
+    currentDirectorys.value[0] = virtualDirectory
 }
 
 const reload = () => {

src/views/miaoVideoPlayer.vue

@@ -0,0 +1,100 @@
+<template>
+    <miao-drop-handler @on-virtual-files="handleDropVFiles">
+        <div class="player-container">
+            <div ref="xgPlayer" id="xgplayer">
+            </div>
+        </div>
+    </miao-drop-handler>
+</template>
+
+<script lang="ts" setup>
+import { VirtualFile } from '@/class/VirtualDirectory';
+import miaoDropHandler from '@/components/miaoDropHandler.vue';
+import { onMounted, ref } from 'vue';
+import useViretualPages from '@/hooks/useVirtualPages';
+import XGPlayer from 'xgplayer'
+import '@/style/xgplayer.scss'
+
+
+const props = defineProps<{
+    id: number
+}>()
+const currentFiles = defineModel<VirtualFile[]>('currentFiles', {
+    required: true
+})
+
+const views = useViretualPages()
+const view = views.getView(props.id)
+
+const videoPath = ref<string>('');
+const xgPlayer = ref()
+
+const setVideo = (() => {
+    let player: any
+    return (url: string) => {
+        if (player) {
+            player.src = url
+        } else {
+            player = new XGPlayer({
+                el: xgPlayer.value,
+                url,
+                width: '100%',
+                height: '100%',
+                fluid: true,
+                pip: true,
+                videoFillMode: 'contain',
+                autoplay: true,
+                download: true,
+                screenShot: {
+                    saveImg: true,
+                    quality: 0.92,
+                    type: 'image/png',
+                    format: '.png'
+                },
+                lang: 'zh-cn',
+                playbackRate: [0.1, 0.3, 0.5, 0.75, 1, 1.5, 2, 3, 5, 10],
+                playNext: {
+                    urlList: [
+                    ],
+                }
+            })
+        }
+    }
+})()
+
+const handleDropVFiles = (files: VirtualFile[]) => {
+    console.log(files)
+    view && (view.currentFiles[0] = files[0])
+    videoPath.value = files[0].url;
+    setVideo(videoPath.value)
+};
+
+onMounted(() => {
+    if(currentFiles.value.length) {
+        setVideo(currentFiles.value[0].url)
+    }
+});
+</script>
+
+<style scoped lang="scss">
+.player-container {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    background-color: grey;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+
+    #xgplayer {
+        width: 100%;
+        height: 500px;
+        background-color: black;
+    }
+}
+
+.video-js {
+    width: 100%;
+    background-color: rgb(0, 0, 0);
+}
+</style>