+
+
+
+
+
+
+
diff --git a/src/components/CountDown/src/useCountdown.ts b/src/components/CountDown/src/useCountdown.ts
new file mode 100644
index 00000000..f6ed67dc
--- /dev/null
+++ b/src/components/CountDown/src/useCountdown.ts
@@ -0,0 +1,51 @@
+import { ref, unref } from 'vue';
+import { tryOnUnmounted } from '/@/utils/helper/vueHelper';
+
+export function useCountdown(count: number) {
+ const currentCount = ref(count);
+
+ const isStart = ref(false);
+
+ let timerId: ReturnType
+
{
const { disabled } = props;
- if (disabled) return null;
+ if (disabled) return -1;
const innerValue = unref(innerValueRef);
- const score = innerValue ? zxcvbn(unref(innerValueRef)).score : null;
+ const score = innerValue ? zxcvbn(unref(innerValueRef)).score : -1;
emit('score-change', score);
return score;
});
@@ -57,6 +56,7 @@
watchEffect(() => {
innerValueRef.value = props.value || '';
});
+
watch(
() => unref(innerValueRef),
(val) => {
@@ -77,14 +77,12 @@
@prefix-cls: ~'@{namespace}-strength-meter';
.@{prefix-cls} {
- position: relative;
-
&-bar {
position: relative;
- height: 4px;
+ height: 6px;
margin: 10px auto 6px;
background: @disabled-color;
- border-radius: 3px;
+ border-radius: 6px;
&::before,
&::after {
diff --git a/src/design/ant/index.less b/src/design/ant/index.less
index 6b5a132e..9483cc72 100644
--- a/src/design/ant/index.less
+++ b/src/design/ant/index.less
@@ -13,10 +13,8 @@
}
}
-body {
- .anticon:not(.app-iconify) {
- vertical-align: 0.1em;
- }
+span.anticon:not(.app-iconify) {
+ vertical-align: 0.125em;
}
.ant-back-top {
diff --git a/src/design/var/breakpoint.less b/src/design/var/breakpoint.less
index a38617a7..cc6af9ec 100644
--- a/src/design/var/breakpoint.less
+++ b/src/design/var/breakpoint.less
@@ -2,37 +2,17 @@
// ==============屏幕断点============
// =================================
-// Extra small screen / phone
-@screen-xs: 480px;
-@screen-xs-min: @screen-xs;
-
// Small screen / tablet
-@screen-sm: 576px;
-@screen-sm-min: @screen-sm;
+@screen-sm: 640px;
// Medium screen / desktop
@screen-md: 768px;
-@screen-md-min: @screen-md;
// Large screen / wide desktop
-@screen-lg: 992px;
-@screen-lg-min: @screen-lg;
+@screen-lg: 1024px;
// Extra large screen / full hd
-@screen-xl: 1200px;
-@screen-xl-min: @screen-xl;
+@screen-xl: 1280px;
// Extra extra large screen / large desktop
-@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);
+@screen-2xl: 1536px;
diff --git a/src/layouts/default/header/components/user-dropdown/index.vue b/src/layouts/default/header/components/user-dropdown/index.vue
index d00d1ecc..dfa3d0d1 100644
--- a/src/layouts/default/header/components/user-dropdown/index.vue
+++ b/src/layouts/default/header/components/user-dropdown/index.vue
@@ -3,7 +3,7 @@
![]()
- {{ getUserInfo.realName }}
+ {{ getUserInfo.realName }}
diff --git a/src/locales/lang/en/component/countdown.ts b/src/locales/lang/en/component/countdown.ts
new file mode 100644
index 00000000..4663ac75
--- /dev/null
+++ b/src/locales/lang/en/component/countdown.ts
@@ -0,0 +1,4 @@
+export default {
+ normalText: 'Get SMS code',
+ sendText: 'Reacquire in {0}s',
+};
diff --git a/src/locales/lang/en/sys/login.ts b/src/locales/lang/en/sys/login.ts
index 2a4e4856..33aaf845 100644
--- a/src/locales/lang/en/sys/login.ts
+++ b/src/locales/lang/en/sys/login.ts
@@ -1,13 +1,38 @@
export default {
- loginButton: 'Login',
- autoLogin: 'AutoLogin',
- forgetPassword: 'Forget Password',
+ backSignIn: 'Back sign in',
+ mobileSignInFormTitle: 'Mobile sign in',
+ qrSignInFormTitle: 'Qr code sign in',
+ signInFormTitle: 'Sign in',
+ signUpFormTitle: 'Sign up',
+ forgetFormTitle: 'Reset password',
+
+ signInTitle: 'Backstage management system',
+ signInDesc: 'Enter your personal details and get started!',
+ policy: 'I agree to the xxx Privacy Policy',
+ scanSign: `scanning the code to complete the login`,
+
+ loginButton: 'Sign in',
+ registerButton: 'Sign up',
+ rememberMe: 'Remember me',
+ forgetPassword: 'Forget Password?',
+ otherSignIn: 'Sign in with',
// notify
loginSuccessTitle: 'Login successful',
loginSuccessDesc: 'Welcome back',
// placeholder
- accountPlaceholder: 'Please input Username',
- passwordPlaceholder: 'Please input Password',
+ accountPlaceholder: 'Please input username',
+ passwordPlaceholder: 'Please input password',
+ smsPlaceholder: 'Please input sms code',
+ mobilePlaceholder: 'Please input mobile',
+ policyPlaceholder: 'Register after checking',
+ diffPwd: 'The two passwords are inconsistent',
+
+ userName: 'Username',
+ password: 'Password',
+ confirmPassword: 'Confirm Password',
+ email: 'Email',
+ smsCode: 'SMS code',
+ mobile: 'Mobile',
};
diff --git a/src/locales/lang/zh_CN/component/countdown.ts b/src/locales/lang/zh_CN/component/countdown.ts
new file mode 100644
index 00000000..c2cfcf87
--- /dev/null
+++ b/src/locales/lang/zh_CN/component/countdown.ts
@@ -0,0 +1,4 @@
+export default {
+ normalText: '获取验证码',
+ sendText: '{0}秒后重新获取',
+};
diff --git a/src/locales/lang/zh_CN/sys/login.ts b/src/locales/lang/zh_CN/sys/login.ts
index 4e24538d..8994109d 100644
--- a/src/locales/lang/zh_CN/sys/login.ts
+++ b/src/locales/lang/zh_CN/sys/login.ts
@@ -1,7 +1,21 @@
export default {
+ backSignIn: '返回',
+ signInFormTitle: '登录',
+ mobileSignInFormTitle: '手机登录',
+ qrSignInFormTitle: '二维码登录',
+ signUpFormTitle: '注册',
+ forgetFormTitle: '重置密码',
+
+ signInTitle: '开箱即用的中后台管理系统',
+ signInDesc: '输入您的个人详细信息开始使用！',
+ policy: '我同意xxx隐私政策',
+ scanSign: `扫码后点击"确认"，即可完成登录`,
+
loginButton: '登录',
- autoLogin: '自动登录',
- forgetPassword: '忘记密码',
+ registerButton: '注册',
+ rememberMe: '记住我',
+ forgetPassword: '忘记密码?',
+ otherSignIn: '其他登录方式',
// notify
loginSuccessTitle: '登录成功',
@@ -10,4 +24,15 @@ export default {
// placeholder
accountPlaceholder: '请输入账号',
passwordPlaceholder: '请输入密码',
+ smsPlaceholder: '请输入验证码',
+ mobilePlaceholder: '请输入手机号码',
+ policyPlaceholder: '勾选后才能注册',
+ diffPwd: '两次输入密码不一致',
+
+ userName: '账号',
+ password: '密码',
+ confirmPassword: '确认密码',
+ email: '邮箱',
+ smsCode: '短信验证码',
+ mobile: '手机号码',
};
diff --git a/src/views/sys/lock/LockPage.vue b/src/views/sys/lock/LockPage.vue
index 0ca31e55..489a956d 100644
--- a/src/views/sys/lock/LockPage.vue
+++ b/src/views/sys/lock/LockPage.vue
@@ -1,37 +1,51 @@
-
-
+
+
-
- {{ hour }}
- {{ meridiem }}
+
+
+ {{ hour }}
+
+ {{ meridiem }}
+
-
- {{ minute }}
+
+ {{ minute }}
-
+
![]()
-
{{ realName }}
+
@@ -40,7 +54,7 @@
@@ -54,11 +68,11 @@
-
-
- {{ hour }}:{{ minute }} {{ meridiem }}
+
@@ -144,125 +158,54 @@
@prefix-cls: ~'@{namespace}-lock-page';
.@{prefix-cls} {
- position: fixed;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
z-index: @lock-page-z-index;
- display: flex;
- width: 100vw;
- height: 100vh;
- // background: rgba(23, 27, 41);
- background: #000;
- align-items: center;
- justify-content: center;
&__unlock {
- position: absolute;
- top: 0;
- left: 50%;
- display: flex;
- height: 50px;
- padding-top: 20px;
- font-size: 18px;
- color: #fff;
- cursor: pointer;
transform: translate(-50%, 0);
- flex-direction: column;
- align-items: center;
- justify-content: space-between;
- transition: all 0.3s;
- }
-
- &__date {
- display: flex;
- width: 100vw;
- height: 100vh;
- align-items: center;
- justify-content: center;
- }
-
- &__hour {
- position: relative;
- margin-right: 80px;
-
- .meridiem {
- position: absolute;
- top: 20px;
- left: 20px;
- font-size: 26px;
- }
- @media (max-width: @screen-xs) {
- margin-right: 20px;
- }
}
&__hour,
&__minute {
display: flex;
- width: 40%;
- height: 74%;
font-weight: 700;
color: #bababa;
background: #141313;
border-radius: 30px;
justify-content: center;
align-items: center;
- @media (min-width: @screen-xxxl-min) {
- font-size: 46em;
- }
- @media (min-width: @screen-xl-max) and (max-width: @screen-xxl-max) {
- font-size: 38em;
- }
- @media (min-width: @screen-lg-max) and (max-width: @screen-xl-max) {
- font-size: 30em;
- }
- @media (min-width: @screen-md-max) and (max-width: @screen-lg-max) {
- font-size: 23em;
- }
- @media (min-width: @screen-sm-max) and (max-width: @screen-md-max) {
- height: 50%;
- font-size: 12em;
- border-radius: 10px;
-
- .meridiem {
- font-size: 20px;
- }
- }
- @media (min-width: @screen-xs-max) and (max-width: @screen-sm-max) {
- font-size: 13em;
- }
- @media (max-width: @screen-xs) {
- height: 30%;
- font-size: 5em;
- border-radius: 10px;
-
- .meridiem {
- font-size: 14px;
- }
- }
- }
-
- &__footer-date {
- position: absolute;
- bottom: 20px;
- width: 100%;
- font-family: helvetica;
- color: #bababa;
- text-align: center;
-
- .time {
- font-size: 50px;
-
- .meridiem {
- font-size: 32px;
+ @media screen and (max-width: @screen-md) {
+ span:not(.meridiem) {
+ font-size: 160px;
}
}
- .date {
- font-size: 26px;
+ @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;
+ }
}
}
diff --git a/src/views/sys/login/ForgetPasswordForm.vue b/src/views/sys/login/ForgetPasswordForm.vue
new file mode 100644
index 00000000..be65f63d
--- /dev/null
+++ b/src/views/sys/login/ForgetPasswordForm.vue
@@ -0,0 +1,90 @@
+
+
+
+
diff --git a/src/views/sys/login/Login.vue b/src/views/sys/login/Login.vue
index c310f09e..5452c859 100644
--- a/src/views/sys/login/Login.vue
+++ b/src/views/sys/login/Login.vue
@@ -1,228 +1,179 @@
-
+
+ {{ hour }}:{{ minute }} {{ meridiem }}
- {{ year }}/{{ month }}/{{ day }} {{ week }}
+ {{ year }}/{{ month }}/{{ day }} {{ week }}
-
-
-
-
-
- ![]()
-
+ (formRef: Ref) {
+ 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(() => {
+ 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)) {
+ case LoginStateEnum.REGISTER:
+ return {
+ account: accountFormRule,
+ password: passwordFormRule,
+ confirmPassword: [
+ { validator: validateConfirmPassword(formData?.password), trigger: 'change' },
+ ],
+ policy: [{ validator: validatePolicy, trigger: 'change' }],
+ ...mobileRule,
+ };
+ case LoginStateEnum.RESET_PASSWORD:
+ return {
+ account: accountFormRule,
+ ...mobileRule,
+ };
+ case LoginStateEnum.MOBILE:
+ return mobileRule;
+ default:
+ return {
+ account: accountFormRule,
+ password: passwordFormRule,
+ };
+ }
+ });
+ return { getFormRules };
+}
+
+function createRule(message: string) {
+ return [
+ {
+ required: true,
+ message,
+ trigger: 'change',
+ },
+ ];
+}
diff --git a/tailwind.config.js b/tailwind.config.js
deleted file mode 100644
index 0a8daea2..00000000
--- a/tailwind.config.js
+++ /dev/null
@@ -1,20 +0,0 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
-const colors = require('windicss/colors');
-const defaultTheme = require('windicss/defaultTheme');
-module.exports = {
- darkMode: 'class',
- plugins: [
- require('windicss/plugin/forms'),
- require('windicss/plugin/typography'),
- require('windicss/plugin/line-clamp'),
- require('windicss/plugin/aspect-ratio'),
- ],
- theme: {
- extend: {
- colors,
- fontFamily: {
- sans: ['Righteous', ...defaultTheme.fontFamily.sans],
- },
- },
- },
-};
diff --git a/windi.config.ts b/windi.config.ts
new file mode 100644
index 00000000..20ec6610
--- /dev/null
+++ b/windi.config.ts
@@ -0,0 +1,71 @@
+import lineClamp from 'windicss/plugin/line-clamp';
+import colors from 'windicss/colors';
+
+import { defineConfig } from 'vite-plugin-windicss';
+
+export default defineConfig({
+ darkMode: 'class',
+ plugins: [lineClamp, createEnterPlugin()],
+ theme: {
+ extend: {
+ colors,
+ },
+
+ // screen: {
+ // sm: '576px',
+ // md: '768px',
+ // lg: '992px',
+ // xl: '1200px',
+ // '2xl': '1600px',
+ // },
+ },
+});
+
+/**
+ * Used for animation when the element is displayed
+ * @param maxOutput The larger the maxOutput output, the larger the generated css volume
+ */
+function createEnterPlugin(maxOutput = 10) {
+ const createCss = (index: number, d = 'x') => {
+ const upd = d.toUpperCase();
+ return {
+ [`*> .enter-${d}:nth-child(${index})`]: {
+ transform: `translate${upd}(50px)`,
+ },
+ [`*> .-enter-${d}:nth-child(${index})`]: {
+ transform: `translate${upd}(-50px)`,
+ },
+ [`* > .enter-${d}:nth-child(${index}),* > .-enter-${d}:nth-child(${index})`]: {
+ 'z-index': `${10 - index}`,
+ opacity: '0',
+ animation: `enter-${d}-animation 0.4s ease-in-out 0.3s`,
+ 'animation-fill-mode': 'forwards',
+ 'animation-delay': `${(index * 1) / 10}s`,
+ },
+ };
+ };
+ const handler = ({ addBase }) => {
+ for (let index = 1; index < maxOutput; index++) {
+ addBase({
+ ...createCss(index, 'x'),
+ ...createCss(index, 'y'),
+ });
+ }
+
+ addBase({
+ [`@keyframes enter-x-animation`]: {
+ to: {
+ opacity: '1',
+ transform: 'translateX(0)',
+ },
+ },
+ [`@keyframes enter-y-animation`]: {
+ to: {
+ opacity: '1',
+ transform: 'translateY(0)',
+ },
+ },
+ });
+ };
+ return { handler };
+}
diff --git a/yarn.lock b/yarn.lock
index 3cfdf67a..6e701bb6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1936,14 +1936,16 @@
dependencies:
vue-demi latest
-"@windicss/plugin-utils@0.3.12":
- version "0.3.12"
- resolved "https://registry.npmjs.org/@windicss/plugin-utils/-/plugin-utils-0.3.12.tgz#69b55be1ffb45753e6f01aa236f5ecd8df7a92ee"
- integrity sha512-XA+xeyu5KM322dIp+EEHeXnAPuK+KxuWyoGvJnxXi9U50nIp0QraqXAH7xl9ghIkVHvVrb8pmm8vHpzFvsqF2A==
+"@windicss/plugin-utils@0.4.3":
+ version "0.4.3"
+ resolved "https://registry.npmjs.org/@windicss/plugin-utils/-/plugin-utils-0.4.3.tgz#84e85fd3cd6eaf54ca72cae276f9cf0610f45e56"
+ integrity sha512-ilddLED+sZQIA9rOwE5eYwdBEBWKREvAVkkiAOOTNf7oDcP/a1cxT3f/nE4tgfhz+MC/FKcy7NkfrqfXRdEQaQ==
dependencies:
+ esbuild "^0.8.49"
+ esbuild-register "^2.0.0"
fast-glob "^3.2.5"
micromatch "^4.0.2"
- windicss "^2.1.12"
+ windicss "^2.1.15"
"@zxcvbn-ts/core@^0.2.0":
version "0.2.0"
@@ -3870,6 +3872,11 @@ esbuild@^0.8.48:
resolved "https://registry.npmjs.org/esbuild/-/esbuild-0.8.48.tgz#a57e4dde84ec56da1c6ecaefee97e9da6c5b00b5"
integrity sha512-lrH8lA8wWQ6Lpe1z6C7ZZaFSmRsUlcQAqe16nf7ITySQ7MV4+vI7qAqQlT/u+c3+9AL3VXmT4MXTxV2e63pO4A==
+esbuild@^0.8.49:
+ version "0.8.49"
+ resolved "https://registry.npmjs.org/esbuild/-/esbuild-0.8.49.tgz#3d33f71b3966611f822cf4c838115f3fbd16def2"
+ integrity sha512-itiFVYv5UZz4NooO7/Y0bRGVDGz/M/cxKbl6zyNI5pnKaz1mZjvZXAFhhDVz6rGCmcdTKj5oag6rh8DaaSSmfQ==
+
escalade@^3.1.1:
version "3.1.1"
resolved "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz#d8cfdc7000965c5a0174b4a82eaa5c0552742e40"
@@ -8454,10 +8461,10 @@ stylelint-order@^4.1.0:
postcss "^7.0.31"
postcss-sorting "^5.0.1"
-stylelint@^13.10.0:
- version "13.10.0"
- resolved "https://registry.npmjs.org/stylelint/-/stylelint-13.10.0.tgz#67b0c6f378c3fa61aa569a55d38feb8570b0b587"
- integrity sha512-eDuLrL0wzPKbl5/TbNGZcbw0lTIGbDEr5W6lCODvb1gAg0ncbgCRt7oU0C2VFDvbrcY0A3MFZOwltwTRmc0XCw==
+stylelint@^13.11.0:
+ version "13.11.0"
+ resolved "https://registry.npmjs.org/stylelint/-/stylelint-13.11.0.tgz#591981fbdd68c9d3d3e6147a0cd6a07539fc216d"
+ integrity sha512-DhrKSWDWGZkCiQMtU+VroXM6LWJVC8hSK24nrUngTSQvXGK75yZUq4yNpynqrxD3a/fzKMED09V+XxO4z4lTbw==
dependencies:
"@stylelint/postcss-css-in-js" "^0.37.2"
"@stylelint/postcss-markdown" "^0.36.2"
@@ -9262,17 +9269,17 @@ vite-plugin-purge-icons@^0.7.0:
"@purge-icons/generated" "^0.7.0"
rollup-plugin-purge-icons "^0.7.0"
-vite-plugin-pwa@^0.5.1:
- version "0.5.1"
- resolved "https://registry.npmjs.org/vite-plugin-pwa/-/vite-plugin-pwa-0.5.1.tgz#7f94b8c4092ba0bba0a1bceb690e7420b18071e7"
- integrity sha512-hf8BgyH0XLNEJUoMsk7ywMoE+OoQelK/+4RQoftQomZhlKXgsTWrfshFGOV7sKUbLsxMh0cVoh1DmAulQmRzKQ==
+vite-plugin-pwa@^0.5.2:
+ version "0.5.2"
+ resolved "https://registry.npmjs.org/vite-plugin-pwa/-/vite-plugin-pwa-0.5.2.tgz#48131ebadc0c98c34a543dbf1bb1c86aeef532e0"
+ integrity sha512-4SHKxYhd5sCF/ebbgxGYlN91UHlylzh7C32a5+Y2c2vbrWzw5x62ZxsYzolQzBosdOim4Ez+e/dX4hmP3BCmow==
dependencies:
debug "^4.3.2"
fast-glob "^3.2.5"
pretty-bytes "^5.5.0"
workbox-build "^6.1.0"
-vite-plugin-style-import@^0.7.2:
+vite-plugin-style-import@^0.7.3:
version "0.7.3"
resolved "https://registry.npmjs.org/vite-plugin-style-import/-/vite-plugin-style-import-0.7.3.tgz#4a9fb08bf5f2fc4796391c9be9a587ecb5c97e9e"
integrity sha512-oKM6vOl7iWaB5U1HcR5oM1oPRhT1n5yJt7h4h9jwpMPCD5ckHPcSjjSU7ZlOJkoS/IWEnDkQqoZi162bOs1rTQ==
@@ -9295,13 +9302,13 @@ vite-plugin-theme@^0.4.3:
es-module-lexer "^0.3.26"
tinycolor2 "^1.4.2"
-vite-plugin-windicss@0.3.12:
- version "0.3.12"
- resolved "https://registry.npmjs.org/vite-plugin-windicss/-/vite-plugin-windicss-0.3.12.tgz#5503b4ee738268a37c857c0cf55cea41f28fa3e6"
- integrity sha512-NuzIjSrqBQKvpbLJoU9qi8PIWBBXCqBmuLg9Dl/cFl4MB/vAHIOB6sZYJatCBFTU39Kw4UU0GhAjDBSNqzTn0w==
+vite-plugin-windicss@0.4.3:
+ version "0.4.3"
+ resolved "https://registry.npmjs.org/vite-plugin-windicss/-/vite-plugin-windicss-0.4.3.tgz#f86e5a3b78882caa3cdd50cba2b08770e2d627c8"
+ integrity sha512-Lnv6OhcYzcJvecTs4LIpMSfo54rSewkHrW85IVwy8hacR0krY319jXr5nwiDpSTp6HM3QJhoJ4zxHF+t5Q+Nwg==
dependencies:
- "@windicss/plugin-utils" "0.3.12"
- windicss "^2.1.12"
+ "@windicss/plugin-utils" "0.4.3"
+ windicss "^2.1.15"
vite@2.0.1:
version "2.0.1"
@@ -9356,10 +9363,10 @@ vue-i18n@9.0.0-rc.2:
"@intlify/shared" "9.0.0-rc.2"
"@vue/devtools-api" "^6.0.0-beta.3"
-vue-router@^4.0.3:
- version "4.0.3"
- resolved "https://registry.npmjs.org/vue-router/-/vue-router-4.0.3.tgz#8b26050c88b2dec7e27a88835f71046b365823ec"
- integrity sha512-AD1OjtVPyQHTSpoRsEGfPpxRQwhAhxcacOYO3zJ3KNkYP/r09mileSp6kdMQKhZWP2cFsPR3E2M3PZguSN5/ww==
+vue-router@^4.0.4:
+ version "4.0.4"
+ resolved "https://registry.npmjs.org/vue-router/-/vue-router-4.0.4.tgz#ad9b4b7bbdad622407b4ff189b1646f48c1e9053"
+ integrity sha512-uN6PDEaYdU9aRO7mU+Dkr1uaY49hV3fucEDG/Vre/Qj8ct3RoJS16vcPrvKVzn69zDDjBV5b9Xw7fZA9r6b/Iw==
vue-types@^3.0.0:
version "3.0.1"
@@ -9434,10 +9441,10 @@ which@^2.0.1:
dependencies:
isexe "^2.0.0"
-windicss@^2.1.12:
- version "2.1.12"
- resolved "https://registry.npmjs.org/windicss/-/windicss-2.1.12.tgz#840b963f03af7a3e31b989d2b51de52dcd57a37a"
- integrity sha512-VC057iG65zlvdqUI+1ynzOuKikalvYg6XqPGbG17HEAfwQ0sg1dACTk2plEp1QAEQNtKU3BnLnueWa4oKlltEQ==
+windicss@^2.1.15:
+ version "2.1.15"
+ resolved "https://registry.npmjs.org/windicss/-/windicss-2.1.15.tgz#0a5bf1a56711ab53de8093a3c855764d93ffac00"
+ integrity sha512-gBihXNJPzv/kBaelOlXvbrmWsWuv98OPSf/yUYjc8EnRGCOxDOQIRin4FYPTWCmZi91PZThh7nMjzQZiBV+MYg==
wmf@~1.0.1:
version "1.0.2"
{{ title }}
-
+
-
-
-
-
+
+
-
-
-
- {{
- t('sys.login.autoLogin')
- }}
-
-
-
-
-
-
- {{ t('sys.login.forgetPassword') }}
-
-
-
-
-
-
- {{ t('sys.login.loginButton') }}
-
-
-
+
diff --git a/src/views/sys/login/LoginForm.vue b/src/views/sys/login/LoginForm.vue
new file mode 100644
index 00000000..aeecd5ef
--- /dev/null
+++ b/src/views/sys/login/LoginForm.vue
@@ -0,0 +1,171 @@
+
+
+
+
diff --git a/src/views/sys/login/MobileForm.vue b/src/views/sys/login/MobileForm.vue
new file mode 100644
index 00000000..ddaf613e
--- /dev/null
+++ b/src/views/sys/login/MobileForm.vue
@@ -0,0 +1,85 @@
+
+
+
+
diff --git a/src/views/sys/login/QrCodeForm.vue b/src/views/sys/login/QrCodeForm.vue
new file mode 100644
index 00000000..f14696a5
--- /dev/null
+++ b/src/views/sys/login/QrCodeForm.vue
@@ -0,0 +1,40 @@
+
+
+
+
+
+
+ 
+
+
+
+ {{ t('sys.login.signInTitle') }}
+
+
+ {{ t('sys.login.signInDesc') }}
+
+
+
+
+ {{ getFormTitle }} +
+
+ {{ t('sys.login.scanSign') }}
+
+
+
+
diff --git a/src/views/sys/login/RegisterForm.vue b/src/views/sys/login/RegisterForm.vue
new file mode 100644
index 00000000..eab9acbc
--- /dev/null
+++ b/src/views/sys/login/RegisterForm.vue
@@ -0,0 +1,117 @@
+
+
+
+
diff --git a/src/views/sys/login/useLogin.ts b/src/views/sys/login/useLogin.ts
new file mode 100644
index 00000000..c09b3e72
--- /dev/null
+++ b/src/views/sys/login/useLogin.ts
@@ -0,0 +1,134 @@
+import { 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 useFormTitle() {
+ const { t } = useI18n();
+
+ 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(currentState)];
+ });
+ return { getFormTitle };
+}
+
+export function useLoginState() {
+ function setLoginState(state: LoginStateEnum) {
+ currentState.value = state;
+ }
+
+ const getLoginState = computed(() => currentState.value);
+
+ return { setLoginState, getLoginState };
+}
+
+export function useShowLoginForm() {
+ const getShowLogin = computed(() => unref(currentState) === LoginStateEnum.LOGIN);
+ const getShowResetPassword = computed(
+ () => unref(currentState) === LoginStateEnum.RESET_PASSWORD
+ );
+ const getShowRegister = computed(() => unref(currentState) === LoginStateEnum.REGISTER);
+ const getShowMobile = computed(() => unref(currentState) === LoginStateEnum.MOBILE);
+ const getShowQrCode = computed(() => unref(currentState) === LoginStateEnum.QR_CODE);
+
+ return { getShowLogin, getShowResetPassword, getShowRegister, getShowMobile, getShowQrCode };
+}
+
+export function useFormValid