新增角色

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

+<template>
+  <el-dialog v-model="visible" width="700">
+    <template #header="{ close, titleId, titleClass }">
+      <div class="flex-align-center gap-8 mb-20">
+        <div class="cirir flex-center w-40 h-40 rounded-8">
+          <el-icon>
+            <User />
+          </el-icon>
+        </div>
+        <span class="fs-16">{{ title }}</span>
+      </div>
+    </template>
+
+    <template #footer>
+      <div class="flex-align-center gap-8">
+        <el-button @click="close">取消</el-button>
+        <el-button type="primary" @click="close">小星星</el-button>
+      </div>
+    </template>
+
+    <section>
+      <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-position="top">
+        <div class="flex gap-20">
+          <el-form-item class="flex-1" label="名称" prop="name">
+            <el-input v-model="ruleForm.name" />
+          </el-form-item>
+          <el-form-item class="flex-1" label="性别" prop="name">
+            <el-select v-model="ruleForm.region" placeholder="Activity zone">
+              <el-option label="男" :value="1" />
+              <el-option label="女" :value="2" />
+              <el-option label="其他（动物）" :value="3" />
+            </el-select>
+          </el-form-item>
+        </div>
+        <div class="flex gap-20">
+          <el-form-item class="flex-1" label="年龄" prop="name">
+            <el-select v-model="ruleForm.region" placeholder="Activity zone">
+              <el-option v-for="(item, index) in options1" :key="index" :label="item.name" :value="item.value" />
+            </el-select>
+          </el-form-item>
+          <el-form-item class="flex-1" label="音色选择" prop="name">
+            <el-input v-model="ruleForm.name" />
+          </el-form-item>
+        </div>
+        <el-form-item class="flex-1" label="形象生成方式" prop="name">
+          <div class="bg-f5 h-44 flex gap-8 w-b100 rounded-8 p-4 cursor-pointer">
+            <div class="flex-1 flex-center" :class="xxType === 1 ? 'active' : ''" @click="xxType = 1">AI生成</div>
+            <div class="flex-1 flex-center" :class="xxType === 2 ? 'active' : ''" @click="xxType = 2">从角色库选择</div>
+            <div class="flex-1 flex-center" :class="xxType === 3 ? 'active' : ''" @click="xxType = 3">本地上传</div>
+          </div>
+          <el-upload v-if="xxType === 3" class="avatar-uploader mt-20" action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
+            :show-file-list="false">
+            <img v-if="ruleForm.imageUrl" :src="ruleForm.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></div>
+        </el-form-item>
+      </el-form>
+    </section>
+  </el-dialog>
+</template>
+<script setup lang="ts">
+import { ref, reactive } from 'vue';
+import { User, Plus } from '@element-plus/icons-vue'
+
+const props = defineProps({
+  title: {
+    type: String,
+    default: '新增',
+  },
+})
+const xxType = ref(1)
+const ruleFormRef = ref<any>()
+const ruleForm = reactive<any>({
+  name: '',
+  imageUrl: '',
+})
+
+const rules = reactive<any>({
+  name: [
+    { required: true, message: 'Please input Activity name', trigger: 'blur' },
+  ],
+})
+
+const visible = ref(true)
+const open = () => {
+  visible.value = true
+}
+const close = () => {
+  visible.value = false
+}
+defineExpose({
+  open,
+})
+
+const options1 = [
+  { name: '儿童', value: 1 },
+  { name: '少年', value: 2 },
+  { name: '青年', value: 3 },
+  { name: '中年', value: 4 },
+  { name: '老年', value: 5 },
+]
+</script>
+<style lang="scss">
+.el-dialog {
+  position: relative;
+  border-radius: 14px;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100px;
+    background: linear-gradient(to bottom, #141b361c, #ffffff00);
+    border-radius: 8px;
+  }
+}
+</style>
+<style lang="scss" scoped>
+.cirir {
+  border: 1px solid #ccc;
+}
+
+.active {
+  background: #fff;
+  border-radius: 8px;
+}
+
+.avatar-uploader {
+  width: 100%;
+
+  :deep(.el-upload) {
+    border: 1px 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/Episode.vue

 <template>
-  <draggable v-model="list" item-key="id" class="list-group" @end="onDragEnd" handle=".tuoz">
+  <draggable v-model="list" item-key="id" class="list-group" @move="isHidden = true" @start="isHidden = true"  @end="onDragEnd" handle=".tuoz">
     <template #item="{ element, index }">
       <section class="box rounded-16 p-10 my-10" style="min-width: 1110px;">
         <div class="flex-align-center justify-between">
           <div class="flex-align-center gap-4">
             <div class="relative">
               <div class="tuoz flex-align-center" id="anzhu" @mousedown="isHidden = true" @mouseup="isHidden = false"
-                @mouseleave="isHidden = false">
+                @mouseleave="isHidden = false" @touchstart="isHidden = true" @touchend="isHidden = false">
                 <img src="@/static/imgs/tuoz.png" alt="" class="h-16">
               </div>
             </div>
-            <span class="fs-12">分镜{{ index+1 }}</span>
+            <span class="fs-12">分镜{{ index + 1 }}</span>
             <span class="fs-10 py-2 px-4 rounded-4 bg-e3e9ff">ID</span>
             <div class="flex-align-center ml-10 bg-f4f6ff py-6 px-14 rounded-8 btnsborder gap-4">
               <el-icon color="#5252ff" size="14">
@@ -274,6 +274,7 @@ const list = ref([
 ])
 
 const onDragEnd = (evt: any) => {
+  isHidden.value = false
   console.log('拖拽结束', list.value)
 }
 

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

@@ -46,7 +46,7 @@
             </div>
           </div>
           <div>
-            <el-button text :icon="Plus" class="hover">新增角色</el-button>
+            <el-button text :icon="Plus" class="hover" @click="open">新增角色</el-button>
             <el-button text :icon="DocumentCopy" class="hover">批量生成</el-button>
           </div>
         </div>
@@ -285,11 +285,12 @@
       <span class="ml-10">进入下一步</span>
     </div>
   </section>
+  <EditModal ref="editModalRef" :title="title" />
 </template>
 <script setup lang="ts">
 import { ref } from 'vue';
 import { CloseBold, Plus, DocumentCopy, MagicStick, FolderAdd, Download, MoreFilled, Delete } from '@element-plus/icons-vue'
-
+import EditModal from './EditModal.vue';
 
 const isShowtip = ref(true)
 const indexTab = ref(0)
@@ -298,6 +299,13 @@ const changeTab = ref((index: number) => {
   indexTab.value = index
 })
 
+const title = ref('新增角色')
+
+const editModalRef = ref()
+const open = () => {
+  editModalRef.value?.open()
+}
+
 </script>
 <style lang="scss" scoped>
 .hint {

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

@@ -17,7 +17,7 @@ import StepTwo from './components/StepTwo.vue';
 import StepThree from './components/StepThree.vue';
 import StepFour from './components/StepFour.vue';
 
-const indexVal = ref(2);
+const indexVal = ref(1);
 const changeTab = (val: number) => {
   indexVal.value = val;
 }