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

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

@@ -10,6 +10,7 @@ import * as monaco from 'monaco-editor';
 import { isNil, uniqBy, compact } from 'lodash';
 import prettier from 'prettier/standalone';
 import parserBabel from 'prettier/parser-babel';
+import useCombinedRefs from "../../../engine/tools/useCombinedRefs";
 import BaseEditor from "./BaseEditor";
 function capitalizeFirstLetter(string) {
   if (isNil(string)) return null;
@@ -104,31 +105,32 @@ var prettierFormetter = function prettierFormetter(unformattedCode) {
   }
 };
 
-/**
- * JSEditor 组件是一个专为 JavaScript 编辑设计的 React 组件，它基于 BaseEditor 组件构建，并集成了自动完成功能。
- * 该组件利用 monaco-editor 提供的 API，通过 setupAutocomplete 函数设置自动完成项，从而增强代码编辑体验。
- * 自动完成逻辑包括从预定义的自动完成模块中加载补全项，以及在编辑器中键入特定字符（如"."）时触发补全建议。
- *
- * @component
- * @example
- * <JSEditor
- *   language="javascript"
- *   options={{ fontSize: 14 }}
- * >
- *   {`function sayHello() {\n  console.log('Hello, World!');\n}`}
- * </JSEditor>
- *
- * @param {Object} props - 组件的属性。
- * @param {React.ReactNode} children - 传递给 BaseEditor 的 children，通常是初始代码或内容。
- * @param {Object} rest - 传递给 BaseEditor 组件的其他属性。
- * @param {React.Ref} ref - React ref 引用，用于在外部组件中访问 BaseEditor 实例的方法。
- *
- * @returns {ReactElement} 返回一个 React 元素，其中包含了一个具有自动完成功能的 JavaScript 编辑器实例。
+/**
+ * JSEditor 组件是一个专为 JavaScript 编辑设计的 React 组件，它基于 BaseEditor 组件构建，并集成了自动完成功能。
+ * 该组件利用 monaco-editor 提供的 API，通过 setupAutocomplete 函数设置自动完成项，从而增强代码编辑体验。
+ * 自动完成逻辑包括从预定义的自动完成模块中加载补全项，以及在编辑器中键入特定字符（如"."）时触发补全建议。
+ *
+ * @component
+ * @example
+ * <JSEditor
+ *   language="javascript"
+ *   options={{ fontSize: 14 }}
+ * >
+ *   {`function sayHello() {\n  console.log('Hello, World!');\n}`}
+ * </JSEditor>
+ *
+ * @param {Object} props - 组件的属性。
+ * @param {React.ReactNode} children - 传递给 BaseEditor 的 children，通常是初始代码或内容。
+ * @param {Object} rest - 传递给 BaseEditor 组件的其他属性。
+ * @param {React.Ref} ref - React ref 引用，用于在外部组件中访问 BaseEditor 实例的方法。
+ *
+ * @returns {ReactElement} 返回一个 React 元素，其中包含了一个具有自动完成功能的 JavaScript 编辑器实例。
  */
-var JSEditor = /*#__PURE__*/forwardRef(function (_ref2, ref) {
+var JSEditor = /*#__PURE__*/forwardRef(function (_ref2, outRef) {
   var children = _ref2.children,
     keywords = _ref2.keywords,
     rest = _objectWithoutProperties(_ref2, _excluded);
+  var ref = useCombinedRefs(outRef);
   useEffect(function () {
     var originalGetValue = ref.current.editor.getValue.bind(ref.current.editor);
     ref.current.editor.getValue = function () {

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

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

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

@@ -0,0 +1,81 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["children"];
+import React, { forwardRef } from 'react';
+import * as monaco from 'monaco-editor';
+import BaseEditor from "./BaseEditor";
+
+// 定义一个简单的JavaScript语言
+monaco.languages.register({
+  id: 'vision'
+});
+
+// 定义语言的配置
+monaco.languages.setLanguageConfiguration('vision', {
+  brackets: [['{', '}'], ['[', ']'], ['(', ')']],
+  autoClosingPairs: [{
+    open: '{',
+    close: '}'
+  }, {
+    open: '[',
+    close: ']'
+  }, {
+    open: '(',
+    close: ')'
+  }, {
+    open: '"',
+    close: '"',
+    notIn: ['string']
+  }, {
+    open: "'",
+    close: "'",
+    notIn: ['string']
+  }]
+});
+
+// 定义语言的词法规则
+monaco.languages.setMonarchTokensProvider('vision', {
+  tokenizer: {
+    root: [[/\b(true|false|null)\b/, 'constant'], [/[{}()\[\]]/, '@brackets'], [/[0-9]+/, 'number'], [/["'](.*?)["']/, 'string'],
+    // 新增模板字符串的词法规则
+    [/\$\{/, 'delimiter.curly'],
+    // 添加对模板表达式起始的支持
+    [/\`/, {
+      token: 'string.quote',
+      bracket: '@open',
+      next: '@template_string'
+    }] // 处理模板字符串
+    ],
+    template_string: [[/\$\{/, {
+      token: 'delimiter.curly',
+      next: '@expression'
+    }],
+    // 模板表达式开始
+    [/\`/, {
+      token: 'string.quote',
+      bracket: '@close',
+      next: '@pop'
+    }],
+    // 模板字符串结束
+    [/./, 'string'] // 模板字符串内的内容
+    ],
+    expression: [[/\}/, {
+      token: 'delimiter.curly',
+      next: '@pop'
+    }],
+    // 模板表达式结束
+    [/[0-9]+/, 'number'],
+    // 在模板表达式内的数字
+    [/[a-zA-Z_]\w*/, 'identifier'] // 在模板表达式内的标识符
+    ]
+  }
+});
+var VisionEditor = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(BaseEditor, _extends({
+    ref: ref,
+    language: "vision"
+  }, rest), children);
+});
+export default /*#__PURE__*/React.memo(VisionEditor);

package/es/lowcode/painter/components/field-setting/SettingUI.js

@@ -5,7 +5,7 @@ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import React, { useState } from 'react';
 import { useRequest, useMemoizedFn, useCreation } from 'ahooks';
-import { Spin, Input, Segmented, Switch, Tooltip, Icon, Radio, Modal } from 'luck-design/antd';
+import { Spin, Input, Segmented, Switch, Checkbox, Tooltip, Icon, Radio, Modal } from 'luck-design/antd';
 import styled from 'styled-components';
 import { isArray, keyBy, isNil, groupBy } from 'lodash';
 import { formatMessage } from '@luck-design-biz/base/utils';
@@ -13,6 +13,7 @@ import Collapse from "../../components/Collapse";
 import PanelItem from "../../components/PanelItem";
 import { ListEditor, ListEditorItem } from "../../components/ListEditor";
 import WidthHeight from "../../panel-section/WidthHeight";
+import JSEditor from "../../panel-section/JSEditor";
 import FieldAttrsModal from "./FieldAttrsModal";
 import FieldRulesModal from "./FieldRulesModal";
 import { fetchFieldCondition, fetchAttrs } from "../../../constants/api-url";
@@ -57,6 +58,19 @@ var _PINNED_OPTIONS_ = [{
   }),
   value: 'right'
 }];
+var _FORM_MODE_OPTIONS_ = [{
+  label: formatMessage({
+    id: "".concat(_I18N_PREFIX_, ".formMode.single"),
+    label: '单行'
+  }),
+  value: 'single'
+}, {
+  label: formatMessage({
+    id: "".concat(_I18N_PREFIX_, ".formMode.bulk"),
+    label: '批量'
+  }),
+  value: 'bulk'
+}];
 var _TRUE_FALSE_ = ['__TRUE__', '__FALSE__'];
 var CoderWrapper = styled.div.withConfig({
   displayName: "CoderWrapper",
@@ -70,6 +84,11 @@ var StyledRadio = styled(Radio.Group).withConfig({
   displayName: "StyledRadio",
   componentId: "luckda-6530__sc-1n41f3z-2"
 })(["span.ant-radio + *{padding-left:4px;padding-right:4px;}"]);
+var StyledCheckbox = styled(Checkbox.Group).withConfig({
+  displayName: "StyledCheckbox",
+  componentId: "luckda-6530__sc-1n41f3z-3"
+})([".ant-checkbox-wrapper{font-size:12px;}"]);
+var _DEFAULT_RENDER_CODE = "function render(value, data, rowIndex, params) { \n  return value;\n}";
 var SettingUI = function SettingUI(_ref) {
   var loading = _ref.loading,
     data = _ref.data,
@@ -315,7 +334,18 @@ var SettingUI = function SettingUI(_ref) {
     onChange: function onChange(val) {
       return run('tip', val);
     }
-  }))), component === 'form' && /*#__PURE__*/React.createElement(PanelItem, {
+  }))), component === 'tableForm' && /*#__PURE__*/React.createElement(PanelItem, {
+    label: formatMessage({
+      id: "".concat(_I18N_PREFIX_, ".formMode"),
+      label: '修改方式'
+    })
+  }, /*#__PURE__*/React.createElement(StyledCheckbox, {
+    options: _FORM_MODE_OPTIONS_,
+    defaultValue: fieldData.formMode ? [fieldData.formMode] : ['single', 'bulk'],
+    onChange: function onChange(val) {
+      return run('formMode', val);
+    }
+  })), component === 'form' && /*#__PURE__*/React.createElement(PanelItem, {
     label: formatMessage({
       id: "".concat(_I18N_PREFIX_, ".fieldColumn"),
       label: '占列数'
@@ -349,7 +379,7 @@ var SettingUI = function SettingUI(_ref) {
       id: "".concat(_I18N_PREFIX_, ".required"),
       label: '是否必填'
     })
-  }, renderCodeIcon(fieldRequired, FIELD_SCOPES.FIELD_REQUIRED)), ['table', 'tableForm'].includes && /*#__PURE__*/React.createElement(PanelItem, {
+  }, renderCodeIcon(fieldRequired, FIELD_SCOPES.FIELD_REQUIRED)), ['table', 'tableForm'].includes(component) && /*#__PURE__*/React.createElement(PanelItem, {
     label: formatMessage({
       id: "".concat(_I18N_PREFIX_, ".table.display"),
       label: '表格中显示'
@@ -369,7 +399,19 @@ var SettingUI = function SettingUI(_ref) {
       id: "".concat(_I18N_PREFIX_, ".readonly"),
       label: '是否只读'
     })
-  }, renderCodeIcon(fieldReadonly, FIELD_SCOPES.FIELD_READONLY)), !isBatch ? /*#__PURE__*/React.createElement(Collapse, {
+  }, renderCodeIcon(fieldReadonly, FIELD_SCOPES.FIELD_READONLY)), !isBatch ? /*#__PURE__*/React.createElement(React.Fragment, null, ['table', 'tableForm'].includes(component) ? /*#__PURE__*/React.createElement(Collapse, {
+    label: formatMessage({
+      id: "".concat(_I18N_PREFIX_, ".render"),
+      label: '内容定制渲染'
+    })
+  }, /*#__PURE__*/React.createElement(JSEditor, {
+    defaultValue: fieldData.render,
+    onChange: function onChange(val) {
+      return run('render', val);
+    },
+    mustConfirm: true,
+    defaultCode: _DEFAULT_RENDER_CODE
+  })) : null, /*#__PURE__*/React.createElement(Collapse, {
     label: formatMessage({
       id: "".concat(_I18N_PREFIX_, ".defaultValue"),
       label: '默认值'
@@ -384,7 +426,7 @@ var SettingUI = function SettingUI(_ref) {
   }), "\n              \u3010").concat(fieldDefaultValue.expression, "\u3011") : formatMessage({
     id: 'luckda.lowcode.painter.setting',
     label: '设置'
-  }))) : null, !isBatch ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Collapse, {
+  }))), /*#__PURE__*/React.createElement(Collapse, {
     label: formatMessage({
       id: "".concat(_I18N_PREFIX_, ".rules.front"),
       label: '前端校验规则'

package/es/lowcode/painter/components/field-setting/index.js

@@ -224,30 +224,44 @@ var FieldSetting = function FieldSetting(_ref) {
               moduleUid: moduleId
             }, val ? 'uniqueFieldUid' : 'noUniqueFieldUid', fieldData.uid));
           case 3:
-            _context.next = 34;
+            _context.next = 38;
             break;
           case 5:
-            if (!(key === 'align' || key === 'headerAlign' || key === 'pinned' || key === 'tip')) {
+            if (!(key === 'align' || key === 'headerAlign' || key === 'pinned' || key === 'tip' || key === 'render')) {
               _context.next = 9;
               break;
             }
             handleUIChange(key, val);
-            _context.next = 34;
+            _context.next = 38;
             break;
           case 9:
-            if (!(key === 'col' || key === 'row')) {
+            if (!(key === 'formMode')) {
               _context.next = 13;
               break;
             }
-            handleUIChange(key, val);
-            _context.next = 34;
+            if (val.includes('single') && !val.includes('bulk')) {
+              handleUIChange(key, 'single');
+            } else if (!val.includes('single') && val.includes('bulk')) {
+              handleUIChange(key, 'bulk');
+            } else {
+              handleUIChange(key, void 0);
+            }
+            _context.next = 38;
             break;
           case 13:
+            if (!(key === 'col' || key === 'row')) {
+              _context.next = 17;
+              break;
+            }
+            handleUIChange(key, val);
+            _context.next = 38;
+            break;
+          case 17:
             if (!(key === 'delRule')) {
-              _context.next = 21;
+              _context.next = 25;
               break;
             }
-            _context.next = 16;
+            _context.next = 20;
             return fetchDelAttrs({
               moduleDatasetUid: fieldData.datasetFieldUid,
               ccmModuleFieldVerifies: [{
@@ -255,11 +269,11 @@ var FieldSetting = function FieldSetting(_ref) {
               }],
               scope: FIELD_SCOPES.CHECK_RULES
             });
-          case 16:
+          case 20:
             _yield$fetchDelAttrs = _context.sent;
             code = _yield$fetchDelAttrs.code;
             return _context.abrupt("return", code === 1);
-          case 21:
+          case 25:
             mapping = _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, FIELD_SCOPES.FIELD_REQUIRED, {
               key: 'fieldRequired',
               refresh: requiredRefresh
@@ -295,15 +309,15 @@ var FieldSetting = function FieldSetting(_ref) {
             if (!_stateItem) {
               d.datasetBusinessUids = [fieldData.uid];
             }
-            _context.next = 31;
+            _context.next = 35;
             return request(d);
-          case 31:
+          case 35:
             _yield$request = _context.sent;
             _code = _yield$request.code;
             if (_code === 1) {
               mapping[key].refresh();
             }
-          case 34:
+          case 38:
           case "end":
             return _context.stop();
         }

package/es/lowcode/painter/components/field-setting/meta/frontRules.js

@@ -5,6 +5,7 @@ export var getFrontRules = function getFrontRules(property) {
     case 'money':
     case 'decimal':
     case 'sint':
+    case 'long':
       rules = [{
         label: '最小值',
         key: 'min',
@@ -47,7 +48,7 @@ export var getFrontRules = function getFrontRules(property) {
   rules.push({
     label: '自定义',
     key: 'rules',
-    defaultCode: "function validator(cValue, rule, value, callback) { \n if(!value) callback('errorMsg'); \n callback(); \n}"
+    defaultCode: "function validator(cValue, rule, value, callback) { \n if(!value) callback('errorMsg'); \n else callback(); \n}"
   });
   return rules;
 };

package/es/lowcode/painter/index.js

@@ -13,6 +13,7 @@ var Painter = function Painter(_ref) {
   var className = _ref.className,
     code = _ref.code;
   return /*#__PURE__*/React.createElement(EventBusProvider, {
+    key: code,
     runtime: RUNTIME.DESIGN
   }, /*#__PURE__*/React.createElement(ContextProvider, {
     code: code

package/es/lowcode/painter/panel-section/BlockEditor/index.js

@@ -1,6 +1,12 @@
 import React from 'react';
 import { useMemoizedFn } from 'ahooks';
-import { Icon } from 'luck-design/antd';
+import { Typography } from 'luck-design/antd';
+import styled from 'styled-components';
+var Paragraph = Typography.Paragraph;
+var BlockIdSpan = styled(Paragraph).withConfig({
+  displayName: "BlockIdSpan",
+  componentId: "luckda-6530__sc-gbohir-0"
+})(["display:inline-block;margin:0;color:#595959;text-decoration:var(--ant-primary-color) wavy underline;cursor:copy;padding:0 4px;"]);
 var BlockEditor = function BlockEditor(_ref) {
   var blockName = _ref.blockName,
     blockId = _ref.blockId,
@@ -11,17 +17,25 @@ var BlockEditor = function BlockEditor(_ref) {
       blockId: blockId
     });
   });
-  return /*#__PURE__*/React.createElement("span", {
+  var handleCopyBlockId = useMemoizedFn(function (e) {
+    e.stopPropagation();
+  });
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
     onClick: handleClick,
     style: next ? {
       color: 'var(--ant-primary-color)',
       cursor: 'pointer'
     } : {}
-  }, blockName || blockId, next && /*#__PURE__*/React.createElement(Icon, {
-    type: "setting",
+  }, blockName, /*#__PURE__*/React.createElement("span", {
+    onClick: handleCopyBlockId
+  }, /*#__PURE__*/React.createElement(BlockIdSpan, {
     style: {
-      marginLeft: 4
+      display: 'inline-block',
+      margin: 0
+    },
+    copyable: {
+      text: blockId
     }
-  }));
+  }, blockId))));
 };
 export default BlockEditor;

package/es/lowcode/painter/panel-section/BlocksEditor/index.js

@@ -43,7 +43,7 @@ var addOptions = [{
   }),
   value: 'blank'
 }];
-var BlockEditor = function BlockEditor(_ref) {
+var BlocksEditor = function BlocksEditor(_ref) {
   var onChange = _ref.onChange,
     nodeId = _ref.nodeId,
     renderPanelItems = _ref.renderPanelItems,
@@ -226,4 +226,4 @@ var BlockEditor = function BlockEditor(_ref) {
     label: '新增区块'
   }))))) : null;
 };
-export default BlockEditor;
+export default BlocksEditor;