@kengic/vue 0.30.1-beta.82 → 0.30.1-beta.85

package/project/types/global.d.ts

@@ -0,0 +1,191 @@
+import type { ComponentPublicInstance, ComponentRenderProxy, FunctionalComponent, VNode, VNodeChild } from 'vue';
+import { RoleEnum } from '../src';
+
+declare global {
+    declare interface Window {
+        _CONFIG: { domianURL: string };
+    }
+
+    // vue
+    declare type VueNode = VNodeChild | JSX.Element;
+
+    export type Writable<T> = {
+        -readonly [P in keyof T]: T[P];
+    };
+
+    declare type Nullable<T> = T | null;
+    declare type NonNullable<T> = T extends null | undefined ? never : T;
+    declare type Recordable<T = any> = Record<string, T>;
+    declare type ReadonlyRecordable<T = any> = {
+        readonly [key: string]: T;
+    };
+    declare type Indexable<T = any> = {
+        [key: string]: T;
+    };
+    declare type DeepPartial<T> = {
+        [P in keyof T]?: DeepPartial<T[P]>;
+    };
+    declare type TimeoutHandle = ReturnType<typeof window.setTimeout>;
+    declare type IntervalHandle = ReturnType<typeof  window.setInterval>;
+
+    declare interface ChangeEvent extends Event {
+        target: HTMLInputElement;
+    }
+
+    declare interface WheelEvent {
+        path?: EventTarget[];
+    }
+
+    interface ImportMetaEnv extends ViteEnv {
+        __: unknown;
+    }
+
+    declare interface ViteEnv {
+        VITE_PORT: number;
+        VITE_USE_PWA: boolean;
+        VITE_PUBLIC_PATH: string;
+        VITE_PROXY: [string, string][];
+        VITE_GLOB_APP_TITLE: string;
+        VITE_GLOB_APP_SHORT_NAME: string;
+        VITE_USE_CDN: boolean;
+        VITE_DROP_CONSOLE: boolean;
+        VITE_BUILD_COMPRESS: 'gzip' | 'brotli' | 'none';
+        VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE: boolean;
+        VITE_LEGACY: boolean;
+        VITE_USE_IMAGEMIN: boolean;
+        VITE_GENERATE_UI: string;
+    }
+
+    declare function parseInt(s: string | number, radix?: number): number;
+
+    declare function parseFloat(string: string | number): number;
+
+    declare interface Fn<T = any, R = T> {
+        (...arg: T[]): R;
+    }
+
+    declare interface PromiseFn<T = any, R = T> {
+        (...arg: T[]): Promise<R>;
+    }
+
+    declare type RefType<T> = T | null;
+
+    declare type LabelValueOptions = {
+        label: string;
+        value: any;
+        [key: string]: string | number | boolean;
+    }[];
+
+    declare type EmitType = (event: string, ...args: any[]) => void;
+
+    declare type TargetContext = '_self' | '_blank';
+
+    declare interface ComponentElRef<T extends HTMLElement = HTMLDivElement> {
+        $el: T;
+    }
+
+    declare type ComponentRef<T extends HTMLElement = HTMLDivElement> = ComponentElRef<T> | null;
+
+    declare type ElRef<T extends HTMLElement = HTMLDivElement> = Nullable<T>;
+
+    declare const __APP_INFO__: {
+        pkg: {
+            name: string;
+            version: string;
+            dependencies: Recordable<string>;
+            devDependencies: Recordable<string>;
+        };
+        lastBuildTime: string;
+    };
+    declare const __ENV__: ImportMetaEnv & {
+        MODE: string;
+        DEV: boolean;
+        PROD: boolean;
+    };
+
+    namespace JSX {
+        // tslint:disable no-empty-interface
+        type Element = VNode;
+        // tslint:disable no-empty-interface
+        type ElementClass = ComponentRenderProxy;
+
+        interface ElementAttributesProperty {
+            $props: any;
+        }
+
+        interface IntrinsicElements {
+            [elem: string]: any;
+        }
+
+        interface IntrinsicAttributes {
+            [elem: string]: any;
+        }
+    }
+}
+
+declare module 'vue' {
+    export type JSXComponent<Props = any> = { new (): ComponentPublicInstance<Props> } | FunctionalComponent<Props>;
+}
+
+declare module '*.vue' {
+    import { DefineComponent } from 'vue';
+    const Component: DefineComponent<{}, {}, any>;
+    export default Component;
+}
+
+declare module 'ant-design-vue/dist/theme';
+
+declare module 'ant-design-vue/es/locale/*' {
+    import { Locale } from 'ant-design-vue/types/locale-provider';
+    const locale: Locale & ReadonlyRecordable;
+    export default locale as Locale & ReadonlyRecordable;
+}
+
+declare module 'virtual:*' {
+    const result: any;
+    export default result;
+}
+
+declare module 'vue-router' {
+    interface RouteMeta extends Record<string | number | symbol, unknown> {
+        orderNo?: number;
+        // title
+        title: string;
+        // dynamic router level.
+        dynamicLevel?: number;
+        // dynamic router real route path (For performance).
+        realPath?: string;
+        // Whether to ignore permissions
+        ignoreAuth?: boolean;
+        // role info
+        roles?: RoleEnum[];
+        // Whether not to cache
+        ignoreKeepAlive?: boolean;
+        // Is it fixed on tab
+        affix?: boolean;
+        // icon on tab
+        icon?: string;
+        frameSrc?: string;
+        // current page transition
+        transitionName?: string;
+        // Whether the route has been dynamically added
+        hideBreadcrumb?: boolean;
+        // Hide submenu
+        hideChildrenInMenu?: boolean;
+        // Carrying parameters
+        carryParam?: boolean;
+        // Used internally to mark single-level menus
+        single?: boolean;
+        // Currently active menu
+        currentActiveMenu?: string;
+        // Never show in tab
+        hideTab?: boolean;
+        // Never show in menu
+        hideMenu?: boolean;
+        isLink?: boolean;
+        // only build for Menu
+        ignoreRoute?: boolean;
+        // Hide path for children
+        hidePathForChildren?: boolean;
+    }
+}

package/project/types/store.ts

@@ -0,0 +1,60 @@
+import { RoleInfo } from '../src/api/sys/model/userModel';
+import { ErrorTypeEnum } from '../src/enums/exceptionEnum';
+import { MenuModeEnum, MenuTypeEnum } from '../src/enums/menuEnum';
+
+// Lock screen information
+export interface LockInfo {
+    // Password required
+    pwd?: string | undefined;
+    // Is it locked?
+    isLock?: boolean;
+}
+
+// Error-log information
+export interface ErrorLogInfo {
+    // Type of error
+    type: ErrorTypeEnum;
+    // Error file
+    file: string;
+    // Error name
+    name?: string;
+    // Error message
+    message: string;
+    // Error stack
+    stack?: string;
+    // Error detail
+    detail: string;
+    // Error url
+    url: string;
+    // Error time
+    time?: string;
+}
+
+export interface UserInfo {
+    id: string | number;
+    userId: string | number;
+    username: string;
+    realname: string;
+    avatar: string;
+    desc?: string;
+    homePath?: string;
+    phone?: string;
+    tenantid?: string | number;
+    roles: RoleInfo[];
+    orgCode?: string;
+}
+
+export interface LoginInfo {
+    multi_depart?: string | number;
+    userInfo?: object;
+    departs?: [];
+    tenantList?: [];
+    isLogin?: boolean;
+}
+
+export interface BeforeMiniState {
+    menuCollapsed?: boolean;
+    menuSplit?: boolean;
+    menuMode?: MenuModeEnum;
+    menuType?: MenuTypeEnum;
+}

package/project/types/utils.ts

@@ -0,0 +1,5 @@
+import type { ComputedRef, Ref } from 'vue';
+
+export type DynamicProps<T> = {
+    [P in keyof T]: Ref<T[P]> | T[P] | ComputedRef<T[P]>;
+};

package/service/http-client.ts

@@ -0,0 +1,257 @@
+import { doKgWorkStation, setHttpClient } from '@kengic/core.react';
+import { AxiosInstance, type AxiosRequestConfig, AxiosRequestHeaders } from 'axios';
+import dayjs from 'dayjs';
+import { isObjectLike } from 'lodash-es';
+import { useKgWarehouse } from '../component';
+import { useKg } from '../config';
+import { KG } from '../model';
+import { UploadFileCallBack, UploadFileParams } from '../project/types/axios';
+import { KgUtil } from '../util';
+
+interface IHttpClient {
+    axiosInstance: AxiosInstance;
+    options: { requestOptions?: IRequestOption } & AxiosRequestConfig;
+    request<T = any>(config: IRequestConfig, options?: IRequestOption): Promise<T>;
+    uploadFile<T = any>(config: AxiosRequestConfig, params: UploadFileParams, callback?: UploadFileCallBack): Promise<T>;
+}
+
+let _httpClient: IHttpClient | null = null;
+
+/**
+ * 设置 httpClient 实例.
+ */
+function kgConfigHttpClient(httpClient: IHttpClient | null): void {
+    // 设置默认选项
+    if (httpClient?.options?.requestOptions) {
+        httpClient.options.requestOptions.formatDate = false;
+    }
+
+    if (httpClient) {
+        httpClient.request = new Proxy(httpClient.request, {
+            apply(target: <T = any>(config: IRequestConfig, options?: IRequestOption) => Promise<T>, thisArg: any, argArray: any): any {
+                const kg = useKg();
+
+                const config = argArray[0] as IRequestConfig;
+                const options = argArray[1] as IRequestOption | undefined;
+
+                // 使用模拟数据, 直接返回模拟数据,
+                if (options?.mock !== undefined) {
+                    return new Promise((resolve) => resolve(options?.mock));
+                }
+
+                if (!config.headers) {
+                    config.headers = {} as AxiosRequestHeaders;
+                }
+
+                // 参数,
+                const params = (() => {
+                    let params: Record<string, any> = {};
+
+                    switch (config.method) {
+                        case 'GET': {
+                            params = config.params ?? {};
+                            break;
+                        }
+
+                        case 'PUT':
+                        case 'POST': {
+                            if (!config.data && config.params) {
+                                params = config.params;
+                            } else if (config.data && !config.params) {
+                                params = config.data;
+                            } else if (config.data && config.params && isObjectLike(config.params) && Object.keys(config.params).length > 0) {
+                                params = { ...config.params, ...config.data };
+                            }
+                            break;
+                        }
+
+                        default: {
+                            break;
+                        }
+                    }
+
+                    return params ?? {};
+                })();
+
+                config.headers = {
+                    ...(config.headers ?? {}),
+                    [KG.HTTP_HEADER__KG_PAGE_INDEX]: params.pageNo,
+                    [KG.HTTP_HEADER__KG_PAGE_SIZE]: params.pageSize,
+                };
+
+                //region 启用高级查询
+                //----------------------------------------------------------------------------------------------------
+                if (options?.dynamicQueryOperatorModel) {
+                    if (!options?.dayjs) {
+                        throw new Error('参数 options.dynamicQueryOperators 不为空, 所以参数 options.dayjs 也不能为空.');
+                    }
+
+                    const { whereSql, whereSql01, whereSql02, whereSql03, whereSql04, whereSql05, orderBySql, operatorObjectJSON, whereObjectJSON } = KgUtil.getQueryHeaders({
+                        $dayjs: options?.dayjs,
+                        dynamicQueryOperatorModel: options?.dynamicQueryOperatorModel,
+                        formID: options?.dynamicQueryFormID ?? null,
+                        kgSearchFormID: options?.dynamicQueryKgSearchFormID ?? null,
+                        params: params,
+                    });
+
+                    config.headers = {
+                        ...(config.headers ?? {}),
+                        [KG.HTTP_HEADER__KG_FORM_ID]: options?.dynamicQueryFormID ?? '',
+                        [KG.HTTP_HEADER__KG_IS_DYNAMIC_QUERY]: true,
+                        [KG.HTTP_HEADER__KG_QUERY_OBJECT]: '{}',
+                        [KG.HTTP_HEADER__KG_QUERY_OPERATOR_OBJECT]: operatorObjectJSON,
+                        [KG.HTTP_HEADER__KG_QUERY_ORDER_BY_SQL]: orderBySql,
+                        [KG.HTTP_HEADER__KG_QUERY_WHERE_OBJECT]: whereObjectJSON,
+                        [KG.HTTP_HEADER__KG_QUERY_WHERE_SQL]: whereSql,
+                        [KG.HTTP_HEADER__KG_QUERY_WHERE_SQL_01]: whereSql01,
+                        [KG.HTTP_HEADER__KG_QUERY_WHERE_SQL_02]: whereSql02,
+                        [KG.HTTP_HEADER__KG_QUERY_WHERE_SQL_03]: whereSql03,
+                        [KG.HTTP_HEADER__KG_QUERY_WHERE_SQL_04]: whereSql04,
+                        [KG.HTTP_HEADER__KG_QUERY_WHERE_SQL_05]: whereSql05,
+                    };
+                }
+                //----------------------------------------------------------------------------------------------------
+                //endregion
+
+                // 仓库编号
+                if (kg.option.KgWarehouse?.on !== false) {
+                    const warehouseId = useKgWarehouse().warehouse.value?.whId ?? '';
+                    config.headers[KG.HTTP_HEADER__KG_WAREHOUSE] = warehouseId;
+                }
+
+                // 工作站/工作区
+                if (kg.option.KgStation?.isOn !== false) {
+                    const devcod = doKgWorkStation().workStation?.devcod ?? '';
+                    config.headers[KG.HTTP_HEADER__KG_WORK_STATION] = devcod;
+
+                    const hmewrkare = doKgWorkStation().workStationArea?.wrkare ?? '';
+                    config.headers[KG.HTTP_HEADER__KG_WORK_AREA] = hmewrkare;
+                }
+
+                // 数据库的类型,
+                config.headers[KG.HTTP_HEADER__KG_DB_TYPE] = kg.option.dbType!;
+
+                // 编码解码防止乱码,
+                Object.keys(config.headers).forEach((key) => {
+                    config.headers![key] = encodeURIComponent(decodeURIComponent(String(config.headers![key] ?? '')));
+                });
+
+                return target.apply(thisArg, [config, options]);
+            },
+        });
+    }
+
+    _httpClient = httpClient;
+
+    setHttpClient(httpClient);
+}
+
+/**
+ * 获取 httpClient 实例.
+ */
+function httpClient(): IHttpClient {
+    if (!_httpClient) {
+        throw new Error('没有设置 httpClient 实例.');
+    }
+
+    return _httpClient;
+}
+
+interface IRequestConfig<P = Record<string, any>, D = Record<string, any>> extends AxiosRequestConfig<D> {
+    params?: P;
+}
+
+interface IRequestOption {
+    /**
+     * 接口地址，如果保留为空，则使用默认值
+     */
+    apiUrl?: string;
+
+    /**
+     * dayjs 实例, 必须跟 {@link IRequestOption.dynamicQueryOperatorModel} 同时传值. 即如果参数 {@link IRequestOption.dynamicQueryOperatorModel} 不为空, 则参数 {@link IRequestOption.dayjs} 也必须不为空.
+     */
+    dayjs?: typeof dayjs;
+
+    /**
+     * <p>高级查询时, 对应的界面标识.</p>
+     */
+    dynamicQueryFormID?: string;
+
+    /**
+     * <p>高级查询时, 对应的查询条件界面标识.</p>
+     */
+    dynamicQueryKgSearchFormID?: string;
+
+    /**
+     * <p>高级查询时, 各个请求参数的高级查询操作符.</p>
+     * <p>如果该参数不为空, 表示该请求启用了高级查询.</p>
+     * <p>其中的 key 表示参数名, 其中的 value 表示该参数的高级查询操作符(>,=,<...).</p>
+     */
+    dynamicQueryOperatorModel?: Record<string, string>;
+
+    /**
+     * 错误消息提示类型
+     */
+    errorMessageMode?: 'none' | 'modal' | 'message' | undefined;
+
+    /**
+     * 格式化请求参数时间
+     */
+    formatDate?: boolean;
+
+    ignoreCancelToken?: boolean;
+
+    /**
+     * 是否返回本地响应头,需要获取响应头时使用此属性
+     */
+    isReturnNativeResponse?: boolean;
+
+    /**
+     * 是否处理请求结果
+     */
+    isTransformResponse?: boolean;
+
+    /**
+     * 将请求参数拼接到url
+     */
+    joinParamsToUrl?: boolean;
+
+    /**
+     * Whether to join url
+     */
+    joinPrefix?: boolean;
+
+    /**
+     * 是否添加时间戳
+     */
+    joinTime?: boolean;
+
+    /**
+     * <p>模拟数据.</p>
+     * <ul>
+     *     <li>如果是为 undefined, 则是会发起请求,</li>
+     *     <li>如果不为 undefined, 则不会发起请求, 而是直接返回该模拟数据,</li>
+     * </ul>
+     */
+    mock?: any;
+
+    /**
+     * 成功消息提示类型
+     */
+    successMessageMode?: 'none' | 'success' | 'error' | undefined;
+
+    /**
+     * 请求拼接路径
+     */
+    urlPrefix?: string;
+
+    /**
+     * 是否在标头中发送令牌
+     */
+    withToken?: boolean;
+}
+
+/** @deprecated 已弃用, 请使用 {@link IRequestOption} */
+type IRequestOptions = IRequestOption;
+
+export { kgConfigHttpClient, httpClient, type IRequestConfig, type IRequestOption, type IRequestOptions };

package/type/env.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="vite/client" />
+
+declare module '*.vue' {
+    import { DefineComponent } from 'vue';
+    const component: DefineComponent<{}, {}, any>;
+    export default component;
+}

package/type/index.d.ts

@@ -0,0 +1 @@
+export type KgAny = any;

package/util/ant-design-vue.ts

@@ -0,0 +1,146 @@
+import { ColProps } from 'ant-design-vue';
+import { VueNode } from 'ant-design-vue/es/_util/type';
+import { ButtonHTMLType, LegacyButtonType } from 'ant-design-vue/es/button/buttonTypes';
+import { SizeType } from 'ant-design-vue/es/config-provider';
+import { Rule } from 'ant-design-vue/es/form';
+import { RequiredMark } from 'ant-design-vue/es/form/Form';
+import { Callbacks, ValidateMessages } from 'ant-design-vue/es/form/interface';
+import { ButtonShape, ButtonType } from 'ant-design-vue/lib/button';
+import { CSSProperties, ExtractPropTypes, HTMLAttributes, PropType } from 'vue';
+
+// 拷贝自 ant-design-vue/components/form/Form.tsx, 解决类型问题
+export const formProps = () => ({
+    layout: String as PropType<'horizontal' | 'inline' | 'vertical'>,
+    labelCol: { type: Object as PropType<ColProps & HTMLAttributes> },
+    wrapperCol: { type: Object as PropType<ColProps & HTMLAttributes> },
+    colon: { type: Boolean, default: undefined },
+    labelAlign: String as PropType<'left' | 'right'>,
+    labelWrap: { type: Boolean, default: undefined },
+    prefixCls: String,
+    requiredMark: { type: [String, Boolean] as PropType<RequiredMark | ''>, default: undefined },
+    model: Object as PropType<Object>,
+    rules: { type: Object as PropType<{ [k: string]: Rule[] | Rule }> },
+    validateMessages: {
+        type: Object as PropType<ValidateMessages>,
+        default: undefined,
+    },
+    validateOnRuleChange: { type: Boolean, default: undefined },
+    scrollToFirstError: { type: [Boolean, Object] as PropType<boolean | any> },
+    onSubmit: Function as PropType<(e: Event) => void>,
+    name: String,
+    validateTrigger: { type: [String, Array] as PropType<string | string[]> },
+    size: { type: String as PropType<SizeType> },
+    onValuesChange: { type: Function as PropType<Callbacks['onValuesChange']> },
+    onFieldsChange: { type: Function as PropType<Callbacks['onFieldsChange']> },
+    onFinish: { type: Function as PropType<Callbacks['onFinish']> },
+    onFinishFailed: { type: Function as PropType<Callbacks['onFinishFailed']> },
+    onValidate: { type: Function as PropType<Callbacks['onValidate']> },
+});
+
+type getContainerFunc = () => HTMLElement;
+
+// 拷贝自 components/button/buttonTypes.ts, 解决类型问题
+const AButtonProps = {
+    prefixCls: String,
+    type: String as PropType<ButtonType>,
+    htmlType: { type: String as PropType<ButtonHTMLType>, default: 'button' },
+    shape: { type: String as PropType<ButtonShape> },
+    size: {
+        type: String as PropType<SizeType>,
+    },
+    loading: {
+        type: [Boolean, Object] as PropType<boolean | { delay?: number }>,
+        default: (): boolean | { delay?: number } => false,
+    },
+    disabled: { type: Boolean, default: undefined },
+    ghost: { type: Boolean, default: undefined },
+    block: { type: Boolean, default: undefined },
+    danger: { type: Boolean, default: undefined },
+    icon: [Object, String] as PropType<any>,
+    href: String,
+    target: String,
+    title: String,
+    onClick: {
+        type: Function as PropType<(event: MouseEvent) => void>,
+    },
+    onMouseDown: {
+        type: Function as PropType<(event: MouseEvent) => void>,
+    },
+};
+
+// 拷贝自 ant-design-vue/components/modal/Modal.tsx, 解决类型问题
+export const modalProps = () => ({
+    prefixCls: String,
+    visible: { type: Boolean, default: undefined },
+    confirmLoading: { type: Boolean, default: undefined },
+    title: String as PropType<any>,
+    closable: { type: Boolean, default: undefined },
+    closeIcon: [Object, String] as PropType<any>,
+    onOk: Function as PropType<(e: MouseEvent) => void>,
+    onCancel: Function as PropType<(e: MouseEvent) => void>,
+    'onUpdate:visible': Function as PropType<(visible: boolean) => void>,
+    onChange: Function as PropType<(visible: boolean) => void>,
+    afterClose: Function as PropType<() => void>,
+    centered: { type: Boolean, default: undefined },
+    width: [String, Number],
+    footer: [Object, String] as PropType<any>,
+    okText: [Object, String] as PropType<any>,
+    okType: String as PropType<LegacyButtonType>,
+    cancelText: [Object, String] as PropType<any>,
+    icon: [Object, String] as PropType<any>,
+    maskClosable: { type: Boolean, default: undefined },
+    forceRender: { type: Boolean, default: undefined },
+    okButtonProps: Object as PropType<Partial<ExtractPropTypes<typeof AButtonProps>>>,
+    cancelButtonProps: Object as PropType<Partial<ExtractPropTypes<typeof AButtonProps>>>,
+    destroyOnClose: { type: Boolean, default: undefined },
+    wrapClassName: String,
+    maskTransitionName: String,
+    transitionName: String,
+    getContainer: {
+        type: [String, Function, Boolean, Object] as PropType<string | HTMLElement | getContainerFunc | false>,
+        default: undefined,
+    },
+    zIndex: Number,
+    // @ts-ignore
+    bodyStyle: { type: Object as PropType<CSSProperties>, default: undefined as CSSProperties },
+    // @ts-ignore
+    maskStyle: { type: Object as PropType<CSSProperties>, default: undefined as CSSProperties },
+    mask: { type: Boolean, default: undefined },
+    keyboard: { type: Boolean, default: undefined },
+    wrapProps: Object,
+    focusTriggerAfterClose: { type: Boolean, default: undefined },
+    modalRender: Function as PropType<(arg: { originVNode: VueNode }) => VueNode>,
+});
+
+// components/vc-image/src/Image.tsx
+// 拷贝自 components/vc-image/src/Image.tsx, 解决类型问题
+export const imageProps = () => ({
+    src: String,
+    wrapperClassName: String,
+    wrapperStyle: { type: Object as PropType<CSSProperties>, default: undefined },
+    rootClassName: String,
+    prefixCls: String,
+    previewPrefixCls: String,
+    previewMask: {
+        type: [Boolean, Function] as PropType<false | (() => any)>,
+        default: undefined,
+    },
+    placeholder: String,
+    fallback: String,
+    preview: {
+        type: [Boolean, Object] as PropType<boolean | any>,
+        default: true as boolean | any,
+    },
+    onClick: {
+        type: Function as PropType<(e: MouseEvent) => void>,
+    },
+    onError: {
+        type: Function as PropType<(event: Event | string, source?: string, lineno?: number, colno?: number, error?: Error) => any>,
+    },
+
+    // 下面是拷贝过来之后, 自己额外添加的属性,
+    id: String,
+    width: [String, Number],
+    height: [String, Number],
+    style: String,
+});

package/util/event.util.ts

@@ -0,0 +1,24 @@
+import { IKgEventListener, IRemoveEventListener, kgRemoveEventListener, onEventFactory } from '@kengic/core.core';
+import { tryOnBeforeUnmount } from '@vueuse/core';
+
+/**
+ * <p>构造事件监听.</p>
+ * <p>在 {@link onEventFactory} 的基础上, 支持在组件卸载时自动取消监听.</p>
+ *
+ * @param param.event 事件名称.
+ * @param param.id 唯一标识.
+ * @param param.addEventListener 添加事件监听.
+ * @param param.removeEventListener 移除事件监听.
+ */
+export function kgOnEventFactory<E extends string, L extends IKgEventListener = any>(param: {
+    event: E;
+    eventListeners: Record<string, Record<E, Array<L>>> | any;
+    id?: string | undefined;
+}): (listener: L, isOnce?: boolean) => IRemoveEventListener {
+    const addEventListener = onEventFactory(param);
+
+    return (listener: L, isOnce?: boolean) => {
+        tryOnBeforeUnmount(() => kgRemoveEventListener<E, L>({ ...param, listener: listener }));
+        return addEventListener(listener, isOnce);
+    };
+}