@ant-design/agentic-ui 2.0.10 → 2.0.13

package/dist/Schema/SchemaForm/index.js

@@ -0,0 +1,285 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+
+// src/Schema/SchemaForm/index.tsx
+import { MinusCircleOutlined } from "@ant-design/icons";
+import { Plus } from "@sofa-design/icons";
+import { Button, Card, Form, Input, InputNumber, Select, Space } from "antd";
+import { merge } from "lodash-es";
+import React, { useCallback, useContext, useEffect, useMemo } from "react";
+import { I18nContext, cnLabels } from "../../I18n";
+var SchemaForm = ({
+  schema,
+  onValuesChange,
+  initialValues,
+  readonly = false
+}) => {
+  const [form] = Form.useForm();
+  const { properties = {} } = (schema == null ? void 0 : schema.component) || {};
+  const { locale = cnLabels } = useContext(I18nContext);
+  const generateRules = useCallback(
+    (property) => {
+      const rules = [];
+      if (property.required) {
+        rules.push({
+          required: true,
+          message: `${(locale == null ? void 0 : locale.inputPlaceholder) || "请输入"} ${property.title || property.description || ""}`
+        });
+      }
+      if (property.type === "string" && property.pattern) {
+        rules.push({
+          pattern: new RegExp(property.pattern),
+          message: property.patternMessage || `${property.title || property.description || ""}格式不正确`
+        });
+      }
+      if (property.type === "number") {
+        rules.push({
+          type: "number",
+          message: `${property.title || property.description || ""}必须是数字`
+        });
+        if (typeof property.minimum === "number") {
+          rules.push({
+            type: "number",
+            min: property.minimum,
+            message: `${property.title || property.description || ""}不能小于 ${property.minimum}`
+          });
+        }
+        if (typeof property.maximum === "number") {
+          rules.push({
+            type: "number",
+            max: property.maximum,
+            message: `${property.title || property.description || ""}不能大于 ${property.maximum}`
+          });
+        }
+      }
+      if (property.type === "array") {
+        if (typeof property.minItems === "number") {
+          rules.push({
+            type: "array",
+            min: property.minItems,
+            message: `${property.title || property.description || ""}至少需要 ${property.minItems} 项`
+          });
+        }
+        if (typeof property.maxItems === "number") {
+          rules.push({
+            type: "array",
+            max: property.maxItems,
+            message: `${property.title || property.description || ""}最多只能有 ${property.maxItems} 项`
+          });
+        }
+      }
+      return rules;
+    },
+    [locale]
+  );
+  const getPropertyTitle = useCallback(
+    (property, key) => {
+      return property.title || property.description || key;
+    },
+    []
+  );
+  const getCommonInputProps = useCallback(
+    (property) => ({
+      placeholder: `${(locale == null ? void 0 : locale.inputPlaceholder) || "请输入"} ${property.title || property.description}`,
+      readOnly: readonly,
+      disabled: readonly
+    }),
+    [readonly, locale]
+  );
+  const renderBasicFormItem = useCallback(
+    (property) => {
+      const commonProps = getCommonInputProps(property);
+      switch (property.type) {
+        case "number":
+          return /* @__PURE__ */ React.createElement(
+            InputNumber,
+            __spreadProps(__spreadValues({}, commonProps), {
+              style: { width: "100%" },
+              min: property.minimum,
+              max: property.maximum,
+              step: property.step || 1
+            })
+          );
+        case "string":
+          if (property.enum) {
+            return /* @__PURE__ */ React.createElement(Select, __spreadValues({}, commonProps), property.enum.map((option) => /* @__PURE__ */ React.createElement(Select.Option, { key: option, value: option }, option)));
+          }
+          return /* @__PURE__ */ React.createElement(Input, __spreadValues({}, commonProps));
+        default:
+          return /* @__PURE__ */ React.createElement(Input, __spreadValues({}, commonProps));
+      }
+    },
+    [getCommonInputProps, locale]
+  );
+  const renderArrayItemContent = useCallback(
+    (name, items, isNested = false) => {
+      if (!items) {
+        return /* @__PURE__ */ React.createElement(Form.Item, { name, style: { margin: 0 } }, /* @__PURE__ */ React.createElement(
+          Input,
+          {
+            placeholder: (locale == null ? void 0 : locale.inputPlaceholder) || "请输入",
+            readOnly: readonly,
+            disabled: readonly
+          }
+        ));
+      }
+      if (items.type === "object" && items.properties) {
+        return /* @__PURE__ */ React.createElement(Space, { direction: "vertical", style: { width: "100%" } }, Object.entries(items.properties).map(([objKey, objProperty]) => /* @__PURE__ */ React.createElement(
+          Form.Item,
+          {
+            key: objKey,
+            label: getPropertyTitle(objProperty, objKey),
+            name: isNested ? [name, objKey] : [name, objKey],
+            rules: generateRules(objProperty),
+            style: { margin: 0 }
+          },
+          renderFormItem(objKey, objProperty)
+        )));
+      }
+      return /* @__PURE__ */ React.createElement(Form.Item, { name, style: { margin: 0 } }, renderBasicFormItem(items));
+    },
+    [readonly, getPropertyTitle, generateRules, renderBasicFormItem]
+  );
+  const renderArrayFormItem = useCallback(
+    (key, property, baseName) => {
+      const fieldName = baseName !== void 0 ? [baseName, key] : key;
+      return /* @__PURE__ */ React.createElement(Form.List, { name: fieldName }, (fields, { add, remove }) => /* @__PURE__ */ React.createElement(React.Fragment, null, fields.map(({ key: fieldKey, name }) => /* @__PURE__ */ React.createElement(
+        Card,
+        {
+          key: fieldKey,
+          size: "small",
+          style: { marginBottom: 8 },
+          extra: !readonly && /* @__PURE__ */ React.createElement(
+            Button,
+            {
+              type: "link",
+              danger: true,
+              size: "small",
+              icon: /* @__PURE__ */ React.createElement(MinusCircleOutlined, null),
+              onClick: () => remove(name)
+            }
+          )
+        },
+        renderArrayItemContent(name, property.items, true)
+      )), !readonly && /* @__PURE__ */ React.createElement(Form.Item, null, /* @__PURE__ */ React.createElement(
+        Button,
+        {
+          type: "dashed",
+          onClick: () => add(),
+          block: true,
+          icon: /* @__PURE__ */ React.createElement(Plus, null)
+        },
+        "添加 ",
+        getPropertyTitle(property, key)
+      ))));
+    },
+    [readonly, renderArrayItemContent, getPropertyTitle]
+  );
+  const renderObjectFormItem = useCallback(
+    (key, property, baseName) => {
+      if (!property.properties) {
+        return /* @__PURE__ */ React.createElement(
+          Input,
+          {
+            placeholder: `${(locale == null ? void 0 : locale.inputPlaceholder) || "请输入"} ${property.title || property.description}`,
+            disabled: true
+          }
+        );
+      }
+      return /* @__PURE__ */ React.createElement(Card, { size: "small", style: { marginTop: 8 } }, Object.entries(property.properties).map(([objKey, objProperty]) => /* @__PURE__ */ React.createElement(
+        Form.Item,
+        {
+          key: objKey,
+          label: getPropertyTitle(objProperty, objKey),
+          name: baseName !== void 0 ? [baseName, key, objKey] : [key, objKey],
+          rules: generateRules(objProperty),
+          style: { marginBottom: 16 }
+        },
+        renderFormItem(objKey, objProperty)
+      )));
+    },
+    [getPropertyTitle, generateRules, locale]
+  );
+  const renderFormItem = useCallback(
+    (key, property, baseName) => {
+      switch (property.type) {
+        case "array":
+          return renderArrayFormItem(key, property, baseName);
+        case "object":
+          return renderObjectFormItem(key, property, baseName);
+        default:
+          return renderBasicFormItem(property);
+      }
+    },
+    [renderArrayFormItem, renderObjectFormItem, renderBasicFormItem]
+  );
+  const defaultValues = useMemo(() => {
+    return Object.entries(properties).reduce(
+      (acc, [key, prop]) => {
+        if (prop.default !== void 0) {
+          acc[key] = prop.default;
+        }
+        return acc;
+      },
+      {}
+    );
+  }, [properties]);
+  useEffect(() => {
+    const mergedValues = merge({}, defaultValues, initialValues);
+    form.setFieldsValue(mergedValues);
+  }, [form, defaultValues, initialValues]);
+  const formItems = useMemo(() => {
+    return Object.entries(properties).map(([key, property]) => {
+      const shouldUseFormItemName = property.type !== "object" && property.type !== "array";
+      return /* @__PURE__ */ React.createElement(
+        Form.Item,
+        {
+          key,
+          label: getPropertyTitle(property, key),
+          name: shouldUseFormItemName ? key : void 0,
+          rules: generateRules(property)
+        },
+        renderFormItem(key, property)
+      );
+    });
+  }, [properties, getPropertyTitle, generateRules, renderFormItem]);
+  return /* @__PURE__ */ React.createElement(
+    Form,
+    {
+      form,
+      layout: "vertical",
+      initialValues: defaultValues,
+      onValuesChange: (_, allValues) => {
+        onValuesChange == null ? void 0 : onValuesChange(_, allValues);
+      },
+      style: {
+        maxWidth: 400,
+        padding: 24,
+        background: "#fff",
+        borderRadius: 8,
+        boxShadow: "0 2px 8px rgba(0,0,0,0.15)"
+      }
+    },
+    formItems
+  );
+};
+export {
+  SchemaForm
+};

package/dist/Schema/SchemaRenderer/index.d.ts

@@ -0,0 +1,81 @@
+import React from 'react';
+import { LowCodeSchema } from '../types';
+export * from './templateEngine';
+export interface SchemaRendererProps {
+    schema: LowCodeSchema;
+    values: Record<string, any>;
+    config?: {
+        ALLOWED_TAGS?: string[];
+        ALLOWED_ATTR?: string[];
+    };
+    fallbackContent?: React.ReactNode;
+    useDefaultValues?: boolean;
+    debug?: boolean;
+    onRenderSuccess?: (html: string) => void;
+    /** 沙箱配置 */
+    sandboxConfig?: {
+        /** 是否启用沙箱模式 */
+        enabled?: boolean;
+        /** 允许的全局对象列表 */
+        allowedGlobals?: string[];
+        /** 禁止的全局对象列表 */
+        forbiddenGlobals?: string[];
+        /** 是否允许访问 DOM */
+        allowDOM?: boolean;
+        /** 执行超时时间（毫秒） */
+        timeout?: number;
+        /** 是否启用严格模式 */
+        strictMode?: boolean;
+    };
+}
+/**
+ * SchemaRenderer 组件 - Schema渲染器组件
+ *
+ * 该组件根据JSON Schema和模板引擎渲染动态内容，支持模板语法、数据验证、错误处理等。
+ * 提供安全的内容渲染、模板解析、错误边界等功能。
+ *
+ * @component
+ * @description Schema渲染器组件，根据Schema和模板渲染动态内容
+ * @param {SchemaRendererProps} props - 组件属性
+ * @param {LowCodeSchema} props.schema - 渲染Schema定义
+ * @param {Record<string, any>} props.values - 渲染数据值
+ * @param {Object} [props.config] - 渲染配置
+ * @param {string[]} [props.config.ALLOWED_TAGS] - 允许的HTML标签
+ * @param {string[]} [props.config.ALLOWED_ATTR] - 允许的HTML属性
+ * @param {React.ReactNode} [props.fallbackContent] - 回退内容
+ * @param {boolean} [props.useDefaultValues=true] - 是否使用默认值
+ * @param {boolean} [props.debug=true] - 是否启用调试模式
+ *
+ * @example
+ * ```tsx
+ * <SchemaRenderer
+ *   schema={{
+ *     component: {
+ *       type: 'div',
+ *       template: '<h1>{{title}}</h1><p>{{content}}</p>'
+ *     }
+ *   }}
+ *   values={{
+ *     title: '欢迎',
+ *     content: '这是一个动态渲染的内容'
+ *   }}
+ *   config={{
+ *     ALLOWED_TAGS: ['h1', 'p', 'div'],
+ *     ALLOWED_ATTR: ['class', 'style']
+ *   }}
+ * />
+ * ```
+ *
+ * @returns {React.ReactElement} 渲染的动态内容组件
+ *
+ * @remarks
+ * - 根据Schema和模板引擎渲染内容
+ * - 支持Mustache模板语法
+ * - 提供数据验证功能
+ * - 包含错误边界处理
+ * - 支持安全的内容渲染
+ * - 提供调试模式
+ * - 支持默认值处理
+ * - 响应式布局适配
+ */
+export declare const SchemaRenderer: React.FC<SchemaRendererProps>;