From 753b8e898ae16eb95217dc50d30f957082b802ee Mon Sep 17 00:00:00 2001 From: ray_wuhao <443547225@qq.com> Date: Fri, 2 Jun 2023 17:10:33 +0800 Subject: [PATCH] =?UTF-8?q?=E8=A1=A5=E5=85=85=20v3.3.0=20=E7=9A=84?= =?UTF-8?q?=E4=B8=80=E4=BA=9B=E7=BB=86=E8=8A=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .eslintrc.cjs | 32 +++++- CHANGELOG.md | 2 + components.d.ts | 3 +- src/appConfig/requestConfig.ts | 22 ++++ src/appConfig/routerConfig.ts | 30 +++++ src/axios/{ => helper}/canceler.ts | 0 src/axios/helper/interceptor.ts | 33 ++++++ src/axios/instance.ts | 34 +----- src/axios/type.ts | 2 +- .../{index.vue => TransitionComponent.vue} | 4 +- src/dayjs/index.ts | 11 ++ .../error => error/PageResult}/index.scss | 0 src/error/PageResult/index.tsx | 50 +++++++++ src/error/README.md | 10 ++ src/error/index.ts | 3 + src/error/views/Error404/index.tsx | 24 ++++ src/error/views/Error500/index.tsx | 24 ++++ src/layout/components/Menu/index.tsx | 3 +- src/layout/components/MenuTag/index.tsx | 6 +- .../SiderBar/Components/Breadcrumb/index.tsx | 2 +- .../SiderBar/Components/GlobalSeach/index.tsx | 2 +- src/layout/default/ContentWrapper/index.tsx | 2 +- src/layout/index.tsx | 2 +- src/main.ts | 22 +--- src/router/README.md | 10 ++ src/router/basic.ts | 52 --------- src/router/configuration.ts | 37 ------- src/router/{ => helper}/permission.ts | 6 +- src/router/helper/routerCopilot.ts | 104 ++++++++++++++++++ src/router/helper/useVueRouter.ts | 32 ++++++ src/router/index.ts | 59 ++++------ src/router/modules/error.ts | 2 +- src/router/routes.ts | 3 +- src/spin/hook.ts | 2 +- src/spin/index.tsx | 6 +- src/store/modules/menu/index.ts | 5 +- src/types/appConfig.ts | 4 + src/utils/hook.ts | 7 -- src/views/axios/index.tsx | 2 +- src/views/dashboard/index.tsx | 2 +- src/views/echart/index.tsx | 2 +- src/views/error/index.tsx | 37 ------- src/views/login/components/Register/index.tsx | 2 +- src/views/login/components/Signin/index.tsx | 11 +- src/views/login/index.tsx | 2 +- src/views/office/index.tsx | 2 +- src/views/office/views/document/index.tsx | 2 +- src/views/office/views/presentation/index.tsx | 2 +- src/views/office/views/spreadsheet/index.tsx | 2 +- 49 files changed, 462 insertions(+), 256 deletions(-) create mode 100644 src/appConfig/requestConfig.ts rename src/axios/{ => helper}/canceler.ts (100%) create mode 100644 src/axios/helper/interceptor.ts rename src/components/RayTransitionComponent/{index.vue => TransitionComponent.vue} (97%) rename src/{views/error => error/PageResult}/index.scss (100%) create mode 100644 src/error/PageResult/index.tsx create mode 100644 src/error/README.md create mode 100644 src/error/index.ts create mode 100644 src/error/views/Error404/index.tsx create mode 100644 src/error/views/Error500/index.tsx delete mode 100644 src/router/basic.ts delete mode 100644 src/router/configuration.ts rename src/router/{ => helper}/permission.ts (97%) create mode 100644 src/router/helper/routerCopilot.ts create mode 100644 src/router/helper/useVueRouter.ts delete mode 100644 src/views/error/index.tsx diff --git a/.eslintrc.cjs b/.eslintrc.cjs index 3af6394f..16c14f94 100644 --- a/.eslintrc.cjs +++ b/.eslintrc.cjs @@ -114,7 +114,7 @@ module.exports = { 'no-multi-assign': 2, // 禁止连续声明变量 'prefer-arrow-callback': 2, // 强制使用箭头函数作为回调 'vue/multi-word-component-names': [ - 'off', + 'error', { ignores: [], }, @@ -136,5 +136,35 @@ module.exports = { allowNamedExports: false, }, ], + 'vue/component-definition-name-casing': ['error', 'PascalCase'], + 'vue/html-closing-bracket-newline': [ + 'error', + { + singleline: 'never', + multiline: 'always', + }, + ], + 'vue/v-on-event-hyphenation': ['error', 'never'], + 'vue/component-tags-order': [ + 'error', + { + order: ['template', 'script', 'style'], + }, + ], + 'vue/no-v-html': ['error'], + 'vue/no-v-text': ['error'], + 'vue/component-api-style': [ + 'error', + ['script-setup', 'composition', 'composition-vue2'], + ], + 'vue/component-name-in-template-casing': [ + 'error', + 'PascalCase', + { + registeredComponentsOnly: true, + globals: ['RouterView'], + }, + ], + 'vue/no-unused-refs': ['error'], }, } diff --git a/CHANGELOG.md b/CHANGELOG.md index 9d4bd3a5..c5be564f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,6 +8,8 @@ - 新增 Route Meta keepAlive 配置开启页面缓存（可以在 AppConfig APP_KEEP_ALIVE 中进行缓存的配置管理） - 回退使用自动导入路由模块方式，具体使用方法查看 [路由配置](https://github.com/XiaoDaiGua-Ray/ray-template/blob/main/src/router/README.md) - 新增 Route Meta order 配置，配置菜单顺序 +- 新增 useVueRouter 方法，让你在 setup 环境之外使用 router hook +- 补充引入了一些 eslint 规则 - 支持更多 appConfig 配置 ### 补充 diff --git a/components.d.ts b/components.d.ts index 3e725e7c..11f5125e 100644 --- a/components.d.ts +++ b/components.d.ts @@ -7,8 +7,9 @@ export {} declare module '@vue/runtime-core' { export interface GlobalComponents { - RayTransitionComponent: typeof import('./src/components/RayTransitionComponent/index.vue')['default'] + RayTransitionComponent: typeof import('./src/components/RayTransitionComponent/TransitionComponent.vue')['default'] RouterLink: typeof import('vue-router')['RouterLink'] RouterView: typeof import('vue-router')['RouterView'] + TransitionComponent: typeof import('./src/components/RayTransitionComponent/TransitionComponent.vue')['default'] } } diff --git a/src/appConfig/requestConfig.ts b/src/appConfig/requestConfig.ts new file mode 100644 index 00000000..47099502 --- /dev/null +++ b/src/appConfig/requestConfig.ts @@ -0,0 +1,22 @@ +/** + * + * @author Ray + * + * @date 2023-06-02 + * + * @workspace ray-template + * + * @remark 今天也是元气满满撸代码的一天 + */ + +import type { AxiosConfig } from '@/types/appConfig' + +/** axios 相关配置 */ +export const AXIOS_CONFIG: AxiosConfig = { + baseURL: '', // `import.meta.env`, + withCredentials: false, // 是否允许跨域携带 `cookie` + timeout: 5 * 1000, + headers: { + 'Content-Type': 'application/json', + }, +} diff --git a/src/appConfig/routerConfig.ts b/src/appConfig/routerConfig.ts index 237d3189..da455618 100644 --- a/src/appConfig/routerConfig.ts +++ b/src/appConfig/routerConfig.ts @@ -22,3 +22,33 @@ export const viewScrollContainerId = 'rayLayoutContentWrapperScopeSelector' * 可以控制内容区域当前滚动位置 */ export const LAYOUT_CONTENT_REF = ref() + +/** 是否启用路由切换时顶部加载条 */ +export const SETUP_ROUTER_LOADING_BAR = true + +/** 是否启用路由守卫, 如果设置为 false 则不会触发路由切换校验 */ +export const SETUP_ROUTER_GUARD = true + +/** + * + * 路由白名单(不进行权限校验路由) + * + * 路由表单白名单 + * + * 如果需要启用该功能, 则需要配置路由 name 属性, 并且需要一一对应(对大小写敏感) + * 如果未设置, 则不会生效 + * + * 配置该路由白名单列表后, 则不会对配置中的路由列表进行鉴权处理(配合 basic.ts 中的方法进行使用) + * + * 配置动态路由菜单 + * 可以根据权限与白名单进行过滤, 但是 meta hidden 属性拥有最高的控制权限 + * 如果 mete hidden 设置为 false 则永远不会显示菜单选项 + */ +export const WHITE_ROUTES = ['login', 'error-page', 'doc'] + +/** + * + * 超级管理员 + * 配置默认超级管理员, 默认拥有全部最高权限 + */ +export const SUPER_ADMIN = ['admin'] diff --git a/src/axios/canceler.ts b/src/axios/helper/canceler.ts similarity index 100% rename from src/axios/canceler.ts rename to src/axios/helper/canceler.ts diff --git a/src/axios/helper/interceptor.ts b/src/axios/helper/interceptor.ts new file mode 100644 index 00000000..fae3a3a8 --- /dev/null +++ b/src/axios/helper/interceptor.ts @@ -0,0 +1,33 @@ +/** + * + * @author Ray + * + * @date 2023-06-02 + * + * @workspace ray-template + * + * @remark 今天也是元气满满撸代码的一天 + */ + +/** axios 拦截器工具 */ + +import type { RawAxiosRequestHeaders, AxiosRequestConfig } from 'axios' +import type { RequestHeaderOptions } from '../type' + +/** + * + * @param instance axios instance + * @param options axios headers options + * + * @remark 自定义 `axios` 请求头配置 + */ +export const appendRequestHeaders = ( + instance: AxiosRequestConfig, + options: RequestHeaderOptions[], +) => { + const requestHeaders = instance.headers as RawAxiosRequestHeaders + + options.forEach((curr) => { + requestHeaders[curr.key] = curr.value + }) +} diff --git a/src/axios/instance.ts b/src/axios/instance.ts index e7acada1..b4621c79 100644 --- a/src/axios/instance.ts +++ b/src/axios/instance.ts @@ -18,39 +18,15 @@ import axios from 'axios' import { getDetermineEnv } from '@use-utils/hook' -import RequestCanceler from './canceler' +import RequestCanceler from './helper/canceler' +import { AXIOS_CONFIG } from '@/appConfig/requestConfig' +import { appendRequestHeaders } from './helper/interceptor' -import type { RawAxiosRequestHeaders, AxiosRequestConfig } from 'axios' -import type { RequestHeaderOptions, AxiosInstanceExpand } from './type' +import type { AxiosInstanceExpand } from './type' const canceler = new RequestCanceler() -/** - * - * @param instance axios instance - * @param options axios headers options - * - * @remark 自定义 `axios` 请求头配置 - */ -const appendRequestHeaders = ( - instance: AxiosRequestConfig, - options: RequestHeaderOptions[], -) => { - const requestHeaders = instance.headers as RawAxiosRequestHeaders - - options.forEach((curr) => { - requestHeaders[curr.key] = curr.value - }) -} - -const server: AxiosInstanceExpand = axios.create({ - baseURL: '', // `import.meta.env`, - withCredentials: false, // 是否允许跨域携带 `cookie` - timeout: 5 * 1000, - headers: { - 'Content-Type': 'application/json', - }, -}) +const server: AxiosInstanceExpand = axios.create(AXIOS_CONFIG) server.interceptors.request.use( (request) => { diff --git a/src/axios/type.ts b/src/axios/type.ts index e5e5d8bb..22714fd4 100644 --- a/src/axios/type.ts +++ b/src/axios/type.ts @@ -75,7 +75,7 @@ export interface AxiosInstanceExpand extends Axios { config?: AxiosRequestConfig, ): Promise - defaults: Omit & { + defaults: Omit & { headers: HeadersDefaults & { [key: string]: AxiosHeaderValue } diff --git a/src/components/RayTransitionComponent/index.vue b/src/components/RayTransitionComponent/TransitionComponent.vue similarity index 97% rename from src/components/RayTransitionComponent/index.vue rename to src/components/RayTransitionComponent/TransitionComponent.vue index ff7e12c5..de49154b 100644 --- a/src/components/RayTransitionComponent/index.vue +++ b/src/components/RayTransitionComponent/TransitionComponent.vue @@ -1,5 +1,5 @@