@_tc/template-core 0.0.1-bate.36 → 0.0.1-bate.37

package/fe/frontend/widgets/defaultPages/Schema/components/CallCom/DetailPanel.js

@@ -0,0 +1,94 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getText } from '../../../../../widgets/common/language';
+import { Drawer } from '../../../../../../packages/ui/react/components';
+import { memo, useMemo, useState } from 'react';
+import { request } from '../../../../../widgets/common/request';
+import useExecuteOnce from '../../../../../../packages/ui/react/hooks/useExecuteOnce';
+import { eventsInfo } from '../../data/eventInfo';
+import useComConfig from '../../hooks/useComConfig';
+import { schemaEventBus } from '../../stores/schemaEventBus';
+import { handlingRequestErrors } from '../../utils/fetchErrorShow';
+import { merge } from '../../utils/permissions';
+const EMPTY_TEXT = '-';
+const isEmptyValue = (value) => value === undefined || value === null || value === '';
+const stringifyValue = (value) => {
+    if (isEmptyValue(value))
+        return EMPTY_TEXT;
+    if (typeof value === 'object')
+        return JSON.stringify(value);
+    return String(value);
+};
+const getOptionLabel = (options, value) => {
+    if (!Array.isArray(options))
+        return undefined;
+    const matchedOption = options.find((option) => {
+        if (!option || typeof option !== 'object')
+            return false;
+        return option.value === value;
+    });
+    if (!matchedOption || typeof matchedOption !== 'object')
+        return undefined;
+    const label = matchedOption.label;
+    return label ?? stringifyValue(value);
+};
+const formatValue = (value, fieldInfo) => {
+    if (isEmptyValue(value))
+        return EMPTY_TEXT;
+    const option = fieldInfo.option;
+    const optionLabel = getOptionLabel(option?.options ?? option?.enumList, value);
+    if (optionLabel !== undefined)
+        return optionLabel;
+    if (Array.isArray(value)) {
+        if (value.length === 0)
+            return EMPTY_TEXT;
+        return value
+            .map((item) => {
+            return stringifyValue(item);
+        })
+            .join(', ');
+    }
+    if (typeof value === 'boolean')
+        return value ? getText('是') : getText('否');
+    return stringifyValue(value);
+};
+const generateFields = (schema, data) => {
+    if (!schema?.properties)
+        return [];
+    return Object.keys(schema.properties)
+        .reduce((fields, key) => {
+        const fieldInfo = schema.properties[key];
+        if (!fieldInfo.option || fieldInfo.option.visible === false)
+            return fields;
+        fields.push({
+            key,
+            label: getText(fieldInfo.label),
+            value: formatValue(data?.[key], fieldInfo),
+            level: fieldInfo.level ?? 10,
+        });
+        return fields;
+    }, [])
+        .sort((a, b) => a.level - b.level);
+};
+const DetailPanel = memo((props) => {
+    const [open, setOpen] = useState(true);
+    const [data, setData] = useState(props.data);
+    const { config, schema, api } = useComConfig({ comName: props.comName });
+    const fields = useMemo(() => generateFields(schema, data), [data, schema]);
+    useExecuteOnce(async () => {
+        const fetchKey = config?.fetchKey;
+        if (fetchKey) {
+            const params = {
+                [fetchKey]: props.data[fetchKey],
+            };
+            const { url: furl = api, method = 'get' } = config.fetchConfig ?? {};
+            const res = await handlingRequestErrors(request[method](furl, params));
+            if (res.data.code === 0)
+                setData(res.data.data);
+        }
+    }, { executionPhase: 'mount' });
+    return (_jsx("div", { className: "detail-panel", children: _jsx(Drawer, { title: getText(config?.title ?? ''), open: open, onClose: () => {
+                setOpen(false);
+                schemaEventBus.getState().emitCom({ type: merge(eventsInfo.closeCom) });
+            }, children: fields.length > 0 ? (_jsx("div", { className: "grid grid-cols-1 gap-x-6 gap-y-4 sm:grid-cols-2", children: fields.map((field) => (_jsxs("div", { className: "min-w-0 border-b border-border pb-3", children: [_jsx("div", { className: "mb-1 text-xs text-muted-foreground", children: field.label }), _jsx("div", { className: "break-words text-sm leading-6 text-foreground", children: field.value })] }, field.key))) })) : (_jsx("div", { className: "py-8 text-center text-sm text-muted-foreground", children: getText('暂无数据') })) }) }));
+});
+export default DetailPanel;

package/fe/frontend/widgets/defaultPages/Schema/components/CallCom/PopFrom.d.ts

@@ -0,0 +1,13 @@
+import type { CallComNames, ComponentConfig, SchemaDefaultValue } from '../../schemaType';
+type PopFormComName = keyof ComponentConfig;
+export interface PopFormValue {
+    comName: PopFormComName;
+    data?: SchemaDefaultValue;
+}
+export interface PopFormProps {
+    data: SchemaDefaultValue;
+    comName: CallComNames;
+}
+declare const PopForm: import("react").MemoExoticComponent<(props: PopFormProps) => import("react/jsx-runtime").JSX.Element>;
+export default PopForm;
+//# sourceMappingURL=PopFrom.d.ts.map

package/fe/frontend/widgets/defaultPages/Schema/components/CallCom/PopFrom.js

@@ -0,0 +1,109 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { getText } from '../../../../../widgets/common/language';
+import { Modal, SchemaForm } from '../../../../../../packages/ui/react/components';
+import { post, put, request } from '../../../../../widgets/common/request';
+import useExecuteOnce from '../../../../../../packages/ui/react/hooks/useExecuteOnce';
+import { memo, useCallback, useMemo, useRef, useState } from 'react';
+import { eventsInfo } from '../../data/eventInfo';
+import useComConfig from '../../hooks/useComConfig';
+import { schemaEventBus } from '../../stores/schemaEventBus';
+import { handlingRequestErrors } from '../../utils/fetchErrorShow';
+import { merge } from '../../utils/permissions';
+import { createAjvValidator } from '../../utils/validator';
+const generateSchemas = (schema) => {
+    if (!schema?.properties)
+        return [];
+    return Object.keys(schema.properties).reduce((schemas, key) => {
+        const fieldInfo = schema.properties[key];
+        const option = fieldInfo.option;
+        if (!option || option.visible === false)
+            return schemas;
+        const { comType = 'input', default: _defaultValue, visible: _visible, ...fieldProps } = option;
+        schemas.push({
+            key,
+            label: getText(fieldInfo.label),
+            type: comType,
+            required: schema.required?.includes(key),
+            rules: [
+                ...(schema.required?.includes(key)
+                    ? [{ required: true, message: `请输入${getText(fieldInfo.label)}` }]
+                    : []),
+                {
+                    validator: createAjvValidator(fieldInfo),
+                },
+            ],
+            fieldProps: {
+                ...fieldProps,
+                ...(comType === 'select'
+                    ? {
+                        getPopupContainer: 'parent',
+                    }
+                    : []),
+            },
+        });
+        return schemas;
+    }, []);
+};
+const generateDefaultValue = (schema, data) => {
+    const defaultValue = { ...(data ?? {}) };
+    if (!schema?.properties)
+        return defaultValue;
+    Object.keys(schema.properties).forEach((key) => {
+        const defaultFieldValue = schema.properties[key].option?.default;
+        if (typeof defaultFieldValue !== 'undefined' && typeof defaultValue[key] === 'undefined') {
+            defaultValue[key] = defaultFieldValue;
+        }
+    });
+    return defaultValue;
+};
+const PopForm = memo((props) => {
+    const [open, setOpen] = useState(true);
+    const [submitting, setSubmitting] = useState(false);
+    const { schema, config, api } = useComConfig({ comName: props.comName });
+    const formRef = useRef(null);
+    const [loading, setLoading] = useState(false);
+    const schemas = useMemo(() => {
+        return generateSchemas(schema);
+    }, [schema]);
+    const closed = submitting
+        ? undefined
+        : () => {
+            schemaEventBus.getState().emitCom({ type: merge(eventsInfo.closeCom) });
+            setOpen(false);
+        };
+    const defaultValue = useMemo(() => generateDefaultValue(schema, props.data), [schema, props.data]);
+    useExecuteOnce(async () => {
+        if (props.comName === 'editForm' && 'fetchKey' in config) {
+            const { fetchKey } = config;
+            const params = {
+                [fetchKey]: props.data[fetchKey],
+            };
+            const { url = api, method = 'get' } = config?.fetchConfig ?? {};
+            setLoading(true);
+            const res = await handlingRequestErrors(request[method](url, params));
+            res.data.code === 0 && formRef.current?.setFieldsValue(res.data.data);
+            setLoading(false);
+        }
+    }, { executionPhase: 'mount' });
+    const handleSubmit = useCallback(async (v) => {
+        setSubmitting(true);
+        let fetchFn = put;
+        if (props.comName === 'createForm') {
+            fetchFn = post;
+        }
+        try {
+            const res = await handlingRequestErrors(fetchFn(api, v));
+            if (res.data.code === 0) {
+                schemaEventBus.getState().emitCom({
+                    type: merge(eventsInfo.closeCom, eventsInfo.initTable, props.comName === 'createForm' ? eventsInfo.resetSearch : eventsInfo.none),
+                });
+            }
+        }
+        finally {
+            setSubmitting(false);
+        }
+    }, [api, props.comName]);
+    return (_jsx(Modal, { open: open, onClose: closed, title: getText(config?.title ?? ''), width: 640, maskClosable: !submitting, children: _jsx(SchemaForm, { schemas: schemas, initialValues: defaultValue, getForm: (f) => (formRef.current = f), onFinish: handleSubmit, onCancel: closed, buttonClassName: "justify-end", submitText: config?.saveBtnText, submitButtonProps: { loading: submitting }, cancelButtonProps: { disabled: submitting } }, `${String(props?.comName ?? '')}-${JSON.stringify(defaultValue)}`) }));
+});
+PopForm.displayName = 'PopForm';
+export default PopForm;

package/fe/frontend/widgets/defaultPages/Schema/components/CallCom/data.d.ts

@@ -0,0 +1,3 @@
+import { CallComponent } from '../../schemaType';
+export declare const components: CallComponent<any>;
+//# sourceMappingURL=data.d.ts.map

package/fe/frontend/widgets/defaultPages/Schema/components/CallCom/data.js

@@ -0,0 +1,6 @@
+import { lazy } from 'react';
+export const components = {
+    editForm: lazy(() => import('./PopFrom')),
+    createForm: lazy(() => import('./PopFrom')),
+    detailPanel: lazy(() => import('./DetailPanel')),
+};

package/fe/frontend/widgets/defaultPages/Schema/components/SchemaSearch/index.d.ts

@@ -0,0 +1,3 @@
+declare const SchemaSearch: import("react").MemoExoticComponent<() => import("react/jsx-runtime").JSX.Element>;
+export default SchemaSearch;
+//# sourceMappingURL=index.d.ts.map

package/fe/frontend/widgets/defaultPages/Schema/components/SchemaSearch/index.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { getText } from '../../../../../widgets/common/language';
+import { filterEmpty } from '../../../../../../packages/common/index.js';
+import { TableSearch } from '../../../../../../packages/ui/react/components';
+import useInit from '../../../../../../packages/ui/react/hooks/useInit';
+import { memo, useState } from 'react';
+import { schemaEventBus } from '../../stores/schemaEventBus';
+import { useSchemaStore } from '../../stores/schemaStore';
+const generateSchemas = (config) => {
+    const keys = Object.keys(config);
+    const schemas = [];
+    let defaultValue = undefined;
+    keys.forEach((k) => {
+        const fieldInfo = config[k];
+        if (fieldInfo.option) {
+            const { comType = 'input', default: defaultFieldValue, ...fieldProps } = fieldInfo.option;
+            if (typeof defaultFieldValue !== 'undefined') {
+                if (!defaultValue) {
+                    defaultValue = {};
+                }
+                defaultValue[k] = defaultFieldValue;
+            }
+            schemas.push({
+                label: getText(fieldInfo.label),
+                key: k,
+                type: comType,
+                fieldProps,
+            });
+        }
+    });
+    return { schemas, defaultValue };
+};
+const SchemaSearch = memo(() => {
+    const schema = useSchemaStore((s) => s.searchSchema);
+    const [schemas, setSchemas] = useState([]);
+    const [defaultValue, setSchemaDefaultValue] = useState(undefined);
+    useInit(() => {
+        const { schemas, defaultValue } = generateSchemas(schema.properties);
+        setSchemas(schemas);
+        setSchemaDefaultValue(defaultValue);
+    });
+    const tsProps = {
+        schemas,
+        defaultValue,
+        onSearch(values) {
+            schemaEventBus.getState().emitSearch(filterEmpty(values));
+        },
+        onReset() {
+            schemaEventBus.getState().emitSearch(undefined);
+        },
+        renderActionBtnArea: () => {
+            return undefined;
+        },
+    };
+    return (_jsx("div", { className: "schema-search", children: _jsx(TableSearch, { ...tsProps }) }));
+});
+SchemaSearch.displayName = 'SchemaSearch';
+export default SchemaSearch;

package/fe/frontend/widgets/defaultPages/Schema/components/SchemaTable/index.d.ts

@@ -0,0 +1,11 @@
+import { Ref } from 'react';
+import { SchemaDefaultValue } from '../../schemaType';
+export type SchemaTableRef = {
+    initData: (query?: SchemaDefaultValue) => Promise<void>;
+};
+export interface SchemaTableProps {
+    ref?: Ref<SchemaTableRef>;
+}
+declare const SchemaTable: import("react").MemoExoticComponent<({ ref }: SchemaTableProps) => import("react/jsx-runtime").JSX.Element>;
+export default SchemaTable;
+//# sourceMappingURL=index.d.ts.map

package/fe/frontend/widgets/defaultPages/Schema/components/SchemaTable/index.js

@@ -0,0 +1,176 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getText } from '../../../../../widgets/common/language';
+import { del, get } from '../../../../../widgets/common/request';
+import { Button, DataTable, modal, } from '../../../../../../packages/ui/react/components';
+import useExecuteOnce from '../../../../../../packages/ui/react/hooks/useExecuteOnce';
+import useInit from '../../../../../../packages/ui/react/hooks/useInit';
+import useRefState from '../../../../../../packages/ui/react/hooks/useRefState';
+import useWatch from '../../../../../../packages/ui/react/hooks/useWatch';
+import { produce } from 'immer';
+import { memo, useCallback, useImperativeHandle, useMemo, useState } from 'react';
+import { useShallow } from 'zustand/react/shallow';
+import { eventsInfo } from '../../data/eventInfo';
+import { schemaEventBus } from '../../stores/schemaEventBus';
+import { useSchemaStore } from '../../stores/schemaStore';
+import { handlingRequestErrors } from '../../utils/fetchErrorShow';
+import { merge } from '../../utils/permissions';
+const VALUE_KEY = 'schema::';
+const generateColumns = (config) => {
+    const keys = Object.keys(config);
+    const columns = [];
+    keys.forEach((k) => {
+        const fieldInfo = config[k];
+        if (fieldInfo?.option) {
+            const { ...fieldProps } = fieldInfo.option;
+            columns.push({
+                title: getText(fieldInfo.label),
+                key: k,
+                ...fieldProps,
+            });
+        }
+    });
+    return columns;
+};
+const generateRowActions = (btnConfigs, rowData, api) => {
+    const handleRowAction = (btnConfig) => {
+        const { eventKey, eventOption } = btnConfig;
+        switch (eventKey) {
+            case 'callComponent':
+                const { emitTable } = schemaEventBus.getState();
+                emitTable({ ...rowData, comName: eventOption.comName });
+                break;
+            case 'remove':
+                if (api) {
+                    const apiParams = Object.entries(eventOption.params).reduce((o, [k, v]) => {
+                        if (('' + v).includes(VALUE_KEY)) {
+                            const valueKey = ('' + v).split(VALUE_KEY)[1];
+                            o[k] = rowData[valueKey];
+                        }
+                        else {
+                            o[k] = v;
+                        }
+                        return o;
+                    }, {});
+                    modal.confirm({
+                        content: `确认删除？`,
+                        async onOk() {
+                            await handlingRequestErrors(del(api, apiParams));
+                            schemaEventBus.getState().emitCom({ type: merge(eventsInfo.initTable) });
+                            return true;
+                        },
+                    });
+                }
+                break;
+            default:
+                break;
+        }
+    };
+    return btnConfigs.map((rb, index) => {
+        const label = getText(rb.label ?? '');
+        const bState = rb.eventKey === 'remove' ? 'danger' : undefined;
+        return {
+            render: (_item, { close }) => (_jsx("div", { className: " p-2.5", children: _jsx(Button, { state: bState, variant: "link", onClick: () => {
+                        handleRowAction(rb);
+                        close();
+                    }, children: label }, `${rb.eventKey}-${rb.label ?? index}`) })),
+        };
+    });
+};
+const SchemaTable = memo(({ ref }) => {
+    const params = useSchemaStore(useShallow((s) => ({ config: s.tableConfig, schema: s.tableSchema, api: s.api })));
+    const [data, uData] = useState([]);
+    const [columns, uColumns] = useState([]);
+    const [loading, uLoading, loadingRef] = useRefState(false);
+    const [pagination, setPagination, paginationRef] = useRefState({
+        current: 1,
+        pageSize: 10,
+        total: 0,
+    });
+    const [handleBtn, setHandleBtn] = useState([]);
+    const init = useCallback(async (query) => {
+        if (loadingRef.current.data)
+            return;
+        uLoading(true);
+        try {
+            const res = await handlingRequestErrors(get(params.api ? `${params.api}/list` : '', { ...query, ...paginationRef.current.data }));
+            if (res.data.code === 0) {
+                uData(res.data.data.data);
+                setPagination(produce((nextState) => {
+                    nextState.total = res.data.data.total;
+                }));
+            }
+        }
+        finally {
+            uLoading(false);
+        }
+    }, [loadingRef, paginationRef, params.api, setPagination, uLoading]);
+    useImperativeHandle(ref, () => {
+        return {
+            initData: init,
+        };
+    }, [init]);
+    useInit(() => {
+        const contextColumns = generateColumns(params.schema.properties);
+        const actionColumn = [];
+        if (params.config) {
+            const { rowButtons, headerButtons } = params.config;
+            if (rowButtons) {
+                actionColumn.push({
+                    key: 'action',
+                    title: getText('操作'),
+                    actions: (_value, _record, index) => [
+                        ...generateRowActions(rowButtons, _record, params.api),
+                    ],
+                });
+            }
+            setHandleBtn(headerButtons?.map((c) => {
+                const { label, eventKey, eventOption, ...props } = c;
+                return {
+                    children: getText(label ?? ''),
+                    onClick: () => {
+                        if ('comName' in eventOption) {
+                            schemaEventBus.getState().emitTable(eventOption);
+                        }
+                        else {
+                        }
+                    },
+                    ...props,
+                };
+            }) ?? []);
+        }
+        uColumns(contextColumns.concat(actionColumn));
+    });
+    useExecuteOnce(() => {
+        init();
+    }, { executionPhase: 'mount' });
+    const daProps = useMemo(() => {
+        return {
+            columns,
+            data,
+            loading,
+            pagination: {
+                ...pagination,
+                onPageSizeChange(pageSize) {
+                    setPagination(produce((ns) => {
+                        ns.pageSize = pageSize;
+                    }));
+                },
+                onChange(page) {
+                    setPagination(produce((ns) => {
+                        ns.current = page;
+                    }));
+                },
+            },
+        };
+    }, [columns, data, loading, pagination, setPagination]);
+    useWatch([pagination.current, pagination.pageSize], () => {
+        init();
+    }, {
+        compare: 'shallow',
+    });
+    return (_jsxs("div", { className: "schema-table", children: [_jsx("div", { className: "schema-table flex items-end", children: handleBtn.map((bc) => {
+                    return _jsx(Button, { ...bc });
+                }) }), _jsx(DataTable, { ...daProps })] }));
+});
+SchemaTable.displayName = 'SchemaTable';
+export default SchemaTable;

package/fe/frontend/widgets/defaultPages/Schema/data/eventInfo.d.ts

@@ -0,0 +1,8 @@
+export declare const eventsInfo: {
+    readonly none: 0;
+    readonly closeCom: 1;
+    readonly initTable: 2;
+    readonly resetSearch: 2;
+};
+export type EventInfoKey = keyof typeof eventsInfo;
+//# sourceMappingURL=eventInfo.d.ts.map

package/fe/frontend/widgets/defaultPages/Schema/data/eventInfo.js

@@ -0,0 +1,6 @@
+export const eventsInfo = {
+    none: 0b00000000000000,
+    closeCom: 0b00000000000001,
+    initTable: 0b00000000000010,
+    resetSearch: 0b00000000000010,
+};

package/fe/frontend/widgets/defaultPages/Schema/data/index.d.ts

@@ -0,0 +1,3 @@
+export declare const suffixKey = "Option";
+export type SuffixKey = typeof suffixKey;
+//# sourceMappingURL=index.d.ts.map

package/fe/frontend/widgets/defaultPages/Schema/data/index.js

@@ -0,0 +1 @@
+export const suffixKey = "Option";

package/fe/frontend/widgets/defaultPages/Schema/hooks/useComConfig.d.ts

@@ -0,0 +1,10 @@
+import type { CallComNames, NamedComponentConfig, NamedSchemaType } from '../schemaType';
+declare const useComConfig: <CN extends CallComNames>({ comName }: {
+    comName: CallComNames;
+}) => {
+    config: NamedComponentConfig<CN>;
+    schema: NamedSchemaType<`${CN}Option`>;
+    api: string | undefined;
+};
+export default useComConfig;
+//# sourceMappingURL=useComConfig.d.ts.map

package/fe/frontend/widgets/defaultPages/Schema/hooks/useComConfig.js

@@ -0,0 +1,14 @@
+import { useShallow } from 'zustand/react/shallow';
+import { useSchemaStore } from '../stores/schemaStore';
+const useComConfig = ({ comName }) => {
+    const params = useSchemaStore(useShallow((s) => ({ comConfig: s.components, api: s.api })));
+    const comConfig = params.comConfig?.[comName];
+    const config = comConfig?.config;
+    const schema = comConfig?.schema;
+    return {
+        config,
+        schema,
+        api: params.api,
+    };
+};
+export default useComConfig;

package/fe/frontend/widgets/defaultPages/Schema/index.d.ts

@@ -0,0 +1,3 @@
+declare const Schema: import("react").MemoExoticComponent<() => import("react/jsx-runtime").JSX.Element>;
+export default Schema;
+//# sourceMappingURL=index.d.ts.map

package/fe/frontend/widgets/defaultPages/Schema/index.js

@@ -0,0 +1,67 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { logIllegalComponentCallback } from '../../../widgets/common/logFn';
+import useCurrentMenuData from '../../../widgets/hooks/useCurrentMenuData';
+import useExecuteOnce, { executionPhaseType } from '../../../../packages/ui/react/hooks/useExecuteOnce';
+import useInit from '../../../../packages/ui/react/hooks/useInit';
+import { memo, Suspense, useCallback, useMemo, useRef, useState } from 'react';
+import { components } from './components/CallCom/data';
+import SchemaSearch from './components/SchemaSearch';
+import SchemaTable from './components/SchemaTable';
+import { eventsInfo } from './data/eventInfo';
+import { schemaEventBus } from './stores/schemaEventBus';
+import { useSchemaStore } from './stores/schemaStore';
+import { isAllowed } from './utils/permissions';
+import { schemaConversion } from './utils/schemaConversion';
+const Schema = memo(() => {
+    const { menu } = useCurrentMenuData();
+    const [showCompoentKey, setShowCompoentKey] = useState();
+    const [comProps, setComProps] = useState({});
+    const schemaStoreAvailable = useSchemaStore((s) => s.schemaStoreAvailable);
+    const TableRef = useRef(null);
+    const onSearch = useCallback((v) => {
+        TableRef.current?.initData(v);
+    }, []);
+    const callCom = useCallback((v) => {
+        const { comName, ...params } = v;
+        setComProps({ data: params, comName });
+        setShowCompoentKey(comName);
+    }, []);
+    const comDone = useCallback(({ type }) => {
+        if (isAllowed(type, eventsInfo.closeCom)) {
+            setShowCompoentKey(undefined);
+            setComProps(undefined);
+        }
+        if (isAllowed(type, eventsInfo.initTable)) {
+            TableRef.current?.initData();
+        }
+        if (isAllowed(type, eventsInfo.resetSearch)) {
+        }
+    }, []);
+    useInit(() => {
+        schemaConversion(menu.schemaConfig, menu.key);
+    });
+    useExecuteOnce(() => {
+        schemaEventBus.getState().subscribeSearch(onSearch);
+        schemaEventBus.getState().subscribeCom(comDone);
+        schemaEventBus.getState().subscribeTable(callCom);
+    }, { executionPhase: executionPhaseType.mount });
+    useExecuteOnce(() => {
+        schemaEventBus.getState().unSubscribeSearch(onSearch);
+        schemaEventBus.getState().unSubscribeTable(callCom);
+        schemaEventBus.getState().unSubscribeCom(comDone);
+    }, { executionPhase: executionPhaseType.unMount });
+    const dom = useMemo(() => {
+        if (schemaStoreAvailable) {
+            const CallCom = components[showCompoentKey];
+            if (!CallCom && showCompoentKey) {
+                logIllegalComponentCallback(showCompoentKey);
+            }
+            return (_jsxs("div", { className: "schema-container gap-3 flex-col flex h-full", children: [_jsx(SchemaSearch, {}), _jsx(SchemaTable, { ref: TableRef }), _jsx(Suspense, { children: CallCom && _jsx(CallCom, { ...comProps }) })] }));
+        }
+        else
+            return _jsx("div", { children: "loading" });
+    }, [comProps, schemaStoreAvailable, showCompoentKey]);
+    return dom;
+});
+Schema.displayName = 'SchemaPage';
+export default Schema;

package/fe/frontend/widgets/defaultPages/Schema/schemaType.d.ts

@@ -0,0 +1,41 @@
+import type { ComponentConfig } from '../../../../model/types/data/component';
+import type { BaseOption, ConfigSchema, SchemaDataType, SearchConfig, TableConfig, UsedConfigSchema } from '../../../../model/types/data/schema';
+import type { SuffixKey } from './data';
+export type { ComponentConfig, SearchConfig, TableConfig };
+export type FieldType = ConfigSchema['properties'][''];
+export type SchemaType = Required<SchemaDataType>['schema'];
+export type AllFieldKeys = keyof FieldType;
+export type AllOptionsPreNames = {
+    [K in AllFieldKeys]: K extends `${infer Name}${SuffixKey}` ? Name : never;
+}[AllFieldKeys];
+export type NonOptionKey = {
+    [K in AllFieldKeys]: K extends `${string}${SuffixKey}` ? never : K;
+}[AllFieldKeys];
+export type StoreSchemaType = UsedConfigSchema<BaseOption<FieldType[`${AllOptionsPreNames}${SuffixKey}`]>>;
+export type NamedSchemaType<N extends `${AllOptionsPreNames}${SuffixKey}`> = UsedConfigSchema<BaseOption<FieldType[N]>>;
+export type NamedComOption<N extends CallComNames> = ComponentType<ComponentConfig>[N];
+export type NamedComponentConfig<N extends CallComNames> = ComponentConfig[N];
+type ComponentC<C extends ComponentConfig> = {
+    [K in keyof C]: {
+        schema: StoreSchemaType;
+        config: C[K];
+    };
+}[keyof C];
+export type ComponentType<C extends ComponentConfig> = {
+    [K in keyof C]: ComponentC<C>;
+};
+export type CallComNames = keyof ComponentConfig;
+export type SchemaDefaultValue = Record<string, any>;
+export type SchemaTableEmitData = SchemaDefaultValue & {
+    comName: CallComNames;
+};
+export declare const enum ComEventType {
+    close = 0
+}
+export type SchemaComEventInfo = {
+    type: number;
+};
+export type CallComponent<T> = {
+    [K in CallComNames]: T;
+};
+//# sourceMappingURL=schemaType.d.ts.map

package/fe/frontend/widgets/defaultPages/Schema/schemaType.js

@@ -0,0 +1,4 @@
+export var ComEventType;
+(function (ComEventType) {
+    ComEventType[ComEventType["close"] = 0] = "close";
+})(ComEventType || (ComEventType = {}));