继续完善上传的组件

doc/h5/src/components/UploadFile.vue

+<template>
+  <div>
+    <el-upload class="upload-demo" :multiple="multiple" :show-file-list="showFileList" :limit="limit" :accept="accept"
+      :style="{
+        'border': borderColor ? `1px dashed ${borderColor}` : 'none',
+        'background-color': `${backgroundColor}`
+      }" drag action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15">
+      <slot />
+    </el-upload>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const props = defineProps({
+  borderColor: {
+    type: String,
+    default: '#ddd'
+  },
+  backgroundColor: {
+    type: String,
+    default: '#fff'
+  },
+  multiple: {
+    type: Boolean,
+    default: false
+  },
+  showFileList: {
+    type: Boolean,
+    default: false
+  },
+  limit: {
+    type: Number,
+    default: 1
+  },
+  accept: {
+    type: String,
+    default: 'img'
+  }
+})
+
+</script>
+<style scoped lang="scss">
+.upload-demo {
+  border-radius: 16px;
+  transition: all 0.2s;
+
+  &:hover {
+    border-color: #5337C7;
+  }
+
+  :deep(.el-upload-dragger) {
+    background-color: transparent;
+    border: none;
+  }
+
+  .el-upload__text {
+    color: #00000063;
+  }
+}
+</style>
\ No newline at end of file

doc/h5/src/views/Home.vue

 <template>
   <section class="flex-center flex-col relative">
-    <div v-if="showNotice" class="flex-align-center justify-between absolute top-0 left-0 right-0 z-1 pt-8 pb-10 px-20" style="background: #f5f7ff">
+    <div v-if="showNotice" class="flex-align-center justify-between absolute top-0 left-0 right-0 z-1 pt-8 pb-10 px-20"
+      style="background: #f5f7ff">
       <div class="flex-align-center">
         <svg t="1779268717567" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
           p-id="9414" width="18" height="18">
@@ -16,8 +17,8 @@
         </svg>
         <span class="fs-14 ml-6">公告：视频生成在使用视频素材作为输入时，积分计算逻辑已更新。针对不同的视频输出时长，现设有最低积分消耗限制，详情请参见 视频生成计费说明。</span>
       </div>
-      <svg t="1779269053756" class="icon cursor-pointer" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
-        p-id="10649" width="10" height="10" @click="showNotice = false">
+      <svg t="1779269053756" class="icon cursor-pointer" viewBox="0 0 1024 1024" version="1.1"
+        xmlns="http://www.w3.org/2000/svg" p-id="10649" width="10" height="10" @click="showNotice = false">
         <path
           d="M886.784 746.496q29.696 30.72 43.52 56.32t-4.608 58.368q-4.096 6.144-11.264 14.848t-14.848 16.896-15.36 14.848-12.8 9.728q-25.6 15.36-60.416 8.192t-62.464-34.816l-43.008-43.008-57.344-57.344-67.584-67.584-73.728-73.728-131.072 131.072q-60.416 60.416-98.304 99.328-38.912 38.912-77.312 48.128t-68.096-17.408l-7.168-7.168-11.264-11.264-11.264-11.264q-6.144-6.144-7.168-8.192-11.264-14.336-13.312-29.184t2.56-29.184 13.824-27.648 20.48-24.576q9.216-8.192 32.768-30.72l55.296-57.344q33.792-32.768 75.264-73.728t86.528-86.016q-49.152-49.152-93.696-93.184t-79.872-78.848-57.856-56.832-27.648-27.136q-26.624-26.624-27.136-52.736t17.92-52.736q8.192-10.24 23.552-24.064t21.504-17.92q30.72-20.48 55.296-17.92t49.152 28.16l31.744 31.744q23.552 23.552 58.368 57.344t78.336 76.288 90.624 88.576q38.912-38.912 76.288-75.776t69.632-69.12 58.368-57.856 43.52-43.008q24.576-23.552 53.248-31.232t55.296 12.8q1.024 1.024 6.656 5.12t11.264 9.216 10.752 9.728 7.168 5.632q27.648 26.624 27.136 57.856t-27.136 57.856q-18.432 18.432-45.568 46.08t-60.416 60.416-70.144 69.632l-77.824 77.824q37.888 36.864 74.24 72.192t67.584 66.048 56.32 56.32 41.472 41.984z"
           p-id="10650"></path>
@@ -25,16 +26,21 @@
     </div>
     <div class="flex-center fs-40 pt-82">翻开剧本，创作<span class="c-5337C7">精品短剧</span></div>
 
-
-
     <section class="card mt-44 bg-fff rounded-20 p-12">
-      <el-upload class="upload-demo" drag action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
-        directory multiple :on-change="handleChange" :show-file-list="false">
+      <!-- <el-upload class="upload-demo" drag action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
+        :on-change="handleChange" :show-file-list="false" accept=".doc,.docx,.pdf,.txt,.md">
         <img src="@/static/imgs/fileupload.png" class="w-120" alt="">
         <div class="el-upload__text mt-24">
           点击或拖拽剧本文件到这里，支持 doc、docx、txt、pdf、md，大小不超过 20M;也可以先跳过，下一页手动输入刷本
         </div>
-      </el-upload>
+      </el-upload> -->
+      <UploadFile backgroundColor="#F8F9FC" accept=".doc,.docx,.pdf,.txt,.md">
+        <img src="@/static/imgs/fileupload.png" class="w-120" alt="">
+        <div class="el-upload__text mt-24">
+          点击或拖拽剧本文件到这里，支持 doc、docx、txt、pdf、md，大小不超过 20M;也可以先跳过，下一页手动输入刷本
+        </div>
+      </UploadFile>
+
       <section class="mt-12">
         <el-dropdown>
           <el-button plain class="nav-button w-102 gap-10">
@@ -150,15 +156,15 @@
         <span>创建短剧项目</span>
       </div>
     </section>
-
   </section>
 </template>
 
 <script setup lang="ts">
 import { ref } from 'vue';
 import { useRouter } from 'vue-router';
-import type { UploadFile, UploadFiles } from 'element-plus'
+import { ElMessage } from 'element-plus'
 import { ArrowDownBold, SwitchFilled } from '@element-plus/icons-vue'
+import UploadFile from '@/components/UploadFile.vue'
 
 
 const router = useRouter();
@@ -167,12 +173,15 @@ const resolvingPower = ref('720p');
 const videoStyle = ref('真人短剧视觉');
 const showNotice = ref(true);
 
+const fileUrl = ref('')
+
 const gopto = () => {
-  router.push('/about');
+  if (!fileUrl.value) return ElMessage.warning('请上传视频')
+  router.push('/drama');
 }
 
-const handleChange = (uploadFile: UploadFile, uploadFiles: UploadFiles) => {
-  console.log(uploadFile, uploadFiles)
+const handleChange = (uploadFile: any, uploadFiles: any) => {
+  console.log(11, uploadFile, uploadFiles)
 }
 
 </script>

doc/h5/src/views/project/components/StepOne.vue

 <template>
+  <section class="h-b100">
+    <section v-if="loading" class="flex-center flex-col h-b100">
+      <div class="relative">
+        <svg t="1779342435411" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+          p-id="25486" width="64" height="64">
+          <path
+            d="M625.777778 0l341.333333 307.2v648.931556c0 37.432889-33.792 67.868444-75.320889 67.868444H132.209778C90.680889 1024 56.888889 993.564444 56.888889 956.131556V67.868444C56.888889 30.435556 90.680889 0 132.209778 0H625.777778zM476.728889 747.52h-11.491556a52.337778 52.337778 0 0 0-51.768889 52.906667c0 29.240889 23.153778 52.906667 51.768889 52.906666h11.548445a52.337778 52.337778 0 0 0 51.768889-52.906666 52.337778 52.337778 0 0 0-51.768889-52.906667zM459.377778 341.333333c-30.151111 0-57.287111 4.892444-80.497778 14.620445a147.342222 147.342222 0 0 0-55.694222 39.879111c-45.795556 53.134222-38.684444 122.026667-37.717334 129.706667a47.616 47.616 0 0 0 53.020445 41.927111 48.241778 48.241778 0 0 0 41.073778-54.215111c0-0.284444-2.844444-32.881778 14.791111-53.361778 12.401778-14.392889 34.304-21.617778 65.024-21.617778 34.702222 0 57.059556 8.817778 66.503111 26.225778a44.600889 44.600889 0 0 1-3.982222 47.616l-93.184 125.383111a49.152 49.152 0 0 0 9.102222 67.868444 46.535111 46.535111 0 0 0 66.446222-9.272889l93.184-125.383111a143.246222 143.246222 0 0 0 11.377778-153.144889C590.051556 382.805333 548.807111 341.333333 459.377778 341.333333z"
+            fill="#e6e6e6" p-id="25487"></path>
+          <path
+            d="M941.852444 276.48L628.280889 0v217.941333c0 32.711111 29.354667 58.481778 62.236444 58.481778l251.335111 0.056889z"
+            fill="#e6e6e6" fill-opacity=".5" p-id="25488"></path>
+        </svg>
+        <div class="absolute bottom-0 right-0 flex-center transition">
+          <svg t="1779701373627" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+            p-id="24998" width="18" height="18">
+            <path
+              d="M843.307 742.24c0 3.217 2.607 5.824 5.824 5.824s5.824-2.607 5.824-5.824a5.823 5.823 0 0 0-5.824-5.824 5.823 5.823 0 0 0-5.824 5.824zM714.731 874.912c0 6.398 5.186 11.584 11.584 11.584s11.584-5.186 11.584-11.584-5.186-11.584-11.584-11.584-11.584 5.186-11.584 11.584zM541.419 943.2c0 9.614 7.794 17.408 17.408 17.408s17.408-7.794 17.408-17.408-7.794-17.408-17.408-17.408-17.408 7.794-17.408 17.408z m-186.56-9.152c0 12.795 10.373 23.168 23.168 23.168s23.168-10.373 23.168-23.168-10.373-23.168-23.168-23.168-23.168 10.373-23.168 23.168zM189.355 849.12c0 16.012 12.98 28.992 28.992 28.992s28.992-12.98 28.992-28.992-12.98-28.992-28.992-28.992-28.992 12.98-28.992 28.992zM74.731 704.736c0 19.228 15.588 34.816 34.816 34.816s34.816-15.588 34.816-34.816-15.588-34.816-34.816-34.816-34.816 15.588-34.816 34.816z m-43.008-177.28c0 22.41 18.166 40.576 40.576 40.576s40.576-18.166 40.576-40.576-18.166-40.576-40.576-40.576-40.576 18.166-40.576 40.576z m35.392-176.128c0 25.626 20.774 46.4 46.4 46.4s46.4-20.774 46.4-46.4c0-25.626-20.774-46.4-46.4-46.4-25.626 0-46.4 20.774-46.4 46.4z m106.176-142.016c0 28.843 23.381 52.224 52.224 52.224s52.224-23.381 52.224-52.224c0-28.843-23.381-52.224-52.224-52.224-28.843 0-52.224 23.381-52.224 52.224z m155.904-81.344c0 32.024 25.96 57.984 57.984 57.984s57.984-25.96 57.984-57.984-25.96-57.984-57.984-57.984-57.984 25.96-57.984 57.984z m175.104-5.056c0 35.24 28.568 63.808 63.808 63.808s63.808-28.568 63.808-63.808c0-35.24-28.568-63.808-63.808-63.808-35.24 0-63.808 28.568-63.808 63.808z m160.32 72.128c0 38.421 31.147 69.568 69.568 69.568s69.568-31.147 69.568-69.568-31.147-69.568-69.568-69.568-69.568 31.147-69.568 69.568z m113.92 135.488c0 41.638 33.754 75.392 75.392 75.392s75.392-33.754 75.392-75.392-33.754-75.392-75.392-75.392-75.392 33.754-75.392 75.392z m45.312 175.488c0 44.854 36.362 81.216 81.216 81.216s81.216-36.362 81.216-81.216c0-44.854-36.362-81.216-81.216-81.216-44.854 0-81.216 36.362-81.216 81.216z"
+              fill="#fff" p-id="24999"></path>
+          </svg>
+        </div>
+      </div>
+      <span class="mt-10 text-18">当前剧集解析中</span>
+      <span class="mt-10 text-14 text-888">当前剧集正在解析中，请耐心等待...</span>
+    </section>
+    <section v-else class="h-b100">
       <section v-if="list.length == 0" class="flex-center flex-col h-b100">
         <svg t="1779342435411" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
           p-id="25486" width="64" height="64">
@@ -10,7 +35,8 @@
             fill="#e6e6e6" fill-opacity=".5" p-id="25488"></path>
         </svg>
         <span class="mt-10">获取剧本解析失败，上传格式不匹配</span>
-    <span class="mt-16 text-888">剧本解析 Agent 未能准确识别出剧本中的“场次切换”与“角色对白”。建议您对照我们的 <el-link type="primary">《标准模板》</el-link>
+        <span class="mt-16 text-888">剧本解析 Agent 未能准确识别出剧本中的“场次切换”与“角色对白”。建议您对照我们的 <el-link
+            type="primary">《标准模板》</el-link>
           稍作调整后再试。</span>
         <div class="mt-20">
           <el-button text style="background-color: #f1f2f9;">返回项目管理</el-button>
@@ -26,8 +52,8 @@
             <div class="fw-bold fs-24">大炎神工：我靠折纸镇万妖</div>
             <div class="fs-12 text-888 flex-align-center mt-18">
               <div class="flex-align-center">
-            <svg t="1779344195727" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
-              p-id="34130" width="14" height="14">
+                <svg t="1779344195727" class="icon" viewBox="0 0 1024 1024" version="1.1"
+                  xmlns="http://www.w3.org/2000/svg" p-id="34130" width="14" height="14">
                   <path
                     d="M869.184 171.968l19.2 82.112a56.192 56.192 0 0 1-42.112 67.392L388.928 427.008h405.504a168.576 168.576 0 0 1 168.576 168.576v96.96a196.736 196.736 0 0 0-84.288-54.016v-43.008a84.288 84.288 0 0 0-84.288-84.288h-646.4v224.896a140.48 140.48 0 0 0 140.48 140.48h339.648a196.16 196.16 0 0 0 47.168 84.352H288.512a224.704 224.704 0 0 1-224.704-224.704V427.072a224.704 224.704 0 0 1 171.584-252.928l465.344-107.392a140.48 140.48 0 0 1 168.448 105.28z m-51.2 505.92a231.424 231.424 0 0 0 54.912 86.08 182.656 182.656 0 0 0 85.952 57.088 173.76 173.76 0 0 0-85.952 56 221.824 221.824 0 0 0-54.912 83.968 269.184 269.184 0 0 0-56.064-83.968 206.912 206.912 0 0 0-84.032-56 198.784 198.784 0 0 0 84.032-57.088 256 256 0 0 0 55.872-86.08z m-332.8-78.912a28.096 28.096 0 0 1 16.32 5.248l88 62.784a28.096 28.096 0 0 1 0 45.76l-88 62.784a28.096 28.096 0 0 1-44.416-22.848V627.072a28.096 28.096 0 0 1 28.096-28.096z m-187.84-352.64l-43.008 9.92-8.96 2.368a140.8 140.8 0 0 0-99.904 130.048v8.064l139.2-32 12.8-118.272z m246.784-56.96l-160 36.928-12.8 118.208 160-36.928z m175.488-40.512l-88.576 20.48-12.8 118.208 181.184-41.792-12.8-54.784a56.192 56.192 0 0 0-67.392-42.112z"
                     p-id="34131" fill="#888888"></path>
@@ -36,8 +62,8 @@
               </div>
               <div class="line-r mx-10"></div>
               <div class="flex-align-center">
-            <svg t="1779344798355" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
-              p-id="42381" width="16" height="16">
+                <svg t="1779344798355" class="icon" viewBox="0 0 1024 1024" version="1.1"
+                  xmlns="http://www.w3.org/2000/svg" p-id="42381" width="16" height="16">
                   <path
                     d="M844.288 128c27.5968 0 51.712 24.1152 51.712 51.712v664.576c0 27.5968-24.1152 51.712-51.712 51.712H179.712c-27.5968 0-51.712-24.1152-51.712-51.712V179.712c0-27.5968 24.1152-51.712 51.712-51.712h664.576z m12.288-64H167.424c-58.624 0-103.424 44.8-103.424 103.424v689.152c0 58.624 44.8 103.424 103.424 103.424h689.152c58.624 0 103.424-44.8 103.424-103.424V167.424c0-58.624-44.8-103.424-103.424-103.424z"
                     p-id="42382" fill="#888888"></path>
@@ -102,6 +128,8 @@
           <span class="ml-10">进入下一步</span>
         </div>
       </section>
+    </section>
+  </section>
 </template>
 <script setup lang="ts">
 import { ref } from 'vue';
@@ -109,6 +137,7 @@ import { ref } from 'vue';
 const list = ref([1]);
 const tags = ref(['悬疑', '古装', '奇幻', '爱情', '都市']);
 const colors = ['#5337C7', '#12d9d2', '#DD8330', '#C9397E', '#53B06C', '#155DFC']
+const loading = ref(true)
 // 根据colors数组长度生成随机颜色
 const randomColor = (index: number) => {
   return colors[index];
@@ -184,4 +213,22 @@ const changeSeries = (item: number, index: number) => {
   justify-content: space-between;
   align-items: center;
 }
+
+.transition {
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  background: #7c8fff;
+  animation: spin 0.8s linear infinite;
+
+  @keyframes spin {
+    0% {
+      transform: rotate(0deg);
+    }
+
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+}
 </style>
\ No newline at end of file

doc/h5/src/views/project/drama.vue

@@ -15,7 +15,7 @@ import StepOne from './components/StepOne.vue';
 import StepTwo from './components/StepTwo.vue';
 import StepThreeFour from './components/StepThreeFour.vue';
 
-const stepVal = ref(1);
+const stepVal = ref(0);
 const changeTab = (val: number) => {
   stepVal.value = val;
 }