diff --git a/core/frontend/package.json b/core/frontend/package.json index fed1843ec8..4085c55c7d 100644 --- a/core/frontend/package.json +++ b/core/frontend/package.json @@ -72,6 +72,7 @@ "svgo": "1.2.2", "tinymce": "^5.8.2", "umy-ui": "^1.1.6", + "vant": "^2.13.2", "vue": "2.6.10", "vue-clipboard2": "0.3.1", "vue-codemirror": "^4.0.6", diff --git a/core/frontend/public/mobile.html b/core/frontend/public/mobile.html new file mode 100644 index 0000000000..6a5a5b00f3 --- /dev/null +++ b/core/frontend/public/mobile.html @@ -0,0 +1,16 @@ + + + + + + + + + + +
+ + diff --git a/core/frontend/src/components/canvas/components/Toolbar.vue b/core/frontend/src/components/canvas/components/Toolbar.vue index daa97bb5e9..c9273dbe41 100644 --- a/core/frontend/src/components/canvas/components/Toolbar.vue +++ b/core/frontend/src/components/canvas/components/Toolbar.vue @@ -342,6 +342,7 @@ export default { eventBus.$on('checkAndSave', this.checkAndSave) eventBus.$on('clearCanvas', this.clearCanvas) bus.$on('onSubjectChange', this.editPanelInit) + bus.$on('editSave', this.mobileLayoutSave) this.scale = this.canvasStyleData.scale this.mobileLayoutInitStatus = this.mobileLayoutStatus this.showGridSwitch = this.canvasStyleData.aidedDesign.showGrid @@ -350,6 +351,7 @@ export default { this.autoCache() }, beforeDestroy() { + bus.$off('editSave', this.mobileLayoutSave) eventBus.$off('preview', this.preview) eventBus.$off('checkAndSave', this.checkAndSave) eventBus.$off('clearCanvas', this.clearCanvas) @@ -654,13 +656,14 @@ export default { openMobileLayout(switchVal) { if (switchVal) { this.$store.commit('openMobileLayout') + bus.$emit('mobile-status-change', 'openMobileLayout', this.componentData) } else { this.mobileLayoutSave() } }, editSave() { if (this.mobileLayoutStatus) { - this.mobileLayoutSave() + bus.$emit('mobile-status-change', 'editSave') } else { this.saveLinkage() } @@ -669,6 +672,9 @@ export default { this.$store.commit('setComponentData', JSON.parse(this.componentDataCache)) this.$store.commit('setMobileLayoutStatus', false) this.$store.commit('openMobileLayout') + if (this.mobileLayoutStatus) { + bus.$emit('mobile-status-change', 'reset', JSON.parse(this.componentDataCache)) + } }, editCancel() { if (this.mobileLayoutStatus) { diff --git a/core/frontend/src/components/canvas/components/editor/ComponentWrapper.vue b/core/frontend/src/components/canvas/components/editor/ComponentWrapper.vue index 1059a9408c..721904e056 100644 --- a/core/frontend/src/components/canvas/components/editor/ComponentWrapper.vue +++ b/core/frontend/src/components/canvas/components/editor/ComponentWrapper.vue @@ -40,6 +40,7 @@ :style="getComponentStyleDefault(config.style)" style="overflow: hidden" :out-style="config.style" + :terminal="terminal" :is-relation="isRelation" :element="config" :in-screen="inScreen" diff --git a/core/frontend/src/components/canvas/components/editor/MobileCheckBar.vue b/core/frontend/src/components/canvas/components/editor/MobileCheckBar.vue index ee3fbdbe07..6d31ff2150 100644 --- a/core/frontend/src/components/canvas/components/editor/MobileCheckBar.vue +++ b/core/frontend/src/components/canvas/components/editor/MobileCheckBar.vue @@ -13,6 +13,7 @@ diff --git a/core/frontend/src/views/panel/edit/ComponentWait.vue b/core/frontend/src/views/panel/edit/ComponentWait.vue index 7b5ce57e9d..bf1978caf1 100644 --- a/core/frontend/src/views/panel/edit/ComponentWait.vue +++ b/core/frontend/src/views/panel/edit/ComponentWait.vue @@ -47,7 +47,7 @@ import { mapState } from 'vuex' import ComponentWaitItem from '@/views/panel/edit/ComponentWaitItem' import MobileBackgroundSelector from '@/views/panel/subjectSetting/panelStyle/MobileBackgroundSelector' import { imgUrlTrans } from '@/components/canvas/utils/utils' -import {hexColorToRGBA} from "@/views/chart/chart/util"; +import { hexColorToRGBA } from '@/views/chart/chart/util' export default { name: 'ComponentWait', diff --git a/core/frontend/src/views/panel/edit/index.vue b/core/frontend/src/views/panel/edit/index.vue index 8e04e18d2b..ad66f0d474 100644 --- a/core/frontend/src/views/panel/edit/index.vue +++ b/core/frontend/src/views/panel/edit/index.vue @@ -188,7 +188,7 @@ class="mobile_canvas_main" >
{{ panelInfo.name }} - - - - - + + @@ -249,7 +234,7 @@
@@ -593,6 +578,7 @@ export default { autoMoveOffSet: 15, mobileEditorShow: true, hasStar: false, + mobileLoading: true, drawerSize: '300px', visible: false, show: false, @@ -652,7 +638,7 @@ export default { { label: '适应新主题', value: true }, { label: '保持源样式', value: false } ], - multiplexingStyleAdaptSelf : true + multiplexingStyleAdaptSelf: true } }, @@ -776,7 +762,7 @@ export default { curCanvasScaleSelf() { return this.curCanvasScaleMap[this.canvasId] }, - selectComponentCount(){ + selectComponentCount() { return Object.keys(this.curMultiplexingComponents).length }, ...mapState([ @@ -786,6 +772,7 @@ export default { 'canvasStyleData', 'curComponentIndex', 'componentData', + 'pcComponentData', 'linkageSettingStatus', 'dragComponentInfo', 'componentGap', @@ -817,7 +804,8 @@ export default { this.recordStyleChange(this.$store.state.styleChangeTimes) } }, - mobileLayoutStatus() { + mobileLayoutStatus(val) { + this.mobileLoading = val this.restore() }, previewVisible(val) { @@ -849,6 +837,21 @@ export default { listenGlobalKeyDown() }, mounted() { + bus.$on('mobile-status-change', this.mobileStatusChange) + window.addEventListener('message', (event) => { + if (event.data.type === 'deleteComponentWithId') { + console.log('event1', event.data) + this.$store.commit('deleteComponentWithId', event.data.value) + this.deleteComponentWithId(event.data.value) + } + if (event.data.type === 'setComponentData') { + console.log('setComponentData', event.data) + this.$store.commit('setComponentData', event.data.value) + setTimeout(() => { + bus.$emit('editSave') + }, 1000) + } + }) this.initWatermark() this.initEvents() const _this = this @@ -864,6 +867,7 @@ export default { this.multiplexingStyleAdaptSelf = this.multiplexingStyleAdapt }, beforeDestroy() { + bus.$off('mobile-status-change', this.mobileStatusChange) bus.$off('component-on-drag', this.componentOnDrag) bus.$off('component-dialog-style', this.componentDialogStyle) bus.$off('previewFullScreenClose', this.previewFullScreenClose) @@ -875,6 +879,40 @@ export default { elx && elx.remove() }, methods: { + handleLoad() { + this.mobileLoading = false + this.mobileStatusChange('openMobileLayout', this.componentData) + }, + deleteComponentWithId(id) { + for (let index = 0; index < this.pcComponentData.length; index++) { + const element = this.pcComponentData[index] + if (element.id && element.id === id) { + element.mobileSelected = false + if (element.type === 'de-tabs') { + this.deleteComponentWithId(element.id) + } + break + } + } + }, + mobileStatusChange(type, value) { + console.log('mobileLayoutStatustype', type, this.mobileLayoutStatus) + if (!this.mobileLayoutStatus) return + const iframe = document.querySelector('iframe') + console.log('iframe', iframe) + if (iframe) { + iframe.contentWindow.postMessage( + { + type, + value + }, + '*' + ) + } + // if (['setCanvasStyle', 'addComponent'].includes(type)) { + + // } + }, initWatermark() { if (this.panelInfo.watermarkInfo) { this.$nextTick(() => { @@ -1557,14 +1595,14 @@ export default { .mobile_canvas_main { width: 80%; height: 90%; - margin-left: 10%; + margin-left: 7%; margin-top: 3%; } .this_mobile_canvas { border-radius: 30px; - min-width: 300px; - max-width: 350px; + min-width: 370px; + max-width: 370px; min-height: 600px; max-height: 700px; overflow: hidden; diff --git a/core/frontend/src/views/panel/subjectSetting/panelStyle/MobileBackgroundSelector.vue b/core/frontend/src/views/panel/subjectSetting/panelStyle/MobileBackgroundSelector.vue index df4b0de340..5591b64f29 100644 --- a/core/frontend/src/views/panel/subjectSetting/panelStyle/MobileBackgroundSelector.vue +++ b/core/frontend/src/views/panel/subjectSetting/panelStyle/MobileBackgroundSelector.vue @@ -106,6 +106,7 @@ import { mapState } from 'vuex' import { deepCopy, imgUrlTrans } from '@/components/canvas/utils/utils' import { COLOR_PANEL } from '@/views/chart/chart/chart' import { uploadFileResult } from '@/api/staticResource/staticResource' +import bus from '@/utils/bus' export default { name: 'MobileBackgroundSelector', @@ -141,6 +142,7 @@ export default { const canvasStyleData = deepCopy(this.canvasStyleData) canvasStyleData.panel.mobileSetting = this.mobileSetting this.$store.commit('setCanvasStyle', canvasStyleData) + bus.$emit('mobile-status-change', 'setCanvasStyle', canvasStyleData) this.$store.commit('recordSnapshot', 'commitStyle') }, onChangeType() { diff --git a/core/frontend/vue.config.js b/core/frontend/vue.config.js index dc0d168899..e68e0fbd32 100644 --- a/core/frontend/vue.config.js +++ b/core/frontend/vue.config.js @@ -41,6 +41,11 @@ module.exports = { entry: 'src/main.js', template: 'public/index.html', filename: 'index.html' + }, + mobile: { + entry: 'src/mobile/main.js', + template: 'public/mobile.html', + filename: 'mobile.html' } }, configureWebpack: {