Commit b8228988 authored by shirlyn.guo's avatar shirlyn.guo 🤡

feat: 我的作品&预览视频

parent cec1ba77
<script setup lang="ts"> <script setup lang="ts">
import { zhCN, dateZhCN } from 'naive-ui' import { dateZhTW, zhTW } from 'naive-ui'
import { ref } from 'vue' import { ref } from 'vue'
import { themeOverrides } from '@/config/theme-config' import { themeOverrides } from '@/config/theme-config'
import { useResizeObserver } from '@vueuse/core' import { useResizeObserver } from '@vueuse/core'
...@@ -8,10 +8,8 @@ import { useDesignSettingStore } from '@/store/modules/design-setting' ...@@ -8,10 +8,8 @@ import { useDesignSettingStore } from '@/store/modules/design-setting'
const designSettingStore = useDesignSettingStore() const designSettingStore = useDesignSettingStore()
const currentLocale = ref({ const currentLocale = ref(zhTW)
zhCN, const currentDateLocale = ref(dateZhTW)
})
const currentDateLocale = ref(dateZhCN)
const rootContainer = ref<HTMLDivElement | null>(null) const rootContainer = ref<HTMLDivElement | null>(null)
...@@ -38,18 +36,20 @@ useResizeObserver(rootContainer, (entries) => { ...@@ -38,18 +36,20 @@ useResizeObserver(rootContainer, (entries) => {
</script> </script>
<template> <template>
<div ref="rootContainer" class="h-full w-full"> <n-dialog-provider>
<NConfigProvider <div ref="rootContainer" class="h-full w-full">
class="h-full w-full" <NConfigProvider
:locale="currentLocale" class="h-full w-full"
:date-locale="currentDateLocale" :locale="currentLocale"
:theme-overrides="themeOverrides" :date-locale="currentDateLocale"
> :theme-overrides="themeOverrides"
<RouterView v-slot="{ Component }"> >
<Component :is="Component" /> <RouterView v-slot="{ Component }">
</RouterView> <Component :is="Component" />
</NConfigProvider> </RouterView>
</div> </NConfigProvider>
</div>
</n-dialog-provider>
<!-- <NThemeEditor /> --> <!-- <NThemeEditor /> -->
</template> </template>
<script setup lang="ts">
import CustomIcon from '@/components/custom-icon/custom-icon.vue'
import { useDesignSettingStore } from '@/store/modules/design-setting'
import { useUserStore } from '@/store/modules/user'
import { readonly } from 'vue'
import { useRouter } from 'vue-router'
const defaultAvatar = 'https://mkp-dev.oss-cn-shenzhen.aliyuncs.com/game-template/20221018/1666079174947.png'
const designSettingStore = useDesignSettingStore()
const userStore = useUserStore()
const router = useRouter()
// const currentRoute = useRoute()
const avatarOptions = readonly([
{
label: '退出登录',
key: 1,
},
])
function handleSidebarDisplayStatusChange(status: 'collapse' | 'expand') {
if (designSettingStore.sidebarDisplayStatus === 'hidden') {
designSettingStore.changeShowSidebarDrawer(true)
return
}
designSettingStore.toggleSidebarDisplayStatus(status)
}
function handleDropdownSelect(key: number) {
if (key === 1) {
userStore.logout().then(() => {
router.push({ name: 'Login' })
})
}
}
// function handleRefreshPage() {
// router.replace({ path: currentRoute.fullPath })
// }
</script>
<template>
<div class="flex select-none justify-between bg-white shadow-[0_1px_4px_rgba(0,21,41,0.08)]">
<div class="flex">
<div class="flex items-center px-3">
<CustomIcon
v-show="designSettingStore.sidebarDisplayStatus !== 'expand'"
class="h-5 w-5 cursor-pointer"
icon="ant-design:menu-unfold-outlined"
@click="handleSidebarDisplayStatusChange('expand')"
/>
<CustomIcon
v-show="designSettingStore.sidebarDisplayStatus === 'expand'"
class="h-5 w-5 cursor-pointer"
icon="ant-design:menu-fold-outlined"
@click="handleSidebarDisplayStatusChange('collapse')"
/>
</div>
<!-- <div class="flex items-center px-3">
<CustomIcon icon="mdi:reload" class="h-5 w-5 cursor-pointer" @click="handleRefreshPage" />
</div> -->
</div>
<div class="mr-5 flex sm:mr-6">
<div class="flex cursor-pointer items-center px-2">
<NDropdown trigger="click" :options="avatarOptions" @select="handleDropdownSelect">
<div class="flex h-full items-center">
<NAvatar round :size="30" object-fit="cover" :src="userStore.userInfo.avatar || defaultAvatar" />
<div class="ml-2 max-w-24 truncate text-base">{{ userStore.userInfo.userName }}</div>
</div>
</NDropdown>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { useDesignSettingStore } from '@/store/modules/design-setting'
const designSettingStore = useDesignSettingStore()
</script>
<template>
<div class="flex h-[64px] cursor-pointer items-center justify-center px-2">
<div class="h-[32px] w-[32px] shrink-0 bg-[url('@/assets/images/logo.png')] bg-cover"></div>
<Transition name="logo">
<div v-show="designSettingStore.sidebarDisplayStatus !== 'collapse'" class="ml-2 truncate text-lg font-semibold">
后台管理系统
</div>
</Transition>
</div>
</template>
<style lang="scss" scoped>
// .logo-enter-active,
// .logo-leave-active {
// transition: opacity 0.09s ease-in;
// }
// .logo-enter-from,
// .logo-leave-to {
// opacity: 0;
// }
</style>
<script setup lang="ts">
import { sidebarMenus } from '@/router/index'
import { useDesignSettingStore } from '@/store/modules/design-setting'
import SidebarLogo from '../sidebar-logo/sidebar-logo.vue'
import { type MenuOption } from '@/router/utils'
import { useRoute, useRouter } from 'vue-router'
import { ref, watch } from 'vue'
const designSettingStore = useDesignSettingStore()
const currentRoute = useRoute()
const router = useRouter()
const menuValue = ref(currentRoute.meta.key)
watch(
() => currentRoute.fullPath,
() => {
menuValue.value = currentRoute.meta.key
},
)
function handleUpdateValue(_key: string, menuItemOption: MenuOption) {
router.push({ name: menuItemOption.routeName })
// menuValue.value = key
}
function handleLogoClick() {
router.push({ name: 'Root' })
}
</script>
<template>
<SidebarLogo @click="handleLogoClick" />
<NMenu
:options="sidebarMenus"
:collapsed-width="64"
:collapsed-icon-size="20"
:indent="24"
:icon-size="20"
:collapsed="designSettingStore.sidebarDisplayStatus === 'collapse'"
:value="menuValue"
@update:value="handleUpdateValue"
/>
</template>
<script setup lang="ts">
import Sidebar from './components/sidebar/sidebar.vue'
import NavBar from './components/navbar/navbar.vue'
import { useDesignSettingStore } from '@/store/modules/design-setting'
const designSettingStore = useDesignSettingStore()
const layoutSideWidth = 210
function handleLayoutSideCollapsedChange(collapsed: boolean) {
designSettingStore.toggleSidebarDisplayStatus(collapsed ? 'collapse' : 'expand')
}
function handleDrawerMackClick() {
designSettingStore.changeShowSidebarDrawer(false)
}
</script>
<template>
<NLayout has-sider position="absolute">
<NLayoutSider
v-show="designSettingStore.sidebarDisplayStatus !== 'hidden'"
class="shadow-[2px_0_8px_0_rgba(29,35,41,0.05)]"
show-trigger="bar"
collapse-mode="width"
:collapsed-width="64"
:collapsed="designSettingStore.sidebarDisplayStatus === 'collapse'"
:width="layoutSideWidth"
:on-update:collapsed="handleLayoutSideCollapsedChange"
>
<Sidebar />
</NLayoutSider>
<NDrawer
v-model:show="designSettingStore.showSidebarDrawer"
:width="layoutSideWidth"
:close-on-esc="false"
placement="left"
display-directive="show"
:on-mask-click="handleDrawerMackClick"
>
<Sidebar />
</NDrawer>
<NLayout content-class="layout-content">
<NLayoutHeader class="box-border h-[64px] flex-none">
<NavBar class="h-full" />
</NLayoutHeader>
<NLayoutContent class="main-content-wrapper flex-1">
<main class="box-border min-h-full p-4">
<RouterView v-slot="{ Component }">
<Transition appear name="fade-slide" mode="out-in">
<Component :is="Component" />
</Transition>
</RouterView>
</main>
<!-- <NLayoutFooter bordered>版权</NLayoutFooter> -->
</NLayoutContent>
</NLayout>
</NLayout>
</template>
<style lang="scss" scoped>
:deep(.layout-content) {
@apply flex flex-col bg-[#f5f7f9];
}
:deep(.main-content-wrapper) {
@apply bg-[#f5f7f9];
// ::-webkit-scrollbar {
// width: 8px;
// height: 8px;
// }
// ::-webkit-scrollbar-track {
// width: 6px;
// background: rgba(#101f1c, 0.1);
// border-radius: 2em;
// }
// ::-webkit-scrollbar-thumb {
// cursor: pointer;
// background-color: rgba(144, 147, 153, 20%);
// background-clip: padding-box;
// // min-height: 28px;
// border-radius: 2em;
// transition: background-color 0.3s;
// }
// ::-webkit-scrollbar-thumb:hover {
// background-color: rgba(144, 147, 153, 30%);
// }
}
.fade-slide-leave-active,
.fade-slide-enter-active {
transition: all 0.3s;
}
.fade-slide-enter-from {
opacity: 0;
transform: translateX(-30px);
}
.fade-slide-leave-to {
opacity: 0;
transform: translateX(30px);
}
</style>
import { type RouteRecordRaw } from 'vue-router' import { type RouteRecordRaw } from 'vue-router'
// import Layout from '@/layout/index.vue' // import Layout from '@/layout/index.vue'
import Home from '@/views/home/home.vue' import Index from '@/views/index/index.vue'
// export default [ // export default [
// { // {
...@@ -35,6 +35,30 @@ export default [ ...@@ -35,6 +35,30 @@ export default [
rank: 1001, rank: 1001,
title: '首页', title: '首页',
}, },
component: Home, component: Index,
children: [
{
path: '/',
redirect: 'home',
},
{
path: 'home',
name: 'Home',
meta: {
title: '首页',
rank: 1001,
},
component: () => import('@/views/home/home.vue'),
},
{
path: 'opus',
name: 'MyWorks',
meta: {
title: '我的作品',
rank: 1001,
},
component: () => import('@/views/opus/opus.vue'),
},
],
}, },
] as RouteRecordRaw[] ] as RouteRecordRaw[]
<script setup lang="ts">
import { Right } from '@icon-park/vue-next'
</script>
<template>
<div class="mb-[16px] flex rounded-[16px]">
<div
class="border-1 flex h-[168px] w-[401.5px] rounded-[20px] bg-gradient-to-r from-[#4b87ff] to-[#82b9ff] text-[#ffffff]"
>
<div class="ml-[31px] mt-[18px]">
<div class="h-[80px] w-[238px]">
<div class="text-[20px] font-semibold leading-[27px]">照片數字人</div>
<div class="mt-[10px] text-[14px] font-normal">讓照片中的人開口説話,照片成爲視頻</div>
</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]"
>
<span>立即創作</span>
</div>
</div>
<div class="ml-[15px] mr-[15px] mt-[67px]">
<img src="@/assets/ecard.png" alt="照片數字人" />
</div>
</div>
<div
class="border-1 ml-[20px] flex h-[173px] w-[401.5px] rounded-[20px] bg-gradient-to-r from-[#30b5f2] to-[#37d1ff] text-[#ffffff]"
>
<div class="ml-[31px] mt-[18px]">
<div class="h-[80px] w-[238px]">
<div class="text-[20px] font-semibold leading-[27px]">數字人生成</div>
<div class="mt-[10px] text-[14px] font-normal">2D、3D數字人,一句話生成視頻</div>
</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]"
>
<span>立即創作</span>
</div>
</div>
<div class="ml-[15px] mr-[15px] mt-[75px]">
<img src="@/assets/videoSlide.png" alt="數字人生成" />
</div>
</div>
<div class="border-1 ml-[20px] h-[173px] w-[325px] rounded-[20px] bg-[#ffffff] text-[14px]">
<div>
<div class="flex text-[16px]">
<div class="ml-[20px] mt-[16px] h-[56px] w-[56px] overflow-hidden rounded-full">
<n-avatar
round
:size="56"
src="https://mkp-dev.oss-cn-shenzhen.aliyuncs.com/game-template/20230103/1672717001352.png"
/>
</div>
<div class="ml-[14px] mt-[26px]">廣州超聯軟件</div>
</div>
<div class="mt-[25px] flex">
<div class="mr-[50px]">
<div class="ml-[70px] text-[16px] text-[#101010]">12</div>
<div class="ml-[72px] mt-[6px]">創作</div>
</div>
<div class="h-[45px] w-[1px] bg-[#BBBBBB]"></div>
<div class="flex">
<div class="ml-[56px]">
<div class="text-[16px] text-[#101010]">940</div>
<div class="mt-[6px]">餘額</div>
</div>
<div class="ml-[15px] h-[24px] cursor-pointer leading-[24px] text-[#036CFD]">充值</div>
<div class="mt-[5px] cursor-pointer">
<Right theme="outline" size="15" fill="#036CFD" />
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts"></script> <script setup lang="ts">
import { Right } from '@icon-park/vue-next'
</script>
<template> <template>
<div class="rounded-[16px] bg-white px-[24px] pb-[16px] pt-[24px]"> <div class="rounded-[16px] bg-white px-[24px] pb-[16px] pt-[24px]">
...@@ -6,7 +8,7 @@ ...@@ -6,7 +8,7 @@
最近創作 最近創作
<div class="flex h-[22px] cursor-pointer items-center text-[14px] text-[#5b647a]"> <div class="flex h-[22px] cursor-pointer items-center text-[14px] text-[#5b647a]">
<div class="">查看全部</div> <div class="">查看全部</div>
<CustomIcon class="h-[16px] w-[16px]" icon="ic:sharp-keyboard-arrow-right"></CustomIcon> <Right theme="outline" size="16" fill="#5b647a" />
</div> </div>
</div> </div>
<div class="flex flex-wrap justify-between"> <div class="flex flex-wrap justify-between">
......
<script setup lang="ts"> <script setup lang="ts">
import { computed, ref } from 'vue' import { computed, ref } from 'vue'
import TemplatePreview from './template-preview.vue' import TemplatePreviewModal from './template-preview-modal.vue'
import { useInfiniteScroll } from '@vueuse/core' import { useInfiniteScroll } from '@vueuse/core'
import { templateData } from '../templateData.ts'
const PreviewModalVisible = ref(false) const PreviewModalVisible = ref(false)
const selectedImageUrl = ref('') const selectedTemplate = ref({
const checkedValue = ref('Trending') imageUrl: '',
const loading = ref(false) videoUrl: '',
const itemsToShow = ref(30) })
const el = ref<HTMLElement | null>(null) const checkedClassifyValue = ref('Trending')
const loadingMoreTemplate = ref(false)
const templatePageSize = ref(30)
const isHoverTemplate = ref<{ [key: string]: boolean }>({})
const templateBottomEl = ref<HTMLElement | null>(null)
const templateClassify = [ const templateClassify = [
{ value: 'Trending', label: '热门' }, { value: 'Trending', label: '熱門' },
{ {
value: 'Shakermaker', value: 'Shakermaker',
label: '产品营销', label: '産品營銷',
}, },
{ {
value: 'NewsInformatio', value: 'NewsInformatio',
label: '新闻资讯', label: '新聞資訊',
}, },
{ {
value: 'BusinessCard', value: 'BusinessCard',
...@@ -26,500 +30,63 @@ const templateClassify = [ ...@@ -26,500 +30,63 @@ const templateClassify = [
}, },
{ {
value: 'Health', value: 'Health',
label: '医疗健康', label: '醫療健康',
}, },
{ {
value: 'Education', value: 'Education',
label: '教育培', label: '教育培',
}, },
{ {
value: 'Invite', value: 'Invite',
label: '邀函', label: '邀函',
}, },
] ]
const templateData = ref([ const templateList = ref(templateData)
{
id: 1,
templateType: 'Trending',
imageUrl:
'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/a975c86f-cb3c-4cec-9bcc-4bb6453143cf/%E7%81%BF%E7%83%82%E7%83%9F%E7%81%AB-%E6%A8%AA%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
},
{
id: 2,
templateType: 'Trending',
imageUrl:
'https://meta-human-editor-prd.cdn.bcebos.com/2024-04-17T16:53:29.223639/sd-qdmv5bsghiyx1xb9z_1713344008761.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
},
{
id: 3,
templateType: 'Trending',
imageUrl:
'https://meta-human-editor-test.cdn.bcebos.com/2023-12-07T16:26:20.884065/sd-pmdxs1aaa7r199jxz_1701937580447.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
},
{
id: 4,
templateType: 'Trending',
imageUrl:
'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/f05deda3-e703-451c-b53c-c27c76a5e009/%E7%81%BF%E7%83%82%E7%83%9F%E7%81%AB-%E7%AB%96%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
},
{
id: 5,
templateType: 'Trending',
imageUrl:
'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/2610e9c0-8300-4573-9666-2e373bace355/%E5%A4%A7%E6%A9%98%E5%A4%A7%E5%88%A9-%E7%AB%96%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
},
{
id: 6,
templateType: 'Trending',
imageUrl:
'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/20bdd8ff-14cd-47be-b77e-9d16296e33cc/%E7%82%AB%E5%BD%A9%E8%88%9E%E9%BE%99-%E6%A8%AA%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
},
{
id: 7,
templateType: 'Trending',
imageUrl:
'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/2610e9c0-8300-4573-9666-2e373bace355/%E5%A4%A7%E6%A9%98%E5%A4%A7%E5%88%A9-%E7%AB%96%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
},
{
id: 8,
templateType: 'Trending',
imageUrl:
'https://meta-human-editor-test.cdn.bcebos.com/2023-12-07T16:26:20.884065/sd-pmdxs1aaa7r199jxz_1701937580447.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
},
{
id: 9,
templateType: 'Trending',
imageUrl:
'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/a975c86f-cb3c-4cec-9bcc-4bb6453143cf/%E7%81%BF%E7%83%82%E7%83%9F%E7%81%AB-%E6%A8%AA%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
},
{
id: 10,
templateType: 'Shakermaker',
imageUrl:
'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/20bdd8ff-14cd-47be-b77e-9d16296e33cc/%E7%82%AB%E5%BD%A9%E8%88%9E%E9%BE%99-%E6%A8%AA%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
},
{
id: 11,
templateType: 'Shakermaker',
imageUrl:
'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/a975c86f-cb3c-4cec-9bcc-4bb6453143cf/%E7%81%BF%E7%83%82%E7%83%9F%E7%81%AB-%E6%A8%AA%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
},
{
id: 12,
templateType: 'Shakermaker',
imageUrl:
'https://meta-human-editor-prd.cdn.bcebos.com/2024-04-17T16:53:29.223639/sd-qdmv5bsghiyx1xb9z_1713344008761.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
},
{
id: 13,
templateType: 'Shakermaker',
imageUrl:
'https://meta-human-editor-test.cdn.bcebos.com/2023-12-07T16:26:20.884065/sd-pmdxs1aaa7r199jxz_1701937580447.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
},
{
id: 14,
templateType: 'Shakermaker',
imageUrl:
'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/f05deda3-e703-451c-b53c-c27c76a5e009/%E7%81%BF%E7%83%82%E7%83%9F%E7%81%AB-%E7%AB%96%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
},
{
id: 15,
templateType: 'NewsInformatio',
imageUrl:
'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/2610e9c0-8300-4573-9666-2e373bace355/%E5%A4%A7%E6%A9%98%E5%A4%A7%E5%88%A9-%E7%AB%96%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
},
{
id: 16,
templateType: 'NewsInformatio',
imageUrl:
'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/20bdd8ff-14cd-47be-b77e-9d16296e33cc/%E7%82%AB%E5%BD%A9%E8%88%9E%E9%BE%99-%E6%A8%AA%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
},
{
id: 17,
templateType: 'NewsInformatio',
imageUrl:
'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/2610e9c0-8300-4573-9666-2e373bace355/%E5%A4%A7%E6%A9%98%E5%A4%A7%E5%88%A9-%E7%AB%96%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
},
{
id: 18,
templateType: 'NewsInformatio',
imageUrl:
'https://meta-human-editor-test.cdn.bcebos.com/2023-12-07T16:26:20.884065/sd-pmdxs1aaa7r199jxz_1701937580447.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
},
{
id: 19,
templateType: 'NewsInformatio',
imageUrl:
'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/a975c86f-cb3c-4cec-9bcc-4bb6453143cf/%E7%81%BF%E7%83%82%E7%83%9F%E7%81%AB-%E6%A8%AA%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
},
{
id: 20,
templateType: 'NewsInformatio',
imageUrl:
'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/20bdd8ff-14cd-47be-b77e-9d16296e33cc/%E7%82%AB%E5%BD%A9%E8%88%9E%E9%BE%99-%E6%A8%AA%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
},
{
id: 21,
templateType: 'NewsInformatio',
imageUrl:
'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/a975c86f-cb3c-4cec-9bcc-4bb6453143cf/%E7%81%BF%E7%83%82%E7%83%9F%E7%81%AB-%E6%A8%AA%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
},
{
id: 22,
templateType: 'NewsInformatio',
imageUrl:
'https://meta-human-editor-prd.cdn.bcebos.com/2024-04-17T16:53:29.223639/sd-qdmv5bsghiyx1xb9z_1713344008761.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
},
{
id: 23,
templateType: 'NewsInformatio',
imageUrl:
'https://meta-human-editor-test.cdn.bcebos.com/2023-12-07T16:26:20.884065/sd-pmdxs1aaa7r199jxz_1701937580447.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
},
{
id: 24,
templateType: 'NewsInformatio',
imageUrl:
'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/f05deda3-e703-451c-b53c-c27c76a5e009/%E7%81%BF%E7%83%82%E7%83%9F%E7%81%AB-%E7%AB%96%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
},
{
id: 25,
templateType: 'BusinessCard',
imageUrl:
'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/2610e9c0-8300-4573-9666-2e373bace355/%E5%A4%A7%E6%A9%98%E5%A4%A7%E5%88%A9-%E7%AB%96%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
},
{
id: 26,
templateType: 'BusinessCard',
imageUrl:
'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/20bdd8ff-14cd-47be-b77e-9d16296e33cc/%E7%82%AB%E5%BD%A9%E8%88%9E%E9%BE%99-%E6%A8%AA%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
},
{
id: 27,
templateType: 'BusinessCard',
imageUrl:
'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/2610e9c0-8300-4573-9666-2e373bace355/%E5%A4%A7%E6%A9%98%E5%A4%A7%E5%88%A9-%E7%AB%96%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
},
{
id: 28,
templateType: 'BusinessCard',
imageUrl:
'https://meta-human-editor-test.cdn.bcebos.com/2023-12-07T16:26:20.884065/sd-pmdxs1aaa7r199jxz_1701937580447.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
},
{
id: 29,
templateType: 'BusinessCard',
imageUrl:
'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/a975c86f-cb3c-4cec-9bcc-4bb6453143cf/%E7%81%BF%E7%83%82%E7%83%9F%E7%81%AB-%E6%A8%AA%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
},
{
id: 30,
templateType: 'Health',
imageUrl:
'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/20bdd8ff-14cd-47be-b77e-9d16296e33cc/%E7%82%AB%E5%BD%A9%E8%88%9E%E9%BE%99-%E6%A8%AA%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
},
{
id: 31,
templateType: 'Health',
imageUrl:
'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/20bdd8ff-14cd-47be-b77e-9d16296e33cc/%E7%82%AB%E5%BD%A9%E8%88%9E%E9%BE%99-%E6%A8%AA%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
},
{
id: 32,
templateType: 'Health',
imageUrl:
'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/a975c86f-cb3c-4cec-9bcc-4bb6453143cf/%E7%81%BF%E7%83%82%E7%83%9F%E7%81%AB-%E6%A8%AA%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
},
{
id: 33,
templateType: 'Health',
imageUrl:
'https://meta-human-editor-prd.cdn.bcebos.com/2024-04-17T16:53:29.223639/sd-qdmv5bsghiyx1xb9z_1713344008761.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
},
{
id: 34,
templateType: 'Education',
imageUrl:
'https://meta-human-editor-test.cdn.bcebos.com/2023-12-07T16:26:20.884065/sd-pmdxs1aaa7r199jxz_1701937580447.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
},
{
id: 35,
templateType: 'Education',
imageUrl:
'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/f05deda3-e703-451c-b53c-c27c76a5e009/%E7%81%BF%E7%83%82%E7%83%9F%E7%81%AB-%E7%AB%96%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
},
{
id: 36,
templateType: 'Education',
imageUrl:
'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/2610e9c0-8300-4573-9666-2e373bace355/%E5%A4%A7%E6%A9%98%E5%A4%A7%E5%88%A9-%E7%AB%96%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
},
{
id: 37,
templateType: 'Education',
imageUrl:
'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/20bdd8ff-14cd-47be-b77e-9d16296e33cc/%E7%82%AB%E5%BD%A9%E8%88%9E%E9%BE%99-%E6%A8%AA%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
},
{
id: 38,
templateType: 'Invite',
imageUrl:
'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/2610e9c0-8300-4573-9666-2e373bace355/%E5%A4%A7%E6%A9%98%E5%A4%A7%E5%88%A9-%E7%AB%96%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
},
{
id: 39,
templateType: 'Invite',
imageUrl:
'https://meta-human-editor-test.cdn.bcebos.com/2023-12-07T16:26:20.884065/sd-pmdxs1aaa7r199jxz_1701937580447.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
},
{
id: 40,
templateType: 'Invite',
imageUrl:
'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/a975c86f-cb3c-4cec-9bcc-4bb6453143cf/%E7%81%BF%E7%83%82%E7%83%9F%E7%81%AB-%E6%A8%AA%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
},
{
id: 41,
templateType: 'Invite',
imageUrl:
'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/20bdd8ff-14cd-47be-b77e-9d16296e33cc/%E7%82%AB%E5%BD%A9%E8%88%9E%E9%BE%99-%E6%A8%AA%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
},
{
id: 42,
templateType: 'Trending',
imageUrl:
'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/20bdd8ff-14cd-47be-b77e-9d16296e33cc/%E7%82%AB%E5%BD%A9%E8%88%9E%E9%BE%99-%E6%A8%AA%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
},
{
id: 43,
templateType: 'Trending',
imageUrl:
'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/20bdd8ff-14cd-47be-b77e-9d16296e33cc/%E7%82%AB%E5%BD%A9%E8%88%9E%E9%BE%99-%E6%A8%AA%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
},
{
id: 44,
templateType: 'Trending',
imageUrl:
'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/a975c86f-cb3c-4cec-9bcc-4bb6453143cf/%E7%81%BF%E7%83%82%E7%83%9F%E7%81%AB-%E6%A8%AA%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
},
{
id: 45,
templateType: 'Trending',
imageUrl:
'https://meta-human-editor-prd.cdn.bcebos.com/2024-04-17T16:53:29.223639/sd-qdmv5bsghiyx1xb9z_1713344008761.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
},
{
id: 46,
templateType: 'Trending',
imageUrl:
'https://meta-human-editor-test.cdn.bcebos.com/2023-12-07T16:26:20.884065/sd-pmdxs1aaa7r199jxz_1701937580447.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
},
{
id: 47,
templateType: 'Trending',
imageUrl:
'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/f05deda3-e703-451c-b53c-c27c76a5e009/%E7%81%BF%E7%83%82%E7%83%9F%E7%81%AB-%E7%AB%96%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
},
{
id: 48,
templateType: 'Trending',
imageUrl:
'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/2610e9c0-8300-4573-9666-2e373bace355/%E5%A4%A7%E6%A9%98%E5%A4%A7%E5%88%A9-%E7%AB%96%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
},
{
id: 49,
templateType: 'Trending',
imageUrl:
'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/20bdd8ff-14cd-47be-b77e-9d16296e33cc/%E7%82%AB%E5%BD%A9%E8%88%9E%E9%BE%99-%E6%A8%AA%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
},
{
id: 50,
templateType: 'Trending',
imageUrl:
'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/2610e9c0-8300-4573-9666-2e373bace355/%E5%A4%A7%E6%A9%98%E5%A4%A7%E5%88%A9-%E7%AB%96%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
},
{
id: 51,
templateType: 'Trending',
imageUrl:
'https://meta-human-editor-test.cdn.bcebos.com/2023-12-07T16:26:20.884065/sd-pmdxs1aaa7r199jxz_1701937580447.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
},
{
id: 52,
templateType: 'Trending',
imageUrl:
'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/a975c86f-cb3c-4cec-9bcc-4bb6453143cf/%E7%81%BF%E7%83%82%E7%83%9F%E7%81%AB-%E6%A8%AA%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
},
{
id: 53,
templateType: 'Trending',
imageUrl:
'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/20bdd8ff-14cd-47be-b77e-9d16296e33cc/%E7%82%AB%E5%BD%A9%E8%88%9E%E9%BE%99-%E6%A8%AA%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
},
{
id: 54,
templateType: 'Trending',
imageUrl:
'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/a975c86f-cb3c-4cec-9bcc-4bb6453143cf/%E7%81%BF%E7%83%82%E7%83%9F%E7%81%AB-%E6%A8%AA%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
},
{
id: 55,
templateType: 'Trending',
imageUrl:
'https://meta-human-editor-prd.cdn.bcebos.com/2024-04-17T16:53:29.223639/sd-qdmv5bsghiyx1xb9z_1713344008761.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
},
{
id: 56,
templateType: 'Trending',
imageUrl:
'https://meta-human-editor-test.cdn.bcebos.com/2023-12-07T16:26:20.884065/sd-pmdxs1aaa7r199jxz_1701937580447.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
},
{
id: 57,
templateType: 'Trending',
imageUrl:
'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/f05deda3-e703-451c-b53c-c27c76a5e009/%E7%81%BF%E7%83%82%E7%83%9F%E7%81%AB-%E7%AB%96%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
},
{
id: 58,
templateType: 'Trending',
imageUrl:
'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/2610e9c0-8300-4573-9666-2e373bace355/%E5%A4%A7%E6%A9%98%E5%A4%A7%E5%88%A9-%E7%AB%96%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
},
{
id: 59,
templateType: 'Trending',
imageUrl:
'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/20bdd8ff-14cd-47be-b77e-9d16296e33cc/%E7%82%AB%E5%BD%A9%E8%88%9E%E9%BE%99-%E6%A8%AA%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
},
{
id: 60,
templateType: 'Trending',
imageUrl:
'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/2610e9c0-8300-4573-9666-2e373bace355/%E5%A4%A7%E6%A9%98%E5%A4%A7%E5%88%A9-%E7%AB%96%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
},
{
id: 61,
templateType: 'Trending',
imageUrl:
'https://meta-human-editor-test.cdn.bcebos.com/2023-12-07T16:26:20.884065/sd-pmdxs1aaa7r199jxz_1701937580447.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
},
{
id: 62,
templateType: 'Trending',
imageUrl:
'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/a975c86f-cb3c-4cec-9bcc-4bb6453143cf/%E7%81%BF%E7%83%82%E7%83%9F%E7%81%AB-%E6%A8%AA%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
},
{
id: 63,
templateType: 'Trending',
imageUrl:
'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/20bdd8ff-14cd-47be-b77e-9d16296e33cc/%E7%82%AB%E5%BD%A9%E8%88%9E%E9%BE%99-%E6%A8%AA%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
},
{
id: 64,
templateType: 'Trending',
imageUrl:
'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/a975c86f-cb3c-4cec-9bcc-4bb6453143cf/%E7%81%BF%E7%83%82%E7%83%9F%E7%81%AB-%E6%A8%AA%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
},
{
id: 65,
templateType: 'Trending',
imageUrl:
'https://meta-human-editor-prd.cdn.bcebos.com/2024-04-17T16:53:29.223639/sd-qdmv5bsghiyx1xb9z_1713344008761.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
},
{
id: 66,
templateType: 'Trending',
imageUrl:
'https://meta-human-editor-test.cdn.bcebos.com/2023-12-07T16:26:20.884065/sd-pmdxs1aaa7r199jxz_1701937580447.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
},
{
id: 67,
templateType: 'Trending',
imageUrl:
'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/f05deda3-e703-451c-b53c-c27c76a5e009/%E7%81%BF%E7%83%82%E7%83%9F%E7%81%AB-%E7%AB%96%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
},
{
id: 68,
templateType: 'Trending',
imageUrl:
'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/2610e9c0-8300-4573-9666-2e373bace355/%E5%A4%A7%E6%A9%98%E5%A4%A7%E5%88%A9-%E7%AB%96%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
},
{
id: 69,
templateType: 'Trending',
imageUrl:
'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/20bdd8ff-14cd-47be-b77e-9d16296e33cc/%E7%82%AB%E5%BD%A9%E8%88%9E%E9%BE%99-%E6%A8%AA%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
},
{
id: 70,
templateType: 'Trending',
imageUrl:
'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/2610e9c0-8300-4573-9666-2e373bace355/%E5%A4%A7%E6%A9%98%E5%A4%A7%E5%88%A9-%E7%AB%96%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
},
{
id: 71,
templateType: 'Trending',
imageUrl:
'https://meta-human-editor-test.cdn.bcebos.com/2023-12-07T16:26:20.884065/sd-pmdxs1aaa7r199jxz_1701937580447.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
},
{
id: 72,
templateType: 'Trending',
imageUrl:
'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/a975c86f-cb3c-4cec-9bcc-4bb6453143cf/%E7%81%BF%E7%83%82%E7%83%9F%E7%81%AB-%E6%A8%AA%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
},
{
id: 73,
templateType: 'Trending',
imageUrl:
'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/20bdd8ff-14cd-47be-b77e-9d16296e33cc/%E7%82%AB%E5%BD%A9%E8%88%9E%E9%BE%99-%E6%A8%AA%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
},
])
const filteredTemplateData = computed(() => { const filteredTemplateData = computed(() => {
if (!checkedValue.value) { if (!checkedClassifyValue.value) {
return templateData.value return templateList.value
} }
return templateData.value.filter((item) => item.templateType === checkedValue.value) return templateList.value.filter((item: { templateType: string }) => item.templateType === checkedClassifyValue.value)
}) })
const displayedData = computed(() => { const displayedData = computed(() => {
return filteredTemplateData.value.slice(0, itemsToShow.value) return filteredTemplateData.value.slice(0, templatePageSize.value)
}) })
const canLoadMore = computed(() => { const canLoadMore = computed(() => {
return itemsToShow.value < filteredTemplateData.value.length return templatePageSize.value < filteredTemplateData.value.length
}) })
useInfiniteScroll( useInfiniteScroll(
el, templateBottomEl,
() => { () => {
if (!canLoadMore.value) return if (!canLoadMore.value) return
loading.value = true loadingMoreTemplate.value = true
if (canLoadMore.value) { if (canLoadMore.value) {
setTimeout(() => { setTimeout(() => {
itemsToShow.value += 10 templatePageSize.value += 10
}, 1000) }, 1000)
} }
loading.value = false loadingMoreTemplate.value = false
}, },
{ distance: 10 }, { distance: 10 },
) )
function handleOpenModal(imageUrl: string) { function handleOpenModal(template: typeof selectedTemplate.value) {
selectedImageUrl.value = imageUrl selectedTemplate.value = { ...template }
PreviewModalVisible.value = true PreviewModalVisible.value = true
} }
</script> </script>
<template> <template>
<div class="mt-[16px] h-full min-w-[1160px] overscroll-none rounded-[16px] bg-white px-[24px] pb-[16px]"> <div
class="mt-[16px] h-full min-h-[980px] min-w-[1160px] overscroll-none rounded-[16px] bg-white px-[24px] pb-[16px]"
>
<div class="sticky top-0 z-10 bg-white pt-[24px]"> <div class="sticky top-0 z-10 bg-white pt-[24px]">
<div class="mb-[24px] cursor-default text-[18px] text-[#000]">荐模板</div> <div class="mb-[24px] cursor-default text-[18px] text-[#000]">薦模闆</div>
<div class="pb-[16px]"> <div class="pb-[16px]">
<n-radio-group v-model:value="checkedValue"> <n-radio-group v-model:value="checkedClassifyValue">
<n-radio-button <n-radio-button
v-for="classify in templateClassify" v-for="classify in templateClassify"
:key="classify.value" :key="classify.value"
...@@ -532,14 +99,31 @@ function handleOpenModal(imageUrl: string) { ...@@ -532,14 +99,31 @@ function handleOpenModal(imageUrl: string) {
</div> </div>
<div class="columns-6 gap-5"> <div class="columns-6 gap-5">
<n-card v-for="item in displayedData" :key="item.id" class="relative mb-[20px] w-full"> <n-card
v-for="item in displayedData"
:key="item.id"
class="mb-[20px] w-[170px] overflow-hidden"
@mouseenter="isHoverTemplate[item.id] = true"
@mouseleave="isHoverTemplate[item.id] = false"
>
<template #cover> <template #cover>
<div class="relative flex items-center justify-center bg-[#f0f0f0]"> <div class="relative flex items-center justify-center bg-[#f0f0f0]">
<img <img
v-if="!isHoverTemplate[item.id]"
:src="item.imageUrl" :src="item.imageUrl"
class="hover:scale-104 inset-0 h-full w-full cursor-pointer object-cover transition-transform duration-300 ease-in-out" class="hover:scale-104 inset-0 w-full cursor-pointer object-cover transition-transform duration-300 ease-in-out"
@click="handleOpenModal(item.imageUrl)" @click="handleOpenModal(item)"
/> />
<video
v-else
:src="item.videoUrl"
class="hover:scale-104 inset-0 w-full cursor-pointer object-cover transition-transform duration-300 ease-in-out"
autoplay
muted
:poster="item.imageUrl"
@click="handleOpenModal(item)"
></video>
<div <div
class="overlay pointer-events-none absolute hidden h-full w-full cursor-pointer bg-[#000000]/[.1]" class="overlay pointer-events-none absolute hidden h-full w-full cursor-pointer bg-[#000000]/[.1]"
></div> ></div>
...@@ -551,7 +135,7 @@ function handleOpenModal(imageUrl: string) { ...@@ -551,7 +135,7 @@ function handleOpenModal(imageUrl: string) {
</div> </div>
</template> </template>
</n-card> </n-card>
<div ref="el" class="h-[50px]"></div> <div ref="templateBottomEl" class="h-[50px]"></div>
</div> </div>
<div v-if="!canLoadMore" class="mt-[80px] flex justify-center text-center text-[14px] text-[#a9b4cc]"> <div v-if="!canLoadMore" class="mt-[80px] flex justify-center text-center text-[14px] text-[#a9b4cc]">
<div class="relative top-[10px] h-[1px] w-[14px] bg-[#a9b4cc]"></div> <div class="relative top-[10px] h-[1px] w-[14px] bg-[#a9b4cc]"></div>
...@@ -559,7 +143,7 @@ function handleOpenModal(imageUrl: string) { ...@@ -559,7 +143,7 @@ function handleOpenModal(imageUrl: string) {
<div class="relative top-[10px] h-[1px] w-[14px] bg-[#a9b4cc]"></div> <div class="relative top-[10px] h-[1px] w-[14px] bg-[#a9b4cc]"></div>
</div> </div>
<TemplatePreview v-model="PreviewModalVisible" :image-url="selectedImageUrl" /> <TemplatePreviewModal v-model="PreviewModalVisible" :selected-template="selectedTemplate" />
</div> </div>
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
...@@ -590,11 +174,11 @@ function handleOpenModal(imageUrl: string) { ...@@ -590,11 +174,11 @@ function handleOpenModal(imageUrl: string) {
border-radius: 15px !important; border-radius: 15px !important;
&:first-child { &:first-child {
border-left: 1px solid #fff !important; border-left: none !important;
} }
&:last-child { &:last-child {
border-right: 1px solid #fff !important; border-right: none !important;
} }
&.n-radio-button--checked { &.n-radio-button--checked {
......
<script setup lang="ts"> <script setup lang="ts">
const visible = defineModel<boolean>() import { Close } from '@icon-park/vue-next'
const PreviewModalVisible = defineModel<boolean>()
const props = defineProps<{ const props = defineProps<{
imageUrl: string selectedTemplate: { imageUrl: string; videoUrl: string }
}>() }>()
function handleClose() { function handleClose() {
visible.value = false PreviewModalVisible.value = false
} }
</script> </script>
<template> <template>
<n-modal v-model:show="visible"> <n-modal v-model:show="PreviewModalVisible">
<div class="flex flex-col items-center justify-center"> <div class="flex flex-col items-center justify-center">
<div class="h-[603px] w-[800px] rounded-lg bg-white"> <div class="h-[603px] w-[800px] rounded-lg bg-white">
<div class="flex justify-between px-[24px] pt-[24px] text-[16px]"> <div class="flex justify-between px-[24px] pt-[24px] text-[16px]">
<span>企业宣传</span> <span>企業宣傳</span>
<CustomIcon <Close theme="outline" size="18" fill="#00000073" class="cursor-pointer" @click="handleClose" />
class="h-[20px] w-[20px] cursor-pointer text-[#000000]/[0.45]"
icon="ic:sharp-close"
@click="handleClose"
></CustomIcon>
</div> </div>
<div class="px-[24px] pb-[24px] pt-[16px]"> <div class="px-[24px] pb-[24px] pt-[16px]">
<div class="flex justify-center rounded-[16px] bg-[#f3f4fb]"> <div class="flex justify-center rounded-[16px] bg-[#f3f4fb]">
<div class="relative flex h-[448px] w-[752px] items-center justify-center rounded-[16px] bg-[#f3f4fb]"> <div class="relative flex h-[448px] w-[752px] items-center justify-center rounded-[16px] bg-[#f3f4fb]">
<img <video
:src="props.imageUrl" :src="props.selectedTemplate.videoUrl"
class="absolute inset-0 aspect-[1] h-[448px] w-[752px] cursor-pointer object-contain transition-transform duration-300 ease-in-out" :poster="props.selectedTemplate.imageUrl"
/> class="h-[448px] w-[752px]"
autoplay
controls
></video>
</div> </div>
</div> </div>
<div class="mt-[24px] flex justify-end"> <div class="mt-[24px] flex justify-end">
<button <button
class="!mr-[12px] box-content !h-[38px] !w-[74px] rounded-[6px] border-[1px] border-solid border-[#dde3f0] px-[10px] outline-none hover:border-[#2468f2] hover:text-[#2468f2]" class="!mr-[12px] box-content !h-[38px] !w-[74px] cursor-pointer rounded-[6px] border-[1px] border-solid border-[#dde3f0] px-[10px] outline-none transition-all duration-300 hover:border-[#2468f2] hover:text-[#2468f2]"
@click="handleClose" @click="handleClose"
> >
取消 取消
</button> </button>
<button <button
class="same-btn !box-content !h-[38px] !w-[74px] rounded-[6px] border-[1px] border-solid border-[#dde3f0] bg-gradient-to-r from-[#30b5f2] to-[#2468f2] px-[10px] text-[#ffffff]" class="!box-content !h-[38px] !w-[74px] cursor-pointer rounded-[6px] border-[1px] border-solid border-[#dde3f0] bg-gradient-to-r from-[#30b5f2] to-[#2468f2] px-[10px] text-[#ffffff] transition-all duration-300 hover:from-[#30b5f2] hover:to-[#528eff]"
> >
做同款 做同款
</button> </button>
......
<script setup lang="ts"> <script setup lang="ts">
import Layout from './layout/index.vue' import BigitalPersonCreation from './components/bigitalPerson-creation.vue'
import RecentCreation from './components/recent-creation.vue'
import RecommendTemplate from './components/recommend-template.vue'
</script> </script>
<template> <template>
<Layout /> <BigitalPersonCreation />
<RecentCreation />
<RecommendTemplate />
</template> </template>
<script setup lang="ts"></script>
<template>
<header class="flex h-[56px] justify-between">
<div class="font-600 flex items-center pl-4 text-xl">萃想智能云创</div>
<div class="flex items-center pr-4">
<div class="mx-6">
<n-button class="!rounded-[6px]" color="#ffecd4" text-color="#151b26">
<template #icon><CustomIcon class="text-lg" icon="mingcute:pig-money-line" /></template>
<span class="text-[14px]">充值</span>
</n-button>
</div>
<n-avatar
class="cursor-pointer"
round
size="small"
object-fit="cover"
src="https://mkp-dev.oss-cn-shenzhen.aliyuncs.com/game-template/20230103/1672717001352.png"
/>
</div>
</header>
</template>
<script setup lang="ts">
import RecentCreation from '../components/recent-creation.vue'
import RecommendTemplate from '../components/recommend-template.vue'
</script>
<template>
<main>
<RecentCreation />
<RecommendTemplate />
</main>
</template>
export const templateData = [
{
id: 1,
templateType: 'Trending',
imageUrl:
'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/a975c86f-cb3c-4cec-9bcc-4bb6453143cf/%E7%81%BF%E7%83%82%E7%83%9F%E7%81%AB-%E6%A8%AA%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
videoUrl:
'https://meta-human-editor-test.cdn.bcebos.com/cea9a767-e17f-4cea-b160-152d0374bb26/e571a3ab-16c9-47a9-b26f-379637016aee/%E7%81%BF%E7%83%82%E7%83%9F%E7%81%AB-%E6%A8%AA%E7%89%883.mp4',
},
{
id: 2,
templateType: 'Trending',
imageUrl:
'https://meta-human-editor-prd.cdn.bcebos.com/2024-04-17T16:53:29.223639/sd-qdmv5bsghiyx1xb9z_1713344008761.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
videoUrl:
'https://meta-human-editor-test.cdn.bcebos.com/dac107cac20e479db66a7824903597a0/e93217f7-5f3d-4714-9dcf-15bc9d9e188c/%E5%8C%BB%E7%96%971-2.mp4',
},
{
id: 3,
templateType: 'Trending',
imageUrl:
'https://meta-human-editor-prd.cdn.bcebos.com/2024-04-17T17:19:00.569068/sd-qdpsxhut0f26n9j0u_1713345540103.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
videoUrl:
'https://meta-human-editor-test.cdn.bcebos.com/dac107cac20e479db66a7824903597a0/eb497bd4-2cdf-417a-8f64-6f5473686514/%E5%8C%BB%E7%96%973-2.mp4',
},
{
id: 4,
templateType: 'Trending',
imageUrl:
'https://meta-human-editor-prd.cdn.bcebos.com/2024-03-26T18:48:42.563011/sd-qcxmghd4uzgv76c37_1711450122138.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
videoUrl:
'https://meta-human-editor-test.cdn.bcebos.com/a656784a-06f2-43c6-8bd5-b728351dfc6c/e9fe8ee2-afe9-4721-b8b5-c052427604ee/%E7%AB%96%E7%89%88-%E6%98%A5%E6%97%A5%E5%92%8C%E9%A3%8E-1848.mp4',
},
{
id: 5,
templateType: 'Trending',
imageUrl:
'https://meta-human-editor-prd.cdn.bcebos.com/2024-04-17T17:28:05.392432/sd-qdpsq815b5hv4txda_1713346084825.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
videoUrl:
'https://meta-human-editor-test.cdn.bcebos.com/dac107cac20e479db66a7824903597a0/0c16cea8-38cd-4a09-9690-2501ec95207f/%E6%95%99%E8%82%B22-2.mp4',
},
{
id: 6,
templateType: 'Trending',
imageUrl:
'https://meta-human-editor-test.cdn.bcebos.com/2023-11-30T17:31:49.039103/sd-pk4qin0yjf6s044tp_1701336704352.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
videoUrl:
'https://meta-human-editor-test.cdn.bcebos.com/23de158d-0571-4d28-98f7-3d45c0877f14/3cbffb6d-ad05-4525-a87a-f879d2f84f66/%E6%96%B0%E9%97%BB%E8%B5%84%E8%AE%AF1%3A1%E6%9C%BA%E4%BD%8Dh.mp4',
},
{
id: 7,
templateType: 'Trending',
imageUrl:
'https://meta-human-editor-test.cdn.bcebos.com/2023-11-30T17:25:25.255057/sd-pk4kf0wfs7wjz66m5_1701336320817.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
videoUrl:
'https://meta-human-editor-test.cdn.bcebos.com/23de158d-0571-4d28-98f7-3d45c0877f14/ac72d0c1-6dcf-4579-9c84-e829eaeac87e/%E8%A7%86%E9%A2%91%E4%BF%9D%E5%8D%951%EF%BC%9A1%E6%9C%BA%E4%BD%8Dh.mp4',
},
{
id: 8,
templateType: 'Trending',
imageUrl:
'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/a975c86f-cb3c-4cec-9bcc-4bb6453143cf/%E7%81%BF%E7%83%82%E7%83%9F%E7%81%AB-%E6%A8%AA%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
videoUrl:
'https://meta-human-editor-test.cdn.bcebos.com/cea9a767-e17f-4cea-b160-152d0374bb26/e571a3ab-16c9-47a9-b26f-379637016aee/%E7%81%BF%E7%83%82%E7%83%9F%E7%81%AB-%E6%A8%AA%E7%89%883.mp4',
},
{
id: 9,
templateType: 'Trending',
imageUrl:
'https://meta-human-editor-prd.cdn.bcebos.com/2024-04-17T17:19:00.569068/sd-qdpsxhut0f26n9j0u_1713345540103.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
videoUrl:
'https://meta-human-editor-test.cdn.bcebos.com/dac107cac20e479db66a7824903597a0/eb497bd4-2cdf-417a-8f64-6f5473686514/%E5%8C%BB%E7%96%973-2.mp4',
},
{
id: 10,
templateType: 'Trending',
imageUrl:
'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/a975c86f-cb3c-4cec-9bcc-4bb6453143cf/%E7%81%BF%E7%83%82%E7%83%9F%E7%81%AB-%E6%A8%AA%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
videoUrl:
'https://meta-human-editor-test.cdn.bcebos.com/cea9a767-e17f-4cea-b160-152d0374bb26/e571a3ab-16c9-47a9-b26f-379637016aee/%E7%81%BF%E7%83%82%E7%83%9F%E7%81%AB-%E6%A8%AA%E7%89%883.mp4',
},
{
id: 11,
templateType: 'Trending',
imageUrl:
'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/a975c86f-cb3c-4cec-9bcc-4bb6453143cf/%E7%81%BF%E7%83%82%E7%83%9F%E7%81%AB-%E6%A8%AA%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
videoUrl:
'https://meta-human-editor-test.cdn.bcebos.com/cea9a767-e17f-4cea-b160-152d0374bb26/e571a3ab-16c9-47a9-b26f-379637016aee/%E7%81%BF%E7%83%82%E7%83%9F%E7%81%AB-%E6%A8%AA%E7%89%883.mp4',
},
{
id: 12,
templateType: 'Shakermaker',
imageUrl:
'https://meta-human-editor-prd.cdn.bcebos.com/2024-04-17T16:53:29.223639/sd-qdmv5bsghiyx1xb9z_1713344008761.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
videoUrl:
'https://meta-human-editor-test.cdn.bcebos.com/dac107cac20e479db66a7824903597a0/e93217f7-5f3d-4714-9dcf-15bc9d9e188c/%E5%8C%BB%E7%96%971-2.mp4',
},
{
id: 13,
templateType: 'Shakermaker',
imageUrl:
'https://meta-human-editor-prd.cdn.bcebos.com/2024-04-17T17:19:00.569068/sd-qdpsxhut0f26n9j0u_1713345540103.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
videoUrl:
'https://meta-human-editor-test.cdn.bcebos.com/dac107cac20e479db66a7824903597a0/eb497bd4-2cdf-417a-8f64-6f5473686514/%E5%8C%BB%E7%96%973-2.mp4',
},
{
id: 14,
templateType: 'Shakermaker',
imageUrl:
'https://meta-human-editor-prd.cdn.bcebos.com/2024-03-26T18:48:42.563011/sd-qcxmghd4uzgv76c37_1711450122138.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
videoUrl:
'https://meta-human-editor-test.cdn.bcebos.com/a656784a-06f2-43c6-8bd5-b728351dfc6c/e9fe8ee2-afe9-4721-b8b5-c052427604ee/%E7%AB%96%E7%89%88-%E6%98%A5%E6%97%A5%E5%92%8C%E9%A3%8E-1848.mp4',
},
{
id: 15,
templateType: 'Shakermaker',
imageUrl:
'https://meta-human-editor-prd.cdn.bcebos.com/2024-04-17T17:28:05.392432/sd-qdpsq815b5hv4txda_1713346084825.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
videoUrl:
'https://meta-human-editor-test.cdn.bcebos.com/dac107cac20e479db66a7824903597a0/0c16cea8-38cd-4a09-9690-2501ec95207f/%E6%95%99%E8%82%B22-2.mp4',
},
{
id: 16,
templateType: 'Shakermaker',
imageUrl:
'https://meta-human-editor-test.cdn.bcebos.com/2023-11-30T17:25:25.255057/sd-pk4kf0wfs7wjz66m5_1701336320817.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
videoUrl:
'https://meta-human-editor-test.cdn.bcebos.com/23de158d-0571-4d28-98f7-3d45c0877f14/ac72d0c1-6dcf-4579-9c84-e829eaeac87e/%E8%A7%86%E9%A2%91%E4%BF%9D%E5%8D%951%EF%BC%9A1%E6%9C%BA%E4%BD%8Dh.mp4',
},
{
id: 17,
templateType: 'NewsInformatio',
imageUrl:
'https://meta-human-editor-test.cdn.bcebos.com/cea9a767-e17f-4cea-b160-152d0374bb26/ecf7e7e4-1a13-452b-b8a9-c8df672fc1aa/598a.jpg?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
videoUrl:
'https://meta-human-editor-test.cdn.bcebos.com/cea9a767-e17f-4cea-b160-152d0374bb26/80048694-e745-48b2-a67d-dc2cf594a755/%E8%8F%B1%E4%BA%91%E7%BA%B3%E7%A6%8F-%E6%A8%AA%E7%89%88.mp4',
},
{
id: 18,
templateType: 'NewsInformatio',
imageUrl:
'https://meta-human-editor-test.cdn.bcebos.com/cea9a767-e17f-4cea-b160-152d0374bb26/a38caa87-e777-4612-9084-7c4f9c5dcf02/e787c471.jpeg?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
videoUrl:
'https://meta-human-editor-test.cdn.bcebos.com/cea9a767-e17f-4cea-b160-152d0374bb26/4621bd4d-99e2-4cb4-8667-42b40994e1cc/%E6%AC%A2%E5%96%9C%E9%87%91%E9%BE%99-%E6%A8%AA%E7%89%881.mp4',
},
{
id: 19,
templateType: 'NewsInformatio',
imageUrl:
'https://meta-human-editor-test.cdn.bcebos.com/cea9a767-e17f-4cea-b160-152d0374bb26/a38caa87-e777-4612-9084-7c4f9c5dcf02/e787c471.jpeg?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
videoUrl:
'https://meta-human-editor-test.cdn.bcebos.com/cea9a767-e17f-4cea-b160-152d0374bb26/4621bd4d-99e2-4cb4-8667-42b40994e1cc/%E6%AC%A2%E5%96%9C%E9%87%91%E9%BE%99-%E6%A8%AA%E7%89%881.mp4',
},
{
id: 20,
templateType: 'NewsInformatio',
imageUrl:
'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/f7e73d16-79f9-455e-89a5-761c2cb24aff/%E7%81%B5%E5%8A%A8%E6%97%B6%E9%92%9F-%E7%AB%96%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
videoUrl:
'https://meta-human-editor-test.cdn.bcebos.com/cea9a767-e17f-4cea-b160-152d0374bb26/fffef1d5-4adc-44eb-bd2f-f5e71413c9ab/%E7%81%B5%E5%8A%A8%E6%97%B6%E9%92%9F-%E7%AB%96%E7%89%884.mp4',
},
{
id: 21,
templateType: 'BusinessCard',
imageUrl:
'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/f7e73d16-79f9-455e-89a5-761c2cb24aff/%E7%81%B5%E5%8A%A8%E6%97%B6%E9%92%9F-%E7%AB%96%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
videoUrl:
'https://meta-human-editor-test.cdn.bcebos.com/cea9a767-e17f-4cea-b160-152d0374bb26/fffef1d5-4adc-44eb-bd2f-f5e71413c9ab/%E7%81%B5%E5%8A%A8%E6%97%B6%E9%92%9F-%E7%AB%96%E7%89%884.mp4',
},
{
id: 22,
templateType: 'BusinessCard',
imageUrl:
'https://meta-human-editor-prd.cdn.bcebos.com/2024-04-17T16:53:29.223639/sd-qdmv5bsghiyx1xb9z_1713344008761.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
videoUrl:
'https://meta-human-editor-test.cdn.bcebos.com/dac107cac20e479db66a7824903597a0/e93217f7-5f3d-4714-9dcf-15bc9d9e188c/%E5%8C%BB%E7%96%971-2.mp4',
},
{
id: 23,
templateType: 'BusinessCard',
imageUrl:
'https://meta-human-editor-prd.cdn.bcebos.com/2024-04-17T17:19:00.569068/sd-qdpsxhut0f26n9j0u_1713345540103.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
videoUrl:
'https://meta-human-editor-test.cdn.bcebos.com/dac107cac20e479db66a7824903597a0/eb497bd4-2cdf-417a-8f64-6f5473686514/%E5%8C%BB%E7%96%973-2.mp4',
},
{
id: 24,
templateType: 'Health',
imageUrl:
'https://meta-human-editor-prd.cdn.bcebos.com/2024-03-26T18:48:42.563011/sd-qcxmghd4uzgv76c37_1711450122138.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
videoUrl:
'https://meta-human-editor-test.cdn.bcebos.com/a656784a-06f2-43c6-8bd5-b728351dfc6c/e9fe8ee2-afe9-4721-b8b5-c052427604ee/%E7%AB%96%E7%89%88-%E6%98%A5%E6%97%A5%E5%92%8C%E9%A3%8E-1848.mp4',
},
{
id: 25,
templateType: 'Health',
imageUrl:
'https://meta-human-editor-prd.cdn.bcebos.com/2024-04-17T17:28:05.392432/sd-qdpsq815b5hv4txda_1713346084825.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
videoUrl:
'https://meta-human-editor-test.cdn.bcebos.com/dac107cac20e479db66a7824903597a0/0c16cea8-38cd-4a09-9690-2501ec95207f/%E6%95%99%E8%82%B22-2.mp4',
},
{
id: 26,
templateType: 'Education',
imageUrl:
'https://meta-human-editor-prd.cdn.bcebos.com/2024-04-17T16:53:29.223639/sd-qdmv5bsghiyx1xb9z_1713344008761.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
videoUrl:
'https://meta-human-editor-test.cdn.bcebos.com/dac107cac20e479db66a7824903597a0/e93217f7-5f3d-4714-9dcf-15bc9d9e188c/%E5%8C%BB%E7%96%971-2.mp4',
},
{
id: 27,
templateType: 'Education',
imageUrl:
'https://meta-human-editor-prd.cdn.bcebos.com/2024-04-17T17:19:00.569068/sd-qdpsxhut0f26n9j0u_1713345540103.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
videoUrl:
'https://meta-human-editor-test.cdn.bcebos.com/dac107cac20e479db66a7824903597a0/eb497bd4-2cdf-417a-8f64-6f5473686514/%E5%8C%BB%E7%96%973-2.mp4',
},
{
id: 28,
templateType: 'Education',
imageUrl:
'https://meta-human-editor-prd.cdn.bcebos.com/2024-03-26T18:48:42.563011/sd-qcxmghd4uzgv76c37_1711450122138.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
videoUrl:
'https://meta-human-editor-test.cdn.bcebos.com/a656784a-06f2-43c6-8bd5-b728351dfc6c/e9fe8ee2-afe9-4721-b8b5-c052427604ee/%E7%AB%96%E7%89%88-%E6%98%A5%E6%97%A5%E5%92%8C%E9%A3%8E-1848.mp4',
},
{
id: 29,
templateType: 'Invite',
imageUrl:
'https://meta-human-editor-prd.cdn.bcebos.com/2024-04-17T17:28:05.392432/sd-qdpsq815b5hv4txda_1713346084825.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
videoUrl:
'https://meta-human-editor-test.cdn.bcebos.com/dac107cac20e479db66a7824903597a0/0c16cea8-38cd-4a09-9690-2501ec95207f/%E6%95%99%E8%82%B22-2.mp4',
},
{
id: 32,
templateType: 'Trending',
imageUrl:
'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/f7e73d16-79f9-455e-89a5-761c2cb24aff/%E7%81%B5%E5%8A%A8%E6%97%B6%E9%92%9F-%E7%AB%96%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
videoUrl:
'https://meta-human-editor-test.cdn.bcebos.com/cea9a767-e17f-4cea-b160-152d0374bb26/fffef1d5-4adc-44eb-bd2f-f5e71413c9ab/%E7%81%B5%E5%8A%A8%E6%97%B6%E9%92%9F-%E7%AB%96%E7%89%884.mp4',
},
] as const
<script setup lang="ts">
import Layout from './layout/index.vue'
</script>
<template>
<Layout />
</template>
<script setup lang="ts">
import { NDropdown } from 'naive-ui'
import { h } from 'vue'
import CustomIcon from '@/components/custom-icon/custom-icon.vue'
import { NAvatar } from 'naive-ui'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/store/modules/user'
import { Right, Logout } from '@icon-park/vue-next'
import { Icon } from '@icon-park/vue-next/lib/runtime'
const router = useRouter()
const userStore = useUserStore()
const options = [
{
key: 'nickName',
type: 'render',
render: renderCustomHeader,
},
{
label: '购买记录',
key: 'purchaseRecord',
icon: renderIcon(Right),
},
{
label: '使用记录',
key: 'usageRecord',
icon: renderIcon(Right),
},
{
type: 'divider',
key: 'd1',
},
{
label: '退出登录',
key: 'logout',
icon: renderIcon(Logout),
},
]
function renderIcon(icon: Icon) {
return () => {
return h(icon, {
theme: 'outline',
size: 15,
fill: '#333639',
})
}
}
function renderCustomHeader() {
return h('div', [
h('div', { class: 'flex' }, [
h(NAvatar, {
round: true,
class: 'w-[50px] h-[50px] mr-[6px] ml-[15px] mt-[10px]',
src: 'https://mkp-dev.oss-cn-shenzhen.aliyuncs.com/game-template/20230103/1672717001352.png',
}),
h('div', { class: 'text-[16px] mt-[20px] ml-[3px]' }, ['廣州超聯軟件']),
]),
h('div', { class: 'flex items-center justify-between mt-[10px] mb-[8px] ml-[15px]' }, [
h('div', ['灵豆余额']),
h('div', { class: 'flex' }, [
h('span', { class: 'mr-[5px] text-[14px]' }, ['960']),
h('img', {
class: 'mr-[9px] w-[16px] h-[16px] mt-[1px] ml-[5px]',
src: new URL('@/assets/iconPark-vicia-faba1@1x.png', import.meta.url).href,
}),
]),
]),
])
}
async function handleSelect(key: string | number) {
if (key === 'purchaseRecord') {
console.log('购买记录')
} else if (key === 'usageRecord') {
console.log('使用记录')
} else if (key === 'logout') {
await userStore.logout()
router.replace({ name: 'Login' })
window.$message.success('成功退出登錄')
return
}
}
</script>
<template>
<header class="flex h-[56px] justify-between">
<div class="font-600 flex items-center pl-4 text-xl">萃想智能云创</div>
<div class="flex items-center pr-4">
<div class="mx-6">
<n-button class="!rounded-[6px]" color="#ffecd4" text-color="#151b26">
<template #icon><CustomIcon class="text-lg" icon="mingcute:pig-money-line" /></template>
<span class="text-[14px]">充值</span>
</n-button>
</div>
<NDropdown :options="options" trigger="hover" @select="handleSelect">
<NAvatar
class="cursor-pointer"
round
size="small"
object-fit="cover"
src="https://mkp-dev.oss-cn-shenzhen.aliyuncs.com/game-template/20230103/1672717001352.png"
/>
</NDropdown>
</div>
</header>
</template>
<style lang="scss">
.v-binder-follower-content {
width: 210px;
margin-left: -80px;
}
.n-dropdown-menu {
border-radius: 10px !important;
.n-avatar {
width: 45px !important;
height: 45px !important;
}
.n-dropdown-divider {
width: 90%;
margin: auto !important;
}
.n-dropdown-option .n-dropdown-option-body {
flex-direction: row-reverse;
.n-icon svg {
width: 20px;
height: 20px;
}
}
}
</style>
<script setup lang="ts"></script>
<template>
<main>
<RouterView />
</main>
</template>
<script setup lang="ts"> <script setup lang="ts">
import { shallowReadonly } from 'vue' import { shallowReadonly } from 'vue'
import type { MenuOption } from 'naive-ui' import type { MenuOption } from 'naive-ui'
import { useRouter } from 'vue-router'
const router = useRouter()
const menuOptions = shallowReadonly<MenuOption[]>([ const menuOptions = shallowReadonly<MenuOption[]>([
{ {
...@@ -9,8 +12,14 @@ const menuOptions = shallowReadonly<MenuOption[]>([ ...@@ -9,8 +12,14 @@ const menuOptions = shallowReadonly<MenuOption[]>([
key: 'videos', key: 'videos',
children: [ children: [
{ {
label: '工作台', label: '工作颱',
key: 'workbench', key: 'home',
onClick: () => router.push({ name: 'Home' }),
},
{
label: '我的作品',
key: 'opus',
onClick: () => router.push({ name: 'MyWorks' }),
}, },
], ],
}, },
...@@ -20,7 +29,7 @@ const menuOptions = shallowReadonly<MenuOption[]>([ ...@@ -20,7 +29,7 @@ const menuOptions = shallowReadonly<MenuOption[]>([
<template> <template>
<section class="h-full pr-[24px]"> <section class="h-full pr-[24px]">
<div class="h-full rounded-[16px] bg-white p-[16px]"> <div class="h-full rounded-[16px] bg-white p-[16px]">
<n-menu value="workbench" :options="menuOptions" /> <n-menu :options="menuOptions" />
</div> </div>
</section> </section>
</template> </template>
...@@ -230,7 +230,7 @@ function handleLoginSubmit(method: LoginMethod) { ...@@ -230,7 +230,7 @@ function handleLoginSubmit(method: LoginMethod) {
}) })
const redirectUrl = decodeURIComponent((route.query.redirect as string) || '') const redirectUrl = decodeURIComponent((route.query.redirect as string) || '')
router.replace({ path: redirectUrl ? redirectUrl : '/' }) router.replace({ path: redirectUrl ? redirectUrl : '/home' })
window.$message.success('登錄成功') window.$message.success('登錄成功')
......
<script setup lang="ts">
import { h, reactive, Ref, ref, watch } from 'vue'
import { NButton, NEllipsis, NPopconfirm, useDialog, type DataTableColumns } from 'naive-ui'
import { Search, CloseOne } from '@icon-park/vue-next'
import { createData } from './opusData'
type opusType = 'IMAGE_VIDEO' | 'BASE_VIDEO' | 'ADVANCED_VIDEO'
type opusStateType = 'SUBMIT' | 'GENERATING' | 'SUCCESS' | 'FAILED'
interface OpusRowData {
key: number
opusName: string
opusImgUrl: string
state: opusStateType
type: opusType
videoDuration: string
completionTime: string
}
const dialog = useDialog()
const opusPagination = reactive({
page: 1,
pageSize: 10,
showSizePicker: true,
pageSizes: [10, 20, 30],
prefix: () => h('div', [`共${filteredTemplateData.value.length}條數據`]),
onChange: (page: number) => {
opusPagination.page = page
},
onUpdatePageSize: (pageSize: number) => {
opusPagination.pageSize = pageSize
opusPagination.page = 1
},
})
const templateClassify = [
{ value: 'All', label: '全部' },
{
value: 'IMAGE_VIDEO',
label: '照片數據人',
},
{
value: 'BASE_VIDEO',
label: '數字人生成',
},
{
value: 'ADVANCED_VIDEO',
label: '高級數字人',
},
]
const opusSelectedTag = ref('All')
const checkedOpusKeys: Ref<number[]> = ref([])
const opusList = ref(createData())
const searchQuery = ref('')
const filteredTemplateData = ref(opusList.value)
const onCheckedOpusKeysChange = (newKeys: number[]) => {
checkedOpusKeys.value = newKeys
}
const opusActionColumns = createOpusColumns({
handleOpusDeleteRow(rowData) {
window.$message.info(`删除 ${rowData.key}`)
},
handleOpusExamine(rowData) {
window.$message.info(`查看 ${rowData.key}`)
},
handleOpusDownload(rowData) {
window.$message.info(`下载 ${rowData.key}`)
},
handleOpusEditing(rowData) {
window.$message.info(`编辑 ${rowData.key}`)
},
})
const handleMultiSelectDelete = () => {
dialog.warning({
title: '提示',
content: '確認刪除嗎?',
positiveText: '確認',
negativeText: '取消',
onPositiveClick: () => {
opusList.value = opusList.value.filter((item) => !checkedOpusKeys.value.includes(item.key))
checkedOpusKeys.value = []
window.$message.success('删除成功')
},
onNegativeClick: () => {
window.$message.error('取消')
},
})
}
watch([opusSelectedTag], () => {
handleFilterOpusData()
})
function createOpusColumns({
handleOpusDownload,
handleOpusDeleteRow,
handleOpusExamine,
handleOpusEditing,
}: {
handleOpusDownload: (rowData: OpusRowData) => void
handleOpusDeleteRow: (rowData: OpusRowData) => void
handleOpusExamine: (rowData: OpusRowData) => void
handleOpusEditing: (rowData: OpusRowData) => void
}): DataTableColumns<OpusRowData> {
return [
{
type: 'selection',
fixed: 'left',
},
{
title: '作品名稱',
key: 'opusName',
render(row) {
return h('div', { class: 'flex items-center w-[320px]' }, [
h(
'div',
{ class: 'w-[111px] h-[55px] mr-[10px] flex items-center justify-center overflow-hidden relative' },
[
h('img', {
src: row.opusImgUrl,
alt: '作品圖片',
class: 'h-full object-cover',
}),
],
),
h(NEllipsis, { style: { maxWidth: '150px' } }, { default: () => row.opusName }),
])
},
},
{
title: '狀態',
key: 'state',
render(row) {
const stateMap = {
SUBMIT: { text: '待生成', color: '#BBBBBB' },
GENERATING: { text: '生成中', color: '#1684FC' },
SUCCESS: { text: '生成成功', color: '#26A50E' },
FAILED: { text: '生成失敗', color: '#CB5656' },
}
const state = stateMap[row.state] || { text: '', color: '#CCCCCC' } // 默认灰色
return h('div', { class: 'flex justify-center items-center ' }, [
h('div', {
class: 'w-[10px] h-[10px] rounded-[25px] mr-18px reading-[22px]',
style: { backgroundColor: state.color },
}),
h('span', {}, state.text),
])
},
},
{
title: '類型',
key: 'type',
render(row) {
const typeMap = {
IMAGE_VIDEO: '照片數字人',
BASE_VIDEO: '數字人生成',
ADVANCED_VIDEO: '高級數字人',
}
return h('span', {}, typeMap[row.type] || '')
},
},
{
title: '視頻時長',
key: 'videoDuration',
},
{
title: '完成時間',
key: 'completionTime',
},
{
title: '操作',
key: 'operation',
render(row) {
return h('div', { class: 'operation-buttons' }, [
h(
'span',
{
onClick: () => handleOpusExamine(row),
class: 'text-[#2468f2] cursor-pointer mr-[10px]',
},
'查看',
),
h(
'span',
{
onClick: () => handleOpusDownload(row),
class: 'text-[#2468f2] cursor-pointer mr-[10px]',
},
'下載',
),
h(
'span',
{
onClick: () => handleOpusEditing(row),
class: 'text-[#2468f2] cursor-pointer mr-[10px]',
},
'繼續編輯',
),
h(
NPopconfirm,
{
onPositiveClick: () => handleOpusDeleteRow(row),
onNegativeClick: () => {
window.$message.info('取消删除')
},
},
{
trigger: () =>
h(
'span',
{
class: 'text-[#2468f2] cursor-pointer',
},
'删除',
),
default: () => '確認要刪除這一行嗎?',
},
),
])
},
},
]
}
function handleFilterOpusData() {
let filteredData = opusList.value
if (opusSelectedTag.value !== 'All') {
filteredData = filteredData.filter((item) => item.type === opusSelectedTag.value)
}
if (searchQuery.value) {
const query = searchQuery.value.toLowerCase()
filteredData = filteredData.filter((item) => item.opusName.toLowerCase().includes(query))
}
filteredTemplateData.value = filteredData
}
function handleClearSearchQuery() {
searchQuery.value = ''
handleFilterOpusData()
}
</script>
<template>
<div
class="h-full min-w-[1160px] overflow-auto rounded-[16px] bg-white px-[24px] pb-[16px]"
style="scrollbar-width: none"
>
<div class="overflow-auto bg-white pt-[24px]">
<div class="mb-[24px] cursor-default text-[18px] text-[#000]">我的作品</div>
<div class="pb-[16px]">
<n-radio-group v-model:value="opusSelectedTag">
<n-radio-button
v-for="classify in templateClassify"
:key="classify.value"
class="!h-[28px] !px-[12px] !leading-[28px] hover:text-[#5b647a]"
:value="classify.value"
:label="classify.label"
/>
</n-radio-group>
</div>
<div class="flex justify-between">
<div>
<NButton
class="!rounded-[4px]"
:class="{ '!border-[#2468f2] !bg-[#2468f2] !text-white': checkedOpusKeys.length > 0 }"
:disabled="!checkedOpusKeys.length"
@click="handleMultiSelectDelete"
>删除</NButton
>
<span v-show="checkedOpusKeys.length" class="color-[#999] ml-[8px] text-[12px]"
>选择{{ checkedOpusKeys.length }}条记录</span
>
</div>
<div
class="border-1 mb-[10px] flex h-[34px] w-[226px] items-center justify-center rounded-[6px] border-[#000]/[0.25] pr-[11px] text-[12px]"
>
<input
v-model="searchQuery"
type="text"
class="mx-[11px] w-[183px] border-none outline-none"
placeholder="請輸入名稱進行蒐索"
@keyup.enter="handleFilterOpusData"
/>
<CloseOne
v-show="searchQuery.length"
theme="filled"
size="16"
fill="#D4D6D9"
class="mr-[5px] cursor-pointer"
@click="handleClearSearchQuery"
/>
<Search theme="outline" size="16" fill="#00000040" class="cursor-pointer" @click="handleFilterOpusData" />
</div>
</div>
<div class="relative">
<n-data-table
:bordered="false"
:single-line="false"
:columns="opusActionColumns"
:data="filteredTemplateData"
:checked-row-keys="checkedOpusKeys"
class="border-t-[1px]"
:pagination="opusPagination"
@update:checked-row-keys="onCheckedOpusKeysChange"
>
</n-data-table>
</div>
</div>
</div>
</template>
<style lang="scss">
.n-radio-group {
--n-button-box-shadow-focus: none !important;
.n-radio-button {
border: none;
border-width: 0 !important;
border-radius: 15px !important;
&:first-child {
border-left: none !important;
}
&:last-child {
border-right: none !important;
}
&.n-radio-button--checked {
color: #091221 !important;
background-color: #edeef7 !important;
border: none !important;
}
&:not(.n-radio-button--disabled):hover:not(.n-radio-button--checked) {
color: #5b647a !important;
}
}
.n-radio-group__splitor {
width: 0 !important;
background-color: #fff !important;
}
}
.n-data-table {
border: none;
.n-data-table-th {
text-align: center !important;
background-color: #f6f7fb !important;
}
.n-data-table-td {
text-align: center !important;
}
.n-data-table-tbody {
font-size: 16px !important;
}
:not(.n-data-table--single-line) {
.n-data-table-th {
border-right: 2px solid #fff !important;
border-bottom: none !important;
}
.n-data-table-td {
border-right: 2px solid #fff0 !important;
border-bottom: none !important;
}
}
}
.v-binder-follower-content {
margin-left: 0 !important;
}
.n-popover__content {
font-size: 12px;
}
.n-popover:not(.n-popover--raw) {
color: #000;
background-color: #fff !important;
}
.n-card.n-card--bordered {
border: none !important;
}
.n-popover-shared .n-popover-arrow-wrapper .n-popover-arrow {
background-color: #fff !important ;
}
</style>
export interface RowData {
key: number
opusName: string
opusImgUrl: string
state: string
type: string
videoDuration: string
completionTime: string
}
export function createData(): RowData[] {
return [
{
key: 0,
opusName: '英语教育课程dhuoajipaijiaopna[jjioannod那【基调]',
opusImgUrl:
'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/a975c86f-cb3c-4cec-9bcc-4bb6453143cf/%E7%81%BF%E7%83%82%E7%83%9F%E7%81%AB-%E6%A8%AA%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
state: 'FAILED',
type: 'IMAGE_VIDEO',
videoDuration: '00:11:92',
completionTime: '2021.9.15 10:58:26',
},
{
key: 1,
opusName: 'test test test课程',
opusImgUrl:
'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/2610e9c0-8300-4573-9666-2e373bace355/%E5%A4%A7%E6%A9%98%E5%A4%A7%E5%88%A9-%E7%AB%96%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
state: 'SUBMIT',
type: 'IMAGE_VIDEO',
videoDuration: '00:11:92',
completionTime: '2021.9.15 10:58:26',
},
{
key: 2,
opusName: 'test test test',
opusImgUrl:
'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/2610e9c0-8300-4573-9666-2e373bace355/%E5%A4%A7%E6%A9%98%E5%A4%A7%E5%88%A9-%E7%AB%96%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
state: 'GENERATING',
type: 'BASE_VIDEO',
videoDuration: '00:11:92',
completionTime: '2021.9.15 10:58:26',
},
{
key: 3,
opusName: 'test test test 01',
opusImgUrl:
'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/2610e9c0-8300-4573-9666-2e373bace355/%E5%A4%A7%E6%A9%98%E5%A4%A7%E5%88%A9-%E7%AB%96%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
state: 'SUCCESS',
type: 'BASE_VIDEO',
videoDuration: '00:11:92',
completionTime: '2021.9.15 10:58:26',
},
{
key: 4,
opusName: '英语教育课程dhuoajipaijiaopna[jjioannod那【基调]',
opusImgUrl:
'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/a975c86f-cb3c-4cec-9bcc-4bb6453143cf/%E7%81%BF%E7%83%82%E7%83%9F%E7%81%AB-%E6%A8%AA%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
state: 'FAILED',
type: 'IMAGE_VIDEO',
videoDuration: '00:11:92',
completionTime: '2021.9.15 10:58:26',
},
{
key: 5,
opusName: 'test test test课程',
opusImgUrl:
'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/2610e9c0-8300-4573-9666-2e373bace355/%E5%A4%A7%E6%A9%98%E5%A4%A7%E5%88%A9-%E7%AB%96%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
state: 'SUBMIT',
type: 'IMAGE_VIDEO',
videoDuration: '00:11:92',
completionTime: '2021.9.15 10:58:26',
},
{
key: 6,
opusName: 'test test test',
opusImgUrl:
'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/2610e9c0-8300-4573-9666-2e373bace355/%E5%A4%A7%E6%A9%98%E5%A4%A7%E5%88%A9-%E7%AB%96%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
state: 'GENERATING',
type: 'BASE_VIDEO',
videoDuration: '00:11:92',
completionTime: '2021.9.15 10:58:26',
},
{
key: 7,
opusName: 'test test test 01',
opusImgUrl:
'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/2610e9c0-8300-4573-9666-2e373bace355/%E5%A4%A7%E6%A9%98%E5%A4%A7%E5%88%A9-%E7%AB%96%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
state: 'SUCCESS',
type: 'BASE_VIDEO',
videoDuration: '00:11:92',
completionTime: '2021.9.15 10:58:26',
},
{
key: 8,
opusName: '英语教育课程dhuoajipaijiaopna[jjioannod那【基调]',
opusImgUrl:
'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/a975c86f-cb3c-4cec-9bcc-4bb6453143cf/%E7%81%BF%E7%83%82%E7%83%9F%E7%81%AB-%E6%A8%AA%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
state: 'FAILED',
type: 'IMAGE_VIDEO',
videoDuration: '00:11:92',
completionTime: '2021.9.15 10:58:26',
},
{
key: 9,
opusName: 'test test test课程',
opusImgUrl:
'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/2610e9c0-8300-4573-9666-2e373bace355/%E5%A4%A7%E6%A9%98%E5%A4%A7%E5%88%A9-%E7%AB%96%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
state: 'SUBMIT',
type: 'IMAGE_VIDEO',
videoDuration: '00:11:92',
completionTime: '2021.9.15 10:58:26',
},
{
key: 10,
opusName: 'test test test',
opusImgUrl:
'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/2610e9c0-8300-4573-9666-2e373bace355/%E5%A4%A7%E6%A9%98%E5%A4%A7%E5%88%A9-%E7%AB%96%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
state: 'GENERATING',
type: 'BASE_VIDEO',
videoDuration: '00:11:92',
completionTime: '2021.9.15 10:58:26',
},
{
key: 11,
opusName: 'test test test 01',
opusImgUrl:
'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/2610e9c0-8300-4573-9666-2e373bace355/%E5%A4%A7%E6%A9%98%E5%A4%A7%E5%88%A9-%E7%AB%96%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
state: 'SUCCESS',
type: 'BASE_VIDEO',
videoDuration: '00:11:92',
completionTime: '2021.9.15 10:58:26',
},
{
key: 12,
opusName: '英语教育课程dhuoajipaijiaopna[jjioannod那【基调]',
opusImgUrl:
'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/a975c86f-cb3c-4cec-9bcc-4bb6453143cf/%E7%81%BF%E7%83%82%E7%83%9F%E7%81%AB-%E6%A8%AA%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
state: 'FAILED',
type: 'IMAGE_VIDEO',
videoDuration: '00:11:92',
completionTime: '2021.9.15 10:58:26',
},
{
key: 13,
opusName: 'test test test课程',
opusImgUrl:
'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/2610e9c0-8300-4573-9666-2e373bace355/%E5%A4%A7%E6%A9%98%E5%A4%A7%E5%88%A9-%E7%AB%96%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
state: 'SUBMIT',
type: 'IMAGE_VIDEO',
videoDuration: '00:11:92',
completionTime: '2021.9.15 10:58:26',
},
{
key: 14,
opusName: 'test test test',
opusImgUrl:
'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/2610e9c0-8300-4573-9666-2e373bace355/%E5%A4%A7%E6%A9%98%E5%A4%A7%E5%88%A9-%E7%AB%96%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
state: 'GENERATING',
type: 'BASE_VIDEO',
videoDuration: '00:11:92',
completionTime: '2021.9.15 10:58:26',
},
{
key: 15,
opusName: 'test test test 01',
opusImgUrl:
'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/2610e9c0-8300-4573-9666-2e373bace355/%E5%A4%A7%E6%A9%98%E5%A4%A7%E5%88%A9-%E7%AB%96%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
state: 'SUCCESS',
type: 'BASE_VIDEO',
videoDuration: '00:11:92',
completionTime: '2021.9.15 10:58:26',
},
{
key: 16,
opusName: '英语教育课程dhuoajipaijiaopna[jjioannod那【基调]',
opusImgUrl:
'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/a975c86f-cb3c-4cec-9bcc-4bb6453143cf/%E7%81%BF%E7%83%82%E7%83%9F%E7%81%AB-%E6%A8%AA%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
state: 'FAILED',
type: 'IMAGE_VIDEO',
videoDuration: '00:11:92',
completionTime: '2021.9.15 10:58:26',
},
{
key: 17,
opusName: 'test test test课程',
opusImgUrl:
'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/2610e9c0-8300-4573-9666-2e373bace355/%E5%A4%A7%E6%A9%98%E5%A4%A7%E5%88%A9-%E7%AB%96%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
state: 'SUBMIT',
type: 'IMAGE_VIDEO',
videoDuration: '00:11:92',
completionTime: '2021.9.15 10:58:26',
},
{
key: 18,
opusName: 'test test test',
opusImgUrl:
'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/2610e9c0-8300-4573-9666-2e373bace355/%E5%A4%A7%E6%A9%98%E5%A4%A7%E5%88%A9-%E7%AB%96%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
state: 'GENERATING',
type: 'BASE_VIDEO',
videoDuration: '00:11:92',
completionTime: '2021.9.15 10:58:26',
},
{
key: 19,
opusName: 'test test test 01',
opusImgUrl:
'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/2610e9c0-8300-4573-9666-2e373bace355/%E5%A4%A7%E6%A9%98%E5%A4%A7%E5%88%A9-%E7%AB%96%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
state: 'SUCCESS',
type: 'BASE_VIDEO',
videoDuration: '00:11:92',
completionTime: '2021.9.15 10:58:26',
},
{
key: 20,
opusName: '英语教育课程dhuoajipaijiaopna[jjioannod那【基调]',
opusImgUrl:
'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/a975c86f-cb3c-4cec-9bcc-4bb6453143cf/%E7%81%BF%E7%83%82%E7%83%9F%E7%81%AB-%E6%A8%AA%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
state: 'FAILED',
type: 'IMAGE_VIDEO',
videoDuration: '00:11:92',
completionTime: '2021.9.15 10:58:26',
},
{
key: 21,
opusName: 'test test test课程',
opusImgUrl:
'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/2610e9c0-8300-4573-9666-2e373bace355/%E5%A4%A7%E6%A9%98%E5%A4%A7%E5%88%A9-%E7%AB%96%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
state: 'SUBMIT',
type: 'IMAGE_VIDEO',
videoDuration: '00:11:92',
completionTime: '2021.9.15 10:58:26',
},
{
key: 22,
opusName: 'test test test',
opusImgUrl:
'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/2610e9c0-8300-4573-9666-2e373bace355/%E5%A4%A7%E6%A9%98%E5%A4%A7%E5%88%A9-%E7%AB%96%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
state: 'GENERATING',
type: 'BASE_VIDEO',
videoDuration: '00:11:92',
completionTime: '2021.9.15 10:58:26',
},
{
key: 23,
opusName: 'test test test 01',
opusImgUrl:
'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/2610e9c0-8300-4573-9666-2e373bace355/%E5%A4%A7%E6%A9%98%E5%A4%A7%E5%88%A9-%E7%AB%96%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
state: 'SUCCESS',
type: 'BASE_VIDEO',
videoDuration: '00:11:92',
completionTime: '2021.9.15 10:58:26',
},
{
key: 24,
opusName: '英语教育课程dhuoajipaijiaopna[jjioannod那【基调]',
opusImgUrl:
'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/a975c86f-cb3c-4cec-9bcc-4bb6453143cf/%E7%81%BF%E7%83%82%E7%83%9F%E7%81%AB-%E6%A8%AA%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
state: 'FAILED',
type: 'IMAGE_VIDEO',
videoDuration: '00:11:92',
completionTime: '2021.9.15 10:58:26',
},
{
key: 25,
opusName: 'test test test课程',
opusImgUrl:
'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/2610e9c0-8300-4573-9666-2e373bace355/%E5%A4%A7%E6%A9%98%E5%A4%A7%E5%88%A9-%E7%AB%96%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
state: 'SUBMIT',
type: 'IMAGE_VIDEO',
videoDuration: '00:11:92',
completionTime: '2021.9.15 10:58:26',
},
{
key: 26,
opusName: 'test test test',
opusImgUrl:
'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/2610e9c0-8300-4573-9666-2e373bace355/%E5%A4%A7%E6%A9%98%E5%A4%A7%E5%88%A9-%E7%AB%96%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
state: 'GENERATING',
type: 'BASE_VIDEO',
videoDuration: '00:11:92',
completionTime: '2021.9.15 10:58:26',
},
{
key: 27,
opusName: 'test test test 01',
opusImgUrl:
'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/2610e9c0-8300-4573-9666-2e373bace355/%E5%A4%A7%E6%A9%98%E5%A4%A7%E5%88%A9-%E7%AB%96%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
state: 'SUCCESS',
type: 'BASE_VIDEO',
videoDuration: '00:11:92',
completionTime: '2021.9.15 10:58:26',
},
{
key: 28,
opusName: '英语教育课程dhuoajipaijiaopna[jjioannod那【基调]',
opusImgUrl:
'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/a975c86f-cb3c-4cec-9bcc-4bb6453143cf/%E7%81%BF%E7%83%82%E7%83%9F%E7%81%AB-%E6%A8%AA%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
state: 'FAILED',
type: 'IMAGE_VIDEO',
videoDuration: '00:11:92',
completionTime: '2021.9.15 10:58:26',
},
{
key: 29,
opusName: 'test test test课程',
opusImgUrl:
'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/2610e9c0-8300-4573-9666-2e373bace355/%E5%A4%A7%E6%A9%98%E5%A4%A7%E5%88%A9-%E7%AB%96%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
state: 'SUBMIT',
type: 'IMAGE_VIDEO',
videoDuration: '00:11:92',
completionTime: '2021.9.15 10:58:26',
},
{
key: 30,
opusName: 'test test test',
opusImgUrl:
'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/2610e9c0-8300-4573-9666-2e373bace355/%E5%A4%A7%E6%A9%98%E5%A4%A7%E5%88%A9-%E7%AB%96%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
state: 'GENERATING',
type: 'BASE_VIDEO',
videoDuration: '00:11:92',
completionTime: '2021.9.15 10:58:26',
},
{
key: 31,
opusName: 'test test test 01',
opusImgUrl:
'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/2610e9c0-8300-4573-9666-2e373bace355/%E5%A4%A7%E6%A9%98%E5%A4%A7%E5%88%A9-%E7%AB%96%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
state: 'SUCCESS',
type: 'BASE_VIDEO',
videoDuration: '00:11:92',
completionTime: '2021.9.15 10:58:26',
},
{
key: 32,
opusName: '英语教育课程dhuoajipaijiaopna[jjioannod那【基调]',
opusImgUrl:
'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/a975c86f-cb3c-4cec-9bcc-4bb6453143cf/%E7%81%BF%E7%83%82%E7%83%9F%E7%81%AB-%E6%A8%AA%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
state: 'FAILED',
type: 'IMAGE_VIDEO',
videoDuration: '00:11:92',
completionTime: '2021.9.15 10:58:26',
},
{
key: 33,
opusName: 'test test test课程',
opusImgUrl:
'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/2610e9c0-8300-4573-9666-2e373bace355/%E5%A4%A7%E6%A9%98%E5%A4%A7%E5%88%A9-%E7%AB%96%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
state: 'SUBMIT',
type: 'IMAGE_VIDEO',
videoDuration: '00:11:92',
completionTime: '2021.9.15 10:58:26',
},
{
key: 34,
opusName: 'test test test',
opusImgUrl:
'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/2610e9c0-8300-4573-9666-2e373bace355/%E5%A4%A7%E6%A9%98%E5%A4%A7%E5%88%A9-%E7%AB%96%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
state: 'GENERATING',
type: 'BASE_VIDEO',
videoDuration: '00:11:92',
completionTime: '2021.9.15 10:58:26',
},
{
key: 35,
opusName: 'test test test 01',
opusImgUrl:
'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/2610e9c0-8300-4573-9666-2e373bace355/%E5%A4%A7%E6%A9%98%E5%A4%A7%E5%88%A9-%E7%AB%96%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
state: 'SUCCESS',
type: 'BASE_VIDEO',
videoDuration: '00:11:92',
completionTime: '2021.9.15 10:58:26',
},
{
key: 36,
opusName: '英语教育课程dhuoajipaijiaopna[jjioannod那【基调]',
opusImgUrl:
'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/a975c86f-cb3c-4cec-9bcc-4bb6453143cf/%E7%81%BF%E7%83%82%E7%83%9F%E7%81%AB-%E6%A8%AA%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
state: 'FAILED',
type: 'IMAGE_VIDEO',
videoDuration: '00:11:92',
completionTime: '2021.9.15 10:58:26',
},
{
key: 37,
opusName: 'test test test课程',
opusImgUrl:
'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/2610e9c0-8300-4573-9666-2e373bace355/%E5%A4%A7%E6%A9%98%E5%A4%A7%E5%88%A9-%E7%AB%96%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
state: 'SUBMIT',
type: 'IMAGE_VIDEO',
videoDuration: '00:11:92',
completionTime: '2021.9.15 10:58:26',
},
{
key: 38,
opusName: 'test test test',
opusImgUrl:
'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/2610e9c0-8300-4573-9666-2e373bace355/%E5%A4%A7%E6%A9%98%E5%A4%A7%E5%88%A9-%E7%AB%96%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
state: 'GENERATING',
type: 'BASE_VIDEO',
videoDuration: '00:11:92',
completionTime: '2021.9.15 10:58:26',
},
{
key: 39,
opusName: 'test test test 01',
opusImgUrl:
'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/2610e9c0-8300-4573-9666-2e373bace355/%E5%A4%A7%E6%A9%98%E5%A4%A7%E5%88%A9-%E7%AB%96%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
state: 'SUCCESS',
type: 'BASE_VIDEO',
videoDuration: '00:11:92',
completionTime: '2021.9.15 10:58:26',
},
{
key: 40,
opusName: 'test test test 01',
opusImgUrl:
'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/2610e9c0-8300-4573-9666-2e373bace355/%E5%A4%A7%E6%A9%98%E5%A4%A7%E5%88%A9-%E7%AB%96%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
state: 'SUCCESS',
type: 'BASE_VIDEO',
videoDuration: '00:11:92',
completionTime: '2021.9.15 10:58:26',
},
]
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment