From 4cb7b79768c88a31c60b5dccc67bfe9ad4f98eda Mon Sep 17 00:00:00 2001 From: "415313629@qq.com" <415313629@qq.com> Date: Mon, 9 Oct 2023 14:30:17 +0800 Subject: [PATCH 1/2] chore: Fix ts type error --- src/components/Form/src/BasicForm.vue | 15 ++++++++++----- src/components/Form/src/hooks/useForm.ts | 8 ++++---- src/components/Scrollbar/src/util.ts | 4 ++-- src/logics/mitt/routeChange.ts | 6 ++++-- src/utils/bem.ts | 3 ++- 5 files changed, 22 insertions(+), 14 deletions(-) diff --git a/src/components/Form/src/BasicForm.vue b/src/components/Form/src/BasicForm.vue index a9ee8b7e117..bcc11105777 100644 --- a/src/components/Form/src/BasicForm.vue +++ b/src/components/Form/src/BasicForm.vue @@ -117,14 +117,19 @@ const getSchema = computed((): FormSchema[] => { const schemas: FormSchema[] = unref(schemaRef) || (unref(getProps).schemas as any); for (const schema of schemas) { - const { defaultValue, component, componentProps,isHandleDateDefaultValue = true } = schema; + const { + defaultValue, + component, + componentProps, + isHandleDateDefaultValue = true, + } = schema; // handle date type if (isHandleDateDefaultValue && defaultValue && dateItemType.includes(component)) { - const valueFormat =componentProps ? componentProps['valueFormat'] : null; + const valueFormat = componentProps ? componentProps['valueFormat'] : null; if (!Array.isArray(defaultValue)) { - schema.defaultValue = valueFormat - ? dateUtil(defaultValue).format(valueFormat) - : dateUtil(defaultValue); + schema.defaultValue = valueFormat + ? dateUtil(defaultValue).format(valueFormat) + : dateUtil(defaultValue); } else { const def: any[] = []; defaultValue.forEach((item) => { diff --git a/src/components/Form/src/hooks/useForm.ts b/src/components/Form/src/hooks/useForm.ts index 40f246da09f..9f6855f6177 100644 --- a/src/components/Form/src/hooks/useForm.ts +++ b/src/components/Form/src/hooks/useForm.ts @@ -88,15 +88,15 @@ export function useForm(props?: Props): UseFormReturnType { return unref(formRef)?.getFieldsValue() as T; }, - setFieldsValue: async (values: T) => { + setFieldsValue: async >(values: T) => { const form = await getForm(); - form.setFieldsValue(values); + form.setFieldsValue(values); }, appendSchemaByField: async ( schema: FormSchema | FormSchema[], prefixField: string | undefined, - first: boolean, + first?: boolean, ) => { const form = await getForm(); form.appendSchemaByField(schema, prefixField, first); @@ -107,7 +107,7 @@ export function useForm(props?: Props): UseFormReturnType { return form.submit(); }, - validate: async (nameList?: NamePath[]): Promise => { + validate: async (nameList?: NamePath[] | false): Promise => { const form = await getForm(); return form.validate(nameList); }, diff --git a/src/components/Scrollbar/src/util.ts b/src/components/Scrollbar/src/util.ts index 77694a9089e..c98b0b8ba4c 100644 --- a/src/components/Scrollbar/src/util.ts +++ b/src/components/Scrollbar/src/util.ts @@ -36,11 +36,11 @@ export function renderThumbStyle({ move, size, bar }) { return style; } -function extend(to: T, _from: K): T & K { +function extend(to: T, _from: K): T & K { return Object.assign(to, _from); } -export function toObject(arr: Array): Recordable { +export function toObject(arr: Array): Recordable { const res = {}; for (let i = 0; i < arr.length; i++) { if (arr[i]) { diff --git a/src/logics/mitt/routeChange.ts b/src/logics/mitt/routeChange.ts index a985fe2f55e..ccd777d3675 100644 --- a/src/logics/mitt/routeChange.ts +++ b/src/logics/mitt/routeChange.ts @@ -6,10 +6,12 @@ import { mitt } from '/@/utils/mitt'; import type { RouteLocationNormalized } from 'vue-router'; import { getRawRoute } from '/@/utils'; -const emitter = mitt(); - const key = Symbol(); +const emitter = mitt<{ + [key]: RouteLocationNormalized; +}>(); + let lastChangeTab: RouteLocationNormalized; export function setRouteChange(lastChangeRoute: RouteLocationNormalized) { diff --git a/src/utils/bem.ts b/src/utils/bem.ts index 7dcadbc96f6..53fb0543a2d 100644 --- a/src/utils/bem.ts +++ b/src/utils/bem.ts @@ -14,8 +14,9 @@ function genBem(name: string, mods?: Mods): string { return ` ${name}--${mods}`; } + // ArrayConstructor.isArray(arg: any): arg is any[] if (Array.isArray(mods)) { - return mods.reduce((ret, item) => ret + genBem(name, item), ''); + return (mods as Mod[]).reduce((ret, item) => ret + genBem(name, item), ''); } return Object.keys(mods).reduce((ret, key) => ret + (mods[key] ? genBem(name, key) : ''), ''); From 5876f2eebba8277169187b973c5da40e4cd74a13 Mon Sep 17 00:00:00 2001 From: "415313629@qq.com" <415313629@qq.com> Date: Tue, 10 Oct 2023 12:58:02 +0800 Subject: [PATCH 2/2] feat: add top progress bar --- src/router/guard/index.ts | 5 +++++ src/utils/lib/progress.ts | 16 ++++++++++++++++ 2 files changed, 21 insertions(+) create mode 100644 src/utils/lib/progress.ts diff --git a/src/router/guard/index.ts b/src/router/guard/index.ts index c5677499a5c..0110aef8268 100644 --- a/src/router/guard/index.ts +++ b/src/router/guard/index.ts @@ -12,6 +12,7 @@ import { createStateGuard } from './stateGuard'; import nProgress from 'nprogress'; import projectSetting from '/@/settings/projectSetting'; import { createParamMenuGuard } from './paramMenuGuard'; +import NProgress from '/@/utils/lib/progress'; // Don't change the order of creation export function setupRouterGuard(router: Router) { @@ -52,6 +53,8 @@ function createPageLoadingGuard(router: Router) { const appStore = useAppStoreWithOut(); const { getOpenPageLoading } = useTransitionSetting(); router.beforeEach(async (to) => { + NProgress.start(); + if (!userStore.getToken) { return true; } @@ -67,6 +70,8 @@ function createPageLoadingGuard(router: Router) { return true; }); router.afterEach(async () => { + NProgress.done(); + if (unref(getOpenPageLoading)) { // TODO Looking for a better way // The timer simulates the loading time to prevent flashing too fast, diff --git a/src/utils/lib/progress.ts b/src/utils/lib/progress.ts new file mode 100644 index 00000000000..dfe7adc208c --- /dev/null +++ b/src/utils/lib/progress.ts @@ -0,0 +1,16 @@ +import NProgress from 'nprogress'; +import 'nprogress/nprogress.css'; + +NProgress.configure({ + // Changes the minimum percentage used upon starting + minimum: 0.1, + // Adjust animation settings using easing (a CSS easing string) and speed (in ms) + easing: 'ease', + speed: 500, + // Turn off loading spinner by setting it to false + showSpinner: false, + // Adjust how often to trickle/increment, in ms + trickleSpeed: 200, +}); + +export default NProgress;