feat:增加预览连接功能

frontend/src/components/canvas/components/Editor/PreviewEject.vue

@@ -1,21 +1,22 @@
 <template>
-    <div class="bg" v-if="show">
+  <div v-if="show" class="bg">
-        <el-button @click="close" class="close">关闭</el-button>
+    <el-button class="close" @click="close">关闭</el-button>
-        <div class="canvas-container">
+    <div class="canvas-container">
-            <div class="canvas"
+      <div
-                :style="{
+        class="canvas"
-                    width: changeStyleWithScale(canvasStyleData.width) + 'px',
+        :style="{
-                    height: changeStyleWithScale(canvasStyleData.height) + 'px',
+          width: changeStyleWithScale(canvasStyleData.width) + 'px',
-                }"
+          height: changeStyleWithScale(canvasStyleData.height) + 'px',
-            >
+        }"
-                <ComponentWrapper
+      >
-                    v-for="(item, index) in componentData"
+        <ComponentWrapper
-                    :key="index"
+          v-for="(item, index) in componentData"
-                    :config="item"
+          :key="index"
-                />
+          :config="item"
-            </div>
+        />
-        </div>
+      </div>
     </div>
+  </div>
 </template>
 
 <script>
@@ -23,66 +24,70 @@ import { getStyle } from '@/components/canvas/utils/style'
 import { mapState } from 'vuex'
 import ComponentWrapper from './ComponentWrapper'
 import { changeStyleWithScale } from '@/components/canvas/utils/translate'
+import { uuid } from 'vue-uuid'
 
 export default {
-    model: {
+  components: { ComponentWrapper },
-        prop: 'show',
+  model: {
-        event: 'change',
+    prop: 'show',
-    },
+    event: 'change'
-    props: {
+  },
-        show: {
+  props: {
-            type: Boolean,
+    show: {
-            default: false,
+      type: Boolean,
-        },
+      default: false
-    },
+    }
-    components: { ComponentWrapper },
+  },
-    computed: mapState([
+  created() {
-        'componentData',
+    this.restore()
-        'canvasStyleData',
+  },
-    ]),
+  computed: mapState([
-    methods: {
+    'componentData',
-        changeStyleWithScale,
+    'canvasStyleData'
+  ]),
+  methods: {
+    changeStyleWithScale,
 
-        getStyle,
+    getStyle,
 
-        close() {
+    close() {
-            this.$emit('change', false)
+      this.$emit('change', false)
-        },
     },
+    restore() {
+      debugger
+      // 用保存的数据恢复画布
+      if (localStorage.getItem('canvasData')) {
+        this.componentData = this.resetID(JSON.parse(localStorage.getItem('canvasData')))
+      }
+
+      if (localStorage.getItem('canvasStyle')) {
+        this.canvasStyleData = JSON.parse(localStorage.getItem('canvasStyle'))
+        this.$store.commit('setCanvasStyle', JSON.parse(localStorage.getItem('canvasStyle')))
+      }
+    },
+    resetID(data) {
+      data.forEach(item => {
+        item.id = uuid.v1()
+      })
+
+      return data
+    }
+  }
 }
 </script>
 
 <style lang="scss" scoped>
-.bg {
+  .bg {
     width: 100%;
     height: 100%;
-    top: 0;
-    left: 0;
-    position: fixed;
-    background: rgb(0, 0, 0, .5);
-    z-index: 10;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    overflow: auto;
-    padding: 20px;
-
     .canvas-container {
-        width: calc(100% - 40px);
+      width: 100%;
-        height: calc(100% - 120px);
+      height: 100%;
-        overflow: auto;
+      overflow: auto;
-
+      .canvas {
-        .canvas {
+        position: relative;
-            background: #fff;
+        margin: auto;
-            position: relative;
+      }
-            margin: auto;
-        }
     }
-
+  }
-    .close {
-        position: absolute;
-        right: 20px;
-        top: 100px;
-    }
-}
 </style>

frontend/src/components/canvas/components/Editor/PreviewFullScreen.vue

@@ -0,0 +1,93 @@
+<template>
+  <div class="bg">
+    <div id="preview-parent" class="canvas-container">
+      <div
+        class="canvas"
+        :style="{
+          width: changeStyleWithScale(canvasStyleData.width) + 'px',
+          height: changeStyleWithScale(canvasStyleData.height) + 'px',
+        }"
+      >
+        <ComponentWrapper
+          v-for="(item, index) in componentData"
+          :key="index"
+          :config="item"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getStyle } from '@/components/canvas/utils/style'
+import { mapState } from 'vuex'
+import ComponentWrapper from './ComponentWrapper'
+import { changeStyleWithScale } from '@/components/canvas/utils/translate'
+import { uuid } from 'vue-uuid'
+
+export default {
+  components: { ComponentWrapper },
+  model: {
+    prop: 'show',
+    event: 'change'
+  },
+  props: {
+    show: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: mapState([
+    'componentData',
+    'canvasStyleData'
+  ]),
+  mounted() {
+    // 计算组件当前合适宽度
+  },
+  created() {
+    this.restore()
+  },
+  methods: {
+    changeStyleWithScale,
+
+    getStyle,
+
+    close() {
+      this.$emit('change', false)
+    },
+    restore() {
+      // 用保存的数据恢复画布
+      if (localStorage.getItem('canvasData')) {
+        this.$store.commit('setComponentData', this.resetID(JSON.parse(localStorage.getItem('canvasData'))))
+      }
+
+      if (localStorage.getItem('canvasStyle')) {
+        this.$store.commit('setCanvasStyle', JSON.parse(localStorage.getItem('canvasStyle')))
+      }
+    },
+    resetID(data) {
+      data.forEach(item => {
+        item.id = uuid.v1()
+      })
+
+      return data
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.bg {
+    width: 100%;
+    height: 100%;
+    .canvas-container {
+        width: 100%;
+        height: 100%;
+        overflow: auto;
+      .canvas {
+            position: relative;
+            margin: auto;
+        }
+    }
+}
+</style>

frontend/src/components/canvas/components/Toolbar.vue

@@ -29,7 +29,7 @@
         <el-button class="el-icon-circle-check" size="mini" circle @click="save" />
       </el-tooltip>
       <el-tooltip content="预览">
-        <el-button class="el-icon-view" size="mini" circle @click="preview" />
+        <el-button class="el-icon-view" size="mini" circle @click="clickPreview" />
       </el-tooltip>
 
       <span style="float: right;margin-left: 10px">
@@ -40,7 +40,7 @@
     </div>
 
     <!-- 预览 -->
-    <PreviewEject v-model="isShowPreview" @change="handlePreviewChange" />
+    <!--    <PreviewEject v-model="isShowPreview" @change="handlePreviewChange" />-->
   </div>
 </template>
 
@@ -216,6 +216,13 @@ export default {
 
     handlePreviewChange() {
       this.$store.commit('setEditMode', 'edit')
+    },
+
+    clickPreview() {
+      localStorage.setItem('canvasData', JSON.stringify(this.componentData))
+      localStorage.setItem('canvasStyle', JSON.stringify(this.canvasStyleData))
+      const url = '#/preview'
+      window.open(url, '_blank')
     }
   }
 }

frontend/src/router/index.js

@@ -73,7 +73,7 @@ export const constantRoutes = [
   },
   {
     path: '/preview',
-    component: () => import('@/views/panel/preview/index'),
+    component: () => import('@/components/canvas/components/Editor/PreviewFullScreen'),
     hidden: true
   },
 

frontend/src/views/panel/list/PanelViewShow.vue

@@ -10,7 +10,7 @@
           </span>
           <span style="float: right;line-height: 40px;">
             <el-tooltip content="预览">
-              <el-button class="el-icon-view" size="mini" circle />
+              <el-button class="el-icon-view" size="mini" circle @click="clickPreview" />
             </el-tooltip>
           </span>
         </el-row>
@@ -24,6 +24,7 @@
 </template>
 <script>
 import Preview from '@/components/canvas/components/Editor/Preview'
+import { mapState } from 'vuex'
 
 export default {
   name: 'PanelViewShow',
@@ -36,12 +37,22 @@ export default {
   computed: {
     panelInfo() {
       return this.$store.state.panel.panelInfo
-    }
+    },
+    ...mapState([
+      'componentData',
+      'canvasStyleData'
+    ])
   },
   mounted() {
 
   },
   methods: {
+    clickPreview() {
+      localStorage.setItem('canvasData', JSON.stringify(this.componentData))
+      localStorage.setItem('canvasStyle', JSON.stringify(this.canvasStyleData))
+      const url = '#/preview'
+      window.open(url, '_blank')
+    }
 
   }
 }