From 601f9e4dccff811f1712722d11e6de39eabfef2a Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Thu, 2 Dec 2021 16:37:11 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E5=BC=80=E5=90=AF=E7=A7=BB?=
 =?UTF-8?q?=E5=8A=A8=E7=AB=AF=E8=AE=BE=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/canvas/components/Toolbar.vue | 3 +++
 frontend/src/lang/en.js                               | 4 +++-
 frontend/src/lang/tw.js                               | 4 +++-
 frontend/src/lang/zh.js                               | 4 +++-
 frontend/src/views/panel/edit/ComponentWait.vue       | 4 +++-
 frontend/src/views/panel/edit/index.vue               | 7 ++++++-
 6 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/canvas/components/Toolbar.vue b/frontend/src/components/canvas/components/Toolbar.vue
index f0e2ce3579..8fb8e9271f 100644
--- a/frontend/src/components/canvas/components/Toolbar.vue
+++ b/frontend/src/components/canvas/components/Toolbar.vue
@@ -11,6 +11,9 @@
       </span>
     </div>
     <div v-else class="toolbar">
+      <el-tooltip :content="$t('panel.mobile_layout')">
+        <el-button class="icon iconfont-tb icon-yidongduan" size="mini" circle @click="openMobileLayout" />
+      </el-tooltip>
       <el-tooltip v-if="!canvasStyleData.auxiliaryMatrix" :content="$t('panel.new_element_distribution')+':'+$t('panel.suspension')">
         <el-button class="icon iconfont-tb icon-xuanfuanniu" size="mini" circle @click="auxiliaryMatrixChange" />
       </el-tooltip>
diff --git a/frontend/src/lang/en.js b/frontend/src/lang/en.js
index 8ca1dcfea5..47885a0fa2 100644
--- a/frontend/src/lang/en.js
+++ b/frontend/src/lang/en.js
@@ -1426,7 +1426,9 @@ export default {
     video_add_tips: 'Please Add Video Info...',
     panel_view_result_show: 'View Result Show',
     panel_view_result_tips: 'Chose "Panel" Will Overwrite View`s Result,Range 1~10000',
-    timeout_refresh: 'Timeout，Will Refresh...'
+    timeout_refresh: 'Timeout，Will Refresh...',
+    mobile_layout: 'Mobile Layout',
+    component_hidden: 'Component Hidden'
   },
   plugin: {
     local_install: 'Local installation',
diff --git a/frontend/src/lang/tw.js b/frontend/src/lang/tw.js
index a555c6ca9f..c310fd30dd 100644
--- a/frontend/src/lang/tw.js
+++ b/frontend/src/lang/tw.js
@@ -1429,7 +1429,9 @@ export default {
     video_add_tips: '請點擊添加配置視頻信息...',
     panel_view_result_show: '視圖結果展示',
     panel_view_result_tips: '選擇儀表板會覆蓋視圖的結果展示數量，取值範圍1~10000',
-    timeout_refresh: '请求超时，稍后刷新...'
+    timeout_refresh: '请求超时，稍后刷新...',
+    mobile_layout: '移动端布局',
+    component_hidden: '隐藏的组件'
   },
   plugin: {
     local_install: '本地安裝',
diff --git a/frontend/src/lang/zh.js b/frontend/src/lang/zh.js
index 9e2fea741c..145cad6cd5 100644
--- a/frontend/src/lang/zh.js
+++ b/frontend/src/lang/zh.js
@@ -1437,7 +1437,9 @@ export default {
     video_add_tips: '请点击添加配置视频信息...',
     panel_view_result_show: '视图结果展示',
     panel_view_result_tips: '选择仪表板会覆盖视图的结果展示数量，取值范围1~10000',
-    timeout_refresh: '请求超时，稍后刷新...'
+    timeout_refresh: '请求超时，稍后刷新...',
+    mobile_layout: '移动端布局',
+    component_hidden: '隐藏的组件'
   },
   plugin: {
     local_install: '本地安装',
diff --git a/frontend/src/views/panel/edit/ComponentWait.vue b/frontend/src/views/panel/edit/ComponentWait.vue
index f588ba90ed..c7e8ccfd96 100644
--- a/frontend/src/views/panel/edit/ComponentWait.vue
+++ b/frontend/src/views/panel/edit/ComponentWait.vue
@@ -1,7 +1,7 @@
 <template>
   <el-row class="component-wait">
     <el-row class="component-wait-title">
-      隐藏的组件
+      {{ $t('panel.component_hidden') }}
     </el-row>
     <el-row class="component-wait-main">
       <component-wait-item
@@ -73,6 +73,8 @@ export default {
   .component-wait-title {
     width: 100%;
     height: 30px;
+    color: #FFFFFF;
+    vertical-align: center;
     background-color: #9ea6b2;
     border-bottom: 1px black;
   }
diff --git a/frontend/src/views/panel/edit/index.vue b/frontend/src/views/panel/edit/index.vue
index fe14354dad..2f25b2caa7 100644
--- a/frontend/src/views/panel/edit/index.vue
+++ b/frontend/src/views/panel/edit/index.vue
@@ -113,7 +113,7 @@
           <el-col :span="8" class="this_mobile_canvas_cell">
             <div
               v-proportion="2.5"
-              :style="customCanvasStyle"
+              :style="customCanvasMobileStyle"
               class="this_mobile_canvas"
               @drop="handleDrop"
               @dragover="handleDragOver"
@@ -331,6 +331,11 @@ export default {
         return false
       }
     },
+    customCanvasMobileStyle() {
+      return {
+        padding: this.componentGap + 'px'
+      }
+    },
     customCanvasStyle() {
       let style = {
         padding: this.componentGap + 'px'