GTsoft/ruoyi-plus-soybean
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(projects): 路由组件导入拆分

Browse Source
This commit is contained in:
Soybean 2021-10-19 18:51:36 +08:00
parent 7654b2adf3
commit 3edf46eb52
24 changed files with 266 additions and 194 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/enum/route.ts
View File

@ -14,13 +14,17 @@ export enum EnumRoutePath {
'document_vue' = '/document/vue',
'document_vite' = '/document/vite',
'document_naive' = '/document/naive',
'component' = '/component',
'component_map' = '/component/map',
'component_video' = '/component/video',
'multi-menu' = '/multi-menu',
'multi-menu_first' = '/multi-menu/first',
'multi-menu_first_second' = '/multi-menu/first/second',
'exception' = '/exception',
'exception_403' = '/exception/403',
'exception_404' = '/exception/404',
'exception_500' = '/exception/500'
'exception_500' = '/exception/500',
'about' = '/about'
}
export enum EnumRouteTitle {
@ -39,11 +43,15 @@ export enum EnumRouteTitle {
'document_vue' = 'vue文档',
'document_vite' = 'vite文档',
'document_naive' = 'naive文档',
'component' = '组件插件',
'component_map' = '地图插件',
'component_video' = '视频插件',
'multi-menu' = '多级菜单',
'multi-menu_first' = '一级菜单',
'multi-menu_first_second' = '二级菜单',
'exception' = '异常页',
'exception_403' = '异常页-403',
'exception_404' = '异常页-404',
'exception_500' = '异常页-500'
'exception_500' = '异常页-500',
'about' = '关于'
}

2
src/layouts/BasicLayout/components/GlobalContent/index.vue
View File

@ -1,6 +1,6 @@
<template>
<div
class="flex-1 flex-col-stretch p-10px bg-[#f5f7f9] dark:bg-black"
class="flex-1 flex-col-stretch p-10px bg-[#F6F9F8] dark:bg-black"
:class="{ 'overflow-hidden': routeProps.fullPage }"
>
<router-view v-slot="{ Component, route }">

2
src/layouts/BasicLayout/components/GlobalFooter/index.vue
View File

@ -1,6 +1,6 @@
<template>
<n-layout-footer>
<div class="flex-center h-48px text-[#333639] dark:text-[#ffffffd1]">Copyright ©2021 Soybean Admin</div>
<div class="flex-center h-48px bg-white text-[#333639] dark:text-[#ffffffd1]">Copyright ©2021 Soybean Admin</div>
</n-layout-footer>
</template>

2
src/layouts/BlankLayout/index.vue
View File

@ -1,6 +1,6 @@
<template>
<n-scrollbar ref="scrollbar" class="h-full" :x-scrollable="true" :content-class="routeProps.fullPage ? 'h-full' : ''">
<div class="inline-block w-full h-full">
<div class="inline-block w-full h-full bg-[#F6F9F8]">
<router-view v-slot="{ Component, route: itemRoute }">
<transition :name="theme.pageStyle.animateType" mode="out-in" appear>
<keep-alive :include="cacheRoutes">

6
src/router/components/about.ts Normal file
View File

@ -0,0 +1,6 @@
import { RouteNameMap, setCacheName } from '../helpers';
import About from '@/views/about/index.vue';
setCacheName(About, RouteNameMap.get('about'));
export { About };

9
src/router/components/component.ts Normal file
View File

@ -0,0 +1,9 @@
import { RouteNameMap, setCacheName } from '../helpers';
import ComponentMap from '@/views/component/map/index.vue';
import ComponentVideo from '@/views/component/video/index.vue';
setCacheName(ComponentMap, RouteNameMap.get('component_map'));
setCacheName(ComponentVideo, RouteNameMap.get('component_video'));
export { ComponentMap, ComponentVideo };

8
src/router/components/dashboard.ts Normal file
View File

@ -0,0 +1,8 @@
import { RouteNameMap, setCacheName } from '../helpers';
import DashboardAnalysis from '@/views/dashboard/analysis/index.vue';
import DashboardWorkbench from '@/views/dashboard/workbench/index.vue';
setCacheName(DashboardAnalysis, RouteNameMap.get('dashboard_analysis'));
setCacheName(DashboardWorkbench, RouteNameMap.get('dashboard_workbench'));
export { DashboardAnalysis, DashboardWorkbench };

10
src/router/components/document.ts Normal file
View File

@ -0,0 +1,10 @@
import { RouteNameMap, setCacheName } from '../helpers';
import DocumentVue from '@/views/document/vue/index.vue';
import DocumentVite from '@/views/document/vite/index.vue';
import DocumentNaive from '@/views/document/naive/index.vue';
setCacheName(DocumentVue, RouteNameMap.get('document_vue'));
setCacheName(DocumentVite, RouteNameMap.get('document_vite'));
setCacheName(DocumentNaive, RouteNameMap.get('document_naive'));
export { DocumentVue, DocumentVite, DocumentNaive };

10
src/router/components/exception.ts Normal file
View File

@ -0,0 +1,10 @@
import { RouteNameMap, setCacheName } from '../helpers';
import Exception403 from '@/views/system/exception/403.vue';
import Exception404 from '@/views/system/exception/404.vue';
import Exception500 from '@/views/system/exception/500.vue';
setCacheName(Exception404, RouteNameMap.get('exception_404'));
setCacheName(Exception403, RouteNameMap.get('exception_403'));
setCacheName(Exception500, RouteNameMap.get('exception_500'));
export { Exception403, Exception404, Exception500 };

52
src/router/components/index.ts
View File

@ -1,45 +1,7 @@
import { RouteNameMap, setCacheName } from '../helpers';
import Login from '@/views/system/login/index.vue';
import NoPermission from '@/views/system/exception/403.vue';
import NotFound from '@/views/system/exception/404.vue';
import ServiceError from '@/views/system/exception/500.vue';
import DashboardAnalysis from '@/views/dashboard/analysis/index.vue';
import DashboardWorkbench from '@/views/dashboard/workbench/index.vue';
import DocumentVue from '@/views/document/vue/index.vue';
import DocumentVite from '@/views/document/vite/index.vue';
import DocumentNaive from '@/views/document/naive/index.vue';
import MultiMenuFirstSecond from '@/views/multi-menu/first/second/index.vue';
const Exception403 = { ...NoPermission };
const Exception404 = { ...NotFound };
const Exception500 = { ...ServiceError };
setCacheName(Login, RouteNameMap.get('login'));
setCacheName(NoPermission, RouteNameMap.get('no-permission'));
setCacheName(NotFound, RouteNameMap.get('not-found'));
setCacheName(ServiceError, RouteNameMap.get('service-error'));
setCacheName(DashboardAnalysis, RouteNameMap.get('dashboard_analysis'));
setCacheName(DashboardWorkbench, RouteNameMap.get('dashboard_workbench'));
setCacheName(DocumentVue, RouteNameMap.get('document_vue'));
setCacheName(DocumentVite, RouteNameMap.get('document_vite'));
setCacheName(DocumentNaive, RouteNameMap.get('document_naive'));
setCacheName(MultiMenuFirstSecond, RouteNameMap.get('multi-menu_first_second'));
setCacheName(Exception404, RouteNameMap.get('exception_404'));
setCacheName(Exception403, RouteNameMap.get('exception_403'));
setCacheName(Exception500, RouteNameMap.get('exception_500'));
export {
Login,
NoPermission,
NotFound,
ServiceError,
DashboardAnalysis,
DashboardWorkbench,
DocumentVue,
DocumentVite,
DocumentNaive,
Exception403,
Exception404,
Exception500,
MultiMenuFirstSecond
};
export { Login, NoPermission, NotFound, ServiceError } from './system';
export { DashboardAnalysis, DashboardWorkbench } from './dashboard';
export { DocumentVue, DocumentVite, DocumentNaive } from './document';
export { ComponentMap, ComponentVideo } from './component';
export { Exception403, Exception404, Exception500 } from './exception';
export { MultiMenuFirstSecond } from './multiMenu';
export { About } from './about';

6
src/router/components/multiMenu.ts Normal file
View File

@ -0,0 +1,6 @@
import { RouteNameMap, setCacheName } from '../helpers';
import MultiMenuFirstSecond from '@/views/multi-menu/first/second/index.vue';
setCacheName(MultiMenuFirstSecond, RouteNameMap.get('multi-menu_first_second'));
export { MultiMenuFirstSecond };

12
src/router/components/system.ts Normal file
View File

@ -0,0 +1,12 @@
import { RouteNameMap, setCacheName } from '../helpers';
import Login from '@/views/system/login/index.vue';
import NoPermission from '@/views/system/exception/403.vue';
import NotFound from '@/views/system/exception/404.vue';
import ServiceError from '@/views/system/exception/500.vue';
setCacheName(Login, RouteNameMap.get('login'));
setCacheName(NoPermission, RouteNameMap.get('no-permission'));
setCacheName(NotFound, RouteNameMap.get('not-found'));
setCacheName(ServiceError, RouteNameMap.get('service-error'));
export { Login, NoPermission, NotFound, ServiceError };

19
src/router/modules/_single.ts Normal file
View File

@ -0,0 +1,19 @@
import type { CustomRoute } from '@/interface';
import { EnumRoutePath } from '@/enum';
import { BasicLayout } from '@/layouts';
import { RouteNameMap } from '../helpers';
import { ROUTE_HOME } from '../routes';
import ABOUT from './about';
const SINGLE: CustomRoute = {
name: RouteNameMap.get('root'),
path: EnumRoutePath.root,
component: BasicLayout,
redirect: { name: ROUTE_HOME.name },
meta: {
isNotMenu: true
},
children: [ABOUT]
};
export default SINGLE;

18
src/router/modules/about.ts Normal file
View File

@ -0,0 +1,18 @@
import { BookInformation24Regular } from '@vicons/fluent';
import type { CustomRoute } from '@/interface';
import { EnumRoutePath, EnumRouteTitle } from '@/enum';
import { RouteNameMap } from '../helpers';
import { About } from '../components';
const ABOUT: CustomRoute = {
name: RouteNameMap.get('about'),
path: EnumRoutePath.about,
component: About,
meta: {
requiresAuth: true,
title: EnumRouteTitle.about,
icon: BookInformation24Regular
}
};
export default ABOUT;

42
src/router/modules/component.ts Normal file
View File

@ -0,0 +1,42 @@
import { AppStore24Regular } from '@vicons/fluent';
import type { CustomRoute } from '@/interface';
import { EnumRoutePath, EnumRouteTitle } from '@/enum';
import { BasicLayout } from '@/layouts';
import { RouteNameMap } from '../helpers';
import { ComponentMap, ComponentVideo } from '../components';
const COMPONENT: CustomRoute = {
name: RouteNameMap.get('component'),
path: EnumRoutePath.component,
component: BasicLayout,
redirect: { name: RouteNameMap.get('component_map') },
meta: {
requiresAuth: true,
title: EnumRouteTitle.component,
icon: AppStore24Regular
},
children: [
{
name: RouteNameMap.get('component_map'),
path: EnumRoutePath.component_map,
component: ComponentMap,
meta: {
requiresAuth: true,
title: EnumRouteTitle.component_map,
fullPage: true
}
},
{
name: RouteNameMap.get('component_video'),
path: EnumRoutePath.component_video,
component: ComponentVideo,
meta: {
requiresAuth: true,
title: EnumRouteTitle.component_video,
fullPage: true
}
}
]
};
export default COMPONENT;

2
src/router/modules/document.ts
View File

@ -9,7 +9,7 @@ const DOCUMENT: CustomRoute = {
name: RouteNameMap.get('document'),
path: EnumRoutePath.document,
component: BasicLayout,
redirect: { name: RouteNameMap.get('document') },
redirect: { name: RouteNameMap.get('document_vue') },
meta: {
requiresAuth: true,
title: EnumRouteTitle.document,

6
src/router/modules/index.ts
View File

@ -1,7 +1,9 @@
import ROOT from './root';
import SIGNLE from './_single'; // 没有子菜单的单独页面
import DASHBOARD from './dashboard';
import DOCUMENT from './document';
import COMPONENT from './component';
import EXCEPTION from './exception';
import MULTI_MENU from './multiMenu';
import ABOUT from './about';
export default [ROOT, DASHBOARD, DOCUMENT, EXCEPTION, MULTI_MENU];
export default [SIGNLE, DASHBOARD, DOCUMENT, COMPONENT, EXCEPTION, MULTI_MENU, ABOUT];

73
src/service/request/errorHandler.ts
View File

@ -1,73 +0,0 @@
const ERROR_STATUS = {
400: '400: 请求出现语法错误',
401: '401: 用户未授权~',
403: '403: 服务器拒绝访问~',
404: '404: 请求的资源不存在~',
405: '405: 请求方法未允许~',
408: '408: 网络请求超时~',
500: '500: 服务器内部错误~',
501: '501: 服务器未实现请求功能~',
502: '502: 错误网关~',
503: '503: 服务不可用~',
504: '504: 网关超时~',
505: '505: http版本不支持该请求~'
};
type ErrorStatus = keyof typeof ERROR_STATUS;
/**
* 网络请求错误状态处理
* @param error - 错误
*/
export function errorHandler(error: any): void {
const { $message: Message } = window;
if (error.response) {
const status = error.response.status as ErrorStatus;
Message?.error(ERROR_STATUS[status]);
return;
}
if (error.code === 'ECONNABORTED' && error.message.includes('timeout')) {
Message?.error('网络连接超时~');
return;
}
if (!window.navigator.onLine || error.message === 'Network Error') {
Message?.error('网络不可用~');
return;
}
Message?.error('请求错误~');
}
/**
* 连续的请求错误依此显示
* @param duration - 上一次弹出错误消息到下一次的时间(ms)
*/
export function continuousErrorHandler(duration: number) {
let errorStacks: string[] = [];
function pushError(id: string) {
errorStacks.push(id);
}
function removeError(id: string) {
errorStacks = errorStacks.filter(item => item !== id);
}
function handleError(id: string, callback: Function) {
callback();
setTimeout(() => {
removeError(id);
}, duration);
}
function handleContinuousError(callback: Function) {
const id = Date.now().toString(36);
const { length } = errorStacks;
if (length > 0) {
pushError(id);
setTimeout(() => {
handleError(id, callback);
}, duration * length);
} else {
pushError(id);
handleError(id, callback);
}
}
return handleContinuousError;
}

3
src/service/request/instance.ts
View File

@ -3,8 +3,7 @@ import qs from 'qs';
import type { AxiosRequestConfig, AxiosInstance } from 'axios';
import { ContentType } from '@/enum';
import { getToken } from '@/utils';
import { errorHandler } from './errorHandler';
import { transformFile } from '../utils';
import { transformFile, errorHandler } from '../utils';
export interface StatusConfig {
/** 表明请求状态的属性key */

74
src/service/utils/index.ts
View File

@ -45,3 +45,77 @@ export async function transformFile(file: File[] | File, key: string) {
}
return formData;
}
const ERROR_STATUS = {
400: '400: 请求出现语法错误',
401: '401: 用户未授权~',
403: '403: 服务器拒绝访问~',
404: '404: 请求的资源不存在~',
405: '405: 请求方法未允许~',
408: '408: 网络请求超时~',
500: '500: 服务器内部错误~',
501: '501: 服务器未实现请求功能~',
502: '502: 错误网关~',
503: '503: 服务不可用~',
504: '504: 网关超时~',
505: '505: http版本不支持该请求~'
};
type ErrorStatus = keyof typeof ERROR_STATUS;
/**
* 网络请求错误状态处理
* @param error - 错误
*/
export function errorHandler(error: any): void {
const { $message: Message } = window;
if (error.response) {
const status = error.response.status as ErrorStatus;
Message?.error(ERROR_STATUS[status]);
return;
}
if (error.code === 'ECONNABORTED' && error.message.includes('timeout')) {
Message?.error('网络连接超时~');
return;
}
if (!window.navigator.onLine || error.message === 'Network Error') {
Message?.error('网络不可用~');
return;
}
Message?.error('请求错误~');
}
/**
* 连续的请求错误依此显示
* @param duration - 上一次弹出错误消息到下一次的时间(ms)
*/
export function continuousErrorHandler(duration: number) {
let errorStacks: string[] = [];
function pushError(id: string) {
errorStacks.push(id);
}
function removeError(id: string) {
errorStacks = errorStacks.filter(item => item !== id);
}
function handleError(id: string, callback: Function) {
callback();
setTimeout(() => {
removeError(id);
}, duration);
}
function handleContinuousError(callback: Function) {
const id = Date.now().toString(36);
const { length } = errorStacks;
if (length > 0) {
pushError(id);
setTimeout(() => {
handleError(id, callback);
}, duration * length);
} else {
pushError(id);
handleError(id, callback);
}
}
return handleContinuousError;
}

6
src/views/about/index.vue Normal file
View File

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

6
src/views/component/map/index.vue Normal file
View File

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

6
src/views/component/video/index.vue Normal file
View File

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

74
src/views/dashboard/workbench/index.vue
View File

@ -1,73 +1,15 @@
<template>
<div>
<n-spin :show="loading">
<n-space :vertical="true">
<div>
<n-gradient-text type="primary" size="32">GradientText</n-gradient-text>
<n-space>
<n-gradient-text>Default</n-gradient-text>
<n-gradient-text type="primary">Primary</n-gradient-text>
<n-gradient-text type="info">Info</n-gradient-text>
<n-gradient-text type="success">Success</n-gradient-text>
<n-gradient-text type="warning">Warning</n-gradient-text>
<n-gradient-text type="error">Error</n-gradient-text>
</n-space>
</div>
<div>
<n-gradient-text type="primary" size="32">Button</n-gradient-text>
<n-space>
<n-button>Default</n-button>
<n-button type="primary">Primary</n-button>
<n-button type="info">Info</n-button>
<n-button type="success">Success</n-button>
<n-button type="warning">Warning</n-button>
<n-button type="error">Error</n-button>
</n-space>
</div>
<n-gradient-text type="primary" size="32">Tag</n-gradient-text>
<n-space>
<n-tag>Tag</n-tag>
<n-tag type="primary">Primary</n-tag>
<n-tag type="info">Info</n-tag>
<n-tag type="success">Success</n-tag>
<n-tag type="warning">Warning</n-tag>
<n-tag type="error">Error</n-tag>
</n-space>
<div>
<n-gradient-text type="primary" size="32">Switch | Checkbox | Radio</n-gradient-text>
<n-space>
<n-switch :default-value="true" />
<n-checkbox :default-checked="true" />
<n-radio :default-checked="true" />
</n-space>
</div>
<n-space>
<n-button type="primary" @click="handleDialog">Dialog</n-button>
</n-space>
</n-space>
</n-spin>
<div class="p-6px">
<div class="flex justify-between h-360px">
<div class="flex-1 min-w-360px h-full bg-white rounded-16px"></div>
<div class="w-16px"></div>
<div class="w-360px h-full bg-white rounded-16px"></div>
</div>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { NGradientText, NSpace, NButton, NSpin, NTag, NSwitch, NCheckbox, NRadio, useDialog } from 'naive-ui';
const dialog = useDialog();
const loading = ref(true);
setTimeout(() => {
loading.value = false;
}, 1500);
function handleDialog() {
dialog.info({
title: '提示',
content: '您确定要退出登录吗？',
positiveText: '确定',
negativeText: '取消'
});
}
// import { ref } from 'vue';
// import { NGradientText, NSpace, NButton, NSpin, NTag, NSwitch, NCheckbox, NRadio, useDialog } from 'naive-ui';
</script>
<style scoped></style>