feat: 1.编辑界面调整 预览自动全屏预览 2.仪表盘主界面调整，增加全屏预览，新tab页预览

frontend/package.json

@@ -38,6 +38,7 @@
     "vue-axios": "3.2.4",
     "vue-clipboard2": "0.3.1",
     "vue-codemirror": "^4.0.6",
+    "vue-fullscreen": "^2.5.1",
     "vue-i18n": "7.3.2",
     "vue-router": "3.0.6",
     "vue-uuid": "2.0.2",

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

 <template>
   <div style="width: 100%;height: 100vh;">
-    <span style="line-height: 35px; position: absolute; top:10px;right: 20px;z-index:100000">
-      <el-button size="mini" @click="close">
-        关闭
-      </el-button>
-    </span>
-    <Preview />
+    <fullscreen style="background: #ffffff" :fullscreen.sync="fullscreen" @change="fullscreenChange">
+      <Preview v-if="fullscreen" />
+    </fullscreen>
   </div>
 </template>
 
@@ -16,10 +13,21 @@ import bus from '@/utils/bus'
 
 export default {
   components: { Preview },
+  data() {
+    return {
+      fullscreen: false
+    }
+  },
+  mounted() {
+    this.fullscreen = false
+    this.$nextTick(() => (this.fullscreen = true))
+  },
 
   methods: {
-    close() {
-      bus.$emit('previewFullScreenClose')
+    fullscreenChange(fullscreen) {
+      if (!fullscreen) {
+        bus.$emit('previewFullScreenClose')
+      }
     }
   }
 }

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

@@ -43,7 +43,7 @@
         <el-button class="el-icon-document-delete" size="mini" circle @click="clearCanvas" />
       </el-tooltip>
       <input id="input" ref="files" type="file" hidden @change="handleFileChange">
-      <el-tooltip :content="$t('panel.preview')">
+      <el-tooltip :content="$t('panel.fullscreen_preview')">
         <el-button class="el-icon-view" size="mini" circle @click="clickPreview" />
       </el-tooltip>
 

frontend/src/lang/en.js

@@ -899,6 +899,8 @@ export default {
     save_to_panel: 'Save to template',
     export_to_panel: 'Export to template',
     preview: 'Preview',
+    fullscreen_preview: 'Fullscreen Preview',
+    new_tab_preview: 'New Tab Preview',
     select_panel_from_left: 'Please select Dashboard from left',
     template_nale: 'Template name',
     template: 'Template',

frontend/src/lang/tw.js

@@ -899,6 +899,8 @@ export default {
     save_to_panel: '保存為模板',
     export_to_panel: '導出為模板',
     preview: '預覽',
+    fullscreen_preview: '全屏预览',
+    new_tab_preview: '新Tab页预览',
     select_panel_from_left: '請從左側選擇儀表板',
     template_nale: '模板名稱',
     template: '模板',

frontend/src/lang/zh.js

@@ -899,6 +899,8 @@ export default {
     save_to_panel: '保存为模板',
     export_to_panel: '导出为模板',
     preview: '预览',
+    fullscreen_preview: '全屏预览',
+    new_tab_preview: '新Tab页预览',
     select_panel_from_left: '请从左侧选择仪表板',
     template_nale: '模板名称',
     template: '模板',

frontend/src/main.js

@@ -37,6 +37,10 @@ Vue.use(UmyUi)
 import vcolorpicker from 'vcolorpicker'
 Vue.use(vcolorpicker)
 
+// 全屏插件
+import fullscreen from 'vue-fullscreen'
+Vue.use(fullscreen)
+
 /**
  * If you don't want to use mock-server
  * you want to use MockJs for mock api

frontend/src/views/panel/edit/index.vue

@@ -141,7 +141,7 @@
       :fullscreen="true"
       custom-class="preview-dialog"
     >
-      <PreviewFullScreen />
+      <PreviewFullScreen :fullscreen="previewVisible" />
     </el-dialog>
   </el-row>
 </template>

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

@@ -19,8 +19,14 @@
               </el-tooltip>
             </span>
             <span style="float: right;margin-right: 10px">
-              <el-tooltip :content="$t('panel.preview')">
-                <el-button class="el-icon-view" size="mini" circle @click="clickPreview" />
+              <el-tooltip :content="$t('panel.fullscreen_preview')">
+                <el-button class="el-icon-view" size="mini" circle @click="clickFullscreen" />
+              </el-tooltip>
+            </span>
+
+            <span style="float: right;margin-right: 10px">
+              <el-tooltip :content="$t('panel.new_tab_preview')">
+                <el-button class="el-icon-data-analysis" size="mini" circle @click="newTab" />
               </el-tooltip>
             </span>
 
@@ -41,7 +47,9 @@
       <!-- 仪表板预览区域-->
       <el-row class="panel-design-preview">
         <div ref="imageWrapper" style="width: 100%;height: 100%">
-          <Preview v-if="showMain" />
+          <fullscreen style="background: #ffffff;height: 100%" :fullscreen.sync="fullscreen">
+            <Preview v-if="showMain" />
+          </fullscreen>
         </div>
       </el-row>
     </el-col>
@@ -78,7 +86,8 @@ export default {
       templateInfo: {},
       templateSaveTitle: '保存为模板',
       templateSaveShow: false,
-      hasStar: false
+      hasStar: false,
+      fullscreen: false
     }
   },
   computed: {
@@ -103,7 +112,10 @@ export default {
   mounted() {
   },
   methods: {
-    clickPreview() {
+    clickFullscreen() {
+      this.fullscreen = true
+    },
+    newTab() {
       const url = '#/preview/' + this.$store.state.panel.panelInfo.id
       window.open(url, '_blank')
     },