Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Contribute to GitLab
Sign in
Toggle navigation
D
digitalPerson-fe
Project
Project
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
digitalPerson
digitalPerson-fe
Commits
6490f846
Commit
6490f846
authored
Sep 30, 2024
by
Dazzle Wu
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
chore: 首页数字人生成入口
parent
6cc12989
Hide whitespace changes
Inline
Side-by-side
Showing
7 changed files
with
189 additions
and
24 deletions
+189
-24
creation.ts
src/store/types/creation.ts
+5
-0
background-setting.vue
...ews/creation/components/background/background-setting.vue
+1
-1
create-digital-human-video-modal.vue
.../creation/components/create-digital-human-video-modal.vue
+119
-0
preview-content.vue
src/views/creation/components/preview-content.vue
+1
-1
side-bar.vue
src/views/creation/layout/side-bar.vue
+6
-7
card-navigator.vue
src/views/workbench/components/card-navigator.vue
+49
-11
recommend-template.vue
src/views/workbench/components/recommend-template.vue
+8
-4
No files found.
src/store/types/creation.ts
View file @
6490f846
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
View file @
6490f846
...
...
@@ -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
0 → 100644
View file @
6490f846
<
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
View file @
6490f846
...
...
@@ -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
View file @
6490f846
<
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
View file @
6490f846
<
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=
"handle
GoToCreation
"
@
click=
"handle
ShowCreateDigitalHumanVideoModal
"
>
<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
View file @
6490f846
...
...
@@ -72,10 +72,10 @@ function handleOpenModal(template: DigitalTemplate) {
PreviewModalVisible
.
value
=
true
}
function
handleToCreation
(
template
:
DigitalTemplate
)
{
function
handleToCreation
(
template
Id
:
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
>
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment