jiangyc/ruoyi-plus-soybean
1
0
Fork 0
mirror of https://github.com/m-xlsea/ruoyi-plus-soybean.git synced 2025-09-24 07:49:47 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(projects): new i18n function $t & login page and setting drawer config i18n

Browse Source
This commit is contained in:
Soybean
2023-07-23 20:19:47 +08:00
parent 458e387b68
commit 854d0bcf20
49 changed files with 1176 additions and 543 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/views/_builtin/login/components/bind-wechat/index.vue
View File

@ -1,11 +1,11 @@
<template>
<n-form ref="formRef" :model="model" :rules="rules" size="large" :show-label="false">
<n-form-item path="phone">
<n-input v-model:value="model.phone" placeholder="手机号码" />
<n-input v-model:value="model.phone" :placeholder="$t('page.login.common.phonePlaceholder')" />
</n-form-item>
<n-form-item path="code">
<div class="flex-y-center w-full">
<n-input v-model:value="model.code" placeholder="验证码" />
<n-input v-model:value="model.code" :placeholder="$t('page.login.common.codePlaceholder')" />
<div class="w-18px"></div>
<n-button size="large" :disabled="isCounting" :loading="smsLoading" @click="handleSmsCode">
{{ label }}
@ -13,8 +13,12 @@
</div>
</n-form-item>
<n-space :vertical="true" size="large">
<n-button type="primary" size="large" :block="true" :round="true" @click="handleSubmit">确定</n-button>
<n-button size="large" :block="true" :round="true" @click="toLoginModule('pwd-login')">返回</n-button>
<n-button type="primary" size="large" :block="true" :round="true" @click="handleSubmit">
{{ $t('page.login.common.confirm') }}
</n-button>
<n-button size="large" :block="true" :round="true" @click="toLoginModule('pwd-login')">
{{ $t('page.login.common.back') }}
</n-button>
</n-space>
</n-form>
</template>
@ -25,6 +29,7 @@ import type { FormInst } from 'naive-ui';
import { useRouterPush } from '@/composables';
import { useSmsCode } from '@/hooks';
import { formRules } from '@/utils';
import { $t } from '@/locales';
const { toLoginModule } = useRouterPush();
const { label, isCounting, loading: smsLoading, getSmsCode } = useSmsCode();
@ -48,7 +53,7 @@ function handleSmsCode() {
async function handleSubmit() {
await formRef.value?.validate();
window.$message?.success('验证成功!');
window.$message?.success($t('page.login.common.validateSuccess'));
}
</script>

15
src/views/_builtin/login/components/code-login/index.vue
View File

@ -1,11 +1,11 @@
<template>
<n-form ref="formRef" :model="model" :rules="rules" size="large" :show-label="false">
<n-form-item path="phone">
<n-input v-model:value="model.phone" placeholder="手机号码" />
<n-input v-model:value="model.phone" :placeholder="$t('page.login.common.phonePlaceholder')" />
</n-form-item>
<n-form-item path="code">
<div class="flex-y-center w-full">
<n-input v-model:value="model.code" placeholder="验证码" />
<n-input v-model:value="model.code" :placeholder="$t('page.login.common.codePlaceholder')" />
<div class="w-18px"></div>
<n-button size="large" :disabled="isCounting" :loading="smsLoading" @click="handleSmsCode">
{{ label }}
@ -13,7 +13,7 @@
</div>
</n-form-item>
<n-form-item path="imgCode">
<n-input v-model:value="model.imgCode" placeholder="验证码,点击图片刷新" />
<n-input v-model:value="model.imgCode" :placeholder="$t('page.login.codeLogin.imageCodePlaceholder')" />
<div class="pl-8px">
<image-verify v-model:code="imgCode" />
</div>
@ -27,9 +27,11 @@
:loading="auth.loginLoading"
@click="handleSubmit"
>
确定
{{ $t('page.login.common.confirm') }}
</n-button>
<n-button size="large" :block="true" :round="true" @click="toLoginModule('pwd-login')">
{{ $t('page.login.common.back') }}
</n-button>
<n-button size="large" :block="true" :round="true" @click="toLoginModule('pwd-login')">返回</n-button>
</n-space>
</n-form>
</template>
@ -41,6 +43,7 @@ import { useAuthStore } from '@/store';
import { useRouterPush } from '@/composables';
import { useSmsCode } from '@/hooks';
import { formRules, getImgCodeRule } from '@/utils';
import { $t } from '@/locales';
const auth = useAuthStore();
const { toLoginModule } = useRouterPush();
@ -68,7 +71,7 @@ function handleSmsCode() {
async function handleSubmit() {
await formRef.value?.validate();
window.$message?.success('验证成功!');
window.$message?.success($t('page.login.common.validateSuccess'));
}
</script>

23
src/views/_builtin/login/components/pwd-login/components/other-account.vue
View File

@ -1,6 +1,6 @@
<template>
<n-space :vertical="true">
<n-divider class="!mb-0 text-14px text-#666">其他账户登录</n-divider>
<n-divider class="!mb-0 text-14px text-#666">{{ $t('page.login.pwdLogin.otherAccountLogin') }}</n-divider>
<n-space justify="center">
<n-button
v-for="item in accounts"
@ -15,25 +15,38 @@
</template>
<script lang="ts" setup>
import { userRoleLabels } from '@/constants';
import { $t } from '@/locales';
interface Emits {
(e: 'login', param: { userName: string; password: string }): void;
}
const emit = defineEmits<Emits>();
const accounts = [
interface Account {
key: Auth.RoleType;
label: string;
userName: string;
password: string;
}
const accounts: Account[] = [
{
label: '超级管理员',
key: 'super',
label: userRoleLabels.super,
userName: 'Super',
password: 'super123'
},
{
label: '管理员',
key: 'admin',
label: userRoleLabels.admin,
userName: 'Admin',
password: 'admin123'
},
{
label: '普通用户',
key: 'user',
label: userRoleLabels.user,
userName: 'User01',
password: 'user01123'
}

6
src/views/_builtin/login/components/pwd-login/components/other-login.vue
View File

@ -1,6 +1,6 @@
<template>
<n-space :vertical="true">
<n-divider class="!mb-0 text-14px text-#666">其他登录方式</n-divider>
<n-divider class="!mb-0 text-14px text-#666">{{ $t('page.login.pwdLogin.otherLoginMode') }}</n-divider>
<div class="flex-center">
<n-button :text="true">
<icon-mdi-wechat class="text-22px text-#888 hover:text-#52BF5E" />
@ -9,6 +9,8 @@
</n-space>
</template>
<script lang="ts" setup></script>
<script lang="ts" setup>
import { $t } from '@/locales';
</script>
<style scoped></style>

17
src/views/_builtin/login/components/pwd-login/index.vue
View File

@ -1,15 +1,22 @@
<template>
<n-form ref="formRef" :model="model" :rules="rules" size="large" :show-label="false">
<n-form-item path="userName">
<n-input v-model:value="model.userName" placeholder="请输入用户名" />
<n-input v-model:value="model.userName" :placeholder="$t('page.login.common.userNamePlaceholder')" />
</n-form-item>
<n-form-item path="password">
<n-input v-model:value="model.password" type="password" show-password-on="click" placeholder="请输入密码" />
<n-input
v-model:value="model.password"
type="password"
show-password-on="click"
:placeholder="$t('page.login.common.passwordPlaceholder')"
/>
</n-form-item>
<n-space :vertical="true" :size="24">
<div class="flex-y-center justify-between">
<n-checkbox v-model:checked="rememberMe">记住我</n-checkbox>
<n-button :text="true" @click="toLoginModule('reset-pwd')">忘记密码？</n-button>
<n-checkbox v-model:checked="rememberMe">{{ $t('page.login.pwdLogin.rememberMe') }}</n-checkbox>
<n-button :text="true" @click="toLoginModule('reset-pwd')">
{{ $t('page.login.pwdLogin.forgetPassword') }}
</n-button>
</div>
<n-button
type="primary"
@ -19,7 +26,7 @@
:loading="auth.loginLoading"
@click="handleSubmit"
>
确定
{{ $t('page.login.common.confirm') }}
</n-button>
<div class="flex-y-center justify-between">
<n-button class="flex-1" :block="true" @click="toLoginModule('code-login')">

29
src/views/_builtin/login/components/register-user/index.vue
View File

@ -1,11 +1,11 @@
<template>
<n-form ref="formRef" :model="model" :rules="rules" size="large" :show-label="false">
<n-form-item path="phone">
<n-input v-model:value="model.phone" placeholder="手机号码" />
<n-input v-model:value="model.phone" :placeholder="$t('page.login.common.phonePlaceholder')" />
</n-form-item>
<n-form-item path="code">
<div class="flex-y-center w-full">
<n-input v-model:value="model.code" placeholder="验证码" />
<n-input v-model:value="model.code" :placeholder="$t('page.login.common.codePlaceholder')" />
<div class="w-18px"></div>
<n-button size="large" :disabled="isCounting" :loading="smsLoading" @click="handleSmsCode">
{{ label }}
@ -13,15 +13,29 @@
</div>
</n-form-item>
<n-form-item path="pwd">
<n-input v-model:value="model.pwd" type="password" show-password-on="click" placeholder="密码" />
<n-input
v-model:value="model.pwd"
type="password"
show-password-on="click"
:placeholder="$t('page.login.common.passwordPlaceholder')"
/>
</n-form-item>
<n-form-item path="confirmPwd">
<n-input v-model:value="model.confirmPwd" type="password" show-password-on="click" placeholder="确认密码" />
<n-input
v-model:value="model.confirmPwd"
type="password"
show-password-on="click"
:placeholder="$t('page.login.common.confirmPasswordPlaceholder')"
/>
</n-form-item>
<n-space :vertical="true" :size="18">
<login-agreement v-model:value="agreement" />
<n-button type="primary" size="large" :block="true" :round="true" @click="handleSubmit">确定</n-button>
<n-button size="large" :block="true" :round="true" @click="toLoginModule('pwd-login')">返回</n-button>
<n-button type="primary" size="large" :block="true" :round="true" @click="handleSubmit">
{{ $t('page.login.common.confirm') }}
</n-button>
<n-button size="large" :block="true" :round="true" @click="toLoginModule('pwd-login')">
{{ $t('page.login.common.back') }}
</n-button>
</n-space>
</n-form>
</template>
@ -32,6 +46,7 @@ import type { FormInst, FormRules } from 'naive-ui';
import { useRouterPush } from '@/composables';
import { useSmsCode } from '@/hooks';
import { formRules, getConfirmPwdRule } from '@/utils';
import { $t } from '@/locales';
const { toLoginModule } = useRouterPush();
const { label, isCounting, loading: smsLoading, start } = useSmsCode();
@ -60,7 +75,7 @@ function handleSmsCode() {
async function handleSubmit() {
await formRef.value?.validate();
window.$message?.success('验证成功!');
window.$message?.success($t('page.login.common.validateSuccess'));
}
</script>

29
src/views/_builtin/login/components/reset-pwd/index.vue
View File

@ -1,11 +1,11 @@
<template>
<n-form ref="formRef" :model="model" :rules="rules" size="large" :show-label="false">
<n-form-item path="phone">
<n-input v-model:value="model.phone" placeholder="手机号码" />
<n-input v-model:value="model.phone" :placeholder="$t('page.login.common.phonePlaceholder')" />
</n-form-item>
<n-form-item path="code">
<div class="flex-y-center w-full">
<n-input v-model:value="model.code" placeholder="验证码" />
<n-input v-model:value="model.code" :placeholder="$t('page.login.common.codePlaceholder')" />
<div class="w-18px"></div>
<n-button size="large" :disabled="isCounting" :loading="smsLoading" @click="handleSmsCode">
{{ label }}
@ -13,14 +13,28 @@
</div>
</n-form-item>
<n-form-item path="pwd">
<n-input v-model:value="model.pwd" type="password" show-password-on="click" placeholder="密码" />
<n-input
v-model:value="model.pwd"
type="password"
show-password-on="click"
:placeholder="$t('page.login.common.passwordPlaceholder')"
/>
</n-form-item>
<n-form-item path="confirmPwd">
<n-input v-model:value="model.confirmPwd" type="password" show-password-on="click" placeholder="确认密码" />
<n-input
v-model:value="model.confirmPwd"
type="password"
show-password-on="click"
:placeholder="$t('page.login.common.confirmPasswordPlaceholder')"
/>
</n-form-item>
<n-space :vertical="true" size="large">
<n-button type="primary" size="large" :block="true" :round="true" @click="handleSubmit">确定</n-button>
<n-button size="large" :block="true" :round="true" @click="toLoginModule('pwd-login')">返回</n-button>
<n-button type="primary" size="large" :block="true" :round="true" @click="handleSubmit">
{{ $t('page.login.common.confirm') }}
</n-button>
<n-button size="large" :block="true" :round="true" @click="toLoginModule('pwd-login')">
{{ $t('page.login.common.back') }}
</n-button>
</n-space>
</n-form>
</template>
@ -31,6 +45,7 @@ import type { FormInst, FormRules } from 'naive-ui';
import { useRouterPush } from '@/composables';
import { useSmsCode } from '@/hooks';
import { formRules, getConfirmPwdRule } from '@/utils';
import { $t } from '@/locales';
const { toLoginModule } = useRouterPush();
const { label, isCounting, loading: smsLoading, start } = useSmsCode();
@ -57,7 +72,7 @@ function handleSmsCode() {
async function handleSubmit() {
await formRef.value?.validate();
window.$message?.success('验证成功!');
window.$message?.success($t('page.login.common.validateSuccess'));
}
</script>

5
src/views/_builtin/login/index.vue
View File

@ -9,7 +9,7 @@
<div class="w-300px sm:w-360px">
<header class="flex-y-center justify-between">
<system-logo class="text-64px text-primary" />
<n-gradient-text type="primary" :size="28">{{ title }}</n-gradient-text>
<n-gradient-text type="primary" :size="28">{{ $t('system.title') }}</n-gradient-text>
</header>
<main class="pt-24px">
<h3 class="text-18px text-primary font-medium">{{ activeModule.label }}</h3>
@ -30,8 +30,8 @@ import { computed } from 'vue';
import type { Component } from 'vue';
import { loginModuleLabels } from '@/constants';
import { useThemeStore } from '@/store';
import { useAppInfo } from '@/composables';
import { getColorPalette, mixColor } from '@/utils';
import { $t } from '@/locales';
import { BindWechat, CodeLogin, LoginBg, PwdLogin, Register, ResetPwd } from './components';
interface Props {
@ -42,7 +42,6 @@ interface Props {
const props = defineProps<Props>();
const theme = useThemeStore();
const { title } = useAppInfo();
interface LoginModule {
key: UnionKey.LoginModule;