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

Merge branch 'dev_vite' of http://18.167.251.121:10003/aidlab/aida_front into dev_vite

Browse Source
This commit is contained in:
李志鹏
2026-01-29 09:38:36 +08:00
parent bf4d7bdba8 944071201d
commit 33aaf0b600
3 changed files with 113 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/component/Detail/DesignDetail.vue
View File

@@ -369,11 +369,17 @@ export default defineComponent({
// }else if(isCurrent){
// }
console.log(JSON.parse(JSON.stringify(detailData.selectDetail.color)),'=====')
color = list[i].color?.rgba?.r != null?`${list[i].color.rgba.r} ${list[i].color.rgba.g} ${list[i].color.rgba.b}`:''
gradient = list[i].gradient
if((detailData.currentDetailType == 'sketch' && newData?.sketch) || detailData.isEditPattern.value == 'editSketch'){
color = detailData.designDetail.clothes?.[0]?.color?.rgba?.r?`${detailData.designDetail.clothes?.[0].color.rgba.r} ${detailData.designDetail.clothes[0].color.rgba.g} ${detailData.designDetail.clothes[0].color.rgba.b}`:''
gradient = detailData.designDetail.clothes?.[0]?.gradient || null
if(detailData.isEditPattern.value == 'editSketch'){
color = detailData.selectDetail?.color?.rgba?.r != null?`${detailData.selectDetail.color.rgba.r} ${detailData.selectDetail.color.rgba.g} ${detailData.selectDetail.color.rgba.b}`:''
gradient = detailData.selectDetail?.gradient || null
}else{
color = detailData.designDetail.clothes?.[0]?.color?.rgba?.r?`${detailData.designDetail.clothes?.[0].color.rgba.r} ${detailData.designDetail.clothes[0].color.rgba.g} ${detailData.designDetail.clothes[0].color.rgba.b}`:''
gradient = detailData.designDetail.clothes?.[0]?.gradient || null
}
detailData.selectDetail.maskUrl = ''
detailData.selectDetail.maskMinioUrl = ''
}
@@ -681,7 +687,7 @@ export default defineComponent({
let color = detailData.selectDetail.newDetail?.color
// let colorData:any = await getColorName(color?.rgba)
if(detailData.selectDetail.newDetail?.color){
if(color.r){
if(color.r != null){
color.rgba = {r:color.r,g:color.g,b:color.b,a:color.a}
}else{
color.rgba = {}
@@ -774,7 +780,6 @@ export default defineComponent({
if(canvasColor?.gradient){
color.gradient = canvasColor.gradient
}
console.log(color,'color')
}
if(detailData.isEditPattern.value == 'canvasEditor'){

8
src/component/Detail/detailLeft/colorBox/index.vue
View File

@@ -101,7 +101,6 @@ export default defineComponent({
})
watch(()=>colorData.selectColor,async (newVal,oldVal)=>{
if((newVal.rgba && newVal.rgba?.r != null) || newVal.gradient != null){
console.log('=======',123)
let data :any = {}
if(newVal.rgba?.r != null){
data = await getColorName(newVal.rgba)
@@ -119,7 +118,6 @@ export default defineComponent({
}
store.commit('DesignDetail/setNewDetail',value)
}else{
console.log('=======',123)
let value = {
data:{},
str:'color'
@@ -144,14 +142,13 @@ export default defineComponent({
let color = colorData.allBoardData.colorBoards?.[index]
if(!color?.rgba && color?.rgbValue)color.rgba = color.rgbValue
if(
(colorData.allBoardData.colorBoards?.[index] &&
(colorData.allBoardData.colorBoards?.[index] && color?.rgba &&
colorData.selectDetail.color.rgba?.r == color?.rgba?.r &&
colorData.selectDetail.color.rgba?.g == color?.rgba?.g &&
colorData.selectDetail.color.rgba?.b == color?.rgba?.b) ||
(JSON.stringify(colorData.selectDetail.color.gradient) == JSON.stringify(color?.gradient) && colorData.selectDetail.color.gradient)
((JSON.stringify(colorData.selectDetail.color.gradient) == JSON.stringify(color?.gradient) && colorData.selectDetail.color.gradient))
){
isNoSelect = true
console.log('=======',123)
colorData.selectColor = item
colorData.colorList.index = index
}else if(color?.rgba?.r){
@@ -175,7 +172,6 @@ export default defineComponent({
}
colorData.colorList.list[newVal].push(item)
}
console.log('=======',isNoSelect)
if(!isNoSelect){
let color = colorData.selectDetail.newDetail?.color?.rgba?.r != null?colorData.selectDetail.newDetail?.color:colorData.selectDetail.color
let item:any = {}

188
src/component/Detail/model/modelPosition.vue
View File

@@ -219,132 +219,130 @@ 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\([^)]*\)/g, '') // 移除所有 scaleX(...)
.replace(/scaleY\([^)]*\)/g, '') // 移除所有 scaleY(...)
.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 (element.mirror && element.mirror.x) transforms.push('scaleX(-1)');
if (element.mirror && element.mirror.y) transforms.push('scaleY(-1)');
if (otherTransforms) transforms.push(otherTransforms);
if (rotateDeg !== null) {
transforms.push(`rotate(${rotateDeg}deg)`);
} else if (currentRotates.length > 0) {
transforms.push(...currentRotates);
}
element.style.transform = transforms.join(' ').trim();
};
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);
// 确保 mirror 对象存在并正确初始化
if (!frontStyle.mirror) {
frontStyle.mirror = { x: false, y: false };
}
// 清除可能存在的重复镜像变换
updateElementTransform(frontStyle);
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]);
}
}
// 根据旋转角度重新计算控制点的方向
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 threshold = 0.5;
return {
x: Math.abs(newX) > threshold ? (newX > 0 ? 1 : -1) : 0,
y: Math.abs(newY) > threshold ? (newY > 0 ? 1 : -1) : 0
};
const match = frontStyle.style.transform.match(/rotate\(([-\d.]+)deg\)/);
if (match) rotation = parseFloat(match[1]);
}
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(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时）
if (newVal <= 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
};
}
} else if (newVal === 0) {
// 防止值变为0
newVal = 1;
}
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 };
};
// 自由缩放
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';
// }
}
// 更新变换，确保正确的顺序
updateElementTransform(frontStyle);
});
moveableInstance.value.on('rotate', ({ target, beforeRotate }) => {
let frontStyle = detailData.frontBack.front[selectItem.imgDomIndex];
if (!frontStyle.mirror) {
@@ -380,6 +378,11 @@ export default defineComponent({
window._lastRotateData.angle = newAngle;
updateElementTransform(frontStyle, newAngle);
});
// 可选：在rotateStart时重置
moveableInstance.value.on('rotateStart', () => {
window._lastRotateData = null;
});
// 调整大小
moveableInstance.value.on('resize', ({ target, width, height }) => {
// console.log(width, height)
@@ -397,16 +400,20 @@ export default defineComponent({
upDataDetail()
});
moveableInstance.value.on('rotateEnd', () => {
window._lastRotateData = null;
upDataDetail()
});
};
watch(()=>selectItem.selectDetail,(newValue,oldValue)=>{
if(!newValue && newValue?.id == oldValue?.id)return
selectItem.imgDomIndex = detailData.frontBack.front.findIndex((item:any)=>item.id == newValue.id)
initMoveableForSelected()
// watch(()=>selectItem.selectDetail,(newValue,oldValue)=>{
// if(!newValue && newValue?.id == oldValue?.id)return
// },{immediate: true,})
watch(()=>selectItem.selectDetail?.id,(newValue,oldValue)=>{
if(newValue){
selectItem.imgDomIndex = detailData.frontBack.front.findIndex((item:any)=>item.id == newValue)
setTimeout(()=>{
initMoveableForSelected()
},100)
}
},{immediate: true,})
const setRevocation = async ()=>{
let frontBack = JSON.parse(JSON.stringify(detailData.frontBack))
let revocation:any = JSON.parse((await KeyValueDB.get("revocation") as any) || '[]')
@@ -567,6 +574,7 @@ export default defineComponent({
getMousePosition,
updataPosition,
updateRect,
initMoveableForSelected,
}
},
@@ -654,7 +662,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%;