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

调整library布局

Browse Source
This commit is contained in:
X1627315083
2024-12-27 14:38:21 +08:00
parent 7eb5c5cba5
commit f21c98c623
14 changed files with 452 additions and 394 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
src/views/HomeView/HomeView.vue
View File

@@ -101,7 +101,7 @@
<div class="right_content_body">
<div class="right_content_img_block scroll_style Guide_1_17 active" :class="[driver__.driver?'showEvents':'']">
<div class="right_content_img_item">
<div class="right_content_img_item" ref="designImg">
<!-- <draggable
group="people" > -->
@@ -127,10 +127,8 @@
)">
</div>
</div>
<div class="content_img_block" v-show="showDesignMark">
<div class="content_img_flex" >
<img class="content_img" src="@/assets/images/homePage/loading.gif" />
</div>
<div class="content_img_block" v-show="showDesignMark" :style="collStyle">
<a-spin size="large"></a-spin>
</div>
<!-- </draggable> -->
<div class="content_img_block" :style="collStyle" draggable v-for="(
@@ -376,16 +374,30 @@ export default defineComponent({
},
collTime:null as any,
})
let designImg = ref()
const setSystemDesigner = (time:any)=>{
clearTimeout(collItemSize.collTime)
collItemSize.collTime = setTimeout(()=>{
let wScale = 60,hScale = 92.5
let num = collItemSize.collValue
let {width,height} = collItemSize.collStyle
collItemSize.collStyle.width = wScale * ((num<20?20:num) / 100) + 'rem'
collItemSize.collStyle.height = hScale * ((num<20?20:num) / 100) + 'rem'
let width = wScale * ((num<20?20:num) / 100)
let height =hScale * ((num<20?20:num) / 100)
collItemSize.collStyle.width = width + 'rem'
collItemSize.collStyle.height = height + 'rem'
setDesignImgWidth()
},time)
}
const setDesignImgWidth = ()=>{
nextTick(()=>{
let width = designImg.value.parentElement.offsetWidth
let sonDom = designImg.value.querySelectorAll('div')[0]
if(Math.floor(width / (sonDom.offsetWidth+10 + 1)) > (likeDesignCollectionList.value.length + designCollectionList.value.length)){
designImg.value.style.width = 100+'%'
}else{
designImg.value.style.width = Math.floor(width / (sonDom.offsetWidth+10 + 1)) * (sonDom.offsetWidth + 10 + 1) + 'px'
}
})
}
setSystemDesigner(0)
return {
store,
@@ -410,6 +422,8 @@ export default defineComponent({
portfolio,
setSystemDesigner,
...toRefs(collItemSize),
designImg,
setDesignImgWidth,
};
},
data() {
@@ -744,6 +758,7 @@ export default defineComponent({
await new Promise((resolve, reject) => {
setTimeout(() => {
this.designCollectionList.unshift(item)
this.setDesignImgWidth()
resolve('')
}, 200);
})
@@ -1131,6 +1146,7 @@ export default defineComponent({
likeDesignCollectionList
);
}
this.setDesignImgWidth()
},
//统一处理选择组的渲染数据
@@ -1544,6 +1560,7 @@ export default defineComponent({
align-items: center;
// padding-bottom: 1rem;
overflow-x: auto;
justify-content: center;
&.active::-webkit-scrollbar-button:single-button{
display: none;
}
@@ -1586,8 +1603,8 @@ export default defineComponent({
width: 24rem;
height: 37rem;
// height: 29.5rem;
margin-right: 1rem;
margin-bottom: 1rem;
box-sizing: border-box;
margin: 5px;
// min-height: 271px;
max-height: 100%;
@@ -1596,6 +1613,9 @@ export default defineComponent({
vertical-align: top;
flex-shrink: 0;
max-height: 100%;
display: flex;
align-items: center;
justify-content: center;
&:hover .icon_like,&:hover .icon_delete {
display: block;
}

373
src/views/HomeView/library.vue
View File

@@ -36,68 +36,80 @@
<div v-show="selectCode != 'Models' && selectCode != 'DesignElements'" class='header_operate_item pointer' :class="{operate_select:uploadGenerate == 'Generate'}" @click="uploadGenerateOpen('Generate')">{{ $t('LibraryPage.Generate') }}</div>
</div>
<div class="librart_headr_right">
<div class="select_block" v-show="selectCode == 'Sketchboard' || selectCode == 'Models'|| selectCode == 'DesignElements'|| selectCode == 'Printboard'" >
<a-select
ref="select"
v-show="selectCode != 'DesignElements' && selectCode != 'Printboard'"
v-model:value="sex"
:options="sexList"
:fieldNames="{ label: 'name', value: 'value' }"
@change="sexChange"
>
<template #suffixIcon
><span
class="icon iconfont icon-xiala"
style="color: #343579"
></span
></template>
</a-select>
<a-select
ref="select"
v-show="designTypeList[selectCode]?.[0]?.value && selectCode != 'Sketchboard'"
v-model:value="designType"
:options="designTypeList[selectCode]"
@change="handleChange"
:fieldNames="{ label: 'name', value: 'value' }"
>
<template #suffixIcon
><span
class="icon iconfont icon-xiala"
style="color: #343579"
></span
></template>
</a-select>
<a-select
ref="select"
v-show="designTypeList[selectCode]?.[0]?.value && selectCode == 'Sketchboard' && uploadGenerate != 'Generate'"
v-model:value="designType"
:options="designTypeList[selectCode]"
@change="handleChange"
:fieldNames="{ label: 'name', value: 'value' }"
>
<template #suffixIcon
><span
class="icon iconfont icon-xiala"
style="color: #343579"
></span
></template>
</a-select>
<a-select
ref="select"
v-show="SketchGenerateTypeList?.[0]?.value && selectCode == 'Sketchboard' && uploadGenerate == 'Generate'"
v-model:value="SketchGenerateType"
:options="SketchGenerateTypeList"
@change="setSketchGenerateType"
:fieldNames="{ label: 'name', value: 'value' }"
>
<template #suffixIcon
><span
class="icon iconfont icon-xiala"
style="color: #343579"
></span
></template>
</a-select>
<div class="librart_headr_right ">
<div class="generalModel_state " v-show="selectCode == 'Sketchboard' || selectCode == 'Models'|| selectCode == 'DesignElements'|| selectCode == 'Printboard'" >
<div class="generalModel_state_item smail" v-if="selectCode != 'DesignElements' && selectCode != 'Printboard'">
<a-select
ref="select"
v-model:value="sex"
:options="sexList"
size="large"
:fieldNames="{ label: 'name', value: 'value' }"
style="width:20rem"
@change="sexChange"
>
<template #suffixIcon
><span
class="icon iconfont icon-xiala"
style="color: #343579"
></span
></template>
</a-select>
</div>
<div class="generalModel_state_item smail" v-if="designTypeList[selectCode]?.[0]?.value && selectCode != 'Sketchboard'">
<a-select
ref="select"
v-model:value="designType"
:options="designTypeList[selectCode]"
@change="handleChange"
style="width:20rem"
size="large"
:fieldNames="{ label: 'name', value: 'value' }"
>
<template #suffixIcon
><span
class="icon iconfont icon-xiala"
style="color: #343579"
></span
></template>
</a-select>
</div>
<div class="generalModel_state_item smail" v-if="designTypeList[selectCode]?.[0]?.value && selectCode == 'Sketchboard' && uploadGenerate != 'Generate'">
<a-select
ref="select"
v-model:value="designType"
:options="designTypeList[selectCode]"
@change="handleChange"
style="width:20rem"
size="large"
:fieldNames="{ label: 'name', value: 'value' }"
>
<template #suffixIcon
><span
class="icon iconfont icon-xiala"
style="color: #343579"
></span
></template>
</a-select>
</div>
<div class="generalModel_state_item smail" v-if="SketchGenerateTypeList?.[0]?.value && selectCode == 'Sketchboard' && uploadGenerate == 'Generate'">
<a-select
ref="select"
v-model:value="SketchGenerateType"
:options="SketchGenerateTypeList"
@change="setSketchGenerateType"
style="width:20rem"
size="large"
:fieldNames="{ label: 'name', value: 'value' }"
>
<template #suffixIcon
><span
class="icon iconfont icon-xiala"
style="color: #343579"
></span
></template>
</a-select>
</div>
</div>
</div>
</div>
@@ -128,13 +140,16 @@
<div :class="['header_operate_item' , 'fontSize',selectImgList.length>0?'active':'']" @click="deleteBatchPic()">{{ $t('LibraryPage.Delete') }}</div>
<div :class="['header_operate_item' , 'fontSize',selectImgList.length>0?'active':'']" @click="showRenameModal(selectImgList,'batch')">{{ $t('LibraryPage.Rename') }}</div>
</div>
<div class="content_search_block">
<input
class="search_input"
:placeholder="$t('LibraryPage.inputContent1')"
v-model="searchPictureName"
@keydown.enter="getLibraryList('')">
<div class="search_cascader">
<div class="content_search_block generalModel_state">
<div class="generalModel_state_item smail">
<input
class="search_input"
style="background-color: #fff;"
:placeholder="$t('LibraryPage.inputContent1')"
v-model="searchPictureName"
@keydown.enter="getLibraryList('')">
</div>
<div class="generalModel_state_item search_cascader smail">
<el-cascader
:options="options"
filterable
@@ -162,13 +177,14 @@
<div :title="$t('LibraryPage.intersection')" @click="()=>intersection = 0" v-show="intersection == 1" :class="['icon', 'iconfont','icon-bingji1',]"></div>
</div>
<!-- <div class="search_icon_block" @click="getLibraryList('')"><span class="icon iconfont icon-sousuo"></span></div> -->
<div class="generage_btn search_icon_block" @click="getLibraryList('')"><span class="icon iconfont icon-sousuo"></span></div>
<div class="gallery_btn" style="padding: 1rem; line-height: 1;" @click="getLibraryList('')"><span class="icon iconfont icon-sousuo"></span></div>
</div>
<div v-show="imgList.length" :class="['check_all_block',selectImgList.length == imgList.length ? 'check_all' : '']" @click="selectAllImg()">
<div class="check_block"><div class="check_block_body" v-show="selectImgList.length == imgList.length && imgList.length"></div></div>
<div>{{ $t('LibraryPage.all') }}</div>
</div>
</div>
<div v-show="imgList.length" :class="['check_all_block',selectImgList.length == imgList.length ? 'check_all' : '']" @click="selectAllImg()">
<div class="check_block"><div class="check_block_body" v-show="selectImgList.length == imgList.length && imgList.length"></div></div>
<div>{{ $t('LibraryPage.all') }}</div>
</div>
</div>
<div class="content_body_table scroll_style">
@@ -185,6 +201,9 @@
</div>
<div class="img_operate_block" :title="t('LibraryPage.Delete')" @click.stop="deleteSinglePic(img,index)">
<span class="icon iconfont icon-shanchu operate_icon"></span>
</div>
<div class="img_operate_block">
<i class="fi fi-bs-expand-arrows-alt" @click.stop="scaleImage(index,imgList,'library')"></i>
</div>
</div>
</div>
@@ -391,16 +410,14 @@
<div class="img_operate_block" :title="t('LibraryPage.Delete')" @click.stop="deleteGenerate(index)">
<span class="icon iconfont icon-shanchu operate_icon"></span>
</div>
</div>
<div class="img_operate_content left" :class="[driver__.driver?'hideEvents':'']">
<div class="img_operate_block">
<i class="fi fi-bs-expand-arrows-alt" @click.stop="scaleImage(index)"></i>
<i class="fi fi-bs-expand-arrows-alt" @click.stop="scaleImage(index,generateList[selectCode],'generate')"></i>
</div>
<div class="img_operate_block">
<i v-if="!img.like" class="fi fi-rr-heart operate_icon" @click.stop="likeFile(img,'like')"></i>
<i v-else class="fi fi-sr-heart operate_icon" :adminLike="!!img.like" @click.stop="likeFile(img,'noLike')"></i>
</div>
</div>
</div>
</div>
<sketchCategory v-show="selectCode == 'Sketchboard'" :disignTypeList="designTypeList[selectCode]" :generateList="generateList['Sketchboard']" :item="img"></sketchCategory>
</div>
@@ -441,6 +458,7 @@ import ModelPlacement from '@/component/LibraryPage/ModelPlacement.vue';
import setLabel from '@/component/LibraryPage/setLabel.vue';
import ModelPlacementMobile from '@/component/LibraryPage/ModelPlacementMobile.vue';
import searchLabel from '@/component/LibraryPage/searchLabel.vue';
// import RobotAssist from "@/component/HomePage/RobotAssist.vue";
import { Modal,message,Upload,CascaderProps } from 'ant-design-vue';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
@@ -1293,7 +1311,6 @@ export default defineComponent({
placementModal.showPlacementModal(data,this.sex)
},
setTextareaShow(){
this.isTextarea = !this.isTextarea
this.isTextarea = !this.isTextarea
if(this.isTextarea){
document.addEventListener('click',this.setTextareaShow)
@@ -1522,14 +1539,14 @@ export default defineComponent({
}else if(selectCodeStr == 'Sketchboard'){
str = this.t('collectionModal.Sketchboard')
}
if(rv.leftUsageCount >= 1){
message.warning(this.t('Generate.jsContent8',{num:rv.leftUsageCount,str:str}));
}else if(rv.leftUsageCount == 0){
message.warning(this.t('Generate.jsContent9',{str:str}));
this.isGenerate[selectCodeStr] = false
// this.isShowMark = false
return
}
// if(rv.leftUsageCount >= 1){
// message.warning(this.t('Generate.jsContent8',{num:rv.leftUsageCount,str:str}));
// }else if(rv.leftUsageCount == 0){
// message.warning(this.t('Generate.jsContent9',{str:str}));
// this.isGenerate[selectCodeStr] = false
// // this.isShowMark = false
// return
// }
}
this.setGenerate(selectCodeStr,rv.uniqueId)
@@ -1671,10 +1688,11 @@ export default defineComponent({
},
scaleImage(index:any){
scaleImage(index:any,list:any,str:any){
let scaleImage:any = this.$refs.scaleImage
scaleImage.scaleImageMask = true
scaleImage.init(this.generateList[this.selectCode],index)
str == 'library'?scaleImage.isLike = false:scaleImage.isLike = true
scaleImage.init(list,index)
},
onPaste(e:any){
if(e.clipboardData.items[0] && !this.isTextarea && this.selectCode !== 'Moodboard' && this.scene?.value != 'Slogan' && this.scene?.value != 'Logo'){
@@ -1748,29 +1766,27 @@ export default defineComponent({
}
.library_body_left{
// width: 27.5rem;
width: 36.5rem;
// width: 36.5rem;
width: 23rem;
height: 100%;
background: rgba(255,255,255,0.4);
margin-right: 5rem;
margin-right: 3rem;
background: #f7f8fa;
>div{
background: #f7f8fa;
border-radius: 2rem;
overflow: hidden;
padding: 2rem 0;
}
.library_menu_list{
padding-left: 2rem;
.menu_item{
width: 100%;
height: 6.8rem;
display: flex;
font-weight: 900;
align-items: center;
justify-content: space-between;
padding: 0 1rem 0 2.5rem;
padding: 1rem 3rem;
border-left: 0.5rem solid transparent;
// font-size: 1.6rem;
font-size: var(--aida-fsize2);
font-size: var(--aida-fsize1-8);
color: #030303;
cursor: pointer;
transition: all .3s;
@@ -1780,11 +1796,8 @@ export default defineComponent({
}
&.select_menu_item{
background: #fff;
border-radius: 2rem;
transform: translateX(2rem);
// background: #E6E6F6;
// border-color: #343579;;
background: #000;
color: #fff;
}
.menu_item_left{
@@ -1795,7 +1808,6 @@ export default defineComponent({
.fi{
font-size: 2.2rem;
display: flex;
color: #030303;
margin-right: 1.8rem;
}
}
@@ -1842,55 +1854,25 @@ export default defineComponent({
cursor: pointer;
}
&:last-child{
margin-right: 11rem;
margin-right: 7rem;
}
}
.content_search_block{
display: flex;
align-items: center;
width: 75rem;
.search_input{
height: 3rem;
border-radius: 0.5rem;
width: 20rem;
border: 1px solid rgba(0, 0, 0, 0.15);
padding-left: 1.5rem;
border: 0.1rem solid #F1F1F1;
font-size: 1.2rem;
font-weight: 400;
margin-right: 2rem;
&::placeholder {
color: #C2C2C2;
}
// width: 85rem;
margin-left: auto;
.generalModel_state_item,.gallery_btn{
margin-right: 3rem;
}
.search_cascader{
// width: 53%;
width: 38rem;
display: flex;
position: relative;
}
.search_icon_block{
width: 5.2rem;
height: 2.8rem;
line-height: 2.8rem;
text-align: center;
background: #343579;
background-color: #39215b;
cursor: pointer;
border-radius: 2rem;
margin-left: 3rem;
.icon-sousuo{
font-size: 1.6rem;
color: #FFFFFF;
}
width: 37rem;
}
.intersection{
margin-left: 3rem;
cursor: pointer;
margin-right: 3rem;
font-size: 3rem;
}
}
@@ -1899,10 +1881,9 @@ export default defineComponent({
display: flex;
padding: 0 3.5rem 0 2.8rem;
align-items: center;
justify-content: space-between;
background: rgba(255,255,255,0.4);
box-shadow: 0 0.2rem 0.8rem 0 rgba(238,238,244,0.25);
margin-bottom: 3rem;
.library_header_left{
height: 4rem;
display: flex;
@@ -1910,30 +1891,15 @@ export default defineComponent({
}
.librart_headr_right{
display: flex;
align-items: center;
.select_block{
// background: #FFFFFF;
color: #1A1A1A !important;
.generalModel_state_item{
margin-right: 2rem;
.ant-select-selector{
border: 2px solid !important;
background: #fff;
}
.ant-select{
.ant-select-arrow{
.icon-xiala{
margin-left: -2rem;
zoom: .7;
}
}
}
.icon-xiala{
color: #1A1A1A !important;
}
}
}
}
}
@@ -1947,23 +1913,24 @@ export default defineComponent({
width: 100%;
height: 100%;
background: #f6f5fa;
padding: 0 2rem 5rem 1rem;
padding: 2rem 4rem;
border-radius: 2rem;
overflow: hidden;
display: flex;
flex-direction: column;
.content_body_header{
height: 10rem;
// height: 10rem;
margin-bottom: 1rem;
display: flex;
justify-content: flex-end;
align-items: center;
// padding: 2rem 0 2rem 3rem;
padding-left: 3rem;
box-sizing: content-box;
justify-content: space-between;
.content_body_header_left{
display: flex;
align-items: center;
width: 100%;
}
.content_body_header_right{
display: flex;
@@ -2017,10 +1984,10 @@ export default defineComponent({
padding-bottom: 0;
background: rgba(0, 0, 0, 0);
width: 55rem;
--width:65%;
.input_box_btnBox{
background: #fff;
align-items: center;
width:65%;
.search_input{
height: 3rem;
}
@@ -2099,12 +2066,15 @@ export default defineComponent({
.img_operate_content{
position: absolute;
right: 0.6rem;
top: 0.6rem;
&.left{
left: 0.6rem;
right: auto;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
max-width: 90%;
display: flex;
flex-wrap: wrap;
>div{
margin-bottom: .5rem;
margin-right: .5rem;
}
}
.img_operate_block{
@@ -2202,37 +2172,6 @@ export default defineComponent({
color:#adabb9
}
}
.select_block{
display: flex;
justify-content: space-between;
font-size: 1.8rem;
color:#adabb9;
font-weight: 300;
.ant-select{
border-radius: 4px;
width: 48%;
border: 0.1rem solid #d9d9d9 !important;
.ant-select-arrow{
.icon-xiala{
margin-left: -0rem;
}
}
}
.ant-select-selection-item{
color:#262626;
font-weight: 300;
}
.ant-select-selector{
margin-left: 0rem;
color:#adabb9;
width: 100%;
padding-left: 2.1rem;
}
.icon-xiala{
color: #adabb9 !important;
font-weight: 400;
}
}
}
.rename_button_list{
@@ -2261,31 +2200,7 @@ export default defineComponent({
color: #FFFFFF;
}
}
.el-cascader{
.el-input--suffix{
--el-input-hover-border-color: #d9d9d9;
// border: .1rem solid #d9d9d9;
}
height: 4.6rem;
.el-tag__content{
line-height: 2.5;
.el-cascader__tags{
}
}
.el-input__wrapper{
padding-left: 0;
}
.el-cascader__search-input,.el-input__inner{
margin: 0;
width: 100%;
height: 4.6rem;
padding-left: 2.1rem;
line-height: 4.6rem;
font-size: 1.8rem;
box-sizing: border-box;
}
}
}