aidlab/aida_front
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: prompt输入部分样式

Browse Source
This commit is contained in:
zhangyh
2025-11-11 10:35:03 +08:00
parent b216852f14
commit 6aff732a57
1 changed files with 121 additions and 188 deletions
Download Patch File Download Diff File Expand all files Collapse all files

309
src/component/home/tools/toProduct/index.vue
View File

@@ -1,16 +1,9 @@
<template>
<div class="toProduct">
<div class="productImg_content">
<!-- <div class="modal_title_text">
<div>{{$t('ProductImg.Finalize')}}</div>
<div class="modal_title_text_intro"></div>
</div> -->
<div class="productImg_content_bottom">
<div class="productImg_left generalModel_state" :class="{ active: button.left }">
<!-- <div class="productImg_content_item_title productImg_content_item_title_menu">
<generalMenu class="productImg_content_item_title_menubtn" :class="{hideEvents:driver__.driver}" :dataList="productimgMenuList" @setprintModel="setproduct" :item="productimgMenu"></generalMenu>
</div> -->
<div class="selectImg" style="margin-bottom: 2rem">
<div class="selectImg">
<div class="head">
<div class="text">
{{
@@ -23,10 +16,6 @@
</div>
</div>
<div class="imgBox" v-mousewheel>
<!-- <div class="item" :class="[item?.isChecked?'active':'']" v-for="item in selectList[productimgMenu.value]" @click="setGenerate(item)">
<img :src="item.imgUrl || item.url" alt="">
<a-checkbox v-model:checked="item.isChecked"></a-checkbox>
</div> -->
<div
class="item"
:class="[item?.isChecked ? 'active' : '']"
@@ -57,7 +46,6 @@
<i class="fi fi-rr-trash icon_delete"></i>
</div>
</div>
<!-- <a-checkbox v-model:checked="item.isChecked"></a-checkbox> -->
</div>
<div class="upload_item item" v-show="!isDesignPage">
<div class="upload_file_item">
@@ -76,7 +64,6 @@
>
<div class="upload_tip_block">
<i class="fi fi-br-upload"></i>
<!-- <img class="upload_img_icon" src="@/assets/images/homePage/add_file.png"> -->
</div>
</a-upload>
</div>
@@ -108,13 +95,6 @@
v-model="similarity"
/>
</div>
<!-- <div v-show="productimgMenu.value == 'Relight'" class="productImg_content_item_title productImg_content_item_title_similarity">
<span>{{$t('ProductImg.SelectionFunction')}}</span>
</div> -->
<!-- 暂时去掉 -->
<!-- <div v-show="productimgMenu.value == 'Relight'" class="productImg_content_item_Direction generalModel_state_item">
<a-select size="large" style="width: 100%;" v-model:value="speedData.value" :options="speedList" :field-names="{ label: 'relightLabel', value: 'value' }"></a-select>
</div> -->
<div
v-show="
productimgMenu.value == 'Relight' &&
@@ -169,51 +149,52 @@
v-model="brightenValue"
/>
</div>
<div class="input_border productImg_content_item_generate">
<div class="input_box">
<div class="input_box_btnBox">
<!-- <input
class="search_input"
:placeholder="productimgMenu.value == 'Relight'?$t('ProductImg.relightInput'):$t('ProductImg.productInput')"
v-model="searchName[productimgMenu.value]"
@keydown.enter="getPrductimg()"
/> -->
<textarea
class="textarea"
ref="textarea"
@input="ifMaximumLength"
:placeholder="
productimgMenu.value == 'Relight'
? $t('ProductImg.relightInput')
: $t('ProductImg.productInput')
"
@keydown.enter.prevent="getPrductimg()"
v-model="searchName[productimgMenu.value]"
></textarea>
<div class="prompt-container">
<div class="prompt-title">Prompt</div>
<div class="input_border productImg_content_item_generate">
<div class="input_box">
<div class="input_box_btnBox">
<textarea
class="textarea"
ref="textarea"
@input="ifMaximumLength"
:placeholder="
productimgMenu.value == 'Relight'
? $t('ProductImg.relightInput')
: $t('ProductImg.productInput')
"
@keydown.enter.prevent="getPrductimg()"
v-model="searchName[productimgMenu.value]"
></textarea>
</div>
</div>
</div>
</div>
<div
class="selectText"
v-show="productimgMenu.value == 'ToProductImage' && speedData.value"
>
<a-tooltip
v-for="(promptText, index) in promptTextList"
:key="index"
placement="bottom"
<div class="asistant-btn" @click="handleClickAssistBtn">
<i class="fi fi-bs-magic-wand asistant-icon"></i>
<span>Prompt Assist</span>
</div>
<!-- <div
class="selectText"
v-show="productimgMenu.value == 'ToProductImage' && speedData.value"
>
<template #title>{{ promptText }}</template>
<div
@click="
() => {
searchName[productimgMenu.value] = promptText
ifMaximumLength()
}
"
<a-tooltip
v-for="(promptText, index) in promptTextList"
:key="index"
placement="bottom"
>
{{ promptText }}
</div>
</a-tooltip>
<template #title>{{ promptText }}</template>
<div
@click="
() => {
searchName[productimgMenu.value] = promptText
ifMaximumLength()
}
"
>
{{ promptText }}
</div>
</a-tooltip>
</div> -->
</div>
<div class="productImg_content_item_generate_btn input_border">
<div class="generage_btn_box">
@@ -362,6 +343,7 @@
:isProductimg="true"
></scaleImage>
</div>
<Prompt />
</template>
<script lang="ts">
@@ -392,6 +374,7 @@ import { useStore } from 'vuex'
import scaleImage from '@/component/HomePage/scaleImage.vue'
import generalMenu from '@/component/HomePage/generalMenu.vue'
import generalDrag from '@/component/modules/generalDrag.vue'
import Prompt from './Prompt.vue'
import { List } from 'echarts'
import { useRouter, useRoute } from 'vue-router'
@@ -399,7 +382,8 @@ export default defineComponent({
components: {
scaleImage,
generalMenu,
generalDrag
generalDrag,
Prompt
},
props: {
setTask: {
@@ -493,13 +477,6 @@ export default defineComponent({
}
})
// watch(() => route.query.id,
// (query:any, oldQuery:any) => {
// if(oldQuery && query != oldQuery){
// productImgData.generateList = []
// }
// },
// );
watch(
() => store.state.HomeStoreModule.uploadElement.length,
(newVal, oldVal) => {
@@ -974,31 +951,6 @@ export default defineComponent({
scaleImage.value.init(arr, index)
scaleImage.value.isComparison = true
}
let generalIsMenuShow: any = {}
let setMenuShow = (item: any) => {
item.menuShow = true
generalIsMenuShow = item
document.addEventListener('click', removeMenuShow)
}
let setMenu = (menuItem: any, item: any) => {
// props.productimgMenu = menuItem
// if(!selectList.value[props.productimgMenu.value]){
// selectList.value[props.productimgMenu.value] = []
// }
// selectList.value[props.productimgMenu.value].forEach((item:any) => {
// item.isChecked = false
// });
// if(selectList.value[menuItem.value].indexOf(item) == -1){
// item.isChecked = true
// selectList.value[menuItem.value].push(item)
// }
// generalIsMenuShow.menuShow = false
}
let removeMenuShow = () => {
generalIsMenuShow.menuShow = false
generalIsMenuShow = {}
document.removeEventListener('click', removeMenuShow)
}
let setSimilarity = (num: any) => {}
//超分
@@ -1140,22 +1092,18 @@ export default defineComponent({
)
onMounted(() => {
ifMaximumLength()
console.log('来源:---', props.source, props.isDesignPage)
})
// 计算属性：根据条件生成提示词列表
const promptTextList = computed(() => {
const isFromDesignPage = props.source === 'design' || props.isDesignPage
const { ageGroup, httpType } = store.state.Workspace.probjects
const isSingleDesign = httpType === 'SINGLE_DESIGN'
const isAdult = ageGroup === 'Adult'
if (!isFromDesignPage) {
// 如果不是从design来的，返回两个提示词
return [
t('poseTransfer.UploadWithModel'),
t('poseTransfer.UploadWithoutModel')
]
return [t('poseTransfer.UploadWithModel'), t('poseTransfer.UploadWithoutModel')]
} else {
// 如果是从design来的
if (isSingleDesign) {
@@ -1163,10 +1111,7 @@ export default defineComponent({
const secondPrompt = isAdult
? t('poseTransfer.SingleAdultTryOn')
: t('poseTransfer.SingleChildTryOn')
return [
t('poseTransfer.SingleGarment'),
secondPrompt
]
return [t('poseTransfer.SingleGarment'), secondPrompt]
} else {
// SERIES_DESIGN: 一个提示词
return [
@@ -1177,7 +1122,13 @@ export default defineComponent({
}
}
})
const showPromptAssist = ref(false)
const showPrompt = ref(false)
const handleClickAssistBtn = () => {
showPromptAssist.value = true
}
return {
upload,
driver__,
@@ -1189,6 +1140,8 @@ export default defineComponent({
RelightDirectionList,
RelightDirection,
promptTextList,
showPromptAssist,
showPrompt,
setproduct,
fileUploadChange,
@@ -1200,8 +1153,6 @@ export default defineComponent({
removeProductimg,
scaleImage,
setScaleImage,
setMenu,
setMenuShow,
setSimilarity,
setTask,
selectSetBtn,
@@ -1211,7 +1162,8 @@ export default defineComponent({
ifMaximumLength,
openSpeed,
setSpeed,
locale
locale,
handleClickAssistBtn
}
},
directives: {
@@ -1249,26 +1201,6 @@ export default defineComponent({
mounted() {
this.token = getCookie('token') || ''
this.uploadUrl = getUploadUrl()
},
methods: {
// init(list:any,index:any,dialogueIndex:any){
// },
// cancelDsign(){
// this.productImg = false
// // this.productImgList = []
// // this.productImgIndex = 0
// },
// download(){
// // downloadIamge(this.productImgList[this.productImgIndex].imgUrl)
// },
// setScaleImageIndex(index:any){
// // this.productImgIndex = index
// // console.log(this.productImgIndex);
// },
// LikeFile(item:any,str:string){
// let parent:any = this.$parent
// parent.likeFile(item,str)
// },
}
})
</script>
@@ -1319,68 +1251,13 @@ export default defineComponent({
.productImg_content_item_intro {
font-size: 1.4rem;
}
// .productImg_content_item_imgBox{
// display: flex;
// overflow-x: auto;
// width: auto;
// margin-bottom: 2rem;
// align-items: center;
// flex-wrap: nowrap;
// .content_item_imgBox_itemImg{
// display: flex;
// margin-right: 1rem;
// position: relative;
// height: 36rem;
// max-height: 100%;
// position: relative;
// img{
// height: 100%;
// width: 100%;
// cursor: pointer;
// object-fit: contain;
// opacity: .5;
// &.active{
// opacity: 1;
// }
// }
// .ant-checkbox-wrapper{
// position: absolute;
// right: 0;
// top: 0;
// }
// &.content_item_imgBox_itemImg:hover{
// .content_item_imgBox_itemImg_delete{
// display: block;
// cursor: pointer;
// }
// }
// .content_item_imgBox_itemImg_delete{
// display: none;
// width: 100%;
// height: 100%;
// background: rgba(0,0,0,.2);
// position: absolute;
// i{
// position: absolute;
// left: 50%;
// top: 50%;
// transform: translate(-50%,-50%);
// color: #fff;
// }
// }
// }
// .content_item_imgBox_itemImg:last-child{
// margin-right: 0;
// }
// }
.selectImg {
display: flex;
flex-direction: column;
> .imgBox {
flex: 1;
max-height: 45rem;
margin-top: 2rem;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
@@ -1388,17 +1265,19 @@ export default defineComponent({
width: 100%;
overflow: hidden;
overflow-x: auto;
column-gap: 1rem;
// &.active
> .item {
margin-right: 1rem;
width: calc(100% / 2 - 0.5rem);
// margin-right: 1rem;
// width: calc(100% / 2 - 0.5rem);
width: 9.6rem;
cursor: pointer;
overflow: hidden;
display: flex;
justify-content: center;
flex-shrink: 0;
height: 25rem;
height: 13.4rem;
position: relative;
// &.active{
// border: 2px solid;
@@ -1454,6 +1333,7 @@ export default defineComponent({
> .head {
color: #000;
font-weight: 600;
margin-bottom: 2rem;
> .text {
display: inline-block;
font-size: 1.6rem;
@@ -1500,6 +1380,7 @@ export default defineComponent({
flex-shrink: 0;
height: 25rem;
position: relative;
> .imgBox {
width: 100%;
}
@@ -1665,4 +1546,56 @@ export default defineComponent({
.designPage {
margin-right: 4rem;
}
.upload_file_item {
// height: 13.4rem;
// margin-top: 2rem;
:deep(.ant-upload-picture-card-wrapper) {
.ant-upload-list-picture-card {
.ant-upload-select-picture-card {
width: 9.6rem;
height: 13.4rem;
}
}
}
}
.prompt-container {
margin-top: 4rem;
margin-bottom: 3rem;
position: relative;
.prompt-title {
margin-bottom: 1.4rem;
font-size: 1.6rem;
// margin-bottom: 1rem;
}
.input_border {
padding-bottom: 0;
.input_box {
.input_box_btnBox .textarea {
min-height: 12.7rem;
}
}
}
.asistant-btn {
// width: 9rem;
padding: 0.45rem 0.6rem;
font-size: 1rem;
font-weight: 400;
color: #313131;
position: absolute;
bottom: 1.3rem;
left: 1.3rem;
display: flex;
column-gap: 0.3rem;
justify-content: center;
align-items: center;
background-color: #f2f2f2;
border: 1px solid #dfdfdf;
border-radius: 0.5rem;
cursor: pointer;
.asistant-icon {
font-size: 1rem;
}
}
}
</style>