chore: 首页数字人生成入口

src/store/types/creation.ts

 import { DriveType, TaskType } from './template'
 
+export enum ScreenType {
+  PORTRAIT = 'vertical',
+  LANDSCAPE = 'horizontal',
+}
+
 export enum ImageType {
   THREE_D = 'THREE_D',
   TWO_D_BOUTIQUE = 'TWO_D_BOUTIQUE',

src/views/creation/components/background/background-setting.vue

@@ -135,7 +135,7 @@ function onImageLoaded(index: number) {
         </div>
 
         <n-grid :x-gap="12" :y-gap="12" :cols="3">
-          <n-gi>
+          <n-gi v-if="currentBackgroundImageType === BackgroundImageType.PERSON">
             <n-spin :show="uploadLoading">
               <label
                 class="h-22 w-22 hover:border-blue flex cursor-pointer flex-col items-center justify-center rounded-lg border border-gray-200"

src/views/creation/components/create-digital-human-video-modal.vue

+<script setup lang="ts">
+import CustomIcon from '@/components/custom-icon/custom-icon.vue'
+import CustomModal from '@/components/custom-modal/custom-modal.vue'
+import { ScreenType } from '@/store/types/creation'
+import { formatDateTime } from '@/utils/date-formatter'
+import { FormInst } from 'naive-ui'
+import { computed, reactive, ref } from 'vue'
+
+interface Props {
+  isShowModal: boolean
+  btnLoading: boolean
+  modalTitle: string
+}
+
+export interface DigitalHumanVideoForm {
+  title: string
+  pageLayout: ScreenType
+}
+
+interface Emits {
+  (e: 'update:isShowModal', value: boolean): void
+  (e: 'confirm', value: DigitalHumanVideoForm): void
+}
+
+const props = defineProps<Props>()
+
+const emit = defineEmits<Emits>()
+
+const digitalHumanVideoFormRef = ref<FormInst | null>(null)
+
+const digitalHumanVideoFormData = reactive<DigitalHumanVideoForm>({
+  title: '新建數字人視頻' + formatDateTime(new Date()),
+  pageLayout: ScreenType.PORTRAIT,
+})
+
+const digitalHumanVideoFormRules = {
+  title: [{ required: true, message: '請輸入草稿名稱', trigger: 'blur' }],
+}
+
+const pageLayoutList = [
+  { label: '豎版', value: ScreenType.PORTRAIT, icon: 'mynaui:rectangle-vertical' },
+  { label: '橫版', value: ScreenType.LANDSCAPE, icon: 'mynaui:rectangle' },
+]
+
+const showModal = computed({
+  get() {
+    return props.isShowModal
+  },
+  set(value: boolean) {
+    emit('update:isShowModal', value)
+  },
+})
+
+function handleUpdatePageLayout(pageLayout: ScreenType) {
+  digitalHumanVideoFormData.pageLayout = pageLayout
+}
+
+function handleAddDigitalHumanVideo() {
+  digitalHumanVideoFormRef.value?.validate((errors) => {
+    if (!errors) {
+      emit('confirm', digitalHumanVideoFormData)
+    }
+  })
+}
+</script>
+
+<template>
+  <CustomModal v-model:is-show="showModal" :title="modalTitle" :width="448" @confirm="handleAddDigitalHumanVideo">
+    <template #content>
+      <NForm
+        ref="digitalHumanVideoFormRef"
+        :model="digitalHumanVideoFormData"
+        :rules="digitalHumanVideoFormRules"
+        label-placement="left"
+        show-require-mark
+        label-width="80px"
+        class="pt-2"
+      >
+        <NFormItem label="名稱" path="title">
+          <NInput
+            v-model:value="digitalHumanVideoFormData.title"
+            placeholder="請輸入草稿名稱"
+            :maxlength="30"
+            show-count
+          />
+        </NFormItem>
+
+        <NFormItem label="畫幅比例" path="pageLayout" feedback-style="display:none">
+          <div class="flex gap-3">
+            <div
+              v-for="pageLayoutItem in pageLayoutList"
+              :key="pageLayoutItem.value"
+              class="flex h-9 w-[95px] cursor-pointer items-center justify-center gap-2 rounded-md border text-xs"
+              :class="
+                pageLayoutItem.value === digitalHumanVideoFormData.pageLayout
+                  ? 'border-theme-color text-theme-color bg-[#e6f0ff]'
+                  : 'border-[#dde3f0]'
+              "
+              @click="handleUpdatePageLayout(pageLayoutItem.value)"
+            >
+              <CustomIcon :icon="pageLayoutItem.icon" class="text-base" />
+              <span>{{ pageLayoutItem.label }}</span>
+            </div>
+          </div>
+        </NFormItem>
+      </NForm>
+    </template>
+  </CustomModal>
+</template>
+
+<style lang="scss" scoped>
+:deep(.n-input) {
+  border-radius: 4px;
+
+  .n-input-wrapper {
+    font-size: 12px;
+  }
+}
+</style>

src/views/creation/components/preview-content.vue

@@ -157,7 +157,7 @@ function controlAudio() {
         <img
           v-if="digitalCreationStore.inputImageUrl"
           :src="digitalCreationStore.inputImageUrl"
-          class="absolute max-w-none object-fill"
+          class="absolute max-w-none object-contain"
           :style="{
             width: `${digitalHumanWidth}px`,
             height: `${digitalHumanHeight}px`,

src/views/creation/layout/side-bar.vue

 <script setup lang="ts">
 import { ref } from 'vue'
 import BackgroundSetting from '../components/background/background-setting.vue'
-import SubtitleSetting from '../components/subtitle/subtitle-setting.vue'
 import DigitalSetting from '../components/digital/digital-setting.vue'
 
 const value = ref('digital')
@@ -16,11 +15,11 @@ const barList = [
     label: '背景',
     icon: 'icon-park-outline:background-color',
   },
-  {
-    key: 'subtitle',
-    label: '字幕',
-    icon: 'icon-park-outline:text-message',
-  },
+  // {
+  //   key: 'subtitle',
+  //   label: '字幕',
+  //   icon: 'icon-park-outline:text-message',
+  // },
 ]
 </script>
 
@@ -30,7 +29,7 @@ const barList = [
       <div class="flex-1 overflow-hidden py-2">
         <DigitalSetting v-if="value === 'digital'" />
         <BackgroundSetting v-if="value === 'background'" />
-        <SubtitleSetting v-if="value === 'subtitle'" />
+        <!-- <SubtitleSetting v-if="value === 'subtitle'" /> -->
       </div>
       <VerticalTabs v-model:value="value" class="border-l" :list="barList"></VerticalTabs>
     </div>

src/views/workbench/components/card-navigator.vue

 <script setup lang="ts">
-import { computed, ref } from 'vue'
-import { useRouter } from 'vue-router'
+import { fetchSaveDigitalHumanDialogueConfig } from '@/apis/digital-human-dialogue'
+import { fetchSaveDraftConfig } from '@/apis/drafts'
+import { useDigitalCreationStore } from '@/store/modules/creation'
+import { useDigitalHumanDialogueStore } from '@/store/modules/digital-human-dialogue'
 import { useUserStore } from '@/store/modules/user'
+import { DraftConfig, ScreenType } from '@/store/types/creation'
+import { DigitalHumanDialogueConfig } from '@/store/types/digital-human-dialogue'
+import CreateDigitalHumanVideoModal, {
+  DigitalHumanVideoForm,
+} from '@/views/creation/components/create-digital-human-video-modal.vue'
 import CreateDigitalHumanDialogueModal, {
   DigitalHumanDialogueForm,
 } from '@/views/dialogue-detail/components/create-digital-human-dialogue-modal.vue'
-import { useDigitalHumanDialogueStore } from '@/store/modules/digital-human-dialogue'
-import { DigitalHumanDialogueConfig } from '@/store/types/digital-human-dialogue'
-import { fetchSaveDigitalHumanDialogueConfig } from '@/apis/digital-human-dialogue'
+import { computed, ref } from 'vue'
+import { useRouter } from 'vue-router'
 
 const router = useRouter()
 
 const userStore = useUserStore()
+const digitalCreationStore = useDigitalCreationStore()
 const digitalHumanDialogueStore = useDigitalHumanDialogueStore()
 
 const ishowCreateDigitalHumanDialogueModal = ref(false)
+const ishowCreateDigitalHumanVideoModal = ref(false)
 
 const userInfo = computed(() => userStore.userInfo)
 
-function handleGoToCreation() {
-  console.log('立即创作')
-}
-
 function handleShowCreateDigitalHumanDialogueModal() {
   ishowCreateDigitalHumanDialogueModal.value = true
 }
 
+function handleShowCreateDigitalHumanVideoModal() {
+  ishowCreateDigitalHumanVideoModal.value = true
+}
+
 async function handleCreateDigitalHumanDialogue(digitalHumanDialogueForm: DigitalHumanDialogueForm) {
   digitalHumanDialogueStore.resetDigitalHumanDialogue()
   const payload: DigitalHumanDialogueConfig = JSON.parse(JSON.stringify(digitalHumanDialogueStore.$state))
   payload.baseInfo.title = digitalHumanDialogueForm.title
   payload.baseInfo.pageLayout = digitalHumanDialogueForm.pageLayout
   payload.backgroundInfo.backgroundUrl =
-    digitalHumanDialogueForm.pageLayout === 'vertical'
+    digitalHumanDialogueForm.pageLayout === ScreenType.PORTRAIT
       ? 'https://digitalpeople-sit.gz.bcebos.com/share/backgroud/%E5%8C%BB%E5%AD%A61.jpg'
       : 'https://digitalpeople-sit.gz.bcebos.com/share/backgroud/%E9%80%9A%E7%94%A8.jpg'
 
@@ -43,6 +51,29 @@ async function handleCreateDigitalHumanDialogue(digitalHumanDialogueForm: Digita
     ishowCreateDigitalHumanDialogueModal.value = false
   }
 }
+
+async function handleCreateDigitalHumanVideo(digitalHumanVideoForm: DigitalHumanVideoForm) {
+  digitalCreationStore.resetDigitalCreation()
+  const payload: DraftConfig = JSON.parse(JSON.stringify(digitalCreationStore.$state))
+  payload.draftName = digitalHumanVideoForm.title
+  payload.width = digitalHumanVideoForm.pageLayout === ScreenType.PORTRAIT ? 1080 : 1920
+  payload.height = digitalHumanVideoForm.pageLayout === ScreenType.PORTRAIT ? 1920 : 1080
+  payload.inputImageUrl =
+    digitalHumanVideoForm.pageLayout === ScreenType.PORTRAIT
+      ? 'https://demand-ai-sit.gz.bcebos.com/data/20240913/1726223058345.png'
+      : 'https://demand-ai-sit.gz.bcebos.com/data/20240913/1726221675591.png'
+  payload.backgroundImageUrl =
+    digitalHumanVideoForm.pageLayout === ScreenType.PORTRAIT
+      ? 'https://digitalpeople-sit.gz.bcebos.com/share/digitalPeople_template/video_template/%E6%95%99%E8%82%B2%E5%9F%B9%E8%AE%AD3-%E8%83%8C%E6%99%AF%E5%9B%BE.jpg'
+      : 'https://digitalpeople-sit.gz.bcebos.com/share/digitalPeople_template/video_template/%E6%95%99%E8%82%B2%E5%9F%B9%E8%AE%AD1-%E8%83%8C%E6%99%AF%E5%9B%BE.jpg'
+
+  const res = await fetchSaveDraftConfig<DraftConfig>(payload)
+
+  if (res.code === 0) {
+    router.push({ name: 'Creation', query: { draftId: res.data.id } })
+    ishowCreateDigitalHumanDialogueModal.value = false
+  }
+}
 </script>
 
 <template>
@@ -76,7 +107,7 @@ async function handleCreateDigitalHumanDialogue(digitalHumanDialogueForm: Digita
         </div>
         <div
           class="text-align-center mt-[20px] h-[35px] w-[90px] cursor-pointer rounded-[6px] bg-[#fff3] text-[14px] leading-[35px] text-[#fff] hover:bg-[#fff]/[.4]"
-          @click="handleGoToCreation"
+          @click="handleShowCreateDigitalHumanVideoModal"
         >
           <span>立即創作</span>
         </div>
@@ -135,4 +166,11 @@ async function handleCreateDigitalHumanDialogue(digitalHumanDialogueForm: Digita
     :btn-loading="false"
     @confirm="handleCreateDigitalHumanDialogue"
   />
+
+  <CreateDigitalHumanVideoModal
+    v-model:is-show-modal="ishowCreateDigitalHumanVideoModal"
+    modal-title="新建視頻"
+    :btn-loading="false"
+    @confirm="handleCreateDigitalHumanVideo"
+  />
 </template>

src/views/workbench/components/recommend-template.vue

@@ -72,10 +72,10 @@ function handleOpenModal(template: DigitalTemplate) {
   PreviewModalVisible.value = true
 }
 
-function handleToCreation(template: DigitalTemplate) {
+function handleToCreation(templateId: number) {
   router.push({
     name: 'Creation',
-    query: { templateId: template.id },
+    query: { templateId },
   })
 }
 </script>
@@ -128,7 +128,7 @@ function handleToCreation(template: DigitalTemplate) {
             ></div>
             <div
               class="overlay absolute bottom-2 left-2 right-2 hidden h-8 cursor-pointer rounded-[6px] border border-gray-300 bg-white/90 px-2 text-center text-[14px] leading-[30px] text-[#000000]"
-              @click="handleToCreation(item)"
+              @click="handleToCreation(item.id)"
             >
               做同款
             </div>
@@ -143,7 +143,11 @@ function handleToCreation(template: DigitalTemplate) {
       <div class="relative top-[10px] h-[1px] w-[14px] bg-[#a9b4cc]"></div>
     </div>
 
-    <TemplatePreviewModal v-model="PreviewModalVisible" :selected-template="selectedTemplate!" />
+    <TemplatePreviewModal
+      v-model="PreviewModalVisible"
+      :selected-template="selectedTemplate!"
+      @go-to-create="handleToCreation"
+    />
   </div>
 </template>
 <style lang="scss" scoped>