选择库弹窗，完善表单新增

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

@@ -688,3 +688,19 @@ $numbers: (
     display: none;
   }
 }
+
+.el-dialog {
+  position: relative;
+  border-radius: 14px;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 80px;
+    background: linear-gradient(to bottom, #5476ff13, #ffffff00);
+    border-radius: 8px;
+  }
+}
\ No newline at end of file

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

+<template>
+  <div>
+    <svg v-if="modalType === 1" t="1779678288103" class="icon" viewBox="0 0 1024 1024" version="1.1"
+      xmlns="http://www.w3.org/2000/svg" p-id="12193" width="24" height="24">
+      <path
+        d="M512 597.333333a298.666667 298.666667 0 1 1 298.666667-298.666666 298.666667 298.666667 0 0 1-298.666667 298.666666z m0-512a213.333333 213.333333 0 1 0 213.333333 213.333334A213.333333 213.333333 0 0 0 512 85.333333z"
+        fill="#3f3f51" p-id="12194"></path>
+      <path
+        d="M855.04 1024H168.96a125.013333 125.013333 0 0 1-106.666667-59.946667 128 128 0 0 1-5.973333-126.08 514.773333 514.773333 0 0 1 231.893333-231.893333 84.053333 84.053333 0 0 1 97.706667 16.64L512 752l126.08-129.28a84.053333 84.053333 0 0 1 97.706667-16.64 514.773333 514.773333 0 0 1 231.893333 231.893333 128 128 0 0 1-5.973333 126.08 125.013333 125.013333 0 0 1-106.666667 59.946667zM324.693333 682.666667a436.693333 436.693333 0 0 0-192 193.706666 43.733333 43.733333 0 0 0 2.133334 42.666667 39.893333 39.893333 0 0 0 34.133333 19.626667h686.08a39.893333 39.893333 0 0 0 34.133333-19.626667 43.733333 43.733333 0 0 0 2.133334-42.666667 429.44 429.44 0 0 0-192-193.066666l-127.36 129.493333a83.413333 83.413333 0 0 1-119.893334 0z m343.893334-29.866667z"
+        fill="#3f3f51" p-id="12195"></path>
+    </svg>
+    <svg v-if="modalType === 2" t="1779678634023" class="icon" viewBox="0 0 1024 1024" version="1.1"
+      xmlns="http://www.w3.org/2000/svg" p-id="13327" width="24" height="24">
+      <path d="M98.88 219.824a107.824 106.064 90 1 0 212.128 0 107.824 106.064 90 1 0-212.128 0Z" p-id="13328"
+        fill="#3f3f51"></path>
+      <path
+        d="M238.8 525.2c78.704 0 154.816 193.904 261.92 193.904 107.12 0 140.832-326.592 262.352-326.592 121.536 0 214.8 260.384 247.296 372.896 32.512 112.512-4.672 148.32-168.928 148.32-164.272 0-685.904-7.024-751.296-7.024-65.408 0-104.8-49.28-60.192-144.24 44.592-94.976 130.144-237.28 208.848-237.28z"
+        p-id="13329" fill="#3f3f51"></path>
+    </svg>
+    <svg v-if="modalType === 3" t="1779678737829" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+      p-id="16155" width="24" height="24">
+      <path
+        d="M483.84 579.67a39.936 39.936 0 0 1 56.49 0l352 352a39.936 39.936 0 0 1-56.49 56.49l-352-352a39.936 39.936 0 0 1 0-56.49z m44.459-429.825a75.35 75.35 0 0 1 121.173 61.867l-4.95 187.904L799.66 506.197a75.35 75.35 0 0 1-21.334 134.315l-65.109 19.37a40.107 40.107 0 0 1-22.699-76.629l55.723-16.64-157.013-107.861a57.856 57.856 0 0 1-24.918-49.067l4.864-190.378-151.04 115.968a57.685 57.685 0 0 1-54.357 8.533l-179.627-63.573 63.659 179.541a57.856 57.856 0 0 1-8.704 54.443l-115.968 151.04 190.464-4.864a57.856 57.856 0 0 1 49.152 25.002L470.528 842.24l16.64-55.637a40.107 40.107 0 1 1 76.63 22.698l-19.286 64.939a75.35 75.35 0 0 1-134.315 21.333l-106.666-154.88-187.904 4.95a75.35 75.35 0 0 1-61.782-121.174l114.347-149.333-62.635-177.237-2.986-11.179a75.35 75.35 0 0 1 99.157-84.992l177.323 62.72 149.333-114.517zM894.89 289.11c0-1.45 2.218-1.45 2.218 0C903.083 320 928 344.832 958.891 350.891c1.536 0 1.536 2.218 0 2.218a78.933 78.933 0 0 0-61.782 61.782c0 1.45-2.218 1.45-2.218 0a78.933 78.933 0 0 0-61.782-61.782c-1.45 0-1.45-2.218 0-2.218a78.933 78.933 0 0 0 61.782-61.782zM798.037 1.963c0-2.56 3.926-2.56 3.926 0A138.24 138.24 0 0 0 910.08 109.995c2.56 0 2.56 3.925 0 3.925a138.24 138.24 0 0 0-108.117 108.117c0 2.56-3.926 2.56-3.926 0A138.24 138.24 0 0 0 690.005 113.92c-2.645 0-2.645-3.84 0-3.925A138.24 138.24 0 0 0 798.037 1.963z"
+        p-id="16156" fill="#3f3f51"></path>
+    </svg>
+  </div>
+</template>
+<script setup lang="ts">
+const props = defineProps({
+  modalType: {
+    type: Number,
+    default: 1,
+  },
+})
+</script>
\ No newline at end of file

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

+<template>
+  <el-dialog v-model="visible" width="700">
+    <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>
+    <div>
+      <div v-if="title === '角色库'" class="bg-f5 h-36 flex gap-8 rounded-8 p-2 cursor-pointer" style="width: 260px;">
+        <div class="flex-1 flex-center" :class="typeVal === 1 ? 'active' : ''" @click="typeVal = 1">虚拟人像库</div>
+        <div class="flex-1 flex-center" :class="typeVal === 2 ? 'active' : ''" @click="typeVal = 2">真人人像库</div>
+      </div>
+      <div v-else class="bg-f5 h-36 flex gap-8 w-b100 rounded-8 p-4 cursor-pointer" style="width: 260px;">
+        <div class="flex-1 flex-center" :class="typeVal === 1 ? 'active' : ''" @click="typeVal = 1">个人资产</div>
+        <div class="flex-1 flex-center" :class="typeVal === 2 ? 'active' : ''" @click="typeVal = 2">团队资产</div>
+      </div>
+      <div class="min-h-400">
+        <div class="h-400 flex-center flex-col">
+          <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>
+    </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">
+import { ref } from 'vue'
+import IconType from './IconType.vue';
+
+const props = defineProps({
+  title: {
+    type: String,
+    default: '新增',
+  },
+})
+
+const visible = ref(false)
+const typeVal = ref(1)
+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;
+}
+
+.active {
+  background: #fff;
+  border-radius: 8px;
+}
+</style>
\ No newline at end of file

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

@@ -46,7 +46,7 @@
             </div>
           </div>
           <div>
-            <el-button text :icon="Plus" class="hover" @click="open">新增角色</el-button>
+            <el-button text :icon="Plus" class="hover" @click="open(1)">新增角色</el-button>
             <el-button text :icon="DocumentCopy" class="hover">批量生成</el-button>
           </div>
         </div>
@@ -131,7 +131,7 @@
             </div>
           </div>
           <div>
-            <el-button text :icon="Plus" class="hover">新增场景</el-button>
+            <el-button text :icon="Plus" class="hover" @click="open(2)">新增场景</el-button>
             <el-button text :icon="DocumentCopy" class="hover">批量生成</el-button>
           </div>
         </div>
@@ -216,7 +216,7 @@
             </div>
           </div>
           <div>
-            <el-button text :icon="Plus" class="hover">新增道具</el-button>
+            <el-button text :icon="Plus" class="hover" @click="open(3)">新增道具</el-button>
             <el-button text :icon="DocumentCopy" class="hover">批量生成</el-button>
           </div>
         </div>
@@ -302,8 +302,9 @@ const changeTab = ref((index: number) => {
 const title = ref('新增角色')
 
 const editModalRef = ref()
-const open = () => {
-  editModalRef.value?.open()
+const open = (index: number) => {
+  title.value = ['新增角色', '新增场景', '新增道具'][index - 1]
+  editModalRef.value?.open(index)
 }
 
 </script>