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

refactor(projects): 精简版+动态路由权限初步

Browse Source
This commit is contained in:
Soybean
2022-01-03 22:20:10 +08:00
parent 7a0648dba5
commit de2057f141
354 changed files with 2053 additions and 22117 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/views/system/exception/403.vue
View File

@ -1,8 +1,6 @@
<template>
<exception-base type="403" />
<div></div>
</template>
<script lang="ts" setup>
import { ExceptionBase } from './components';
</script>
<script setup lang="ts"></script>
<style scoped></style>

6
src/views/system/exception/404.vue
View File

@ -1,8 +1,6 @@
<template>
<exception-base type="404" />
<div>NotFound</div>
</template>
<script lang="ts" setup>
import { ExceptionBase } from './components';
</script>
<script setup lang="ts"></script>
<style scoped></style>

6
src/views/system/exception/500.vue
View File

@ -1,8 +1,6 @@
<template>
<exception-base type="500" />
<div>NotFound</div>
</template>
<script lang="ts" setup>
import { ExceptionBase } from './components';
</script>
<script setup lang="ts"></script>
<style scoped></style>

26
src/views/system/exception/components/ExceptionBase.vue
View File

@ -1,26 +0,0 @@
<template>
<div class="flex-col-center wh-full">
<div class="w-400px h-400px text-primary">
<svg-no-permission v-if="type === '403'" />
<svg-not-found v-if="type === '404'" />
<svg-service-error v-if="type === '500'" />
</div>
<router-link :to="ROUTE_HOME.path">
<n-button type="primary">回到首页</n-button>
</router-link>
</div>
</template>
<script lang="ts" setup>
import { NButton } from 'naive-ui';
import { SvgNoPermission, SvgNotFound, SvgServiceError } from '@/components';
import { ROUTE_HOME } from '@/router';
interface Props {
/** 异常类型 */
type: '403' | '404' | '500';
}
defineProps<Props>();
</script>
<style scoped></style>

3
src/views/system/exception/components/index.ts
View File

@ -1,3 +0,0 @@
import ExceptionBase from './ExceptionBase.vue';
export { ExceptionBase };

8
src/views/system/index.ts
View File

@ -1,6 +1,6 @@
import Login from './login/index.vue';
import NoPermission from './exception/403.vue';
import NotFound from './exception/404.vue';
import ServiceError from './exception/500.vue';
const Login = () => import('./login/index.vue');
const NoPermission = () => import('./exception/403.vue');
const NotFound = () => import('./exception/404.vue');
const ServiceError = () => import('./exception/500.vue');
export { Login, NoPermission, NotFound, ServiceError };

6
src/views/system/login/components/BindWechat/index.vue
View File

@ -1,6 +0,0 @@
<template>
<div></div>
</template>
<script lang="ts" setup></script>
<style scoped></style>

76
src/views/system/login/components/CodeLogin/index.vue
View File

@ -1,76 +0,0 @@
<template>
<div class="pt-24px">
<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" @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="large">
<login-agreement v-model:value="agreement" class="pb-12px" />
<n-button type="primary" size="large" :block="true" :round="true" :loading="loading" @click="handleSubmit">
确定
</n-button>
<n-button size="large" :block="true" :round="true" @click="toCurrentLogin('pwd-login')">返回</n-button>
</n-space>
</n-form>
</div>
</template>
<script lang="ts" setup>
import { reactive, ref } from 'vue';
import { NForm, NFormItem, NInput, NSpace, NButton } from 'naive-ui';
import type { FormInst } from 'naive-ui';
import { ImageVerify } from '@/components';
import { useRouterPush, useLogin } from '@/composables';
import { useSmsCode, useAgreement } from '@/hooks';
import { formRules, getImgCodeRule } from '@/utils';
import { LoginAgreement } from '../common';
const { toCurrentLogin } = useRouterPush();
const { loading, login } = useLogin();
const { label, isCounting, getSmsCode } = useSmsCode();
const { agreement, isAgree } = useAgreement();
const formRef = ref<(HTMLElement & FormInst) | null>(null);
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);
}
function handleSubmit(e: MouseEvent) {
if (!formRef.value) return;
e.preventDefault();
formRef.value.validate(errors => {
if (!errors) {
if (!isAgree()) return;
const { phone, code } = model;
login({ phone, pwdOrCode: code, type: 'sms' });
}
});
}
</script>
<style scoped></style>

13
src/views/system/login/components/PwdLogin/components/OtherLogin.vue
View File

@ -1,13 +0,0 @@
<template>
<n-space :vertical="true">
<n-divider class="!mb-0 text-14px text-[#666]">其他登录方式</n-divider>
<div class="flex-center">
<icon-mdi-wechat class="text-22px text-[#888] hover:text-[#52BF5E] cursor-pointer" />
</div>
</n-space>
</template>
<script lang="ts" setup>
import { NSpace, NDivider } from 'naive-ui';
</script>
<style scoped></style>

3
src/views/system/login/components/PwdLogin/components/index.ts
View File

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

73
src/views/system/login/components/PwdLogin/index.vue
View File

@ -1,73 +0,0 @@
<template>
<div class="pt-24px">
<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="pwd">
<n-input v-model:value="model.pwd" 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>
<span class="text-primary cursor-pointer" @click="toCurrentLogin('reset-pwd')">忘记密码？</span>
</div>
<login-agreement v-model:value="agreement" />
<n-button type="primary" size="large" :block="true" :round="true" :loading="loading" @click="handleSubmit">
确定
</n-button>
<div class="flex-y-center justify-between">
<n-button class="flex-1" :block="true" @click="toCurrentLogin('code-login')">
{{ EnumLoginModule['code-login'] }}
</n-button>
<div class="w-12px"></div>
<n-button class="flex-1" :block="true" @click="toCurrentLogin('register')">
{{ EnumLoginModule.register }}
</n-button>
</div>
</n-space>
</n-form>
<other-login />
</div>
</template>
<script lang="ts" setup>
import { reactive, ref } from 'vue';
import { NForm, NFormItem, NInput, NSpace, NCheckbox, NButton } from 'naive-ui';
import type { FormInst, FormRules } from 'naive-ui';
import { EnumLoginModule } from '@/enum';
import { useRouterPush, useLogin } from '@/composables';
import { useAgreement } from '@/hooks';
import { formRules } from '@/utils';
import { OtherLogin } from './components';
import { LoginAgreement } from '../common';
const { toCurrentLogin } = useRouterPush();
const { loading, login } = useLogin();
const { agreement, isAgree } = useAgreement();
const formRef = ref<(HTMLElement & FormInst) | null>(null);
const model = reactive({
phone: '15170283876',
pwd: 'a123456789'
});
const rules: FormRules = {
phone: formRules.phone,
pwd: formRules.pwd
};
const rememberMe = ref(false);
function handleSubmit(e: MouseEvent) {
if (!formRef.value) return;
e.preventDefault();
formRef.value.validate(errors => {
if (!errors) {
if (!isAgree()) return;
const { phone, pwd } = model;
login({ phone, pwdOrCode: pwd, type: 'pwd' });
}
});
}
</script>
<style scoped></style>

88
src/views/system/login/components/Register/index.vue
View File

@ -1,88 +0,0 @@
<template>
<div class="pt-24px">
<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" @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-checkbox v-model:checked="agreement">我已经仔细阅读并接受用户协议和隐私政策</n-checkbox>
<n-button type="primary" size="large" :block="true" :round="true" @click="handleSubmit">确定</n-button>
<n-button size="large" :block="true" :round="true" @click="toCurrentLogin('pwd-login')">返回</n-button>
</n-space>
</n-form>
</div>
</template>
<script lang="ts" setup>
import { reactive, ref } from 'vue';
import { NForm, NFormItem, NInput, NSpace, NCheckbox, NButton, useMessage } from 'naive-ui';
import type { FormInst } from 'naive-ui';
import { useRouterPush } from '@/composables';
import { useSmsCode } from '@/hooks';
const message = useMessage();
const { toCurrentLogin } = useRouterPush();
const { label, isCounting, start } = useSmsCode();
const formRef = ref<(HTMLElement & FormInst) | null>(null);
const model = reactive({
phone: '',
code: '',
pwd: '',
confirmPwd: ''
});
const rules = {
phone: {
required: true,
trigger: ['blur', 'input'],
message: '请输入手机号'
},
code: {
required: true,
trigger: ['blur', 'input'],
message: '请输入验证码'
},
pwd: {
required: true,
trigger: ['blur', 'input'],
message: '请输入密码'
},
confirmPwd: {
required: true,
trigger: ['blur', 'input'],
message: '请输入确认密码'
}
};
const agreement = ref(false);
function handleSmsCode() {
start();
}
function handleSubmit(e: MouseEvent) {
if (!formRef.value) return;
e.preventDefault();
formRef.value.validate(errors => {
if (!errors) {
message.success('验证成功');
} else {
message.error('验证失败');
}
});
}
</script>
<style scoped></style>

86
src/views/system/login/components/ResetPwd/index.vue
View File

@ -1,86 +0,0 @@
<template>
<div class="pt-24px">
<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" @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="toCurrentLogin('pwd-login')">返回</n-button>
</n-space>
</n-form>
</div>
</template>
<script lang="ts" setup>
import { reactive, ref } from 'vue';
import { NForm, NFormItem, NInput, NSpace, NButton, useMessage } from 'naive-ui';
import type { FormInst } from 'naive-ui';
import { useRouterPush } from '@/composables';
import { useSmsCode } from '@/hooks';
const message = useMessage();
const { toCurrentLogin } = useRouterPush();
const { label, isCounting, start } = useSmsCode();
const formRef = ref<(HTMLElement & FormInst) | null>(null);
const model = reactive({
phone: '',
code: '',
pwd: '',
confirmPwd: ''
});
const rules = {
phone: {
required: true,
trigger: ['blur', 'input'],
message: '请输入手机号'
},
code: {
required: true,
trigger: ['blur', 'input'],
message: '请输入验证码'
},
pwd: {
required: true,
trigger: ['blur', 'input'],
message: '请输入密码'
},
confirmPwd: {
required: true,
trigger: ['blur', 'input'],
message: '请输入确认密码'
}
};
function handleSmsCode() {
start();
}
function handleSubmit(e: MouseEvent) {
if (!formRef.value) return;
e.preventDefault();
formRef.value.validate(errors => {
if (!errors) {
message.success('验证成功');
} else {
message.error('验证失败');
}
});
}
</script>
<style scoped></style>

41
src/views/system/login/components/common/LoginAgreement.vue
View File

@ -1,41 +0,0 @@
<template>
<div class="w-full text-[14px]">
<n-checkbox v-model:checked="checked">我已经仔细阅读并接受</n-checkbox>
<n-button :text="true" type="primary">《用户协议》</n-button>
<n-button :text="true" type="primary">《隐私权政策》</n-button>
</div>
</template>
<script setup lang="ts">
import { watch } from 'vue';
import { NCheckbox, NButton } from 'naive-ui';
import { useBoolean } from '@/hooks';
interface Props {
/** 是否选中 */
value: boolean;
}
interface Emits {
(e: 'update:value', value: boolean): void;
}
const props = withDefaults(defineProps<Props>(), {
value: true
});
const emit = defineEmits<Emits>();
const { bool: checked, setBool } = useBoolean(props.value);
watch(
() => props.value,
newValue => {
setBool(newValue);
}
);
watch(checked, newValue => {
emit('update:value', newValue);
});
</script>
<style scoped></style>

3
src/views/system/login/components/common/index.ts
View File

@ -1,3 +0,0 @@
import LoginAgreement from './LoginAgreement.vue';
export { LoginAgreement };

7
src/views/system/login/components/index.ts
View File

@ -1,7 +0,0 @@
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 { PwdLogin, CodeLogin, Register, ResetPwd, BindWechat };

76
src/views/system/login/index.vue
View File

@ -1,76 +1,6 @@
<template>
<div class="login-bg relative flex-center wh-full">
<n-card :bordered="false" size="large" class="z-20 !w-auto rounded-20px shadow-sm">
<div class="w-360px">
<header class="flex-y-center justify-between">
<div class="w-70px h-70px rounded-35px overflow-hidden">
<system-logo class="wh-full" :fill="true" :color="theme.themeColor" />
</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>
<component :is="activeModule.component" />
</main>
</div>
</n-card>
<login-bg :theme-color="theme.themeColor" />
</div>
<div></div>
</template>
<script lang="ts" setup>
import { computed } from 'vue';
import type { Component } from 'vue';
import { NCard, NGradientText } from 'naive-ui';
import { SystemLogo, LoginBg } from '@/components';
import { useAppInfo } from '@/composables';
import { EnumLoginModule } from '@/enum';
import { mixColor } from '@/utils';
import type { LoginModuleType } from '@/interface';
import { PwdLogin, CodeLogin, Register, ResetPwd, BindWechat } from './components';
import { useThemeStore } from '@/store';
interface Props {
/** 登录模块分类 */
module: LoginModuleType;
}
interface LoginModule {
key: LoginModuleType;
label: string;
component: Component;
}
const props = defineProps<Props>();
const theme = useThemeStore();
const { title } = useAppInfo();
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 bgColor = computed(() => {
const COLOR_WHITE = '#ffffff';
const ratio = theme.darkMode ? 0.6 : 0.3;
return mixColor(COLOR_WHITE, theme.themeColor, ratio);
});
</script>
<style scoped>
.login-bg {
background-color: v-bind(bgColor);
}
</style>
<script setup lang="ts"></script>
<style scoped></style>