@luck-design-biz/luckda 1.0.2-2 → 1.0.2-4

package/es/lowcode/constants/event-topics.js

@@ -30,6 +30,8 @@ export var COMPONENT_MODAL_TOGGLE = 'component-modal-toggle';
 export var COMPONENT_DRAG_OVER = 'component-drag-over';
 // 组件拖放完成时的事件
 export var COMPONENT_DRAG_END = 'component-drag-end';
+// 保存事件
+export var DESIGN_OPERATE_SAVE = 'design-operate-save';
 
 /******************************* Design Topic结束 *******************************/
 

package/es/lowcode/engine/meta/box.props.default.json

@@ -6,7 +6,7 @@
   "group": "container",
   "groupName": "布局",
   "order": 3,
-  "css": "height:100%; width: auto; background-color: #fff;",
+  "css": "height:auto; width: auto; background-color: #fff;",
   "advance": {
     "events": {}
   }

package/es/lowcode/engine/meta/box.props.json

@@ -14,7 +14,7 @@
       "disabled": true
     }
   ],
-  "css": "height:100%; width: auto; background-color: #fff;",
+  "css": "height:auto; width: auto; background-color: #fff;",
   "advance": {
     "events": [
       {

package/es/lowcode/engine/meta/fielddatadic.props.default.json

@@ -0,0 +1,16 @@
+{
+  "component": "FieldDatadic",
+  "name": "数据字典",
+  "group": "field",
+  "desc": "数据字典类型表单项",
+  "icon": "icon-fieldstring",
+  "groupName": "表单项",
+  "order": 1,
+  "display": "select",
+  "multiple": false,
+  "isTree": false,
+  "allowClear": false,
+  "advance": {
+    "events": {}
+  }
+}

package/es/lowcode/engine/meta/fielddatadic.props.json

@@ -0,0 +1,73 @@
+{
+  "component": "FieldDatadic",
+  "name": "数据字典",
+  "group": "field",
+  "desc": "数据字典类型表单项",
+  "icon": "icon-fieldstring",
+  "groupName": "表单项",
+  "order": 1,
+  "props": [
+    {
+      "key": "alias",
+      "name": "字典key",
+      "type": "string"
+    },
+    {
+      "key": "valueField",
+      "name": "实际值字段",
+      "type": "string"
+    },
+    {
+      "key": "labelField",
+      "name": "翻译值字段",
+      "type": "string"
+    },
+    {
+      "key": "display",
+      "name": "展现形式",
+      "type": "segmented",
+      "options": [
+        {
+          "label": "Select",
+          "value": "select"
+        },
+        {
+          "label": "Radio",
+          "value": "radio"
+        }
+      ],
+      "default": "select"
+    },
+    {
+      "key": "multiple",
+      "name": "多选",
+      "desc": "仅在展现形式为Select时有效",
+      "type": "switch",
+      "default": false
+    },
+    {
+      "key": "isTree",
+      "name": "树形结构",
+      "desc": "用于规定树形结构的数据字典，仅在展现形式为Select时有效",
+      "type": "switch",
+      "default": false
+    },
+    {
+      "key": "allowClear",
+      "name": "允许清除",
+      "desc": "仅在展现形式为Select时有效",
+      "type": "switch",
+      "default": false
+    }
+  ],
+  "advance": {
+    "events": [
+      {
+        "key": "onChange",
+        "name": "数据变化事件",
+        "desc": "在数据变化事件时，执行方法",
+        "func": "function onChange(data) {\n\t\n}"
+      }
+    ]
+  }
+}

package/es/lowcode/engine/meta/layout.props.default.json

@@ -6,7 +6,7 @@
   "groupName": "布局",
   "desc": "布局容器是一种提供列比例、列间距、行间距和样式等配置选项的元素，用于创建灵活的页面布局。它使用户能够轻松组织和排列组件，并实现各种复杂的布局需求。",
   "order": 1,
-  "css": "background-color: transparent;",
+  "css": "height:auto; background-color: transparent;",
   "columnRatio": "12:3:9",
   "columnSpacing": 16,
   "lineSpacing": 16,

package/es/lowcode/engine/meta/layout.props.json

@@ -87,7 +87,7 @@
       "default": 16
     }
   ],
-  "css": "background-color: transparent;",
+  "css": "height:auto; background-color: transparent;",
   "advance": {
     "events": [
       {

package/es/lowcode/painter/DesignOperator.js

@@ -114,10 +114,10 @@ var DesignOperator = function DesignOperator(_ref) {
     };
   }, [operatorId.selector]);
   var activeDomPosition = useCreation(function () {
-    var _getElement;
+    var _getElement, _canvas$current;
     if (!operatorId.selector && !operatorId.selectorTarget) return null;
     var targetTop = (_getElement = getElement(isNil(operatorId.selectorTarget) ? operatorId.selector : operatorId.selectorTarget.element)) === null || _getElement === void 0 ? void 0 : _getElement.getBoundingClientRect().top;
-    var delat = targetTop - canvas.current.getBoundingClientRect().top;
+    var delat = targetTop - (((_canvas$current = canvas.current) === null || _canvas$current === void 0 ? void 0 : _canvas$current.getBoundingClientRect().top) || 0);
     return {
       top: delat > 24 ? -24 : 0
     };
@@ -135,6 +135,10 @@ var DesignOperator = function DesignOperator(_ref) {
   }, {
     target: canvas
   });
+  useKeyPress('ctrl.s', function (e) {
+    e.preventDefault();
+    context.$publisher(context.topics.DESIGN_OPERATE_SAVE);
+  });
   useEventListener('mousemove', function (event) {
     var elem = event.target;
     var targetFormItem = elem.closest("[".concat(LC_COMPONENT_UNIT_KEY, "=\"").concat(LC_FORMITEM_UNIT, "\"]"));
@@ -268,7 +272,8 @@ var DesignOperator = function DesignOperator(_ref) {
         _modal.api.doOpen();
         currentModal.current = id;
       } else if (!toggle) {
-        canvas.current.style.removeProperty('overflow');
+        var _canvas$current2;
+        (_canvas$current2 = canvas.current) === null || _canvas$current2 === void 0 || _canvas$current2.style.removeProperty('overflow');
         var _id = id || currentModal.current;
         if (_id) {
           var _modal2 = context.componentMap.get(_id);

package/es/lowcode/painter/DesignToolbar.js

@@ -86,20 +86,6 @@ var DesignToolbar = function DesignToolbar(_ref) {
     }),
     updatePageDataLoading = _useRequest2.loading,
     runAsync = _useRequest2.runAsync;
-  useEffect(function () {
-    var topicId = context.$subscriber(context.topics.LANG_SETTING_SELECT).on(function (_ref2) {
-      var _langList = _ref2.langList;
-      return setLangList(_langList);
-    }).watch();
-    return function () {
-      return context.$unsubscriber(context.topics.LANG_SETTING_SELECT, topicId);
-    };
-  }, []);
-  useEffect(function () {
-    if (!showPreview) {
-      setUserId(void 0);
-    }
-  }, [showPreview]);
   var handleSave = useMemoizedFn( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
     var _yield$runAsync, code;
     return _regeneratorRuntime().wrap(function _callee$(_context) {
@@ -144,6 +130,23 @@ var DesignToolbar = function DesignToolbar(_ref) {
       }
     }, _callee);
   })), []);
+  useEffect(function () {
+    var lssid = context.$subscriber(context.topics.LANG_SETTING_SELECT).on(function (_ref3) {
+      var _langList = _ref3.langList;
+      setLangList(_langList);
+      console.log(11111, _langList);
+    }).watch();
+    var dasid = context.$subscriber(context.topics.DESIGN_OPERATE_SAVE).on(handleSave).watch();
+    return function () {
+      context.$unsubscriber(context.topics.LANG_SETTING_SELECT, lssid);
+      context.$unsubscriber(context.topics.DESIGN_OPERATE_SAVE, dasid);
+    };
+  }, []);
+  useEffect(function () {
+    if (!showPreview) {
+      setUserId(void 0);
+    }
+  }, [showPreview]);
   var handleClearCache = useMemoizedFn(function () {
     Modal.confirm({
       title: formatMessage({
@@ -325,20 +328,14 @@ var DesignToolbar = function DesignToolbar(_ref) {
       return _regeneratorRuntime().wrap(function _callee3$(_context3) {
         while (1) switch (_context3.prev = _context3.next) {
           case 0:
-            if (updatePageDataLoading) {
-              _context3.next = 6;
-              break;
-            }
-            if (!getNeedPrompt()) {
-              _context3.next = 4;
-              break;
+            if (!updatePageDataLoading) {
+              if (getNeedPrompt()) {
+                context.$publisher(context.topics.DESIGN_OPERATE_SAVE);
+              }
+              context.$publisher(context.topics.COMPONENT_ACTIVE, null);
+              setShowPreview(true);
             }
-            _context3.next = 4;
-            return handleSave();
-          case 4:
-            context.$publisher(context.topics.COMPONENT_ACTIVE, null);
-            setShowPreview(true);
-          case 6:
+          case 1:
           case "end":
             return _context3.stop();
         }
@@ -377,7 +374,9 @@ var DesignToolbar = function DesignToolbar(_ref) {
       fontSize: 14,
       margin: '0 11px 0 5px'
     },
-    onClick: handleSave
+    onClick: function onClick() {
+      return context.$publisher(context.topics.DESIGN_OPERATE_SAVE);
+    }
   })), /*#__PURE__*/React.createElement(Modal, {
     visible: show,
     width: 1024,

package/es/lowcode/painter/Panel.js

@@ -109,7 +109,7 @@ var Panel = function Panel() {
         oldValue: oldValue,
         newValue: newValue
       });
-      if (repositioning) context.$publisher(context.topics.COMPONENT_REPOSITIONING, {
+      if (repositioning || field === 'css') context.$publisher(context.topics.COMPONENT_REPOSITIONING, {
         id: _id
       });
     });

package/es/lowcode/painter/components/DragDrop/DragDropContext.js

@@ -45,9 +45,16 @@ export default function (_ref) {
             break;
           case 'add':
             {
-              var compName = fromComp.component.toLowerCase();
-              var json = require("../../../engine/meta/".concat(compName, ".props.default.json"));
-              moveNode(null, id, actionSide, "".concat(compName, "_").concat(suid()), json);
+              ctx.$subscriber(ctx.topics.COMPONENT_ACTIVE).once(function () {
+                var compName = fromComp.component.toLowerCase();
+                var json = require("../../../engine/meta/".concat(compName, ".props.default.json"));
+                ctx.$publisher(ctx.topics.COMPONENT_SETTING_CLICK, {
+                  data: json
+                });
+              }).watch();
+              ctx.$publisher(ctx.topics.COMPONENT_ACTIVE, {
+                target: id
+              });
             }
             break;
         }

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

@@ -1,13 +1,81 @@
-import React from 'react';
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useState, useCallback, useEffect, useRef } from 'react';
 import TreeDragDropWrapper from "./DragDrop/TreeDragDropWrapper";
+import { Input } from 'luck-design/antd';
+import { modifyNode } from "../../engine/provider/ContextProvider";
+
+/**
+ * 树节点组件
+ * @param {Object} props - 组件属性
+ * @param {Object} props.item - 代表树节点的对象
+ * @returns {React.Component} 返回包裹在拖拽功能中的节点编辑组件
+ */
 export default function (_ref) {
   var item = _ref.item;
-  var EditorNode = function EditorNode() {
-    return /*#__PURE__*/React.createElement("div", {
-      className: "item"
-    }, item.name);
-  };
   return /*#__PURE__*/React.createElement(TreeDragDropWrapper, {
     item: item
-  }, /*#__PURE__*/React.createElement(EditorNode, null));
-}
+  }, /*#__PURE__*/React.createElement(EditorNode, {
+    item: item
+  }));
+}
+
+/**
+ * 编辑节点组件，提供查看和编辑树节点名称的功能
+ * @param {Object} props - 组件属性
+ * @param {Object} props.item - 代表树节点的对象
+ * @returns {React.Component} 根据编辑状态渲染输入框或仅文本
+ */
+var EditorNode = function EditorNode(_ref2) {
+  var item = _ref2.item;
+  // console.log('item', item)
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    edited = _useState2[0],
+    setEdited = _useState2[1];
+  var _useState3 = useState(item.name),
+    _useState4 = _slicedToArray(_useState3, 2),
+    editedValue = _useState4[0],
+    setEditedValue = _useState4[1];
+  var inputRef = useRef(null); // 创建一个 ref 来引用输入框
+
+  var handleDoubleClick = useCallback(function () {
+    if (!item.buildIn) setEdited(true);
+  }, []);
+  var handleBlur = useCallback(function () {
+    setEdited(false);
+  }, []);
+  var handPressEnter = useCallback(function (e) {
+    modifyNode(item.id, {
+      name: e.target.value
+    });
+    setEdited(false);
+  });
+  var handleInputChange = useCallback(function (e) {
+    setEditedValue(e.target.value);
+  });
+
+  // 使用 useEffect 钩子来处理聚焦逻辑
+  useEffect(function () {
+    if (edited) {
+      // 如果 edited 为 true，聚焦到输入框
+      inputRef.current && inputRef.current.focus();
+    }
+  }, [edited]); // 依赖 edited 状态变化
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: "item",
+    onDoubleClick: handleDoubleClick
+  }, edited ? /*#__PURE__*/React.createElement("div", {
+    className: "treenode-editor"
+  }, /*#__PURE__*/React.createElement(Input, {
+    ref: inputRef // 将 ref 应用到 Input 组件
+    ,
+    onChange: handleInputChange,
+    value: editedValue,
+    size: "small",
+    onBlur: handleBlur,
+    onPressEnter: handPressEnter
+  })) : /*#__PURE__*/React.createElement("div", {
+    className: "treenode-info"
+  }, item.name));
+};

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

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["onChange", "onLayoutChange", "isFullscreen", "style"],
+var _excluded = ["onChange", "isFullscreen", "style", "onLoad"],
   _excluded2 = ["children", "language", "options"];
 import React, { useEffect, useRef, useImperativeHandle, forwardRef } from 'react';
 import * as monaco from 'monaco-editor';
@@ -41,9 +41,9 @@ import * as monaco from 'monaco-editor';
  */
 var BaseEditor = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var onChange = _ref.onChange,
-    onLayoutChange = _ref.onLayoutChange,
     isFullscreen = _ref.isFullscreen,
     style = _ref.style,
+    onLoad = _ref.onLoad,
     props = _objectWithoutProperties(_ref, _excluded);
   var children = props.children,
     _props$language = props.language,
@@ -53,6 +53,9 @@ var BaseEditor = /*#__PURE__*/forwardRef(function (_ref, ref) {
     rest = _objectWithoutProperties(props, _excluded2);
   var editorRef = useRef(null);
   var editorInstance = useRef(null);
+  useEffect(function () {
+    if (onLoad) onLoad();
+  }, []);
 
   // 初始化编辑器实例
   useEffect(function () {
@@ -80,10 +83,11 @@ var BaseEditor = /*#__PURE__*/forwardRef(function (_ref, ref) {
       editorInstance.current.onDidChangeModelContent(function (event) {
         if (onChange) onChange(editorInstance.current.getValue(), event);
       });
-      // 监听布局变化，重新赋值，解决编辑器全屏切换时，编辑器内容不会更新的问题
-      editorInstance.current.onDidLayoutChange(function (event) {
-        if (onLayoutChange) onLayoutChange(editorInstance.current.getValue(), event);
-      });
+
+      // 监听布局变化，重新赋值，解决编辑器全屏切换时，编辑器空白的问题
+      // editorInstance.current.onDidLayoutChange((event) => {
+      //   if (onChange) onChange(editorInstance.current.getValue(), event);
+      // });
     }
     return function () {
       var _editorInstance$curre;

package/es/lowcode/painter/panel-section/JSEditor.js

@@ -1,49 +1,71 @@
-import React, { useRef } from 'react';
-import { useMemoizedFn } from 'ahooks';
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useRef, useState } from 'react';
+import { useBoolean, useDebounceFn, useMemoizedFn } from 'ahooks';
 import { Button } from 'luck-design/antd';
-import { debounce } from 'lodash';
+import { LuckModal, SplitPane } from 'luck-design';
 import { formatMessage } from '@luck-design-biz/base/utils';
-import PopConfirm from "../components/PopConfirm";
-import FullScreenEditor from "../components/code-editor/FullScreenEditor";
+import RuntimeComp from "../../view/lc-components/JSX/RuntimeComp";
 import JSEditor from "../components/code-editor/JSEditor";
 var _JSEditor = function _JSEditor(_ref) {
   var defaultValue = _ref.defaultValue,
     defaultCode = _ref.defaultCode,
     onChange = _ref.onChange,
-    mustConfirm = _ref.mustConfirm,
     children = _ref.children;
   var editorRef = useRef();
-  var handleCodeChange = useRef(debounce(function (code) {
-    if (!mustConfirm) onChange(code);
-  }, 400));
-  var handleConfirm = useMemoizedFn(function () {
-    onChange(editorRef.current.editor.getValue());
-  });
-  var handleEditorLoad = useMemoizedFn(function () {
-    editorRef.current.editor.setValue(defaultValue || defaultCode);
-  });
-  return /*#__PURE__*/React.createElement(PopConfirm, {
-    placement: "left",
-    title: /*#__PURE__*/React.createElement(FullScreenEditor, {
-      ref: editorRef,
-      EditorComponent: JSEditor,
-      width: "600px",
-      height: "400px",
-      onChange: handleCodeChange.current,
-      onLoad: handleEditorLoad
+  var _useState = useState(defaultValue || defaultCode),
+    _useState2 = _slicedToArray(_useState, 2),
+    code = _useState2[0],
+    setCode = _useState2[1];
+  var _useDebounceFn = useDebounceFn(function (_code) {
+      setCode(_code);
+    }, {
+      wait: 500
     }),
-    showBtn: mustConfirm,
-    onConfirm: handleConfirm
-  }, children !== null && children !== void 0 ? children : /*#__PURE__*/React.createElement("div", {
-    style: {
-      padding: '0 16px'
-    }
-  }, /*#__PURE__*/React.createElement(Button, {
+    run = _useDebounceFn.run;
+  var _useBoolean = useBoolean(false),
+    _useBoolean2 = _slicedToArray(_useBoolean, 2),
+    visible = _useBoolean2[0],
+    _useBoolean2$ = _useBoolean2[1],
+    show = _useBoolean2$.setTrue,
+    hidden = _useBoolean2$.setFalse;
+  var _useBoolean3 = useBoolean(false),
+    _useBoolean4 = _slicedToArray(_useBoolean3, 2),
+    hasError = _useBoolean4[0],
+    _useBoolean4$ = _useBoolean4[1],
+    hasErrorOn = _useBoolean4$.setTrue,
+    hasErrorOff = _useBoolean4$.setFalse;
+  var handleErrorCatch = useMemoizedFn(function (error) {
+    console.log(12121212, error);
+  });
+  return /*#__PURE__*/React.createElement(React.Fragment, null, children || /*#__PURE__*/React.createElement(Button, {
     block: true,
-    size: "small"
+    size: "small",
+    onClick: show
   }, formatMessage({
     id: 'luckda.lowcode.painter.panel-section.style-panel.sourceedit',
     label: '源码编辑'
-  }))));
+  })), /*#__PURE__*/React.createElement(LuckModal, {
+    title: formatMessage({
+      id: 'luckda.lowcode.painter.panel-section.style-panel.sourceedit',
+      label: '源码编辑'
+    }),
+    width: "80vw",
+    height: "80vh",
+    fullScreen: true,
+    mask: false,
+    maskClosable: false,
+    closable: false,
+    visible: visible,
+    onClose: hidden
+  }, /*#__PURE__*/React.createElement(SplitPane, {
+    split: "vertical"
+  }, /*#__PURE__*/React.createElement(JSEditor, {
+    ref: editorRef,
+    onChange: run
+  }, defaultValue || defaultCode), /*#__PURE__*/React.createElement(SplitPane.Pane, {
+    minSize: "400px"
+  }, /*#__PURE__*/React.createElement(RuntimeComp, {
+    onErrorCatch: handleErrorCatch
+  }, code)))));
 };
 export default _JSEditor;

package/es/lowcode/painter/panel-section/StylePanel/MainPanel.js

@@ -1,10 +1,10 @@
-import React, { useCallback } from 'react';
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useCallback, useState } from 'react';
 import { formatMessage } from '@luck-design-biz/base/utils';
+import { useLatest } from 'ahooks';
 import { Button } from 'luck-design/antd';
 import Collapse from "../../components/Collapse";
-import PopConfirm from "../../components/PopConfirm";
 import CssEditor from "../../components/code-editor/CssEditor";
-import FullScreenEditor from "../../components/code-editor/FullScreenEditor";
 import styles from "../../style/style-panel.less";
 import { useStyle, useStyleDispatch, useEditor, styleToEditor } from "./StyleContext";
 import WidthHeight from "./WidthHeight";
@@ -18,6 +18,7 @@ import BorderRadius from "./BorderRadius";
 import Shadow from "./Shadow";
 import Opacity from "./Opacity";
 import Pointer from "./Pointer";
+import { LuckModal } from 'luck-design';
 
 /**
  * 主样式面板
@@ -26,21 +27,20 @@ var MainPanel = function MainPanel() {
   var style = useStyle(true);
   var dispatch = useStyleDispatch();
   var editorRef = useEditor();
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    show = _useState2[0],
+    setShow = _useState2[1];
+  var lasestStyle = useLatest(style);
   var handleCodeChange = useCallback(function (code) {
     dispatch({
       type: 'code',
       payload: code
     });
+    // editorRef.current.editor.setValue(code)
   }, []);
-  var handleEditorLayoutChange = useCallback(function (code) {
-    dispatch({
-      type: 'code',
-      payload: code
-    });
-    editorRef.current.editor.setValue(code);
-  }, []);
-  var handleEditorLoad = useCallback(function () {
-    styleToEditor(style).then(function (css) {
+  var handleOnload = useCallback(function () {
+    styleToEditor(lasestStyle.current).then(function (css) {
       editorRef.current.editor.setValue(css);
     });
   }, []);
@@ -53,24 +53,35 @@ var MainPanel = function MainPanel() {
     })
   }, /*#__PURE__*/React.createElement("div", {
     className: styles['style-editor']
-  }, /*#__PURE__*/React.createElement(PopConfirm, {
-    placement: "bottomRight",
-    title: /*#__PURE__*/React.createElement(FullScreenEditor, {
-      ref: editorRef,
-      EditorComponent: CssEditor,
-      width: "280px",
-      height: "300px",
-      onChange: handleCodeChange,
-      onLayoutChange: handleEditorLayoutChange,
-      onLoad: handleEditorLoad
-    })
-  }, /*#__PURE__*/React.createElement(Button, {
+  }, /*#__PURE__*/React.createElement(LuckModal, {
+    title: formatMessage({
+      id: 'luckda.lowcode.painter.panel-section.style-panel.sourceedit',
+      label: '源码编辑'
+    }),
+    visible: show,
+    fullScreen: true,
+    mask: false,
+    footer: null,
+    maskClosable: false,
+    onClose: function onClose() {
+      setShow(false);
+    }
+  }, /*#__PURE__*/React.createElement(CssEditor, {
+    ref: editorRef,
+    width: "100%",
+    height: "100%",
+    onChange: handleCodeChange,
+    onLoad: handleOnload
+  })), /*#__PURE__*/React.createElement(Button, {
     type: "primary",
-    size: "small"
+    size: "small",
+    onClick: function onClick() {
+      setShow(true);
+    }
   }, formatMessage({
     id: 'luckda.lowcode.painter.panel-section.style-panel.sourceedit',
     label: '源码编辑'
-  })))), /*#__PURE__*/React.createElement(WidthHeight, {
+  }))), /*#__PURE__*/React.createElement(WidthHeight, {
     field: "width",
     label: formatMessage({
       id: 'luckda.lowcode.painter.panel-section.style-panel.width',

package/es/lowcode/painter/style/components.less

@@ -66,7 +66,7 @@
 
         span {
           font-size: 12px;
-          color: #333;
+          color: var(--font-color);
           white-space: nowrap; // 防止文字换行
           overflow: hidden; // 隐藏溢出的文字
           text-overflow: ellipsis; // 使用省略号表示溢出