From a2142d0946ec5eb8bb64e5473bef0901d1a20df6 Mon Sep 17 00:00:00 2001 From: dataeaseShu Date: Wed, 20 Mar 2024 18:02:51 +0800 Subject: [PATCH] =?UTF-8?q?fix(=E7=A7=BB=E5=8A=A8=E7=AB=AF):=20=E7=A7=BB?= =?UTF-8?q?=E5=8A=A8=E7=AB=AFUI=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/assets/img/mobile-header.png | Bin 0 -> 1099 bytes .../src/components/dashboard/DbToolbar.vue | 4 +- .../src/views/dashboard/MobileConfigPanel.vue | 130 ++++++++++++++---- 3 files changed, 109 insertions(+), 25 deletions(-) create mode 100644 core/core-frontend/src/assets/img/mobile-header.png diff --git a/core/core-frontend/src/assets/img/mobile-header.png b/core/core-frontend/src/assets/img/mobile-header.png new file mode 100644 index 0000000000000000000000000000000000000000..02669a53f1e67db5c623bbce8cbc00fac85b1011 GIT binary patch literal 1099 zcmeAS@N?(olHy`uVBq!ia0y~yU@Ql+bvW37VOnyfk$L90|U1(2s1Lwnj--e zWGoJHcVbv~PUa<$!;&U>cv7h@-A}a#}^8-&8$B+ufw|5NluK0-@|9Jnu{sP9% z5)lQ%3jsoo%@YLNOhP6!$rUpl;&eK~DC8$l%=CaI(rkMxY_{>~V>V z?^e0NKX$APsIY7`%{EKk^XX&IZ|ld8*Ypd|y2mg7zNSXF&*kak>1FDVTP?QD>s@QeNp0!@COynH{o1Gk|LwL-cbG*IMeX;DITZLTl?X zY(iOG&CKo>{R`vy%{=v1^v>ri?ld0WxGgQpK2!EtX!&g2t>I7f&OK~97NqxM&A0D& z)?C`wwfj;^In(c>PG--2e#Za(V3qf_Ywo`X+FAd0=vkK)zqn)cZo8ayc-(^*OIqGt ziA&kK(fZl+o7Yyo4e7}}vR3ue);B*=-`1{wyW&Z?OnB`aA*<=X9%|}zuFuSWIgebqW>gR)$)?Zn3-l*?w_|E5_b2Dp1b3OkZwEJ8VyL0-@Ij#M#X9?E6 z+$p{L>1OTS!8?-puk0zFr&YAOb<@0^UmxlGoc^)m_0i=l?>8m;uil%_o?zqsBK6y^ zh07-24-Mz4{T}6ezScAG?K_V8FRDAIbLFqNA-yP6rr7SC<{##qwBw?MyJyU;H+DOB zZ-U}Z=E)luot(60t!Z?7@vCX7<=I;;S`VGA3tzZl-)f6#-~Q^x*X$9u3SE&oJ>rty z)jNl#-YoQ6c=yqbFY7dHB))nYx4Ez`;PzX%!7H9M;f*urv>j_N-3$9H=<&PK z;MtzVX(w;UrM-Ienth*E&EErOLf;X{S_}(>_cN|g)-d^g$P-jLFnGH9xvX appStore.getIsDataEaseBi) />
- + diff --git a/core/core-frontend/src/views/dashboard/MobileConfigPanel.vue b/core/core-frontend/src/views/dashboard/MobileConfigPanel.vue index c33fbfbf21..d2022455c5 100644 --- a/core/core-frontend/src/views/dashboard/MobileConfigPanel.vue +++ b/core/core-frontend/src/views/dashboard/MobileConfigPanel.vue @@ -9,10 +9,13 @@ import { canvasSave } from '@/utils/canvasUtils' import { useEmitt } from '@/hooks/web/useEmitt' import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain' import { storeToRefs } from 'pinia' +import { debounce } from 'lodash-es' +import mobileHeader from '@/assets/img/mobile-header.png' const dvMainStore = dvMainStoreWithOut() const { componentData, canvasStyleData, canvasViewInfo, dvInfo } = storeToRefs(dvMainStore) const mobileLoading = ref(true) +const mobileStyle = ref({}) const emits = defineEmits(['pcMode']) const snapshotStore = snapshotStoreWithOut() @@ -59,6 +62,7 @@ const handleLoad = () => { const componentDataNotInMobile = computed(() => { return componentData.value.filter(ele => !ele.inMobile) }) +const openMobile = ref(false) const hanedleMessage = event => { if (event.data.type === 'panelInit') { @@ -124,8 +128,23 @@ const loadCanvasData = () => { mobileLoading.value = false }) } + +const setMobileStyle = debounce(() => { + const height = window.innerHeight + if (height > 1032) { + mobileStyle.value = {} + return + } + const scale = height / 1032 + mobileStyle.value = { + top: `${60 + scale * 40}px`, + transform: `scale(${scale})`, + transformOrigin: '0 0' + } +}, 500) onMounted(() => { window.addEventListener('message', hanedleMessage) + window.addEventListener('resize', setMobileStyle) dvMainStore.setMobileInPc(true) useEmitt({ name: 'onMobileStatusChange', @@ -133,11 +152,13 @@ onMounted(() => { mobileStatusChange(type, value) } }) + setMobileStyle() }) onBeforeUnmount(() => { dvMainStore.setMobileInPc(false) window.removeEventListener('message', hanedleMessage) + window.removeEventListener('resize', setMobileStyle) }) const addToMobile = com => { @@ -179,13 +200,21 @@ const save = () => { {{ dvInfo.name }}
- - - + 开启移动端 + + + + + + + 保存
-
+
+
+ +
@@ -199,16 +228,16 @@ const save = () => {
移动端配置
- - - - - + + + + +
+ + +
@@ -262,6 +291,21 @@ const save = () => { .mobile-save { display: flex; align-items: center; + + .open-mobile-line { + background: #ffffff4d; + width: 1px; + height: 18px; + margin: 0 20px; + } + + .open-mobile { + font-size: 14px; + font-weight: 400; + line-height: 22px; + color: #ffffff99; + margin-right: 8px; + } .ed-icon { font-size: 20px; cursor: pointer; @@ -289,24 +333,34 @@ const save = () => { .mobile-canvas { border-radius: 30px; width: 419px; - height: 854px; + height: 852px; overflow: hidden; background-size: 100% 100% !important; - height: calc(100vh - 120px); position: absolute; - top: 104px; + top: 80px; left: calc(50% - 419px); background-image: url(../../assets/img/mobile-bg-pc.png); padding: 0 22px; + .mobile-header { + margin-top: 20px; + height: 44px; + display: flex; + img { + height: 100%; + width: 100%; + } + } + .config-panel-title { - margin-top: 64px; height: 44px; display: flex; align-items: center; justify-content: center; background: #fff; position: relative; + border-top-right-radius: 4px; + border-top-left-radius: 4px; .ed-icon { font-size: 20px; @@ -341,12 +395,38 @@ const save = () => { --ed-collapse-content-font-size: 12px; } + :deep(.ed-tabs) { + --ed-tabs-header-height: 36px; + border-top: 1px solid #1f232926; + .ed-tabs__header { + padding-left: 8px; + &::before { + content: ''; + width: 8px; + height: 1px; + position: absolute; + bottom: 0; + left: 0; + background: #1f232926; + } + } + } + + :deep(.ed-tabs__item) { + font-size: 12px; + color: #646a73; + } + .config-mobile-sidebar { font-size: 14px; font-weight: 500; line-height: 22px; padding: 8px; } + + .config-mobile-tab { + padding: 16px 8px; + } .mobile-wrapper-inner-adaptor { position: relative; margin-right: 8px; @@ -367,7 +447,7 @@ const save = () => { } &:hover { - border-color: var(--ed-color-primary); + border-color: var(--ed-color-primary-99, #3370ff99); } } @@ -378,6 +458,7 @@ const save = () => { top: 0; left: 0; z-index: 10; + cursor: pointer; } .pc-select-to-mobile { @@ -390,6 +471,9 @@ const save = () => { border-radius: 4px; z-index: 20; cursor: pointer; + &:hover { + border-color: var(--ed-color-primary-99, #3370ff99); + } } } }