From 01d44d46f3a8e7635ddeaa2bde5fb3e298dddc0a Mon Sep 17 00:00:00 2001 From: ray_wuhao <443547225@qq.com> Date: Sat, 22 Jul 2023 23:31:06 +0800 Subject: [PATCH] v4.1.3 --- CHANGELOG.md | 40 ++ src/App.tsx | 6 +- src/app-components/README.md | 6 + .../app}/AppAvatar/index.scss | 0 .../app}/AppAvatar/index.tsx | 0 .../app}/AppLockScreen/appLockVar.ts | 0 .../components/LockScreen/index.tsx | 9 +- .../components/UnlockScreen/index.tsx | 9 +- .../app}/AppLockScreen/hook.ts | 0 .../app}/AppLockScreen/index.scss | 0 .../app}/AppLockScreen/index.tsx | 2 +- .../app}/RayLink/index.tsx | 0 .../AppNaiveGlobalProvider/index.tsx | 0 .../provider/AppRequestCanceler/index.tsx | 40 ++ .../provider}/AppStyleProvider/index.scss | 0 .../provider}/AppStyleProvider/index.tsx | 0 src/appConfig/localConfig.ts | 2 +- src/axios/helper/canceler.ts | 38 +- src/axios/helper/interceptor.ts | 8 +- src/axios/index.ts | 9 +- src/axios/type.ts | 53 ++- src/components/AppComponents/README.md | 9 - src/components/RayChart/helper.ts | 81 ++++ src/components/RayChart/index.tsx | 110 ++--- src/components/RayChart/theme/macarons.json | 396 ++++++++++++++++++ src/components/RayChart/type.ts | 43 ++ src/components/RayCollapseGrid/src/index.tsx | 1 - src/components/RayCollapseGrid/src/props.ts | 2 +- src/components/RayIcon/index.tsx | 1 + src/dayjs/type.ts | 17 +- src/directives/index.ts | 2 +- src/directives/modules/copy/index.ts | 1 + src/directives/modules/debounce/index.ts | 4 +- src/directives/modules/debounce/type.ts | 4 +- src/directives/modules/disabled/index.ts | 1 + src/directives/modules/throttle/index.ts | 4 +- src/directives/modules/throttle/type.ts | 4 +- src/error/PageResult/index.tsx | 2 +- src/layout/components/SiderBar/index.tsx | 2 +- src/layout/default/ContentWrapper/index.tsx | 2 + src/layout/index.tsx | 2 +- src/locales/helper.ts | 6 +- src/locales/type.ts | 2 +- src/main.ts | 2 +- src/router/README.md | 1 + src/router/helper/routerCopilot.ts | 2 +- src/router/index.ts | 8 +- src/router/routes.ts | 2 +- src/store/modules/keep-alive/index.ts | 4 + src/types/modules/utils.ts | 10 +- src/utils/cache.ts | 18 +- src/utils/precision.ts | 4 +- src/utils/vue/call.ts | 4 +- src/views/axios/index.tsx | 6 + src/views/dashboard/index.tsx | 2 +- src/views/echart/index.tsx | 9 + src/views/login/index.tsx | 2 +- tsconfig.json | 11 +- 58 files changed, 805 insertions(+), 198 deletions(-) create mode 100644 src/app-components/README.md rename src/{components/AppComponents => app-components/app}/AppAvatar/index.scss (100%) rename src/{components/AppComponents => app-components/app}/AppAvatar/index.tsx (100%) rename src/{components/AppComponents => app-components/app}/AppLockScreen/appLockVar.ts (100%) rename src/{components/AppComponents => app-components/app}/AppLockScreen/components/LockScreen/index.tsx (89%) rename src/{components/AppComponents => app-components/app}/AppLockScreen/components/UnlockScreen/index.tsx (94%) rename src/{components/AppComponents => app-components/app}/AppLockScreen/hook.ts (100%) rename src/{components/AppComponents => app-components/app}/AppLockScreen/index.scss (100%) rename src/{components/AppComponents => app-components/app}/AppLockScreen/index.tsx (93%) rename src/{components => app-components/app}/RayLink/index.tsx (100%) rename src/{components/AppComponents => app-components/provider}/AppNaiveGlobalProvider/index.tsx (100%) create mode 100644 src/app-components/provider/AppRequestCanceler/index.tsx rename src/{components/AppComponents => app-components/provider}/AppStyleProvider/index.scss (100%) rename src/{components/AppComponents => app-components/provider}/AppStyleProvider/index.tsx (100%) delete mode 100644 src/components/AppComponents/README.md create mode 100644 src/components/RayChart/helper.ts create mode 100644 src/components/RayChart/theme/macarons.json create mode 100644 src/components/RayChart/type.ts diff --git a/CHANGELOG.md b/CHANGELOG.md index 885efa2d..2db53423 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,45 @@ # CHANGE LOG +## 4.1.3 + +### Feats + +- 新增切换路由自动取消上一路由所有请求。但是可以通过配置 `useRequest` 与 `request` 方法的 `cancelConfig.needCancel` 属性控制是否需要自动取消该请求。该配置默认为 `true`，当配置为 `false` 时，则不会被取消器取消 + +```ts +import { useRequest, useHookPlusRequest } from '@/axios/index' + +// useRequest +const { data, loading, run } = useRequest<{ + title: string +}>( + { + url: 'https://jsonplaceholder.typicode.com/todos/1', + method: 'get', + cancelConfig: { + needCancel: true, + }, + }, + { + manual: true, + }, +) + +// request +request({ + url: 'https://jsonplaceholder.typicode.com/todos/1', + method: 'get', + cancelConfig: { + needCancel: true, + }, +}) +``` + +- `localConfig` 新增配置类型保护 +- 将原 `AppComponent` 组件包移动至 `app-components` 包中，并且按照其功能拆分为 `sys` `provider` +- 现在将异步注册 `vue-router` +- `RayChart` 组件新增 `macarons` 主题。现在支持便捷的自定义主题，在[主题编辑器](https://echarts.apache.org/zh/theme-builder.html)编辑主题后，下载主题（json）放置于对应主题包中即可被自动注册 + ## 4.1.2 ### Fixes diff --git a/src/App.tsx b/src/App.tsx index 7f20b9d0..188763cc 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,8 +1,8 @@ import { RouterView } from 'vue-router' -import AppNaiveGlobalProvider from '@/components/AppComponents/AppNaiveGlobalProvider/index' -import AppStyleProvider from '@/components/AppComponents/AppStyleProvider/index' +import AppNaiveGlobalProvider from '@/app-components/provider/AppNaiveGlobalProvider/index' +import AppStyleProvider from '@/app-components/provider/AppStyleProvider/index' import GlobalSpin from '@/spin/index' -import LockScreen from '@/components/AppComponents/AppLockScreen/index' +import LockScreen from '@/app-components/app/AppLockScreen/index' const App = defineComponent({ name: 'App', diff --git a/src/app-components/README.md b/src/app-components/README.md new file mode 100644 index 00000000..d59a2bc4 --- /dev/null +++ b/src/app-components/README.md @@ -0,0 +1,6 @@ +## 描述 + +该包存放与模板深度绑定的组件： + +- app：存放与模板数据绑定的组件 +- sys：存放模板注入类组件 diff --git a/src/components/AppComponents/AppAvatar/index.scss b/src/app-components/app/AppAvatar/index.scss similarity index 100% rename from src/components/AppComponents/AppAvatar/index.scss rename to src/app-components/app/AppAvatar/index.scss diff --git a/src/components/AppComponents/AppAvatar/index.tsx b/src/app-components/app/AppAvatar/index.tsx similarity index 100% rename from src/components/AppComponents/AppAvatar/index.tsx rename to src/app-components/app/AppAvatar/index.tsx diff --git a/src/components/AppComponents/AppLockScreen/appLockVar.ts b/src/app-components/app/AppLockScreen/appLockVar.ts similarity index 100% rename from src/components/AppComponents/AppLockScreen/appLockVar.ts rename to src/app-components/app/AppLockScreen/appLockVar.ts diff --git a/src/components/AppComponents/AppLockScreen/components/LockScreen/index.tsx b/src/app-components/app/AppLockScreen/components/LockScreen/index.tsx similarity index 89% rename from src/components/AppComponents/AppLockScreen/components/LockScreen/index.tsx rename to src/app-components/app/AppLockScreen/components/LockScreen/index.tsx index 56dd2abe..1b3a9c71 100644 --- a/src/components/AppComponents/AppLockScreen/components/LockScreen/index.tsx +++ b/src/app-components/app/AppLockScreen/components/LockScreen/index.tsx @@ -12,14 +12,11 @@ /** 锁屏界面 */ import { NInput, NForm, NFormItem, NButton, NSpace } from 'naive-ui' -import AppAvatar from '@/components/AppComponents/AppAvatar/index' +import AppAvatar from '@/app-components/app/AppAvatar/index' import { useSetting } from '@/store' -import useAppLockScreen from '@/components/AppComponents/AppLockScreen/appLockVar' -import { - rules, - useCondition, -} from '@/components/AppComponents/AppLockScreen/hook' +import useAppLockScreen from '@/app-components/app/AppLockScreen/appLockVar' +import { rules, useCondition } from '@/app-components/app/AppLockScreen/hook' import type { FormInst, InputInst } from 'naive-ui' diff --git a/src/components/AppComponents/AppLockScreen/components/UnlockScreen/index.tsx b/src/app-components/app/AppLockScreen/components/UnlockScreen/index.tsx similarity index 94% rename from src/components/AppComponents/AppLockScreen/components/UnlockScreen/index.tsx rename to src/app-components/app/AppLockScreen/components/UnlockScreen/index.tsx index e357e71b..7d71f956 100644 --- a/src/components/AppComponents/AppLockScreen/components/UnlockScreen/index.tsx +++ b/src/app-components/app/AppLockScreen/components/UnlockScreen/index.tsx @@ -12,15 +12,12 @@ /** 解锁界面 */ import { NInput, NForm, NFormItem, NButton, NSpace } from 'naive-ui' -import AppAvatar from '@/components/AppComponents/AppAvatar/index' +import AppAvatar from '@/app-components/app/AppAvatar/index' import dayjs from 'dayjs' import { useSetting, useSignin } from '@/store' -import { - rules, - useCondition, -} from '@/components/AppComponents/AppLockScreen/hook' -import useAppLockScreen from '@/components/AppComponents/AppLockScreen/appLockVar' +import { rules, useCondition } from '@/app-components/app/AppLockScreen/hook' +import useAppLockScreen from '@/app-components/app/AppLockScreen/appLockVar' import type { FormInst, InputInst } from 'naive-ui' diff --git a/src/components/AppComponents/AppLockScreen/hook.ts b/src/app-components/app/AppLockScreen/hook.ts similarity index 100% rename from src/components/AppComponents/AppLockScreen/hook.ts rename to src/app-components/app/AppLockScreen/hook.ts diff --git a/src/components/AppComponents/AppLockScreen/index.scss b/src/app-components/app/AppLockScreen/index.scss similarity index 100% rename from src/components/AppComponents/AppLockScreen/index.scss rename to src/app-components/app/AppLockScreen/index.scss diff --git a/src/components/AppComponents/AppLockScreen/index.tsx b/src/app-components/app/AppLockScreen/index.tsx similarity index 93% rename from src/components/AppComponents/AppLockScreen/index.tsx rename to src/app-components/app/AppLockScreen/index.tsx index 056a7872..364cd076 100644 --- a/src/components/AppComponents/AppLockScreen/index.tsx +++ b/src/app-components/app/AppLockScreen/index.tsx @@ -22,7 +22,7 @@ import LockScreen from './components/LockScreen' import UnlockScreen from './components/UnlockScreen' import { useSetting } from '@/store' -import useAppLockScreen from '@/components/AppComponents/AppLockScreen/appLockVar' +import useAppLockScreen from '@/app-components/app/AppLockScreen/appLockVar' const AppLockScreen = defineComponent({ name: 'AppLockScreen', diff --git a/src/components/RayLink/index.tsx b/src/app-components/app/RayLink/index.tsx similarity index 100% rename from src/components/RayLink/index.tsx rename to src/app-components/app/RayLink/index.tsx diff --git a/src/components/AppComponents/AppNaiveGlobalProvider/index.tsx b/src/app-components/provider/AppNaiveGlobalProvider/index.tsx similarity index 100% rename from src/components/AppComponents/AppNaiveGlobalProvider/index.tsx rename to src/app-components/provider/AppNaiveGlobalProvider/index.tsx diff --git a/src/app-components/provider/AppRequestCanceler/index.tsx b/src/app-components/provider/AppRequestCanceler/index.tsx new file mode 100644 index 00000000..b3459e21 --- /dev/null +++ b/src/app-components/provider/AppRequestCanceler/index.tsx @@ -0,0 +1,40 @@ +/** + * + * @author Ray + * + * @date 2023-07-21 + * + * @workspace ray-template + * + * @remark 今天也是元气满满撸代码的一天 + */ + +/** + * + * 路由更新前，取消上一路由所有请求 + * + * 生命周期示意图： + * beforeRouteUpdate -> cancelAllRequest -> routerUpdate + */ + +import { axiosCanceler } from '@/axios/helper/interceptor' + +const AppRequestCanceler = defineComponent({ + name: 'AppRequestCanceler', + setup() { + onBeforeRouteUpdate(() => { + axiosCanceler.cancelAllRequest() + }) + }, + render() { + return ( +
+ ) + }, +}) + +export default AppRequestCanceler diff --git a/src/components/AppComponents/AppStyleProvider/index.scss b/src/app-components/provider/AppStyleProvider/index.scss similarity index 100% rename from src/components/AppComponents/AppStyleProvider/index.scss rename to src/app-components/provider/AppStyleProvider/index.scss diff --git a/src/components/AppComponents/AppStyleProvider/index.tsx b/src/app-components/provider/AppStyleProvider/index.tsx similarity index 100% rename from src/components/AppComponents/AppStyleProvider/index.tsx rename to src/app-components/provider/AppStyleProvider/index.tsx diff --git a/src/appConfig/localConfig.ts b/src/appConfig/localConfig.ts index 81ee6af3..a6137805 100644 --- a/src/appConfig/localConfig.ts +++ b/src/appConfig/localConfig.ts @@ -19,7 +19,7 @@ import type { AppLocalesDropdownMixedOption } from '@/locales/type' * 语言包语种添加后, 需要在此文件配置语言包 * 该配置中的 key 也会影响 naiveLocales 方法, 配置后请仔细核对一下 * - * 添加新的语言包后, 如果需要其类型提示, 需要在 CurrentAppMessages 中添加新的类型 + * 添加新的语言包后, 如果需要其类型提示, 需要在 AppCurrentAppMessages 中添加新的类型 */ export const LOCAL_OPTIONS: AppLocalesDropdownMixedOption[] = [ { diff --git a/src/axios/helper/canceler.ts b/src/axios/helper/canceler.ts index 02e32c90..5651e99d 100644 --- a/src/axios/helper/canceler.ts +++ b/src/axios/helper/canceler.ts @@ -16,7 +16,7 @@ * 可以根据自己项目进行定制化配置 */ -import type { AxiosRequestConfig } from 'axios' +import type { AppRawRequestConfig } from '@/axios/type' export default class RequestCanceler { pendingRequest: Map @@ -25,6 +25,11 @@ export default class RequestCanceler { this.pendingRequest = new Map() } + /** 是否需要加入取消请求表中 */ + isApending(config: AppRawRequestConfig) { + return config.cancelConfig?.needCancel ?? true + } + /** * * @param config 请求体 config @@ -32,7 +37,7 @@ export default class RequestCanceler { * * @remark 将当前请求 config 生成 request key */ - generateRequestKey(config: AxiosRequestConfig): string { + generateRequestKey(config: AppRawRequestConfig): string { const { method, url } = config return [ @@ -49,18 +54,20 @@ export default class RequestCanceler { * * @remark 给请求体添加 signal 属性, 用于取消请求 */ - addPendingRequest(config: AxiosRequestConfig) { - const requestKey = this.generateRequestKey(config) + addPendingRequest(config: AppRawRequestConfig) { + if (this.isApending(config)) { + const requestKey = this.generateRequestKey(config) - if (!this.pendingRequest.has(requestKey)) { - const controller = new AbortController() + if (!this.pendingRequest.has(requestKey)) { + const controller = new AbortController() - config.signal = controller.signal + config.signal = controller.signal - this.pendingRequest.set(requestKey, controller) - } else { - // 如果已经有该 key 则重新挂载 signal - config.signal = this.pendingRequest.get(requestKey)?.signal + this.pendingRequest.set(requestKey, controller) + } else { + // 如果已经有该 key 则重新挂载 signal + config.signal = this.pendingRequest.get(requestKey)?.signal + } } } @@ -70,7 +77,7 @@ export default class RequestCanceler { * * @remark 取消该请求, 并且清除 map 中对应 generateRequestKey value */ - removePendingRequest(config: AxiosRequestConfig) { + removePendingRequest(config: AppRawRequestConfig) { const requestKey = this.generateRequestKey(config) if (this.pendingRequest.has(requestKey)) { @@ -79,4 +86,11 @@ export default class RequestCanceler { this.pendingRequest.delete(requestKey) } } + + /** 取消所有请求 */ + cancelAllRequest() { + this.pendingRequest.forEach((curr) => { + curr.abort() + }) + } } diff --git a/src/axios/helper/interceptor.ts b/src/axios/helper/interceptor.ts index 7a6c2e54..d4b4532e 100644 --- a/src/axios/helper/interceptor.ts +++ b/src/axios/helper/interceptor.ts @@ -32,7 +32,7 @@ import type { AxiosFetchInstance, AxiosFetchError, } from '@/axios/type' -import type { AnyFunc } from '@/types/modules/utils' +import type { AnyFC } from '@/types/modules/utils' /** 当前请求的实例 */ const axiosFetchInstance: AxiosFetchInstance = { @@ -77,7 +77,7 @@ export const useAxiosInterceptor = () => { /** 设置注入方法队列 */ const setImplement = ( key: keyof ImplementQueue | keyof ErrorImplementQueue, - func: AnyFunc[], + func: AnyFC[], fetchType: FetchType, ) => { fetchType === 'ok' ? (implement[key] = func) : (errorImplement[key] = func) @@ -87,12 +87,12 @@ export const useAxiosInterceptor = () => { const getImplement = ( key: keyof ImplementQueue | keyof ErrorImplementQueue, fetchType: FetchType, - ): AnyFunc[] => { + ): AnyFC[] => { return fetchType === 'ok' ? implement[key] : errorImplement[key] } /** 队列执行器 */ - const implementer = (funcs: AnyFunc[], ...args: any[]) => { + const implementer = (funcs: AnyFC[], ...args: any[]) => { if (Array.isArray(funcs)) { funcs?.forEach((curr) => { if (typeof curr === 'function') { diff --git a/src/axios/index.ts b/src/axios/index.ts index 0ea7f864..2dec3231 100644 --- a/src/axios/index.ts +++ b/src/axios/index.ts @@ -25,7 +25,7 @@ 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' +import type { AppRawRequestConfig } from '@/axios/type' /** * @@ -43,7 +43,7 @@ function useRequest< HookPlusParams extends unknown[] = unknown[], HookPlusPlugin = unknown, >( - fetchOption: AxiosRequestConfig, + fetchOption: AppRawRequestConfig, option?: UseRequestOptions, ) { const fc = () => { @@ -52,7 +52,10 @@ function useRequest< return cb } - const hooks = useHookPlusRequest(fc, Object.assign({}, option)) + const hooks = useHookPlusRequest( + fc, + Object.assign({}, option), + ) return hooks } diff --git a/src/axios/type.ts b/src/axios/type.ts index 30ee6a0a..191c486a 100644 --- a/src/axios/type.ts +++ b/src/axios/type.ts @@ -7,7 +7,7 @@ import type { Axios, AxiosResponse, } from 'axios' -import type { AnyFunc } from '@/types/modules/utils' +import type { AnyFC } from '@/types/modules/utils' export type AxiosHeaderValue = | AxiosHeaders @@ -22,54 +22,65 @@ export interface RequestHeaderOptions { value: AxiosHeaderValue } -export interface AxiosInstanceExpand extends Axios { - (config: AxiosRequestConfig): Promise - (url: string, config?: AxiosRequestConfig): Promise +export interface CancelConfig { + needCancel?: boolean +} - getUri(config?: AxiosRequestConfig): string - request(config: AxiosRequestConfig): Promise - get(url: string, config?: AxiosRequestConfig): Promise +export interface AppRawRequestConfig extends AxiosRequestConfig { + cancelConfig?: CancelConfig +} + +export interface AxiosInstanceExpand extends Axios { + (config: AppRawRequestConfig): Promise + (url: string, config?: AppRawRequestConfig): Promise + + getUri(config?: AppRawRequestConfig): string + request(config: AppRawRequestConfig): Promise + get( + url: string, + config?: AppRawRequestConfig, + ): Promise delete( url: string, - config?: AxiosRequestConfig, + config?: AppRawRequestConfig, ): Promise head( url: string, - config?: AxiosRequestConfig, + config?: AppRawRequestConfig, ): Promise options( url: string, - config?: AxiosRequestConfig, + config?: AppRawRequestConfig, ): Promise post( url: string, data?: D, - config?: AxiosRequestConfig, + config?: AppRawRequestConfig, ): Promise put( url: string, data?: D, - config?: AxiosRequestConfig, + config?: AppRawRequestConfig, ): Promise patch( url: string, data?: D, - config?: AxiosRequestConfig, + config?: AppRawRequestConfig, ): Promise postForm( url: string, data?: D, - config?: AxiosRequestConfig, + config?: AppRawRequestConfig, ): Promise putForm( url: string, data?: D, - config?: AxiosRequestConfig, + config?: AppRawRequestConfig, ): Promise patchForm( url: string, data?: D, - config?: AxiosRequestConfig, + config?: AppRawRequestConfig, ): Promise defaults: Omit & { @@ -79,18 +90,18 @@ export interface AxiosInstanceExpand extends Axios { } } -export type RequestInterceptorConfig = AxiosRequestConfig +export type RequestInterceptorConfig = AppRawRequestConfig export type ResponseInterceptorConfig = AxiosResponse export interface ImplementQueue { - implementRequestInterceptorArray: AnyFunc[] - implementResponseInterceptorArray: AnyFunc[] + implementRequestInterceptorArray: AnyFC[] + implementResponseInterceptorArray: AnyFC[] } export interface ErrorImplementQueue { - implementRequestInterceptorErrorArray: AnyFunc[] - implementResponseInterceptorErrorArray: AnyFunc[] + implementRequestInterceptorErrorArray: AnyFC[] + implementResponseInterceptorErrorArray: AnyFC[] } export type BeforeFetchFunction< diff --git a/src/components/AppComponents/README.md b/src/components/AppComponents/README.md deleted file mode 100644 index be48cb20..00000000 --- a/src/components/AppComponents/README.md +++ /dev/null @@ -1,9 +0,0 @@ -## 描述 - -> 该组件包存放依赖系统数据的公共组件和与项目绑定的一些组件。 - -## 约束 - -- 该组件包仅存放与系统数据有绑定、关联的组件，纯组件或纯 UI 组件应放置于外层包中 -- 以 `App` 开头标记组件是系统组件 -- 组件应该尽量避免与其他系统组件有关联性 diff --git a/src/components/RayChart/helper.ts b/src/components/RayChart/helper.ts new file mode 100644 index 00000000..4d1e63a4 --- /dev/null +++ b/src/components/RayChart/helper.ts @@ -0,0 +1,81 @@ +/** + * + * @author Ray + * + * @date 2023-07-22 + * + * @workspace ray-template + * + * @remark 今天也是元气满满撸代码的一天 + */ + +import type { + ChartThemeRawArray, + ChartThemeRawModules, + LoadingOptions, +} from '@/components/RayChart/type' + +/** + * + * 自动注册所有主题 + * + * 默认以文件名当作主题名称 + * + * 主题配置器：https://echarts.apache.org/zh/theme-builder.html + * 流程： + * 1. 配置、选择主题 + * 2. 点击下载主题 + * 3. 选择 json 类型，然后复制 + * 4. 在 @/components/RayChart/theme 包中创建对应的 json 文件，文件名为主题名称 + */ +export const setupChartTheme = () => { + // 获取所有主题 + const themeRawModules: Record = + import.meta.glob('@/components/RayChart/theme/**/*.json', { + eager: true, + }) + const regx = /\/([^/]+)\.json$/ + + const rawThemes = Object.keys(themeRawModules).reduce((pre, curr) => { + const name = curr.match(regx)?.[1] + + if (name) { + pre.push({ + name, + theme: themeRawModules[curr].default, + }) + + return pre + } else { + throw new Error('theme name is not found') + } + }, [] as ChartThemeRawArray[]) + + return rawThemes +} + +/** + * + * @returns LoadingOptions + * + * 为了方便使用加载动画, 写了此方法, 虽然没啥用 + */ +export const loadingOptions = (options?: LoadingOptions) => + Object.assign( + {}, + { + text: 'loading', + color: '#c23531', + textColor: '#000', + maskColor: 'rgba(255, 255, 255, 0.9)', + zlevel: 0, + fontSize: 12, + showSpinner: true, + spinnerRadius: 10, + lineWidth: 5, + fontWeight: 'normal', + fontStyle: 'normal', + fontFamily: 'sans-serif', + }, + options, + ) diff --git a/src/components/RayChart/index.tsx b/src/components/RayChart/index.tsx index 749c5aec..82053265 100644 --- a/src/components/RayChart/index.tsx +++ b/src/components/RayChart/index.tsx @@ -40,66 +40,22 @@ 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 { on, off, completeSize } from '@/utils/element' import { call } from '@/utils/vue/index' +import { setupChartTheme, loadingOptions } from './helper' import type { PropType } from 'vue' import type { EChartsInstance } from '@/types/modules/component' -import type { AnyFunc, MaybeArray } from '@/types/modules/utils' +import type { AnyFC, MaybeArray } from '@/types/modules/utils' import type { DebouncedFunc } from 'lodash-es' - -export type AutoResize = - | boolean - | { - width: number - height: number - } - -export interface LoadingOptions { - text: string // 文本内容 - color: string // 颜色 - textColor: string // 字体颜色 - maskColor: string // 遮罩颜色 - zlevel: number // 水平 - fontSize: number // 字体大小 - showSpinner: boolean // 是否显示旋转动画(`spinner`) - spinnerRadius: number // 旋转动画(`spinner`)的半径 - lineWidth: number // 旋转动画(`spinner`)的线宽 - fontWeight: string // 字体粗细 - fontStyle: string // 字体风格 - fontFamily: string // 字体系列 -} - -export type ChartTheme = 'dark' | '' | object +import type { + LoadingOptions, + AutoResize, + ChartTheme, +} from '@/components/RayChart/type' export type EChartsExtensionInstallRegisters = typeof CanvasRenderer -/** - * - * @returns LoadingOptions - * - * 为了方便使用加载动画, 写了此方法, 虽然没啥用 - */ -export const loadingOptions = (options?: LoadingOptions) => - Object.assign( - {}, - { - text: 'loading', - color: '#c23531', - textColor: '#000', - maskColor: 'rgba(255, 255, 255, 0.9)', - zlevel: 0, - fontSize: 12, - showSpinner: true, - spinnerRadius: 10, - lineWidth: 5, - fontWeight: 'normal', - fontStyle: 'normal', - fontFamily: 'sans-serif', - }, - options, - ) - const RayChart = defineComponent({ name: 'RayChart', props: { @@ -229,7 +185,7 @@ const RayChart = defineComponent({ const rayChartRef = ref() // `echart` 容器实例 const echartInstanceRef = ref() // `echart` 拷贝实例, 解决直接使用响应式实例带来的问题 let echartInstance: EChartsInstance // `echart` 实例 - let resizeThrottle: DebouncedFunc // resize 防抖方法实例 + let resizeThrottle: DebouncedFunc // resize 防抖方法实例 const cssVarsRef = computed(() => { const cssVars = { @@ -294,13 +250,13 @@ const RayChart = defineComponent({ * * 如果有需要特殊全局配置的可以在此继续写... */ - const useMergeOptions = () => { + const combineChartOptions = () => { let options = cloneDeep(props.options) - const merge = (opts: object) => Object.assign({}, options, opts) + const assign = (opts: object) => Object.assign({}, options, opts) if (props.showAria) { - options = merge({ + options = assign({ aria: { enabled: true, decal: { @@ -321,32 +277,28 @@ const RayChart = defineComponent({ * * 直接使用响应式代理实例会出现诡异的问题, 例如 `legend` 点击时报错 */ - const renderChart = (theme: ChartTheme) => { + const renderChart = (theme: ChartTheme = 'macarons') => { /** 获取 dom 容器 */ const element = rayChartRef.value as HTMLElement /** 获取配置项 */ - const options = useMergeOptions() + const options = combineChartOptions() /** 获取 dom 容器实际宽高 */ const { height, width } = element.getBoundingClientRect() const { success, error } = props - /** 如果高度为 0, 则以 200px 填充 */ - if (height === 0) { - addStyle(element, { - height: '200px', - }) - } - - /** 如果款度为 0, 则以 200px 填充 */ - if (width === 0) { - addStyle(element, { - width: '200px', - }) - } - try { + /** 注册主题 */ + setupChartTheme().forEach((curr) => { + echarts.registerTheme(curr.name, curr.theme) + }) + /** 注册 chart */ - echartInstance = echarts.init(element, theme) + echartInstance = echarts.init(element, theme, { + /** 如果款度为 0, 则以 200px 填充 */ + width: width === 0 ? 200 : undefined, + /** 如果高度为 0, 则以 200px 填充 */ + height: height === 0 ? 200 : undefined, + }) echartInstanceRef.value = echartInstance /** 设置 options 配置项 */ @@ -373,13 +325,13 @@ const RayChart = defineComponent({ */ const renderThemeChart = (bool?: boolean) => { if (props.autoChangeTheme) { - bool ? renderChart('dark') : renderChart('') + bool ? renderChart('dark') : renderChart() return void 0 } if (!props.theme) { - renderChart('') + renderChart() } } @@ -431,9 +383,9 @@ const RayChart = defineComponent({ * 自动跟随模板主题或者指定主题皆可 */ if (props.autoChangeTheme || props.theme) { - themeValue.value ? renderChart('dark') : renderChart('') + themeValue.value ? renderChart('dark') : renderChart() } else { - renderChart('') + renderChart() } }, ) @@ -454,7 +406,7 @@ const RayChart = defineComponent({ () => props.watchOptions, () => { /** 重新组合 options */ - const options = useMergeOptions() + const options = combineChartOptions() /** 如果 options 发生变动更新 echarts */ echartInstance?.setOption(options) @@ -473,7 +425,7 @@ const RayChart = defineComponent({ if (props.autoChangeTheme) { renderThemeChart(themeValue.value) } else { - props.theme ? renderChart('dark') : renderChart('') + props.theme ? renderChart('dark') : renderChart() } /** 注册事件 */ diff --git a/src/components/RayChart/theme/macarons.json b/src/components/RayChart/theme/macarons.json new file mode 100644 index 00000000..b6ca4699 --- /dev/null +++ b/src/components/RayChart/theme/macarons.json @@ -0,0 +1,396 @@ +{ + "color": [ + "#2ec7c9", + "#b6a2de", + "#5ab1ef", + "#ffb980", + "#d87a80", + "#8d98b3", + "#e5cf0d", + "#97b552", + "#95706d", + "#dc69aa", + "#07a2a4", + "#9a7fd1", + "#588dd5", + "#f5994e", + "#c05050", + "#59678c", + "#c9ab00", + "#7eb00a", + "#6f5553", + "#c14089" + ], + "backgroundColor": "rgba(0,0,0,0)", + "textStyle": {}, + "title": { + "textStyle": { + "color": "#008acd" + }, + "subtextStyle": { + "color": "#aaaaaa" + } + }, + "line": { + "itemStyle": { + "borderWidth": 1 + }, + "lineStyle": { + "width": 2 + }, + "symbolSize": 3, + "symbol": "emptyCircle", + "smooth": true + }, + "radar": { + "itemStyle": { + "borderWidth": 1 + }, + "lineStyle": { + "width": 2 + }, + "symbolSize": 3, + "symbol": "emptyCircle", + "smooth": true + }, + "bar": { + "itemStyle": { + "barBorderWidth": 0, + "barBorderColor": "#ccc" + } + }, + "pie": { + "itemStyle": { + "borderWidth": 0, + "borderColor": "#ccc" + } + }, + "scatter": { + "itemStyle": { + "borderWidth": 0, + "borderColor": "#ccc" + } + }, + "boxplot": { + "itemStyle": { + "borderWidth": 0, + "borderColor": "#ccc" + } + }, + "parallel": { + "itemStyle": { + "borderWidth": 0, + "borderColor": "#ccc" + } + }, + "sankey": { + "itemStyle": { + "borderWidth": 0, + "borderColor": "#ccc" + } + }, + "funnel": { + "itemStyle": { + "borderWidth": 0, + "borderColor": "#ccc" + } + }, + "gauge": { + "itemStyle": { + "borderWidth": 0, + "borderColor": "#ccc" + } + }, + "candlestick": { + "itemStyle": { + "color": "#d87a80", + "color0": "#2ec7c9", + "borderColor": "#d87a80", + "borderColor0": "#2ec7c9", + "borderWidth": 1 + } + }, + "graph": { + "itemStyle": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "lineStyle": { + "width": 1, + "color": "#aaa" + }, + "symbolSize": 3, + "symbol": "emptyCircle", + "smooth": true, + "color": [ + "#2ec7c9", + "#b6a2de", + "#5ab1ef", + "#ffb980", + "#d87a80", + "#8d98b3", + "#e5cf0d", + "#97b552", + "#95706d", + "#dc69aa", + "#07a2a4", + "#9a7fd1", + "#588dd5", + "#f5994e", + "#c05050", + "#59678c", + "#c9ab00", + "#7eb00a", + "#6f5553", + "#c14089" + ], + "label": { + "color": "#eee" + } + }, + "map": { + "itemStyle": { + "areaColor": "#dddddd", + "borderColor": "#eeeeee", + "borderWidth": 0.5 + }, + "label": { + "color": "#d87a80" + }, + "emphasis": { + "itemStyle": { + "areaColor": "rgba(254,153,78,1)", + "borderColor": "#444", + "borderWidth": 1 + }, + "label": { + "color": "rgb(100,0,0)" + } + } + }, + "geo": { + "itemStyle": { + "areaColor": "#dddddd", + "borderColor": "#eeeeee", + "borderWidth": 0.5 + }, + "label": { + "color": "#d87a80" + }, + "emphasis": { + "itemStyle": { + "areaColor": "rgba(254,153,78,1)", + "borderColor": "#444", + "borderWidth": 1 + }, + "label": { + "color": "rgb(100,0,0)" + } + } + }, + "categoryAxis": { + "axisLine": { + "show": true, + "lineStyle": { + "color": "#008acd" + } + }, + "axisTick": { + "show": true, + "lineStyle": { + "color": "#333" + } + }, + "axisLabel": { + "show": true, + "color": "#333" + }, + "splitLine": { + "show": false, + "lineStyle": { + "color": ["#eee"] + } + }, + "splitArea": { + "show": false, + "areaStyle": { + "color": ["rgba(250,250,250,0.3)", "rgba(200,200,200,0.3)"] + } + } + }, + "valueAxis": { + "axisLine": { + "show": true, + "lineStyle": { + "color": "#008acd" + } + }, + "axisTick": { + "show": true, + "lineStyle": { + "color": "#333" + } + }, + "axisLabel": { + "show": true, + "color": "#333" + }, + "splitLine": { + "show": true, + "lineStyle": { + "color": ["#eee"] + } + }, + "splitArea": { + "show": true, + "areaStyle": { + "color": ["rgba(250,250,250,0.3)", "rgba(200,200,200,0.3)"] + } + } + }, + "logAxis": { + "axisLine": { + "show": true, + "lineStyle": { + "color": "#008acd" + } + }, + "axisTick": { + "show": true, + "lineStyle": { + "color": "#333" + } + }, + "axisLabel": { + "show": true, + "color": "#333" + }, + "splitLine": { + "show": true, + "lineStyle": { + "color": ["#eee"] + } + }, + "splitArea": { + "show": true, + "areaStyle": { + "color": ["rgba(250,250,250,0.3)", "rgba(200,200,200,0.3)"] + } + } + }, + "timeAxis": { + "axisLine": { + "show": true, + "lineStyle": { + "color": "#008acd" + } + }, + "axisTick": { + "show": true, + "lineStyle": { + "color": "#333" + } + }, + "axisLabel": { + "show": true, + "color": "#333" + }, + "splitLine": { + "show": true, + "lineStyle": { + "color": ["#eee"] + } + }, + "splitArea": { + "show": false, + "areaStyle": { + "color": ["rgba(250,250,250,0.3)", "rgba(200,200,200,0.3)"] + } + } + }, + "toolbox": { + "iconStyle": { + "borderColor": "#2ec7c9" + }, + "emphasis": { + "iconStyle": { + "borderColor": "#18a4a6" + } + } + }, + "legend": { + "textStyle": { + "color": "#333333" + } + }, + "tooltip": { + "axisPointer": { + "lineStyle": { + "color": "#008acd", + "width": "1" + }, + "crossStyle": { + "color": "#008acd", + "width": "1" + } + } + }, + "timeline": { + "lineStyle": { + "color": "#008acd", + "width": 1 + }, + "itemStyle": { + "color": "#008acd", + "borderWidth": 1 + }, + "controlStyle": { + "color": "#008acd", + "borderColor": "#008acd", + "borderWidth": 0.5 + }, + "checkpointStyle": { + "color": "#2ec7c9", + "borderColor": "#2ec7c9" + }, + "label": { + "color": "#008acd" + }, + "emphasis": { + "itemStyle": { + "color": "#a9334c" + }, + "controlStyle": { + "color": "#008acd", + "borderColor": "#008acd", + "borderWidth": 0.5 + }, + "label": { + "color": "#008acd" + } + } + }, + "visualMap": { + "color": ["#5ab1ef", "#e0ffff"] + }, + "dataZoom": { + "backgroundColor": "rgba(47,69,84,0)", + "dataBackgroundColor": "#efefff", + "fillerColor": "rgba(182,162,222,0.2)", + "handleColor": "#008acd", + "handleSize": "100%", + "textStyle": { + "color": "#333333" + } + }, + "markPoint": { + "label": { + "color": "#eee" + }, + "emphasis": { + "label": { + "color": "#eee" + } + } + } +} diff --git a/src/components/RayChart/type.ts b/src/components/RayChart/type.ts new file mode 100644 index 00000000..5526b40e --- /dev/null +++ b/src/components/RayChart/type.ts @@ -0,0 +1,43 @@ +/** + * + * @author Ray + * + * @date 2023-07-22 + * + * @workspace ray-template + * + * @remark 今天也是元气满满撸代码的一天 + */ + +export interface ChartThemeRawModules { + default: Record +} + +export interface ChartThemeRawArray { + name: string + theme: UnknownObjectKey +} + +export interface LoadingOptions { + text: string // 文本内容 + color: string // 颜色 + textColor: string // 字体颜色 + maskColor: string // 遮罩颜色 + zlevel: number // 水平 + fontSize: number // 字体大小 + showSpinner: boolean // 是否显示旋转动画(`spinner`) + spinnerRadius: number // 旋转动画(`spinner`)的半径 + lineWidth: number // 旋转动画(`spinner`)的线宽 + fontWeight: string // 字体粗细 + fontStyle: string // 字体风格 + fontFamily: string // 字体系列 +} + +export type AutoResize = + | boolean + | { + width: number + height: number + } + +export type ChartTheme = 'dark' | string | object | 'macarons' diff --git a/src/components/RayCollapseGrid/src/index.tsx b/src/components/RayCollapseGrid/src/index.tsx index cfb8a8a4..966c746d 100644 --- a/src/components/RayCollapseGrid/src/index.tsx +++ b/src/components/RayCollapseGrid/src/index.tsx @@ -72,7 +72,6 @@ const RayCollapseGrid = defineComponent({ collapsed={this.modelCollapsed} xGap={this.xGap || 12} yGap={this.yGap || 18} - cols={this.cols} collapsedRows={this.collapsedRows} > {this.$slots.default?.()} diff --git a/src/components/RayCollapseGrid/src/props.ts b/src/components/RayCollapseGrid/src/props.ts index c965de66..fd9a4537 100644 --- a/src/components/RayCollapseGrid/src/props.ts +++ b/src/components/RayCollapseGrid/src/props.ts @@ -2,7 +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' +import type { AnyFC, MaybeArray } from '@/types/modules/utils' export const collapseGridProps = { value: { diff --git a/src/components/RayIcon/index.tsx b/src/components/RayIcon/index.tsx index 7f03fa89..da437831 100644 --- a/src/components/RayIcon/index.tsx +++ b/src/components/RayIcon/index.tsx @@ -88,6 +88,7 @@ const RayIcon = defineComponent({ call(onClick, e) } } + return { modelColor, symbolId, diff --git a/src/dayjs/type.ts b/src/dayjs/type.ts index c01cfa34..eb7cfefd 100644 --- a/src/dayjs/type.ts +++ b/src/dayjs/type.ts @@ -1,6 +1,15 @@ -export type DayjsLocal = 'zh-cn' | 'en' +import type { AppCurrentAppMessages } from '@/locales/type' -export interface DayjsLocalMap { - 'zh-CN': 'zh-cn' - 'en-US': 'en' +type A = { + [K in keyof T & string]: T[K] extends object ? string : never } + +type PickDayjsLocalValue = { + [K in keyof T]: T[K] +}[keyof T] + +type DayjsLocalMaps = A + +export type DayjsLocal = PickDayjsLocalValue + +export type DayjsLocalMap = Record diff --git a/src/directives/index.ts b/src/directives/index.ts index 70751013..4e85bdfd 100644 --- a/src/directives/index.ts +++ b/src/directives/index.ts @@ -27,7 +27,7 @@ import type { DirectiveModules } from '@/directives/type' export const setupDirectives = (app: App) => { // 获取 modules 包下所有的 index.ts 文件 const directiveRawModules: Record = - import.meta.glob('./modules/**/index.ts', { + import.meta.glob('@/directives/modules/**/index.ts', { eager: true, }) // 将所有的包提取出来(./modules/[file-name]/index.ts) diff --git a/src/directives/modules/copy/index.ts b/src/directives/modules/copy/index.ts index 288a5dc4..becc4554 100644 --- a/src/directives/modules/copy/index.ts +++ b/src/directives/modules/copy/index.ts @@ -52,4 +52,5 @@ const copyDirective: CustomDirectiveFC = () => { }, } } + export default copyDirective diff --git a/src/directives/modules/debounce/index.ts b/src/directives/modules/debounce/index.ts index 54e29b5f..ec5cb83e 100644 --- a/src/directives/modules/debounce/index.ts +++ b/src/directives/modules/debounce/index.ts @@ -19,7 +19,7 @@ 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 { AnyFC } from '@/types/modules/utils' import type { DebouncedFunc } from 'lodash-es' import type { CustomDirectiveFC } from '@/directives/type' @@ -27,7 +27,7 @@ const debounceDirective: CustomDirectiveFC< HTMLElement, DebounceBindingOptions > = () => { - let debounceFunction: DebouncedFunc | null + let debounceFunction: DebouncedFunc | null return { beforeMount: (el, binding) => { diff --git a/src/directives/modules/debounce/type.ts b/src/directives/modules/debounce/type.ts index 25aa981d..ea46a569 100644 --- a/src/directives/modules/debounce/type.ts +++ b/src/directives/modules/debounce/type.ts @@ -1,8 +1,8 @@ import type { DebounceSettings } from 'lodash-es' -import type { AnyFunc } from '@/types/modules/utils' +import type { AnyFC } from '@/types/modules/utils' export interface DebounceBindingOptions { - func: AnyFunc + func: AnyFC trigger: string wait: number options: DebounceSettings diff --git a/src/directives/modules/disabled/index.ts b/src/directives/modules/disabled/index.ts index 81630922..d49a6302 100644 --- a/src/directives/modules/disabled/index.ts +++ b/src/directives/modules/disabled/index.ts @@ -42,4 +42,5 @@ const disabledDirective: CustomDirectiveFC = () => { }, } } + export default disabledDirective diff --git a/src/directives/modules/throttle/index.ts b/src/directives/modules/throttle/index.ts index 66aca2e2..6a322aca 100644 --- a/src/directives/modules/throttle/index.ts +++ b/src/directives/modules/throttle/index.ts @@ -19,7 +19,7 @@ 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 { AnyFC } from '@/types/modules/utils' import type { DebouncedFunc } from 'lodash-es' import type { CustomDirectiveFC } from '@/directives/type' @@ -27,7 +27,7 @@ const throttleDirective: CustomDirectiveFC< HTMLElement, ThrottleBindingOptions > = () => { - let throttleFunction: DebouncedFunc | null + let throttleFunction: DebouncedFunc | null return { beforeMount: (el, binding) => { diff --git a/src/directives/modules/throttle/type.ts b/src/directives/modules/throttle/type.ts index 9d8c36c7..74883475 100644 --- a/src/directives/modules/throttle/type.ts +++ b/src/directives/modules/throttle/type.ts @@ -1,8 +1,8 @@ import type { ThrottleSettings } from 'lodash-es' -import type { AnyFunc } from '@/types/modules/utils' +import type { AnyFC } from '@/types/modules/utils' export interface ThrottleBindingOptions { - func: AnyFunc + func: AnyFC trigger: string wait: number options: ThrottleSettings diff --git a/src/error/PageResult/index.tsx b/src/error/PageResult/index.tsx index abd96bde..fc328180 100644 --- a/src/error/PageResult/index.tsx +++ b/src/error/PageResult/index.tsx @@ -36,7 +36,7 @@ const PageResult = defineComponent({ {{ ...this.$slots, footer: () => ( - + 返回首页 ), diff --git a/src/layout/components/SiderBar/index.tsx b/src/layout/components/SiderBar/index.tsx index f7cd4e7c..0e074e0a 100644 --- a/src/layout/components/SiderBar/index.tsx +++ b/src/layout/components/SiderBar/index.tsx @@ -24,7 +24,7 @@ import TootipIcon from '@/layout/components/SiderBar/components/TooltipIcon/inde import SettingDrawer from './components/SettingDrawer/index' import Breadcrumb from './components/Breadcrumb/index' import GlobalSeach from './components/GlobalSeach/index' -import AppAvatar from '@/components/AppComponents/AppAvatar/index' +import AppAvatar from '@/app-components/app/AppAvatar/index' import { useSetting } from '@/store' import { LOCAL_OPTIONS } from '@/appConfig/localConfig' diff --git a/src/layout/default/ContentWrapper/index.tsx b/src/layout/default/ContentWrapper/index.tsx index b5be58ba..40b0a26e 100644 --- a/src/layout/default/ContentWrapper/index.tsx +++ b/src/layout/default/ContentWrapper/index.tsx @@ -19,6 +19,7 @@ import './index.scss' import RayTransitionComponent from '@/components/RayTransitionComponent/index.vue' import { NSpin } from 'naive-ui' +import AppRequestCanceler from '@/app-components/provider/AppRequestCanceler/index' import { useSetting } from '@/store' @@ -64,6 +65,7 @@ const ContentWrapper = defineComponent({ size="large" themeOverrides={this.thmeOverridesSpin} > + {this.reloadRouteSwitch ? ( { export const getAppLocalMessages = async ( LOCAL_OPTIONS: AppLocalesDropdownMixedOption[], ) => { - const message = {} as CurrentAppMessages + const message = {} as AppCurrentAppMessages for (const curr of LOCAL_OPTIONS) { const msg: AppLocalesModules = await import(`./lang/${curr.key}.ts`) @@ -132,5 +132,5 @@ export const getAppDefaultLanguage = () => { SYSTEM_DEFAULT_LOCAL, ) - return language + return language as keyof AppCurrentAppMessages } diff --git a/src/locales/type.ts b/src/locales/type.ts index 03492fa1..ba3021ec 100644 --- a/src/locales/type.ts +++ b/src/locales/type.ts @@ -6,7 +6,7 @@ import type { } from 'naive-ui' import type { Recordable } from '@/types/modules/helper' -export interface CurrentAppMessages { +export interface AppCurrentAppMessages { 'zh-CN': object 'en-US': object } diff --git a/src/main.ts b/src/main.ts index 503b16c4..9674de27 100644 --- a/src/main.ts +++ b/src/main.ts @@ -22,7 +22,7 @@ import type { App as AppType } from 'vue' const setupPlugins = async (inst: AppType) => { await setupI18n(inst) await setupStore(inst) - setupRouter(inst) + await setupRouter(inst) setupDayjs() setupDirectives(inst) } diff --git a/src/router/README.md b/src/router/README.md index 3a00d4b0..3e1a6ebe 100644 --- a/src/router/README.md +++ b/src/router/README.md @@ -55,6 +55,7 @@ interface RouteMeta { keepAlive?: boolean sameLevel?: boolean dev?: string | string[] + needCancel?: boolean } ``` diff --git a/src/router/helper/routerCopilot.ts b/src/router/helper/routerCopilot.ts index 5c22fa51..8e43b62d 100644 --- a/src/router/helper/routerCopilot.ts +++ b/src/router/helper/routerCopilot.ts @@ -135,5 +135,5 @@ export const redirectRouterToDashboard = (isReplace = true) => { setStorage('menuKey', path) - isReplace ? push(path) : replace(path) + isReplace ? replace(path) : push(path) } diff --git a/src/router/index.ts b/src/router/index.ts index 4d5a4259..b2f16a10 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -10,10 +10,10 @@ import type { RouteRecordRaw, Router } from 'vue-router' export let router: Router -const createVueRouter = () => { +const createVueRouter = async () => { return createRouter({ history: createWebHashHistory(), - routes: constantRoutes() as unknown as RouteRecordRaw[], + routes: (await constantRoutes()) as unknown as RouteRecordRaw[], scrollBehavior: (to) => { scrollViewToTop(to) @@ -26,8 +26,8 @@ const createVueRouter = () => { } // setup router -export const setupRouter = (app: App) => { - router = createVueRouter() +export const setupRouter = async (app: App) => { + router = await createVueRouter() vueRouterRegister(router) useVueRouter() diff --git a/src/router/routes.ts b/src/router/routes.ts index 85a4d68b..f707f8a2 100644 --- a/src/router/routes.ts +++ b/src/router/routes.ts @@ -5,7 +5,7 @@ import { expandRoutes } from '@/router/helper/expandRoutes' const { path } = ROOT_ROUTE -export default () => [ +export default async () => [ { path: '/', name: 'login', diff --git a/src/store/modules/keep-alive/index.ts b/src/store/modules/keep-alive/index.ts index af699bfc..8ed80f0a 100644 --- a/src/store/modules/keep-alive/index.ts +++ b/src/store/modules/keep-alive/index.ts @@ -65,9 +65,13 @@ export const useKeepAlive = defineStore( } } + /** 获取当前缓存队列 */ + const getKeepAliveInclude = () => state.keepAliveInclude + return { ...toRefs(state), setKeepAliveInclude, + getKeepAliveInclude, } }, { diff --git a/src/types/modules/utils.ts b/src/types/modules/utils.ts index 0bef5183..95c06d50 100644 --- a/src/types/modules/utils.ts +++ b/src/types/modules/utils.ts @@ -1,7 +1,13 @@ /* eslint-disable @typescript-eslint/no-explicit-any */ import type CryptoJS from 'crypto-js' -export type CacheType = 'sessionStorage' | 'localStorage' +export type StorageLike = 'sessionStorage' | 'localStorage' + +export type RemoveStorageKey = + | string + | 'all' + | 'all-sessionStorage' + | 'all-localStorage' export type EventListenerOrEventListenerObject = | EventListener @@ -39,7 +45,7 @@ export type WordArray = CryptoJS.lib.WordArray export type CipherParams = CryptoJS.lib.CipherParams -export type AnyFunc = (...args: any[]) => any +export type AnyFC = (...args: any[]) => any export type AnyVoidFunc = (...args: any[]) => void diff --git a/src/utils/cache.ts b/src/utils/cache.ts index 73ed248d..e9cfc13e 100644 --- a/src/utils/cache.ts +++ b/src/utils/cache.ts @@ -11,7 +11,7 @@ /** vue3 项目里建议直接用 vueuse useStorage 方法 */ -import type { CacheType } from '@/types/modules/utils' +import type { StorageLike, RemoveStorageKey } from '@/types/modules/utils' /** * @@ -21,7 +21,7 @@ import type { CacheType } from '@/types/modules/utils' function setStorage( key: string, value: T, - type: CacheType = 'sessionStorage', + type: StorageLike = 'sessionStorage', ) { if (!key) { console.error('Failed to set stored data: key is empty or undefined') @@ -41,12 +41,16 @@ function setStorage( } /** 重载函数 getStorage */ -function getStorage(key: string, storageType: CacheType, defaultValue: T): T +function getStorage( + key: string, + storageType: StorageLike, + defaultValue: T, +): T /** 重载函数 getStorage */ function getStorage( key: string, - storageType?: CacheType, + storageType?: StorageLike, defaultValue?: T, ): T | null @@ -57,7 +61,7 @@ function getStorage( */ function getStorage( key: string, - storageType: CacheType = 'sessionStorage', + storageType: StorageLike = 'sessionStorage', defaultValue?: T, ): T | null { try { @@ -88,8 +92,8 @@ function getStorage( * - all-localStorage: 删除所有 localStorage 缓存值 */ function removeStorage( - key: string | 'all' | 'all-sessionStorage' | 'all-localStorage', - type: CacheType = 'sessionStorage', + key: RemoveStorageKey, + type: StorageLike = 'sessionStorage', ) { switch (key) { case 'all': diff --git a/src/utils/precision.ts b/src/utils/precision.ts index 7162b67a..f1aa922f 100644 --- a/src/utils/precision.ts +++ b/src/utils/precision.ts @@ -32,7 +32,7 @@ import currency from 'currency.js' import { cloneDeep } from 'lodash-es' import type { Options } from 'currency.js' -import type { AnyFunc } from '@/types/modules/utils' +import type { AnyFC } from '@/types/modules/utils' export type CurrencyArguments = string | number | currency @@ -49,7 +49,7 @@ export type OriginalValueType = 'string' | 'number' const basic = ( valueOptions: CurrencyArguments[], dividend: CurrencyArguments, - cb: AnyFunc, + cb: AnyFC, ) => { if (!valueOptions?.length) { return 0 diff --git a/src/utils/vue/call.ts b/src/utils/vue/call.ts index 5f9d1d12..4d530381 100644 --- a/src/utils/vue/call.ts +++ b/src/utils/vue/call.ts @@ -1,5 +1,5 @@ /* eslint-disable @typescript-eslint/no-explicit-any */ -import type { AnyFunc, MaybeArray } from '@/types/modules/utils' +import type { AnyFC, MaybeArray } from '@/types/modules/utils' function call(funcs: MaybeArray<() => void>): void @@ -26,7 +26,7 @@ function call( a4: A4, ): void -function call(funcs: AnyFunc[] | AnyFunc, ...args: A) { +function call(funcs: AnyFC[] | AnyFC, ...args: A) { if (Array.isArray(funcs)) { funcs.forEach((func) => (call as any)(func, ...args)) } else { diff --git a/src/views/axios/index.tsx b/src/views/axios/index.tsx index beffc1a8..c266d3f3 100644 --- a/src/views/axios/index.tsx +++ b/src/views/axios/index.tsx @@ -21,6 +21,7 @@ const Axios = defineComponent({ run: throttleDemoRun, } = useHookPlusRequest(getTypicode, { throttleWait: 1000, + manual: true, }) const { data: debounceDemoValue, @@ -28,6 +29,7 @@ const Axios = defineComponent({ run: debounceDemoRun, } = useHookPlusRequest(getTypicode, { debounceWait: 1000, + manual: true, }) const { data: weatherDemoValue, @@ -35,6 +37,7 @@ const Axios = defineComponent({ run: weatherDemoRun, } = useHookPlusRequest(getWeather, { throttleWait: 1000, + manual: true, }) const { data: demoData, @@ -46,6 +49,9 @@ const Axios = defineComponent({ { url: 'https://jsonplaceholder.typicode.com/todos/1', method: 'get', + cancelConfig: { + needCancel: true, + }, }, { manual: true, diff --git a/src/views/dashboard/index.tsx b/src/views/dashboard/index.tsx index dc795760..b4c42af4 100644 --- a/src/views/dashboard/index.tsx +++ b/src/views/dashboard/index.tsx @@ -10,7 +10,7 @@ import { NH6, } from 'naive-ui' import RayIcon from '@/components/RayIcon/index' -import RayLink from '@/components/RayLink/index' +import RayLink from '@/app-components/app/RayLink/index' const Dashboard = defineComponent({ name: 'RDashboard', diff --git a/src/views/echart/index.tsx b/src/views/echart/index.tsx index c41c67be..c5d33303 100644 --- a/src/views/echart/index.tsx +++ b/src/views/echart/index.tsx @@ -35,6 +35,15 @@ const Echart = defineComponent({ color: 'rgba(180, 180, 180, 0.2)', }, }, + { + name: '数量', + data: [12, 220, 250, 180, 20, 10, 190], + type: 'bar', + showBackground: true, + backgroundStyle: { + color: 'rgba(180, 180, 180, 0.2)', + }, + }, ], } const basePieOptions = { diff --git a/src/views/login/index.tsx b/src/views/login/index.tsx index f6bbd3a4..f377167c 100644 --- a/src/views/login/index.tsx +++ b/src/views/login/index.tsx @@ -16,7 +16,7 @@ import Register from './components/Register/index' import QRCodeSignin from './components/QRCodeSignin/index' import SSOSignin from './components/SSOSignin/index' import RayIcon from '@/components/RayIcon' -import RayLink from '@/components/RayLink/index' +import RayLink from '@/app-components/app/RayLink/index' import ThemeSwitch from '@/layout/components/SiderBar/components/SettingDrawer/components/ThemeSwitch/index' import { useSetting } from '@/store' diff --git a/tsconfig.json b/tsconfig.json index 440efb44..062cb8d9 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -27,16 +27,10 @@ }, "suppressImplicitAnyIndexErrors": true, "typeRoots": ["./src/types/app.d.ts", "./src/types/global.d.ts"], - "types": [ - "@intlify/unplugin-vue-i18n/messages", - "naive-ui/volar", - "vite/client", - "./src/types/global.d.ts" - ], + "types": ["vite/client"], "ignoreDeprecations": "5.0" }, "include": [ - "./src/types/global.d.ts", "vite.config.ts", "vite-plugin/index.ts", "vite-plugin/type.ts", @@ -45,7 +39,6 @@ "vite-env.d.ts", "components.d.ts", "auto-imports.d.ts", - "src/**/*", - "./src/types/app.d.ts" + "src/**/*" ] }