完成pad端登录页面。添加微软雅黑字体为首选字体

2022-04-21 15:12:00 +08:00 · 2022-04-21 15:12:00 +08:00 · 07cc68e1e9
parent 206512bdd0
commit 07cc68e1e9
14 changed files with 297 additions and 62 deletions
--- a/public/pad/login/password.png
+++ b/public/pad/login/password.png
--- a/public/pad/login/server_ip.png
+++ b/public/pad/login/server_ip.png
--- a/public/pad/login/user.png
+++ b/public/pad/login/user.png
--- a/src/App.vue
+++ b/src/App.vue
@ -6,7 +6,7 @@
  </div>
 </template>
 <script lang="ts">
-import { SessionStorage, Cookies, useQuasar } from "quasar";
+import { SessionStorage, Cookies, useQuasar, setCssVar } from "quasar";
 import { defineComponent } from "vue";
 import { useI18n } from "vue-i18n";
 import EventBus, { EventNamesDefine } from "src/common/EventBus";
@ -70,16 +70,49 @@ export default defineComponent({
      window.location.reload();
    };

+    (window as any).setPcTheme = () => {
+      setCssVar("primary", "#4aa1ce");
+      setCssVar("secondary", "#26a69a");
+      setCssVar("accent", "#9c27b0");
+      setCssVar("dark", "#1d1d1d");
+      setCssVar("positive", "#21ba45");
+      setCssVar("negative", "#c10015");
+      setCssVar("info", "#31ccec");
+      setCssVar("warning", "#f2c037");
+      setCssVar("dark-page", "#121212");
+    };
+
+    (window as any).setPadTheme = () => {
+      setCssVar("primary", "#0b3536");
+      setCssVar("secondary", "#ffffff");
+      setCssVar("accent", "#2fa39b");
+      setCssVar("dark", "#000000");
+      setCssVar("positive", "#21ba45");
+      setCssVar("negative", "#c10015");
+      setCssVar("info", "#31ccec");
+      setCssVar("warning", "#f2c037");
+      setCssVar("dark-page", "#121212");
+    };
+
    const landspace = () => {
      let landspace = false;
-      if ($q.platform.is.desktop) {
-        landspace = window.innerWidth > innerHeight;
-      } else {
+      landspace = window.innerWidth > innerHeight;
+
+      if ($q.platform.is.ipad) {
        landspace = window.screen.width > window.screen.height;
+
+        if (Math.abs(window.orientation) == 90) {
+          landspace = !landspace;
+        }
+        if (window.location.href.indexOf("___debug_ipad___") != -1) {
+          landspace = !landspace;
+        }
      }
-      if (Math.abs(window.orientation) == 90) {
-        landspace = !landspace;
+      if (window.innerHeight < 600) {
+        // TODO fix android
      }
+      console.log(window.innerWidth);
+      console.log(window.innerHeight);
      return landspace;
    };
    (<any>window).landspace = landspace;
--- a/src/RedirectPage.vue
+++ b/src/RedirectPage.vue
@ -15,7 +15,6 @@ export default defineComponent({
    let $q = useQuasar();
    let $router = useRouter();
    const $store = useStore();
-
    let landspace = $store.state.landspace;

    try {
@ -26,12 +25,7 @@ export default defineComponent({
      ($q.platform.is.mobile && $q.platform.has.touch) ||
      $q.platform.is.ipad
    ) {
-      if (landspace) {
-        $router.push("/pad");
-      } else {
-        // TODO route to mobile
-        $router.push("/pc");
-      }
+      $router.push("/pad");
    } else {
      $router.push("/pc");
    }
--- a/src/components/FileManageDialog.vue
+++ b/src/components/FileManageDialog.vue
@ -71,7 +71,6 @@
          flat
          :label="default_path_label"
          :disable="uploading"
-          class="q-mr-sm"
        >
          <q-list>
            <q-item
@ -177,8 +176,13 @@
        style="width: 70vw; max-height: 85vh"
        class="scroll q-pa-none q-ma-none"
      >
+        {{}}
        <q-table
-          style="height: 68vh"
+          :style="{
+            height:
+              ($q.platform.is.ipad && $store.state.landspace ? '61' : '68') +
+              'vh',
+          }"
          class="q-mb-md"
          v-show="!uploading"
          :rows="files"
--- a/src/css/app.scss
+++ b/src/css/app.scss
@ -2,8 +2,9 @@

 body {
  background-color: #fff;
-  font-family: $font-family;
+  font-family: append(('Microsoft YaHei','微软雅黑','\5FAE\8F6F\96C5\9ED1'), $font-family);
  -webkit-font-smoothing: auto;
+
 }

 strong {
--- a/src/i18n/zh-CN/index.ts
+++ b/src/i18n/zh-CN/index.ts
@ -474,4 +474,6 @@ export default {
  "on the iPad, only Safari supports full screen":
    "在iPad上, 只有Safari浏览器支持全屏",
  "the current browser does not support full screen": "当前浏览器不支持全屏",
+  _SOFT_PAD_LOGIN_TITLE_: "软件管理平台",
+  welcome: "欢迎",
 };
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@ -142,6 +142,7 @@ 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";

 export default defineComponent({
  name: "MainLayout",
@ -149,7 +150,13 @@ export default defineComponent({
  components: { LeftToolBar, RightToolBar, TopToolBar, FooterPortrait },

  setup() {
-    const landspace = window.innerHeight < window.innerWidth;
+    const $store = useStore();
+
+    try {
+      (window as any).setPcTheme();
+    } catch {}
+
+    const landspace = $store.state.landspace;

    let show_left_tool_bar = ref(true);
    let mouse_page_left_flag = ref(false);
--- a/src/pad/Login.vue
+++ b/src/pad/Login.vue
@ -6,31 +6,57 @@
      class="fit"
      style="position: fixed"
    />
+    <div
+      v-if="landspace"
+      class="full-height text-h4 text-white text-center text-weight-bold"
+      style="position: fixed; writing-mode: vertical-lr; left: 56.5%"
+    >
+      <span> {{ $t("welcome") }}{{ $t("login") }} </span>
+    </div>
+    <div
+      v-if="landspace"
+      class="full-height text-h4 text-white text-center text-weight-bold"
+      style="position: fixed; writing-mode: vertical-lr; left: 61.5%"
+    >
+      <span>{{ $t("_SOFT_PAD_LOGIN_TITLE_") }}</span>
+    </div>
+
    <q-page-container>
      <q-page
        class="row items-center"
-        style="position: fixed"
+        style="position: ; /*fixed*/"
        :class="landspace ? '' : 'justify-evenly'"
-        :style="landspace ? { left: '50%' } : {}"
+        :style="landspace ? { left: '11.5%' } : {}"
      >
-        <q-card :style="{ width: (landspace ? 34 : 70) + 'vw' }">
-          <q-card-section class="text-center text-h6">
-            {{ $t("login") }}111
-          </q-card-section>
-          <q-separator />
+        <q-card
+          class="transparent"
+          :style="{
+            width: (landspace ? 40 : 70) + 'vw',
+            top: landspace ? '4vh' : 'unset',
+          }"
+        >
+          <div v-if="!landspace">
+            <q-card-section class="text-center text-h6">
+              <span class="text-accent">
+                {{ $t("login") }}
+              </span>
+            </q-card-section>
+            <q-separator />
+          </div>
          <q-card-section class="fit">
            <q-form ref="login_form" @submit="onSubmit" @reset="onReset">
-              <q-list class="fit">
+              <q-list class="fit text-h6">
                <q-item>
                  <q-item-section>
                    <q-input
                      :autofocus="!data.ip_address"
-                      outlined
                      :loading="data.loading"
                      :disable="data.loading"
                      v-model="data.ip_address"
-                      :label="$t('server ip address')"
-                      :hint="$t('please input server ip address')"
+                      input-class="text-accent text-h6"
+                      color="accent"
+                      :dark="landspace"
+                      :placeholder="$t('please input server ip address')"
                      lazy-rules
                      :rules="[
                        (val) =>
@ -52,7 +78,7 @@
                      "
                    >
                      <template v-slot:prepend>
-                        <q-icon name="img:login/network.png" />
+                        <q-icon name="img:pad/login/server_ip.png" />
                      </template>
                      <template v-if="data.ip_address" v-slot:append>
                        <q-icon
@ -69,13 +95,14 @@
                  <q-item-section>
                    <q-input
                      :autofocus="!data.user_name"
-                      outlined
                      ref="user_name"
                      :loading="data.loading"
                      :disable="data.loading"
                      v-model="data.user_name"
-                      :label="$t('user name')"
-                      :hint="$t('please input user name')"
+                      input-class="text-accent text-h6"
+                      color="accent"
+                      :dark="landspace"
+                      :placeholder="$t('please input user name')"
                      lazy-rules
                      :rules="[
                        (val) =>
@ -91,7 +118,7 @@
                      "
                    >
                      <template v-slot:prepend>
-                        <q-icon name="img:login/user.png" />
+                        <q-icon name="img:pad/login/user.png" />
                      </template>
                      <template v-if="data.user_name" v-slot:append>
                        <q-icon
@ -107,15 +134,16 @@
                <q-item>
                  <q-item-section>
                    <q-input
-                      outlined
                      ref="password_input"
                      :loading="data.loading"
                      :disable="data.loading"
                      :type="data.show_password ? '' : 'password'"
                      v-model="data.password"
-                      :label="$t('password')"
-                      :hint="$t('please input password')"
+                      :placeholder="$t('please input password')"
                      lazy-rules
+                      input-class="text-accent text-h6"
+                      color="accent"
+                      :dark="landspace"
                      :rules="[
                        (val) =>
                          (val && val.length > 0) ||
@ -130,10 +158,11 @@
                      "
                    >
                      <template v-slot:prepend>
-                        <q-icon name="img:login/password.png" />
+                        <q-icon name="img:pad/login/password.png" />
                      </template>
                      <template v-if="data.password" v-slot:append>
                        <q-icon
+                          v-if="show_show_password"
                          :name="
                            data.show_password ? 'visibility' : 'visibility_off'
                          "
@ -154,6 +183,10 @@
                    <q-checkbox
                      :label="$t('remember password')"
                      v-model="remember_password"
+                      color="accent"
+                      class="text-accent"
+                      :dark="landspace"
+                      :disable="data.loading"
                    />
                  </q-item-section>
                  <q-item-section>
@ -161,22 +194,25 @@
                      :label="$t('auto login')"
                      v-model="auto_login"
                      @update:model-value="remember_password = true"
+                      color="accent"
+                      class="text-accent"
+                      :dark="landspace"
+                      :disable="data.loading"
                    />
                  </q-item-section>
                </q-item>
              </q-list>
            </q-form>
          </q-card-section>
-          <q-card-actions class="q-px-lg">
+          <q-card-actions align="center">
            <q-btn
              ref="login_button"
-              class="full-width text-h6"
+              class="text-h5"
+              style="width: 60%"
+              color="accent"
              :loading="data.loading"
              :label="$t('login')"
-              style="
-                background: #273de4;
-                box-shadow: 0 4px 6px 0px rgb(39 60 228 / 40%);
-              "
+              rounded
              text-color="white"
              @click="$refs?.login_form?.submit()"
            />
@ -188,7 +224,15 @@
 </template>

 <script lang="ts">
-import { defineComponent, onMounted, reactive, ref, Ref } from "vue";
+import {
+  defineComponent,
+  onMounted,
+  reactive,
+  ref,
+  Ref,
+  computed,
+  watch,
+} from "vue";

 import GlobalData from "src/common/GlobalData";
 import { Cookies, LocalStorage, SessionStorage, useQuasar } from "quasar";
@ -239,10 +283,16 @@ export default defineComponent({
    const $store = useStore();
    const data = reactive(new _Data());

+    try {
+      (window as any).setPadTheme();
+    } catch {}
+
    const login_form: Ref<any> = ref(null);

    const remember_password = ref(false);
    const auto_login = ref(false);
+    const show_show_password = ref(true);
+
    let cache_password: string | null = null;

    let web_socket: ClientConnection | null = null;
@ -251,7 +301,10 @@ export default defineComponent({
        window.matchMedia("(display-mode: " + displayMode + ")").matches
    );

-    const landspace = ref(window.innerHeight < window.innerWidth);
+    const landspace = computed({
+      get: () => $store.state.landspace,
+      set: (val) => null,
+    });

    EventBus.getInstance().on(EventNamesDefine.WindowResize, () => {
      landspace.value = window.innerHeight < window.innerWidth;
@ -295,8 +348,14 @@ export default defineComponent({
      }
    } catch {}

-    if (auto_login.value) {
-    }
+    watch(
+      () => data.password,
+      () => {
+        show_show_password.value = true;
+      }
+    );
+
+    show_show_password.value = data.password != cache_password;

    return {
      login_form,
@ -305,6 +364,7 @@ export default defineComponent({
      auto_login,
      landspace,
      is_pwa,
+      show_show_password,
      async onSubmit() {
        return new Promise((resolve) => {
          data.loading = true;
--- a/src/pad/MainLayout.vue
+++ b/src/pad/MainLayout.vue
@ -73,8 +73,6 @@

 <script lang="ts">

-    import { setCssVar } from 'quasar'
-
 import { defineComponent, ref } from "vue";

 import TopToolBar from "./TopToolbar.vue";
@ -92,10 +90,9 @@ export default defineComponent({
    (<any>window).isPad = true;   // pad flag
    (<any>window).touchPriority = true // 优先使用触摸事件

-    setCssVar('primary', '#0b3536')
-    setCssVar('secondary', '#ffffff')
-    setCssVar('accent', '#2fa39b')
-    setCssVar('dark', '#000000')
+    try {
+      (window as any).setPadTheme();
+    } catch {}


    EventBus.getInstance().on(EventNamesDefine.CurrentConnectDisconnect, () => {
--- a/src/pad/TopToolbar.vue
+++ b/src/pad/TopToolbar.vue
@ -11,6 +11,7 @@
      flat
      icon="img:pad/toolbar/close_icon.png"
      :label="$t('close')"
+      @click="closeCurrentWindow"
    />

    <q-btn
@ -21,6 +22,7 @@
      flat
      icon="img:pad/toolbar/clean_windows_icon.png"
      :label="$t('clean screen')"
+      @click="closeAllWindows"
    />
    <q-btn
      class="col-auto"
@ -48,6 +50,7 @@
      flat
      icon="img:pad/toolbar/top_window_icon.png"
      :label="$t('top window')"
+      @click="topWindow"
    />
    <q-btn
      class="col-auto"
@ -57,6 +60,7 @@
      flat
      icon="img:pad/toolbar/lower_window_icon.png"
      :label="$t('lower window')"
+      @click="lowerWindow"
    />
    <q-btn
      class="col-auto"
@ -66,6 +70,7 @@
      flat
      icon="img:pad/toolbar/center_control_icon.png"
      :label="$t('center control')"
+      @click="$refs.center_control_dialog.showDialog()"
    />
    <q-btn
      class="col-auto"
@ -75,6 +80,7 @@
      flat
      icon="img:pad/toolbar/power_on_icon.png"
      :label="$t('power on')"
+      @click="powerOn"
    />
    <q-btn
      class="col-auto"
@ -84,6 +90,7 @@
      flat
      icon="img:pad/toolbar/power_off_icon.png"
      :label="$t('power off')"
+      @click="powerOff"
    />
    <q-btn
      stretch
@ -105,6 +112,7 @@
      flat
      icon="img:pad/toolbar/file_upload_icon.png"
      :label="$t('file manage')"
+      @click="$refs.file_manage_dialog.showDialog()"
    />
    <q-btn
      class="col-auto"
@ -114,6 +122,7 @@
      flat
      icon="img:pad/toolbar/wallpaper_icon.png"
      :label="$t('background image')"
+      @click="$refs.background_image_dialog.showDialog()"
    />
    <q-space />
    <q-btn
@ -124,21 +133,34 @@
      flat
      icon="img:pad/toolbar/logout_icon.png"
      :label="$t('logout')"
+      @click="logout"
    />
  </q-toolbar>
+
+  <background-image-dialog ref="background_image_dialog" />
+  <file-manage-dialog ref="file_manage_dialog" />
+  <center-control-dialog ref="center_control_dialog" />
 </template>

 <script lang="ts">
 import { defineComponent, Ref, ref, computed } from "vue";
-import { useQuasar } from "quasar";
+import { Cookies, SessionStorage, useQuasar } from "quasar";
 import { useI18n } from "vue-i18n";
 import { useStore } from "src/store";
+import BackgroundImageDialog from "src/components/BackgroundImageDialog.vue";
+import FileManageDialog from "src/components/FileManageDialog.vue";
+import CenterControlDialog from "src/components/CenterControlDialog.vue";

 import { AppFullscreen } from "quasar";
+import GlobalData from "src/common/GlobalData";

 export default defineComponent({
  name: "PadTopToolbarPage",
-  components: {},
+  components: {
+    BackgroundImageDialog,
+    FileManageDialog,
+    CenterControlDialog,
+  },
  setup() {
    const $store = useStore();
    const $q = useQuasar();
@ -180,6 +202,115 @@ export default defineComponent({
          });
        }
      },
+      stopPlan() {
+        GlobalData.getInstance().getCurrentClient()?.stopCurrentRunningPlan();
+      },
+      topWindow() {
+        const window = $store.state.windows.find(
+          (element) => element && element.uuid == $store.state.selected_window
+        );
+        if (window) {
+          GlobalData.getInstance()
+            .getCurrentClient()
+            ?.focusIn(window.window_id);
+        }
+      },
+      lowerWindow() {
+        const window = $store.state.windows.find(
+          (element) => element && element.uuid == $store.state.selected_window
+        );
+        if (window) {
+          GlobalData.getInstance()
+            .getCurrentClient()
+            ?.lowerWindow(window.window_id);
+        }
+      },
+      closeCurrentWindow() {
+        const window = $store.state.windows.find(
+          (element) => element && element.uuid == $store.state.selected_window
+        );
+        if (window) {
+          GlobalData.getInstance()
+            .getCurrentClient()
+            ?.closeWindow(window.window_id);
+        }
+      },
+      closeAllWindows() {
+        // for (const window of $store.state.windows) {
+        //   if (window) {
+        //     GlobalData.getInstance()
+        //       .getCurrentClient()
+        //       ?.closeWindow(window.window_id);
+        //   }
+        // }
+        GlobalData.getInstance().getCurrentClient()?.closeWindow(-1);
+      },
+      switchLanguage() {
+        let language = Cookies.get("language");
+        if (!language) {
+          language = "zh-CN";
+        }
+
+        if (language != "zh-CN" && language != "en-US") {
+          language = "zh-CN";
+        } else {
+          language = language == "zh-CN" ? "en-US" : "zh-CN";
+        }
+        Cookies.set("language", language);
+        window.location.reload();
+      },
+      logout() {
+        const w = window as any;
+        if (w.controlLogout && typeof w.controlLogout == "function") {
+          w.controlLogout();
+        } else {
+          Cookies.remove("auto_login");
+          SessionStorage.clear();
+          window.location.reload();
+        }
+      },
+      async powerOff() {
+        let success = false;
+        try {
+          const response = await GlobalData.getInstance()
+            .getCurrentClient()
+            ?.deviceStandByMode();
+          if (response) {
+            success = response?.success ?? false;
+          }
+        } catch {}
+        $q.notify({
+          color: success ? "positive" : "negative",
+          icon: success ? "done" : "warning",
+          message:
+            $t.t("send power off command") +
+            (success ? $t.t("success") : $t.t("fail")) +
+            "!",
+          position: "top",
+          timeout: 1500,
+        });
+      },
+      async powerOn() {
+        let success = false;
+        try {
+          const response = await GlobalData.getInstance()
+            .getCurrentClient()
+            ?.wakeUpDevice();
+          if (response) {
+            success = response?.success ?? false;
+          }
+        } catch {}
+        $q.notify({
+          color: success ? "positive" : "negative",
+          icon: success ? "done" : "warning",
+          message:
+            $t.t("send power on command") +
+            (success ? $t.t("success") : $t.t("fail")) +
+            "!",
+          position: "top",
+          timeout: 1500,
+        });
+      },
    };
  },
 });
--- a/src/pages/Login.vue
+++ b/src/pages/Login.vue
@ -9,7 +9,7 @@
    <q-page-container>
      <q-page
        class="row items-center"
-        style="position: fixed"
+        style="position: ; /*fixed*/"
        :class="landspace ? '' : 'justify-evenly'"
        :style="landspace ? { left: '50%' } : {}"
      >
@ -154,6 +154,7 @@
                    <q-checkbox
                      :label="$t('remember password')"
                      v-model="remember_password"
+                      :disable="data.loading"
                    />
                  </q-item-section>
                  <q-item-section>
@ -161,6 +162,7 @@
                      :label="$t('auto login')"
                      v-model="auto_login"
                      @update:model-value="remember_password = true"
+                      :disable="data.loading"
                    />
                  </q-item-section>
                </q-item>
@ -188,7 +190,7 @@
 </template>

 <script lang="ts">
-import { defineComponent, onMounted, reactive, ref, Ref } from "vue";
+import { defineComponent, onMounted, reactive, ref, Ref, computed } from "vue";

 import GlobalData from "src/common/GlobalData";
 import { Cookies, LocalStorage, SessionStorage, useQuasar } from "quasar";
@ -239,6 +241,10 @@ export default defineComponent({
    const $store = useStore();
    const data = reactive(new _Data());

+    try {
+      (window as any).setPcTheme();
+    } catch {}
+
    const login_form: Ref<any> = ref(null);

    const remember_password = ref(false);
@ -251,7 +257,10 @@ export default defineComponent({
        window.matchMedia("(display-mode: " + displayMode + ")").matches
    );

-    const landspace = ref(window.innerHeight < window.innerWidth);
+    const landspace = computed({
+      get: () => $store.state.landspace,
+      set: (val) => null,
+    });

    EventBus.getInstance().on(EventNamesDefine.WindowResize, () => {
      landspace.value = window.innerHeight < window.innerWidth;
@ -295,9 +304,6 @@ export default defineComponent({
      }
    } catch {}

-    if (auto_login.value) {
-    }
-
    return {
      login_form,
      data,
--- a/src/store/index.ts
+++ b/src/store/index.ts
@ -305,7 +305,7 @@ export default store(function (/* { ssrContext } */) {
      plans: [],
      pollings: [],
      signal_sources: [],
-      landspace: false,
+      landspace: window.innerWidth > window.innerHeight,
    },

    mutations: {