增加一个预览文件

src/main/index.js

@@ -150,7 +150,6 @@ async function createLinkWin(data) {
 // 初始化完成
 app.on('ready', () => {
   process.env.LANG = 'en_US.UTF-8'
-  process.env['ELECTRON_DISABLE_SANDBOX'] = true;
   // 设置应用程序用户模型标识符
   electronApp.setAppUserModelId('com.electron')
 

src/renderer/index.html

@@ -8,7 +8,7 @@
       http-equiv="Content-Security-Policy"
       content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:"
     /> -->
-    <meta http-equiv="Content-Security-Policy" content="connect-src *; default-src 'self'; script-src 'self' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src * 'self' ;img-src * 'self' data: blob:" />
+    <meta http-equiv="Content-Security-Policy" content="connect-src *; default-src 'self'; script-src 'self' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *;img-src * 'self' data: blob:" />
 
   </head>
 

src/renderer/src/components/file-preview/index.vue

@@ -1,33 +1,43 @@
 <template>
   <el-drawer v-model="model" class="preview-drawer" title="title" :modal="false" :with-header="false" append-to-body
-    size="50%" :before-close="handleClose">
+    size="50%">
     <div class="flex drawer-header">
       <div>
         <div class="flex file-name">
-          <FileImage :size="30" :file-name="'xx.jpg'" />
-          <span class="name">地理0831-10</span>
+          <FileImage :size="30" :file-name="'row.fileName'" />
+          <span class="name">{{ row.fileShowName }}</span>
         </div>
         <div class="flex file-tag">
-          <el-tag type="info" class="tag">图片</el-tag>
-          <el-tag type="info" class="tag">扩展素材</el-tag>
+          <el-tag type="info" class="tag">{{ row.fileSuffix }}</el-tag>
+          <el-tag type="info" class="tag">{{ row.fileFlag }}</el-tag>
         </div>
       </div>
       <div class="header-close" @click="onClose"><i class="iconfont icon-guanbi"></i></div>
     </div>
     <div class="drawer-content">
       <!-- <iframe src="./aaa.pdf" width="600px" height="600px"></iframe> -->
-      <div ref="playerRef" class="video-box"></div>
+      <!-- <div ref="playerRef" class="video-box"></div> -->
+       <!-- <video src="" controls autoplay></video> -->
+       <el-image style="width: 100%;" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" />  
     </div>
   </el-drawer>
 </template>
 <script setup>
 import { watch, ref, nextTick } from 'vue'
-import Player from 'xgplayer';
+import Player from 'xgplayer'
 import 'xgplayer/dist/index.min.css'
 import FileImage from '@/components/file-image/index.vue'
 
 
 const model = defineModel()
+const props = defineProps({
+  row: {
+    type: Object,
+    default(){
+      return {}
+    }
+  },
+})
 const playerRef = ref();
 const handleClose = () => {
 
@@ -39,19 +49,20 @@ const onClose = () => {
 
 const init = () => {
   nextTick(() => {
+    // 播放器 基础用法
     let player = new Player({
       el: playerRef.value,
-      url: 'https://sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-360p.mp4',
+      url: '//sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-360p.mp4',
       width: '100%',
       autoplay: false,// 是否自动播放（默认false）
-      autoplayMuted: true,// 是否自动静音自动播放（默认false）
-      screenShot: true,// 是否使用截图（默认false）
       videoAttributes: {// video扩展属性
           crossOrigin: 'anonymous',// 元素获取数据的 CORS 请求的配置
       },
-      marginControls: false,// 是否开启画面和控制栏分离模式（默认false）
+      cssFullscreen: false,
       loop:true,// 是否开启循环播放（默认false）
-      volume:0.3,// 默认音量,取值范围0 ~ 1(默认0.6)
+      commonStyle:{
+          progressColor: '#cccccce6',//进度条底色
+      },
      
     });
   })
@@ -59,7 +70,7 @@ const init = () => {
 
 watch(model, (newVal) => {
   if (newVal) {
-    init()
+    // init()
   }
 })
 </script>