@fmdevui/fm-dev
Version:
Page level components developed based on Element Plus.
421 lines (418 loc) • 16.2 kB
JavaScript
import { defineComponent, ref, reactive, nextTick, onMounted, onUnmounted, resolveComponent, withDirectives, openBlock, createElementBlock, createElementVNode, normalizeClass, createVNode, withModifiers, createTextVNode, toDisplayString, Transition, withCtx, unref, withKeys, vShow } from 'vue';
import { storeToRefs } from 'pinia';
import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n';
import '../../stores/index.mjs';
import { sm2 } from 'sm-crypto-v2';
import { loadSysInfo } from '../../utils/comm/sysInfo.mjs';
import '../../utils/index.mjs';
import '../../api/index.mjs';
import { useThemeConfig } from '../../stores/themeConfig.mjs';
import { useUserInfo } from '../../stores/userInfo.mjs';
import { formatDate } from '../../utils/comm/formatTime.mjs';
import { Local } from '../../utils/storage/index.mjs';
import { useSysApi, feature } from '../../api/sys/index.mjs';
const _hoisted_1 = { class: "layout-lock-screen" };
const _hoisted_2 = { class: "layout-lock-screen-date-box" };
const _hoisted_3 = { class: "layout-lock-screen-date-box-time" };
const _hoisted_4 = { class: "layout-lock-screen-date-box-minutes" };
const _hoisted_5 = { class: "layout-lock-screen-date-box-info" };
const _hoisted_6 = { class: "layout-lock-screen-date-top" };
const _hoisted_7 = { class: "layout-lock-screen-date-top-text" };
const _hoisted_8 = { class: "layout-lock-screen-login" };
const _hoisted_9 = { class: "layout-lock-screen-login-box" };
const _hoisted_10 = { class: "layout-lock-screen-login-box-img" };
const _hoisted_11 = ["src"];
const _hoisted_12 = { class: "layout-lock-screen-login-box-name" };
const _hoisted_13 = {
key: 0,
class: "layout-lock-screen-login-box-message"
};
const _hoisted_14 = {
key: 1,
class: "layout-lock-screen-login-box-value"
};
const _hoisted_15 = { class: "layout-lock-screen-login-icon" };
var _sfc_main = /* @__PURE__ */ defineComponent({
__name: "index",
setup(__props) {
const { t } = useI18n();
const needPassword = ref("");
needPassword.value = t("message.layout.needPassword");
const layoutLockScreenDateRef = ref();
const layoutLockScreenInputRef = ref();
const storesThemeConfig = useThemeConfig();
const { themeConfig } = storeToRefs(storesThemeConfig);
const storesUserInfo = useUserInfo();
const { userInfos } = storeToRefs(storesUserInfo);
const state = reactive({
transparency: 1,
downClientY: 0,
moveDifference: 0,
isShowLoockLogin: false,
isFlags: false,
querySelectorEl: "",
time: {
hm: "",
s: "",
mdq: ""
},
setIntervalTime: 0,
isShowLockScreen: false,
isShowLockScreenIntervalTime: 0,
lockScreenPassword: "",
message: "",
showMessage: false,
isShowPassword: false
});
const route = useRoute();
const onDownPc = (down) => {
state.isFlags = true;
state.downClientY = down.clientY;
};
const onDownApp = (down) => {
state.isFlags = true;
state.downClientY = down.touches[0].clientY;
};
const onMovePc = (move) => {
state.moveDifference = move.clientY - state.downClientY;
onMove();
};
const onMoveApp = (move) => {
state.moveDifference = move.touches[0].clientY - state.downClientY;
onMove();
};
const onMove = () => {
if (state.isFlags) {
const el = state.querySelectorEl;
const opacitys = state.transparency -= 1 / 200;
if (state.moveDifference >= 0) return false;
el.setAttribute("style", `top:${state.moveDifference}px;cursor:pointer;opacity:${opacitys};`);
if (state.moveDifference < -400) {
el.setAttribute("style", `top:${-el.clientHeight}px;cursor:pointer;transition:all 0.3s ease;`);
state.moveDifference = -el.clientHeight;
setTimeout(() => {
el && el.parentNode?.removeChild(el);
}, 300);
}
if (state.moveDifference === -el.clientHeight) {
state.isShowLoockLogin = true;
layoutLockScreenInputRef.value.focus();
}
}
};
const onEnd = () => {
state.isFlags = false;
state.transparency = 1;
if (state.moveDifference >= -400) {
state.querySelectorEl.setAttribute("style", `top:0px;opacity:1;transition:all 0.3s ease;`);
}
};
const initGetElement = () => {
nextTick(() => {
state.querySelectorEl = layoutLockScreenDateRef.value;
});
};
const initTime = () => {
state.time.hm = formatDate(/* @__PURE__ */ new Date(), "HH:MM");
state.time.s = formatDate(/* @__PURE__ */ new Date(), "SS");
state.time.mdq = formatDate(/* @__PURE__ */ new Date(), "mm-dd\uFF0CWWW");
};
const initSetTime = () => {
initTime();
state.setIntervalTime = window.setInterval(() => {
initTime();
}, 1e3);
};
const initLockScreen = () => {
if (themeConfig.value.isLockScreen) {
state.isShowLockScreenIntervalTime = window.setInterval(() => {
if (themeConfig.value.lockScreenTime == null) {
themeConfig.value.lockScreenTime = 300;
setLocalThemeConfig();
return false;
}
if (themeConfig.value.lockScreenTime <= 1) {
state.isShowLockScreen = true;
setLocalThemeConfig();
return false;
}
themeConfig.value.lockScreenTime--;
}, 1e3);
} else {
clearInterval(state.isShowLockScreenIntervalTime);
}
};
const setLocalThemeConfig = () => {
themeConfig.value.isDrawer = false;
Local.set("themeConfig", themeConfig.value);
};
const onLockScreenSubmit = async () => {
if (state.lockScreenPassword) {
try {
if (userInfos.value.account === void 0) {
themeConfig.value.isLockScreen = false;
themeConfig.value.lockScreenTime = 300;
setLocalThemeConfig();
return;
}
var publicKey = window.__env__.VITE_SM_PUBLIC_KEY;
if (publicKey == "") {
var res1 = await useSysApi().getSmPublicKey();
publicKey = window.__env__.VITE_SM_PUBLIC_KEY = res1.data.result ?? "";
}
const password = sm2.doEncrypt(state.lockScreenPassword, publicKey, 1);
const [err, res] = await feature(useSysApi().unLockScreen(password));
if (err) {
state.message = err.message;
state.showMessage = true;
state.lockScreenPassword = "";
return;
}
if (res.data.result) {
themeConfig.value.isLockScreen = false;
themeConfig.value.lockScreenTime = 300;
setLocalThemeConfig();
}
} catch (ex) {
state.message = `\u51FA\u9519\u4E86:${ex}`;
state.showMessage = true;
}
}
};
const hideMessage = () => {
state.showMessage = false;
nextTick(() => {
layoutLockScreenInputRef.value.focus();
});
};
onMounted(async () => {
initGetElement();
initSetTime();
initLockScreen();
var tenantid = Number(route.query.tid);
if (isNaN(tenantid)) {
tenantid = 0;
} else if (tenantid > 99999) {
Local.set("tid", tenantid);
}
await loadSysInfo(tenantid);
document.onkeydown = (e) => {
if (e.key === "Enter") {
if (state.isShowLoockLogin == false) {
const moveInterval = setInterval(() => {
state.isFlags = true;
state.moveDifference = state.moveDifference - 10;
onMove();
if (state.moveDifference < -410 && moveInterval) clearInterval(moveInterval);
}, 5);
}
if (state.showMessage == true) hideMessage();
}
};
});
onUnmounted(() => {
window.clearInterval(state.setIntervalTime);
window.clearInterval(state.isShowLockScreenIntervalTime);
});
return (_ctx, _cache) => {
const _component_SvgIcon = resolveComponent("SvgIcon");
const _component_el_button = resolveComponent("el-button");
const _component_ele_Right = resolveComponent("ele-Right");
const _component_el_icon = resolveComponent("el-icon");
const _component_el_input = resolveComponent("el-input");
return withDirectives((openBlock(), createElementBlock(
"div",
null,
[
_cache[3] || (_cache[3] = createElementVNode(
"div",
{ class: "layout-lock-screen-mask" },
null,
-1
/* CACHED */
)),
createElementVNode(
"div",
{
class: normalizeClass(["layout-lock-screen-img", { "layout-lock-screen-filter": state.isShowLoockLogin }])
},
null,
2
/* CLASS */
),
createElementVNode("div", _hoisted_1, [
createElementVNode(
"div",
{
class: "layout-lock-screen-date",
ref_key: "layoutLockScreenDateRef",
ref: layoutLockScreenDateRef,
onMousedown: onDownPc,
onMousemove: onMovePc,
onMouseup: onEnd,
onTouchstart: withModifiers(onDownApp, ["stop"]),
onTouchmove: withModifiers(onMoveApp, ["stop"]),
onTouchend: withModifiers(onEnd, ["stop"])
},
[
createElementVNode("div", _hoisted_2, [
createElementVNode("div", _hoisted_3, [
createTextVNode(
toDisplayString(state.time.hm),
1
/* TEXT */
),
createElementVNode(
"span",
_hoisted_4,
toDisplayString(state.time.s),
1
/* TEXT */
)
]),
createElementVNode(
"div",
_hoisted_5,
toDisplayString(state.time.mdq),
1
/* TEXT */
)
]),
createElementVNode("div", _hoisted_6, [
createVNode(_component_SvgIcon, { name: "ele-Top" }),
createElementVNode(
"div",
_hoisted_7,
toDisplayString(_ctx.$t("message.layout.unlock")),
1
/* TEXT */
)
])
],
544
/* NEED_HYDRATION, NEED_PATCH */
),
createVNode(Transition, {
name: "el-zoom-in-center",
persisted: ""
}, {
default: withCtx(() => [
withDirectives(createElementVNode(
"div",
_hoisted_8,
[
createElementVNode("div", _hoisted_9, [
createElementVNode("div", _hoisted_10, [
createElementVNode("img", {
src: unref(userInfos).avatar || "https://img2.baidu.com/it/u=1978192862,2048448374&fm=253&fmt=auto&app=138&f=JPEG?w=504&h=500"
}, null, 8, _hoisted_11)
]),
createElementVNode(
"div",
_hoisted_12,
toDisplayString(unref(userInfos).account),
1
/* TEXT */
),
state.showMessage ? (openBlock(), createElementBlock("div", _hoisted_13, [
createElementVNode(
"span",
null,
toDisplayString(state.message),
1
/* TEXT */
),
createVNode(_component_el_button, {
style: { "max-width": "80px", "margin-top": "20px" },
size: "default",
onClick: hideMessage
}, {
default: withCtx(() => [
createTextVNode(
toDisplayString(_ctx.$t("message.layout.confirm")),
1
/* TEXT */
)
]),
_: 1
/* STABLE */
})
])) : (openBlock(), createElementBlock("div", _hoisted_14, [
createVNode(_component_el_input, {
placeholder: needPassword.value,
type: state.isShowPassword ? "text" : "password",
ref_key: "layoutLockScreenInputRef",
ref: layoutLockScreenInputRef,
size: "default",
modelValue: state.lockScreenPassword,
"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => state.lockScreenPassword = $event),
onKeyup: _cache[2] || (_cache[2] = withKeys(withModifiers(($event) => onLockScreenSubmit(), ["stop"]), ["enter", "native"]))
}, {
append: withCtx(() => [
createVNode(_component_el_button, { onClick: onLockScreenSubmit }, {
default: withCtx(() => [
createVNode(_component_el_icon, { class: "el-input__icon" }, {
default: withCtx(() => [
createVNode(_component_ele_Right)
]),
_: 1
/* STABLE */
})
]),
_: 1
/* STABLE */
})
]),
suffix: withCtx(() => [
createElementVNode(
"i",
{
class: normalizeClass(["iconfont el-input__icon login-content-password", state.isShowPassword ? "icon-yincangmima" : "icon-xianshimima"]),
onClick: _cache[0] || (_cache[0] = ($event) => state.isShowPassword = !state.isShowPassword)
},
null,
2
/* CLASS */
)
]),
_: 1
/* STABLE */
}, 8, ["placeholder", "type", "modelValue"])
]))
]),
createElementVNode("div", _hoisted_15, [
createVNode(_component_SvgIcon, {
name: "ele-Microphone",
size: 20
}),
createVNode(_component_SvgIcon, {
name: "ele-AlarmClock",
size: 20
}),
createVNode(_component_SvgIcon, {
name: "ele-SwitchButton",
size: 20
})
])
],
512
/* NEED_PATCH */
), [
[vShow, state.isShowLoockLogin]
])
]),
_: 1
/* STABLE */
})
])
],
512
/* NEED_PATCH */
)), [
[vShow, state.isShowLockScreen]
]);
};
}
});
export { _sfc_main as default };