修改登录页以及声音模型显示

Flex

2025-06-09 8f488cf5dc006ea583c4f33b9348f5e588552a82

修改登录页以及声音模型显示

 easegen-front/src/views/Login/Login.vue

@@ -58,15 +58,16 @@
}
.bei{
  width: 100%;
  height: 100%;
  min-height: 100%;
  background-color: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow-y: scroll;
}
.bei .BeiArea{
  width: 86%;
  height: 95%;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
@@ -129,4 +130,11 @@
  }
}

@media (max-height:500px){
  .bei .BeiArea{
    align-items: flex-start;
  }
}


</style>

 easegen-front/src/views/chooseTemplate/index.vue

@@ -586,36 +586,44 @@
            </div>
          </div>
          <div class="SoundModelArea" v-loading="soundLoading">
            <div
              class="ModealBox"
              v-for="(item, index) in audioList"
              :key="index"
              @click="handleSelect(item)"
              @mouseenter="handleMouseenter(item)"
              @mouseleave="handleMouseleave(item)"
              :class="item.isSelect ? 'slectModel' : ''"
            >
              <div class="ImgBox">
                <img :src="item.avatarUrl" alt="" />
            <div class="SoundModelAreaBox" v-for="(value, key, index) in audioList" :key="index">
              <div class="SoundClassTit">
                <el-divider content-position="center"> {{ languageClass(key) }} </el-divider>
                <!-- <el-divider content-position="center"> 123 </el-divider> -->
              </div>
              <div class="TextArea">
                <p> {{ item.name }} </p>
                <p> {{ item.introduction }} </p>
              <div class="SoundClassContent">
                <div
                  class="ModealBox"
                  v-for="(item, index) in value"
                  :key="index"
                  @click="handleSelect(key, item)"
                  @mouseenter="handleMouseenter(key, item)"
                  @mouseleave="handleMouseleave(key, item)"
                  :class="item.isSelect ? 'slectModel' : ''"
                >
                  <div class="ImgBox">
                    <img :src="item.avatarUrl" alt="" />
                  </div>
                  <div class="TextArea">
                    <p> {{ item.name }} </p>
                    <p> {{ item.introduction }} </p>
                  </div>
                  <img
                    class="play-img"
                    v-if="item.isHover && !item.isPlay"
                    src="@/assets/imgs/play.png"
                    alt=""
                    @click.stop="playAudio(item)"
                  />
                  <img
                    class="play-img"
                    v-if="item.isHover && item.isPlay"
                    src="@/assets/imgs/pause.png"
                    alt=""
                    @click.stop="SoundpauseAudio(item)"
                  />
                </div>
              </div>
              <img
                class="play-img"
                v-if="item.isHover && !item.isPlay"
                src="@/assets/imgs/play.png"
                alt=""
                @click.stop="playAudio(item)"
              />
              <img
                class="play-img"
                v-if="item.isHover && item.isPlay"
                src="@/assets/imgs/pause.png"
                alt=""
                @click.stop="SoundpauseAudio(item)"
              />
            </div>
          </div>
          <div class="ButtonArea">
@@ -740,7 +748,6 @@
import { useEditorHtml } from '@/hooks/web/useEditorHtml'
import { ElMessage, ElMessageBox } from 'element-plus'
import { DICT_TYPE, getIntDictOptions, getStrDictOptions } from '@/utils/dict'
import { measureMemory } from 'vm'
import { any } from 'vue-types'

const editorHtml = useEditorHtml()
@@ -773,7 +780,6 @@
  hostValue.value = item
  chooseHost1(2)
  // dialogVisible2.value = true
  
}
const chooseHost1 = (index) => {
  if (index == 1) {
@@ -1012,11 +1018,11 @@
      // 获取声音类别
      getVoiceType()
    }
    if( selectList.value === undefined ){
    if (selectList.value === undefined) {
      // 获取模型列表
      getSoundModelList()
    }
    if( ChangeSoundTypeList.value === undefined ){
    if (ChangeSoundTypeList.value === undefined) {
      // 获取可选的声音类型列表
      GetSoundTypeList()
    }
@@ -1088,10 +1094,11 @@
    soundLoading.value = true
    // 语言类型
    soundQueryParams.language = selectLanguage?.value.value ?? ''
    soundQueryParams.language = soundQueryParams.language === "all_Language"?"":soundQueryParams.language
    soundQueryParams.language =
      soundQueryParams.language === 'all_Language' ? '' : soundQueryParams.language
    // 性别
    soundQueryParams.gender = changeAudio?.value ?? ''
    soundQueryParams.gender = Number(soundQueryParams.gender) === 3?"":soundQueryParams.gender
    soundQueryParams.gender = Number(soundQueryParams.gender) === 3 ? '' : soundQueryParams.gender
    // 声音类型
    soundQueryParams.voiceType = activeSoundType?.value.value ?? ''
    const data = await pptTemplateApi.videlPageList(soundQueryParams)
@@ -1100,11 +1107,45 @@
      item.isPlay = false
      item.isSelect = false
    })
    audioList.value = data.list
    let LanguageArr = {}
    data.list.forEach((item) => {
      if (LanguageArr?.[item.language] !== undefined) {
        LanguageArr[item.language].push(item)
      } else {
        LanguageArr = { ...LanguageArr, [item.language]: [{ ...item }] }
      }
    })
    console.log(LanguageArr)

    audioList.value = LanguageArr
    total.value = data.total
    if (selectList.value !== undefined && selectList.value !== null) {
      selectList.value = null //初始化
    }
    // 停止当前播放的音频
    if (SoundcurrentAudio.value) {
      SoundcurrentAudio.value.pause()
      SoundcurrentAudio.value = null
    }

    // 重置当前播放状态
    if (SoundcurrentlyPlaying.value) {
      SoundcurrentlyPlaying.value.isPlay = false
      SoundcurrentlyPlaying.value = null
    }
  } finally {
    soundLoading.value = false
  }
}
// 当前语种显示
const languageClass = (language) => {
  let text = ''
  languageList.value.forEach((element) => {
    if (element.value === language) {
      text = element.label
    }
  })
  return text
}
// 语种选择
const LanguageChange = (event) => {
@@ -1124,15 +1165,30 @@
  SoundTypeList.value.forEach((element) => {
    if (element.value === event) {
      ChangeSoundTypeList.value = { ...element }

      if (selectList.value !== undefined && selectList.value !== null) {
        selectList.value = null //初始化
      }
      // 停止当前播放的音频
      if (SoundcurrentAudio.value) {
        SoundcurrentAudio.value.pause()
        SoundcurrentAudio.value = null
      }

      // 重置当前播放状态
      if (SoundcurrentlyPlaying.value) {
        SoundcurrentlyPlaying.value.isPlay = false
        SoundcurrentlyPlaying.value = null
      }
    }
  })
  getSoundModelList()
}
//选择声音模型
const selectList = ref()
const handleSelect = (item) => {
const handleSelect = (key, item) => {
  selectList.value = [item]
  audioList.value.forEach((child) => {
  audioList.value[key].forEach((child) => {
    if (child.id == item.id) {
      child.isSelect = true
    } else {
@@ -1149,16 +1205,14 @@
})
// 确定按钮点击处理函数
const submitForm = () => {
  console.log( selectLanguage.value )
  if( selectLanguage.value.value === "all_Language" ){
  console.log(selectLanguage.value)
  if (selectLanguage.value.value === 'all_Language') {
    message.warning('请将语种按钮由全部语种修改为您需要生成的声音的文本的语种类型')
    return false
  }
  console.log(ChangeSoundTypeList.value.value)
    if (ChangeSoundTypeList.value.value === 2) {
  if (ChangeSoundTypeList.value.value === 2) {
    //此时为通用
    console.log(selectList.value)
    if (selectList.value === undefined) {
    if (selectList.value === undefined || selectList.value === null) {
      message.warning('请选择声音模型')
      return false
    }
@@ -1205,15 +1259,15 @@
  // })
}
// 鼠标移入与移出
const handleMouseenter = (item) => {
  audioList.value.forEach((child) => {
const handleMouseenter = (key, item) => {
  audioList.value[key].forEach((child) => {
    if (child.id == item.id) {
      child.isHover = true
    }
  })
}
const handleMouseleave = (item) => {
  audioList.value.forEach((child) => {
const handleMouseleave = (key, item) => {
  audioList.value[key].forEach((child) => {
    if (child.id == item.id) {
      child.isHover = false
    }
@@ -1439,7 +1493,7 @@
}

const chooseTemplate = (currTemplate) => {
  console.log( "currTemplate", currTemplate)
  console.log('currTemplate', currTemplate)
  selectTemplate.value = cloneDeep(currTemplate)
  templates.value.forEach((item) => {
    item.isActive = false
@@ -2086,9 +2140,10 @@
    language: selectLanguage.value?.value
  }

  if( ChangeSoundTypeList.value.value === 2 ){ //此时选取了声音模型
  if (ChangeSoundTypeList.value.value === 2) {
    //此时选取了声音模型
    params.humanId = null
  }else if( ChangeSoundTypeList.value.value === 1 ){
  } else if (ChangeSoundTypeList.value.value === 1) {
    params.voiceId = null
  }

@@ -2156,14 +2211,13 @@
}

const goBack = () => {
  if (PPTArr.value.length==0) {
  if (PPTArr.value.length == 0) {
    pptTemplateApi.coursesDelete(courseInfo.value.id).then((res) => {
      router.go(-1)
    })
  }else {
  } else {
    router.go(-1)
  }

}

const editorRef = shallowRef()
@@ -2892,60 +2946,71 @@
    height: 86%;
    margin: 10px 0;
    overflow-y: scroll;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    > .ModealBox {
      width: 47%;
      margin: 10px 1%;
      display: flex;
      justify-content: space-around;
      align-items: center;
      position: relative;
      > .ImgBox {
        width: 26%;

    .SoundModelAreaBox {
      width: 100%;
      .SoundClassTit {
        width: 80%;
        margin: 0 auto;
        img {
          width: 100%;
      }
      .SoundClassContent {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        align-content: flex-start;
        > .ModealBox {
          width: 47%;
          margin: 10px 1%;
          display: flex;
          justify-content: space-around;
          align-items: center;
          position: relative;
          > .ImgBox {
            width: 26%;
            margin: 0 auto;
            img {
              width: 100%;
            }
          }
          > .TextArea {
            width: 48%;
            p {
              font-size: 12px;
              margin: 4px 0;
              padding-left: 6px;
              box-sizing: border-box;
              text-align: left;
              word-wrap: break-word;
            }
          }
          > .play-img {
            width: 32px;
            height: 32px;
            cursor: pointer;
            position: absolute;
            top: 0;
            right: 0;
            left: 0;
            bottom: 0;
            margin: auto;
            z-index: +10;
          }
        }
        .ModealBox:hover {
          background-color: #000;
          opacity: 0.5;
          border: 2px solid #0183f4;
          > .TextArea {
            p {
              color: #fff;
            }
          }
        }
        > .slectModel {
          border: 2px solid #1989fa;
          border-radius: 6px;
        }
      }
      > .TextArea {
        width: 48%;
        p {
          font-size: 12px;
          margin: 4px 0;
          padding-left: 6px;
          box-sizing: border-box;
          text-align: left;
          word-wrap: break-word;
        }
      }
      > .play-img {
        width: 32px;
        height: 32px;
        cursor: pointer;
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        margin: auto;
        z-index: +10;
      }
    }
    .ModealBox:hover {
      background-color: #000;
      opacity: 0.5;
      border: 2px solid #0183f4;
      > .TextArea {
        p {
          color: #fff;
        }
      }
    }
    > .slectModel {
      border: 2px solid #1989fa;
      border-radius: 6px;
    }
  }
  .ButtonArea {