继续完善上传的组件

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/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;
 }