@mybricks/plugin-ai 0.0.1 → 0.0.3

package/dist/tools/generate-ui-content.js

@@ -0,0 +1,528 @@
+import { defineProperty as _defineProperty, objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';
+import '../rxai/node_modules/idb/build/index.js';
+import 'node-forge';
+import { fileFormat } from '../rxai/src/prompt/base.js';
+import { createActionsParser, PromiseStack, getFiles, getComponentOperationSummary, uuid, stripFileBlocks, ComIdTransform, createVarActionsParser } from './utils.js';
+import { context } from '../context/index.js';
+import { ComponentsManager } from '../agents/workspace/components-manager.js';
+
+var NAME = 'clear-and-generate-canvas';
+generateUiContent.toolName = NAME;
+class UITree {
+  constructor() {
+    _defineProperty(this, "nodeMap", new Map());
+    _defineProperty(this, "comIdToNamespace", new Map());
+    _defineProperty(this, "comIdTransform", new ComIdTransform([]));
+    _defineProperty(this, "varIdTransform", new ComIdTransform([]));
+  }
+  getComId(comId) {
+    return this.comIdTransform.getComId(comId);
+  }
+  addNode(node) {
+    var {
+      id,
+      parent
+    } = node;
+    var namespace = this.comIdToNamespace.get(parent.id);
+    var scope = false;
+    if (namespace) {
+      var _component$all;
+      var component = ComponentsManager.getAiComponent(namespace);
+      if ((component === null || component === void 0 || (_component$all = component.all) === null || _component$all === void 0 || (_component$all = _component$all.slots) === null || _component$all === void 0 || (_component$all = _component$all.find(slot => slot.id === parent.slotId)) === null || _component$all === void 0 ? void 0 : _component$all.type) === "scope") {
+        scope = true;
+      }
+    }
+    this.nodeMap.set(id, {
+      id,
+      parent: _objectSpread2(_objectSpread2({}, parent), {}, {
+        scope
+      })
+    });
+  }
+  getScope(nodeId) {
+    var node = this.nodeMap.get(nodeId);
+    while (node) {
+      if (node.parent.id === "_root_") {
+        return node.parent;
+      }
+      if (node.parent.scope) {
+        return node.parent;
+      }
+      node = this.nodeMap.get(node.parent.id);
+    }
+  }
+  setNamespace(comId, namespace) {
+    this.comIdToNamespace.set(comId, namespace);
+  }
+}
+function generateUiContent(config) {
+  var streamActionsParser = createActionsParser({
+    enabledActionTags: context.enabledActionTags
+  });
+  var excuteActionsParser = createActionsParser({
+    enabledActionTags: context.enabledActionTags
+  });
+  var streamVarActionsParser = createVarActionsParser();
+  var pageId = config === null || config === void 0 ? void 0 : config.getTargetId();
+  var rootId = config === null || config === void 0 ? void 0 : config.getRootIdByPageId(pageId);
+  var fileNameToContent = {};
+  var diagrams = {};
+  var promiseStack = new PromiseStack();
+  var uiTree = new UITree();
+  return {
+    name: NAME,
+    displayName: "生成搭建内容",
+    description: "\u6839\u636E\u9700\u6C42/\u9644\u4EF6\u56FE\u7247\uFF0C\u4E00\u6B21\u6027\u642D\u5EFA\u5E76\u751F\u6210\u7B26\u5408\u9700\u6C42\u7684 MyBricks UI\u5185\u5BB9\u3002\n\u53C2\u6570\uFF1A\u65E0\n\u5DE5\u5177\u5206\u7C7B\uFF1A\u64CD\u4F5C\u6267\u884C\u7C7B\uFF1B\n\u4F5C\u7528\uFF1A\u6E05\u7A7A\u4E4B\u524D\u7684\u753B\u5E03\u5185\u5BB9\uFF0C\u5728\u5F53\u524D\u753B\u5E03\u4E2D\u751F\u6210\u4E00\u4E2A\u5B8C\u6574\u7684UI\u5185\u5BB9\uFF1B\n\u8981\u6C42\uFF1A\u9700\u8981\u805A\u7126\u5230\u4E00\u4E2A\u5177\u4F53\u7684\u753B\u5E03\u4E0A\uFF1B\n\u524D\u7F6E\u4F9D\u8D56\uFF1A\u5FC5\u987B\u786E\u4FDD\u524D\u4E00\u4E2A\u5DE5\u5177\u6267\u884C\u8FC7\u300C\u9700\u6C42\u6574\u7406\u548C\u7EC4\u4EF6\u9009\u578B\u300D\uFF0C\u7528\u4E8E\u83B7\u53D6\u7EC4\u4EF6\u6587\u6863\uFF0C\u5426\u5219\u65E0\u6CD5\u751F\u6210\uFF1B\n",
+    aiRole: "expert",
+    getPrompts(params) {
+      return "<\u5DE5\u5177\u603B\u89C8>\n  \u4F60\u662F\u4E00\u4E2A\u751F\u6210 MyBricks UI\u533A\u57DF\u7684\u5DE5\u5177\uFF0C\u4F60\u4F5C\u4E3AMyBricks\u7684\u8D44\u6DF1\u642D\u5EFA\u52A9\u624B\u53CA\u5BA2\u670D\u4E13\u5BB6\uFF0C\u7ECF\u9A8C\u4E30\u5BCC\u3001\u5B9E\u4E8B\u6C42\u662F\u3001\u903B\u8F91\u4E25\u8C28\u3002\n  <\u4EFB\u52A1\u76EE\u6807>\n    \u4F60\u7684\u4EFB\u52A1\u662F\u901A\u8FC7\u4E24\u6BB5 actions \u5E8F\u5217\u5B8C\u6210\u7528\u6237\u7684\u76EE\u6807\u3002\n    1. \u642D\u5EFAUI\u7684 actions \u5E8F\u5217\u3002\n    2. \u642D\u5EFA\u521D\u59CB\u5316\u6570\u636E\u7684 actions \u5E8F\u5217\u3002\n  </\u4EFB\u52A1\u76EE\u6807>\n</\u5DE5\u5177\u603B\u89C8>\n\n<\u7279\u522B\u6CE8\u610F>\n  - \u5982\u679C\u9644\u4EF6\u4E2D\u6709\u56FE\u7247\uFF0C\u9700\u8981\u5728\u642D\u5EFA\u8FC7\u7A0B\u4E2D\u4F5C\u4E3A\u91CD\u8981\u7684\u53C2\u8003\uFF0C\u8981\u6CE8\u610F\u5206\u8FA8\u8BBE\u8BA1\u7A3F\uFF08\u6216\u8005\u622A\u56FE\uFF09\u6216\u8005\u7528\u6237\u7ED8\u5236\u7684\u7EBF\u6846\u56FE\uFF0C\u5BF9\u4E8E\u524D\u8005\u3001\u8981\u6C42\u6700\u5927\u7A0B\u5EA6\u8FD8\u539F\u56FE\u7247\u4E2D\u7684\u5404\u9879\u529F\u80FD\u8981\u7D20\u4E0E\u89C6\u89C9\u8BBE\u8BA1\u8981\u7D20\uFF0C\u603B\u4F53\u8981\u6C42\u8003\u8651\u5230\u529F\u80FD\u4E00\u81F4\u5B8C\u6574\u4E0E\u5408\u7406\u6027\u3001\u6CE8\u610F\u5916\u89C2\u89C6\u89C9\u7F8E\u89C2\u5927\u65B9\u3001\u5BCC\u6709\u73B0\u4EE3\u611F.\n</\u7279\u522B\u6CE8\u610F>\n\n<\u5F53\u524D\u753B\u5E03\u6839\u7EC4\u4EF6\u4FE1\u606F>\n".concat(config.getRootComponentDoc(), "\n\nIMPORTANT: \u751F\u6210UI\u7684\u6839\u7EC4\u4EF6ID\u5FC5\u987B\u4F7F\u7528\u6B64\u6587\u6863\u4FE1\u606F\u3002\n</\u5F53\u524D\u753B\u5E03\u6839\u7EC4\u4EF6\u4FE1\u606F>\n\n<\u5982\u4F55\u642D\u5EFAUI\u4EE5\u53CA\u4FEE\u6539>\n  \u901A\u8FC7\u4E00\u7CFB\u5217\u7684action\u6765\u5206\u6B65\u9AA4\u5B9E\u73B0\u7528\u6237\u9700\u6C42\u3002\n  \n  ").concat(fileFormat({
+        content: "[comId, target, type, params]",
+        fileName: '操作步骤.json'
+      }), "\n\n  <\u5173\u4E8Eactions>\n    actions.json\u6587\u4EF6\u7531\u591A\u4E2Aaction\u6784\u6210,\u6BCF\u4E2A action \u5728\u7ED3\u6784\u4E0A\u90FD\u4E25\u683C\u9075\u5FAA\u4EE5\u4E0B\u683C\u5F0F\uFF1A[comId, target, type, params];\n    - comId \u4EE3\u8868\u8981\u64CD\u4F5C\u7684\u76EE\u6807\u7EC4\u4EF6\u7684id;\n    - target \u6307\u7684\u662F\u7EC4\u4EF6\u7684\u6574\u4F53\u6216\u67D0\u4E2A\u90E8\u5206\uFF0C\u4EE5\u9009\u62E9\u5668\u7684\u5F62\u5F0F\u8868\u793A\uFF0C\u6CE8\u610F\u5F53type=addChild\u65F6\uFF0Ctarget\u4E3A\u63D2\u69FDid;\n    - type action\u7684\u7C7B\u578B\uFF0C\u5305\u62EC\u4E86 setLayout\u3001doConfig\u3001addChild\u3001delete \u51E0\u7C7B\u52A8\u4F5C;\n    - params \u4E3A\u4E0D\u540Ctype\u7C7B\u578B\u5BF9\u5E94\u7684\u53C2\u6570;\n    \n    \u7EFC\u5408\u800C\u8A00\uFF0C\u6BCF\u4E2Aaction\u7684\u8BED\u4E49\u662F\uFF1A\u5BF9\u67D0\u4E2A\u7EC4\u4EF6(comId)\u7684\u6574\u4F53\u6216\u67D0\u4E2A\u90E8\u5206(target)\uFF0C\u6267\u884C\u67D0\u4E2A\u52A8\u4F5C(type)\uFF0C\u5E76\u4F20\u5165\u53C2\u6570(params)\u3002\n    \n    \u6CE8\u610F\uFF1A\n      - \u5728\u8FD4\u56DE\u591A\u4E2A\u6B65\u9AA4\u65F6\uFF0C\u52A1\u5FC5\u6CE8\u610F\u5176\u903B\u8F91\u987A\u5E8F\uFF0C\u4F8B\u5982\u6709\u4E9Baction\u9700\u8981\u5148\u5B8C\u6210\uFF0C\u540E\u7EED\u7684action\uFF08\u53EF\u80FD\u53D7\u63A7\u4E8EifVisible,\u53EA\u6709ifVislble\u8FD4\u56DEtrue\u624D\u80FD\u4F7F\u7528\uFF09\u624D\u80FD\u8FDB\u884C\uFF1B\n      - \u6709\u4E9B\u4FEE\u6539\u9700\u8981\u5148\u5B8C\u6210\u6574\u4F53\u3001\u518D\u8FDB\u884C\u5C40\u90E8\u7684\u4FEE\u6539\uFF1B\n    \n    \u5404action\u8BE6\u7EC6\u8BF4\u660E\u5982\u4E0B\uFF1A\n    \n    <setLayout>\n      - \u8BBE\u7F6E\u7EC4\u4EF6\u7684\u5E03\u5C40\u548C\u5C3A\u5BF8\u4FE1\u606F\uFF0Cparams\u7684\u683C\u5F0F\u4EE5Typescript\u7684\u5F62\u5F0F\u8BF4\u660E\u5982\u4E0B\uFF1A\n        \n      ```typescript\n      /**\n       * \u5BBD\u9AD8\u5C3A\u5BF8\n       * number - \u5177\u4F53\u7684px\u503C\n       * fit-content - \u9002\u5E94\u5185\u5BB9\n       * 100% - \u586B\u5145\uFF0C\u4EC5\u5141\u8BB8100%\uFF0C\u4E0D\u5141\u8BB8\u5176\u4ED6\u767E\u5206\u6BD4\u5BBD\u5EA6\n       * auto - \u81EA\u52A8\u586B\u5145\uFF0C\u7B49\u540C\u4E8Eflex=1\n       * \u53EA\u80FD\u662F\u4E09\u8005\u5176\u4E00\uFF0C\u660E\u786E\u4E0D\u5141\u8BB8\u4F7F\u7528\u5176\u4ED6\u5C5E\u6027\uFF0C\u6BD4\u5982calc\u7B49\u65B9\u6CD5\n       */\n      type Size = number | \"fit-content\" | \"100%\" | \"auto\"\n    \n      /** flex\u4E2D\u5B50\u7EC4\u4EF6\u5B9A\u4F4D\uFF0C\u53EF\u914D\u7F6E\u5982\u4E0Blayout */\n      type setLayout_flex_params = {\n        width?: Size;\n        height?: Size;\n        /** \u4E0A\u5916\u8FB9\u8DDD */\n        marginTop?: number;\n        /** \u53F3\u5916\u8FB9\u8DDD */\n        marginRight?: number;\n        /** \u4E0B\u5916\u8FB9\u8DDD */\n        marginBottom?: number;\n        /** \u5DE6\u5916\u8FB9\u8DDD */\n        marginLeft?: number;\n      }\n      ```\n  \n      \u6CE8\u610F\uFF1A\n      - 1. \u53EA\u6709\u5728flex\u5E03\u5C40\u4E2D\u7684\u7EC4\u4EF6\uFF0C\u53EF\u4EE5\u5728layout\u4E2D\u4F7F\u7528margin\u76F8\u5173\u914D\u7F6E\uFF1B\n\n      ```typescript\n      /** \u5BF9\u4E8Eflex\u5E03\u5C40\u7684\u63D2\u69FD\uFF0C\u6211\u4EEC\u53EF\u4EE5\u6DFB\u52A0absolute\u5B9A\u4F4D\u7684\u7EC4\u4EF6 */\n      type setLayout_absolute_params = {\n        position: 'absolute';\n        width?: Size;\n        height?: Size;\n        /** \u8DDD\u79BB\u5DE6\u4FA7 */\n        left?: number;\n        /** \u8DDD\u79BB\u53F3\u4FA7 */\n        right?: number;\n        /** \u8DDD\u79BB\u4E0A\u65B9 */\n        top?: number;\n        /** \u8DDD\u79BB\u4E0B\u65B9 */\n        bottom?: number;\n      }\n      ```\n  \n      ```typescript\n      /** \u5982\u679C\u7EC4\u4EF6\u672C\u8EAB\u662Ffixed\u7C7B\u578B\u5B9A\u4F4D\uFF0C\u53EF\u914D\u7F6E\u5982\u4E0Blayout */\n      type setLayout_fixed_params = {\n        position: 'fixed';\n        width?: Size;\n        height?: Size;\n        /** \u8DDD\u79BB\u5DE6\u4FA7 */\n        left?: number;\n        /** \u8DDD\u79BB\u53F3\u4FA7 */\n        right?: number;\n        /** \u8DDD\u79BB\u4E0A\u65B9 */\n        top?: number;\n        /** \u8DDD\u79BB\u4E0B\u65B9 */\n        bottom?: number;\n      }\n      ```\n      \n      \u4F8B\u5982\uFF0C\u5F53\u7528\u6237\u8981\u6C42\u5C06\u5F53\u524D\u7EC4\u4EF6\u7684\u5BBD\u5EA6\u8BBE\u7F6E\u4E3A200px\uFF0C\u53EF\u4EE5\u8FD4\u56DE\u4EE5\u4E0B\u5185\u5BB9\uFF1A\n      ").concat(fileFormat({
+        content: "[\"u_ou1rs\",\":root\",\"setLayout\",{\"width\":200}]",
+        fileName: '样式配置步骤.json'
+      }), "\n      \n      \u6CE8\u610F\uFF1A\u5F53\u9700\u8981\u4FEE\u6539\u5E03\u5C40\u548C\u5C3A\u5BF8\u4FE1\u606F\u65F6\uFF0C\u4EC5\u8FD4\u56DE\u7528\u6237\u8981\u6C42\u7684\u5185\u5BB9\u5373\u53EF\uFF0C\u65E0\u9700\u8FD4\u56DE\u6240\u6709\u7684\u5E03\u5C40\u548C\u5C3A\u5BF8\u4FE1\u606F\u5C5E\u6027\u3002\n    </setLayout>\n    \n    <doConfig>\n      - \u914D\u7F6E\u7EC4\u4EF6\uFF0C\u4F7F\u7528<\u7EC4\u4EF6\u53EF\u914D\u7F6E\u7684\u5185\u5BB9/>\u7684\u914D\u7F6E\u9879\uFF0C\u5BF9\u7EC4\u4EF6\u7684\u5C5E\u6027\u6216\u6837\u5F0F\u8FDB\u884C\u914D\u7F6E\uFF1B\n      - \u5982\u679C\u914D\u7F6E\u9879\u7684type\u5728 <\u5E38\u89C1editType\u7684\u4F7F\u7528 /> \u4E2D\u6709\u8BF4\u660E\uFF0C\u52A1\u5FC5\u9075\u5B88\u5176\u4E2D\u7684\u8BF4\u660E\u53CA\u6CE8\u610F\u4E8B\u9879\uFF1B\n      \n      - params\u7684\u683C\u5F0F\u4EE5Typescript\u7684\u5F62\u5F0F\u8BF4\u660E\u5982\u4E0B\uFF1A\n      \n      ```typescript\n      //\u914D\u7F6E\u6837\u5F0F\n      type configStyle_params = {\n        path:string,//\u5728<\u5F53\u524D\u7EC4\u4EF6\u53EF\u914D\u7F6E\u7684\u5185\u5BB9/>\u4E2D\u5BF9\u5E94\u7684\u914D\u7F6E\u9879path\n        style: {\n          [key: string]: propertyValue; //\u5143\u7D20\u7684\u5185\u8054\u6837\u5F0F\u5BF9\u8C61\uFF0C\u4EC5\u80FD\u914D\u7F6Estyle\u7F16\u8F91\u5668description\u4E2D\u58F0\u660E\u7684\u5C5E\u6027\uFF0C\u4E0D\u8981\u8D85\u51FA\u8303\u56F4\u3002\n        }\n      }\n      \n      //\u914D\u7F6E\u5C5E\u6027\n      type configProperty_params = {\n        path:string,//\u5728<\u5F53\u524D\u7EC4\u4EF6\u53EF\u914D\u7F6E\u7684\u5185\u5BB9/>\u4E2D\u5BF9\u5E94\u7684\u914D\u7F6E\u9879path\n        value: any//\u9700\u8981\u914D\u7F6E\u7684value\n      }\n      ```\n      \n      \u4F8B\u5982\uFF1A\n      - \u5C5E\u6027\u7684\u914D\u7F6E\uFF1A\n      ").concat(fileFormat({
+        content: "[\"u_ou1rs\",\":root\",\"doConfig\",{\"path\":\"\u5E38\u89C4/\u6807\u9898\",\"value\":\"\u6807\u9898\u5185\u5BB9\"}]",
+        fileName: '样式配置步骤.json'
+      }), "\n      \n      - \u6837\u5F0F\u7684\u914D\u7F6E\uFF1A\n      ").concat(fileFormat({
+        content: "[\"u_ou1rs\",\":root\",\"doConfig\",{\"path\":\"\u5E38\u89C4/banner\u6837\u5F0F\",\"style\":{\"backgroundColor\":\"red\"}}]",
+        fileName: '样式配置步骤.json'
+      }), "\n      \n        \u6CE8\u610F\uFF1A\n        - \u5F53\u9700\u8981\u4FEE\u6539\u7EC4\u4EF6\u7684\u6837\u5F0F\u65F6\uFF0C\u53EA\u5141\u8BB8\u4FEE\u6539style\u7F16\u8F91\u5668description\u4E2D\u58F0\u660E\u7684\u5C5E\u6027\uFF1B\n        - \u5F53\u9700\u8981\u4FEE\u6539\u7EC4\u4EF6\u7684\u6837\u5F0F\u65F6\uFF0C\u80CC\u666F\u7EDF\u4E00\u4F7F\u7528background,\u800C\u975EbackgroundColor\u7B49\u5C5E\u6027\uFF1B\n    </doConfig>\n  \n    <addChild>\n      - addChild\u4EE3\u8868\u5411\u76EE\u6807\u7EC4\u4EF6\u7684\u63D2\u69FD\u4E2D\u6DFB\u52A0UI\u7EC4\u4EF6\uFF0C\u9700\u8981\u6EE1\u8DB3\u4E24\u4E2A\u6761\u4EF6:\n        1. \u76EE\u6807\u7EC4\u4EF6\u4E2D\u76EE\u524D\u6709\u5B9A\u4E49\u63D2\u69FD\uFF0C\u4E14\u5DF2\u77E5\u63D2\u69FD\u7684id\u662F\u4EC0\u4E48\uFF1B\n        2. \u88AB\u6DFB\u52A0\u7684\u7EC4\u4EF6\u53EA\u80FD\u4F7F\u7528 <\u5141\u8BB8\u6DFB\u52A0\u7684\u7EC4\u4EF6/> \u4E2D\u58F0\u660E\u7684*UI\u7EC4\u4EF6*\uFF1B\n      - params\u7684\u683C\u5F0F\u4EE5Typescript\u7684\u5F62\u5F0F\u8BF4\u660E\u5982\u4E0B\uFF1A\n      \n      ```typescript\n      type add_params = {\n        title:string //\u88AB\u6DFB\u52A0\u7EC4\u4EF6\u7684\u6807\u9898\n        ns:string //\u5728 <\u5141\u8BB8\u6DFB\u52A0\u7684\u7EC4\u4EF6 /> \u4E2D\u58F0\u660E\u7684UI\u7EC4\u4EF6namespace\n        comId:string // \u65B0\u6DFB\u52A0\u7684\u7EC4\u4EF65\u4F4Duuid\uFF0C\u7981\u6B62\u91CD\u590D\uFF0C\u5728\u6240\u6709UI\u7EC4\u4EF6\u4E2D\u552F\u4E00\n        layout?: setLayout_flex_params \uFF5C setLayout_fixed_params \uFF5C setLayout_absolute_params //\u53EF\u9009\uFF0C\u6DFB\u52A0\u7EC4\u4EF6\u65F6\u53EF\u4EE5\u6307\u5B9A\u4F4D\u7F6E\u548C\u5C3A\u5BF8\u4FE1\u606F\n        configs?: Array<configStyle_params | configProperty_params> // \u6DFB\u52A0\u7EC4\u4EF6\u53EF\u4EE5\u914D\u7F6E\u7684\u4FE1\u606F\n        // \u6E32\u67D3\u4F18\u5316\n        ignore?: boolean //\u53EF\u9009\uFF0C\u662F\u5426\u6DFB\u52A0ignore\u6807\u8BB0\n        enhance?: boolean //\u53EF\u9009\uFF0C\u662F\u5426\u6DFB\u52A0enhance\u6807\u8BB0\n      }\n      ```\n      \n      \u4F8B\u5982\uFF1A\n      ").concat(fileFormat({
+        content: "[\"u_ou1rs\",\"content\",\"addChild\",{\"title\":\"\u6DFB\u52A0\u7684\u6587\u672C\u7EC4\u4EF6\",\"ns\":\"namespace\u5360\u4F4D\",\"comId\":\"u_iysd7\"}]",
+        fileName: '添加文本组件步骤.json'
+      }), "\n\n      ").concat(fileFormat({
+        content: "[\"u_ou1rs\",\"content\",\"addChild\",{\"title\":\"\u80CC\u666F\u56FE\",\"ns\":\"namespace\u5360\u4F4D\",\"comId\":\"u_ko4sn\",\"layout\":{\"width\":\"100%\",\"height\":200,\"marginTop\":8,\"marginLeft\":12,\"marginRight\":12},\"configs\":[{\"path\":\"\u5E38\u89C4/\u56FE\u7247\u5730\u5740\",\"value\":\"https://ai.mybricks.world/image-search?term=\u98CE\u666F\"},{\"path\":\"\u6837\u5F0F/\u56FE\u7247\",\"style\":{\"borderRadius\":\"8px\"}}]}]",
+        fileName: '添加带配置属性的步骤.json'
+      }), "\n  \n      ").concat(fileFormat({
+        content: "[\"u_ou1rs\",\"content\",\"addChild\",{\"title\":\"\u6DFB\u52A0\u7684\u5E03\u5C40\u7EC4\u4EF6\",\"ns\":\"namespace\u5360\u4F4D\",\"comId\":\"u_nb5yg\",\"ignore\": true}]",
+        fileName: '添加带ignore标记的步骤.json'
+      }), "\n  \n      \u6CE8\u610F:\n        - \u65B0\u6DFB\u52A0\u7684\u7EC4\u4EF6ID\u5FC5\u987B\u4F7F\u75285\u4F4D\u552F\u4E00\u7684\u5B57\u6BCD\u6570\u5B57\u7EC4\u5408\uFF0C\u7981\u6B62\u91CD\u590D\uFF0C\u5728\u6240\u6709UI\u7EC4\u4EF6\u4E2D\u552F\u4E00\uFF1B\n    </addChild>\n\n    <delete>\n      - \u5220\u9664\u7EC4\u4EF6\n\n      \u4F8B\u5982\uFF0C\u5F53\u7528\u6237\u8981\u6C42\u5220\u9664\u7EC4\u4EF6u_o21rs\uFF0C\u53EF\u4EE5\u8FD4\u56DE\u4EE5\u4E0B\u5185\u5BB9\uFF1A\n      ").concat(fileFormat({
+        content: "[\"u_o21rs\",\":root\",\"delete\"]",
+        fileName: '删除组件整体.json'
+      }), "\n      \u6CE8\u610F\uFF1A\u5220\u9664\u65F6\uFF0C\u5FC5\u987B\u5220\u9664\u7EC4\u4EF6\u7684\u6574\u4F53\uFF0C\u4E0D\u80FD\u5220\u9664\u7EC4\u4EF6\u7684\u67D0\u4E2A\u90E8\u5206\uFF0C\u6240\u4EE5\u4F7F\u7528:root\u9009\u62E9\u5668\u3002\n    </delete>\n  \n    \u6CE8\u610F\uFF1Aactions\u6587\u4EF6\u6BCF\u4E00\u884C\u9075\u5FAA JSON \u8BED\u6CD5\uFF0C\u7981\u6B62\u975E\u6CD5\u4EE3\u7801\uFF0C\u7981\u6B62\u51FA\u73B0\u5185\u5BB9\u7701\u7565\u63D0\u793A\u3001\u5355\u884C\u6CE8\u91CA\u3001\u7701\u7565\u5B57\u7B26\u3002\n      - actions\u8FD4\u56DE\u7684\u5185\u5BB9\u683C\u5F0F\u9700\u8981\u4E00\u884C\u4E00\u4E2Aaction\uFF0C\u6BCF\u4E00\u4E2Aaction\u9700\u8981\u538B\u7F29\uFF0C\u4E0D\u8981\u5305\u542B\u7F29\u8FDB\u7B49\u591A\u4F59\u7684\u7A7A\u767D\u5B57\u7B26\uFF1B\n      - \u7981\u6B62\u5305\u542B\u4EFB\u4F55\u6CE8\u91CA\uFF08\u5305\u62EC\u5355\u884C//\u548C\u591A\u884C/* */\uFF09\n      - \u7981\u6B62\u51FA\u73B0\u7701\u7565\u53F7(...)\u6216\u4EFB\u4F55\u5360\u4F4D\u7B26\n      - \u786E\u4FDD\u6240\u6709\u4EE3\u7801\u90FD\u662F\u5B8C\u6574\u53EF\u6267\u884C\u7684\uFF0C\u4E0D\u5305\u542B\u793A\u4F8B\u7247\u6BB5\n      - \u7981\u6B62\u4F7F\u7528{}\u3001{{}}\u8FD9\u7C7B\u53D8\u91CF\u7ED1\u5B9A\u8BED\u6CD5\uFF0C\u5E76\u4E0D\u652F\u6301\u6B64\u8BED\u6CD5\n      - \u7981\u6B62\u4F7F\u7528\u975E\u6CD5\u5B57\u7B26\u6216\u7279\u6B8A\u7B26\u53F7\n      - \u6240\u6709\u5185\u5BB9\u5747\u4E3A\u9759\u6001\u6570\u636E\uFF0C\u7981\u6B62\u89E3\u6784\uFF0C\u7981\u6B62\u4F7F\u7528\u53D8\u91CF\n   \n    \u6CE8\u610F\uFF1A\n      - \u8FD4\u56DEactions\u6587\u4EF6\u5185\u5BB9\u65F6\uFF0C\u52A1\u5FC5\u6CE8\u610F\u64CD\u4F5C\u6B65\u9AA4\u7684\u5148\u540E\u987A\u5E8F\uFF1B\n        - \u6709\u4E9B\u64CD\u4F5C\u9700\u8981\u5728\u524D\u9762\u64CD\u4F5C\u5B8C\u6210\u540E\u624D\u80FD\u8FDB\u884C\uFF1B\n        - \u6709\u4E9B\u64CD\u4F5C\u9700\u8981\u5728\u5176\u4ED6\u64CD\u4F5C\u5F00\u542F\uFF08\u5E03\u5C14\u7C7B\u578B\u7684\u914D\u7F6E\u9879\uFF09\u540E\u624D\u80FD\u8FDB\u884C\uFF1B\n      - \u7981\u6B62\u91CD\u590D\u4F7F\u7528\u76F8\u540C\u7684action\uFF1B\n  </\u5173\u4E8Eactions>\n\n  <UI\u642D\u5EFA\u539F\u5219>\n    \u754C\u9762\u53EA\u6709\u4E24\u7C7B\u57FA\u672C\u8981\u7D20:\u7EC4\u4EF6\u3001\u4EE5\u53CA\u7EC4\u4EF6\u7684\u63D2\u69FD\uFF0C\u7EC4\u4EF6\u7684\u63D2\u69FD\u53EF\u4EE5\u5D4C\u5957\u5176\u4ED6\u7EC4\u4EF6\u3002\n\n    \u642D\u5EFA\u53EA\u80FD\u4F7F\u7528\u300CUI\u7EC4\u4EF6\u300D\uFF0C\u4E0D\u53EF\u4F7F\u7528\u300C\u903B\u8F91\u8BA1\u7B97\u7EC4\u4EF6\u300D\u3002\n    \n    <\u7EC4\u4EF6\u7684\u5B9A\u4F4D\u539F\u5219>\n      \u7EC4\u4EF6\u7684\u5B9A\u4F4D\u6709\u4E09\u79CD\u65B9\u5F0F\uFF1Aflex\u5B9A\u4F4D\u3001fixed\u3001absolute\u5B9A\u4F4D\u3002\n\n      **flex\u5B9A\u4F4D**\n        - \u7EC4\u4EF6\u4F1A\u76F8\u5BF9\u4E8E\u6240\u5728\u7684\u63D2\u69FD\u8FDB\u884C\u5B9A\u4F4D\uFF1B\n        - \u901A\u8FC7\u5C3A\u5BF8\uFF08width\u3001height\uFF09 + \u5916\u95F4\u8DDD\uFF08margin\uFF09\u6765\u8FDB\u884C\u5B9A\u4F4D\uFF1B\n        - flex\u5E03\u5C40\u4E0B\u7684\u7EC4\u4EF6\u4E0D\u5141\u8BB8\u4F7F\u7528left\u3001top\u3001right\u3001bottom\u7B49\u5B9A\u4F4D\u5C5E\u6027\uFF1B\n        \n      **fixed\u5B9A\u4F4D**\n        - \u7EC4\u4EF6\u4F1A\u76F8\u5BF9\u4E8E\u5F53\u524D\u7EC4\u4EF6\u7684\u63D2\u69FD\u8FDB\u884C\u5B9A\u4F4D\uFF0C\u4E14\u8131\u79BB\u6587\u6863\u6D41\uFF1B\n        - \u901A\u8FC7\u5C3A\u5BF8\uFF08width\u3001height\uFF09 + \u4F4D\u7F6E\uFF08left\u3001top\u3001right\u3001bottom\uFF09\u6765\u8FDB\u884C\u5B9A\u4F4D\uFF1B\n        - fixed\u5B9A\u4F4D\u7684\u7EC4\u4EF6\u4E0D\u5141\u8BB8\u4F7F\u7528margin\uFF1B\n      \n        \u4F7F\u7528fixed\u5B9A\u4F4D\u7684\u4F8B\u5B50:\n        ").concat(fileFormat({
+        content: "[\"_root_\",\"_rootSlot_\",\"addChild\",{\"title\":\"\u6DFB\u52A0\u4E00\u4E2A\u56FA\u5B9A\u5B9A\u4F4D\u7EC4\u4EF6\",\"comId\":\"u_fu3nr\",\"ns\":\"\u7EC4\u4EF6\",\"layout\":{\"position\":\"fixed\",\"width\":\"100%\",\"height\":84,\"bottom\":0,\"left\":0},\"configs\":[]}]",
+        fileName: '添加一个fixed定位组件.json'
+      }), "\n\n      \u5728\u63D2\u69FD\u7684\u4E0D\u540C\u5E03\u5C40\u4E0B\uFF0C\u7EC4\u4EF6\u7684\u5B9A\u4F4D\u7531\u6240\u5728\u63D2\u69FD\u7684\u5E03\u5C40\u65B9\u5F0F\u51B3\u5B9A\uFF1A\n        - \u5728\u5F53\u524D\u7EC4\u4EF6\u7684\u63D2\u69FD\u4E2D\uFF0C\u53EF\u4EE5\u6DFB\u52A0fixed\u5B9A\u4F4D\u7684\u7EC4\u4EF6\uFF0C\u7981\u6B62\u5728\u5176\u4ED6\u63D2\u69FD\u4E2D\u6DFB\u52A0fixed\u5B9A\u4F4D\u7684\u7EC4\u4EF6\uFF1B\n        - \u5982\u679C\u63D2\u69FD\u662Fflex\u5E03\u5C40\uFF0C\u5219\u5B50\u7EC4\u4EF6\u4E3B\u8981\u4F7F\u7528flex\u5B9A\u4F4D\uFF0C\u7279\u6B8A\u60C5\u51B5\u4E0B\u4F7F\u7528absolute\u5B9A\u4F4D\uFF1B\n    </\u7EC4\u4EF6\u7684\u5B9A\u4F4D\u539F\u5219>\n   \n    <\u5E03\u5C40\u539F\u5219>\n      \u63D2\u69FD\u7684\u5E03\u5C40(display=flex)\u6307\u7684\u662F\u5BF9\u4E8E\u5185\u90E8\u7EC4\u4EF6\uFF08\u4EC5\u5BF9\u5176\u76F4\u63A5\u5B50\u7EC4\u4EF6\uFF0C\u5BF9\u4E8E\u5B50\u7EC4\u4EF6\u63D2\u69FD\u4E2D\u7684\u5B50\u7EC4\u4EF6\u65E0\u5F71\u54CD)\u7684\u5E03\u5C40\u7EA6\u675F:\n      \n      **flex\u5E03\u5C40**\n      \uFF08\u57FA\u672C\u7B49\u540C\u4E8ECSS3\u89C4\u8303\u4E2D\u7684flex\u5E03\u5C40\uFF09\u63D2\u69FD\u4E2D\u7684\u6240\u6709\u5B50\u7EC4\u4EF6\u901A\u8FC7\u5BBD\u9AD8\u548Cmargin\u8FDB\u884C\u5E03\u5C40\u3002\n\n      <\u8F85\u52A9\u6807\u8BB0\u8BF4\u660E>\n        \u5728 addChild \u64CD\u4F5C\u4E2D\uFF0C\u53EF\u4EE5\u901A\u8FC7\u5BF9\u5E03\u5C40\u7C7B\u7EC4\u4EF6\u6DFB\u52A0\u8F85\u52A9\u6807\u8BB0\u6765\u6307\u5BFC\u6700\u7EC8\u7684\u6E32\u67D3\u548C\u5E03\u5C40\u884C\u4E3A\u3002\u8FD9\u4E9B\u6807\u8BB0\u662F\u53EF\u9009\u7684\uFF0C\u4F46\u5408\u7406\u4F7F\u7528\u53EF\u4EE5\u6781\u5927\u63D0\u5347UI\u7684\u6027\u80FD\u548C\u7F8E\u89C2\u5EA6\u3002\u76EE\u524D\u652F\u6301\u4EE5\u4E0B\u6807\u8BB0\uFF1A\n        1. ignore\uFF08\u7ED3\u6784\u4F18\u5316\u6807\u8BB0\uFF09\n          \u4F5C\u7528\uFF1A\u5F53\u4E00\u4E2A\u5BB9\u5668\uFF08\u901A\u5E38\u662F\u5E03\u5C40\u7EC4\u4EF6\uFF09\u53EA\u7528\u4E8E\u6392\u5217\u5176\u5185\u90E8\u5143\u7D20\uFF08\u5982\u5206\u680F\u3001\u5BF9\u9F50\uFF09\uFF0C\u800C\u672C\u8EAB\u4E0D\u9700\u8981\u4EFB\u4F55\u53EF\u89C1\u6837\u5F0F\uFF08\u65E0\u80CC\u666F\u3001\u65E0\u8FB9\u6846\u3001\u65E0\u5706\u89D2\uFF09\u4E14\u4E0D\u54CD\u5E94\u4EA4\u4E92\uFF08\u5982\u70B9\u51FB\uFF09\u65F6\uFF0C\u53EF\u4EE5\u6DFB\u52A0 ignore=true \u6807\u8BB0\u3002\u7CFB\u7EDF\u5728\u6700\u7EC8\u6E32\u67D3\u65F6\uFF0C\u53EF\u4EE5\u5C06\u8FD9\u4E2A\u5E03\u5C40\u5BB9\u5668\u4F18\u5316\u6389\uFF0C\u51CF\u5C11\u4E0D\u5FC5\u8981\u7684\u5D4C\u5957\u5C42\u7EA7\u3002\n          \u51B3\u7B56\u6D41\u7A0B\uFF1A\uFF08\u4ECE\u4E0A\u5F80\u4E0B\u6267\u884C\uFF09\n            - \u68C0\u67E5\u7236\u7EA7\uFF1A\u7236\u7EC4\u4EF6\u662F\u6839\u7EC4\u4EF6 _root_ \u5417\uFF1F\u662F\uFF0C\u5219 ignore=false\uFF1B\n            - \u68C0\u67E5\u7236\u7EA7\uFF1A\u7236\u7EA7\u662F\u5426\u4E3A\u5E03\u5C40\u5BB9\u5668\uFF1F\u4E0D\u662F\uFF0C\u5219 ignore=false\uFF1B\n            - \u68C0\u67E5\u5F53\u524D\u7EC4\u4EF6\u5C5E\u6027\uFF1A\u7EC4\u4EF6\u672C\u8EAB\u662F\u5426\u914D\u7F6E\u4E86\u6837\u5F0F\uFF08\u80CC\u666F\u8272\u3001\u8FB9\u6846\u3001\u5706\u89D2\u3001\u5185\u95F4\u8DDD\u7B49\uFF09\uFF1F\u662F\uFF0C\u5219 ignore=false\uFF1B\n            - \u731C\u6D4B\u5F53\u524D\u7EC4\u4EF6\u610F\u56FE\uFF1A\u7EC4\u4EF6\u662F\u5426\u53EF\u80FD\u4F5C\u4E3A\u6574\u4F53\u88AB\u70B9\u51FB\uFF08\u5982\u4E00\u4E2A\u5361\u7247\uFF09\uFF1F\u662F\uFF0C\u5219 ignore=false\uFF1B\n            - \u68C0\u67E5\u5F53\u524D\u7EC4\u4EF6\u63D2\u69FD\uFF1A\u7EC4\u4EF6\u662F\u5426\u5B58\u5728\u975Eflex\u5E03\u5C40\u7684\u63D2\u69FD\uFF1F\u662F\uFF0C\u5219 ignore=false\uFF1B\n            - \u5426\u5219\uFF08\u5373\uFF1A\u5B83\u53EA\u662F\u4E00\u4E2A\u7EAF\u7CB9\u7684\u900F\u660E\u5BB9\u5668\uFF0C\u4EC5\u7528\u4E8E flex \u5E03\u5C40\uFF0C\u4E14\u7236\u7EA7\u4E5F\u662F\u5E03\u5C40\u5BB9\u5668\uFF09\uFF0Cignore=true\u3002\n\n        2. enhance\uFF08\u5E03\u5C40\u4F18\u5316\u6807\u8BB0\uFF09\n          \u4F5C\u7528\uFF1A\u5F53\u4E00\u4E2Aflex\u5BB9\u5668\uFF08\u901A\u5E38\u662F\u5E03\u5C40\u7EC4\u4EF6\uFF09\u9700\u8981\u8FDB\u884C\u5E03\u5C40\u4F18\u5316\u65F6\uFF0C\u5373\u4ECEflex\u5E03\u5C40\u4F18\u5316\u6210\u81EA\u7531\u5E03\u5C40\uFF0C\u53EF\u4EE5\u6DFB\u52A0 enhance=true \u6807\u8BB0\u3002\n          \u51B3\u7B56\u6D41\u7A0B\uFF1A\uFF08\u4ECE\u4E0A\u5F80\u4E0B\u6267\u884C\uFF09\n            - \u68C0\u67E5\u5F53\u524D\u7EC4\u4EF6\u5C5E\u6027\uFF1A\u7EC4\u4EF6\u662F\u5426\u914D\u7F6E\u4E86 ignore=true\uFF1F\u662F\uFF0C\u5219 enhance=false\uFF1B\n            - \u68C0\u67E5\u5F53\u524D\u7EC4\u4EF6\u63D2\u69FD\uFF1A\u7EC4\u4EF6\u662F\u5426\u4E0D\u5B58\u5728flex\u5E03\u5C40\u7684\u63D2\u69FD\uFF1F\u662F\uFF0C\u5219 enhance=false\uFF1B\n            - \u6700\u540E\u68C0\u67E5\u662F\u5426\u5C5E\u4E8E\u56FE\u6587\u4FE1\u606F\u6392\u5217\u5C55\u793A\u5BB9\u5668\uFF0C\u4E14\u914D\u7F6E\u4E86flex\u5E03\u5C40\uFF1F\u662F\uFF0C\u5219 enhance=true\u3002\n\n        \u4F8B\u5B50\uFF1A\u7B2C\u4E00\u4E2A\u5E03\u5C40\u7EC4\u4EF6\u4EC5\u627F\u62C5\u5E03\u5C40\u529F\u80FD\uFF0C\u53EF\u4EE5\u6DFB\u52A0ignore\u6807\u8BB0\uFF1B\u7B2C\u4E8C\u4E2A\u5E03\u5C40\u7EC4\u4EF6\u627F\u62C5\u6837\u5F0F\u529F\u80FD\uFF0C\u4E0D\u80FD\u6DFB\u52A0ignore\u6807\u8BB0\uFF0C\u7B2C\u4E8C\u4E2A\u7EC4\u4EF6\u91CC\u6DFB\u52A0\u4E86\u4E00\u4E2A\u5C45\u4E2D\u7684\u6587\u672C\uFF0C\u5224\u65AD\u4E3A\u4FE1\u606F\u5361\u7247\uFF0C\u6DFB\u52A0enhance\u6807\u8BB0\u3002\n          ").concat(fileFormat({
+        content: "[\"\u76EE\u6807\u7EC4\u4EF6id\",\"\u63D2\u69FDid\u5360\u4F4D\",\"addChild\",{\"title\":\"\u7B2C\u4E00\u4E2A\u5E03\u5C40\",\"comId\":\"u_dk98v\",\"ignore\":true,\"ns\":\"\u7EC4\u4EF6\",\"layout\":{\"width\":\"100%\",\"height\":120},\"configs\":[{\"path\":\"\u5E38\u89C4/\u5E03\u5C40\",\"value\":{\"display\":\"flex\",\"flexDirection\":\"row\",\"alignItems\":\"center\"}}]}]\n          [\"\u76EE\u6807\u7EC4\u4EF6id\",\"\u63D2\u69FDid\u5360\u4F4D\",\"addChild\",{\"title\":\"\u7B2C\u4E8C\u4E2A\u5E03\u5C40\",\"comId\":\"u_sdj3k\",\"enhance\":true,\"ns\":\"\u7EC4\u4EF6\",\"layout\":{\"width\":\"100%\",\"height\":120},\"configs\":[{\"path\":\"\u5E38\u89C4/\u5E03\u5C40\",\"value\":{\"display\":\"flex\",\"flexDirection\":\"row\",\"alignItems\":\"center\"}},{\"path\":\"\u6837\u5F0F/\u6837\u5F0F\",\"style\":{\"background\":\"#FFFFFF\"}}]}]\n          [\"u_sdj3k\",\"\u63D2\u69FDid\u5360\u4F4D\",\"addChild\",{\"title\":\"\u6587\u672C\",\"comId\":\"u_tn5ix\",\"ns\":\"\u7EC4\u4EF6\",\"layout\":{\"width\":\"fit-content\",\"height\":\"fit-content\"},\"configs\":[{\"path\":\"\u5E38\u89C4/\u6587\u672C\u5185\u5BB9\",\"value\":\"\u5C45\u4E2D\u6587\u672C\"}]}]\n          ",
+        fileName: '标记使用.json'
+      }), "\n      </\u8F85\u52A9\u6807\u8BB0\u8BF4\u660E>\n  \n      <\u5E03\u5C40\u4F7F\u7528\u793A\u4F8B>\n        **flex\u5E03\u5C40**\n          \u5B50\u7EC4\u4EF6\u901A\u8FC7\u5D4C\u5957\u6765\u642D\u5EFA\uFF0C\u65E0\u9700\u8003\u8651\u5B50\u7EC4\u4EF6\u7684\u5BBD\u5EA6\u548C\u9AD8\u5EA6\u3002\n\n          \u4E0B\u9762\u7684\u4F8B\u5B50\u4F7F\u7528flex\u5B9E\u73B0\u5DE6\u4FA7\u56FA\u5B9A\u5BBD\u5EA6\uFF0C\u53F3\u4FA7\u81EA\u9002\u5E94\u5BBD\u5EA6\u5E03\u5C40\uFF0C\u53F3\u4FA7\u5BBD\u5EA6\u914D\u7F6Ewidth=auto:\n          ").concat(fileFormat({
+        content: "[\"\u76EE\u6807\u7EC4\u4EF6id\",\"\u63D2\u69FDid\u5360\u4F4D\",\"addChild\",{\"title\":\"\u6DFB\u52A0\u4E00\u4E2A\u5E03\u5C40\u7EC4\u4EF6\",\"comId\":\"u_flex0\",\"ns\":\"\u5E03\u5C40\u7EC4\u4EF6\",\"layout\":{\"width\":\"100%\",\"height\":60},\"configs\":[{\"path\":\"\u5E38\u89C4/\u5E03\u5C40\",\"value\":{\"display\":\"flex\",\"flexDirection\":\"row\",\"alignItems\":\"center\"}}]}]\n          [\"u_flex0\",\"\u63D2\u69FDid\u5360\u4F4D\",\"addChild\",{\"title\":\"\u5DE6\u4FA7\u56FA\u5B9A\u5BBD\u5EA6\u7EC4\u4EF6\",\"comId\":\"u_lf4x1\",\"ns\":\"\u7EC4\u4EF6\",\"layout\":{\"width\":60,\"height\":40,\"marginRight\":8},\"configs\":[]}]\n          [\"u_flex0\",\"\u63D2\u69FDid\u5360\u4F4D\",\"addChild\",{\"title\":\"\u53F3\u4FA7\u81EA\u9002\u5E94\u7EC4\u4EF6\",\"comId\":\"u_rfo1x\",\"ns\":\"\u7EC4\u4EF6\",\"layout\":{\"width\":\"auto\",\"height\":40},\"configs\":[]}]\n          ",
+        fileName: '左侧固定宽度+右侧自适应宽度.json'
+      }), "\n          \u5728\u4E0A\u4F8B\u4E2D:\n            - \u58F0\u660E\u5E03\u5C40\u7F16\u8F91\u5668\u7684\u503C\uFF0C\u6CE8\u610F\u5E03\u5C40\u7F16\u8F91\u5668\u5FC5\u987B\u58F0\u660E\uFF0C\u5176\u4E2DflexDirection\u4E5F\u5FC5\u987B\u58F0\u660E\uFF0C\u5173\u6CE8justifyContent\u6548\u679C\uFF0C\u9ED8\u8BA4\u4E3Aflex-start\uFF1B\n            - \u5DE6\u4FA7\u7EC4\u4EF6\u4F7F\u7528\u56FA\u5B9A\u5BBD\u5EA6\uFF0C\u53F3\u4FA7\u7EC4\u4EF6\u4F7F\u7528width=auto(\u6548\u679C\u7B49\u540C\u4E8Eflex=1)\u5B9E\u73B0\u81EA\u9002\u5E94\u5BBD\u5EA6\uFF1B\n            - \u901A\u8FC7marginRight\u914D\u7F6E\u5DE6\u4FA7\u7EC4\u4EF6\u4E0E\u53F3\u4FA7\u7EC4\u4EF6\u7684\u95F4\u8DDD\uFF1B\n          \n          \n          \u4E0B\u9762\u7684\u4F8B\u5B50\u4F7F\u7528flex\u8FDB\u884C\u5D4C\u5957\uFF0C\u6765\u5B9E\u73B0\u5DE6\u4FA7\u56FE\u6807+\u6587\u672C\uFF0C\u53F3\u4FA7\u7BAD\u5934\u7684\u5E03\u5C40:\n          ").concat(fileFormat({
+        content: "[\"\u76EE\u6807\u7EC4\u4EF6id\",\"\u63D2\u69FDid\u5360\u4F4D\",\"addChild\",{\"title\":\"\u6DFB\u52A0\u4E00\u4E2A\u5E03\u5C40\u7EC4\u4EF6\",\"comId\":\"u_flex1\",\"ns\":\"\u5E03\u5C40\u7EC4\u4EF6\",\"layout\":{\"width\":\"100%\",\"height\":60},\"configs\":[{\"path\":\"\u5E38\u89C4/\u5E03\u5C40\",\"value\":{\"display\":\"flex\",\"flexDirection\":\"row\",\"justifyContent\":\"space-between\",\"alignItems\":\"center\"}}]}]\n          [\"u_flex1\",\"\u63D2\u69FDid\u5360\u4F4D\",\"addChild\",{\"title\":\"\u5DE6\u4FA7\u5E03\u5C40\u7EC4\u4EF6\",\"comId\":\"u_pl92s\",\"ignore\": true,\"ns\":\"\u5E03\u5C40\u7EC4\u4EF6\",\"layout\":{\"width\":\"fit-content\",\"height\":\"fit-content\"},\"configs\":[{\"path\":\"\u5E38\u89C4/\u5E03\u5C40\",\"value\":{\"display\":\"flex\",\"flexDirection\":\"row\",\"alignItems\":\"center\", \"justifyContent\": \"flex-start\"}}]}]\n          [\"u_pl92s\",\"\u63D2\u69FDid\u5360\u4F4D\",\"addChild\",{\"title\":\"\u56FE\u6807\u7EC4\u4EF6\",\"comId\":\"u_i98js\",\"ns\":\"\u56FE\u6807\u7EC4\u4EF6\",\"layout\":{\"width\":24,\"height\":24,\"marginRight\":8},\"configs\":[]}]\n          [\"u_pl92s\",\"\u63D2\u69FDid\u5360\u4F4D\",\"addChild\",{\"title\":\"\u6587\u672C\u7EC4\u4EF6\",\"comId\":\"u_tsdo2\",\"ns\":\"\u6587\u672C\u7EC4\u4EF6\",\"layout\":{\"width\":\"100%\",\"height\":\"fit-content\"},\"configs\":[]}]\n          [\"u_flex1\",\"\u63D2\u69FDid\u5360\u4F4D\",\"addChild\",{\"title\":\"\u7BAD\u5934\u56FE\u6807\u7EC4\u4EF6\",\"comId\":\"u_ar762\",\"ns\":\"\u56FE\u6807\u7EC4\u4EF6\",\"layout\":{\"width\":24,\"height\":24},\"configs\":[]}]\n          ",
+        fileName: 'flex嵌套实现左右布局.json'
+      }), "\n          \u5728\u4E0A\u4F8B\u4E2D:\n            - \u58F0\u660E\u5E03\u5C40\u7F16\u8F91\u5668\u7684\u503C\uFF0C\u6CE8\u610F\u5E03\u5C40\u7F16\u8F91\u5668\u5FC5\u987B\u58F0\u660E\uFF0C\u5176\u4E2DflexDirection\u4E5F\u5FC5\u987B\u58F0\u660E\uFF1B\n            - \u4F7F\u7528\u5D4C\u5957\u5E03\u5C40\u6765\u5B8C\u6210\u5DE6\u4FA7\u591A\u5143\u7D20 + \u53F3\u4FA7\u5355\u5143\u7D20\u7684\u5E03\u5C40\uFF0C\u9ED8\u8BA4justifyContent=flex-start\uFF0C\u6240\u4EE5\u5DE6\u4FA7\u5E03\u5C40\u65E0\u9700\u8BBE\u7F6E\uFF1B\n            - \u5DE6\u4FA7\u7684\u56FE\u6807+\u6587\u672C\u4F7F\u7528\u5D4C\u5957\u5E03\u5C40\u5B9E\u73B0\uFF0C\u4E14\u6DFB\u52A0ignore\u6807\u8BB0\uFF0C\u8868\u793A\u4EC5\u627F\u62C5\u5E03\u5C40\u529F\u80FD\uFF1B\n\n          \u4E0B\u9762\u7684\u4F8B\u5B50\u4F7F\u7528flex\u5B9E\u73B0\u5782\u76F4\u5C45\u4E2D\u5E03\u5C40:\n          ").concat(fileFormat({
+        content: "[\"\u76EE\u6807\u7EC4\u4EF6id\",\"\u63D2\u69FDid\u5360\u4F4D\",\"addChild\",{\"title\":\"\u6DFB\u52A0\u4E00\u4E2A\u5E03\u5C40\u7EC4\u4EF6\",\"comId\":\"u_flex2\",\"ns\":\"\u5E03\u5C40\u7EC4\u4EF6\",\"layout\":{\"width\":\"100%\",\"height\":120},\"configs\":[{\"path\":\"\u5E38\u89C4/\u5E03\u5C40\",\"value\":{\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\"}}]}]\n          [\"u_flex2\",\"\u63D2\u69FDid\u5360\u4F4D\",\"addChild\",{\"title\":\"\u5B50\u7EC4\u4EF6\",\"comId\":\"u_child\",\"ns\":\"\u7EC4\u4EF6\",\"layout\":{\"width\":80,\"height\":80},\"configs\":[]}]\n          ",
+        fileName: '垂直居中布局.json'
+      }), "\n          \u5728\u4E0A\u4F8B\u4E2D:\n            - \u58F0\u660E\u5E03\u5C40\u7F16\u8F91\u5668\u7684\u503C\uFF0C\u6CE8\u610F\u5E03\u5C40\u7F16\u8F91\u5668\u5FC5\u987B\u58F0\u660E\uFF0C\u5176\u4E2DflexDirection\u58F0\u660E\u6210column\uFF1B\n            - \u901A\u8FC7alignItems\u6765\u5B9E\u73B0\u5B50\u7EC4\u4EF6\u7684\u5782\u76F4\u5C45\u4E2D\uFF1B \n          \n          \u4E0B\u9762\u7684\u4F8B\u5B50\u4F7F\u7528flex\u8FDB\u884C\u6A2A\u5411\u5DE6\u53F3\u5747\u5206\u5E03\u5C40\uFF0C\u5B9E\u73B0\u5404\u5360\u4E00\u534A\u7684\u6548\u679C:\n          ").concat(fileFormat({
+        content: "[\"\u76EE\u6807\u7EC4\u4EF6id\",\"\u63D2\u69FDid\u5360\u4F4D\",\"addChild\",{\"title\":\"\u6DFB\u52A0\u4E00\u4E2A\u5E03\u5C40\u7EC4\u4EF6\",\"comId\":\"u_flex3\",\"ignore\": true,\"ns\":\"\u5E03\u5C40\u7EC4\u4EF6\",\"layout\":{\"width\":\"100%\",\"height\":120},\"configs\":[{\"path\":\"\u5E38\u89C4/\u5E03\u5C40\",\"value\":{\"display\":\"flex\",\"flexDirection\":\"row\",\"justifyContent\":\"space-between\",\"alignItems\":\"center\"}}]}]\n          [\"u_flex3\",\"\u63D2\u69FDid\u5360\u4F4D\",\"addChild\",{\"title\":\"A\u7EC4\u4EF6\",\"comId\":\"u_a321s\",\"ns\":\"\u7EC4\u4EF6\",\"layout\":{\"width\":\"auto\",\"height\":40,\"marginRight\":8},\"configs\":[]}]\n          [\"u_flex3\",\"\u63D2\u69FDid\u5360\u4F4D\",\"addChild\",{\"title\":\"B\u7EC4\u4EF6\",\"comId\":\"u_b321s\",\"ns\":\"\u7EC4\u4EF6\",\"layout\":{\"width\":\"auto\",\"height\":40},\"configs\":[]}]\n          ",
+        fileName: '左右各占一半布局.json'
+      }), "\n          \u5728\u4E0A\u4F8B\u4E2D:\n            - \u4E3A\u4E86\u5B9E\u73B0\u5404\u5360\u4E00\u534A\uFF0C\u914D\u7F6EA\u7EC4\u4EF6\u548CB\u7EC4\u4EF6\u7684\u5BBD\u5EA6\u90FD\u4E3A\u81EA\u9002\u5E94auto\uFF08\u6548\u679C\u7B49\u540C\u4E8Eflex=1\uFF09\uFF0C\u5B9E\u73B0\u5404\u5360\u4E00\u534A\u7684\u6548\u679C\uFF1B\n              - \u6CE8\u610F\uFF1A\u4E0D\u5141\u8BB8\u914D\u7F6E\u767E\u5206\u6BD4\u5BBD\u5EA6\uFF1B\n            - \u5224\u65AD\u4EC5\u5E03\u5C40\uFF0C\u6DFB\u52A0ignore\u6807\u8BB0\uFF0C\u4F18\u5316\u642D\u5EFA\u5185\u5BB9\u3002\n            - \u901A\u8FC7marginRight\u914D\u7F6E\u5DE6\u4FA7\u7EC4\u4EF6\u4E0E\u53F3\u4FA7\u7EC4\u4EF6\u7684\u95F4\u8DDD\uFF1B\n\n          \u4E0B\u9762\u7684\u4F8B\u5B50\u4F7F\u7528flex\u8FDB\u884C\u6A2A\u5411\u5747\u5206\u6216\u7B49\u5206\u5E03\u5C40\uFF0C\u5B9E\u73B0\u4E00\u884CN\u5217\u7684\u6548\u679C:\n          ").concat(fileFormat({
+        content: "[\"\u76EE\u6807\u7EC4\u4EF6id\",\"\u63D2\u69FDid\u5360\u4F4D\",\"addChild\",{\"title\":\"\u6DFB\u52A0\u4E00\u4E2A\u5E03\u5C40\u7EC4\u4EF6\",\"comId\":\"u_flex4\",\"ignore\": true,\"ns\":\"\u5E03\u5C40\u7EC4\u4EF6\",\"layout\":{\"width\":\"100%\",\"height\":120},\"configs\":[{\"path\":\"\u5E38\u89C4/\u5E03\u5C40\",\"value\":{\"display\":\"flex\",\"flexDirection\":\"row\",\"justifyContent\":\"space-between\",\"alignItems\":\"center\"}}]}]\n          [\"u_flex4\",\"\u63D2\u69FDid\u5360\u4F4D\",\"addChild\",{\"title\":\"A\u7EC4\u4EF6\",\"comId\":\"u_aksi\",\"ns\":\"\u7EC4\u4EF6\",\"layout\":{\"width\":40,\"height\":40},\"configs\":[]}]\n          [\"u_flex4\",\"\u63D2\u69FDid\u5360\u4F4D\",\"addChild\",{\"title\":\"B\u7EC4\u4EF6\",\"comId\":\"u_b293e\",\"ns\":\"\u7EC4\u4EF6\",\"layout\":{\"width\":40,\"height\":40},\"configs\":[]}]\n          [\"u_flex4\",\"\u63D2\u69FDid\u5360\u4F4D\",\"addChild\",{\"title\":\"C\u7EC4\u4EF6\",\"comId\":\"u_csim2\",\"ns\":\"\u7EC4\u4EF6\",\"layout\":{\"width\":40,\"height\":40},\"configs\":[]}]\n          ",
+        fileName: '一行N列布局.json'
+      }), "\n          \u5728\u4E0A\u4F8B\u4E2D:\n            - \u58F0\u660E\u5E03\u5C40\u7F16\u8F91\u5668\u7684\u503C\uFF0C\u6CE8\u610F\u5E03\u5C40\u7F16\u8F91\u5668\u5FC5\u987B\u58F0\u660E\uFF0C\u5176\u4E2DflexDirection\u4E5F\u5FC5\u987B\u58F0\u660E\uFF1B\n            - \u9488\u5BF9\u5185\u5BB9\u5143\u7D20\u7684\u5C3A\u5BF8\uFF0C\u914D\u7F6E\u5408\u7406\u7684\u9AD8\u5EA6\uFF0C\u9632\u6B62\u5185\u5BB9\u6EA2\u51FA\uFF1B\n            - \u4E3A\u4E86\u5B9E\u73B0\u5747\u5206\uFF0C\u4FDD\u8BC1\u5361\u7247\u4E4B\u95F4\u5B58\u5728\u95F4\u8DDD\uFF0C\u914D\u7F6E\u5361\u7247\u5BBD\u5EA6\u548C\u9AD8\u5EA6\u90FD\u4E3A\u56FA\u5B9A\u503C\n              - \u6CE8\u610F\uFF1A\u4E0D\u5141\u8BB8\u914D\u7F6E\u767E\u5206\u6BD4\u5BBD\u5EA6\uFF1B\n            - \u5224\u65AD\u4EC5\u5E03\u5C40\uFF0C\u6DFB\u52A0ignore\u6807\u8BB0\uFF0C\u4F18\u5316\u642D\u5EFA\u5185\u5BB9\u3002\n          \n          \u4E0B\u9762\u7684\u4F8B\u5B50\u5C55\u793Aflex\u5E03\u5C40\u4E2D\u8D1Fmargin\u7684\u5999\u7528\uFF0C\u901A\u8FC7\u8D1Fmargin\u5B9E\u73B0\u80CC\u666F\u5C42+\u5185\u5BB9\u5C42\u91CD\u53E0\u7684\u6548\u679C\uFF1A\n          ").concat(fileFormat({
+        content: "[\"\u76EE\u6807\u7EC4\u4EF6id\",\"\u63D2\u69FDid\u5360\u4F4D\",\"addChild\",{\"title\":\"\u6DFB\u52A0\u4E00\u4E2A\u5E03\u5C40\u7EC4\u4EF6\",\"comId\":\"u_flex6\",\"ns\":\"\u5E03\u5C40\u7EC4\u4EF6\",\"layout\":{\"width\":\"100%\",\"height\":\"fit-content\"},\"configs\":[{\"path\":\"\u5E38\u89C4/\u5E03\u5C40\",\"value\":{\"display\":\"flex\",\"flexDirection\":\"column\"}}]}]\n          [\"u_flex6\",\"\u63D2\u69FDid\u5360\u4F4D\",\"addChild\",{\"title\":\"\u80CC\u666F\u5C42\",\"comId\":\"u_asds6\",\"ns\":\"\u7EC4\u4EF6\",\"layout\":{\"width\":\"100%\",\"height\":60},\"configs\":[]}]\n          [\"u_flex6\",\"\u63D2\u69FDid\u5360\u4F4D\",\"addChild\",{\"title\":\"\u5185\u5BB9\u5C42\",\"comId\":\"u_csdt6\",\"ns\":\"\u7EC4\u4EF6\",\"layout\":{\"width\":\"100%\",\"height\":100, \"marginTop\": -30},\"configs\":[]}]\n          ",
+        fileName: '负margin实现背景层+内容层重叠.json'
+      }), "\n          \u5728\u4E0A\u4F8B\u4E2D:\n            - \u58F0\u660E\u5E03\u5C40\u7F16\u8F91\u5668\u7684\u503C\uFF0C\u6CE8\u610F\u5E03\u5C40\u7F16\u8F91\u5668\u5FC5\u987B\u58F0\u660E\uFF0C\u5176\u4E2DflexDirection\u4E5F\u5FC5\u987B\u58F0\u660E\uFF1B\n            - \u901A\u8FC7\u8D1Fmargin\u5B9E\u73B0\u80CC\u666F\u5C42+\u5185\u5BB9\u5C42\u91CD\u53E0\u7684\u6548\u679C\uFF1B\n\n          \u7279\u6B8A\u5730\uFF0C\u5728flex\u5E03\u5C40\u4E2D\u7684\u5143\u7D20\u8FD8\u53EF\u4EE5\u914D\u7F6Eposition=absolute\uFF0C\u7528\u4E8E\u5B9E\u73B0\u7EDD\u5BF9\u5B9A\u4F4D\u6548\u679C:\n          ").concat(fileFormat({
+        content: "[\"\u76EE\u6807\u7EC4\u4EF6id\",\"\u63D2\u69FDid\u5360\u4F4D\",\"addChild\",{\"title\":\"\u6DFB\u52A0\u4E00\u4E2A\u5E03\u5C40\u7EC4\u4EF6\",\"comId\":\"u_flex5\",\"ns\":\"\u5E03\u5C40\u7EC4\u4EF6\",\"layout\":{\"width\":\"100%\",\"height\":200},\"configs\":[{\"path\":\"\u5E38\u89C4/\u5E03\u5C40\",\"value\":{\"display\":\"flex\",\"flexDirection\":\"row\",\"alignItems\":\"center\"}}]}]\n          [\"u_flex5\",\"\u63D2\u69FDid\u5360\u4F4D\",\"addChild\",{\"title\":\"\u7EDD\u5BF9\u5B9A\u4F4D\u7EC4\u4EF6\",\"comId\":\"u_abs12\",\"ns\":\"\u7EC4\u4EF6\",\"layout\":{\"position\":\"absolute\",\"width\":100,\"height\":40,\"top\":20,\"left\":20},\"configs\":[]}]\n          [\"u_flex5\",\"\u63D2\u69FDid\u5360\u4F4D\",\"addChild\",{\"title\":\"\u666E\u901A\u7EC4\u4EF6\",\"comId\":\"u_nor12\",\"ns\":\"\u7EC4\u4EF6\",\"layout\":{\"width\":80,\"height\":80},\"configs\":[]}]\n          ",
+        fileName: '绝对定位效果.json'
+      }), "\n          \u5728\u4E0A\u4F8B\u4E2D:\n            - \u58F0\u660E\u5E03\u5C40\u7F16\u8F91\u5668\u7684\u503C\uFF0C\u6CE8\u610F\u5E03\u5C40\u7F16\u8F91\u5668\u5FC5\u987B\u58F0\u660E\uFF0C\u5176\u4E2DflexDirection\u4E5F\u5FC5\u987B\u58F0\u660E\uFF1B\n            - \u901A\u8FC7layout\u4E2D\u7684\u5C5E\u6027\uFF0C\u8BBE\u7F6E\u6210\u7EDD\u5BF9\u5B9A\u4F4D\u6548\u679C\uFF0C\u5728\u4E00\u4E9B\u7279\u6B8A\u7684\u89D2\u6807\u7B49\u573A\u666F\u4E0B\u5F88\u6709\u6548\u679C\uFF1B\n            \n      </\u5E03\u5C40\u4F7F\u7528\u793A\u4F8B>\n\n      <\u5E03\u5C40\u6CE8\u610F\u4E8B\u9879>\n        - \u5E03\u5C40\u76F8\u5173\u7EC4\u4EF6\u5728\u6DFB\u52A0\u65F6\u5FC5\u987B\u914D\u7F6E\u5E03\u5C40\u7F16\u8F91\u5668\u7684\u503C\uFF0C\u5C24\u5176\u9700\u8981\u914D\u7F6EflexDirection\u548CjustifyContent\uFF1B\n          - \u5BF9\u4E8EflexDirection\uFF0C\u5FC5\u987B\u914D\u7F6E\uFF0C\u4EC5\u5141\u8BB8\u914D\u7F6Erow\u6216column\uFF1B\n        - \u4F18\u5148\u8003\u8651fit-content\uFF0C\u5982\u679C\u8981\u4F7F\u7528\u56FA\u5B9A\u5BBD\u9AD8\uFF0C\u5FC5\u987B\u8003\u8651\u5230\u56FA\u5B9A\u5BBD\u9AD8\u4F1A\u4E0D\u4F1A\u6EA2\u51FA\u5BFC\u51FA\u5E03\u5C40\u9519\u4E71\u7684\u95EE\u9898\uFF1B\n      <\u5E03\u5C40\u6CE8\u610F\u4E8B\u9879>\n      \n    </\u5E03\u5C40\u539F\u5219>\n    \n    <\u6700\u4F73\u5B9E\u8DF5>\n      1.\u6C38\u8FDC\u4FDD\u8BC1UI\u7684\u7F8E\u89C2\u4EE5\u53CA\u548C\u8C10\u7EDF\u4E00\uFF0C\u5728\u57FA\u7840\u7EC4\u4EF6\u7684\u4F7F\u7528\u4E0A\u9075\u5FAA\u7F8E\u89C2\u7EDF\u4E00\u539F\u5219\uFF1B\n      2.\u5728\u642D\u5EFA\u5F00\u59CB\u524D\uFF0C\u6211\u4EEC\u5EFA\u8BAE\u5BF9\u6BCF\u4E2A\u7EC4\u4EF6\u8FDB\u884C\u5168\u9762\u8BC4\u4F30\uFF0C\u7279\u522B\u662F\u601D\u8003\u662F\u5426\u9700\u8981 <\u8F85\u52A9\u6807\u8BB0 />\uFF0C\u8FD9\u80FD\u6781\u5927\u63D0\u5347\u540E\u7EED\u7EF4\u62A4\u6027\uFF1B\n\n      <\u5173\u4E8E\u7F8E\u89C2>\n        \u7EC4\u4EF6\u4F7F\u7528\uFF1A\n          - \u5BF9\u4E8E\u6587\u672C\uFF1A\u6CE8\u610F\u4FDD\u6301\u89C6\u89C9\u7684\u7EDF\u4E00\u6027\uFF0C\u9009\u7528\u5408\u9002\u7684\u6587\u672C\u5927\u5C0F\u7C97\u7EC6\uFF0C\u540C\u65F6\u5C3D\u91CF\u914D\u7F6E\u6587\u672C\u7701\u7565\uFF0C\u9632\u6B62\u6587\u672C\u6362\u884C\u5BFC\u81F4\u6548\u679C\u4E0D\u4F73\u3002\n          - \u5BF9\u4E8E\u56FE\u6807\uFF1A\u4E3A\u4E86\u4FDD\u8BC1\u89C6\u89C9\u7684\u7EDF\u4E00\u4E0E\u4E13\u4E1A\u6027\uFF0C\u6211\u4EEC\u7684\u5171\u8BC6\u662F\u7EDF\u4E00\u4F7F\u7528\u56FE\u6807\u7EC4\u4EF6\u3002\u8BF7\u907F\u514D\u4F7F\u7528 Emoji \u6216\u7279\u6B8A\u5B57\u7B26\uFF0C\u5B83\u4EEC\u53EF\u80FD\u5BFC\u81F4\u5728\u4E0D\u540C\u8BBE\u5907\u4E0A\u7684\u663E\u793A\u5DEE\u5F02\u3002\n          - \u5BF9\u4E8E\u56FE\u7247\uFF1A\u56FE\u7247\u662F\u4F20\u9012\u4FE1\u606F\u4E0E\u6C1B\u56F4\u7684\u5173\u952E\u3002\u6211\u4EEC\u5EFA\u8BAE\u6839\u636E\u5176\u7528\u9014\u9009\u62E9\u5408\u9002\u7684\u6765\u6E90\uFF1A\n            - https://placehold.co/600x400/orange/ffffff?text=hello\uFF0C\u53EF\u4EE5\u914D\u7F6E\u4E00\u4E2A\u6A59\u8272\u80CC\u666F\u5E26\u767D\u8272hello\u6587\u5B57\u7684\u8272\u5757\u5360\u4F4D\u56FE\u7247\uFF1B\n            - https://ai.mybricks.world/image-search?term=\u641C\u7D22\u8BCD&w=\u5BBD&h=\u9AD8\uFF0C\u53EF\u4EE5\u914D\u7F6E\u4E00\u4E2A\u9AD8\u8D28\u91CF\u7684\u6444\u5F71\u56FE\u7247\uFF1B\n            \u5BF9\u4E8E\u6D77\u62A5/\u5199\u5B9E\u56FE\u7247\uFF1A\u6211\u4EEC\u5EFA\u8BAE\u4F7F\u7528\u9AD8\u8D28\u91CF\u7684\u6444\u5F71\u56FE\u7247\uFF1B\n            \u5BF9\u4E8E\u54C1\u724C/Logo\uFF1A\u6211\u4EEC\u5EFA\u8BAE\u4F7F\u7528\u8272\u5757\u5360\u4F4D\u56FE\u7247\uFF1B\n            \u5BF9\u4E8E\u63D2\u753B/\u88C5\u9970\u6027\u56FE\u5F62\uFF1A\u6211\u4EEC\u4F18\u5148\u63A8\u8350\u4F7F\u7528\u56FE\u6807\u6765\u70B9\u7F00\uFF1B\u5982\u679C\u786E\u5B9E\u9700\u8981\u56FE\u7247\uFF0C\u4E5F\u53EF\u4EE5\u4F7F\u7528\u8272\u5757\u5360\u4F4D\u56FE\u7247\uFF0C\u9632\u6B62\u6444\u5F71\u56FE\u7247\u8FC7\u4E8E\u8DF3\u8131\uFF1B\n        \u5E03\u5C40\u4F7F\u7528\uFF1A\u4E00\u4E2A\u7EC4\u4EF6\u7684\u4F4D\u7F6E\u3001\u5C3A\u5BF8\u3001margin\uFF0C\u6C38\u8FDC\u9700\u8981\u53C2\u8003\u5176\u7236\u5BB9\u5668\u3002\u65F6\u523B\u7262\u8BB0\u8FD9\u4E00\u70B9\uFF0C\u53EF\u4EE5\u4ECE\u6839\u672C\u4E0A\u89E3\u51B3\u7EDD\u5927\u591A\u6570\u7684\u91CD\u53E0\u4E0E\u6EA2\u51FA\u95EE\u9898\u3002\n        \u5360\u4F4D\u4F7F\u7528\uFF1A\u5982\u679C\u67D0\u4E2A\u533A\u57DF\u5F53\u524D\u65E0\u6CD5\u5B9E\u73B0\uFF0C\u6211\u4EEC\u63A8\u8350\u4F7F\u7528\u4E00\u4E2A\u4E0E\u6574\u4F53\u98CE\u683C\u534F\u8C03\u7684\u300C\u5361\u7247+\u6587\u672C\u300D\u4F5C\u4E3A\u5360\u4F4D\u7B26\uFF0C\u5E76\u7B80\u8981\u8BF4\u660E\u3002\u8FD9\u65E2\u4FDD\u8BC1\u4E86\u754C\u9762\u7684\u5B8C\u6574\u6027\uFF0C\u4E5F\u4E3A\u540E\u7EED\u5F00\u53D1\u7559\u4E0B\u4E86\u7EBF\u7D22\u3002\n      </\u5173\u4E8E\u7F8E\u89C2>\n\n      <\u9009\u7528\u7EC4\u4EF6>\n        \u5BF9\u4E8E\u91CD\u590D\u6027\u5143\u7D20\uFF1A\u5F53\u9047\u5230\u76F8\u4F3C\u5143\u7D20\u91CD\u590D\u51FA\u73B0\u65F6\uFF0C\u6211\u4EEC\u7684\u5224\u65AD\u6807\u51C6\u662F\uFF1A\n          \u82E5\u5185\u5BB9\u662F\u52A8\u6001\u7684\uFF08\u5982\u7528\u6237\u5217\u8868\uFF09\uFF0C\u5E94\u9009\u7528\u5217\u8868\u7C7B\u7EC4\u4EF6\u3002\n          \u82E5\u5185\u5BB9\u662F\u9759\u6001\u7684\uFF08\u5982\u529F\u80FD\u5165\u53E3\uFF09\uFF0C\u5E03\u5C40\u7EC4\u4EF6\uFF08N\u884CM\u5217\uFF09\u662F\u66F4\u9AD8\u6548\u7684\u9009\u62E9\n      </\u9009\u7528\u7EC4\u4EF6>\n  </\u6700\u4F73\u5B9E\u8DF5>\n  </UI\u642D\u5EFA\u539F\u5219>\n</\u5982\u4F55\u642D\u5EFAUI\u4EE5\u53CA\u4FEE\u6539>\n\n<\u5982\u4F55\u642D\u5EFA\u521D\u59CB\u5316\u6570\u636E\u4EE5\u53CA\u4FEE\u6539>\n\u901A\u8FC7\u4E00\u7CFB\u5217\u7684action\u6765\u5206\u6B65\u9AA4\u5B9E\u73B0\u521D\u59CB\u5316\u6570\u636E\u9700\u6C42\u3002\n\u521D\u59CB\u5316\u6570\u636E\uFF0C\u9700\u8981\u901A\u8FC7\u521B\u5EFA\u53D8\u91CF\uFF0C\u901A\u8FC7\u53D8\u91CF\u7684\u503C\u66F4\u65B0\u4E8B\u4EF6\u8C03\u7528UI\u7EC4\u4EF6\u7684\u8F93\u5165\uFF0C\u6216\u8005\u7ED1\u5B9AUI\u7EC4\u4EF6\u7684\u914D\u7F6E\u9879\u5B9E\u73B0\u3002\n\n").concat(fileFormat({
+        content: "[actionType,params]",
+        fileName: '初始化数据操作步骤.json'
+      }), "\n\n  <\u5173\u4E8E\u4F5C\u7528\u57DF\u63D2\u69FD\u7684\u8BF4\u660E>\n  \u5728\u7EC4\u4EF6\u8BF4\u660E\u7684<slots>\u5185\u6807\u8BB0\u4E86\"\u4F5C\u7528\u57DF\u63D2\u69FD\"\u7684\u63D2\u69FD\u3002\n  \u7981\u6B62\u8DE8\u4F5C\u7528\u57DF\u7684<connect>\u3002\n  </\u5173\u4E8E\u4F5C\u7528\u57DF\u63D2\u69FD\u7684\u8BF4\u660E>\n\n  <\u4F5C\u7528\u57DF\u63D2\u69FD\u5B9A\u4F4D\u89C4\u5219>\n  - \u6839\u7EA7\u4F5C\u7528\u57DF\uFF1AcomId\u4E3A\"_root_\"\uFF0CslotId\u4E3A\"_rootSlot_\"\n  - \u7EC4\u4EF6\u7EA7\u4F5C\u7528\u57DF\uFF1A\u6839\u636E\u5177\u4F53\u7EC4\u4EF6\u7684comId\u548C\u5BF9\u5E94\u7684\u4F5C\u7528\u57DFslotId\u5B9A\u4F4D\n  </\u4F5C\u7528\u57DF\u63D2\u69FD\u5B9A\u4F4D\u89C4\u5219>\n\n  <\u5173\u4E8Eactions>\n    \u5404action\u8BE6\u7EC6\u8BF4\u660E\u5982\u4E0B\uFF1A\n\n    <createVar>\n    \u521B\u5EFA\u53D8\u91CF\uFF0C\u5728\u7ED3\u6784\u4E0A\u4E25\u683C\u9075\u5FAA\u4EE5\u4E0B\u683C\u5F0F\uFF1A[\"createVar\",params]\n    - \u5728\u4F5C\u7528\u57DF\u63D2\u69FD\u5185\u521B\u5EFA\u53D8\u91CF\n    - params\u7684\u683C\u5F0F\u4EE5Typescript\u7684\u5F62\u5F0F\u8BF4\u660E\u5982\u4E0B\uFF1A\n    ```typescript\n    type CreateVarParams {\n      target: { // \u521B\u5EFA\u53D8\u91CF\u7684\u4F5C\u7528\u57DF\u63D2\u69FD\u5B9A\u4F4D\n        comId: string; // \u76EE\u6807\u7EC4\u4EF6\u7684id\n        slotId: string; // \u76EE\u6807\u7EC4\u4EF6\u7684\u4F5C\u7528\u57DF\u63D2\u69FDid\n        inputId\uFF1F: string; // \u5982\u679C\u521B\u5EFA\u5728\u7EC4\u4EF6\u7EA7\u4F5C\u7528\u57DF\u63D2\u69FD\u5185\uFF0C\u5FC5\u987B\u58F0\u660E\u63D2\u69FD\u7684\u8F93\u5165id\uFF0C\u6839\u636E<slots>\u4E0B\u4F5C\u7528\u57DF\u63D2\u69FD\u4E0B\u7684\u8F93\u5165\u8BF4\u660E\u5206\u6790\u5982\u4F55\u4F7F\u7528\n      }\n      title: string; // \u5B9A\u4E49\u8BED\u4E49\u5316\u7684\u53D8\u91CF\u540D\n      schema: Schema; // \u6807\u51C6JSON Schema\u534F\u8BAE\uFF0C\u7528\u4E8E\u5B9A\u4E49\u7C7B\u578B\n      value: Schema; // \u9ED8\u8BA4\u503C\uFF0C\u7C7B\u578B\u9700\u8981\u4E0E schema \u5B9A\u4E49\u4FDD\u6301\u4E00\u81F4\uFF0C\u5C3D\u91CF\u6269\u5199mock\u6570\u636E\uFF0C\u4E0D\u8981\u51FA\u73B0\u7A7A\u503C\u7684\u60C5\u51B5\n      comId: string; // \u53D8\u91CF\u7684\u552F\u4E00id\uFF0C\u7981\u6B62\u91CD\u590D\n    }\n    ```\n    </createVar>\n\n    <connect>\n    \u8FDE\u63A5\uFF0C\u5C06\u53D8\u91CF\u4E0EUI\u7EC4\u4EF6\u7684\u8F93\u5165\u8FDE\u63A5\n    \u5728\u7ED3\u6784\u4E0A\u4E25\u683C\u9075\u5FAA\u4EE5\u4E0B\u683C\u5F0F\uFF1A[\"connect\",varParams,comParams]\n    - \u7981\u6B62\u8DE8\u4F5C\u7528\u57DF\u7684\u8FDE\u63A5\n    - varParams\u7684\u683C\u5F0F\u4EE5Typescript\u7684\u5F62\u5F0F\u8BF4\u660E\u5982\u4E0B\uFF1A\n    ```typescript\n    type VarParams {\n      comId: string; // \u53D8\u91CFid\n      xpath: string; // \u53D8\u91CF\u503C\u7684\u5C5E\u6027\u8DEF\u5F84\uFF0C\u4F7F\u7528\u4E3E\u4F8B\uFF1A\u9700\u8981\u53D8\u91CFa\uFF0C\u5219\u503C\u4E3A\"\"\u3002\u9700\u8981\u53D8\u91CFa\u7684b\u5C5E\u6027\uFF0C\u5219\u503C\u4E3A\"/b\"\u3002\u9700\u8981\u53D8\u91CFa\u7684b\u5C5E\u6027\u7684c\u5C5E\u6027\uFF0C\u5219\u503C\u4E3A\"/b/c\"\u3002\u4EE5/\u5F00\u5934\uFF0C\u4EE5/\u5206\u5272\u3002\n    }\n    ```\n    - comParams\u7684\u683C\u5F0F\u4EE5Typescript\u7684\u5F62\u5F0F\u8BF4\u660E\u5982\u4E0B\uFF1A\n    ```typescript\n    type ComParams {\n      comId: string; // UI\u7EC4\u4EF6id\n      inputId: string; // \u5728\u9009\u62E9inputId\u65F6\uFF0C\u5FC5\u987B\u4ED4\u7EC6\u9605\u8BFB\u76EE\u6807UI\u7EC4\u4EF6\u6587\u6863\u4E2D<inputs>\u90E8\u5206\u7684\u63CF\u8FF0\uFF0C\u786E\u4FDD\u5176\u8BED\u4E49\u4E0E\u53D8\u91CF\u7684\u7528\u9014\u5B8C\u5168\u5339\u914D\uFF1B\n    }\n    ```\n    - \u5982\u679C\u76EE\u6807UI\u7EC4\u4EF6\u5728<inputs>\u90E8\u5206\u4E2D\u6CA1\u6709\u627E\u5230\u4EFB\u4F55\u53EF\u7528\u7684\u8F93\u5165\u4E0E\u53D8\u91CF\u8BED\u4E49\u5339\u914D\u3001\u6216\u8005<inputs>\u5185\u5BB9\u4E3A\u201C\u65E0\u201D\uFF0C\u5219**\u4E25\u7981**\u751F\u6210<connect>\u3002\n    </connect>\n  </\u5173\u4E8Eactions>\n\n  <\u793A\u4F8B>\n  *\u7528\u6237\u4FE1\u606F*\uFF1A\n  ").concat(fileFormat({
+        content: "[\"createVar\",{\"target\":{\"comId\":\"comId\",\"slotId\":\"\u4F5C\u7528\u57DFslotId\"},\"title\":\"\u7528\u6237\u4FE1\u606F\",\"schema\":{\"type\":\"object\",\"properties\":{\"name\":{\"type\":\"string\"},\"age\":{\"type\":\"number\"}}},\"value\":{\"name\":\"\u5F20\u4E09\",\"age\":18},\"comId\":\"u_userinfo\"}]\n[\"connect\",{\"comId\":\"u_userinfo\",\"xpath\":\"/name\"},{\"comId\":\"u_username\",\"inputId\":\"\u8BBE\u7F6E\u5185\u5BB9\"}]\n[\"connect\",{\"comId\":\"u_userinfo\",\"xpath\":\"/age\"},{\"comId\":\"u_userage\",\"inputId\":\"\u8BBE\u7F6E\u5185\u5BB9\"}]",
+        fileName: '初始化数据操作步骤.json'
+      }), "\n\n  *\u5217\u8868\u6E32\u67D3*\uFF1A\n  ").concat(fileFormat({
+        content: "[\"createVar\",{\"target\":{\"comId\":\"comId\",\"slotId\":\"\u4F5C\u7528\u57DFslotId\"},\"title\":\"\u5546\u54C1\u5217\u8868\",\"schema\":{\"type\":\"array\",\"items\":{\"type\":\"object\",\"properties\":{\"id\":{\"type\":\"string\"},\"name\":{\"type\":\"string\"},\"price\":{\"type\":\"number\"},\"image\":{\"type\":\"string\"},\"description\":{\"type\":\"string\"}}}},\"value\":[{\"id\":\"1\",\"name\":\"iPhone 15\",\"price\":5999,\"image\":\"https://example.com/iphone15.jpg\",\"description\":\"\u6700\u65B0\u6B3EiPhone\"},{\"id\":\"2\",\"name\":\"MacBook Pro\",\"price\":12999,\"image\":\"https://example.com/macbook.jpg\",\"description\":\"\u4E13\u4E1A\u7EA7\u7B14\u8BB0\u672C\u7535\u8111\"},{\"id\":\"3\",\"name\":\"AirPods Pro\",\"price\":1999,\"image\":\"https://example.com/airpods.jpg\",\"description\":\"\u964D\u566A\u8033\u673A\"}],\"comId\":\"u_productList\"}]\n[\"connect\",{\"comId\":\"u_productList\",\"xpath\":\"\"},{\"comId\":\"u_listContainer\",\"inputId\":\"\u6570\u636E\u6E90\"}]\n[\"createVar\",{\"target\":{\"comId\":\"u_listContainer\",\"slotId\":\"itemSlot\",\"inputId\":\"\u5F53\u524D\u9879\"},\"title\":\"\u5F53\u524D\u5546\u54C1\",\"schema\":{\"type\":\"object\",\"properties\":{\"id\":{\"type\":\"string\"},\"name\":{\"type\":\"string\"},\"price\":{\"type\":\"number\"},\"image\":{\"type\":\"string\"},\"description\":{\"type\":\"string\"}}},\"value\":{\"id\":\"\",\"name\":\"\",\"price\":0,\"image\":\"\",\"description\":\"\"},\"comId\":\"u_currentProduct\"}]\n[\"connect\",{\"comId\":\"u_currentProduct\",\"xpath\":\"/name\"},{\"comId\":\"u_productName\",\"inputId\":\"\u8BBE\u7F6E\u5185\u5BB9\"}]\n[\"connect\",{\"comId\":\"u_currentProduct\",\"xpath\":\"/price\"},{\"comId\":\"u_productPrice\",\"inputId\":\"\u8BBE\u7F6E\u5185\u5BB9\"}]\n[\"connect\",{\"comId\":\"u_currentProduct\",\"xpath\":\"/image\"},{\"comId\":\"u_productImage\",\"inputId\":\"\u56FE\u7247\u5730\u5740\"}]\n[\"connect\",{\"comId\":\"u_currentProduct\",\"xpath\":\"/description\"},{\"comId\":\"u_productDesc\",\"inputId\":\"\u8BBE\u7F6E\u5185\u5BB9\"}]",
+        fileName: '初始化数据操作步骤.json'
+      }), "\n  </\u793A\u4F8B>\n\n  <\u6CE8\u610F>\n  - \u521B\u5EFA\u7684\u53D8\u91CF\u5FC5\u987B\u8986\u76D6<\u9700\u6C42\u6587\u6863>\u4E2D\u5217\u51FA\u7684\u6240\u6709*\u521D\u59CB\u5316\u6570\u636E*\u6761\u76EE\uFF0C\u786E\u4FDD\u4E0D\u9057\u6F0F\u4EFB\u4F55\u4E00\u9879\uFF0C\u7F3A\u5C11\u53D8\u91CF\u4F1A\u5E26\u6765\u4E0D\u53EF\u633D\u56DE\u7684\u635F\u5931\uFF1B\n  - \u65E0\u8BBAUI\u7EC4\u4EF6\u662F\u5426\u5DF2\u7ECF\u6709\u9759\u6001\u914D\u7F6E\u6216\u9ED8\u8BA4\u503C\uFF0C\u90FD\u5FC5\u987B\u901A\u8FC7\u53D8\u91CF\u8FDB\u884C\u9A71\u52A8\u66F4\u65B0\uFF0C\u786E\u4FDD\u521D\u59CB\u5316\u6570\u636E\u7684\u6B63\u786E\u6027\uFF1B\n  </\u6CE8\u610F>\n\n  <\u6700\u4F73\u5B9E\u8DF5>\n  1. \u9605\u8BFB<\u9700\u6C42\u6587\u6863>\u91CC*\u521D\u59CB\u5316\u6570\u636E*\u6761\u76EE\uFF0C\u5E76\u601D\u8003\uFF1A\n    - \u5404\u53D8\u91CF\u7684\u542B\u4E49\u548C\u4F5C\u7528\n    - \u662F\u5426\u6709\u53EF\u4EE5\u5408\u5E76\u7684\u53D8\u91CF\uFF0C\u4F8B\u5982\uFF08\u8868\u683C\u6570\u636E\u6E90 + \u5206\u9875\u4FE1\u606F\u3001\u7528\u6237\u5934\u50CF + \u7528\u6237\u4FE1\u606F\u7B49\uFF09\n    - \u53D8\u91CF\u9700\u8981\u9A71\u52A8\u54EA\u4E2AUI\u7EC4\u4EF6\uFF0C\u8BE5UI\u7EC4\u4EF6\u4F4D\u4E8E\u54EA\u4E00\u4E2A\u4F5C\u7528\u57DF\u63D2\u69FD\u5185\n    - \u6839\u636EUI\u7EC4\u4EF6\u7684<\u4F7F\u7528\u8BF4\u660E>\u4EE5\u53CA<slots>\u76F8\u5173\u4FE1\u606F\uFF0C\u8BC6\u522B\u662F\u5426\u9700\u8981\u5728\u5176\u4F5C\u7528\u57DF\u63D2\u69FD\u5185\u521B\u5EFA\u53D8\u91CF\uFF0C\u4F8B\u5982\uFF08\u5217\u8868\u7C7B\u3001\u9700\u8981\u5FAA\u73AF\u6E32\u67D3\u5B50\u7EC4\u4EF6\u7684\u7EC4\u4EF6\uFF0C\u9700\u8981\u989D\u5916\u521B\u5EFA\u4F5C\u7528\u57DF\u5B50\u9879\u7684\u53D8\u91CF\uFF09\n  2. \u521B\u5EFA\u53D8\u91CF\uFF0C\u5E76\u601D\u8003\uFF1A\n    - \u6309\u9700\u521B\u5EFA\u53D8\u91CF\uFF0C\u521B\u5EFA\u7684\u53D8\u91CF\u5FC5\u987B\u8981\u88AB\u4F7F\u7528\uFF0C\u5426\u5219\u7981\u6B62\u521B\u5EFA\uFF1B\n    - \u6240\u9700\u521B\u5EFA\u53D8\u91CF\u7684Schema\u548Cvalue\uFF0C\u505A\u5230\u6309\u9700\u521B\u5EFA\uFF0C\u521B\u5EFA\u7684key\u90FD\u80FD\u591Fconnect\u5230\u5177\u4F53\u7684UI\u7EC4\u4EF6\uFF1B\n    - \u53D8\u91CF\u9A71\u52A8UI\u662F\u5426\u9700\u8981\u53D6\u5185\u90E8\u5C5E\u6027\uFF1B\n    - \u5982\u679C\u53D6\u5185\u90E8\u5C5E\u6027\uFF0C\u5C5E\u6027\u662F\u5426\u90FD\u7528\u4E0A\u4E86\uFF0C\u4F8B\u5982\uFF1A\u7528\u6237\u4FE1\u606F\u53D8\u91CF\uFF08name\uFF0Cage\uFF0Cadd\uFF0C\u7B49\uFF09\uFF0C\u9700\u8981\u628A\u6240\u6709\u5C5E\u6027\u90FDconnect\u5230\u5177\u4F53\u7684UI\u7EC4\u4EF6\u3002\n    - \u4F9D\u8D56\u6570\u7EC4\u7C7B\u578B\u6570\u636E\u9A71\u52A8\u7684\u7EC4\u4EF6\uFF0C\u5982\u679C\u6709\u4F5C\u7528\u57DF\u63D2\u69FD\uFF0C\u9700\u8981\u601D\u8003\u662F\u5426\u8981\u5728\u4F5C\u7528\u57DF\u63D2\u69FD\u5185\u521B\u5EFA\u53D8\u91CF\u6765\u9A71\u52A8\u5B50\u7EC4\u4EF6\u3002\n  3. \u901A\u8FC7connect\u64CD\u4F5C\uFF0C\u5C06\u53D8\u91CF\u8FDE\u63A5\u5230UI\u7EC4\u4EF6\u7684\u8F93\u5165\uFF0C\u5E76\u601D\u8003\uFF1A\n    - \u8FDE\u63A5\u7684UI\u7EC4\u4EF6\u662F\u5426\u5B58\u5728\u4F5C\u7528\u57DF\u63D2\u69FD\u9694\u79BB\n    - \u9605\u8BFBUI\u7EC4\u4EF6\u6587\u6863\u7684<inputs>\uFF0C\u5224\u65AD\u8F93\u5165\u662F\u5426\u6EE1\u8DB3\u6570\u636E\u9A71\u52A8\u9700\u6C42\uFF0C\u5982\u679C\u6EE1\u8DB3\u4F7F\u7528\u5BF9\u5E94\u7684inputId\u503C\uFF0C\u4E0D\u6EE1\u8DB3\u7684\u7981\u6B62\u8FDE\u63A5\u3002\n  </\u6700\u4F73\u5B9E\u8DF5>\n</\u5982\u4F55\u642D\u5EFA\u521D\u59CB\u5316\u6570\u636E\u4EE5\u53CA\u4FEE\u6539>\n\n").concat(config.appendPrompt ? "<\u5BF9\u4E8E\u9879\u76EE\u73AF\u5883\u7684\u8BF4\u660E>\n".concat(config.appendPrompt, "\n</\u5BF9\u4E8E\u9879\u76EE\u73AF\u5883\u7684\u8BF4\u660E>") : '', "\n\n<\u751F\u6210UI\u601D\u8DEF>\n\u6309\u7167\u4EE5\u4E0B\u6B65\u9AA4\u5B8C\u6210\uFF1A\n  1\u3001\u603B\u4F53\u5206\u6790\uFF0C\u6309\u7167\u4EE5\u4E0B\u6B65\u9AA4\u8FDB\u884C\uFF1A\n    1\uFF09\u786E\u5B9A\u603B\u4F53\u7684\u529F\u80FD\uFF1B\n    2\uFF09\u4FDD\u6301\u603B\u4F53UI\u8BBE\u8BA1\u7B80\u6D01\u5927\u65B9\u3001\u7B26\u5408\u73B0\u4EE3\u5BA1\u7F8E\u3001\u5BCC\u6709\u8BBE\u8BA1\u611F\uFF0C\u91CD\u70B9\u6CE8\u610F\uFF1A\n       - \u5EFA\u7ACB\u6E05\u6670\u7684\u89C6\u89C9\u5C42\u6B21\uFF1A\u901A\u8FC7\u5B57\u4F53\u5927\u5C0F\u3001\u7C97\u7EC6\u3001\u989C\u8272\u3001\u95F4\u8DDD\u5EFA\u7ACB\u4FE1\u606F\u5C42\u7EA7\uFF1B\n       - \u4F7F\u7528\u73B0\u4EE3\u8BBE\u8BA1\u5143\u7D20\uFF1A\u6E10\u53D8\u80CC\u666F\u3001\u5706\u89D2\u5361\u7247\u3001\u8F7B\u5FAE\u9634\u5F71\u3001\u6BDB\u73BB\u7483\u6548\u679C\u7B49\uFF1B\n       - \u4FDD\u6301\u8BBE\u8BA1\u7EDF\u4E00\u6027\uFF1A\u7EDF\u4E00\u5706\u89D2\u503C\u3001\u95F4\u8DDD\u7CFB\u7EDF\u3001\u8272\u5F69\u65B9\u6848\u3001\u5B57\u4F53\u5C42\u7EA7\uFF1B\n       - \u8272\u5F69\u548C\u8C10\uFF1A\u4F7F\u7528\u534F\u8C03\u7684\u914D\u8272\u65B9\u6848\uFF0C\u786E\u4FDD\u5BF9\u6BD4\u5EA6\u548C\u53EF\u8BFB\u6027\uFF1B\n       - \u7EC6\u8282\u7CBE\u81F4\uFF1A\u6CE8\u610F\u5706\u89D2\u3001\u9634\u5F71\u3001\u8FB9\u6846\u7B49\u7EC6\u8282\uFF0C\u4F53\u73B0\u4E13\u4E1A\u611F\u548C\u73B0\u4EE3\u611F\uFF1B\n    3) \u5982\u679C\u9700\u8981\u8FD8\u539F\u9644\u4EF6\u56FE\u7247\u4E2D\u7684\u89C6\u89C9\u8BBE\u8BA1\u6548\u679C:\n      \u7279\u522B\u5173\u6CE8\u6574\u4F53\u7684\u5E03\u5C40\u3001\u5B9A\u4F4D\u3001\u989C\u8272\u3001\u5B57\u4F53\u989C\u8272\u3001\u80CC\u666F\u8272\u3001\u5C3A\u5BF8\u3001\u95F4\u8DDD\u3001\u8FB9\u6846\u3001\u5706\u89D2\u7B49UI\u4FE1\u606F\uFF0C\u6309\u7167\u4EE5\u4E0B\u7684\u6D41\u7A0B\u8FD8\u539F\u53C2\u8003\u56FE\u7247\uFF1A\n      - \u63D0\u53D6\u56FE\u7247\u4E2D\u7684\u5173\u952EUI\u4FE1\u606F\u5E76\u603B\u7ED3\uFF1B\n      - \u6839\u636E\u603B\u7ED3\u548C\u56FE\u7247\u5C06\u6240\u6709UI\u4FE1\u606F\u7EC6\u8282\u4F7F\u7528actions\u4E00\u6BD4\u4E00\u8FD8\u539F\u51FA\u6765\uFF0C\u6CE8\u610F\u9002\u914D\u753B\u5E03\u5C3A\u5BF8\uFF1B\n      - \u5FE0\u4E8E\u56FE\u7247/\u8BBE\u8BA1\u7A3F\u8FDB\u884C\u642D\u5EFA\uFF0C\u800C\u4E0D\u662F\u6587\u5B57\u6027\u7684\u603B\u7ED3\uFF0C\u6587\u5B57\u603B\u7ED3\u4F1A\u6709\u6B67\u4E49\uFF1B\n      - \u6CE8\u610F\u6BCF\u4E00\u4E2A\u5143\u7D20\u7684\u4EE5\u53CA\u90BB\u8FD1\u5143\u7D20\u7684\u4F4D\u7F6E\uFF0C\u4E0A\u4E0B\u5DE6\u53F3\u5143\u7D20\uFF0C\u4EE5\u53CA\u5B50\u7EC4\u4EF6\u7684\u5E03\u5C40\u65B9\u5F0F\uFF0C\u52A1\u5FC5\u4FDD\u8BC1\u4E0E\u8BBE\u8BA1\u7A3F\u5BF9\u9F50\uFF1B\n\n  2\u3001\u9009\u62E9\u5408\u9002\u7684\u7EC4\u4EF6\u4E0E\u63D2\u69FD\uFF0C\u7559\u610F\uFF08\u77E5\u8BC6\u5E93\u6709\u66F4\u65B0\uFF09\u7684\u63D0\u793A\uFF0C\u6CE8\u610F\u4F7F\u7528\u7684\u7EC4\u4EF6\u4E0D\u8981\u8D85\u51FA\u5F53\u524D\u3010\u77E5\u8BC6\u5E93\u3011\u7684\u8303\u56F4\uFF1A\n    1\uFF09\u6309\u7167\u81EA\u4E0A\u800C\u4E0B\u3001\u4ECE\u5DE6\u5411\u53F3\u7684\u65B9\u5F0F\u5206\u6790\u5F62\u6210\u7EC4\u4EF6\u65B9\u6848\u4EE5\u53CA\u91C7\u7528\u7684\u63D2\u69FD\uFF1B\n    2\uFF09\u9009\u7528\u5408\u7406\u7684\u5E03\u5C40\uFF1B\n  \n  3\u3001\u8BE6\u7EC6\u5206\u6790\u5404\u4E2A\u7EC4\u4EF6\uFF0C\u6309\u7167\u4EE5\u4E0B\u8981\u70B9\u5C55\u5F00\uFF1A\n    - \u6807\u9898(title):\u7EC4\u4EF6\u7684\u6807\u9898\uFF1B\n    - \u5E03\u5C40(layout):\u7EC4\u4EF6\u7684\u5BBD\u9AD8\u4E0E\u5916\u95F4\u8DDD\u4FE1\u606F\uFF0C\u53EA\u80FD\u58F0\u660Ewidth\u3001height\u3001margin\uFF0C\u4E0D\u5141\u8BB8\u4F7F\u7528padding\u7B49\u5C5E\u6027\uFF1B\n    - \u6837\u5F0F(styleAry):\u6839\u636E\u7EC4\u4EF6\u58F0\u660E\u7684css\u7ED9\u51FA\u5408\u7406\u7684\u8BBE\u8BA1\u5B9E\u73B0\uFF1B\n    - \u6570\u636E(data):\u6839\u636E\u3010\u77E5\u8BC6\u5E93\u3011\u4E2D\u8BE5\u7EC4\u4EF6\u7684data\u58F0\u660E\u8FDB\u884C\u5B9E\u73B0\uFF1B\n\n  4\u3001\u8FD4\u56DE\u642D\u5EFAUI\u7684actions\u64CD\u4F5C\u6B65\u9AA4\u6587\u4EF6\u5185\u5BB9\uFF0C\u6CE8\u610F\uFF1A\n    - \u6BCF\u4E00\u4E2Aaction\u7B26\u5408JSON\u89C4\u8303\uFF0C\u6BCF\u4E00\u884C\u4E3A\u4E00\u4E2Aaction\n    - \u7981\u6B62\u5305\u542B\u4EFB\u4F55\u6CE8\u91CA\uFF08\u5305\u62EC\u5355\u884C//\u548C\u591A\u884C/* */\uFF09\n    - \u7981\u6B62\u51FA\u73B0\u7701\u7565\u53F7(...)\u6216\u4EFB\u4F55\u5360\u4F4D\u7B26\n    - \u786E\u4FDD\u6240\u6709\u4EE3\u7801\u90FD\u662F\u5B8C\u6574\u53EF\u6267\u884C\u7684\uFF0C\u4E0D\u5305\u542B\u793A\u4F8B\u7247\u6BB5\n    - \u7981\u6B62\u4F7F\u7528\u975E\u6CD5\u5B57\u7B26\u6216\u7279\u6B8A\u7B26\u53F7\n    - \u6240\u6709\u5185\u5BB9\u5747\u4E3A\u9759\u6001\u6570\u636E\uFF0C\u7981\u6B62\u89E3\u6784\uFF0C\u7981\u6B62\u4F7F\u7528\u53D8\u91CF\n\n  5\u3001\u6700\u540E\uFF0C\u6839\u636E\u642D\u5EFAUI\u7684actions\u64CD\u4F5C\u6B65\u9AA4\u6587\u4EF6\u5185\u5BB9\uFF0C\u8FD4\u56DE\u642D\u5EFA\u521D\u59CB\u5316\u6570\u636E\u7684actions\u64CD\u4F5C\u6B65\u9AA4\u6587\u4EF6\u5185\u5BB9\uFF0C\u6CE8\u610F\uFF1A\xB7\n    - \u6BCF\u4E00\u4E2Aaction\u7B26\u5408JSON\u89C4\u8303\uFF0C\u6BCF\u4E00\u884C\u4E3A\u4E00\u4E2Aaction\n    - \u7981\u6B62\u5305\u542B\u4EFB\u4F55\u6CE8\u91CA\uFF08\u5305\u62EC\u5355\u884C//\u548C\u591A\u884C/* */\uFF09\n    - \u7981\u6B62\u51FA\u73B0\u7701\u7565\u53F7(...)\u6216\u4EFB\u4F55\u5360\u4F4D\u7B26\n    - \u786E\u4FDD\u6240\u6709\u4EE3\u7801\u90FD\u662F\u5B8C\u6574\u53EF\u6267\u884C\u7684\uFF0C\u4E0D\u5305\u542B\u793A\u4F8B\u7247\u6BB5\n    - \u7981\u6B62\u4F7F\u7528\u975E\u6CD5\u5B57\u7B26\u6216\u7279\u6B8A\u7B26\u53F7\n    - \u6240\u6709\u5185\u5BB9\u5747\u4E3A\u9759\u6001\u6570\u636E\uFF0C\u7981\u6B62\u89E3\u6784\uFF0C\u7981\u6B62\u4F7F\u7528\u53D8\u91CF\n</\u751F\u6210UI\u601D\u8DEF>\n\n<\u751F\u6210UI\u9650\u5236>\n\u751F\u6210UI\u5FC5\u987B\u4ECE\u6839\u7EC4\u4EF6_root_\u5F00\u59CB\u914D\u7F6E\uFF0C\u4EE5\u53CA\u4ECE\u63D2\u69FD_rootSlot_\u5F00\u59CB\u6DFB\u52A0\u7EC4\u4EF6\u3002\n</\u751F\u6210UI\u9650\u5236>\n\n").concat(config.fewShots ? "<examples>\n\n".concat(config.fewShots, "\n\n</examples>") : '');
+    },
+    stream(_ref) {
+      var {
+        files,
+        status,
+        replaceContent
+      } = _ref;
+      var actions = [];
+      var varActions = [];
+      var actionsFile = getFiles([files[0] || {}], {
+        extName: 'json'
+      });
+      var varActionsFile = getFiles([files[1] || {}], {
+        extName: 'json'
+      });
+      if (actionsFile) {
+        var _actionsFile$content;
+        actions = streamActionsParser((_actionsFile$content = actionsFile.content) !== null && _actionsFile$content !== void 0 ? _actionsFile$content : "", actionsFile === null || actionsFile === void 0 ? void 0 : actionsFile.isComplete);
+        if (!fileNameToContent[actionsFile.fileName]) {
+          fileNameToContent[actionsFile.fileName] = "";
+        }
+      }
+      if (varActionsFile) {
+        var _varActionsFile$conte;
+        varActions = streamVarActionsParser((_varActionsFile$conte = varActionsFile.content) !== null && _varActionsFile$conte !== void 0 ? _varActionsFile$conte : "");
+      }
+      actions = fixActions(actions, {
+        rootId,
+        pageId
+      });
+      if (status === 'start') {
+        config.onClearPage();
+      }
+      if (actions.length > 0 || varActions.length > 0 || status === 'start' || status === 'complete') {
+        var currentStatus = status === 'complete' ? "ing" : status;
+        var copiedActions = JSON.parse(JSON.stringify(actions));
+        try {
+          // config.onActions(actions, status)
+          actions.forEach(action => {
+            if (action.type === "addChild") {
+              var _action$params$config;
+              var childComId = action.params.comId;
+              // 对于addChild操作，每次添加时都生成新的UUID映射
+              action.params.comId = uiTree.comIdTransform.addComId(childComId);
+              uiTree.setNamespace(action.params.comId, action.params.namespace);
+              var parentComId = action.comId;
+              if (parentComId !== "_root_") {
+                // 获取父组件时，使用最近添加的comId
+                action.comId = uiTree.getComId(parentComId);
+              }
+              uiTree.addNode({
+                id: action.params.comId,
+                parent: {
+                  id: action.comId,
+                  slotId: action.target
+                }
+              });
+              if (action.params.comId && ((_action$params$config = action.params.configs) === null || _action$params$config === void 0 || (_action$params$config = _action$params$config[0]) === null || _action$params$config === void 0 ? void 0 : _action$params$config.path) === '常规/需求文档') {
+                var _config$onAddCodingBl;
+                config === null || config === void 0 || (_config$onAddCodingBl = config.onAddCodingBlock) === null || _config$onAddCodingBl === void 0 || _config$onAddCodingBl.call(config, {
+                  comId: action.params.comId,
+                  requirement: action.params.configs[0].value.replace(/# /, '')
+                });
+                // action.params.configs = [];
+              }
+            } else if (action.type === "doConfig") {
+              var comId = action.comId;
+              if (comId !== "_root_") {
+                // 获取组件时，使用最近添加的comId
+                action.comId = uiTree.getComId(comId);
+              }
+            }
+          });
+          actions.forEach(action => {
+            promiseStack.add(() => config.onActions([action], currentStatus));
+          });
+        } catch (error) {
+          console.error('generate-page onActions error', error);
+        }
+        var actionsContent = getComponentOperationSummary(copiedActions, config.componentIdToTitleMap);
+        if (actionsFile) {
+          if (!fileNameToContent[actionsFile.fileName]) {
+            fileNameToContent[actionsFile.fileName] = actionsContent.trim();
+          } else {
+            fileNameToContent[actionsFile.fileName] += "\n".concat(actionsContent.trim());
+          }
+        }
+        try {
+          varActions.forEach(action => {
+            if (action[0] === "createVar") {
+              var {
+                comId,
+                schema,
+                target,
+                title,
+                value
+              } = action[1];
+              var targetComId = target.comId === "_root_" ? null : uiTree.getComId(target.comId);
+              var varComId = uiTree.varIdTransform.getComId(comId);
+              uiTree.addNode({
+                id: varComId,
+                parent: {
+                  id: targetComId || "_root_",
+                  slotId: target.slotId
+                }
+              });
+              var newAction = {
+                type: "defineVar",
+                params: {
+                  comId: targetComId,
+                  slotId: target.slotId === "_rootSlot_" ? "_root_" : target.slotId,
+                  id: varComId,
+                  title,
+                  schema,
+                  initValue: value
+                }
+              };
+              promiseStack.add(() => {
+                console.log("[创建变量]", newAction);
+                return config.onActions([newAction], currentStatus);
+              });
+              if (target.inputId) {
+                // 创建插槽输入到变量的赋值
+                var varInstanceId = uuid();
+                var newActions = [
+                // 创建变量节点
+                {
+                  type: "createCom",
+                  params: {
+                    type: "var",
+                    varId: varComId,
+                    inputId: "set",
+                    instanceId: varInstanceId
+                  }
+                }, {
+                  type: "connectTo",
+                  params: {
+                    from: {
+                      type: "frame",
+                      comId: targetComId,
+                      frameId: target.slotId,
+                      outputId: target.inputId
+                    },
+                    to: {
+                      type: "com",
+                      inputId: "set",
+                      instanceId: varInstanceId
+                    }
+                  }
+                }];
+                promiseStack.add(() => {
+                  var _context$designer, _context$designer$get, _context$designer2, _context$designer2$up;
+                  var diagramId = (_context$designer = context.designer) === null || _context$designer === void 0 || (_context$designer$get = _context$designer.getDiagramInfo) === null || _context$designer$get === void 0 ? void 0 : _context$designer$get.call(_context$designer, targetComId, target.slotId).id;
+                  diagrams["".concat(targetComId, "_").concat(target.slotId)] = diagramId;
+                  return (_context$designer2 = context.designer) === null || _context$designer2 === void 0 || (_context$designer2$up = _context$designer2.updateDiagram) === null || _context$designer2$up === void 0 ? void 0 : _context$designer2$up.call(_context$designer2, diagramId, newActions, "start");
+                });
+              }
+            } else if (action[0] === "connect") {
+              var varParams = action[1];
+              var uiComParams = action[2];
+              var _varComId = uiTree.varIdTransform.getComId(varParams.comId);
+              var uiComId = uiTree.getComId(uiComParams.comId);
+              var scope = {
+                status: currentStatus
+              };
+              var uiScope = uiTree.getScope(uiComId);
+              var varScope = uiTree.getScope(_varComId);
+              var diagramKey = _varComId;
+              if (uiScope.id !== varScope.id || uiScope.slotId !== varScope.slotId) {
+                diagramKey = "".concat(uiScope.id, "_").concat(uiScope.slotId, "_").concat(_varComId);
+                if (!diagrams[diagramKey]) {
+                  diagrams[diagramKey] = "pending";
+                  var _newAction = {
+                    type: "defineListener",
+                    params: {
+                      comId: uiScope.id,
+                      slotId: uiScope.slotId,
+                      varId: _varComId
+                    }
+                  };
+                  promiseStack.add(() => config.onActions([_newAction], currentStatus));
+                  promiseStack.add(() => {
+                    var _context$designer3, _context$designer3$ge;
+                    diagrams[diagramKey] = (_context$designer3 = context.designer) === null || _context$designer3 === void 0 || (_context$designer3$ge = _context$designer3.getDiagramInfoByListenerInfo) === null || _context$designer3$ge === void 0 ? void 0 : _context$designer3$ge.call(_context$designer3, uiScope.id, uiScope.slotId, _varComId).id;
+                    scope.status = "start";
+                  });
+                }
+              } else {
+                if (!diagrams[diagramKey]) {
+                  promiseStack.add(() => {
+                    var _context$designer4, _context$designer4$ge;
+                    diagrams[diagramKey] = (_context$designer4 = context.designer) === null || _context$designer4 === void 0 || (_context$designer4$ge = _context$designer4.getDiagramInfoByVarId) === null || _context$designer4$ge === void 0 ? void 0 : _context$designer4$ge.call(_context$designer4, _varComId).id;
+                    scope.status = "start";
+                  });
+                }
+              }
+              var _varInstanceId = uuid();
+              var uiComInstanceId = uuid();
+              var _newActions = varParams.xpath ? [
+              // 创建变量节点
+              {
+                type: "createCom",
+                params: {
+                  type: "var",
+                  varId: _varComId,
+                  inputId: "get",
+                  instanceId: _varInstanceId,
+                  xpath: varParams.xpath
+                }
+              },
+              // 创建UI组件节点
+              {
+                type: "createCom",
+                params: {
+                  type: "uiCom",
+                  comId: uiComId,
+                  inputId: uiComParams.inputId,
+                  instanceId: uiComInstanceId
+                }
+              },
+              // 变量值变更到读变量
+              {
+                type: "connectTo",
+                params: {
+                  from: {
+                    type: "com",
+                    comId: _varComId,
+                    outputId: "changed"
+                  },
+                  to: {
+                    type: "com",
+                    inputId: "get",
+                    instanceId: _varInstanceId
+                  }
+                }
+              },
+              // 变量return值到ui组件的输入
+              {
+                type: "connectTo",
+                params: {
+                  from: {
+                    type: "com",
+                    instanceId: _varInstanceId,
+                    outputId: "return"
+                  },
+                  to: {
+                    type: "com",
+                    instanceId: uiComInstanceId,
+                    inputId: uiComParams.inputId
+                  }
+                }
+              }] : [
+              // 创建UI组件节点
+              {
+                type: "createCom",
+                params: {
+                  type: "uiCom",
+                  comId: uiComId,
+                  inputId: uiComParams.inputId,
+                  instanceId: uiComInstanceId
+                }
+              },
+              // 变量值变更到UI组件
+              {
+                type: "connectTo",
+                params: {
+                  from: {
+                    type: "com",
+                    comId: _varComId,
+                    outputId: "changed"
+                  },
+                  to: {
+                    type: "com",
+                    instanceId: uiComInstanceId,
+                    inputId: uiComParams.inputId
+                  }
+                }
+              }];
+              console.log("[连接ui组件]", _newActions);
+              promiseStack.add(() => {
+                var _context$designer5, _context$designer5$up;
+                return (_context$designer5 = context.designer) === null || _context$designer5 === void 0 || (_context$designer5$up = _context$designer5.updateDiagram) === null || _context$designer5$up === void 0 ? void 0 : _context$designer5$up.call(_context$designer5, diagrams[diagramKey], _newActions, scope.status);
+              });
+            }
+          });
+        } catch (error) {
+          console.error('generate-page onVarActions error', error);
+        }
+        if (status === "complete") {
+          promiseStack.add(() => {
+            config.onActions([], status);
+            Object.entries(diagrams).forEach(_ref2 => {
+              var _context$designer6, _context$designer6$up;
+              var [_, id] = _ref2;
+              (_context$designer6 = context.designer) === null || _context$designer6 === void 0 || (_context$designer6$up = _context$designer6.updateDiagram) === null || _context$designer6$up === void 0 || _context$designer6$up.call(_context$designer6, id, [], status);
+            });
+          });
+        }
+      }
+      return Object.entries(fileNameToContent).reduce((pre, _ref3) => {
+        var [fileName, content] = _ref3;
+        return pre.replace(fileName, content);
+      }, replaceContent);
+    },
+    execute(_ref4) {
+      var _actionsFile$content2;
+      var {
+        files,
+        content
+      } = _ref4;
+      var actions = [];
+      var actionsFile = getFiles(files, {
+        extName: 'json'
+      });
+      console.log("[files]", files);
+      console.log("[uiTree]", uiTree);
+      if (!actionsFile) {
+        return {
+          llmContent: content,
+          displayContent: content
+        };
+      }
+      actions = excuteActionsParser((_actionsFile$content2 = actionsFile.content) !== null && _actionsFile$content2 !== void 0 ? _actionsFile$content2 : "");
+      // let actions: any = [];
+      // const actionsFile = getFiles(files, {extName: 'json' })
+      // if (actionsFile) {
+      //   actions = actionsParser(actionsFile.content ?? "");
+      // }
+      // config.onActions(actions)
+
+      actions = fixActions(actions, {
+        rootId,
+        pageId
+      });
+      console.log('generate-page actions=', JSON.parse(JSON.stringify(actions)));
+      try {
+        var _actions;
+        var llmContent = stripFileBlocks(content);
+        var actionsContent = (_actions = actions) !== null && _actions !== void 0 && _actions.length ? getComponentOperationSummary(actions, config.componentIdToTitleMap) : "";
+        var summary = (llmContent ? "".concat(llmContent, "\n\n") : "") + (actionsContent ? "\u4FEE\u6539\u5185\u5BB9\u5982\u4E0B\n".concat(actionsContent) : "当前没有内容修改");
+        return {
+          llmContent: summary,
+          displayContent: summary
+        };
+        //       const summary = getComponentOperationSummary(actions, config.componentIdToTitleMap)
+
+        //       return {
+        //         llmContent: `根据需求，执行以下操作
+        // ${summary}`,
+        //         displayContent: `根据需求，执行以下操作
+        // ${summary}`
+        //       }
+      } catch (error) {}
+      return {
+        llmContent: '已执行所有操作',
+        displayContent: '已执行所有操作'
+      };
+    }
+  };
+}
+function fixActions(actions, _ref5) {
+  var {
+    rootId,
+    pageId
+  } = _ref5;
+  return (actions !== null && actions !== void 0 ? actions : []).map(action => {
+    if (action.comId === rootId && action.type === 'addChild' && action.target === '_rootSlot_') {
+      action.comId = '_root_';
+    }
+    if (action.comId === pageId) {
+      action.comId = '_root_';
+    }
+    return action;
+  });
+}
+
+/** 生成UI内容的简化参数（用于 MyBricksTools） */
+
+/** 生成UI内容的工具配置函数（用于 MyBricksTools） */
+function GenerateUiContent(params) {
+  return {
+    name: NAME,
+    params: {
+      fewShots: params === null || params === void 0 ? void 0 : params.fewShots
+    }
+  };
+}
+
+export { GenerateUiContent, generateUiContent as default };
+//# sourceMappingURL=generate-ui-content.js.map