media_player_client/src/layouts/MainLayout.vue

<template>
  <q-layout view="hHh lpR fFf" @mousemove="onMouseMove">
    <div v-show="$store.state.initialized">
      <!-- header -->
      <q-header
        elevated
        class="header text-black"
        @click="(evt) => evt.stopPropagation()"
      >
        <top-tool-bar />
      </q-header>

      <!-- page -->
      <div
        v-if="!$store.state.power_state"
        class="fit text-h5"
        style="position: fixed; top: 50vh; left: 50vw"
      >
        {{ $t("device standby mode") }}
      </div>
      <q-page-container class="col">
        <div class="row">
          <!-- left -->
          <div
            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;
                }
              }
            "
            @click="(evt) => evt.stopPropagation()"
          >
            <left-tool-bar />
          </div>

          <!-- cener content -->
          <div class="col q-ma-sm">
            <router-view />
          </div>

          <!-- right -->
          <div
            v-if="landspace"
            class="col-auto overflow-auto"
            style="border: 1px solid #bdbdbd; max-width: 45vw"
            v-touch-pan.right.prevent.mouse="
              (evt) => {
                if (evt.offset.x > 100 && evt.duration < 1000) {
                  show_right_tool_bar = false;
                }
              }
            "
          >
            <right-tool-bar v-if="show_right_tool_bar" />
          </div>
        </div>
      </q-page-container>

      <!-- fotter -->
      <div v-show="false">
        <q-footer
          elevated
          v-if="landspace"
          class="bg-white text-black"
          style="height: 25px"
        >
          <div class="text-center fit">
            Copyright © 2020 - 2021 广东创显技术有限公司
          </div>
        </q-footer>
        <q-footer
          v-else
          elevated
          class="bg-white text-black"
          style="height: 35vh"
        >
          <footer-portrait class="fit" />
        </q-footer>
      </div>
    </div>
    <div v-show="!$store.state.initialized">
      <q-page-container class="col">
        <q-page class="row items-center justify-evenly">
          <q-list>
            <q-item>
              <q-item-section>
                <q-spinner color="primary" size="8em" :thickness="2" />
              </q-item-section>
            </q-item>
            <q-item />
            <q-item>
              <q-item-section>
                <div class="text-h5">loading...</div>
              </q-item-section>
            </q-item>
            <q-item v-show="show_back">
              <q-item-section>
                <a href="javascript:void(0);" OnClick="window.controlLogout()">
                  {{ $t("back to login page") }}
                </a>
              </q-item-section>
            </q-item>
          </q-list>
        </q-page>
      </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">
import { defineComponent, ref } from "vue";

import LeftToolBar from "src/pages/LeftToolBar.vue";
import RightToolBar from "src/pages/RightToolBar.vue";
import TopToolBar from "src/pages/TopToolBar.vue";
import FooterPortrait from "src/pages/FooterPortrait.vue";
import EventBus, { EventNamesDefine } from "src/common/EventBus";
import { useStore } from "src/store";
import FileSuffixHelper from "src/common/FileSuffixHelper";

export default defineComponent({
  name: "MainLayout",

  components: { LeftToolBar, RightToolBar, TopToolBar, FooterPortrait },

  setup() {
    const $store = useStore();

    try {
      (window as any).setPcTheme();
    } catch {}

    if ($store.state.advanced_debug) {
      FileSuffixHelper.debug_mode = true;
    }

    const landspace = $store.state.landspace;

    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);

    const show_back = ref(true);

    EventBus.getInstance().on(EventNamesDefine.WindowResize, () => {
      const new_landspace = window.innerHeight < window.innerWidth;
      if (landspace != new_landspace) {
        window.location.reload();
      }
    });

    EventBus.getInstance().on(EventNamesDefine.CurrentConnectDisconnect, () => {
      show_back.value = false;
    });

    EventBus.getInstance().on(EventNamesDefine.CurrentConnectConnected, () => {
      show_back.value = true;
    });

    return {
      landspace,
      show_back,
      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>