From 5502cd690d587d431f0b3ef84dec76178562f5d5 Mon Sep 17 00:00:00 2001 From: ray_wuhao <443547225@qq.com> Date: Wed, 12 Jul 2023 14:45:24 +0800 Subject: [PATCH] v4.1.0 --- .eslintrc.cjs | 6 +- .npmrc | 7 + .vscode/settings.json | 3 +- CHANGELOG.md | 46 ++++ package.json | 20 +- src/axios/api/test.ts | 34 ++- src/axios/index.ts | 50 +++++ src/components/RayChart/index.tsx | 29 ++- src/components/RayCollapseGrid/src/index.tsx | 15 +- src/components/RayCollapseGrid/src/props.ts | 9 + src/components/RayIcon/index.scss | 13 ++ src/components/RayIcon/index.tsx | 23 +- src/components/RayIframe/src/index.tsx | 20 +- .../TransitionComponent.vue | 46 ---- .../RayTransitionComponent/index.vue | 58 +++++ src/layout/default/ContentWrapper/index.tsx | 15 +- src/types/modules/utils.ts | 2 + src/utils/cache.ts | 16 +- src/utils/element.ts | 3 +- src/utils/vue/call.ts | 37 ++++ src/utils/vue/index.ts | 1 + src/views/axios/index.tsx | 204 +++++++++++------- tsconfig.json | 1 + vite-plugin/index.ts | 20 -- vite.config.ts | 42 ++-- 25 files changed, 507 insertions(+), 213 deletions(-) create mode 100644 .npmrc create mode 100644 src/axios/index.ts delete mode 100644 src/components/RayTransitionComponent/TransitionComponent.vue create mode 100644 src/components/RayTransitionComponent/index.vue create mode 100644 src/utils/vue/call.ts create mode 100644 src/utils/vue/index.ts diff --git a/.eslintrc.cjs b/.eslintrc.cjs index 2e4aac16..5a1d791d 100644 --- 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', diff --git a/.npmrc b/.npmrc new file mode 100644 index 00000000..fcd8a32f --- /dev/null +++ b/.npmrc @@ -0,0 +1,7 @@ +package-lock=false +prefer-offline=true +save-exact=true +engine-strict=true +engines={ + "pnpm": ">=8.6.6" +} \ No newline at end of file diff --git a/.vscode/settings.json b/.vscode/settings.json index 0fa44d74..0efef4d5 100644 --- 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" } diff --git a/CHANGELOG.md b/CHANGELOG.md index 6e28300a..ef3ef462 100644 --- 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({ + 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 diff --git a/package.json b/package.json index 331cdf3a..d746a649 100644 --- 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": "", "main": "index.ts", diff --git a/src/axios/api/test.ts b/src/axios/api/test.ts index 125ce98e..8c6578f0 100644 --- a/src/axios/api/test.ts +++ b/src/axios/api/test.ts @@ -11,18 +11,15 @@ /** * - * 该方法演示如何使用 axios + * 该方法演示如何封装一个通用请求方法 * - * 示范如何完整批注响应体及其数据: - * - * ``` - * const demoRequest = () => { - * return {} as AxiosResponseBody - * } - * ``` + * 步骤： + * 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({ +export const getWeather = (city: string) => { + return request({ url: `https://www.tianqiapi.com/api?version=v9&appid=23035354&appsecret=8YvlPNrz&city=${city}`, + method: 'get', + }) +} + +export const getTypicode = () => { + return request({ + url: 'https://jsonplaceholder.typicode.com/todos/1', + method: 'get', }) } diff --git a/src/axios/index.ts b/src/axios/index.ts new file mode 100644 index 00000000..3c821e02 --- /dev/null +++ b/src/axios/index.ts @@ -0,0 +1,50 @@ +/** + * + * @author 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, + option?: UseRequestOptions, +) { + const fc = () => { + const cb = inst(fetchOption) + + return cb + } + + const hooks = useHookPlusRequest(fc, Object.assign({}, option)) + + return hooks +} + +export { useRequest, useHookPlusRequest, request } diff --git a/src/components/RayChart/index.tsx b/src/components/RayChart/index.tsx index 5c30e34d..749c5aec 100644 --- 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 void>>, + default: null, }, theme: { type: [String, Object] as PropType, @@ -199,7 +204,7 @@ const RayChart = defineComponent({ * 拓展 `echarts` 图表 * 用于自己手动拓展相关的包 */ - type: Array as PropType<(typeof CanvasRenderer)[]>, + type: Array as PropType, 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) } } diff --git a/src/components/RayCollapseGrid/src/index.tsx b/src/components/RayCollapseGrid/src/index.tsx index 274cde56..cfb8a8a4 100644 --- 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 = () => ( diff --git a/src/components/RayCollapseGrid/src/props.ts b/src/components/RayCollapseGrid/src/props.ts index 4ae28dac..c965de66 100644 --- 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 void>>, + default: null, + }, + 'onUpdate:value': { + type: [Function, Array] as PropType void>>, + default: null, + }, ...gridProps, } as const diff --git a/src/components/RayIcon/index.scss b/src/components/RayIcon/index.scss index 470518e4..69b046fe 100644 --- 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; } } diff --git a/src/components/RayIcon/index.tsx b/src/components/RayIcon/index.tsx index 24da1649..7f03fa89 100644 --- 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 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, diff --git a/src/components/RayIframe/src/index.tsx b/src/components/RayIframe/src/index.tsx index 9171ccfa..42fbd6f0 100644 --- 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 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 = () => { diff --git a/src/components/RayTransitionComponent/TransitionComponent.vue b/src/components/RayTransitionComponent/TransitionComponent.vue deleted file mode 100644 index de49154b..00000000 --- a/src/components/RayTransitionComponent/TransitionComponent.vue +++ /dev/null @@ -1,46 +0,0 @@ - - diff --git a/src/components/RayTransitionComponent/index.vue b/src/components/RayTransitionComponent/index.vue new file mode 100644 index 00000000..abf43f2b --- /dev/null +++ b/src/components/RayTransitionComponent/index.vue @@ -0,0 +1,58 @@ + + diff --git a/src/layout/default/ContentWrapper/index.tsx b/src/layout/default/ContentWrapper/index.tsx index 49ee0015..144cccdd 100644 --- 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 ? ( - + ) : ( diff --git a/src/types/modules/utils.ts b/src/types/modules/utils.ts index e2612915..0bef5183 100644 --- 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[] diff --git a/src/utils/cache.ts b/src/utils/cache.ts index e929fcd7..73ed248d 100644 --- 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( +function setStorage( key: string, value: T, type: CacheType = 'sessionStorage', @@ -41,14 +41,10 @@ export function setStorage( } /** 重载函数 getStorage */ -export function getStorage( - key: string, - storageType: CacheType, - defaultValue: T, -): T +function getStorage(key: string, storageType: CacheType, defaultValue: T): T /** 重载函数 getStorage */ -export function getStorage( +function getStorage( key: string, storageType?: CacheType, defaultValue?: T, @@ -59,7 +55,7 @@ export function getStorage( * @param key 需要获取目标缓存的key * @returns 获取缓存值 */ -export function getStorage( +function getStorage( key: string, storageType: CacheType = 'sessionStorage', defaultValue?: T, @@ -91,7 +87,7 @@ export function getStorage( * - 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 } diff --git a/src/utils/element.ts b/src/utils/element.ts index 5cc73641..af2cffbd 100644 --- 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: diff --git a/src/utils/vue/call.ts b/src/utils/vue/call.ts new file mode 100644 index 00000000..5f9d1d12 --- /dev/null +++ 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(funcs: MaybeArray<(a1: A1) => void>, a1: A1): void + +function call( + funcs: MaybeArray<(a1: A1, a2: A2) => void>, + a1: A1, + a2: A2, +): void + +function call( + funcs: MaybeArray<(a1: A1, a2: A2, a3: A3) => void>, + a1: A1, + a2: A2, + a3: A3, +): void + +function call( + funcs: MaybeArray<(a1: A1, a2: A2, a3: A3, a4: A4) => void>, + a1: A1, + a2: A2, + a3: A3, + a4: A4, +): void + +function call(funcs: AnyFunc[] | AnyFunc, ...args: A) { + if (Array.isArray(funcs)) { + funcs.forEach((func) => (call as any)(func, ...args)) + } else { + return funcs(...args) + } +} + +export { call } diff --git a/src/utils/vue/index.ts b/src/utils/vue/index.ts new file mode 100644 index 00000000..c31e40a5 --- /dev/null +++ b/src/utils/vue/index.ts @@ -0,0 +1 @@ +export { call } from './call' diff --git a/src/views/axios/index.tsx b/src/views/axios/index.tsx index cf313123..beffc1a8 100644 --- 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 ( - - - 基于 axios 封装，能够自动取消连续请求，避免重复渲染造成问题 + +

请求

+ +

useRequest

+

支持配置化请求数据

+

useHookPlusRequest

- 打开控制台 => 网络 => 使用低速3g网络 => - 查看控制台被取消的请求 + 支持包裹一个拥有 promise 状态的异步函数，可以用来包裹一个 axios + 请求返回值方法

- - - - - - 搜索 - - - - - - +

使用 useRequest 获取

+ +

+ 1.基于 axios 封装，能够自动取消连续请求，避免重复渲染造成问题 +

+

+ 2.打开控制台 => 网络 => 使用低速3g网络 => + 查看控制台被取消的请求 +

+

3.详情请查看文档

+ + + + 获取数据 +

+ 结果:  + {this.demoLoading ? '获取中...' : this.demoData?.title} +

+ + +

使用 useHookPlusRequest 获取

+ + + { + this.throttleDemoRun() + }} + /> +

不论触发多少次，一秒钟之内仅会触发一次

+

+ 当前状态:  + {this.throttleDemoLoading ? '获取中...' : '获取成功!!!'} +

+ + + + + { + this.debounceDemoRun() + }} + /> +

一秒后才会执行，如果中途重新请求，则会重新计时

+

+ 当前状态:  + {this.debounceDemoLoading ? '获取中...' : '获取成功!!!'} +

+ + + + + { + this.weatherDemoRun(val) + }} + /> +

该示例演示了如何根据动态值获取数据

+

+ 当前状态:  + {this.weatherDemoLoading ? '获取中...' : '获取成功!!!'} +

+ + + ) }, diff --git a/tsconfig.json b/tsconfig.json index 31b40c42..440efb44 100644 --- 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", diff --git a/vite-plugin/index.ts b/vite-plugin/index.ts index 23376642..219df957 100644 --- 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 按需加载依赖项 diff --git a/vite.config.ts b/vite.config.ts index 819dfbdf..23ee75da 100644 --- 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({