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

2023-10-30-语言适配 en

Browse Source
This commit is contained in:
X1627315083
2023-10-30 17:26:36 +08:00
parent cec54c175b
commit 2bb795c05b
33 changed files with 969 additions and 2745 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/component/HomePage/ColorboardUpload.vue
View File

@@ -2,7 +2,7 @@
<div class="colorboard_upload_modal">
<div class="modal_layout">
<div class="modal_text">
<div>Thumbnail preview of selected moodboard</div>
<div>{{ $t('ColorboardUpload.Thumbnail') }}</div>
</div>
<div class="modal_img">
<div class="modal_img_item" v-for="color,index in colorList" :key="color" >
@@ -10,7 +10,7 @@
</div>
</div>
<div>
<span class="started_btn" @click="clearCurrentColor">Clear</span>
<span class="started_btn" @click="clearCurrentColor">{{ $t('ColorboardUpload.Clear') }}</span>
</div>
</div>
</div>
@@ -19,7 +19,7 @@
<div class="right_content_line">
<div class="upload_right_header">
<i class="color_edit fi fi-bs-comments" ></i>
<span>Palette</span>
<span>{{ $t('ColorboardUpload.Palette') }}</span>
</div>
<div class="color_setting_block">
<Sketch class="sketch_color" v-model="selectColor" :show.sync="colorPickerVisible"/>
@@ -28,10 +28,10 @@
<div class="color_block">
<div class="color_left" @click="colorBlockHex = !colorBlockHex">
<div v-show="colorBlockHex">
HEX
{{ $t('ColorboardUpload.HEX') }}
</div>
<div v-show="!colorBlockHex">
RGBA
{{ $t('ColorboardUpload.RGBA') }}
</div>
</div>
<div class="color_right">
@@ -58,7 +58,7 @@
<div class="right_content_line right_content_line_upload">
<div class="upload_right_header">
<i class="color_edit fi fi-bs-comments" ></i>
<span>Auto Recognize</span>
<span>{{ $t('ColorboardUpload.AutoRecognize') }}</span>
</div>
<div class="upload_centetn">
<div class="upload_item">
@@ -99,13 +99,13 @@
<div class="right_content_line">
<div class="upload_right_header">
<i class="color_edit fi fi-bs-comments" ></i>
<span>Color Code</span>
<span>{{ $t('ColorboardUpload.ColorCode') }}</span>
</div>
<div class="get_color_block">
<input class="get_color_input" placeholder="tcx value (e.g.: 19-4052)" v-model="tcxColor" @keydown.enter="getTcxColor()"/>
<div class="get_color_button" @click="getTcxColor()">
<span class="icon iconfont icon-huoquduixiang"></span>
<span class="get_color_des">Extract Color</span>
<span class="get_color_des">{{ $t('ColorboardUpload.ExtractColor') }}</span>
</div>
<div v-show="getColorBg" class="get_color_bg" @click="setUplpadColor(reviewColor)" :style="{'background-color':`rgba(${getSelectRGB(reviewColor).r},${getSelectRGB(reviewColor).g},${getSelectRGB(reviewColor).b},${getSelectRGB(reviewColor).a})`}">
<img src="#" :title="pantongName">
@@ -127,6 +127,7 @@ import {getUploadUrl,rgbToHsv} from '@/tool/util'
import {useStore} from 'vuex'
import ColorThief from '@/tool/colorthief/colorthief'
import { message,Upload} from 'ant-design-vue';
import { useI18n } from 'vue-i18n';
export default defineComponent({
components:{
Chrome,
@@ -141,11 +142,14 @@ export default defineComponent({
}) //顔色选择器默认颜色
let selectColorList = ref({
})
let {t} = useI18n()
return {
fileList,
colorList,
selectColor,
selectColorList,
t,
}
},
watch:{
@@ -218,7 +222,7 @@ export default defineComponent({
// return `rgb(${r}, ${g}, ${b})`;
// box.style.backgroundColor = label.textContent = result.sRGBHex;
} catch (e) {
message.warning("Your browser does not support it")
message.warning(this.t('ColorboardUpload.jsContent1'))
}
})
// if ("EyeDropper" in window) {
@@ -266,7 +270,7 @@ export default defineComponent({
this.setColorboardList(colorList)
this.getColorBg = true
}else{
message.warning("Can't find the TCX color")
message.warning(this.t('ColorboardUpload.jsContent2'))
}
})
},
@@ -371,11 +375,11 @@ export default defineComponent({
beforeUpload(file){
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg' || file.type === 'image/bmp';
if (!isJpgOrPng) {
message.warning('You can only upload Image file!');
message.warning(this.t('ColorboardUpload.jsContent3'));
}
const isLt2M = file.size / 1024 / 1024 < 5;
if (!isLt2M) {
message.warning('Image must smaller than 5MB!');
message.warning(this.t('ColorboardUpload.jsContent4'));
}
return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
},

8
src/component/HomePage/Cropper.vue
View File

@@ -10,11 +10,11 @@
>
<div class="collection_title">
<div class="collection_title_text">
<div>Cut picture</div>
<div>{{ $t('Cropper.Cutpicture') }}</div>
</div>
<div class="header_right_block" @click.stop="">
<div class="next_step_button" @click.stop="finishCropper()">Finish</div>
<div class="header_cancel_button" @click.stop="cancleCropper()">Cancel</div>
<div class="next_step_button" @click.stop="finishCropper()">{{ $t('Cropper.Finish') }}</div>
<div class="header_cancel_button" @click.stop="cancleCropper()">{{ $t('Cropper.Cancel') }}</div>
</div>
</div>
<div class="collection_modal_body">
@@ -45,7 +45,7 @@
<div class="cut_picture_right">
<div class="cur_picture_right_header">
<div class="review_logo icon iconfont icon-yulan"></div>
<div>Crop Preview</div>
<div>{{ $t('Cropper.CropPreview') }}</div>
</div>
<div class="cut_picture_review_block">
<div class="cut_picture_review_item">

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

@@ -8,7 +8,7 @@
v-model="checkbox[0].type"
@click="setKeyword(0)"
/>
<span>Image Only</span>
<span>{{ $t('Generate.ImageOnly') }}</span>
</label>
</div>
<div>
@@ -18,7 +18,7 @@
v-model="checkbox[1].type"
@click="setKeyword(1)"
/>
<span>Text Only</span>
<span>{{ $t('Generate.TextOnly') }}</span>
</label>
</div>
<div>
@@ -28,14 +28,14 @@
v-model="checkbox[2].type"
@click="setKeyword(2)"
/>
<span>Text-Image</span>
<span>{{ $t('Generate.TextImage') }}</span>
</label>
</div>
<div v-if="type_.type2 == 'Printboard'" class="printModel">
<div @click.stop="PrintModel">{{ printModel.name }}</div>
<ul v-show="printModel.optype">
<li class="printModel_item" @click="setprintModel(1)">Model1</li>
<li class="printModel_item" @click="setprintModel(2)">Model2</li>
<li class="printModel_item" @click="setprintModel(1)">{{ $t('Generate.Model1') }}</li>
<li class="printModel_item" @click="setprintModel(2)">{{ $t('Generate.Model2') }}</li>
</ul>
</div>
</div>
@@ -43,13 +43,13 @@
<input
class="search_input"
@input="ifMaximumLength"
placeholder="Prompt input"
:placeholder="$t('Generate.inputContent1')"
:maxlength='inputShow?0:9999'
v-model="searchPictureName"
@keydown.enter="getgenerate()"
/>
<div class="generage_btn started_btn" @click.stop="getgenerate">Generate</div>
<span>The entered content exceeds the maximum length.</span>
<div class="generage_btn started_btn" @click.stop="getgenerate">{{ $t('Generate.Generate') }}</div>
<span>{{ $t('Generate.maximumLength') }}</span>
</div>
<div v-if="type_.type2 == 'Sketchboard' || type_.type2 == 'Printboard'" class="generage_img">
@@ -182,6 +182,7 @@ import GO from "@/tool/GO";
import { getCookie } from "@/tool/cookie";
import { getUploadUrl } from "@/tool/util";
import { forEach } from "jszip";
import { useI18n } from "vue-i18n";
export default defineComponent({
props: ["msg",'sketchCatecoryList'],
setup() {
@@ -230,6 +231,8 @@ export default defineComponent({
let loadingShow = ref(false)
let inputShow = ref(false)
let inputTime = ref()
let {t} = useI18n()
return {
imgList,
selectImgList,
@@ -255,6 +258,7 @@ export default defineComponent({
workspace,
inputShow,
inputTime,
t,
};
},
data(prop) {
@@ -320,11 +324,11 @@ export default defineComponent({
file.type === "image/jpg" ||
file.type === "image/bmp";
if (!isJpgOrPng) {
message.warning("You can only upload Image file!");
message.warning(this.t('Generate.jsContent1'));
}
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isLt2M) {
message.warning("Image must smaller than 2MB!");
message.warning(this.t('Generate.jsContent2'));
}
return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
},
@@ -364,7 +368,7 @@ export default defineComponent({
getgenerate(){
if(!this.searchPictureName){
message.warning(
"Please enter content"
this.t('Generate.jsContent3')
);
return
}
@@ -372,13 +376,13 @@ export default defineComponent({
let arr = this.searchPictureName.split(/\s+/).length
if(arr > 75){
message.warning(
"The entered content exceeds the maximum length."
this.t('Generate.jsContent4')
);
return
}
}else{
message.warning(
"Please enter content"
this.t('Generate.jsContent5')
);
return
}
@@ -444,7 +448,7 @@ export default defineComponent({
);
let arr = this.store.state.UploadFilesModule.sketchboard;
if (arr.length >= 8) {
message.warning("You can select up to 8 images");
message.warning(this.t('Generate.jsContent6'));
} else {
this.sketchboardList = fileList
}
@@ -458,7 +462,7 @@ export default defineComponent({
if (index > -1) {
this.sketchboardList.splice(index, 1);
}
message.error(file.name + "upload failed");
message.error(file.name + this.t('Generate.jsContent5'));
}
},
showFileCategory(file: any) {

44
src/component/HomePage/Header.vue
View File

@@ -6,7 +6,7 @@
<div class="header_user_icon"></div>
<!-- <div class="header_icon icon iconfont icon-touxiang3"></div> -->
<div class="header_user_content">
<div class="username"><span>/</span> hello@{{ userInfo?.userName }}</div>
<div class="username"><span>/</span> {{$t('Header.hello')}}@{{ userInfo?.userName }}</div>
<div
:class="[
'icon',
@@ -27,7 +27,7 @@
]"
@click="turnToPage('home')"
>
HOME
{{$t('Header.HOME')}}
</div>
<div
:class="[
@@ -36,7 +36,7 @@
]"
@click="turnToPage('library')"
>
LIBRARY
{{$t('Header.LIBRARY')}}
</div>
<div
:class="[
@@ -45,7 +45,8 @@
]"
@click="turnToPage('history')"
>
HISTORY
{{$t('Header.HISTORY')}}
</div>
</nav>
@@ -60,12 +61,12 @@
</div>
</header>
<nav class="select_block" v-show="isShowOperate">
<!-- <div class="select_item" @click="showBindEmailModal()">
<span class="icon iconfont icon-youxiang"></span><span class="select_item_des">bind email</span>
</div> -->
<div class="select_item" @click="showBindEmailModal()">
<span class="icon iconfont icon-youxiang"></span><span class="select_item_des">{{$t('Header.bindEmail')}}</span>
</div>
<div class="select_item" @click="logout()">
<span class="icon iconfont icon-tuichu"></span
><span class="select_item_des">log off</span>
><span class="select_item_des">{{$t('Header.logOff')}}</span>
</div>
</nav>
<a-modal
@@ -78,17 +79,17 @@
:centered="true"
>
<template #closeIcon v-if="!isHaveBindEmail && bindEmailStep === 1">
<div class="skip_content">skip</div>
<div class="skip_content">{{$t('Header.skip')}}</div>
</template>
<div class="bind_email_content" v-if="isHaveBindEmail">
<div class="bind_email_tip">you have binded email</div>
<div class="bind_email_tip">{{$t('Header.emailContent')}}</div>
<div class="bind_email">{{ userInfo.email }}</div>
</div>
<div class="bind_email_content" v-else>
<!-- 绑定邮箱第一步 start -->
<div v-show="bindEmailStep === 1">
<div class="bind_email_form_content">
<div class="bind_email_form_title">Email</div>
<div class="bind_email_form_title">{{$t('Header.Email')}}</div>
<input
class="bind_email_form_input"
placeholder="Enter a new email"
@@ -100,7 +101,7 @@
class="bind_email_submit_button"
@click="emailNextStepFun()"
>
Next step
{{$t('Header.NextStep')}}
</div>
</div>
<!-- 绑定邮箱第一步 end -->
@@ -110,17 +111,17 @@
<div @click="emailLastStepFun()">
<span class="icon iconfont icon--shangyibu"></span
><span class="email_last_step_content"
>Enter verification code</span
>{{$t('Header.verification')}}</span
>
</div>
<div class="email_last_step_des">
<div class="sent_email_content">
Sent to {{ email }}
{{$t('Header.SentTo')}} {{ email }}
</div>
<div class="tip_content">
<span v-show="time">{{ time }}s</span>
<span v-show="!time" @click="emailNextStepFun()"
>Resend</span
>{{$t('Header.Resend')}}Resend</span
>
</div>
</div>
@@ -143,11 +144,18 @@ import Habit from "@/component/Detail/habit.vue";
import { Https } from "@/tool/https";
import { Modal, message } from "ant-design-vue";
import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
import { useI18n } from "vue-i18n";
export default defineComponent({
components: {
VerificationCodeInput,
Habit,
},
setup(){
const {t} = useI18n()
return {
t
}
},
data() {
return {
isShowOperate: false,
@@ -210,7 +218,7 @@ export default defineComponent({
emailNextStepFun() {
if (!isEmail(this.email)) {
message.warning("The email format is incorrect");
message.warning(this.t('Header.jsContent1'));
return;
}
let data = {
@@ -225,7 +233,7 @@ export default defineComponent({
(this.emailCode = ["", "", "", "", "", ""]),
this.createTimer();
hide();
message.success("Succeeded in binding the mailbox.");
message.success(this.t('Header.jsContent2'));
}
})
.catch((res) => {
@@ -312,7 +320,7 @@ export default defineComponent({
this.timer = setTimeout(() => {
this.modalWarning = Modal.warning({
title: () =>
`You have not performed any operation for a long time. You must be active;otherwise, you will log out in ${_this.numTime} S`,
this.t('Header.jsContent3',{numTime:_this.numTime}),
icon: createVNode(ExclamationCircleOutlined),
okText: "Ok",
onOk() {

19
src/component/HomePage/MarketingSketchUpload.vue
View File

@@ -2,10 +2,10 @@
<div class="collection_modal_item">
<div class="switch_type_list">
<div class="switch_type_item select_swtich">
<span>Upload</span>
<span>{{ $t('MarketingSketchUpload.Upload') }}</span>
</div>
<div @click="openLibrary()" class="switch_type_item">
<span>My Library</span>
<span>{{ $t('MarketingSketchUpload.MyLibrary') }}</span>
</div>
</div>
@@ -46,7 +46,7 @@
</div>
<div class="upload_max_tip">
<span class="icon iconfont icon-zhuyi"></span>
<span>Maximum 15 images can be uploaded, Maximum 2M per image</span>
<span>{{ $t('MarketingSketchUpload.maximumLength') }}</span>
</div>
</div>
@@ -61,12 +61,15 @@ import {getUploadUrl} from '@/tool/util'
import {useStore} from 'vuex'
import { message,Upload} from 'ant-design-vue';
import Material from '@/component/HomePage/Material.vue'
import { useI18n } from 'vue-i18n';
export default defineComponent({
components:{Material},
setup(){
let fileList:any = ref([])
let {t} = useI18n()
return {
fileList
fileList,
t,
}
},
data(){
@@ -115,18 +118,18 @@ export default defineComponent({
if(index > -1){
this.fileList.splice(index, 1)
}
message.error(file.name + 'upload failed')
message.error(file.name + this.t('MarketingSketchUpload.jsContent1'))
}
},
beforeUpload(file:any){
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg' || file.type === 'image/bmp';
if (!isJpgOrPng) {
message.warning('You can only upload Image file!');
message.warning(this.t('MarketingSketchUpload.jsContent2'));
}
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isLt2M) {
message.warning('Image must smaller than 2MB!');
message.warning(this.t('MarketingSketchUpload.jsContent3'));
}
return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
},
@@ -149,7 +152,7 @@ export default defineComponent({
status:'done',
}
if(this.fileList.length == 15){
message.warning('Maximum number of allowable file uploads has been exceeded')
message.warning(this.t('MarketingSketchUpload.jsContent5'))
break
}
this.fileList.push(data)

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

@@ -10,7 +10,7 @@
<div class="my_material_header">
<div class="my_material_header_right">
<div class="content_search_block">
<input class="search_input" placeholder="Please input" v-model="searchPictureName" @keydown.enter="getLibraryList()">
<input class="search_input" :placeholder="$t('Material.inputContent1')" v-model="searchPictureName" @keydown.enter="getLibraryList()">
<div class="search_icon_block" @click.stop="getLibraryList()"><span class="icon iconfont icon-sousuo"></span></div>
</div>
</div>
@@ -62,7 +62,7 @@
</div>
</div>
<div v-if="selectCode == 'Sketchboard' || selectCode == 'Printboard'" class="pin_block">
<a-checkbox v-model:checked="item.pin">PIN</a-checkbox>
<a-checkbox v-model:checked="item.pin">{{ $t('Material.PIN') }}</a-checkbox>
</div>
</div>
<div v-show="total > imgList.length" class="material_content_list_loding" v-observe>

39
src/component/HomePage/MoodboardUpload.vue
View File

@@ -7,21 +7,21 @@
class="switch_type_item"
:class="[openClick == 1 ? 'select_swtich' : '']"
>
<span>Upload</span>
<span>{{ $t('MoodboardUpload.Upload') }}</span>
</div>
<div
@click.stop="open(2)"
class="switch_type_item"
:class="[openClick == 2 ? 'select_swtich' : '']"
>
<span>Library</span>
<span>{{ $t('MoodboardUpload.Library') }}</span>
</div>
<div
@click.stop="open(3)"
class="switch_type_item"
:class="[openClick == 3 ? 'select_swtich' : '']"
>
<span>Generate</span>
<span>{{ $t('MoodboardUpload.Generate') }}</span>
</div>
</div>
<div v-show="openClick == 1" class="moodboard_body">
@@ -50,7 +50,7 @@
class="delete_file_block"
@click="deleteFile(file)"
>
Delete
{{ $t('MoodboardUpload.Delete') }}
</div>
</div>
</div>
@@ -106,8 +106,10 @@
<div v-show="moodboarList.length" class="modal_right">
<div class="modal_layout">
<div class="modal_text">
<div>Thumbnail preview of selected moodboard</div>
<div class="modal_btn started_btn" @click="layout()">layout</div>
<div>
{{ $t('MoodboardUpload.Thumbnail') }}
</div>
<div 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)">
@@ -155,6 +157,7 @@ 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() {
@@ -174,6 +177,7 @@ export default defineComponent({
return store.state.UploadFilesModule.disposeMoodboard
})
let uploading:any = ref([])
let {t} = useI18n()
return {
fileList,
showFileList,
@@ -187,7 +191,8 @@ export default defineComponent({
layoutOpen,
loadingShow,
modalImg,
uploading
uploading,
t,
};
},
data() {
@@ -292,7 +297,7 @@ export default defineComponent({
);
let arr = this.store.state.UploadFilesModule.moodboard
if(arr.length >= 8){
message.warning('You can select up to 8 images')
message.warning(this.t('MoodboardUpload.jsContent1'))
}else{
this.store.commit("setMoodboardFile", fileList);
}
@@ -307,7 +312,7 @@ export default defineComponent({
if (index > -1) {
this.fileList.splice(index, 1);
}
message.error(file.name + "upload failed");
message.warning(file.name + this.t('MoodboardUpload.jsContent2'));
}
},
@@ -318,11 +323,11 @@ export default defineComponent({
file.type === "image/jpg" ||
file.type === "image/bmp";
if (!isJpgOrPng) {
message.warning("You can only upload Image file!");
message.warning(this.t('MoodboardUpload.jsContent3'));
}
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isLt2M) {
message.warning("Image must smaller than 2MB!");
message.warning(this.t('MoodboardUpload.jsContent4'));
}
return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
},
@@ -390,7 +395,7 @@ export default defineComponent({
// layout.init('moodboard')
layout.init()
}else{
message.warning('Please click Layout to sort randomly')
message.warning(this.t('MoodboardUpload.jsContent5'))
}
},
@@ -406,7 +411,15 @@ export default defineComponent({
}else{
this.flex_direction = false
}
this.moodb_className = this.moodb_[arr.length-1][random]
if(JSON.stringify(this.moodb_className) == JSON.stringify(this.moodb_[arr.length-1][random])){
this.layout()
return
}
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

129
src/component/HomePage/PrintboardUpload.vue
View File

@@ -10,21 +10,21 @@
class="switch_type_item"
:class="[openClick == 1 ? 'select_swtich' : '']"
>
<span>Upload</span>
<span>{{ $t('PrintboardUpload.Upload') }}</span>
</div>
<div
@click.stop="open(2)"
class="switch_type_item"
:class="[openClick == 2 ? 'select_swtich' : '']"
>
<span>Library</span>
<span>{{ $t('PrintboardUpload.Library') }}</span>
</div>
<div
@click.stop="open(3)"
class="switch_type_item"
:class="[openClick == 3 ? 'select_swtich' : '']"
>
<span>Generate</span>
<span>{{ $t('PrintboardUpload.Generate') }}</span>
</div>
</div>
</div>
@@ -47,7 +47,7 @@
</div>
</div>
<div class="pin_block" v-show="file?.status === 'done'">
<a-checkbox v-model:checked="file.pin">PIN</a-checkbox>
<a-checkbox v-model:checked="file.pin">{{ $t('PrintboardUpload.PIN') }}</a-checkbox>
</div>
</div>
@@ -86,7 +86,7 @@
<div class="modal_right">
<div class="modal_layout">
<div class="modal_text">
<div>Thumbnail preview of selected moodboard</div>
<div>{{ $t('PrintboardUpload.Thumbnail') }}</div>
<!-- <div class="modal_btn started_btn" @click="layout()">layout</div> -->
</div>
<div class="modal_img">
@@ -100,9 +100,9 @@
</div>
<div v-show="openClick == 3" class="modal_accomplish">
<div class="input_box" :class="{active:inputShow}">
<input class="search_input" @input="ifMaximumLength" :maxlength='inputShow?0:9999' :class="{forbidden:generateCheckbox}" :readonly="generateCheckbox" placeholder="Caption generation" v-model="captionGeneration">
<div class="generage_btn started_btn" @click.stop="getgenerate">Generate</div>
<span>The entered content exceeds the maximum length.</span>
<input class="search_input" @input="ifMaximumLength" :maxlength='inputShow?0:9999' :class="{forbidden:generateCheckbox}" :readonly="generateCheckbox" :placeholder="$t('PrintboardUpload.inputContent1')" v-model="captionGeneration">
<div class="generage_btn started_btn" @click.stop="getgenerate">{{ $t('PrintboardUpload.Generate') }}</div>
<span>{{ $t('PrintboardUpload.maximumLength') }}</span>
</div>
<div class="modal_img">
<div v-for="item,index in generateList" class="modal_imgItem" :class="{ active: item?.checked }" >
@@ -114,7 +114,7 @@
<i v-else class="fi fi-sr-heart" @click.stop="likeFile(item,'noLike')"></i>
</div>
<div class="pin_block">
<a-checkbox v-model:checked="item.pin">PIN</a-checkbox>
<a-checkbox v-model:checked="item.pin">{{ $t('PrintboardUpload.PIN') }}</a-checkbox>
</div>
</div>
</div>
@@ -138,6 +138,7 @@ import Cropper from '@/component/HomePage/Cropper.vue'
import Material from '@/component/HomePage/Material.vue'
import Generate from "@/component/HomePage/Generate.vue";
import GO from "@/tool/GO";
import { useI18n } from 'vue-i18n';
export default defineComponent({
components:{
@@ -156,6 +157,7 @@ export default defineComponent({
let loadingShow = ref(false)
let inputShow = ref(false)
let inputTime = ref()
let {t} = useI18n()
return {
fileList,
printImgList,
@@ -166,6 +168,7 @@ export default defineComponent({
loadingShow,
inputShow,
inputTime,
t,
}
},
computed:{
@@ -256,11 +259,11 @@ export default defineComponent({
beforeUpload(file:any,fileList:any){
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg' || file.type === 'image/bmp';
if (!isJpgOrPng) {
message.warning('You can only upload Image file!');
message.warning(this.t('PrintboardUpload.jsContent1'));
}
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isLt2M) {
message.warning('Image must smaller than 2MB!');
message.warning(this.t('PrintboardUpload.jsContent2'));
}
if(isJpgOrPng && isLt2M){
this.currentFileNum = fileList.length
@@ -316,102 +319,6 @@ export default defineComponent({
}
},
randomRange(min:any, max:any, num:any) { // min最小值，max最大值 num排除的值
let index = Math.floor(Math.random() * (max - min)) + min;
while(index === num){
index = Math.floor(Math.random() * (max - min)) + min;
}
return index
},
generatePrint(){
let data:any = {}
//随机获取图片id
if(!this.moodBoards.length){ //mood没有图片
let index1 = -1
let index2 = -2
if(!this.getPinLength){ //没pin住
index1 = this.randomRange(0, this.fileList.length, -1)
index2 = this.randomRange(0, this.fileList.length, index1)
}else if(this.getPinLength === 1){ //pin住1个
this.fileList.forEach((element:any,index:number) => {
if(element.pin){
index1 = index
}
});
index2 = this.randomRange(0, this.fileList.length, index1)
}else{ //pin住多个
let selectIndexList:any = []
this.fileList.forEach((element:any,index:number) => {
if(element.pin){
selectIndexList.push(index)
}
});
index1 = this.randomRange(0, selectIndexList.length, -1) //pin住的中随机选一个
index2 = this.randomRange(0, this.fileList.length, selectIndexList[index1]) //除了选中的外再来一个
}
data = {
select1Id:this.fileList[index1].id,
select2Id:this.fileList[index2].id
}
}else{
let index1 = this.randomRange(0, this.moodBoards.length, -1)
let index2 = -2
if(!this.getPinLength){ //没pin住
index2 = this.randomRange(0, this.fileList.length, -1)
}else if(this.getPinLength === 1){ //pin住1个
this.fileList.forEach((element:any,index:number) => {
if(element.pin){
index2 = index
}
});
}else{ //pin住多个
let selectIndexList:any = []
this.fileList.forEach((element:any,index:number) => {
if(element.pin){
selectIndexList.push(index)
}
});
index2 = this.randomRange(0, selectIndexList.length, -1) //pin住的中随机选一个
}
data = {
select1Id:this.moodBoards[index1].resData.id,
select2Id:this.fileList[index2].id
}
}
data.timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone,
this.generateloading = true
Https.axiosPost(Https.httpUrls.elementGeneratePrint, data).then((rv) =>{
if(rv){
let data = {
imgUrl:rv.url,
resData:rv
}
this.printImgList.push(data)
this.store.commit('setGeneratePrintFile',this.printImgList)
this.generateloading = false
}
}).catch(res=>{
this.generateloading = false
})
},
savePrint(){
let printId = this.printImgList.map((v:any) => v.resData.id)
let data = {
printId:printId,
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
}
Https.axiosPost(Https.httpUrls.elementSavePrint, data).then((rv) =>{
if(rv){
message.success('Save successfully')
}
})
},
customRequest(data:any){
@@ -564,7 +471,7 @@ export default defineComponent({
status:'done',
}
if(this.fileList.length == 15){
message.warning('Maximum number of allowable file uploads has been exceeded')
message.warning(this.t('PrintboardUpload.jsContent3'))
break
}
this.fileList.push(data)
@@ -604,7 +511,7 @@ export default defineComponent({
}else{
message.warning(
"Please select a picture"
this.t('PrintboardUpload.jsContent4')
);
return
}
@@ -616,14 +523,14 @@ export default defineComponent({
let arr = this.captionGeneration.split(/\s+/).length
if(arr > 75){
message.warning(
"The entered content exceeds the maximum length."
this.t('PrintboardUpload.jsContent5')
);
return
}
}else{
message.warning(
"Please enter content"
this.t('PrintboardUpload.jsContent6')
);
return
}

7
src/component/HomePage/RobotAssist.vue
View File

@@ -26,7 +26,7 @@
<div class="robot_bottom">
<div class="robot_input" v-fade="robotInput,'flex'">
<input
placeholder="write a message~"
:placeholder="$t('RobotAssist.inputContent1')"
v-model="chatCentent"
@keydown.enter="roborSend()"
@input="robotmax"
@@ -49,6 +49,7 @@ import { getCookie } from "@/tool/cookie";
import axios from 'axios'
import { message } from "ant-design-vue";
import { useI18n } from "vue-i18n";
export default defineComponent({
components: {
DownOutlined,
@@ -67,6 +68,7 @@ export default defineComponent({
])
const userInfo:any = {}
let bloodBars:any = ref(0)
let {t} = useI18n()
return {
robotTop,
robotInput,
@@ -78,6 +80,7 @@ export default defineComponent({
timeInput,
userInfo,
bloodBars,
t,
};
},
data() {
@@ -154,7 +157,7 @@ export default defineComponent({
roborSend (){
this.clearTimer()
if(!this.chatCentent){
message.warning("Please enter content");
message.warning(this.t('RobotAssist.jsContent1'));
return
}
this.record.push({

35
src/component/HomePage/SketchboardUpload.vue
View File

@@ -7,21 +7,21 @@
class="switch_type_item"
:class="[openClick == 1 ? 'select_swtich' : '']"
>
<span>Upload</span>
<span>{{ $t('SketchboardUpload.Upload') }}</span>
</div>
<div
@click.stop="open(2)"
class="switch_type_item"
:class="[openClick == 2 ? 'select_swtich' : '']"
>
<span>Library</span>
<span>{{ $t('SketchboardUpload.Library') }}</span>
</div>
<div
@click.stop="open(3)"
class="switch_type_item"
:class="[openClick == 3 ? 'select_swtich' : '']"
>
<span>Generate</span>
<span>{{ $t('SketchboardUpload.Generate') }}</span>
</div>
</div>
<div v-show="openClick == 1" class="sketchboard_body">
@@ -105,7 +105,7 @@
v-show="file?.status === 'done'"
>
<a-checkbox v-model:checked="file.pin"
>PIN</a-checkbox
>{{ $t('SketchboardUpload.PIN') }}</a-checkbox
>
</div>
</div>
@@ -158,7 +158,7 @@
<div class="modal_right">
<div class="modal_layout">
<div class="modal_text">
<div>Thumbnail preview of selected moodboard</div>
<div>{{ $t('SketchboardUpload.Thumbnail') }}</div>
<!-- <div class="modal_btn started_btn" @click="layout()">layout</div> -->
</div>
<div class="modal_img">
@@ -172,9 +172,9 @@
</div>
<div v-show="openClick == 3" class="modal_accomplish">
<div class="input_box" :class="{active:inputShow}">
<input class="search_input" @input="ifMaximumLength" :maxlength='inputShow?0:9999' :class="{forbidden:generateCheckbox}" :readonly="generateCheckbox" placeholder="Caption generation" v-model="captionGeneration">
<input class="search_input" @input="ifMaximumLength" :maxlength='inputShow?0:9999' :class="{forbidden:generateCheckbox}" :readonly="generateCheckbox" :placeholder="$t('SketchboardUpload.inputContent1')" v-model="captionGeneration">
<div class="generage_btn started_btn" @click.stop="getgenerate">Generate</div>
<span>The entered content exceeds the maximum length.</span>
<span>{{ $t('SketchboardUpload.maximumLength') }}</span>
</div>
<div class="modal_img">
<div v-for="item,index in generateList" class="modal_imgItem" :class="{ active: item?.checked }">
@@ -232,7 +232,7 @@
<i v-else class="fi fi-sr-heart" @click.stop="likeFile(item,'noLike')"></i>
</div>
<div class="pin_block">
<a-checkbox v-model:checked="item.pin">PIN</a-checkbox>
<a-checkbox v-model:checked="item.pin">{{ $t('SketchboardUpload.PIN') }}</a-checkbox>
</div>
</div>
</div>
@@ -257,6 +257,7 @@ import { message, Upload } from "ant-design-vue";
import Material from "@/component/HomePage/Material.vue";
import Generate from "@/component/HomePage/Generate.vue";
import { Https } from "@/tool/https";
import { useI18n } from "vue-i18n";
export default defineComponent({
components: { Material, Generate },
setup() {
@@ -273,6 +274,7 @@ export default defineComponent({
let inputShow = ref(false)
let inputTime = ref()
let {t} = useI18n()
return {
fileList,
openClick,
@@ -283,6 +285,7 @@ export default defineComponent({
workspace,
inputShow,
inputTime,
t,
};
},
data() {
@@ -399,7 +402,8 @@ export default defineComponent({
if (index > -1) {
this.fileList.splice(index, 1);
}
message.error(file.name + "upload failed");
message.warning(file.name + this.t('SketchboardUpload.jsContent1'));
}
},
@@ -410,11 +414,11 @@ export default defineComponent({
file.type === "image/jpg" ||
file.type === "image/bmp";
if (!isJpgOrPng) {
message.warning("You can only upload Image file!");
message.warning(this.t('SketchboardUpload.jsContent2'));
}
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isLt2M) {
message.warning("Image must smaller than 2MB!");
message.warning(this.t('SketchboardUpload.jsContent3'));
}
return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
},
@@ -550,7 +554,7 @@ export default defineComponent({
};
if (this.fileList.length == 15) {
message.warning(
"Maximum number of allowable file uploads has been exceeded"
this.t('SketchboardUpload.jsContent4')
);
break;
}
@@ -577,7 +581,7 @@ export default defineComponent({
if(generage.collectionElementid){
}else{
message.warning(
"Please select a picture"
this.t('SketchboardUpload.jsContent5')
);
return
}
@@ -589,13 +593,14 @@ export default defineComponent({
let arr = this.captionGeneration.split(/\s+/).length
if(arr > 75){
message.warning(
"The entered content exceeds the maximum length."
this.t('SketchboardUpload.jsContent6')
);
return
}
}else{
message.warning(
"Please enter content"
this.t('SketchboardUpload.jsContent7')
);
return
}

15
src/component/HomePage/Upload.vue
View File

@@ -8,7 +8,7 @@
</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(index)">Delete</div>
<div class="delete_file_block" @click="deleteFile(index)">{{ $t('Upload.Delete') }}</div>
</div>
</div>
<div class="upload_file_item upload_component" v-show="fileList.length < 10">
@@ -36,7 +36,7 @@
</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>
<span>{{ $t('Upload.Maximum2M') }}</span>
</div>
</div>
</template>
@@ -48,14 +48,17 @@ import {getUploadUrl} from '@/tool/util'
import {getCookie} from '@/tool/cookie'
import { message, Upload } from 'ant-design-vue';
import {useStore} from 'vuex'
import { useI18n } from 'vue-i18n';
export default defineComponent({
props: ["msg"],
setup(prop) {
let fileList:any = ref([])
let {t} = useI18n()
return{
fileList
fileList,
t
}
},
data(){
@@ -86,11 +89,11 @@ export default defineComponent({
beforeUpload(file:any){
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg' || file.type === 'image/bmp';
if (!isJpgOrPng) {
message.warning('You can only upload Image file!');
message.warning((this.t('Upload.jsContent2'));
}
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isLt2M) {
message.warning('Image must smaller than 2MB!');
message.warning(this.t('Upload.jsContent2'));
}
return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
},
@@ -112,7 +115,7 @@ export default defineComponent({
if(index > -1){
this.fileList.splice(index, 1)
}
message.error(file.name + 'upload failed')
message.error(file.name + this.t('Upload.jsContent3'))
}
},
deleteFile(index:any){

24
src/component/HomePage/collectionModal.vue
View File

@@ -11,12 +11,12 @@
>
<div class="collection_title">
<div class="collection_title_text">
<div v-show="collectionStep === 1">Moodboard</div>
<div v-show="collectionStep === 2">Printboard</div>
<div v-show="collectionStep === 3">Colorboard</div>
<div v-show="collectionStep === 4">Sketchboard</div>
<div v-show="collectionStep === 1">{{ $t('collectionModal.Moodboard') }}</div>
<div v-show="collectionStep === 2">{{ $t('collectionModal.Printboard') }}</div>
<div v-show="collectionStep === 3">{{ $t('collectionModal.Colorboard') }}</div>
<div v-show="collectionStep === 4">{{ $t('collectionModal.Sketchboard') }}</div>
<!-- <div v-show="collectionStep === 5">Markets Sketch</div> -->
<div class="collection_title_text_intro">select moodboard for your collection</div>
<div class="collection_title_text_intro">{{ $t('collectionModal.collection') }}</div>
</div>
<div class="collection_progress">
<a-progress :strokeWidth= 13 strokeColor="#341e57" type="circle" :percent="collectionStep*25" :format="percent => `${collectionStep}/4`" />
@@ -63,6 +63,7 @@ import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { Modal,message } from 'ant-design-vue';
import {useStore} from 'vuex'
import GO from "@/tool/GO";
import { useI18n } from 'vue-i18n'
export default defineComponent({
components:{
Generate,
@@ -72,6 +73,12 @@ export default defineComponent({
SketchboardUpload,
MarketingSketchUpload
},
state(){
let {t} = useI18n()
return {
t,
}
},
data(){
return{
showCollectionModal:false,
@@ -86,7 +93,7 @@ export default defineComponent({
let moodboard = this.store.state.UploadFilesModule.moodboard
if(moodboard.length > 1){
if (!disposeMoodboard || disposeMoodboard.length == 0) {
message.warning('You must select the image and then use the layout.')
message.warning(this.$t('collectionModal.jsContent1'))
return
}
}
@@ -119,7 +126,7 @@ export default defineComponent({
cancelDsign(){
let _this = this
Modal.confirm({
title: 'The uploaded files will not be saved, being sure to continue? ',
title: this.$t('collectionModal.jsContent2'),
icon: createVNode(ExclamationCircleOutlined),
okText: 'Yes',
cancelText: 'No',
@@ -139,7 +146,7 @@ export default defineComponent({
let colorBoards = this.store.state.UploadFilesModule.colorBoards
if(!colorBoards || colorBoards?.length < 1){
message.warning('You must choose one or more colors for further process.')
message.warning(this.$t('collectionModal.jsContent3'))
return
}
this.store.commit('clearAllId')
@@ -163,6 +170,7 @@ export default defineComponent({
font-size: 1.8rem;
font-weight: 900;
color: rgba(0,0,0,.65);
z-index: 2;
align-items: center;
.collection_progress{
width: 8rem;

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

@@ -14,7 +14,7 @@
<div class="layout_content">
<div class="collection_title">
<div class="collection_title_text">
<div class="layout_title">MoodBoard Design</div>
<div class="layout_title">{{ $t('layout.MoodBoardDesign') }}</div>
</div>
</div>
<div class="collection_closeIcon" @click.stop="cancelDsign()">
@@ -74,7 +74,7 @@
class="button_second submit_button"
@click="submitTemplate()"
>
Submit
{{ $t('layout.Submit') }}
</div>
</div>
<div class="mark_loading" v-show="loadingShow">