lingling
/
media_player_client
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

This commit is contained in:
fangxiang 2022-04-21 15:12:00 +08:00
parent 206512bdd0
commit 07cc68e1e9
14 changed files with 297 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/pad/login/password.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.6 KiB

BIN
public/pad/login/server_ip.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
public/pad/login/user.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

41
src/App.vue
View File

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

6
src/RedirectPage.vue
View File

@ -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");
}
} else {
$router.push("/pc");
}

8
src/components/FileManageDialog.vue
View File

@ -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"

3
src/css/app.scss
View File

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

2
src/i18n/zh-CN/index.ts
View File

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

9
src/layouts/MainLayout.vue
View File

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

112
src/pad/Login.vue
View File

@ -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
class="transparent"
:style="{
width: (landspace ? 40 : 70) + 'vw',
top: landspace ? '4vh' : 'unset',
}"
>
<div v-if="!landspace">
<q-card-section class="text-center text-h6">
{{ $t("login") }}111
<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;

9
src/pad/MainLayout.vue
View File

@ -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, () => {

135
src/pad/TopToolbar.vue
View File

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

18
src/pages/Login.vue
View File

@ -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,

2
src/store/index.ts
View File

@ -305,7 +305,7 @@ export default store(function (/* { ssrContext } */) {
plans: [],
pollings: [],
signal_sources: [],
landspace: false,
landspace: window.innerWidth > window.innerHeight,
},
mutations: {