写内部弹窗，视频查看，内部的交互

doc/h5/src/components/Aside.vue

@@ -89,7 +89,7 @@ watch(
   () => route.path,
   (path) => {
     indexvalue.value = routeIndexMap[path] ?? 0;
-    isShow.value = !!routeIndexMap[path]
+    isShow.value = !!routeIndexMap[path] || path === '/'
   },
   { immediate: true }
 );

doc/h5/src/static/styles/common.scss

@@ -660,7 +660,6 @@ $numbers: (
 }
 
 .text-over-1 {
-  width: 200px;
   /* 必须设置宽度 */
   white-space: nowrap;
   /* 强制文本不换行 */
@@ -691,7 +690,7 @@ $numbers: (
 
 .el-dialog {
   position: relative;
-  border-radius: 14px;
+  border-radius: 18px;
 
   &::before {
     content: '';

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

+<template>
+  <el-dialog v-model="visible" width="1200" align-center>
+    <template #header="{ close, titleId, titleClass }">
+      <div class="flex-align-center justify-between gap-8 mb-10">
+        <span class="fs-18">{{ title }}</span>
+        <el-button type="primary">确认{{ modalType === 1 ? '角色' : modalType === 2 ? '场景' : '道具' }}</el-button>
+      </div>
+    </template>
+    <div class="pb-10">
+      <div class="mb-10 fs-12">当前主图</div>
+      <div class="rounded-10 h-400 flex-center" style="background-color: #f9fafb;">
+        <img src="https://res.volccdn.com/obj/volc-console-fe/dramart/static/image/PIC3.22e42366.png"
+          class="h-b100 img rounded-10" alt="">
+      </div>
+      <div class="mt-20 editbox pt-20 h-200">
+        <RichTextEditor style="width: 768px;" class="mx-auto"/>
+      </div>
+    </div>
+  </el-dialog>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import RichTextEditor from './RichTextEditor.vue'
+
+const props = defineProps({
+  title: {
+    type: String,
+    default: '新增',
+  },
+})
+
+const visible = ref(false)
+const imageUrl = ref('')
+const modalType = ref(1) // 1:角色 2:场景 3:道具
+const open = (val: number) => {
+  modalType.value = val
+  visible.value = true
+}
+const close = () => {
+  visible.value = false
+}
+defineExpose({ open })
+</script>
+<style lang="scss" scoped>
+.cirir {
+  border: 1px solid #ccc;
+}
+
+.avatar-uploader {
+  width: 100%;
+
+  :deep(.el-upload) {
+    border: 2px dashed #ddd;
+    width: 100%;
+    height: 240px;
+    border-radius: 6px;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+    transition: all 0.3s;
+
+    &:hover {
+      border-color: #c5c5c5;
+    }
+  }
+}
+
+.editbox {
+  border-top: 1px solid #ddd;
+}
+</style>
\ No newline at end of file

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

+<template>
+  <el-dialog v-model="visible" width="700" align-center>
+    <template #header="{ close, titleId, titleClass }">
+      <div class="flex-align-center gap-8 mb-10">
+        <div class="cirir flex-center w-48 h-48 rounded-8">
+          <svg t="1779679636879" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+            p-id="19134" width="24" height="24">
+            <path
+              d="M296.533333 712.832a42.666667 42.666667 0 0 1 0 60.330667l-90.538666 90.538666a42.666667 42.666667 0 0 1-60.330667 0l-30.165333-30.165333a42.666667 42.666667 0 0 1 60.330666-60.373333l60.373334-60.330667a42.666667 42.666667 0 0 1 60.330666 0zM896 768a42.666667 42.666667 0 0 1 0 85.333333H426.666667a42.666667 42.666667 0 0 1 0-85.333333h469.333333zM296.533333 414.165333a42.666667 42.666667 0 0 1 0 60.330667l-90.538666 90.538667a42.666667 42.666667 0 0 1-60.330667 0l-30.165333-30.165334a42.666667 42.666667 0 0 1 60.330666-60.373333l60.373334-60.330667a42.666667 42.666667 0 0 1 60.330666 0zM896 469.333333a42.666667 42.666667 0 0 1 0 85.333334H426.666667a42.666667 42.666667 0 0 1 0-85.333334h469.333333zM296.533333 115.498667a42.666667 42.666667 0 0 1 0 60.330666L205.994667 266.368a42.666667 42.666667 0 0 1-60.330667 0l-30.165333-30.165333A42.666667 42.666667 0 0 1 175.829333 175.786667l60.373334-60.330667a42.666667 42.666667 0 0 1 60.330666 0zM896 170.666667a42.666667 42.666667 0 0 1 0 85.333333H426.666667a42.666667 42.666667 0 1 1 0-85.333333h469.333333z"
+              fill="#3f3f51" p-id="19135"></path>
+          </svg>
+        </div>
+        <span class="fs-18">批量生成</span>
+      </div>
+    </template>
+    <template #footer>
+      <div class="flex-between-center gap-8">
+        <el-button @click="close">全选</el-button>
+        <div>
+          <el-button @click="close">取消</el-button>
+          <el-button type="primary" @click="close">
+            <svg t="1779335788481" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+              p-id="9953" width="20" height="20">
+              <path
+                d="M408.8832 353.9968c40.7552-87.1424 61.0304-130.7648 92.7744-136.192a61.44 61.44 0 0 1 20.6848 0c31.744 5.4272 52.0192 49.0496 92.7744 136.192 7.8848 16.9984 11.8784 25.6 18.0224 32.3584a61.44 61.44 0 0 0 4.5056 4.5056c6.8608 6.144 15.36 10.1376 32.3584 18.0224 87.1424 40.7552 130.7648 61.0304 136.192 92.7744a61.44 61.44 0 0 1 0 20.6848c-5.4272 31.744-49.0496 52.0192-136.192 92.7744-16.9984 7.8848-25.6 11.8784-32.3584 18.0224a61.44 61.44 0 0 0-4.5056 4.5056c-6.144 6.8608-10.1376 15.36-18.0224 32.3584-40.7552 87.1424-61.0304 130.7648-92.7744 136.192a61.44 61.44 0 0 1-20.6848 0c-31.744-5.4272-52.0192-49.0496-92.7744-136.192-7.8848-16.9984-11.8784-25.6-18.0224-32.3584a61.44 61.44 0 0 0-4.5056-4.5056c-6.8608-6.144-15.36-10.1376-32.3584-18.0224-87.1424-40.7552-130.7648-61.0304-136.192-92.7744a61.44 61.44 0 0 1 0-20.6848c5.4272-31.744 49.0496-52.0192 136.192-92.7744 16.9984-7.8848 25.6-11.8784 32.3584-18.0224a61.44 61.44 0 0 0 4.5056-4.5056c6.144-6.8608 10.1376-15.36 18.0224-32.3584z"
+                p-id="9954" fill="#ffffff"></path>
+            </svg>876
+          </el-button>
+        </div>
+      </div>
+    </template>
+    <div>
+      <el-checkbox-group v-model="checkList" class="w-b100 flex flex-wrap gap-10">
+        <el-checkbox value="Value A" v-for="(item, index) in checkList" :key="index" class="itemrr rounded-8 p-10"
+          disabled>
+          <div class="flex opacity">
+            <img src="https://res.volccdn.com/obj/volc-console-fe/dramart/static/image/PIC3.22e42366.png"
+              class="w-40 h-40 rounded-6" />
+            <div class="ml-10 flex-1 flex flex-col">
+              <div class="flex-between-center text-333">
+                <span>林喜爱</span>
+                <div class="fs-12 text-over-1 w-140 px-10 py-4 rounded-40 tiptest" title="已完成设定，不支持批量生成">已完成设定，不支持批量生成
+                </div>
+              </div>
+              <div class="mt-10 fs-12 text-over-1 text-888" style="width: 230px">
+                便利店店员：细心，粗心细心，粗心细心，粗心细心，粗心细心，粗心
+              </div>
+            </div>
+          </div>
+        </el-checkbox>
+      </el-checkbox-group>
+      <div class="h-400 flex-center flex-col" v-if="checkList.length == 0">
+        <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="text-888 mt-10">暂无数据</div>
+      </div>
+    </div>
+  </el-dialog>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const visible = ref(false)
+const modalType = ref(1) // 1:角色 2:场景 3:道具
+const open = (val: number) => {
+  modalType.value = val
+  visible.value = true
+}
+const close = () => {
+  visible.value = false
+}
+const checkList = ref([])
+defineExpose({ open })
+</script>
+<style lang="scss" scoped>
+.cirir {
+  border: 1px solid #ccc;
+}
+
+.active {
+  background: #fff;
+  border-radius: 8px;
+}
+
+.itemrr {
+  flex: 0 0 calc(50% - 5px);
+  border: 2px solid #eee;
+  width: 100%;
+
+  .tiptest {
+    color: #ecb132;
+    background-color: #fff6e2;
+  }
+}
+
+:deep(.el-checkbox) {
+  height: auto;
+  margin-right: 0;
+
+  &.is-disabled {
+    .opacity {
+      opacity: 0.5;
+    }
+  }
+}
+</style>
\ No newline at end of file

doc/h5/src/views/project/components/RoleModal.vue → doc/h5/src/views/project/components/DepotModal.vue

@@ -32,13 +32,6 @@
         </div>
       </div>
     </div>
-
-    <!-- <template #footer>
-      <div class="flex-align-center justify-end gap-8">
-        <el-button @click="close">取消</el-button>
-        <el-button type="primary" @click="close"></el-button>
-      </div>
-    </template> -->
   </el-dialog>
 </template>
 <script setup lang="ts">

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

@@ -10,7 +10,7 @@
     </template>
 
     <template #footer>
-      <div class="flex-align-center justify-end gap-8">
+      <div class="flex-align-center justify-end">
         <el-button @click="close">取消</el-button>
         <el-button type="primary" @click="close">
           <svg t="1779335788481" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
@@ -128,20 +128,20 @@
           </el-upload>
         </el-form-item>
         <el-form-item v-if="xxType === 1" label="提示词" prop="name">
-          <el-input type="textarea" rows="4" v-model="ruleForm.name" placeholder="提示词" />
+          <el-input type="textarea" :rows="4" v-model="ruleForm.name" placeholder="提示词" />
         </el-form-item>
         <el-form-item :label="modalType === 1 ? '角色描述' : modalType === 2 ? '场景描述' : '道具描述'">
-          <el-input type="textarea" rows="4" v-model="ruleForm.name" placeholder="请输入描述" />
+          <el-input type="textarea" :rows="4" v-model="ruleForm.name" placeholder="请输入描述" />
         </el-form-item>
       </el-form>
     </section>
   </el-dialog>
-  <RoleModal ref="roleModalRef" :title="depotTitle" />
+  <DepotModal ref="depotModalRef" :title="depotTitle" />
 </template>
 <script setup lang="ts">
 import { ref, reactive } from 'vue';
-import {  Plus } from '@element-plus/icons-vue'
-import RoleModal from './RoleModal.vue';
+import { Plus } from '@element-plus/icons-vue'
+import DepotModal from './DepotModal.vue';
 import IconType from './IconType.vue';
 
 const props = defineProps({
@@ -164,7 +164,7 @@ const rules = reactive<any>({
   ],
 })
 
-const visible = ref(true)
+const visible = ref(false)
 const open = (n: number) => {
   modalType.value = n
   visible.value = true
@@ -174,11 +174,11 @@ const close = () => {
 }
 
 // 从资产库 中选择
-const roleModalRef = ref<any>()
+const depotModalRef = ref<any>()
 const depotTitle = ref('')
 const openRoleModal = () => {
   depotTitle.value = modalType.value === 1 ? '角色库' : modalType.value === 2 ? '场景库' : '道具库'
-  roleModalRef.value.open(modalType.value)
+  depotModalRef.value.open(modalType.value)
 }
 
 
@@ -208,8 +208,6 @@ const togglePlay = () => {
 }
 </script>
 <style lang="scss">
-
-
 .el-popover.el-popper {
   border-radius: 16px;
 }

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

+<template>
+  <el-dialog v-model="visible" width="600">
+    <template #header="{ close, titleId, titleClass }">
+      <div class="flex-align-center gap-8 mb-10">
+        <div class="cirir flex-center w-48 h-48 rounded-8">
+          <IconType :modalType="modalType" />
+        </div>
+        <span class="fs-18">{{ title }}选择</span>
+      </div>
+    </template>
+    <template #footer>
+      <div class="flex-align-center justify-end">
+        <el-button @click="close">取消</el-button>
+        <el-button type="primary" @click="close">确定</el-button>
+      </div>
+    </template>
+    <el-upload class="avatar-uploader mt-20" action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
+      :show-file-list="false">
+      <img v-if="imageUrl" :src="imageUrl" class="avatar" />
+      <div v-else class="flex-center flex-col line-h24 fs-12">
+        <el-icon size="20">
+          <Plus />
+        </el-icon>
+        <span class="mt-10 text-333"> 点击或拖拽图片到此处上传 </span>
+        <span>仅支持 JPG, PNG 格式</span>
+        <span>最大文件限制在 20MB 内</span>
+      </div>
+    </el-upload>
+    <div class="text-center mt-20 mb-40">支持 JPG、PNG 格式，单个文件不超过 20MB</div>
+  </el-dialog>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { Plus } from '@element-plus/icons-vue'
+import IconType from './IconType.vue';
+
+const props = defineProps({
+  title: {
+    type: String,
+    default: '新增',
+  },
+})
+
+const visible = ref(false)
+const imageUrl = ref('')
+const modalType = ref(1) // 1:角色 2:场景 3:道具
+const open = (val: number) => {
+  modalType.value = val
+  visible.value = true
+}
+const close = () => {
+  visible.value = false
+}
+defineExpose({ open })
+</script>
+<style lang="scss" scoped>
+.cirir {
+  border: 1px solid #ccc;
+}
+
+.avatar-uploader {
+  width: 100%;
+
+  :deep(.el-upload) {
+    border: 2px dashed #ddd;
+    width: 100%;
+    height: 240px;
+    border-radius: 6px;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+    transition: all 0.3s;
+
+    &:hover {
+      border-color: #c5c5c5;
+    }
+  }
+}
+</style>
\ No newline at end of file

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

+<template>
+  <div v-if="true" class="flex h-b100 gap-10">
+    <div class="flex-3 flex flex-col justify-between rounded-16 p-10 card1">
+      <div class="flex gap-4">
+        <div v-if="fileList.length > 0" class="relative w-36 h-36 rounded-4 overflow-hidden imgbox"
+          v-for="(item, index) in fileList" :key="index">
+          <img :src="item.url" class="w-b100 h-b100" />
+          <el-icon class="absolute right-2 top-2 del cursor-pointer" @click="delImg(index)">
+            <CircleCloseFilled />
+          </el-icon>
+        </div>
+        <el-upload v-model:file-list="fileList" action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
+          list-type="picture-card" class="custom-upload" :show-file-list="false">
+          <el-icon size="18">
+            <Plus />
+          </el-icon>
+        </el-upload>
+      </div>
+      <div class="flex-1 overflow-y-auto my-8 hide-scrollbar" style="max-height: 412px">
+        <div contenteditable="true" class="bg-f5 p-10 text-333 rounded-8 custom" style="min-height: 74px">
+        </div>
+      </div>
+      <div class="">
+        <div class="flex-between-center">
+          <div class="flex gap-6">
+            <el-select v-model="aiTypeVal" placeholder="Select" style="width: 200px;">
+              <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value" />
+            </el-select>
+            <el-select v-model="secondVal" placeholder="Select" style="width: 80px;">
+              <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value" />
+            </el-select>
+            <div v-if="isShowtip" class="hint flex-between-center px-10">
+              <div class="flex-align-center">
+                <el-icon color="#888">
+                  <Warning />
+                </el-icon>
+                <span class="ml-4 text-888 fs-12">提示词内容出现修改，请注意及时保存</span>
+              </div>
+              <el-button type="primary" text size="small" class="h-26 rounded-8"
+                @click="isShowtip = false">保存</el-button>
+            </div>
+          </div>
+          <div class="flex-align-center h-30 px-10 rounded-4 jinbi">
+            <svg t="1779335788481" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+              p-id="9953" width="20" height="20">
+              <path
+                d="M408.8832 353.9968c40.7552-87.1424 61.0304-130.7648 92.7744-136.192a61.44 61.44 0 0 1 20.6848 0c31.744 5.4272 52.0192 49.0496 92.7744 136.192 7.8848 16.9984 11.8784 25.6 18.0224 32.3584a61.44 61.44 0 0 0 4.5056 4.5056c6.8608 6.144 15.36 10.1376 32.3584 18.0224 87.1424 40.7552 130.7648 61.0304 136.192 92.7744a61.44 61.44 0 0 1 0 20.6848c-5.4272 31.744-49.0496 52.0192-136.192 92.7744-16.9984 7.8848-25.6 11.8784-32.3584 18.0224a61.44 61.44 0 0 0-4.5056 4.5056c-6.144 6.8608-10.1376 15.36-18.0224 32.3584-40.7552 87.1424-61.0304 130.7648-92.7744 136.192a61.44 61.44 0 0 1-20.6848 0c-31.744-5.4272-52.0192-49.0496-92.7744-136.192-7.8848-16.9984-11.8784-25.6-18.0224-32.3584a61.44 61.44 0 0 0-4.5056-4.5056c-6.8608-6.144-15.36-10.1376-32.3584-18.0224-87.1424-40.7552-130.7648-61.0304-136.192-92.7744a61.44 61.44 0 0 1 0-20.6848c5.4272-31.744 49.0496-52.0192 136.192-92.7744 16.9984-7.8848 25.6-11.8784 32.3584-18.0224a61.44 61.44 0 0 0 4.5056-4.5056c6.144-6.8608 10.1376-15.36 18.0224-32.3584z"
+                p-id="9954" fill="#ffffff"></path>
+            </svg>
+            <span class="text-fff ml-4">882</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { Plus } from '@element-plus/icons-vue'
+
+const isShowtip = ref(true)
+const aiTypeVal = ref('1')
+const secondVal = ref(5)
+
+
+
+const options1 = [
+  {
+    value: '1',
+    label: 'DouBao-hahyha-1.0',
+  },
+  {
+    value: '2',
+    label: 'DouBao-hahyha-12.0'
+  },
+]
+const options2 = [
+  {
+    value: 1,
+    label: '1张',
+  },
+  {
+    value: 2,
+    label: '2张',
+  },
+  {
+    value: 4,
+    label: '4张',
+  },
+  {
+    value: 9,
+    label: '9张',
+  },
+]
+const fileList = ref([
+  {
+    name: 'food.jpeg',
+    url: 'https://res.volccdn.com/obj/volc-console-fe/dramart/static/image/PIC3.22e42366.png',
+  },
+  {
+    name: 'food1.jpeg',
+    url: 'https://res.volccdn.com/obj/volc-console-fe/dramart/static/image/PIC3.22e42366.png',
+  }
+])
+
+const delImg = (index: number) => {
+  fileList.value.splice(index, 1)
+}
+
+const videoIndex = ref(0)
+const changeVideo = (item: any, index: number) => {
+  videoIndex.value = index
+}
+
+</script>
+
+<style scoped lang="scss">
+.card1 {
+  border: 1px solid #5252ff;
+  box-shadow: 0px 0px 3px 1px rgba(177, 177, 255, 1.3);
+
+  .imgbox {
+    .del {
+      display: none;
+    }
+
+    &:hover {
+      .del {
+        display: inline-block;
+      }
+    }
+  }
+
+  /* 控制上传卡片的大小 */
+  .custom-upload :deep(.el-upload--picture-card) {
+    width: 36px;
+    height: 36px;
+    --el-upload-picture-card-size: 36px;
+    /* 修改 Element Plus 变量 */
+  }
+
+  .hint {
+    border: 1px solid #e5e7eb;
+    border-radius: 8px;
+  }
+
+  .jinbi {
+    background-color: #5252ff;
+
+    &:hover {
+      background-color: #4747e7;
+    }
+  }
+}
+
+.bg-2b303a {
+  background-color: #2b303a;
+}
+.custom {
+  outline: none;
+  box-shadow: none;
+  border-color: transparent;
+}
+
+.fjitem {
+  border: 1px solid #ddd;
+  padding: 1px;
+
+  &.active {
+    border: 1px solid #5252ff;
+  }
+}
+
+:deep(.el-select__wrapper) {
+  min-height: 30px;
+  border-radius: 8px;
+}
+</style>

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

 <template>
-  <section class="flex h-b100">
-    <section class="aside flex-align-center flex-col">
-      <span class="py-16">集数</span>
-      <div class="flex-1 flex-align-center flex-col gap-10 overflow-y-auto hide-scrollbar">
-        <div v-for="(item, index) in 100" :key="index"
-          class="cursor-pointer w-36 min-h-36 rounded-4 flex-center text-888 jj"
-          :class="indexVal === index ? 'active' : ''">
-          {{ index + 1 }}</div>
+  <section class="flex flex-col w-b100 box">
+    <div class="flex-between-center py-20 px-36">
+      <span class="bg-fff py-6 px-14 rounded-4 boxshadow-1">分镜表</span>
+      <div class="flex gap-10">
+        <el-select v-model="aiTypeVal" placeholder="Select" style="width: 200px;">
+          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+        </el-select>
+        <el-button class="hover">
+          <svg t="1779679636879" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+            p-id="19134" width="16" height="16">
+            <path
+              d="M296.533333 712.832a42.666667 42.666667 0 0 1 0 60.330667l-90.538666 90.538666a42.666667 42.666667 0 0 1-60.330667 0l-30.165333-30.165333a42.666667 42.666667 0 0 1 60.330666-60.373333l60.373334-60.330667a42.666667 42.666667 0 0 1 60.330666 0zM896 768a42.666667 42.666667 0 0 1 0 85.333333H426.666667a42.666667 42.666667 0 0 1 0-85.333333h469.333333zM296.533333 414.165333a42.666667 42.666667 0 0 1 0 60.330667l-90.538666 90.538667a42.666667 42.666667 0 0 1-60.330667 0l-30.165333-30.165334a42.666667 42.666667 0 0 1 60.330666-60.373333l60.373334-60.330667a42.666667 42.666667 0 0 1 60.330666 0zM896 469.333333a42.666667 42.666667 0 0 1 0 85.333334H426.666667a42.666667 42.666667 0 0 1 0-85.333334h469.333333zM296.533333 115.498667a42.666667 42.666667 0 0 1 0 60.330666L205.994667 266.368a42.666667 42.666667 0 0 1-60.330667 0l-30.165333-30.165333A42.666667 42.666667 0 0 1 175.829333 175.786667l60.373334-60.330667a42.666667 42.666667 0 0 1 60.330666 0zM896 170.666667a42.666667 42.666667 0 0 1 0 85.333333H426.666667a42.666667 42.666667 0 1 1 0-85.333333h469.333333z"
+              fill="#3f3f51" p-id="19135"></path>
+          </svg><span class="ml-4">批量生视频</span></el-button>
       </div>
-    </section>
-    <section class="flex flex-col w-b100 box">
-      <div class="flex-between-center py-20 px-36">
-        <span class="bg-fff py-6 px-14 rounded-4 boxshadow-1">分镜表</span>
-        <div class="flex gap-10">
-          <el-select v-model="aiTypeVal" placeholder="Select" style="width: 200px;">
-            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
-          </el-select>
-          <el-button :icon="DocumentCopy" class="hover">批量生成</el-button>
-        </div>
+    </div>
+    <div class="flex-1 overflow-y-auto px-36 hide-scrollbar">
+      <div class="fw-bold">第1集 凌晨的咖啡与雨</div>
+      <div class="fs-12 text-666 mt-4">
+        林夏在雨夜来到便利店，与店员阿哲交谈。她倾诉人际关系的疲惫与困惑，阿哲以温和的话语给予慰藉。
+        <el-popover placement="bottom" :width="400">
+          <template #reference>
+            <el-button text><span class="fs-12">详情</span></el-button>
+          </template>
+          <div class="max-h-200 overflow-y-auto">
+            <p>林夏在雨夜来到便利店，与店员阿哲交谈。她倾诉人际关系的疲惫与困惑，阿哲以温和的话语给予慰藉。</p>
+            <p>林夏在雨夜来到便利店，与店员阿哲交谈。她倾诉人际关系的疲惫与困惑，阿哲以温和的话语给予慰藉。</p>
+            <p>林夏在雨夜来到便利店，与店员阿哲交谈。她倾诉人际关系的疲惫与困惑，阿哲以温和的话语给予慰藉。</p>
+          </div>
+        </el-popover>
       </div>
-      <div class="flex-1 overflow-y-auto px-36 hide-scrollbar">
-        <div class="fw-bold">第1集 凌晨的咖啡与雨</div>
-        <div class="fs-12 text-666 mt-4">
-          林夏在雨夜来到便利店，与店员阿哲交谈。她倾诉人际关系的疲惫与困惑，阿哲以温和的话语给予慰藉。
-          <el-popover placement="bottom" :width="400">
-            <template #reference>
-              <el-button text><span class="fs-12">详情</span></el-button>
-            </template>
-            <div class="max-h-200 overflow-y-auto">
-              <p>林夏在雨夜来到便利店，与店员阿哲交谈。她倾诉人际关系的疲惫与困惑，阿哲以温和的话语给予慰藉。</p>
-              <p>林夏在雨夜来到便利店，与店员阿哲交谈。她倾诉人际关系的疲惫与困惑，阿哲以温和的话语给予慰藉。</p>
-              <p>林夏在雨夜来到便利店，与店员阿哲交谈。她倾诉人际关系的疲惫与困惑，阿哲以温和的话语给予慰藉。</p>
-            </div>
-          </el-popover>
-        </div>
-        <Episode />
-      </div>
-    </section>
+      <Episode />
+    </div>
   </section>
 </template>
 <script setup lang="ts">
@@ -57,7 +52,9 @@ const options = [
   },
 ]
 
-
+const changeJi = (item: any, index: number) => {
+  indexVal.value = index
+}
 
 
 

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

+<template>
+  <section class="flex h-b100">
+    <section class="aside flex-align-center flex-col">
+      <span class="py-16">集数</span>
+      <div class="flex-1 flex-align-center flex-col gap-10 overflow-y-auto hide-scrollbar">
+        <div v-for="(item, index) in 100" :key="index"
+          class="cursor-pointer w-36 min-h-36 rounded-4 flex-center text-888 jj"
+          :class="indexVal === index ? 'active' : ''" @click="changeJi(item, index)">
+          {{ index + 1 }}</div>
+      </div>
+    </section>
+    <StepThree v-if="stepVal === 2" />
+    <StepFour v-if="stepVal === 3" />
+  </section>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import StepThree from './StepThree.vue';
+import StepFour from './StepFour.vue';
+
+const props = defineProps({
+  stepVal: {
+    type: Number,
+    default: 2
+  }
+})
+
+const indexVal = ref(0)
+const changeJi = (item: any, index: number) => {
+  indexVal.value = index
+}
+</script>
+
+<style lang="scss" scoped>
+.aside {
+  width: 60px;
+  border-right: 1px solid #eee;
+
+  .jj {
+    border: 1px solid #ddd;
+
+    &.active {
+      border: 1px solid #5252ff;
+      background: #5252ff;
+      color: #fff;
+    }
+  }
+}
+</style>
\ No newline at end of file

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

+<template>
+  <div class="fixed top-0 left-0 w-b100 h-b100 bg-000" :style="{display: visible ? 'block': 'none'}" @click="close">
+    <div class="h-36 w-36 rounded-44 bg-000 flex-center cursor-pointer absolute top-30 right-30" @click="close">
+      <el-icon size="18" color="#fff"><Close /></el-icon>
+    </div>
+    <div class="h-b100 flex-center">
+      <video :src="src" controls class="vw" @click.stop></video>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, computed } from 'vue'
+import { Close } from '@element-plus/icons-vue'
+
+
+const props = defineProps({
+  src: {
+    type: String,
+    default: ''
+  }
+})
+
+const visible = ref(false)
+
+const open = () => {
+  visible.value = true
+}
+
+const close = () => {
+  visible.value = false
+}
+
+defineExpose({
+  open,
+  close
+})
+
+</script>
+<style scoped lang="scss">
+.bg-000 {
+  background: rgba(0, 0, 0, 0.6);
+  z-index: 9999;
+}
+.vw {
+  width: 70%;
+}
+
+</style>
\ No newline at end of file

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

 <template>
   <div class="flex flex-col h-b100">
-    <DramaHeader @change-tab="changeTab" :indexVal="indexVal" />
+    <DramaHeader @change-tab="changeTab" :indexVal="stepVal" />
     <div class="flex-1 overflow-y-auto">
-      <StepOne v-if="indexVal === 0" @next="next" />
-      <StepTwo v-if="indexVal === 1" @next="next" />
-      <StepThree v-if="indexVal === 2" />
-      <StepFour v-if="indexVal === 3" @next="next" />
+      <StepOne v-if="stepVal === 0" @next="next" />
+      <StepTwo v-if="stepVal === 1" @next="next" />
+      <StepThreeFour v-if="stepVal === 2 || stepVal === 3" :stepVal="stepVal" @next="next"/>
     </div>
   </div>
 </template>
@@ -14,16 +13,15 @@ import { ref } from 'vue';
 import DramaHeader from './components/DramaHeader.vue';
 import StepOne from './components/StepOne.vue';
 import StepTwo from './components/StepTwo.vue';
-import StepThree from './components/StepThree.vue';
-import StepFour from './components/StepFour.vue';
+import StepThreeFour from './components/StepThreeFour.vue';
 
-const indexVal = ref(1);
+const stepVal = ref(1);
 const changeTab = (val: number) => {
-  indexVal.value = val;
+  stepVal.value = val;
 }
 
 const next = (val: number) => {
-  indexVal.value = val;
+  stepVal.value = val;
 }