feat(media): support video thumbnail display

src/components/table/Table/Column.vue

@@ -1,5 +1,4 @@
 <script>
-import { AssetType } from '@/constant'
 import { getThumbnailUrl } from '@/api/asset'
 
 export default {
@@ -66,26 +65,27 @@ export default {
       const value = this.getRenderValue(data)
       if (value) {
         const { on } = this.schema
-        switch (value.type) {
-          case AssetType.IMAGE:
-            return this.$createElement('i', {
-              staticClass: `o-thumbnail${on ? ' u-pointer' : ''}`,
-              staticStyle: {
-                'background-image': `url('${getThumbnailUrl(value.url, '64,fit')}')`
-              },
-              on: on && { click: $event => {
-                $event.stopPropagation()
-                on(value, data)
-              } }
-            })
-          default:
-            return value.label && this.$createElement('span', {
-              staticClass: on ? 'u-pointer' : '',
-              on: on && { click: $event => {
-                $event.stopPropagation()
-                on(value, data)
-              } }
-            }, value.label)
+        if (value.thumbnail) {
+          return this.$createElement('i', {
+            staticClass: `o-thumbnail${on ? ' u-pointer' : ''}`,
+            staticStyle: {
+              'background-image': `url('${getThumbnailUrl(value.thumbnail, '64,fit')}')`
+            },
+            on: on && { click: $event => {
+              $event.stopPropagation()
+              on(value, data)
+            } }
+          })
+        }
+
+        if (value.label) {
+          return this.$createElement('span', {
+            staticClass: on ? 'u-pointer' : '',
+            on: on && { click: $event => {
+              $event.stopPropagation()
+              on(value, data)
+            } }
+          }, value.label)
         }
       }
       return null

src/views/bigscreen/core/widget/CVideo.vue

@@ -170,11 +170,11 @@ export default {
   display: inline-flex;
   justify-content: center;
   align-items: center;
-  background-color: rgba(255, 255, 255, .8);
+  background-color: rgba(255, 255, 255, 0.8);
   overflow: hidden;
 
   &::before {
-    content: '\ecc1';
+    content: "\ecc1";
     font-size: inherit;
   }
 

src/views/platform/media/index.vue

@@ -124,9 +124,10 @@ export default {
         list: getAssets,
         transform: this.transform,
         cols: [
+          { prop: 'file', label: '缩略图', type: 'asset', on: this.onViewAsset },
           { prop: 'name', label: '文件名' },
-          { prop: 'file', label: '信息', type: 'asset', on: this.onViewAsset },
-          { prop: 'size', label: '大小' },
+          { prop: 'duration', label: '时长' },
+          { prop: 'size', label: '文件大小' },
           { prop: 'createTime', label: '上传时间' },
           {
             type: 'invoke', render: [
@@ -186,18 +187,12 @@ export default {
     },
     transform (asset) {
       asset.name = asset.originalName
-      if (asset.type === AssetType.IMAGE) {
-        asset.file = {
-          type: asset.type,
-          url: asset.keyName
-        }
-      } else {
-        asset.file = {
-          type: asset.type,
-          url: asset.keyName,
-          label: parseDuration(asset.duration)
-        }
+      asset.file = {
+        type: asset.type,
+        url: asset.keyName,
+        thumbnail: asset.thumbnail
       }
+      asset.duration = parseDuration(asset.duration)
       asset.size = parseByte(asset.size)
       return asset
     },

src/views/review/components/ReviewAsset.vue

@@ -16,10 +16,7 @@ import {
   parseByte,
   parseDuration
 } from '@/utils'
-import {
-  State,
-  AssetType
-} from '@/constant'
+import { State } from '@/constant'
 import mixin from './mixin'
 
 export default {
@@ -32,9 +29,10 @@ export default {
         list: getAssets,
         transform: this.transform,
         cols: [
-          { prop: 'file', label: '文件', type: 'asset', on: this.onViewAsset },
           { prop: 'typeName', label: '类型' },
-          { prop: 'info', label: '信息' },
+          { prop: 'file', label: '文件', type: 'asset', on: this.onViewAsset },
+          { prop: 'duration', label: '时长' },
+          { prop: 'size', label: '文件大小' },
           { prop: 'createTime', label: '提交时间' },
           {
             type: 'invoke', render: [
@@ -51,13 +49,15 @@ export default {
     resolve: resolveAsset,
     transform (asset) {
       const { type } = asset
+      asset.typeName = [null, '图片', '视频', '音频'][type]
       asset.file = {
-        type,
-        label: asset.originalName,
-        url: asset.keyName
+        type: asset.type,
+        url: asset.keyName,
+        thumbnail: asset.thumbnail,
+        label: asset.originalName
       }
-      asset.typeName = [null, '图片', '视频', '音频'][type]
-      asset.info = type === AssetType.IMAGE ? parseByte(asset.size) : parseDuration(asset.duration)
+      asset.duration = parseDuration(asset.duration)
+      asset.size = parseByte(asset.size)
       asset.createBy = asset.userName || asset.createBy
       return asset
     },