refactor(lock-page): refactor lock page

CHANGELOG.zh_CN.md

@@ -16,6 +16,7 @@
 ### ✨ Refactor
 
 - tree 组件 ref 函数调用删除 `$`
+- 锁屏界面重构美化，删除不必要的背景图片
 
 ### ⚡ Performance Improvements
 

src/api/sys/user.ts

@@ -5,6 +5,7 @@ import {
   GetUserInfoByUserIdParams,
   GetUserInfoByUserIdModel,
 } from './model/userModel';
+import { ErrorMessageMode } from '/@/utils/http/axios/types';
 
 enum Api {
   Login = '/login',
@@ -15,7 +16,7 @@ enum Api {
 /**
  * @description: user login api
  */
-export function loginApi(params: LoginParams) {
+export function loginApi(params: LoginParams, mode: ErrorMessageMode = 'modal') {
   return defHttp.request<LoginResultModel>(
     {
       url: Api.Login,
@@ -23,7 +24,7 @@ export function loginApi(params: LoginParams) {
       params,
     },
     {
-      errorMessageMode: 'modal',
+      errorMessageMode: mode,
     }
   );
 }

src/design/mixins.less

@@ -90,6 +90,7 @@
     @content();
   }
 }
+
 .respond-to (xsmall-and-small, @content) {
   @media only screen and (max-width: @screen-sm-max) {
     @content();

src/design/var/breakpoint.less

@@ -26,9 +26,13 @@
 @screen-xxl: 1600px;
 @screen-xxl-min: @screen-xxl;
 
+@screen-xxxl: 1900px;
+@screen-xxxl-min: @screen-xxxl;
+
 // provide a maximum
 @screen-xs-max: (@screen-sm-min - 1px);
 @screen-sm-max: (@screen-md-min - 1px);
 @screen-md-max: (@screen-lg-min - 1px);
 @screen-lg-max: (@screen-xl-min - 1px);
 @screen-xl-max: (@screen-xxl-min - 1px);
+@screen-xxl-max: (@screen-xxxl-min - 1px);

src/hooks/setting/useRootSetting.ts

@@ -42,6 +42,8 @@ const getColorWeak = computed(() => unref(getRootSetting).colorWeak);
 
 const getGrayMode = computed(() => unref(getRootSetting).grayMode);
 
+const getLockTime = computed(() => unref(getRootSetting).lockTime);
+
 const getLayoutContentMode = computed(() =>
   unref(getRootSetting).contentMode === ContentEnum.FULL ? ContentEnum.FULL : ContentEnum.FIXED
 );
@@ -71,5 +73,6 @@ export function useRootSetting() {
     getShowSettingButton,
     getShowFooter,
     getContentMode,
+    getLockTime,
   };
 }

src/hooks/web/useLockPage.ts

-import { computed, onUnmounted, watchEffect } from 'vue';
+import { computed, onUnmounted, unref, watchEffect } from 'vue';
 import { useThrottle } from '/@/hooks/core/useThrottle';
 
 import { appStore } from '/@/store/modules/app';
+import { lockStore } from '/@/store/modules/lock';
 import { userStore } from '/@/store/modules/user';
+import { useRootSetting } from '../setting/useRootSetting';
 
 export function useLockPage() {
+  const { getLockTime } = useRootSetting();
   let timeId: TimeoutHandle;
 
   function clear(): void {
@@ -30,7 +33,7 @@ export function useLockPage() {
   }
 
   function lockPage(): void {
-    appStore.commitLockInfoState({
+    lockStore.commitLockInfoState({
       isLock: true,
       pwd: undefined,
     });
@@ -54,8 +57,7 @@ export function useLockPage() {
   const [keyupFn] = useThrottle(resetCalcLockTimeout, 2000);
 
   return computed(() => {
-    const openLockPage = appStore.getProjectConfig.lockTime;
-    if (openLockPage) {
+    if (unref(getLockTime)) {
       return { onKeyup: keyupFn, onMousemove: keyupFn };
     } else {
       clear();
@@ -63,3 +65,9 @@ export function useLockPage() {
     }
   });
 }
+
+export const getIsLock = computed(() => {
+  const { getLockInfo } = lockStore;
+  const { isLock } = getLockInfo;
+  return isLock;
+});

src/layouts/default/index.tsx

@@ -6,7 +6,7 @@ import LayoutHeader from './header/LayoutHeader';
 
 import LayoutContent from './content';
 import LayoutFooter from './footer';
-import LayoutLockPage from './lock';
+import LayoutLockPage from './lock/index.vue';
 import LayoutSideBar from './sider';
 import SettingBtn from './setting/index.vue';
 import LayoutMultipleHeader from './header/LayoutMultipleHeader';

src/layouts/default/lock/LockAction.tsx

@@ -7,9 +7,9 @@ import { BasicForm, useForm } from '/@/components/Form/index';
 
 import headerImg from '/@/assets/images/header.jpg';
 
-import { appStore } from '/@/store/modules/app';
 import { userStore } from '/@/store/modules/user';
 import { useI18n } from '/@/hooks/web/useI18n';
+import { lockStore } from '/@/store/modules/lock';
 
 const prefixCls = 'lock-modal';
 export default defineComponent({
@@ -30,24 +30,16 @@ export default defineComponent({
       ],
     });
 
-    async function lock(valid = true) {
-      let password: string | undefined = '';
+    async function lock() {
+      const values = (await validateFields()) as any;
+      const password: string | undefined = values.password;
+      closeModal();
 
-      try {
-        if (!valid) {
-          password = undefined;
-        } else {
-          const values = (await validateFields()) as any;
-          password = values.password;
-        }
-        closeModal();
-
-        appStore.commitLockInfoState({
-          isLock: true,
-          pwd: password,
-        });
-        await resetFields();
-      } catch (error) {}
+      lockStore.commitLockInfoState({
+        isLock: true,
+        pwd: password,
+      });
+      await resetFields();
     }
 
     return () => (
@@ -71,9 +63,6 @@ export default defineComponent({
               <Button type="primary" block class="mt-2" onClick={lock}>
                 {() => t('layout.header.lockScreenBtn')}
               </Button>
-              <Button block class="mt-2" onClick={lock.bind(null, false)}>
-                {() => t('layout.header.notLockScreenPassword')}
-              </Button>
             </div>
           </div>
         )}

src/layouts/default/lock/index.tsx

-import { defineComponent, unref, computed } from 'vue';
-import { appStore } from '/@/store/modules/app';
-import LockPage from '/@/views/sys/lock/index.vue';
-
-export default defineComponent({
-  name: 'LayoutLockPage',
-  setup() {
-    const getIsLockRef = computed(() => {
-      const { getLockInfo } = appStore;
-      const { isLock } = getLockInfo;
-      return isLock;
-    });
-    return () => {
-      return unref(getIsLockRef) ? <LockPage /> : null;
-    };
-  },
-});

src/layouts/default/lock/index.vue

+<template>
+  <transition name="fade-bottom">
+    <LockPage v-if="getIsLock" />
+  </transition>
+</template>
+<script lang="ts">
+  import { defineComponent } from 'vue';
+  import LockPage from '/@/views/sys/lock/index.vue';
+  import { getIsLock } from '/@/hooks/web/useLockPage';
+  export default defineComponent({
+    name: 'LayoutLockPage',
+    components: { LockPage },
+    setup() {
+      return { getIsLock };
+    },
+  });
+</script>

src/locales/lang/en/layout/header.ts

@@ -14,7 +14,6 @@ export default {
   lockScreenPassword: 'Lock screen password',
   lockScreen: 'Lock screen',
   lockScreenBtn: 'Locking',
-  notLockScreenPassword: 'No password lock screen',
 
   home: 'Home',
 };

src/locales/lang/en/sys/lock.ts

 export default {
+  unlock: 'Click to unlock',
   alert: 'Lock screen password error',
   backToLogin: 'Back to login',
+  back: 'Back',
   entry: 'Enter the system',
   placeholder: 'Please enter the lock screen password or user password',
 };

src/locales/lang/zh_CN/layout/header.ts

@@ -15,7 +15,6 @@ export default {
   lockScreenPassword: '锁屏密码',
   lockScreen: '锁定屏幕',
   lockScreenBtn: '锁定',
-  notLockScreenPassword: '不设置密码锁屏',
 
   home: '首页',
 };

src/locales/lang/zh_CN/sys/lock.ts

 export default {
+  unlock: '点击解锁',
   alert: '锁屏密码错误',
+  back: '返回',
   backToLogin: '返回登录',
   entry: '进入系统',
   placeholder: '请输入锁屏密码或者用户密码',

src/store/modules/app.ts

@@ -3,16 +3,10 @@ import type { ProjectConfig } from '/@/types/config';
 import { VuexModule, getModule, Module, Mutation, Action } from 'vuex-module-decorators';
 import store from '/@/store';
 
-import { PROJ_CFG_KEY, LOCK_INFO_KEY } from '/@/enums/cacheEnum';
+import { PROJ_CFG_KEY } from '/@/enums/cacheEnum';
 
 import { hotModuleUnregisterModule } from '/@/utils/helper/vuexHelper';
-import {
-  setLocal,
-  getLocal,
-  removeLocal,
-  clearSession,
-  clearLocal,
-} from '/@/utils/helper/persistent';
+import { setLocal, getLocal, clearSession, clearLocal } from '/@/utils/helper/persistent';
 import { deepMerge } from '/@/utils';
 
 import { resetRouter } from '/@/router';
@@ -37,9 +31,6 @@ class App extends VuexModule {
   // project config
   private projectConfigState: ProjectConfig | null = getLocal(PROJ_CFG_KEY);
 
-  // lock info
-  private lockInfoState: LockInfo | null = getLocal(LOCK_INFO_KEY);
-
   // set main overflow hidden
   private lockMainScrollState = false;
 
@@ -51,10 +42,6 @@ class App extends VuexModule {
     return this.lockMainScrollState;
   }
 
-  get getLockInfo(): LockInfo {
-    return this.lockInfoState || ({} as LockInfo);
-  }
-
   get getProjectConfig(): ProjectConfig {
     return this.projectConfigState || ({} as ProjectConfig);
   }
@@ -75,18 +62,6 @@ class App extends VuexModule {
     setLocal(PROJ_CFG_KEY, this.projectConfigState);
   }
 
-  @Mutation
-  commitLockInfoState(info: LockInfo): void {
-    this.lockInfoState = Object.assign({}, this.lockInfoState, info);
-    setLocal(LOCK_INFO_KEY, this.lockInfoState);
-  }
-
-  @Mutation
-  resetLockInfo(): void {
-    removeLocal(LOCK_INFO_KEY);
-    this.lockInfoState = null;
-  }
-
   @Action
   async resumeAllState() {
     resetRouter();
@@ -111,39 +86,5 @@ class App extends VuexModule {
       clearTimeout(timeId);
     }
   }
-
-  /**
-   * @description: unlock page
-   */
-  @Action
-  public async unLockAction({ password, valid = true }: { password: string; valid?: boolean }) {
-    if (!valid) {
-      this.resetLockInfo();
-      return true;
-    }
-    const tryLogin = async () => {
-      try {
-        const username = userStore.getUserInfoState.username;
-        const res = await userStore.login({ username, password }, false);
-        if (res) {
-          this.resetLockInfo();
-        }
-        return res;
-      } catch (error) {
-        return false;
-      }
-    };
-
-    if (this.getLockInfo) {
-      if (this.getLockInfo.pwd === password) {
-        this.resetLockInfo();
-        return true;
-      }
-      const res = await tryLogin();
-      return res;
-    }
-    const res = await tryLogin();
-    return res;
-  }
 }
 export const appStore = getModule<App>(App);

src/store/modules/lock.ts

+import { VuexModule, getModule, Module, Mutation, Action } from 'vuex-module-decorators';
+import store from '/@/store';
+
+import { LOCK_INFO_KEY } from '/@/enums/cacheEnum';
+
+import { hotModuleUnregisterModule } from '/@/utils/helper/vuexHelper';
+import { setLocal, getLocal, removeLocal } from '/@/utils/helper/persistent';
+
+import { userStore } from './user';
+
+export interface LockInfo {
+  pwd: string | undefined;
+  isLock: boolean;
+}
+
+const NAME = 'lock';
+hotModuleUnregisterModule(NAME);
+@Module({ dynamic: true, namespaced: true, store, name: NAME })
+class Lock extends VuexModule {
+  // lock info
+  private lockInfoState: LockInfo | null = getLocal(LOCK_INFO_KEY);
+
+  get getLockInfo(): LockInfo {
+    return this.lockInfoState || ({} as LockInfo);
+  }
+
+  @Mutation
+  commitLockInfoState(info: LockInfo): void {
+    this.lockInfoState = Object.assign({}, this.lockInfoState, info);
+    setLocal(LOCK_INFO_KEY, this.lockInfoState);
+  }
+
+  @Mutation
+  resetLockInfo(): void {
+    removeLocal(LOCK_INFO_KEY);
+    this.lockInfoState = null;
+  }
+
+  /**
+   * @description: unlock page
+   */
+  @Action
+  public async unLockAction({ password }: { password: string }) {
+    const tryLogin = async () => {
+      try {
+        const username = userStore.getUserInfoState.username;
+        const res = await userStore.login({ username, password, goHome: false, mode: 'none' });
+        if (res) {
+          this.resetLockInfo();
+        }
+        return res;
+      } catch (error) {
+        return false;
+      }
+    };
+
+    if (this.getLockInfo?.pwd === password) {
+      this.resetLockInfo();
+      return true;
+    }
+    return await tryLogin();
+  }
+}
+export const lockStore = getModule<Lock>(Lock);

src/store/modules/user.ts

@@ -21,6 +21,7 @@ import { loginApi, getUserInfoById } from '/@/api/sys/user';
 import { setLocal, getLocal, getSession, setSession } from '/@/utils/helper/persistent';
 import { useProjectSetting } from '/@/hooks/setting';
 import { useI18n } from '/@/hooks/web/useI18n';
+import { ErrorMessageMode } from '/@/utils/http/axios/types';
 
 export type UserInfo = Omit<GetUserInfoByUserIdModel, 'roles'>;
 
@@ -94,9 +95,16 @@ class User extends VuexModule {
    * @description: login
    */
   @Action
-  async login(params: LoginParams, goHome = true): Promise<GetUserInfoByUserIdModel | null> {
+  async login(
+    params: LoginParams & {
+      goHome?: boolean;
+      mode?: ErrorMessageMode;
+    }
+  ): Promise<GetUserInfoByUserIdModel | null> {
     try {
-      const data = await loginApi(params);
+      const { goHome = true, mode, ...loginParams } = params;
+      const data = await loginApi(loginParams, mode);
+
       const { token, userId } = data;
       // get user info
       const userInfo = await this.getUserInfoAction({ userId });
@@ -106,7 +114,7 @@ class User extends VuexModule {
 
       // const name = FULL_PAGE_NOT_FOUND_ROUTE.name;
       // name && router.removeRoute(name);
-      goHome && router.push(PageEnum.BASE_HOME);
+      goHome && router.replace(PageEnum.BASE_HOME);
       return userInfo;
     } catch (error) {
       return null;

src/utils/http/axios/Axios.ts

@@ -80,6 +80,7 @@ export class VAxios {
 
     // 请求拦截器配置处理
     this.axiosInstance.interceptors.request.use((config: AxiosRequestConfig) => {
+      // If cancel repeat request is turned on, then cancel repeat request is prohibited
       const { headers: { ignoreCancelToken } = { ignoreCancelToken: false } } = config;
       !ignoreCancelToken && axiosCanceler.addPending(config);
       if (requestInterceptors && isFunction(requestInterceptors)) {

src/utils/http/axios/index.ts

@@ -58,7 +58,7 @@ const transform: AxiosTransform = {
         // errorMessageMode=‘modal’的时候会显示modal错误弹窗，而不是消息提示，用于一些比较重要的错误
         if (options.errorMessageMode === 'modal') {
           createErrorModal({ title: t('sys.api.errorTip'), content: message });
-        } else {
+        } else if (options.errorMessageMode === 'message') {
           createMessage.error(message);
         }
       }
@@ -201,7 +201,7 @@ function createAxios(opt?: Partial<CreateAxiosOptions>) {
           // 格式化提交参数时间
           formatDate: true,
           // 消息提示类型
-          errorMessageMode: 'none',
+          errorMessageMode: 'message',
           // 接口地址
           apiUrl: globSetting.apiUrl,
         },

src/utils/http/axios/types.ts

 import type { AxiosRequestConfig } from 'axios';
 import { AxiosTransform } from './axiosTransform';
 
+export type ErrorMessageMode = 'none' | 'modal' | 'message' | undefined;
+
 export interface RequestOptions {
   // 请求参数拼接到url
   joinParamsToUrl?: boolean;
@@ -13,7 +15,7 @@ export interface RequestOptions {
   // 接口地址， 不填则使用默认apiUrl
   apiUrl?: string;
   // 错误消息提示类型
-  errorMessageMode?: 'none' | 'modal';
+  errorMessageMode?: ErrorMessageMode;
 }
 
 export interface CreateAxiosOptions extends AxiosRequestConfig {

src/views/sys/lock/useNow.ts

+import moment from 'moment';
+import { reactive, toRefs } from 'vue';
+import { tryOnMounted, tryOnUnmounted } from '/@/utils/helper/vueHelper';
+import { useLocaleSetting } from '/@/hooks/setting/useLocaleSetting';
+
+export function useNow(immediate = true) {
+  const { getLang } = useLocaleSetting();
+  const localData = moment.localeData(getLang.value);
+  let timer: IntervalHandle;
+
+  const state = reactive({
+    year: 0,
+    month: 0,
+    week: '',
+    day: 0,
+    hour: '',
+    minute: '',
+    second: 0,
+    meridiem: '',
+  });
+
+  const update = () => {
+    const now = moment();
+
+    const h = now.format('HH');
+    const m = now.format('mm');
+    const s = now.get('s');
+
+    state.year = now.get('y');
+    state.month = now.get('M');
+    state.week = localData.weekdays()[now.day()];
+    state.day = now.get('D');
+    state.hour = h;
+    state.minute = m;
+    state.second = s;
+
+    state.meridiem = localData.meridiem(Number(h), Number(h), true);
+  };
+
+  function start() {
+    update();
+    clearInterval(timer);
+    timer = setInterval(() => update(), 1000);
+  }
+
+  function stop() {
+    clearInterval(timer);
+  }
+
+  tryOnMounted(() => {
+    immediate && start();
+  });
+
+  tryOnUnmounted(() => {
+    stop();
+  });
+
+  return {
+    ...toRefs(state),
+    start,
+    stop,
+  };
+}