@ant-design/agentic-ui 2.0.10 → 2.0.13

package/dist/Schema/SchemaRenderer/index.js

@@ -0,0 +1,610 @@
+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));
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+
+// src/Schema/SchemaRenderer/index.tsx
+import { merge } from "lodash-es";
+import Mustache from "mustache";
+import React, {
+  Component,
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import partialParse from "../../MarkdownEditor/editor/parser/json-parse";
+import { mdDataSchemaValidator } from "../validator";
+import {
+  createSandbox,
+  DEFAULT_SANDBOX_CONFIG
+} from "../../Utils/proxySandbox";
+import { TemplateEngine } from "./templateEngine";
+export * from "./templateEngine";
+var ErrorBoundary = class extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false, error: null };
+  }
+  static getDerivedStateFromError(error) {
+    return { hasError: true, error };
+  }
+  componentDidCatch(error, errorInfo) {
+    console.error("SchemaRenderer error:", error, errorInfo);
+  }
+  render() {
+    if (this.state.hasError) {
+      if (this.props.fallback) {
+        return this.props.fallback;
+      }
+      return /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          style: {
+            padding: "10px",
+            border: "1px solid #f5c2c7",
+            borderRadius: "4px",
+            background: "#f8d7da",
+            color: "#842029"
+          }
+        },
+        /* @__PURE__ */ React.createElement("p", null, "Something went wrong rendering this component.")
+      );
+    }
+    return this.props.children;
+  }
+};
+var SchemaRenderer = ({
+  schema,
+  values,
+  config,
+  fallbackContent,
+  debug = true,
+  useDefaultValues = true,
+  onRenderSuccess,
+  sandboxConfig = {
+    enabled: true,
+    allowDOM: true,
+    timeout: 3e3,
+    strictMode: true
+  }
+}) => {
+  const [renderError, setRenderError] = useState(null);
+  const safeSchema = schema || {};
+  const safeComponent = safeSchema.component || {};
+  const initialValues = safeSchema.initialValues || {};
+  const validationResult = useMemo(() => {
+    try {
+      return mdDataSchemaValidator.validate(safeSchema);
+    } catch (error) {
+      console.error("Schema validation error:", error);
+      return {
+        valid: false,
+        errors: [{ message: "Schema validation failed" }]
+      };
+    }
+  }, [safeSchema]);
+  const { properties = {}, type = "html" } = safeComponent;
+  const templateHtml = safeComponent.schema || "";
+  const templateData = useMemo(() => {
+    try {
+      const defaultValues = useDefaultValues ? Object.entries(properties || {}).reduce(
+        (data, [key, value]) => {
+          if (value && "default" in value) {
+            data[key] = value.default;
+          }
+          return data;
+        },
+        {}
+      ) : {};
+      const mergedData = merge(
+        defaultValues,
+        initialValues || {},
+        values || {}
+      );
+      Object.entries(properties || {}).forEach(([key, property]) => {
+        const val = mergedData[key];
+        if (property.type === "array" && typeof val === "string") {
+          try {
+            mergedData[key] = partialParse(val);
+            if (!Array.isArray(mergedData[key])) {
+              mergedData[key] = val.split(",").map((s) => s.trim());
+            }
+          } catch (e) {
+            mergedData[key] = val.split(",").map((s) => s.trim());
+          }
+        }
+        if (property.type === "object" && typeof val === "string") {
+          try {
+            try {
+              mergedData[key] = partialParse(val);
+            } catch (error) {
+              mergedData[key] = val;
+            }
+          } catch (e) {
+            mergedData[key] = {};
+          }
+        }
+      });
+      const dataWithFallbacks = __spreadValues({}, mergedData);
+      Object.entries(properties || {}).forEach(([key, property]) => {
+        if (!(key in dataWithFallbacks) || dataWithFallbacks[key] === void 0 || dataWithFallbacks[key] === null) {
+          switch (property.type) {
+            case "array":
+              dataWithFallbacks[key] = [];
+              break;
+            case "string":
+              dataWithFallbacks[key] = "-";
+              break;
+            case "number":
+              dataWithFallbacks[key] = "-";
+              break;
+            case "object":
+              dataWithFallbacks[key] = {};
+              break;
+            default:
+              dataWithFallbacks[key] = "-";
+              break;
+          }
+        }
+      });
+      return dataWithFallbacks;
+    } catch (error) {
+      console.error("Error preparing template data:", error);
+      return values || {};
+    }
+  }, [properties, values, useDefaultValues, initialValues]);
+  const renderedHtml = useMemo(() => {
+    try {
+      if (type === "html") {
+        return TemplateEngine.render(templateHtml, templateData);
+      }
+      if (type === "mustache") {
+        return Mustache.render(templateHtml, templateData);
+      }
+      return templateHtml;
+    } catch (error) {
+      console.error("模板渲染错误:", error);
+      setRenderError(
+        `Template rendering error: ${error instanceof Error ? error.message : String(error)}`
+      );
+      return "";
+    }
+  }, [templateHtml, templateData, type, config]);
+  const containerStyle = useMemo(() => {
+    var _a, _b, _c, _d, _e;
+    try {
+      const safeTheme = safeSchema.theme || {};
+      const safeTypography = safeTheme.typography || {};
+      const safeSpacing = safeTheme.spacing || {};
+      return {
+        fontFamily: safeTypography.fontFamily,
+        fontSize: `${(_b = (_a = safeTypography.fontSizes) == null ? void 0 : _a[2]) != null ? _b : "14"}px`,
+        lineHeight: (_d = (_c = safeTypography.lineHeights) == null ? void 0 : _c.normal) != null ? _d : 1.6,
+        width: (_e = safeSpacing.width) != null ? _e : "max-content",
+        margin: "1em"
+      };
+    } catch (error) {
+      console.error("Error applying theme styles:", error);
+      return {
+        fontSize: "13px",
+        lineHeight: 1.6,
+        width: "max-content"
+      };
+    }
+  }, [safeSchema.theme]);
+  const containerRef = useRef(null);
+  useEffect(() => {
+    var _a, _b, _c, _d;
+    if (!containerRef.current || !renderedHtml)
+      return;
+    try {
+      let shadowRoot = containerRef.current.shadowRoot;
+      if (!shadowRoot) {
+        try {
+          shadowRoot = containerRef.current.attachShadow({ mode: "open" });
+        } catch (error) {
+          console.error("Failed to create shadow root:", error);
+          containerRef.current.innerHTML = renderedHtml;
+          return;
+        }
+      }
+      const tempContainer = document.createElement("div");
+      tempContainer.innerHTML = renderedHtml;
+      shadowRoot.innerHTML = "";
+      try {
+        const style = document.createElement("style");
+        const safeTheme = safeSchema.theme || {};
+        const safeTypography = safeTheme.typography || {};
+        style.innerHTML = `
+:host {
+  display: block;
+  font-family: ${safeTypography.fontFamily || "inherit"};
+  font-size: ${(_b = (_a = safeTypography.fontSizes) == null ? void 0 : _a[2]) != null ? _b : "14"}px;
+  line-height: ${(_d = (_c = safeTypography.lineHeights) == null ? void 0 : _c.normal) != null ? _d : 1.6};
+}
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}
+div {
+  white-space: normal;
+  overflow-wrap: normal;
+}
+
+a {
+  text-decoration: none;
+  white-space: normal;
+  overflow-wrap: normal;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+a:visited {
+  color: inherit;
+}
+
+a:active {
+  color: inherit;
+}
+
+        `;
+        shadowRoot.appendChild(style);
+      } catch (styleError) {
+        console.error("Error applying styles:", styleError);
+      }
+      try {
+        const scripts = [];
+        const scriptElements = tempContainer.querySelectorAll("script");
+        scriptElements.forEach((oldScript) => {
+          var _a2;
+          try {
+            (_a2 = oldScript.parentNode) == null ? void 0 : _a2.removeChild(oldScript);
+            const newScript = document.createElement("script");
+            Array.from(oldScript.attributes).forEach((attr) => {
+              newScript.setAttribute(attr.name, attr.value);
+            });
+            newScript.textContent = oldScript.textContent;
+            scripts.push(newScript);
+          } catch (scriptError) {
+            console.error("Error processing script:", scriptError);
+          }
+        });
+        Array.from(tempContainer.childNodes).forEach((node) => {
+          try {
+            shadowRoot == null ? void 0 : shadowRoot.appendChild(node.cloneNode(true));
+          } catch (nodeError) {
+            console.error("Error appending node:", nodeError);
+          }
+        });
+        scripts.forEach((script) => __async(void 0, null, function* () {
+          var _a2, _b2;
+          try {
+            if (!script.src && script.textContent) {
+              if (sandboxConfig.enabled) {
+                const sandbox = createSandbox(__spreadProps(__spreadValues({}, DEFAULT_SANDBOX_CONFIG), {
+                  allowDOM: (_a2 = sandboxConfig.allowDOM) != null ? _a2 : true,
+                  allowedGlobals: sandboxConfig.allowedGlobals || DEFAULT_SANDBOX_CONFIG.allowedGlobals,
+                  forbiddenGlobals: sandboxConfig.forbiddenGlobals || DEFAULT_SANDBOX_CONFIG.forbiddenGlobals,
+                  strictMode: (_b2 = sandboxConfig.strictMode) != null ? _b2 : true,
+                  timeout: sandboxConfig.timeout || 3e3
+                }));
+                try {
+                  const result = yield sandbox.execute(script.textContent, {
+                    shadowRoot,
+                    // 提供一个安全的 window 上下文
+                    safeWindow: {
+                      devicePixelRatio: typeof window !== "undefined" ? window.devicePixelRatio : 1,
+                      innerWidth: typeof window !== "undefined" ? window.innerWidth : 1024,
+                      innerHeight: typeof window !== "undefined" ? window.innerHeight : 768
+                    }
+                  });
+                  if (!result.success && result.error) {
+                    console.error("沙箱脚本执行错误:", result.error);
+                  }
+                } catch (evalError) {
+                  console.error("沙箱执行失败:", evalError);
+                } finally {
+                  sandbox.destroy();
+                }
+              } else {
+                console.warn("沙箱已禁用，使用不安全的脚本执行方式");
+                const scriptFn = new Function(
+                  "shadowRoot",
+                  "window",
+                  script.textContent
+                );
+                try {
+                  scriptFn(shadowRoot, {
+                    devicePixelRatio: window.devicePixelRatio
+                  });
+                } catch (evalError) {
+                  console.error("执行脚本错误:", evalError);
+                }
+              }
+            } else if (script.src) {
+              console.warn("外部脚本暂时不通过沙箱执行:", script.src);
+              try {
+                shadowRoot == null ? void 0 : shadowRoot.appendChild(script);
+              } catch (appendError) {
+                console.error("Error appending external script:", appendError);
+              }
+            }
+          } catch (scriptError) {
+            console.error("Script execution error:", scriptError);
+          }
+        }));
+      } catch (contentError) {
+        console.error("Error processing content:", contentError);
+        try {
+          shadowRoot.innerHTML = renderedHtml;
+        } catch (fallbackError) {
+          console.error("Even fallback rendering failed:", fallbackError);
+        }
+      }
+      onRenderSuccess == null ? void 0 : onRenderSuccess(renderedHtml);
+    } catch (error) {
+      console.error("Critical rendering error:", error);
+      setRenderError(
+        `Critical rendering error: ${error instanceof Error ? error.message : String(error)}`
+      );
+    }
+  }, [renderedHtml, safeSchema.theme]);
+  if (renderError && debug) {
+    return fallbackContent || /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        style: {
+          padding: "16px",
+          border: "1px solid #f5c2c7",
+          borderRadius: "8px",
+          background: "#f8d7da",
+          color: "#842029",
+          boxShadow: "0 2px 4px rgba(0,0,0,0.1)",
+          margin: "10px 0"
+        }
+      },
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          style: {
+            display: "flex",
+            alignItems: "center",
+            marginBottom: "8px"
+          }
+        },
+        /* @__PURE__ */ React.createElement(
+          "svg",
+          {
+            width: "20",
+            height: "20",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            xmlns: "http://www.w3.org/2000/svg",
+            style: { marginRight: "8px" }
+          },
+          /* @__PURE__ */ React.createElement(
+            "path",
+            {
+              d: "M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z",
+              stroke: "#842029",
+              strokeWidth: "2"
+            }
+          ),
+          /* @__PURE__ */ React.createElement(
+            "path",
+            {
+              d: "M12 8V12",
+              stroke: "#842029",
+              strokeWidth: "2",
+              strokeLinecap: "round"
+            }
+          ),
+          /* @__PURE__ */ React.createElement("circle", { cx: "12", cy: "16", r: "1", fill: "#842029" })
+        ),
+        /* @__PURE__ */ React.createElement("h3", { style: { margin: 0, fontSize: "16px", fontWeight: 600 } }, "渲染错误")
+      ),
+      /* @__PURE__ */ React.createElement(
+        "pre",
+        {
+          style: {
+            whiteSpace: "pre-wrap",
+            background: "rgba(255,255,255,0.5)",
+            padding: "8px",
+            borderRadius: "4px",
+            fontSize: "13px",
+            margin: 0
+          }
+        },
+        renderError
+      )
+    );
+  }
+  if (!(validationResult == null ? void 0 : validationResult.valid) && debug) {
+    console.error("Schema validation failed:", validationResult.errors);
+    return fallbackContent || /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        style: {
+          padding: "16px",
+          border: "1px solid #f5c2c7",
+          borderRadius: "8px",
+          background: "#f8d7da",
+          color: "#842029",
+          boxShadow: "0 2px 4px rgba(0,0,0,0.1)",
+          margin: "10px 0"
+        }
+      },
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          style: {
+            display: "flex",
+            alignItems: "center",
+            marginBottom: "12px"
+          }
+        },
+        /* @__PURE__ */ React.createElement(
+          "svg",
+          {
+            width: "20",
+            height: "20",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            xmlns: "http://www.w3.org/2000/svg",
+            style: { marginRight: "8px" }
+          },
+          /* @__PURE__ */ React.createElement(
+            "path",
+            {
+              d: "M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z",
+              stroke: "#842029",
+              strokeWidth: "2"
+            }
+          ),
+          /* @__PURE__ */ React.createElement(
+            "path",
+            {
+              d: "M12 8V12",
+              stroke: "#842029",
+              strokeWidth: "2",
+              strokeLinecap: "round"
+            }
+          ),
+          /* @__PURE__ */ React.createElement("circle", { cx: "12", cy: "16", r: "1", fill: "#842029" })
+        ),
+        /* @__PURE__ */ React.createElement("h3", { style: { margin: 0, fontSize: "16px", fontWeight: 600 } }, "Schema 验证失败")
+      ),
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          style: {
+            background: "rgba(255,255,255,0.5)",
+            padding: "12px",
+            borderRadius: "6px",
+            fontSize: "13px"
+          }
+        },
+        Array.isArray(validationResult.errors) ? /* @__PURE__ */ React.createElement(
+          "ul",
+          {
+            style: {
+              margin: "0",
+              paddingLeft: "20px",
+              listStyleType: "circle"
+            }
+          },
+          validationResult.errors.map((error, index) => /* @__PURE__ */ React.createElement("li", { key: index, style: { marginBottom: "8px" } }, /* @__PURE__ */ React.createElement("div", { style: { fontWeight: 500 } }, error.property || error.path ? /* @__PURE__ */ React.createElement("span", { style: { color: "#d63939" } }, (error.property || error.path).toString().replace("instance.", ""), ":") : null, /* @__PURE__ */ React.createElement(
+            "span",
+            {
+              style: {
+                marginLeft: error.property || error.path ? "4px" : "0"
+              }
+            },
+            error.message
+          )), error.schema ? /* @__PURE__ */ React.createElement(
+            "div",
+            {
+              style: {
+                fontSize: "13px",
+                color: "#5c636a",
+                marginTop: "4px",
+                paddingLeft: "12px"
+              }
+            },
+            "预期: ",
+            JSON.stringify(error.schema)
+          ) : null))
+        ) : /* @__PURE__ */ React.createElement("pre", { style: { whiteSpace: "pre-wrap", margin: 0 } }, JSON.stringify(validationResult.errors, null, 2))
+      )
+    );
+  }
+  return /* @__PURE__ */ React.createElement(ErrorBoundary, { fallback: fallbackContent }, /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      ref: containerRef,
+      className: "schemaRenderer",
+      "data-testid": "schema-renderer",
+      style: containerStyle
+    }
+  ));
+};
+export {
+  SchemaRenderer
+};

package/dist/Schema/SchemaRenderer/templateEngine.js

@@ -0,0 +1,26 @@
+// src/Schema/SchemaRenderer/templateEngine.ts
+var TemplateEngine = class {
+  static escapeHtml(unsafe) {
+    return unsafe.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;");
+  }
+  static render(template, data) {
+    const escapedData = Object.entries(data).reduce((acc, [key, value]) => {
+      acc[key] = typeof value === "string" ? this.escapeHtml(value) : value;
+      if (typeof value === "object" && value !== null && value !== void 0) {
+        acc[key] = JSON.stringify(value);
+      }
+      return acc;
+    }, {});
+    const rendered = Object.entries(escapedData).reduce(
+      (html, [key, value]) => {
+        const placeholder = new RegExp(`{{\\s*${key}\\s*}}`, "g");
+        return html.replace(placeholder, String(value));
+      },
+      template
+    );
+    return rendered;
+  }
+};
+export {
+  TemplateEngine
+};

package/dist/Schema/index.js

@@ -0,0 +1,15 @@
+// src/Schema/index.ts
+import { SchemaEditor } from "./SchemaEditor";
+import { SchemaForm } from "./SchemaForm";
+import { SchemaRenderer, TemplateEngine } from "./SchemaRenderer";
+import { LowCodeSchema } from "./types";
+import { SchemaValidator, mdDataSchemaValidator } from "./validator";
+export {
+  LowCodeSchema,
+  SchemaEditor,
+  SchemaForm,
+  SchemaRenderer,
+  SchemaValidator,
+  TemplateEngine,
+  mdDataSchemaValidator as validator
+};

package/dist/Schema/validator.js

@@ -0,0 +1,42 @@
+// src/Schema/validator.ts
+import Ajv from "ajv";
+import addFormats from "ajv-formats";
+import lowcodeSchema from "./schema.definition.json";
+var SchemaValidator = class {
+  constructor() {
+    this.ajv = new Ajv({
+      allErrors: true,
+      verbose: true,
+      strict: false
+    });
+    addFormats(this.ajv);
+  }
+  /**
+   * 验证JSON数据是否符合低代码组件规范
+   * @param data 要验证的JSON数据
+   * @returns 验证结果对象
+   */
+  validate(data) {
+    const validate = this.ajv.compile(lowcodeSchema);
+    const valid = validate(data);
+    if (!valid) {
+      const errors = (validate.errors || []).map((error) => ({
+        path: error.instancePath,
+        message: error.message || "未知错误"
+      }));
+      return {
+        valid: false,
+        errors
+      };
+    }
+    return {
+      valid: true,
+      errors: []
+    };
+  }
+};
+var mdDataSchemaValidator = new SchemaValidator();
+export {
+  SchemaValidator,
+  mdDataSchemaValidator
+};