refactor(program): program viewing page style

src/components/dialog/PreviewDialog/index.vue

@@ -3,6 +3,7 @@
     :visible.sync="showDetail"
     custom-class="c-preview"
     @click.native="showDetail = false"
+    v-on="$listeners"
   >
     <template v-if="showDetail">
       <img
@@ -60,6 +61,9 @@ export default {
     show (source) {
       this.source = source
       this.showDetail = true
+    },
+    onClose () {
+      this.$emit('close')
     }
   }
 }

src/icons/svg/mute.svg

@@ -0,0 +1 @@
+<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26"><path d="M13.64,21.13a1,1,0,0,1-.61.92,1,1,0,0,1-1.08-.2L7.08,17.17H3.64a1,1,0,0,1-1-1v-6a1,1,0,0,1,1-1H6.32l-2-2H3.64a3,3,0,0,0-3,3v6a3,3,0,0,0,3,3H6.28l4.28,4.12a3,3,0,0,0,5.08-2.16V18.49l-2-2Zm.17-18.68a3,3,0,0,0-3.25.6L8.16,5.37,9.57,6.78,12,4.49A1,1,0,0,1,13,4.29a1,1,0,0,1,.61.92v5.64l2,2V5.21A3,3,0,0,0,13.81,2.45Z"/><path d="M22.17,6.22a1,1,0,0,0-1.5-.08,1,1,0,0,0-.07,1.33,9,9,0,0,1,.45,10.79h0l1.44,1.43a11,11,0,0,0-.32-13.48Z"/><path d="M19.32,9.08A1,1,0,0,0,17.82,9a1,1,0,0,0-.09,1.3,5,5,0,0,1,.41,5.06l1.48,1.48a7.14,7.14,0,0,0,1-3.66A7,7,0,0,0,19.32,9.08Z"/><rect x="12.14" y="-0.83" width="2" height="28" rx="1" transform="translate(-5.46 13.15) rotate(-45)"/></svg>

src/scss/bem/_object.scss

@@ -83,63 +83,11 @@
   text-align: center;
 }
 
-.o-wave {
-  box-sizing: content-box;
-  display: inline-flex;
-  align-items: flex-end;
-  height: 20px;
-
-  &.muted {
-    .o-wave__line {
-      background-color: $gray;
-      animation: none;
-    }
-  }
-
-  &__line {
-    display: inline-block;
-    width: 3px;
-    background-color: #ff0000;
-    height: 10px;
-    animation: line .6s infinite ease-in-out alternate;
-
-    &:nth-child(2) {
-      height: 18px;
-      animation-delay: .2s;
-    }
-
-    &:nth-child(3) {
-      height: 12px;
-      animation-delay: .4s;
-    }
-
-    &:nth-child(4) {
-      height: 8px;
-      animation-delay: .6s;
-    }
-
-    & + & {
-      margin-left: 3px;
-    }
-  }
-}
-
-@keyframes line {
-  from {
-    height: 1px;
-  }
-
-  to {
-    height: 20px;
-  }
-}
-
 .o-next {
   display: inline-block;
   position: relative;
   width: 2em;
   height: 2em;
-  color: $gray;
   font-size: 10px;
   border: .2em solid currentcolor;
   border-radius: 50%;

src/views/bigscreen/ast/Designer.vue

@@ -75,21 +75,12 @@
     </div>
     <div class="c-designer__main">
       <div class="l-flex--row c-designer__tool">
-        <el-tooltip
-          key="back"
-          class="c-designer__btn"
-          content="返回"
-        >
-          <i
-            class="el-icon-arrow-left u-bold"
-            @click="onBack"
-          />
-        </el-tooltip>
-        <div
-          v-if="program"
-          class="l-flex--row c-designer"
-        >
-          <span class="c-sibling-item c-designer__name u-ellipsis">{{ program.name }}</span>
+        <i
+          class="c-designer__btn el-icon-arrow-left u-bold"
+          @click="onBack"
+        />
+        <div class="l-flex--row">
+          <span class="c-sibling-item c-designer__name u-bold u-ellipsis">{{ program.name }}</span>
           <span class="c-sibling-item c-designer__ratio">{{ program.resolutionRatio }}</span>
         </div>
         <el-tooltip
@@ -161,15 +152,7 @@
           content="音效"
         >
           <div @click="toggleMute">
-            <div
-              class="o-wave"
-              :class="{ muted }"
-            >
-              <span class="o-wave__line" />
-              <span class="o-wave__line" />
-              <span class="o-wave__line" />
-              <span class="o-wave__line" />
-            </div>
+            <volume :muted="muted" />
           </div>
         </el-tooltip>
         <el-tooltip
@@ -178,7 +161,7 @@
           class="c-designer__btn"
           content="切歌"
         >
-          <div @click="chooseBgm">
+          <div @click="switchBgm">
             <i class="o-next" />
           </div>
         </el-tooltip>
@@ -497,9 +480,6 @@ export default {
     }
   },
   methods: {
-    onBack () {
-      window.close()
-    },
     onClear () {
       this.$confirm(
         '清空后所有数据将丢失',
@@ -894,17 +874,18 @@ $drak: #242a30;
 
   &__tool {
     flex: 0 0 40px;
+    color: $gray--dark;
     background-color: $drak;
   }
 
   &__name {
     max-width: 400px;
+    font-size: 18px;
+    line-height: 1;
   }
 
-  &__name,
   &__ratio {
-    color: $gray--dark;
-    font-size: 16px;
+    font-size: 12px;
     line-height: 1;
   }
 

src/views/bigscreen/ast/Viewer.vue

@@ -1,8 +1,5 @@
 <template>
-  <div
-    ref="wrapper"
-    class="c-viewer"
-  >
+  <div class="l-flex--col c-viewer">
     <audio
       v-if="bgmUrl"
       ref="audio"
@@ -12,82 +9,90 @@
       @ended="onAudioEnded"
       @error="onAudioError"
     />
-    <div
-      v-if="hasAudio"
-      class="l-flex--row c-tool"
-    >
+    <div class="l-flex__none l-flex--row c-viewer__header">
+      <i
+        class="c-viewer__back el-icon-arrow-left u-bold u-pointer"
+        @click="onBack"
+      />
+      <span class="c-sibling-item c-viewer__name u-bold u-ellipsis">{{ program.name }}</span>
+      <span class="c-sibling-item">{{ program.resolutionRatio }}</span>
       <el-tooltip
-        class="c-tool__item"
+        v-if="hasAudio"
+        class="o-tool-item"
         content="音效"
-        :hide-after="2000"
       >
         <div @click="toggleMute">
-          <div
-            class="o-wave"
-            :class="{ muted }"
-          >
-            <span class="o-wave__line" />
-            <span class="o-wave__line" />
-            <span class="o-wave__line" />
-            <span class="o-wave__line" />
-          </div>
+          <volume :muted="muted" />
         </div>
       </el-tooltip>
       <el-tooltip
         v-if="hasNext"
-        class="c-tool__item"
+        class="o-tool-item"
         content="切歌"
-        :hide-after="2000"
       >
-        <div @click="chooseBgm">
+        <div @click="switchBgm">
           <i class="o-next" />
         </div>
       </el-tooltip>
-      <el-tooltip
-        v-if="bgmUrl"
-        class="c-tool__item"
-        content="背景音乐"
-        :hide-after="2000"
-      >
-        <div @click.stop="onClickWidget()">
-          <svg-icon icon-class="list" />
-        </div>
-      </el-tooltip>
     </div>
-    <div
-      class="c-viewer__canvas has-bg"
-      :style="[transformStyles, styles]"
-    >
-      <div
-        class="c-viewer__background has-bg"
-        :style="backgroundStyles"
-      />
-      <widget
-        v-for="(item, index) in widgets"
-        :key="`${item.type}${index}`"
-        :node="item"
-        @click.native.stop="onClickWidget(item)"
-      />
-    </div>
-    <el-dialog
-      :title="assetType"
-      :visible.sync="dialogVisibleAssets"
-      custom-class="c-dialog"
-      :before-close="onCloseAssetsDialog"
-    >
+    <div class="l-flex__fill l-flex">
+      <div class="l-flex__none l-flex--col c-viewer__asserts">
+        <div class="l-flex__none l-flex--row c-viewer__count has-padding--h">
+          <span class="l-flex__auto u-bold">素材</span>
+          <span class="l-flex__none c-viewer__count--info">{{ count }}</span>
+        </div>
+        <div
+          v-if="sources"
+          class="l-flex__auto c-viewer__list u-overflow-y--auto"
+        >
+          <div
+            v-for="(source, index) in sources"
+            :key="index"
+            class="c-viewer__item o-card u-pointer"
+            @click="onView(source)"
+          >
+            <div class="o-card__content">
+              <i
+                v-if="source.thumbnailUrl"
+                class="o-card__img"
+                :style="{ 'background-image': `url('${source.thumbnailUrl}')` }"
+              />
+              <svg-icon
+                v-else-if="source.icon"
+                class="o-card__img"
+                :icon-class="source.icon"
+              />
+            </div>
+            <div class="o-card__name u-ellipsis">{{ source.name }}</div>
+          </div>
+        </div>
+      </div>
       <div
-        v-if="sources"
-        class="c-grid"
+        ref="wrapper"
+        class="c-viewer__content"
+        @click="onClickWidget()"
       >
-        <card
-          v-for="(source, index) in sources"
-          :key="index"
-          :source="source"
-          @click="onView(source)"
-        />
+        <div
+          class="l-flex__fill c-viewer__canvas has-bg"
+          :style="[transformStyles, styles]"
+        >
+          <div
+            class="c-viewer__background has-bg"
+            :style="backgroundStyles"
+          />
+          <widget
+            v-for="(item, index) in widgets"
+            :key="`${item.type}${index}`"
+            :node="item"
+            @click.native.stop="onClickWidget(item)"
+          />
+        </div>
       </div>
-    </el-dialog>
-    <preview-dialog ref="previewDialog" />
+    </div>
+    <preview-dialog
+      ref="previewDialog"
+      @close="onClose"
+    />
   </div>
 </template>
 
@@ -105,59 +110,90 @@ export default {
   mixins: [mixin],
   data () {
     return {
-      dialogVisibleAssets: false,
-      isImage: false,
-      sources: null,
-      assetType: ''
+      sources: null
+    }
+  },
+  computed: {
+    count () {
+      return this.sources?.length
     }
   },
-  created () {
-    this.$message({
-      type: 'info',
-      message: '点击组件可查看媒资列表'
-    })
+  mounted () {
+    this.$item = null
+    this.onClickWidget()
   },
   methods: {
     onClickWidget (item) {
-      const sources = item ? item.sources : this.node.bgm
-      if (sources?.length) {
-        this.$muted = this.muted
-        if (item?.type === 'CImage') {
-          this.assetType = '图片'
+      if (this.$item === item) {
+        return
+      }
+      this.$item = item
+
+      if (!item) {
+        const arr = []
+        const bg = this.node.backgroundImage[0]
+        if (bg) {
+          arr.push({
+            type: AssetType.IMAGE,
+            url: bg.keyName,
+            name: bg.name,
+            thumbnailUrl: getThumbnailUrl(bg.keyName)
+          })
+        }
+        this.sources = arr.concat(this.node.bgm.map(source => {
+          return {
+            type: AssetType.AUDIO,
+            url: source.keyName,
+            name: source.name,
+            icon: 'audio-bg'
+          }
+        }))
+        return
+      }
+
+      const sources = item.sources
+      if (sources) {
+        if (item.type === 'CImage') {
           this.sources = sources.map(source => {
             return {
               type: AssetType.IMAGE,
-              ...source,
+              url: source.keyName,
+              name: source.name,
               thumbnailUrl: getThumbnailUrl(source.keyName)
             }
           })
         } else {
-          this.assetType = item ? '视频' : '背景音乐'
           this.sources = sources.map(source => {
             return {
-              type: item ? AssetType.VIDEO : AssetType.AUDIO,
-              ...source,
-              icon: item ? 'video-bg' : 'audio-bg',
+              type: AssetType.VIDEO,
+              url: source.keyName,
+              name: source.name,
+              icon: 'video-bg',
               thumbnailUrl: source.thumbnail && getThumbnailUrl(source.thumbnail)
             }
           })
+        }
+        return
+      }
+
+      this.sources = null
+    },
+    onView (source) {
+      this.$muted = this.muted
+      switch (source.type) {
+        case AssetType.VIDEO:
+        case AssetType.AUDIO:
           if (!this.muted) {
-            this.muted = true
+            this.muted = 1
           }
-        }
-        this.dialogVisibleAssets = true
+          break
+        default:
+          break
       }
+      this.$refs.previewDialog.show(source)
     },
-    onCloseAssetsDialog () {
+    onClose () {
       this.muted = this.$muted
-      this.sources = null
-      this.dialogVisibleAssets = false
-    },
-    onView ({ type, keyName }) {
-      this.$refs.previewDialog.show({
-        type,
-        url: keyName
-      })
     }
   }
 }
@@ -166,8 +202,71 @@ export default {
 <style lang="scss" scoped>
 .c-viewer {
   height: 100%;
+  min-height: 600px;
   overflow: hidden;
 
+  &__header {
+    height: 69px;
+    padding: 0 10px;
+    color: $black;
+    font-size: 12px;
+    line-height: 1;
+    border-bottom: 1px solid $border;
+    background-color: #fff;
+  }
+
+  &__back {
+    margin-right: 4px;
+    padding: 10px;
+    font-size: 16px;
+    border-radius: 50%;
+    transition: background-color 0.4s;
+
+    &:hover {
+      background-color: $gray--light;
+    }
+  }
+
+  &__name {
+    max-width: 400px;
+    font-size: 18px;
+  }
+
+  &__asserts {
+    width: 145px;
+    border-right: 1px solid $border;
+    background-color: #fff;
+  }
+
+  &__count {
+    height: 48px;
+    color: $black;
+    font-size: 16px;
+    line-height: 1;
+    background-color: #f4f7fb;
+
+    &--info {
+      color: $info--dark;
+      font-size: 12px;
+    }
+  }
+
+  &__list {
+    padding: 10px $spacing;
+  }
+
+  &__item {
+    & + & {
+      margin-top: 10px;
+    }
+  }
+
+  &__content {
+    flex: 1 0 0;
+    min-width: 0;
+    min-height: 0;
+  }
+
   &__canvas {
     position: relative;
     background-color: #000;
@@ -195,62 +294,37 @@ export default {
   }
 }
 
-.c-tool {
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: 9;
-
-  &__item {
-    display: inline-flex;
-    justify-content: center;
-    align-items: center;
-    padding: 10px 16px;
-    color: $gray;
-    font-size: 16px;
-    cursor: pointer;
-
-    &:hover {
-      background-color: #191d22;
-    }
-
-    &:active {
-      background-color: darken(#191d22, 5%);
-    }
-  }
+.o-tool-item {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  padding: 10px 16px;
+  color: $gray--dark;
+  cursor: pointer;
 }
 
-.c-card {
-  display: inline-block;
-  position: relative;
-  background-color: rgba(0, 0, 0, 0.8);
-
+.o-card {
   &__content {
     position: relative;
     padding-top: 60%;
   }
 
-  &__name {
+  &__img {
     position: absolute;
+    top: 0;
     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);
+    width: 100%;
+    height: 100%;
+    background-position: center;
+    background-size: contain;
+    background-repeat: no-repeat;
   }
-}
 
-.o-image {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-position: center;
-  background-size: contain;
-  background-repeat: no-repeat;
+  &__name {
+    margin-top: 4px;
+    color: $black;
+    font-size: 12px;
+    line-height: 1;
+  }
 }
 </style>

src/views/bigscreen/ast/components/Volume.vue

@@ -0,0 +1,87 @@
+<template>
+  <svg-icon
+    v-if="muted"
+    class="o-mute"
+    icon-class="mute"
+  />
+  <div
+    v-else
+    class="o-wave"
+  >
+    <span class="o-wave__line" />
+    <span class="o-wave__line" />
+    <span class="o-wave__line" />
+    <span class="o-wave__line" />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Volume',
+  props: {
+    muted: {
+      type: [Boolean, String],
+      default: false
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.o-mute {
+  width: 24px;
+  height: 24px;
+}
+
+@keyframes line {
+  from {
+    height: 1px;
+    opacity: 0.4;
+  }
+
+  to {
+    height: 20px;
+    opacity: 1;
+  }
+}
+
+.o-wave {
+  box-sizing: content-box;
+  display: inline-flex;
+  align-items: flex-end;
+  height: 20px;
+
+  &.muted {
+    .o-wave__line {
+      animation: none;
+    }
+  }
+
+  &__line {
+    display: inline-block;
+    width: 3px;
+    height: 10px;
+    background-color: currentColor;
+    animation: line 0.6s infinite ease-in-out alternate;
+
+    &:nth-child(2) {
+      height: 18px;
+      animation-delay: 0.2s;
+    }
+
+    &:nth-child(3) {
+      height: 12px;
+      animation-delay: 0.4s;
+    }
+
+    &:nth-child(4) {
+      height: 8px;
+      animation-delay: 0.6s;
+    }
+
+    & + & {
+      margin-left: 3px;
+    }
+  }
+}
+</style>

src/views/bigscreen/ast/core/utils.js

@@ -204,3 +204,35 @@ export function validate (node) {
     }
   }
 }
+
+export function switchToNext (toggleType, arr, curr) {
+  const length = arr.length
+  if (length === 0) {
+    return -1
+  }
+
+  if (length === 1 || curr === -1) {
+    return 0
+  }
+
+  let index = curr
+  switch (toggleType) {
+    case 'cycle':
+      index = (index + 1) % length
+      break
+    case 'random':
+      index = Math.random() * length | 0
+      if (arr[index]?.keyName === arr[curr].keyName) {
+        if (index === 0) {
+          index += 1
+        } else {
+          index -= 1
+        }
+      }
+      break
+    default:
+      break
+  }
+
+  return index
+}

src/views/bigscreen/ast/core/widget/CImage.vue

@@ -59,6 +59,7 @@
 
 <script>
 import { getThumbnailUrl } from '@/api/asset'
+import { switchToNext } from '../utils'
 
 export default {
   name: 'CImage',
@@ -184,7 +185,7 @@ export default {
   },
   methods: {
     reset () {
-      this.$index = 0
+      this.$index = -1
       this.choose()
       this.changeFlip()
     },
@@ -196,47 +197,20 @@ export default {
       }
     },
     toggleImage () {
-      this.toggle = this.choose()
+      this.choose()
+      this.toggle = !this.toggle
       this.changeFlip()
     },
     choose () {
       const { sources, interval, toggleType } = this.node
-      const length = sources.length
-
       clearTimeout(this.$timer)
 
-      if (length === 0) {
-        this.img = null
-        return this.toggle
-      }
-
-      if (length === 1) {
-        this.img = sources[0]
-        return this.toggle
-      }
-
-      switch (toggleType) {
-        case 'cycle':
-          this.$index = (this.$index + 1) % length
-          break
-        case 'random':
-          this.$index = Math.random() * length | 0
-          if (sources[this.$index]?.keyName === this.img.keyName) {
-            if (this.$index === 0) {
-              this.$index += 1
-            } else {
-              this.$index -= 1
-            }
-          }
-          break
-        default:
-          return
-      }
+      this.$index = switchToNext(toggleType, sources, this.$index)
       this.img = sources[this.$index]
 
-      this.$timer = setTimeout(this.toggleImage, interval * 1000)
-
-      return !this.toggle
+      if (sources.length > 1) {
+        this.$timer = setTimeout(this.toggleImage, interval * 1000)
+      }
     }
   }
 }

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

@@ -24,6 +24,7 @@
 
 <script>
 import { getAssetUrl } from '@/api/asset'
+import { switchToNext } from '../utils'
 
 export default {
   name: 'CVideo',
@@ -37,7 +38,7 @@ export default {
   data () {
     return {
       ignore: false,
-      url: ''
+      video: null
     }
   },
   computed: {
@@ -58,13 +59,13 @@ export default {
       }
     },
     src () {
-      return this.url ? getAssetUrl(this.url) : ''
+      return this.video ? getAssetUrl(this.video.keyName) : null
     },
     muted () {
       return this.node.mute || this.control.muted
     },
     canPlay () {
-      return !this.ignore && this.url
+      return !this.ignore && this.video
     }
   },
   watch: {
@@ -99,43 +100,13 @@ export default {
   },
   methods: {
     reset () {
-      this.$index = 0
+      this.$index = -1
       this.choose()
     },
     choose () {
       const { sources, toggleType } = this.node
-      const length = sources.length
-
-      if (length === 0) {
-        this.url = ''
-        return
-      }
-
-      if (length === 1) {
-        this.url = sources[0].keyName
-        return
-      }
-
-      let index
-      switch (toggleType) {
-        case 'cycle':
-          index = this.$index
-          this.$index = (index + 1) % length
-          break
-        case 'random':
-          index = Math.random() * length | 0
-          if (sources[index]?.keyName === this.url) {
-            if (index === 0) {
-              index += 1
-            } else {
-              index -= 1
-            }
-          }
-          break
-        default:
-          return
-      }
-      this.url = sources[index].keyName
+      this.$index = switchToNext(toggleType, sources, this.$index)
+      this.video = sources[this.$index]
     },
     onEnded () {
       this.$refs.player.currentTime = 0

src/views/bigscreen/ast/mixin.js

@@ -2,8 +2,12 @@ import {
   getAssetUrl,
   getThumbnailUrl
 } from '@/api/asset'
-import { create } from './core/utils'
-import Card from './Card'
+import {
+  create,
+  switchToNext
+} from './core/utils'
+import Volume from './components/Volume'
+import Card from './components/Card'
 
 export default {
   provide () {
@@ -12,6 +16,7 @@ export default {
     }
   },
   components: {
+    Volume,
     Card
   },
   props: {
@@ -75,7 +80,7 @@ export default {
       return false
     },
     bgmUrl () {
-      return this.bgm ? getAssetUrl(this.bgm) : ''
+      return this.bgm ? getAssetUrl(this.bgm) : null
     },
     hasNext () {
       return !this.muted && this.node?.bgm.length > 1
@@ -92,58 +97,31 @@ export default {
     window.addEventListener('resize', this.checkRatio)
   },
   methods: {
+    onBack () {
+      window.close()
+    },
     toggleMute () {
       this.muted = !this.muted
     },
     setBgm () {
-      this.$bgmIndex = 0
-      this.chooseBgm()
+      this.$bgmIndex = -1
+      this.switchBgm()
     },
-    chooseBgm () {
+    switchBgm () {
       const { bgm, toggleType } = this.node
-      const length = bgm.length
-
-      if (length === 0) {
-        this.bgm = ''
-        return
-      }
-
-      if (length === 1) {
-        this.bgm = bgm[0].keyName
-        return
-      }
-
-      let index
-      switch (toggleType) {
-        case 'cycle':
-          index = this.$bgmIndex
-          this.$bgmIndex = (index + 1) % length
-          break
-        case 'random':
-          index = Math.random() * length | 0
-          if (bgm[index]?.keyName === this.bgm) {
-            if (index === 0) {
-              index += 1
-            } else {
-              index -= 1
-            }
-          }
-          break
-        default:
-          return
-      }
-      this.bgm = bgm[index].keyName
+      this.$bgmIndex = switchToNext(toggleType, bgm, this.$bgmIndex)
+      this.bgm = bgm[this.$bgmIndex]?.keyName
     },
     onAudioEnded () {
       if (this.node.bgm.length > 1) {
-        this.chooseBgm()
+        this.switchBgm()
       }
       this.$refs.audio.play()
     },
     onAudioError (e) {
       console.warn('audio error', e)
       if (this.node?.bgm.length > 1) {
-        this.chooseBgm()
+        this.switchBgm()
       }
     },
     checkRatio () {