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

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;
-        landspace = window.innerWidth > innerHeight;
+
-      } else {
+      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) {
+      if (window.innerHeight < 600) {
-        landspace = !landspace;
+        // TODO fix android
       }
+      console.log(window.innerWidth);
+      console.log(window.innerHeight);
       return landspace;
     };
     (<any>window).landspace = landspace;

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");
-        $router.push("/pad");
-      } else {
-        // TODO route to mobile
-        $router.push("/pc");
-      }
     } else {
       $router.push("/pc");
     }

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"

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 {

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: "欢迎",
 };

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

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
-          <q-card-section class="text-center text-h6">
+          class="transparent"
-            {{ $t("login") }}111
+          :style="{
-          </q-card-section>
+            width: (landspace ? 40 : 70) + 'vw',
-          <q-separator />
+            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')"
+                      input-class="text-accent text-h6"
-                      :hint="$t('please input server ip address')"
+                      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')"
+                      input-class="text-accent text-h6"
-                      :hint="$t('please input user name')"
+                      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')"
+                      :placeholder="$t('please input password')"
-                      :hint="$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="
+              rounded
-                background: #273de4;
-                box-shadow: 0 4px 6px 0px rgb(39 60 228 / 40%);
-              "
               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;

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')
+    try {
-    setCssVar('secondary', '#ffffff')
+      (window as any).setPadTheme();
-    setCssVar('accent', '#2fa39b')
+    } catch {}
-    setCssVar('dark', '#000000')
 
 
     EventBus.getInstance().on(EventNamesDefine.CurrentConnectDisconnect, () => {

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,
+        });
+      },
     };
   },
 });

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,

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: {