From 76ec304ca7997d43e1f1d8938e74e52ce6fc165b Mon Sep 17 00:00:00 2001 From: ray_wuhao <443547225@qq.com> Date: Wed, 5 Jul 2023 15:46:18 +0800 Subject: [PATCH] =?UTF-8?q?update:=20=E4=B8=80=E4=BA=9B=E7=BB=86=E8=8A=82?= =?UTF-8?q?=E6=9B=B4=E6=96=B0=EF=BC=8C=E6=96=B0=E5=A2=9E=E8=B7=AF=E7=94=B1?= =?UTF-8?q?=E5=88=87=E6=8D=A2=E5=86=85=E5=AE=B9=E5=8C=BA=E5=9F=9F=E5=8A=A0?= =?UTF-8?q?=E8=BD=BD=E5=8A=A8=E7=94=BB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .npmignore | 9 ++++- CHANGELOG.md | 6 +++ package.json | 5 +-- src/axios/type.ts | 3 +- .../components/LockScreen/index.tsx | 7 +++- .../components/UnlockScreen/index.tsx | 1 - .../AppComponents/AppLockScreen/hook.ts | 7 ---- src/components/RayChart/index.tsx | 22 +++++----- src/directives/modules/debounce/index.ts | 4 +- src/directives/modules/throttle/index.ts | 4 +- src/layout/default/ContentWrapper/index.tsx | 22 +++++++++- src/router/README.md | 40 +++++++++++++++++++ src/router/helper/expandRoutes.ts | 31 +++++++------- src/router/helper/helper.ts | 2 +- src/router/modules/{ => demo}/axios.ts | 0 src/router/modules/{ => demo}/directive.ts | 0 src/router/modules/{ => demo}/doc-local.ts | 0 src/router/modules/{ => demo}/doc.ts | 0 src/router/modules/{ => demo}/echart.ts | 0 src/router/modules/{ => demo}/error.ts | 0 src/router/modules/{ => demo}/iframe.ts | 0 src/router/modules/{ => demo}/multi-menu.ts | 0 src/router/modules/{ => demo}/office.ts | 0 src/router/modules/{ => demo}/precision.ts | 0 src/router/modules/{ => demo}/rely.ts | 0 src/router/modules/{ => demo}/router-demo.ts | 0 .../modules/{ => demo}/scroll-reveal.ts | 0 src/router/modules/{ => demo}/table.ts | 0 28 files changed, 114 insertions(+), 49 deletions(-) rename src/router/modules/{ => demo}/axios.ts (100%) rename src/router/modules/{ => demo}/directive.ts (100%) rename src/router/modules/{ => demo}/doc-local.ts (100%) rename src/router/modules/{ => demo}/doc.ts (100%) rename src/router/modules/{ => demo}/echart.ts (100%) rename src/router/modules/{ => demo}/error.ts (100%) rename src/router/modules/{ => demo}/iframe.ts (100%) rename src/router/modules/{ => demo}/multi-menu.ts (100%) rename src/router/modules/{ => demo}/office.ts (100%) rename src/router/modules/{ => demo}/precision.ts (100%) rename src/router/modules/{ => demo}/rely.ts (100%) rename src/router/modules/{ => demo}/router-demo.ts (100%) rename src/router/modules/{ => demo}/scroll-reveal.ts (100%) rename src/router/modules/{ => demo}/table.ts (100%) diff --git a/.npmignore b/.npmignore index 2a1a040a..6e6f8acb 100644 --- a/.npmignore +++ b/.npmignore @@ -1,5 +1,10 @@ -node_modules/ -dist/ +node_modules/* +dist/* yarn.lock yarn-error.log +visualizer.html +pnpm-lock.yaml +.idea +auto-imports.d.ts +components.d.ts visualizer.html \ No newline at end of file diff --git a/CHANGELOG.md b/CHANGELOG.md index c59d044c..c1d46459 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,6 +5,12 @@ ### Feats - 弃用 yarn 包管理器，使用 pnpm 作为模板包管理器 +- 新增路由切换时的内容区域动画 + +### Fixes + +- 修复 axios 模块的一些类型错误 +- 剔除了一些无用方法，重写了一些方法 ## 4.0.2 diff --git a/package.json b/package.json index 1a84e330..c2d77838 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "ray-template", "private": false, - "version": "4.0.3", + "version": "4.0.2", "type": "module", "scripts": { "dev": "vite", @@ -102,9 +102,6 @@ "admin template", "中后台模板" ], - "files": [ - "**/*" - ], "author": "Ray", "license": "ISC", "bugs": { diff --git a/src/axios/type.ts b/src/axios/type.ts index c05d1184..30ee6a0a 100644 --- a/src/axios/type.ts +++ b/src/axios/type.ts @@ -5,7 +5,6 @@ import type { HeadersDefaults, AxiosDefaults, Axios, - InternalAxiosRequestConfig, AxiosResponse, } from 'axios' import type { AnyFunc } from '@/types/modules/utils' @@ -80,7 +79,7 @@ export interface AxiosInstanceExpand extends Axios { } } -export type RequestInterceptorConfig = InternalAxiosRequestConfig +export type RequestInterceptorConfig = AxiosRequestConfig export type ResponseInterceptorConfig = AxiosResponse diff --git a/src/components/AppComponents/AppLockScreen/components/LockScreen/index.tsx b/src/components/AppComponents/AppLockScreen/components/LockScreen/index.tsx index 473d5042..56dd2abe 100644 --- a/src/components/AppComponents/AppLockScreen/components/LockScreen/index.tsx +++ b/src/components/AppComponents/AppLockScreen/components/LockScreen/index.tsx @@ -19,7 +19,6 @@ import useAppLockScreen from '@/components/AppComponents/AppLockScreen/appLockVa import { rules, useCondition, - autoFouceInput, } from '@/components/AppComponents/AppLockScreen/hook' import type { FormInst, InputInst } from 'naive-ui' @@ -49,7 +48,11 @@ const LockScreen = defineComponent({ }) } - autoFouceInput(inputInstRef) + onMounted(() => { + nextTick(() => { + inputInstRef.value?.focus() + }) + }) return { ...toRefs(state), diff --git a/src/components/AppComponents/AppLockScreen/components/UnlockScreen/index.tsx b/src/components/AppComponents/AppLockScreen/components/UnlockScreen/index.tsx index e96d8722..e357e71b 100644 --- a/src/components/AppComponents/AppLockScreen/components/UnlockScreen/index.tsx +++ b/src/components/AppComponents/AppLockScreen/components/UnlockScreen/index.tsx @@ -19,7 +19,6 @@ import { useSetting, useSignin } from '@/store' import { rules, useCondition, - autoFouceInput, } from '@/components/AppComponents/AppLockScreen/hook' import useAppLockScreen from '@/components/AppComponents/AppLockScreen/appLockVar' diff --git a/src/components/AppComponents/AppLockScreen/hook.ts b/src/components/AppComponents/AppLockScreen/hook.ts index 8db8c2e2..97ab8661 100644 --- a/src/components/AppComponents/AppLockScreen/hook.ts +++ b/src/components/AppComponents/AppLockScreen/hook.ts @@ -29,10 +29,3 @@ export const useCondition = () => { lockPassword: null, } } - -/** 自动获取焦点 */ -export const autoFouceInput = (inputInstRef: Ref) => { - nextTick(() => { - inputInstRef.value?.focus() - }) -} diff --git a/src/components/RayChart/index.tsx b/src/components/RayChart/index.tsx index 6dcd2a55..5c30e34d 100644 --- a/src/components/RayChart/index.tsx +++ b/src/components/RayChart/index.tsx @@ -39,12 +39,13 @@ import { LabelLayout, UniversalTransition } from 'echarts/features' // 标签自 import { CanvasRenderer } from 'echarts/renderers' // `echarts` 渲染器 import { useSetting } from '@/store' -import { cloneDeep, debounce } from 'lodash-es' +import { cloneDeep, throttle } from 'lodash-es' import { on, off, addStyle, completeSize } from '@/utils/element' import type { PropType } from 'vue' import type { EChartsInstance } from '@/types/modules/component' import type { AnyFunc } from '@/types/modules/utils' +import type { DebouncedFunc } from 'lodash-es' export type AutoResize = | boolean @@ -125,6 +126,7 @@ const RayChart = defineComponent({ * `chart` 是否跟随窗口尺寸变化自动变化 * * 如果为对象, 则可以指定其变化尺寸, 实现图表大小不等于容器大小的效果 + * 默认每秒触发一次的频率 */ type: [Boolean, Object] as PropType, default: true, @@ -195,10 +197,9 @@ const RayChart = defineComponent({ /** * * 拓展 `echarts` 图表 - * - * 由于官方并没有提供该类型, 手动去复刻成本过高, 故而采用 `any` + * 用于自己手动拓展相关的包 */ - type: Array, + type: Array as PropType<(typeof CanvasRenderer)[]>, default: () => [], }, watchOptions: { @@ -223,7 +224,7 @@ const RayChart = defineComponent({ const rayChartRef = ref() // `echart` 容器实例 const echartInstanceRef = ref() // `echart` 拷贝实例, 解决直接使用响应式实例带来的问题 let echartInstance: EChartsInstance // `echart` 实例 - let resizeDebounce: AnyFunc // resize 防抖方法实例 + let resizeThrottle: DebouncedFunc // resize 防抖方法实例 const cssVarsRef = computed(() => { const cssVars = { @@ -272,8 +273,7 @@ const RayChart = defineComponent({ echarts.use([CanvasRenderer]) // 注册渲染器 try { - // eslint-disable-next-line @typescript-eslint/no-explicit-any - echarts.use(props.use as any[]) + echarts.use(props.use) } catch (e) { console.error( 'Error: wrong property and method passed in extend attribute', @@ -469,9 +469,9 @@ const RayChart = defineComponent({ /** 注册事件 */ if (props.autoResize) { - resizeDebounce = debounce(resizeChart, 500) + resizeThrottle = throttle(resizeChart, 1000) - on(window, 'resize', resizeDebounce) + on(window, 'resize', resizeThrottle) } }) }) @@ -480,7 +480,9 @@ const RayChart = defineComponent({ /** 卸载 echarts */ destroyChart() /** 卸载事件柄 */ - off(window, 'resize', resizeDebounce) + off(window, 'resize', resizeThrottle) + /** 注销防抖 */ + resizeThrottle.cancel() }) expose({ diff --git a/src/directives/modules/debounce/index.ts b/src/directives/modules/debounce/index.ts index 7101bf48..b19848c2 100644 --- a/src/directives/modules/debounce/index.ts +++ b/src/directives/modules/debounce/index.ts @@ -20,8 +20,9 @@ import { on, off } from '@use-utils/element' import type { Directive } from 'vue' import type { DebounceBindingOptions } from './type' import type { AnyFunc } from '@/types/modules/utils' +import type { DebouncedFunc } from 'lodash-es' -let debounceFunction: AnyFunc | null +let debounceFunction: DebouncedFunc | null const debounceDirective: Directive = { beforeMount: (el, binding) => { @@ -39,6 +40,7 @@ const debounceDirective: Directive = { const { trigger = 'click' } = binding.value if (debounceFunction) { + debounceFunction.cancel() off(el, trigger, debounceFunction) } diff --git a/src/directives/modules/throttle/index.ts b/src/directives/modules/throttle/index.ts index c6f632bb..8c220eb8 100644 --- a/src/directives/modules/throttle/index.ts +++ b/src/directives/modules/throttle/index.ts @@ -20,8 +20,9 @@ import { on, off } from '@use-utils/element' import type { Directive } from 'vue' import type { ThrottleBindingOptions } from './type' import type { AnyFunc } from '@/types/modules/utils' +import type { DebouncedFunc } from 'lodash-es' -let throttleFunction: AnyFunc | null +let throttleFunction: DebouncedFunc | null const throttleDirective: Directive = { beforeMount: (el, binding) => { @@ -39,6 +40,7 @@ const throttleDirective: Directive = { const { trigger = 'click' } = binding.value if (throttleFunction) { + throttleFunction.cancel() off(el, trigger, throttleFunction) } diff --git a/src/layout/default/ContentWrapper/index.tsx b/src/layout/default/ContentWrapper/index.tsx index 2788d8bc..49ee0015 100644 --- a/src/layout/default/ContentWrapper/index.tsx +++ b/src/layout/default/ContentWrapper/index.tsx @@ -12,6 +12,7 @@ import './index.scss' import RayTransitionComponent from '@/components/RayTransitionComponent/TransitionComponent.vue' +import { NSpin } from 'naive-ui' import { useSetting } from '@/store' @@ -19,16 +20,35 @@ const ContentWrapper = defineComponent({ name: 'ContentWrapper', setup() { const settingStore = useSetting() + const router = useRouter() const { reloadRouteSwitch } = storeToRefs(settingStore) + const spinning = ref(false) + + const setupLayoutContentSpin = () => { + router.beforeEach(() => { + spinning.value = true + }) + + router.afterEach(() => { + setTimeout(() => { + spinning.value = false + }, 300) + }) + } + + setupLayoutContentSpin() return { reloadRouteSwitch, + spinning, } }, render() { return this.reloadRouteSwitch ? ( - + + + ) : ( <> ) diff --git a/src/router/README.md b/src/router/README.md index 201d5866..ce17f340 100644 --- a/src/router/README.md +++ b/src/router/README.md @@ -1,5 +1,45 @@ ## router 拓展 +## LAYOUT 说明 + +> router modules 包中的路由模块会与菜单一一映射，也就是说，路由模块的配置结构会影响菜单的展示。当你有子菜单需要配置时，你需要使用该组件。 + +```ts +import { t } from '@/locales/useI18n' +import { LAYOUT } from '@/router/constant/index' + +import type { AppRouteRecordRaw } from '@/router/type' + +const demo: AppRouteRecordRaw = { + /** 路由路径，如果为根菜单且无有菜单的时候可以配置为空字符串 */ + path: '/demo', + /** views component name，必须与组件 name 属性匹配，否则缓存属性会失效 */ + name: 'RDemo', + /** 这样配置后，就无须在 views 中重复写 了 */ + component: LAYOUT, + meta: { + /** t 方法是一个纯函数，为了配合 i18n ally 插件提示使用 */ + i18nKey: t('menu.Demo'), + icon: 'demo', + order: 0, + }, + children: [ + { + path: '/demo-child', + name: 'RDemoChild', + component: () => import('@/views/demo-child/index'), + meta: { + i18nKey: t('menu.DemoChild'), + icon: 'demo', + order: 0, + }, + }, + ], +} + +export default dashboard +``` + ## 类型 ```ts diff --git a/src/router/helper/expandRoutes.ts b/src/router/helper/expandRoutes.ts index ed54cc95..95f0de6f 100644 --- a/src/router/helper/expandRoutes.ts +++ b/src/router/helper/expandRoutes.ts @@ -11,12 +11,12 @@ /** * - * 该功能基于 代码改进实现 + * 该功能基于 提供代码改进实现 + * * 自动展开所有路由 + * 把所有路由提升为顶层路由 */ -import { cloneDeep } from 'lodash-es' - import type { AppRouteRecordRaw } from '@/router/type' const isRootPath = (path: string) => path.startsWith('/') @@ -35,37 +35,32 @@ const routePromotion = ( result: AppRouteRecordRaw[] = [], path = '', ) => { - // 如果没有小宝贝进来 则没有小宝贝出去 if (!Array.isArray(arr)) { return [] } - // 新来的小宝贝们先洗好澡澡哦 const sourceArr = arr - // 来开始我们的循环之旅吧 sourceArr.forEach((curr) => { - // 获取可爱的小宝贝哦 - if (curr.children?.length) { - // 如果小宝贝有小小宝贝 - - // 小宝贝们有孩子了，/(ㄒoㄒ)/~~ routePromotion( curr.children, result, path + (isRootPath(curr.path) ? curr.path : '/' + curr.path), ) } else { - // 小宝贝还是单身哦 - // 乖乖的小宝贝快快进入口袋 - curr.path = path + (isRootPath(curr.path) ? curr.path : '/' + curr.path) + const newPath = + path + (isRootPath(curr.path) ? curr.path : '/' + curr.path) - result.push(curr) + const newCurr: AppRouteRecordRaw = { + ...curr, + path: newPath, + } + + result.push(newCurr) } }) - // 返回都是根节点的小宝贝们 return result } @@ -74,5 +69,7 @@ export const expandRoutes = (arr: AppRouteRecordRaw[]) => { return [] } - return routePromotion(cloneDeep(arr)) + const cloneArr = arr.slice() + + return routePromotion(cloneArr) } diff --git a/src/router/helper/helper.ts b/src/router/helper/helper.ts index 7192d914..85479846 100644 --- a/src/router/helper/helper.ts +++ b/src/router/helper/helper.ts @@ -98,7 +98,7 @@ export const orderRoutes = (routes: AppRouteRecordRaw[]) => { export const scrollViewToTop = (route: RouteLocationNormalized) => { const { meta } = route - /** 这个 id 是注入在 layout 中 */ + /** LAYOUT_CONTENT_REF */ if (!meta?.ignoreAutoResetScroll) { LAYOUT_CONTENT_REF.value?.scrollTo({ top: 0, diff --git a/src/router/modules/axios.ts b/src/router/modules/demo/axios.ts similarity index 100% rename from src/router/modules/axios.ts rename to src/router/modules/demo/axios.ts diff --git a/src/router/modules/directive.ts b/src/router/modules/demo/directive.ts similarity index 100% rename from src/router/modules/directive.ts rename to src/router/modules/demo/directive.ts diff --git a/src/router/modules/doc-local.ts b/src/router/modules/demo/doc-local.ts similarity index 100% rename from src/router/modules/doc-local.ts rename to src/router/modules/demo/doc-local.ts diff --git a/src/router/modules/doc.ts b/src/router/modules/demo/doc.ts similarity index 100% rename from src/router/modules/doc.ts rename to src/router/modules/demo/doc.ts diff --git a/src/router/modules/echart.ts b/src/router/modules/demo/echart.ts similarity index 100% rename from src/router/modules/echart.ts rename to src/router/modules/demo/echart.ts diff --git a/src/router/modules/error.ts b/src/router/modules/demo/error.ts similarity index 100% rename from src/router/modules/error.ts rename to src/router/modules/demo/error.ts diff --git a/src/router/modules/iframe.ts b/src/router/modules/demo/iframe.ts similarity index 100% rename from src/router/modules/iframe.ts rename to src/router/modules/demo/iframe.ts diff --git a/src/router/modules/multi-menu.ts b/src/router/modules/demo/multi-menu.ts similarity index 100% rename from src/router/modules/multi-menu.ts rename to src/router/modules/demo/multi-menu.ts diff --git a/src/router/modules/office.ts b/src/router/modules/demo/office.ts similarity index 100% rename from src/router/modules/office.ts rename to src/router/modules/demo/office.ts diff --git a/src/router/modules/precision.ts b/src/router/modules/demo/precision.ts similarity index 100% rename from src/router/modules/precision.ts rename to src/router/modules/demo/precision.ts diff --git a/src/router/modules/rely.ts b/src/router/modules/demo/rely.ts similarity index 100% rename from src/router/modules/rely.ts rename to src/router/modules/demo/rely.ts diff --git a/src/router/modules/router-demo.ts b/src/router/modules/demo/router-demo.ts similarity index 100% rename from src/router/modules/router-demo.ts rename to src/router/modules/demo/router-demo.ts diff --git a/src/router/modules/scroll-reveal.ts b/src/router/modules/demo/scroll-reveal.ts similarity index 100% rename from src/router/modules/scroll-reveal.ts rename to src/router/modules/demo/scroll-reveal.ts diff --git a/src/router/modules/table.ts b/src/router/modules/demo/table.ts similarity index 100% rename from src/router/modules/table.ts rename to src/router/modules/demo/table.ts