@ant-design/agentic-ui 2.0.0

package/dist/schema/SchemaEditor/index.js

@@ -0,0 +1,291 @@
+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/SchemaEditor/index.tsx
+import { CircleDashed, Copy, Play } from "@sofa-design/icons";
+import { Button, ConfigProvider, message } from "antd";
+import classNames from "classnames";
+import copy from "copy-to-clipboard";
+import React, {
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState
+} from "react";
+import { I18nContext } from "../../i18n";
+import { SchemaRenderer } from "../SchemaRenderer";
+import { mdDataSchemaValidator } from "../validator";
+import { AceEditorWrapper } from "./AceEditorWrapper";
+import { useStyle } from "./style";
+function SchemaEditor({
+  initialSchema,
+  initialValues = {},
+  height = 600,
+  readonly = false,
+  onChange,
+  className = "",
+  showPreview = true,
+  previewConfig
+}) {
+  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
+  const prefixCls = getPrefixCls("schema-editor");
+  const { wrapSSR, hashId } = useStyle(prefixCls);
+  const { locale } = useContext(I18nContext);
+  const [schema, setSchema] = useState(() => {
+    return initialSchema || {
+      version: "1.0.0",
+      name: locale["schemaEditor.untitledSchema"],
+      description: "",
+      component: {
+        type: "html",
+        schema: "<div>Hello World</div>"
+      }
+    };
+  });
+  const [values, setValues] = useState(
+    initialValues || {}
+  );
+  const [schemaString, setSchemaString] = useState("");
+  const [htmlContent, setHtmlContent] = useState("");
+  const [validationError, setValidationError] = useState("");
+  const [renderedSchema, setRenderedSchema] = useState(
+    {}
+  );
+  const [isSchemaRendered, setIsSchemaRendered] = useState(false);
+  const schemaToJson = useCallback(
+    (schemaData) => {
+      try {
+        return JSON.stringify(schemaData, null, 2);
+      } catch (error) {
+        console.error(locale["schemaEditor.schemaSerializationError"], error);
+        return "{}";
+      }
+    },
+    [locale]
+  );
+  const jsonToSchema = useCallback(
+    (jsonString) => {
+      try {
+        return JSON.parse(jsonString);
+      } catch (error) {
+        console.error(locale["schemaEditor.schemaParseError"], error);
+        return null;
+      }
+    },
+    [locale]
+  );
+  useEffect(() => {
+    var _a;
+    setSchemaString(schemaToJson(schema));
+    setHtmlContent(((_a = schema.component) == null ? void 0 : _a.schema) || "");
+  }, [schema, schemaToJson]);
+  const validateSchema = useCallback(
+    (schemaData) => {
+      var _a;
+      try {
+        const result = mdDataSchemaValidator.validate(schemaData);
+        if (!result.valid) {
+          return ((_a = result.errors) == null ? void 0 : _a.map((err) => err.message).join(", ")) || locale["schemaEditor.validationFailed"];
+        }
+        return "";
+      } catch (error) {
+        return error instanceof Error ? error.message : locale["schemaEditor.validationFailed"];
+      }
+    },
+    [locale]
+  );
+  const handleSchemaChange = useCallback(
+    (newSchema) => {
+      setSchema(newSchema);
+      setValidationError(validateSchema(newSchema));
+      onChange == null ? void 0 : onChange(newSchema, values);
+    },
+    [values, onChange, validateSchema]
+  );
+  const handleHtmlChange = useCallback(
+    (newHtml) => {
+      setHtmlContent(newHtml);
+      const newSchema = __spreadProps(__spreadValues({}, schema), {
+        component: __spreadProps(__spreadValues({}, schema.component), {
+          schema: newHtml
+        })
+      });
+      handleSchemaChange(newSchema);
+    },
+    [schema, handleSchemaChange]
+  );
+  const handleJsonChange = useCallback(
+    (newJsonString) => {
+      var _a;
+      setSchemaString(newJsonString);
+      const newSchema = jsonToSchema(newJsonString);
+      if (newSchema) {
+        handleSchemaChange(newSchema);
+        setHtmlContent(((_a = newSchema.component) == null ? void 0 : _a.schema) || "");
+      }
+    },
+    [jsonToSchema, handleSchemaChange]
+  );
+  const handleRunClick = useCallback(() => {
+    setRenderedSchema(__spreadValues({}, schema));
+    if (schema.initialValues) {
+      setValues(schema.initialValues);
+    }
+    setIsSchemaRendered(true);
+  }, [schema, setRenderedSchema, setValues, setIsSchemaRendered]);
+  const handleCopyContent = useCallback(
+    (content, type) => {
+      if (!content || !content.trim()) {
+        message.warning(locale["schemaEditor.noContentToCopy"]);
+        return;
+      }
+      try {
+        const ok = copy(content);
+        if (ok) {
+          message.success(
+            `${type === "html" ? "HTML" : "JSON"}${locale["schemaEditor.copySuccess"]}`
+          );
+        } else {
+          message.error(locale["schemaEditor.copyFailed"]);
+        }
+      } catch (error) {
+        message.error(locale["schemaEditor.copyFailed"]);
+        console.error(locale["schemaEditor.copyFailed"], error);
+      }
+    },
+    [locale]
+  );
+  const handleCopyHtml = useCallback(() => {
+    handleCopyContent(htmlContent, "html");
+  }, [htmlContent, handleCopyContent]);
+  const handleCopyJson = useCallback(() => {
+    handleCopyContent(schemaString, "json");
+  }, [schemaString, handleCopyContent]);
+  const renderPreview = useMemo(() => {
+    if (!showPreview)
+      return null;
+    return /* @__PURE__ */ React.createElement("div", { className: classNames(`${prefixCls}-preview`, hashId) }, /* @__PURE__ */ React.createElement("div", { className: classNames(`${prefixCls}-preview-header`, hashId) }, /* @__PURE__ */ React.createElement("h3", null, locale["schemaEditor.realtimePreview"]), validationError && /* @__PURE__ */ React.createElement("div", { className: classNames(`${prefixCls}-error`, hashId) }, /* @__PURE__ */ React.createElement("span", null, "⚠️ ", validationError))), /* @__PURE__ */ React.createElement("div", { className: classNames(`${prefixCls}-preview-content`, hashId) }, isSchemaRendered ? /* @__PURE__ */ React.createElement(
+      SchemaRenderer,
+      {
+        schema: renderedSchema,
+        values,
+        config: previewConfig,
+        fallbackContent: /* @__PURE__ */ React.createElement("div", { className: classNames(`${prefixCls}-fallback`, hashId) }, /* @__PURE__ */ React.createElement("p", null, locale["schemaEditor.previewLoadFailed"]), /* @__PURE__ */ React.createElement("p", null, locale["schemaEditor.checkSchemaFormat"]))
+      }
+    ) : /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: classNames(
+          `${prefixCls}-preview-content-empty`,
+          hashId
+        )
+      },
+      /* @__PURE__ */ React.createElement(CircleDashed, { style: { width: 80, height: 80 } }),
+      /* @__PURE__ */ React.createElement("p", null, locale["schemaEditor.inputSchemaToPreview"])
+    )));
+  }, [
+    showPreview,
+    isSchemaRendered,
+    renderedSchema,
+    values,
+    validationError,
+    previewConfig,
+    hashId,
+    locale,
+    prefixCls
+  ]);
+  const renderHtmlEditor = useMemo(() => {
+    return /* @__PURE__ */ React.createElement("div", { className: classNames(`${prefixCls}-html`, hashId) }, /* @__PURE__ */ React.createElement("div", { className: classNames(`${prefixCls}-html-header`, hashId) }, /* @__PURE__ */ React.createElement("h3", null, locale["schemaEditor.htmlTemplate"]), /* @__PURE__ */ React.createElement("div", { style: { display: "flex" } }, /* @__PURE__ */ React.createElement(
+      Button,
+      {
+        type: "text",
+        icon: /* @__PURE__ */ React.createElement(Play, { style: { width: 14, height: 14 } }),
+        onClick: handleRunClick
+      },
+      locale["schemaEditor.run"]
+    ), /* @__PURE__ */ React.createElement(
+      Button,
+      {
+        type: "text",
+        icon: /* @__PURE__ */ React.createElement(Copy, { style: { width: 14, height: 14 } }),
+        onClick: handleCopyHtml
+      }
+    ))), /* @__PURE__ */ React.createElement("div", { className: classNames(`${prefixCls}-html-content`, hashId) }, /* @__PURE__ */ React.createElement(
+      AceEditorWrapper,
+      {
+        value: htmlContent,
+        language: "html",
+        onChange: handleHtmlChange,
+        readonly
+      }
+    )));
+  }, [
+    htmlContent,
+    handleHtmlChange,
+    readonly,
+    hashId,
+    locale,
+    handleRunClick,
+    handleCopyHtml,
+    prefixCls
+  ]);
+  const renderJsonEditor = useMemo(() => {
+    return /* @__PURE__ */ React.createElement("div", { className: classNames(`${prefixCls}-json`, hashId) }, /* @__PURE__ */ React.createElement("div", { className: classNames(`${prefixCls}-json-header`, hashId) }, /* @__PURE__ */ React.createElement("h3", null, locale["schemaEditor.schemaJson"]), /* @__PURE__ */ React.createElement("div", { style: { display: "flex" } }, /* @__PURE__ */ React.createElement(
+      Button,
+      {
+        type: "text",
+        icon: /* @__PURE__ */ React.createElement(Copy, { style: { width: 14, height: 14 } }),
+        onClick: handleCopyJson
+      }
+    ))), /* @__PURE__ */ React.createElement("div", { className: classNames(`${prefixCls}-json-content`, hashId) }, /* @__PURE__ */ React.createElement(
+      AceEditorWrapper,
+      {
+        value: schemaString,
+        language: "json",
+        onChange: handleJsonChange,
+        readonly
+      }
+    )));
+  }, [
+    schemaString,
+    handleJsonChange,
+    readonly,
+    hashId,
+    locale,
+    handleCopyJson,
+    prefixCls
+  ]);
+  return wrapSSR(
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: classNames(prefixCls, className, hashId),
+        style: { height: typeof height === "number" ? `${height}px` : height }
+      },
+      /* @__PURE__ */ React.createElement("div", { className: classNames(`${prefixCls}-container`, hashId) }, /* @__PURE__ */ React.createElement("div", { className: classNames(`${prefixCls}-left`, hashId) }, renderPreview), /* @__PURE__ */ React.createElement("div", { className: classNames(`${prefixCls}-right`, hashId) }, renderHtmlEditor, renderJsonEditor))
+    )
+  );
+}
+var SchemaEditor_default = SchemaEditor;
+export {
+  SchemaEditor,
+  SchemaEditor_default as default
+};

package/dist/schema/SchemaEditor/style.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare function useStyle(prefixCls?: string): {
+    wrapSSR: (node: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").JSX.Element;
+    hashId: string;
+};

package/dist/schema/SchemaEditor/style.js

@@ -0,0 +1,274 @@
+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/SchemaEditor/style.ts
+import { useEditorStyleRegister } from "../../hooks/useStyle";
+var genStyle = (token) => {
+  return {
+    // 主容器样式
+    [`${token.componentCls}`]: {
+      display: "flex",
+      flexDirection: "column",
+      background: "#ffffff",
+      borderRadius: "8px",
+      overflow: "hidden",
+      fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif'
+    },
+    [`${token.componentCls}-container`]: {
+      display: "flex",
+      flex: 1,
+      gap: "4px",
+      background: "#FDFEFF",
+      minHeight: 0
+    },
+    [`${token.componentCls}-left`]: {
+      display: "flex",
+      flexDirection: "column",
+      flex: 1,
+      minWidth: 0
+    },
+    [`${token.componentCls}-right`]: {
+      flex: 1,
+      minWidth: 0,
+      display: "flex",
+      flexDirection: "column",
+      gap: "4px",
+      padding: "4px",
+      borderRadius: "8px",
+      background: "rgba(9, 30, 66, 0.07)",
+      overflow: "auto"
+    },
+    // HTML编辑器样式
+    [`${token.componentCls}-html`]: {
+      flex: 1,
+      display: "flex",
+      flexDirection: "column",
+      gap: "8px",
+      padding: "12px",
+      background: "#FDFEFF",
+      border: "1px solid rgba(9, 30, 66, 0.07)",
+      borderRadius: "8px"
+    },
+    [`${token.componentCls}-html-header`]: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "space-between"
+    },
+    [`${token.componentCls}-html-header h3`]: {
+      margin: 0,
+      fontSize: "var(--font-size-base)",
+      fontWeight: 600,
+      color: "#495057"
+    },
+    [`${token.componentCls}-html-header button`]: {
+      display: "flex",
+      alignItems: "center",
+      gap: "4px",
+      padding: "3px 8px",
+      fontSize: "var(--font-size-sm)",
+      color: "#626F86"
+    },
+    [`${token.componentCls}-html-content`]: {
+      flex: 1,
+      minHeight: 0,
+      position: "relative"
+    },
+    [`${token.componentCls}-html-content .ace_editor`]: {
+      height: "100% !important",
+      fontSize: "var(--font-size-base)"
+    },
+    // JSON编辑器样式
+    [`${token.componentCls}-json`]: {
+      flex: 1,
+      display: "flex",
+      flexDirection: "column",
+      gap: "8px",
+      padding: "12px",
+      background: "#FDFEFF",
+      border: "1px solid rgba(9, 30, 66, 0.07)",
+      borderRadius: "8px"
+    },
+    [`${token.componentCls}-json-header`]: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "space-between"
+    },
+    [`${token.componentCls}-json-header h3`]: {
+      margin: 0,
+      fontSize: "var(--font-size-base)",
+      fontWeight: 600,
+      color: "#495057"
+    },
+    [`${token.componentCls}-json-header button`]: {
+      display: "flex",
+      alignItems: "center",
+      gap: "4px",
+      padding: "3px 8px",
+      fontSize: "var(--font-size-sm)",
+      color: "#626F86"
+    },
+    [`${token.componentCls}-json-content`]: {
+      flex: 1,
+      minHeight: 0,
+      position: "relative"
+    },
+    [`${token.componentCls}-json-content .ace_editor`]: {
+      height: "100% !important",
+      fontSize: "var(--font-size-base)"
+    },
+    // 预览区域样式
+    [`${token.componentCls}-preview`]: {
+      flex: 1,
+      display: "flex",
+      flexDirection: "column",
+      minHeight: 0,
+      border: "1px solid rgba(9, 30, 66, 0.07)",
+      borderRadius: "8px",
+      background: "#fff",
+      boxShadow: "0px 1.5px 2px -1px rgba(0, 19, 41, 0.07)"
+    },
+    [`${token.componentCls}-preview-header`]: {
+      padding: "12px",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "space-between"
+    },
+    [`${token.componentCls}-preview-header h3`]: {
+      margin: 0,
+      fontSize: "var(--font-size-base)",
+      fontWeight: 600,
+      color: "#2c3e5d"
+    },
+    [`${token.componentCls}-error`]: {
+      background: "#fff5f5",
+      border: "1px solid #fed7d7",
+      borderRadius: "4px",
+      padding: "8px 12px",
+      fontSize: "var(--font-size-sm)",
+      color: "#c53030",
+      maxWidth: "300px",
+      wordBreak: "break-word"
+    },
+    [`${token.componentCls}-preview-content`]: {
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "center",
+      flex: 1,
+      padding: "16px",
+      overflow: "auto",
+      background: "#ffffff",
+      borderRadius: "0 0 8px 8px"
+    },
+    [`${token.componentCls}-preview-content-empty`]: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "8px",
+      alignItems: "center"
+    },
+    [`${token.componentCls}-preview-content-empty p`]: {
+      fontSize: "var(--font-size-base)",
+      textAlign: "center",
+      color: "#8590A2"
+    },
+    [`${token.componentCls}-fallback`]: {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      justifyContent: "center",
+      height: "100%",
+      color: "#6c757d",
+      textAlign: "center"
+    },
+    [`${token.componentCls}-fallback p`]: {
+      margin: "4px 0",
+      fontSize: "var(--font-size-base)"
+    },
+    // 响应式设计
+    "@media (max-width: 768px)": {
+      [`${token.componentCls}-container`]: {
+        flexDirection: "column"
+      },
+      [`${token.componentCls}-left`]: {
+        borderRight: "none",
+        borderBottom: "1px solid #e1e5e9"
+      },
+      [`${token.componentCls}-html, ${token.componentCls}-json`]: {
+        minHeight: "200px"
+      }
+    },
+    // 滚动条样式
+    [`${token.componentCls}-preview-content::-webkit-scrollbar`]: {
+      width: "6px"
+    },
+    [`${token.componentCls}-preview-content::-webkit-scrollbar-track`]: {
+      background: "#f1f1f1",
+      borderRadius: "3px"
+    },
+    [`${token.componentCls}-preview-content::-webkit-scrollbar-thumb`]: {
+      background: "#c1c1c1",
+      borderRadius: "3px"
+    },
+    [`${token.componentCls}-preview-content::-webkit-scrollbar-thumb:hover`]: {
+      background: "#a8a8a8"
+    },
+    // 编辑器主题适配
+    [`${token.componentCls} .ace_editor`]: {
+      borderRadius: "8px",
+      background: "rgba(9, 30, 66, 0.03)",
+      color: "#343a45"
+    },
+    [`${token.componentCls} .ace_editor.ace_dark`]: {
+      background: "#2d3748",
+      color: "#e2e8f0"
+    },
+    // 加载状态
+    [`${token.componentCls}-loading`]: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      height: "100%",
+      color: "#6c757d"
+    },
+    [`${token.componentCls}-loading::after`]: {
+      content: "''",
+      width: "20px",
+      height: "20px",
+      border: "2px solid #e1e5e9",
+      borderTop: "2px solid #3182ce",
+      borderRadius: "50%",
+      animationName: "spin",
+      animationDuration: "1s",
+      animationTimingFunction: "linear",
+      animationIterationCount: "infinite",
+      marginLeft: "8px"
+    }
+  };
+};
+function useStyle(prefixCls) {
+  return useEditorStyleRegister("SchemaEditor", (token) => {
+    const schemaEditorToken = __spreadProps(__spreadValues({}, token), {
+      componentCls: `.${prefixCls}`
+    });
+    return [genStyle(schemaEditorToken)];
+  });
+}
+export {
+  useStyle
+};

package/dist/schema/SchemaForm/index.d.ts

@@ -0,0 +1,61 @@
+import React from 'react';
+import { LowCodeSchema } from '../../schema/types';
+interface SchemaFormProps {
+    schema: LowCodeSchema;
+    onValuesChange?: (_: Record<string, any>, values: Record<string, any>) => void;
+    initialValues?: Record<string, any>;
+    readonly?: boolean;
+}
+/**
+ * SchemaForm 组件 - 基于Schema的表单组件
+ *
+ * 该组件根据JSON Schema自动生成表单，支持多种数据类型和验证规则。
+ * 提供动态表单生成、数据验证、只读模式等功能。
+ *
+ * @component
+ * @description 基于Schema的表单组件，自动生成表单字段和验证规则
+ * @param {SchemaFormProps} props - 组件属性
+ * @param {LowCodeSchema} props.schema - 表单Schema定义
+ * @param {Function} [props.onValuesChange] - 表单值变化回调
+ * @param {Record<string, any>} [props.initialValues] - 初始值
+ * @param {boolean} [props.readonly=false] - 是否只读模式
+ *
+ * @example
+ * ```tsx
+ * <SchemaForm
+ *   schema={{
+ *     component: {
+ *       properties: {
+ *         name: {
+ *           type: 'string',
+ *           title: '姓名',
+ *           required: true
+ *         },
+ *         age: {
+ *           type: 'number',
+ *           title: '年龄',
+ *           minimum: 0,
+ *           maximum: 150
+ *         }
+ *       }
+ *     }
+ *   }}
+ *   onValuesChange={(changed, values) => console.log(values)}
+ *   initialValues={{ name: '张三', age: 25 }}
+ * />
+ * ```
+ *
+ * @returns {React.ReactElement} 渲染的Schema表单组件
+ *
+ * @remarks
+ * - 根据JSON Schema自动生成表单
+ * - 支持多种数据类型（string、number、array、object等）
+ * - 提供完整的验证规则支持
+ * - 支持只读模式
+ * - 提供国际化支持
+ * - 支持嵌套对象和数组
+ * - 提供动态字段添加/删除
+ * - 响应式布局适配
+ */
+export declare const SchemaForm: React.FC<SchemaFormProps>;
+export {};