twh_eastasia/vue-pure-admin
1
0
Fork 0
mirror of https://github.com/pure-admin/vue-pure-admin.git synced 2025-11-03 13:44:47 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: login page add i18n

Browse Source
This commit is contained in:
xiaoxian521
2022-08-11 13:10:37 +08:00
parent 26b85b5c92
commit 5f1466b574
14 changed files with 470 additions and 289 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/views/login/components/phone.vue
View File

@@ -1,13 +1,16 @@
<script setup lang="ts">
import { useI18n } from "vue-i18n";
import { ref, reactive } from "vue";
import Motion from "../utils/motion";
import { phoneRules } from "../utils/rule";
import { message } from "@pureadmin/components";
import type { FormInstance } from "element-plus";
import { $t, transformI18n } from "/@/plugins/i18n";
import { useVerifyCode } from "../utils/verifyCode";
import { useUserStoreHook } from "/@/store/modules/user";
import { useRenderIcon } from "/@/components/ReIcon/src/hooks";
const { t } = useI18n();
const loading = ref(false);
const ruleForm = reactive({
phone: "",
@@ -23,7 +26,7 @@ const onLogin = async (formEl: FormInstance | undefined) => {
if (valid) {
// 模拟登录请求，需根据实际开发进行修改
setTimeout(() => {
message.success("登录成功");
message.success(transformI18n($t("login.loginSuccess")));
loading.value = false;
}, 2000);
} else {
@@ -46,7 +49,7 @@ function onBack() {
<el-input
clearable
v-model="ruleForm.phone"
placeholder="手机号码"
:placeholder="t('login.phone')"
:prefix-icon="useRenderIcon('iphone')"
/>
</el-form-item>
@@ -58,7 +61,7 @@ function onBack() {
<el-input
clearable
v-model="ruleForm.verifyCode"
placeholder="短信验证码"
:placeholder="t('login.smsVerifyCode')"
:prefix-icon="
useRenderIcon('ri:shield-keyhole-line', { online: true })
"
@@ -68,7 +71,11 @@ function onBack() {
class="ml-2"
@click="useVerifyCode().start(ruleFormRef, 'phone')"
>
{{ text }}
{{
text.length > 0
? text + t("login.info")
: t("login.getVerifyCode")
}}
</el-button>
</div>
</el-form-item>
@@ -83,7 +90,7 @@ function onBack() {
:loading="loading"
@click="onLogin(ruleFormRef)"
>
登录
{{ t("login.login") }}
</el-button>
</el-form-item>
</Motion>
@@ -91,7 +98,7 @@ function onBack() {
<Motion :delay="200">
<el-form-item>
<el-button class="w-full" size="default" @click="onBack">
返回
{{ t("login.back") }}
</el-button>
</el-form-item>
</Motion>

9
src/views/login/components/qrCode.vue
View File

@@ -1,14 +1,17 @@
<script setup lang="ts">
import { useI18n } from "vue-i18n";
import Motion from "../utils/motion";
import ReQrcode from "/@/components/ReQrcode";
import { useUserStoreHook } from "/@/store/modules/user";
const { t } = useI18n();
</script>
<template>
<Motion class="-mt-2 -mb-2"> <ReQrcode text="模拟测试" /> </Motion>
<Motion class="-mt-2 -mb-2"> <ReQrcode :text="t('login.test')" /> </Motion>
<Motion :delay="100">
<el-divider>
<p class="text-gray-500 text-xs">扫码后点击"确认"，即可完成登录</p>
<p class="text-gray-500 text-xs">{{ t("login.tip") }}</p>
</el-divider>
</Motion>
<Motion :delay="150">
@@ -16,7 +19,7 @@ import { useUserStoreHook } from "/@/store/modules/user";
class="w-full mt-4"
@click="useUserStoreHook().SET_CURRENTPAGE(0)"
>
返回
{{ t("login.back") }}
</el-button>
</Motion>
</template>

47
src/views/login/components/regist.vue
View File

@@ -1,13 +1,16 @@
<script setup lang="ts">
import { useI18n } from "vue-i18n";
import { ref, reactive } from "vue";
import Motion from "../utils/motion";
import { updateRules } from "../utils/rule";
import { message } from "@pureadmin/components";
import type { FormInstance } from "element-plus";
import { useVerifyCode } from "../utils/verifyCode";
import { $t, transformI18n } from "/@/plugins/i18n";
import { useUserStoreHook } from "/@/store/modules/user";
import { useRenderIcon } from "/@/components/ReIcon/src/hooks";
const { t } = useI18n();
const checked = ref(false);
const loading = ref(false);
const ruleForm = reactive({
@@ -23,9 +26,9 @@ const repeatPasswordRule = [
{
validator: (rule, value, callback) => {
if (value === "") {
callback(new Error("请输入确认密码"));
callback(new Error(transformI18n($t("login.passwordSureReg"))));
} else if (ruleForm.password !== value) {
callback(new Error("两次密码不一致!"));
callback(new Error(transformI18n($t("login.passwordDifferentReg"))));
} else {
callback();
}
@@ -42,12 +45,12 @@ const onUpdate = async (formEl: FormInstance | undefined) => {
if (checked.value) {
// 模拟请求，需根据实际开发进行修改
setTimeout(() => {
message.success("注册成功");
message.success(transformI18n($t("login.registerSuccess")));
loading.value = false;
}, 2000);
} else {
loading.value = false;
message.warning("请勾选隐私政策");
message.warning(transformI18n($t("login.tickPrivacy")));
}
} else {
loading.value = false;
@@ -71,13 +74,19 @@ function onBack() {
>
<Motion>
<el-form-item
:rules="[{ required: true, message: '请输入账号', trigger: 'blur' }]"
:rules="[
{
required: true,
message: transformI18n($t('login.usernameReg')),
trigger: 'blur'
}
]"
prop="username"
>
<el-input
clearable
v-model="ruleForm.username"
placeholder="账号"
:placeholder="t('login.username')"
:prefix-icon="useRenderIcon('user')"
/>
</el-form-item>
@@ -88,7 +97,7 @@ function onBack() {
<el-input
clearable
v-model="ruleForm.phone"
placeholder="手机号码"
:placeholder="t('login.phone')"
:prefix-icon="useRenderIcon('iphone')"
/>
</el-form-item>
@@ -100,7 +109,7 @@ function onBack() {
<el-input
clearable
v-model="ruleForm.verifyCode"
placeholder="短信验证码"
:placeholder="t('login.smsVerifyCode')"
:prefix-icon="
useRenderIcon('ri:shield-keyhole-line', { online: true })
"
@@ -110,7 +119,11 @@ function onBack() {
class="ml-2"
@click="useVerifyCode().start(ruleFormRef, 'phone')"
>
{{ text }}
{{
text.length > 0
? text + t("login.info")
: t("login.getVerifyCode")
}}
</el-button>
</div>
</el-form-item>
@@ -122,7 +135,7 @@ function onBack() {
clearable
show-password
v-model="ruleForm.password"
placeholder="密码"
:placeholder="t('login.password')"
:prefix-icon="useRenderIcon('lock')"
/>
</el-form-item>
@@ -134,7 +147,7 @@ function onBack() {
clearable
show-password
v-model="ruleForm.repeatPassword"
placeholder="确认密码"
:placeholder="t('login.sure')"
:prefix-icon="useRenderIcon('lock')"
/>
</el-form-item>
@@ -142,8 +155,12 @@ function onBack() {
<Motion :delay="300">
<el-form-item>
<el-checkbox v-model="checked"> 我已仔细阅读并接受 </el-checkbox>
<el-button link type="primary"> 《隐私政策》 </el-button>
<el-checkbox v-model="checked">
{{ t("login.readAccept") }}
</el-checkbox>
<el-button link type="primary">
{{ t("login.privacyPolicy") }}
</el-button>
</el-form-item>
</Motion>
@@ -156,7 +173,7 @@ function onBack() {
:loading="loading"
@click="onUpdate(ruleFormRef)"
>
确定
{{ t("login.definite") }}
</el-button>
</el-form-item>
</Motion>
@@ -164,7 +181,7 @@ function onBack() {
<Motion :delay="400">
<el-form-item>
<el-button class="w-full" size="default" @click="onBack">
返回
{{ t("login.back") }}
</el-button>
</el-form-item>
</Motion>

27
src/views/login/components/update.vue
View File

@@ -1,13 +1,16 @@
<script setup lang="ts">
import { useI18n } from "vue-i18n";
import { ref, reactive } from "vue";
import Motion from "../utils/motion";
import { updateRules } from "../utils/rule";
import { message } from "@pureadmin/components";
import type { FormInstance } from "element-plus";
import { useVerifyCode } from "../utils/verifyCode";
import { $t, transformI18n } from "/@/plugins/i18n";
import { useUserStoreHook } from "/@/store/modules/user";
import { useRenderIcon } from "/@/components/ReIcon/src/hooks";
const { t } = useI18n();
const loading = ref(false);
const ruleForm = reactive({
phone: "",
@@ -21,9 +24,9 @@ const repeatPasswordRule = [
{
validator: (rule, value, callback) => {
if (value === "") {
callback(new Error("请输入确认密码"));
callback(new Error(transformI18n($t("login.passwordSureReg"))));
} else if (ruleForm.password !== value) {
callback(new Error("两次密码不一致!"));
callback(new Error(transformI18n($t("login.passwordDifferentReg"))));
} else {
callback();
}
@@ -39,7 +42,7 @@ const onUpdate = async (formEl: FormInstance | undefined) => {
if (valid) {
// 模拟请求，需根据实际开发进行修改
setTimeout(() => {
message.success("修改密码成功");
message.success(transformI18n($t("login.passwordUpdateReg")));
loading.value = false;
}, 2000);
} else {
@@ -67,7 +70,7 @@ function onBack() {
<el-input
clearable
v-model="ruleForm.phone"
placeholder="手机号码"
:placeholder="t('login.phone')"
:prefix-icon="useRenderIcon('iphone')"
/>
</el-form-item>
@@ -79,7 +82,7 @@ function onBack() {
<el-input
clearable
v-model="ruleForm.verifyCode"
placeholder="短信验证码"
:placeholder="t('login.smsVerifyCode')"
:prefix-icon="
useRenderIcon('ri:shield-keyhole-line', { online: true })
"
@@ -89,7 +92,11 @@ function onBack() {
class="ml-2"
@click="useVerifyCode().start(ruleFormRef, 'phone')"
>
{{ text }}
{{
text.length > 0
? text + t("login.info")
: t("login.getVerifyCode")
}}
</el-button>
</div>
</el-form-item>
@@ -101,7 +108,7 @@ function onBack() {
clearable
show-password
v-model="ruleForm.password"
placeholder="密码"
:placeholder="t('login.password')"
:prefix-icon="useRenderIcon('lock')"
/>
</el-form-item>
@@ -113,7 +120,7 @@ function onBack() {
clearable
show-password
v-model="ruleForm.repeatPassword"
placeholder="确认密码"
:placeholder="t('login.sure')"
:prefix-icon="useRenderIcon('lock')"
/>
</el-form-item>
@@ -128,7 +135,7 @@ function onBack() {
:loading="loading"
@click="onUpdate(ruleFormRef)"
>
确定
{{ t("login.definite") }}
</el-button>
</el-form-item>
</Motion>
@@ -136,7 +143,7 @@ function onBack() {
<Motion :delay="300">
<el-form-item>
<el-button class="w-full" size="default" @click="onBack">
返回
{{ t("login.back") }}
</el-button>
</el-form-item>
</Motion>

34
src/views/login/index.vue
View File

@@ -1,4 +1,5 @@
<script setup lang="ts">
import { useI18n } from "vue-i18n";
import Motion from "./utils/motion";
import { useRouter } from "vue-router";
import { loginRules } from "./utils/rule";
@@ -11,6 +12,7 @@ import { useNav } from "/@/layout/hooks/nav";
import { message } from "@pureadmin/components";
import type { FormInstance } from "element-plus";
import { storageSession } from "@pureadmin/utils";
import { $t, transformI18n } from "/@/plugins/i18n";
import { operates, thirdParty } from "./utils/enums";
import { useLayout } from "/@/layout/hooks/useLayout";
import { useUserStoreHook } from "/@/store/modules/user";
@@ -42,6 +44,7 @@ const currentPage = computed(() => {
const { initStorage } = useLayout();
initStorage();
const { t } = useI18n();
const { dataTheme, dataThemeChange } = useDataThemeChange();
const { getDropdownItemStyle, getDropdownItemClass } = useNav();
const { locale, translationCh, translationEn } = useTranslationLang();
@@ -151,11 +154,20 @@ dataThemeChange();
@keyup.enter="onLogin(ruleFormRef)"
>
<Motion :delay="100">
<el-form-item prop="username">
<el-form-item
:rules="[
{
required: true,
message: transformI18n($t('login.usernameReg')),
trigger: 'blur'
}
]"
prop="username"
>
<el-input
clearable
v-model="ruleForm.username"
placeholder="账号"
:placeholder="t('login.username')"
:prefix-icon="useRenderIcon('user')"
/>
</el-form-item>
@@ -167,7 +179,7 @@ dataThemeChange();
clearable
show-password
v-model="ruleForm.password"
placeholder="密码"
:placeholder="t('login.password')"
:prefix-icon="useRenderIcon('lock')"
/>
</el-form-item>
@@ -178,7 +190,7 @@ dataThemeChange();
<el-input
clearable
v-model="ruleForm.verifyCode"
placeholder="验证码"
:placeholder="t('login.verifyCode')"
:prefix-icon="
useRenderIcon('ri:shield-keyhole-line', { online: true })
"
@@ -193,13 +205,15 @@ dataThemeChange();
<Motion :delay="250">
<el-form-item>
<div class="w-full h-20px flex justify-between items-center">
<el-checkbox v-model="checked">记住密码</el-checkbox>
<el-checkbox v-model="checked">
{{ t("login.remember") }}
</el-checkbox>
<el-button
link
type="primary"
@click="useUserStoreHook().SET_CURRENTPAGE(4)"
>
忘记密码?
{{ t("login.forget") }}
</el-button>
</div>
<el-button
@@ -209,7 +223,7 @@ dataThemeChange();
:loading="loading"
@click="onLogin(ruleFormRef)"
>
登录
{{ t("login.login") }}
</el-button>
</el-form-item>
</Motion>
@@ -224,7 +238,7 @@ dataThemeChange();
size="default"
@click="onHandle(index + 1)"
>
{{ item.title }}
{{ t(item.title) }}
</el-button>
</div>
</el-form-item>
@@ -234,13 +248,13 @@ dataThemeChange();
<Motion v-if="currentPage === 0" :delay="350">
<el-form-item>
<el-divider>
<p class="text-gray-500 text-xs">第三方登录</p>
<p class="text-gray-500 text-xs">{{ t("login.thirdLogin") }}</p>
</el-divider>
<div class="w-full flex justify-evenly">
<span
v-for="(item, index) in thirdParty"
:key="index"
:title="`${item.title}登录`"
:title="t(item.title)"
>
<IconifyIconOnline
:icon="`ri:${item.icon}-fill`"

16
src/views/login/utils/enums.ts
View File

@@ -1,30 +1,32 @@
import { $t } from "/@/plugins/i18n";
const operates = [
{
title: "手机登录"
title: $t("login.phoneLogin")
},
{
title: "二维码登录"
title: $t("login.qRCodeLogin")
},
{
title: "注册"
title: $t("login.register")
}
];
const thirdParty = [
{
title: "微信",
title: $t("login.weChatLogin"),
icon: "wechat"
},
{
title: "支付宝",
title: $t("login.alipayLogin"),
icon: "alipay"
},
{
title: "QQ",
title: $t("login.qqLogin"),
icon: "qq"
},
{
title: "微博",
title: $t("login.weiboLogin"),
icon: "weibo"
}
];

2
src/views/login/utils/motion.ts
View File

@@ -1,6 +1,6 @@
import { h, defineComponent, withDirectives, resolveDirective } from "vue";
// 封装@vueuse/motion动画库中的自定义指令v-motion
/** 封装@vueuse/motion动画库中的自定义指令v-motion */
export default defineComponent({
name: "Motion",
props: {

34
src/views/login/utils/rule.ts
View File

@@ -1,6 +1,7 @@
import { reactive } from "vue";
import { isPhone } from "@pureadmin/utils";
import type { FormRules } from "element-plus";
import { $t, transformI18n } from "/@/plugins/i18n";
import { useUserStoreHook } from "/@/store/modules/user";
/** 6位数字验证码正则 */
@@ -12,16 +13,13 @@ export const REGEXP_PWD =
/** 登录校验 */
const loginRules = reactive(<FormRules>{
username: [{ required: true, message: "请输入账号", trigger: "blur" }],
password: [
{
validator: (rule, value, callback) => {
if (value === "") {
callback(new Error("请输入密码"));
callback(new Error(transformI18n($t("login.passwordReg"))));
} else if (!REGEXP_PWD.test(value)) {
callback(
new Error("密码格式应为8-18位数字、字母、符号的任意两种组合")
);
callback(new Error(transformI18n($t("login.passwordRuleReg"))));
} else {
callback();
}
@@ -33,9 +31,9 @@ const loginRules = reactive(<FormRules>{
{
validator: (rule, value, callback) => {
if (value === "") {
callback(new Error("请输入验证码"));
callback(new Error(transformI18n($t("login.verifyCodeReg"))));
} else if (useUserStoreHook().verifyCode !== value) {
callback(new Error("请输入正确的验证码"));
callback(new Error(transformI18n($t("login.verifyCodeCorrectReg"))));
} else {
callback();
}
@@ -51,9 +49,9 @@ const phoneRules = reactive(<FormRules>{
{
validator: (rule, value, callback) => {
if (value === "") {
callback(new Error("请输入手机号码"));
callback(new Error(transformI18n($t("login.phoneReg"))));
} else if (!isPhone(value)) {
callback(new Error("请输入正确的手机号码格式"));
callback(new Error(transformI18n($t("login.phoneCorrectReg"))));
} else {
callback();
}
@@ -65,9 +63,9 @@ const phoneRules = reactive(<FormRules>{
{
validator: (rule, value, callback) => {
if (value === "") {
callback(new Error("请输入验证码"));
callback(new Error(transformI18n($t("login.verifyCodeReg"))));
} else if (!REGEXP_SIX.test(value)) {
callback(new Error("请输入6位数字验证码"));
callback(new Error(transformI18n($t("login.verifyCodeSixReg"))));
} else {
callback();
}
@@ -83,9 +81,9 @@ const updateRules = reactive(<FormRules>{
{
validator: (rule, value, callback) => {
if (value === "") {
callback(new Error("请输入手机号码"));
callback(new Error(transformI18n($t("login.phoneReg"))));
} else if (!isPhone(value)) {
callback(new Error("请输入正确的手机号码格式"));
callback(new Error(transformI18n($t("login.phoneCorrectReg"))));
} else {
callback();
}
@@ -97,9 +95,9 @@ const updateRules = reactive(<FormRules>{
{
validator: (rule, value, callback) => {
if (value === "") {
callback(new Error("请输入验证码"));
callback(new Error(transformI18n($t("login.verifyCodeReg"))));
} else if (!REGEXP_SIX.test(value)) {
callback(new Error("请输入6位数字验证码"));
callback(new Error(transformI18n($t("login.verifyCodeSixReg"))));
} else {
callback();
}
@@ -111,11 +109,9 @@ const updateRules = reactive(<FormRules>{
{
validator: (rule, value, callback) => {
if (value === "") {
callback(new Error("请输入密码"));
callback(new Error(transformI18n($t("login.passwordReg"))));
} else if (!REGEXP_PWD.test(value)) {
callback(
new Error("密码格式应为8-18位数字、字母、符号的任意两种组合")
);
callback(new Error(transformI18n($t("login.passwordRuleReg"))));
} else {
callback();
}

2
src/views/login/utils/static.ts
View File

@@ -9,7 +9,7 @@ import illustration4 from "/@/assets/login/illustration4.svg?component";
import illustration5 from "/@/assets/login/illustration5.svg?component";
import illustration6 from "/@/assets/login/illustration6.svg?component";
/* Show a different background every day */
/** Show a different background every day */
const currentWeek = computed(() => {
switch (String(new Date().getDay())) {
case "0":

9
src/views/login/utils/verifyCode.ts
View File

@@ -3,9 +3,8 @@ import { cloneDeep } from "lodash-unified";
import { ref } from "vue";
const isDisabled = ref(false);
const TEXT = "获取验证码";
const timer = ref(null);
const text = ref(TEXT);
const text = ref("");
export const useVerifyCode = () => {
const start = async (
@@ -20,11 +19,11 @@ export const useVerifyCode = () => {
clearInterval(timer.value);
timer.value = setInterval(() => {
if (time > 0) {
text.value = `${time}秒后重新获取`;
text.value = `${time}`;
isDisabled.value = true;
time -= 1;
} else {
text.value = TEXT;
text.value = "";
isDisabled.value = false;
clearInterval(timer.value);
time = initTime;
@@ -35,7 +34,7 @@ export const useVerifyCode = () => {
};
const end = () => {
text.value = TEXT;
text.value = "";
isDisabled.value = false;
clearInterval(timer.value);
};