添加工具栏隐藏显示功能

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": "打开左侧工具栏",
 };

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>

src/pages/LeftToolBar.vue

@@ -20,6 +20,7 @@
       </q-tab-panel>
     </q-tab-panels>
   </div>
+  <slot />
 </template>
 
 <script lang="ts">

src/pages/RightToolBar.vue

@@ -24,6 +24,7 @@
       </q-tab-panel>
     </q-tab-panels>
   </div>
+  <slot />
 </template>
 
 <script lang="ts">