@_tc/template-core 0.0.1-bate.46 → 0.0.1-bate.48

package/fe/frontend/src/components/BasePage/HeaderView.js

@@ -0,0 +1,55 @@
+import { frontendLangKeys } from "../../language/index.js";
+import { getText } from "../../common/language.js";
+import { cn } from "../../../../packages/react/ui/lib/utils.js";
+import "../../../../packages/react/ui/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Boxes } from "lucide-react";
+//#region frontend/src/components/BasePage/HeaderView.tsx
+var defaultProps = {};
+var headerThemeStyle = {
+	"--header-fg": "hsl(var(--theme-text))",
+	"--header-bg": "hsl(var(--theme-bg))",
+	"--header-shadow": "hsl(var(--foreground) / 0.08)"
+};
+var imageLogoPattern = /^(https?:\/\/|data:image\/|\/|\.\/|\.\.\/|.*\.(svg|png|jpe?g|webp|gif)$)/i;
+var HeaderView = (props) => {
+	const { icon, title, menu, userArea, children } = props ?? defaultProps;
+	const defaultTitle = getText(frontendLangKeys.appTitle);
+	const brandLogo = icon ? typeof icon === "string" ? imageLogoPattern.test(icon) ? /* @__PURE__ */ jsx("img", {
+		className: "h-full max-w-[112px] object-contain",
+		src: icon,
+		alt: ""
+	}) : /* @__PURE__ */ jsx("span", {
+		className: "max-w-[112px] truncate text-[13px] font-semibold leading-none",
+		children: icon
+	}) : icon : /* @__PURE__ */ jsx(Boxes, { className: "h-4 w-4" });
+	return /* @__PURE__ */ jsxs("div", {
+		className: "header-view",
+		style: headerThemeStyle,
+		children: [/* @__PURE__ */ jsxs("header", {
+			className: cn("header flex h-14 shrink-0 items-center border-b border-border/70 bg-background/95 text-(--header-fg)", "shadow-[0_1px_0_var(--header-shadow)]"),
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "brand flex w-64 min-w-0 items-center gap-3 px-5 text-foreground",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: cn("brand-logo h-8 min-w-12 max-w-32 shrink-0 ", "flex items-center justify-center overflow-hidden ", "rounded-md bg-foreground/7", "text-foreground shadow-[inset_0_0_0_1px_hsl(var(--border)/0.9)]"),
+						children: brandLogo
+					}), /* @__PURE__ */ jsx("span", {
+						className: "brand-title min-w-0 truncate text-sm font-semibold leading-5 tracking-normal",
+						children: title ?? defaultTitle
+					})]
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "top-menu flex min-w-0 flex-1 items-center px-3 text-(--header-fg)",
+					children: menu
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "user-area flex min-w-0 items-center justify-end px-5 text-(--header-fg)",
+					children: userArea
+				})
+			]
+		}), children]
+	});
+};
+//#endregion
+export { HeaderView as default };

package/fe/frontend/src/components/LanguageSwitch/LanguageSwitch.d.ts

@@ -0,0 +1,14 @@
+import { type SelectProps } from "../../../../packages/react/ui/index";
+export type LanguageSwitchValue = 'zh-CN' | 'en-US' | (string & {});
+export type LanguageSwitchOption = Omit<NonNullable<SelectProps['options']>[number], 'value'> & {
+    value: LanguageSwitchValue;
+};
+export interface LanguageSwitchProps extends Omit<SelectProps, 'options' | 'value' | 'defaultValue' | 'onChange'> {
+    value?: LanguageSwitchValue;
+    defaultValue?: LanguageSwitchValue;
+    options?: LanguageSwitchOption[];
+    onChange?: (language: LanguageSwitchValue) => void;
+}
+declare const LanguageSwitch: ({ value, defaultValue, options, onChange, className, placeholder, clearable, searchable, getPopupContainer, ...props }: LanguageSwitchProps) => import("react/jsx-runtime").JSX.Element;
+export default LanguageSwitch;
+//# sourceMappingURL=LanguageSwitch.d.ts.map

package/fe/frontend/src/components/LanguageSwitch/LanguageSwitch.js

@@ -0,0 +1,44 @@
+import { frontendLangKeys } from "../../language/index.js";
+import { i18nStore } from "../../../../packages/common/i18n/index.js";
+import { useI18nStore } from "../../../../packages/react/ui/i18n/useI18n.js";
+import "../../../../packages/react/ui/i18n/index.js";
+import { getText } from "../../common/language.js";
+import { cn } from "../../../../packages/react/ui/lib/utils.js";
+import { Select } from "../../../../packages/react/ui/components/Select/Select.js";
+import "../../../../packages/react/ui/index.js";
+import { useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region frontend/src/components/LanguageSwitch/LanguageSwitch.tsx
+var getDefaultLanguageOptions = () => [{
+	label: getText(frontendLangKeys.languageSwitchZhCN),
+	value: "zh-CN",
+	searchText: "zh-CN 中文 简体中文"
+}, {
+	label: getText(frontendLangKeys.languageSwitchEnUS),
+	value: "en-US",
+	searchText: "en-US English"
+}];
+var LanguageSwitch = ({ value, defaultValue, options, onChange, className, placeholder, clearable = false, searchable = false, getPopupContainer = "parent", ...props }) => {
+	const currentLanguage = useI18nStore((state) => state.language);
+	const mergedOptions = useMemo(() => options ?? getDefaultLanguageOptions(), [currentLanguage, options]);
+	const selectedLanguage = value ?? currentLanguage ?? defaultValue;
+	const handleChange = (language) => {
+		if (!language) return;
+		const nextLanguage = String(language);
+		i18nStore.getState().setLanguage(nextLanguage);
+		onChange?.(nextLanguage);
+	};
+	return /* @__PURE__ */ jsx(Select, {
+		...props,
+		className: cn("w-32 shrink-0", className),
+		clearable,
+		getPopupContainer,
+		options: mergedOptions,
+		placeholder: placeholder ?? getText(frontendLangKeys.languageSwitchPlaceholder),
+		searchable,
+		value: selectedLanguage ?? defaultValue,
+		onChange: handleChange
+	});
+};
+//#endregion
+export { LanguageSwitch as default };

package/fe/frontend/src/components/LanguageSwitch/index.d.ts

@@ -0,0 +1,4 @@
+import LanguageSwitch from "./LanguageSwitch";
+export * from "./LanguageSwitch";
+export default LanguageSwitch;
+//# sourceMappingURL=index.d.ts.map

package/fe/frontend/src/components/LanguageSwitch/index.js

@@ -0,0 +1,5 @@
+import LanguageSwitch from "./LanguageSwitch.js";
+//#region frontend/src/components/LanguageSwitch/index.ts
+var LanguageSwitch_default = LanguageSwitch;
+//#endregion
+export { LanguageSwitch_default as default };

package/fe/frontend/{widgets → src}/components/Router/index.d.ts

@@ -1,5 +1,5 @@
-import { ReactNode } from 'react';
-import { RouterType } from './type';
+import { ReactNode } from "react";
+import { RouterType } from "./type";
 export type RouteInfo = {
     path: string;
     component: ReactNode;

package/fe/frontend/src/components/Router/index.js

@@ -0,0 +1,21 @@
+import { BrowserRouter, HashRouter, Route, Routes } from "react-router-dom";
+import { jsx } from "react/jsx-runtime";
+//#region frontend/src/components/Router/index.tsx
+var generateRouter = (routes, type) => {
+	const RouterComponent = type === "browser" ? BrowserRouter : HashRouter;
+	const renderDom = (routes) => {
+		return routes.map((route) => {
+			return /* @__PURE__ */ jsx(Route, {
+				path: route.path,
+				element: route.component,
+				children: route.children && renderDom(route.children)
+			}, route.path);
+		});
+	};
+	return /* @__PURE__ */ jsx(RouterComponent, {
+		basename: window._basePath,
+		children: /* @__PURE__ */ jsx(Routes, { children: renderDom(routes) })
+	});
+};
+//#endregion
+export { generateRouter };

package/fe/frontend/src/components/ThemeSwitch/ThemeSwitch.d.ts

@@ -0,0 +1,15 @@
+export type ThemeSwitchMode = 'light' | 'dark';
+export interface ThemeSwitchProps {
+    value?: ThemeSwitchMode;
+    defaultValue?: ThemeSwitchMode;
+    onChange?: (mode: ThemeSwitchMode) => void;
+    disabled?: boolean;
+    className?: string;
+    showLabel?: boolean;
+    persist?: boolean;
+    storageKey?: string;
+}
+export declare const themeSwitchStorageKey = "tc_theme";
+declare const ThemeSwitch: ({ value, defaultValue, onChange, disabled, className, showLabel, persist, storageKey, }: ThemeSwitchProps) => import("react/jsx-runtime").JSX.Element;
+export default ThemeSwitch;
+//# sourceMappingURL=ThemeSwitch.d.ts.map

package/fe/frontend/src/components/ThemeSwitch/ThemeSwitch.js

@@ -0,0 +1,83 @@
+import { frontendLangKeys } from "../../language/index.js";
+import { useI18nStore } from "../../../../packages/react/ui/i18n/useI18n.js";
+import "../../../../packages/react/ui/i18n/index.js";
+import { getText } from "../../common/language.js";
+import { cn } from "../../../../packages/react/ui/lib/utils.js";
+import { Switch } from "../../../../packages/react/ui/components/Switch/Switch.js";
+import { Tooltip } from "../../../../packages/react/ui/components/Tooltip/Tooltip.js";
+import "../../../../packages/react/ui/index.js";
+import { useEffect, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Moon, Sun } from "lucide-react";
+//#region frontend/src/components/ThemeSwitch/ThemeSwitch.tsx
+var themeSwitchStorageKey = "tc_theme";
+var canUseDocument = () => typeof document !== "undefined";
+var canUseLocalStorage = () => typeof localStorage !== "undefined";
+var getStoredThemeMode = (storageKey) => {
+	if (!canUseLocalStorage()) return null;
+	const value = localStorage.getItem(storageKey);
+	return value === "light" || value === "dark" ? value : null;
+};
+var getCurrentThemeMode = (defaultValue, storageKey = themeSwitchStorageKey) => {
+	const storedMode = getStoredThemeMode(storageKey);
+	if (storedMode) return storedMode;
+	if (defaultValue) return defaultValue;
+	if (!canUseDocument()) return "light";
+	return document.documentElement.classList.contains("dark") ? "dark" : "light";
+};
+var applyThemeMode = (mode, persist, storageKey) => {
+	if (!canUseDocument()) return;
+	const root = document.documentElement;
+	root.classList.toggle("dark", mode === "dark");
+	root.style.colorScheme = mode;
+	if (persist && canUseLocalStorage()) localStorage.setItem(storageKey, mode);
+};
+var ThemeSwitch = ({ value, defaultValue, onChange, disabled, className, showLabel = false, persist = true, storageKey = themeSwitchStorageKey }) => {
+	useI18nStore((state) => state.language);
+	const [internalMode, setInternalMode] = useState(() => getCurrentThemeMode(defaultValue, storageKey));
+	const isControlled = value !== void 0;
+	const mode = isControlled ? value : internalMode;
+	const checked = mode === "dark";
+	useEffect(() => {
+		applyThemeMode(mode, persist, storageKey);
+	}, [
+		mode,
+		persist,
+		storageKey
+	]);
+	const handleChange = (nextChecked) => {
+		const nextMode = nextChecked ? "dark" : "light";
+		if (!isControlled) setInternalMode(nextMode);
+		onChange?.(nextMode);
+	};
+	const label = mode === "dark" ? getText(frontendLangKeys.themeSwitchDark) : getText(frontendLangKeys.themeSwitchLight);
+	const tooltip = checked ? getText(frontendLangKeys.themeSwitchToLight) : getText(frontendLangKeys.themeSwitchToDark);
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("inline-flex shrink-0 items-center gap-2 text-foreground", className),
+		children: [
+			/* @__PURE__ */ jsx(Sun, {
+				className: cn("h-4 w-4", checked ? "text-muted-foreground" : "text-foreground"),
+				"aria-hidden": "true"
+			}),
+			/* @__PURE__ */ jsx(Tooltip, {
+				content: tooltip,
+				placement: "bottom",
+				children: /* @__PURE__ */ jsx(Switch, {
+					checked,
+					disabled,
+					onChange: handleChange
+				})
+			}),
+			/* @__PURE__ */ jsx(Moon, {
+				className: cn("h-4 w-4", checked ? "text-foreground" : "text-muted-foreground"),
+				"aria-hidden": "true"
+			}),
+			showLabel && /* @__PURE__ */ jsx("span", {
+				className: "min-w-8 text-xs text-muted-foreground",
+				children: label
+			})
+		]
+	});
+};
+//#endregion
+export { ThemeSwitch as default, themeSwitchStorageKey };

package/fe/frontend/src/components/ThemeSwitch/index.d.ts

@@ -0,0 +1,4 @@
+import ThemeSwitch from "./ThemeSwitch";
+export * from "./ThemeSwitch";
+export default ThemeSwitch;
+//# sourceMappingURL=index.d.ts.map

package/fe/frontend/src/components/ThemeSwitch/index.js

@@ -0,0 +1,5 @@
+import ThemeSwitch, { themeSwitchStorageKey } from "./ThemeSwitch.js";
+//#region frontend/src/components/ThemeSwitch/index.ts
+var ThemeSwitch_default = ThemeSwitch;
+//#endregion
+export { ThemeSwitch_default as default, themeSwitchStorageKey };

package/fe/frontend/src/components/index.d.ts

@@ -0,0 +1,11 @@
+export { default as AsyncSelect } from "./AsyncSelect";
+export * from "./AsyncSelect";
+export { default as HeaderView } from "./BasePage/HeaderView";
+export * from "./BasePage/HeaderView";
+export { default as LanguageSwitch } from "./LanguageSwitch";
+export * from "./LanguageSwitch";
+export * from "./Router";
+export * from "./Router/type";
+export { default as ThemeSwitch } from "./ThemeSwitch";
+export * from "./ThemeSwitch";
+//# sourceMappingURL=index.d.ts.map

package/fe/frontend/src/components/index.js

@@ -0,0 +1,7 @@
+import HeaderView from "./BasePage/HeaderView.js";
+import { generateRouter } from "./Router/index.js";
+import AsyncSelect_default from "./AsyncSelect/index.js";
+import LanguageSwitch_default from "./LanguageSwitch/index.js";
+import { themeSwitchStorageKey } from "./ThemeSwitch/ThemeSwitch.js";
+import ThemeSwitch_default from "./ThemeSwitch/index.js";
+export { AsyncSelect_default as AsyncSelect, HeaderView, LanguageSwitch_default as LanguageSwitch, ThemeSwitch_default as ThemeSwitch, generateRouter, themeSwitchStorageKey };

package/fe/frontend/src/defaultPages/Iframe/index.js

@@ -0,0 +1,15 @@
+import useCurrentMenuData from "../../hooks/useCurrentMenuData.js";
+import { jsx } from "react/jsx-runtime";
+//#region frontend/src/defaultPages/Iframe/index.tsx
+var Iframe = () => {
+	const { menu } = useCurrentMenuData(true);
+	return /* @__PURE__ */ jsx("div", {
+		className: "iframe w-full h-full",
+		children: /* @__PURE__ */ jsx("iframe", {
+			className: " w-full h-full",
+			src: menu.moduleType === "iframe" ? menu.iframeConfig.path : ""
+		})
+	});
+};
+//#endregion
+export { Iframe as default };

package/fe/frontend/src/defaultPages/NotFoundPage/index.d.ts

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

package/fe/frontend/src/defaultPages/NotFoundPage/index.js

@@ -0,0 +1,28 @@
+import { frontendLangKeys } from "../../language/index.js";
+import { getText } from "../../common/language.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region frontend/src/defaultPages/NotFoundPage/index.tsx
+var NotFoundPage = () => {
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex h-full min-h-[240px] w-full items-center justify-center bg-theme-bg px-6 text-foreground",
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex max-w-sm flex-col items-center text-center",
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					className: "mb-4 rounded-md border border-border bg-background/70 px-3 py-1 text-xs font-medium text-muted-foreground",
+					children: "404"
+				}),
+				/* @__PURE__ */ jsx("h1", {
+					className: "text-lg font-semibold tracking-normal",
+					children: getText(frontendLangKeys.notFoundTitle)
+				}),
+				/* @__PURE__ */ jsx("p", {
+					className: "mt-2 text-sm leading-6 text-muted-foreground",
+					children: getText(frontendLangKeys.notFoundDescription)
+				})
+			]
+		})
+	});
+};
+//#endregion
+export { NotFoundPage as default };

package/fe/frontend/{widgets/defaultPages/Schema → src/defaultPages/SchemaPage}/components/CallCom/DetailPanel.d.ts

@@ -1,4 +1,4 @@
-import type { CallComNames, SchemaDefaultValue } from '../../schemaType';
+import type { CallComNames, SchemaDefaultValue } from "../../schemaType";
 declare const DetailPanel: import("react").MemoExoticComponent<(props: {
     data: SchemaDefaultValue;
     comName: CallComNames;

package/fe/frontend/src/defaultPages/SchemaPage/components/CallCom/DetailPanel.js

@@ -0,0 +1,102 @@
+import { frontendLangKeys } from "../../../../language/index.js";
+import { getText } from "../../../../common/language.js";
+import { Drawer } from "../../../../../../packages/react/ui/components/Drawer/Drawer.js";
+import "../../../../../../packages/react/ui/components/index.js";
+import { request } from "../../../../common/request.js";
+import { schemaEventBus } from "../../../../stores/schemaEventBus.js";
+import { handlingRequestErrors } from "../../../../common/fetchErrorShow.js";
+import useExecuteOnce from "../../../../../../packages/react/hooks/useExecuteOnce.js";
+import { eventsInfo } from "../../data/eventInfo.js";
+import useComConfig from "../../hooks/useComConfig.js";
+import { merge } from "../../utils/permissions.js";
+import { memo, useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region frontend/src/defaultPages/SchemaPage/components/CallCom/DetailPanel.tsx
+var EMPTY_TEXT = "-";
+var isEmptyValue = (value) => value === void 0 || value === null || value === "";
+var stringifyValue = (value) => {
+	if (isEmptyValue(value)) return EMPTY_TEXT;
+	if (typeof value === "object") return JSON.stringify(value);
+	return String(value);
+};
+var getOptionLabel = (options, value) => {
+	if (!Array.isArray(options)) return void 0;
+	const matchedOption = options.find((option) => {
+		if (!option || typeof option !== "object") return false;
+		return option.value === value;
+	});
+	if (!matchedOption || typeof matchedOption !== "object") return void 0;
+	return matchedOption.label ?? stringifyValue(value);
+};
+var formatValue = (value, fieldInfo) => {
+	if (isEmptyValue(value)) return EMPTY_TEXT;
+	const option = fieldInfo.option;
+	const optionLabel = getOptionLabel(option?.options ?? option?.enumList, value);
+	if (optionLabel !== void 0) 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(frontendLangKeys.yes) : getText(frontendLangKeys.no);
+	return stringifyValue(value);
+};
+var 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);
+};
+var 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 /* @__PURE__ */ jsx("div", {
+		className: "detail-panel",
+		children: /* @__PURE__ */ jsx(Drawer, {
+			title: getText(config?.title ?? ""),
+			open,
+			onClose: () => {
+				setOpen(false);
+				schemaEventBus.getState().emitCom({ type: merge(eventsInfo.closeCom) });
+			},
+			children: fields.length > 0 ? /* @__PURE__ */ jsx("div", {
+				className: "grid grid-cols-1 gap-x-6 gap-y-4 sm:grid-cols-2",
+				children: fields.map((field) => /* @__PURE__ */ jsxs("div", {
+					className: "min-w-0 border-b border-border pb-3",
+					children: [/* @__PURE__ */ jsx("div", {
+						className: "mb-1 text-xs text-muted-foreground",
+						children: field.label
+					}), /* @__PURE__ */ jsx("div", {
+						className: "break-words text-sm leading-6 text-foreground",
+						children: field.value
+					})]
+				}, field.key))
+			}) : /* @__PURE__ */ jsx("div", {
+				className: "py-8 text-center text-sm text-muted-foreground",
+				children: getText(frontendLangKeys.noData)
+			})
+		})
+	});
+});
+//#endregion
+export { DetailPanel as default };

package/fe/frontend/{widgets/defaultPages/Schema → src/defaultPages/SchemaPage}/components/CallCom/PopFrom.d.ts

@@ -1,4 +1,4 @@
-import type { CallComNames, ComponentConfig, SchemaDefaultValue } from '../../schemaType';
+import type { CallComNames, ComponentConfig, SchemaDefaultValue } from "../../schemaType";
 type PopFormComName = keyof ComponentConfig;
 export interface PopFormValue {
     comName: PopFormComName;

package/fe/frontend/src/defaultPages/SchemaPage/components/CallCom/PopFrom.js

@@ -0,0 +1,119 @@
+import { frontendLangKeys } from "../../../../language/index.js";
+import { getText } from "../../../../common/language.js";
+import { Modal } from "../../../../../../packages/react/ui/components/Modal/Modal.js";
+import { SchemaForm } from "../../../../../../packages/react/ui/components/Form/SchemaForm/index.js";
+import "../../../../../../packages/react/ui/components/index.js";
+import { post, put, request } from "../../../../common/request.js";
+import { schemaEventBus } from "../../../../stores/schemaEventBus.js";
+import { handlingRequestErrors } from "../../../../common/fetchErrorShow.js";
+import useExecuteOnce from "../../../../../../packages/react/hooks/useExecuteOnce.js";
+import { eventsInfo } from "../../data/eventInfo.js";
+import useComConfig from "../../hooks/useComConfig.js";
+import { merge } from "../../utils/permissions.js";
+import { createAjvValidator } from "../../utils/validator.js";
+import { memo, useCallback, useMemo, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region frontend/src/defaultPages/SchemaPage/components/CallCom/PopFrom.tsx
+var 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(frontendLangKeys.requiredInput, { label: getText(fieldInfo.label) })
+			}] : [], { validator: createAjvValidator(fieldInfo, { required: schema.required?.includes(key) }) }],
+			fieldProps: {
+				...fieldProps,
+				...comType === "select" ? { getPopupContainer: "parent" } : []
+			}
+		});
+		return schemas;
+	}, []);
+};
+var 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;
+};
+var 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);
+	/**
+	* 1. 生成 schemas
+	* 2. 根据config 获取相关展示内容、请求数据
+	* 3. 支持 create、edit
+	*
+	*
+	* 交互结束时 通知上层 清除show component
+	*
+	*
+	*/
+	const schemas = useMemo(() => {
+		return generateSchemas(schema);
+	}, [schema]);
+	const closed = submitting ? void 0 : () => {
+		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 {
+			if ((await handlingRequestErrors(fetchFn(api, v))).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 /* @__PURE__ */ jsx(Modal, {
+		open,
+		onClose: closed,
+		title: getText(config?.title ?? ""),
+		width: 640,
+		maskClosable: !submitting,
+		children: /* @__PURE__ */ jsx(SchemaForm, {
+			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";
+//#endregion
+export { PopForm as default };

package/fe/frontend/src/defaultPages/SchemaPage/components/CallCom/builtIn.d.ts

@@ -0,0 +1,44 @@
+import type { FetchInfo } from "../../../../../../model/types/data/fetchInfo";
+import type { ComponentType, LazyExoticComponent } from "react";
+type CallComRenderer = ComponentType<any> | LazyExoticComponent<ComponentType<any>>;
+type CallComDefinition<Config> = CallComRenderer & {
+    readonly __config: Config;
+};
+type CreateFormConfig = {
+    /**
+     * 表单标题
+     */
+    title: string;
+    /**
+     *  保存按钮文案
+     */
+    saveBtnText?: string;
+} & Partial<Pick<FetchInfo, 'fetchConfig'>>;
+type EditFormConfig = {
+    /**
+     * 表单标题
+     */
+    title: string;
+    /**
+     *  保存按钮文案
+     */
+    saveBtnText?: string;
+} & FetchInfo;
+type DetailPanelConfig = {
+    /**
+     * 表单标题
+     */
+    title: string;
+} & FetchInfo;
+export declare const baseComponentsMap: {
+    editForm: CallComDefinition<EditFormConfig>;
+    createForm: CallComDefinition<CreateFormConfig>;
+    detailPanel: CallComDefinition<DetailPanelConfig>;
+};
+export type BuiltInCallComNames = Extract<keyof typeof baseComponentsMap, string>;
+type InferCallComConfig<T> = T extends CallComDefinition<infer Config> ? Config : never;
+export type BuiltInCallComConfigMap = {
+    [K in BuiltInCallComNames]?: InferCallComConfig<(typeof baseComponentsMap)[K]>;
+};
+export {};
+//# sourceMappingURL=builtIn.d.ts.map

package/fe/frontend/src/defaultPages/SchemaPage/components/CallCom/builtIn.js

@@ -0,0 +1,10 @@
+import { lazy } from "react";
+//#region frontend/src/defaultPages/SchemaPage/components/CallCom/builtIn.ts
+var defineCallCom = (component) => component;
+var baseComponentsMap = {
+	editForm: defineCallCom(lazy(() => import("./PopFrom.js"))),
+	createForm: defineCallCom(lazy(() => import("./PopFrom.js"))),
+	detailPanel: defineCallCom(lazy(() => import("./DetailPanel.js")))
+};
+//#endregion
+export { baseComponentsMap };

package/fe/frontend/src/defaultPages/SchemaPage/components/CallCom/data.d.ts

@@ -0,0 +1,4 @@
+import type { CallComComponentsMap } from "../../schemaType";
+export declare const components: CallComComponentsMap;
+export type { CallComComponentsMap };
+//# sourceMappingURL=data.d.ts.map