fuse-code/src/views/record/sign.vue

<template>
  <ui-group-option class="sign record-sign">
    <div class="content">
      <span class="cover">
        <img :src="getResource(getFileUrl(record.cover))" alt="" v-if="record.cover">
        <ui-icon 
          type="preview" 
          ctrl 
          class="preview" 
          @click="actions.play()"  
          v-if="record.status === RecordStatus.SUCCESS"
        />
      </span>
      <ui-input 
        type="text" 
        :modelValue="record.title" 
        @update:modelValue="(title: string) => $emit('updateTitle', title.trim())"
        v-show="isEditTitle" 
        ref="inputRef" 
        height="28px" 
        :maxlength="15"
      />
      <div class="title" v-show="!isEditTitle">
        <p>{{ record.title }}</p>
        <span v-if="record.status === RecordStatus.RUN">后台正在处理</span>
      </div>
    </div>
    <div class="action" v-if="edit">
      <ui-icon type="order" ctrl />
      <ui-more 
        :options="menus" 
        style="margin-left: 20px" 
        @click="(action: keyof typeof actions) => actions[action]()" 
      />
    </div>

    <Shot 
      v-if="isShot" 
      @close="closeHandler"
      @append="appendFragment" 
      @updateCover="(cover: string) => $emit('updateCover', cover)" 
      @deleteRecord="$emit('delete')"
      :record="record" />
    <Preview 
      v-if="isPlayVideo" 
      :type="MediaType.video" 
      :url="record.url" 
      @close="isPlayVideo = false" 
    />
  </ui-group-option>
</template>

<script lang="ts">
import { defineComponent, ref, computed, watchEffect } from 'vue'
import { getFileUrl, getExtname } from '@/utils'
import { useFocus } from 'bill/hook/useFocus'
import { RecordStatus, createRecordFragment, getRecordFragmentBlobs, recordFragments } from '@/store'
import { saveAs, loadPack } from '@/utils'
import { MediaType, Preview } from '@/components/static-preview/index.vue'
import { getResource } from '@/env'
import Shot from './shot.vue'

import type { PropType } from 'vue'
import type { RecordProcess } from './help'
import { isTemploraryID } from '@/store'
import { Message } from 'bill/index'

export default defineComponent({
  props: {
    record: {
      type: Object as PropType<RecordProcess>,
      required: true
    },
    edit: {
      type: Boolean,
      required: false,
      default: true
    }
  },
  emits: {
    'updateCover': (cover: string) => true,
    'updateTitle': (title: string) => true,
    'delete': () => true
  },
  setup(props, { emit }) {
    const menus = computed(() => {
      const base = []
      if ([RecordStatus.SUCCESS, RecordStatus.UN].includes(props.record.status)) {
        base.push(
          { label: '重命名', value: 'rename' },
          { label: '继续录制', value: 'continue' },
          { label: '下载', value: 'download' },
        )
      }
      base.push({ label: '删除', value: 'delete' })
      return base
    })

    const isShot = ref<boolean>(false)
    const inputRef = ref()
    const isEditTitle = useFocus(computed(() => inputRef.value?.vmRef.root))

    watchEffect(() => {
      if (!isEditTitle.value && !props.record.title.length) {
        isEditTitle.value = true
        Message.warning('视频名称不可为空')
      }
    })

    const isPlayVideo = ref(false)
    const actions = {
      continue: () => isShot.value = true,
      delete: () => emit('delete'),
      rename: () => isEditTitle.value = true,
      play: () => isPlayVideo.value = true,
      download() {
        const url = getResource(props.record.url)
        const ext = getExtname(url) || 'mp4'
        loadPack(saveAs(url, `${props.record.title}.${ext}`))
      },
    }
    props.record.immediately && actions.continue()

    const closeHandler = () => {
      if (getRecordFragmentBlobs(props.record).length === 0 && isTemploraryID(props.record.id)) {
        emit('delete')
      }
      isShot.value = false
    }

    const appendFragment = (blobs: Blob[]) => {
      recordFragments.value.push(
        ...blobs.map(blob => createRecordFragment({ url: blob, recordId: props.record.id }))
      )
      props.record.status = RecordStatus.UN
    }

    return {
      menus,
      actions,
      isShot,
      isEditTitle,
      closeHandler,
      inputRef,
      RecordStatus,
      MediaType,
      isPlayVideo,
      getResource,
      getFileUrl,
      appendFragment
    }
  },
  components: {
    Shot,
    Preview
  }
})
</script>


<style lang="scss" src="./style.scss" scoped>
</style>

<style>
  .record-sign .ui-input .text.suffix input {
    padding-right: 60px;
  }
</style>