From 964571b556ffbf4bbe0baefa42c7da0c79666445 Mon Sep 17 00:00:00 2001
From: fangxiang <fangxiang@cloudview.work>
Date: Fri, 27 Aug 2021 09:13:57 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=B7=A5=E5=85=B7=E6=A0=8F?=
 =?UTF-8?q?=E9=9A=90=E8=97=8F=E6=98=BE=E7=A4=BA=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/i18n/zh-CN/index.ts    |  2 +
 src/layouts/MainLayout.vue | 79 ++++++++++++++++++++++++++++++++++++--
 src/pages/LeftToolBar.vue  |  1 +
 src/pages/RightToolBar.vue |  1 +
 4 files changed, 79 insertions(+), 4 deletions(-)

diff --git a/src/i18n/zh-CN/index.ts b/src/i18n/zh-CN/index.ts
index 7c9f03e..0e54d85 100644
--- a/src/i18n/zh-CN/index.ts
+++ b/src/i18n/zh-CN/index.ts
@@ -155,4 +155,6 @@ export default {
   "auto delete unknow mode success": "已经自动删除未知模式",
   "signal source": "信号源",
   "call mode directives send": "模式调用指令发送",
+  "open right tool bar": "打开右侧工具栏",
+  "open left tool bar": "打开左侧工具栏",
 };
diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
index 98db9e0..bad6c76 100644
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -1,5 +1,5 @@
 <template>
-  <q-layout view="hHh lpR fFf">
+  <q-layout view="hHh lpR fFf" @mousemove="onMouseMove">
     <div v-show="$store.state.initialized">
       <!-- header -->
       <q-header elevated class="header text-black">
@@ -11,9 +11,16 @@
         <div class="row">
           <!-- left -->
           <div
-            v-if="landspace"
+            v-if="landspace && show_left_tool_bar"
             class="col-auto overflow-auto"
             style="border: 1px solid #bdbdbd; max-width: 45vw"
+            v-touch-pan.left.prevent.mouse="
+              (evt) => {
+                if (evt.offset.x < -100 && evt.duration < 1000) {
+                  show_left_tool_bar = false;
+                }
+              }
+            "
           >
             <left-tool-bar />
           </div>
@@ -28,8 +35,15 @@
             v-if="landspace"
             class="col-auto overflow-auto"
             style="border: 1px solid #bdbdbd"
+            v-touch-pan.right.prevent.mouse="
+              (evt) => {
+                if (evt.offset.x > 100 && evt.duration < 1000) {
+                  show_right_tool_bar = false;
+                }
+              }
+            "
           >
-            <right-tool-bar />
+            <right-tool-bar v-if="show_right_tool_bar" />
           </div>
         </div>
       </q-page-container>
@@ -72,6 +86,36 @@
       </q-page-container>
     </div>
   </q-layout>
+  <div class="float-buttons">
+    <div
+      v-if="!show_left_tool_bar && mouse_page_left_flag"
+      class="absolute"
+      style="top: 45%"
+    >
+      <q-btn
+        icon="keyboard_arrow_right"
+        flat
+        round
+        @click="show_left_tool_bar = true"
+      >
+        <q-tooltip>{{ $t("open left tool bar") }}</q-tooltip>
+      </q-btn>
+    </div>
+    <div
+      v-if="!show_right_tool_bar && mouse_page_right_flag"
+      class="absolute-right"
+      style="top: 45%"
+    >
+      <q-btn
+        icon="keyboard_arrow_left"
+        flat
+        round
+        @click="show_right_tool_bar = true"
+      >
+        <q-tooltip>{{ $t("open right tool bar") }}</q-tooltip>
+      </q-btn>
+    </div>
+  </div>
 </template>
 
 <script lang="ts">
@@ -91,6 +135,11 @@ export default defineComponent({
   setup() {
     const landspace = window.innerHeight < window.innerWidth;
 
+    let show_left_tool_bar = ref(true);
+    let mouse_page_left_flag = ref(false);
+    let show_right_tool_bar = ref(true);
+    let mouse_page_right_flag = ref(false);
+
     EventBus.getInstance().on(EventNamesDefine.WindowResize, () => {
       const new_landspace = window.innerHeight < window.innerWidth;
       if (landspace != new_landspace) {
@@ -98,7 +147,29 @@ export default defineComponent({
       }
     });
 
-    return { landspace };
+    return {
+      landspace,
+      show_left_tool_bar,
+      show_right_tool_bar,
+      mouse_page_left_flag,
+      mouse_page_right_flag,
+      loga(a: any) {
+        console.log(a);
+      },
+      onMouseMove(evt: MouseEvent) {
+        const detect_area = window.innerWidth * 0.2;
+        if (evt.x < detect_area) {
+          mouse_page_right_flag.value = false;
+          mouse_page_left_flag.value = true;
+        } else if (evt.x + detect_area > window.innerWidth) {
+          mouse_page_left_flag.value = false;
+          mouse_page_right_flag.value = true;
+        } else {
+          mouse_page_left_flag.value = false;
+          mouse_page_right_flag.value = false;
+        }
+      },
+    };
   },
 });
 </script>
diff --git a/src/pages/LeftToolBar.vue b/src/pages/LeftToolBar.vue
index 11e8f17..759d947 100644
--- a/src/pages/LeftToolBar.vue
+++ b/src/pages/LeftToolBar.vue
@@ -20,6 +20,7 @@
       </q-tab-panel>
     </q-tab-panels>
   </div>
+  <slot />
 </template>
 
 <script lang="ts">
diff --git a/src/pages/RightToolBar.vue b/src/pages/RightToolBar.vue
index e7e7dfe..825f935 100644
--- a/src/pages/RightToolBar.vue
+++ b/src/pages/RightToolBar.vue
@@ -24,6 +24,7 @@
       </q-tab-panel>
     </q-tab-panels>
   </div>
+  <slot />
 </template>
 
 <script lang="ts">