v4.1.0

2025-04-05 19:42:07 +08:00 · 2023-07-12 14:45:24 +08:00 · 2023-07-12 14:45:24 +08:00 · 5502cd690d
commit 5502cd690d
parent ca9bbf7673
25 changed files with 507 additions and 213 deletions
--- a/.eslintrc.cjs
+++ b/.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,
-        globals: ['RouterView'],
+        registeredComponentsOnly: false,
      },
    ],
    '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',
--- a/.npmrc
+++ b/.npmrc
@ -0,0 +1,7 @@
+package-lock=false
+prefer-offline=true
+save-exact=true
+engine-strict=true
+engines={
+  "pnpm": ">=8.6.6"
+}
--- a/.vscode/settings.json
+++ b/.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"
 }
--- a/CHANGELOG.md
+++ b/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
--- a/package.json
+++ b/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-plugin-persistedstate": "^2.4.0",
+    "pinia": "^2.1.4",
+    "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-vue-components": "^0.22.0",
+    "unplugin-auto-import": "^0.15.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",
--- a/src/axios/api/test.ts
+++ b/src/axios/api/test.ts
@ -11,18 +11,15 @@

 /**
 *
- * 该方法演示如何使用 axios
+ * 该方法演示如何封装一个通用请求方法
 *
- * 示范如何完整批注响应体及其数据:
- *
- * ```
- * const demoRequest = () => {
- *   return {} as AxiosResponseBody<AxiosTestResponse>
- * }
- * ```
+ * 步骤：
+ * 1. 定义一个方法（见下面的 demo 方法）
+ * 2. 暴露该函数
+ * 3. 如果该方法在 setup 环境中使用，则可以使用 useHookPlusRequest 包裹该方法，即可便捷使用该请求函数。如果请求方法在非 setup 环境中使用，直接使用即可
 */

-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) => {
-  return useRequest<AxiosTestResponse>({
+export const getWeather = (city: string) => {
+  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',
  })
 }
--- a/src/axios/index.ts
+++ b/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 }
--- a/src/components/RayChart/index.tsx
+++ b/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,
-      default: () => ({}),
+      type: [Function, Array] as PropType<
+        MaybeArray<(e: EChartsInstance) => void>
+      >,
+      default: null,
    },
    error: {
      /**
@ -174,8 +179,8 @@ const RayChart = defineComponent({
       *
       * () => void
       */
-      type: Function,
-      default: () => ({}),
+      type: [Function, Array] as PropType<MaybeArray<() => void>>,
+      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?.()
-
-        console.error(e)
+        if (error) {
+          call(error)
+        }
+        console.error('RayChart render error: ', e)
      }
    }

--- a/src/components/RayCollapseGrid/src/index.tsx
+++ b/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, { emit }) {
+  setup(props) {
    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 = () => (
--- a/src/components/RayCollapseGrid/src/props.ts
+++ b/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

--- a/src/components/RayIcon/index.scss
+++ b/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;
  }
 }
--- a/src/components/RayIcon/index.tsx
+++ b/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) {
-    const emit = ctx.emit
-
+  setup(props) {
    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 = () => {
-      emit('click')
-    }
+    const handleClick = (e: MouseEvent) => {
+      const { onClick } = props

+      if (onClick) {
+        call(onClick, e)
+      }
+    }
    return {
      modelColor,
      symbolId,
--- a/src/components/RayIframe/src/index.tsx
+++ b/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 = () => {
--- a/src/components/RayTransitionComponent/TransitionComponent.vue
+++ b/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>
--- a/src/components/RayTransitionComponent/index.vue
+++ b/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>
--- a/src/layout/default/ContentWrapper/index.tsx
+++ b/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>
    ) : (
--- a/src/types/modules/utils.ts
+++ b/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[]
--- a/src/utils/cache.ts
+++ b/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>(
-  key: string,
-  storageType: CacheType,
-  defaultValue: T,
-): T
+function getStorage<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 }
--- a/src/utils/element.ts
+++ b/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:
--- a/src/utils/vue/call.ts
+++ b/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 }
--- a/src/utils/vue/index.ts
+++ b/src/utils/vue/index.ts
@ -0,0 +1 @@
+export { call } from './call'
--- a/src/views/axios/index.tsx
+++ b/src/views/axios/index.tsx
@ -1,96 +1,154 @@
 import './index.scss'
-import {
-  NCard,
-  NLayout,
-  NDataTable,
-  NLayoutContent,
-  NLayoutHeader,
-  NSpace,
-  NInput,
-  NButton,
-} from 'naive-ui'
-import { onAxiosTest } from '@use-api/test'
-import { isArray } from 'lodash-es'
+
+import { NCard, NLayout, NSpace, NInput, NButton } from 'naive-ui'
+import { getWeather, getTypicode } from '@use-api/test'
+import { useRequest, useHookPlusRequest } from '@/axios/index'

 const Axios = defineComponent({
  name: 'RAxios',
  setup() {
    const state = reactive({
-      weatherData: [] as UnknownObjectKey[],
-      inputCityValue: '',
+      weatherData: [],
+      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) => {
-      try {
-        const cb = await onAxiosTest(value)
-
-        state.weatherData = cb.data
-      } catch (e) {
-        window.$message.error('请求已被取消')
-      }
-    }
-
-    onBeforeMount(async () => {
-      const cb = await onAxiosTest('成都')
-
-      state.weatherData = cb.data
+    const {
+      data: throttleDemoValue,
+      loading: throttleDemoLoading,
+      run: throttleDemoRun,
+    } = useHookPlusRequest(getTypicode, {
+      throttleWait: 1000,
    })
+    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,
-      handleInputCityValue,
+      throttleDemoValue,
+      throttleDemoLoading,
+      throttleDemoRun,
+      debounceDemoValue,
+      debounceDemoLoading,
+      debounceDemoRun,
+      weatherDemoValue,
+      weatherDemoLoading,
+      weatherDemoRun,
+      demoData,
+      demoLoading,
+      demoRun,
    }
  },
  render() {
    return (
      <NLayout>
-        <NLayoutHeader bordered>
-          <NCard title="请求函数">
-            基于 axios 封装，能够自动取消连续请求，避免重复渲染造成问题
+        <NSpace vertical>
+          <h1>请求</h1>
+          <NCard>
+            <h2>useRequest</h2>
+            <p>支持配置化请求数据</p>
+            <h2>useHookPlusRequest</h2>
            <p>
-              打开控制台 =&gt; 网络 =&gt; 使用低速3g网络 =&gt;
-              查看控制台被取消的请求
+              支持包裹一个拥有 promise 状态的异步函数，可以用来包裹一个 axios
+              请求返回值方法
            </p>
          </NCard>
-        </NLayoutHeader>
-        <NLayoutHeader bordered>
-          <NSpace class="axios-header__btn" align="center">
-            <NInput
-              v-model:value={this.inputCityValue}
-              onInput={this.handleInputCityValue.bind(this)}
-              placeholder="请输入城市"
-            />
-            <NButton onClick={this.handleInputCityValue.bind(this, '')}>
-              搜索
-            </NButton>
-          </NSpace>
-        </NLayoutHeader>
-        <NLayoutContent>
-          <NDataTable data={this.weatherData} columns={this.columns} />
-        </NLayoutContent>
+          <h1>使用 useRequest 获取</h1>
+          <NCard title="请求函数">
+            <h3>
+              1.基于 axios 封装，能够自动取消连续请求，避免重复渲染造成问题
+            </h3>
+            <h3>
+              2.打开控制台 =&gt; 网络 =&gt; 使用低速3g网络 =&gt;
+              查看控制台被取消的请求
+            </h3>
+            <h3>3.详情请查看文档</h3>
+          </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>
      </NLayout>
    )
  },
--- a/tsconfig.json
+++ b/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",
--- a/vite-plugin/index.ts
+++ b/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 按需加载依赖项
--- a/vite.config.ts
+++ b/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,18 +71,33 @@ export default defineConfig(async ({ mode }) => {
      viteVueJSX(),
      title,
      viteInspect(), // 仅适用于开发模式(检查 `Vite` 插件的中间状态)
-      viteVeI18nPlugin(),
-      await viteAutoImport([
-        {
-          'naive-ui': [
-            'useDialog',
-            'useMessage',
-            'useNotification',
-            'useLoadingBar',
-          ],
-        },
-      ]),
-      await viteComponents([NaiveUiResolver()]),
+      viteVeI18nPlugin({}),
+      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',
+              'useMessage',
+              'useNotification',
+              'useLoadingBar',
+            ],
+          },
+        ],
+        resolvers: [NaiveUiResolver(), VueHooksPlusResolver()],
+      }),
+      await viteComponents([NaiveUiResolver(), VueHooksPlusResolver()]),
      viteCompression(),
      viteVueI18nPlugin(),
      viteSvgLoader({