@_tc/template-core 0.0.1-bate.5 → 0.0.1-bate.51

package/fe/frontend/src/defaultPages/SchemaPage/components/SchemaTable/index.js

@@ -0,0 +1,202 @@
+import { frontendLangKeys } from "../../../../language/index.js";
+import { getText } from "../../../../common/language.js";
+import { Button } from "../../../../../../packages/react/ui/components/Button/Button.js";
+import { modal } from "../../../../../../packages/react/ui/components/Modal/ModalManager.js";
+import { DataTable } from "../../../../../../packages/react/ui/components/DataTable/index.js";
+import "../../../../../../packages/react/ui/components/index.js";
+import { del, get } from "../../../../common/request.js";
+import useInit from "../../../../../../packages/react/hooks/useInit.js";
+import { schemaEventBus } from "../../../../stores/schemaEventBus.js";
+import { useSchemaStore } from "../../../../stores/schemaStore.js";
+import { handlingRequestErrors } from "../../../../common/fetchErrorShow.js";
+import useExecuteOnce from "../../../../../../packages/react/hooks/useExecuteOnce.js";
+import { eventsInfo } from "../../data/eventInfo.js";
+import { merge } from "../../utils/permissions.js";
+import useRefState from "../../../../../../packages/react/hooks/useRefState.js";
+import useWatch from "../../../../../../packages/react/hooks/useWatch.js";
+import { memo, useCallback, useImperativeHandle, useMemo, useState, useTransition } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useShallow } from "zustand/react/shallow";
+import { produce } from "immer";
+//#region frontend/src/defaultPages/SchemaPage/components/SchemaTable/index.tsx
+var VALUE_KEY = "$schema::";
+var 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;
+};
+var 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)) o[k] = rowData[("" + v).split(VALUE_KEY)[1]];
+						else o[k] = v;
+						return o;
+					}, {});
+					modal.confirm({
+						content: getText(frontendLangKeys.confirmDelete),
+						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" : void 0;
+		return { render: (_item, { close }) => /* @__PURE__ */ jsx("div", {
+			className: " p-2.5",
+			children: /* @__PURE__ */ jsx(Button, {
+				state: bState,
+				variant: "link",
+				onClick: () => {
+					handleRowAction(rb);
+					close();
+				},
+				children: label
+			}, `${rb.eventKey}-${rb.label ?? index}`)
+		}) };
+	});
+};
+var 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 [lazyLoading, startTransition] = useTransition();
+	const [handleBtn, setHandleBtn] = useState([]);
+	const init = useCallback(async (query) => {
+		if (loadingRef.current.data) return;
+		startTransition(async () => {
+			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 {
+			startTransition(async () => {
+				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(frontendLangKeys.operation),
+				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);
+					},
+					...props
+				};
+			}) ?? []);
+		}
+		uColumns(contextColumns.concat(actionColumn));
+	});
+	useExecuteOnce(() => {
+		init();
+	}, { executionPhase: "mount" });
+	const daProps = useMemo(() => {
+		return {
+			columns,
+			data,
+			loading: lazyLoading || loading,
+			pagination: {
+				...pagination,
+				onPageSizeChange(pageSize) {
+					setPagination(produce((ns) => {
+						ns.pageSize = pageSize;
+					}));
+				},
+				onChange(page) {
+					setPagination(produce((ns) => {
+						ns.current = page;
+					}));
+				}
+			}
+		};
+	}, [
+		columns,
+		data,
+		loading,
+		lazyLoading,
+		pagination,
+		setPagination
+	]);
+	useWatch([pagination.current, pagination.pageSize], () => {
+		init();
+	}, { compare: "shallow" });
+	return /* @__PURE__ */ jsxs("div", {
+		className: "schema-table",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "schema-table-actions flex items-end",
+			children: handleBtn.map((bc, index) => {
+				return /* @__PURE__ */ jsx(Button, { ...bc }, `schema-table-action-${index}`);
+			})
+		}), /* @__PURE__ */ jsx(DataTable, { ...daProps })]
+	});
+});
+SchemaTable.displayName = "SchemaTable";
+//#endregion
+export { SchemaTable as default };

package/fe/frontend/src/defaultPages/SchemaPage/data/eventInfo.d.ts

@@ -0,0 +1,7 @@
+export declare const eventsInfo: {
+    readonly none: 0;
+    readonly closeCom: 1;
+    readonly initTable: 2;
+    readonly resetSearch: 2;
+};
+export type EventInfoKey = keyof typeof eventsInfo;

package/fe/frontend/src/defaultPages/SchemaPage/data/eventInfo.js

@@ -0,0 +1,9 @@
+//#region frontend/src/defaultPages/SchemaPage/data/eventInfo.ts
+var eventsInfo = {
+	none: 0,
+	closeCom: 1,
+	initTable: 2,
+	resetSearch: 2
+};
+//#endregion
+export { eventsInfo };

package/fe/frontend/src/defaultPages/SchemaPage/data/index.d.ts

@@ -0,0 +1,2 @@
+export declare const suffixKey = "Option";
+export type SuffixKey = typeof suffixKey;

package/fe/frontend/src/defaultPages/SchemaPage/data/index.js

@@ -0,0 +1,4 @@
+//#region frontend/src/defaultPages/SchemaPage/data/index.ts
+var suffixKey = "Option";
+//#endregion
+export { suffixKey };

package/fe/frontend/src/defaultPages/SchemaPage/hooks/useComConfig.d.ts

@@ -0,0 +1,9 @@
+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;

package/fe/frontend/src/defaultPages/SchemaPage/hooks/useComConfig.js

@@ -0,0 +1,17 @@
+import { useSchemaStore } from "../../../stores/schemaStore.js";
+import { useShallow } from "zustand/react/shallow";
+//#region frontend/src/defaultPages/SchemaPage/hooks/useComConfig.ts
+var useComConfig = ({ comName }) => {
+	const params = useSchemaStore(useShallow((s) => ({
+		comConfig: s.components,
+		api: s.api
+	})));
+	const comConfig = params.comConfig?.[comName];
+	return {
+		config: comConfig?.config,
+		schema: comConfig?.schema,
+		api: params.api
+	};
+};
+//#endregion
+export { useComConfig as default };

package/fe/frontend/src/defaultPages/SchemaPage/index.css

@@ -0,0 +1,87 @@
+.schema-container {
+    --schema-radius: 8px;
+    --schema-soft-border: hsl(var(--border) / 0.68);
+}
+
+.schema-workspace {
+    background:
+        linear-gradient(180deg, hsl(var(--background) / 0.62), hsl(var(--background) / 0.3)), hsl(var(--theme-bg));
+}
+
+.schema-search-region {
+    padding-bottom: 12px;
+}
+
+.schema-search .tc-ui-search {
+    align-items: flex-end;
+    gap: 10px 16px;
+    border: 1px solid var(--schema-soft-border);
+    border-radius: var(--schema-radius);
+    background: hsl(var(--background) / 0.72);
+    padding: 12px;
+}
+
+.schema-search .tc-ui-schema-form {
+    gap: 10px 12px;
+}
+
+.schema-search .tc-ui-form-item {
+    min-width: 212px;
+}
+
+.schema-search .tc-ui-date-picker {
+    min-width: 246px;
+}
+
+.schema-search .tc-ui-label {
+    gap: 5px;
+}
+
+.schema-search .tc-ui-label label {
+    color: hsl(var(--muted-foreground));
+    font-size: 12px;
+    font-weight: 600;
+    line-height: 16px;
+}
+
+.schema-search .tc-ui-date-picker .tc-ui-input input {
+    min-height: 0;
+    padding: 0;
+}
+
+.schema-search .tc-ui-button {
+    height: 34px;
+    border-radius: 7px;
+    padding-inline: 14px;
+}
+
+.schema-search .tc-ui-button:first-of-type {
+    box-shadow: 0 1px 0 hsl(var(--background) / 0.2) inset;
+}
+
+.schema-table-region {
+    min-height: 0;
+    scrollbar-gutter: stable;
+}
+
+.schema-table {
+    display: flex;
+    min-height: 100%;
+    flex-direction: column;
+}
+
+.schema-table-actions {
+    min-height: 0;
+    justify-content: flex-end;
+    gap: 8px;
+    padding-bottom: 10px;
+}
+
+.schema-table-actions:empty {
+    display: none;
+}
+
+.schema-table-actions .tc-ui-button {
+    height: 34px;
+    border-radius: 7px;
+}

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

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

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

@@ -0,0 +1,90 @@
+import "./index.css";
+import { frontendLangKeys } from "../../language/index.js";
+import { getText } from "../../common/language.js";
+import useInit from "../../../../packages/react/hooks/useInit.js";
+import { logIllegalComponentCallback } from "../../common/logFn/index.js";
+import { schemaEventBus } from "../../stores/schemaEventBus.js";
+import { useSchemaStore } from "../../stores/schemaStore.js";
+import useExecuteOnce, { executionPhaseType } from "../../../../packages/react/hooks/useExecuteOnce.js";
+import useCurrentMenuData from "../../hooks/useCurrentMenuData.js";
+import { eventsInfo } from "./data/eventInfo.js";
+import { isAllowed } from "./utils/permissions.js";
+import { components } from "./components/CallCom/data.js";
+import SchemaSearch from "./components/SchemaSearch/index.js";
+import SchemaTable from "./components/SchemaTable/index.js";
+/* empty css       */
+import { schemaConversion } from "./utils/schemaConversion.js";
+import { Suspense, memo, useCallback, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region frontend/src/defaultPages/SchemaPage/index.tsx
+var 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(void 0);
+			setComProps(void 0);
+		}
+		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 });
+	return useMemo(() => {
+		if (schemaStoreAvailable) {
+			const CallCom = components[showCompoentKey];
+			if (!CallCom && showCompoentKey) logIllegalComponentCallback(showCompoentKey);
+			return /* @__PURE__ */ jsxs("div", {
+				className: "schema-container flex h-full min-h-0 w-full flex-col overflow-hidden bg-theme-bg px-4 py-3",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "schema-workspace flex min-h-0 flex-1 flex-col overflow-hidden",
+					children: [/* @__PURE__ */ jsx("div", {
+						className: "schema-search-region shrink-0",
+						children: /* @__PURE__ */ jsx(SchemaSearch, {})
+					}), /* @__PURE__ */ jsx("div", {
+						className: "schema-table-region min-h-0 flex-1 overflow-auto p-3",
+						children: /* @__PURE__ */ jsx(SchemaTable, { ref: TableRef })
+					})]
+				}), /* @__PURE__ */ jsx(Suspense, { children: CallCom && /* @__PURE__ */ jsx(CallCom, { ...comProps }) })]
+			});
+		} else return /* @__PURE__ */ jsx("div", {
+			className: "flex h-full items-center justify-center text-sm text-muted-foreground",
+			children: getText(frontendLangKeys.loading)
+		});
+	}, [
+		comProps,
+		schemaStoreAvailable,
+		showCompoentKey
+	]);
+});
+Schema.displayName = "SchemaPage";
+//#endregion
+export { Schema as default };

package/fe/frontend/src/defaultPages/SchemaPage/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 { LazyExoticComponent, ComponentType as ReactComponentType } from "react";
+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 CallComRenderer = ReactComponentType<any> | LazyExoticComponent<ReactComponentType<any>>;
+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> = Partial<Record<CallComNames, T>>;
+export type CallComComponentsMap = CallComponent<CallComRenderer>;

package/fe/frontend/src/defaultPages/SchemaPage/schemaType.js

@@ -0,0 +1,7 @@
+//#region frontend/src/defaultPages/SchemaPage/schemaType.ts
+var ComEventType = /* @__PURE__ */ function(ComEventType) {
+	ComEventType[ComEventType["close"] = 0] = "close";
+	return ComEventType;
+}({});
+//#endregion
+export { ComEventType };

package/fe/frontend/src/defaultPages/SchemaPage/utils/permissions.d.ts

@@ -0,0 +1,2 @@
+export declare const merge: (...params: number[]) => number;
+export declare const isAllowed: (key1: number, key2: number) => boolean;

package/fe/frontend/src/defaultPages/SchemaPage/utils/permissions.js

@@ -0,0 +1,6 @@
+import { eventsInfo } from "../data/eventInfo.js";
+//#region frontend/src/defaultPages/SchemaPage/utils/permissions.ts
+var merge = (...params) => params.reduce((o, n) => o | n, eventsInfo.none);
+var isAllowed = (key1, key2) => (key1 & key2) !== eventsInfo.none;
+//#endregion
+export { isAllowed, merge };

package/fe/frontend/src/defaultPages/SchemaPage/utils/schemaConversion.d.ts

@@ -0,0 +1,2 @@
+import { SchemaDataType } from "../../../../../model/types/data/schema";
+export declare const schemaConversion: (schema: SchemaDataType, schemaKey: string) => void;

package/fe/frontend/src/defaultPages/SchemaPage/utils/schemaConversion.js

@@ -0,0 +1,66 @@
+import { schemaStore } from "../../../stores/schemaStore.js";
+import "../data/index.js";
+//#region frontend/src/defaultPages/SchemaPage/utils/schemaConversion.ts
+/**
+*
+* 构建出需要optios + 其他字段
+*/
+var buildSchema = (schema, fieldType) => {
+	if (!schema.properties) return;
+	const temSchema = {
+		type: "object",
+		properties: {},
+		required: schema.required
+	};
+	for (const key in schema.properties) {
+		const fieldInfo = schema.properties[key];
+		const fieldKeys = Object.keys(fieldInfo);
+		temSchema.properties[key] = fieldKeys.reduce((o, fieldKey) => {
+			if (fieldKey.indexOf("Option") !== -1) {
+				if (fieldKey === `${fieldType}Option`) o["option"] = fieldInfo[fieldKey];
+			} else o[fieldKey] = fieldInfo[fieldKey];
+			return o;
+		}, {});
+	}
+	return temSchema;
+};
+var schemaConversion = (schema, schemaKey) => {
+	const { schemaCache, setSchemaState } = schemaStore.getState();
+	if (schemaCache.has(schemaKey)) {
+		setSchemaState({ ...schemaCache.get(schemaKey) });
+		return;
+	}
+	const { api, schema: schemaMetadata = {}, componentConfig, tableConfig, searchConfig } = schema;
+	const tableSchema = buildSchema(JSON.parse(JSON.stringify(schemaMetadata)), "table");
+	const searchSchema = buildSchema(JSON.parse(JSON.stringify(schemaMetadata)), "search");
+	let components = {};
+	if (componentConfig) components = Object.keys(componentConfig ?? {}).reduce((o, comKey) => {
+		o[comKey] = {
+			schema: buildSchema(JSON.parse(JSON.stringify(schemaMetadata)), comKey),
+			config: componentConfig[comKey]
+		};
+		return o;
+	}, {});
+	{
+		const { setSchemaState, updateSchemaCache } = schemaStore.getState();
+		setSchemaState({
+			api,
+			components,
+			tableSchema,
+			tableConfig,
+			searchSchema,
+			searchConfig
+		});
+		updateSchemaCache({
+			api,
+			schemaKey,
+			components,
+			tableSchema,
+			tableConfig,
+			searchSchema,
+			searchConfig
+		});
+	}
+};
+//#endregion
+export { schemaConversion };

package/fe/frontend/src/defaultPages/SchemaPage/utils/validator.d.ts

@@ -0,0 +1,7 @@
+import { Ajv } from "ajv";
+export declare const ajvInstance: Ajv;
+type AjvValidatorOptions = {
+    required?: boolean;
+};
+export declare function createAjvValidator(schema: object, options?: AjvValidatorOptions): (rule: object, value: unknown, callback: (errors?: string[]) => void) => void;
+export {};