From a2142d0946ec5eb8bb64e5473bef0901d1a20df6 Mon Sep 17 00:00:00 2001
From: dataeaseShu <tong.shu@fit2cloud.com>
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+bvW37<h*}B>VOnyfk$L90|U1(2s1Lwnj--e
zWGoJHcVbv~PUa<$!;<dk>&U>cv7h@-A}a#}^8-&8$B+ufw|5NluK0-@|9Jnu{sP9%
z5)lQ%3jsoo%@YLNOhP6!$rUpl;&eK~DC8$l%=CaI(r<!C2h%Kx&bBTW2SyQt{+Sci
zrQfGbE<KV|Ykz6-=H%)imCt|vl<gG)+DHH_c>k<M=jV-%jn59hOz5hZcl6MVzuHU<
zlHcb4I`}i9|F*CEZLZE8-wL(!Chy!)KchE)#ZCpC-xZVIZg1HqQNOM>MxY_{>~V>V
z?^e0NKX$APsIY7`%{EKk^XX&IZ|ld8*Ypd|y2mg7zNSXF&*kak>1FDVTP?QD>s@<f
z<EGTUr8#{Mcg7vrcy-5Jp$5GhQJYM^R-Q5ROO*XTOCe`p(U}<a+B@G1PaZ$Y_h?rC
z?pcn<ukb&ATxKf0S-WCw!B+pPzgA@3)>QeNp0!@COynH{o1Gk|LwL-cbG<kIJ0!*~
z|GTYkzIMo~Qkm_i?rZ&0I+woo@@YG{?Pt<G|MvF3=VHBUVyE$>*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%|}zuFuSWI<J`P
zzfAVc2u-c>gebqW>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=yq<GofAEcnSgzznyASJ@;Lgw(LIL$<bHt_1pWcdcDo(;p4Xc;#r2Z
zEAOy#iEaz!fBEv_TZ^#N<5#8TZejc*z2<IK_T8h`PqSNGm$R~3_pEYS<_&j6cDuaa
zKUPX!UOw-4R*#e7#_Lvhmd9(o-KW6w`gHJKhv_+MBej?Ht$&?!|6Ir8+vjGt$Y$%#
zDs4Ry=UcbRPAlYAeyz>bFY7dHB))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<aXaWE|
CLISe@
literal 0
HcmV?d00001
diff --git a/core/core-frontend/src/components/dashboard/DbToolbar.vue b/core/core-frontend/src/components/dashboard/DbToolbar.vue
index e061d993a0..5033410eeb 100644
--- a/core/core-frontend/src/components/dashboard/DbToolbar.vue
+++ b/core/core-frontend/src/components/dashboard/DbToolbar.vue
@@ -457,9 +457,9 @@ const isDataEaseBi = computed(() => appStore.getIsDataEaseBi)
/>
</el-tooltip>
<div class="divider"></div>
- <el-tooltip effect="dark" content="移动端配置" placement="bottom">
+ <el-tooltip effect="dark" content="切换至移动端布局" placement="bottom">
<component-button
- tips="移动端配置"
+ tips="切换至移动端布局"
@custom-click="openMobileSetting"
icon-name="icon_phone_outlined"
/>
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 }}
</div>
<div class="mobile-save">
- <el-icon @click="handleBack">
- <Icon name="icon_pc_outlined" />
- </el-icon>
+ <span class="open-mobile">开启移动端</span>
+ <el-switch size="small" v-model="openMobile" />
+ <span class="open-mobile-line"></span>
+ <el-tooltip effect="dark" content="切换至PC端布局" placement="bottom">
+ <el-icon @click="handleBack">
+ <Icon name="icon_pc_outlined" />
+ </el-icon>
+ </el-tooltip>
<el-button type="primary" @click="save">保存</el-button>
</div>
</div>
- <div class="mobile-canvas">
+ <div class="mobile-canvas" :style="mobileStyle">
+ <div class="mobile-header">
+ <img :src="mobileHeader" alt="" srcset="" />
+ </div>
<div class="config-panel-title">
<el-icon>
<Icon name="icon_left_outlined" />
@@ -199,16 +228,16 @@ const save = () => {
</div>
<div class="mobile-com-list">
<div class="config-mobile-sidebar">移动端配置</div>
- <el-collapse v-model="activeCollapse">
- <el-collapse-item title="样式设置" name="style" class="content-no-padding-bottom">
- <MobileBackgroundSelector @styleChange="changeTimes++"></MobileBackgroundSelector>
- </el-collapse-item>
- <el-collapse-item
- v-loading="mobileLoading"
- title="可视化组件"
- name="com"
- class="content-no-padding-bottom"
- >
+ <el-tabs size="small" v-model="activeCollapse">
+ <el-tab-pane label="样式设置" name="style"> </el-tab-pane>
+ <el-tab-pane label="可视化组件" name="com"> </el-tab-pane>
+ </el-tabs>
+ <div class="config-mobile-tab">
+ <MobileBackgroundSelector
+ v-if="activeCollapse === 'style'"
+ @styleChange="changeTimes++"
+ ></MobileBackgroundSelector>
+ <template v-else>
<div
:style="{ height: '198px', width: '198px' }"
class="mobile-wrapper-inner-adaptor"
@@ -230,11 +259,11 @@ const save = () => {
:scale="80"
/>
</div>
- <div class="mobile-com-mask"></div>
- <div class="pc-select-to-mobile" v-if="!mobileLoading" @click="addToMobile(item)"></div>
+ <div class="mobile-com-mask" @click="addToMobile(item)"></div>
+ <div class="pc-select-to-mobile" v-if="!mobileLoading"></div>
</div>
- </el-collapse-item>
- </el-collapse>
+ </template>
+ </div>
</div>
</div>
</template>
@@ -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);
+ }
}
}
}