mirror of
https://github.com/m-xlsea/ruoyi-plus-soybean.git
synced 2025-09-24 07:49:47 +08:00
feat(projects): 1.0 beta
This commit is contained in:
Soybean
@ -1,7 +1,7 @@
|
||||
<script setup lang="ts"></script>
|
||||
|
||||
<template>
|
||||
<exception-base type="403" />
|
||||
<ExceptionBase type="403" />
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup></script>
|
||||
|
||||
<style scoped></style>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<script setup lang="ts"></script>
|
||||
|
||||
<template>
|
||||
<exception-base type="404" />
|
||||
<ExceptionBase type="404" />
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup></script>
|
||||
|
||||
<style scoped></style>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<script setup lang="ts"></script>
|
||||
|
||||
<template>
|
||||
<exception-base type="500" />
|
||||
<ExceptionBase type="500" />
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup></script>
|
||||
|
||||
<style scoped></style>
|
||||
|
||||
@ -1,107 +0,0 @@
|
||||
<template>
|
||||
<div class="wh-full flex-col-center">
|
||||
<n-gradient-text class="mb-24px" type="primary" :size="28">Custom Constant Page</n-gradient-text>
|
||||
<router-link :to="{ name: routeHomePath }">
|
||||
<n-button type="primary">回到首页</n-button>
|
||||
</router-link>
|
||||
<n-card :bordered="false" size="small" class="mt-24px rounded-8px shadow-sm">
|
||||
<div class="flex-center py-12px">
|
||||
<n-button type="primary" class="mr-24px" :disabled="isMoving" @click="startMove">开始</n-button>
|
||||
<n-button type="error" @click="endMove">暂停</n-button>
|
||||
</div>
|
||||
<div class="flex-center">
|
||||
<div class="relative bg-primary_active" :style="containerStyle">
|
||||
<svg class="w-full h-full">
|
||||
<ellipse
|
||||
:cx="ellipseConfig.cX"
|
||||
:cy="ellipseConfig.cY"
|
||||
:rx="ellipseConfig.rX"
|
||||
:ry="ellipseConfig.rY"
|
||||
:style="{ strokeWidth: ellipseConfig.strokeWidth + 'px' }"
|
||||
class="fill-none stroke-primary"
|
||||
></ellipse>
|
||||
</svg>
|
||||
<div class="absolute left-182px top-82px w-40px h-40px bg-red rounded-20px" :style="transformStyle"></div>
|
||||
</div>
|
||||
</div>
|
||||
</n-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from 'vue';
|
||||
import { routeName } from '@/router';
|
||||
|
||||
const routeHomePath = routeName('root');
|
||||
|
||||
interface EllipseConfig {
|
||||
/** 左上角x坐标 */
|
||||
cX: number;
|
||||
/** 左上角y坐标 */
|
||||
cY: number;
|
||||
/** 椭圆长半轴A */
|
||||
rX: number;
|
||||
/** 椭圆短半轴B */
|
||||
rY: number;
|
||||
/** 椭圆线宽 */
|
||||
strokeWidth: number;
|
||||
}
|
||||
|
||||
const ellipseConfig: EllipseConfig = {
|
||||
cX: 202,
|
||||
cY: 102,
|
||||
rX: 200,
|
||||
rY: 100,
|
||||
strokeWidth: 2
|
||||
};
|
||||
|
||||
const containerStyle = (() => {
|
||||
const { rX, rY, strokeWidth } = ellipseConfig;
|
||||
|
||||
const width = (rX + strokeWidth) * 2;
|
||||
const height = (rY + strokeWidth) * 2;
|
||||
|
||||
return `width:${width}px;height:${height}px;`;
|
||||
})();
|
||||
|
||||
/** 角度 */
|
||||
const angle = ref(0);
|
||||
|
||||
const transformStyle = computed(() => {
|
||||
const { rX, rY } = ellipseConfig;
|
||||
const x = rX * Math.sin(angle.value);
|
||||
const y = rY * Math.cos(angle.value);
|
||||
|
||||
return `transform: translate3d(${x}px,${y}px,0px)`;
|
||||
});
|
||||
|
||||
/** 运动速度(周/秒) */
|
||||
const speed = ref(2);
|
||||
|
||||
/** 一周的角度(弧度制) */
|
||||
const FULL_ANGLE = 2 * Math.PI;
|
||||
|
||||
/** requestAnimationFrame一秒执行的次数 */
|
||||
const TIMES_PER_SECONDS = 60;
|
||||
|
||||
const updateAnglePerTime = computed(() => FULL_ANGLE / speed.value / TIMES_PER_SECONDS);
|
||||
|
||||
const rafId = ref<number | null>(null);
|
||||
|
||||
const isMoving = computed(() => rafId.value !== null);
|
||||
|
||||
const startMove = () => {
|
||||
angle.value += updateAnglePerTime.value;
|
||||
|
||||
rafId.value = window.requestAnimationFrame(startMove);
|
||||
};
|
||||
|
||||
const endMove = () => {
|
||||
if (rafId.value !== null) {
|
||||
window.cancelAnimationFrame(rafId.value);
|
||||
rafId.value = null;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
11
src/views/_builtin/login/components/bind-wechat.vue
Normal file
11
src/views/_builtin/login/components/bind-wechat.vue
Normal file
@ -0,0 +1,11 @@
|
||||
<script setup lang="ts">
|
||||
defineOptions({
|
||||
name: 'BindWechat'
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div></div>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
@ -1,60 +0,0 @@
|
||||
<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="$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="$t('page.login.common.codePlaceholder')" />
|
||||
<div class="w-18px"></div>
|
||||
<n-button size="large" :disabled="isCounting" :loading="smsLoading" @click="handleSmsCode">
|
||||
{{ label }}
|
||||
</n-button>
|
||||
</div>
|
||||
</n-form-item>
|
||||
<n-space :vertical="true" size="large">
|
||||
<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>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { reactive, ref } from 'vue';
|
||||
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();
|
||||
|
||||
const formRef = ref<HTMLElement & FormInst>();
|
||||
|
||||
const model = reactive({
|
||||
phone: '',
|
||||
code: '',
|
||||
imgCode: ''
|
||||
});
|
||||
|
||||
const rules = {
|
||||
phone: formRules.phone,
|
||||
code: formRules.code
|
||||
};
|
||||
|
||||
function handleSmsCode() {
|
||||
getSmsCode(model.phone);
|
||||
}
|
||||
|
||||
async function handleSubmit() {
|
||||
await formRef.value?.validate();
|
||||
window.$message?.success($t('page.login.common.validateSuccess'));
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
31
src/views/_builtin/login/components/code-login.vue
Normal file
31
src/views/_builtin/login/components/code-login.vue
Normal file
@ -0,0 +1,31 @@
|
||||
<script setup lang="ts">
|
||||
import { $t } from '@/locales';
|
||||
import { useRouterPush } from '@/hooks/common/router';
|
||||
|
||||
defineOptions({
|
||||
name: 'CodeLogin'
|
||||
});
|
||||
|
||||
const { toggleLoginModule } = useRouterPush();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NForm size="large" :show-label="false">
|
||||
<NFormItem>
|
||||
<NInput :placeholder="$t('page.login.common.phonePlaceholder')" />
|
||||
</NFormItem>
|
||||
<NFormItem>
|
||||
<NInput :placeholder="$t('page.login.common.codePlaceholder')" />
|
||||
</NFormItem>
|
||||
<NSpace vertical :size="18" class="w-full">
|
||||
<NButton type="primary" size="large" block round>
|
||||
{{ $t('common.confirm') }}
|
||||
</NButton>
|
||||
<NButton size="large" block round @click="toggleLoginModule('pwd-login')">
|
||||
{{ $t('page.login.common.back') }}
|
||||
</NButton>
|
||||
</NSpace>
|
||||
</NForm>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
@ -1,78 +0,0 @@
|
||||
<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="$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="$t('page.login.common.codePlaceholder')" />
|
||||
<div class="w-18px"></div>
|
||||
<n-button size="large" :disabled="isCounting" :loading="smsLoading" @click="handleSmsCode">
|
||||
{{ label }}
|
||||
</n-button>
|
||||
</div>
|
||||
</n-form-item>
|
||||
<n-form-item path="imgCode">
|
||||
<n-input v-model:value="model.imgCode" :placeholder="$t('page.login.codeLogin.imageCodePlaceholder')" />
|
||||
<div class="pl-8px">
|
||||
<image-verify v-model:code="imgCode" />
|
||||
</div>
|
||||
</n-form-item>
|
||||
<n-space :vertical="true" :size="18">
|
||||
<n-button
|
||||
type="primary"
|
||||
size="large"
|
||||
:block="true"
|
||||
:round="true"
|
||||
: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-space>
|
||||
</n-form>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { reactive, ref } from 'vue';
|
||||
import type { FormInst } from 'naive-ui';
|
||||
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();
|
||||
const { label, isCounting, loading: smsLoading, getSmsCode } = useSmsCode();
|
||||
|
||||
const formRef = ref<HTMLElement & FormInst>();
|
||||
|
||||
const model = reactive({
|
||||
phone: '',
|
||||
code: '',
|
||||
imgCode: ''
|
||||
});
|
||||
|
||||
const imgCode = ref('');
|
||||
|
||||
const rules = {
|
||||
phone: formRules.phone,
|
||||
code: formRules.code,
|
||||
imgCode: getImgCodeRule(imgCode)
|
||||
};
|
||||
|
||||
function handleSmsCode() {
|
||||
getSmsCode(model.phone);
|
||||
}
|
||||
|
||||
async function handleSubmit() {
|
||||
await formRef.value?.validate();
|
||||
window.$message?.success($t('page.login.common.validateSuccess'));
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
@ -1,8 +0,0 @@
|
||||
import LoginBg from './login-bg/index.vue';
|
||||
import PwdLogin from './pwd-login/index.vue';
|
||||
import CodeLogin from './code-login/index.vue';
|
||||
import Register from './register-user/index.vue';
|
||||
import ResetPwd from './reset-pwd/index.vue';
|
||||
import BindWechat from './bind-wechat/index.vue';
|
||||
|
||||
export { LoginBg, PwdLogin, CodeLogin, Register, ResetPwd, BindWechat };
|
||||
@ -1,41 +0,0 @@
|
||||
<template>
|
||||
<svg
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
height="896"
|
||||
width="967.8852157128662"
|
||||
>
|
||||
<defs>
|
||||
<path
|
||||
id="path-2"
|
||||
opacity="1"
|
||||
fill-rule="evenodd"
|
||||
d="M896,448 C1142.6325445712241,465.5747656464056 695.2579309733121,896 448,896 C200.74206902668806,896 5.684341886080802e-14,695.2579309733121 0,448.0000000000001 C0,200.74206902668806 200.74206902668791,5.684341886080802e-14 447.99999999999994,0 C695.2579309733121,0 475,418 896,448Z"
|
||||
/>
|
||||
<linearGradient id="linearGradient-3" x1="0.5" y1="0" x2="0.5" y2="1">
|
||||
<stop offset="0" :stop-color="startColor" stop-opacity="1" />
|
||||
<stop offset="1" :stop-color="endColor" stop-opacity="1" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g opacity="1">
|
||||
<use xlink:href="#path-2" fill="url(#linearGradient-3)" fill-opacity="1" />
|
||||
</g>
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
interface Props {
|
||||
/** 过渡的开始颜色 */
|
||||
startColor?: string;
|
||||
/** 过渡的结束颜色 */
|
||||
endColor?: string;
|
||||
}
|
||||
|
||||
withDefaults(defineProps<Props>(), {
|
||||
startColor: '#28aff0',
|
||||
endColor: '#120fc4'
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
@ -1,35 +0,0 @@
|
||||
<template>
|
||||
<svg height="1337" width="1337">
|
||||
<defs>
|
||||
<path
|
||||
id="path-1"
|
||||
opacity="1"
|
||||
fill-rule="evenodd"
|
||||
d="M1337,668.5 C1337,1037.455193874239 1037.455193874239,1337 668.5,1337 C523.6725684305388,1337 337,1236 370.50000000000006,1094 C434.03835568300906,824.6732385973953 6.906089672974592e-14,892.6277623047779 0,668.5000000000001 C0,299.5448061257611 299.5448061257609,1.1368683772161603e-13 668.4999999999999,0 C1037.455193874239,0 1337,299.544806125761 1337,668.5Z"
|
||||
/>
|
||||
<linearGradient id="linearGradient-2" x1="0.79" y1="0.62" x2="0.21" y2="0.86">
|
||||
<stop offset="0" :stop-color="startColor" stop-opacity="1" />
|
||||
<stop offset="1" :stop-color="endColor" stop-opacity="1" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g opacity="1">
|
||||
<use xlink:href="#path-1" fill="url(#linearGradient-2)" fill-opacity="1" />
|
||||
</g>
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
interface Props {
|
||||
/** 过渡的开始颜色 */
|
||||
startColor?: string;
|
||||
/** 过渡的结束颜色 */
|
||||
endColor?: string;
|
||||
}
|
||||
|
||||
withDefaults(defineProps<Props>(), {
|
||||
startColor: '#28aff0',
|
||||
endColor: '#120fc4'
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
@ -1,4 +0,0 @@
|
||||
import CornerTop from './corner-top.vue';
|
||||
import CornerBottom from './corner-bottom.vue';
|
||||
|
||||
export { CornerTop, CornerBottom };
|
||||
@ -1,28 +0,0 @@
|
||||
<template>
|
||||
<div class="absolute-lt z-1 wh-full overflow-hidden">
|
||||
<div class="absolute -right-300px -top-900px <sm:(-right-100px -top-1170px)">
|
||||
<corner-top :start-color="lightColor" :end-color="darkColor" />
|
||||
</div>
|
||||
<div class="absolute -left-200px -bottom-400px <sm:(-left-100px -bottom-760px)">
|
||||
<corner-bottom :start-color="darkColor" :end-color="lightColor" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed } from 'vue';
|
||||
import { getColorPalette } from '@/utils';
|
||||
import { CornerBottom, CornerTop } from './components';
|
||||
|
||||
interface Props {
|
||||
/** 主题颜色 */
|
||||
themeColor: string;
|
||||
}
|
||||
|
||||
const props = defineProps<Props>();
|
||||
|
||||
const lightColor = computed(() => getColorPalette(props.themeColor, 3));
|
||||
const darkColor = computed(() => getColorPalette(props.themeColor, 6));
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
71
src/views/_builtin/login/components/pwd-login.vue
Normal file
71
src/views/_builtin/login/components/pwd-login.vue
Normal file
@ -0,0 +1,71 @@
|
||||
<script setup lang="ts">
|
||||
import { reactive } from 'vue';
|
||||
import { $t } from '@/locales';
|
||||
import { loginModuleRecord } from '@/constants/app';
|
||||
import { useRouterPush } from '@/hooks/common/router';
|
||||
import { useNaiveForm, useFormRules } from '@/hooks/common/form';
|
||||
import { useAuthStore } from '@/store/modules/auth';
|
||||
|
||||
defineOptions({
|
||||
name: 'PwdLogin'
|
||||
});
|
||||
|
||||
const authStore = useAuthStore();
|
||||
const { toggleLoginModule } = useRouterPush();
|
||||
const { formRef, validate } = useNaiveForm();
|
||||
const { constantRules } = useFormRules();
|
||||
|
||||
interface FormModel {
|
||||
userName: string;
|
||||
password: string;
|
||||
}
|
||||
|
||||
const model: FormModel = reactive({
|
||||
userName: 'Soybean',
|
||||
password: '123456'
|
||||
});
|
||||
|
||||
const rules: Record<keyof FormModel, App.Global.FormRule[]> = {
|
||||
userName: constantRules.userName,
|
||||
password: constantRules.pwd
|
||||
};
|
||||
|
||||
async function handleSubmit() {
|
||||
await validate();
|
||||
await authStore.login(model.userName, model.password);
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NForm ref="formRef" :model="model" :rules="rules" size="large" :show-label="false">
|
||||
<NFormItem path="userName">
|
||||
<NInput v-model:value="model.userName" :placeholder="$t('page.login.common.userNamePlaceholder')" />
|
||||
</NFormItem>
|
||||
<NFormItem path="password">
|
||||
<NInput
|
||||
v-model:value="model.password"
|
||||
type="password"
|
||||
:placeholder="$t('page.login.common.passwordPlaceholder')"
|
||||
/>
|
||||
</NFormItem>
|
||||
<NSpace :vertical="true" :size="24">
|
||||
<div class="flex-y-center justify-between">
|
||||
<NCheckbox>{{ $t('page.login.pwdLogin.rememberMe') }}</NCheckbox>
|
||||
<NButton quaternary>{{ $t('page.login.pwdLogin.forgetPassword') }}</NButton>
|
||||
</div>
|
||||
<NButton type="primary" size="large" block round :loading="authStore.loginLoading" @click="handleSubmit">
|
||||
{{ $t('common.confirm') }}
|
||||
</NButton>
|
||||
<div class="flex-y-center justify-between gap-12px">
|
||||
<NButton class="flex-1" block @click="toggleLoginModule('code-login')">
|
||||
{{ $t(loginModuleRecord['code-login']) }}
|
||||
</NButton>
|
||||
<NButton class="flex-1" block @click="toggleLoginModule('register')">
|
||||
{{ $t(loginModuleRecord.register) }}
|
||||
</NButton>
|
||||
</div>
|
||||
</NSpace>
|
||||
</NForm>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
@ -1,4 +0,0 @@
|
||||
import OtherLogin from './other-login.vue';
|
||||
import OtherAccount from './other-account.vue';
|
||||
|
||||
export { OtherLogin, OtherAccount };
|
||||
@ -1,60 +0,0 @@
|
||||
<template>
|
||||
<n-space :vertical="true">
|
||||
<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"
|
||||
:key="item.userName"
|
||||
type="primary"
|
||||
@click="login(item.userName, item.password)"
|
||||
>
|
||||
{{ item.label }}
|
||||
</n-button>
|
||||
</n-space>
|
||||
</n-space>
|
||||
</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>();
|
||||
|
||||
interface Account {
|
||||
key: Auth.RoleType;
|
||||
label: string;
|
||||
userName: string;
|
||||
password: string;
|
||||
}
|
||||
|
||||
const accounts: Account[] = [
|
||||
{
|
||||
key: 'super',
|
||||
label: userRoleLabels.super,
|
||||
userName: 'Super',
|
||||
password: 'super123'
|
||||
},
|
||||
{
|
||||
key: 'admin',
|
||||
label: userRoleLabels.admin,
|
||||
userName: 'Admin',
|
||||
password: 'admin123'
|
||||
},
|
||||
{
|
||||
key: 'user',
|
||||
label: userRoleLabels.user,
|
||||
userName: 'User01',
|
||||
password: 'user01123'
|
||||
}
|
||||
];
|
||||
|
||||
function login(userName: string, password: string) {
|
||||
emit('login', { userName, password });
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
@ -1,16 +0,0 @@
|
||||
<template>
|
||||
<n-space :vertical="true">
|
||||
<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" />
|
||||
</n-button>
|
||||
</div>
|
||||
</n-space>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { $t } from '@/locales';
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
@ -1,85 +0,0 @@
|
||||
<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="$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="$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">{{ $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"
|
||||
size="large"
|
||||
:block="true"
|
||||
:round="true"
|
||||
: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')">
|
||||
{{ loginModuleLabels['code-login'] }}
|
||||
</n-button>
|
||||
<div class="w-12px"></div>
|
||||
<n-button class="flex-1" :block="true" @click="toLoginModule('register')">
|
||||
{{ loginModuleLabels.register }}
|
||||
</n-button>
|
||||
</div>
|
||||
</n-space>
|
||||
<other-account @login="handleLoginOtherAccount" />
|
||||
</n-form>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { reactive, ref } from 'vue';
|
||||
import type { FormInst, FormRules } from 'naive-ui';
|
||||
import { loginModuleLabels } from '@/constants';
|
||||
import { useAuthStore } from '@/store';
|
||||
import { useRouterPush } from '@/composables';
|
||||
import { formRules } from '@/utils';
|
||||
import { OtherAccount } from './components';
|
||||
|
||||
const auth = useAuthStore();
|
||||
const { login } = useAuthStore();
|
||||
const { toLoginModule } = useRouterPush();
|
||||
|
||||
const formRef = ref<HTMLElement & FormInst>();
|
||||
|
||||
const model = reactive({
|
||||
userName: 'Soybean',
|
||||
password: 'soybean123'
|
||||
});
|
||||
|
||||
const rules: FormRules = {
|
||||
password: formRules.pwd
|
||||
};
|
||||
|
||||
const rememberMe = ref(false);
|
||||
|
||||
async function handleSubmit() {
|
||||
await formRef.value?.validate();
|
||||
|
||||
const { userName, password } = model;
|
||||
|
||||
login(userName, password);
|
||||
}
|
||||
|
||||
function handleLoginOtherAccount(param: { userName: string; password: string }) {
|
||||
const { userName, password } = param;
|
||||
login(userName, password);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
@ -1,82 +0,0 @@
|
||||
<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="$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="$t('page.login.common.codePlaceholder')" />
|
||||
<div class="w-18px"></div>
|
||||
<n-button size="large" :disabled="isCounting" :loading="smsLoading" @click="handleSmsCode">
|
||||
{{ label }}
|
||||
</n-button>
|
||||
</div>
|
||||
</n-form-item>
|
||||
<n-form-item path="pwd">
|
||||
<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="$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">
|
||||
{{ $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>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { reactive, ref, toRefs } from 'vue';
|
||||
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();
|
||||
|
||||
const formRef = ref<HTMLElement & FormInst>();
|
||||
|
||||
const model = reactive({
|
||||
phone: '',
|
||||
code: '',
|
||||
pwd: '',
|
||||
confirmPwd: ''
|
||||
});
|
||||
|
||||
const rules: FormRules = {
|
||||
phone: formRules.phone,
|
||||
code: formRules.code,
|
||||
pwd: formRules.pwd,
|
||||
confirmPwd: getConfirmPwdRule(toRefs(model).pwd)
|
||||
};
|
||||
|
||||
const agreement = ref(false);
|
||||
|
||||
function handleSmsCode() {
|
||||
start();
|
||||
}
|
||||
|
||||
async function handleSubmit() {
|
||||
await formRef.value?.validate();
|
||||
window.$message?.success($t('page.login.common.validateSuccess'));
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
31
src/views/_builtin/login/components/register.vue
Normal file
31
src/views/_builtin/login/components/register.vue
Normal file
@ -0,0 +1,31 @@
|
||||
<script setup lang="ts">
|
||||
import { $t } from '@/locales';
|
||||
import { useRouterPush } from '@/hooks/common/router';
|
||||
|
||||
defineOptions({
|
||||
name: 'CodeLogin'
|
||||
});
|
||||
|
||||
const { toggleLoginModule } = useRouterPush();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NForm size="large" :show-label="false">
|
||||
<NFormItem>
|
||||
<NInput :placeholder="$t('page.login.common.phonePlaceholder')" />
|
||||
</NFormItem>
|
||||
<NFormItem>
|
||||
<NInput :placeholder="$t('page.login.common.codePlaceholder')" />
|
||||
</NFormItem>
|
||||
<NSpace vertical :size="18" class="w-full">
|
||||
<NButton type="primary" size="large" block round>
|
||||
{{ $t('common.confirm') }}
|
||||
</NButton>
|
||||
<NButton size="large" block round @click="toggleLoginModule('pwd-login')">
|
||||
{{ $t('page.login.common.back') }}
|
||||
</NButton>
|
||||
</NSpace>
|
||||
</NForm>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
11
src/views/_builtin/login/components/reset-pwd.vue
Normal file
11
src/views/_builtin/login/components/reset-pwd.vue
Normal file
@ -0,0 +1,11 @@
|
||||
<script setup lang="ts">
|
||||
defineOptions({
|
||||
name: 'ResetPwd'
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div></div>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
@ -1,79 +0,0 @@
|
||||
<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="$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="$t('page.login.common.codePlaceholder')" />
|
||||
<div class="w-18px"></div>
|
||||
<n-button size="large" :disabled="isCounting" :loading="smsLoading" @click="handleSmsCode">
|
||||
{{ label }}
|
||||
</n-button>
|
||||
</div>
|
||||
</n-form-item>
|
||||
<n-form-item path="pwd">
|
||||
<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="$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">
|
||||
{{ $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>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { reactive, ref, toRefs } from 'vue';
|
||||
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();
|
||||
|
||||
const formRef = ref<HTMLElement & FormInst>();
|
||||
|
||||
const model = reactive({
|
||||
phone: '',
|
||||
code: '',
|
||||
pwd: '',
|
||||
confirmPwd: ''
|
||||
});
|
||||
|
||||
const rules: FormRules = {
|
||||
phone: formRules.phone,
|
||||
code: formRules.code,
|
||||
pwd: formRules.pwd,
|
||||
confirmPwd: getConfirmPwdRule(toRefs(model).pwd)
|
||||
};
|
||||
|
||||
function handleSmsCode() {
|
||||
start();
|
||||
}
|
||||
|
||||
async function handleSubmit() {
|
||||
await formRef.value?.validate();
|
||||
window.$message?.success($t('page.login.common.validateSuccess'));
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
@ -1,47 +1,30 @@
|
||||
<template>
|
||||
<div class="relative flex-center wh-full" :style="{ backgroundColor: bgColor }">
|
||||
<dark-mode-switch
|
||||
:dark="theme.darkMode"
|
||||
class="absolute left-48px top-24px z-3 text-20px"
|
||||
@update:dark="theme.setDarkMode"
|
||||
/>
|
||||
<n-card :bordered="false" size="large" class="z-4 !w-auto rounded-20px shadow-sm">
|
||||
<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">{{ $t('system.title') }}</n-gradient-text>
|
||||
</header>
|
||||
<main class="pt-24px">
|
||||
<h3 class="text-18px text-primary font-medium">{{ activeModule.label }}</h3>
|
||||
<div class="pt-24px">
|
||||
<transition name="fade-slide" mode="out-in" appear>
|
||||
<component :is="activeModule.component" />
|
||||
</transition>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</n-card>
|
||||
<login-bg :theme-color="bgThemeColor" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
import type { Component } from 'vue';
|
||||
import { loginModuleLabels } from '@/constants';
|
||||
import { useThemeStore } from '@/store';
|
||||
import { getColorPalette, mixColor } from '@/utils';
|
||||
import { getColorPalette, mixColor } from '@sa/utils';
|
||||
import { $t } from '@/locales';
|
||||
import { BindWechat, CodeLogin, LoginBg, PwdLogin, Register, ResetPwd } from './components';
|
||||
import { useAppStore } from '@/store/modules/app';
|
||||
import { useThemeStore } from '@/store/modules/theme';
|
||||
import { loginModuleRecord } from '@/constants/app';
|
||||
import PwdLogin from './components/pwd-login.vue';
|
||||
import CodeLogin from './components/code-login.vue';
|
||||
import Register from './components/register.vue';
|
||||
import ResetPwd from './components/reset-pwd.vue';
|
||||
import BindWechat from './components/bind-wechat.vue';
|
||||
|
||||
interface Props {
|
||||
/** 登录模块分类 */
|
||||
module: UnionKey.LoginModule;
|
||||
/**
|
||||
* the login module
|
||||
*/
|
||||
module?: UnionKey.LoginModule;
|
||||
}
|
||||
|
||||
const props = defineProps<Props>();
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
module: 'pwd-login'
|
||||
});
|
||||
|
||||
const theme = useThemeStore();
|
||||
const appStore = useAppStore();
|
||||
const themeStore = useThemeStore();
|
||||
|
||||
interface LoginModule {
|
||||
key: UnionKey.LoginModule;
|
||||
@ -50,29 +33,65 @@ interface LoginModule {
|
||||
}
|
||||
|
||||
const modules: LoginModule[] = [
|
||||
{ key: 'pwd-login', label: loginModuleLabels['pwd-login'], component: PwdLogin },
|
||||
{ key: 'code-login', label: loginModuleLabels['code-login'], component: CodeLogin },
|
||||
{ key: 'register', label: loginModuleLabels.register, component: Register },
|
||||
{ key: 'reset-pwd', label: loginModuleLabels['reset-pwd'], component: ResetPwd },
|
||||
{ key: 'bind-wechat', label: loginModuleLabels['bind-wechat'], component: BindWechat }
|
||||
{ key: 'pwd-login', label: loginModuleRecord['pwd-login'], component: PwdLogin },
|
||||
{ key: 'code-login', label: loginModuleRecord['code-login'], component: CodeLogin },
|
||||
{ key: 'register', label: loginModuleRecord.register, component: Register },
|
||||
{ key: 'reset-pwd', label: loginModuleRecord['reset-pwd'], component: ResetPwd },
|
||||
{ key: 'bind-wechat', label: loginModuleRecord['bind-wechat'], component: BindWechat }
|
||||
];
|
||||
|
||||
const activeModule = computed(() => {
|
||||
const active: LoginModule = { ...modules[0] };
|
||||
const findItem = modules.find(item => item.key === props.module);
|
||||
if (findItem) {
|
||||
Object.assign(active, findItem);
|
||||
}
|
||||
return active;
|
||||
return findItem || modules[0];
|
||||
});
|
||||
|
||||
const bgThemeColor = computed(() => (theme.darkMode ? getColorPalette(theme.themeColor, 7) : theme.themeColor));
|
||||
const bgThemeColor = computed(() =>
|
||||
themeStore.darkMode ? getColorPalette(themeStore.themeColor, 7) : themeStore.themeColor
|
||||
);
|
||||
|
||||
const bgColor = computed(() => {
|
||||
const COLOR_WHITE = '#ffffff';
|
||||
const ratio = theme.darkMode ? 0.5 : 0.2;
|
||||
return mixColor(COLOR_WHITE, theme.themeColor, ratio);
|
||||
|
||||
const ratio = themeStore.darkMode ? 0.5 : 0.2;
|
||||
|
||||
return mixColor(COLOR_WHITE, themeStore.themeColor, ratio);
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="relative flex-center wh-full overflow-hidden" :style="{ backgroundColor: bgColor }">
|
||||
<WaveBg :theme-color="bgThemeColor" />
|
||||
<NCard class="relative w-auto rd-12px z-4">
|
||||
<div class="w-400px <sm:w-300px">
|
||||
<header class="flex-y-center justify-between">
|
||||
<SystemLogo class="text-64px text-primary <sm:text-48px" />
|
||||
<h3 class="text-28px font-500 text-primary <sm:text-22px">{{ $t('system.title') }}</h3>
|
||||
<div class="i-flex-vertical">
|
||||
<ThemeSchemaSwitch
|
||||
:theme-schema="themeStore.themeScheme"
|
||||
:show-tooltip="false"
|
||||
class="text-20px <sm:text-18px"
|
||||
@switch="themeStore.toggleThemeScheme"
|
||||
/>
|
||||
<LangSwitch
|
||||
:lang="appStore.locale"
|
||||
:lang-options="appStore.localeOptions"
|
||||
:show-tooltip="false"
|
||||
@change-lang="appStore.changeLocale"
|
||||
/>
|
||||
</div>
|
||||
</header>
|
||||
<main class="pt-24px">
|
||||
<h3 class="text-18px text-primary font-medium">{{ $t(activeModule.label) }}</h3>
|
||||
<div class="pt-24px">
|
||||
<Transition :name="themeStore.page.animateMode" mode="out-in" appear>
|
||||
<component :is="activeModule.component" />
|
||||
</Transition>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</NCard>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
|
||||
@ -1,7 +0,0 @@
|
||||
<template>
|
||||
<exception-base type="404" />
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup></script>
|
||||
|
||||
<style scoped></style>
|
||||
Reference in New Issue
Block a user