Skip to content

Y
yaoai-video
Commit 6653de75 authored by 黄同智's avatar 黄同智
Browse files
Options

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

parent 5c22d17c
Hide whitespace changes
Inline Side-by-side
Showing with 832 additions and 199 deletions
doc/h5/src/components/Aside.vue
View file @ 6653de75
......@@ -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
View file @ 6653de75
......@@ -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 0 → 100644
View file @ 6653de75
<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 0 → 100644
View file @ 6653de75
<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
View file @ 6653de75
......@@ -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
View file @ 6653de75
......@@ -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/Episode.vue
View file @ 6653de75
<template>
<draggable v-model="list" item-key="id" class="list-group" @move="isHidden = true" @start="isHidden = true" @end="onDragEnd" handle=".tuoz">
<template #item="{ element, index }">
<draggable v-model="list" item-key="id" class="list-group" @move="isHidden = true" @start="isHidden = true"
@end="onDragEnd" handle=".tuoz">
<template #item="{ ele, 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">
......@@ -20,9 +21,9 @@
</div>
</div>
<div class="">
<el-button text :icon="Plus" circle />
<el-button text :icon="CopyDocument" circle />
<el-button text :icon="Delete" circle />
<el-button text :icon="Plus" circle @click="changeList('add', index)" />
<el-button text :icon="CopyDocument" circle @click="changeList('copy', index, ele)" />
<el-button text :icon="Delete" circle @click="changeList('del', index)" />
</div>
</div>
<div class="flex gap-10 h-b100" :style="{ display: isHidden ? 'none' : 'flex' }">
......@@ -48,7 +49,7 @@
</el-select>
<el-button :icon="MoreFilled" style="padding-left: 8px;padding-right: 8px;border-radius: 8px;" />
</div>
<Empty v-if="1 == 2" text="暂未选择出镜角色" />
<Empty v-if="false" text="暂未选择出镜角色" />
</div>
</div>
<div class="mt-20">
......@@ -67,7 +68,7 @@
<el-button :icon="MoreFilled" style="padding-left: 8px;padding-right: 8px;border-radius: 8px;" />
</div>
</div>
<Empty v-if="1 == 2" text="暂未选择分镜场景" />
<Empty v-if="false" text="暂未选择分镜场景" />
</div>
</div>
<div class="mt-20">
......@@ -84,7 +85,7 @@
</el-select>
<el-button :icon="MoreFilled" style="padding-left: 8px;padding-right: 8px;border-radius: 8px;" />
</div>
<Empty v-if="1 == 2" text="暂未选择场景道具" />
<Empty v-if="false" text="暂未选择场景道具" />
</div>
</div>
</div>
......@@ -92,14 +93,39 @@
<section class="flex-1 flex flex-col bg-fff rounded-16 p-10 mt-10 right">
<div class="flex-between-center">
<span>分镜视频生成</span>
<el-icon color="#888" size="12">
<DocumentCopy />
</el-icon>
<div title="生成历史">
<el-popover placement="left" :width="300" trigger="click">
<template #reference>
<el-button text circle>
<svg t="1779695410408" class="icon" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="20349" width="16" height="16">
<path
d="M511.73808594 93.19941406c-140.67070313 0-264.92695313 69.1453125-341.01035156 175.08955078v-70.47597656c0-21.66767578-17.61679688-39.22998047-39.346875-39.22998047s-39.346875 17.56318359-39.346875 39.22998047v156.91992188c0 21.66240234 17.61679688 39.22998047 39.346875 39.22998047h170.50341796c21.73007813 0 39.346875-17.56669922 39.346875-39.22998047 0-21.66767578-17.61679688-39.22998047-39.346875-39.22998047h-68.4421875c61.73085937-86.98798828 163.28496094-143.84267578 278.296875-143.84267578 188.32851562 0 341.00507812 152.22128906 341.00507813 339.99345703 0 187.76865234-152.6765625 339.99345703-341.00507813 339.99345703-158.73574219 0-291.74589844-108.29179688-329.75771484-254.70439453l-0.68291016 0.21269531c-5.3015625-15.41162109-19.54248047-26.65986328-36.8024414-26.65986328-21.73007813 0-39.346875 17.56318359-39.346875 39.22558594 0 3.86630859 1.16367187 7.36875 2.20605469 10.89316406l-0.40957032 0.12919922c0.25839844 0.95009766 0.73212891 1.8 0.99580078 2.74482422 0.28916016 0.76201172 0.48164063 1.52314453 0.81650391 2.2640625 49.92539062 175.47011719 210.98935547 304.35380859 402.98378906 304.35380859 231.79394531 0 419.69970703-187.35029297 419.69970703-418.45341797-0.00175781-231.10751953-187.90839844-418.45429688-419.70322265-418.45429687z m0 176.53183594c-21.73007813 0-39.346875 17.56318359-39.346875 39.22998047v235.37988281c0 21.66767578 17.61679688 39.22998047 39.346875 39.22998047h170.50253906c21.73007813 0 39.346875-17.56318359 39.346875-39.22558594 0-21.67119141-17.61679688-39.22998047-39.346875-39.22998047H551.08496094v-196.15429687c0-21.66767578-17.61767578-39.22998047-39.34775391-39.22998047z"
p-id="20350" fill="#3f3f51"></path>
</svg>
</el-button>
</template>
<div>
<div class="flex-between-center mb-10">
<span>分镜视频生成历史</span>
<span>工1个</span>
</div>
<div class="flex-align-center gap-4 mt-10">
<div v-for="(item, index) in 2" :key="index" class="fjitem flex rounded-4 cursor-pointer active"
@click="lookHistory(ele)">
<img class="h-36 w-50 rounded-4"
src="https://res.volccdn.com/obj/volc-console-fe/dramart/static/image/PIC3.22e42366.png"
alt="">
</div>
</div>
</div>
</el-popover>
</div>
</div>
<div class="flex h-b100 mt-10 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-40 h-40 rounded-4 overflow-hidden imgbox"
<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)">
......@@ -119,14 +145,14 @@
</div>
</div>
<div class="">
<div v-if="isShowtip" class="hint flex-between-center px-10">
<div v-if="isShowtip" class="hint flex-between-center pl-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-32 rounded-8"
<el-button type="primary" text size="small" class="h-26 rounded-8"
@click="isShowtip = false">保存</el-button>
</div>
<div class="flex-between-center mt-6">
......@@ -151,7 +177,7 @@
</div>
</div>
</div>
<div class="flex-2 flex flex-col rounded-12 card2 overflow-hidden" style="background: #fafbfd">
<div class="flex-2 flex flex-col rounded-12 overflow-hidden" style="background: #fafbfd">
<video src="@/static/imgs/mp4.mp4" class="w-b100 bg-2b303a flex-1" controls></video>
<div class="flex-center gap-4 px-20 mt-10">
<div v-for="(item, index) in 2" :key="index" class="fjitem flex rounded-8 cursor-pointer"
......@@ -167,18 +193,21 @@
</section>
</template>
</draggable>
<VideoPlayModal ref="videoPlayModalRef" src="@/static/imgs/mp4.mp4" v-model:visible="showDialog" />
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { Plus, DocumentCopy, CopyDocument, CircleCloseFilled, MoreFilled, Delete, HelpFilled, Warning } from '@element-plus/icons-vue'
import { Plus, CopyDocument, CircleCloseFilled, MoreFilled, Delete, HelpFilled, Warning } from '@element-plus/icons-vue'
import Empty from './Empty.vue';
import draggable from 'vuedraggable'
import VideoPlayModal from './VideoPlayModal.vue';
const fenjDesc = ref('')
const aiTypeVal = ref('1')
const isShowtip = ref(true)
const aiTypeVal = ref('1')
const secondVal = ref(5)
const isHidden = ref(false)
const showDialog = ref(false)
const options = [
{
......@@ -258,6 +287,31 @@ const fileList = ref([
}
])
// 分镜的 新增，copy，删除
const changeList = (type: string, index: number, item?: any) => {
if (type === 'add') {
list.value.push({
id: list.value.length + 1,
name: `凌晨的咖啡与雨`,
time: '00:00:00'
})
} else if (type === 'copy') { // 复制
list.value.push({
id: list.value.length + 1,
name: `凌晨的咖啡与雨`,
time: '00:00:00'
})
} else if (type === 'del') { // 删除
list.value.splice(index, 1)
}
}
// 查看生成历史
const videoPlayModalRef = ref()
const lookHistory = (item: any) => {
videoPlayModalRef.value?.open()
}
const delImg = (index: number) => {
fileList.value.splice(index, 1)
}
......@@ -267,10 +321,8 @@ const changeVideo = (item: any, index: number) => {
videoIndex.value = index
}
const list = ref([
const list: any = ref([
{ id: 1, name: '第1集 凌晨的咖啡与雨', time: '00:00:00' },
{ id: 2, name: '第2集 早餐的阳光与微笑', time: '00:00:00' },
{ id: 3, name: '第3集 午餐的温暖与关怀', time: '00:00:00' },
])
const onDragEnd = (evt: any) => {
......@@ -281,7 +333,7 @@ const onDragEnd = (evt: any) => {
</script>
<style lang="scss" scoped>
.box {
border: 1px solid #ddd;
border: 1px solid #eee;
.bg-f4f6ff {
background-color: #f4f6ff;
......@@ -343,9 +395,9 @@ const onDragEnd = (evt: any) => {
/* 控制上传卡片的大小 */
.custom-upload :deep(.el-upload--picture-card) {
width: 40px;
height: 40px;
--el-upload-picture-card-size: 40px;
width: 36px;
height: 36px;
--el-upload-picture-card-size: 36px;
/* 修改 Element Plus 变量 */
}
......@@ -371,12 +423,4 @@ const onDragEnd = (evt: any) => {
.tuoz {
cursor: all-scroll;
}
// .content1 {
// // display: inline-block;
// }
// section.box:has(#anzhu:active) .content1 {
// display: none !important;
// }
</style>
\ No newline at end of file
doc/h5/src/views/project/components/LocalUploadModal.vue 0 → 100644
View file @ 6653de75
<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 0 → 100644
View file @ 6653de75
<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/StepFour.vue
View file @ 6653de75
<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>
</div>
</section>
<section class="flex flex-col h-b100 flex-1 px-20 pt-20">
<div class="flex-1 flex flex-col h-b100 overflow-hidden">
<div class="bg-000 rounded-16 flex-center flex-1 h-b100 overflow-hidden">
<div class="h-b100 w-b100 flex-center">
<div class="h-b100 w-b100 flex-between-center bg-000 rounded-16 relative">
<div class="h-b100 w-b100 flex-center relative">
<div class="h-b100 w-b100 flex-center" style="aspect-ratio: 16 / 9;">
<video ref="videoRef" class="h-b100 bg-000" autoplay :playsinline="true" :x5-playsinline="true"
:webkit-playsinline="true" mediatype="video" :data-index="-1"
data-xgplayerid="652d97a3-98b8-485d-8e83-5768aafe0f07" src="@/static/imgs/mp4.mp4"
@timeupdate="onTimeUpdate" @loadedmetadata="onLoadedMetadata" @ended="handleEnded"></video>
</div>
<section class="flex flex-col h-b100 flex-1 px-20 pt-20">
<div class="flex-1 flex flex-col h-b100 overflow-hidden">
<div class="bg-000 rounded-16 flex-center flex-1 h-b100 overflow-hidden">
<div class="h-b100 w-b100 flex-center">
<div class="h-b100 w-b100 flex-between-center bg-000 rounded-16 relative">
<div class="h-b100 w-b100 flex-center relative">
<div class="h-b100 w-b100 flex-center" style="aspect-ratio: 16 / 9;">
<video ref="videoRef" class="h-b100 bg-000" autoplay :playsinline="true" :x5-playsinline="true"
:webkit-playsinline="true" mediatype="video" :data-index="-1"
data-xgplayerid="652d97a3-98b8-485d-8e83-5768aafe0f07" src="@/static/imgs/mp4.mp4"
@timeupdate="onTimeUpdate" @loadedmetadata="onLoadedMetadata" @ended="handleEnded"></video>
</div>
<el-button class="absolute right-20 top-20" @click="$emit('next', 2)">编辑</el-button>
</div>
<el-button class="absolute right-20 top-20" @click="$emit('next', 2)">编辑</el-button>
</div>
</div>
<div class="bg-f5 h-64 flex-center pr-100 py-12">
<div>
<span class="current-time">{{ formatTime(currentTime) }}</span> /
<span class="duration-time" style="color: #3f3f51;">{{ formatTime(duration) }}</span>
</div>
<div class="flex-center ml-20 gap-10">
<svg t="1779505622021" class="icon cursor-pointer" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="16499" width="20" height="20">
</div>
<div class="bg-f5 h-64 flex-center pr-100 py-12">
<div>
<span class="current-time">{{ formatTime(currentTime) }}</span> /
<span class="duration-time" style="color: #3f3f51;">{{ formatTime(duration) }}</span>
</div>
<div class="flex-center ml-20 gap-10">
<svg t="1779505622021" class="icon cursor-pointer" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="16499" width="20" height="20">
<path
d="M356.77 605.22L701.8 849.53c69.8 49.42 166.29-0.49 166.29-86.01V261.25c0-85.52-96.49-135.43-166.29-86.01L356.77 419.55c-64.02 45.34-64.02 140.34 0 185.67zM210.42 154.36c30.38 0 55 24.62 55 55v606.07c0 30.38-24.62 55-55 55s-55-24.62-55-55V209.36c0-30.38 24.62-55 55-55z"
p-id="16500" fill="#3f3f51"></path>
</svg>
<button class="ctrl-btn w-40 h-40 flex-center rounded-100 cursor-pointer" @click="togglePlay"
:title="isPlaying ? '暂停' : '播放'">
<svg v-if="isPlaying" t="1779505259978" class="icon" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="4322" width="20" height="20">
<path
d="M356.77 605.22L701.8 849.53c69.8 49.42 166.29-0.49 166.29-86.01V261.25c0-85.52-96.49-135.43-166.29-86.01L356.77 419.55c-64.02 45.34-64.02 140.34 0 185.67zM210.42 154.36c30.38 0 55 24.62 55 55v606.07c0 30.38-24.62 55-55 55s-55-24.62-55-55V209.36c0-30.38 24.62-55 55-55z"
p-id="16500" fill="#3f3f51"></path>
d="M288 768V213.333333a53.333333 53.333333 0 0 1 106.666667 0v554.666667a53.333333 53.333333 0 1 1-106.666667 0zM629.333333 768V213.333333a53.333333 53.333333 0 1 1 106.666667 0v554.666667a53.333333 53.333333 0 1 1-106.666667 0z"
fill="#ffffff" p-id="4323"></path>
</svg>
<button class="ctrl-btn w-40 h-40 flex-center rounded-100 cursor-pointer" @click="togglePlay"
:title="isPlaying ? '暂停' : '播放'">
<svg v-if="isPlaying" t="1779505259978" class="icon" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="4322" width="20" height="20">
<path
d="M288 768V213.333333a53.333333 53.333333 0 0 1 106.666667 0v554.666667a53.333333 53.333333 0 1 1-106.666667 0zM629.333333 768V213.333333a53.333333 53.333333 0 1 1 106.666667 0v554.666667a53.333333 53.333333 0 1 1-106.666667 0z"
fill="#ffffff" p-id="4323"></path>
</svg>
<svg v-else t="1779505357927" class="icon" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="14047" width="20" height="20">
<path
d="M512-292.39808158C69.5810551-292.39808158-292.39808158 69.5810551-292.39808158 512s361.97913673 804.39808158 804.39808158 804.39808158 804.39808158-361.97913673 804.39808158-804.39808158S954.4189449-292.39808158 512-292.39808158z m0 1541.76298917C106.44930106 1249.36490759-225.36490759 917.55069894-225.36490759 512S106.44930106-225.36490759 512-225.36490759s737.36490759 331.81420868 737.36490759 737.36490759-331.81420868 737.36490759-737.36490759 737.36490759z"
p-id="14048" fill="#ffffff"></path>
<path
d="M763.37440051 401.39526378l-268.13269438-177.63791024c-90.49478419-60.32985613-167.58293419-20.10995202-167.58293265 90.49478423v402.19904074c0 110.60473622 73.73649031 150.82464031 167.58293265 90.49478421l268.13269438-177.63790864c90.49478419-67.03317396 90.49478419-167.58293419 0-227.9127903z"
p-id="14049" fill="#ffffff"></path>
</svg>
</button>
<svg t="1779505654665" class="icon cursor-pointer" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="17600" width="20" height="20">
<svg v-else t="1779505357927" class="icon" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="14047" width="20" height="20">
<path
d="M512-292.39808158C69.5810551-292.39808158-292.39808158 69.5810551-292.39808158 512s361.97913673 804.39808158 804.39808158 804.39808158 804.39808158-361.97913673 804.39808158-804.39808158S954.4189449-292.39808158 512-292.39808158z m0 1541.76298917C106.44930106 1249.36490759-225.36490759 917.55069894-225.36490759 512S106.44930106-225.36490759 512-225.36490759s737.36490759 331.81420868 737.36490759 737.36490759-331.81420868 737.36490759-737.36490759 737.36490759z"
p-id="14048" fill="#ffffff"></path>
<path
d="M665.47 417.65l-345.03-244.3c-69.8-49.42-166.29 0.49-166.29 86.01v502.27c0 85.52 96.49 135.43 166.29 86.01l345.03-244.31c64.02-45.34 64.02-140.34 0-185.68zM811.82 868.52c-30.38 0-55-24.62-55-55V207.46c0-30.38 24.62-55 55-55s55 24.62 55 55v606.07c0 30.37-24.62 54.99-55 54.99z"
p-id="17601" fill="#3f3f51"></path>
d="M763.37440051 401.39526378l-268.13269438-177.63791024c-90.49478419-60.32985613-167.58293419-20.10995202-167.58293265 90.49478423v402.19904074c0 110.60473622 73.73649031 150.82464031 167.58293265 90.49478421l268.13269438-177.63790864c90.49478419-67.03317396 90.49478419-167.58293419 0-227.9127903z"
p-id="14049" fill="#ffffff"></path>
</svg>
</div>
</button>
<svg t="1779505654665" class="icon cursor-pointer" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="17600" width="20" height="20">
<path
d="M665.47 417.65l-345.03-244.3c-69.8-49.42-166.29 0.49-166.29 86.01v502.27c0 85.52 96.49 135.43 166.29 86.01l345.03-244.31c64.02-45.34 64.02-140.34 0-185.68zM811.82 868.52c-30.38 0-55-24.62-55-55V207.46c0-30.38 24.62-55 55-55s55 24.62 55 55v606.07c0 30.37-24.62 54.99-55 54.99z"
p-id="17601" fill="#3f3f51"></path>
</svg>
</div>
</div>
<div class="min-h-170 mt-20 flex rounded-16 bg-fff progress p-10">
<div class="w-30 mr-10"></div>
<div class="progress-track" ref="progressTrack" @click="seekVideo" @mousemove="handleHoverMove"
@mouseleave="hoverTime = null">
<!-- 时间刻度 -->
<div class="flex">
<div class="mr-10">00:00</div>
<div class="flex-1 flex-between-center" v-for="n in 6" :key="n">
<div class="w-2 h-6 bg-888 rounded-4" v-for="k in 8" :key="k"></div>
<span class="pr-10">00:00</span>
</div>
</div>
<div class="min-h-170 mt-20 flex rounded-16 bg-fff progress p-10">
<div class="w-30 mr-10"></div>
<div class="progress-track" ref="progressTrack" @click="seekVideo" @mousemove="handleHoverMove"
@mouseleave="hoverTime = null">
<!-- 时间刻度 -->
<div class="flex">
<div class="mr-10">00:00</div>
<div class="flex-1 flex-between-center" v-for="n in 6" :key="n">
<div class="w-2 h-6 bg-888 rounded-4" v-for="k in 8" :key="k"></div>
<span class="pr-10">00:00</span>
</div>
<!-- 拖动滑块 (圆点) -->
<!-- 拖动滑块 (圆点) -->
<div class="progress-thumb" :style="{ left: progressPercentage + '%' }"></div>
<div class="flex mt-20 gap-4 pr-20">
<div v-for="n in 6" class="fjvideo rounded-8 p-10" :style="{width: 100/6 +'%'}">
<div class="fs-12" style="color: #6e718c;">分镜 {{ n }} · 00:10 <span class="tag fs-10 py-4 px-4 ml-10 rounded-4">视频</span></div>
<div class="bg-img w-b100 h-60 mt-10 rounded-8"></div>
</div>
</div>
<!-- 拖动滑块 (圆点) -->
<!-- 拖动滑块 (圆点) -->
<div class="progress-thumb" :style="{ left: progressPercentage + '%' }"></div>
<div class="flex mt-20 gap-4 pr-20">
<div v-for="n in 6" class="fjvideo rounded-8 p-10" :style="{ width: 100 / 6 + '%' }">
<div class="fs-12" style="color: #6e718c;">分镜 {{ n }} · 00:10 <span
class="tag fs-10 py-4 px-4 ml-10 rounded-4">视频</span></div>
<div class="bg-img w-b100 h-60 mt-10 rounded-8"></div>
</div>
</div>
</div>
<div class="py-10 text-888 text-center">平台内容均由人工智能模型生成，不代表平台立场</div>
</section>
</div>
<div class="py-10 text-888 text-center">平台内容均由人工智能模型生成，不代表平台立场</div>
</section>
</template>
<script setup lang="ts">
import { ref, computed } from 'vue';
......@@ -106,6 +94,11 @@ const progressPercent = ref(0);
const hoverPercent = ref(0) // 悬停时的百分比
const hoverTime: any = ref(null) // 悬停时的时间
// 切换集数
const changeJi = (item: any, index: number) => {
indexVal.value = index
}
// ----- 计算属性 -----
const progressPercentage = computed(() => {
......@@ -113,6 +106,7 @@ const progressPercentage = computed(() => {
return (currentTime.value / duration.value) * 100
})
// 视频播放
const togglePlay = () => {
if (!videoRef.value) return;
if (videoRef.value.paused) {
......@@ -243,17 +237,20 @@ const handleHoverMove = (event: any) => {
.progress {
border: 1px solid #eee;
}
.fjvideo {
border: 1px solid #f0f2fa;
height: 106px;
background-color: #fafbfd;
.bg-img {
background: url('@/static/imgs/bg1.png');
background-size: auto;
}
.tag {
background-color: #ebedff;
color: #5252ff;
}
.tag {
background-color: #ebedff;
color: #5252ff;
}
}
</style>
\ No newline at end of file
doc/h5/src/views/project/components/StepThree.vue
View file @ 6653de75
<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 0 → 100644
View file @ 6653de75
<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/StepTwo.vue
View file @ 6653de75
......@@ -17,7 +17,7 @@
<section style="padding-bottom: 100px;">
<el-affix :offset="120">
<div class="flex gap-20 fs-16 pt-30 pb-10 pl-64 bg-F8F9FA">
<div class="flex gap-30 fs-18 pt-30 pb-10 pl-64 bg-F8F9FA">
<a v-for="(item, index) in tabs" :key="index" class="cursor-pointer aa"
:class="indexTab === index ? 'active' : ''" :href="'#' + item" @click="changeTab(index)">{{ item }}</a>
</div>
......@@ -47,7 +47,14 @@
</div>
<div>
<el-button text :icon="Plus" class="hover" @click="open(1)">新增角色</el-button>
<el-button text :icon="DocumentCopy" class="hover">批量生成</el-button>
<el-button text class="hover" @click="openBatch(1)">
<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>
</div>
<div class="flex flex-wrap gap-30 mt-30">
......@@ -56,7 +63,7 @@
<img src="https://res.volccdn.com/obj/volc-console-fe/dramart/static/image/PIC3.22e42366.png"
class="w-b100 h-b100 img rounded-6" alt="">
<div class="absolute top-4 right-4 h-44 flex-center gap-2 rounded-16 bg-edit px-10">
<div class="w-30 h-30 rounded-10 flex-center hover2">
<div class="w-30 h-30 rounded-10 flex-center hover2" @click="openAiModal(item, 1)">
<el-popover content="Ai生成主形象" placement="top" :width="100">
<template #reference>
<el-icon color="#fff">
......@@ -65,7 +72,7 @@
</template>
</el-popover>
</div>
<div class="w-30 h-30 rounded-10 flex-center hover2">
<div class="w-30 h-30 rounded-10 flex-center hover2" @click="openDepotModal(item, 1)">
<el-popover content="从角色库选择" placement="top" :width="100">
<template #reference>
<el-icon color="#fff">
......@@ -74,7 +81,7 @@
</template>
</el-popover>
</div>
<div class="w-30 h-30 rounded-10 flex-center hover2">
<div class="w-30 h-30 rounded-10 flex-center hover2" @click="openLocalModal(item, 1)">
<el-popover content="本地上传" placement="top" :width="100">
<template #reference>
<el-icon color="#fff">
......@@ -132,7 +139,13 @@
</div>
<div>
<el-button text :icon="Plus" class="hover" @click="open(2)">新增场景</el-button>
<el-button text :icon="DocumentCopy" class="hover">批量生成</el-button>
<el-button text class="hover" @click="openBatch(2)"><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>
</div>
<div class="flex flex-wrap gap-30 mt-30">
......@@ -141,7 +154,7 @@
<img src="https://res.volccdn.com/obj/volc-console-fe/dramart/static/image/PIC3.22e42366.png"
class="w-b100 h-b100 img rounded-6" alt="">
<div class="absolute top-4 right-4 h-44 flex-center gap-2 rounded-16 bg-edit px-10">
<div class="w-30 h-30 rounded-10 flex-center hover2">
<div class="w-30 h-30 rounded-10 flex-center hover2" @click="openAiModal(item, 2)">
<el-popover content="Ai生成主场景" placement="top" :width="100">
<template #reference>
<el-icon color="#fff">
......@@ -150,7 +163,7 @@
</template>
</el-popover>
</div>
<div class="w-30 h-30 rounded-10 flex-center hover2">
<div class="w-30 h-30 rounded-10 flex-center hover2" @click="openDepotModal(item, 2)">
<el-popover content="从场景库选择" placement="top" :width="100">
<template #reference>
<el-icon color="#fff">
......@@ -159,7 +172,7 @@
</template>
</el-popover>
</div>
<div class="w-30 h-30 rounded-10 flex-center hover2">
<div class="w-30 h-30 rounded-10 flex-center hover2" @click="openLocalModal(item, 2)">
<el-popover content="本地上传" placement="top" :width="100">
<template #reference>
<el-icon color="#fff">
......@@ -217,7 +230,13 @@
</div>
<div>
<el-button text :icon="Plus" class="hover" @click="open(3)">新增道具</el-button>
<el-button text :icon="DocumentCopy" class="hover">批量生成</el-button>
<el-button text class="hover" @click="openBatch(3)"><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>
</div>
<div class="flex flex-wrap gap-30 mt-30">
......@@ -226,7 +245,7 @@
<img src="https://res.volccdn.com/obj/volc-console-fe/dramart/static/image/PIC3.22e42366.png"
class="w-b100 h-b100 img rounded-6" alt="">
<div class="absolute top-4 right-4 h-44 flex-center gap-2 rounded-16 bg-edit px-10">
<div class="w-30 h-30 rounded-10 flex-center hover2">
<div class="w-30 h-30 rounded-10 flex-center hover2" @click="openAiModal(item, 3)">
<el-popover content="Ai生成主道具" placement="top" :width="100">
<template #reference>
<el-icon color="#fff">
......@@ -235,7 +254,7 @@
</template>
</el-popover>
</div>
<div class="w-30 h-30 rounded-10 flex-center hover2">
<div class="w-30 h-30 rounded-10 flex-center hover2" @click="openDepotModal(item, 3)">
<el-popover content="从道具库选择" placement="top" :width="100">
<template #reference>
<el-icon color="#fff">
......@@ -244,7 +263,7 @@
</template>
</el-popover>
</div>
<div class="w-30 h-30 rounded-10 flex-center hover2">
<div class="w-30 h-30 rounded-10 flex-center hover2" @click="openLocalModal(item, 3)">
<el-popover content="本地上传" placement="top" :width="100">
<template #reference>
<el-icon color="#fff">
......@@ -286,11 +305,20 @@
</div>
</section>
<EditModal ref="editModalRef" :title="title" />
<BatchModal ref="batchModalRef" />
<DepotModal ref="depotModalRef" :title="depotTitle" />
<LocalUploadModal ref="localUploadModalRef" :title="localTitle" />
<AiEditModal ref="aiEditModalRef" :title="aiEditTitle" />
</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';
import EditModal from './EditModal.vue'; // 新增'角色', '场景', '道具'
import BatchModal from './BatchModal.vue'; // 批量生成
import DepotModal from './DepotModal.vue'; // 从库中选择
import LocalUploadModal from './LocalUploadModal.vue'; // 本地上传
import AiEditModal from './AiEditModal.vue';
const isShowtip = ref(true)
const indexTab = ref(0)
......@@ -299,14 +327,45 @@ const changeTab = ref((index: number) => {
indexTab.value = index
})
// 新增'角色', '场景', '道具'
const title = ref('新增角色')
const editModalRef = ref()
const open = (index: number) => {
title.value = ['新增角色', '新增场景', '新增道具'][index - 1]
editModalRef.value?.open(index)
}
// 编辑单个'角色', '场景', '道具'
// 1. Ai生成
const aiEditTitle = ref('角色生成')
const aiEditModalRef = ref()
const openAiModal = (item: any, index: number) => {
aiEditTitle.value = ['角色生成', '场景生成', '道具生成'][index - 1]
aiEditModalRef.value?.open(index)
}
// 2. 从库中选择
const depotModalRef = ref()
const depotTitle = ref('道具库')
const openDepotModal = (item: any, index: number) => {
depotTitle.value = ['角色库', '场景库', '道具库'][index - 1]
depotModalRef.value?.open(index)
}
// 3. 本地上传
const localUploadModalRef = ref()
const localTitle = ref('角色')
const openLocalModal = (item: any, index: number) => {
localTitle.value = ['角色', '场景', '道具'][index - 1]
localUploadModalRef.value?.open(index)
}
// 编辑单个'角色', '场景', '道具'
// 批量
const batchModalRef = ref()
const openBatch = (val: number) => {
batchModalRef.value?.open(val)
}
</script>
<style lang="scss" scoped>
.hint {
......@@ -315,6 +374,7 @@ const open = (index: number) => {
border-radius: 8px;
color: #5252ff;
}
.bg-F8F9FA {
background-color: #f8f9fa;
}
......
doc/h5/src/views/project/components/VideoPlayModal.vue 0 → 100644
View file @ 6653de75
<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
View file @ 6653de75
<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;
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment