byzs-bjdx-web/src/views/ai/video/index/index.vue

<!-- video -->
<template>
  <div class="ai-video">
    <div class="left">
      <div class="segmented">
        <el-segmented v-model="selectPlatform" :options="platformOptions" />
      </div>
      <div class="modal-switch-container">
        <Common
          v-if="selectPlatform === 'common'"
          ref="commonRef"
          :models="models"
          @on-draw-complete="handleDrawComplete"
        />
        <VideoImage
          v-if="selectPlatform === 'videoImage'"
          ref="VideoImageRef"
          :models="models"
          @on-draw-complete="handleDrawComplete"
        />
        <VideoImages
          v-if="selectPlatform === 'videoImages'"
          ref="VideoImagesRef"
          :models="models"
          @on-draw-complete="handleDrawComplete"
        />
      </div>
    </div>
    <div class="main">
      <VideoList ref="videoListRef" @on-regeneration="handleRegeneration" />
    </div>
  </div>
</template>

<script setup lang="ts">
import VideoList from './components/VideoList.vue'
import { VideoVO } from '@/api/ai/video'
import Common from './components/common/index.vue'
import VideoImage from './components/videoImage/index.vue'
import VideoImages from './components/videoImages/index.vue'
import { ModelApi, ModelVO } from '@/api/ai/model/model'
import { AiModelTypeEnum } from '@/views/ai/utils/constants'

const videoListRef = ref<any>() // video 列表 ref
const commonRef = ref<any>() // stable diffusion ref

// 定义属性
const selectPlatform = ref('common') // 选中的平台
const platformOptions = [
  {
    label: '通用',
    value: 'common'
  },
  {
    label: '图生视频',
    value: "videoImage"
  },
  {
    label: '图生集视频',
    value: "videoImages"
  },
]

const models = ref<ModelVO[]>([]) // 模型列表

/** 视频 start  */
const handleDrawStart = async (platform: string) => {}

/** 视频 complete */
const handleDrawComplete = async (platform: string) => {
  await videoListRef.value.getVideoList()
}

/** 重新生成：将画图详情填充到对应平台 */
const handleRegeneration = async (video: VideoVO) => {
  // 切换平台
  selectPlatform.value = video.platform
  // 根据不同平台填充 video
  await nextTick()
  // if (video.platform === AiPlatformEnum.DOU_BAO) {
  //   //   // 新增：通用平台（包括豆包）使用 commonRef 填充数据
  //   commonRef.value.settingValues(video)
  // }
}

/** 组件挂载的时候 */
onMounted(async () => {
  // 获取模型列表
  models.value = await ModelApi.getModelSimpleList(AiModelTypeEnum.VIDEO)
})
</script>

<style scoped lang="scss">
.ai-video {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;

  display: flex;
  flex-direction: row;
  height: 100%;
  width: 100%;

  .left {
    display: flex;
    flex-direction: column;
    padding: 20px;
    width: 390px;

    .segmented .el-segmented {
      --el-border-radius-base: 16px;
      --el-segmented-item-selected-color: #fff;
      background-color: #ececec;
      width: 350px;
    }

    .modal-switch-container {
      height: 100%;
      overflow-y: auto;
      margin-top: 30px;
    }
  }

  .main {
    flex: 1;
    background-color: #fff;
  }

  .right {
    width: 350px;
    background-color: #f7f8fa;
  }
}
</style>