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

7
src/views/_builtin/403/index.vue Normal file
View File

@ -0,0 +1,7 @@
<template>
<exception-base type="403" />
</template>
<script lang="ts" setup></script>
<style scoped></style>

7
src/views/_builtin/404/index.vue Normal file
View File

@ -0,0 +1,7 @@
<template>
<exception-base type="404" />
</template>
<script lang="ts" setup></script>
<style scoped></style>

7
src/views/_builtin/500/index.vue Normal file
View File

@ -0,0 +1,7 @@
<template>
<exception-base type="500" />
</template>
<script lang="ts" setup></script>
<style scoped></style>

107
src/views/_builtin/constant-page/index.vue Normal file
View File

@ -0,0 +1,107 @@
<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-16px 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>

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

81
src/views/_builtin/login/index.vue Normal file
View File

@ -0,0 +1,81 @@
<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">
<div class="w-70px h-70px rounded-35px overflow-hidden">
<system-logo class="text-70px text-primary" :fill="true" />
</div>
<n-gradient-text type="primary" :size="28">{{ 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 { EnumLoginModule } from '@/enum';
import { useThemeStore } from '@/store';
import { useAppInfo } from '@/composables';
import { getColorPalette, mixColor } from '@/utils';
import { BindWechat, CodeLogin, LoginBg, PwdLogin, Register, ResetPwd } from './components';
interface Props {
/** 登录模块分类 */
module: EnumType.LoginModuleKey;
}
const props = defineProps<Props>();
const theme = useThemeStore();
const { title } = useAppInfo();
interface LoginModule {
key: EnumType.LoginModuleKey;
label: EnumLoginModule;
component: Component;
}
const modules: LoginModule[] = [
{ key: 'pwd-login', label: EnumLoginModule['pwd-login'], component: PwdLogin },
{ key: 'code-login', label: EnumLoginModule['code-login'], component: CodeLogin },
{ key: 'register', label: EnumLoginModule.register, component: Register },
{ key: 'reset-pwd', label: EnumLoginModule['reset-pwd'], component: ResetPwd },
{ key: 'bind-wechat', label: EnumLoginModule['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;
});
const bgThemeColor = computed(() => (theme.darkMode ? getColorPalette(theme.themeColor, 7) : theme.themeColor));
const bgColor = computed(() => {
const COLOR_WHITE = '#ffffff';
const ratio = theme.darkMode ? 0.5 : 0.2;
return mixColor(COLOR_WHITE, theme.themeColor, ratio);
});
</script>
<style scoped></style>

7
src/views/_builtin/not-found/index.vue Normal file
View File

@ -0,0 +1,7 @@
<template>
<exception-base type="404" />
</template>
<script lang="ts" setup></script>
<style scoped></style>