v4.1.0

.eslintrc.cjs

@@ -30,6 +30,7 @@ module.exports = {
     defineEmits: 'readonly',
     defineExpose: 'readonly',
     withDefaults: 'readonly',
+    defineOptions: 'readonly',
   },
   rules: {
     '@typescript-eslint/no-explicit-any': [
@@ -173,13 +174,12 @@ module.exports = {
       'error',
       'PascalCase',
       {
-        registeredComponentsOnly: true,
+        registeredComponentsOnly: false,
-        globals: ['RouterView'],
       },
     ],
     'vue/no-unused-refs': ['error'],
     'vue/prop-name-casing': ['error', 'camelCase'],
-    'vue/component-options-name-casing': ['error', 'camelCase'],
+    'vue/component-options-name-casing': ['error', 'PascalCase'],
     'vue/attribute-hyphenation': [
       'error',
       'never',

.npmrc

@@ -0,0 +1,7 @@
+package-lock=false
+prefer-offline=true
+save-exact=true
+engine-strict=true
+engines={
+  "pnpm": ">=8.6.6"
+}

.vscode/settings.json

@@ -7,5 +7,6 @@
   "i18n-ally.enabledParsers": ["json"],
   "i18n-ally.sourceLanguage": "zh-CN",
   "i18n-ally.displayLanguage": "zh-CN",
-  "i18n-ally.enabledFrameworks": ["vue", "react"]
+  "i18n-ally.enabledFrameworks": ["vue", "react"],
+  "typescript.tsdk": "node_modules/typescript/lib"
 }

CHANGELOG.md

@@ -1,5 +1,51 @@
 # CHANGE LOG
 
+## 4.1.0
+
+### Feats
+
+- 升级 vue 版本为 v3.3.4。并且配套升级了模板的一些插件
+- RayTransitionComponent 组件加入 Suspense 组件的支持（试验性加入，可能会移除）
+- 更新部分组件的事件触发方式，类似 onUpdateValue、onupdate:value 方法改为 props 定义而非 emit（受控、非受控）
+- 更新路由切换动画的透明度，视觉效果更友好
+- App.tsx 组件内部逻辑抽离为 AppStyleProvider。将一些组件存放位置放在 AppComponents 文件包中
+- 新增 useRequest useHookPlusRequest 两个请求 hook，具体使用方法看示例（基于 vue-hook-plus useRequest 实现）
+  - useRequest 支持直接配置请求与配置请求相关的配置（缓存、节流、防抖等）
+  - useHookPlusRequest 支持接收一个 Promise 返回值的方法，可以用来包裹 axios 方法然后进行请求配置
+
+```ts
+import axiosInstance from '@/axios/instance'
+import { useRequest, useHookPlusRequest } from '@/axios/index'
+
+// 使用 useRequest
+const { data, loading, run } = useRequest<{
+  title: string
+}>(
+  {
+    url: 'https://jsonplaceholder.typicode.com/todos/1',
+    method: 'get',
+  },
+  {
+    manual: true,
+  },
+)
+
+// 使用 useHookPlusRequest
+export const getWeather = (city: string) => {
+  return axiosInstance<AxiosTestResponse>({
+    url: `https://www.tianqiapi.com/api?version=v9&appid=23035354&appsecret=8YvlPNrz&city=${city}`,
+    method: 'get',
+  })
+}
+
+const { data, loading, run } = useHookPlusRequest(getWeather, {
+  throttleWait: 1000,
+})
+
+// 手动更新请求参数
+run('some value')
+```
+
 ## 4.0.3
 
 ### Feats

package.json

@@ -29,15 +29,16 @@
     "echarts": "^5.4.0",
     "lodash-es": "^4.17.21",
     "naive-ui": "^2.34.4",
-    "pinia": "^2.0.17",
+    "pinia": "^2.1.4",
-    "pinia-plugin-persistedstate": "^2.4.0",
+    "pinia-plugin-persistedstate": "^3.1.0",
     "print-js": "^1.6.0",
     "qrcode.vue": "^3.3.4",
     "sass": "^1.54.3",
     "screenfull": "^6.0.2",
-    "vue": "^3.2.47",
+    "vue": "^3.3.4",
+    "vue-hooks-plus": "1.7.6",
     "vue-i18n": "^9.2.2",
-    "vue-router": "^4.1.3",
+    "vue-router": "^4.2.4",
     "vuedraggable": "^4.1.0",
     "xlsx": "^0.18.5"
   },
@@ -46,14 +47,15 @@
     "@babel/eslint-parser": "^7.19.1",
     "@commitlint/cli": "^17.4.2",
     "@commitlint/config-conventional": "^17.4.2",
-    "@intlify/unplugin-vue-i18n": "^0.5.0",
+    "@intlify/unplugin-vue-i18n": "^0.12.1",
     "@types/crypto-js": "^4.1.1",
     "@types/lodash-es": "^4.17.7",
     "@types/scrollreveal": "^0.0.8",
     "@typescript-eslint/eslint-plugin": "^5.61.0",
     "@typescript-eslint/parser": "^5.61.0",
-    "@vitejs/plugin-vue": "^4.1.0",
+    "@vitejs/plugin-vue": "^4.2.3",
     "@vitejs/plugin-vue-jsx": "^3.0.1",
+    "@vue-hooks-plus/resolvers": "1.2.4",
     "@vue/eslint-config-prettier": "^7.1.0",
     "@vue/eslint-config-typescript": "^11.0.3",
     "autoprefixer": "^10.4.8",
@@ -75,8 +77,8 @@
     "rollup-plugin-visualizer": "^5.8.3",
     "svg-sprite-loader": "^6.0.11",
     "typescript": "^5.0.2",
-    "unplugin-auto-import": "^0.11.0",
+    "unplugin-auto-import": "^0.15.0",
-    "unplugin-vue-components": "^0.22.0",
+    "unplugin-vue-components": "^0.25.1",
     "vite": "^4.3.9",
     "vite-plugin-compression": "^0.5.1",
     "vite-plugin-ejs": "^1.6.4",
@@ -85,7 +87,7 @@
     "vite-plugin-inspect": "^0.7.26",
     "vite-plugin-svg-icons": "^2.0.1",
     "vite-svg-loader": "^3.4.0",
-    "vue-tsc": "^1.4.2"
+    "vue-tsc": "^1.8.4"
   },
   "description": "<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->",
   "main": "index.ts",

src/axios/api/test.ts

@@ -11,18 +11,15 @@
 
 /**
  *
- * 该方法演示如何使用 axios
+ * 该方法演示如何封装一个通用请求方法
  *
- * 示范如何完整批注响应体及其数据:
+ * 步骤：
- *
+ * 1. 定义一个方法（见下面的 demo 方法）
- * ```
+ * 2. 暴露该函数
- * const demoRequest = () => {
+ * 3. 如果该方法在 setup 环境中使用，则可以使用 useHookPlusRequest 包裹该方法，即可便捷使用该请求函数。如果请求方法在非 setup 环境中使用，直接使用即可
- *   return {} as AxiosResponseBody<AxiosTestResponse>
- * }
- * ```
  */
 
-import useRequest from '@/axios/instance'
+import { request } from '@/axios/index'
 
 import type { AxiosResponseBody } from '@/types/modules/axios'
 
@@ -31,14 +28,29 @@ interface AxiosTestResponse extends UnknownObjectKey {
   city?: string
 }
 
+interface JSONPlaceholder {
+  completed: boolean
+  id: number
+  title: string
+  userId: number
+}
+
 /**
  *
  * @returns 测试
  *
  * @medthod get
  */
-export const onAxiosTest = async (city: string) => {
+export const getWeather = (city: string) => {
-  return useRequest<AxiosTestResponse>({
+  return request<AxiosTestResponse>({
     url: `https://www.tianqiapi.com/api?version=v9&appid=23035354&appsecret=8YvlPNrz&city=${city}`,
+    method: 'get',
+  })
+}
+
+export const getTypicode = () => {
+  return request<JSONPlaceholder>({
+    url: 'https://jsonplaceholder.typicode.com/todos/1',
+    method: 'get',
   })
 }

src/axios/index.ts

@@ -0,0 +1,50 @@
+/**
+ *
+ * @author Ray <https://github.com/XiaoDaiGua-Ray>
+ *
+ * @date 2023-07-11
+ *
+ * @workspace ray-template
+ *
+ * @remark 今天也是元气满满撸代码的一天
+ */
+
+/**
+ *
+ * 基于 vue-hook-plus 与 axios 封装
+ *
+ * (vue-hook-plus 参考文档)[https://inhiblab-core.gitee.io/docs/hooks/useRequest/basic/]
+ *
+ * 借助 vue-hook-plus useRequest 方法实现拓展功能
+ * 结合模板已封装好的 axios 实现了该 hook
+ *
+ * 由于中间件注册了自动取消重复请求的方法，所以会导致方法在初始化时，会抛出一个重复请求被取消的错误（该问题不影响使用）
+ */
+
+import inst from './instance'
+import useHookPlusRequest from 'vue-hooks-plus/es/useRequest'
+import request from '@/axios/instance'
+
+import type { UseRequestOptions } from 'vue-hooks-plus/es/useRequest/types'
+import type { AxiosRequestConfig } from 'axios'
+
+function useRequest<
+  Response,
+  HookPlusParams extends unknown[] = unknown[],
+  HookPlusPlugin = unknown,
+>(
+  fetchOption: AxiosRequestConfig<Response>,
+  option?: UseRequestOptions<Response, HookPlusParams, HookPlusPlugin>,
+) {
+  const fc = () => {
+    const cb = inst<Response>(fetchOption)
+
+    return cb
+  }
+
+  const hooks = useHookPlusRequest(fc, Object.assign({}, option))
+
+  return hooks
+}
+
+export { useRequest, useHookPlusRequest, request }

src/components/RayChart/index.tsx

@@ -41,10 +41,11 @@ import { CanvasRenderer } from 'echarts/renderers' // `echarts` 渲染器
 import { useSetting } from '@/store'
 import { cloneDeep, throttle } from 'lodash-es'
 import { on, off, addStyle, completeSize } from '@/utils/element'
+import { call } from '@/utils/vue/index'
 
 import type { PropType } from 'vue'
 import type { EChartsInstance } from '@/types/modules/component'
-import type { AnyFunc } from '@/types/modules/utils'
+import type { AnyFunc, MaybeArray } from '@/types/modules/utils'
 import type { DebouncedFunc } from 'lodash-es'
 
 export type AutoResize =
@@ -71,6 +72,8 @@ export interface LoadingOptions {
 
 export type ChartTheme = 'dark' | '' | object
 
+export type EChartsExtensionInstallRegisters = typeof CanvasRenderer
+
 /**
  *
  * @returns LoadingOptions
@@ -164,8 +167,10 @@ const RayChart = defineComponent({
        *
        * () => EChartsInstance
        */
-      type: Function,
+      type: [Function, Array] as PropType<
-      default: () => ({}),
+        MaybeArray<(e: EChartsInstance) => void>
+      >,
+      default: null,
     },
     error: {
       /**
@@ -174,8 +179,8 @@ const RayChart = defineComponent({
        *
        * () => void
        */
-      type: Function,
+      type: [Function, Array] as PropType<MaybeArray<() => void>>,
-      default: () => ({}),
+      default: null,
     },
     theme: {
       type: [String, Object] as PropType<ChartTheme>,
@@ -199,7 +204,7 @@ const RayChart = defineComponent({
        * 拓展 `echarts` 图表
        * 用于自己手动拓展相关的包
        */
-      type: Array as PropType<(typeof CanvasRenderer)[]>,
+      type: Array as PropType<EChartsExtensionInstallRegisters[]>,
       default: () => [],
     },
     watchOptions: {
@@ -323,6 +328,7 @@ const RayChart = defineComponent({
       const options = useMergeOptions()
       /** 获取 dom 容器实际宽高 */
       const { height, width } = element.getBoundingClientRect()
+      const { success, error } = props
 
       /** 如果高度为 0, 则以 200px 填充 */
       if (height === 0) {
@@ -347,12 +353,15 @@ const RayChart = defineComponent({
         options && echartInstance.setOption(options)
 
         /** 渲染成功回调 */
-        props.success?.(echartInstance)
+        if (success) {
+          call(success, echartInstance)
+        }
       } catch (e) {
         /** 渲染失败回调 */
-        props.error?.()
+        if (error) {
-
+          call(error)
-        console.error(e)
+        }
+        console.error('RayChart render error: ', e)
       }
     }
 

src/components/RayCollapseGrid/src/index.tsx

@@ -16,17 +16,26 @@ import { collapseGridProps } from './props'
 import { NCard, NGrid, NGridItem, NSpace } from 'naive-ui'
 import RayIcon from '@/components/RayIcon'
 
+import { call } from '@/utils/vue/index'
+
 const RayCollapseGrid = defineComponent({
   name: 'RayCollapseGrid',
   props: collapseGridProps,
-  emits: ['updateValue'],
+  setup(props) {
-  setup(props, { emit }) {
     const modelCollapsed = ref(props.value)
 
     const handleCollapse = () => {
       modelCollapsed.value = !modelCollapsed.value
 
-      emit('updateValue', modelCollapsed.value)
+      const { onUpdateValue, 'onUpdate:value': _onUpdateValue } = props
+
+      if (onUpdateValue) {
+        call(onUpdateValue, modelCollapsed.value)
+      }
+
+      if (_onUpdateValue) {
+        call(_onUpdateValue, modelCollapsed.value)
+      }
     }
 
     const CollapseIcon = () => (

src/components/RayCollapseGrid/src/props.ts

@@ -2,6 +2,7 @@ import { gridProps } from 'naive-ui'
 
 import type { PropType } from 'vue'
 import type { CollapseToggleText } from './type'
+import type { AnyFunc, MaybeArray } from '@/types/modules/utils'
 
 export const collapseGridProps = {
   value: {
@@ -38,6 +39,14 @@ export const collapseGridProps = {
     type: Boolean,
     default: false,
   },
+  onUpdateValue: {
+    type: [Function, Array] as PropType<MaybeArray<(bool: boolean) => void>>,
+    default: null,
+  },
+  'onUpdate:value': {
+    type: [Function, Array] as PropType<MaybeArray<(bool: boolean) => void>>,
+    default: null,
+  },
   ...gridProps,
 } as const
 

src/components/RayIcon/index.scss

@@ -16,5 +16,18 @@
   & svg[RayIconAttribute="ray-icon"] {
     width: var(--ray-icon-width);
     height: var(--ray-icon-height);
+    fill: currentColor;
+  }
+}
+
+.ray-icon-path__animate {
+  stroke-dasharray: var(--ray-icon-path-length);
+  stroke-dashoffset: var(--ray-icon-path-length);
+  animation: rayIconPathAnimate 2s forwards;
+}
+
+@keyframes rayIconPathAnimate {
+  to {
+    stroke-dashoffset: 0;
   }
 }

src/components/RayIcon/index.tsx

@@ -11,6 +11,11 @@
 
 import './index.scss'
 
+import { call } from '@/utils/vue/index'
+
+import type { PropType } from 'vue'
+import type { MaybeArray } from '@/types/modules/utils'
+
 const RayIcon = defineComponent({
   name: 'RayIcon',
   props: {
@@ -53,11 +58,12 @@ const RayIcon = defineComponent({
       type: String,
       default: 'default',
     },
+    onClick: {
+      type: [Function, Array] as PropType<MaybeArray<(e: MouseEvent) => void>>,
+      default: null,
     },
-  emits: ['click'],
+  },
-  setup(props, ctx) {
+  setup(props) {
-    const emit = ctx.emit
-
     const modelColor = computed(() => props.color)
     const symbolId = computed(() => `#${props.prefix}-${props.name}`)
     const cssVars = computed(() => {
@@ -75,10 +81,13 @@ const RayIcon = defineComponent({
       return cssVar
     })
 
-    const handleClick = () => {
+    const handleClick = (e: MouseEvent) => {
-      emit('click')
+      const { onClick } = props
-    }
 
+      if (onClick) {
+        call(onClick, e)
+      }
+    }
     return {
       modelColor,
       symbolId,

src/components/RayIframe/src/index.tsx

@@ -14,8 +14,10 @@ import './index.scss'
 import { NSpin } from 'naive-ui'
 
 import { completeSize, on, off } from '@use-utils/element'
+import { call } from '@/utils/vue/index'
 
 import type { PropType } from 'vue'
+import type { MaybeArray } from '@/types/modules/utils'
 import type { SpinProps } from 'naive-ui'
 
 const RayIframe = defineComponent({
@@ -77,7 +79,9 @@ const RayIframe = defineComponent({
        * iframe 加载成功回调
        * 返回值: iframe 对象, Event
        */
-      type: Function,
+      type: [Function, Array] as PropType<
+        MaybeArray<(el: HTMLIFrameElement, e: Event) => void>
+      >,
       default: null,
     },
     error: {
@@ -86,7 +90,7 @@ const RayIframe = defineComponent({
        * iframe 加载失败回调
        * 返回值: iframe 对象, Event
        */
-      type: Function,
+      type: [Function, Array] as PropType<MaybeArray<(e: Event) => void>>,
       default: null,
     },
     customSpinProps: {
@@ -115,13 +119,21 @@ const RayIframe = defineComponent({
     const iframeLoadSuccess = (e: Event) => {
       spinShow.value = false
 
-      props.success?.(iframeRef.value, e)
+      const { success } = props
+
+      if (success) {
+        call(success, iframeRef.value as HTMLIFrameElement, e)
+      }
     }
 
     const iframeLoadError = (e: Event) => {
       spinShow.value = false
 
-      props.error?.(iframeRef.value, e)
+      const { error } = props
+
+      if (error) {
+        call(error, e)
+      }
     }
 
     const getIframeRef = () => {

src/components/RayTransitionComponent/TransitionComponent.vue

@@ -1,46 +0,0 @@
-<template>
-  <RouterView>
-    <template #default="{ Component, route }">
-      <transition
-        :name="transitionPropName"
-        :mode="transitionMode"
-        :appear="transitionAppear"
-      >
-        <keep-alive
-          v-if="setupKeepAlive"
-          :max="maxKeepAliveLength"
-          :include="keepAliveInclude"
-          :exclude="keepAliveExclude"
-        >
-          <component :is="Component" :key="route.fullPath" />
-        </keep-alive>
-        <component :is="Component" v-else :key="route.fullPath" />
-      </transition>
-    </template>
-  </RouterView>
-</template>
-<script lang="ts" setup>
-import { useKeepAlive } from '@/store'
-import { APP_KEEP_ALIVE } from '@/appConfig/appConfig'
-
-import type { PropType } from 'vue'
-
-defineProps({
-  transitionPropName: {
-    type: String,
-    default: 'fade',
-  },
-  transitionMode: {
-    type: String as PropType<'default' | 'out-in' | 'in-out' | undefined>,
-    default: 'out-in',
-  },
-  transitionAppear: {
-    type: Boolean,
-    default: true,
-  },
-})
-
-const keepAliveStore = useKeepAlive()
-const { keepAliveInclude } = storeToRefs(keepAliveStore)
-const { setupKeepAlive, maxKeepAliveLength, keepAliveExclude } = APP_KEEP_ALIVE
-</script>

src/components/RayTransitionComponent/index.vue

@@ -0,0 +1,58 @@
+<template>
+  <!-- 这是一个魔法注释，删不的（如果删了会出现一个异常提示，不信你试试） -->
+  <RouterView v-slot="{ Component, route }">
+    <template v-if="Component">
+      <Transition
+        :name="transitionPropName"
+        :mode="transitionMode"
+        :appear="transitionAppear"
+      >
+        <Suspense>
+          <KeepAlive
+            v-if="setupKeepAlive"
+            :max="maxKeepAliveLength"
+            :include="keepAliveInclude"
+            :exclude="keepAliveExclude"
+          >
+            <Component :is="Component" :key="route.fullPath" />
+          </KeepAlive>
+          <Component :is="Component" v-else :key="route.fullPath" />
+        </Suspense>
+      </Transition>
+    </template>
+  </RouterView>
+</template>
+<script lang="ts" setup>
+import { useKeepAlive } from '@/store'
+import { APP_KEEP_ALIVE } from '@/appConfig/appConfig'
+
+import type { PropType } from 'vue'
+
+/**
+ *
+ * 使用宏编译模式时，可以使用 defineOptions 声明组件选项
+ * 常用方法即是声明该组件的 name inheritAttrs 等属性
+ */
+defineOptions({
+  name: 'TransitionComponent',
+})
+
+defineProps({
+  transitionPropName: {
+    type: String,
+    default: 'fade',
+  },
+  transitionMode: {
+    type: String as PropType<'default' | 'out-in' | 'in-out' | undefined>,
+    default: 'out-in',
+  },
+  transitionAppear: {
+    type: Boolean,
+    default: true,
+  },
+})
+
+const keepAliveStore = useKeepAlive()
+const { keepAliveInclude } = storeToRefs(keepAliveStore)
+const { setupKeepAlive, maxKeepAliveLength, keepAliveExclude } = APP_KEEP_ALIVE
+</script>

src/layout/default/ContentWrapper/index.tsx

@@ -11,11 +11,13 @@
 
 import './index.scss'
 
-import RayTransitionComponent from '@/components/RayTransitionComponent/TransitionComponent.vue'
+import RayTransitionComponent from '@/components/RayTransitionComponent/index.vue'
 import { NSpin } from 'naive-ui'
 
 import { useSetting } from '@/store'
 
+import type { GlobalThemeOverrides } from 'naive-ui'
+
 const ContentWrapper = defineComponent({
   name: 'ContentWrapper',
   setup() {
@@ -24,6 +26,9 @@ const ContentWrapper = defineComponent({
 
     const { reloadRouteSwitch } = storeToRefs(settingStore)
     const spinning = ref(false)
+    const thmeOverridesSpin: GlobalThemeOverrides['Spin'] = {
+      opacitySpinning: '0',
+    }
 
     const setupLayoutContentSpin = () => {
       router.beforeEach(() => {
@@ -42,11 +47,17 @@ const ContentWrapper = defineComponent({
     return {
       reloadRouteSwitch,
       spinning,
+      thmeOverridesSpin,
     }
   },
   render() {
     return this.reloadRouteSwitch ? (
-      <NSpin show={this.spinning} description="loading..." size="large">
+      <NSpin
+        show={this.spinning}
+        description="loading..."
+        size="large"
+        themeOverrides={this.thmeOverridesSpin}
+      >
         <RayTransitionComponent class="content-wrapper" />
       </NSpin>
     ) : (

src/types/modules/utils.ts

@@ -48,3 +48,5 @@ export type PartialCSSStyleDeclaration = Partial<
 >
 
 export type ElementSelector = string | `attr:${string}`
+
+export type MaybeArray<T> = T | T[]

src/utils/cache.ts

@@ -18,7 +18,7 @@ import type { CacheType } from '@/types/modules/utils'
  * @param key 需要设置的key
  * @param value 需要缓存的值
  */
-export function setStorage<T = unknown>(
+function setStorage<T = unknown>(
   key: string,
   value: T,
   type: CacheType = 'sessionStorage',
@@ -41,14 +41,10 @@ export function setStorage<T = unknown>(
 }
 
 /** 重载函数 getStorage */
-export function getStorage<T>(
+function getStorage<T>(key: string, storageType: CacheType, defaultValue: T): T
-  key: string,
-  storageType: CacheType,
-  defaultValue: T,
-): T
 
 /** 重载函数 getStorage */
-export function getStorage<T>(
+function getStorage<T>(
   key: string,
   storageType?: CacheType,
   defaultValue?: T,
@@ -59,7 +55,7 @@ export function getStorage<T>(
  * @param key 需要获取目标缓存的key
  * @returns 获取缓存值
  */
-export function getStorage<T>(
+function getStorage<T>(
   key: string,
   storageType: CacheType = 'sessionStorage',
   defaultValue?: T,
@@ -91,7 +87,7 @@ export function getStorage<T>(
  *   - all-sessionStorage: 删除所有 sessionStorage 缓存值
  *   - all-localStorage: 删除所有 localStorage 缓存值
  */
-export function removeStorage(
+function removeStorage(
   key: string | 'all' | 'all-sessionStorage' | 'all-localStorage',
   type: CacheType = 'sessionStorage',
 ) {
@@ -124,3 +120,5 @@ export function removeStorage(
         : window.sessionStorage.removeItem(key)
   }
 }
+
+export { setStorage, getStorage, removeStorage }

src/utils/element.ts

@@ -237,8 +237,7 @@ export const colorToRgba = (color: string, alpha = 1) => {
  * @remark 使用 querySelectorAll 作为检索方法
  * @remark 如果希望按照 attribute 匹配, 仅需要 'attr:xxx'传递参数即可
  *
- * 示例:
+ * @example
- *
  * class:
  * const el = queryElements('.demo')
  * id:

src/utils/vue/call.ts

@@ -0,0 +1,37 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import type { AnyFunc, MaybeArray } from '@/types/modules/utils'
+
+function call(funcs: MaybeArray<() => void>): void
+
+function call<A1>(funcs: MaybeArray<(a1: A1) => void>, a1: A1): void
+
+function call<A1, A2>(
+  funcs: MaybeArray<(a1: A1, a2: A2) => void>,
+  a1: A1,
+  a2: A2,
+): void
+
+function call<A1, A2, A3>(
+  funcs: MaybeArray<(a1: A1, a2: A2, a3: A3) => void>,
+  a1: A1,
+  a2: A2,
+  a3: A3,
+): void
+
+function call<A1, A2, A3, A4>(
+  funcs: MaybeArray<(a1: A1, a2: A2, a3: A3, a4: A4) => void>,
+  a1: A1,
+  a2: A2,
+  a3: A3,
+  a4: A4,
+): void
+
+function call<A extends any[]>(funcs: AnyFunc[] | AnyFunc, ...args: A) {
+  if (Array.isArray(funcs)) {
+    funcs.forEach((func) => (call as any)(func, ...args))
+  } else {
+    return funcs(...args)
+  }
+}
+
+export { call }

src/utils/vue/index.ts

@@ -0,0 +1 @@
+export { call } from './call'

src/views/axios/index.tsx

@@ -1,96 +1,154 @@
 import './index.scss'
-import {
+
-  NCard,
+import { NCard, NLayout, NSpace, NInput, NButton } from 'naive-ui'
-  NLayout,
+import { getWeather, getTypicode } from '@use-api/test'
-  NDataTable,
+import { useRequest, useHookPlusRequest } from '@/axios/index'
-  NLayoutContent,
-  NLayoutHeader,
-  NSpace,
-  NInput,
-  NButton,
-} from 'naive-ui'
-import { onAxiosTest } from '@use-api/test'
-import { isArray } from 'lodash-es'
 
 const Axios = defineComponent({
   name: 'RAxios',
   setup() {
     const state = reactive({
-      weatherData: [] as UnknownObjectKey[],
+      weatherData: [],
-      inputCityValue: '',
+      inputCityValue: null,
+      throttleDemoInputValue: null,
+      debounceDemoInputValue: null,
+      weatherDemoInputValue: null,
     })
-    const columns = [
-      {
-        title: '空气指数',
-        key: 'air',
-      },
-      {
-        title: '风速',
-        key: 'win_meter',
-      },
-      {
-        title: '能见度',
-        key: 'visibility',
-      },
-      {
-        title: '天气情况',
-        key: 'wea_day',
-      },
-      {
-        title: '提示',
-        key: 'air_tips',
-      },
-    ]
 
-    const handleInputCityValue = async (value: string) => {
+    const {
-      try {
+      data: throttleDemoValue,
-        const cb = await onAxiosTest(value)
+      loading: throttleDemoLoading,
-
+      run: throttleDemoRun,
-        state.weatherData = cb.data
+    } = useHookPlusRequest(getTypicode, {
-      } catch (e) {
+      throttleWait: 1000,
-        window.$message.error('请求已被取消')
-      }
-    }
-
-    onBeforeMount(async () => {
-      const cb = await onAxiosTest('成都')
-
-      state.weatherData = cb.data
     })
+    const {
+      data: debounceDemoValue,
+      loading: debounceDemoLoading,
+      run: debounceDemoRun,
+    } = useHookPlusRequest(getTypicode, {
+      debounceWait: 1000,
+    })
+    const {
+      data: weatherDemoValue,
+      loading: weatherDemoLoading,
+      run: weatherDemoRun,
+    } = useHookPlusRequest(getWeather, {
+      throttleWait: 1000,
+    })
+    const {
+      data: demoData,
+      loading: demoLoading,
+      run: demoRun,
+    } = useRequest<{
+      title: string
+    }>(
+      {
+        url: 'https://jsonplaceholder.typicode.com/todos/1',
+        method: 'get',
+      },
+      {
+        manual: true,
+      },
+    )
 
     return {
       ...toRefs(state),
-      columns,
+      throttleDemoValue,
-      handleInputCityValue,
+      throttleDemoLoading,
+      throttleDemoRun,
+      debounceDemoValue,
+      debounceDemoLoading,
+      debounceDemoRun,
+      weatherDemoValue,
+      weatherDemoLoading,
+      weatherDemoRun,
+      demoData,
+      demoLoading,
+      demoRun,
     }
   },
   render() {
     return (
       <NLayout>
-        <NLayoutHeader bordered>
+        <NSpace vertical>
-          <NCard title="请求函数">
+          <h1>请求</h1>
-            基于 axios 封装，能够自动取消连续请求，避免重复渲染造成问题
+          <NCard>
+            <h2>useRequest</h2>
+            <p>支持配置化请求数据</p>
+            <h2>useHookPlusRequest</h2>
             <p>
-              打开控制台 =&gt; 网络 =&gt; 使用低速3g网络 =&gt;
+              支持包裹一个拥有 promise 状态的异步函数，可以用来包裹一个 axios
-              查看控制台被取消的请求
+              请求返回值方法
             </p>
           </NCard>
-        </NLayoutHeader>
+          <h1>使用 useRequest 获取</h1>
-        <NLayoutHeader bordered>
+          <NCard title="请求函数">
-          <NSpace class="axios-header__btn" align="center">
+            <h3>
-            <NInput
+              1.基于 axios 封装，能够自动取消连续请求，避免重复渲染造成问题
-              v-model:value={this.inputCityValue}
+            </h3>
-              onInput={this.handleInputCityValue.bind(this)}
+            <h3>
-              placeholder="请输入城市"
+              2.打开控制台 =&gt; 网络 =&gt; 使用低速3g网络 =&gt;
-            />
+              查看控制台被取消的请求
-            <NButton onClick={this.handleInputCityValue.bind(this, '')}>
+            </h3>
-              搜索
+            <h3>3.详情请查看文档</h3>
-            </NButton>
+          </NCard>
+          <NCard title="useRequest示例（手动触发）">
+            <NSpace vertical>
+              <NButton onClick={this.demoRun.bind(this)}>获取数据</NButton>
+              <h3>
+                结果:&nbsp;
+                {this.demoLoading ? '获取中...' : this.demoData?.title}
+              </h3>
+            </NSpace>
+          </NCard>
+          <h1>使用 useHookPlusRequest 获取</h1>
+          <NCard title="节流">
+            <NSpace vertical>
+              <NInput
+                v-model:value={this.throttleDemoInputValue}
+                onUpdateValue={() => {
+                  this.throttleDemoRun()
+                }}
+              />
+              <h3>不论触发多少次，一秒钟之内仅会触发一次</h3>
+              <h3>
+                当前状态:&nbsp;
+                {this.throttleDemoLoading ? '获取中...' : '获取成功!!!'}
+              </h3>
+            </NSpace>
+          </NCard>
+          <NCard title="防抖">
+            <NSpace vertical>
+              <NInput
+                v-model:value={this.debounceDemoInputValue}
+                onUpdateValue={() => {
+                  this.debounceDemoRun()
+                }}
+              />
+              <h3>一秒后才会执行，如果中途重新请求，则会重新计时</h3>
+              <h3>
+                当前状态:&nbsp;
+                {this.debounceDemoLoading ? '获取中...' : '获取成功!!!'}
+              </h3>
+            </NSpace>
+          </NCard>
+          <NCard title="获取气候">
+            <NSpace vertical>
+              <NInput
+                v-model:value={this.weatherDemoInputValue}
+                onUpdateValue={(val) => {
+                  this.weatherDemoRun(val)
+                }}
+              />
+              <h3>该示例演示了如何根据动态值获取数据</h3>
+              <h3>
+                当前状态:&nbsp;
+                {this.weatherDemoLoading ? '获取中...' : '获取成功!!!'}
+              </h3>
+            </NSpace>
+          </NCard>
         </NSpace>
-        </NLayoutHeader>
-        <NLayoutContent>
-          <NDataTable data={this.weatherData} columns={this.columns} />
-        </NLayoutContent>
       </NLayout>
     )
   },

tsconfig.json

@@ -26,6 +26,7 @@
       "@use-micro/*": ["src/micro/*"]
     },
     "suppressImplicitAnyIndexErrors": true,
+    "typeRoots": ["./src/types/app.d.ts", "./src/types/global.d.ts"],
     "types": [
       "@intlify/unplugin-vue-i18n/messages",
       "naive-ui/volar",

vite-plugin/index.ts

@@ -1,6 +1,5 @@
 import path from 'node:path'
 
-import autoImport from 'unplugin-auto-import/vite' // 自动导入
 import unpluginViteComponents from 'unplugin-vue-components/vite' // 自动按需导入
 import vueI18nPlugin from '@intlify/unplugin-vue-i18n/vite' // i18n
 import { createSvgIconsPlugin } from 'vite-plugin-svg-icons' // `svg icon`
@@ -27,25 +26,6 @@ export const viteSVGIcon = (options?: ViteSvgIconsPlugin) => {
   return createSvgIconsPlugin(Object.assign({}, defaultOptions, options))
 }
 
-/**
- *
- * @param imp 自动导入依赖
- * @returns auto import plugin
- *
- * 自动导入
- */
-export const viteAutoImport = async (imp: (ImportsMap | PresetName)[] = []) =>
-  autoImport({
-    include: [
-      /\.[tj]sx?$/, // .ts, .tsx, .js, .jsx
-      /\.vue$/,
-      /\.vue\?vue/, // .vue
-      /\.md$/, // .md
-    ],
-    dts: true,
-    imports: ['vue', 'vue-router', 'pinia', '@vueuse/core', 'vue-i18n', ...imp],
-  })
-
 /**
  *
  * @param resolvers 按需加载依赖项

vite.config.ts

@@ -2,7 +2,6 @@ import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 
 import {
-  viteAutoImport,
   viteComponents,
   viteVueI18nPlugin,
   viteSVGIcon,
@@ -16,8 +15,10 @@ import vitePluginImp from 'vite-plugin-imp' // 按需打包工具
 import { visualizer } from 'rollup-plugin-visualizer' // 打包体积分析工具
 import viteCompression from 'vite-plugin-compression' // 压缩打包
 import { ViteEjsPlugin as viteEjsPlugin } from 'vite-plugin-ejs'
+import viteAutoImport from 'unplugin-auto-import/vite'
 
 import { NaiveUiResolver } from 'unplugin-vue-components/resolvers' // 模板自动导入组件并且按需打包
+import { VueHooksPlusResolver } from '@vue-hooks-plus/resolvers'
 
 import config from './cfg'
 import pkg from './package.json'
@@ -70,8 +71,21 @@ export default defineConfig(async ({ mode }) => {
       viteVueJSX(),
       title,
       viteInspect(), // 仅适用于开发模式(检查 `Vite` 插件的中间状态)
-      viteVeI18nPlugin(),
+      viteVeI18nPlugin({}),
-      await viteAutoImport([
+      viteAutoImport({
+        include: [
+          /\.[tj]sx?$/, // .ts, .tsx, .js, .jsx
+          /\.vue$/,
+          /\.vue\?vue/, // .vue
+          /\.md$/, // .md
+        ],
+        dts: true,
+        imports: [
+          'vue',
+          'vue-router',
+          'pinia',
+          '@vueuse/core',
+          'vue-i18n',
           {
             'naive-ui': [
               'useDialog',
@@ -80,8 +94,10 @@ export default defineConfig(async ({ mode }) => {
               'useLoadingBar',
             ],
           },
-      ]),
+        ],
-      await viteComponents([NaiveUiResolver()]),
+        resolvers: [NaiveUiResolver(), VueHooksPlusResolver()],
+      }),
+      await viteComponents([NaiveUiResolver(), VueHooksPlusResolver()]),
       viteCompression(),
       viteVueI18nPlugin(),
       viteSvgLoader({