From 3a8fb71916e0d948b46c4c4413166c564d0054a1 Mon Sep 17 00:00:00 2001 From: gene9831 Date: Tue, 5 Dec 2023 22:30:55 -0800 Subject: [PATCH 1/7] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E7=94=BB=E5=B8=83?= =?UTF-8?q?=E5=AE=BD=E5=BA=A6=E8=AE=BE=E7=BD=AE=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/toolbars/media/src/Main.vue | 43 ++++++++++++---------------- 1 file changed, 18 insertions(+), 25 deletions(-) diff --git a/packages/toolbars/media/src/Main.vue b/packages/toolbars/media/src/Main.vue index a701bf9fe8..a3fb81b5cb 100644 --- a/packages/toolbars/media/src/Main.vue +++ b/packages/toolbars/media/src/Main.vue @@ -288,12 +288,10 @@ export default { maxWidth: item.maxWidth }) state.width = parseInt(item.width, 10) - state.scaleValue = scale.value.toFixed(2) - state.readonly = item.view !== 'mdx' } else { - state.activeIndex = item.idx emit('setViewPort', item.width) } + state.activeIndex = item.idx } const activeView = (val, type) => { @@ -314,29 +312,28 @@ export default { state.width = prevWidthVal ? prevWidthVal : parseInt(dimension.width) } else if (String(val) === '0' || Number(val) < 240) { state.width = 240 - prevWidthVal = 240 } else if (Number(val) > 1920) { state.width = 1920 - prevWidthVal = 1920 } else { - prevWidthVal = val + state.width = val } + prevWidthVal = state.width switch (true) { case 1200 < Number(state.width) && Number(state.width) <= 1920: - activeView(val, 'mdx') + activeView(state.width, 'mdx') break case 992 < Number(state.width) && Number(state.width) <= 1200: - activeView(val, 'desktop') + activeView(state.width, 'desktop') break case 768 < Number(state.width) && Number(state.width) <= 992: - activeView(val, 'tablet') + activeView(state.width, 'tablet') break case 480 < Number(state.width) && Number(state.width) <= 768: - activeView(val, 'lanMobile') + activeView(state.width, 'lanMobile') break case 240 <= Number(state.width) && Number(state.width) <= 480: - activeView(val, 'mobile') + activeView(state.width, 'mobile') break default: break @@ -354,14 +351,11 @@ export default { } else if (Number(val) < 20) { state.scaleValue = 20 } else { - prevScaleVal = val + state.scaleValue = val } + prevScaleVal = val useLayout().setDimension({ - deviceType: item.view, - width: item.width, - minWidth: item.minWidth, - maxWidth: item.maxWidth, scale: Number(state.scaleValue) / 100 }) } @@ -370,15 +364,10 @@ export default { setCanvasType(value ? 'absolute' : 'normal') } - watchEffect( - () => { - const mode = dimension.value.deviceType || 'desktop' - - state.activeIndex = mediaMap[mode].index || 0 - setViewPort(mediaMap[mode]) - }, - { flush: 'post' } - ) + watchEffect(() => { + state.readonly = dimension.value.deviceType !== 'mdx' + state.scaleValue = scale.value.toFixed(2) + }) watch( () => useLayout().getDimension().width, @@ -398,6 +387,10 @@ export default { document.removeEventListener('click', closePopover) }) + // 初始化 viewpoint + const mode = dimension.value.deviceType || 'desktop' + setViewPort(mediaMap[mode]) + return { scale, state, From 4a23da37a441edc0da520b77cd0db0b433a49696 Mon Sep 17 00:00:00 2001 From: gene9831 Date: Fri, 8 Dec 2023 01:58:27 -0800 Subject: [PATCH 2/7] =?UTF-8?q?fix:=20=E4=BC=98=E5=8C=96=E7=94=BB=E5=B8=83?= =?UTF-8?q?=E8=AE=BE=E7=BD=AE=E4=B8=AD=E8=BE=93=E5=85=A5=E6=A1=86=E7=9A=84?= =?UTF-8?q?=E5=80=BC=E7=9A=84=E6=A0=A1=E9=AA=8C=E8=A7=84=E5=88=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/toolbars/media/src/Main.vue | 43 +++++++++++++++------------- 1 file changed, 23 insertions(+), 20 deletions(-) diff --git a/packages/toolbars/media/src/Main.vue b/packages/toolbars/media/src/Main.vue index a3fb81b5cb..187437b40a 100644 --- a/packages/toolbars/media/src/Main.vue +++ b/packages/toolbars/media/src/Main.vue @@ -287,16 +287,13 @@ export default { minWidth: item.minWidth, maxWidth: item.maxWidth }) - state.width = parseInt(item.width, 10) } else { emit('setViewPort', item.width) } - state.activeIndex = item.idx } const activeView = (val, type) => { const item = mediaMap[type] - state.activeIndex = mediaMap[type].index useLayout().setDimension({ deviceType: item.view, width: val ? `${val}px` : item.width, @@ -305,35 +302,34 @@ export default { }) } const widthChange = (val) => { - const reg = '^[0-9]*$' - const dimension = useLayout().getDimension() + const reg = '^[0-9]+$' if (!String(val).match(reg)) { - state.width = prevWidthVal ? prevWidthVal : parseInt(dimension.width) - } else if (String(val) === '0' || Number(val) < 240) { + state.width = prevWidthVal ? prevWidthVal : parseInt(dimension.value.width, 10) + } else if (Number(val) < 240) { state.width = 240 } else if (Number(val) > 1920) { state.width = 1920 } else { state.width = val } - prevWidthVal = state.width + const width = Number(state.width) switch (true) { - case 1200 < Number(state.width) && Number(state.width) <= 1920: - activeView(state.width, 'mdx') + case 1200 < width && width <= 1920: + activeView(width, 'mdx') break - case 992 < Number(state.width) && Number(state.width) <= 1200: - activeView(state.width, 'desktop') + case 992 < width && width <= 1200: + activeView(width, 'desktop') break - case 768 < Number(state.width) && Number(state.width) <= 992: - activeView(state.width, 'tablet') + case 768 < width && width <= 992: + activeView(width, 'tablet') break - case 480 < Number(state.width) && Number(state.width) <= 768: - activeView(state.width, 'lanMobile') + case 480 < width && width <= 768: + activeView(width, 'lanMobile') break - case 240 <= Number(state.width) && Number(state.width) <= 480: - activeView(state.width, 'mobile') + case 240 <= width && width <= 480: + activeView(width, 'mobile') break default: break @@ -342,7 +338,7 @@ export default { const scaleChange = (val) => { const item = mediaMap['mdx'] - const reg = '^[0-9]*$' + const reg = '^[0-9]+$' if (!String(val).match(reg)) { state.scaleValue = prevScaleVal ? prevScaleVal : parseInt(item.scale) @@ -353,7 +349,7 @@ export default { } else { state.scaleValue = val } - prevScaleVal = val + state.scaleValue = Number(state.scaleValue).toFixed(2) useLayout().setDimension({ scale: Number(state.scaleValue) / 100 @@ -365,8 +361,14 @@ export default { } watchEffect(() => { + const deviceType = dimension.value.deviceType + state.activeIndex = mediaMap[deviceType].index state.readonly = dimension.value.deviceType !== 'mdx' + }) + + watchEffect(() => { state.scaleValue = scale.value.toFixed(2) + prevScaleVal = scale.value }) watch( @@ -375,6 +377,7 @@ export default { const newWidth = parseInt(width, 10) if (Number.isInteger(newWidth) && newWidth !== state.width) { state.width = newWidth + prevWidthVal = newWidth } } ) From 6846a5e06a8846da252ae842f80f64c6df08d359 Mon Sep 17 00:00:00 2001 From: gene9831 Date: Fri, 8 Dec 2023 02:18:07 -0800 Subject: [PATCH 3/7] =?UTF-8?q?fix:=20=E7=94=BB=E5=B8=83=E8=AE=BE=E7=BD=AE?= =?UTF-8?q?=E4=B8=AD=E5=AE=BD=E5=BA=A6=E8=BE=93=E5=85=A5=E6=A1=86=E7=9A=84?= =?UTF-8?q?=E5=80=BC=E8=AE=BE=E7=BD=AE=E4=B8=BA=E7=A9=BA=E6=97=B6=E9=87=8D?= =?UTF-8?q?=E7=BD=AE=E4=B8=BA=E4=B8=8A=E4=B8=80=E4=B8=AA=E6=9C=89=E6=95=88?= =?UTF-8?q?=E5=80=BC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/toolbars/media/src/Main.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/toolbars/media/src/Main.vue b/packages/toolbars/media/src/Main.vue index 187437b40a..ab5d9ad575 100644 --- a/packages/toolbars/media/src/Main.vue +++ b/packages/toolbars/media/src/Main.vue @@ -375,7 +375,7 @@ export default { () => useLayout().getDimension().width, (width) => { const newWidth = parseInt(width, 10) - if (Number.isInteger(newWidth) && newWidth !== state.width) { + if (Number.isInteger(newWidth)) { state.width = newWidth prevWidthVal = newWidth } From 47571dcd4ed99dc3392904147fff6f57cca62afe Mon Sep 17 00:00:00 2001 From: gene9831 Date: Sun, 10 Dec 2023 22:32:03 -0800 Subject: [PATCH 4/7] =?UTF-8?q?fix:=20=E9=99=8D=E4=BD=8E=E5=87=BD=E6=95=B0?= =?UTF-8?q?=E5=9C=88=E5=A4=8D=E6=9D=82=E5=BA=A6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/toolbars/media/src/Main.vue | 30 ++++++++++------------------ 1 file changed, 11 insertions(+), 19 deletions(-) diff --git a/packages/toolbars/media/src/Main.vue b/packages/toolbars/media/src/Main.vue index ab5d9ad575..856c5747ce 100644 --- a/packages/toolbars/media/src/Main.vue +++ b/packages/toolbars/media/src/Main.vue @@ -301,6 +301,15 @@ export default { maxWidth: item.maxWidth }) } + + const breakpoints = [ + { type: 'mobile', min: 240, max: 480 }, + { type: 'lanMobile', min: 480, max: 768 }, + { type: 'tablet', min: 768, max: 992 }, + { type: 'desktop', min: 992, max: 1200 }, + { type: 'mdx', min: 1200, max: 1920 } + ] + const widthChange = (val) => { const reg = '^[0-9]+$' @@ -315,25 +324,8 @@ export default { } const width = Number(state.width) - switch (true) { - case 1200 < width && width <= 1920: - activeView(width, 'mdx') - break - case 992 < width && width <= 1200: - activeView(width, 'desktop') - break - case 768 < width && width <= 992: - activeView(width, 'tablet') - break - case 480 < width && width <= 768: - activeView(width, 'lanMobile') - break - case 240 <= width && width <= 480: - activeView(width, 'mobile') - break - default: - break - } + const type = breakpoints.find((item) => item.min <= width && width <= item.max)?.type || 'desktop' + activeView(width, type) } const scaleChange = (val) => { From 40f2f68d3ac3ef148c66c1979f205d8e2acc1a71 Mon Sep 17 00:00:00 2001 From: gene9831 Date: Tue, 12 Dec 2023 23:51:13 -0800 Subject: [PATCH 5/7] =?UTF-8?q?fix:=20=E5=9B=9E=E9=80=80=E9=A2=84=E8=A7=88?= =?UTF-8?q?=E9=A1=B5=E7=9B=B8=E5=85=B3=E4=BB=A3=E7=A0=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/toolbars/media/src/Main.vue | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/toolbars/media/src/Main.vue b/packages/toolbars/media/src/Main.vue index 856c5747ce..532807cd81 100644 --- a/packages/toolbars/media/src/Main.vue +++ b/packages/toolbars/media/src/Main.vue @@ -288,6 +288,7 @@ export default { maxWidth: item.maxWidth }) } else { + state.activeIndex = item.idx emit('setViewPort', item.width) } } From b5e8ade0ef735a784e59a8d87d3bb72cd514c801 Mon Sep 17 00:00:00 2001 From: gene9831 Date: Fri, 15 Dec 2023 01:17:01 -0800 Subject: [PATCH 6/7] =?UTF-8?q?fix:=20=E5=A2=9E=E5=BC=BA=E5=8C=B9=E9=85=8D?= =?UTF-8?q?=E7=BC=A9=E6=94=BE=E5=80=BC=E7=9A=84=E6=AD=A3=E5=88=99=E8=A1=A8?= =?UTF-8?q?=E8=BE=BE=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/toolbars/media/src/Main.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/toolbars/media/src/Main.vue b/packages/toolbars/media/src/Main.vue index 532807cd81..fb0b331293 100644 --- a/packages/toolbars/media/src/Main.vue +++ b/packages/toolbars/media/src/Main.vue @@ -331,7 +331,7 @@ export default { const scaleChange = (val) => { const item = mediaMap['mdx'] - const reg = '^[0-9]+$' + const reg = '^[0-9]+(\\.[0-9]+)?$' if (!String(val).match(reg)) { state.scaleValue = prevScaleVal ? prevScaleVal : parseInt(item.scale) From 67f711dfd11d09ea68240370a4e39e862ab72576 Mon Sep 17 00:00:00 2001 From: gene9831 Date: Mon, 18 Dec 2023 04:33:27 -0800 Subject: [PATCH 7/7] =?UTF-8?q?fix:=20=E4=BB=A3=E7=A0=81=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/toolbars/media/src/Main.vue | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 deletions(-) diff --git a/packages/toolbars/media/src/Main.vue b/packages/toolbars/media/src/Main.vue index fb0b331293..92d0d8cc05 100644 --- a/packages/toolbars/media/src/Main.vue +++ b/packages/toolbars/media/src/Main.vue @@ -312,7 +312,7 @@ export default { ] const widthChange = (val) => { - const reg = '^[0-9]+$' + const reg = /^\d+$/ if (!String(val).match(reg)) { state.width = prevWidthVal ? prevWidthVal : parseInt(dimension.value.width, 10) @@ -331,7 +331,7 @@ export default { const scaleChange = (val) => { const item = mediaMap['mdx'] - const reg = '^[0-9]+(\\.[0-9]+)?$' + const reg = /^\d+(\.\d+)?$/ if (!String(val).match(reg)) { state.scaleValue = prevScaleVal ? prevScaleVal : parseInt(item.scale) @@ -353,11 +353,13 @@ export default { setCanvasType(value ? 'absolute' : 'normal') } - watchEffect(() => { - const deviceType = dimension.value.deviceType - state.activeIndex = mediaMap[deviceType].index - state.readonly = dimension.value.deviceType !== 'mdx' - }) + watch( + () => dimension.value.deviceType, + (deviceType) => { + state.activeIndex = mediaMap[deviceType].index + state.readonly = deviceType !== 'mdx' + } + ) watchEffect(() => { state.scaleValue = scale.value.toFixed(2) @@ -365,7 +367,7 @@ export default { }) watch( - () => useLayout().getDimension().width, + () => dimension.value.width, (width) => { const newWidth = parseInt(width, 10) if (Number.isInteger(newWidth)) {