chore: reset miskaken delete file

+<template>
+  <BasicModal :width="800" :title="t('sys.errorLog.tableActionDesc')" v-bind="$attrs">
+    <Description :data="info" @register="register" />
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+  import type { PropType } from 'vue';
+  import type { ErrorLogInfo } from '/#/store';
+  import { BasicModal } from '/@/components/Modal/index';
+  import { Description, useDescription } from '/@/components/Description/index';
+  import { useI18n } from '/@/hooks/web/useI18n';
+  import { getDescSchema } from './data';
+  defineProps({
+    info: {
+      type: Object as PropType<ErrorLogInfo>,
+      default: null,
+    },
+  });
+
+  const { t } = useI18n();
+
+  const [register] = useDescription({
+    column: 2,
+    schema: getDescSchema()!,
+  });
+</script>

+import { Tag } from 'ant-design-vue';
+import { BasicColumn } from '/@/components/Table/index';
+import { ErrorTypeEnum } from '/@/enums/exceptionEnum';
+import { useI18n } from '/@/hooks/web/useI18n';
+
+const { t } = useI18n();
+
+export function getColumns(): BasicColumn[] {
+  return [
+    {
+      dataIndex: 'type',
+      title: t('sys.errorLog.tableColumnType'),
+      width: 80,
+      customRender: ({ text }) => {
+        const color =
+          text === ErrorTypeEnum.VUE
+            ? 'green'
+            : text === ErrorTypeEnum.RESOURCE
+            ? 'cyan'
+            : text === ErrorTypeEnum.PROMISE
+            ? 'blue'
+            : ErrorTypeEnum.AJAX
+            ? 'red'
+            : 'purple';
+        return <Tag color={color}>{() => text}</Tag>;
+      },
+    },
+    {
+      dataIndex: 'url',
+      title: 'URL',
+      width: 200,
+    },
+    {
+      dataIndex: 'time',
+      title: t('sys.errorLog.tableColumnDate'),
+      width: 160,
+    },
+    {
+      dataIndex: 'file',
+      title: t('sys.errorLog.tableColumnFile'),
+      width: 200,
+    },
+    {
+      dataIndex: 'name',
+      title: 'Name',
+      width: 200,
+    },
+    {
+      dataIndex: 'message',
+      title: t('sys.errorLog.tableColumnMsg'),
+      width: 300,
+    },
+    {
+      dataIndex: 'stack',
+      title: t('sys.errorLog.tableColumnStackMsg'),
+    },
+  ];
+}
+
+export function getDescSchema(): any {
+  return getColumns().map((column) => {
+    return {
+      field: column.dataIndex!,
+      label: column.title,
+    };
+  });
+}

+<template>
+  <div class="p-4">
+    <template v-for="src in imgList" :key="src">
+      <img :src="src" v-show="false" />
+    </template>
+    <BasicTable @register="register" class="error-handle-table">
+      <template #toolbar>
+        <a-button @click="fireVueError" type="primary">
+          {{ t('sys.errorLog.fireVueError') }}
+        </a-button>
+        <a-button @click="fireResourceError" type="primary">
+          {{ t('sys.errorLog.fireResourceError') }}
+        </a-button>
+        <!-- <a-button @click="fireAjaxError" type="primary">
+          {{ t('sys.errorLog.fireAjaxError') }}
+        </a-button> -->
+      </template>
+      <template #action="{ record }">
+        <TableAction
+          :actions="[
+            { label: t('sys.errorLog.tableActionDesc'), onClick: handleDetail.bind(null, record) },
+          ]"
+        />
+      </template>
+    </BasicTable>
+    <DetailModal :info="rowInfo" @register="registerModal" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import type { ErrorLogInfo } from '/#/store';
+  import { watch, ref, nextTick } from 'vue';
+  import DetailModal from './DetailModal.vue';
+  import { BasicTable, useTable, TableAction } from '/@/components/Table/index';
+  import { useModal } from '/@/components/Modal';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { useI18n } from '/@/hooks/web/useI18n';
+  import { useErrorLogStore } from '/@/store/modules/errorLog';
+  // import { fireErrorApi } from '/@/api/demo/error';
+  import { getColumns } from './data';
+  import { cloneDeep } from 'lodash-es';
+
+  const rowInfo = ref<ErrorLogInfo>();
+  const imgList = ref<string[]>([]);
+
+  const { t } = useI18n();
+  const errorLogStore = useErrorLogStore();
+  const [register, { setTableData }] = useTable({
+    title: t('sys.errorLog.tableTitle'),
+    columns: getColumns(),
+    actionColumn: {
+      width: 200,
+      title: 'Action',
+      dataIndex: 'action',
+      slots: { customRender: 'action' },
+    },
+  });
+  const [registerModal, { openModal }] = useModal();
+
+  watch(
+    () => errorLogStore.getErrorLogInfoList,
+    (list) => {
+      nextTick(() => {
+        setTableData(cloneDeep(list));
+      });
+    },
+    {
+      immediate: true,
+    }
+  );
+  const { createMessage } = useMessage();
+  if (import.meta.env.DEV) {
+    createMessage.info(t('sys.errorLog.enableMessage'));
+  }
+  // 查看详情
+  function handleDetail(row: ErrorLogInfo) {
+    rowInfo.value = row;
+    openModal(true);
+  }
+
+  function fireVueError() {
+    throw new Error('fire vue error!');
+  }
+
+  function fireResourceError() {
+    imgList.value.push(`${new Date().getTime()}.png`);
+  }
+
+  // async function fireAjaxError() {
+  //   await fireErrorApi();
+  // }
+</script>

+<script lang="tsx">
+  import type { PropType } from 'vue';
+  import { Result, Button } from 'ant-design-vue';
+  import { defineComponent, ref, computed, unref } from 'vue';
+  import { ExceptionEnum } from '/@/enums/exceptionEnum';
+  import notDataSvg from '/@/assets/svg/no-data.svg';
+  import netWorkSvg from '/@/assets/svg/net-error.svg';
+  import { useRoute } from 'vue-router';
+  import { useDesign } from '/@/hooks/web/useDesign';
+  import { useI18n } from '/@/hooks/web/useI18n';
+  import { useGo, useRedo } from '/@/hooks/web/usePage';
+  import { PageEnum } from '/@/enums/pageEnum';
+
+  interface MapValue {
+    title: string;
+    subTitle: string;
+    btnText?: string;
+    icon?: string;
+    handler?: Fn;
+    status?: string;
+  }
+
+  export default defineComponent({
+    name: 'ErrorPage',
+    props: {
+      // 状态码
+      status: {
+        type: Number as PropType<number>,
+        default: ExceptionEnum.PAGE_NOT_FOUND,
+      },
+
+      title: {
+        type: String as PropType<string>,
+        default: '',
+      },
+
+      subTitle: {
+        type: String as PropType<string>,
+        default: '',
+      },
+
+      full: {
+        type: Boolean as PropType<boolean>,
+        default: false,
+      },
+    },
+    setup(props) {
+      const statusMapRef = ref(new Map<string | number, MapValue>());
+      const { query } = useRoute();
+      const go = useGo();
+      const redo = useRedo();
+      const { t } = useI18n();
+      const { prefixCls } = useDesign('app-exception-page');
+
+      const getStatus = computed(() => {
+        const { status: routeStatus } = query;
+        const { status } = props;
+        return Number(routeStatus) || status;
+      });
+
+      const getMapValue = computed((): MapValue => {
+        return unref(statusMapRef).get(unref(getStatus)) as MapValue;
+      });
+
+      const backLoginI18n = t('sys.exception.backLogin');
+      const backHomeI18n = t('sys.exception.backHome');
+
+      unref(statusMapRef).set(ExceptionEnum.PAGE_NOT_ACCESS, {
+        title: '403',
+        status: `${ExceptionEnum.PAGE_NOT_ACCESS}`,
+        subTitle: t('sys.exception.subTitle403'),
+        btnText: props.full ? backLoginI18n : backHomeI18n,
+        handler: () => (props.full ? go(PageEnum.BASE_LOGIN) : go()),
+      });
+
+      unref(statusMapRef).set(ExceptionEnum.PAGE_NOT_FOUND, {
+        title: '404',
+        status: `${ExceptionEnum.PAGE_NOT_FOUND}`,
+        subTitle: t('sys.exception.subTitle404'),
+        btnText: props.full ? backLoginI18n : backHomeI18n,
+        handler: () => (props.full ? go(PageEnum.BASE_LOGIN) : go()),
+      });
+
+      unref(statusMapRef).set(ExceptionEnum.ERROR, {
+        title: '500',
+        status: `${ExceptionEnum.ERROR}`,
+        subTitle: t('sys.exception.subTitle500'),
+        btnText: backHomeI18n,
+        handler: () => go(),
+      });
+
+      unref(statusMapRef).set(ExceptionEnum.PAGE_NOT_DATA, {
+        title: t('sys.exception.noDataTitle'),
+        subTitle: '',
+        btnText: t('common.redo'),
+        handler: () => redo(),
+        icon: notDataSvg,
+      });
+
+      unref(statusMapRef).set(ExceptionEnum.NET_WORK_ERROR, {
+        title: t('sys.exception.networkErrorTitle'),
+        subTitle: t('sys.exception.networkErrorSubTitle'),
+        btnText: t('common.redo'),
+        handler: () => redo(),
+        icon: netWorkSvg,
+      });
+
+      return () => {
+        const { title, subTitle, btnText, icon, handler, status } = unref(getMapValue) || {};
+        return (
+          <Result
+            class={prefixCls}
+            status={status as any}
+            title={props.title || title}
+            sub-title={props.subTitle || subTitle}
+          >
+            {{
+              extra: () =>
+                btnText && (
+                  <Button type="primary" onClick={handler}>
+                    {() => btnText}
+                  </Button>
+                ),
+              icon: () => (icon ? <img src={icon} /> : null),
+            }}
+          </Result>
+        );
+      };
+    },
+  });
+</script>
+<style lang="less">
+  @prefix-cls: ~'@{namespace}-app-exception-page';
+
+  .@{prefix-cls} {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+
+    .ant-result-icon {
+      img {
+        max-width: 400px;
+        max-height: 300px;
+      }
+    }
+  }
+</style>

+export { default as Exception } from './Exception.vue';

+<template>
+  <div></div>
+</template>
+<script lang="ts">
+  import { defineComponent } from 'vue';
+  export default defineComponent({
+    name: 'FrameBlank',
+  });
+</script>

+<template>
+  <div :class="prefixCls" :style="getWrapStyle">
+    <Spin :spinning="loading" size="large" :style="getWrapStyle">
+      <iframe
+        :src="frameSrc"
+        :class="`${prefixCls}__main`"
+        ref="frameRef"
+        @load="hideLoading"
+      ></iframe>
+    </Spin>
+  </div>
+</template>
+<script lang="ts" setup>
+  import type { CSSProperties } from 'vue';
+  import { ref, unref, computed } from 'vue';
+  import { Spin } from 'ant-design-vue';
+  import { useWindowSizeFn } from '/@/hooks/event/useWindowSizeFn';
+  import { propTypes } from '/@/utils/propTypes';
+  import { useDesign } from '/@/hooks/web/useDesign';
+  import { useLayoutHeight } from '/@/layouts/default/content/useContentViewHeight';
+
+  defineProps({
+    frameSrc: propTypes.string.def(''),
+  });
+
+  const loading = ref(true);
+  const topRef = ref(50);
+  const heightRef = ref(window.innerHeight);
+  const frameRef = ref<HTMLFrameElement>();
+  const { headerHeightRef } = useLayoutHeight();
+
+  const { prefixCls } = useDesign('iframe-page');
+  useWindowSizeFn(calcHeight, 150, { immediate: true });
+
+  const getWrapStyle = computed((): CSSProperties => {
+    return {
+      height: `${unref(heightRef)}px`,
+    };
+  });
+
+  function calcHeight() {
+    const iframe = unref(frameRef);
+    if (!iframe) {
+      return;
+    }
+    const top = headerHeightRef.value;
+    topRef.value = top;
+    heightRef.value = window.innerHeight - top;
+    const clientHeight = document.documentElement.clientHeight - top;
+    iframe.style.height = `${clientHeight}px`;
+  }
+
+  function hideLoading() {
+    loading.value = false;
+    calcHeight();
+  }
+</script>
+<style lang="less" scoped>
+  @prefix-cls: ~'@{namespace}-iframe-page';
+
+  .@{prefix-cls} {
+    .ant-spin-nested-loading {
+      position: relative;
+      height: 100%;
+
+      .ant-spin-container {
+        width: 100%;
+        height: 100%;
+        padding: 10px;
+      }
+    }
+
+    &__mask {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+    }
+
+    &__main {
+      width: 100%;
+      height: 100%;
+      overflow: hidden;
+      background-color: @component-background;
+      border: 0;
+      box-sizing: border-box;
+    }
+  }
+</style>

+<template>
+  <div
+    :class="prefixCls"
+    class="fixed inset-0 flex h-screen w-screen bg-black items-center justify-center"
+  >
+    <div
+      :class="`${prefixCls}__unlock`"
+      class="absolute top-0 left-1/2 flex pt-5 h-16 items-center justify-center sm:text-md xl:text-xl text-white flex-col cursor-pointer transform translate-x-1/2"
+      @click="handleShowForm(false)"
+      v-show="showDate"
+    >
+      <LockOutlined />
+      <span>{{ t('sys.lock.unlock') }}</span>
+    </div>
+
+    <div class="flex w-screen h-screen justify-center items-center">
+      <div :class="`${prefixCls}__hour`" class="relative mr-5 md:mr-20 w-2/5 h-2/5 md:h-4/5">
+        <span>{{ hour }}</span>
+        <span class="meridiem absolute left-5 top-5 text-md xl:text-xl" v-show="showDate">
+          {{ meridiem }}
+        </span>
+      </div>
+      <div :class="`${prefixCls}__minute w-2/5 h-2/5 md:h-4/5 `">
+        <span> {{ minute }}</span>
+      </div>
+    </div>
+    <transition name="fade-slide">
+      <div :class="`${prefixCls}-entry`" v-show="!showDate">
+        <div :class="`${prefixCls}-entry-content`">
+          <div :class="`${prefixCls}-entry__header enter-x`">
+            <img :src="userinfo.avatar || headerImg" :class="`${prefixCls}-entry__header-img`" />
+            <p :class="`${prefixCls}-entry__header-name`">
+              {{ userinfo.realName }}
+            </p>
+          </div>
+          <InputPassword
+            :placeholder="t('sys.lock.placeholder')"
+            class="enter-x"
+            v-model:value="password"
+          />
+          <span :class="`${prefixCls}-entry__err-msg enter-x`" v-if="errMsg">
+            {{ t('sys.lock.alert') }}
+          </span>
+          <div :class="`${prefixCls}-entry__footer enter-x`">
+            <a-button
+              type="link"
+              size="small"
+              class="mt-2 mr-2 enter-x"
+              :disabled="loading"
+              @click="handleShowForm(true)"
+            >
+              {{ t('common.back') }}
+            </a-button>
+            <a-button
+              type="link"
+              size="small"
+              class="mt-2 mr-2 enter-x"
+              :disabled="loading"
+              @click="goLogin"
+            >
+              {{ t('sys.lock.backToLogin') }}
+            </a-button>
+            <a-button class="mt-2" type="link" size="small" @click="unLock()" :loading="loading">
+              {{ t('sys.lock.entry') }}
+            </a-button>
+          </div>
+        </div>
+      </div>
+    </transition>
+
+    <div class="absolute bottom-5 w-full text-gray-300 xl:text-xl 2xl:text-3xl text-center enter-y">
+      <div class="text-5xl mb-4 enter-x" v-show="!showDate">
+        {{ hour }}:{{ minute }} <span class="text-3xl">{{ meridiem }}</span>
+      </div>
+      <div class="text-2xl"> {{ year }}/{{ month }}/{{ day }} {{ week }} </div>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { ref, computed } from 'vue';
+  import { Input } from 'ant-design-vue';
+  import { useUserStore } from '/@/store/modules/user';
+  import { useLockStore } from '/@/store/modules/lock';
+  import { useI18n } from '/@/hooks/web/useI18n';
+  import { useNow } from './useNow';
+  import { useDesign } from '/@/hooks/web/useDesign';
+  import { LockOutlined } from '@ant-design/icons-vue';
+  import headerImg from '/@/assets/images/header.jpg';
+
+  const InputPassword = Input.Password;
+
+  const password = ref('');
+  const loading = ref(false);
+  const errMsg = ref(false);
+  const showDate = ref(true);
+
+  const { prefixCls } = useDesign('lock-page');
+  const lockStore = useLockStore();
+  const userStore = useUserStore();
+
+  const { hour, month, minute, meridiem, year, day, week } = useNow(true);
+
+  const { t } = useI18n();
+
+  const userinfo = computed(() => {
+    return userStore.getUserInfo || {};
+  });
+
+  /**
+   * @description: unLock
+   */
+  async function unLock() {
+    if (!password.value) {
+      return;
+    }
+    let pwd = password.value;
+    try {
+      loading.value = true;
+      const res = await lockStore.unLock(pwd);
+      errMsg.value = !res;
+    } finally {
+      loading.value = false;
+    }
+  }
+
+  function goLogin() {
+    userStore.logout(true);
+    lockStore.resetLockInfo();
+  }
+
+  function handleShowForm(show = false) {
+    showDate.value = show;
+  }
+</script>
+<style lang="less" scoped>
+  @prefix-cls: ~'@{namespace}-lock-page';
+
+  .@{prefix-cls} {
+    z-index: @lock-page-z-index;
+
+    &__unlock {
+      transform: translate(-50%, 0);
+    }
+
+    &__hour,
+    &__minute {
+      display: flex;
+      font-weight: 700;
+      color: #bababa;
+      background-color: #141313;
+      border-radius: 30px;
+      justify-content: center;
+      align-items: center;
+
+      @media screen and (max-width: @screen-md) {
+        span:not(.meridiem) {
+          font-size: 160px;
+        }
+      }
+
+      @media screen and (min-width: @screen-md) {
+        span:not(.meridiem) {
+          font-size: 160px;
+        }
+      }
+
+      @media screen and (max-width: @screen-sm) {
+        span:not(.meridiem) {
+          font-size: 90px;
+        }
+      }
+      @media screen and (min-width: @screen-lg) {
+        span:not(.meridiem) {
+          font-size: 220px;
+        }
+      }
+
+      @media screen and (min-width: @screen-xl) {
+        span:not(.meridiem) {
+          font-size: 260px;
+        }
+      }
+      @media screen and (min-width: @screen-2xl) {
+        span:not(.meridiem) {
+          font-size: 320px;
+        }
+      }
+    }
+
+    &-entry {
+      position: absolute;
+      top: 0;
+      left: 0;
+      display: flex;
+      width: 100%;
+      height: 100%;
+      background-color: rgba(0, 0, 0, 0.5);
+      backdrop-filter: blur(8px);
+      justify-content: center;
+      align-items: center;
+
+      &-content {
+        width: 260px;
+      }
+
+      &__header {
+        text-align: center;
+
+        &-img {
+          width: 70px;
+          margin: 0 auto;
+          border-radius: 50%;
+        }
+
+        &-name {
+          margin-top: 5px;
+          font-weight: 500;
+          color: #bababa;
+        }
+      }
+
+      &__err-msg {
+        display: inline-block;
+        margin-top: 10px;
+        color: @error-color;
+      }
+
+      &__footer {
+        display: flex;
+        justify-content: space-between;
+      }
+    }
+  }
+</style>

+<template>
+  <div>
+    <transition name="fade-bottom" mode="out-in">
+      <LockPage v-if="getIsLock" />
+    </transition>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { computed } from 'vue';
+  import LockPage from './LockPage.vue';
+  import { useLockStore } from '/@/store/modules/lock';
+
+  const lockStore = useLockStore();
+  const getIsLock = computed(() => lockStore?.getLockInfo?.isLock ?? false);
+</script>

+import { dateUtil } from '/@/utils/dateUtil';
+import { reactive, toRefs } from 'vue';
+import { useLocaleStore } from '/@/store/modules/locale';
+import { tryOnMounted, tryOnUnmounted } from '@vueuse/core';
+
+export function useNow(immediate = true) {
+  const localeStore = useLocaleStore();
+  const localData = dateUtil.localeData(localeStore.getLocale);
+  let timer: IntervalHandle;
+
+  const state = reactive({
+    year: 0,
+    month: 0,
+    week: '',
+    day: 0,
+    hour: '',
+    minute: '',
+    second: 0,
+    meridiem: '',
+  });
+
+  const update = () => {
+    const now = dateUtil();
+
+    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') + 1;
+    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,
+  };
+}

+<template>
+  <template v-if="getShow">
+    <LoginFormTitle class="enter-x" />
+    <Form class="p-4 enter-x" :model="formData" :rules="getFormRules" ref="formRef">
+      <FormItem name="mobile" class="enter-x">
+        <Input size="large" v-model:value="formData.mobile" :placeholder="t('sys.login.mobile')" />
+      </FormItem>
+      <FormItem name="sms" class="enter-x">
+        <CountdownInput
+          :sendCodeApi="sendLoginSms"
+          size="large"
+          v-model:value="formData.sms"
+          :placeholder="t('sys.login.smsCode')"
+        />
+      </FormItem>
+      <FormItem name="password" class="enter-x">
+        <InputPassword
+          size="large"
+          v-model:value="formData.password"
+          visibilityToggle
+          :placeholder="t('sys.login.password')"
+        />
+      </FormItem>
+
+      <FormItem class="enter-x">
+        <Button type="primary" size="large" block @click="handleReset" :loading="loading">
+          {{ t('common.resetText') }}
+        </Button>
+        <Button size="large" block class="mt-4" @click="handleBackLogin">
+          {{ t('sys.login.backSignIn') }}
+        </Button>
+      </FormItem>
+    </Form>
+  </template>
+</template>
+<script lang="ts" setup>
+  import { reactive, ref, computed, unref } from 'vue';
+  import LoginFormTitle from './LoginFormTitle.vue';
+  import { Form, Input, Button, message } from 'ant-design-vue';
+  import { CountdownInput } from '/@/components/CountDown';
+  import { useI18n } from '/@/hooks/web/useI18n';
+  import { useLoginState, useFormRules, LoginStateEnum } from './useLogin';
+  import { passwordResetCode, forgetPasswordApi } from '/@/api/sys/user';
+  const FormItem = Form.Item;
+  const { t } = useI18n();
+  const { handleBackLogin, getLoginState, setLoginState } = useLoginState();
+  const { getFormRules } = useFormRules();
+
+  const formRef = ref();
+  const loading = ref(false);
+  const InputPassword = Input.Password;
+  const formData = reactive({
+    mobile: '',
+    sms: '',
+    password: '',
+  });
+
+  const getShow = computed(() => unref(getLoginState) === LoginStateEnum.RESET_PASSWORD);
+
+  async function handleReset() {
+    const form = unref(formRef);
+    if (!form) return;
+    const value = await form.validate();
+    if (!value) return;
+    const { mobile, password, sms } = value;
+    try {
+      loading.value = true;
+      await forgetPasswordApi({
+        phoneNumber: mobile,
+        userId: sms,
+        password,
+      });
+    } catch (e) {
+      return;
+    } finally {
+      loading.value = false;
+    }
+    message.success('密码重置成功');
+    await form.resetFields();
+    setLoginState(LoginStateEnum.LOGIN);
+  }
+
+  async function sendLoginSms() {
+    const reg =
+      /^[1](([3][0-9])|([4][0,1,4-9])|([5][0-3,5-9])|([6][2,5,6,7])|([7][0-8])|([8][0-9])|([9][0-3,5-9]))[0-9]{8}$/;
+    if (reg.test(formData.mobile)) {
+      const sendRes = await passwordResetCode(formData.mobile);
+      console.log(sendRes);
+      if (sendRes === '') {
+        console.log('发送成功了');
+        return true;
+      }
+      return false;
+    } else {
+      message.error('请输入正确手机号码');
+    }
+  }
+</script>

+<template>
+  <div :class="prefixCls" class="relative w-full h-full px-4">
+    <AppLocalePicker
+      class="absolute text-white top-4 right-4 enter-x xl:text-gray-600"
+      :showText="false"
+      v-if="!sessionTimeout && showLocale"
+    />
+    <AppDarkModeToggle class="absolute top-3 right-7 enter-x" v-if="!sessionTimeout" />
+
+    <span class="-enter-x xl:hidden">
+      <AppLogo :alwaysShowTitle="true" />
+    </span>
+
+    <div class="container relative h-full py-2 mx-auto sm:px-10">
+      <div class="flex h-full">
+        <div class="hidden min-h-full pl-4 mr-4 xl:flex xl:flex-col xl:w-6/12">
+          <AppLogo class="-enter-x" />
+          <div class="my-auto">
+            <img
+              :alt="title"
+              src="../../../assets/svg/thingskit-login-background.svg"
+              class="w-1/2 -mt-16 -enter-x"
+            />
+            <div class="mt-10 font-medium text-white -enter-x">
+              <span class="inline-block mt-4 text-3xl"> {{ t('sys.login.signInTitle') }}</span>
+            </div>
+            <div class="mt-5 font-normal text-white text-md dark:text-gray-500 -enter-x">
+              {{ t('sys.login.signInDesc') }}
+            </div>
+          </div>
+        </div>
+        <div class="flex w-full h-full py-5 xl:h-auto xl:py-0 xl:my-0 xl:w-6/12">
+          <div
+            :class="`${prefixCls}-form`"
+            class="relative w-full px-5 py-8 mx-auto my-auto rounded-md shadow-md xl:ml-16 xl:bg-transparent sm:px-8 xl:p-4 xl:shadow-none sm:w-3/4 lg:w-2/4 xl:w-auto enter-x"
+          >
+            <LoginForm />
+            <ForgetPasswordForm />
+            <RegisterForm />
+            <MobileForm />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { computed } from 'vue';
+  import { AppLogo } from '/@/components/Application';
+  import { AppLocalePicker, AppDarkModeToggle } from '/@/components/Application';
+  import LoginForm from './LoginForm.vue';
+  import ForgetPasswordForm from './ForgetPasswordForm.vue';
+  import RegisterForm from './RegisterForm.vue';
+  import MobileForm from './MobileForm.vue';
+  import { useGlobSetting } from '/@/hooks/setting';
+  import { useI18n } from '/@/hooks/web/useI18n';
+  import { useDesign } from '/@/hooks/web/useDesign';
+  import { useLocaleStore } from '/@/store/modules/locale';
+  defineProps({
+    sessionTimeout: {
+      type: Boolean,
+    },
+  });
+
+  const globSetting = useGlobSetting();
+  const { prefixCls } = useDesign('login');
+  const { t } = useI18n();
+  const localeStore = useLocaleStore();
+  const showLocale = localeStore.getShowPicker;
+  const title = computed(() => globSetting?.title ?? '');
+</script>
+<style lang="less">
+  @prefix-cls: ~'@{namespace}-login';
+  @logo-prefix-cls: ~'@{namespace}-app-logo';
+  @countdown-prefix-cls: ~'@{namespace}-countdown-input';
+  @dark-bg: #293146;
+
+  html[data-theme='dark'] {
+    .@{prefix-cls} {
+      background-color: @dark-bg;
+
+      &::before {
+        background-image: url(/@/assets/svg/login-bg-dark.svg);
+      }
+
+      .ant-input,
+      .ant-input-password {
+        background-color: #232a3b;
+      }
+
+      .ant-btn:not(.ant-btn-link):not(.ant-btn-primary) {
+        border: 1px solid #4a5569;
+      }
+
+      &-form {
+        background: transparent !important;
+      }
+
+      .app-iconify {
+        color: #fff;
+      }
+    }
+
+    input.fix-auto-fill,
+    .fix-auto-fill input {
+      -webkit-text-fill-color: #c9d1d9 !important;
+      box-shadow: inherit !important;
+    }
+  }
+
+  .@{prefix-cls} {
+    min-height: 100%;
+    overflow: hidden;
+    @media (max-width: @screen-xl) {
+      background-color: #293146;
+
+      .@{prefix-cls}-form {
+        background-color: #fff;
+      }
+    }
+
+    &::before {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      margin-left: -48%;
+      background-image: url(/@/assets/svg/login-bg.svg);
+      background-position: 100%;
+      background-repeat: no-repeat;
+      background-size: auto 100%;
+      content: '';
+      @media (max-width: @screen-xl) {
+        display: none;
+      }
+    }
+
+    .@{logo-prefix-cls} {
+      position: absolute;
+      top: 12px;
+      height: 30px;
+
+      &__title {
+        font-size: 16px;
+        color: #fff;
+      }
+
+      img {
+        width: 32px;
+      }
+    }
+
+    .container {
+      .@{logo-prefix-cls} {
+        display: flex;
+        width: 60%;
+        height: 80px;
+
+        &__title {
+          font-size: 24px;
+          color: #fff;
+        }
+
+        img {
+          width: 48px;
+        }
+      }
+    }
+
+    &-sign-in-way {
+      .anticon {
+        font-size: 22px;
+        color: #888;
+        cursor: pointer;
+
+        &:hover {
+          color: @primary-color;
+        }
+      }
+    }
+
+    input:not([type='checkbox']) {
+      min-width: 360px;
+
+      @media (max-width: @screen-xl) {
+        min-width: 320px;
+      }
+
+      @media (max-width: @screen-lg) {
+        min-width: 260px;
+      }
+
+      @media (max-width: @screen-md) {
+        min-width: 240px;
+      }
+
+      @media (max-width: @screen-sm) {
+        min-width: 160px;
+      }
+    }
+
+    .@{countdown-prefix-cls} input {
+      min-width: unset;
+    }
+
+    .ant-divider-inner-text {
+      font-size: 12px;
+      color: @text-color-secondary;
+    }
+  }
+</style>

+<template>
+  <LoginFormTitle v-show="getShow" class="enter-x" />
+  <Form
+    class="p-4 enter-x"
+    :model="formData"
+    :rules="getFormRules"
+    ref="formRef"
+    v-show="getShow"
+    @keypress.enter="handleLogin"
+  >
+    <FormItem name="account" class="enter-x">
+      <Input
+        size="large"
+        v-model:value="formData.account"
+        :placeholder="t('sys.login.userName')"
+        class="fix-auto-fill"
+      />
+    </FormItem>
+    <FormItem name="password" class="enter-x">
+      <InputPassword
+        size="large"
+        visibilityToggle
+        v-model:value="formData.password"
+        :placeholder="t('sys.login.password')"
+      />
+    </FormItem>
+
+    <ARow class="enter-x">
+      <ACol :span="12">
+        <FormItem>
+          <Checkbox v-model:checked="rememberMe" size="small">
+            {{ t('sys.login.rememberMe') }}
+          </Checkbox>
+        </FormItem>
+      </ACol>
+      <ACol :span="12">
+        <FormItem style="text-align: right">
+          <Button type="link" size="small" @click="setLoginState(LoginStateEnum.RESET_PASSWORD)">
+            {{ t('sys.login.forgetPassword') }}
+          </Button>
+        </FormItem>
+      </ACol>
+    </ARow>
+
+    <FormItem class="enter-x">
+      <Button type="primary" size="large" block @click="handleLogin" :loading="loading">
+        {{ t('sys.login.loginButton') }}
+      </Button>
+    </FormItem>
+    <ARow class="enter-x flex justify-between">
+      <ACol :md="11" :xs="24">
+        <Button block @click="setLoginState(LoginStateEnum.LOGIN)">
+          {{ t('sys.login.userNameInFormTitle') }}
+        </Button>
+      </ACol>
+      <ACol :md="11" :xs="24">
+        <Button block @click="setLoginState(LoginStateEnum.MOBILE)">
+          {{ t('sys.login.mobileSignInFormTitle') }}
+        </Button>
+      </ACol>
+    </ARow>
+  </Form>
+</template>
+<script lang="ts" setup>
+  import { reactive, ref, unref, computed } from 'vue';
+  import { Checkbox, Form, Input, Row, Col, Button } from 'ant-design-vue';
+  import LoginFormTitle from './LoginFormTitle.vue';
+
+  import { useI18n } from '/@/hooks/web/useI18n';
+  import { useMessage } from '/@/hooks/web/useMessage';
+
+  import { useUserStore } from '/@/store/modules/user';
+  import { LoginStateEnum, useLoginState, useFormRules, useFormValid } from './useLogin';
+  import { useDesign } from '/@/hooks/web/useDesign';
+  import { getPlatForm } from '/@/api/oem';
+  import { createLocalStorage } from '/@/utils/cache';
+
+  const ACol = Col;
+  const ARow = Row;
+  const FormItem = Form.Item;
+  const InputPassword = Input.Password;
+  const { t } = useI18n();
+  const { notification, createMessage } = useMessage();
+  const { prefixCls } = useDesign('login');
+  const userStore = useUserStore();
+
+  const { setLoginState, getLoginState } = useLoginState();
+  const { getFormRules } = useFormRules();
+  const storage = createLocalStorage();
+  const formRef = ref();
+  const loading = ref(false);
+  const rememberMe = ref(false);
+  const userInfo = storage.get('userInfo');
+  const formData = reactive({
+    account: userInfo?.account ?? '',
+    password: userInfo?.password ?? '',
+  });
+
+  const { validForm } = useFormValid(formRef);
+
+  const getShow = computed(() => unref(getLoginState) === LoginStateEnum.LOGIN);
+
+  async function handleLogin() {
+    const data = await validForm();
+    if (!data) return;
+    if (unref(rememberMe)) {
+      storage.set('userInfo', formData);
+    } else {
+      storage.set('userInfo', null);
+    }
+    loading.value = true;
+    const userInfo = await userStore
+      .login({
+        password: data.password,
+        username: data.account,
+        mode: 'modal', //不要默认的错误提示
+      })
+      .catch((data) => {
+        //登录失败返回的html,所以提示框什么都没有
+        //去掉提示框
+        // createMessage.error(data.message);
+      });
+    if (userInfo) {
+      notification.success({
+        message: t('sys.login.loginSuccessTitle'),
+        description: `${t('sys.login.loginSuccessDesc')}: ${userInfo.realName}`,
+        duration: 3,
+      });
+      const res = await getPlatForm();
+      storage.set('platformInfo', res);
+      userStore.setPlatInfo(res);
+      // 设置icon
+      let link = (document.querySelector("link[rel*='icon']") ||
+        document.createElement('link')) as HTMLLinkElement;
+      link.type = 'image/x-icon';
+      link.rel = 'shortcut icon';
+      link.href = res.icon ?? '/favicon.ico';
+      document.getElementsByTagName('head')[0].appendChild(link);
+
+      var _hmt = _hmt || [];
+      (function () {
+        var hm = document.createElement('script');
+        hm.src = 'https://hm.baidu.com/hm.js?909f8e22a361b08e4f5ea3918500aede';
+        var s = document.getElementsByTagName('script')[0];
+        s.parentNode.insertBefore(hm, s);
+      })();
+    }
+    loading.value = false;
+  }
+</script>

+<template>
+  <h2 class="mb-3 text-2xl font-bold text-center xl:text-3xl enter-x xl:text-left">
+    {{ getFormTitle }}
+  </h2>
+</template>
+<script lang="ts" setup>
+  import { computed, unref } from 'vue';
+  import { useI18n } from '/@/hooks/web/useI18n';
+  import { LoginStateEnum, useLoginState } from './useLogin';
+
+  const { t } = useI18n();
+
+  const { getLoginState } = useLoginState();
+
+  const getFormTitle = computed(() => {
+    const titleObj = {
+      [LoginStateEnum.RESET_PASSWORD]: t('sys.login.forgetFormTitle'),
+      [LoginStateEnum.LOGIN]: t('sys.login.signInFormTitle'),
+      [LoginStateEnum.REGISTER]: t('sys.login.signUpFormTitle'),
+      [LoginStateEnum.MOBILE]: t('sys.login.mobileSignInFormTitle'),
+      [LoginStateEnum.QR_CODE]: t('sys.login.qrSignInFormTitle'),
+    };
+    return titleObj[unref(getLoginState)];
+  });
+</script>

+<template>
+  <template v-if="getShow">
+    <LoginFormTitle class="enter-x" />
+    <Form class="p-4 enter-x" :model="formData" :rules="getFormRules" ref="formRef">
+      <FormItem name="phoneNumber" class="enter-x">
+        <Input
+          size="large"
+          v-model:value="formData.phoneNumber"
+          :placeholder="t('sys.login.mobile')"
+          class="fix-auto-fill"
+        />
+      </FormItem>
+      <FormItem name="code" class="enter-x">
+        <CountdownInput
+          :sendCodeApi="sendLoginSms"
+          size="large"
+          class="fix-auto-fill"
+          v-model:value="formData.code"
+          :placeholder="t('sys.login.smsCode')"
+        />
+      </FormItem>
+
+      <FormItem class="enter-x">
+        <Button type="primary" size="large" block @click="handleLogin" :loading="loading">
+          {{ t('sys.login.loginButton') }}
+        </Button>
+        <Button size="large" block class="mt-4" @click="handleBackLogin">
+          {{ t('sys.login.backSignIn') }}
+        </Button>
+      </FormItem>
+    </Form>
+  </template>
+</template>
+<script lang="ts" setup>
+  import { reactive, ref, computed, unref, toRaw } from 'vue';
+  import { Form, Input, Button, message } from 'ant-design-vue';
+  import { CountdownInput } from '/@/components/CountDown';
+  import LoginFormTitle from './LoginFormTitle.vue';
+  import { useI18n } from '/@/hooks/web/useI18n';
+  import { useLoginState, useFormRules, useFormValid, LoginStateEnum } from './useLogin';
+  import { SendLoginSmsCode } from '/@/api/sys/user';
+  import { useUserStore } from '/@/store/modules/user';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  const { notification } = useMessage();
+
+  const FormItem = Form.Item;
+  const { t } = useI18n();
+  const { handleBackLogin, getLoginState } = useLoginState();
+  const { getFormRules } = useFormRules();
+
+  const formRef = ref();
+  const loading = ref(false);
+
+  const formData = reactive({
+    phoneNumber: '',
+    code: '',
+  });
+
+  async function sendLoginSms() {
+    const reg =
+      /^[1](([3][0-9])|([4][0,1,4-9])|([5][0-3,5-9])|([6][2,5,6,7])|([7][0-8])|([8][0-9])|([9][0-3,5-9]))[0-9]{8}$/;
+    if (reg.test(formData.phoneNumber)) {
+      const sendRes = await SendLoginSmsCode(formData.phoneNumber);
+      if (!sendRes) {
+        message.error('发送失败');
+        return false;
+      }
+      return true;
+    } else {
+      message.error('请输入正确手机号码');
+    }
+  }
+
+  const { validForm } = useFormValid(formRef);
+  const userStore = useUserStore();
+  const getShow = computed(() => unref(getLoginState) === LoginStateEnum.MOBILE);
+
+  async function handleLogin() {
+    const data = await validForm();
+    if (!data) return;
+
+    const userInfo = await userStore.smsCodelogin(
+      toRaw({
+        phoneNumber: data.phoneNumber,
+        code: data.code,
+        mode: 'none', //不要默认的错误提示
+      })
+    );
+    if (userInfo) {
+      notification.success({
+        message: t('sys.login.loginSuccessTitle'),
+        description: `${t('sys.login.loginSuccessDesc')}: ${userInfo.realName}`,
+        duration: 3,
+      });
+    }
+  }
+</script>

+<template>
+  <template v-if="getShow">
+    <LoginFormTitle class="enter-x" />
+    <div class="enter-x min-w-64 min-h-64">
+      <QrCode
+        :value="qrCodeUrl"
+        class="enter-x flex justify-center xl:justify-start"
+        :width="280"
+      />
+      <Divider class="enter-x">{{ t('sys.login.scanSign') }}</Divider>
+      <Button size="large" block class="mt-4 enter-x" @click="handleBackLogin">
+        {{ t('sys.login.backSignIn') }}
+      </Button>
+    </div>
+  </template>
+</template>
+<script lang="ts" setup>
+  import { computed, unref } from 'vue';
+  import LoginFormTitle from './LoginFormTitle.vue';
+  import { Button, Divider } from 'ant-design-vue';
+  import { QrCode } from '/@/components/Qrcode/index';
+  import { useI18n } from '/@/hooks/web/useI18n';
+  import { useLoginState, LoginStateEnum } from './useLogin';
+
+  const qrCodeUrl = 'https://vvbin.cn/next/login';
+
+  const { t } = useI18n();
+  const { handleBackLogin, getLoginState } = useLoginState();
+
+  const getShow = computed(() => unref(getLoginState) === LoginStateEnum.QR_CODE);
+</script>

+<template>
+  <template v-if="getShow">
+    <LoginFormTitle class="enter-x" />
+    <Form class="p-4 enter-x" :model="formData" :rules="getFormRules" ref="formRef">
+      <FormItem name="account" class="enter-x">
+        <Input
+          class="fix-auto-fill"
+          size="large"
+          v-model:value="formData.account"
+          :placeholder="t('sys.login.userName')"
+        />
+      </FormItem>
+      <FormItem name="mobile" class="enter-x">
+        <Input
+          size="large"
+          v-model:value="formData.mobile"
+          :placeholder="t('sys.login.mobile')"
+          class="fix-auto-fill"
+        />
+      </FormItem>
+      <FormItem name="sms" class="enter-x">
+        <CountdownInput
+          size="large"
+          class="fix-auto-fill"
+          v-model:value="formData.sms"
+          :placeholder="t('sys.login.smsCode')"
+        />
+      </FormItem>
+      <FormItem name="password" class="enter-x">
+        <StrengthMeter
+          size="large"
+          v-model:value="formData.password"
+          :placeholder="t('sys.login.password')"
+        />
+      </FormItem>
+      <FormItem name="confirmPassword" class="enter-x">
+        <InputPassword
+          size="large"
+          visibilityToggle
+          v-model:value="formData.confirmPassword"
+          :placeholder="t('sys.login.confirmPassword')"
+        />
+      </FormItem>
+
+      <FormItem class="enter-x" name="policy">
+        <!-- No logic, you need to deal with it yourself -->
+        <Checkbox v-model:checked="formData.policy" size="small">
+          {{ t('sys.login.policy') }}
+        </Checkbox>
+      </FormItem>
+
+      <Button
+        type="primary"
+        class="enter-x"
+        size="large"
+        block
+        @click="handleRegister"
+        :loading="loading"
+      >
+        {{ t('sys.login.registerButton') }}
+      </Button>
+      <Button size="large" block class="mt-4 enter-x" @click="handleBackLogin">
+        {{ t('sys.login.backSignIn') }}
+      </Button>
+    </Form>
+  </template>
+</template>
+<script lang="ts" setup>
+  import { reactive, ref, unref, computed } from 'vue';
+  import LoginFormTitle from './LoginFormTitle.vue';
+  import { Form, Input, Button, Checkbox } from 'ant-design-vue';
+  import { StrengthMeter } from '/@/components/StrengthMeter';
+  import { CountdownInput } from '/@/components/CountDown';
+  import { useI18n } from '/@/hooks/web/useI18n';
+  import { useLoginState, useFormRules, useFormValid, LoginStateEnum } from './useLogin';
+
+  const FormItem = Form.Item;
+  const InputPassword = Input.Password;
+  const { t } = useI18n();
+  const { handleBackLogin, getLoginState } = useLoginState();
+
+  const formRef = ref();
+  const loading = ref(false);
+
+  const formData = reactive({
+    account: '',
+    password: '',
+    confirmPassword: '',
+    mobile: '',
+    sms: '',
+    policy: false,
+  });
+
+  const { getFormRules } = useFormRules(formData);
+  const { validForm } = useFormValid(formRef);
+
+  const getShow = computed(() => unref(getLoginState) === LoginStateEnum.REGISTER);
+
+  async function handleRegister() {
+    const data = await validForm();
+    if (!data) return;
+    console.log(data);
+  }
+</script>

+<template>
+  <transition>
+    <div :class="prefixCls">
+      <Login sessionTimeout />
+    </div>
+  </transition>
+</template>
+<script lang="ts" setup>
+  import { onBeforeUnmount, onMounted, ref } from 'vue';
+  import Login from './Login.vue';
+  import { useDesign } from '/@/hooks/web/useDesign';
+  import { useUserStore } from '/@/store/modules/user';
+  import { usePermissionStore } from '/@/store/modules/permission';
+  import { useAppStore } from '/@/store/modules/app';
+  import { PermissionModeEnum } from '/@/enums/appEnum';
+
+  const { prefixCls } = useDesign('st-login');
+  const userStore = useUserStore();
+  const permissionStore = usePermissionStore();
+  const appStore = useAppStore();
+  const userId = ref<Nullable<number | string>>(0);
+
+  const isBackMode = () => {
+    return appStore.getProjectConfig.permissionMode === PermissionModeEnum.BACK;
+  };
+
+  onMounted(() => {
+    // 记录当前的UserId
+    userId.value = userStore.getUserInfo?.userId;
+    console.log('Mounted', userStore.getUserInfo);
+  });
+
+  onBeforeUnmount(() => {
+    if (userId.value && userId.value !== userStore.getUserInfo.userId) {
+      // 登录的不是同一个用户，刷新整个页面以便丢弃之前用户的页面状态
+      document.location.reload();
+    } else if (isBackMode() && permissionStore.getLastBuildMenuTime === 0) {
+      // 后台权限模式下，没有成功加载过菜单，就重新加载整个页面。这通常发生在会话过期后按F5刷新整个页面后载入了本模块这种场景
+      document.location.reload();
+    }
+  });
+</script>
+<style lang="less" scoped>
+  @prefix-cls: ~'@{namespace}-st-login';
+
+  .@{prefix-cls} {
+    position: fixed;
+    z-index: 9999999;
+    width: 100%;
+    height: 100%;
+    background: @component-background;
+  }
+</style>

+import type { ValidationRule } from 'ant-design-vue/lib/form/Form';
+import type { RuleObject } from 'ant-design-vue/lib/form/interface';
+import { ref, computed, unref, Ref } from 'vue';
+import { useI18n } from '/@/hooks/web/useI18n';
+
+export enum LoginStateEnum {
+  LOGIN,
+  REGISTER,
+  RESET_PASSWORD,
+  MOBILE,
+  QR_CODE,
+}
+
+const currentState = ref(LoginStateEnum.LOGIN);
+
+export function useLoginState() {
+  function setLoginState(state: LoginStateEnum) {
+    currentState.value = state;
+  }
+
+  const getLoginState = computed(() => currentState.value);
+
+  function handleBackLogin() {
+    setLoginState(LoginStateEnum.LOGIN);
+  }
+
+  return { setLoginState, getLoginState, handleBackLogin };
+}
+
+export function useFormValid<T extends Object = any>(formRef: Ref<any>) {
+  async function validForm() {
+    const form = unref(formRef);
+    if (!form) return;
+    const data = await form.validate();
+    return data as T;
+  }
+
+  return { validForm };
+}
+
+export function useFormRules(formData?: Recordable) {
+  const { t } = useI18n();
+
+  const getAccountFormRule = computed(() => createRule(t('sys.login.accountPlaceholder')));
+  const getPasswordFormRule = computed(() => createRule(t('sys.login.passwordPlaceholder')));
+  const getSmsFormRule = computed(() => createRule(t('sys.login.smsPlaceholder')));
+  const getMobileFormRule = computed(() => createRule(t('sys.login.mobilePlaceholder')));
+
+  const validatePolicy = async (_: RuleObject, value: boolean) => {
+    return !value ? Promise.reject(t('sys.login.policyPlaceholder')) : Promise.resolve();
+  };
+
+  const validateConfirmPassword = (password: string) => {
+    return async (_: RuleObject, value: string) => {
+      if (!value) {
+        return Promise.reject(t('sys.login.passwordPlaceholder'));
+      }
+      if (value !== password) {
+        return Promise.reject(t('sys.login.diffPwd'));
+      }
+      return Promise.resolve();
+    };
+  };
+
+  const getFormRules = computed((): { [k: string]: ValidationRule | ValidationRule[] } => {
+    const accountFormRule = unref(getAccountFormRule);
+    const passwordFormRule = unref(getPasswordFormRule);
+    const smsFormRule = unref(getSmsFormRule);
+    const mobileFormRule = unref(getMobileFormRule);
+
+    const mobileRule = {
+      sms: smsFormRule,
+      mobile: mobileFormRule,
+    };
+    switch (unref(currentState)) {
+      // register form rules
+      case LoginStateEnum.REGISTER:
+        return {
+          account: accountFormRule,
+          password: passwordFormRule,
+          confirmPassword: [
+            { validator: validateConfirmPassword(formData?.password), trigger: 'change' },
+          ],
+          policy: [{ validator: validatePolicy, trigger: 'change' }],
+          ...mobileRule,
+        };
+
+      // reset password form rules
+      case LoginStateEnum.RESET_PASSWORD:
+        return {
+          password: passwordFormRule,
+          ...mobileRule,
+        };
+
+      // mobile form rules
+      case LoginStateEnum.MOBILE:
+        return mobileRule;
+
+      // login form rules
+      default:
+        return {
+          account: accountFormRule,
+          password: passwordFormRule,
+        };
+    }
+  });
+  return { getFormRules };
+}
+
+function createRule(message: string) {
+  return [
+    {
+      required: true,
+      message,
+      trigger: 'change',
+    },
+  ];
+}

+<template>
+  <div></div>
+</template>
+<script lang="ts" setup>
+  import { unref } from 'vue';
+  import { useRouter } from 'vue-router';
+
+  const { currentRoute, replace } = useRouter();
+
+  const { params, query } = unref(currentRoute);
+  const { path, _redirect_type = 'path' } = params;
+
+  Reflect.deleteProperty(params, '_redirect_type');
+  Reflect.deleteProperty(params, 'path');
+
+  const _path = Array.isArray(path) ? path.join('/') : path;
+
+  if (_redirect_type === 'name') {
+    replace({
+      name: _path,
+      query,
+      params,
+    });
+  } else {
+    replace({
+      path: _path.startsWith('/') ? _path : '/' + _path,
+      query,
+    });
+  }
+</script>

@@ -79,8 +79,10 @@
       if (updateFn) updateFn();
     });
   }
+
   const itemResize = (i: string, newH: number, newW: number, newHPx: number, newWPx: number) => {
     updateSize(i, newH, newW, newHPx, newWPx);
+    console.log({ i, newH, newW, newHPx, newWPx });
   };
 
   const itemResized = (i: string, newH: number, newW: number, newHPx: number, newWPx: number) => {