Merge branch 'StableVersion' of ssh://18.167.251.121:10002/aidlab/aida_front into StableVersion
This commit is contained in:
@@ -18,7 +18,7 @@
|
||||
</div>
|
||||
<div class="admin_state_item">
|
||||
<span>{{ $t('admin.UserName') }}:</span>
|
||||
<a-select
|
||||
<!-- <a-select
|
||||
v-model:value="ids"
|
||||
mode="multiple"
|
||||
style="width: 230px"
|
||||
@@ -28,7 +28,8 @@
|
||||
max-tag-count="responsive"
|
||||
:options="allUserList"
|
||||
@keydown.enter="gettrialList"
|
||||
></a-select>
|
||||
></a-select> -->
|
||||
<SelectUser v-model="ids" labelKey="label" valueKey="label" multiple />
|
||||
</div>
|
||||
</div>
|
||||
<div class="admin_search">
|
||||
@@ -180,9 +181,10 @@
|
||||
import { Modal, message, Input } from 'ant-design-vue'
|
||||
import { ExclamationCircleOutlined, MoreOutlined } from '@ant-design/icons-vue'
|
||||
import allUserPoerationsVue from './addAllUser.vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import SelectUser from '@/component/common/SelectUser.vue'
|
||||
export default defineComponent({
|
||||
components: { allUserPoerationsVue, MoreOutlined },
|
||||
components: { allUserPoerationsVue, MoreOutlined, SelectUser },
|
||||
setup() {
|
||||
const store: any = useStore()
|
||||
const currentOrganizationId = computed(
|
||||
|
||||
@@ -764,7 +764,7 @@
|
||||
}
|
||||
|
||||
.tool-content {
|
||||
overflow-y: auto;
|
||||
// overflow-y: auto;
|
||||
max-height: 20rem;
|
||||
margin-top: 1rem;
|
||||
padding: 0 1.5rem;
|
||||
|
||||
@@ -93,7 +93,7 @@ const props = defineProps({
|
||||
},
|
||||
clothingMinIOPath: {
|
||||
type: String,
|
||||
default: "", // 衣服底图URL-线稿
|
||||
default: "", // 衣服底图URL-线稿miniIo地址(传入后启动部件选取功能)
|
||||
},
|
||||
clothingImageUrl: {
|
||||
type: String,
|
||||
@@ -744,12 +744,12 @@ function deleteFun(e, control) {
|
||||
if(target.onDelete){
|
||||
target.onDelete(target);
|
||||
}else if(target.id){
|
||||
removeLayer(layerManager.activeLayerId.value);
|
||||
removeLayer(layerManager?.activeLayerId?.value);
|
||||
}
|
||||
}
|
||||
|
||||
function removeLayer(layerId) {
|
||||
layerManager.removeLayer(layerId);
|
||||
if(layerId)layerManager.removeLayer(layerId);
|
||||
}
|
||||
|
||||
function triggerImageUpload() {
|
||||
|
||||
@@ -307,7 +307,12 @@ export class PartManager {
|
||||
for (let i = 0; i < list.length; i++) {
|
||||
const item = list[i];
|
||||
const icon = await this.loadImageToObject(item.label === 1 ? addIcon : removeIcon);
|
||||
let size = 20;
|
||||
let scaleX = size / (icon.width * this.partGroup.scaleX);
|
||||
let scaleY = size / (icon.height * this.partGroup.scaleY);
|
||||
icon.set({
|
||||
scaleX: scaleX,
|
||||
scaleY: scaleY,
|
||||
left: item.x - this.partGroup.width / 2,
|
||||
top: item.y - this.partGroup.height / 2,
|
||||
originX: fixedObject.originX,
|
||||
@@ -315,6 +320,7 @@ export class PartManager {
|
||||
})
|
||||
this.partGroup.add(icon);
|
||||
}
|
||||
console.log(this.partGroup);
|
||||
this.canvas.renderAll();
|
||||
return true;
|
||||
}
|
||||
|
||||
@@ -6,13 +6,13 @@
|
||||
<div class="content-bottom" ref="canvasContent">
|
||||
<div class="contet">
|
||||
<div class="canvas" :class="{'active': currentView === 'canvasEditor'}"@click.stop>
|
||||
<!-- :clothingMinIOPath="selectDetail.minIOPath" 部件选取 -->
|
||||
<editCanvas v-if="canvasLoad" :config="canvasConfig"
|
||||
:title="t('CanvasTitle.ModifyItem')"
|
||||
@canvasInit="editSketchCanvasInit"
|
||||
is-edit
|
||||
:clothingImageUrl="selectDetail.path"
|
||||
:clothingImageUrl2="selectDetail.maskUrl || selectDetail.layersObject[0].maskUrl"
|
||||
:clothingMinIOPath="selectDetail.minIOPath"
|
||||
showFixedLayer
|
||||
:canvasJSON="canvasJSON"
|
||||
@canvasLoadJsonSuccess="canvasLoadJsonSuccess"
|
||||
|
||||
@@ -28,7 +28,7 @@
|
||||
<div class="detail_modal_item_front">
|
||||
<img
|
||||
style="object-fit: cover;"
|
||||
:style="observerWH.width == '0px'?{width:observerWH.width+'px',height:observerWH.height+'px'}:{'object-fit': 'contain'}"
|
||||
:style="observerWH.width > 0?{width:observerWH.width+'px',height:observerWH.height+'px'}:{width:'100%',height:'auto','object-fit': 'contain'}"
|
||||
:src="designDetail.designItemUrl" alt="">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -219,19 +219,14 @@ export default defineComponent({
|
||||
detailData.frontBack.front[selectItem.imgDomIndex].style.top = y + 'px'
|
||||
});
|
||||
const updateElementTransform = (element, rotateDeg = null) => {
|
||||
|
||||
const currentTransform = element.style?.transform || '';
|
||||
// 1. 提取当前的所有rotate
|
||||
const currentRotates = (currentTransform.match(/rotate[XYZ]?\([^)]+\)/g) || []);
|
||||
// 2. 获取除镜像和rotate外的其他所有变换
|
||||
let otherTransforms = currentTransform
|
||||
.replace(/scaleX\(-1\)|scaleY\(-1\)/g, '') // 移除镜像
|
||||
.replace(/rotate[XYZ]?\([^)]+\)/g, '') // 移除rotate
|
||||
.replace(/scaleX\(-1\)|scaleY\(-1\)/g, '')
|
||||
.replace(/rotate[XYZ]?\([^)]+\)/g, '')
|
||||
.replace(/\s+/g, ' ')
|
||||
.trim();
|
||||
// 3. 构建新transform
|
||||
const transforms = [];
|
||||
// 镜像部分
|
||||
if (element.mirror.x) transforms.push('scaleX(-1)');
|
||||
if (element.mirror.y) transforms.push('scaleY(-1)');
|
||||
if (otherTransforms) transforms.push(otherTransforms);
|
||||
@@ -246,104 +241,85 @@ export default defineComponent({
|
||||
moveableInstance.value.on('scale', ({ target, delta, direction }) => {
|
||||
const frontStyle = detailData.frontBack.front[selectItem.imgDomIndex];
|
||||
if (!frontStyle.mirror) frontStyle.mirror = { x: false, y: false };
|
||||
|
||||
const width = parseFloat(frontStyle.style.width);
|
||||
const height = parseFloat(frontStyle.style.height);
|
||||
|
||||
let width = parseFloat(frontStyle.style.width);
|
||||
let height = parseFloat(frontStyle.style.height);
|
||||
let left = parseFloat(frontStyle.style.left) || 0;
|
||||
let top = parseFloat(frontStyle.style.top) || 0;
|
||||
let rotation = 0;
|
||||
// 获取原始比例
|
||||
|
||||
const originalRatio = width / height;
|
||||
if (frontStyle.style.transform) {
|
||||
const transform = frontStyle.style.transform;
|
||||
const match = transform.match(/rotate\(([-\d.]+)deg\)/);
|
||||
if (match) {
|
||||
rotation = parseFloat(match[1]);
|
||||
}
|
||||
const match = frontStyle.style.transform.match(/rotate\(([-\d.]+)deg\)/);
|
||||
if (match) rotation = parseFloat(match[1]);
|
||||
}
|
||||
// 根据旋转角度重新计算控制点的方向
|
||||
function getAdjustedCorner(originalCorner, rotationAngle) {
|
||||
const angleRad = rotationAngle * (Math.PI / 180);
|
||||
const cosA = Math.cos(angleRad);
|
||||
const sinA = Math.sin(angleRad);
|
||||
const newX = originalCorner.x * cosA - originalCorner.y * sinA;
|
||||
const newY = originalCorner.x * sinA + originalCorner.y * cosA;
|
||||
|
||||
const getAdjustedCorner = (corner, rot) => {
|
||||
const rad = rot * (Math.PI / 180);
|
||||
const x = corner.x * Math.cos(rad) - corner.y * Math.sin(rad);
|
||||
const y = corner.x * Math.sin(rad) + corner.y * Math.cos(rad);
|
||||
const threshold = 0.5;
|
||||
return {
|
||||
x: Math.abs(newX) > threshold ? (newX > 0 ? 1 : -1) : 0,
|
||||
y: Math.abs(newY) > threshold ? (newY > 0 ? 1 : -1) : 0
|
||||
};
|
||||
}
|
||||
|
||||
return { x: Math.abs(x) > threshold ? (x > 0 ? 1 : -1) : 0, y: Math.abs(y) > threshold ? (y > 0 ? 1 : -1) : 0 };
|
||||
};
|
||||
if (rotation !== 0) {
|
||||
direction = getAdjustedCorner({x: direction[0], y: direction[1]}, rotation);
|
||||
direction = getAdjustedCorner({ x: direction[0], y: direction[1] }, rotation);
|
||||
direction = [direction.x, direction.y];
|
||||
}
|
||||
|
||||
// 判断是否是对角线方向(需要等比缩放)
|
||||
|
||||
const isDiagonal = Math.abs(direction[0]) === 1 && Math.abs(direction[1]) === 1;
|
||||
|
||||
// 处理轴缩放,包含镜像翻转逻辑
|
||||
const processAxis = (axis, val, deltaVal, dir, originalPosition, originalSize, keepRatio = false, otherAxisResult = null) => {
|
||||
let newVal = val * deltaVal;
|
||||
|
||||
const processAxis = (axis, val, deltaVal, dir, pos, keepRatio = false, otherAxisResult = null) => {
|
||||
const mirrorKey = axis === 'width' ? 'x' : 'y';
|
||||
const isWidth = axis === 'width';
|
||||
|
||||
// 检查是否需要镜像翻转(当值小于等于0时)
|
||||
|
||||
let newVal = val * deltaVal;
|
||||
|
||||
// 翻转处理
|
||||
if (newVal <= 0) {
|
||||
frontStyle.mirror[mirrorKey] = !frontStyle.mirror[mirrorKey];
|
||||
newVal = Math.abs(newVal);
|
||||
|
||||
updateElementTransform(frontStyle);
|
||||
|
||||
// 镜像翻转后,位置需要根据原始锚点调整
|
||||
if (dir === -1) {
|
||||
// 从左上/右上缩放时,位置保持不变
|
||||
return {
|
||||
newVal,
|
||||
adjustPos: originalPosition,
|
||||
shouldFlip: true
|
||||
};
|
||||
} else {
|
||||
// 从左下/右下缩放时,位置需要调整
|
||||
const newPosition = originalPosition + (originalSize - newVal) * (frontStyle.mirror[mirrorKey] ? -1 : 1);
|
||||
return {
|
||||
newVal,
|
||||
adjustPos: newPosition,
|
||||
shouldFlip: true
|
||||
};
|
||||
}
|
||||
}
|
||||
const shouldMove = (!frontStyle.mirror[mirrorKey] && dir === -1) ||
|
||||
(frontStyle.mirror[mirrorKey] && dir === 1);
|
||||
|
||||
// 位置调整
|
||||
const shouldMove = (!frontStyle.mirror[mirrorKey] && dir === -1) || (frontStyle.mirror[mirrorKey] && dir === 1);
|
||||
|
||||
if (keepRatio && otherAxisResult) {
|
||||
newVal = isWidth ?
|
||||
otherAxisResult.newVal * originalRatio :
|
||||
otherAxisResult.newVal / originalRatio;
|
||||
newVal = isWidth ? otherAxisResult.newVal * originalRatio : otherAxisResult.newVal / originalRatio;
|
||||
}
|
||||
let adjustPos;
|
||||
if (shouldMove) {
|
||||
adjustPos = originalPosition - (newVal - originalSize);
|
||||
} else {
|
||||
adjustPos = originalPosition;
|
||||
}
|
||||
return {
|
||||
newVal,
|
||||
adjustPos,
|
||||
shouldFlip: false
|
||||
};
|
||||
|
||||
const adjustPos = shouldMove ? pos - (newVal - val) : pos;
|
||||
|
||||
return { newVal, adjustPos, shouldFlip: newVal !== val && newVal <= 0 };
|
||||
};
|
||||
|
||||
// 自由缩放
|
||||
const widthResult = processAxis('width', width, delta[0], direction[0], left, width);
|
||||
const heightResult = processAxis('height', height, delta[1], direction[1], top, height);
|
||||
|
||||
if (isDiagonal) {
|
||||
const mainAxis = Math.abs(delta[0] - 1) > Math.abs(delta[1] - 1) ? 'width' : 'height';
|
||||
const crossAxis = mainAxis === 'width' ? 'height' : 'width';
|
||||
|
||||
const mainDir = mainAxis === 'width' ? direction[0] : direction[1];
|
||||
const crossDir = crossAxis === 'width' ? direction[0] : direction[1];
|
||||
|
||||
const mainDelta = mainAxis === 'width' ? delta[0] : delta[1];
|
||||
|
||||
const mainResult = processAxis(mainAxis, mainAxis === 'width' ? width : height, mainDelta, mainDir, mainAxis === 'width' ? left : top);
|
||||
const crossResult = processAxis(crossAxis, crossAxis === 'width' ? width : height, 1, crossDir, crossAxis === 'width' ? left : top, true, mainResult);
|
||||
|
||||
frontStyle.style.width = mainAxis === 'width' ? mainResult.newVal + 'px' : crossResult.newVal + 'px';
|
||||
frontStyle.style.height = mainAxis === 'height' ? mainResult.newVal + 'px' : crossResult.newVal + 'px';
|
||||
frontStyle.style.left = mainAxis === 'width' ? mainResult.adjustPos + 'px' : crossResult.adjustPos + 'px';
|
||||
frontStyle.style.top = mainAxis === 'height' ? mainResult.adjustPos + 'px' : crossResult.adjustPos + 'px';
|
||||
} else {
|
||||
const widthResult = processAxis('width', width, delta[0], direction[0], left);
|
||||
const heightResult = processAxis('height', height, delta[1], direction[1], top);
|
||||
|
||||
frontStyle.style.left = widthResult.adjustPos + 'px';
|
||||
frontStyle.style.top = heightResult.adjustPos + 'px';
|
||||
frontStyle.style.width = widthResult.newVal + 'px';
|
||||
frontStyle.style.height = heightResult.newVal + 'px';
|
||||
// }
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// 旋转
|
||||
moveableInstance.value.on('rotate', ({ target, beforeRotate }) => {
|
||||
@@ -647,7 +623,15 @@ export default defineComponent({
|
||||
opacity: 0;
|
||||
}
|
||||
:deep(.moveable-control){
|
||||
width: 1.4rem;
|
||||
height: 1.4rem;
|
||||
border-radius: 0;
|
||||
background-color: #44aaff;
|
||||
border: 2px solid #44aaff;
|
||||
&.moveable-ne,&.moveable-se,&.moveable-sw,&.moveable-nw{
|
||||
border: 2px solid #44aaff;
|
||||
background-color: #ffff;
|
||||
}
|
||||
}
|
||||
:deep(.moveable-rotation-control){
|
||||
border-radius: 50%;
|
||||
|
||||
@@ -20,7 +20,7 @@
|
||||
</div>
|
||||
|
||||
<!-- 图片网格 -->
|
||||
<div class="image-grid" @scroll="handleScroll">
|
||||
<div class="image-grid" v-show="list.length > 0" @scroll="handleScroll">
|
||||
<div
|
||||
v-for="(item, index) in list"
|
||||
:key="index"
|
||||
@@ -460,6 +460,7 @@ defineExpose({
|
||||
padding: 20px;
|
||||
// overflow-y: auto;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
@@ -519,8 +520,9 @@ defineExpose({
|
||||
overflow-y: auto;
|
||||
grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
|
||||
gap: 16px;
|
||||
min-height: 22rem;
|
||||
max-height: 50rem;
|
||||
flex: 1;
|
||||
// min-height: 22rem;
|
||||
// max-height: 50rem;
|
||||
padding-bottom: 2rem;
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
@@ -615,9 +617,9 @@ defineExpose({
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 60px 20px;
|
||||
color: #666;
|
||||
min-height: 300px;
|
||||
margin: auto 0;
|
||||
|
||||
.empty-icon {
|
||||
font-size: 48px;
|
||||
|
||||
Reference in New Issue
Block a user