twh_eastasia/pure-admin-thin
1
0
Fork 0
mirror of https://github.com/pure-admin/pure-admin-thin.git synced 2025-11-09 20:23:37 +08:00
Code Issues Packages Projects Releases Wiki Activity

release: update 3.4.5

Browse Source
This commit is contained in:
xiaoxian521
2022-08-22 21:34:55 +08:00
parent 13427998f3
commit c07e60e114
133 changed files with 3481 additions and 3277 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/views/error/403.vue
View File

@@ -1,5 +1,9 @@
<script setup lang="ts">
import noAccess from "/@/assets/status/403.svg?component";
defineOptions({
name: "403"
});
</script>
<template>
@@ -55,8 +59,9 @@ import noAccess from "/@/assets/status/403.svg?component";
delay: 500
}
}"
>返回首页</el-button
>
返回首页
</el-button>
</div>
</div>
</template>

7
src/views/error/404.vue
View File

@@ -1,5 +1,9 @@
<script setup lang="ts">
import noExist from "/@/assets/status/404.svg?component";
defineOptions({
name: "404"
});
</script>
<template>
@@ -55,8 +59,9 @@ import noExist from "/@/assets/status/404.svg?component";
delay: 500
}
}"
>返回首页</el-button
>
返回首页
</el-button>
</div>
</div>
</template>

9
src/views/error/500.vue
View File

@@ -1,5 +1,9 @@
<script setup lang="ts">
import noServer from "/@/assets/status/500.svg?component";
defineOptions({
name: "500"
});
</script>
<template>
@@ -21,7 +25,7 @@ import noServer from "/@/assets/status/500.svg?component";
}
}"
>
403
500
</p>
<p
class="mb-4 text-gray-500"
@@ -55,8 +59,9 @@ import noServer from "/@/assets/status/500.svg?component";
delay: 500
}
}"
>返回首页</el-button
>
返回首页
</el-button>
</div>
</div>
</template>

24
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: "",
@@ -21,9 +24,9 @@ const onLogin = async (formEl: FormInstance | undefined) => {
if (!formEl) return;
await formEl.validate((valid, fields) => {
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,14 +61,21 @@ function onBack() {
<el-input
clearable
v-model="ruleForm.verifyCode"
placeholder="短信验证码"
:placeholder="t('login.smsVerifyCode')"
:prefix-icon="
useRenderIcon('ri:shield-keyhole-line', { online: true })
"
/>
<el-button
:disabled="isDisabled"
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>
@@ -80,7 +90,7 @@ function onBack() {
:loading="loading"
@click="onLogin(ruleFormRef)"
>
登陆
{{ t("login.login") }}
</el-button>
</el-form-item>
</Motion>
@@ -88,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>

50
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,14 +109,21 @@ function onBack() {
<el-input
clearable
v-model="ruleForm.verifyCode"
placeholder="短信验证码"
:placeholder="t('login.smsVerifyCode')"
:prefix-icon="
useRenderIcon('ri:shield-keyhole-line', { online: true })
"
/>
<el-button
:disabled="isDisabled"
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>
@@ -119,7 +135,7 @@ function onBack() {
clearable
show-password
v-model="ruleForm.password"
placeholder="密码"
:placeholder="t('login.password')"
:prefix-icon="useRenderIcon('lock')"
/>
</el-form-item>
@@ -131,7 +147,7 @@ function onBack() {
clearable
show-password
v-model="ruleForm.repeatPassword"
placeholder="确认密码"
:placeholder="t('login.sure')"
:prefix-icon="useRenderIcon('lock')"
/>
</el-form-item>
@@ -139,8 +155,12 @@ function onBack() {
<Motion :delay="300">
<el-form-item>
<el-checkbox v-model="checked"> 我已仔细阅读并接受 </el-checkbox>
<el-button type="text"> 《隐私政策》 </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>
@@ -153,7 +173,7 @@ function onBack() {
:loading="loading"
@click="onUpdate(ruleFormRef)"
>
确定
{{ t("login.definite") }}
</el-button>
</el-form-item>
</Motion>
@@ -161,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>

30
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,14 +82,21 @@ function onBack() {
<el-input
clearable
v-model="ruleForm.verifyCode"
placeholder="短信验证码"
:placeholder="t('login.smsVerifyCode')"
:prefix-icon="
useRenderIcon('ri:shield-keyhole-line', { online: true })
"
/>
<el-button
:disabled="isDisabled"
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>
@@ -98,7 +108,7 @@ function onBack() {
clearable
show-password
v-model="ruleForm.password"
placeholder="密码"
:placeholder="t('login.password')"
:prefix-icon="useRenderIcon('lock')"
/>
</el-form-item>
@@ -110,7 +120,7 @@ function onBack() {
clearable
show-password
v-model="ruleForm.repeatPassword"
placeholder="确认密码"
:placeholder="t('login.sure')"
:prefix-icon="useRenderIcon('lock')"
/>
</el-form-item>
@@ -125,7 +135,7 @@ function onBack() {
:loading="loading"
@click="onUpdate(ruleFormRef)"
>
确定
{{ t("login.definite") }}
</el-button>
</el-form-item>
</Motion>
@@ -133,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>

326
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";
@@ -7,16 +8,28 @@ import qrCode from "./components/qrCode.vue";
import regist from "./components/regist.vue";
import update from "./components/update.vue";
import { initRouter } from "/@/router/utils";
import { useNav } from "/@/layout/hooks/useNav";
import { message } from "@pureadmin/components";
import type { FormInstance } from "element-plus";
import { storageSession } from "/@/utils/storage";
import { ref, reactive, watch, computed } from "vue";
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";
import { bg, avatar, currentWeek } from "./utils/static";
import { bg, avatar, illustration } from "./utils/static";
import { ref, reactive, watch, computed, toRaw } from "vue";
import { ReImageVerify } from "/@/components/ReImageVerify";
import { useRenderIcon } from "/@/components/ReIcon/src/hooks";
import { useTranslationLang } from "/@/layout/hooks/useTranslationLang";
import { useDataThemeChange } from "/@/layout/hooks/useDataThemeChange";
import dayIcon from "/@/assets/svg/day.svg?component";
import darkIcon from "/@/assets/svg/dark.svg?component";
import globalization from "/@/assets/svg/globalization.svg?component";
defineOptions({
name: "Login"
});
const imgCode = ref("");
const router = useRouter();
const loading = ref(false);
@@ -26,6 +39,14 @@ const currentPage = computed(() => {
return useUserStoreHook().currentPage;
});
const { initStorage } = useLayout();
initStorage();
const { t } = useI18n();
const { dataTheme, dataThemeChange } = useDataThemeChange();
const { title, getDropdownItemStyle, getDropdownItemClass } = useNav();
const { locale, translationCh, translationEn } = useTranslationLang();
const ruleForm = reactive({
username: "admin",
password: "admin123",
@@ -45,7 +66,7 @@ const onLogin = async (formEl: FormInstance | undefined) => {
accessToken: "eyJhbGciOiJIUzUxMiJ9.test"
});
initRouter("admin").then(() => {});
message.success("登陆成功");
message.success("登录成功");
router.push("/");
}, 2000);
} else {
@@ -62,134 +83,195 @@ function onHandle(value) {
watch(imgCode, value => {
useUserStoreHook().SET_VERIFYCODE(value);
});
dataThemeChange();
</script>
<template>
<img :src="bg" class="wave" />
<div class="login-container">
<div class="img">
<component :is="currentWeek" />
<div class="wh-full select-none">
<img :src="bg" class="wave" />
<div class="flex-c absolute right-5 top-3">
<!-- 主题 -->
<el-switch
v-model="dataTheme"
inline-prompt
:active-icon="dayIcon"
:inactive-icon="darkIcon"
@change="dataThemeChange"
/>
<!-- 国际化 -->
<el-dropdown trigger="click">
<globalization
class="hover:color-primary !hover:bg-transparent w-20px h-20px ml-1.5 cursor-pointer outline-none duration-300"
/>
<template #dropdown>
<el-dropdown-menu class="translation">
<el-dropdown-item
:style="getDropdownItemStyle(locale, 'zh')"
:class="['!dark:color-white', getDropdownItemClass(locale, 'zh')]"
@click="translationCh"
>
<IconifyIconOffline
class="check-zh"
v-show="locale === 'zh'"
icon="check"
/>
简体中文
</el-dropdown-item>
<el-dropdown-item
:style="getDropdownItemStyle(locale, 'en')"
:class="['!dark:color-white', getDropdownItemClass(locale, 'en')]"
@click="translationEn"
>
<span class="check-en" v-show="locale === 'en'">
<IconifyIconOffline icon="check" />
</span>
English
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
<div class="login-box">
<div class="login-form">
<avatar class="avatar" />
<Motion>
<h2>Pure Admin</h2>
</Motion>
<el-form
v-if="currentPage === 0"
ref="ruleFormRef"
:model="ruleForm"
:rules="loginRules"
size="large"
@keyup.enter="onLogin(ruleFormRef)"
>
<Motion :delay="100">
<el-form-item prop="username">
<el-input
clearable
v-model="ruleForm.username"
placeholder="账号"
:prefix-icon="useRenderIcon('user')"
/>
</el-form-item>
<div class="login-container">
<div class="img">
<component :is="toRaw(illustration)" />
</div>
<div class="login-box">
<div class="login-form">
<avatar class="avatar" />
<Motion>
<h2 class="outline-none">{{ title }}</h2>
</Motion>
<Motion :delay="150">
<el-form-item prop="password">
<el-input
clearable
show-password
v-model="ruleForm.password"
placeholder="密码"
:prefix-icon="useRenderIcon('lock')"
/>
</el-form-item>
</Motion>
<Motion :delay="200">
<el-form-item prop="verifyCode">
<el-input
clearable
v-model="ruleForm.verifyCode"
placeholder="验证码"
<el-form
v-if="currentPage === 0"
ref="ruleFormRef"
:model="ruleForm"
:rules="loginRules"
size="large"
@keyup.enter="onLogin(ruleFormRef)"
>
<Motion :delay="100">
<el-form-item
:rules="[
{
required: true,
message: transformI18n($t('login.usernameReg')),
trigger: 'blur'
}
]"
prop="username"
>
<template v-slot:append>
<ReImageVerify v-model:code="imgCode" />
</template>
</el-input>
</el-form-item>
</Motion>
<el-input
clearable
v-model="ruleForm.username"
:placeholder="t('login.username')"
:prefix-icon="useRenderIcon('user')"
/>
</el-form-item>
</Motion>
<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-button
type="text"
@click="useUserStoreHook().SET_CURRENTPAGE(4)"
<Motion :delay="150">
<el-form-item prop="password">
<el-input
clearable
show-password
v-model="ruleForm.password"
:placeholder="t('login.password')"
:prefix-icon="useRenderIcon('lock')"
/>
</el-form-item>
</Motion>
<Motion :delay="200">
<el-form-item prop="verifyCode">
<el-input
clearable
v-model="ruleForm.verifyCode"
:placeholder="t('login.verifyCode')"
:prefix-icon="
useRenderIcon('ri:shield-keyhole-line', { online: true })
"
>
忘记密码?
</el-button>
</div>
<el-button
class="w-full mt-4"
size="default"
type="primary"
:loading="loading"
@click="onLogin(ruleFormRef)"
>
登录
</el-button>
</el-form-item>
</Motion>
<template v-slot:append>
<ReImageVerify v-model:code="imgCode" />
</template>
</el-input>
</el-form-item>
</Motion>
<Motion :delay="300">
<el-form-item>
<div class="w-full h-20px flex justify-between items-center">
<Motion :delay="250">
<el-form-item>
<div class="w-full h-20px flex justify-between items-center">
<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
v-for="(item, index) in operates"
:key="index"
class="w-full mt-4"
size="default"
@click="onHandle(index + 1)"
type="primary"
:loading="loading"
@click="onLogin(ruleFormRef)"
>
{{ item.title }}
{{ t("login.login") }}
</el-button>
</el-form-item>
</Motion>
<Motion :delay="300">
<el-form-item>
<div class="w-full h-20px flex justify-between items-center">
<el-button
v-for="(item, index) in operates"
:key="index"
class="w-full mt-4"
size="default"
@click="onHandle(index + 1)"
>
{{ t(item.title) }}
</el-button>
</div>
</el-form-item>
</Motion>
</el-form>
<Motion v-if="currentPage === 0" :delay="350">
<el-form-item>
<el-divider>
<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="t(item.title)"
>
<IconifyIconOnline
:icon="`ri:${item.icon}-fill`"
width="20"
class="cursor-pointer text-gray-500 hover:text-blue-400"
/>
</span>
</div>
</el-form-item>
</Motion>
</el-form>
<Motion v-if="currentPage === 0" :delay="350">
<el-form-item>
<el-divider>
<p class="text-gray-500 text-xs">第三方登录</p>
</el-divider>
<div class="w-full flex justify-evenly">
<span
v-for="(item, index) in thirdParty"
:key="index"
:title="`${item.title}登陆`"
>
<IconifyIconOnline
:icon="`ri:${item.icon}-fill`"
width="20"
class="cursor-pointer text-gray-500 hover:text-blue-400"
/>
</span>
</div>
</el-form-item>
</Motion>
<!-- 手机号登陆 -->
<phone v-if="currentPage === 1" />
<!-- 二维码登陆 -->
<qrCode v-if="currentPage === 2" />
<!-- 注册 -->
<regist v-if="currentPage === 3" />
<!-- 忘记密码 -->
<update v-if="currentPage === 4" />
<!-- 手机号登录 -->
<phone v-if="currentPage === 1" />
<!-- 二维码登录 -->
<qrCode v-if="currentPage === 2" />
<!-- 注册 -->
<regist v-if="currentPage === 3" />
<!-- 忘记密码 -->
<update v-if="currentPage === 4" />
</div>
</div>
</div>
</div>
@@ -203,4 +285,20 @@ watch(imgCode, value => {
:deep(.el-input-group__append, .el-input-group__prepend) {
padding: 0;
}
.translation {
::v-deep(.el-dropdown-menu__item) {
padding: 5px 40px;
}
.check-zh {
position: absolute;
left: 20px;
}
.check-en {
position: absolute;
left: 20px;
}
}
</style>

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: {

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

@@ -1,6 +1,7 @@
import { reactive } from "vue";
import { isPhone } from "/@/utils/is";
import { isPhone } from "@pureadmin/utils";
import type { FormRules } from "element-plus";
import { $t, transformI18n } from "/@/plugins/i18n";
import { useUserStoreHook } from "/@/store/modules/user";
/** 6位数字验证码正则 */
@@ -10,18 +11,15 @@ export const REGEXP_SIX = /^\d{6}$/;
export const REGEXP_PWD =
/^(?![0-9]+$)(?![a-z]+$)(?![A-Z]+$)(?!([^(0-9a-zA-Z)]|[()])+$)(?!^.*[\u4E00-\u9FA5].*$)([^(0-9a-zA-Z)]|[()]|[a-z]|[A-Z]|[0-9]){8,18}$/;
/** 登陆校验 */
/** 登录校验 */
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();
}
@@ -45,15 +43,15 @@ const loginRules = reactive(<FormRules>{
]
});
/** 手机登陆校验 */
/** 手机登录校验 */
const phoneRules = reactive(<FormRules>{
phone: [
{
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();
}

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

@@ -1,10 +1,5 @@
import { computed } from "vue";
import bg from "/@/assets/login/bg.png";
import avatar from "/@/assets/login/avatar.svg?component";
import illustration from "/@/assets/login/illustration.svg?component";
const currentWeek = computed(() => {
return illustration;
});
export { bg, avatar, currentWeek };
export { bg, avatar, illustration };

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);
};

17
src/views/permission/button/index.vue
View File

@@ -1,14 +1,15 @@
<script lang="ts">
export default {
name: "permissionButton"
};
</script>
<script setup lang="ts">
import { ref } from "vue";
import { storageSession } from "/@/utils/storage";
import type { StorageConfigs } from "/#/index";
import { storageSession } from "@pureadmin/utils";
const auth = ref<boolean>(storageSession.getItem("info").username || "admin");
defineOptions({
name: "PermissionButton"
});
const auth = ref(
storageSession.getItem<StorageConfigs>("info").username || "admin"
);
function changRole(value) {
storageSession.setItem("info", {

24
src/views/permission/page/index.vue
View File

@@ -1,15 +1,16 @@
<script lang="ts">
export default {
name: "permissionPage"
};
</script>
<script setup lang="ts">
import { ref, unref } from "vue";
import { storageSession } from "/@/utils/storage";
import type { StorageConfigs } from "/#/index";
import { storageSession } from "@pureadmin/utils";
import { useRenderIcon } from "/@/components/ReIcon/src/hooks";
let purview = ref<string>(storageSession.getItem("info").username);
defineOptions({
name: "PermissionPage"
});
let purview = ref<string>(
storageSession.getItem<StorageConfigs>("info").username
);
function changRole() {
if (unref(purview) === "admin") {
@@ -37,15 +38,16 @@ function changRole() {
<span style="font-size: 26px">{{ purview }}</span>
<p style="color: #ffa500">
查看左侧菜单变化(系统管理)，模拟后台根据不同角色返回对应路由
</p></span
>
</p>
</span>
</div>
</template>
<el-button
type="primary"
@click="changRole"
:icon="useRenderIcon('user', { color: '#fff' })"
>切换角色</el-button
>
切换角色
</el-button>
</el-card>
</template>

3
src/views/welcome.vue
View File

@@ -1,3 +0,0 @@
<template>
<h1>Pure-Admin-Thin</h1>
</template>

9
src/views/welcome/index.vue Normal file
View File

@@ -0,0 +1,9 @@
<script setup lang="ts">
defineOptions({
name: "Welcome"
});
</script>
<template>
<h1>Pure-Admin-Thin</h1>
</template>