SichuanDaily/src/views/textToaudio/ttsModel.vue

<template>
  <n-modal v-model:show="showModal" :on-update:show="handleShow">
    <n-card
      style="width: 800px"
      title="文字转语音"
      :bordered="false"
      size="huge"
      role="dialog"
      transform-origin="center"
      aria-modal="true"
    >
      <template #header-extra>
        <n-icon size="30" @click="emits('close')" class="close-icon">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            xmlns:xlink="http://www.w3.org/1999/xlink"
            viewBox="0 0 512 512"
          >
            <path
              d="M289.94 256l95-95A24 24 0 0 0 351 127l-95 95l-95-95a24 24 0 0 0-34 34l95 95l-95 95a24 24 0 1 0 34 34l95-95l95 95a24 24 0 0 0 34-34z"
              fill="currentColor"
            ></path>
          </svg>
        </n-icon>
      </template>

      <n-flex>
        <n-flex style="flex: 1">
          <n-input
            v-model:value="form.document"
            type="textarea"
            maxlength="500"
            show-count
            clearable
            placeholder="请输入"
            style="flex: 1; min-height: 300px"
          />
        </n-flex>
        <n-flex style="flex: 1" vertical>
          <div>选择人物</div>

          <n-flex class="card-select mb-5" justify="center">
            <template v-for="(card, index) in cardList" :key="index">
              <n-card
                style="flex: 1 1 48%"
                class="card-item"
                :class="{ active: activeType(card.type) }"
                @click="handleCharterSelect(card)"
              >
                <n-flex style="flex: 1">
                  <n-avatar
                    round
                    size="small"
                    src="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg"
                  />
                  <n-flex style="flex: 1" vertical>
                    <span> {{ card.name }}</span>
                    <span> {{ card.desc }}</span>
                  </n-flex>
                </n-flex>
              </n-card>
            </template>
          </n-flex>
          <n-form
            ref="formRef"
            :model="form"
            label-placement="left"
            label-width="auto"
            require-mark-placement="right-hanging"
            :style="{
              maxWidth: '640px'
            }"
          >
            <n-form-item label="名称" path="inputValue">
              <n-input v-model:value="form.name" />
            </n-form-item>
            <n-form-item label="语速" path="inputValue">
              <n-slider
                v-model:value="form.speed"
                :step="0.1"
                :min="0.6"
                :max="2.5"
              />
            </n-form-item>
            <n-form-item label="音量" path="inputValue">
              <n-slider
                v-model:value="form.volume"
                :step="1"
                :min="-10"
                :max="10"
              />
            </n-form-item>
          </n-form>

          <!--          <n-slider v-model:value="form.speed" :step="1" />-->
          <!--          <n-slider v-model:value="form.volume" :step="1" />-->
        </n-flex>
      </n-flex>

      <template #footer>
        <n-flex justify="end">
          <n-button type="primary" @click="handleSave">保存</n-button>
        </n-flex>
      </template>
    </n-card>
  </n-modal>
</template>

<script setup lang="ts">
import { ref, reactive, watchEffect, computed } from 'vue'
import { NSlider, NForm, NFormItem, NAvatar, useMessage } from 'naive-ui'
import { saveTOTTS, SaveTOTTSParams } from '@/api'
import { useMainStore } from '@/store'

const main = useMainStore()
const showModal = ref(false)

const formId = ref()
const form = reactive({
  document: '',
  name: '',
  voiceType: 0,
  speed: 1,
  volume: 5
})
const message = useMessage()
const emits = defineEmits(['close', 'submit'])

const props = defineProps({
  show: {
    type: Boolean,
    default: false
  },
  isEditing: {
    type: Boolean,
    default: false
  },
  data: {
    type: Object,
    default: () => {}
  }
})
const handleShow = (show: boolean) => {
  if (!show) {
    emits('close')
  }
}

const cardList = reactive([
  {
    name: '智芳',
    desc: '自然舒适',
    type: 0,
    icon: ''
  },
  {
    name: '智华',
    desc: '自然舒适',
    type: 1,
    icon: ''
  },
  {
    name: '智付',
    desc: '支付播报 特色声音',
    type: 2,
    icon: ''
  },
  {
    name: '智柯',
    desc: '自然轻快',
    type: 3,
    icon: ''
  }
])
const handleCharterSelect = (card) => {
  console.log('handleCharterSelect', card)
  form.voiceType = card.type
}

const handleSave = async () => {
  const data: SaveTOTTSParams = {
    ...form,
    num: main.sceneCode
  }
  await saveTOTTS(data)
  // console.log(res)
  message.success('新增成功！')
  emits('submit')
}

const activeType = computed(() => (type) => form.voiceType === type)

watchEffect(() => {
  showModal.value = props.show
  if (props.isEditing) {
    formId.value = props.data.id
    console.log('props.data', props.data)
    form.document = props.data.document
    // form.document = props.data.document
  }
})
</script>
<style scoped lang="scss">
.close-icon {
  cursor: pointer;
}

.card-select {
  min-height: 200px;

  .card-item {
    &:hover {
      cursor: pointer;
      border-color: var(--primary-color);
    }

    &.active {
      border-color: var(--primary-color);
    }
  }
}
</style>