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 router system [新的路由系统]

Browse Source
This commit is contained in:
Soybean
2022-11-08 01:14:59 +08:00
parent 40c1e13b50
commit c7b6a3fbec
54 changed files with 1328 additions and 759 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
src/views/_builtin/login/components/BindWechat/index.vue Normal file
View File

@ -0,0 +1,55 @@
<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-form-item>
<n-form-item path="code">
<div class="flex-y-center w-full">
<n-input v-model:value="model.code" placeholder="验证码" />
<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">确定</n-button>
<n-button size="large" :block="true" :round="true" @click="toLoginModule('pwd-login')">返回</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';
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('验证成功!');
}
</script>
<style scoped></style>

75
src/views/_builtin/login/components/CodeLogin/index.vue Normal file
View File

@ -0,0 +1,75 @@
<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-form-item>
<n-form-item path="code">
<div class="flex-y-center w-full">
<n-input v-model:value="model.code" placeholder="验证码" />
<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="验证码,点击图片刷新" />
<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"
>
确定
</n-button>
<n-button size="large" :block="true" :round="true" @click="toLoginModule('pwd-login')">返回</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';
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('验证成功!');
}
</script>
<style scoped></style>

41
src/views/_builtin/login/components/LoginBg/components/CornerBottom.vue Normal file
View File

@ -0,0 +1,41 @@
<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>

35
src/views/_builtin/login/components/LoginBg/components/CornerTop.vue Normal file
View File

@ -0,0 +1,35 @@
<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>

4
src/views/_builtin/login/components/LoginBg/components/index.ts Normal file
View File

@ -0,0 +1,4 @@
import CornerTop from './CornerTop.vue';
import CornerBottom from './CornerBottom.vue';
export { CornerTop, CornerBottom };

28
src/views/_builtin/login/components/LoginBg/index.vue Normal file
View File

@ -0,0 +1,28 @@
<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>

47
src/views/_builtin/login/components/PwdLogin/components/OtherAccount.vue Normal file
View File

@ -0,0 +1,47 @@
<template>
<n-space :vertical="true">
<n-divider class="!mb-0 text-14px text-[#666]">其他账户登录</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>
interface Emits {
(e: 'login', param: { userName: string; password: string }): void;
}
const emit = defineEmits<Emits>();
const accounts = [
{
label: '超级管理员',
userName: 'Super',
password: 'super123'
},
{
label: '管理员',
userName: 'Admin',
password: 'admin123'
},
{
label: '普通用户',
userName: 'User01',
password: 'user01123'
}
];
function login(userName: string, password: string) {
emit('login', { userName, password });
}
</script>
<style scoped></style>

14
src/views/_builtin/login/components/PwdLogin/components/OtherLogin.vue Normal file
View File

@ -0,0 +1,14 @@
<template>
<n-space :vertical="true">
<n-divider class="!mb-0 text-14px text-[#666]">其他登录方式</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></script>
<style scoped></style>

4
src/views/_builtin/login/components/PwdLogin/components/index.ts Normal file
View File

@ -0,0 +1,4 @@
import OtherLogin from './OtherLogin.vue';
import OtherAccount from './OtherAccount.vue';
export { OtherLogin, OtherAccount };

78
src/views/_builtin/login/components/PwdLogin/index.vue Normal file
View File

@ -0,0 +1,78 @@
<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-form-item>
<n-form-item path="password">
<n-input v-model:value="model.password" type="password" show-password-on="click" placeholder="请输入密码" />
</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>
</div>
<n-button
type="primary"
size="large"
:block="true"
:round="true"
:loading="auth.loginLoading"
@click="handleSubmit"
>
确定
</n-button>
<div class="flex-y-center justify-between">
<n-button class="flex-1" :block="true" @click="toLoginModule('code-login')">
{{ EnumLoginModule['code-login'] }}
</n-button>
<div class="w-12px"></div>
<n-button class="flex-1" :block="true" @click="toLoginModule('register')">
{{ EnumLoginModule.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 { EnumLoginModule } from '@/enum';
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>

67
src/views/_builtin/login/components/Register/index.vue Normal file
View File

@ -0,0 +1,67 @@
<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-form-item>
<n-form-item path="code">
<div class="flex-y-center w-full">
<n-input v-model:value="model.code" placeholder="验证码" />
<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" placeholder="密码" />
</n-form-item>
<n-form-item path="confirmPwd">
<n-input v-model:value="model.confirmPwd" placeholder="确认密码" />
</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-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';
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('验证成功!');
}
</script>
<style scoped></style>

64
src/views/_builtin/login/components/ResetPwd/index.vue Normal file
View File

@ -0,0 +1,64 @@
<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-form-item>
<n-form-item path="code">
<div class="flex-y-center w-full">
<n-input v-model:value="model.code" placeholder="验证码" />
<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" placeholder="密码" />
</n-form-item>
<n-form-item path="confirmPwd">
<n-input v-model:value="model.confirmPwd" placeholder="确认密码" />
</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-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';
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('验证成功!');
}
</script>
<style scoped></style>

8
src/views/_builtin/login/components/index.ts Normal file
View File

@ -0,0 +1,8 @@
import LoginBg from './LoginBg/index.vue';
import PwdLogin from './PwdLogin/index.vue';
import CodeLogin from './CodeLogin/index.vue';
import Register from './Register/index.vue';
import ResetPwd from './ResetPwd/index.vue';
import BindWechat from './BindWechat/index.vue';
export { LoginBg, PwdLogin, CodeLogin, Register, ResetPwd, BindWechat };