爆款复刻的70%页面

apps/web-vue/src/components/Upload/index.vue

 <template>
     <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"
             :accept="accept" :showFileList="showFileList">
             <slot v-if="!hasFile" name="trigger">
@@ -38,6 +38,10 @@ import type { UploadProps, UploadUserFile, UploadFile } from 'element-plus';
 import { ElMessage, ElMessageBox } from 'element-plus';
 
 const props = defineProps({
+    bgClass: {
+        type: String,
+        default: 'upload-demo'
+    },
     action: {
         type: String,
         default: '',
@@ -193,7 +197,7 @@ defineExpose({
 <style scoped lang="scss">
 :deep(.upload-demo) {
     .el-upload-dragger {
-        background-color: rgba(var(--main-color), 0.04);
+        background-color: #eee;
     }
 }
 .file-upload-wrapper {

apps/web-vue/src/layout/index.vue

@@ -91,7 +91,7 @@ const menus = [
   },
   {
     name: '爆款复刻',
-    path: '/',
+    path: '/burst',
     icon: 'caijian',
   },
   {

apps/web-vue/src/router/index.ts

@@ -11,6 +11,7 @@ import Layout from '@/layout/index.vue'
 import Task from '@/views/task/index.vue'
 import QuickCreation from '@/views/quickCreation/index.vue'
 import Agent from '@/views/agent/index.vue'
+import Burst from '@/views/burst/index.vue'
 
 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',
     component: Layout,
     children: [

apps/web-vue/src/views/burst/components/Step-1.vue

+<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-4.vue

+<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/index copy.vue

+<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/replica.vue

+<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>