SichuanDaily/src/views/digitalHuman/index.vue

<template>
  <!-- 基础设置页面 class="pointer-events-auto"-->
  <div>
    <n-drawer
      v-model:show="active"
      :width="240"
      placement="right"
      :trap-focus="false"
      :block-scroll="false"
      :show-mask="false"
      :mask-closable="false"
      to="#drawer-target"
      style="--n-body-padding: 0px"
    >
      <n-drawer-content title="数字人播报">
        <div class="drawerContent m-5">
          <!-- <div class="text-lg my-2.5">数字人播报</div>-->
          <n-list
            v-if="list"
            style="--n-color-modal: none"
            :show-divider="false"
          >
            <!--            {{list}}-->
            <n-list-item
              v-for="(vi, index) in list"
              :key="index"
              style="width: 100%"
            >
              <div class="mb-5">
                {{ `当前空间${vi.media ? '视频' : '模型'}` }} ID: {{ vi.sid }}
              </div>

              <n-select
                v-model:value="vi.audioId"
                :options="audioOptions"
                :placeholder="'请绑定对应音频'"
                @update:value="(val) => handleSelect(val, vi.sid)"
              ></n-select>
            </n-list-item>
          </n-list>
        </div>
      </n-drawer-content>
    </n-drawer>
  </div>
</template>

<script setup lang="ts">
import {
  ref,
  computed,
  onMounted,
  // reactive,
  onUnmounted,
  watchEffect,
  watch
} from 'vue'

import { useMainStore } from '@/store'
import { NList, NListItem } from 'naive-ui'
import { fetchTtsList, SaveTOTTSParams } from '@/api'

defineProps<{ msg: string }>()
const main = useMainStore()
const active = ref(true)

const boxVideos = computed(() => main.sceneInfo.boxVideos)
const boxModels = computed(() => main.sceneInfo.boxModels)
const aiData = computed(() => main.getEditorData.aiSetting)

const list = ref<
  { sid: string; audioFilePath: string; audioId: string; media: any }[]
>([])
const audiolist = ref<any[]>([])
const audioOptions = ref<any[]>([])

onMounted(async () => {
  active.value = true
  const res = await fetchTtsList(main.sceneCode)
  if (res) {
    const result = Array.from(res as any as SaveTOTTSParams[]).filter(
      (i) => i.type === 'tts'
    )
    audiolist.value = result
    const arr = result.map((item) => {
      return {
        label: item.name,
        value: item.id
      }
    })
    console.log('array', arr)
    audioOptions.value = arr
  }

  watchEffect(() => {
    if (boxVideos.value?.length || boxModels.value?.length) {
      // debugger
      const videoData = JSON.parse(boxVideos.value)
      const boxData = JSON.parse(boxModels.value)
      console.log('boxVideos', videoData)
      if (videoData && aiData.value.length === 0) {
        list.value = list.value.concat(
          videoData.map((item) => {
            return {
              ...item,
              audioId: null,
              audioFilePath: null
            }
          })
        )
      }
      if (videoData && aiData.value.length === 0) {
        list.value = list.value.concat(
          boxData.map((item) => {
            return {
              ...item,
              audioId: null,
              audioFilePath: null
            }
          })
        )
      }
    }
  })
})
watchEffect(() => {
  if (aiData.value.length > 0) {
    list.value = aiData.value
  }
})
onUnmounted(() => {
  // setWidthSceneRef(0)
})
const handleSelect = (audioId: any, vid: any) => {
  const file = audiolist.value.find((i) => i.id === audioId)
  const models = Array.from(list.value.flat() || []).find((i) => i.sid === vid)
  const fileName = file.voicePath.substring(file.voicePath.lastIndexOf('/') + 1)
  if (file.voicePath?.length && models) {
    // debugger
    models.audioFilePath = fileName
    console.log('models', models)
    main.syncAISetting(list.value)
  }
}
</script>

<style lang="sass" scoped>
.list
  .listItem
    div
      display: flex
      justify-content: space-between
</style>