@mybricks/to-code-taro 1.0.5 → 1.0.7

package/dist/esm/utils/style/converter.js

@@ -2,6 +2,49 @@ import _typeof from "@babel/runtime/helpers/esm/typeof";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import pxtransform from "./pxtransform";
 import { kebabToCamel, camelToKebab } from "../common/string";
+/**
+ * 鸿蒙/Taro 规范：尺寸相关属性（数值即 px，需转 rpx）
+ */
+var DIMENSION_PROPS = /^(width|height|padding|margin|top|right|bottom|left|fontSize|borderRadius|borderWidth|gap|rowGap|columnGap)/i;
+/**
+ * 混合属性：数值视为倍数（不转），px 字符串视为固定高度（需转 rpx）
+ */
+var MIXED_PROPS = /^(lineHeight)/i;
+var MIN_MAX_PROPS = /^(min|max)/i;
+
+/**
+ * 判断是否为尺寸相关属性（数值即 px）
+ */
+function isDimensionProp(key) {
+  if (DIMENSION_PROPS.test(key)) return true;
+  if (MIN_MAX_PROPS.test(key)) {
+    var subKey = key.replace(/^(min|max)/i, "");
+    var normalizedSubKey = subKey.charAt(0).toLowerCase() + subKey.slice(1);
+    return DIMENSION_PROPS.test(normalizedSubKey);
+  }
+  return false;
+}
+
+/**
+ * 统一处理样式值的转换逻辑
+ */
+function transformStyleValue(key, value) {
+  if (typeof value !== "string" && typeof value !== "number") return value;
+
+  // 1. 尺寸属性：数值/px 字符串 均转换
+  if (isDimensionProp(key)) {
+    return pxtransform(value);
+  }
+
+  // 2. 混合属性 (如 lineHeight)：仅转换 px 字符串，数值视为倍数保持原样
+  if (MIXED_PROPS.test(key)) {
+    return typeof value === "string" ? pxtransform(value) : value;
+  }
+
+  // 3. 其他属性 (如 zIndex, flex, fontWeight)：保持原样
+  return value;
+}
+
 /** 转换根节点样式 */
 export var convertRootStyle = function convertRootStyle(style) {
   var rootStyle = {};
@@ -9,13 +52,11 @@ export var convertRootStyle = function convertRootStyle(style) {
     var _ref2 = _slicedToArray(_ref, 2),
       key = _ref2[0],
       value = _ref2[1];
-    // 忽略一些不需要的属性
     if (key === "_new" || key === "themesId" || key === "visibility" || key === "styleAry") {
       return;
     }
     if (key === "layout") {
       if (_typeof(value) === "object" && value !== null) {
-        // 处理 layout 对象，动态转换所有属性
         var layoutObj = value;
         Object.entries(layoutObj).forEach(function (_ref3) {
           var _ref4 = _slicedToArray(_ref3, 2),
@@ -28,9 +69,8 @@ export var convertRootStyle = function convertRootStyle(style) {
               rootStyle["position"] = lValue;
             }
           } else {
-            // 所有布局属性转为小驼峰（React 行内样式使用 camelCase）
             var camelLayoutKey = kebabToCamel(lKey);
-            rootStyle[camelLayoutKey] = pxtransform(lValue);
+            rootStyle[camelLayoutKey] = transformStyleValue(camelLayoutKey, lValue);
           }
         });
       } else if (value === "flex-row") {
@@ -40,18 +80,12 @@ export var convertRootStyle = function convertRootStyle(style) {
         rootStyle["display"] = "flex";
         rootStyle["flexDirection"] = "column";
       } else if (value === "smart") {
-        // 处理 layout: 'smart'
         rootStyle["position"] = "relative";
       }
       return;
     }
-
-    // 根样式转换，统一转为小驼峰（React 行内样式使用 camelCase）
-    // 如果 key 已经是 kebab-case，转换为 camelCase；如果已经是 camelCase，保持不变
-    var camelKey = key.includes('-') ? kebabToCamel(key) : key;
-    if (typeof value === "string" || typeof value === "number") {
-      rootStyle[camelKey] = pxtransform(value);
-    }
+    var camelKey = key.includes("-") ? kebabToCamel(key) : key;
+    rootStyle[camelKey] = transformStyleValue(camelKey, value);
   });
   return rootStyle;
 };
@@ -61,7 +95,6 @@ export var convertComponentStyle = function convertComponentStyle(style) {
   var resultStyle = {};
   var rootStyle = convertRootStyle(style);
   if (style.styleAry) {
-    // 处理样式数组
     style.styleAry.forEach(function (_ref5) {
       var css = _ref5.css,
         selector = _ref5.selector;
@@ -84,8 +117,8 @@ export var convertComponentStyle = function convertComponentStyle(style) {
                   transformedCss["position"] = lValue;
                 }
               } else {
-                // 布局属性转为小驼峰（React 行内样式使用 camelCase）
-                transformedCss[kebabToCamel(lKey)] = lValue;
+                var camelLKey = kebabToCamel(lKey);
+                transformedCss[camelLKey] = transformStyleValue(camelLKey, lValue);
               }
             });
           } else if (cssValue === "flex-row") {
@@ -98,10 +131,8 @@ export var convertComponentStyle = function convertComponentStyle(style) {
             transformedCss["position"] = "relative";
           }
         } else {
-          // CSS 属性转为小驼峰（React 行内样式使用 camelCase）
-          // 如果 cssKey 已经是 kebab-case，转换为 camelCase；如果已经是 camelCase，保持不变
-          var camelKey = cssKey.includes('-') ? kebabToCamel(cssKey) : cssKey;
-          transformedCss[camelKey] = pxtransform(cssValue);
+          var camelKey = cssKey.includes("-") ? kebabToCamel(cssKey) : cssKey;
+          transformedCss[camelKey] = transformStyleValue(camelKey, cssValue);
         }
       });
       resultStyle[selector] = transformedCss;
@@ -119,13 +150,17 @@ export var convertStyleAryToCss = function convertStyleAryToCss(styleAry, parent
     var selector = _ref10.selector,
       css = _ref10.css;
     if (!selector || !css) return "";
-
-    // 处理选择器，如果是以 > 开头，处理空格
-    var finalSelector = selector;
-    if (finalSelector.startsWith(">")) {
-      finalSelector = "".concat(prefix).concat(finalSelector);
-    } else {
-      finalSelector = "".concat(prefix).concat(finalSelector);
+    var finalSelector = selector.trim();
+    if (parentSelector) {
+      var _prefix = ".".concat(parentSelector);
+      if (finalSelector.startsWith(">")) {
+        // 移除 >，改为后代选择器以提升兼容性（Taro 可能会插入组件层级）
+        var subSelector = finalSelector.substring(1).trim();
+        finalSelector = "".concat(_prefix, " ").concat(subSelector, ", ").concat(_prefix).concat(subSelector);
+      } else {
+        // 同时支持后代选择器和同级选择器（针对 itemWrap 场景）
+        finalSelector = "".concat(_prefix, " ").concat(finalSelector, ", ").concat(_prefix).concat(finalSelector);
+      }
     }
     var transformedCss = {};
     Object.entries(css).forEach(function (_ref11) {
@@ -146,7 +181,8 @@ export var convertStyleAryToCss = function convertStyleAryToCss(styleAry, parent
                 transformedCss["position"] = lValue;
               }
             } else {
-              transformedCss[kebabToCamel(lKey)] = lValue;
+              var camelLKey = kebabToCamel(lKey);
+              transformedCss[camelLKey] = transformStyleValue(camelLKey, lValue);
             }
           });
         } else if (value === "flex-row") {
@@ -159,17 +195,16 @@ export var convertStyleAryToCss = function convertStyleAryToCss(styleAry, parent
           transformedCss["position"] = "relative";
         }
       } else {
-        transformedCss[kebabToCamel(key)] = value;
+        var camelKey = kebabToCamel(key);
+        transformedCss[camelKey] = transformStyleValue(camelKey, value);
       }
     });
     var cssString = Object.entries(transformedCss).map(function (_ref15) {
       var _ref16 = _slicedToArray(_ref15, 2),
         key = _ref16[0],
         value = _ref16[1];
-      // 使用通用工具转换驼峰为中划线
       var kebabKey = camelToKebab(key);
-      var formattedValue = typeof value === "number" ? "".concat(value, "px") : value;
-      return "  ".concat(kebabKey, ": ").concat(formattedValue, ";");
+      return "  ".concat(kebabKey, ": ").concat(value, ";");
     }).join("\n");
     return "".concat(finalSelector, " {\n").concat(cssString, "\n}");
   }).join("\n\n");

package/dist/esm/utils/style/pxtransform.d.ts

@@ -1,28 +1,4 @@
 /**
- * px 转 rpx 适配方法
- * 用于 Taro/小程序样式转换
- *
- * 转换规则：
- * - 如果 px 值 <= MIN_PX_THRESHOLD，保持为 px（避免 1px 边框等问题）
- * - 否则转换为 rpx（px * 2，基于 375px 设计稿）
- *
- * 注意：Taro 中 rpx 需要作为字符串使用，如 "20rpx"
+ * 样式转换主函数
  */
-/** 最小 px 阈值，小于等于此值的 px 不转换为 rpx */
-export declare const MIN_PX_THRESHOLD = 1;
-/** rem 基准值，默认 px = 1rem */
-export declare const REM_BASE = 20;
-/**
- * 将 px 值转换为 rpx（用于 Taro 小程序）
- * @param value - 样式值，可以是字符串（如 "10px"）或数字（如 10）
- * @returns 转换后的值，字符串类型（如 "20rpx"）或数字（如 1，用于小于等于 MIN_PX_THRESHOLD 的情况）
- */
-export declare function pxToRpx(value: string | number): string | number;
-/**
- * 将 px 值转换为 rem（用于 H5/Web）
- * @param value - 样式值，可以是字符串（如 "16px"）或数字（如 16）
- * @returns 转换后的值，字符串类型（如 "1rem"）或数字（如 1，用于小于等于 MIN_PX_THRESHOLD 的情况）
- */
-export declare function pxToRem(value: string | number): string | number;
-declare const pxtransform: (value: string | number, type?: "rpx" | "rem") => string | number;
-export default pxtransform;
+export default function pxtransform(value: any, target?: "rpx" | "rem"): any;

package/dist/esm/utils/style/pxtransform.js

@@ -1,121 +1,54 @@
 /**
- * px 转 rpx 适配方法
- * 用于 Taro/小程序样式转换
- * 
- * 转换规则：
- * - 如果 px 值 <= MIN_PX_THRESHOLD，保持为 px（避免 1px 边框等问题）
- * - 否则转换为 rpx（px * 2，基于 375px 设计稿）
- * 
- * 注意：Taro 中 rpx 需要作为字符串使用，如 "20rpx"
+ * px 转 rpx (Taro 标准)
  */
+function pxToRpx(value) {
+  if (typeof value === "number") {
+    return "".concat(value * 2, "rpx");
+  }
+  if (typeof value !== "string") return String(value);
 
-/** 最小 px 阈值，小于等于此值的 px 不转换为 rpx */
-export var MIN_PX_THRESHOLD = 1;
-
-/** rem 基准值，默认 px = 1rem */
-export var REM_BASE = 20;
+  // 处理带有 px 的字符串，支持替换所有 px
+  return value.replace(/(\d*\.?\d+)px/g, function (_, num) {
+    return "".concat(parseFloat(num) * 2, "rpx");
+  });
+}
 
 /**
- * 检查值是否是 px 格式（数字+px 或纯数字）
- * @param value - 样式值
- * @returns 如果是 px 格式返回 true，否则返回 false
+ * px 转 rem (H5 标准)
  */
-function isPxValue(value) {
+function pxToRem(value) {
   if (typeof value === "number") {
-    return true; // 纯数字视为 px
+    return "".concat(value / 16, "rem");
   }
-  if (typeof value === "string") {
-    // 匹配 "数字px" 格式
-    var regex = /^(\d*\.?\d+)px$/;
-    return regex.test(value);
-  }
-  return false;
+  if (typeof value !== "string") return String(value);
+  return value.replace(/(\d*\.?\d+)px/g, function (_, num) {
+    return "".concat(parseFloat(num) / 16, "rem");
+  });
 }
 
 /**
- * 将 px 值转换为 rpx（用于 Taro 小程序）
- * @param value - 样式值，可以是字符串（如 "10px"）或数字（如 10）
- * @returns 转换后的值，字符串类型（如 "20rpx"）或数字（如 1，用于小于等于 MIN_PX_THRESHOLD 的情况）
+ * 判断是否需要转换
  */
-export function pxToRpx(value) {
-  // 如果是数字
+function isPxValue(value) {
   if (typeof value === "number") {
-    // 小于等于 MIN_PX_THRESHOLD 的保持原值（作为 px，返回数字）
-    if (value <= MIN_PX_THRESHOLD) {
-      return value;
-    }
-    // 其他值转换为 rpx 字符串
-    return "".concat(value * 2, "rpx");
+    return true;
   }
-
-  // 如果是字符串
   if (typeof value === "string") {
-    // 匹配 "数字px" 格式
-    var regex = /^(\d*\.?\d+)px$/;
-    var match = value.match(regex);
-    if (match) {
-      var pxValue = parseFloat(match[1]);
-      // 小于等于 MIN_PX_THRESHOLD 的保持为 px（返回数字，React 会自动添加 "px"）
-      if (pxValue <= MIN_PX_THRESHOLD) {
-        return pxValue;
-      }
-      // 其他值转换为 rpx 字符串
-      return "".concat(pxValue * 2, "rpx");
-    }
-
-    // 如果不包含 px，可能是百分比或其他单位，保持原样
-    return value;
+    return /\d*\.?\d+px/.test(value); // 包含 px 的字符串或数字需要转换
   }
-  return value;
+  return false;
 }
 
 /**
- * 将 px 值转换为 rem（用于 H5/Web）
- * @param value - 样式值，可以是字符串（如 "16px"）或数字（如 16）
- * @returns 转换后的值，字符串类型（如 "1rem"）或数字（如 1，用于小于等于 MIN_PX_THRESHOLD 的情况）
+ * 样式转换主函数
  */
-export function pxToRem(value) {
-  // 如果是数字
-  if (typeof value === "number") {
-    // 小于等于 MIN_PX_THRESHOLD 的保持原值（作为 px，返回数字）
-    if (value <= MIN_PX_THRESHOLD) {
-      return value;
-    }
-    // 其他值转换为 rem 字符串
-    var remValue = value / REM_BASE;
-    return "".concat(remValue, "rem");
-  }
-
-  // 如果是字符串
-  if (typeof value === "string") {
-    // 匹配 "数字px" 格式
-    var regex = /^(\d*\.?\d+)px$/;
-    var match = value.match(regex);
-    if (match) {
-      var pxValue = parseFloat(match[1]);
-      // 小于等于 MIN_PX_THRESHOLD 的保持为 px（返回数字，React 会自动添加 "px"）
-      if (pxValue <= MIN_PX_THRESHOLD) {
-        return pxValue;
-      }
-      // 其他值转换为 rem 字符串
-      var _remValue = pxValue / REM_BASE;
-      return "".concat(_remValue, "rem");
-    }
-
-    // 如果不包含 px，可能是百分比或其他单位，保持原样
+export default function pxtransform(value) {
+  var target = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "rpx";
+  if (!isPxValue(value)) {
     return value;
   }
-  return value;
-}
-var pxtransform = function pxtransform(value) {
-  var type = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "rpx";
-  if (isPxValue(value)) {
-    if (type === "rpx") {
-      return pxToRpx(value);
-    } else if (type === "rem") {
-      return pxToRem(value);
-    }
+  if (target === "rem") {
+    return pxToRem(value);
   }
-  return value;
-};
-export default pxtransform;
+  return pxToRpx(value);
+}

package/dist/esm/utils/templates/component.js

@@ -1,4 +1,4 @@
-import { indentation } from "../index";
+import { indentation, toPascalCase } from "./index";
 /** 生成组件 Inputs 映射代码 */
 export var genComponentInputsCode = function genComponentInputsCode(indent, providerName, comId) {
   return "".concat(indent, "inputs['").concat(comId, "'] = useBindInputs(controllers.current.").concat(providerName, ", '").concat(comId, "');\n");
@@ -21,7 +21,8 @@ export var genSlotRenderRef = function genSlotRenderRef(_ref) {
     renderId = _ref.renderId,
     indent = _ref.indent,
     isLast = _ref.isLast;
-  return "".concat(indent).concat(slotId, ": {\n").concat(indent, "  render: ").concat(renderId, "_Render,\n").concat(indent, "}").concat(isLast ? '' : ',', "\n");
+  var renderFunctionName = toPascalCase("".concat(renderId, "_Render"));
+  return "".concat(indent).concat(slotId, ": {\n").concat(indent, "  render: ").concat(renderFunctionName, ",\n").concat(indent, "}").concat(isLast ? '' : ',', "\n");
 };
 
 /** 格式化插槽内容为 render 函数体代码 */

package/dist/esm/utils/templates/index.d.ts

@@ -1,9 +1,19 @@
+import { indentation } from "../index";
+export { indentation };
+/** 将第一个字符转大写 */
+export declare const firstCharToUpperCase: (str: string) => string;
+/** 格式化插槽内容缩进 */
+export declare const formatSlotContent: (uiContent: string, baseIndentSize: number, renderBodyIndent: string) => string;
+/** 将字符串转为大驼峰 */
+export declare const toPascalCase: (str: string) => string;
 /** Taro/React UI 组件代码生成 */
 export declare const getUiComponentCode: (params: {
     componentName: string;
     meta: any;
     props: any;
     resultStyle: Record<string, Record<string, string | number>>;
+    /** 可选：自定义 data 的表达式代码（用于插槽动态入参等场景） */
+    dataCode?: string;
     componentInputs?: string[];
     componentOutputs?: string[];
     comEventCode?: string;

package/dist/esm/utils/templates/index.js

@@ -1,6 +1,27 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { indentation } from "../index";
+export { indentation };
+
+/** 将第一个字符转大写 */
+export var firstCharToUpperCase = function firstCharToUpperCase(str) {
+  if (!str) return str;
+  return str.charAt(0).toUpperCase() + str.slice(1);
+};
+
+/** 格式化插槽内容缩进 */
+export var formatSlotContent = function formatSlotContent(uiContent, baseIndentSize, renderBodyIndent) {
+  return uiContent.split("\n").map(function (line) {
+    return "".concat(renderBodyIndent).concat(line);
+  }).join("\n");
+};
+
+/** 将字符串转为大驼峰 */
+export var toPascalCase = function toPascalCase(str) {
+  return str.split(/[_-]/).map(function (word) {
+    return word.charAt(0).toUpperCase() + word.slice(1);
+  }).join("");
+};
 
 /** Taro/React UI 组件代码生成 */
 export var getUiComponentCode = function getUiComponentCode(params, config) {
@@ -8,9 +29,7 @@ export var getUiComponentCode = function getUiComponentCode(params, config) {
     meta = params.meta,
     props = params.props,
     resultStyle = params.resultStyle,
-    componentInputs = params.componentInputs,
-    componentOutputs = params.componentOutputs,
-    comEventCode = params.comEventCode,
+    dataCode = params.dataCode,
     slotsCode = params.slotsCode,
     _params$eventHandlers = params.eventHandlers,
     eventHandlers = _params$eventHandlers === void 0 ? {} : _params$eventHandlers;
@@ -22,29 +41,34 @@ export var getUiComponentCode = function getUiComponentCode(params, config) {
   ui += "\n".concat(indent2, "component={").concat(componentName, "}");
   ui += "\n".concat(indent2, "id='").concat(meta.id, "'");
   ui += "\n".concat(indent2, "className='").concat(meta.id, "'");
+  if (meta.name) {
+    ui += "\n".concat(indent2, "name='").concat(meta.name, "'");
+  }
 
-  // 添加 style（从 resultStyle.root 中提取）
+  // 添加 style
   if (resultStyle.root && Object.keys(resultStyle.root).length > 0) {
     var styleCode = JSON.stringify(resultStyle.root);
     ui += "\n".concat(indent2, "style={").concat(styleCode, "}");
   }
 
-  // 添加 data（直接传递 props.data，WithCom 内部会使用 useModel）
-  var initialData = JSON.stringify(props.data || {});
-  ui += "\n".concat(indent2, "data={").concat(initialData, "}");
+  // 添加 data
+  var initialDataCode = dataCode !== null && dataCode !== void 0 ? dataCode : JSON.stringify(props.data || {});
+  ui += "\n".concat(indent2, "data={").concat(initialDataCode, "}");
 
-  // 添加事件处理函数（onClick, onScroll 等）
+  // 添加事件处理函数
   Object.entries(eventHandlers).forEach(function (_ref) {
     var _ref2 = _slicedToArray(_ref, 2),
       eventName = _ref2[0],
       handlerCode = _ref2[1];
-    // eventName 已经是 onXxx 格式（onClick, onScroll 等），直接使用
     ui += "\n".concat(indent2).concat(eventName, "={").concat(handlerCode, "}");
   });
 
   // 添加插槽
   if (slotsCode) {
+    console.log("[getUiComponentCode] Component ".concat(meta.id, " has slotsCode, length: ").concat(slotsCode.length));
     ui += "\n".concat(indent2, "slots={{\n").concat(slotsCode).concat(indent2, "}}");
+  } else {
+    console.log("[getUiComponentCode] Component ".concat(meta.id, " has NO slotsCode"));
   }
   ui += "\n".concat(indent, "/>");
   return ui;

package/dist/esm/utils/templates/renderManager.d.ts

@@ -1,22 +1,14 @@
 /** Render 函数管理器 */
 export declare class RenderManager {
+    /** 存储格式：renderId -> { renderCode, children?, logicCode?, slotType?, useWrap?, description? } */
     private _renders;
     /**
      * 注册一个 render 函数
-     * @param renderId 唯一标识符，格式：组件ID_插槽ID
-     * @param renderCode render 函数的代码内容（不包含函数声明）
      */
-    register(renderId: string, renderCode: string): void;
+    register(renderId: string, renderCode: string, children?: any[], logicCode?: string, slotType?: string, useWrap?: boolean, description?: string): void;
     /**
-     * 生成所有 render 函数的定义代码
-     * @param indent 基础缩进
+     * 生成所有 render 函数的 definition 代码
      */
     toCode(indent: string): string;
-    /**
-     * 生成 render 对象的引用代码
-     * @param slotId 插槽ID
-     * @param renderId render 函数ID
-     * @param indent 缩进
-     */
     genRenderRef(slotId: string, renderId: string, indent: string): string;
 }

package/dist/esm/utils/templates/renderManager.js

@@ -1,12 +1,13 @@
 import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 import _createClass from "@babel/runtime/helpers/esm/createClass";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import { indentation } from "../index";
+import { indentation, toPascalCase } from "./index";
 
 /** Render 函数管理器 */
 export var RenderManager = /*#__PURE__*/function () {
   function RenderManager() {
     _classCallCheck(this, RenderManager);
+    /** 存储格式：renderId -> { renderCode, children?, logicCode?, slotType?, useWrap?, description? } */
     _defineProperty(this, "_renders", new Map());
   }
   _createClass(RenderManager, [{
@@ -14,16 +15,20 @@ export var RenderManager = /*#__PURE__*/function () {
     value:
     /**
      * 注册一个 render 函数
-     * @param renderId 唯一标识符，格式：组件ID_插槽ID
-     * @param renderCode render 函数的代码内容（不包含函数声明）
      */
-    function register(renderId, renderCode) {
-      this._renders.set(renderId, renderCode);
+    function register(renderId, renderCode, children, logicCode, slotType, useWrap, description) {
+      this._renders.set(renderId, {
+        renderCode: renderCode,
+        children: children,
+        logicCode: logicCode,
+        slotType: slotType,
+        useWrap: useWrap,
+        description: description
+      });
     }
 
     /**
-     * 生成所有 render 函数的定义代码
-     * @param indent 基础缩进
+     * 生成所有 render 函数的 definition 代码
      */
   }, {
     key: "toCode",
@@ -32,30 +37,94 @@ export var RenderManager = /*#__PURE__*/function () {
         return "";
       }
       var code = "";
-      var indentSize = 2; // 函数体内部缩进大小（通常是 2 个空格）
-      var indent2 = indentation(indentSize); // 函数体内部缩进
+      var indentSize = 2;
+      var indent2 = indentation(indentSize);
+      var indent3 = indentation(indentSize * 2);
+      var indent4 = indentation(indentSize * 3);
+      var indent5 = indentation(indentSize * 4);
+      var indent6 = indentation(indentSize * 5);
+      this._renders.forEach(function (_ref, renderId) {
+        var renderCode = _ref.renderCode,
+          children = _ref.children,
+          logicCode = _ref.logicCode,
+          useWrap = _ref.useWrap,
+          description = _ref.description;
+        var renderFunctionName = toPascalCase("".concat(renderId, "_Render"));
+        if (description) {
+          code += "".concat(indent, "/** ").concat(description, " */\n");
+        }
+        code += "".concat(indent, "function ").concat(renderFunctionName, "(params: any) {\n");
+        code += "".concat(indent).concat(indent2, "const { comRefs, outputs } = useAppContext();\n");
+        if (logicCode) {
+          code += logicCode.split("\n").map(function (line) {
+            return "".concat(indent).concat(line);
+          }).join("\n") + "\n";
+        }
+
+        // 1. 提取组件 JSX 为变量，实现单次定义、多次引用
+        var comVars = {};
+        var modifiedRenderCode = renderCode;
+        if (children && children.length > 0) {
+          children.forEach(function (child) {
+            if (child.type === "com") {
+              var varName = "".concat(child.id, "_JSX");
+              var comJsx = child.ui.trim();
+              comVars[child.id] = varName;
+              code += "".concat(indent).concat(indent2, "const ").concat(varName, " = (\n");
+              code += "".concat(indent).concat(indent3).concat(comJsx, "\n");
+              code += "".concat(indent).concat(indent2, ");\n");
+
+              // 替换渲染结构中的组件调用为变量引用
+              var pattern = new RegExp("<WithCom\\s+[^>]*id=['\"]".concat(child.id, "['\"][\\s\\S]*?/>|<WithCom\\s+[^>]*id=['\"]").concat(child.id, "['\"][\\s\\S]*?>[\\s\\S]*?</WithCom>"), 'g');
+              modifiedRenderCode = modifiedRenderCode.replace(pattern, "{".concat(varName, "}"));
+            }
+          });
+          code += "\n";
+        }
+
+        // 2. 定义描述符（仅在容器协议下生成，精简元数据）
+        if (useWrap && children && children.length > 0) {
+          code += "".concat(indent).concat(indent2, "const descriptors = [\n");
+          children.forEach(function (child) {
+            if (child.type === "com") {
+              var _child$props;
+              var childStyle = JSON.stringify(child.rootStyle || ((_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.style) || {});
+              var varName = comVars[child.id];
+              code += "".concat(indent).concat(indent3, "{\n");
+              code += "".concat(indent).concat(indent4, "id: '").concat(child.id, "',\n");
+              code += "".concat(indent).concat(indent4, "name: ").concat(child.name !== undefined ? "'".concat(child.name, "'") : 'undefined', ",\n");
+              code += "".concat(indent).concat(indent4, "style: ").concat(childStyle, ",\n");
+              code += "".concat(indent).concat(indent4, "get inputs() { return comRefs.current['").concat(child.id, "'] },\n");
+              code += "".concat(indent).concat(indent4, "get outputs() { return outputs.current['").concat(child.id, "'] },\n");
+              code += "".concat(indent).concat(indent4, "jsx: ").concat(varName, ",\n");
+              code += "".concat(indent).concat(indent3, "},\n");
+            }
+          });
+          code += "".concat(indent).concat(indent2, "];\n\n");
+        }
 
-      this._renders.forEach(function (renderCode, renderId) {
-        code += "".concat(indent, "const ").concat(renderId, "_Render = (params?: { style?: any }) => {\n");
+        // 3. 核心渲染逻辑（精简 wrap 分发）
         code += "".concat(indent).concat(indent2, "return (\n");
-        // renderCode 已经包含了正确的缩进，直接拼接
-        code += renderCode;
-        code += "\n".concat(indent).concat(indent2, ");\n");
-        code += "".concat(indent, "};\n\n");
+        if (useWrap) {
+          // 如果是容器协议插槽，直接调用 wrap
+          code += "".concat(indent).concat(indent3, "params?.wrap?.(descriptors)\n");
+        } else {
+          code += "".concat(indent).concat(indent3, "<>\n");
+          code += modifiedRenderCode.split("\n").map(function (line) {
+            return "".concat(indent).concat(indent2).concat(line);
+          }).join("\n") + "\n";
+          code += "".concat(indent).concat(indent3, "</>\n");
+        }
+        code += "".concat(indent).concat(indent2, ");\n");
+        code += "".concat(indent, "}\n\n");
       });
       return code;
     }
-
-    /**
-     * 生成 render 对象的引用代码
-     * @param slotId 插槽ID
-     * @param renderId render 函数ID
-     * @param indent 缩进
-     */
   }, {
     key: "genRenderRef",
     value: function genRenderRef(slotId, renderId, indent) {
-      return "".concat(indent).concat(slotId, ": {\n").concat(indent, "  render: ").concat(renderId, "_Render,\n").concat(indent, "},\n");
+      var renderFunctionName = toPascalCase("".concat(renderId, "_Render"));
+      return "".concat(indent).concat(slotId, ": {\n").concat(indent, "  render: ").concat(renderFunctionName, ",\n").concat(indent, "},\n");
     }
   }]);
   return RenderManager;