update: 一些细节更新，新增路由切换内容区域加载动画

.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

CHANGELOG.md

@@ -5,6 +5,12 @@
 ### Feats
 
 - 弃用 yarn 包管理器，使用 pnpm 作为模板包管理器
+- 新增路由切换时的内容区域动画
+
+### Fixes
+
+- 修复 axios 模块的一些类型错误
+- 剔除了一些无用方法，重写了一些方法
 
 ## 4.0.2
 

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": {

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<T = any> = InternalAxiosRequestConfig<T>
+export type RequestInterceptorConfig<T = any> = AxiosRequestConfig<T>
 
 export type ResponseInterceptorConfig<T = any, K = any> = AxiosResponse<T, K>
 

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),

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'
 

src/components/AppComponents/AppLockScreen/hook.ts

@@ -29,10 +29,3 @@ export const useCondition = () => {
     lockPassword: null,
   }
 }
-
-/** 自动获取焦点 */
-export const autoFouceInput = (inputInstRef: Ref<InputInst | null>) => {
-  nextTick(() => {
-    inputInstRef.value?.focus()
-  })
-}

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<AutoResize>,
       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<HTMLElement>() // `echart` 容器实例
     const echartInstanceRef = ref<EChartsInstance>() // `echart` 拷贝实例, 解决直接使用响应式实例带来的问题
     let echartInstance: EChartsInstance // `echart` 实例
-    let resizeDebounce: AnyFunc // resize 防抖方法实例
+    let resizeThrottle: DebouncedFunc<AnyFunc> // 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({

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<AnyFunc> | null
 
 const debounceDirective: Directive<HTMLElement, DebounceBindingOptions> = {
   beforeMount: (el, binding) => {
@@ -39,6 +40,7 @@ const debounceDirective: Directive<HTMLElement, DebounceBindingOptions> = {
     const { trigger = 'click' } = binding.value
 
     if (debounceFunction) {
+      debounceFunction.cancel()
       off(el, trigger, debounceFunction)
     }
 

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<AnyFunc> | null
 
 const throttleDirective: Directive<HTMLElement, ThrottleBindingOptions> = {
   beforeMount: (el, binding) => {
@@ -39,6 +40,7 @@ const throttleDirective: Directive<HTMLElement, ThrottleBindingOptions> = {
     const { trigger = 'click' } = binding.value
 
     if (throttleFunction) {
+      throttleFunction.cancel()
       off(el, trigger, throttleFunction)
     }
 

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 ? (
-      <RayTransitionComponent class="content-wrapper" />
+      <NSpin show={this.spinning} description="loading..." size="large">
+        <RayTransitionComponent class="content-wrapper" />
+      </NSpin>
     ) : (
       <></>
     )

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 中重复写 <view-router /> 了 */
+  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

src/router/helper/expandRoutes.ts

@@ -11,12 +11,12 @@
 
 /**
  *
- * 该功能基于 <https://me.yka.moe/> 代码改进实现
+ * 该功能基于 <https://me.yka.moe/> 提供代码改进实现
+ *
  * 自动展开所有路由
+ * 把所有路由提升为顶层路由
  */
 
-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)
 }

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,