@4399ywkf/design 2.1.0 → 2.1.1

package/dist/FormRender/widgets/card/chart.js

@@ -0,0 +1,277 @@
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread 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 _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+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; }
+import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+// MVP: 用简单 SVG 渲染基础图表，不依赖外部图表库；
+// 业务方可后续接入 @visactor/vchart 等做完整 VChart spec 渲染。
+var BAR_COLORS = ['#3370FF', '#33B86A', '#FF811A', '#F54A45', '#9D5FFF', '#FFD021'];
+function getNumericValue(value) {
+  var numberValue = Number(value !== null && value !== void 0 ? value : 0);
+  return Number.isFinite(numberValue) ? numberValue : 0;
+}
+function getLabel(value, index) {
+  return value.type || value.year || "#".concat(index + 1);
+}
+function ChartShell(_ref) {
+  var children = _ref.children,
+    title = _ref.title,
+    values = _ref.values;
+  return /*#__PURE__*/_jsxs("div", {
+    style: {
+      background: '#FFF',
+      padding: 12,
+      borderRadius: 6,
+      border: '1px solid #DEE0E3'
+    },
+    children: [title && /*#__PURE__*/_jsx("div", {
+      style: {
+        fontSize: 14,
+        fontWeight: 600,
+        color: '#1F2329',
+        marginBottom: 8
+      },
+      children: title
+    }), children, /*#__PURE__*/_jsx("div", {
+      style: {
+        display: 'flex',
+        flexWrap: 'wrap',
+        gap: 12,
+        marginTop: 6,
+        fontSize: 11,
+        color: '#646A73'
+      },
+      children: values.map(function (v, i) {
+        return /*#__PURE__*/_jsxs("div", {
+          style: {
+            display: 'inline-flex',
+            alignItems: 'center',
+            gap: 4
+          },
+          children: [/*#__PURE__*/_jsx("span", {
+            style: {
+              display: 'inline-block',
+              width: 12,
+              height: 8,
+              background: BAR_COLORS[i % BAR_COLORS.length],
+              borderRadius: 2
+            }
+          }), /*#__PURE__*/_jsx("span", {
+            children: getLabel(v, i)
+          })]
+        }, i);
+      })
+    })]
+  });
+}
+function CartesianChart(_ref2) {
+  var type = _ref2.type,
+    values = _ref2.values,
+    title = _ref2.title;
+  var max = Math.max.apply(Math, _toConsumableArray(values.map(function (v) {
+    return getNumericValue(v.value);
+  })).concat([1]));
+  var step = Math.ceil(max / 5);
+  var yTicks = [0, 1, 2, 3, 4, 5].map(function (i) {
+    return i * step;
+  });
+  var chartH = 200;
+  var chartW = 460;
+  var padL = 36,
+    padR = 12,
+    padT = 8,
+    padB = 30;
+  var innerH = chartH - padT - padB;
+  var innerW = chartW - padL - padR;
+  var baseline = padT + innerH;
+  var denominator = Math.max(values.length - 1, 1);
+  var points = values.map(function (v, i) {
+    var val = getNumericValue(v.value);
+    return {
+      x: padL + (values.length === 1 ? innerW / 2 : i / denominator * innerW),
+      y: baseline - val / (step * 5) * innerH
+    };
+  });
+  var linePath = points.map(function (point, i) {
+    return "".concat(i === 0 ? 'M' : 'L', " ").concat(point.x, " ").concat(point.y);
+  }).join(' ');
+  var areaPath = points.length > 0 ? "M ".concat(points[0].x, " ").concat(baseline, " ").concat(linePath.replace(/^M /, 'L '), " L ").concat(points[points.length - 1].x, " ").concat(baseline, " Z") : '';
+  var barW = Math.min(40, innerW / values.length * 0.5);
+  var gap = (innerW - barW * values.length) / Math.max(values.length, 1);
+  return /*#__PURE__*/_jsx(ChartShell, {
+    title: title,
+    values: values,
+    children: /*#__PURE__*/_jsxs("svg", {
+      viewBox: "0 0 ".concat(chartW, " ").concat(chartH),
+      style: {
+        width: '100%',
+        height: 'auto',
+        display: 'block'
+      },
+      children: [yTicks.map(function (t, i) {
+        var y = padT + innerH - t / (step * 5) * innerH;
+        return /*#__PURE__*/_jsxs("g", {
+          children: [/*#__PURE__*/_jsx("line", {
+            x1: padL,
+            y1: y,
+            x2: chartW - padR,
+            y2: y,
+            stroke: "#EFF0F1",
+            strokeWidth: 1
+          }), /*#__PURE__*/_jsx("text", {
+            x: padL - 4,
+            y: y + 4,
+            fontSize: 10,
+            fill: "#8F959E",
+            textAnchor: "end",
+            children: t
+          })]
+        }, i);
+      }), type === 'area' && areaPath ? /*#__PURE__*/_jsx("path", {
+        d: areaPath,
+        fill: "rgba(51,112,255,0.18)"
+      }) : null, (type === 'line' || type === 'area') && linePath ? /*#__PURE__*/_jsx("path", {
+        d: linePath,
+        fill: "none",
+        stroke: "#3370FF",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: 3
+      }) : null, type === 'bar' ? values.map(function (v, i) {
+        var val = getNumericValue(v.value);
+        var h = val / (step * 5) * innerH;
+        var x = padL + gap / 2 + i * (barW + gap);
+        var y = baseline - h;
+        return /*#__PURE__*/_jsx("rect", {
+          x: x,
+          y: y,
+          width: barW,
+          height: h,
+          fill: BAR_COLORS[i % BAR_COLORS.length],
+          rx: 2
+        }, i);
+      }) : null, type !== 'bar' ? points.map(function (point, i) {
+        return /*#__PURE__*/_jsx("circle", {
+          cx: point.x,
+          cy: point.y,
+          r: type === 'scatter' ? 5 : 4,
+          fill: BAR_COLORS[i % BAR_COLORS.length],
+          stroke: "#FFF",
+          strokeWidth: 2
+        }, i);
+      }) : null]
+    })
+  });
+}
+function getArcPath(cx, cy, r, start, end) {
+  var startX = cx + r * Math.cos(start);
+  var startY = cy + r * Math.sin(start);
+  var endX = cx + r * Math.cos(end);
+  var endY = cy + r * Math.sin(end);
+  var largeArc = end - start > Math.PI ? 1 : 0;
+  return "M ".concat(cx, " ").concat(cy, " L ").concat(startX, " ").concat(startY, " A ").concat(r, " ").concat(r, " 0 ").concat(largeArc, " 1 ").concat(endX, " ").concat(endY, " Z");
+}
+function PieChart(_ref3) {
+  var values = _ref3.values,
+    title = _ref3.title;
+  var chartH = 200;
+  var chartW = 460;
+  var cx = chartW / 2;
+  var cy = 96;
+  var r = 72;
+  var numericValues = values.map(function (v) {
+    return Math.max(getNumericValue(v.value), 0);
+  });
+  var total = numericValues.reduce(function (sum, value) {
+    return sum + value;
+  }, 0);
+  var cursor = -Math.PI / 2;
+  return /*#__PURE__*/_jsx(ChartShell, {
+    title: title,
+    values: values,
+    children: /*#__PURE__*/_jsx("svg", {
+      viewBox: "0 0 ".concat(chartW, " ").concat(chartH),
+      style: {
+        width: '100%',
+        height: 'auto',
+        display: 'block'
+      },
+      children: total <= 0 ? /*#__PURE__*/_jsx("text", {
+        x: cx,
+        y: cy,
+        fill: "#8F959E",
+        fontSize: 13,
+        textAnchor: "middle",
+        children: "\u6682\u65E0\u6709\u6548\u6570\u636E"
+      }) : numericValues.map(function (value, i) {
+        if (value <= 0) return null;
+        var start = cursor;
+        var end = cursor + value / total * Math.PI * 2;
+        cursor = end;
+        if (value === total) {
+          return /*#__PURE__*/_jsx("circle", {
+            cx: cx,
+            cy: cy,
+            r: r,
+            fill: BAR_COLORS[i % BAR_COLORS.length]
+          }, i);
+        }
+        return /*#__PURE__*/_jsx("path", {
+          d: getArcPath(cx, cy, r, start, end),
+          fill: BAR_COLORS[i % BAR_COLORS.length]
+        }, i);
+      })
+    })
+  });
+}
+
+// 数据为空时给一组占位 demo，让卡片不至于空白
+var DEMO_VALUES = [{
+  type: '系列 A',
+  value: 30
+}, {
+  type: '系列 B',
+  value: 45
+}, {
+  type: '系列 C',
+  value: 22
+}];
+export default function Chart(_ref4) {
+  var _schema$props, _ref5, _chartSpec, _spec$data$values, _spec$data, _spec$title, _spec$type, _p$margin;
+  var schema = _ref4.schema;
+  var p = (_schema$props = schema === null || schema === void 0 ? void 0 : schema.props) !== null && _schema$props !== void 0 ? _schema$props : {};
+  // 兼容 chart_spec / chartSpec 两种 key
+  var spec = (_ref5 = (_chartSpec = p.chartSpec) !== null && _chartSpec !== void 0 ? _chartSpec : p.chart_spec) !== null && _ref5 !== void 0 ? _ref5 : {};
+  var rawValues = (_spec$data$values = (_spec$data = spec.data) === null || _spec$data === void 0 ? void 0 : _spec$data.values) !== null && _spec$data$values !== void 0 ? _spec$data$values : [];
+  var values = rawValues.length > 0 ? rawValues : DEMO_VALUES;
+  var title = (_spec$title = spec.title) === null || _spec$title === void 0 ? void 0 : _spec$title.text;
+  var type = (_spec$type = spec.type) !== null && _spec$type !== void 0 ? _spec$type : 'bar';
+  return /*#__PURE__*/_jsx("div", {
+    style: {
+      height: p.height,
+      margin: (_p$margin = p.margin) !== null && _p$margin !== void 0 ? _p$margin : 0
+    },
+    children: type === 'bar' || type === 'line' || type === 'area' || type === 'scatter' ? /*#__PURE__*/_jsx(CartesianChart, {
+      type: type,
+      values: values,
+      title: title
+    }) : type === 'pie' ? /*#__PURE__*/_jsx(PieChart, {
+      values: values,
+      title: title
+    }) : /*#__PURE__*/_jsx("div", {
+      style: {
+        padding: 12,
+        background: '#F5F6F7',
+        borderRadius: 6,
+        textAlign: 'center',
+        color: '#646A73',
+        fontSize: 13
+      },
+      children: "[chart type='".concat(type, "' \u6682\u672A\u5B9E\u73B0\uFF0C\u4E1A\u52A1\u65B9\u63A5\u5165 @visactor/vchart \u540E\u53EF\u6E32\u67D3\u5B8C\u6574 ").concat(type, " \u56FE]")
+    })
+  });
+}

package/dist/FormRender/widgets/card/column.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+interface Props {
+    schema?: {
+        props?: {
+            width?: 'weighted' | 'auto' | 'fill';
+            weight?: number;
+            direction?: 'vertical' | 'horizontal';
+            verticalSpacing?: string;
+            horizontalSpacing?: string;
+            padding?: string;
+            margin?: string;
+            horizontalAlign?: 'left' | 'center' | 'right';
+            verticalAlign?: 'top' | 'center' | 'bottom';
+            backgroundStyle?: string;
+            cornerRadius?: string;
+        };
+    };
+    children?: React.ReactNode;
+}
+export default function Column({ schema, children }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/FormRender/widgets/card/column.js

@@ -0,0 +1,81 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import React from 'react';
+import { useCardWidgetStyles } from "./style";
+import { jsx as _jsx } from "react/jsx-runtime";
+// 跟 interactiveContainer 同套色板：飞书 color_xxxxx 用户自定义 token
+// hash 落到稳定彩色，让 LisaWelcome 之类彩色块卡片视觉真起来
+var CUSTOM_PALETTE = ['#B7D74D', '#36C7C0', '#E89A6E', '#7A93D6', '#E07A8A', '#5BA85E', '#F2C04B'];
+var BG_STYLE = {
+  'transparent': 'transparent',
+  'white': '#FFFFFF',
+  'grey-100': '#F5F6F7',
+  'grey-200': '#EFF0F1',
+  'grey-300': '#DEE0E3',
+  'grey-50': '#F8F8F8'
+};
+function resolveBg(s) {
+  if (!s) return undefined;
+  if (BG_STYLE[s]) return BG_STYLE[s];
+  if (s.startsWith('color_')) {
+    var h = Array.from(s).reduce(function (a, c) {
+      return a + c.charCodeAt(0);
+    }, 0);
+    return CUSTOM_PALETTE[h % CUSTOM_PALETTE.length];
+  }
+  return s;
+}
+var ALIGN_ITEMS = {
+  left: 'flex-start',
+  center: 'center',
+  right: 'flex-end'
+};
+var JUSTIFY = {
+  top: 'flex-start',
+  center: 'center',
+  bottom: 'flex-end'
+};
+function flexFromWidth(width, weight) {
+  if (width === 'fill') return {
+    flex: '1 1 100%'
+  };
+  if (width === 'auto') return {
+    flex: '0 0 auto'
+  };
+  // weighted (default)
+  return {
+    flex: "".concat(weight !== null && weight !== void 0 ? weight : 1, " ").concat(weight !== null && weight !== void 0 ? weight : 1, " 0%")
+  };
+}
+export default function Column(_ref) {
+  var _schema$props, _p$direction, _p$verticalSpacing, _p$horizontalSpacing, _p$padding, _p$margin, _p$horizontalAlign, _p$verticalAlign, _p$cornerRadius;
+  var schema = _ref.schema,
+    children = _ref.children;
+  var _useCardWidgetStyles = useCardWidgetStyles(),
+    styles = _useCardWidgetStyles.styles;
+  var p = (_schema$props = schema === null || schema === void 0 ? void 0 : schema.props) !== null && _schema$props !== void 0 ? _schema$props : {};
+  var direction = (_p$direction = p.direction) !== null && _p$direction !== void 0 ? _p$direction : 'vertical';
+  var gap = direction === 'vertical' ? (_p$verticalSpacing = p.verticalSpacing) !== null && _p$verticalSpacing !== void 0 ? _p$verticalSpacing : '8px' : (_p$horizontalSpacing = p.horizontalSpacing) !== null && _p$horizontalSpacing !== void 0 ? _p$horizontalSpacing : '8px';
+  var bg = resolveBg(p.backgroundStyle);
+  var hasBg = bg && bg !== 'transparent';
+  return /*#__PURE__*/_jsx("div", {
+    className: styles.column,
+    style: _objectSpread(_objectSpread({}, flexFromWidth(p.width, p.weight)), {}, {
+      flexDirection: direction === 'vertical' ? 'column' : 'row',
+      gap: gap,
+      // 有自定义 background 时给个 默认 padding + 圆角让卡片化效果出来
+      padding: (_p$padding = p.padding) !== null && _p$padding !== void 0 ? _p$padding : hasBg ? '12px' : '0px 0px 0px 0px',
+      margin: (_p$margin = p.margin) !== null && _p$margin !== void 0 ? _p$margin : '0px 0px 0px 0px',
+      alignItems: ALIGN_ITEMS[(_p$horizontalAlign = p.horizontalAlign) !== null && _p$horizontalAlign !== void 0 ? _p$horizontalAlign : 'left'],
+      justifyContent: JUSTIFY[(_p$verticalAlign = p.verticalAlign) !== null && _p$verticalAlign !== void 0 ? _p$verticalAlign : 'top']
+    }, hasBg && {
+      background: bg,
+      borderRadius: (_p$cornerRadius = p.cornerRadius) !== null && _p$cornerRadius !== void 0 ? _p$cornerRadius : 8
+    }),
+    children: children
+  });
+}

package/dist/FormRender/widgets/card/columnSet.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+interface Props {
+    schema?: {
+        props?: {
+            flexMode?: 'stretch' | 'flow' | 'bisect' | 'trisect';
+            horizontalSpacing?: string;
+            horizontalAlign?: 'left' | 'center' | 'right';
+            verticalAlign?: 'top' | 'center' | 'bottom';
+            margin?: string;
+            backgroundStyle?: string;
+            padding?: string;
+            cornerRadius?: string;
+        };
+    };
+    children?: React.ReactNode;
+}
+export default function ColumnSet({ schema, children }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/FormRender/widgets/card/columnSet.js

@@ -0,0 +1,56 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import React from 'react';
+import { useCardWidgetStyles } from "./style";
+import { jsx as _jsx } from "react/jsx-runtime";
+var JUSTIFY = {
+  left: 'flex-start',
+  center: 'center',
+  right: 'flex-end'
+};
+var ALIGN = {
+  top: 'flex-start',
+  center: 'center',
+  bottom: 'flex-end'
+};
+
+// 飞书 background_style → 实际 background-color
+var BG_STYLE = {
+  transparent: 'transparent',
+  white: '#FFFFFF',
+  'grey-100': '#F5F6F7',
+  'grey-200': '#EFF0F1',
+  'grey-300': '#DEE0E3',
+  'grey-50': '#F8F8F8'
+};
+export default function ColumnSet(_ref) {
+  var _schema$props, _BG_STYLE$p$backgroun, _p$horizontalSpacing, _p$margin, _p$horizontalAlign, _p$verticalAlign, _p$padding, _p$cornerRadius;
+  var schema = _ref.schema,
+    children = _ref.children;
+  var _useCardWidgetStyles = useCardWidgetStyles(),
+    styles = _useCardWidgetStyles.styles;
+  var p = (_schema$props = schema === null || schema === void 0 ? void 0 : schema.props) !== null && _schema$props !== void 0 ? _schema$props : {};
+  var bg = p.backgroundStyle ? (_BG_STYLE$p$backgroun = BG_STYLE[p.backgroundStyle]) !== null && _BG_STYLE$p$backgroun !== void 0 ? _BG_STYLE$p$backgroun : p.backgroundStyle : undefined;
+  var hasBg = bg && bg !== 'transparent';
+  return /*#__PURE__*/_jsx("div", {
+    className: styles.columnSet,
+    style: _objectSpread({
+      width: '100%',
+      boxSizing: 'border-box',
+      minWidth: 0,
+      gap: (_p$horizontalSpacing = p.horizontalSpacing) !== null && _p$horizontalSpacing !== void 0 ? _p$horizontalSpacing : '8px',
+      margin: (_p$margin = p.margin) !== null && _p$margin !== void 0 ? _p$margin : '0px 0px 0px 0px',
+      justifyContent: JUSTIFY[(_p$horizontalAlign = p.horizontalAlign) !== null && _p$horizontalAlign !== void 0 ? _p$horizontalAlign : 'left'],
+      alignItems: ALIGN[(_p$verticalAlign = p.verticalAlign) !== null && _p$verticalAlign !== void 0 ? _p$verticalAlign : 'top']
+    }, hasBg && {
+      background: bg,
+      padding: (_p$padding = p.padding) !== null && _p$padding !== void 0 ? _p$padding : '12px',
+      borderRadius: (_p$cornerRadius = p.cornerRadius) !== null && _p$cornerRadius !== void 0 ? _p$cornerRadius : '6px'
+    }),
+    children: children
+  });
+}

package/dist/FormRender/widgets/card/div.d.ts

@@ -0,0 +1,17 @@
+interface PlainText {
+    tag?: 'plain_text';
+    content?: string;
+    text_size?: string;
+    text_align?: 'left' | 'center' | 'right';
+    text_color?: string;
+}
+interface Props {
+    schema?: {
+        props?: {
+            text?: PlainText | string;
+            margin?: string;
+        };
+    };
+}
+export default function Div({ schema }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/FormRender/widgets/card/div.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+// 飞书 textSize → px / lh
+var SIZE_PX = {
+  notation: 12,
+  small: 12,
+  normal: 14,
+  normal_v2: 14,
+  heading: 16,
+  heading_0: 24,
+  heading_1: 20,
+  heading_2: 18,
+  heading_3: 16,
+  heading_4: 14
+};
+var SIZE_LH = {
+  notation: 20,
+  small: 20,
+  normal: 22,
+  normal_v2: 22,
+  heading: 24,
+  heading_0: 32,
+  heading_1: 28,
+  heading_2: 26,
+  heading_3: 24,
+  heading_4: 22
+};
+var COLOR_MAP = {
+  default: '#1f2329',
+  grey: '#646a73',
+  green: '#33b86a',
+  red: '#f54a45',
+  blue: '#3370ff',
+  orange: '#ff811a',
+  yellow: '#fa8c16',
+  purple: '#7a35f7'
+};
+export default function Div(_ref) {
+  var _schema$props, _t$content, _p$margin, _SIZE_PX, _SIZE_LH, _COLOR_MAP;
+  var schema = _ref.schema;
+  var p = (_schema$props = schema === null || schema === void 0 ? void 0 : schema.props) !== null && _schema$props !== void 0 ? _schema$props : {};
+  var t = p.text;
+  var content = typeof t === 'string' ? t : (_t$content = t === null || t === void 0 ? void 0 : t.content) !== null && _t$content !== void 0 ? _t$content : '';
+  var textSize = _typeof(t) === 'object' ? t === null || t === void 0 ? void 0 : t.text_size : undefined;
+  var textAlign = _typeof(t) === 'object' ? t === null || t === void 0 ? void 0 : t.text_align : undefined;
+  var textColor = _typeof(t) === 'object' ? t === null || t === void 0 ? void 0 : t.text_color : undefined;
+  return /*#__PURE__*/_jsx("div", {
+    style: {
+      margin: (_p$margin = p.margin) !== null && _p$margin !== void 0 ? _p$margin : 0,
+      fontSize: (_SIZE_PX = SIZE_PX[textSize !== null && textSize !== void 0 ? textSize : '']) !== null && _SIZE_PX !== void 0 ? _SIZE_PX : 14,
+      lineHeight: ((_SIZE_LH = SIZE_LH[textSize !== null && textSize !== void 0 ? textSize : '']) !== null && _SIZE_LH !== void 0 ? _SIZE_LH : 22) + 'px',
+      textAlign: textAlign,
+      color: (_COLOR_MAP = COLOR_MAP[textColor !== null && textColor !== void 0 ? textColor : '']) !== null && _COLOR_MAP !== void 0 ? _COLOR_MAP : '#1f2329'
+    },
+    children: content
+  });
+}

package/dist/FormRender/widgets/card/fieldGroup.d.ts

@@ -0,0 +1,30 @@
+/**
+ * fieldGroup —— 数据语义分组容器。
+ *
+ * 跟 column / columnSet / formContainer 这些"纯布局容器"的区别：
+ *  - 布局容器：只渲染 <div>，**不进 form name 路径**，提交时透明
+ *  - fieldGroup：也只渲染 <div>，**进 form name 路径**，让子叶子提交时打成一包
+ *
+ * 视觉上跟 column 一样朴素（没有边框/背景），让用户感受不到额外干扰；
+ * 设计器画布侧用一枚 📦 角标在选中/hover 时露出来，区分"这是数据节点"，
+ * 但运行时 widget 本身不引入任何视觉装饰——保持"还是普通容器"的心智。
+ *
+ * 嵌套场景：fieldGroup 之间可以嵌套（外层 group 'user' + 内层 group 'profile'
+ *  → name path = ['user','profile',<leaf>]）；fieldGroup 也可以混在 column 等
+ *  布局容器里，布局节点对 path 透明，fieldGroup 是唯一进 path 的中间环节。
+ */
+import React from 'react';
+interface Props {
+    schema?: {
+        props?: {
+            direction?: 'vertical' | 'horizontal';
+            horizontalSpacing?: string;
+            verticalSpacing?: string;
+            padding?: string;
+            margin?: string;
+        };
+    };
+    children?: React.ReactNode;
+}
+declare const FieldGroup: React.FC<Props>;
+export default FieldGroup;

package/dist/FormRender/widgets/card/fieldGroup.js

@@ -0,0 +1,40 @@
+/**
+ * fieldGroup —— 数据语义分组容器。
+ *
+ * 跟 column / columnSet / formContainer 这些"纯布局容器"的区别：
+ *  - 布局容器：只渲染 <div>，**不进 form name 路径**，提交时透明
+ *  - fieldGroup：也只渲染 <div>，**进 form name 路径**，让子叶子提交时打成一包
+ *
+ * 视觉上跟 column 一样朴素（没有边框/背景），让用户感受不到额外干扰；
+ * 设计器画布侧用一枚 📦 角标在选中/hover 时露出来，区分"这是数据节点"，
+ * 但运行时 widget 本身不引入任何视觉装饰——保持"还是普通容器"的心智。
+ *
+ * 嵌套场景：fieldGroup 之间可以嵌套（外层 group 'user' + 内层 group 'profile'
+ *  → name path = ['user','profile',<leaf>]）；fieldGroup 也可以混在 column 等
+ *  布局容器里，布局节点对 path 透明，fieldGroup 是唯一进 path 的中间环节。
+ */
+import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+var FieldGroup = function FieldGroup(_ref) {
+  var _schema$props, _p$direction, _p$verticalSpacing, _p$horizontalSpacing, _p$padding, _p$margin;
+  var schema = _ref.schema,
+    children = _ref.children;
+  var p = (_schema$props = schema === null || schema === void 0 ? void 0 : schema.props) !== null && _schema$props !== void 0 ? _schema$props : {};
+  var direction = (_p$direction = p.direction) !== null && _p$direction !== void 0 ? _p$direction : 'vertical';
+  var gap = direction === 'vertical' ? (_p$verticalSpacing = p.verticalSpacing) !== null && _p$verticalSpacing !== void 0 ? _p$verticalSpacing : '12px' : (_p$horizontalSpacing = p.horizontalSpacing) !== null && _p$horizontalSpacing !== void 0 ? _p$horizontalSpacing : '8px';
+  return /*#__PURE__*/_jsx("div", {
+    "data-widget": "fieldGroup",
+    style: {
+      width: '100%',
+      minWidth: 0,
+      boxSizing: 'border-box',
+      display: 'flex',
+      flexDirection: direction === 'vertical' ? 'column' : 'row',
+      gap: gap,
+      padding: (_p$padding = p.padding) !== null && _p$padding !== void 0 ? _p$padding : '0px 0px 0px 0px',
+      margin: (_p$margin = p.margin) !== null && _p$margin !== void 0 ? _p$margin : '0px 0px 0px 0px'
+    },
+    children: children
+  });
+};
+export default FieldGroup;

package/dist/FormRender/widgets/card/formContainer.d.ts

@@ -0,0 +1,17 @@
+import React, { FC } from 'react';
+interface Props {
+    schema?: {
+        props?: {
+            direction?: 'vertical' | 'horizontal';
+            horizontalSpacing?: string;
+            verticalSpacing?: string;
+            padding?: string;
+            margin?: string;
+            /** 容器 loading 蒙层（set_state 行为可写：请求前置 true，onSuccess/onError 恢复 false） */
+            loading?: boolean;
+        };
+    };
+    children?: React.ReactNode;
+}
+declare const FormContainer: FC<Props>;
+export default FormContainer;

package/dist/FormRender/widgets/card/formContainer.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import LoadingOverlay from "./loadingOverlay";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var FormContainer = function FormContainer(_ref) {
+  var _schema$props, _p$direction, _p$verticalSpacing, _p$horizontalSpacing, _p$padding, _p$margin;
+  var schema = _ref.schema,
+    children = _ref.children;
+  var p = (_schema$props = schema === null || schema === void 0 ? void 0 : schema.props) !== null && _schema$props !== void 0 ? _schema$props : {};
+  var direction = (_p$direction = p.direction) !== null && _p$direction !== void 0 ? _p$direction : 'vertical';
+  var gap = direction === 'vertical' ? (_p$verticalSpacing = p.verticalSpacing) !== null && _p$verticalSpacing !== void 0 ? _p$verticalSpacing : '12px' : (_p$horizontalSpacing = p.horizontalSpacing) !== null && _p$horizontalSpacing !== void 0 ? _p$horizontalSpacing : '8px';
+  return /*#__PURE__*/_jsxs("div", {
+    style: {
+      width: '100%',
+      minWidth: 0,
+      minHeight: 40,
+      boxSizing: 'border-box',
+      display: 'flex',
+      flexDirection: direction === 'vertical' ? 'column' : 'row',
+      gap: gap,
+      padding: (_p$padding = p.padding) !== null && _p$padding !== void 0 ? _p$padding : '0px 0px 0px 0px',
+      margin: (_p$margin = p.margin) !== null && _p$margin !== void 0 ? _p$margin : '0px 0px 0px 0px',
+      position: 'relative'
+    },
+    children: [children, /*#__PURE__*/_jsx(LoadingOverlay, {
+      spinning: !!p.loading
+    })]
+  });
+};
+export default FormContainer;

package/dist/FormRender/widgets/card/hr.d.ts

@@ -0,0 +1 @@
+export default function Hr({ schema }: any): import("react/jsx-runtime").JSX.Element;