Skip to content

M
mengchangaigc
Commit 5d11284c authored by 黄同智's avatar 黄同智
Browse files
Options

爆款复刻的70%页面

parent 048729dc
Expand all Show whitespace changes
Inline Side-by-side
Showing with 490 additions and 3 deletions
apps/web-vue/src/components/Upload/index.vue
View file @ 5d11284c
<template> <template>
<div> <div>
<el-upload v-if="listType === 'drap'" class="upload-demo" drag <el-upload v-if="listType === 'drap'" drag :class="bgClass ?? 'upload-demo'"
action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" :multiple="multiple" :limit="limit" action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" :multiple="multiple" :limit="limit"
:accept="accept" :showFileList="showFileList"> :accept="accept" :showFileList="showFileList">
<slot v-if="!hasFile" name="trigger"> <slot v-if="!hasFile" name="trigger">
...@@ -38,6 +38,10 @@ import type { UploadProps, UploadUserFile, UploadFile } from 'element-plus'; ...@@ -38,6 +38,10 @@ import type { UploadProps, UploadUserFile, UploadFile } from 'element-plus';
import { ElMessage, ElMessageBox } from 'element-plus'; import { ElMessage, ElMessageBox } from 'element-plus';
const props = defineProps({ const props = defineProps({
bgClass: {
type: String,
default: 'upload-demo'
},
action: { action: {
type: String, type: String,
default: '', default: '',
...@@ -193,7 +197,7 @@ defineExpose({ ...@@ -193,7 +197,7 @@ defineExpose({
<style scoped lang="scss"> <style scoped lang="scss">
:deep(.upload-demo) { :deep(.upload-demo) {
.el-upload-dragger { .el-upload-dragger {
background-color: rgba(var(--main-color), 0.04); background-color: #eee;
} }
} }
.file-upload-wrapper { .file-upload-wrapper {
......
apps/web-vue/src/layout/index.vue
View file @ 5d11284c
...@@ -91,7 +91,7 @@ const menus = [ ...@@ -91,7 +91,7 @@ const menus = [
}, },
{ {
name: '爆款复刻', name: '爆款复刻',
path: '/', path: '/burst',
icon: 'caijian', icon: 'caijian',
}, },
{ {
......
apps/web-vue/src/router/index.ts
View file @ 5d11284c
...@@ -11,6 +11,7 @@ import Layout from '@/layout/index.vue' ...@@ -11,6 +11,7 @@ import Layout from '@/layout/index.vue'
import Task from '@/views/task/index.vue' import Task from '@/views/task/index.vue'
import QuickCreation from '@/views/quickCreation/index.vue' import QuickCreation from '@/views/quickCreation/index.vue'
import Agent from '@/views/agent/index.vue' import Agent from '@/views/agent/index.vue'
import Burst from '@/views/burst/index.vue'
const routes = [ const routes = [
{ {
...@@ -92,6 +93,24 @@ const routes = [ ...@@ -92,6 +93,24 @@ const routes = [
] ]
}, },
{ {
path: '/burst',
component: Layout,
children: [
{
path: '',
name: 'Burst',
component: Burst,
meta: { title: '爆款复刻', icon: 'caijian', affix: true }
}
]
},
{
path: '/burst/replica',
name: 'BurstReplica',
component: () => import('@/views/burst/replica.vue'),
meta: { title: '爆款复刻工作台', hidden: true }
},
{
path: '/zhibo', path: '/zhibo',
component: Layout, component: Layout,
children: [ children: [
......
apps/web-vue/src/views/burst/components/Step-1.vue 0 → 100644
View file @ 5d11284c
<template>
<section class="step-one maxw-1200 mx-auto">
<div class="notice-box flex-items-center gap-10 h-48 px-18 round-8 mb-26">
<el-icon class="color-main fs-16">
<InfoFilled />
</el-icon>
<span class="fs-12 color-000">
说明：确认剧集视频后，系统将对原视频进行资产解析，提取主要的人物、场景、道具资产，用于后续替换
</span>
</div>
<div class="flex-between mb-26">
<h2 class="fs-20 fw-700 color-000">原片剧集</h2>
</div>
<div class="flex-between mb-14">
<div class="flex-items-center gap-16 fs-12 color-536">
<span class="flex-items-center gap-4">
<el-icon>
<VideoCamera />
</el-icon>
全部剧集<span class="color-000 fw-700">{{ episodes.length }}</span>
</span>
<span>已上传<span class="color-main fw-700">{{ uploadedCount }}</span></span>
<span>上传中<span class="color-main fw-700">{{ uploadingCount }}</span></span>
<span>上传失败<span class="danger-text fw-700">{{ failedCount }}</span></span>
</div>
<el-button class="h-32 px-18 fs-12" @click="addEpisode">
<el-icon>
<Plus />
</el-icon>
<span>新增视频</span>
</el-button>
</div>
<el-table :data="episodes" class="episode-table w-full" row-key="id">
<el-table-column label="剧集信息" min-width="420">
<template #default="{ row }">
<div class="flex-items-center gap-12 py-8">
<img :src="row.cover" :alt="row.name" class="episode-cover w-48 h-32 round-4 cover" />
<div class="flex-col">
<span class="fs-14 fw-700 color-000 lh-22">{{ row.name }}</span>
<span class="fs-12 color-666 lh-20">{{ row.filename }}</span>
</div>
</div>
</template>
</el-table-column>
<el-table-column prop="duration" label="时长" width="150" />
<el-table-column prop="size" label="大小" width="170" />
<el-table-column label="状态" width="170">
<template #default="{ row }">
<span class="flex-items-center gap-6 fs-12 color-333">
<span class="status-dot wh-8 round" :class="row.status"></span>
{{ row.statusText }}*
</span>
</template>
</el-table-column>
<el-table-column label="操作" width="190">
<template #default>
<el-button type="primary" link class="fs-12">重新上传</el-button>
<el-button type="danger" link class="fs-12">删除</el-button>
</template>
</el-table-column>
</el-table>
<div class="fixed bottom-10 left-0 flex-center w-full">
<el-button type="primary" class="start-btn h-44 round-140 border-none mt-24" @click="goNext">
<el-icon>
<MagicStick />
</el-icon>
<span>进入下一步</span>
<el-icon>
<ArrowRight />
</el-icon>
</el-button>
</div>
</section>
</template>
<script setup lang="ts">
import { computed, ref } from 'vue';
import { ArrowRight, InfoFilled, MagicStick, Plus, VideoCamera } from '@element-plus/icons-vue';
import coverImg from '@/static/image/huaban.png';
type EpisodeStatus = 'done' | 'uploading' | 'failed';
type EpisodeItem = {
id: string;
name: string;
filename: string;
duration: string;
size: string;
status: EpisodeStatus;
statusText: string;
cover: string;
};
const emit = defineEmits<{
(e: 'next'): void;
}>();
const episodes = ref<EpisodeItem[]>([
{
id: 'episode-1',
name: '第 1 集',
filename: 'r_cde1602bd05a40f9b3d3606dc531df01.mp4',
duration: '00:15',
size: '19.44 MB',
status: 'done',
statusText: '已完成',
cover: coverImg,
},
]);
const uploadedCount = computed(() => episodes.value.filter((item) => item.status === 'done').length);
const uploadingCount = computed(() => episodes.value.filter((item) => item.status === 'uploading').length);
const failedCount = computed(() => episodes.value.filter((item) => item.status === 'failed').length);
const addEpisode = () => {
episodes.value.push({
id: `episode-${Date.now()}`,
name: `第 ${episodes.value.length + 1} 集`,
filename: 'new_replica_source.mp4',
duration: '00:00',
size: '0 MB',
status: 'uploading',
statusText: '上传中',
cover: coverImg,
});
};
const goNext = () => {
emit('next');
};
</script>
<style scoped lang="scss">
.step-one {
width: 1200px;
margin: 0 auto;
}
.notice-box {
border: 1px solid #cfd8ff;
background: #eef1ff;
}
.color-536 {
color: #536883;
}
.danger-text {
color: #f5222d;
}
.episode-table {
border: 1px solid #dce6f2;
border-bottom: 0;
}
.episode-cover {
flex: 0 0 48px;
background: #f3f6fb;
}
.status-dot.done {
background: #18b66a;
}
.status-dot.uploading {
background: rgba(var(--main-color), 1);
}
.status-dot.failed {
background: #f5222d;
}
:deep(.episode-table .el-table__header th) {
height: 40px;
font-size: 12px;
color: #536883;
font-weight: 500;
background: #f8fafc;
}
:deep(.episode-table .el-table__cell) {
border-color: #dce6f2;
}
:deep(.episode-table .el-table__row) {
height: 62px;
}
</style>
apps/web-vue/src/views/burst/components/Step-2.vue 0 → 100644
View file @ 5d11284c
This diff is collapsed.
apps/web-vue/src/views/burst/components/Step-3.vue 0 → 100644
View file @ 5d11284c
This diff is collapsed.
apps/web-vue/src/views/burst/components/Step-4.vue 0 → 100644
View file @ 5d11284c
<template>
<div>
</div>
</template>
<script setup lang="ts">
</script>
<style scoped lang="scss">
</style>
\ No newline at end of file
apps/web-vue/src/views/burst/components/VoiceConfigDialog.vue 0 → 100644
View file @ 5d11284c
This diff is collapsed.
apps/web-vue/src/views/burst/index copy.vue 0 → 100644
View file @ 5d11284c
<template>
<div class="vh100 hidden flex-col">
<div class="flex-center bg-fff py-10">
<div class="flex-center gap-10 mr-100 bg-eee round-100 p-4">
<div v-for="(item, index) in steps" :key="index" class="flex-items-center gap-10 default"
:class="{ finish: item.stepn < currentStep, active: item.stepn === currentStep, select: selectStep === item.stepn }"
@click="lookStep(item)">
<div class="flex-items-center px-10 py-2 gap-6 round-100 fs-12 pointer color-888 name">
<el-icon>
<component :is="item.icon" />
</el-icon>
<span>{{ item.name }}</span>
</div>
<div v-if="index < steps.length - 1" class="w-30 h-2 line"></div>
</div>
</div>
</div>
<div class="flex-1 p-20 hidden">
<Step1 v-if="selectStep === 1" />
<!-- <div class="bg-fff h-full over-y-auto round-12">
<div v-for="value in 100">发的发生大是</div>
</div> -->
</div>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { Edit } from '@element-plus/icons-vue';
import Step1 from './components/Step-1.vue';
import Step2 from './components/Step-2.vue';
import Step3 from './components/Step-3.vue';
import Step4 from './components/Step-4.vue';
const title = ref('商品分析信息')
const currentStep = ref(4)
const selectStep = ref(1)
const steps = ref([
{ name: '原片', icon: Edit, stepn: 1, desc: '商品分析信息' },
{ name: '设定', icon: Edit, stepn: 2, desc: '创意与分镜' },
{ name: '分镜', icon: Edit, stepn: 3, desc: '视频预览' },
{ name: '视频', icon: Edit, stepn: 4, desc: '视频成片' },
])
const lookStep = (item: any) => {
if (currentStep.value < item.stepn) return
selectStep.value = item.stepn
title.value = item.desc
}
</script>
<style scoped lang="scss">
.default {
.name {
&:hover {
background-color: #eee;
}
}
.line {
background: #ddd;
}
&.finish {
.name {
color: #01b95d;
}
}
&.active {
.name {
color: rgba(var(--main-color), 1);
}
}
&.select {
.name {
color: #fff;
background-color: rgba(var(--main-color), 1);
}
}
}
</style>
\ No newline at end of file
apps/web-vue/src/views/burst/index.vue 0 → 100644
View file @ 5d11284c
This diff is collapsed.
apps/web-vue/src/views/burst/replica.vue 0 → 100644
View file @ 5d11284c
<template>
<div class="replica-page vh100 flex-col bgmr hidden">
<header class="replica-header flex-between bg-fff px-28">
<div class="project-info flex-items-center gap-14">
<el-icon class="fs-18 color-333 pointer" @click="goBack">
<Back />
</el-icon>
<div>
<div class="flex-items-center gap-8">
<span class="fs-14 fw-700 color-000">新项目</span>
<el-icon class="fs-14 color-888 pointer">
<Edit />
</el-icon>
</div>
<div class="flex-items-center gap-12 fs-12 color-666">
<span class="flex-items-center gap-4">
<span class="ratio-icon wide"></span>
16:9
</span>
<span class="divider"></span>
<span>720p</span>
<span class="divider"></span>
<span class="flex-items-center gap-4">
<img :src="styleImg" alt="现代都市通用" class="style-thumb wh-16 round-4 cover" />
现代都市通用
</span>
<span class="divider"></span>
<span>目标语言：中文</span>
</div>
</div>
</div>
<div class="step-nav flex-1 flex-center">
<template v-for="(item, index) in steps" :key="item.stepn">
<div class="step-item flex-col flex-center pointer" :class="{
active: item.stepn === selectStep,
disabled: item.stepn > currentStep,
}" @click="lookStep(item)">
<div class="step-icon flex-center h-34 w-60 round-100">
<el-icon class="fs-16">
<component :is="item.icon" />
</el-icon>
<span class="fs-12 lh-20 fw-700">{{ item.name }}</span>
</div>
</div>
<div v-if="index < steps.length - 1" class="step-line w-28"></div>
</template>
</div>
<div class="point-box flex-items-center gap-12 h-34 px-14 round-8">
<span class="flex-items-center gap-4 color-main fs-12 fw-700">
<el-icon>
<MagicStick />
</el-icon>
5,010
</span>
<span class="flex-items-center gap-4 fs-12 color-666">
<el-icon>
<Clock />
</el-icon>
265小时13分9秒
</span>
<el-icon class="fs-12 color-888">
<InfoFilled />
</el-icon>
</div>
</header>
<main class="flex-1 over-y-auto hide-scroll">
<Step1 v-if="selectStep === 1" @next="goStep(2)" />
<Step2 v-else-if="selectStep === 2" @next="goStep(3)" />
<Step3 v-else-if="selectStep === 3" />
<Step4 v-else />
</main>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { Back, Clock, Document, Edit, Files, InfoFilled, MagicStick, Setting, VideoCamera } from '@element-plus/icons-vue';
import Step1 from './components/Step-1.vue';
import Step2 from './components/Step-2.vue';
import Step3 from './components/Step-3.vue';
import Step4 from './components/Step-4.vue';
import styleImg from '@/static/image/meinv.png';
type StepItem = {
name: string;
icon: typeof VideoCamera;
stepn: number;
};
const router = useRouter();
const currentStep = ref(1);
const selectStep = ref(1);
const steps: StepItem[] = [
{ name: '原片', icon: VideoCamera, stepn: 1 },
{ name: '设定', icon: Setting, stepn: 2 },
{ name: '分镜', icon: Files, stepn: 3 },
{ name: '视频', icon: Document, stepn: 4 },
];
const goBack = () => {
router.push('/burst');
};
const lookStep = (item: StepItem) => {
if (currentStep.value < item.stepn) {
return;
}
selectStep.value = item.stepn;
};
const goStep = (step: number) => {
currentStep.value = Math.max(currentStep.value, step);
selectStep.value = step;
};
</script>
<style scoped lang="scss">
.replica-header {
flex: 0 0 60px;
border-bottom: 1px solid #dce6f2;
}
.divider {
width: 1px;
height: 12px;
background: #dce6f2;
}
.ratio-icon {
display: inline-block;
width: 14px;
height: 8px;
border: 1px solid #536883;
border-radius: 2px;
}
.step-item {
color: #b8c1d2;
&.active {
color: rgba(var(--main-color), 1);
.step-icon {
border-color: rgba(var(--main-color), 1);
background: rgba(var(--main-color), .06);
}
}
&.disabled {
cursor: not-allowed;
}
}
.step-icon {
border: 1px solid #edf2f7;
background: #f8fafc;
}
.step-line {
height: 1px;
margin: 0 8px 0px;
background: #dce6f2;
}
.point-box {
justify-content: flex-end;
background: #f8fafc;
}
</style>
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