Revert "refactor: 移除锁屏功能相关代码"

This reverts commit e002e45f82.

web/src/App.vue

@@ -1,5 +1,6 @@
 <template>
   <NConfigProvider
+    v-if="!isLock"
     :locale="zhCN"
     :theme="getDarkTheme"
     :theme-overrides="getThemeOverrides"
@@ -9,16 +10,27 @@
       <RouterView />
     </AppProvider>
   </NConfigProvider>
+
+  <transition v-if="isLock && $route.name !== 'login'" name="slide-up">
+    <LockScreen />
+  </transition>
 </template>
 
 <script lang="ts" setup>
-  import { computed } from 'vue';
+  import { computed, onMounted, onUnmounted } from 'vue';
   import { zhCN, dateZhCN, darkTheme } from 'naive-ui';
+  import { LockScreen } from '@/components/Lockscreen';
   import { AppProvider } from '@/components/Application';
+  import { useLockscreenStore } from '@/store/modules/lockscreen';
+  import { useRoute } from 'vue-router';
   import { useDesignSettingStore } from '@/store/modules/designSetting';
   import { lighten } from '@/utils';
 
+  const route = useRoute();
+  const useLockscreen = useLockscreenStore();
   const designStore = useDesignSettingStore();
+  const isLock = computed(() => useLockscreen.isLock);
+  const lockTime = computed(() => useLockscreen.lockTime);
 
   /**
    * @type import('naive-ui').GlobalThemeOverrides
@@ -43,6 +55,34 @@
   });
 
   const getDarkTheme = computed(() => (designStore.darkTheme ? darkTheme : undefined));
+
+  let timer;
+
+  const timekeeping = () => {
+    clearInterval(timer);
+    if (route.name == 'login' || isLock.value) return;
+    // 设置不锁屏
+    useLockscreen.setLock(false);
+    // 重置锁屏时间
+    useLockscreen.setLockTime();
+    timer = setInterval(() => {
+      // 锁屏倒计时递减
+      useLockscreen.setLockTime(lockTime.value - 1);
+      if (lockTime.value <= 0) {
+        // 设置锁屏
+        useLockscreen.setLock(true);
+        return clearInterval(timer);
+      }
+    }, 1000);
+  };
+
+  onMounted(() => {
+    document.addEventListener('mousedown', timekeeping);
+  });
+
+  onUnmounted(() => {
+    document.removeEventListener('mousedown', timekeeping);
+  });
 </script>
 
 <style lang="less">

web/src/components/Lockscreen/Lockscreen.vue

@@ -0,0 +1,315 @@
+<template>
+  <div
+    :class="{ onLockLogin: showLogin }"
+    class="lockscreen"
+    @keyup="onLockLogin(true)"
+    @mousedown.stop
+    @contextmenu.prevent
+  >
+    <template v-if="!showLogin">
+      <div class="lock-box">
+        <div class="lock">
+          <span class="lock-icon" title="解锁屏幕" @click="onLockLogin(true)">
+            <n-icon>
+              <lock-outlined />
+            </n-icon>
+          </span>
+        </div>
+      </div>
+      <!--充电-->
+      <recharge
+        :battery="battery"
+        :battery-status="batteryStatus"
+        :calc-discharging-time="calcDischargingTime"
+        :calc-charging-time="calcChargingTime"
+      />
+
+      <div class="local-time">
+        <div class="time">{{ hour }}:{{ minute }}</div>
+        <div class="date">{{ month }}月{{ day }}号，星期{{ week }}</div>
+      </div>
+      <div class="computer-status">
+        <span :class="{ offline: !online }" class="network">
+          <wifi-outlined class="network" />
+        </span>
+        <api-outlined />
+      </div>
+    </template>
+
+    <!--登录-->
+    <template v-if="showLogin">
+      <div class="login-box">
+        <n-avatar :size="128">
+          <n-icon>
+            <user-outlined />
+          </n-icon>
+        </n-avatar>
+        <div class="username">{{ loginParams.username }}</div>
+        <n-input
+          type="password"
+          autofocus
+          v-model:value="loginParams.password"
+          @keyup.enter="onLogin"
+          placeholder="请输入登录密码"
+        >
+          <template #suffix>
+            <n-icon @click="onLogin" style="cursor: pointer">
+              <LoadingOutlined v-if="loginLoading" />
+              <arrow-right-outlined v-else />
+            </n-icon>
+          </template>
+        </n-input>
+
+        <div class="w-full flex" v-if="isLoginError">
+          <span class="text-red-500">{{ errorMsg }}</span>
+        </div>
+
+        <div class="w-full mt-1 flex justify-around">
+          <div><a @click="showLogin = false">返回</a></div>
+          <div><a @click="goLogin">重新登录</a></div>
+          <div><a @click="onLogin">进入系统</a></div>
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script lang="ts">
+  import { defineComponent, reactive, toRefs } from 'vue';
+  import { ResultEnum } from '@/enums/httpEnum';
+  import recharge from './Recharge.vue';
+  import {
+    LockOutlined,
+    LoadingOutlined,
+    UserOutlined,
+    ApiOutlined,
+    ArrowRightOutlined,
+    WifiOutlined,
+  } from '@vicons/antd';
+
+  import { useRouter, useRoute } from 'vue-router';
+  import { useOnline } from '@/hooks/useOnline';
+  import { useTime } from '@/hooks/useTime';
+  import { useBattery } from '@/hooks/useBattery';
+  import { useLockscreenStore } from '@/store/modules/lockscreen';
+  import { useUserStore } from '@/store/modules/user';
+  import { aesEcb } from '@/utils/encrypt';
+  import { TABS_ROUTES } from '@/store/mutation-types';
+
+  export default defineComponent({
+    name: 'Lockscreen',
+    components: {
+      LockOutlined,
+      LoadingOutlined,
+      UserOutlined,
+      ArrowRightOutlined,
+      ApiOutlined,
+      WifiOutlined,
+      recharge,
+    },
+    setup() {
+      const useLockscreen = useLockscreenStore();
+      const userStore = useUserStore();
+
+      // 获取时间
+      const { month, day, hour, minute, second, week } = useTime();
+      const { online } = useOnline();
+
+      const router = useRouter();
+      const route = useRoute();
+
+      const { battery, batteryStatus, calcDischargingTime, calcChargingTime } = useBattery();
+      const userInfo: object = userStore.getUserInfo || {};
+      const username = userInfo['username'] || '';
+      const state = reactive({
+        showLogin: false,
+        loginLoading: false, // 正在登录
+        isLoginError: false, //密码错误
+        errorMsg: '密码错误',
+        loginParams: {
+          username: username || '',
+          password: '',
+        },
+      });
+
+      // 解锁登录
+      const onLockLogin = (value: boolean) => (state.showLogin = value);
+
+      // 登录
+      const onLogin = async () => {
+        if (!state.loginParams.password.trim()) {
+          return;
+        }
+        const params = {
+          isLock: true,
+          username: state.loginParams.username,
+          password: aesEcb.encrypt(state.loginParams.password),
+        };
+        state.loginLoading = true;
+        const { code, message } = await userStore.login(params);
+        if (code === ResultEnum.SUCCESS) {
+          onLockLogin(false);
+          useLockscreen.setLock(false);
+          window.location.reload();
+        } else {
+          state.errorMsg = message;
+          state.isLoginError = true;
+        }
+        state.loginLoading = false;
+      };
+
+      //重新登录
+      const goLogin = () => {
+        onLockLogin(false);
+        useLockscreen.setLock(false);
+
+        userStore.logout().then(() => {
+          // 移除标签页
+          localStorage.removeItem(TABS_ROUTES);
+          router
+            .replace({
+              name: 'Login',
+              query: {
+                redirect: route.fullPath,
+              },
+            })
+            .finally(() => location.reload());
+        });
+      };
+
+      return {
+        ...toRefs(state),
+        online,
+        month,
+        day,
+        hour,
+        minute,
+        second,
+        week,
+        battery,
+        batteryStatus,
+        calcDischargingTime,
+        calcChargingTime,
+        onLockLogin,
+        onLogin,
+        goLogin,
+      };
+    },
+  });
+</script>
+
+<style lang="less" scoped>
+  .lockscreen {
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    display: flex;
+    background: #000;
+    color: white;
+    overflow: hidden;
+    z-index: 9999;
+
+    &.onLockLogin {
+      background-color: rgba(25, 28, 34, 0.88);
+      backdrop-filter: blur(7px);
+    }
+
+    .login-box {
+      position: absolute;
+      top: 45%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+
+      > * {
+        margin-bottom: 14px;
+      }
+
+      .username {
+        font-size: 30px;
+      }
+    }
+
+    .lock-box {
+      position: absolute;
+      top: 20px;
+      left: 50%;
+      transform: translateX(-50%);
+      font-size: 34px;
+      z-index: 100;
+
+      .tips {
+        color: white;
+        cursor: text;
+      }
+
+      .lock {
+        display: flex;
+        justify-content: center;
+
+        .lock-icon {
+          cursor: pointer;
+
+          .anticon-unlock {
+            display: none;
+          }
+
+          &:hover .anticon-unlock {
+            display: initial;
+          }
+
+          &:hover .anticon-lock {
+            display: none;
+          }
+        }
+      }
+    }
+
+    .local-time {
+      position: absolute;
+      bottom: 60px;
+      left: 60px;
+      font-family: helvetica;
+
+      .time {
+        font-size: 70px;
+      }
+
+      .date {
+        font-size: 40px;
+      }
+    }
+
+    .computer-status {
+      position: absolute;
+      bottom: 60px;
+      right: 60px;
+      font-size: 24px;
+
+      > * {
+        margin-left: 14px;
+      }
+
+      .network {
+        position: relative;
+
+        &.offline::before {
+          content: '';
+          position: absolute;
+          left: 50%;
+          top: 50%;
+          width: 2px;
+          height: 28px;
+          transform: translate(-50%, -50%) rotate(45deg);
+          background-color: red;
+          z-index: 10;
+        }
+      }
+    }
+  }
+</style>

web/src/components/Lockscreen/Recharge.vue

@@ -0,0 +1,164 @@
+<template>
+  <div class="container">
+    <div class="number">{{ battery.level }}%</div>
+    <div class="contrast">
+      <div class="circle"></div>
+      <ul class="bubbles">
+        <li v-for="i in 15" :key="i"></li>
+      </ul>
+    </div>
+    <div class="charging">
+      <div>{{ batteryStatus }}</div>
+      <div v-show="Number.isFinite(battery.dischargingTime) && battery.dischargingTime != 0">
+        剩余可使用时间：{{ calcDischargingTime }}
+      </div>
+      <span v-show="Number.isFinite(battery.chargingTime) && battery.chargingTime != 0">
+        距离电池充满需要：{{ calcChargingTime }}
+      </span>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    name: 'HuaweiCharge',
+    // props: ['batteryStatus', 'battery', 'calcDischargingTime'],
+    props: {
+      battery: {
+        // 电池对象
+        type: Object,
+        default: () => ({}),
+      },
+      calcDischargingTime: {
+        // 电池剩余时间可用时间
+        type: String,
+        default: '',
+      },
+      calcChargingTime: {
+        type: String,
+        default: '',
+      },
+      batteryStatus: {
+        // 电池状态
+        type: String,
+        validator: (val: string) => ['充电中', '已充满', '已断开电源'].includes(val),
+      },
+    },
+  });
+</script>
+
+<style lang="less" scoped>
+  .container {
+    position: absolute;
+    bottom: 20vh;
+    left: 50vw;
+    width: 300px;
+    height: 500px;
+    transform: translateX(-50%);
+
+    .number {
+      position: absolute;
+      top: 20%;
+      z-index: 10;
+      width: 300px;
+      font-size: 32px;
+      color: #fff;
+      text-align: center;
+    }
+
+    .contrast {
+      width: 300px;
+      height: 400px;
+      overflow: hidden;
+      background-color: #000;
+      filter: contrast(15) hue-rotate(0);
+      animation: hueRotate 10s infinite linear;
+
+      .circle {
+        position: relative;
+        width: 300px;
+        height: 300px;
+        filter: blur(8px);
+        box-sizing: border-box;
+
+        &::after {
+          position: absolute;
+          top: 40%;
+          left: 50%;
+          width: 200px;
+          height: 200px;
+          background-color: #00ff6f;
+          border-radius: 42% 38% 62% 49% / 45%;
+          content: '';
+          transform: translate(-50%, -50%) rotate(0);
+          animation: rotate 10s infinite linear;
+        }
+
+        &::before {
+          position: absolute;
+          top: 40%;
+          left: 50%;
+          z-index: 10;
+          width: 176px;
+          height: 176px;
+          background-color: #000;
+          border-radius: 50%;
+          content: '';
+          transform: translate(-50%, -50%);
+        }
+      }
+
+      .bubbles {
+        position: absolute;
+        bottom: 0;
+        left: 50%;
+        width: 100px;
+        height: 40px;
+        background-color: #00ff6f;
+        border-radius: 100px 100px 0 0;
+        filter: blur(5px);
+        transform: translate(-50%, 0);
+
+        li {
+          position: absolute;
+          background: #00ff6f;
+          border-radius: 50%;
+        }
+      }
+    }
+
+    .charging {
+      font-size: 20px;
+      text-align: center;
+    }
+  }
+
+  @keyframes rotate {
+    50% {
+      border-radius: 45% / 42% 38% 58% 49%;
+    }
+
+    100% {
+      transform: translate(-50%, -50%) rotate(720deg);
+    }
+  }
+
+  @keyframes moveToTop {
+    90% {
+      opacity: 1;
+    }
+
+    100% {
+      opacity: 0.1;
+      transform: translate(-50%, -180px);
+    }
+  }
+
+  @keyframes hueRotate {
+    100% {
+      filter: contrast(15) hue-rotate(360deg);
+    }
+  }
+</style>

web/src/components/Lockscreen/index.ts

@@ -0,0 +1,3 @@
+import LockScreen from './Lockscreen.vue';
+
+export { LockScreen };

web/src/layout/components/Header/index.vue

@@ -216,6 +216,7 @@
   } from 'naive-ui';
   import { TABS_ROUTES } from '@/store/mutation-types';
   import { useUserStore } from '@/store/modules/user';
+  import { useLockscreenStore } from '@/store/modules/lockscreen';
   import ProjectSetting from './ProjectSetting.vue';
   import { AsideMenu } from '@/layout/components/Menu';
   import { useProjectSetting } from '@/hooks/setting/useProjectSetting';
@@ -248,6 +249,7 @@
       const i18nStore = useI18nStore();
       const userStore = useUserStore();
       const notificationStore = notificationStoreWidthOut();
+      const useLockscreen = useLockscreenStore();
       const message = useMessage();
       const dialog = useDialog();
       const {
@@ -394,6 +396,13 @@
           icon: 'BellOutlined',
           tips: '我的消息',
         },
+        {
+          icon: 'LockOutlined',
+          tips: '锁屏',
+          eventObject: {
+            click: () => useLockscreen.setLock(true),
+          },
+        },
       ];
 
       function renderCustomHeader() {

web/src/store/modules/index.ts

@@ -14,6 +14,8 @@ import user from './user';
 // @ts-ignore
 import tabsView from './tabs-view';
 // @ts-ignore
+import lockscreen from './lockscreen';
+// @ts-ignore
 import dict from './dict';
 // @ts-ignore
 import i18n from './i18n';
@@ -22,6 +24,7 @@ export default {
   asyncRoute,
   user,
   tabsView,
+  lockscreen,
   dict,
   i18n,
 };

web/src/store/modules/lockscreen.ts

@@ -0,0 +1,31 @@
+import { defineStore } from 'pinia';
+import { IS_LOCKSCREEN } from '@/store/mutation-types';
+import { storage } from '@/utils/Storage';
+
+// 长时间不操作默认锁屏时间
+const initTime = 60 * 60;
+
+const isLock = storage.get(IS_LOCKSCREEN, false);
+
+export type ILockscreenState = {
+  isLock: boolean; // 是否锁屏
+  lockTime: number;
+};
+
+export const useLockscreenStore = defineStore({
+  id: 'app-lockscreen',
+  state: (): ILockscreenState => ({
+    isLock: isLock === true, // 是否锁屏
+    lockTime: isLock == 'true' ? initTime : 0,
+  }),
+  getters: {},
+  actions: {
+    setLock(payload) {
+      this.isLock = payload;
+      storage.set(IS_LOCKSCREEN, this.isLock);
+    },
+    setLockTime(payload = initTime) {
+      this.lockTime = payload;
+    },
+  },
+});

web/src/store/modules/user.ts

@@ -7,6 +7,7 @@ import {
   CURRENT_DICT,
   CURRENT_LOGIN_CONFIG,
   CURRENT_USER,
+  IS_LOCKSCREEN,
 } from '@/store/mutation-types';
 import { ResultEnum } from '@/enums/httpEnum';
 import {
@@ -176,6 +177,7 @@ export const useUserStore = defineStore({
           const ex = 30 * 24 * 60 * 60 * 1000;
           storage.set(ACCESS_TOKEN, data.token, ex);
           storage.set(CURRENT_USER, data, ex);
+          storage.set(IS_LOCKSCREEN, false);
           this.setToken(data.token);
           this.setUserInfo(data);
         }

web/src/store/mutation-types.ts

@@ -2,6 +2,7 @@ export const ACCESS_TOKEN = 'ACCESS-TOKEN'; // 用户token
 export const CURRENT_USER = 'CURRENT-USER'; // 当前用户信息
 export const CURRENT_CONFIG = 'CURRENT-CONFIG'; // 当前基础配置
 export const CURRENT_LOGIN_CONFIG = 'CURRENT-LOGIN-CONFIG'; // 当前登录配置
+export const IS_LOCKSCREEN = 'IS-LOCKSCREEN'; // 是否锁屏
 export const TABS_ROUTES = 'TABS-ROUTES'; // 标签页
 export const CURRENT_DICT = 'CURRENT-DICT'; // 当前用户字典配置
 export const CurrentLocale = 'Current-Locale'; // 当前语言

web/src/store/types.ts

@@ -1,5 +1,6 @@
 import { IAsyncRouteState } from '@/store/modules/asyncRoute';
 import { IUserState } from '@/store/modules/user';
+import { ILockscreenState } from '@/store/modules/lockscreen';
 import { ITabsViewState } from '@/store/modules/tabsView';
 import { INotificationStore } from '@/store/modules/notification';
 import { IDictState } from '@/store/modules/dict';
@@ -7,6 +8,7 @@ import { IDictState } from '@/store/modules/dict';
 export interface IStore {
   asyncRoute: IAsyncRouteState;
   user: IUserState;
+  lockscreen: ILockscreenState;
   tabsView: ITabsViewState;
   dict: IDictState;
   notification: INotificationStore;