@luck-design-biz/luckda 1.0.0-alpha → 1.0.1-10

package/es/lowcode/painter/components/VarEditor.js

@@ -0,0 +1,456 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React from 'react';
+import { useDebounceFn, useCreation, useSet, useMemoizedFn } from 'ahooks';
+import { Form, Input, Switch, Segmented, Dropdown, Menu } from 'luck-design/antd';
+import styled from 'styled-components';
+import { set, unset, get, intersection, keys } from 'lodash';
+import { formatMessage } from '@luck-design-biz/base/utils';
+import VisionEditor from "./code-editor/VisionEditor";
+import JSEditor from "./code-editor/JSEditor";
+import TipIcon from "./TipIcon";
+var _I18N_PREFIX_ = 'luckda.lowcode.painter.pageVars';
+var StyledForm = styled(Form).withConfig({
+  displayName: "StyledForm",
+  componentId: "luckda-6530__sc-iq6k7e-0"
+})(["font-size:12px;.ant-form-item{font-size:12px;margin-bottom:0;}label{font-size:12px;}"]);
+var StyledSegmented = styled(Segmented).withConfig({
+  displayName: "StyledSegmented",
+  componentId: "luckda-6530__sc-iq6k7e-1"
+})(["width:100%;"]);
+var EditorWrapper = styled.div.withConfig({
+  displayName: "EditorWrapper",
+  componentId: "luckda-6530__sc-iq6k7e-2"
+})(["width:100%;height:80px;border:1px solid #d9d9d9;border-radius:4px;margin:8px 0;"]);
+var LabelLine = styled.div.withConfig({
+  displayName: "LabelLine",
+  componentId: "luckda-6530__sc-iq6k7e-3"
+})(["height:28px;background:rgba(31,56,88,0.04);border-top:1px solid rgba(31,56,88,0.1);border-bottom:1px solid rgba(31,56,88,0.1);margin:8px 0;line-height:26px;padding:0 12px;", ""], function (props) {
+  return props.$flex ? {
+    display: 'flex',
+    'align-items': 'center',
+    'justify-content': 'space-between'
+  } : null;
+});
+var _EDITOR_OPTIONS = {
+  minimap: {
+    enabled: false
+  },
+  lineNumbers: 'off'
+};
+var _TASK_TYPE_OPTIONS = [{
+  label: formatMessage({
+    id: "".concat(_I18N_PREFIX_, ".taskType.serial"),
+    label: '串行'
+  }),
+  value: 'serial'
+}, {
+  label: formatMessage({
+    id: "".concat(_I18N_PREFIX_, ".taskType.parallel"),
+    label: '并行'
+  }),
+  value: 'parallel'
+}];
+var _METHOD_OPTIONS = [{
+  label: formatMessage({
+    id: "".concat(_I18N_PREFIX_, ".method.jsonp"),
+    label: 'JSONP'
+  }),
+  value: 'jsonp'
+}, {
+  label: formatMessage({
+    id: "".concat(_I18N_PREFIX_, ".method.get"),
+    label: 'GET'
+  }),
+  value: 'get'
+}, {
+  label: formatMessage({
+    id: "".concat(_I18N_PREFIX_, ".taskType.post"),
+    label: 'POST'
+  }),
+  value: 'post'
+}, {
+  label: formatMessage({
+    id: "".concat(_I18N_PREFIX_, ".taskType.put"),
+    label: 'PUT'
+  }),
+  value: 'put'
+}, {
+  label: formatMessage({
+    id: "".concat(_I18N_PREFIX_, ".taskType.delete"),
+    label: 'DELETE'
+  }),
+  value: 'delete'
+}];
+var _DEFAULT_PROCESS_ = {
+  willFetch: {
+    code: 'function willFetch(vars, config){\n\t\n}',
+    title: formatMessage({
+      id: "".concat(_I18N_PREFIX_, ".willFetch"),
+      label: "\u8BF7\u6C42\u53D1\u9001\u524D\u5904\u7406\u51FD\u6570(willFetch)"
+    })
+  },
+  didFetch: {
+    code: 'function didFetch(content){\n\t\n}',
+    title: formatMessage({
+      id: "".concat(_I18N_PREFIX_, ".didFetch"),
+      label: "\u8BF7\u6C42\u53D1\u9001\u524D\u5904\u7406\u51FD\u6570(didFetch)"
+    })
+  },
+  onError: {
+    code: 'function onError(error){\n\t\n}',
+    title: formatMessage({
+      id: "".concat(_I18N_PREFIX_, ".onError"),
+      label: "\u8BF7\u6C42\u53D1\u9001\u524D\u5904\u7406\u51FD\u6570(onError)"
+    })
+  }
+};
+var getBasicFormItem = function getBasicFormItem(form, item) {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Form.Item, {
+    label: formatMessage({
+      id: "".concat(_I18N_PREFIX_, ".name"),
+      label: '名称'
+    })
+  }, form.getFieldDecorator('name', {
+    initialValue: item.name,
+    rules: [{
+      required: true,
+      message: formatMessage({
+        id: "".concat(_I18N_PREFIX_, ".messag.name"),
+        label: '请输入变量名'
+      })
+    }]
+  })( /*#__PURE__*/React.createElement(Input, {
+    size: "small"
+  }))), /*#__PURE__*/React.createElement(Form.Item, {
+    label: formatMessage({
+      id: "".concat(_I18N_PREFIX_, ".desc"),
+      label: '描述'
+    })
+  }, form.getFieldDecorator('desc', {
+    initialValue: item.desc
+  })( /*#__PURE__*/React.createElement(Input, {
+    size: "small",
+    placeholder: formatMessage({
+      id: "".concat(_I18N_PREFIX_, ".placeholder"),
+      label: '请输入'
+    })
+  }))));
+};
+var VarForm = Form.create({
+  name: 'var_form',
+  onValuesChange: function onValuesChange(_ref, values) {
+    var dispatch = _ref.dispatch,
+      item = _ref.item;
+    dispatch({
+      type: 'edit',
+      payload: {
+        id: item.id,
+        data: values
+      }
+    });
+  }
+})(function (_ref2) {
+  var form = _ref2.form,
+    item = _ref2.item,
+    dispatch = _ref2.dispatch;
+  var _useDebounceFn = useDebounceFn(function (code) {
+      dispatch({
+        type: 'edit',
+        payload: {
+          id: item.id,
+          data: {
+            data: code
+          }
+        }
+      });
+    }, {
+      wait: 500
+    }),
+    handleEditorValueChange = _useDebounceFn.run;
+  return /*#__PURE__*/React.createElement(StyledForm, {
+    layout: "horizontal",
+    labelCol: {
+      span: 6
+    },
+    wrapperCol: {
+      span: 17
+    },
+    hideRequiredMark: true
+  }, getBasicFormItem(form, item), /*#__PURE__*/React.createElement(LabelLine, null, formatMessage({
+    id: "".concat(_I18N_PREFIX_, ".data"),
+    label: '数据'
+  }), /*#__PURE__*/React.createElement(TipIcon, {
+    type: "question-circle",
+    style: {
+      marginLeft: 4
+    },
+    title: formatMessage({
+      id: "".concat(_I18N_PREFIX_, ".tip.data"),
+      label: "\u8F93\u5165\u6846\u5185\u652F\u6301\u8F93\u5165JS\u7684\u57FA\u672C\u7C7B\u578B\u53D8\u91CF\uFF0C\u5982\u5B57\u7B26\u4E32:\"string\"\uFF0C\u6570\u5B57:123\uFF0C\u5E03\u5C14\u503C:true/false\uFF0C\u6570\u7EC4:[1,2,3]\uFF0C\u5BF9\u8C61:{\"name\": \"test\"}\uFF0C\u7A7A\u503C:null"
+    })
+  })), /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: '100%',
+      height: 300
+    }
+  }, /*#__PURE__*/React.createElement(VisionEditor, {
+    onChange: handleEditorValueChange
+  }, item.data)));
+});
+var ApiForm = Form.create({
+  name: 'api_form',
+  onValuesChange: function onValuesChange(_ref3, values, all) {
+    var dispatch = _ref3.dispatch,
+      item = _ref3.item;
+    var auto = get(values, 'data.auto');
+    if (auto) {
+      set(all, 'data.taskType', 'parallel');
+    } else if (auto === false) {
+      unset(all, 'data.taskType');
+    }
+    dispatch({
+      type: 'edit',
+      payload: {
+        id: item.id,
+        data: all
+      }
+    });
+  }
+})(function (_ref4) {
+  var _item$data, _item$data2, _item$data3, _item$data4, _item$data5, _item$data6, _item$data7, _item$data8, _item$data9, _item$data10, _item$data11;
+  var form = _ref4.form,
+    item = _ref4.item,
+    dispatch = _ref4.dispatch;
+  var _useSet = useSet(intersection(['willFetch', 'didFetch', 'onError'], keys(item))),
+    _useSet2 = _slicedToArray(_useSet, 2),
+    processSet = _useSet2[0],
+    _useSet2$ = _useSet2[1],
+    add = _useSet2$.add,
+    remove = _useSet2$.remove;
+  var _useDebounceFn2 = useDebounceFn(function (field, code) {
+      var obj = {};
+      set(obj, field, code);
+      form.setFieldsValue(obj);
+    }, {
+      wait: 500
+    }),
+    handleEditorValueChange = _useDebounceFn2.run;
+  var handleAddProcessFun = useMemoizedFn(function (_ref5) {
+    var key = _ref5.key;
+    if (!processSet.has(key)) {
+      add(key);
+      dispatch({
+        type: 'edit',
+        payload: {
+          id: item.id,
+          data: _defineProperty({}, key, _DEFAULT_PROCESS_[key].code)
+        }
+      });
+    }
+  });
+  var handleDelProcessFun = useMemoizedFn(function (_ref6) {
+    var key = _ref6.key;
+    remove(key);
+    dispatch({
+      type: 'edit',
+      payload: {
+        id: item.id,
+        data: _defineProperty({}, key, void 0)
+      }
+    });
+  });
+  var renderProcess = useMemoizedFn(function (processKey) {
+    return processSet.has(processKey) ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(LabelLine, {
+      $flex: true
+    }, _DEFAULT_PROCESS_[processKey].title, /*#__PURE__*/React.createElement(TipIcon, {
+      type: "delete",
+      onClick: function onClick() {
+        return handleDelProcessFun(processKey);
+      }
+    })), /*#__PURE__*/React.createElement(Form.Item, {
+      wrapperCol: {
+        span: 24
+      }
+    }, form.getFieldDecorator(processKey, {
+      initialValue: item[processKey] || _DEFAULT_PROCESS_[processKey].code
+    })( /*#__PURE__*/React.createElement(EditorWrapper, {
+      style: {
+        margin: '4px 18px',
+        width: 'calc(100% - 36px)'
+      }
+    }, /*#__PURE__*/React.createElement(JSEditor, {
+      options: _EDITOR_OPTIONS,
+      onChange: function onChange(code) {
+        return handleEditorValueChange(processKey, code);
+      }
+    }, item[processKey] || _DEFAULT_PROCESS_[processKey].code))))) : null;
+  });
+  var menu = useCreation(function () {
+    return /*#__PURE__*/React.createElement(Menu, {
+      onClick: handleAddProcessFun
+    }, /*#__PURE__*/React.createElement(Menu.Item, {
+      key: "willFetch"
+    }, _DEFAULT_PROCESS_.willFetch.title), /*#__PURE__*/React.createElement(Menu.Item, {
+      key: "didFetch"
+    }, _DEFAULT_PROCESS_.didFetch.title), /*#__PURE__*/React.createElement(Menu.Item, {
+      key: "onError"
+    }, _DEFAULT_PROCESS_.onError.title));
+  }, []);
+  return /*#__PURE__*/React.createElement(StyledForm, {
+    layout: "horizontal",
+    labelCol: {
+      span: 6
+    },
+    wrapperCol: {
+      span: 17
+    },
+    hideRequiredMark: true
+  }, getBasicFormItem(form, item), /*#__PURE__*/React.createElement(Form.Item, {
+    label: formatMessage({
+      id: "".concat(_I18N_PREFIX_, ".auto"),
+      label: '自动加载'
+    })
+  }, form.getFieldDecorator('data.auto', {
+    valuePropName: 'checked',
+    initialValue: Boolean((_item$data = item.data) === null || _item$data === void 0 ? void 0 : _item$data.auto)
+  })( /*#__PURE__*/React.createElement(Switch, {
+    size: "small"
+  }))), form.getFieldValue('data.auto') ? /*#__PURE__*/React.createElement(Form.Item, {
+    label: formatMessage({
+      id: "".concat(_I18N_PREFIX_, ".taskType"),
+      label: '加载方式'
+    })
+  }, form.getFieldDecorator('data.taskType', {
+    initialValue: ((_item$data2 = item.data) === null || _item$data2 === void 0 ? void 0 : _item$data2.taskType) || 'parallel'
+  })( /*#__PURE__*/React.createElement(StyledSegmented, {
+    size: "small",
+    options: _TASK_TYPE_OPTIONS
+  }))) : null, /*#__PURE__*/React.createElement(Form.Item, {
+    label: formatMessage({
+      id: "".concat(_I18N_PREFIX_, ".url"),
+      label: '请求地址'
+    })
+  }, form.getFieldDecorator('data.url', {
+    initialValue: ((_item$data3 = item.data) === null || _item$data3 === void 0 ? void 0 : _item$data3.url) || ''
+  })( /*#__PURE__*/React.createElement(EditorWrapper, null, /*#__PURE__*/React.createElement(VisionEditor, {
+    options: _EDITOR_OPTIONS,
+    onChange: function onChange(code) {
+      return handleEditorValueChange('data.url', code);
+    }
+  }, ((_item$data4 = item.data) === null || _item$data4 === void 0 ? void 0 : _item$data4.url) || '')))), /*#__PURE__*/React.createElement(Form.Item, {
+    label: formatMessage({
+      id: "".concat(_I18N_PREFIX_, ".method"),
+      label: '请求方式'
+    })
+  }, form.getFieldDecorator('data.method', {
+    initialValue: ((_item$data5 = item.data) === null || _item$data5 === void 0 ? void 0 : _item$data5.method) || 'get'
+  })( /*#__PURE__*/React.createElement(StyledSegmented, {
+    size: "small",
+    options: _METHOD_OPTIONS
+  }))), /*#__PURE__*/React.createElement(LabelLine, null, formatMessage({
+    id: "".concat(_I18N_PREFIX_, ".urlParams"),
+    label: '请求参数'
+  }), /*#__PURE__*/React.createElement(TipIcon, {
+    type: "question-circle",
+    style: {
+      marginLeft: 4
+    },
+    title: formatMessage({
+      id: "".concat(_I18N_PREFIX_, ".tip.urlParams"),
+      label: 'URL 请求参数，格式为 {key1:value1,key2:value2} ，等价于 ?key1=value1&key2=value2'
+    })
+  })), /*#__PURE__*/React.createElement(Form.Item, {
+    wrapperCol: {
+      span: 24
+    }
+  }, form.getFieldDecorator('data.params', {
+    initialValue: ((_item$data6 = item.data) === null || _item$data6 === void 0 ? void 0 : _item$data6.params) || ''
+  })( /*#__PURE__*/React.createElement(EditorWrapper, {
+    style: {
+      margin: '4px 18px',
+      width: 'calc(100% - 36px)'
+    }
+  }, /*#__PURE__*/React.createElement(VisionEditor, {
+    options: _EDITOR_OPTIONS,
+    onChange: function onChange(code) {
+      return handleEditorValueChange('data.params', code);
+    }
+  }, ((_item$data7 = item.data) === null || _item$data7 === void 0 ? void 0 : _item$data7.params) || '')))), /*#__PURE__*/React.createElement(LabelLine, null, formatMessage({
+    id: "".concat(_I18N_PREFIX_, ".body"),
+    label: '请求体'
+  }), /*#__PURE__*/React.createElement(TipIcon, {
+    type: "question-circle",
+    style: {
+      marginLeft: 4
+    },
+    title: formatMessage({
+      id: "".concat(_I18N_PREFIX_, ".tip.body"),
+      label: '接口请求体(body)，格式为 {key1:value1,key2:value2}'
+    })
+  })), /*#__PURE__*/React.createElement(Form.Item, {
+    wrapperCol: {
+      span: 24
+    }
+  }, form.getFieldDecorator('data.body', {
+    initialValue: ((_item$data8 = item.data) === null || _item$data8 === void 0 ? void 0 : _item$data8.body) || ''
+  })( /*#__PURE__*/React.createElement(EditorWrapper, {
+    style: {
+      margin: '4px 18px',
+      width: 'calc(100% - 36px)'
+    }
+  }, /*#__PURE__*/React.createElement(VisionEditor, {
+    options: _EDITOR_OPTIONS,
+    onChange: function onChange(code) {
+      return handleEditorValueChange('data.body', code);
+    }
+  }, ((_item$data9 = item.data) === null || _item$data9 === void 0 ? void 0 : _item$data9.body) || '')))), /*#__PURE__*/React.createElement(LabelLine, {
+    $flex: true
+  }, formatMessage({
+    id: "".concat(_I18N_PREFIX_, ".process"),
+    label: '数据处理'
+  }), /*#__PURE__*/React.createElement(Dropdown, {
+    overlay: menu,
+    trigger: ['click'],
+    getPopupContainer: function getPopupContainer() {
+      return document.getElementById('lc-design-workspace');
+    }
+  }, /*#__PURE__*/React.createElement(TipIcon, {
+    type: "plus"
+  }))), /*#__PURE__*/React.createElement("div", {
+    style: {
+      padding: '0 12px'
+    }
+  }, renderProcess('willFetch'), renderProcess('didFetch'), renderProcess('onError')), /*#__PURE__*/React.createElement(LabelLine, null, formatMessage({
+    id: "".concat(_I18N_PREFIX_, ".defaultValue"),
+    label: '默认数据'
+  })), /*#__PURE__*/React.createElement(Form.Item, {
+    wrapperCol: {
+      span: 24
+    }
+  }, form.getFieldDecorator('data.defaultValue', {
+    initialValue: (_item$data10 = item.data) === null || _item$data10 === void 0 ? void 0 : _item$data10.defaultValue
+  })( /*#__PURE__*/React.createElement(EditorWrapper, {
+    style: {
+      margin: '4px 18px',
+      width: 'calc(100% - 36px)'
+    }
+  }, /*#__PURE__*/React.createElement(VisionEditor, {
+    options: _EDITOR_OPTIONS,
+    onChange: function onChange(code) {
+      return handleEditorValueChange('data.defaultValue', code);
+    }
+  }, ((_item$data11 = item.data) === null || _item$data11 === void 0 ? void 0 : _item$data11.defaultValue) || '')))));
+});
+var VarEditor = function VarEditor(_ref7) {
+  var item = _ref7.item,
+    dispatch = _ref7.dispatch;
+  return item.type === 'var' ? /*#__PURE__*/React.createElement(VarForm, {
+    item: item,
+    dispatch: dispatch
+  }) : /*#__PURE__*/React.createElement(ApiForm, {
+    item: item,
+    dispatch: dispatch
+  });
+};
+export default VarEditor;

package/es/lowcode/painter/components/code-editor/BaseEditor.js

@@ -6,38 +6,38 @@ var _excluded = ["onChange", "isFullscreen", "style"],
 import React, { useEffect, useRef, useImperativeHandle, forwardRef } from 'react';
 import * as monaco from 'monaco-editor';
 
-/**
- * BaseEditor 组件是一个封装了 monaco 编辑器的 React 组件，支持前向 ref 引用。
- * 该组件允许用户编辑代码，并在代码发生变更时触发回调函数。
- * 它还支持通过 props 控制编辑器的语言、选项以及是否全屏显示。
- *
- * @component
- * @example
- * const handleEditorChange = (newValue, event) => {
- *   console.log('Editor content changed: ', newValue);
- * };
- * <BaseEditor
- *   language="javascript"
- *   onChange={handleEditorChange}
- *   isFullscreen={false}
- *   width="600px"
- *   height="400px"
- * >
- *   {`function sayHello() {\n  console.log('Hello, World!');\n}`}
- * </BaseEditor>
- *
- * @param {Object} props - 组件的属性。
- * @param {Function} props.onChange - 当编辑器内容变更时调用的函数。接收最新的编辑器内容和事件对象作为参数。
- * @param {boolean} props.isFullscreen - 控制编辑器是否全屏显示。
- * @param {string} [props.language='javascript'] - 设置编辑器的编程语言，默认为 'javascript'。
- * @param {Object} [props.options={}] - 用于自定义编辑器的选项。
- * @param {React.ReactNode} children - 子组件，通常是编辑器的初始代码。
- * @param {string} [props.width] - 编辑器的宽度，默认为 '100%'。
- * @param {string} [props.height] - 编辑器的高度，默认为 '100%'。
- * @param {Object} rest - 传递给 div 容器的其它属性。
- * @param {React.Ref} ref - React ref 引用，用于外部组件调用编辑器实例的方法。
- *
- * @returns {ReactElement} 返回一个 React 元素，其中包含了一个配置好的 monaco 编辑器实例。
+/**
+ * BaseEditor 组件是一个封装了 monaco 编辑器的 React 组件，支持前向 ref 引用。
+ * 该组件允许用户编辑代码，并在代码发生变更时触发回调函数。
+ * 它还支持通过 props 控制编辑器的语言、选项以及是否全屏显示。
+ *
+ * @component
+ * @example
+ * const handleEditorChange = (newValue, event) => {
+ *   console.log('Editor content changed: ', newValue);
+ * };
+ * <BaseEditor
+ *   language="javascript"
+ *   onChange={handleEditorChange}
+ *   isFullscreen={false}
+ *   width="600px"
+ *   height="400px"
+ * >
+ *   {`function sayHello() {\n  console.log('Hello, World!');\n}`}
+ * </BaseEditor>
+ *
+ * @param {Object} props - 组件的属性。
+ * @param {Function} props.onChange - 当编辑器内容变更时调用的函数。接收最新的编辑器内容和事件对象作为参数。
+ * @param {boolean} props.isFullscreen - 控制编辑器是否全屏显示。
+ * @param {string} [props.language='javascript'] - 设置编辑器的编程语言，默认为 'javascript'。
+ * @param {Object} [props.options={}] - 用于自定义编辑器的选项。
+ * @param {React.ReactNode} children - 子组件，通常是编辑器的初始代码。
+ * @param {string} [props.width] - 编辑器的宽度，默认为 '100%'。
+ * @param {string} [props.height] - 编辑器的高度，默认为 '100%'。
+ * @param {Object} rest - 传递给 div 容器的其它属性。
+ * @param {React.Ref} ref - React ref 引用，用于外部组件调用编辑器实例的方法。
+ *
+ * @returns {ReactElement} 返回一个 React 元素，其中包含了一个配置好的 monaco 编辑器实例。
  */
 var BaseEditor = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var onChange = _ref.onChange,

package/es/lowcode/painter/components/code-editor/CssEditor.js

@@ -4,31 +4,31 @@ var _excluded = ["children"];
 import React, { forwardRef } from 'react';
 import BaseEditor from "./BaseEditor";
 
-/**
- * CssEditor 组件是一个专门用于编辑 CSS 代码的 React 组件，它基于 BaseEditor 组件构建。
- * 该组件通过将 language 属性固定设置为 "css"，确保编辑器环境专门用于 CSS 代码编辑。
- * 用户可以传入 CSS 代码作为 children，并通过其他 props 控制 BaseEditor 提供的额外功能。
- *
- * @component
- * @example
- * const handleCssChange = (newCss, event) => {
- *   console.log('CSS changed: ', newCss);
- * };
- * <CssEditor
- *   onChange={handleCssChange}
- *   isFullscreen={false}
- *   width="600px"
- *   height="400px"
- * >
- *   {`body { margin: 0; font-family: Arial, sans-serif; }`}
- * </CssEditor>
- *
- * @param {Object} props - 组件的属性。
- * @param {React.ReactNode} children - 子组件，通常是编辑器的初始 CSS 代码。
- * @param {Object} rest - 传递给 BaseEditor 组件的其他属性。
- * @param {React.Ref} ref - React ref 引用，用于外部组件调用编辑器实例的方法。
- *
- * @returns {ReactElement} 返回一个 React 元素，该元素内部是一个专门用于 CSS 编辑的 BaseEditor 组件实例。
+/**
+ * CssEditor 组件是一个专门用于编辑 CSS 代码的 React 组件，它基于 BaseEditor 组件构建。
+ * 该组件通过将 language 属性固定设置为 "css"，确保编辑器环境专门用于 CSS 代码编辑。
+ * 用户可以传入 CSS 代码作为 children，并通过其他 props 控制 BaseEditor 提供的额外功能。
+ *
+ * @component
+ * @example
+ * const handleCssChange = (newCss, event) => {
+ *   console.log('CSS changed: ', newCss);
+ * };
+ * <CssEditor
+ *   onChange={handleCssChange}
+ *   isFullscreen={false}
+ *   width="600px"
+ *   height="400px"
+ * >
+ *   {`body { margin: 0; font-family: Arial, sans-serif; }`}
+ * </CssEditor>
+ *
+ * @param {Object} props - 组件的属性。
+ * @param {React.ReactNode} children - 子组件，通常是编辑器的初始 CSS 代码。
+ * @param {Object} rest - 传递给 BaseEditor 组件的其他属性。
+ * @param {React.Ref} ref - React ref 引用，用于外部组件调用编辑器实例的方法。
+ *
+ * @returns {ReactElement} 返回一个 React 元素，该元素内部是一个专门用于 CSS 编辑的 BaseEditor 组件实例。
  */
 var CssEditor = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var children = _ref.children,

package/es/lowcode/painter/components/code-editor/FullScreenEditor.js

@@ -8,29 +8,29 @@ import { formatMessage } from '@luck-design-biz/base/utils';
 import styles from "../../style/fullscreen-editor.less";
 import { useFullscreen } from 'ahooks';
 
-/**
- * FullScreenEditor 组件是一个支持全屏编辑模式的 React 组件，它利用提供的 EditorComponent 来实现代码编辑功能。
- * 该组件使用 ahooks 的 useFullscreen 钩子来实现全屏切换，并在全屏模式下调整编辑器布局。
- * 全屏/非全屏模式下编辑器的某些选项可能会有所不同，以适应不同的布局需求。
- *
- * @component
- * @example
- * const MyEditor = React.forwardRef((props, ref) => <BaseEditor {...props} ref={ref} />);
- * <FullScreenEditor
- *   EditorComponent={MyEditor}
- *   onLoad={() => console.log('Editor loaded')}
- * >
- *   {`function sayHello() {\n  console.log('Hello, World!');\n}`}
- * </FullScreenEditor>
- *
- * @param {Object} props - 组件的属性。
- * @param {Function} props.EditorComponent - 用于编辑的组件，该组件需要支持 ref 引用以调用编辑器的方法。
- * @param {Function} [props.onLoad] - 编辑器加载完成时的回调函数。
- * @param {React.ReactNode} children - 传递给 EditorComponent 的 children，通常是初始代码或内容。
- * @param {Object} rest - 传递给 EditorComponent 的其他属性。
- * @param {React.Ref} ref - React ref 引用，用于在外部组件中访问 EditorComponent 实例的方法。
- *
- * @returns {ReactElement} 返回一个 React 元素，其中包含了一个具有全屏切换功能的编辑器界面。
+/**
+ * FullScreenEditor 组件是一个支持全屏编辑模式的 React 组件，它利用提供的 EditorComponent 来实现代码编辑功能。
+ * 该组件使用 ahooks 的 useFullscreen 钩子来实现全屏切换，并在全屏模式下调整编辑器布局。
+ * 全屏/非全屏模式下编辑器的某些选项可能会有所不同，以适应不同的布局需求。
+ *
+ * @component
+ * @example
+ * const MyEditor = React.forwardRef((props, ref) => <BaseEditor {...props} ref={ref} />);
+ * <FullScreenEditor
+ *   EditorComponent={MyEditor}
+ *   onLoad={() => console.log('Editor loaded')}
+ * >
+ *   {`function sayHello() {\n  console.log('Hello, World!');\n}`}
+ * </FullScreenEditor>
+ *
+ * @param {Object} props - 组件的属性。
+ * @param {Function} props.EditorComponent - 用于编辑的组件，该组件需要支持 ref 引用以调用编辑器的方法。
+ * @param {Function} [props.onLoad] - 编辑器加载完成时的回调函数。
+ * @param {React.ReactNode} children - 传递给 EditorComponent 的 children，通常是初始代码或内容。
+ * @param {Object} rest - 传递给 EditorComponent 的其他属性。
+ * @param {React.Ref} ref - React ref 引用，用于在外部组件中访问 EditorComponent 实例的方法。
+ *
+ * @returns {ReactElement} 返回一个 React 元素，其中包含了一个具有全屏切换功能的编辑器界面。
  */
 var FullScreenEditor = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var EditorComponent = _ref.EditorComponent,
@@ -77,8 +77,8 @@ var FullScreenEditor = /*#__PURE__*/forwardRef(function (_ref, ref) {
       },
       overviewRulerLanes: 0,
       scrollbar: {
-        vertical: 'hidden',
-        horizontal: 'hidden',
+        vertical: 'auto',
+        horizontal: 'auto',
         handleMouseWheel: false
       }
     }