From 7076c4deb766aad0e885593f0449e190c7bbf7fc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=A5=94=E8=B7=91=E7=9A=84=E9=9D=A2=E6=9D=A1?= <1262327911@qq.com> Date: Sun, 9 Jul 2023 15:54:01 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E9=A2=84=E8=A7=88?= =?UTF-8?q?=E6=8B=96=E6=8B=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/styles/common/mixins/mixins.scss | 162 ++++++++++++----------- src/styles/pages/index.scss | 24 ++-- src/views/preview/hooks/useScale.hook.ts | 23 +++- src/views/preview/suspenseIndex.vue | 4 +- src/views/preview/utils/drag.ts | 55 ++++++++ src/views/preview/utils/index.ts | 3 +- src/views/preview/utils/keyboard.ts | 27 +++- 7 files changed, 197 insertions(+), 101 deletions(-) create mode 100644 src/views/preview/utils/drag.ts diff --git a/src/styles/common/mixins/mixins.scss b/src/styles/common/mixins/mixins.scss index ec6f2ccd..38228a91 100644 --- a/src/styles/common/mixins/mixins.scss +++ b/src/styles/common/mixins/mixins.scss @@ -1,78 +1,84 @@ -@import './config.scss'; -@import './function.scss'; -@import '../theme.scss'; - -@mixin go($block) { - $B: $namespace + '-' + $block; - .#{$B} { - @content; - } -} - -@mixin goId($block) { - $B: $namespace + '-' + $block; - ##{$B} { - @content; - } -} - -@mixin deep() { - :deep() { - @content; - } -} - -@mixin when($state) { - @at-root { - &.#{$state-prefix + $state} { - @content; - } - } -} - -@mixin themeify { - @each $theme-name, $theme-map in $themes { - $theme-map: $theme-map !global; - [data-theme='#{$theme-name}'] & { - @content; - } - } -} - -@mixin fetch-theme($param) { - @include themeify { - #{$param}: themed($param); - } -} - -@mixin fetch-theme-custom ($key, $value) { - @include themeify { - #{$key}: themed($value); - } -} - -//获取背景颜色 -@mixin fetch-bg-color($target) { - @include themeify { - background-color: themed($target); - } -} - -//获取背景渐变颜色 -@mixin background-image($target) { - @include themeify { - background-image: themed($target); - } -} - -//设置边框颜色 -@mixin fetch-border-color($target) { - @include themeify { - border-color: themed($target); - } -} -@mixin hover-border-color($target) { - @include themeify { - border: 1px solid themed($target); - } -} +@import './config.scss'; +@import './function.scss'; +@import '../theme.scss'; + +@mixin go($block) { + $B: $namespace + '-' + $block; + .#{$B} { + @content; + } +} + +@mixin dark { + [data-theme='dark'] { + @content; + } +} + +@mixin goId($block) { + $B: $namespace + '-' + $block; + ##{$B} { + @content; + } +} + +@mixin deep() { + :deep() { + @content; + } +} + +@mixin when($state) { + @at-root { + &.#{$state-prefix + $state} { + @content; + } + } +} + +@mixin themeify { + @each $theme-name, $theme-map in $themes { + $theme-map: $theme-map !global; + [data-theme='#{$theme-name}'] & { + @content; + } + } +} + +@mixin fetch-theme($param) { + @include themeify { + #{$param}: themed($param); + } +} + +@mixin fetch-theme-custom ($key, $value) { + @include themeify { + #{$key}: themed($value); + } +} + +//获取背景颜色 +@mixin fetch-bg-color($target) { + @include themeify { + background-color: themed($target); + } +} + +//获取背景渐变颜色 +@mixin background-image($target) { + @include themeify { + background-image: themed($target); + } +} + +//设置边框颜色 +@mixin fetch-border-color($target) { + @include themeify { + border-color: themed($target); + } +} +@mixin hover-border-color($target) { + @include themeify { + border: 1px solid themed($target); + } +} diff --git a/src/styles/pages/index.scss b/src/styles/pages/index.scss index b8f7272d..cde2d584 100644 --- a/src/styles/pages/index.scss +++ b/src/styles/pages/index.scss @@ -1,9 +1,15 @@ -// 页面全局样式 -// 去除高德地图 logo -.amap-logo { - display: none !important; - opacity: 0 !important; -} -.amap-copyright { - opacity: 0 !important; -} +// 页面全局样式 +// 去除高德地图 logo +.amap-logo { + display: none !important; + opacity: 0 !important; +} +.amap-copyright { + opacity: 0 !important; +} + +[data-theme='dark'] { + body { + background-color: #18181c; + } +} \ No newline at end of file diff --git a/src/views/preview/hooks/useScale.hook.ts b/src/views/preview/hooks/useScale.hook.ts index e4c57f97..53b02d46 100644 --- a/src/views/preview/hooks/useScale.hook.ts +++ b/src/views/preview/hooks/useScale.hook.ts @@ -23,16 +23,27 @@ export const useScale = (localStorageInfo: ChartEditStorageType) => { e.preventDefault() e.stopPropagation() removeEvent() - const fitDom = document.querySelector(".go-preview.fit") as HTMLElement - if (fitDom) fitDom.style.overflow = 'auto' - const transform = previewRef.value.style.transform - // 使用正则解析 scale(1, 1) 中的两个数值 + const transform = previewRef.value?.style.transform const regRes = transform.match(/scale\((\d+\.?\d*)*/) as RegExpMatchArray const width = regRes[1] + const previewBoxDom = document.querySelector('.go-preview') as HTMLElement + const entityDom = document.querySelector('.go-preview-entity') as HTMLElement + if (previewBoxDom) { + previewBoxDom.style.overflow = 'unset' + previewBoxDom.style.position = 'absolute' + previewBoxDom.style.top = '10px' + previewBoxDom.style.left = '20px' + } + if (entityDom) { + entityDom.style.overflow = 'unset' + } + if (e.wheelDelta > 0) { - previewRef.value.style.transform = `scale(${parseFloat(Number(width).toFixed(2)) + 0.1})` + const resNum = parseFloat(Number(width).toFixed(2)) + previewRef.value.style.transform = `scale(${resNum > 5 ? 5 : resNum + 0.1})` } else { - previewRef.value.style.transform = `scale(${parseFloat(Number(width).toFixed(2)) - 0.1})` + const resNum = parseFloat(Number(width).toFixed(2)) + previewRef.value.style.transform = `scale(${resNum < 0.2 ? 0.2 : resNum - 0.1})` } } }, diff --git a/src/views/preview/suspenseIndex.vue b/src/views/preview/suspenseIndex.vue index 1a1932b9..bf2c528e 100644 --- a/src/views/preview/suspenseIndex.vue +++ b/src/views/preview/suspenseIndex.vue @@ -1,5 +1,5 @@