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

调整创建项目

Browse Source
This commit is contained in:
X1627315083
2025-05-22 14:26:47 +08:00
parent bcbcc252e1
commit 608a4dec89
13 changed files with 4545 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/component/HomePage/Generate.vue
View File

@@ -13,7 +13,7 @@
</div> -->
</div>
<div class="input_border" >
<div class="input_box Guide_1_5" :class="[inputShow?'active':'',type_.type2 =='Sketchboard'?'Guide_1_9_2':'',driver__.driver?'showEvents':'']">
<div class="input_box Guide_1_5" :class="[inputShow?'active':'',]">
<div class="input_box_btnBox" v-if="scene?.value != 'extract'">
<div class="upload_item" v-show="sketchboardList?.length != 0">
<div
@@ -186,7 +186,7 @@
</div>
</div>
</div>
<div class="generage_img Guide_1_6" :class="{Guide_1_13_2:type_.type2 == 'Sketchboard',Guide_1_2_9:type_.type2 == 'Printboard',showEvents : driver__.driver}" :style="[isGenerate?'overflow:hidden':'']">
<div class="generage_img" :style="[isGenerate?'overflow:hidden':'']">
<div
class="generage_img_item"
v-for="(item, index) in fileList"

51
src/component/HomePage/NewCollectionReview.vue
View File

@@ -1,11 +1,15 @@
<template>
<!-- 生成collention缩略图用的 -->
<div class="collection_review">
<div class="collection_review_mark"></div>
<!-- <div class="collection_review_mark"></div> -->
<!-- <div class="img_block_item" v-if="allBoardData?.moodTemplateId">
<MoodTemplate :fileList="allBoardData?.moodboardFiles" :moodTemplateId="allBoardData?.moodTemplateId"></MoodTemplate>
</div> -->
<div class="img_block_item" v-if="allBoardData?.disposeMoodboard?.length != 0 && allBoardData?.disposeMoodboard?.[0] != null">
<div class="title">
<div>Moodboard</div>
<i class="fi fi-rr-edit" @click="openCollection('moodBoard')"></i>
</div>
<div v-for="(mood) in allBoardData?.disposeMoodboard" :key="mood" v-show="mood?.imgUrl != ''" class="lager_img_item lager_img_disposeMoodboard" >
<div class="all_img_item_block">
<img class="all_img_content cover_img" :src="mood?.imgUrl" >
@@ -13,6 +17,10 @@
</div>
</div>
<div class="img_block_item" v-else>
<div class="title" v-if="allBoardData?.moodboardFiles?.length>0">
<div>Moodboard</div>
<i class="fi fi-rr-edit" @click="openCollection('moodBoard')"></i>
</div>
<div v-for="(mood) in allBoardData?.moodboardFiles" :key="mood" v-show="mood?.imgUrl != ''" class="lager_img_item lager_img_moodboard" >
<div class="all_img_item_block">
<img class="all_img_content cover_img" :src="mood?.imgUrl" >
@@ -20,7 +28,11 @@
</div>
</div>
<div class="img_block_item">
<div class="img_block_item" v-if="allBoardData?.printboardFiles?.length>0 || allBoardData?.generatePrintFiles?.length>0">
<div class="title">
<div>Printboard</div>
<i class="fi fi-rr-edit" @click="openCollection('printBoard')"></i>
</div>
<div class="small_img_item" v-for="(print) in allBoardData?.printboardFiles" :key="print">
<div class="all_img_item_block">
<img class="all_img_content cover_img" :src="print?.imgUrl">
@@ -33,7 +45,11 @@
</div>
</div>
<div class="img_block_item">
<div class="img_block_item" v-if="allBoardData?.colorBoards?.length>0">
<div class="title">
<div>Colorboard</div>
<i class="fi fi-rr-edit" @click="openCollection('colorBoard')"></i>
</div>
<div class="color_item" v-for="(color) in allBoardData?.colorBoards" :key="color">
<div class="color_content" v-if="!color?.gradient" :style="{background:`rgb(${color?.rgbValue?.r},${color?.rgbValue?.g},${color?.rgbValue?.b},${color?.rgbValue?.a})`}"></div>
<div class="color_content" v-else :style="{height:'11rem','background-image':color?.gradient?`linear-gradient(${color?.gradient.angle}deg,${setGradient(color?.gradient)}`:'none'}"></div>
@@ -52,6 +68,10 @@
</div>
</div> -->
<div class="img_block_item img_block_item_sketch">
<div class="title" v-if="allBoardData?.sketch">
<div>Sketchboard</div>
<i class="fi fi-rr-edit" @click="openCollection('sketchBoard')"></i>
</div>
<div class="lager_img_item" :class="'lager_img_item'+index" v-for="(item,index) in sketch" :key="item">
<div class="all_img_item_block" v-for="v in item" :key="sketch">
<img class="all_img_content" :src="v?.urlWithWhiteSide">
@@ -75,18 +95,23 @@ import MoodTemplate from '@/component/HomePage/MoodTemplate.vue'
import { useStore } from "vuex";
export default defineComponent({
components:{MoodTemplate},
setup() {
emits:['openCollection'],
setup(props, { emit }) {
const store:any = useStore();
let sketch:any = ref([[],[],[]])
let sketchList:any = computed(()=>{
return store.state.UploadFilesModule.showSketchboard})
let allBoardData:any = computed(()=>{
return store.state.UploadFilesModule.allBoardData})
const openCollection = (str:any)=>{
emit('openCollection',str)
}
return {
store,
allBoardData,
sketch,
sketchList,
openCollection,
}
},
data(){
@@ -113,8 +138,10 @@ export default defineComponent({
this.imgOpen = true
}
}else{
this.setSketch()
this.imgOpen = true
nextTick(()=>{
this.setSketch()
this.imgOpen = true
})
}
@@ -215,6 +242,18 @@ export default defineComponent({
// &.color_block_item{
// padding: 0 0.5rem 0 0.3rem;
// }
> .title{
display: flex;
font-size: 1.4rem;
font-weight: 900;
align-items: center;
justify-content: space-between;
> i{
font-size: 2rem;
display: flex;
cursor: pointer;
}
}
.lager_img_item{
display: inline-block;
width: 20.4rem;

14
src/component/home/chat/index.vue
View File

@@ -57,8 +57,8 @@
</div>
<div class="sendBox">
<div class="enableThinking" :class="{active:enableThinking}" @click="()=>enableThinking = !enableThinking">Deep Thinking</div>
<div class="maxNum">{{ chatContent.length }}/10000</div>
<div class="send" :class="{active:chatContent.length>0}" @click="sendChat">
<div class="maxNum">{{ chatContent?.length }}/10000</div>
<div class="send" :class="{active:chatContent?.length>0}" @click="sendChat">
<i class="fi fi-ss-paper-plane-top"></i>
</div>
</div>
@@ -118,7 +118,12 @@ export default defineComponent({
const sendChat = ()=>{
if(!data.isFinish)return
if(!data.chatContent)return
let fileList = JSON.parse(JSON.stringify(data.filList))
let fileList
if(data.filList){
fileList = JSON.parse(JSON.stringify(data.filList))
}else{
fileList = []
}
let fileUrl = (fileList.filter((item:any)=>item.type == 'file').length > 0) ? fileList.filter((item:any)=>item.type == 'file')[0].minioPath : ''
let imageUrlList = (fileList.filter((item:any)=>item.type == 'image').length > 0)? fileList.filter((item:any)=>item.type == 'image').map((item:any)=>item.minioPath).join(',') : ''
data.chatList.push({content:{message:data.chatContent,think:''},role:'user',fileList:fileList})
@@ -148,13 +153,14 @@ export default defineComponent({
data.chatList[data.chatList.length-1].content.think+=JSON.parse(event.data).content
}
}else{
let list = ['[MOOD_SIGNAL]','[PRINT_SIGNAL]','[SKETCH_SIGNAL]']
if(JSON.parse(event.data).status == "[DESIGN_SIGNAL]"){
}else if(JSON.parse(event.data).status == "[COLOR_SIGNAL]"){
data.chatList.push({content:{message:''},role:'system'})
data.chatList[data.chatList.length-1].content.color = JSON.parse(JSON.parse(event.data).tools_data).receiveCollectionElementList
data.chatList.push({content:{message:''},role:'system'})
}else{
}else if(list.indexOf(JSON.parse(event.data).status)>-1){
data.chatList.push({content:{message:''},role:'system'})
data.chatList[data.chatList.length-1].content.img = JSON.parse(JSON.parse(event.data).tools_data).receiveCollectionElementList
data.chatList.push({content:{message:''},role:'system'})

120
src/component/home/design/collection.vue Normal file
View File

@@ -0,0 +1,120 @@
<template>
<div class="collectionModal" ref="collectionModal"></div>
<a-modal
class="collection generalModel"
v-model:visible="habitSetStyle"
:footer="null"
width="75%"
:get-container="() => $refs.collectionModal"
:maskClosable="false"
:centered="true"
:closable="false"
:mask="true"
:keyboard="false"
:destroyOnClose="true"
:zIndex="1000"
>
<div class="generalModel_btn">
<div class="generalModel_closeIcon" @click.stop="cleardata()">
<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
</svg>
</div>
</div>
<div class="designOpenrtion_content">
<!-- <div class="modal_title_text">
<div>Setting</div>
</div> -->
<div class="collectionBox">
<MoodboardUpload ref="moodBoard" v-if="openType == 'moodBoard'"></MoodboardUpload>
<PrintboardUpload ref="printBoard" v-if="openType == 'printBoard'"></PrintboardUpload>
<ColorboardUpload ref="colorBoard" v-if="openType == 'colorBoard'"></ColorboardUpload>
<SketchboardUpload ref="sketchBoard" v-if="openType == 'sketchBoard'"></SketchboardUpload>
</div>
</div>
<div class="mark_loading" v-show="isShowMark">
<a-spin size="large" />
</div>
</a-modal>
</template>
<script lang="ts">
import { defineComponent,computed,ref,provide,nextTick,createVNode,toRefs, reactive} from 'vue'
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { Https } from "@/tool/https";
import { useStore } from "vuex";
import { useI18n } from 'vue-i18n'
import { init } from 'echarts/core';
import MoodboardUpload from './collection/MoodboardUpload.vue';
import PrintboardUpload from './collection/PrintboardUpload.vue';
import ColorboardUpload from './collection/ColorboardUpload.vue';
import SketchboardUpload from './collection/SketchboardUpload.vue';
export default defineComponent({
components:{
MoodboardUpload,PrintboardUpload,ColorboardUpload,SketchboardUpload,
},
props:{
},
emits:['getHistory'],
setup(props,{emit}) {
const store = useStore();
const data = reactive({
habitSetStyle:false,
isShowMark:false,
openType:'',
})
let driver__:any = computed(()=>{
return store.state.Guide.guide
})
provide('driver__',driver__)
const dataDom = reactive({
moodBoard:null as any,
printBoard:null as any,
colorBoard:null as any,
sketchBoard:null as any,
}) as any
const init = (value:any)=>{
data.habitSetStyle = true
data.openType = value
nextTick(()=>{
dataDom[value].openSetData()
})
}
let cleardata = ()=>{
data.habitSetStyle = false
if(data.openType)store.dispatch('setAllBoardData',{type:data.openType})
}
return{
...toRefs(dataDom),
...toRefs(data),
cleardata,
init,
}
},
provide() {
return {
}
},
})
</script>
<style lang="less" scoped>
.collectionModal{
:deep(.designOpenrtion_content){
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
.collectionBox{
width: 100%;
height: 100%;
display: flex;
.collection_modal_item{
overflow: hidden;
}
}
}
}
</style>

1468
src/component/home/design/collection/ColorboardUpload.vue Normal file
View File

File diff suppressed because it is too large Load Diff

743
src/component/home/design/collection/MoodboardUpload.vue Normal file
View File

@@ -0,0 +1,743 @@
<template>
<div class="collection_modal_item">
<div class="modal_left" >
<div class="switch_type_list" >
<div
@click.stop="open(1)"
class="switch_type_item"
:class="[openClick == 1 ? 'select_swtich' : '']"
>
<span>{{ $t('MoodboardUpload.Upload') }}</span>
</div>
<div
@click.stop="open(2)"
class="switch_type_item"
:class="[openClick == 2 ? 'select_swtich' : '']"
>
<span>{{ $t('MoodboardUpload.Library') }}</span>
</div>
<div
@click.stop="open(3)"
class="switch_type_item"
:class="[openClick == 3 ? 'select_swtich' : '']"
>
<span>{{ $t('MoodboardUpload.Generate') }}</span>
</div>
</div>
<div v-show="openClick == 1" class="moodboard_body">
<div class="upload_img_body scroll_style">
<div class="upload_item">
<div
class="upload_file_item"
v-for="(file, index) in fileList"
:key="file"
>
<div
class="upload_file_item_content"
v-show="file?.status === 'uploading'"
>
<a-spin
:indicator="indicator"
tip="Uploading..."
/>
</div>
<div
class="upload_file_item_content"
v-show="file?.status === 'done'"
>
<img :src="file?.imgUrl" class="upload_img" />
<div
class="delete_file_block"
@click="deleteFile(file)"
>
{{ $t('MoodboardUpload.Delete') }}
</div>
</div>
</div>
<div
class="upload_file_item upload_component"
v-show="moodboarList.length < 8"
>
<a-upload
:action="uploadUrl + '/api/element/upload'"
list-type="picture-card"
:capture="null"
:data="{
...upload,
}"
:headers="{ Authorization: token }"
:before-upload="beforeUpload"
v-model:file-list="fileList"
:maxCount="8 - moodboarList.length+fileList.length"
accept=".jpg,.png,.jpeg,.bmp"
@change="(file) => fileUploadChange(file)"
>
<div
class="upload_tip_block"
v-show=" moodboarList.length < 8"
>
<i class="fi fi-br-upload"></i>
<!-- <img class="upload_img_icon" src="@/assets/images/homePage/add_file.png"> -->
</div>
</a-upload>
</div>
</div>
</div>
<div class="upload_max_tip">
<span class="icon iconfont icon-zhuyi"></span>
<span>{{ $t('MoodboardUpload.Maximum') }}</span>
</div>
<!-- <div class="upload_max_tip">
<span class="icon iconfont icon-zhuyi"></span>
<span
>Maximum 10 images can be uploaded, Maximum 2M per
image</span
>
</div> -->
</div>
<Material
v-show="openClick == 2"
ref="Material"
msg="Moodboard"
></Material>
<Generate
v-show="openClick == 3"
ref="Generate"
msg="Moodboard"
></Generate>
</div>
<div class="modal_right" v-show="moodboarList.length >= 1 || edieShow">
<div class="modal_layout" >
<div class="modal_text">
<div>
{{ $t('MoodboardUpload.Thumbnail') }}
</div>
<div v-show="moodboarList.length > 1" class="modal_btn started_btn" @click="layout()">{{ $t('MoodboardUpload.layout') }}</div>
</div>
<div class="modal_img" >
<div class="modal_img_item" v-for="item,index in moodboarList" :key="item" @click="deleteFile(item)">
<img v-lazy="item.imgUrl">
<div class="checked" >
<i class="fi fi-rr-trash"></i>
</div>
</div>
</div>
</div>
<div class="modal_accomplish" v-show="modalImg[0]?.id || loadingShow">
<div class="modal_text">
<div>{{ $t('MoodboardUpload.selected') }}</div>
<div class="modal_btn started_btn" @click.stop="changeTemplateModal()">{{ $t('MoodboardUpload.Edit') }}</div>
</div>
<div class="modal_img_max">
<div v-if="!modalImg[0]?.id" class="modal_img" id="modal_img" :class="{active:flex_direction}">
<div v-for="item,index in layoutList" :class="[moodb_className[index]]" class="modal_imgItem">
<img :src="item.imgUrl" v-modelImg>
</div>
</div>
<div v-else class="modal_img">
<img :src="modalImg[0].imgUrl">
</div>
<div class="mark_loading" v-show="loadingShow">
<a-spin size="large" />
</div>
</div>
</div>
</div>
<layout ref="layout" :moodb_className="moodb_className" :flex_direction="flex_direction" @setmoodbClass="setmoodbClass"></layout>
</div>
</template>
<script lang="ts">
import { defineComponent, h, ref ,computed,nextTick,inject} from "vue";
import { LoadingOutlined } from "@ant-design/icons-vue";
import { getCookie } from "@/tool/cookie";
import { getUploadUrl,isMoible } from "@/tool/util";
import { useStore } from "vuex";
import { message, Upload } from "ant-design-vue";
import { Https } from "@/tool/https";
import Material from "@/component/HomePage/Material.vue";
import Generate from "@/component/HomePage/Generate.vue";
import MoodTemplate from "@/component/HomePage/MoodTemplate.vue";
import layout from "@/component/HomePage/layout.vue";
import domTurnImg from '@/tool/domTurnImg'
import GO from "@/tool/GO";
import moodb from "@/tool/moodb";
import { useI18n } from "vue-i18n";
export default defineComponent({
components: { Material, MoodTemplate, Generate,layout },
setup() {
const store = useStore()
let lessenList: any = ref([]);
let fileList: any = ref([]);
let showFileList: any = ref([]);
let templateModal: any = ref(false);
let templateFileList: any = ref([]);
let openClick: any = ref(1);
let moodb_className:any = ref([]);
let flex_direction:any = ref(false)//判断第二种格子类型弹性布局方式
let layoutList:any = []//选中后随机生成的list
let layoutOpen = ref(false)
let loadingShow = ref(false)
let modalImg:any= computed(()=>{
return store.state.UploadFilesModule.disposeMoodboard
})
let uploading:any = ref([])
let edieShow:any = ref()
let {t} = useI18n()
return {
fileList,
showFileList,
lessenList,
templateModal,
templateFileList,
openClick,
moodb_className,
flex_direction,
layoutList,
layoutOpen,
loadingShow,
modalImg,
uploading,
edieShow,
t,
};
},
data() {
return {
indicator: h(LoadingOutlined, {
style: {
fontSize: "2.4rem",
},
spin: true,
}),
upload: {
isPin: 0,
gender:'',
level1Type: "Moodboard",
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
},
token: "",
uploadUrl: "",
moodTemplateId: "", //模板id
store: useStore(),
moodb_:moodb.moodb_,
moodboarList:computed(()=>{
return useStore().state.UploadFilesModule.moodboard
}),
};
},
// watcheffect(){
// let breviaryList = this.store.state.UploadFilesModule.moodboardFiles.filter(
// (v: any) => v.checked == true
// );
// this.store.commit("setMoodboardFile", breviaryList);
// console.log(22);
// },
mounted() {
this.token = getCookie("token") || "";
this.uploadUrl = getUploadUrl();
},
directives:{
modelImg:{
mounted(el) {
let parentNode = el.parentNode
if(parentNode.offsetHeight >= parentNode.offsetWidth){
el.style.height = 100+'%'
el.style.width = 'auto'
}else{
el.style.width = 100+'%'
el.style.height = 'auto'
}
},
updated (el) {
let parentNode = el.parentNode
if(parentNode.offsetHeight >= parentNode.offsetWidth){
el.style.height = 100+'%'
el.style.width = 'auto'
}else{
el.style.width = 100+'%'
el.style.height = 'auto'
}
}
}
},
methods: {
open(num: Number) {
this.openClick = num;
if(num ==2 ){
let material:any = this.$refs.Material
material.init('Moodboard')
}else if (num == 3){
}
},
fileUploadChange(data: any) {
let file = data.file;
let bor = true
if (file.status === "done") {
let res = JSON.parse(file.xhr.response);
if(res.errCode == 0){
file.imgUrl = res.data.url;
file.resData = res.data;
file.type_ = {
type1:'upload',
type2:'Moodboard'
};
file.id_ = GO.id++
file.id = res.data.id
let fileList = this.fileList.filter(
(v: any) => v.status === "done"
);
let arr = this.store.state.UploadFilesModule.moodboard
if(arr.length >= 8){
message.info(this.t('MoodboardUpload.jsContent1'))
}else{
this.store.commit("setMoodboardFile", fileList);
}
}else{
bor = false
}
// this.showFileList = this.fileList
} else if (file.status === "error") {
bor = false
}
if(!bor){
let res:any = JSON.parse(file.xhr.response);
let index = -1;
this.fileList.forEach((ele: any, index1: any) => {
if (file.uid === ele.uid) {
index = index1;
}
});
if (index > -1) {
this.fileList.splice(index, 1);
}
// message.warning(file.name + this.t('MoodboardUpload.jsContent2'));
message.warning(res.errMsg);
}
},
beforeUpload(file: any) {
const isJpgOrPng =
file.type === "image/jpeg" ||
file.type === "image/png" ||
file.type === "image/jpg" ||
file.type === "image/bmp";
if (!isJpgOrPng) {
message.info(this.t('MoodboardUpload.jsContent3'));
}
const isLt2M = file.size / 1024 / 1024 < 5;
if (!isLt2M) {
message.info(this.t('MoodboardUpload.jsContent4'));
}
return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
},
deleteFile(item: any) {
if(item.type_.type1 == 'generate' || item.type_.type1 == 'material'){
item.jsContent1 = this.t('uploadFile.jsContent1',{maxImg:8})
item.state = 'delete'
this.store.commit("addGenerateMaterialFils", item);
}else{
this.fileList = this.store.state.UploadFilesModule.moodboardFiles
let moodboard
this.store.state.UploadFilesModule.moodboardFiles.forEach((items:any,index:Number)=>{
if(items.id_ == item.id_){
moodboard = index
}
})
this.fileList.splice(moodboard,1)
this.store.commit("setMoodboardFile", this.fileList);
}
if(this.store.state.UploadFilesModule.moodboard.length == 0){
this.store.commit("clearMoodTemplateId");
this.layoutList = []
this.edieShow = false
}
},
openSetData() {
let arr = JSON.parse(
JSON.stringify(
this.store.state.UploadFilesModule.allBoardData
.moodboardFiles
)
) || [];
let disposeMoodboard = JSON.parse(
JSON.stringify(
this.store.state.UploadFilesModule.allBoardData
.disposeMoodboard
)
);
let moodboardPosition = JSON.parse(
JSON.stringify(
this.store.state.UploadFilesModule.allBoardData
.moodboardPosition
)
);
let setboard = {
generate:[] as any,
material:[] as any,
moodboard:[] as any,
}
arr.forEach((v:any)=>{
if(v.type_.type1 == 'generate'){
setboard.generate.push(v)
}else if(v.type_.type1 == 'material'){
setboard.material.push(v)
}else{
setboard.moodboard.push(v)
}
})
this.store.commit("setMoodboardGenerateFiles", setboard.generate);
this.store.commit("setMoodboardMaterialFiles", setboard.material);
this.store.commit("setMoodboardFile", setboard.moodboard);
this.store.commit("setDisposeMoodboard", disposeMoodboard[0]);
this.store.commit("setDisposeMoodboardPosition",moodboardPosition);
this.fileList = setboard.moodboard
},
async changeTemplateModal() {
if(this.modalImg[0]?.id){
let layout:any = this.$refs.layout
if(this.layoutList.length <= 0){
let styleObj = this.store.state.UploadFilesModule.moodboardPosition
if(!styleObj.domStyle)await this.layout()
//
let arr = JSON.parse(JSON.stringify(this.store.state.UploadFilesModule.moodboard))
this.layoutList = arr
}
if(window.screen.width<1300){
layout.isMobile = true
}else{
layout.isMobile = false
}
layout.init()
}else{
message.info(this.t('MoodboardUpload.jsContent5'))
}
},
async layout(){
if(this.loadingShow)return
await new Promise((resolve, reject) => {
this.loadingShow = true
this.store.commit("setDisposeMoodboard", []);
let arr = JSON.parse(JSON.stringify(this.store.state.UploadFilesModule.moodboard))
this.layoutList = arr
var random = Math.round(Math.random()*(this.moodb_[arr.length-1].length-1))
let moodb = this.moodb_[arr.length-1][random]
if( moodb.filter((item,index)=> item == 'w2h1').length != 0 && arr.length > 4){
this.flex_direction = true
}else{
this.flex_direction = false
}
if(this.moodb_[arr.length-1].length != 1){
if(JSON.stringify(this.moodb_className) == JSON.stringify(this.moodb_[arr.length-1][random])){
this.loadingShow = false
this.layout()
return resolve('')
}
}
this.edieShow = true
if(this.moodb_[arr.length-1].length == 2){
this.moodb_className = this.moodb_[arr.length-1][0]
}else{
this.moodb_className = this.moodb_[arr.length-1][random]
}
this.layoutOpen = true
//提交模板
// this.loadingShow = true
this.layoutList.forEach((v:any)=>{
v.setPitch = false
})
nextTick().then(()=>{
let layoutCentent = document.getElementById('modal_img')
let obj = {
imgStyle:[],
domStyle:[],
borStyle:[],
rototeStyle:[],
translateStyle:[],
angleTRStyle:[],
angleTLStyle:[],
angleBRStyle:[],
angleBLStyle:[],
class:this.moodb_className,
}
this.store.commit("setDisposeMoodboardPosition", obj);
domTurnImg(layoutCentent).then((rv)=>{
let file = rv
let param = new FormData();
param.append('inPin','0')
param.append('level1Type','Moodboard')
param.append('gender','')
param.append('timeZone',Intl.DateTimeFormat().resolvedOptions().timeZone)
param.append('file',file);
let config:any = {headers:{'Content-Type':'multipart/form-data','Accept':'*/*' }}
Https.axiosPost(Https.httpUrls.elementUpload,param,config)
.then((rv: any) => {
let img:any = rv
img.imgUrl = rv.url
img.resData = JSON.parse(JSON.stringify(img))
this.store.commit("setDisposeMoodboard", img);
this.loadingShow = false
resolve('')
}
).catch(rv=>{
this.loadingShow = false
})
})
})
})
},
setmoodbClass(val:any){
this.moodb_className = val
}
},
});
</script>
<style lang="less" scoped>
.collection_modal_item {
// padding: 1.5rem 2.6rem 4rem;
height: 100%;
flex: 1;
display: flex;
justify-content: space-between;
.modal_left,.modal_right{
background: #f7f8fa;
border-radius: 3rem;
padding: 2rem 3rem;
}
.modal_left {
width: 71rem;
display: flex;
flex: 1;
flex-direction: column;
flex-shrink: 0;
margin-right: 2rem;
// width: 50rem*1.2);
.switch_type_list {
display: flex;
align-items: center;
position: relative;
.switch_type_item {
display: flex;
align-items: center;
// padding: 0 2rem*1.2);
height: calc(4rem*1.2);
border-radius: calc(0.8rem*1.2);
line-height: calc(4rem*1.2);
font-size: var(--aida-fsize1-8);
// margin-right: 2.2rem*1.2);
margin-right: calc(8rem*1.2);
color: #000;
cursor: pointer;
position: relative;
text-align: center;
transform-origin: left;
transform: scale(1);
transition: 0.3s all;
&.switch_type_item::before {
position: absolute;
content: "";
display: block;
background: #000;
height: calc(.3rem*1.2);
left: 50%;
transform: translateX(-50%);
bottom: calc(.6rem*1.2);
width: 0px;
transition: 0.3s all;
}
&.select_swtich {
color: #000;
// font-weight: 900;
transform: scale(1.15);
}
&.select_swtich::before {
width: 100%;
}
.switch_icon {
font-size: calc(1.8rem*1.2);
margin-right: calc(0.8rem*1.2);
}
}
}
.moodboard_body {
padding-top: calc(2.5rem*1.2);
flex: 1;
height: calc(30rem*1.2);
overflow-x: hidden;
display: flex;
flex-direction: column;
&.moodboard_body::-webkit-scrollbar {
display: none;
}
.upload_img_body {
height: 100%;
overflow-y: auto;
margin-bottom: calc(1rem*1.2);
}
.upload_max_tip {
display: flex;
align-items: center;
justify-content: center;
font-size: calc(1.4rem*1.2);
color: #030303;
.icon-zhuyi {
font-size: calc(1.6rem*1.2);
margin-right: calc(0.7rem*1.2);
}
}
}
}
.modal_right{
flex: 1;
display: flex;
min-width: calc(57rem*1.2);
flex-direction: column;
overflow: hidden;
.modal_layout,.modal_accomplish{
.modal_text{
font-size:var(--aida-fsize1-4);
font-weight: 400;
color: rgba(0, 0, 0, 0.45);
display: flex;
align-items: center;
justify-content: space-between;
}
}
.modal_layout{
.modal_img{
width: calc(40rem*1.2);
height: calc(5rem*1.2);
overflow-x: hidden;
display: flex;
&.modal_img::-webkit-scrollbar {
display: none;
}
.modal_img_item{
width: calc(4rem*1.2);
height: calc(4rem*1.2);
text-align: center;
margin: 0 calc(1rem*1.2) calc(1rem*1.2) 0;
position: relative;
cursor: pointer;
overflow: hidden;
img{
width: auto;
height: 100%;
max-width: 100%;
object-fit: cover;
}
.checked{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
cursor: pointer;
display: none;
justify-content: center;
align-items: center;
}
&.modal_img_item:hover .checked{
display: flex;
}
}
}
}
.modal_accomplish{
// margin-top: 2rem*1.2);
height: calc(30rem*1.2);
display: flex;
flex: 1;
flex-direction: column;
.modal_text{
padding-top: calc(2rem*1.2);
padding-block: calc(2rem*1.2);
}
.modal_img_max{
// width: calc(57rem*1.2);
// height: calc(35rem*1.2);
width: 100%;
aspect-ratio: 1.62 / 1;
position: relative;
.mark_loading{
position: absolute;
}
}
.modal_img{
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
flex-wrap: wrap;
align-items: center;
flex-direction: column;
position: relative;
>img{
// height: 100%;
width: 100%;
max-height: 100%;
object-fit: contain;
}
&.active{
flex-direction: row;
}
.modal_imgItem{
position: relative;
overflow: hidden;
text-align: center;
img{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
float: left;
user-select:none;
-webkit-user-drag: none;
}
}
.wh1{
width: 23%;
height: 48%;
}
.wh4{
width: 48.5%;
height: 100%;
}
.wh8{
width: 100%;
height: 48.5%;
}
.w1h2{
width: 23%;
height: 100%;
}
.w2h1{
width: 48.5%;
height: 48%;
}
}
}
}
}
</style>

1000
src/component/home/design/collection/PrintboardUpload.vue Normal file
View File

File diff suppressed because it is too large Load Diff

962
src/component/home/design/collection/SketchboardUpload.vue Normal file
View File

@@ -0,0 +1,962 @@
<template>
<div class="sketchboard_upload_modal">
<div class="modal_left">
<div class="switch_type_list" :class="[driver__.driver?'showEvents':'']">
<div
@click.stop="open(1)"
class="switch_type_item"
:class="[openClick == 1 ? 'select_swtich' : '']"
>
<span>{{ $t('SketchboardUpload.Upload') }}</span>
</div>
<div
@click.stop="open(2)"
class="switch_type_item"
:class="[openClick == 2 ? 'select_swtich' : '']"
>
<span>{{ $t('SketchboardUpload.Library') }}</span>
</div>
<div
@click.stop="open(3)"
class="switch_type_item Guide_1_9"
:class="[openClick == 3 ? 'select_swtich' : '', driver__.driver?'showEvents':'']"
>
<span>{{ $t('SketchboardUpload.Generate') }}</span>
</div>
<div v-show="openClick == 3" class="generalMenu_printModel printMenu">
<div @click.stop="openPrintModel"> <span>{{ scene.name }}<i class="icon iconfont icon-xiala" :class="{forbidden:openMenu}"></i></span>
</div>
<ul v-show="openMenu">
<li
v-for="item,index in sketchStyleList"
class="printModel_item"
@click.stop="setSceneList(item)"
:title="item.value == 'Pattern'?$t('PrintboardUpload.PatternTitle'):
item.value == 'Logo'?$t('PrintboardUpload.LogoTitle'):
item.value == 'Slogan'?$t('PrintboardUpload.SloganTitle'):''"
>{{ item.name }}</li>
</ul>
</div>
</div>
<div v-show="openClick == 1" class="sketchboard_body">
<div class="upload_img_body scroll_style">
<div class="upload_item">
<div
class="upload_file_item"
v-for="(file, index) in fileList"
:key="file"
>
<div
class="upload_file_item_content"
v-show="file?.status === 'uploading'"
>
<a-spin
:indicator="indicator"
tip="Uploading..."
/>
</div>
<div
class="upload_file_item_content"
v-show="file?.status === 'done'"
>
<img :src="file?.imgUrl" class="upload_img" />
<sketchCategory :disignTypeList="sketchCatecoryList" :generateList="fileList" :item="file" :driver__="driver__.driver"></sketchCategory>
<div
class="delete_like_file_block"
@click.stop="deleteFile(file)"
>
<span
class="icon iconfont icon-shanchu"
></span>
</div>
</div>
<!-- <div
class="pin_block"
v-show="file?.status === 'done'"
>
<a-checkbox v-model:checked="file.pin"
>{{ $t('SketchboardUpload.PIN') }}</a-checkbox
>
</div> -->
</div>
<div
class="upload_file_item upload_component"
v-show="sketchboardList.length < 20"
>
<a-upload
:action="uploadUrl + '/api/element/upload'"
:capture="null"
list-type="picture-card"
:data="{
...upload,
gender:workspace.sex,
}"
:multiple="!driver__.driver"
:before-upload="beforeUpload"
:headers="{ Authorization: token }"
v-model:file-list="fileList"
:maxCount="20 - sketchboardList.length+fileList.length"
accept=".jpg,.png,.jpeg,.bmp"
@change="(file) => fileUploadChange(file)"
>
<div
class="upload_tip_block"
v-show="sketchboardList.length < 20"
>
<i class="fi fi-br-upload"></i>
<!-- <img class="upload_img_icon" src="@/assets/images/homePage/add_file.png"> -->
</div>
</a-upload>
</div>
</div>
</div>
<div class="upload_max_tip">
<span class="icon iconfont icon-zhuyi"></span>
<span>{{ $t('SketchboardUpload.Maximum',{maxImg:20}) }}</span>
</div>
</div>
<Material
v-show="openClick == 2"
ref="Material"
msg="Sketchboard"
@confirmSelect="confirmSelect"
:disignTypeList="sketchCatecoryList"
@setLibrary = setSetchboardGenerate
></Material>
<Generate
v-show="openClick == 3"
ref="Generate"
msg="Sketchboard"
:scene="scene"
:gender="workspace.sex"
:sketchCatecoryList="sketchCatecoryList"
></Generate>
</div>
<div class="modal_right">
<div class="modal_layout">
<div class="modal_text">
<div>{{ $t('SketchboardUpload.Thumbnail') }}</div>
<!-- <div class="modal_btn started_btn" @click="layout()">layout</div> -->
</div>
<!-- <div class="modal_img modal_img_x" v-mousewheel>
<div class="mousewheel">
<div class="modal_img_item" v-for="item,index in sketchboardList" :key="item" @click="deleteFile(item)">
<img v-lazy="item.imgUrl">
<div class="checked" >
<i class="fi fi-rr-trash"></i>
</div>
</div>
</div>
</div> -->
</div>
<div class="modal_accomplish">
<div class="modal_img">
<div v-for="item,index in sketchboardList" :key="item" class="modal_imgItem" :class="[driver__.driver?'showEvents':'']" >
<img v-lazy="item.imgUrl">
<sketchCategory :disignTypeList="sketchCatecoryList" :generateList="sketchboardList" :isSpread="true" :item="item" :driver__="driver__.driver"></sketchCategory>
<!-- 在sketch 和print暂时关闭like -->
<!-- <div
class="delete_like_file_block left1"
:class="[driver__.driver?'hideEvents':'']"
>
<i v-if="!item.like" class="fi fi-rr-heart" @click.stop="likeFile(item,'like')"></i>
<i v-else class="fi fi-sr-heart" :adminLike="!!item.like" @click.stop="likeFile(item,'noLike')"></i>
</div> -->
<div class="pin_block">
<label @click="()=>{if(!item?.pin)item.pin = false;item.pin = !item.pin}">
<i v-if="item.pin" class="fi fi-rr-check"></i>
<i v-else class="fi noCheck"></i>
<span>PIN</span>
</label>
</div>
<div class="moreBox" @click.stop>
<more :moreList="['edit','down','enlargement','delete']" :item="item" :index="index" @deleteFile="deleteFile" @scaleImage="scaleImage"></more>
</div>
</div>
</div>
</div>
</div>
<scaleImage ref="scaleImage"></scaleImage>
<!-- <layout ref="layout" :moodb_className="moodb_className" :flex_direction="flex_direction" @setmoodbClass="setmoodbClass"></layout> -->
</div>
</template>
<script lang="ts">
import { defineComponent, h, ref, createVNode,computed,inject, nextTick } from "vue";
import { LoadingOutlined } from "@ant-design/icons-vue";
import { getCookie } from "@/tool/cookie";
import { getUploadUrl } from "@/tool/util";
import GO from "@/tool/GO";
import { useStore } from "vuex";
import { message, Upload, Modal } from "ant-design-vue";
import Material from "@/component/HomePage/Material.vue";
import Generate from "@/component/HomePage/Generate.vue";
import scaleImage from "@/component/HomePage/scaleImage.vue";
import { Https } from "@/tool/https";
import { openGuide,driverObj__ } from "@/tool/guide";
import { useI18n } from "vue-i18n";
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import sketchCategory from "@/component/HomePage/sketchCategory.vue";
import more from './more.vue'
export default defineComponent({
components: { Material, Generate,scaleImage,sketchCategory,more },
setup() {
let fileList: any = ref([
]);
let openClick: any = ref(1);
let store:any =useStore()
let sketchCatecoryList:any = computed(()=>{
return store.state.Workspace.probjects.positionList
})
let sketchCatecoryAllList:any = computed(()=>{
return store.state.Workspace.workspaceAllPosition
})
let workspace:any = computed(()=>{
return store.state.Workspace.probjects
})
let sketchboardList:any = computed(()=>{
return store.state.UploadFilesModule.sketchboard
})
let {t} = useI18n()
let driver__:any = inject('driver__')
let isTest = ref()
let useGenerate:any = ref({
imgId : '',
imgUrl:1,
checked:false,
level2Type:'',
designType:'',
})
let openMenu = ref(false)
let sketchStyleList:any = computed(()=>{
return store.state.UserHabit.SketchGenerateType
})
let scene = ref({
name: t('SketchboardUpload.GenerateSketch'),
value:'generate'
})
return {
fileList,
openClick,
store,
sketchCatecoryList,
sketchCatecoryAllList,
workspace,
sketchboardList,
t,
driver__,
isTest,
useGenerate,
scene,
openMenu,
sketchStyleList,
};
},
data() {
return {
swtich_type: "upload",
indicator: h(LoadingOutlined, {
style: {
fontSize: "2.4rem",
},
spin: true,
}),
upload: {
isPin: 0,
level1Type: "Sketchboard",
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
},
token: "",
uploadUrl: "",
isTextarea:false,
isInputFocus:false,
};
},
computed: {
getSketchLabel(value) {
return (value: any) => {
let lable = "";
for (let item of this.sketchCatecoryList) {
if (item.value === value) {
lable = item.label;
break;
}
}
return lable;
};
},
},
directives:{
mousewheel:{
mounted (el) {
// let bodyDom:any = document.getElementsByClassName('right_content_block')[0]
let dom:any = document.getElementsByClassName('modal_img_x')
let mouseover = ()=>{
// bodyDom.classList.add('active')
}
let mouseleave = ()=>{
// bodyDom.classList.remove('active')
}
dom.forEach((item:any) => {
item.addEventListener('mouseover',mouseover)
item.addEventListener('mouseleave',mouseleave)
});
el.addEventListener('wheel',(e:WheelEvent)=>{
let num = 0
if(e.deltaY > 0){
num = 25
}else{
num = -25
}
el.scrollBy(num, 0);
},true)
}
}
},
watch:{
sketchboardList:{
handler(newVal:any,oldVal:any){
if(newVal.length>=2 && this.driver__.driver&& newVal.length!=oldVal.length){
if(this.driver__.driver){
// driverObj__.moveTo(22)
}
}
}
},
driver__:{
handler(newVal,oldVal){
if(newVal.index >= 15 && newVal.index <= 16){
if(this.driver__.driver){
// driverObj__.moveTo(15)
}
}else{
}
}
}
},
mounted() {
this.token = getCookie("token") || "";
let isTest:any = getCookie('isTest')
this.isTest =JSON.parse(isTest)
this.uploadUrl = getUploadUrl();
let Generate:any = this.$refs.Generate
if(this.driver__.driver){
Generate.searchPictureName = 'A detailed sketch of an elegant blouse with a high neck, flowing sleeves, and lace trim, highlighting texture and style.'
}else{
Generate.searchPictureName = ''
}
},
methods: {
setSetchboardGenerate(item:any){
this.useGenerate.imgId = item.imgId
this.useGenerate.imgUrl = item.imgUrl
this.useGenerate.level2Type = item.level2Type
this.useGenerate.designType = item.designType
let Material:any = this.$refs.Material
let generate:any = this.$refs.Generate
if(item.designType == 'collection'){
}else {
generate.sketchboardList.forEach((item:any) => {
item.checked = false
});
}
},
open(num: Number) {
this.openClick = num;
if (num == 2) {
let material: any = this.$refs.Material;
material.init("Sketchboard");
} else if (num == 3) {
// let Generate:any = this.$refs.Generate
// Generate.init('generate')
nextTick().then(()=>{
if(this.driver__.driver){
driverObj__.moveNext()
}
})
}
},
scaleImage(index:any){
let scaleImage:any = this.$refs.scaleImage
scaleImage.isLike = false
scaleImage.init(this.sketchboardList,index)
},
fileUploadChange(data: any) {
let file = data.file;
let bor = true
if (file.status === "done") {
let res = JSON.parse(file.xhr.response);
if(res.errCode == 0){
let category:any={
value:'',
name:'',
}
this.sketchCatecoryList.forEach((item:any) => {
if(item.value == res.data.level2Type){
category.value = item?.value
category.name = item?.name
}
});
file.imgUrl = res.data.url;
file.resData = res.data;
// file.pin = false;
//category用来数据处理
file.categoryValue = category?.value;
file.category = category?.name;
file.categoryShow = false;
file.id_ = GO.id++
file.id = res.data.id
file.type_ = {
type1:'upload',
type2:'Sketchboard'
};
let fileList = this.fileList.filter(
(v: any) => v.status === "done"
);
this.store.commit("setSketchboardFile", fileList);
}else{
bor = false
}
} else if (file.status === "error") {
bor = false
}
if(!bor){
let index = -1;
let res:any = JSON.parse(file.xhr.response);
this.fileList.forEach((ele: any, index1: any) => {
if (file.uid === ele.uid) {
index = index1;
}
});
if (index > -1) {
this.fileList.splice(index, 1);
}
// message.warning(file.name + this.t('SketchboardUpload.jsContent1'));
message.warning(res.errMsg);
}
},
beforeUpload(file: any) {
const isJpgOrPng =
file.type === "image/jpeg" ||
file.type === "image/png" ||
file.type === "image/jpg" ||
file.type === "image/bmp";
if (!isJpgOrPng) {
message.info(this.t('SketchboardUpload.jsContent2'));
}
const isLt2M = file.size / 1024 / 1024 < 5;
if (!isLt2M) {
message.info(this.t('SketchboardUpload.jsContent3'));
}
return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
},
deleteFile(item: any) {
if(item?.type_?.type1 == 'generate' || item?.type_?.type1 == 'material'){
item.jsContent1 = this.t('uploadFile.jsContent1',{maxImg:20})
item.state = 'delete'
this.store.commit("addGenerateMaterialFils", item);
}else{
this.fileList = this.store.state.UploadFilesModule.sketchboardFiles
let moodboard
this.store.state.UploadFilesModule.sketchboardFiles.forEach((items:any,index:Number)=>{
if(items.id_ == item.id_){
moodboard = index
}
})
this.fileList.splice(moodboard,1)
this.store.commit("setSketchboardFile", this.fileList);
}
},
likeFile(item:any,str:string){
if(str == 'like'){
let data = {
generateDetailId:item.id,
level1Type:"Sketchboard",
level2Type: item.categoryValue?item.categoryValue:item.level2Type,
gender:this.workspace.sex,
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone
}
Https.axiosPost(Https.httpUrls.generateLike, data).then(
(rv) => {
item.like = true
}
).catch(res=>{
});
}else{
let data = {
generateDetailId:item.id,
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone
}
Https.axiosGet(Https.httpUrls.generateDislike, {params:data}).then(
(rv) => {
item.like = false
}
).catch(res=>{
});
}
},
openSetData() {
this.useGenerate = {
imgId : '',
imgUrl:1,
checked:false,
level2Type:'',
designType:''
}
let arr = JSON.parse(
JSON.stringify(
this.store.state.UploadFilesModule.allBoardData
.sketchboardFiles
)
) || [];
let setboard = {
generate:[] as any,
material:[] as any,
moodboard:[] as any,
}
arr.forEach((v:any)=>{
v.pin = v.pin == 1?true:false
this.sketchCatecoryAllList.forEach((item:any) => {
if(v.level2Type == item.value){
v.category=item.name
v.categoryValue=item.value
}
});
if(v.type_.type1 == 'generate'){
setboard.generate.push(v)
}else if(v.type_.type1 == 'material'){
setboard.material.push(v)
}else{
setboard.moodboard.push(v)
}
})
this.store.commit("setSketchboardGenerateFiles", setboard.generate);
this.store.commit("setSketchboardMaterialFiles", setboard.material);
this.store.commit("setSketchboardFile", setboard.moodboard);
this.fileList = setboard.moodboard
},
confirmSelect(event: any) {
for (let item of event) {
let data = {
imgUrl: item.url,
resData: item,
pin: false,
status: "done",
category: item.level2Type || "Outwear",
categoryShow: false,
};
if (this.fileList.length == 15) {
message.warning(
this.t('SketchboardUpload.jsContent4')
);
break;
}
this.fileList.push(data);
}
this.store.commit("setSketchboardFile", this.fileList);
},
setSceneList(data:any){
if(this.scene.value === data.value) return
this.scene = data
let generate:any = this.$refs.Generate
generate.sketchboardList = []
generate.searchPictureName = ''
this.openMenu = false
},
openPrintModel(){
if(this.openMenu)return
document.addEventListener('click',this.removePrintModel)
this.openMenu = true
},
removePrintModel(){
this.openMenu = false
document.removeEventListener('click',this.removePrintModel)
}
},
});
</script>
<style lang="less" scoped>
.sketchboard_upload_modal {
height: 100%;
width: 100%;
display: flex;
.modal_left,.modal_right{
background: #f7f8fa;
border-radius: 3rem;
padding: 2rem 3rem;
}
.modal_left {
width: 71rem;
margin-right: 2rem;
display: flex;
flex-direction: column;
.switch_type_list {
display: flex;
align-items: center;
position: relative;
.switch_type_item {
display: flex;
align-items: center;
// padding: 0 2rem*1.2);
height: calc(4rem*1.2);
border-radius: calc(0.8rem*1.2);
line-height: calc(4rem*1.2);
font-size: var(--aida-fsize1-8);
// margin-right: 2.2rem*1.2);
margin-right: calc(8rem*1.2);
color: #000;
cursor: pointer;
position: relative;
text-align: center;
transform-origin: left;
transform: scale(1);
transition: 0.3s all;
&.switch_type_item::before {
position: absolute;
content: "";
display: block;
background: #000;
height: calc(.3rem*1.2);
left: 50%;
transform: translateX(-50%);
bottom: calc(.6rem*1.2);
width: 0px;
transition: 0.3s all;
}
&.select_swtich {
color: #000;
// font-weight: 900;
transform: scale(1.15);
}
&.select_swtich::before {
width: 100%;
}
.switch_icon {
font-size: calc(1.8rem*1.2);
margin-right: calc(0.8rem*1.2);
}
}
.printMenu{
margin-right: 0;
margin-left: 2rem;
margin-top: auto;
position: relative;
>div{
width: 18rem;
font-size: var(--aida-fsize1-6);
border: 0;
i{
transition: all .3s;
display: inline-block;
margin-left: 1rem;
}
.forbidden{
transform: rotate(180deg);
}
}
ul{
width: 18rem;
}
}
.switch_type_item:nth-child(3){
margin: 0;
}
}
.sketchboard_body {
// height: calc(100% - 5rem*1.2));
flex: 1;
padding-top: calc(2.5rem*1.2);
height: calc(30rem*1.2);
overflow-x: hidden;
display: flex;
flex-direction: column;
&.moodboard_body::-webkit-scrollbar {
display: none;
}
.upload_img_body {
height: calc(100% - 3rem*1.2);
overflow-y: auto;
margin-bottom: calc(1rem*1.2);
&.upload_img_body::-webkit-scrollbar {
display: none;
}
}
.upload_file_item{
// margin: 0 2rem*1.2) 2rem*1.2) 0;
display: inline-block;
width: calc(25% - 2rem);
aspect-ratio: 1 / 1;
border: 1px solid #f5f5f5;
vertical-align: top;
position: relative;
img{
width: 100%;
height: 100%;
}
&.upload_component {
border: none;
}
.checked{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
cursor: pointer;
display: none;
justify-content: center;
align-items: center;
}
&.modal_img_item:hover .checked{
display: flex;
}
.upload_file_item_content{
display: flex;
align-items: center;
justify-content: center;
height: 100%;
position: relative;
cursor: pointer;
.upload_img{
display: block;
max-height: 100%;
max-width: 100%;
}
&:hover .delete_like_file_block{
// display: block;
opacity: 1;
}
}
}
.upload_max_tip {
display: flex;
align-items: center;
justify-content: center;
font-size: calc(1.4rem*1.2);
color: #030303;
.icon-zhuyi {
font-size: calc(1.6rem*1.2);
margin-right: calc(0.7rem*1.2);
}
}
}
}
.modal_right{
flex: 1;
display: flex;
flex-direction: column;
.modal_layout,.modal_accomplish{
.modal_text{
font-size: var(--aida-fsize1-4);
font-weight: 400;
color: rgba(0, 0, 0, 0.45);
display: flex;
align-items: center;
justify-content: space-between;
}
}
.modal_layout{
padding-bottom: 4.8rem;
.modal_img{
width: calc(40rem*1.2);
height: calc(5rem*1.2);
// overflow-x: hidden;
display: flex;
flex-direction: row;
overflow-y: hidden;
&.modal_img::-webkit-scrollbar {
display: none;
}
.mousewheel{
display: flex;
}
.modal_img_item{
width: calc(4rem*1.2);
height: calc(4rem*1.2);
margin: 0 calc(1rem*1.2) calc(1rem*1.2) 0;
position: relative;
text-align: center;
cursor: pointer;
overflow: hidden;
flex-shrink: 0;
img{
// width: 100%;
width: auto;
height: 100%;
object-fit: contain;
}
.checked{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
cursor: pointer;
display: none;
justify-content: center;
align-items: center;
}
&.modal_img_item:hover .checked{
display: flex;
}
}
}
}
.modal_accomplish{
// margin-top: 2rem*1.2);
overflow-x: hidden;
height: calc(30rem*1.2);
display: flex;
flex-direction: column;
flex: 1;
position: relative;
.mark_loading{
position: absolute;
z-index: 99;
}
// overflow-x: hidden;
&.modal_accomplish::-webkit-scrollbar {
display: none;
}
.modal_text{
padding-top: calc(2rem*1.2);
padding-block:calc(2rem*1.2);
}
.input_box{
z-index: 1;
input{
&.forbidden{
cursor:not-allowed;
}
}
}
.modal_img{
flex: 1;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-content: flex-start;
position: relative;
.modal_imgItem{
margin: 1rem;
margin-bottom: 5rem;
display: inline-block;
// width: calc(10rem*1.2);
// height: calc(10rem*1.2);
width: calc(33.33% - 2rem);
aspect-ratio: 1 / 1;
border: 1px solid #f5f5f5;
position: relative;
cursor: pointer;
text-align: center;
.moreBox{
position: absolute;
right: 1rem;
top: 1rem;
// opacity: 0;
width: 3.5rem;
height: 3.5rem;
transition: all 0.3s ease-in-out;
}
&.modal_imgItem:nth-child(even) {
margin-right: 0;
}
&:hover .delete_like_file_block{
display: block;
opacity: 1;
}
img{
object-fit: contain;
width: 100%;
height: 100%;
}
.pin_block{
position: absolute;
left: 1rem;
top: 1rem;
width: 8rem;
height: 3.5rem;
border-radius: 3rem;
background: rgba(0,0,0,.7);
color: #fff;
>label{
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
padding-right: 1rem;
padding-left: .2rem;
}
i{
width: 3rem;
height: 3rem;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
background: #000;
&.noCheck{
background: inherit;
border: 2px solid #fff;
}
}
span{
font-size: 1.8rem;
font-weight: 600;
}
}
&.active{
opacity: 0.5;
// border: 2px solid;
border-radius: calc(1rem*1.2);
transform: scale(0.9);
// img {
// }
.operate_file_block{
pointer-events:none
}
.pin_block{
pointer-events:none
}
.delete_like_file_block{
pointer-events:none
}
}
}
}
}
}
}
</style>

128
src/component/home/design/collection/more.vue Normal file
View File

@@ -0,0 +1,128 @@
<template>
<div class="more">
<i class="fi fi-br-menu-dots-vertical" @click.stop="openList"></i>
<div class="more_box" v-show="show">
<div class="item" v-if="moreList.includes('edit')" @click.stop="setMore('edit')">
<i class="fi fi-rr-edit"></i>
<div class="text">{{ $t('more.edit') }}</div>
</div>
<div class="item" v-if="moreList.includes('enlargement')" @click.stop="setMore('enlargement')">
<i class="fi fi-bs-expand-arrows-alt"></i>
<div class="text">{{ $t('more.enlargement') }}</div>
</div>
<div class="item" v-if="moreList.includes('down')" @click.stop="setMore('down')">
<i class="fi fi-br-download"></i>
<div class="text">{{ $t('more.down') }}</div>
</div>
<div class="item" v-if="moreList.includes('delete')" @click.stop="setMore('delete')">
<span class="icon iconfont icon-shanchu operate_icon"></span>
<div class="text">{{ $t('more.delete') }}</div>
</div>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent,computed,ref,provide,nextTick,createVNode,toRefs, reactive} from 'vue'
// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { Https } from "@/tool/https";
import { useStore } from "vuex";
import { useI18n } from 'vue-i18n'
import { downloadIamge } from "@/tool/util";
export default defineComponent({
components:{
},
props:{
moreList:{type:Array,default:()=>[]},
item:{type:Object,default:()=>{}},
index:{type:Number,default:0},
},
emits:['deleteFile','scaleImage'],
setup(props,{emit}) {
const store = useStore();
const data = reactive({
show:false
})
const dataDom = reactive({
})
const openList = ()=>{
data.show = true
document.addEventListener('click',setShow)
}
const setShow = ()=>{
data.show = false
document.removeEventListener('click',setShow)
}
const setMore = (str:any)=>{
if(str == 'delete'){
emit("deleteFile",props.item);
}else if(str == 'edit'){
emit("scaleImage",props.index);
}else if(str == 'down'){
console.log(props.item);
downloadIamge(props.item.url)
}else if(str == 'enlargement'){
emit("scaleImage",props.index);
}
setShow()
}
return{
...toRefs(dataDom),
...toRefs(data),
openList,
setMore,
}
},
provide() {
return {
}
},
})
</script>
<style lang="less" scoped>
.more{
position: relative;
width: 100%;
height: 100%;
> .fi{
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0,0,0,.7);
color: #fff;
border-radius: .6rem;
}
> .more_box{
position: absolute;
background: rgba(0,0,0,.7);
right: 0;
margin-top: .5rem;
color: #fff;
border-radius: .6rem;
padding: 1rem 0;
font-size: 1.4rem;
// width: 12rem;
text-align: left;
> .item{
display: flex;
align-items: center;
padding: 1rem 1.3rem;
> i,> span{
margin-right: 1rem;
}
> .text{
white-space: nowrap;
}
&:hover{
background: rgba(0,0,0,.3);
}
}
}
}
</style>

18
src/component/home/design/index.vue
View File

@@ -18,8 +18,7 @@
</span>
</div>
</div>
<NewCollectionReview id="collectionReview"></NewCollectionReview>
<NewCollectionReview id="collectionReview" @openCollection="openCollection"></NewCollectionReview>
</div>
</div>
<div v-show="isMannequinShow" class="left_info_hint">
@@ -155,7 +154,7 @@
</div>
</div>
</div>
<collectionModal ref="collectionModal"></collectionModal>
<!-- <DesignDetail ref="designDetail" @finishRedesign="finishRedesign"></DesignDetail> -->
<!-- 导出缩略图的蒙层 start-->
<div class="mark_loading" v-show="isShowMark">
@@ -190,11 +189,13 @@ import i18n from "@/lang";
import { useI18n } from "vue-i18n";
import { getMousePosition } from "@/tool/mdEvent";
import { removeClass } from "element-plus/es/utils";
import collectionModal from './collection.vue'
const FileSaver = require("file-saver");
export default defineComponent({
name: "homePage",
components: {
collectionModal,
// HeaderComponent,
NewCollectionReview,
affiche,
@@ -273,6 +274,9 @@ export default defineComponent({
value:'',
},
])
const dataDom = reactive({
collectionModal:null as any,
})
provide('exportNav',exportNav)
let isShowOperate = ref(false)
let {t} = useI18n()
@@ -558,7 +562,9 @@ export default defineComponent({
generateElList[i].el.style.top = parseInt(String((generateElList.length - 1 - generateElList[i].sort) / 3)) * (height +10) + 'px';
}
}
const openCollection = (str:string)=>{
dataDom.collectionModal.init(str)
}
return {
store,
likeDesignCollectionList,
@@ -586,6 +592,7 @@ export default defineComponent({
setDesignItemStyle,
showDesignMark,
...toRefs(collItemSize),
...toRefs(dataDom),
likeItemDom,
collItemDom,
domHidden,
@@ -600,7 +607,8 @@ export default defineComponent({
mouseenter,
setLikeDislLike,
posiitonData,
moveItem
moveItem,
openCollection,
};
},
data() {

30
src/component/home/index.vue
View File

@@ -14,10 +14,10 @@
</div>
</div>
</div>
<chat ref="chat" @chatChange="chatChange" v-if="openType"></chat>
<chat ref="chatDom" @chatChange="chatChange" v-show="openType == 'history'"></chat>
</template>
<script lang="ts">
import { defineComponent,computed,ref,watch,nextTick,provide,toRefs, reactive} from 'vue'
import { defineComponent,computed,ref,watch,nextTick,provide,toRefs, reactive, onMounted} from 'vue'
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { Https } from "@/tool/https";
import { useStore } from "vuex";
@@ -43,7 +43,7 @@ export default defineComponent({
isShowMark:false,
routeQuery:{} as any,
selectObject:computed(()=>store.state.Workspace.probjects) as any,//选择的项目
chatData:null as any,
})
const setIsShowMark = (boolean:boolean)=>{
data.isShowMark = boolean
@@ -52,10 +52,10 @@ export default defineComponent({
const dataDom = reactive({
design:null as any,
newPorject:null as any,
chatDom:null as any,
})
watch(() => route.query,
(query, oldQuery) => {
console.log(route)
data.routeQuery = query
const key = Object.keys(query)?.[0]
if(key){
@@ -173,9 +173,23 @@ export default defineComponent({
// nextTick(()=>{
// dataDom.workflow.isUpdataPorject = true
// })
setChatData()
getCollection()
}
const setChatData = ()=>{
if(!data.chatData)return
console.log(dataDom.chatDom?.enableThinking,data.chatData)
nextTick(()=>{
dataDom.chatDom.enableThinking = data.chatData.enableThinking
dataDom.chatDom.filList = data.chatData.filList
dataDom.chatDom.chatContent = data.chatData.chatContent
dataDom.chatDom.isFinish = true
dataDom.chatDom.isChattingRecords = true
dataDom.chatDom.sendChat()
data.chatData = null
})
}
// const setitemData = (arr:any)=>{
// return new Promise((resolve,reject)=>{
// nextTick(()=>{
@@ -365,9 +379,11 @@ export default defineComponent({
getCollection()
}
}
const newProject = (id:any)=>{
const newProject = (value:any)=>{
props.settingGetHistory()
router.push(`home?history=${id}`)
router.push(`home?history=${value.id}`)
data.chatData = value
}
return{
...toRefs(dataDom),

54
src/component/home/newProject/index.vue
View File

@@ -135,33 +135,39 @@ export default defineComponent({
let fileList = JSON.parse(JSON.stringify(data.filList))
let fileUrl = (fileList.filter((item:any)=>item.type == 'file').length > 0) ? fileList.filter((item:any)=>item.type == 'file')[0].minioPath : ''
let imageUrlList = (fileList.filter((item:any)=>item.type == 'image').length > 0)? fileList.filter((item:any)=>item.type == 'image').map((item:any)=>item.minioPath).join(',') : ''
// Https.axiosGet(Https.httpUrls.chatCreateProject, {params:{prompt:data.chatContent,process:data.selectFlow.value,fileUrl:fileUrl,imageUrlList}}).then((rv)=>{
// if(rv){
// data.loadingShow = false
// emit('newProject',rv)
// }
// }).catch(()=>{
// data.loadingShow = false
// })
let projectId = ''
const eventSource = new EventSource(`${process.env.VUE_APP_BASE_URL}${Https.httpUrls.llmStream}?token=${getCookie('token')}&prompt=${data.chatContent}&projectId=&fileUrl=${fileUrl}&imageUrlList=${imageUrlList}&enableThinking=${data.enableThinking}&process=${data.selectFlow.value}`);
eventSource.onmessage = function(event) {
let eventData = JSON.parse(event.data)
if(eventData.status == "[PROJECT_CREATE_SIGNAL]"){
projectId = JSON.parse(eventData.tools_data).projectId
}
};
eventSource.onerror = function(error) {
if (eventSource.readyState === EventSource.CLOSED) {
// data.chatList[data.chatList.length-1].content.message='服务器繁忙，请稍后再试。'
} else {
if(projectId){
emit('newProject',projectId)
Https.axiosGet(Https.httpUrls.chatCreateProject, {params:{prompt:data.chatContent,process:data.selectFlow.value,fileUrl:fileUrl,imageUrlList}}).then((rv)=>{
if(rv){
data.loadingShow = false
let value = {
id:rv,
fileList:fileList,
chatContent:data.chatContent,
enableThinking:data.enableThinking,
}
eventSource.close()
emit('newProject',value)
}
}).catch(()=>{
data.loadingShow = false
};
})
// let projectId = ''
// const eventSource = new EventSource(`${process.env.VUE_APP_BASE_URL}${Https.httpUrls.llmStream}?token=${getCookie('token')}&prompt=${data.chatContent}&projectId=&fileUrl=${fileUrl}&imageUrlList=${imageUrlList}&enableThinking=${data.enableThinking}&process=${data.selectFlow.value}`);
// eventSource.onmessage = function(event) {
// let eventData = JSON.parse(event.data)
// if(eventData.status == "[PROJECT_CREATE_SIGNAL]"){
// projectId = JSON.parse(eventData.tools_data).projectId
// }
// };
// eventSource.onerror = function(error) {
// if (eventSource.readyState === EventSource.CLOSED) {
// // data.chatList[data.chatList.length-1].content.message='服务器繁忙，请稍后再试。'
// } else {
// if(projectId){
// emit('newProject',projectId)
// }
// eventSource.close()
// }
// data.loadingShow = false
// };
}
const handleFileUpload = (event:any)=>{
if (event.target.files[0].size > 5 * 1024 * 1024) { // 5MB

1
src/store/uploadFile/uploadFile.ts
View File

@@ -351,6 +351,7 @@ const UploadFilesModule : Module<UploadFiles,RootState> = {
state.allBoardData.moodTemplateId = state.moodTemplateId
if(state.moodboard.length > 0)currentState = true
}else if(str == 'printBoard'){
console.log(state.printboard)
state.allBoardData.printboardFiles = state.printboard
if(state.printboard.length > 0)currentState = true
}else if(str == 'sketchBoard'){