@4399ywkf/design 2.0.0 → 2.1.1

package/dist/FormDesigner/components/Settings/index.d.ts

@@ -0,0 +1,3 @@
+export default function Settings({ widgets, }: {
+    widgets?: Record<string, any>;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/FormDesigner/components/Settings/index.js

@@ -0,0 +1,224 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { LeftOutlined, RightOutlined } from '@ant-design/icons';
+import React, { useEffect, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { getKeyFromUniqueId } from "../../utils";
+import { useGlobal, useSet, useStore } from "../../utils/hooks";
+import GlobalSettings from "./GlobalSettings";
+import ItemSettings from "./ItemSettings";
+import useStyles from "./style";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+export default function Settings(_ref) {
+  var widgets = _ref.widgets;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _useStyles = useStyles(),
+    styles = _useStyles.styles;
+  var _useSet = useSet({
+      panelKey: 'settings',
+      // 'settings' | 'variables'
+      subTabKey: 'props',
+      // 'props' | 'style'
+      showRight: true,
+      showItemSettings: false
+    }),
+    _useSet2 = _slicedToArray(_useSet, 2),
+    state = _useSet2[0],
+    setState = _useSet2[1];
+  var _useStore = useStore(),
+    selected = _useStore.selected,
+    flatten = _useStore.flatten,
+    _useStore$userProps = _useStore.userProps,
+    userProps = _useStore$userProps === void 0 ? {} : _useStore$userProps;
+  var setGlobal = useGlobal();
+  var panelKey = state.panelKey,
+    subTabKey = state.subTabKey,
+    showRight = state.showRight,
+    showItemSettings = state.showItemSettings;
+  var toggleRight = function toggleRight() {
+    return setState({
+      showRight: !showRight
+    });
+  };
+  useEffect(function () {
+    var _flatten$;
+    // 「画布即 Form」收敛后，根 '#' 本身就是 cardRoot —— 选中它要进
+    // 组件设置（属性/样式/事件，含 onMount 编辑器）。
+    // 普通表单根（无 widget）仍按"无组件可配"处理。
+    var rootIsCard = (flatten === null || flatten === void 0 || (_flatten$ = flatten['#']) === null || _flatten$ === void 0 || (_flatten$ = _flatten$.schema) === null || _flatten$ === void 0 ? void 0 : _flatten$.widget) === 'cardRoot';
+    if (!selected || selected === '#' && !rootIsCard) {
+      setState({
+        showItemSettings: false,
+        subTabKey: 'props'
+      });
+    } else {
+      setState({
+        showItemSettings: true,
+        subTabKey: 'props'
+      });
+    }
+  }, [selected, flatten]);
+  var globalSettingHide = userProps.globalSettings === null || userProps.globalSettings && !Object.keys(userProps.globalSettings).length;
+
+  // Build breadcrumb path
+  var realSelected = selected && selected[0] === '0' ? selected.substring(1) : selected;
+  var breadcrumbPath = useMemo(function () {
+    if (!realSelected || realSelected === '#' || !flatten[realSelected]) return [];
+    var rawPath = [];
+    var current = realSelected;
+    while (current && current !== '#') {
+      var _item$schema, _item$schema2, _item$schema3;
+      var item = flatten[current];
+      if (!item) break;
+      var key = getKeyFromUniqueId((_item$schema = item.schema) === null || _item$schema === void 0 ? void 0 : _item$schema.$id) || current.split('/').pop() || '';
+      // Use friendly names for known widgets
+      var widgetName = (_item$schema2 = item.schema) === null || _item$schema2 === void 0 ? void 0 : _item$schema2.widget;
+      var widgetLabels = {
+        formContainer: '表单容器',
+        formBtnGroup: '按钮组',
+        formSubmitBtn: '提交按钮',
+        formResetBtn: '取消按钮'
+      };
+      var label = ((_item$schema3 = item.schema) === null || _item$schema3 === void 0 ? void 0 : _item$schema3.title) || widgetLabels[widgetName] || key;
+      rawPath.unshift({
+        id: current,
+        label: label
+      });
+      current = item.parent;
+    }
+    rawPath.unshift({
+      id: '#',
+      label: t('表单')
+    });
+    // Filter out internal nodes (starting with _) except the last one
+    return rawPath.filter(function (item, idx) {
+      if (idx === rawPath.length - 1) return true; // always show selected
+      var key = item.label;
+      return !key.startsWith('_');
+    });
+  }, [realSelected, flatten, t]);
+  return showRight ? /*#__PURE__*/_jsxs("div", {
+    className: styles.rightLayout,
+    children: [/*#__PURE__*/_jsx("div", {
+      className: styles.toggleBtn,
+      onClick: toggleRight,
+      children: /*#__PURE__*/_jsx(RightOutlined, {})
+    }), /*#__PURE__*/_jsx("div", {
+      className: styles.panelHeader,
+      children: /*#__PURE__*/_jsxs("div", {
+        className: styles.panelTabs,
+        children: [/*#__PURE__*/_jsx("div", {
+          className: "".concat(styles.panelTab, " ").concat(panelKey === 'settings' ? 'active' : ''),
+          onClick: function onClick() {
+            return setState({
+              panelKey: 'settings'
+            });
+          },
+          children: t('组件配置')
+        }), !globalSettingHide && /*#__PURE__*/_jsx("div", {
+          className: "".concat(styles.panelTab, " ").concat(panelKey === 'global' ? 'active' : ''),
+          onClick: function onClick() {
+            return setState({
+              panelKey: 'global'
+            });
+          },
+          children: t('表单配置')
+        })]
+      })
+    }), panelKey === 'settings' && /*#__PURE__*/_jsxs(_Fragment, {
+      children: [showItemSettings && breadcrumbPath.length > 0 && /*#__PURE__*/_jsx("div", {
+        className: styles.breadcrumb,
+        children: breadcrumbPath.map(function (item, idx) {
+          var isLast = idx === breadcrumbPath.length - 1;
+          return /*#__PURE__*/_jsxs(React.Fragment, {
+            children: [idx > 0 && /*#__PURE__*/_jsx("span", {
+              className: styles.breadcrumbSeparator,
+              children: /*#__PURE__*/_jsx(RightOutlined, {
+                style: {
+                  fontSize: 10
+                }
+              })
+            }), /*#__PURE__*/_jsx("span", {
+              className: isLast ? styles.breadcrumbCurrent : styles.breadcrumbItem,
+              style: isLast ? undefined : {
+                cursor: 'pointer'
+              },
+              onClick: isLast ? undefined : function () {
+                return setGlobal({
+                  selected: item.id
+                });
+              },
+              title: isLast ? undefined : '点击选中该节点',
+              children: item.label
+            })]
+          }, item.id);
+        })
+      }), showItemSettings && /*#__PURE__*/_jsx("div", {
+        className: styles.subTabWrapper,
+        children: /*#__PURE__*/_jsxs("div", {
+          className: styles.subTabs,
+          children: [/*#__PURE__*/_jsx("div", {
+            className: "".concat(styles.subTab, " ").concat(subTabKey === 'props' ? 'active' : ''),
+            onClick: function onClick() {
+              return setState({
+                subTabKey: 'props'
+              });
+            },
+            children: t('属性')
+          }), /*#__PURE__*/_jsx("div", {
+            className: "".concat(styles.subTab, " ").concat(subTabKey === 'style' ? 'active' : ''),
+            onClick: function onClick() {
+              return setState({
+                subTabKey: 'style'
+              });
+            },
+            children: t('样式')
+          }), /*#__PURE__*/_jsx("div", {
+            className: "".concat(styles.subTab, " ").concat(subTabKey === 'event' ? 'active' : ''),
+            onClick: function onClick() {
+              return setState({
+                subTabKey: 'event'
+              });
+            },
+            children: t('事件')
+          })]
+        })
+      }), /*#__PURE__*/_jsx("div", {
+        className: styles.contentArea,
+        children: showItemSettings ? /*#__PURE__*/_jsx(ItemSettings, {
+          widgets: widgets,
+          subTabKey: subTabKey
+        }) : /*#__PURE__*/_jsx("div", {
+          style: {
+            color: '#8f959e',
+            fontSize: 12,
+            textAlign: 'center',
+            marginTop: 80
+          },
+          children: t('请在画布中选中组件')
+        })
+      })]
+    }), panelKey === 'global' && !globalSettingHide && /*#__PURE__*/_jsx("div", {
+      className: styles.contentArea,
+      children: /*#__PURE__*/_jsx(GlobalSettings, {
+        widgets: widgets
+      })
+    })]
+  }) : /*#__PURE__*/_jsx("div", {
+    className: styles.hideArrow,
+    onClick: toggleRight,
+    children: /*#__PURE__*/_jsx(LeftOutlined, {
+      style: {
+        color: '#8f959e',
+        fontSize: 12
+      }
+    })
+  });
+}

package/dist/FormDesigner/components/Settings/style.d.ts

@@ -0,0 +1,61 @@
+declare const useStyles: (props?: unknown) => import("antd-style").ReturnStyles<{
+    rightLayout: import("antd-style").SerializedStyles;
+    panelHeader: import("antd-style").SerializedStyles;
+    panelTabs: import("antd-style").SerializedStyles;
+    panelTab: import("antd-style").SerializedStyles;
+    breadcrumb: import("antd-style").SerializedStyles;
+    breadcrumbItem: import("antd-style").SerializedStyles;
+    breadcrumbCurrent: import("antd-style").SerializedStyles;
+    breadcrumbSeparator: import("antd-style").SerializedStyles;
+    subTabWrapper: import("antd-style").SerializedStyles;
+    subTabs: import("antd-style").SerializedStyles;
+    subTab: import("antd-style").SerializedStyles;
+    contentArea: import("antd-style").SerializedStyles;
+    eventPane: import("antd-style").SerializedStyles;
+    eventSectionLabel: import("antd-style").SerializedStyles;
+    eventCard: import("antd-style").SerializedStyles;
+    eventHeader: import("antd-style").SerializedStyles;
+    eventIcon: import("antd-style").SerializedStyles;
+    eventTitleWrap: import("antd-style").SerializedStyles;
+    eventTitle: import("antd-style").SerializedStyles;
+    eventDesc: import("antd-style").SerializedStyles;
+    eventDelete: import("antd-style").SerializedStyles;
+    eventBody: import("antd-style").SerializedStyles;
+    cardButtonEventField: import("antd-style").SerializedStyles;
+    cardButtonEventLabel: import("antd-style").SerializedStyles;
+    cardButtonBehaviorList: import("antd-style").SerializedStyles;
+    cardButtonBehaviorRow: import("antd-style").SerializedStyles;
+    cardButtonBehaviorRemove: import("antd-style").SerializedStyles;
+    cardButtonBehaviorEmpty: import("antd-style").SerializedStyles;
+    cardButtonBehaviorAdd: import("antd-style").SerializedStyles;
+    eventAddList: import("antd-style").SerializedStyles;
+    eventAddItem: import("antd-style").SerializedStyles;
+    eventAddPlus: import("antd-style").SerializedStyles;
+    linkageBody: import("antd-style").SerializedStyles;
+    linkageRule: import("antd-style").SerializedStyles;
+    linkageCondition: import("antd-style").SerializedStyles;
+    linkageLabelRow: import("antd-style").SerializedStyles;
+    linkageRemove: import("antd-style").SerializedStyles;
+    linkageAddRule: import("antd-style").SerializedStyles;
+    linkageEmpty: import("antd-style").SerializedStyles;
+    clickLinkageBox: import("antd-style").SerializedStyles;
+    clickLinkageRule: import("antd-style").SerializedStyles;
+    clickLinkageEmpty: import("antd-style").SerializedStyles;
+    eventEmpty: import("antd-style").SerializedStyles;
+    afterSection: import("antd-style").SerializedStyles;
+    afterHeader: import("antd-style").SerializedStyles;
+    afterTitle: import("antd-style").SerializedStyles;
+    afterHint: import("antd-style").SerializedStyles;
+    afterRule: import("antd-style").SerializedStyles;
+    afterRuleTop: import("antd-style").SerializedStyles;
+    afterRuleBottom: import("antd-style").SerializedStyles;
+    afterClearHint: import("antd-style").SerializedStyles;
+    remoteEditor: import("antd-style").SerializedStyles;
+    remoteSectionLabel: import("antd-style").SerializedStyles;
+    remoteField: import("antd-style").SerializedStyles;
+    remoteFieldLabel: import("antd-style").SerializedStyles;
+    remoteFieldHint: import("antd-style").SerializedStyles;
+    toggleBtn: import("antd-style").SerializedStyles;
+    hideArrow: import("antd-style").SerializedStyles;
+}>;
+export default useStyles;

package/dist/FormDesigner/components/Settings/style.js

@@ -0,0 +1,82 @@
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30, _templateObject31, _templateObject32, _templateObject33, _templateObject34, _templateObject35, _templateObject36, _templateObject37, _templateObject38, _templateObject39, _templateObject40, _templateObject41, _templateObject42, _templateObject43, _templateObject44, _templateObject45, _templateObject46, _templateObject47, _templateObject48, _templateObject49, _templateObject50, _templateObject51, _templateObject52, _templateObject53, _templateObject54, _templateObject55, _templateObject56, _templateObject57, _templateObject58;
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+import { createStyles } from 'antd-style';
+var useStyles = createStyles(function (_ref) {
+  var css = _ref.css;
+  return {
+    rightLayout: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    flex-shrink: 0;\n    width: 360px;\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    background: #fff;\n    border-left: 1px solid #dee0e3;\n    position: relative;\n  "]))),
+    /* ===== 顶层标签页: 组件配置 | 表单配置 ===== */
+    panelHeader: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    flex-shrink: 0;\n    padding: 10px 16px 0;\n  "]))),
+    panelTabs: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    display: flex;\n    align-items: center;\n    gap: 2px;\n    background: #f2f3f5;\n    border-radius: 6px;\n    padding: 3px;\n    width: 100%;\n  "]))),
+    panelTab: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    flex: 1;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    height: 26px;\n    border-radius: 5px;\n    font-size: 13px;\n    font-weight: 500;\n    color: #646a73;\n    cursor: pointer;\n    transition: all 0.15s ease;\n    user-select: none;\n\n    &:hover {\n      background-color: #dee0e3;\n      color: #1f2329;\n    }\n\n    &.active {\n      background-color: #fff;\n      color: #1f2329;\n      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);\n    }\n  "]))),
+    /* ===== 面包屑导航 ===== */
+    breadcrumb: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    display: flex;\n    align-items: center;\n    padding: 8px 16px 4px;\n    font-size: 14px;\n    line-height: 22px;\n    flex-shrink: 0;\n    overflow: hidden;\n  "]))),
+    breadcrumbItem: css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    display: inline-block;\n    border-radius: 6px;\n    padding: 0 4px;\n    max-width: 162px;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    vertical-align: top;\n    color: #646a73;\n    cursor: pointer;\n    transition: color 0.2s, background-color 0.2s;\n\n    &:hover {\n      background-color: rgba(20, 86, 240, 0.1);\n      color: #1456f0;\n    }\n  "]))),
+    breadcrumbCurrent: css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n    display: inline-block;\n    border-radius: 6px;\n    padding: 0 4px;\n    max-width: 162px;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    vertical-align: top;\n    color: #1f2329;\n    font-weight: 500;\n  "]))),
+    breadcrumbSeparator: css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n    color: #8f959e;\n    font-size: 12px;\n    display: inline-flex;\n    align-items: center;\n    height: 22px;\n    padding: 0 4px;\n    vertical-align: top;\n  "]))),
+    /* ===== 二级子 Tab: 属性 | 样式 ===== */
+    subTabWrapper: css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n    padding: 4px 16px 0;\n    flex-shrink: 0;\n  "]))),
+    subTabs: css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n    display: flex;\n    align-items: center;\n    gap: 2px;\n    background: #f2f3f5;\n    border-radius: 6px;\n    padding: 3px;\n    width: 100%;\n  "]))),
+    subTab: css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n    flex: 1;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    height: 20px;\n    border-radius: 5px;\n    font-size: 12px;\n    font-weight: 400;\n    color: #646a73;\n    cursor: pointer;\n    transition: all 0.12s ease;\n    user-select: none;\n\n    &:hover {\n      background-color: #dee0e3;\n      color: #1f2329;\n    }\n\n    &.active {\n      background-color: #fff;\n      color: #1f2329;\n      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);\n    }\n  "]))),
+    /* ===== 字段内容区 ===== */
+    contentArea: css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n    flex: 1;\n    overflow-y: auto;\n    overflow-x: hidden;\n\n    &::-webkit-scrollbar {\n      width: 0;\n      background: transparent;\n    }\n\n    /* ===== \u98DE\u4E66\u5B57\u6BB5\u5206\u9694\u6837\u5F0F\uFF08\u7D27\u51D1\u7248\uFF09 ===== */\n\n    /* \u6BCF\u4E2A\u5B57\u6BB5\u9879: \u5E95\u90E8\u5206\u5272\u7EBF + \u7D27\u51D1\u95F4\u8DDD */\n    .ant-form-item {\n      border-bottom: 1px solid rgba(31, 35, 41, 0.06);\n      margin-bottom: 0 !important;\n      padding: 6px 14px 8px !important;\n\n      &:last-child {\n        border-bottom: none;\n      }\n    }\n\n    /* \u6807\u7B7E\u6837\u5F0F \u2014 \u7D27\u8D34\u63A7\u4EF6 */\n    .ant-form-item-label {\n      padding-bottom: 2px !important;\n      line-height: 1.3 !important;\n\n      > label {\n        font-weight: 500 !important;\n        font-size: 12px !important;\n        color: #1f2329 !important;\n        height: auto !important;\n        line-height: 18px !important;\n\n        /* \u53BB\u6389\u5192\u53F7 */\n        &::after {\n          display: none !important;\n        }\n      }\n    }\n\n    /* \u9690\u85CF\u6807\u7B7E\uFF08checkbox \u7B49\uFF09 */\n    .fr-hide-label .ant-form-item-label {\n      visibility: hidden;\n      height: 0;\n      padding: 0 !important;\n      overflow: hidden;\n\n      > label {\n        height: 0 !important;\n      }\n    }\n\n    /* \u63CF\u8FF0\u6587\u5B57 */\n    .ant-form-item-extra {\n      color: #8f959e !important;\n      font-size: 10px !important;\n      line-height: 14px !important;\n      margin-top: 2px !important;\n    }\n\n    /* \u6821\u9A8C\u4FE1\u606F */\n    .ant-form-item-explain {\n      font-size: 11px !important;\n      min-height: 0 !important;\n    }\n\n    .ant-form-item-explain-error {\n      color: #f54a45 !important;\n    }\n\n    /* Object/\u5206\u7EC4 */\n    .fr-obj-col {\n      border-bottom: none;\n    }\n\n    /* \u63A7\u4EF6\u5BB9\u5668\u6700\u5C0F\u9AD8\u5EA6\u6536\u7D27\uFF08\u9ED8\u8BA4 32px \u2192 28px\uFF09 */\n    .ant-form-item-control-input {\n      min-height: 28px !important;\n    }\n\n    /* ===== Collapse \u5BB9\u5668\uFF08\"\u9009\u9879\"\u5206\u7EC4\uFF09\u7D27\u51D1\u5316 ===== */\n    .ant-collapse {\n      background: transparent !important;\n      border: none !important;\n    }\n    .ant-collapse > .ant-collapse-item {\n      border-top: 1px solid rgba(31, 35, 41, 0.08) !important;\n      border-bottom: none !important;\n    }\n    .ant-collapse > .ant-collapse-item:first-child {\n      border-top: none !important;\n    }\n    .ant-collapse > .ant-collapse-item > .ant-collapse-header {\n      padding: 8px 14px !important;\n      font-size: 12px !important;\n      font-weight: 500 !important;\n      color: #1f2329 !important;\n      letter-spacing: 0.02em;\n      align-items: center !important;\n    }\n    .ant-collapse\n      > .ant-collapse-item\n      > .ant-collapse-header\n      .ant-collapse-expand-icon {\n      padding-inline-end: 6px !important;\n      font-size: 10px !important;\n    }\n    .ant-collapse-content > .ant-collapse-content-box {\n      padding: 0 !important;\n    }\n    /* Collapse \u5185\u90E8\u7684 form-item \u518D\u538B\u7D27\u4E00\u70B9 */\n    .ant-collapse-content-box .ant-form-item {\n      padding: 6px 14px 6px !important;\n    }\n\n    /* ===== \u8868\u5355\u63A7\u4EF6\u7EDF\u4E00\u6837\u5F0F\uFF08\u7D27\u51D1\u9AD8\u5EA6 28px\uFF09 ===== */\n    .ant-input,\n    .ant-select-selector,\n    .ant-input-number,\n    .ant-picker {\n      border-radius: 6px !important;\n      font-size: 12px !important;\n      border-color: #dee0e3 !important;\n    }\n\n    /* \u5355\u884C Input / Picker / InputNumber \u5F3A\u5236 28px */\n    .ant-input:not(textarea),\n    .ant-picker,\n    .ant-input-number {\n      height: 28px !important;\n    }\n    .ant-input-number-input {\n      height: 26px !important;\n      font-size: 12px !important;\n    }\n    /* Select \u5355\u9009 */\n    .ant-select-single .ant-select-selector {\n      height: 28px !important;\n      padding: 0 8px !important;\n    }\n    .ant-select-single .ant-select-selector .ant-select-selection-item,\n    .ant-select-single .ant-select-selector .ant-select-selection-placeholder {\n      line-height: 26px !important;\n      font-size: 12px !important;\n    }\n    /* Select \u591A\u9009 */\n    .ant-select-multiple .ant-select-selector {\n      min-height: 28px !important;\n      padding: 1px 6px !important;\n    }\n    /* Picker */\n    .ant-picker {\n      padding: 0 8px !important;\n    }\n    .ant-picker-input > input {\n      font-size: 12px !important;\n    }\n    /* TextArea \u4E0D\u5F3A\u5236\u9AD8\u5EA6\uFF0C\u4EC5\u5B57\u53F7 */\n    textarea.ant-input {\n      font-size: 12px !important;\n      padding: 4px 8px !important;\n    }\n    /* \u5185\u8054\u524D\u7F00/\u540E\u7F00 input */\n    .ant-input-affix-wrapper {\n      padding: 0 8px !important;\n      min-height: 28px !important;\n    }\n    .ant-input-affix-wrapper .ant-input {\n      height: auto !important;\n    }\n\n    /* checkbox / switch \u884C\u7D27\u51D1\uFF1A\u8BA9 label + \u63CF\u8FF0 inline */\n    .ant-form-item .ant-checkbox-wrapper {\n      font-size: 12px !important;\n    }\n\n    .ant-input:hover,\n    .ant-select-selector:hover,\n    .ant-input-number:hover,\n    .ant-picker:hover {\n      border-color: #3370ff !important;\n    }\n\n    .ant-input:focus,\n    .ant-input-focused,\n    .ant-select-focused .ant-select-selector,\n    .ant-input-number-focused,\n    .ant-picker-focused {\n      border-color: #3370ff !important;\n      box-shadow: 0 0 0 2px rgba(51, 112, 255, 0.1) !important;\n    }\n\n    /* Radio / Checkbox \u98DE\u4E66\u84DD */\n    .ant-radio-checked .ant-radio-inner {\n      border-color: #3370ff !important;\n      background-color: #3370ff !important;\n    }\n\n    /* \u6807\u51C6 Radio.Group\uFF08\u975E button \u6A21\u5F0F\uFF09\u2014 \u9009\u9879\u95F4\u8DDD + hover \u53CD\u9988 */\n    .ant-radio-group:not(.ant-radio-group-outline) {\n      display: inline-flex;\n      flex-wrap: wrap;\n      gap: 4px;\n      width: 100%;\n    }\n\n    .ant-radio-group:not(.ant-radio-group-outline) .ant-radio-wrapper {\n      margin: 0 !important;\n      padding: 4px 10px 4px 6px;\n      border-radius: 6px;\n      font-size: 13px;\n      color: #1f2329;\n      transition: background-color 0.12s;\n\n      &:hover {\n        background-color: rgba(51, 112, 255, 0.06);\n      }\n\n      &.ant-radio-wrapper-checked {\n        background-color: rgba(51, 112, 255, 0.08);\n        color: #1456f0;\n      }\n    }\n\n    .ant-checkbox-checked .ant-checkbox-inner {\n      background-color: #3370ff !important;\n      border-color: #3370ff !important;\n    }\n\n    .ant-switch-checked {\n      background-color: #3370ff !important;\n    }\n\n    /* Radio.Group button \u6A21\u5F0F \u2192 \u98DE\u4E66\u5206\u6BB5\u5F0F */\n    .ant-radio-group.ant-radio-group-outline {\n      display: inline-flex;\n      border: 1px solid #dee0e3;\n      border-radius: 6px;\n      padding: 2px;\n      gap: 2px;\n      background: #fff;\n    }\n\n    .ant-radio-button-wrapper {\n      border: none !important;\n      border-radius: 4px !important;\n      font-size: 12px !important;\n      height: 24px !important;\n      line-height: 22px !important;\n      padding: 0 8px !important;\n      color: #1f2329 !important;\n      background: transparent !important;\n      box-shadow: none !important;\n\n      &::before {\n        display: none !important;\n      }\n\n      &:hover {\n        background: rgba(31, 35, 41, 0.08) !important;\n        color: #1f2329 !important;\n      }\n\n      &.ant-radio-button-wrapper-checked {\n        background: rgba(20, 86, 240, 0.1) !important;\n        color: #1456f0 !important;\n        border: none !important;\n      }\n    }\n\n    /* Slider \u98DE\u4E66\u84DD */\n    .ant-slider-handle::after {\n      box-shadow: 0 0 0 2px #3370ff !important;\n    }\n\n    .ant-slider-track {\n      background-color: #3370ff !important;\n    }\n\n    /* Slider \u884C\u7D27\u51D1\uFF1A\u53BB\u6389\u9ED8\u8BA4 6px \u4E0A\u4E0B\u7A7A\u95F4\uFF0C\u5339\u914D 28px \u63A7\u4EF6\u9AD8\u5EA6 */\n    .ant-form-item .ant-slider {\n      margin: 8px 0 !important;\n    }\n    /* Slider + InputNumber \u7EC4\u5408\uFF08form-render slider \u5185\u7F6E\u5E03\u5C40\uFF09 */\n    .ant-form-item .ant-slider + .ant-input-number {\n      width: 64px !important;\n      flex-shrink: 0;\n    }\n\n    /* InputNumber \u5185\u5D4C\u8F93\u5165\u5BBD\u5EA6\u81EA\u9002\u5E94\uFF08\u907F\u514D\u6EA2\u51FA\u5217\u5BBD\uFF09 */\n    .ant-input-number {\n      width: 100% !important;\n    }\n    .ant-form-item .ant-slider + .ant-input-number {\n      width: 64px !important;\n    }\n\n    /* ColorPicker / \u989C\u8272\u63A7\u4EF6 */\n    .ant-color-picker-trigger {\n      border-radius: 6px !important;\n      min-width: 32px !important;\n      height: 28px !important;\n      padding: 3px !important;\n    }\n\n    /* \"\u6837\u5F0F\" Tab \u7684\u5B57\u6BB5\u66F4\u7D27\u51D1\uFF08boolean \u884C\u7D27\u8D34\uFF09 */\n    .fr-field.flex.flex-row-reverse {\n      padding: 4px 0 !important;\n    }\n  "]))),
+    /* ===== 事件 Tab：简约风格 ===== */
+    eventPane: css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n    padding: 12px 16px 24px;\n  "]))),
+    eventSectionLabel: css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n    font-size: 11px;\n    font-weight: 500;\n    letter-spacing: 0.04em;\n    color: #8f959e;\n    text-transform: uppercase;\n    margin: 4px 0 8px;\n  "]))),
+    eventCard: css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n    background: #fff;\n    border: 1px solid rgba(31, 35, 41, 0.08);\n    border-radius: 8px;\n    margin-bottom: 8px;\n    overflow: hidden;\n    transition: border-color 0.15s, box-shadow 0.15s;\n\n    &:hover {\n      border-color: rgba(51, 112, 255, 0.35);\n      box-shadow: 0 1px 4px rgba(31, 35, 41, 0.04);\n    }\n\n    &:hover .event-delete {\n      opacity: 1;\n    }\n  "]))),
+    eventHeader: css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    padding: 10px 12px;\n    border-bottom: 1px solid rgba(31, 35, 41, 0.06);\n  "]))),
+    eventIcon: css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n    flex-shrink: 0;\n    width: 24px;\n    height: 24px;\n    border-radius: 6px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: #3370ff;\n    background: rgba(51, 112, 255, 0.08);\n    font-size: 13px;\n  "]))),
+    eventTitleWrap: css(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n    flex: 1;\n    min-width: 0;\n  "]))),
+    eventTitle: css(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n    font-size: 13px;\n    font-weight: 500;\n    color: #1f2329;\n    line-height: 18px;\n  "]))),
+    eventDesc: css(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n    font-size: 11px;\n    color: #8f959e;\n    line-height: 16px;\n    margin-top: 1px;\n  "]))),
+    eventDelete: css(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["\n    flex-shrink: 0;\n    font-size: 11px;\n    color: #8f959e;\n    cursor: pointer;\n    padding: 2px 6px;\n    border-radius: 4px;\n    opacity: 0;\n    transition: opacity 0.15s, color 0.12s, background-color 0.12s;\n\n    &:hover {\n      color: #f54a45;\n      background-color: rgba(245, 74, 69, 0.08);\n    }\n  "]))),
+    eventBody: css(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["\n    padding: 4px 0;\n\n    /* \u5728\u5361\u7247\u5185\u90E8\u79FB\u9664 contentArea \u7684\u53CC\u91CD\u5206\u5272\u7EBF\uFF0C\u9760\u5361\u7247\u81EA\u8EAB\u5206\u9694 */\n    .ant-form-item {\n      border-bottom: 1px solid rgba(31, 35, 41, 0.05) !important;\n      padding: 10px 12px !important;\n    }\n\n    .ant-form-item:last-child {\n      border-bottom: none !important;\n    }\n  "]))),
+    /* ===== cardButton event editor ===== */
+    cardButtonEventField: css(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["\n    padding: 10px 12px !important;\n    border-bottom: 1px solid rgba(31, 35, 41, 0.05);\n\n    &:last-child {\n      border-bottom: none;\n    }\n  "]))),
+    cardButtonEventLabel: css(_templateObject24 || (_templateObject24 = _taggedTemplateLiteral(["\n    display: block;\n    margin-bottom: 8px;\n    font-size: 13px;\n    font-weight: 500;\n    line-height: 20px;\n    color: #1f2329;\n  "]))),
+    cardButtonBehaviorList: css(_templateObject25 || (_templateObject25 = _taggedTemplateLiteral(["\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n  "]))),
+    cardButtonBehaviorRow: css(_templateObject26 || (_templateObject26 = _taggedTemplateLiteral(["\n    display: grid;\n    grid-template-columns: 132px minmax(0, 1fr) 32px;\n    gap: 8px;\n    align-items: center;\n\n    .ant-select,\n    .ant-input {\n      width: 100%;\n    }\n  "]))),
+    cardButtonBehaviorRemove: css(_templateObject27 || (_templateObject27 = _taggedTemplateLiteral(["\n    width: 32px;\n    height: 32px;\n    padding: 0;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n  "]))),
+    cardButtonBehaviorEmpty: css(_templateObject28 || (_templateObject28 = _taggedTemplateLiteral(["\n    padding: 2px 0 4px;\n    color: #8f959e;\n    font-size: 12px;\n    line-height: 20px;\n  "]))),
+    cardButtonBehaviorAdd: css(_templateObject29 || (_templateObject29 = _taggedTemplateLiteral(["\n    height: 32px;\n  "]))),
+    /* ===== Addable event list ===== */
+    eventAddList: css(_templateObject30 || (_templateObject30 = _taggedTemplateLiteral(["\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n  "]))),
+    eventAddItem: css(_templateObject31 || (_templateObject31 = _taggedTemplateLiteral(["\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    padding: 10px 12px;\n    background: #fff;\n    border: 1px dashed rgba(31, 35, 41, 0.12);\n    border-radius: 8px;\n    cursor: pointer;\n    transition: border-color 0.15s, background-color 0.15s;\n\n    &:hover {\n      border-color: rgba(51, 112, 255, 0.5);\n      border-style: solid;\n      background-color: rgba(51, 112, 255, 0.02);\n    }\n  "]))),
+    eventAddPlus: css(_templateObject32 || (_templateObject32 = _taggedTemplateLiteral(["\n    flex-shrink: 0;\n    font-size: 13px;\n    color: #8f959e;\n    margin-left: auto;\n  "]))),
+    /* ===== 联动规则编辑器 ===== */
+    linkageBody: css(_templateObject33 || (_templateObject33 = _taggedTemplateLiteral(["\n    padding: 8px 12px 12px;\n  "]))),
+    linkageRule: css(_templateObject34 || (_templateObject34 = _taggedTemplateLiteral(["\n    display: grid;\n    grid-template-columns: 1fr 1fr 18px;\n    gap: 6px;\n    align-items: center;\n    padding: 8px 0;\n    border-bottom: 1px dashed rgba(31, 35, 41, 0.06);\n\n    &:last-of-type {\n      border-bottom: none;\n    }\n  "]))),
+    linkageCondition: css(_templateObject35 || (_templateObject35 = _taggedTemplateLiteral(["\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    gap: 6px;\n    margin-top: 6px;\n    padding-top: 6px;\n    border-top: 1px dashed rgba(31, 35, 41, 0.06);\n  "]))),
+    linkageLabelRow: css(_templateObject36 || (_templateObject36 = _taggedTemplateLiteral(["\n    grid-column: 1 / -1;\n    font-size: 11px;\n    color: #8f959e;\n    margin-bottom: 2px;\n  "]))),
+    linkageRemove: css(_templateObject37 || (_templateObject37 = _taggedTemplateLiteral(["\n    width: 18px;\n    height: 18px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: #8f959e;\n    cursor: pointer;\n    border-radius: 4px;\n    transition: color 0.12s, background-color 0.12s;\n\n    &:hover {\n      color: #f54a45;\n      background-color: rgba(245, 74, 69, 0.08);\n    }\n  "]))),
+    linkageAddRule: css(_templateObject38 || (_templateObject38 = _taggedTemplateLiteral(["\n    margin-top: 10px;\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n    font-size: 12px;\n    color: #3370ff;\n    cursor: pointer;\n    padding: 4px 6px;\n    border-radius: 4px;\n    transition: background-color 0.12s;\n\n    &:hover {\n      background-color: rgba(51, 112, 255, 0.08);\n    }\n  "]))),
+    linkageEmpty: css(_templateObject39 || (_templateObject39 = _taggedTemplateLiteral(["\n    text-align: center;\n    color: #8f959e;\n    font-size: 12px;\n    padding: 8px 0 4px;\n  "]))),
+    /* ===== 点击联动（卡片按钮 behavior=linkage）规则编辑器 ===== */
+    clickLinkageBox: css(_templateObject40 || (_templateObject40 = _taggedTemplateLiteral(["\n    border: 1px solid rgba(31, 35, 41, 0.12);\n    border-radius: 8px;\n    padding: 10px;\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n    background: #fafbfc;\n  "]))),
+    clickLinkageRule: css(_templateObject41 || (_templateObject41 = _taggedTemplateLiteral(["\n    display: grid;\n    grid-template-columns: minmax(0, 1fr) 96px 18px;\n    gap: 6px;\n    align-items: center;\n    padding: 4px 0;\n\n    .ant-select {\n      width: 100%;\n    }\n  "]))),
+    clickLinkageEmpty: css(_templateObject42 || (_templateObject42 = _taggedTemplateLiteral(["\n    color: #8f959e;\n    font-size: 12px;\n    line-height: 20px;\n  "]))),
+    /* 事件 Tab 内的空状态 */
+    eventEmpty: css(_templateObject43 || (_templateObject43 = _taggedTemplateLiteral(["\n    text-align: center;\n    color: #8f959e;\n    font-size: 12px;\n    padding: 12px 0 20px;\n  "]))),
+    /* ===== 字段赋值规则编辑器（独立事件 fieldAssignments 使用） ===== */
+    afterSection: css(_templateObject44 || (_templateObject44 = _taggedTemplateLiteral(["\n    padding: 8px 12px 12px;\n  "]))),
+    afterHeader: css(_templateObject45 || (_templateObject45 = _taggedTemplateLiteral(["\n    margin-bottom: 8px;\n    display: none; /* \u72EC\u7ACB\u4E8B\u4EF6\u5DF2\u6709\u5361\u7247\u5934\uFF0C\u4E0D\u518D\u9700\u8981\u4E8C\u7EA7\u6807\u9898 */\n  "]))),
+    afterTitle: css(_templateObject46 || (_templateObject46 = _taggedTemplateLiteral(["\n    font-size: 12px;\n    font-weight: 500;\n    color: #1f2329;\n    margin-right: 6px;\n  "]))),
+    afterHint: css(_templateObject47 || (_templateObject47 = _taggedTemplateLiteral(["\n    font-size: 11px;\n    color: #8f959e;\n  "]))),
+    /* 两行布局：第一行目标字段(占满)+删除，第二行取值方式+来源输入 */
+    afterRule: css(_templateObject48 || (_templateObject48 = _taggedTemplateLiteral(["\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n    padding: 6px 0;\n    border-bottom: 1px dashed rgba(31, 35, 41, 0.06);\n\n    &:last-of-type {\n      border-bottom: none;\n    }\n  "]))),
+    afterRuleTop: css(_templateObject49 || (_templateObject49 = _taggedTemplateLiteral(["\n    display: flex;\n    align-items: center;\n    gap: 4px;\n\n    .ant-select {\n      flex: 1;\n      min-width: 0;\n    }\n  "]))),
+    afterRuleBottom: css(_templateObject50 || (_templateObject50 = _taggedTemplateLiteral(["\n    display: flex;\n    align-items: center;\n    gap: 4px;\n\n    .ant-select {\n      width: 96px;\n      flex-shrink: 0;\n    }\n\n    .ant-input {\n      flex: 1;\n      min-width: 0;\n    }\n  "]))),
+    afterClearHint: css(_templateObject51 || (_templateObject51 = _taggedTemplateLiteral(["\n    flex: 1;\n    font-size: 11px;\n    color: #8f959e;\n    text-align: center;\n    font-style: italic;\n  "]))),
+    /* ===== 远程数据编辑器 ===== */
+    remoteEditor: css(_templateObject52 || (_templateObject52 = _taggedTemplateLiteral(["\n    padding: 8px 14px 14px;\n  "]))),
+    remoteSectionLabel: css(_templateObject53 || (_templateObject53 = _taggedTemplateLiteral(["\n    font-size: 11px;\n    font-weight: 500;\n    letter-spacing: 0.04em;\n    color: #8f959e;\n    text-transform: uppercase;\n    margin: 4px 0 8px;\n  "]))),
+    remoteField: css(_templateObject54 || (_templateObject54 = _taggedTemplateLiteral(["\n    margin-bottom: 12px;\n\n    &:last-child {\n      margin-bottom: 0;\n    }\n\n    .ant-input,\n    .ant-select-selector,\n    .ant-input-affix-wrapper {\n      border-radius: 6px !important;\n      font-size: 13px !important;\n      border-color: #dee0e3 !important;\n    }\n\n    .ant-input:hover,\n    .ant-input-affix-wrapper:hover {\n      border-color: #3370ff !important;\n    }\n\n    .ant-input:focus,\n    .ant-input-focused,\n    .ant-input-affix-wrapper-focused {\n      border-color: #3370ff !important;\n      box-shadow: 0 0 0 2px rgba(51, 112, 255, 0.1) !important;\n    }\n\n    /* Radio.Group \u7D27\u51D1\u663E\u793A */\n    .ant-radio-group {\n      display: inline-flex;\n      gap: 4px;\n    }\n\n    .ant-radio-wrapper {\n      margin: 0 !important;\n      padding: 3px 10px 3px 6px;\n      border-radius: 6px;\n      font-size: 13px;\n      color: #1f2329;\n\n      &:hover {\n        background-color: rgba(51, 112, 255, 0.06);\n      }\n\n      &.ant-radio-wrapper-checked {\n        background-color: rgba(51, 112, 255, 0.08);\n        color: #1456f0;\n      }\n    }\n  "]))),
+    remoteFieldLabel: css(_templateObject55 || (_templateObject55 = _taggedTemplateLiteral(["\n    display: block;\n    font-size: 12px;\n    font-weight: 500;\n    color: #1f2329;\n    margin-bottom: 4px;\n  "]))),
+    remoteFieldHint: css(_templateObject56 || (_templateObject56 = _taggedTemplateLiteral(["\n    font-size: 11px;\n    color: #8f959e;\n    margin-top: 4px;\n    line-height: 1.4;\n  "]))),
+    /* ===== Toggle Button：贴在面板左外侧的小耳朵 ===== */
+    toggleBtn: css(_templateObject57 || (_templateObject57 = _taggedTemplateLiteral(["\n    position: absolute;\n    top: 50%;\n    left: -14px;\n    transform: translateY(-50%);\n    width: 14px;\n    height: 44px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n    color: #8f959e;\n    background: #fff;\n    border: 1px solid #dee0e3;\n    border-right: none;\n    border-radius: 6px 0 0 6px;\n    font-size: 10px;\n    z-index: 5;\n    box-shadow: -2px 0 6px rgba(31, 35, 41, 0.04);\n    transition: color 0.15s, background-color 0.15s;\n\n    &:hover {\n      color: #fff;\n      background-color: #3370ff;\n      border-color: #3370ff;\n    }\n  "]))),
+    /* ===== 折叠态：贴容器右侧边缘的小耳朵 ===== */
+    hideArrow: css(_templateObject58 || (_templateObject58 = _taggedTemplateLiteral(["\n    position: absolute;\n    right: 0;\n    top: 50%;\n    transform: translateY(-50%);\n    width: 14px;\n    height: 44px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n    color: #8f959e;\n    background: #fff;\n    border: 1px solid #dee0e3;\n    border-right: none;\n    border-radius: 6px 0 0 6px;\n    font-size: 10px;\n    box-shadow: -2px 0 6px rgba(31, 35, 41, 0.04);\n    transition: color 0.15s, background-color 0.15s;\n\n    &:hover {\n      color: #fff;\n      background-color: #3370ff;\n      border-color: #3370ff;\n    }\n  "])))
+  };
+});
+export default useStyles;

package/dist/FormDesigner/components/Sidebar/Element.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+declare const Element: ({ text, name, schema, icon, fixedName, }: {
+    text?: string | undefined;
+    name?: string | undefined;
+    schema?: any;
+    icon?: React.ReactNode;
+    fixedName?: boolean | undefined;
+}) => import("react/jsx-runtime").JSX.Element;
+export default Element;