refactor: refactor store

Vben

2021-04-10 215d8bab380728164d7fe2958c2d2d1151fce892

 src/views/sys/login/Login.vue

@@ -4,6 +4,7 @@
      class="absolute top-4 right-4 enter-x text-white xl:text-gray-600"
      :showText="false"
    />
    <AppDarkModeToggle class="absolute top-3 right-7 enter-x" />

    <span class="-enter-x xl:hidden">
      <AppLogo :alwaysShowTitle="true" />
@@ -29,7 +30,8 @@
        </div>
        <div class="h-full xl:h-auto flex py-5 xl:py-0 xl:my-0 w-full xl:w-6/12">
          <div
            class="my-auto mx-auto xl:ml-20 bg-white xl:bg-transparent px-5 py-8 sm:px-8 xl:p-0 rounded-md shadow-md xl:shadow-none w-full sm:w-3/4 lg:w-2/4 xl:w-auto enter-x relative"
            :class="`${prefixCls}-form`"
            class="my-auto mx-auto xl:ml-20 xl:bg-transparent px-5 py-8 sm:px-8 xl:p-4 rounded-md shadow-md xl:shadow-none w-full sm:w-3/4 lg:w-2/4 xl:w-auto enter-x relative"
          >
            <LoginForm />
            <ForgetPasswordForm />
@@ -46,16 +48,17 @@
  import { defineComponent, computed } from 'vue';

  import { AppLogo } from '/@/components/Application';
  import { AppLocalePicker } 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 QrCodeForm from './QrCodeForm.vue';

  import { useGlobSetting, useProjectSetting } from '/@/hooks/setting';
  import { useGlobSetting } from '/@/hooks/setting';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { useDesign } from '/@/hooks/web/useDesign';
  import { useLocaleStore } from '/@/store/modules/locale';

  export default defineComponent({
    name: 'Login',
@@ -67,18 +70,19 @@
      MobileForm,
      QrCodeForm,
      AppLocalePicker,
      AppDarkModeToggle,
    },
    setup() {
      const globSetting = useGlobSetting();
      const { prefixCls } = useDesign('login');
      const { locale } = useProjectSetting();
      const { t } = useI18n();
      const localeStore = useLocaleStore();

      return {
        t,
        prefixCls,
        title: computed(() => globSetting?.title ?? ''),
        showLocale: computed(() => locale.show),
        showLocale: localeStore.getShowPicker,
      };
    },
  });
@@ -87,10 +91,43 @@
  @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: @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;
      }
    }
  }

  .@{prefix-cls} {
    overflow: hidden;
    @media (max-width: @screen-xl) {
      background: linear-gradient(180deg, #1c3faa, #1c3faa);
      background: #293146;

      .@{prefix-cls}-form {
        background: #fff;
      }
    }

    &::before {
@@ -166,7 +203,7 @@
      }

      @media (max-width: @screen-sm) {
        min-width: 260px;
        min-width: 180px;
      }
    }
    .@{countdown-prefix-cls} input {