|
@@ -1,86 +1,120 @@
|
|
|
<script setup>
|
|
<script setup>
|
|
|
-import { reactive, ref } from 'vue'
|
|
|
|
|
-import loginApi from '@/api/login'
|
|
|
|
|
-import { useUserStore } from '@/store'
|
|
|
|
|
-import { useRouter, useRoute } from 'vue-router'
|
|
|
|
|
-import packageJson from '../../package.json'
|
|
|
|
|
-import { useAppStore } from '@/store'
|
|
|
|
|
|
|
+import { reactive, ref } from "vue";
|
|
|
|
|
+import loginApi from "@/api/login";
|
|
|
|
|
+import { useUserStore } from "@/store";
|
|
|
|
|
+import { useRouter, useRoute } from "vue-router";
|
|
|
|
|
+import packageJson from "../../package.json";
|
|
|
|
|
+import { useAppStore } from "@/store";
|
|
|
|
|
|
|
|
-const appStore = useAppStore()
|
|
|
|
|
-const router = useRouter()
|
|
|
|
|
-const route = useRoute()
|
|
|
|
|
-const captcha = ref(null)
|
|
|
|
|
|
|
+const appStore = useAppStore();
|
|
|
|
|
+const router = useRouter();
|
|
|
|
|
+const route = useRoute();
|
|
|
|
|
+const captcha = ref(null);
|
|
|
|
|
|
|
|
-const loading = ref(false)
|
|
|
|
|
|
|
+const loading = ref(false);
|
|
|
|
|
|
|
|
-let isDevelop = import.meta.env.VITE_APP_ENV === 'development'
|
|
|
|
|
|
|
+let isDevelop = import.meta.env.VITE_APP_ENV === "development";
|
|
|
|
|
|
|
|
-var odata = isDevelop ? { username: 'admin', password: '123456', code: '' } : { username: '', password: '', code: '' }
|
|
|
|
|
|
|
+var odata = isDevelop
|
|
|
|
|
+ ? { username: "admin", password: "123456", code: "" }
|
|
|
|
|
+ : { username: "", password: "", code: "" };
|
|
|
|
|
|
|
|
-const form = reactive(odata)
|
|
|
|
|
|
|
+const form = reactive(odata);
|
|
|
|
|
|
|
|
const refreshCaptcha = () => {
|
|
const refreshCaptcha = () => {
|
|
|
- form.code = ''
|
|
|
|
|
- form.uuid = ''
|
|
|
|
|
|
|
+ form.code = "";
|
|
|
|
|
+ form.uuid = "";
|
|
|
loginApi.getCaptch().then((res) => {
|
|
loginApi.getCaptch().then((res) => {
|
|
|
if (res.code === 200) {
|
|
if (res.code === 200) {
|
|
|
- captcha.value = res.data.image
|
|
|
|
|
- form.uuid = res.data.uuid
|
|
|
|
|
|
|
+ captcha.value = res.data.image;
|
|
|
|
|
+ form.uuid = res.data.uuid;
|
|
|
}
|
|
}
|
|
|
- })
|
|
|
|
|
-}
|
|
|
|
|
|
|
+ });
|
|
|
|
|
+};
|
|
|
|
|
|
|
|
-refreshCaptcha()
|
|
|
|
|
|
|
+refreshCaptcha();
|
|
|
|
|
|
|
|
-const userStore = useUserStore()
|
|
|
|
|
|
|
+const userStore = useUserStore();
|
|
|
|
|
|
|
|
-const redirect = route.query.redirect ? route.query.redirect : '/'
|
|
|
|
|
|
|
+const redirect = route.query.redirect ? route.query.redirect : "/";
|
|
|
|
|
|
|
|
const handleSubmit = async ({ values, errors }) => {
|
|
const handleSubmit = async ({ values, errors }) => {
|
|
|
if (loading.value) {
|
|
if (loading.value) {
|
|
|
- return
|
|
|
|
|
|
|
+ return;
|
|
|
}
|
|
}
|
|
|
- loading.value = true
|
|
|
|
|
|
|
+ loading.value = true;
|
|
|
if (!errors) {
|
|
if (!errors) {
|
|
|
- const result = await userStore.login(form)
|
|
|
|
|
|
|
+ const result = await userStore.login(form);
|
|
|
if (!result) {
|
|
if (!result) {
|
|
|
- loading.value = false
|
|
|
|
|
- refreshCaptcha()
|
|
|
|
|
- return
|
|
|
|
|
|
|
+ loading.value = false;
|
|
|
|
|
+ refreshCaptcha();
|
|
|
|
|
+ return;
|
|
|
}
|
|
}
|
|
|
- router.push(redirect)
|
|
|
|
|
|
|
+ router.push(redirect);
|
|
|
}
|
|
}
|
|
|
- loading.value = false
|
|
|
|
|
-}
|
|
|
|
|
|
|
+ loading.value = false;
|
|
|
|
|
+};
|
|
|
</script>
|
|
</script>
|
|
|
<template>
|
|
<template>
|
|
|
- <div class="login-container" :style="{ background: appStore.mode === 'dark' ? '#2e2e30e3' : '' }">
|
|
|
|
|
|
|
+ <div
|
|
|
|
|
+ class="login-container"
|
|
|
|
|
+ :style="{ background: appStore.mode === 'dark' ? '#2e2e30e3' : '' }"
|
|
|
|
|
+ >
|
|
|
<h3 class="login-logo">
|
|
<h3 class="login-logo">
|
|
|
<img src="/logo.png" alt="logo" />
|
|
<img src="/logo.png" alt="logo" />
|
|
|
<span>{{ $title }}</span>
|
|
<span>{{ $title }}</span>
|
|
|
</h3>
|
|
</h3>
|
|
|
|
|
|
|
|
- <div class="login-width md:w-10/12 w-11/12 mx-auto flex justify-between h-full items-center">
|
|
|
|
|
- <div class="w-6/12 mx-auto left-panel rounded-l pl-5 pr-5 hidden md:block">
|
|
|
|
|
|
|
+ <div
|
|
|
|
|
+ class="login-width md:w-10/12 w-11/12 mx-auto flex justify-between h-full items-center"
|
|
|
|
|
+ >
|
|
|
|
|
+ <div
|
|
|
|
|
+ class="w-6/12 mx-auto left-panel rounded-l pl-5 pr-5 hidden md:block"
|
|
|
|
|
+ >
|
|
|
<div class="logo">
|
|
<div class="logo">
|
|
|
<span>{{ $title }} v{{ packageJson.version }}</span>
|
|
<span>{{ $title }} v{{ packageJson.version }}</span>
|
|
|
</div>
|
|
</div>
|
|
|
<div class="slogan flex justify-end">
|
|
<div class="slogan flex justify-end">
|
|
|
- <span>---- {{ $t('sys.login.slogan') }}</span>
|
|
|
|
|
|
|
+ <!-- <span>---- {{ $t('sys.login.slogan') }}</span> -->
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="md:w-6/12 w-11/12 md:rounded-r mx-auto pl-5 pr-5 pb-10">
|
|
<div class="md:w-6/12 w-11/12 md:rounded-r mx-auto pl-5 pr-5 pb-10">
|
|
|
- <h2 class="mt-10 text-3xl pb-0 mb-10 login-title">{{ $t('sys.login.title') }}</h2>
|
|
|
|
|
|
|
+ <h2 class="mt-10 text-3xl pb-0 mb-10 login-title">
|
|
|
|
|
+ {{ $t("sys.login.title") }}
|
|
|
|
|
+ </h2>
|
|
|
<a-form :model="form" @submit="handleSubmit">
|
|
<a-form :model="form" @submit="handleSubmit">
|
|
|
- <a-form-item field="username" :hide-label="true" :rules="[{ required: true, message: $t('sys.login.usernameNotice') }]">
|
|
|
|
|
- <a-input v-model="form.username" class="w-full" size="large" :placeholder="$t('sys.login.username')" allow-clear>
|
|
|
|
|
|
|
+ <a-form-item
|
|
|
|
|
+ field="username"
|
|
|
|
|
+ :hide-label="true"
|
|
|
|
|
+ :rules="[
|
|
|
|
|
+ { required: true, message: $t('sys.login.usernameNotice') },
|
|
|
|
|
+ ]"
|
|
|
|
|
+ >
|
|
|
|
|
+ <a-input
|
|
|
|
|
+ v-model="form.username"
|
|
|
|
|
+ class="w-full"
|
|
|
|
|
+ size="large"
|
|
|
|
|
+ :placeholder="$t('sys.login.username')"
|
|
|
|
|
+ allow-clear
|
|
|
|
|
+ >
|
|
|
<template #prefix><icon-user /></template>
|
|
<template #prefix><icon-user /></template>
|
|
|
</a-input>
|
|
</a-input>
|
|
|
</a-form-item>
|
|
</a-form-item>
|
|
|
|
|
|
|
|
- <a-form-item field="password" :hide-label="true" :rules="[{ required: true, message: $t('sys.login.passwordNotice') }]">
|
|
|
|
|
- <a-input-password v-model="form.password" :placeholder="$t('sys.login.password')" size="large" allow-clear>
|
|
|
|
|
|
|
+ <a-form-item
|
|
|
|
|
+ field="password"
|
|
|
|
|
+ :hide-label="true"
|
|
|
|
|
+ :rules="[
|
|
|
|
|
+ { required: true, message: $t('sys.login.passwordNotice') },
|
|
|
|
|
+ ]"
|
|
|
|
|
+ >
|
|
|
|
|
+ <a-input-password
|
|
|
|
|
+ v-model="form.password"
|
|
|
|
|
+ :placeholder="$t('sys.login.password')"
|
|
|
|
|
+ size="large"
|
|
|
|
|
+ allow-clear
|
|
|
|
|
+ >
|
|
|
<template #prefix><icon-lock /></template>
|
|
<template #prefix><icon-lock /></template>
|
|
|
</a-input-password>
|
|
</a-input-password>
|
|
|
</a-form-item>
|
|
</a-form-item>
|
|
@@ -94,28 +128,48 @@ const handleSubmit = async ({ values, errors }) => {
|
|
|
match: /^[a-zA-Z0-9]{4}$/,
|
|
match: /^[a-zA-Z0-9]{4}$/,
|
|
|
message: $t('sys.login.verifyCodeNotice'),
|
|
message: $t('sys.login.verifyCodeNotice'),
|
|
|
},
|
|
},
|
|
|
- ]">
|
|
|
|
|
- <a-input v-model="form.code" :placeholder="$t('sys.login.verifyCode')" size="large" allow-clear>
|
|
|
|
|
|
|
+ ]"
|
|
|
|
|
+ >
|
|
|
|
|
+ <a-input
|
|
|
|
|
+ v-model="form.code"
|
|
|
|
|
+ :placeholder="$t('sys.login.verifyCode')"
|
|
|
|
|
+ size="large"
|
|
|
|
|
+ allow-clear
|
|
|
|
|
+ >
|
|
|
<template #prefix><icon-safe /></template>
|
|
<template #prefix><icon-safe /></template>
|
|
|
<template #append>
|
|
<template #append>
|
|
|
- <img :src="captcha" style="height: 120px; height: 36px; cursor: pointer" @click="refreshCaptcha" />
|
|
|
|
|
|
|
+ <img
|
|
|
|
|
+ :src="captcha"
|
|
|
|
|
+ style="height: 120px; height: 36px; cursor: pointer"
|
|
|
|
|
+ @click="refreshCaptcha"
|
|
|
|
|
+ />
|
|
|
</template>
|
|
</template>
|
|
|
</a-input>
|
|
</a-input>
|
|
|
</a-form-item>
|
|
</a-form-item>
|
|
|
|
|
|
|
|
<a-form-item :hide-label="true" class="mt-5">
|
|
<a-form-item :hide-label="true" class="mt-5">
|
|
|
- <a-button html-type="submit" type="primary" long size="large" :loading="loading">
|
|
|
|
|
- {{ $t('sys.login.loginBtn') }}
|
|
|
|
|
|
|
+ <a-button
|
|
|
|
|
+ html-type="submit"
|
|
|
|
|
+ type="primary"
|
|
|
|
|
+ long
|
|
|
|
|
+ size="large"
|
|
|
|
|
+ :loading="loading"
|
|
|
|
|
+ >
|
|
|
|
|
+ {{ $t("sys.login.loginBtn") }}
|
|
|
</a-button>
|
|
</a-button>
|
|
|
</a-form-item>
|
|
</a-form-item>
|
|
|
|
|
|
|
|
- <a-divider orientation="center">{{ $t('sys.login.otherLoginType') }}</a-divider>
|
|
|
|
|
|
|
+ <!-- <a-divider orientation="center">{{
|
|
|
|
|
+ $t("sys.login.otherLoginType")
|
|
|
|
|
+ }}</a-divider>
|
|
|
<div class="flex w-3/4 pt-2 mx-auto items-stretch justify-around">
|
|
<div class="flex w-3/4 pt-2 mx-auto items-stretch justify-around">
|
|
|
<a-avatar class="other-login wechat"><icon-wechat /></a-avatar>
|
|
<a-avatar class="other-login wechat"><icon-wechat /></a-avatar>
|
|
|
- <a-avatar class="other-login alipay"><icon-alipay-circle /></a-avatar>
|
|
|
|
|
|
|
+ <a-avatar class="other-login alipay"
|
|
|
|
|
+ ><icon-alipay-circle
|
|
|
|
|
+ /></a-avatar>
|
|
|
<a-avatar class="other-login qq"><icon-qq /></a-avatar>
|
|
<a-avatar class="other-login qq"><icon-qq /></a-avatar>
|
|
|
<a-avatar class="other-login weibo"><icon-weibo /></a-avatar>
|
|
<a-avatar class="other-login weibo"><icon-weibo /></a-avatar>
|
|
|
- </div>
|
|
|
|
|
|
|
+ </div> -->
|
|
|
</a-form>
|
|
</a-form>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
@@ -236,7 +290,11 @@ const handleSubmit = async ({ values, errors }) => {
|
|
|
width: 100px;
|
|
width: 100px;
|
|
|
height: 100px;
|
|
height: 100px;
|
|
|
border-radius: 50%;
|
|
border-radius: 50%;
|
|
|
- background: linear-gradient(to right, rgba(var(--primary-6), 0.07), rgba(var(--primary-6), 0.04));
|
|
|
|
|
|
|
+ background: linear-gradient(
|
|
|
|
|
+ to right,
|
|
|
|
|
+ rgba(var(--primary-6), 0.07),
|
|
|
|
|
+ rgba(var(--primary-6), 0.04)
|
|
|
|
|
+ );
|
|
|
animation: move-ce64e0ea 2.5s linear infinite;
|
|
animation: move-ce64e0ea 2.5s linear infinite;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
@@ -246,7 +304,11 @@ const handleSubmit = async ({ values, errors }) => {
|
|
|
width: 150px;
|
|
width: 150px;
|
|
|
height: 150px;
|
|
height: 150px;
|
|
|
border-radius: 50%;
|
|
border-radius: 50%;
|
|
|
- background: linear-gradient(to right, rgba(var(--primary-6), 0.08), rgba(var(--primary-6), 0.04));
|
|
|
|
|
|
|
+ background: linear-gradient(
|
|
|
|
|
+ to right,
|
|
|
|
|
+ rgba(var(--primary-6), 0.08),
|
|
|
|
|
+ rgba(var(--primary-6), 0.04)
|
|
|
|
|
+ );
|
|
|
animation: move-ce64e0ea 3s linear infinite;
|
|
animation: move-ce64e0ea 3s linear infinite;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
@@ -256,7 +318,11 @@ const handleSubmit = async ({ values, errors }) => {
|
|
|
width: 145px;
|
|
width: 145px;
|
|
|
height: 145px;
|
|
height: 145px;
|
|
|
border-radius: 50%;
|
|
border-radius: 50%;
|
|
|
- background: linear-gradient(to right, rgba(var(--primary-6), 0.1), rgba(var(--primary-6), 0.04));
|
|
|
|
|
|
|
+ background: linear-gradient(
|
|
|
|
|
+ to right,
|
|
|
|
|
+ rgba(var(--primary-6), 0.1),
|
|
|
|
|
+ rgba(var(--primary-6), 0.04)
|
|
|
|
|
+ );
|
|
|
animation: move-ce64e0ea 2.5s linear infinite;
|
|
animation: move-ce64e0ea 2.5s linear infinite;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
@@ -266,7 +332,11 @@ const handleSubmit = async ({ values, errors }) => {
|
|
|
width: 160px;
|
|
width: 160px;
|
|
|
height: 160px;
|
|
height: 160px;
|
|
|
border-radius: 50%;
|
|
border-radius: 50%;
|
|
|
- background: linear-gradient(to right, rgba(var(--primary-6), 0.02), rgba(var(--primary-6), 0.04));
|
|
|
|
|
|
|
+ background: linear-gradient(
|
|
|
|
|
+ to right,
|
|
|
|
|
+ rgba(var(--primary-6), 0.02),
|
|
|
|
|
+ rgba(var(--primary-6), 0.04)
|
|
|
|
|
+ );
|
|
|
animation: move-ce64e0ea 3.5s linear infinite;
|
|
animation: move-ce64e0ea 3.5s linear infinite;
|
|
|
}
|
|
}
|
|
|
|
|
|