feat(program): background pictures of video and audio cards

src/icons/svg/audio-bg.svg

@@ -0,0 +1,22 @@
+<svg id="icon_audio" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="120" height="72" viewBox="0 0 120 72">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #0f1317;
+      }
+
+      .cls-2 {
+        fill-rule: evenodd;
+        fill: url(#linear-gradient);
+      }
+    </style>
+    <linearGradient id="linear-gradient" x1="5" y1="197" x2="115" y2="197" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#0480ff"/>
+      <stop offset="0.399" stop-color="#ff15ff"/>
+      <stop offset="0.674" stop-color="#ffc426"/>
+      <stop offset="1" stop-color="#3b21ff"/>
+    </linearGradient>
+  </defs>
+  <rect id="矩形_1_拷贝" data-name="矩形 1 拷贝" class="cls-1" width="120" height="72"/>
+  <path id="矩形_1_拷贝_10" data-name="矩形 1 拷贝 10" class="cls-2" d="M6,192a1,1,0,0,1,1,1v19H5V193A1,1,0,0,1,6,192Zm6,12a1,1,0,0,1,1,1v7H11v-7A1,1,0,0,1,12,204Zm6-4a1,1,0,0,1,1,1v11H17V201A1,1,0,0,1,18,200Zm6-4a1,1,0,0,1,1,1v15H23V197A1,1,0,0,1,24,196Zm6,3a1,1,0,0,1,1,1v12H29V200A1,1,0,0,1,30,199Zm6-11a1,1,0,0,1,1,1v23H35V189A1,1,0,0,1,36,188Zm6,3a1,1,0,0,1,1,1v20H41V192A1,1,0,0,1,42,191Zm6-9a1,1,0,0,1,1,1v29H47V183A1,1,0,0,1,48,182Zm6,14a1,1,0,0,1,1,1v15H53V197A1,1,0,0,1,54,196Zm6,7a1,1,0,0,1,1,1v8H59v-8A1,1,0,0,1,60,203Zm6-4a1,1,0,0,1,1,1v12H65V200A1,1,0,0,1,66,199Zm6-4a1,1,0,0,1,1,1v16H71V196A1,1,0,0,1,72,195Zm6-7a1,1,0,0,1,1,1v23H77V189A1,1,0,0,1,78,188Zm6,4a1,1,0,0,1,1,1v19H83V193A1,1,0,0,1,84,192Zm6,6a1,1,0,0,1,1,1v13H89V199A1,1,0,0,1,90,198Zm6-3a1,1,0,0,1,1,1v16H95V196A1,1,0,0,1,96,195Zm6-11a1,1,0,0,1,1,1v27h-2V185A1,1,0,0,1,102,184Zm6,9a1,1,0,0,1,1,1v18h-2V194A1,1,0,0,1,108,193Zm6,5a1,1,0,0,1,1,1v13h-2V199A1,1,0,0,1,114,198Z" transform="translate(0 -140)"/>
+</svg>

src/icons/svg/video-bg.svg

@@ -0,0 +1,21 @@
+<svg id="icon_video_big_" data-name="icon_video_big " xmlns="http://www.w3.org/2000/svg" width="120" height="72" viewBox="0 0 120 72">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #0f1317;
+      }
+
+      .cls-2 {
+        fill: #141a20;
+      }
+
+      .cls-3 {
+        fill: #006eff;
+        fill-rule: evenodd;
+      }
+    </style>
+  </defs>
+  <rect id="矩形_1_拷贝_7" data-name="矩形 1 拷贝 7" class="cls-1" width="120" height="72"/>
+  <rect id="icon_video_big_拷贝_2" data-name="icon_video_big  拷贝 2" class="cls-2" x="41" y="24" width="38" height="24" rx="2" ry="2"/>
+  <path id="icon_video_big_拷贝" data-name="icon_video_big  拷贝" class="cls-3" d="M66,176l-11,7V169Z" transform="translate(0 -140)"/>
+</svg>

src/views/bigscreen/ast/Card.vue

@@ -0,0 +1,78 @@
+<template>
+  <div
+    class="c-card u-pointer"
+    @click="onClick"
+    @dblclick="onDblclick"
+  >
+    <div class="c-card__content">
+      <i
+        v-if="source.thumbnailUrl"
+        class="c-card__image"
+        :style="{ 'background-image': `url('${source.thumbnailUrl}')` }"
+      />
+      <svg-icon
+        v-else-if="source.icon"
+        class="c-card__image"
+        :icon-class="source.icon"
+      />
+      <div class="c-card__name u-ellipsis">{{ source.name }}</div>
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'MediaCard',
+  props: {
+    source: {
+      type: Object,
+      required: true
+    }
+  },
+  methods: {
+    onClick () {
+      this.$emit('click', this.source)
+    },
+    onDblclick () {
+      this.$emit('dblclick', this.source)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.c-card {
+  display: inline-block;
+  position: relative;
+  background-color: rgba(0, 0, 0, 0.8);
+
+  &__content {
+    position: relative;
+    padding-top: 60%;
+  }
+
+  &__name {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    padding: 4px 6px;
+    color: $gray;
+    font-size: 14px;
+    text-align: center;
+    background-color: rgba(0, 0, 0, 0.6);
+  }
+
+  &__image {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-position: center;
+    background-size: contain;
+    background-repeat: no-repeat;
+  }
+}
+</style>

src/views/bigscreen/ast/Designer.vue

@@ -275,27 +275,19 @@
         @start="onSourceDragStart"
         @end="onSourceDragEnd"
       >
-        <div
+        <card
           v-for="(source, index) in sources"
           :key="index"
-          class="c-card u-pointer"
-          @click="onView(source)"
+          :source="source"
+          @click="onView"
         >
-          <div class="c-card__content">
-            <i
-              class="c-card__icon iconfont iconlajitong"
-              @mousedown.stop
-              @pointerdown.stop
-              @click.stop="onDelAsset(index)"
-            />
-            <i
-              v-if="source.thumbnailUrl"
-              class="o-image"
-              :style="{ 'background-image': `url('${source.thumbnailUrl}')` }"
-            />
-            <div class="c-card__name u-ellipsis">{{ source.name }}</div>
-          </div>
-        </div>
+          <i
+            class="c-card__icon iconfont iconlajitong"
+            @mousedown.stop
+            @pointerdown.stop
+            @click.stop="onDelAsset(index)"
+          />
+        </card>
       </draggable>
       <template #footer>
         <button
@@ -328,23 +320,10 @@
         <grid-table :schema="assetSchema">
           <grid-table-item>
             <template v-slot="item">
-              <div
-                class="c-card u-pointer"
-                @dblclick="onChoosenAsset(item)"
-              >
-                <div class="c-card__content">
-                  <i
-                    v-if="item.thumbnailUrl"
-                    class="o-image"
-                    :style="{ 'background-image': `url('${item.thumbnailUrl}')` }"
-                  />
-                  <i
-                    class="el-icon-video-play c-card__type u-pointer"
-                    @click.stop="onView(item)"
-                  />
-                  <div class="c-card__name u-ellipsis">{{ item.name }}</div>
-                </div>
-              </div>
+              <card
+                :source="item"
+                @dblclick="onChoosenAsset"
+              />
             </template>
           </grid-table-item>
         </grid-table>
@@ -365,27 +344,19 @@
         >
           <grid-table-item>
             <template v-slot="item">
-              <div
-                class="c-card u-pointer"
-                @click="onToggleGrid(item)"
+              <card
+                :source="item"
+                @click="onToggleGrid"
               >
-                <div class="c-card__content">
-                  <el-checkbox
-                    v-model="item.selected"
-                    class="c-card__checkbox"
-                  />
-                  <i
-                    v-if="item.thumbnailUrl"
-                    class="o-image"
-                    :style="{ 'background-image': `url('${item.thumbnailUrl}')` }"
-                  />
-                  <i
-                    class="el-icon-video-play c-card__type u-pointer"
-                    @click.stop="onView(item)"
-                  />
-                  <div class="c-card__name u-ellipsis">{{ item.name }}</div>
-                </div>
-              </div>
+                <el-checkbox
+                  v-model="item.selected"
+                  class="c-card__checkbox"
+                />
+                <i
+                  class="el-icon-video-play c-card__type u-pointer"
+                  @click.stop="onView(item)"
+                />
+              </card>
             </template>
           </grid-table-item>
         </grid-table>
@@ -417,7 +388,7 @@ import {
   getDuration,
   toJSON
 } from './core/utils'
-import base from './core/base'
+import mixin from './mixin'
 import Widget from './core/widget/Widget.vue'
 import ContentMenu from './core/components/ContentMenu.vue'
 import DynamicItem from './core/components/DynamicItem.vue'
@@ -430,7 +401,7 @@ export default {
     ContentMenu,
     DynamicItem
   },
-  mixins: [base],
+  mixins: [mixin],
   data () {
     return {
       loading: false,
@@ -694,6 +665,17 @@ export default {
       asset.selected = false
       if (thumbnail) {
         asset.thumbnailUrl = getThumbnailUrl(thumbnail)
+      } else {
+        switch (type) {
+          case AssetType.VIDEO:
+            asset.icon = 'video-bg'
+            break
+          case AssetType.AUDIO:
+            asset.icon = 'audio-bg'
+            break
+          default:
+            break
+        }
       }
       return asset
     },
@@ -725,6 +707,17 @@ export default {
         source.thumbnailUrl = getThumbnailUrl(data.thumbnail)
       } else if (data.type === AssetType.IMAGE) {
         source.thumbnailUrl = getThumbnailUrl(data.keyName)
+      } else {
+        switch (source.type) {
+          case AssetType.VIDEO:
+            source.icon = 'video-bg'
+            break
+          case AssetType.AUDIO:
+            source.icon = 'audio-bg'
+            break
+          default:
+            break
+        }
       }
       return source
     },
@@ -1075,10 +1068,6 @@ $drak: #242a30;
 }
 
 .c-card {
-  display: inline-block;
-  position: relative;
-  background-color: rgba(0, 0, 0, 0.8);
-
   &:hover &__icon {
     display: block;
     padding: 6px;
@@ -1092,11 +1081,6 @@ $drak: #242a30;
     display: none;
   }
 
-  &__content {
-    position: relative;
-    padding-top: 60%;
-  }
-
   &__icon {
     display: none;
     position: absolute;
@@ -1121,18 +1105,6 @@ $drak: #242a30;
     }
   }
 
-  &__name {
-    position: absolute;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    padding: 4px 6px;
-    color: $gray;
-    font-size: 14px;
-    text-align: center;
-    background-color: rgba(0, 0, 0, 0.6);
-  }
-
   &__checkbox {
     position: absolute;
     top: 10px;

src/views/bigscreen/ast/Viewer.vue

@@ -79,21 +79,12 @@
         v-if="sources"
         class="c-grid"
       >
-        <div
+        <card
           v-for="(source, index) in sources"
           :key="index"
-          class="c-card u-pointer"
+          :source="source"
           @click="onView(source)"
-        >
-          <div class="c-card__content">
-            <i
-              v-if="source.thumbnailUrl"
-              class="o-image"
-              :style="{ 'background-image': `url('${source.thumbnailUrl}')` }"
-            />
-            <div class="c-card__name u-ellipsis">{{ source.name }}</div>
-          </div>
-        </div>
+        />
       </div>
     </el-dialog>
     <preview-dialog ref="previewDialog" />
@@ -103,7 +94,7 @@
 <script>
 import { getThumbnailUrl } from '@/api/asset'
 import { AssetType } from '@/constant'
-import base from './core/base'
+import mixin from './mixin'
 import Widget from './core/widget/WidgetViewer.vue'
 
 export default {
@@ -111,7 +102,7 @@ export default {
   components: {
     Widget
   },
-  mixins: [base],
+  mixins: [mixin],
   data () {
     return {
       dialogVisibleAssets: false,
@@ -146,6 +137,7 @@ export default {
             return {
               type: item ? AssetType.VIDEO : AssetType.AUDIO,
               ...source,
+              icon: item ? 'video-bg' : 'audio-bg',
               thumbnailUrl: source.thumbnail && getThumbnailUrl(source.thumbnail)
             }
           })

src/views/bigscreen/ast/core/base.js → src/views/bigscreen/ast/mixin.js

@@ -2,7 +2,8 @@ import {
   getAssetUrl,
   getThumbnailUrl
 } from '@/api/asset'
-import { create } from './utils'
+import { create } from './core/utils'
+import Card from './Card'
 
 export default {
   provide () {
@@ -10,6 +11,9 @@ export default {
       control: this
     }
   },
+  components: {
+    Card
+  },
   props: {
     program: {
       type: Object,