chore: 🔨 移除TypeScript Vue Plugin扩展

.vscode/extensions.json

@@ -1,7 +1,6 @@
 {
  "recommendations": [
  "vue.volar",
- "vue.vscode-typescript-vue-plugin",
  "hollowtree.vue-snippets",
  "dbaeumer.vscode-eslint",
  "stylelint.vscode-stylelint",

src/hooks/useLockPage.ts

@@ -0,0 +1,74 @@
+import { computed, onUnmounted, unref, watchEffect } from "vue"; // 导入Vue的响应式函数和侦听函数
+import { useThrottleFn } from "@vueuse/core"; // 导入节流函数
+
+import { useGlobalStore } from "@/stores/modules/global"; // 导入应用设置相关的store
+import { useUserStore } from "@/stores/modules/user"; // 导入用户信息相关的store
+import { useLockStore } from "@/stores/modules/lock"; // 导入锁定状态相关的store
+
+export const useLockPage = () => {
+ const lockStore = useLockStore(); // 使用锁定状态的store
+ const userStore = useUserStore(); // 使用用户信息的store
+ const GlobalState = useGlobalStore(); // 使用应用设置的store
+
+ let timeId: any; // 定义一个用于存储定时器id的变量
+
+ function clear(): void {
+ // 定义一个清除定时器的函数
+ window.clearTimeout(timeId); // 清除定时器
+ }
+
+ function resetCalcLockTimeout(): void {
+ // 重新计算锁定超时时间的函数
+ // 如果用户未登录，则清除定时器并返回
+ if (!userStore.token) {
+ clear();
+ return;
+ }
+ // 获取应用设置中的锁定时间
+ const lockTime = GlobalState.lockTime;
+ // 如果锁定时间未设置或小于1分钟，则清除定时器并返回
+ if (!lockTime || lockTime < 1) {
+ clear();
+ return;
+ }
+ // 清除定时器
+ clear();
+ // 设置新的定时器，当超时时执行锁定页面操作
+ timeId = setTimeout(
+ () => {
+ lockStore.setLock();
+ },
+ lockTime * 60 * 1000
+ ); // 将锁定时间转换为毫秒
+ }
+
+ // 通过watchEffect侦听登录状态的变化，触发重新计算锁定超时时间
+ watchEffect(onClean => {
+ if (userStore.token) {
+ resetCalcLockTimeout(); // 如果用户已登录，则重新计算锁定超时时间
+ } else {
+ clear(); // 如果用户未登录，则清除定时器
+ }
+ onClean(() => {
+ clear(); // 组件卸载时清除定时器
+ });
+ });
+
+ // 组件卸载时清除定时器
+ onUnmounted(() => {
+ clear();
+ });
+
+ // 使用节流函数对重新计算锁定超时时间的函数进行节流处理
+ const keyupFn = useThrottleFn(resetCalcLockTimeout, 2000); // 在2000ms内只允许执行一次
+
+ return computed(() => {
+ const lockTime = GlobalState.lockTime; // 获取应用设置中的锁定时间
+ if (unref(lockTime)) {
+ return { onKeyup: keyupFn, onMousemove: keyupFn }; // 如果锁定时间存在，则返回对应的事件处理函数
+ } else {
+ clear(); // 如果锁定时间不存在，则清除定时器
+ return {}; // 返回空对象
+ }
+ });
+};

src/layouts/components/Header/ToolBarRight.vue

@@ -7,6 +7,7 @@
  <ThemeSetting id="themeSetting" />
  <Message id="message" />
  <Fullscreen id="fullscreen" />
+ <LockScreen id="lockScreen" />
  </div>
  <span class="username">{{ username }}</span>
  <Avatar />
@@ -22,6 +23,7 @@ import SearchMenu from "./components/SearchMenu.vue";
 import ThemeSetting from "./components/ThemeSetting.vue";
 import Message from "./components/Message.vue";
 import Fullscreen from "./components/Fullscreen.vue";
+import LockScreen from "../LockScreen/index.vue";
 import Avatar from "./components/Avatar.vue";
 
 const userStore = useUserStore();

src/layouts/components/Header/components/Avatar.vue

@@ -29,12 +29,14 @@ import { LOGIN_URL } from "@/config";
 import { useRouter } from "vue-router";
 import { logoutApi } from "@/api/modules/login";
 import { useUserStore } from "@/stores/modules/user";
+import { useLockStore } from "@/stores/modules/lock";
 import { ElMessageBox, ElMessage } from "element-plus";
 import InfoDialog from "./InfoDialog.vue";
 import PasswordDialog from "./PasswordDialog.vue";
 
 const router = useRouter();
 const userStore = useUserStore();
+const lockStore = useLockStore();
 
 // 退出登录
 const logout = () => {
@@ -49,6 +51,9 @@ const logout = () => {
  // 2.清除 Token
  userStore.setToken("");
 
+ // 清除锁屏
+ lockStore.resetLock();
+
  // 3.重定向到登陆页
  router.replace(LOGIN_URL);
  ElMessage.success("退出登录成功！");

src/layouts/components/LockScreen/LockDialog.vue

@@ -0,0 +1,57 @@
+<template>
+ <el-dialog v-model="dialogVisible" title="锁定屏幕" width="500px" draggable>
+ <el-form :model="form" ref="formRef" :rules="rules" label-width="auto">
+ <el-form-item label="锁屏密码" prop="password">
+ <el-input v-model="form.password" type="password" placeholder="请输入锁屏密码" show-password></el-input>
+ </el-form-item>
+ </el-form>
+ <template #footer>
+ <span class="dialog-footer">
+ <el-button @click="dialogVisible = false">取消</el-button>
+ <el-button type="primary" :loading="loading" @click="handleLock(formRef)">确认</el-button>
+ </span>
+ </template>
+ </el-dialog>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, nextTick } from "vue";
+import type { FormInstance, FormRules } from "element-plus";
+import { useLockStore } from "@/stores/modules/lock";
+
+const lockStore = useLockStore();
+
+const dialogVisible = ref(false);
+const formRef = ref<FormInstance>();
+const form = reactive({
+ password: ""
+});
+const rules = reactive<FormRules<RuleForm>>({
+ password: [{ required: true, message: "请输入锁屏密码", trigger: "blur" }]
+});
+
+const openDialog = () => {
+ form.password = "";
+ dialogVisible.value = true;
+ nextTick(() => {
+ formRef.value?.clearValidate();
+ });
+};
+
+const loading = ref(false);
+const handleLock = (formEl: FormInstance | undefined) => {
+ if (!formEl) return;
+ formEl.validate(async valid => {
+ if (!valid) return;
+ loading.value = true;
+ try {
+ await lockStore.setLock(form.password);
+ dialogVisible.value = false;
+ } finally {
+ loading.value = false;
+ }
+ });
+};
+
+defineExpose({ openDialog });
+</script>

src/layouts/components/LockScreen/LockPage.vue

@@ -0,0 +1,160 @@
+<template>
+ <div class="lock-page">
+ <div class="lock flx-center">
+ <div>翻页时钟</div>
+ <div class="unlock-btn flx-center common" @click="handleLock">
+ <el-icon><Lock /></el-icon>
+ <p>点击屏幕解锁</p>
+ </div>
+ </div>
+ <div v-show="!isLock" class="unlock flx-center common" @click="isLock = true">
+ <el-form :model="form" ref="formRef" :rules="rules" class="flx-center" @click.stop="">
+ <el-avatar :size="64" :src="avatar" />
+ <p>{{ username }}</p>
+ <el-form-item prop="password">
+ <el-input v-model="form.password" type="password" placeholder="请输入锁屏密码或者用户密码" show-password></el-input>
+ </el-form-item>
+ <el-form-item>
+ <el-button type="primary" style="width: 100%" :loading="loading" @click="handleUnlock(formRef)">进入系统</el-button>
+ </el-form-item>
+ <el-form-item>
+ <el-button type="primary" link @click="isLock = true">返回</el-button>
+ <el-button type="primary" link @click="handleLogin">重新登录</el-button>
+ </el-form-item>
+ </el-form>
+ </div>
+ </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, reactive, nextTick, onMounted } from "vue";
+import { useRouter } from "vue-router";
+import { useUserStore } from "@/stores/modules/user";
+import { useLockStore } from "@/stores/modules/lock";
+import defaultAvatar from "@/assets/images/avatar.gif";
+import { logoutApi } from "@/api/modules/login";
+import { LOGIN_URL } from "@/config";
+import { ElMessageBox, ElMessage } from "element-plus";
+import type { FormInstance, FormRules } from "element-plus";
+
+const router = useRouter();
+const userStore = useUserStore();
+const lockStore = useLockStore();
+
+const isLock = ref(true);
+
+const avatar = computed(() => userStore?.userInfo?.avatar || defaultAvatar);
+const username = computed(() => userStore?.userInfo.name);
+
+const formRef = ref<FormInstance>();
+const form = reactive({
+ password: ""
+});
+const rules = reactive<FormRules<typeof form>>({
+ password: [{ required: true, message: "请输入锁屏密码", trigger: "blur" }]
+});
+
+// 锁屏
+const handleLock = () => {
+ isLock.value = false;
+ form.password = "";
+ nextTick(() => {
+ formRef.value?.clearValidate();
+ });
+};
+
+// 解锁
+const loading = ref(false);
+const handleUnlock = (formEl: FormInstance | undefined) => {
+ if (!formEl) return;
+ formEl.validate(async valid => {
+ if (!valid) return;
+ loading.value = true;
+ try {
+ await lockStore.unLock(form.password);
+ } finally {
+ loading.value = false;
+ }
+ });
+};
+
+// 重新登录
+const handleLogin = () => {
+ ElMessageBox.confirm("您是否确认重新登录?", "温馨提示", {
+ confirmButtonText: "确定",
+ cancelButtonText: "取消",
+ type: "warning"
+ }).then(async () => {
+ // 1.执行退出登录接口
+ await logoutApi();
+
+ // 2.清除 Token
+ userStore.setToken("");
+
+ // 清除锁屏
+ lockStore.resetLock();
+
+ // 3.重定向到登陆页
+ router.replace(LOGIN_URL);
+ ElMessage.success("退出登录成功，请重新登录！");
+ });
+};
+
+onMounted(() => {
+ // 监听 enter 事件（调用解锁）
+ document.onkeydown = (e: KeyboardEvent) => {
+ e = (window.event as KeyboardEvent) || e;
+ if (e.code === "Enter" || e.code === "enter" || e.code === "NumpadEnter") {
+ if (loading.value) return;
+ handleUnlock(formRef.value);
+ }
+ };
+});
+</script>
+
+<style scoped lang="scss">
+.lock-page {
+ height: 100%;
+ .lock {
+ height: 100%;
+ &:hover {
+ .unlock-btn {
+ cursor: pointer;
+ opacity: 1;
+ }
+ }
+ .unlock-btn {
+ opacity: 0;
+ .el-icon {
+ font-size: 50px;
+ }
+ }
+ }
+ .unlock {
+ backdrop-filter: blur(8px);
+ .el-form {
+ flex-direction: column;
+ width: 300px;
+ padding: 30px;
+ background-color: var(--el-bg-color);
+ border-radius: 10px;
+ :deep(.el-form-item) {
+ width: 100%;
+ .el-form-item__content {
+ display: flex;
+ justify-content: space-between;
+ }
+ }
+ }
+ }
+ .common {
+ position: absolute;
+ top: 0;
+ left: 0;
+ flex-direction: column;
+ width: 100%;
+ height: 100%;
+ background-color: rgb(0 0 0 / 50%);
+ }
+}
+</style>

src/layouts/components/LockScreen/index.vue

@@ -0,0 +1,27 @@
+<template>
+ <div class="lock-screen flx-align-center">
+ <el-icon @click="openDialog"><Lock /></el-icon>
+ <!-- 锁定屏幕弹窗 -->
+ <LockDialog ref="lockDialogRef"></LockDialog>
+ </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import LockDialog from "./LockDialog.vue";
+
+const lockDialogRef = ref<InstanceType<typeof LockDialog> | null>(null);
+const openDialog = () => {
+ lockDialogRef.value?.openDialog();
+};
+</script>
+
+<style scoped lang="scss">
+.lock-screen {
+ .el-icon {
+ font-size: 20px;
+ color: var(--el-header-text-color);
+ cursor: pointer;
+ }
+}
+</style>