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

修改generate流程，新增导出功能

Browse Source
This commit is contained in:
X1627315083
2024-04-03 17:39:44 +08:00
parent ef3ebf05b0
commit 31a6d05e31
13 changed files with 721 additions and 176 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
public/index.html
View File

@@ -16,6 +16,7 @@
<script src="/js/color-thief.js"></script>
<script src="/js/fabric.min.js"></script>
<script src="/js/fabric.brushes.js"></script>
<script src="/js/aligning_guidelines.js"></script>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>

230
public/js/aligning_guidelines.js Normal file
View File

@@ -0,0 +1,230 @@
/**
* Should objects be aligned by a bounding box?
* [Bug] Scaled objects sometimes can not be aligned by edges
*
*/
var ctx,canvasAligning
function initAligningGuidelines(canvas,bor) {
ctx = canvas.getSelectionContext()
canvasAligning = canvas
setCanvasAligning(bor)
}
var aligningLineOffset = 5,
aligningLineMargin = 4,
aligningLineWidth = 1,
aligningLineColor = 'rgb(178, 204, 255)',
viewportTransform,
zoom = 1;
function drawVerticalLine(coords) {
drawLine(
coords.x + 0.5,
coords.y1 > coords.y2 ? coords.y2 : coords.y1,
coords.x + 0.5,
coords.y2 > coords.y1 ? coords.y2 : coords.y1);
}
function drawHorizontalLine(coords) {
drawLine(
coords.x1 > coords.x2 ? coords.x2 : coords.x1,
coords.y + 0.5,
coords.x2 > coords.x1 ? coords.x2 : coords.x1,
coords.y + 0.5);
}
function drawLine(x1, y1, x2, y2) {
ctx.save();
ctx.lineWidth = aligningLineWidth;
ctx.strokeStyle = aligningLineColor;
ctx.beginPath();
ctx.moveTo(x1 * zoom + viewportTransform[4], y1 * zoom + viewportTransform[5]);
ctx.lineTo(x2 * zoom + viewportTransform[4], y2 * zoom + viewportTransform[5]);
ctx.stroke();
ctx.restore();
}
function isInRange(value1, value2) {
value1 = Math.round(value1);
value2 = Math.round(value2);
for (var i = value1 - aligningLineMargin, len = value1 + aligningLineMargin; i <= len; i++) {
if (i === value2) {
return true;
}
}
return false;
}
var verticalLines = [],
horizontalLines = [];
stateAligning = false
let mouseDown = (e) => {
if(e.target){
stateAligning = true
}else{
stateAligning = false
}
viewportTransform = canvasAligning.viewportTransform;
zoom = canvasAligning.getZoom();
}
let objectMoving = (e) => {
var activeObject = e.target,
canvasAligningObjects = canvasAligning.getObjects(),
activeObjectCenter = activeObject.getCenterPoint(),
activeObjectLeft = activeObjectCenter.x,
activeObjectTop = activeObjectCenter.y,
activeObjectBoundingRect = activeObject.getBoundingRect(),
activeObjectHeight = activeObjectBoundingRect.height / viewportTransform[3],
activeObjectWidth = activeObjectBoundingRect.width / viewportTransform[0],
horizontalInTheRange = false,
verticalInTheRange = false,
transform = canvasAligning._currentTransform;
if (!transform) return;
// It should be trivial to DRY this up by encapsulating (repeating) creation of x1, x2, y1, and y2 into functions,
// but we're not doing it here for perf. reasons -- as this a function that's invoked on every mouse move
for (var i = canvasAligningObjects.length; i--;) {
if (canvasAligningObjects[i] === activeObject) continue;
var objectCenter = canvasAligningObjects[i].getCenterPoint(),
objectLeft = objectCenter.x,
objectTop = objectCenter.y,
objectBoundingRect = canvasAligningObjects[i].getBoundingRect(),
objectHeight = objectBoundingRect.height / viewportTransform[3],
objectWidth = objectBoundingRect.width / viewportTransform[0];
// snap by the horizontal center line
if (isInRange(objectLeft, activeObjectLeft)) {
verticalInTheRange = true;
verticalLines.push({
x: objectLeft,
y1: (objectTop < activeObjectTop)
? (objectTop - objectHeight / 2 - aligningLineOffset)
: (objectTop + objectHeight / 2 + aligningLineOffset),
y2: (activeObjectTop > objectTop)
? (activeObjectTop + activeObjectHeight / 2 + aligningLineOffset)
: (activeObjectTop - activeObjectHeight / 2 - aligningLineOffset)
});
activeObject.setPositionByOrigin(new fabric.Point(objectLeft, activeObjectTop), 'center', 'center');
}
// snap by the left edge
if (isInRange(objectLeft - objectWidth / 2, activeObjectLeft - activeObjectWidth / 2)) {
verticalInTheRange = true;
verticalLines.push({
x: objectLeft - objectWidth / 2,
y1: (objectTop < activeObjectTop)
? (objectTop - objectHeight / 2 - aligningLineOffset)
: (objectTop + objectHeight / 2 + aligningLineOffset),
y2: (activeObjectTop > objectTop)
? (activeObjectTop + activeObjectHeight / 2 + aligningLineOffset)
: (activeObjectTop - activeObjectHeight / 2 - aligningLineOffset)
});
activeObject.setPositionByOrigin(new fabric.Point(objectLeft - objectWidth / 2 + activeObjectWidth / 2, activeObjectTop), 'center', 'center');
}
// snap by the right edge
if (isInRange(objectLeft + objectWidth / 2, activeObjectLeft + activeObjectWidth / 2)) {
verticalInTheRange = true;
verticalLines.push({
x: objectLeft + objectWidth / 2,
y1: (objectTop < activeObjectTop)
? (objectTop - objectHeight / 2 - aligningLineOffset)
: (objectTop + objectHeight / 2 + aligningLineOffset),
y2: (activeObjectTop > objectTop)
? (activeObjectTop + activeObjectHeight / 2 + aligningLineOffset)
: (activeObjectTop - activeObjectHeight / 2 - aligningLineOffset)
});
activeObject.setPositionByOrigin(new fabric.Point(objectLeft + objectWidth / 2 - activeObjectWidth / 2, activeObjectTop), 'center', 'center');
}
// snap by the vertical center line
if (isInRange(objectTop, activeObjectTop)) {
horizontalInTheRange = true;
horizontalLines.push({
y: objectTop,
x1: (objectLeft < activeObjectLeft)
? (objectLeft - objectWidth / 2 - aligningLineOffset)
: (objectLeft + objectWidth / 2 + aligningLineOffset),
x2: (activeObjectLeft > objectLeft)
? (activeObjectLeft + activeObjectWidth / 2 + aligningLineOffset)
: (activeObjectLeft - activeObjectWidth / 2 - aligningLineOffset)
});
activeObject.setPositionByOrigin(new fabric.Point(activeObjectLeft, objectTop), 'center', 'center');
}
// snap by the top edge
if (isInRange(objectTop - objectHeight / 2, activeObjectTop - activeObjectHeight / 2)) {
horizontalInTheRange = true;
horizontalLines.push({
y: objectTop - objectHeight / 2,
x1: (objectLeft < activeObjectLeft)
? (objectLeft - objectWidth / 2 - aligningLineOffset)
: (objectLeft + objectWidth / 2 + aligningLineOffset),
x2: (activeObjectLeft > objectLeft)
? (activeObjectLeft + activeObjectWidth / 2 + aligningLineOffset)
: (activeObjectLeft - activeObjectWidth / 2 - aligningLineOffset)
});
activeObject.setPositionByOrigin(new fabric.Point(activeObjectLeft, objectTop - objectHeight / 2 + activeObjectHeight / 2), 'center', 'center');
}
// snap by the bottom edge
if (isInRange(objectTop + objectHeight / 2, activeObjectTop + activeObjectHeight / 2)) {
horizontalInTheRange = true;
horizontalLines.push({
y: objectTop + objectHeight / 2,
x1: (objectLeft < activeObjectLeft)
? (objectLeft - objectWidth / 2 - aligningLineOffset)
: (objectLeft + objectWidth / 2 + aligningLineOffset),
x2: (activeObjectLeft > objectLeft)
? (activeObjectLeft + activeObjectWidth / 2 + aligningLineOffset)
: (activeObjectLeft - activeObjectWidth / 2 - aligningLineOffset)
});
activeObject.setPositionByOrigin(new fabric.Point(activeObjectLeft, objectTop + objectHeight / 2 - activeObjectHeight / 2), 'center', 'center');
}
}
if (!horizontalInTheRange) {
horizontalLines.length = 0;
}
if (!verticalInTheRange) {
verticalLines.length = 0;
}
}
let beforeRender = ()=>{
if(stateAligning){
canvasAligning.clearContext(canvasAligning.contextTop);
}
}
let afterRender = ()=>{
for (var i = verticalLines.length; i--;) {
drawVerticalLine(verticalLines[i]);
}
for (var i = horizontalLines.length; i--;) {
drawHorizontalLine(horizontalLines[i]);
}
verticalLines.length = horizontalLines.length = 0;
}
let mouseUp = ()=>{
verticalLines.length = horizontalLines.length = 0;
canvasAligning.renderAll();
}
let setCanvasAligning = (bor)=>{
if(bor){
canvasAligning.on('mouse:down', mouseDown);
canvasAligning.on('object:moving', objectMoving);
canvasAligning.on('before:render', beforeRender);
canvasAligning.on('after:render', afterRender);
canvasAligning.on('mouse:up', mouseUp);
}else{
canvasAligning.off('mouse:down', mouseDown);
canvasAligning.off('object:moving', objectMoving);
canvasAligning.off('before:render', beforeRender);
canvasAligning.off('after:render', afterRender);
canvasAligning.off('mouse:up', mouseUp);
}
}

71
src/assets/style/style.css
View File

@@ -1139,21 +1139,27 @@ i {
width: 100%;
height: 100%;
}
.collection_modal_body .input_box,
.design_detail_modal_component .input_box,
.library_page .input_box {
.collection_modal_body .input_border,
.design_detail_modal_component .input_border,
.library_page .input_border {
display: flex;
align-items: center;
position: sticky;
top: 0;
background: #fff;
padding-top: calc(2.5rem*1.2);
padding-bottom: calc(2rem*1.2);
z-index: 2;
background: #fff;
top: 0;
}
.collection_modal_body .input_box input,
.design_detail_modal_component .input_box input,
.library_page .input_box input {
.collection_modal_body .input_border .input_box,
.design_detail_modal_component .input_border .input_box,
.library_page .input_border .input_box {
position: relative;
z-index: 2;
flex: 1;
}
.collection_modal_body .input_border input,
.design_detail_modal_component .input_border input,
.library_page .input_border input {
border-radius: calc(0.5rem*1.2);
width: 70%;
border: 1px solid rgba(0, 0, 0, 0.15);
@@ -1162,47 +1168,48 @@ i {
font-size: calc(1.6rem*1.2);
font-weight: 400;
}
.collection_modal_body .input_box inputinput:-moz-placeholder,
.design_detail_modal_component .input_box inputinput:-moz-placeholder,
.library_page .input_box inputinput:-moz-placeholder {
.collection_modal_body .input_border inputinput:-moz-placeholder,
.design_detail_modal_component .input_border inputinput:-moz-placeholder,
.library_page .input_border inputinput:-moz-placeholder {
color: rgba(0, 0, 0, 0.15);
}
.collection_modal_body .input_box inputinput:-ms-input-placeholder,
.design_detail_modal_component .input_box inputinput:-ms-input-placeholder,
.library_page .input_box inputinput:-ms-input-placeholder {
.collection_modal_body .input_border inputinput:-ms-input-placeholder,
.design_detail_modal_component .input_border inputinput:-ms-input-placeholder,
.library_page .input_border inputinput:-ms-input-placeholder {
color: rgba(0, 0, 0, 0.15);
}
.collection_modal_body .input_box inputinput::-webkit-input-placeholder,
.design_detail_modal_component .input_box inputinput::-webkit-input-placeholder,
.library_page .input_box inputinput::-webkit-input-placeholder {
.collection_modal_body .input_border inputinput::-webkit-input-placeholder,
.design_detail_modal_component .input_border inputinput::-webkit-input-placeholder,
.library_page .input_border inputinput::-webkit-input-placeholder {
color: rgba(0, 0, 0, 0.15);
}
.collection_modal_body .input_box span,
.design_detail_modal_component .input_box span,
.library_page .input_box span {
.collection_modal_body .input_border span,
.design_detail_modal_component .input_border span,
.library_page .input_border span {
position: absolute;
bottom: calc(0rem*1.2);
bottom: -1.5rem;
left: 0;
font-size: calc(1.2rem*1.2);
color: red;
opacity: 0;
transform: scale(0.7);
transform-origin: left bottom;
}
.collection_modal_body .input_box.active input,
.design_detail_modal_component .input_box.active input,
.library_page .input_box.active input {
.collection_modal_body .input_border.active input,
.design_detail_modal_component .input_border.active input,
.library_page .input_border.active input {
border: 1px solid #ff0001;
box-shadow: 0px 0px 3px 1px rgba(255, 0, 0, 0.2);
}
.collection_modal_body .input_box.active span,
.design_detail_modal_component .input_box.active span,
.library_page .input_box.active span {
.collection_modal_body .input_border.active span,
.design_detail_modal_component .input_border.active span,
.library_page .input_border.active span {
opacity: 1;
}
.collection_modal_body .input_box .generage_btn,
.design_detail_modal_component .input_box .generage_btn,
.library_page .input_box .generage_btn {
margin: 0 auto;
.collection_modal_body .input_border .generage_btn,
.design_detail_modal_component .input_border .generage_btn,
.library_page .input_border .generage_btn {
margin-left: 2rem;
}
.collection_modal_body .upload_item,
.design_detail_modal_component .upload_item,

19
src/assets/style/style.less
View File

@@ -1247,15 +1247,19 @@ i{
//设计input和上传按钮样式
.collection_modal_body,.design_detail_modal_component,.library_page{
.input_box{
.input_border{
display: flex;
align-items: center;
position: sticky;
top: 0;
background: #fff;
padding-top: calc(2.5rem*1.2);
padding-bottom: calc(2rem*1.2);
z-index: 2;
background: #fff;
top: 0;
.input_box{
position: relative;
z-index: 2;
flex: 1;
}
input{
border-radius: calc(.5rem*1.2);
width: 70%;
@@ -1278,7 +1282,9 @@ i{
}
span{
position: absolute;
bottom: calc(0rem*1.2);
// bottom: calc(0rem*1.2);
bottom: -1.5rem;
left: 0;
font-size: calc(1.2rem*1.2);
color: red;
opacity: 0;
@@ -1296,7 +1302,8 @@ i{
}
}
.generage_btn{
margin: 0 auto;
// margin: 0 auto;
margin-left: 2rem;
}

232
src/component/HomePage/ExportModel.vue
View File

@@ -49,6 +49,7 @@
>
<div v-if="item[0] && key == 'disposeMoodboard'" class="exportCanvasBox_intro">Entirety Moodboard</div>
<div v-if="item[0] && key == 'printboardFiles'" class="exportCanvasBox_intro">Printboard</div>
<div v-if="item[0] && key == 'moodboardFiles'" class="exportCanvasBox_intro">Moodboard</div>
<div v-if="item[0] && key == 'colorBoards'" class="exportCanvasBox_intro">Color</div>
<div v-if="item[0] && key == 'sketchboardFiles'" class="exportCanvasBox_intro">Sketch</div>
@@ -130,7 +131,7 @@
</a-select-option>
</a-select>
</label>
<label v-show="operation != 'pencil' && operation != 'eraser'&&operation != 'move'&&operation != 'texture'">
<label v-show="operation != 'pencil' && operation != 'eraser'&&operation != 'move'&&operation != 'text'&&operation != 'texture'">
<div >{{ $t('exportModel.FillBack') }}:</div>
<div class="exportCanvasBox_left_tool_item leftAlign">
<i class="icon iconfont icon-tuceng1" @click="setOperationMode('fill')" :class="{active:operationMode == 'fill'}"></i>
@@ -146,6 +147,14 @@
<i class="icon iconfont icon-shangyiceng1" @click="setLayerIndex('Back')"></i>
</div>
</label>
<label v-show="allSelectWidth > -1">
<div >{{ $t('exportModel.Width') }}</div>
<input type="number" @input="setAllSelectWidth" v-model="allSelectWidth">
</label>
<!-- <label v-show="operation != 'move' && operation != 'eraser' && operation != 'texture'">
<div >{{ $t('exportModel.Height') }}</div>
<input type="number" @input="setPencilColor" v-model="canvasPencilColor">
</label> -->
</div>
</div>
<div class="exportCanvasBox_title" @click.stop="setCloseNav('move')">
@@ -169,9 +178,10 @@
<i class="icon iconfont icon-sanjiaoxing" @click="setOperation('triangle')" :class="{active:operation == 'triangle'}"></i>
<i class="icon iconfont icon-tx-fill-tuoyuanxing" @click="setOperation('ellipse')" :class="{active:operation == 'ellipse'}"></i>
<label class="uploadImage">
<i class="icon iconfont icon-shangchuantupian" :class="{active:operation == 'ellipse'}"></i>
<i class="icon iconfont icon-shangchuantupian" ></i>
<input type="file" @change="uploadImage">
</label>
<i class="icon iconfont" @click="setOperation('text')" :class="{active:operation == 'text'}">T</i>
</div>
</div>
@@ -180,7 +190,7 @@
<div><span class="icon iconfont icon-zhuyi"></span>{{ $t('exportModel.insufficient') }}</div>
</div>
<div class="exportCanvasBox_left_btn">
<div class="subitOkPreviewBtn" :class="{active:credits<1}" @click="setHDExport">{{ $t('exportModel.HDExport') }}</div>
<div class="subitOkPreviewBtn" :class="{active:allBoardData.printboardFiles.length<=0}" :title="allBoardData.printboardFiles.length<=0?$t('exportModel.jsContent2'):''" @click="setHDExport">{{ $t('exportModel.HDExport') }}</div>
<div class="subitOkPreviewBtn Guide_1_32" @click="setExport">{{ $t('exportModel.Export') }}</div>
</div>
</div>
@@ -223,7 +233,7 @@
</div>
<div class="modal_title_text">
<div class="modal_title_text_max">{{ $t('exportModel.SR') }}</div>
<div class="modal_title_text_intro">{{ $t('exportModel.requiresCredits') }}</div>
<div class="modal_title_text_intro">{{ $t('exportModel.requiresCredits',{data:(allExportSR.filter(item=> item.checked ).length*5)}) }}</div>
</div>
<div class="SRExport_operate">
<div class="SRExport_operate_box">
@@ -238,7 +248,7 @@
</a-select> -->
<div class="SRExport_operate_item_sclae" :class="{active:scaleSR==2}" @click="setScaleSR(2)">2</div>
<div class="SRExport_operate_item_sclae" :class="{active:scaleSR==4}" @click="setScaleSR(4)">4</div>
<div class="SRExport_operate_item_sclae" :class="{active:scaleSR==8}" @click="setScaleSR(8)">8</div>
<!-- <div class="SRExport_operate_item_sclae" :class="{active:scaleSR==8}" @click="setScaleSR(8)">8</div> -->
</div>
<div :class="['check_all_block',allChecked ? 'check_all' : '']" @click="selectAllImg()">
<div class="check_block"><div class="check_block_body"></div></div>
@@ -254,7 +264,7 @@
</div>
<div class="generalModelOperate_endBtn">
<div class="generalModelOperate_btn_cancel" @click="cancelSRExport">{{ $t('exportModel.Cancel') }}</div>
<div class="generalModelOperate_btn_ok" :class="[credits < (allExportSR.filter(item=> item.checked ).length*30)?'active':'']" @click="setExportSR">OK</div>
<div class="generalModelOperate_btn_ok" :class="[credits < (allExportSR.filter(item=> item.checked ).length*5)?'active':'']" @click="setExportSR">OK</div>
</div>
</a-modal>
</a-modal>
@@ -349,20 +359,17 @@ export default defineComponent({
isDrawingMode: false, // 开启绘图模式
});
brushIndicator = clearBrushIndicator()
JSchangeType(canvas,'init')
canvasOnDrop()//开启鼠标到画布事件
setRemoveImage()//设置元素删除
canvas.on("object:modified", ()=>{
updateCanvasState()
});
canvas.preserveObjectStacking = true;
console.log(canvas.wrapperEl);
//鼠标移动
// canvas.wrapperEl.onmouseover = setCanvasKeyDown;//document上添加按下和抬起事件
// canvas.wrapperEl.onmouseout = clearCanvasKeyDown;//document上添加按下和抬起事件
canvas.on("mouse:over", event =>setCanvasKeyDown());//document上添加按下和抬起事件
canvas.on("mouse:out", event =>clearCanvasKeyDown(e));//document上添加按下和抬起事件
canvas.on("mouse:over", event =>setCanvasKeyDown(event));//document上添加按下和抬起事件
canvas.on("mouse:out", event =>clearCanvasKeyDown(event));//document上添加按下和抬起事件
canvas.on("mouse:move", event =>setCanvasMove(event));
canvas.on("mouse:out", event=>setCanvasOut(event));
@@ -376,6 +383,8 @@ export default defineComponent({
// obj.target.cornerSize = 10
// obj.target.transparentCorners = false
// });
initAligningGuidelines(canvas,true)
JSchangeType(canvas,'init')
fabric.Object.prototype.cornerSize = 10
fabric.Object.prototype.transparentCorners = false
// setCanvasOperation()//设置监听添加修改画布元素，用来做撤回功能
@@ -502,6 +511,7 @@ export default defineComponent({
if(driver__.value.driver){
driverObj__.moveNext()
}
});
};
@@ -888,14 +898,15 @@ export default defineComponent({
}
//撤回
let historyState = (str)=> {
if(str == 'reverse' && reverseCanvasState.value.length > 0){
canvasState.value = reverseCanvasState.value[reverseCanvasState.value.length-1]
if(str == 'reverse' && reverseCanvasState.value.length > 0){//反撤回
let obj = reverseCanvasState.value.pop()
// canvasState.value = reverseCanvasState.value[reverseCanvasState.value.length-1]
canvasState.value = obj
normalCanvasState.value.push(obj);
}else if(str == '' && normalCanvasState.value.length > 1){
let obj = normalCanvasState.value.pop()
reverseCanvasState.value.push(obj);
canvasState.value = normalCanvasState.value[normalCanvasState.value.length-1]
reverseCanvasState.value.push(obj);
isLoadCanvas = true;
}else{
return
@@ -923,8 +934,6 @@ export default defineComponent({
// 监听键盘的 keydown 和 keyup 事件
let keyDown = []
let canvasKeyDown = (event) => {
console.log(123);
console.log(event);
if(keyDown.indexOf(event.key)>-1){
}else{
keyDown.push(event.code)
@@ -949,28 +958,34 @@ export default defineComponent({
})
}
let setCanvasKeyDown = (event)=>{
let e = event || window.event
e.stopPropagation();
document.addEventListener('keydown',canvasKeyDown,true);
document.addEventListener('keyup', canvasKeyUp,true);
// let e = event || window.event
// e.stopPropagation();
document.addEventListener('keydown',canvasKeyDown);
document.addEventListener('keyup', canvasKeyUp);
}
let clearCanvasKeyDown = (pointer)=>{
console.log(123222);
var pointer = canvas.getPointer(options.e);
var x = pointer.x;
var y = pointer.y;
// var pointer = canvas.getPointer(pointer);
if(!pointer?.target){
document.removeEventListener('keydown',canvasKeyDown);
document.removeEventListener('keyup', canvasKeyUp);
}
// var x = pointer.x;
// var y = pointer.y;
// 检查是否鼠标离开了画布
if (x < 0 || x > canvas.width || y < 0 || y > canvas.height) {
// 执行你的操作
console.log('鼠标离开了画布');
}
document.removeEventListener('keydown',canvasKeyDown,true);
document.removeEventListener('keyup', canvasKeyUp,true);
// if (x < 0 || x > canvas.width || y < 0 || y > canvas.height) {
// // 执行你的操作
// console.log('鼠标离开了画布');
// }
// if(!x || !y){
// document.removeEventListener('keydown',canvasKeyDown);
// document.removeEventListener('keyup', canvasKeyUp);
// }
}
let canvasPencilColor = ref('#000000')
let canvasPencilWidth = ref(20)
let canvasPencilColor = ref('#000000')//画笔颜色
let canvasPencilWidth = ref(20)//画笔大小
let allSelectWidth = ref(-1)//多选或单选的宽度
let allSelect = ref([])//多选或单选的宽度
let setOperation = (str)=>{
operation.value = str
//折线图的时候切换其他形状或者笔触需要把未完成的折线图删掉
@@ -978,23 +993,41 @@ export default defineComponent({
if(createPatterningIs){
canvas.remove(currentPatterning)
}
removeSetText()
initAligningGuidelines(canvas,false)
canvas.remove(polyLineBtn)
if(str == 'pencil'){
setPencil()
}else if(str == 'move'){
setMove()
canvas.forEachObject((obj) =>obj.selectable = true);
JSchangeType(canvas,'init')
initAligningGuidelines(canvas,true)
}else if(str == 'texture'){
setTexture()
}else if(str == 'eraser'){
setEraser()
}else if(str == 'text'){
setText()
JSchangeType(canvas,'init')
}else{
canvas.forEachObject((obj) =>obj.selectable = false);
canvas.isDrawingMode = false
}
}
let _setAllSelectTime = null
let setAllSelectWidth = ()=>{
clearTimeout(_setAllSelectTime)
allSelect.value.forEach((item)=>{
// item.width = allSelectWidth.value
item.scaleX = allSelectWidth.value/item.width
item.scaleY = item.scaleX
item.setCoords()
})
_setAllSelectTime = setTimeout(() => {
updateCanvasState('')//加载完成后记录一下
}, 1500);
}
let _clipboard = null // 复制到的内容
let copy = () => {//复制
var activeObject = canvas.getActiveObject();
@@ -1091,7 +1124,7 @@ export default defineComponent({
radius:canvasPencilWidth.value/2,
fill: '#fff',
stroke: '#000',
strokeWidth: 0,
strokeWidth: 1,
originX: 'center',
originY: 'center',
visible :true,
@@ -1192,6 +1225,50 @@ export default defineComponent({
canvas.freeDrawingBrush.isEraser = true
canvas.freeDrawingBrush.width = canvasPencilWidth.value;
}
let setTextFun = (e)=>{
if(operation.value != 'text'){
return
}
var clickedObject = e.target;
if (clickedObject instanceof fabric.Textbox) {
}else{
var pointer = canvas.getPointer(e.pointer);
var x = pointer.x;
var y = pointer.y;
let textbox = new fabric.Textbox('#', {
left: x,
top: y,
width: 150,
fontSize: canvasPencilWidth.value,
fill:canvasPencilColor.value,
})
canvas.add(textbox)
canvas.renderAll();
textbox.enterEditing();
}
}
let setText = ()=>{
canvas.on('mouse:dblclick',setTextFun)
}
let removeSetText = ()=>{
canvas.off('mouse:dblclick',setTextFun)
}
// let setTextStyle = (x,y)=>{
// var group = new fabric.Group([rect.color, rect.text, rect.text1],{
// left,
// top,
// width: rect.width,
// fill: "rgb(255,255,255)",
// stroke: "#212121",
// strokeWidth: 1,
// });
// canvas.add(group);
// }
let setTimeOut = {
color:null,
width:null,
@@ -1263,7 +1340,6 @@ export default defineComponent({
}
let setCanvasOut = (event)=>{
canvas.remove(brushIndicator)//鼠标移出删除绘画范围的圆形
clearCanvasKeyDown()//鼠标移出关闭键盘事件
}
//设置再画布上按下
let setCanvasDown = (event)=>{
@@ -1325,7 +1401,16 @@ export default defineComponent({
}else{
// event.target && (event.target.bringToFront())//设置优先级
}
var selectedObjects = canvas.getActiveObjects();//获取多选选中的内容
if (selectedObjects.length >= 1) {
allSelect.value = selectedObjects
// allSelectWidth.value = 0
allSelectWidth.value = selectedObjects[0].width * selectedObjects[0].scaleX
}else{
allSelectWidth.value = -1
}
if(createPatterningIs){
switch (operation.value) {
case 'line':
currentPatterning.set({stroke: canvasPencilColor.value})
@@ -1354,12 +1439,12 @@ export default defineComponent({
}
}
let setHDExport = async ()=>{//获取选中内容的位置信息
if(allBoardData.value.printboardFiles.length <= 0){
message.info('Your print is empty')
return
}
// if(allBoardData.value.printboardFiles.length <= 0){
// message.info('Your print is empty')
// return
// }
if(credits.value < 30){
message.info('Your points are less than one SR')
message.info( useI18.t('exportModel.jsContent3'))
// return
}
showSRExport.value = true
@@ -1456,18 +1541,18 @@ export default defineComponent({
let setExportSR = ()=>{
let arr = []
let data = []
if(allExportSR.value.filter(item=> item.checked ).length <= 0){
message.info('Your print is empty')
return
}
// if(allExportSR.value.filter(item=> item.checked ).length <= 0){
// message.info('Your print is empty')
// return
// }
if(credits < (allExportSR.value.filter(item=> item.checked ).length*30)){
message.info('Your points balance is insufficient')
message.info(useI18.t('exportModel.jsContent4'))
return
}
allExportSR.value.forEach(async (item,index)=>{
let obj = {}
await new Promise((resolve,reject)=>{
if(item.checked){
let allPromise = allExportSR.value.map(async (item,index)=>{
if(item.checked){
return await new Promise((resolve,reject)=>{
let obj = {}
obj = {
images:item.imgUrl,
scale: scaleSR.value,
@@ -1479,20 +1564,36 @@ export default defineComponent({
if(img.width*scaleSR.value>4069 || img.height*scaleSR.value>4069){
arr.push(index)
}
resolve(img)
}
img.src = item.imgUrl
}
})
})
}else{
return
}
})
if(arr.length > 0){
let str = arr.join(',')
message.info(`You selected the ${str} image and zoom ratio more than 4090,`)
return
}
Https.axiosPost(Https.httpUrls.prepareForSR, data).then((rv) => {
emit('setTask',rv)
cancelSRExport()
Promise.all(allPromise)
.then(promiseArr => {
if(arr.length > 0){
let str = arr.join(',')
message.info(useI18.t('exportModel.jsContent5',{str:str}))
return
}
let aa = promiseArr.filter(item=> item == undefined)
if(aa.length == promiseArr.length){
message.info(useI18.t('exportModel.jsContent6'))
}else{
Https.axiosPost(Https.httpUrls.prepareForSR, data).then((rv) => {
emit('setTask',rv)
cancelSRExport()
});
}
})
.catch(error => {
});
}
onMounted(() => {});
return {
@@ -1521,6 +1622,8 @@ export default defineComponent({
textureList,//材质列表
canvasPencilColor,//input选择颜色
canvasPencilWidth,//input选择宽度
setAllSelectWidth,//多选设置宽度
allSelectWidth,//多选设置宽度的值
setPencilColor,//切换颜色执行函数 给当前矩形或者笔触设置颜色
setPencilWidth,//切换宽度执行函数 给当前矩形或者笔触设置宽度
setHDExport,//高清导出选择的图片
@@ -1827,10 +1930,11 @@ export default defineComponent({
margin-bottom: 2rem;
input{
position: absolute;
top: 0rem;
right: 0rem;
top: .5rem;
right: .5rem;
z-index: 2;
height: 3rem;
height: 2rem;
width: 2rem;
}
}
img{

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

@@ -43,17 +43,20 @@
</ul>
</div>
</div>
<div v-else class="input_box Guide_1_5" :class="[inputShow?'active':'',]">
<input
class="search_input"
@input="ifMaximumLength"
:placeholder="$t('Generate.inputContent1')"
:maxlength='inputShow?0:9999'
v-model="searchPictureName"
@keydown.enter="getgenerate()"
/>
<div class="generage_btn started_btn" @click.stop="getgenerate">{{ $t('Generate.Generate') }}</div>
<span>{{ $t('Generate.maximumLength') }}</span>
<div v-else class="input_border" :class="[inputShow?'active':'',]">
<div class="input_box Guide_1_5">
<input
class="search_input"
@input="ifMaximumLength"
:placeholder="$t('Generate.inputContent1')"
:maxlength='inputShow?0:9999'
v-model="searchPictureName"
@keydown.enter="getgenerate()"
/>
<div class="generage_btn started_btn" @click.stop="getgenerate">{{ $t('Generate.Generate') }}</div>
<span>{{ $t('Generate.maximumLength') }}</span>
</div>
</div>
<div v-if="type_.type2 == 'Sketchboard' || type_.type2 == 'Printboard'" class="generage_img Guide_1_6">
<div class="upload_item">
@@ -449,11 +452,11 @@ export default defineComponent({
this.checkbox[num].type = true
this.$emit('generateCheckbox',this.checkbox[0].type)
this.checkboxImage = this.checkbox[1].type
if(this.checkboxImage){
this.sketchboardList.forEach((v:any)=>{
v.checked = false
})
}
// if(this.checkboxImage){
// this.sketchboardList.forEach((v:any)=>{
// v.checked = false
// })
// }
})
if(num == 1){
this.level2Type = ''//点击文字生成就把衣服类型清空
@@ -750,10 +753,20 @@ export default defineComponent({
if(this.checkboxImage){
return
}
let parent:any = this.$parent
if(item.checked){
item.checked = false
this.collectionElementid = ''
}else{
let obj = {
imgId : item.id,
imgUr: item.imgUrl,
level2Type:item.category,
designType:'collection'
}
// parent.useGenerate.designType = 'collection'
this.$emit('setGenerate',obj)
this.sketchboardList.forEach((v:any)=>{
if(v.checked){
v.checked = false
@@ -833,6 +846,7 @@ export default defineComponent({
flex: 1;
// height: 30rem;
// overflow-x: hidden;
overflow-x: hidden;
display: flex;
flex-direction: column;
border-right: 1px solid #e5e5e5;

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

@@ -91,6 +91,7 @@ export default defineComponent({
props: ["msg",'disignTypeList'],
setup(prop) {
let myMaterialModalShow = ref(false)
let store:any =useStore()
let imgList:any = ref([])
let isShowLoading:any = ref(false)
let selectCode:any = ref('')
@@ -108,6 +109,8 @@ export default defineComponent({
let workspace:any = ref({})
let {t} = useI18n()
let usGenerateList = ref([])
return{
myMaterialModalShow,
imgList,
@@ -124,6 +127,7 @@ export default defineComponent({
workspace,
t,
driver__,
usGenerateList,
}
},
data (prop) {
@@ -259,24 +263,58 @@ export default defineComponent({
this.getLibraryList('')
},
selectImgItem(imgData:any){
imgData.type_ = this.type_
imgData.resData = JSON.parse(JSON.stringify(imgData))
this.imgList.forEach((v:any)=>{
v.categoryShow = false
})
let maxImg = 8
if(this.selectCode == 'Sketchboard'){
maxImg = 20
setUseGenerate(arr:any){
let parent:any = this.$parent
this.imgList.forEach((item:any) => {
item.checked = false
});
if(parent.isUseGenerate){
}else{
arr.forEach((item:any) => {
this.imgList.forEach((imgListItem:any) => {
if(item.id == imgListItem.id){
imgListItem.checked = true
}
});
});
}
imgData.jsContent1 = this.t('uploadFile.jsContent1',{maxImg:maxImg})
this.store.commit("addGenerateMaterialFils", imgData);
let arr = this.store.state.UploadFilesModule.moodboardMaterialFiles
if(arr.length >=2 && this.selectCode == 'Moodboard'){
if(this.driver__.driver){
driverObj__.moveNext()
},
selectImgItem(imgData:any){
console.log(imgData);
let parent:any = this.$parent
if(parent.isUseGenerate){
this.setUseGenerate([])
imgData.checked = true
let obj = {
imgId : imgData.id,
imgUr: imgData.imgUrl,
level2Type:imgData.level2Type,
designType:'library'
}
// parent.useGenerate.designType = 'collection'
this.$emit('setLibrary',obj)
}else{
imgData.type_ = this.type_
imgData.resData = JSON.parse(JSON.stringify(imgData))
this.imgList.forEach((v:any)=>{
v.categoryShow = false
})
let maxImg = 8
if(this.selectCode == 'Sketchboard'){
maxImg = 20
}
imgData.jsContent1 = this.t('uploadFile.jsContent1',{maxImg:maxImg})
this.store.commit("addGenerateMaterialFils", imgData);
let arr = this.store.state.UploadFilesModule.moodboardMaterialFiles
if(arr.length >=2 && this.selectCode == 'Moodboard'){
if(this.driver__.driver){
driverObj__.moveNext()
}
}
}
},
//选择所有的图片
async getLibraryList(str:any){

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

@@ -84,8 +84,8 @@
<span>{{ $t('PrintboardUpload.Maximum') }}</span>
</div>
</div>
<Material v-show="openClick == 2" ref="Material" msg="Printboard" @confirmSelect="confirmSelect"></Material>
<Generate v-show="openClick == 3" ref="Generate" msg="Printboard" @generateCheckbox="getgenerateCheckbox"></Generate>
<Material v-show="openClick == 2" ref="Material" msg="Printboard" @setLibrary = setSetchboardGenerate @confirmSelect="confirmSelect"></Material>
<Generate v-show="openClick == 3" ref="Generate" msg="Printboard" @setGenerate = setSetchboardGenerate @generateCheckbox="getgenerateCheckbox"></Generate>
</div>
<div class="modal_right">
<div class="modal_layout">
@@ -102,11 +102,17 @@
</div>
</div>
</div>
<div v-show="openClick == 3" class="modal_accomplish">
<div class="input_box Guide_1_2_8" :class="[inputShow?'active':'',driver__.driver?'showEvents':'']">
<input class="search_input" @input="ifMaximumLength" @keydown.enter="getgenerate" :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 v-show="openClick == 3 || openClick == 2" class="modal_accomplish">
<div class="input_border">
<div class="Guide_1_2_8 input_box" :class="[inputShow?'active':'',driver__.driver?'showEvents':'']">
<input class="search_input" @input="ifMaximumLength" @keydown.enter="getgenerate" :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>
<div v-show="!isUseGenerate" @click="setUseGenerate">Printboard</div>
<div v-show="isUseGenerate" @click="setUseGenerate">Generate</div>
</div>
</div>
<div class="modal_img">
<div v-for="item,index in generateList" class="modal_imgItem Guide_1_2_9" :class="[item?.checked?'active':'',driver__.driver?'showEvents':'']" >
@@ -191,6 +197,14 @@ export default defineComponent({
let generateLineUp:any = ref(-1)
let remGenerate:any = ref(false)
let remGenerateTime:any = ref()
let isUseGenerate = ref(false)
let useGenerate:any = ref({
imgId : '',
imgUrl:1,
checked:false,
level2Type:'',
designType:''
})
return {
fileList,
printImgList,
@@ -211,6 +225,8 @@ export default defineComponent({
generateLineUp,
remGenerate,
remGenerateTime,
useGenerate,
isUseGenerate,
}
},
computed:{
@@ -276,6 +292,42 @@ export default defineComponent({
}
},
methods:{
//设置library里面选择generate图片
setUseGenerate(){
this.isUseGenerate = !this.isUseGenerate
let printMaterialFiles:any = computed(()=>{
return this.store.state.UploadFilesModule.printMaterialFiles
})
let Material:any = this.$refs.Material
Material.setUseGenerate(printMaterialFiles.value)
if(this.isUseGenerate){
let generate:any = this.$refs.Generate
generate.checkbox.forEach((item:any)=>{
if(item.name == "text-image"){
item.type = true
}else{
item.type = false
}
})
this.generateCheckbox = false
}
},
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'){
Material.setUseGenerate([])
}else {
generate.sketchboardList.forEach((item:any) => {
item.checked = false
});
}
},
//取消请求测试
canelAxios(){
// Https.axiosCanel()
@@ -525,6 +577,14 @@ export default defineComponent({
},
recollection(){
this.isUseGenerate = false
this.useGenerate = {
imgId : '',
imgUrl:1,
checked:false,
level2Type:'',
designType:'',
}
let arr = JSON.parse(JSON.stringify(this.store.state.UploadFilesModule.allBoardData.printboardFiles))
let setboard = {
generate:[] as any,
@@ -604,9 +664,10 @@ export default defineComponent({
let data = {
generateType:generateType,
designType:'',
collectionElementId:generage?.collectionElementid,
level1Type:generage.upload.level1Type,
designType:this.useGenerate.designType,
collectionElementId:this.useGenerate.imgId,
// collectionElementId:generage?.collectionElementid,
level1Type:this.upload.level1Type,
level2Type:'',
text:`${generage.printModel.value},${this.captionGeneration}`,
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
@@ -645,7 +706,7 @@ export default defineComponent({
return
}
}else if(generateType == 'text-image'){
if(generage?.collectionElementid){
if(this.useGenerate.imgId){
if(this.captionGeneration){
let arr = this.captionGeneration.split(/\s+/).length
if(arr > 75){
@@ -835,16 +896,27 @@ export default defineComponent({
scaleImage.init(this.generateList,index)
},
generageAdd(item:any){
item.type_ = {
type1: "generate",
type2: 'Printboard',
},
item.resData = JSON.parse(JSON.stringify(item))
item.jsContent1 = this.t('uploadFile.jsContent1',{maxImg:8})
this.store.commit("addGenerateMaterialFils", item);
if(this.driver__.driver){
driverObj__.moveNext()
}
// if(this.isUseGenerate){
// let data = {
// imgId:item.id,
// imgUrl:item.imgUrl,
// designType:'generate',
// level2Type:'',
// }
// this.setSetchboardGenerate(data)
// }else{
item.type_ = {
type1: "generate",
type2: 'Printboard',
},
item.resData = JSON.parse(JSON.stringify(item))
item.jsContent1 = this.t('uploadFile.jsContent1',{maxImg:8})
this.store.commit("addGenerateMaterialFils", item);
if(this.driver__.driver){
driverObj__.moveNext()
}
// }
}
}

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

@@ -151,6 +151,7 @@
msg="Sketchboard"
@confirmSelect="confirmSelect"
:disignTypeList="sketchCatecoryList"
@setLibrary = setSetchboardGenerate
></Material>
<Generate
v-show="openClick == 3"
@@ -158,6 +159,7 @@
msg="Sketchboard"
:sketchCatecoryList="sketchCatecoryList"
@generateCheckbox="getgenerateCheckbox"
@setGenerate = setSetchboardGenerate
></Generate>
</div>
<div class="modal_right">
@@ -178,11 +180,17 @@
</div>
</div>
<div v-show="openClick == 3" class="modal_accomplish">
<div class="input_box Guide_1_9_2" :class="[inputShow?'active':'',driver__.driver?'showEvents':'']">
<input class="search_input" @input="ifMaximumLength" @keydown.enter="getgenerate()" :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">{{ $t('SketchboardUpload.Generate') }}</div>
<span>{{ $t('SketchboardUpload.maximumLength') }}</span>
<div v-show="openClick == 3 || openClick == 2" class="modal_accomplish">
<div class="input_border">
<div class="Guide_1_9_2 input_box" :class="[inputShow?'active':'',driver__.driver?'showEvents':'']">
<input class="search_input" @input="ifMaximumLength" @keydown.enter="getgenerate" :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>
<div v-show="!isUseGenerate" @click="setUseGenerate">Printboard</div>
<div v-show="isUseGenerate" @click="setUseGenerate">Generate</div>
</div>
</div>
<div class="modal_img">
<div v-for="item,index in generateList" class="modal_imgItem Guide_1_13_2" :class="[driver__.driver?'showEvents':'',item?.checked?'active':'']">
@@ -311,6 +319,14 @@ export default defineComponent({
let generateLineUp:any = ref(-1)
let remGenerate:any = ref(false)
let remGenerateTime:any = ref()
let isUseGenerate = ref(false)
let useGenerate:any = ref({
imgId : '',
imgUrl:1,
checked:false,
level2Type:'',
designType:'',
})
return {
fileList,
openClick,
@@ -332,6 +348,8 @@ export default defineComponent({
generateLineUp,
remGenerate,
remGenerateTime,
useGenerate,
isUseGenerate,
};
},
data() {
@@ -440,6 +458,41 @@ export default defineComponent({
}
},
methods: {
setUseGenerate(){
this.isUseGenerate = !this.isUseGenerate
let sketchMaterialFiles:any = computed(()=>{
return this.store.state.UploadFilesModule.sketchMaterialFiles
})
let Material:any = this.$refs.Material
Material.setUseGenerate(sketchMaterialFiles.value)
if(this.isUseGenerate){
let generate:any = this.$refs.Generate
generate.checkbox.forEach((item:any)=>{
if(item.name == "text-image"){
item.type = true
}else{
item.type = false
}
})
this.generateCheckbox = false
}
},
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'){
Material.setUseGenerate([])
}else {
generate.sketchboardList.forEach((item:any) => {
item.checked = false
});
}
},
open(num: Number) {
this.openClick = num;
if (num == 2) {
@@ -646,6 +699,14 @@ export default defineComponent({
}
},
recollection() {
this.isUseGenerate = false
this.useGenerate = {
imgId : '',
imgUrl:1,
checked:false,
level2Type:'',
designType:''
}
let arr = JSON.parse(
JSON.stringify(
this.store.state.UploadFilesModule.allBoardData
@@ -710,10 +771,10 @@ export default defineComponent({
let generateType = generage.checkbox.filter((v:any)=>v.type)[0].name
let data = {
generateType:generateType,
designType:'',
collectionElementId:generage?.collectionElementid,
level1Type:generage.upload.level1Type,
level2Type:generage.level2Type,
designType:this.useGenerate.designType,
collectionElementId:this.useGenerate.imgId,
level1Type:this.upload.level1Type,
level2Type:this.useGenerate.level2Type,
text:this.captionGeneration,
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
userId:this?.userInfo?.userId,
@@ -722,7 +783,7 @@ export default defineComponent({
gender:this.workspace.sex,
}
if(generateType == 'image'){
if(generage?.collectionElementid){
if(this.useGenerate.imgId){
data.text = ''
}else{
message.info(
@@ -750,7 +811,7 @@ export default defineComponent({
return
}
}else if(generateType == 'text-image'){
if(generage?.collectionElementid){
if(this.useGenerate.imgId){
if(this.captionGeneration){
let arr = this.captionGeneration.split(/\s+/).length
if(arr > 75){

10
src/component/LibraryPage/setLabel.vue
View File

@@ -11,8 +11,8 @@
>
<div class="setLabel_centent">
<ul class="optionsItem">
<li class="optionsItem_title" @click.stop="" v-for="optionsItem,optionsIndex in options" :key="optionsItem.id">
<div class="setLabel_text" :class="{active:optionsItem.checkAll}">
<li class="optionsItem_title" @click="clearOpenType" v-for="optionsItem,optionsIndex in options" :key="optionsItem.id">
<div class="setLabel_text" @click.stop="" :class="{active:optionsItem.checkAll}">
<a-checkbox v-model:checked="optionsItem.checkAll" @change="onCheckAllChange(optionsItem)"></a-checkbox>
<span v-show="!optionsItem.openType" :title="optionsItem.classificationName">{{ optionsItem.classificationName }}</span>
<input v-show="optionsItem.openType" type="text" class="inputName" v-model="itemName" @keydown.enter="putName(optionsIndex,'affirm',optionsItem)">
@@ -20,7 +20,7 @@
<i v-show="!optionsItem.openType" @click.stop="putName(optionsIndex,'put',optionsItem)" class="fi fi-rr-edit"></i>
</div>
<ul class="childrenItem active" v-mousewheel>
<ul class="childrenItem active" v-mousewheel @click.stop="">
<li class="childrenItem_title setLabel_text" v-for="childrenItem,childrenIndex in optionsItem.childList" :class="{active:childrenItem.checkAll}" :key="childrenItem.id">
<a-checkbox v-model:checked="childrenItem.checkAll" @change="onCheckAllchildrenItem(optionsItem)"></a-checkbox>
<span v-show="!childrenItem.openType" :title="childrenItem.classificationName">{{ childrenItem.classificationName }}</span>
@@ -35,8 +35,8 @@
</li>
</ul>
</li>
<li class="newLabel setLabel_text optionsItem_title">
<div>
<li class="newLabel setLabel_text optionsItem_title" @click="clearOpenType">
<div @click.stop="">
<input v-show="openType" type="text" class="inputName" v-model="itemName" @keydown.enter="putName(-1,'affirm','')">
<i @click.stop="putName(-1,'affirm','')" v-show="openType" class="fi fi-br-check"></i>
<div class="addLabel" v-show="!openType" @click.stop="newLabel('','')">+</div>

8
src/lang/cn.ts
View File

@@ -39,6 +39,7 @@ export default {
EditExport:'编辑 & 导出',
CanvasSize:'画布大小',
Height:'高',
Width:'宽',
CanvasNav:'缩略图',
CanvasTool:'画布工具',
Color:'颜色',
@@ -52,10 +53,15 @@ export default {
HDExport:'高清导出',
Export:'导出',
SR:'请选择需要SR的图片',
requiresCredits:'每张图片需要消耗300积分',
requiresCredits:'每张图片需要消耗{data}积分',
Scale:'倍率',
Cancel:'取消',
jsContent1:'画布内容没有保存是否离开页面',
jsContent2:'我们只支持对印花进行超分',
jsContent3:'您的积分小于一次超分',
jsContent4:'您的积分余额不足',
jsContent5:'你选择的第 {str}张图片宽度或者高度超过4090,',
jsContent6:'请选择需要SR的图片',
},
upgradePlan:{
BuyCredlts:'购买积分',

13
src/lang/en.ts
View File

@@ -40,6 +40,7 @@ export default {
EditExport:'Edit & Export',
CanvasSize:'Canvas Size',
Height:'Height',
Width:'Width',
CanvasNav:'Canvas Nav',
CanvasTool:'Canvas Tool',
Color:'Color',
@@ -50,14 +51,18 @@ export default {
Layer:'Layer',
More:'More',
insufficient:'Your points balance is insufficient, if you need to use this feature, please click the top left corner to recharge',
HDExport:'HD Export',
HDExport:'UpScale',
Export:'Export',
SR:'Please select the picture that requires SR',
requiresCredits:'Each picture requires 300 credits',
requiresCredits:'Each picture requires {data} credits',
Scale:'Scale',
Cancel:'Cancel',
jsContent1:'Canvas edit content is not saved, whether to leave the page',
jsContent2:'We only provide super-resolution capabilities for printboard images.',
jsContent3:'Your points are less than one SR',
jsContent4:'Your points balance is insufficient',
jsContent5:'You selected the {str} image and zoom ratio more than 4090,',
jsContent6:'Please select the picture that requires SR',
},
upgradePlan:{
BuyCredlts:'Buy credits',
@@ -406,7 +411,7 @@ export default {
Scale:'Scale',
Random:'Random',
inputContent:'Please input',
preview:'preview',
preview:'Preview',
jsContent1:'The above changes are not saved, being sure to continue? ',
},
uploadFile:{

2
src/views/HomeMain.vue
View File

@@ -29,7 +29,7 @@
</div>
</span>
<i @click="getCredits" class="fi fi-br-refresh" :class="[activeCredits?'active':'']"></i>
<i @click="Assignment" class="fi fi-rr-gift" title="Assignment"></i>
<!-- <i @click="Assignment" class="fi fi-rr-gift" title="Assignment"></i> -->
<i @click="UpgradePlan" title="Purchase" class="fi fi-rr-shop"></i>
</div>
</div>