@zzdadelu/schema-builder 1.0.0-alpha.6 → 1.0.0-alpha.60
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/es/createIframe.js +19 -1
- package/es/main.js +325 -32
- package/lib/createIframe.js +19 -1
- package/lib/main.js +324 -31
- package/package.json +1 -1
package/es/createIframe.js
CHANGED
|
@@ -1,12 +1,30 @@
|
|
|
1
1
|
var createIframeContent = function createIframeContent() {
|
|
2
|
-
var
|
|
2
|
+
var timestamp = Date.now();
|
|
3
|
+
var html = "\n <!DOCTYPE html>\n <html>\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\" />\n <meta http-equiv=\"Cache-Control\" content=\"no-cache, no-store, must-revalidate\">\n <meta http-equiv=\"Pragma\" content=\"no-cache\">\n <meta http-equiv=\"Expires\" content=\"0\">\n <title>XRender</title>\n <link rel=\"icon\" href=\"https://img.alicdn.com/tfs/TB17UtINiLaK1RjSZFxXXamPFXa-606-643.png\">\n <link href=\"https://alifd.alicdn.com/npm/@alifd/theme-lowcode-light@0.2.1/variables.css\" rel=\"stylesheet\" />\n <link href=\"https://alifd.alicdn.com/npm/@alifd/theme-lowcode-light@0.2.1/dist/next.var.min.css\" rel=\"stylesheet\" />\n <link rel=\"stylesheet\" href=\"https://uipaas-assets.com/prod/npm/@alilc/lowcode-engine/1.2.3/dist/css/engine-core.css\" />\n <link rel=\"stylesheet\" href=\"https://uipaas-assets.com/prod/npm/@alilc/lowcode-engine-ext/1.0.6/dist/css/engine-ext.css\" />\n <link rel=\"stylesheet\" href=\"https://g.alicdn.com/fone-lowcode/fr-generator/1.1.0/css/index.css\" />\n\n <!-- \u9632\u6B62 getFormRenderMaterial \u9519\u8BEF -->\n <script>\n // \u63D0\u524D\u5B9A\u4E49\u5B89\u5168\u51FD\u6570\n window.getFormRenderMaterial = function() {\n // \u5982\u679C\u5DF2\u7ECF\u6709\u771F\u5B9E\u51FD\u6570\uFF0C\u4F7F\u7528\u5B83\n if (window._realGetFormRenderMaterial) {\n return window._realGetFormRenderMaterial.apply(this, arguments);\n }\n \n console.warn('[XRender] getFormRenderMaterial called before ready');\n \n // \u7279\u6B8A\u5904\u7406 AliFormRenderMaterial \u8C03\u7528\n if (arguments[0] === 'AliFormRenderMaterial' && arguments[1] === '@ali/form-render-material') {\n console.warn('[XRender] Returning placeholder for AliFormRenderMaterial');\n return {};\n }\n \n // \u8FD4\u56DE Promise \u907F\u514D\u540C\u6B65\u9519\u8BEF\n return Promise.resolve({});\n };\n </script>\n\n <script>\n // \u5171\u4EABReact\n try {\n window.React = window.parent.React;\n window.ReactDOM = window.parent.ReactDOM;\n } catch(e) {\n console.error('[XRender] Error setting React from parent:', e);\n }\n </script>\n \n <!-- \u57FA\u7840\u5E93 -->\n <script src=\"https://g.alicdn.com/code/lib/prop-types/15.7.2/prop-types.js\"></script>\n <script src=\"https://g.alicdn.com/platform/c/react15-polyfill/0.0.1/dist/index.js\"></script>\n <script src=\"https://g.alicdn.com/platform/c/lodash/4.6.1/lodash.min.js\"></script>\n <script src=\"https://g.alicdn.com/mylib/moment/2.24.0/min/moment.min.js\"></script>\n <script src=\"https://g.alicdn.com/code/lib/alifd__next/1.23.24/next.min.js\"></script>\n <script crossorigin=\"anonymous\" src=\"https://uipaas-assets.com/prod/npm/@alilc/lowcode-engine/1.2.3/dist/js/engine-core.js\"></script>\n <script crossorigin=\"anonymous\" src=\"https://uipaas-assets.com/prod/npm/@alilc/lowcode-engine-ext/1.0.6/dist/js/engine-ext.js\"></script>\n\n <!-- \u5173\u952E\uFF1Afr-generator -->\n <script src=\"https://g.alicdn.com/fone-lowcode/fr-generator/1.1.0/js/index.js?nocache=".concat(timestamp, "\"></script>\n </head>\n\n <body>\n <div id=\"lce-container\"></div>\n \n <!-- \u52A0\u8F7D\u5B8C\u6210\u540E\u901A\u77E5\u7236\u7A97\u53E3 -->\n <script>\n (function() {\n let notified = false;\n \n function notifyParent() {\n if (notified) return;\n \n const checks = {\n React: typeof window.React !== 'undefined',\n ReactDOM: typeof window.ReactDOM !== 'undefined',\n getFormRenderMaterial: typeof window.getFormRenderMaterial === 'function',\n __FR_ENGINE__: typeof window.__FR_ENGINE__ !== 'undefined',\n engineCore: typeof window.AliLowCodeEngine !== 'undefined'\n };\n \n console.log('[XRender] Checks:', checks);\n \n // \u6240\u6709\u68C0\u67E5\u90FD\u901A\u8FC7\u624D\u901A\u77E5\n if (checks.__FR_ENGINE__) {\n notified = true;\n try {\n window.parent.postMessage({\n type: 'engine-load',\n ready: true,\n timestamp: Date.now(),\n checks: checks\n }, '*');\n } catch(e) {\n console.error('[XRender] Failed to post message:', e);\n }\n }\n }\n \n // \u5B9A\u671F\u68C0\u67E5\n const checkInterval = setInterval(() => {\n notifyParent();\n \n // \u5982\u679C\u5DF2\u7ECF\u901A\u77E5\uFF0C\u6E05\u9664\u5B9A\u65F6\u5668\n if (notified) {\n clearInterval(checkInterval);\n }\n }, 500);\n \n // 10\u79D2\u540E\u8D85\u65F6\n setTimeout(() => {\n clearInterval(checkInterval);\n if (!notified) {\n console.error('[XRender] Timeout waiting for resources');\n try {\n window.parent.postMessage({\n type: 'engine-load',\n ready: false,\n timestamp: Date.now()\n }, '*');\n } catch(e) {\n console.error('[XRender] Failed to post timeout message:', e);\n }\n }\n }, 10000);\n \n // \u76D1\u542C\u7A97\u53E3\u52A0\u8F7D\u5B8C\u6210\n window.addEventListener('load', function() {\n console.log('[XRender] Window loaded');\n setTimeout(notifyParent, 1000);\n });\n })();\n </script>\n </body>\n </html>\n ");
|
|
3
4
|
return html;
|
|
4
5
|
};
|
|
5
6
|
export default (function () {
|
|
6
7
|
var iframe = document.createElement('iframe');
|
|
8
|
+
|
|
9
|
+
// 设置iframe属性
|
|
7
10
|
iframe.width = '100%';
|
|
8
11
|
iframe.height = '100%';
|
|
9
12
|
iframe.frameBorder = '0';
|
|
13
|
+
iframe.style.border = 'none';
|
|
14
|
+
iframe.style.display = 'block';
|
|
15
|
+
|
|
16
|
+
// 添加sandbox属性但允许必要权限
|
|
17
|
+
iframe.setAttribute('sandbox', 'allow-same-origin allow-scripts allow-popups allow-forms');
|
|
18
|
+
|
|
19
|
+
// 使用srcdoc
|
|
10
20
|
iframe.srcdoc = createIframeContent();
|
|
21
|
+
|
|
22
|
+
// 添加加载事件监听
|
|
23
|
+
iframe.addEventListener('load', function () {
|
|
24
|
+
console.log('[createIframe] Iframe loaded successfully');
|
|
25
|
+
});
|
|
26
|
+
iframe.addEventListener('error', function (error) {
|
|
27
|
+
console.error('[createIframe] Iframe error:', error);
|
|
28
|
+
});
|
|
11
29
|
return iframe;
|
|
12
30
|
});
|
package/es/main.js
CHANGED
|
@@ -5,62 +5,355 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
|
|
|
5
5
|
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
|
|
6
6
|
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
|
|
7
7
|
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
8
|
+
function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
|
|
9
|
+
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
10
|
+
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
|
|
11
|
+
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
|
|
12
|
+
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
|
|
13
|
+
function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
|
|
8
14
|
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
|
|
9
15
|
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
|
|
10
|
-
import React, { useEffect, useRef, useImperativeHandle, forwardRef } from 'react';
|
|
16
|
+
import React, { useEffect, useRef, useImperativeHandle, forwardRef, useState, useCallback } from 'react';
|
|
11
17
|
import createIframe from './createIframe';
|
|
12
18
|
import * as defaultSetting from './settings';
|
|
13
|
-
|
|
19
|
+
// 使用模块变量存储iframe实例，但每个组件实例应该有自己独立的iframe
|
|
14
20
|
var Design = function Design(props, ref) {
|
|
15
21
|
var widgets = props.widgets,
|
|
16
22
|
settings = props.settings,
|
|
17
23
|
restProps = _objectWithoutProperties(props, _excluded);
|
|
18
|
-
var containerRef = useRef();
|
|
24
|
+
var containerRef = useRef(null);
|
|
25
|
+
var iframeRef = useRef(null);
|
|
26
|
+
var messageHandlerRef = useRef(null);
|
|
27
|
+
var _useState = useState(true),
|
|
28
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
29
|
+
loading = _useState2[0],
|
|
30
|
+
setLoading = _useState2[1];
|
|
31
|
+
var _useState3 = useState(null),
|
|
32
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
33
|
+
loadError = _useState4[0],
|
|
34
|
+
setLoadError = _useState4[1];
|
|
35
|
+
var _useState5 = useState(0),
|
|
36
|
+
_useState6 = _slicedToArray(_useState5, 2),
|
|
37
|
+
retryCount = _useState6[0],
|
|
38
|
+
setRetryCount = _useState6[1];
|
|
39
|
+
var MAX_RETRIES = 3;
|
|
40
|
+
|
|
41
|
+
// 暴露给父组件的方法
|
|
19
42
|
useImperativeHandle(ref, function () {
|
|
20
43
|
return {
|
|
21
44
|
getValue: function getValue() {
|
|
22
|
-
var
|
|
23
|
-
|
|
24
|
-
return (_iframe2 = iframe) === null || _iframe2 === void 0 ? void 0 : (_iframe2$contentWindo = _iframe2.contentWindow) === null || _iframe2$contentWindo === void 0 ? void 0 : (_iframe2$contentWindo2 = _iframe2$contentWindo.__FR_ENGINE__) === null || _iframe2$contentWindo2 === void 0 ? void 0 : (_iframe2$contentWindo3 = _iframe2$contentWindo2.exportSchema) === null || _iframe2$contentWindo3 === void 0 ? void 0 : _iframe2$contentWindo3.call(_iframe2$contentWindo2);
|
|
45
|
+
var _iframeRef$current, _iframeRef$current$co, _iframeRef$current$co2, _iframeRef$current$co3;
|
|
46
|
+
return (_iframeRef$current = iframeRef.current) === null || _iframeRef$current === void 0 ? void 0 : (_iframeRef$current$co = _iframeRef$current.contentWindow) === null || _iframeRef$current$co === void 0 ? void 0 : (_iframeRef$current$co2 = _iframeRef$current$co.__FR_ENGINE__) === null || _iframeRef$current$co2 === void 0 ? void 0 : (_iframeRef$current$co3 = _iframeRef$current$co2.exportSchema) === null || _iframeRef$current$co3 === void 0 ? void 0 : _iframeRef$current$co3.call(_iframeRef$current$co2);
|
|
25
47
|
},
|
|
26
48
|
setValue: function setValue(schema) {
|
|
27
|
-
var
|
|
28
|
-
return (
|
|
49
|
+
var _iframeRef$current2, _iframeRef$current2$c, _iframeRef$current2$c2, _iframeRef$current2$c3;
|
|
50
|
+
return (_iframeRef$current2 = iframeRef.current) === null || _iframeRef$current2 === void 0 ? void 0 : (_iframeRef$current2$c = _iframeRef$current2.contentWindow) === null || _iframeRef$current2$c === void 0 ? void 0 : (_iframeRef$current2$c2 = _iframeRef$current2$c.__FR_ENGINE__) === null || _iframeRef$current2$c2 === void 0 ? void 0 : (_iframeRef$current2$c3 = _iframeRef$current2$c2.importSchema) === null || _iframeRef$current2$c3 === void 0 ? void 0 : _iframeRef$current2$c3.call(_iframeRef$current2$c2, schema);
|
|
51
|
+
},
|
|
52
|
+
reload: function reload() {
|
|
53
|
+
cleanup();
|
|
54
|
+
setRetryCount(0);
|
|
55
|
+
setLoadError(null);
|
|
56
|
+
setLoading(true);
|
|
57
|
+
setTimeout(initIframe, 100); // 延迟一点确保状态已更新
|
|
58
|
+
},
|
|
59
|
+
getStatus: function getStatus() {
|
|
60
|
+
return {
|
|
61
|
+
loading: loading,
|
|
62
|
+
error: loadError,
|
|
63
|
+
iframeReady: !!iframeRef.current,
|
|
64
|
+
retryCount: retryCount
|
|
65
|
+
};
|
|
29
66
|
}
|
|
30
67
|
};
|
|
31
68
|
});
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
69
|
+
|
|
70
|
+
// 清理函数
|
|
71
|
+
var cleanup = useCallback(function () {
|
|
72
|
+
// 移除消息监听器
|
|
73
|
+
if (messageHandlerRef.current) {
|
|
74
|
+
window.removeEventListener('message', messageHandlerRef.current);
|
|
75
|
+
messageHandlerRef.current = null;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
// 移除iframe
|
|
79
|
+
if (iframeRef.current && containerRef.current) {
|
|
80
|
+
try {
|
|
81
|
+
if (containerRef.current.contains(iframeRef.current)) {
|
|
82
|
+
containerRef.current.removeChild(iframeRef.current);
|
|
83
|
+
}
|
|
84
|
+
} catch (error) {
|
|
85
|
+
console.warn('[SchemaBuilder] Error removing iframe:', error);
|
|
86
|
+
}
|
|
87
|
+
iframeRef.current = null;
|
|
88
|
+
}
|
|
38
89
|
}, []);
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
90
|
+
|
|
91
|
+
// 初始化iframe
|
|
92
|
+
var initIframe = useCallback(function () {
|
|
93
|
+
console.log('[SchemaBuilder] Initializing iframe...');
|
|
94
|
+
|
|
95
|
+
// 确保容器存在
|
|
96
|
+
if (!containerRef.current) {
|
|
97
|
+
console.error('[SchemaBuilder] Container ref is null, waiting...');
|
|
98
|
+
setTimeout(initIframe, 100);
|
|
99
|
+
return;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
// 清理旧的iframe
|
|
103
|
+
cleanup();
|
|
104
|
+
|
|
105
|
+
// 创建新的iframe
|
|
106
|
+
try {
|
|
107
|
+
var iframe = createIframe();
|
|
108
|
+
iframeRef.current = iframe;
|
|
109
|
+
|
|
110
|
+
// 确保容器可见且已挂载
|
|
111
|
+
if (containerRef.current && containerRef.current.parentNode) {
|
|
112
|
+
containerRef.current.appendChild(iframe);
|
|
113
|
+
console.log('[SchemaBuilder] Iframe appended successfully');
|
|
114
|
+
|
|
115
|
+
// 设置消息监听器
|
|
116
|
+
messageHandlerRef.current = handleMessage;
|
|
117
|
+
window.addEventListener('message', messageHandlerRef.current);
|
|
118
|
+
|
|
119
|
+
// 设置超时检查
|
|
120
|
+
setTimeout(function () {
|
|
121
|
+
if (loading && iframeRef.current) {
|
|
122
|
+
console.warn('[SchemaBuilder] Iframe load timeout');
|
|
123
|
+
handleLoadTimeout();
|
|
124
|
+
}
|
|
125
|
+
}, 15000);
|
|
126
|
+
} else {
|
|
127
|
+
console.error('[SchemaBuilder] Container not mounted in DOM');
|
|
128
|
+
handleLoadError('容器未正确挂载到DOM');
|
|
129
|
+
}
|
|
130
|
+
} catch (error) {
|
|
131
|
+
console.error('[SchemaBuilder] Error creating iframe:', error);
|
|
132
|
+
handleLoadError('创建表单设计器失败');
|
|
133
|
+
}
|
|
134
|
+
}, [cleanup, loading]);
|
|
135
|
+
|
|
136
|
+
// 处理加载超时
|
|
137
|
+
var handleLoadTimeout = useCallback(function () {
|
|
138
|
+
console.warn('[SchemaBuilder] Iframe load timeout');
|
|
139
|
+
if (retryCount < MAX_RETRIES) {
|
|
140
|
+
var newRetryCount = retryCount + 1;
|
|
141
|
+
setRetryCount(newRetryCount);
|
|
142
|
+
setLoadError("\u52A0\u8F7D\u8D85\u65F6\uFF0C\u6B63\u5728\u91CD\u8BD5... (".concat(newRetryCount, "/").concat(MAX_RETRIES, ")"));
|
|
143
|
+
setTimeout(function () {
|
|
144
|
+
cleanup();
|
|
145
|
+
initIframe();
|
|
146
|
+
}, 1000);
|
|
147
|
+
} else {
|
|
148
|
+
setLoadError('表单设计器加载超时，请刷新页面重试');
|
|
149
|
+
setLoading(false);
|
|
150
|
+
}
|
|
151
|
+
}, [retryCount, cleanup, initIframe]);
|
|
152
|
+
|
|
153
|
+
// 处理加载错误
|
|
154
|
+
var handleLoadError = useCallback(function (message) {
|
|
155
|
+
console.error('[SchemaBuilder] Load error:', message);
|
|
156
|
+
if (retryCount < MAX_RETRIES) {
|
|
157
|
+
var newRetryCount = retryCount + 1;
|
|
158
|
+
setRetryCount(newRetryCount);
|
|
159
|
+
setLoadError("".concat(message, "\uFF0C\u6B63\u5728\u91CD\u8BD5... (").concat(newRetryCount, "/").concat(MAX_RETRIES, ")"));
|
|
160
|
+
setTimeout(function () {
|
|
161
|
+
cleanup();
|
|
162
|
+
initIframe();
|
|
163
|
+
}, 1000);
|
|
164
|
+
} else {
|
|
165
|
+
setLoadError("".concat(message, "\uFF0C\u8BF7\u5237\u65B0\u9875\u9762\u91CD\u8BD5"));
|
|
166
|
+
setLoading(false);
|
|
167
|
+
}
|
|
168
|
+
}, [retryCount, cleanup, initIframe]);
|
|
169
|
+
|
|
170
|
+
// 消息处理器
|
|
171
|
+
var handleMessage = useCallback(function (event) {
|
|
172
|
+
// 检查消息是否来自我们的iframe
|
|
173
|
+
if (!iframeRef.current || event.source !== iframeRef.current.contentWindow) {
|
|
174
|
+
return;
|
|
175
|
+
}
|
|
176
|
+
console.log('[SchemaBuilder] Received message:', event.data.type);
|
|
177
|
+
switch (event.data.type) {
|
|
178
|
+
case 'engine-load':
|
|
179
|
+
if (event.data.ready) {
|
|
180
|
+
console.log('[SchemaBuilder] Engine loaded, checks:', event.data.checks);
|
|
181
|
+
|
|
182
|
+
// 等待一小段时间确保所有资源就绪
|
|
183
|
+
setTimeout(function () {
|
|
184
|
+
var _iframeRef$current3, _iframeRef$current3$c;
|
|
185
|
+
if ((_iframeRef$current3 = iframeRef.current) === null || _iframeRef$current3 === void 0 ? void 0 : (_iframeRef$current3$c = _iframeRef$current3.contentWindow) === null || _iframeRef$current3$c === void 0 ? void 0 : _iframeRef$current3$c.__FR_ENGINE__) {
|
|
186
|
+
initializeEngine();
|
|
187
|
+
} else {
|
|
188
|
+
console.warn('[SchemaBuilder] __FR_ENGINE__ not found, retrying check...');
|
|
189
|
+
// 再等一会重试
|
|
190
|
+
setTimeout(function () {
|
|
191
|
+
var _iframeRef$current4, _iframeRef$current4$c;
|
|
192
|
+
if ((_iframeRef$current4 = iframeRef.current) === null || _iframeRef$current4 === void 0 ? void 0 : (_iframeRef$current4$c = _iframeRef$current4.contentWindow) === null || _iframeRef$current4$c === void 0 ? void 0 : _iframeRef$current4$c.__FR_ENGINE__) {
|
|
193
|
+
initializeEngine();
|
|
194
|
+
} else {
|
|
195
|
+
handleLoadError('表单引擎加载失败');
|
|
196
|
+
}
|
|
197
|
+
}, 1000);
|
|
198
|
+
}
|
|
199
|
+
}, 500);
|
|
200
|
+
} else {
|
|
201
|
+
handleLoadError('引擎未就绪');
|
|
202
|
+
}
|
|
203
|
+
break;
|
|
204
|
+
default:
|
|
205
|
+
// 忽略其他消息
|
|
206
|
+
break;
|
|
207
|
+
}
|
|
208
|
+
}, [handleLoadError]);
|
|
209
|
+
|
|
210
|
+
// 初始化引擎
|
|
211
|
+
var initializeEngine = useCallback(function () {
|
|
212
|
+
console.log('[SchemaBuilder] Initializing engine...');
|
|
213
|
+
if (!iframeRef.current || !iframeRef.current.contentWindow) {
|
|
214
|
+
console.error('[SchemaBuilder] Iframe not ready for engine initialization');
|
|
215
|
+
handleLoadError('iframe未就绪');
|
|
47
216
|
return;
|
|
48
217
|
}
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
218
|
+
var iframeWindow = iframeRef.current.contentWindow;
|
|
219
|
+
|
|
220
|
+
// 再次检查关键对象
|
|
221
|
+
if (!iframeWindow.__FR_ENGINE__) {
|
|
222
|
+
console.error('[SchemaBuilder] __FR_ENGINE__ not found in iframe window');
|
|
223
|
+
handleLoadError('表单引擎未找到');
|
|
224
|
+
return;
|
|
225
|
+
}
|
|
226
|
+
try {
|
|
227
|
+
iframeWindow.__FR_ENGINE__.init(_objectSpread({
|
|
228
|
+
settings: _objectSpread(_objectSpread({}, defaultSetting), settings),
|
|
229
|
+
widgets: widgets,
|
|
230
|
+
logo: {
|
|
231
|
+
title: 'XRender'
|
|
232
|
+
}
|
|
233
|
+
}, restProps));
|
|
234
|
+
console.log('[SchemaBuilder] Engine initialized successfully');
|
|
235
|
+
setLoading(false);
|
|
236
|
+
setLoadError(null);
|
|
237
|
+
|
|
238
|
+
// 如果有 onMount 回调，调用它
|
|
239
|
+
if (props.onMount) {
|
|
240
|
+
props.onMount();
|
|
55
241
|
}
|
|
56
|
-
}
|
|
57
|
-
|
|
242
|
+
} catch (error) {
|
|
243
|
+
console.error('[SchemaBuilder] Error initializing engine:', error);
|
|
244
|
+
handleLoadError('引擎初始化失败');
|
|
245
|
+
}
|
|
246
|
+
}, [settings, widgets, restProps, props.onMount, handleLoadError]);
|
|
247
|
+
|
|
248
|
+
// 组件挂载时初始化
|
|
249
|
+
useEffect(function () {
|
|
250
|
+
// 延迟初始化，确保容器已渲染
|
|
251
|
+
var timer = setTimeout(function () {
|
|
252
|
+
initIframe();
|
|
253
|
+
}, 100);
|
|
254
|
+
|
|
255
|
+
// 清理函数
|
|
256
|
+
return function () {
|
|
257
|
+
clearTimeout(timer);
|
|
258
|
+
cleanup();
|
|
259
|
+
};
|
|
260
|
+
}, [initIframe, cleanup]);
|
|
261
|
+
|
|
262
|
+
// 处理手动重试
|
|
263
|
+
var handleManualRetry = useCallback(function () {
|
|
264
|
+
setRetryCount(0);
|
|
265
|
+
setLoadError(null);
|
|
266
|
+
setLoading(true);
|
|
267
|
+
cleanup();
|
|
268
|
+
setTimeout(initIframe, 100);
|
|
269
|
+
}, [cleanup, initIframe]);
|
|
58
270
|
return /*#__PURE__*/React.createElement("div", {
|
|
271
|
+
style: {
|
|
272
|
+
width: '100%',
|
|
273
|
+
height: '100%',
|
|
274
|
+
position: 'relative'
|
|
275
|
+
}
|
|
276
|
+
}, loading && /*#__PURE__*/React.createElement("div", {
|
|
277
|
+
style: {
|
|
278
|
+
position: 'absolute',
|
|
279
|
+
top: 0,
|
|
280
|
+
left: 0,
|
|
281
|
+
right: 0,
|
|
282
|
+
bottom: 0,
|
|
283
|
+
display: 'flex',
|
|
284
|
+
flexDirection: 'column',
|
|
285
|
+
alignItems: 'center',
|
|
286
|
+
justifyContent: 'center',
|
|
287
|
+
backgroundColor: 'rgba(255, 255, 255, 0.95)',
|
|
288
|
+
zIndex: 10,
|
|
289
|
+
padding: '20px',
|
|
290
|
+
boxSizing: 'border-box'
|
|
291
|
+
}
|
|
292
|
+
}, loadError ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
|
|
293
|
+
style: {
|
|
294
|
+
color: '#f5222d',
|
|
295
|
+
marginBottom: 16,
|
|
296
|
+
textAlign: 'center',
|
|
297
|
+
fontSize: '14px'
|
|
298
|
+
}
|
|
299
|
+
}, loadError), /*#__PURE__*/React.createElement("button", {
|
|
300
|
+
onClick: handleManualRetry,
|
|
301
|
+
style: {
|
|
302
|
+
padding: '8px 16px',
|
|
303
|
+
backgroundColor: '#1890ff',
|
|
304
|
+
color: 'white',
|
|
305
|
+
border: 'none',
|
|
306
|
+
borderRadius: '4px',
|
|
307
|
+
cursor: 'pointer',
|
|
308
|
+
fontSize: '14px'
|
|
309
|
+
}
|
|
310
|
+
}, "\u91CD\u65B0\u52A0\u8F7D"), /*#__PURE__*/React.createElement("button", {
|
|
311
|
+
onClick: function onClick() {
|
|
312
|
+
return window.location.reload();
|
|
313
|
+
},
|
|
314
|
+
style: {
|
|
315
|
+
padding: '8px 16px',
|
|
316
|
+
backgroundColor: 'transparent',
|
|
317
|
+
color: '#1890ff',
|
|
318
|
+
border: '1px solid #1890ff',
|
|
319
|
+
borderRadius: '4px',
|
|
320
|
+
cursor: 'pointer',
|
|
321
|
+
marginTop: '8px',
|
|
322
|
+
fontSize: '14px'
|
|
323
|
+
}
|
|
324
|
+
}, "\u5237\u65B0\u9875\u9762")) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
|
|
325
|
+
style: {
|
|
326
|
+
marginBottom: '8px'
|
|
327
|
+
}
|
|
328
|
+
}, "\u6B63\u5728\u52A0\u8F7D\u8868\u5355\u8BBE\u8BA1\u5668..."), /*#__PURE__*/React.createElement("div", {
|
|
329
|
+
style: {
|
|
330
|
+
fontSize: 12,
|
|
331
|
+
color: '#666',
|
|
332
|
+
marginBottom: 16
|
|
333
|
+
}
|
|
334
|
+
}, "\u8FD9\u53EF\u80FD\u9700\u8981\u51E0\u79D2\u949F\u65F6\u95F4 ", retryCount > 0 && "(\u91CD\u8BD5 ".concat(retryCount, "/").concat(MAX_RETRIES, ")")), /*#__PURE__*/React.createElement("div", {
|
|
335
|
+
style: {
|
|
336
|
+
width: '200px',
|
|
337
|
+
height: '4px',
|
|
338
|
+
backgroundColor: '#f0f0f0',
|
|
339
|
+
borderRadius: '2px'
|
|
340
|
+
}
|
|
341
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
342
|
+
style: {
|
|
343
|
+
width: '60%',
|
|
344
|
+
height: '100%',
|
|
345
|
+
backgroundColor: '#1890ff',
|
|
346
|
+
borderRadius: '2px',
|
|
347
|
+
animation: 'loading 1.5s ease-in-out infinite'
|
|
348
|
+
}
|
|
349
|
+
})))), /*#__PURE__*/React.createElement("div", {
|
|
59
350
|
ref: containerRef,
|
|
60
351
|
style: {
|
|
61
352
|
width: '100%',
|
|
62
|
-
height: '100%'
|
|
353
|
+
height: '100%',
|
|
354
|
+
minHeight: '500px',
|
|
355
|
+
position: 'relative'
|
|
63
356
|
}
|
|
64
|
-
});
|
|
357
|
+
}), /*#__PURE__*/React.createElement("style", null, "\n @keyframes loading {\n 0% { transform: translateX(-100%); }\n 50% { transform: translateX(100%); }\n 100% { transform: translateX(100%); }\n }\n "));
|
|
65
358
|
};
|
|
66
359
|
export default /*#__PURE__*/forwardRef(Design);
|
package/lib/createIframe.js
CHANGED
|
@@ -5,14 +5,32 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
7
|
var createIframeContent = function createIframeContent() {
|
|
8
|
-
var
|
|
8
|
+
var timestamp = Date.now();
|
|
9
|
+
var html = "\n <!DOCTYPE html>\n <html>\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\" />\n <meta http-equiv=\"Cache-Control\" content=\"no-cache, no-store, must-revalidate\">\n <meta http-equiv=\"Pragma\" content=\"no-cache\">\n <meta http-equiv=\"Expires\" content=\"0\">\n <title>XRender</title>\n <link rel=\"icon\" href=\"https://img.alicdn.com/tfs/TB17UtINiLaK1RjSZFxXXamPFXa-606-643.png\">\n <link href=\"https://alifd.alicdn.com/npm/@alifd/theme-lowcode-light@0.2.1/variables.css\" rel=\"stylesheet\" />\n <link href=\"https://alifd.alicdn.com/npm/@alifd/theme-lowcode-light@0.2.1/dist/next.var.min.css\" rel=\"stylesheet\" />\n <link rel=\"stylesheet\" href=\"https://uipaas-assets.com/prod/npm/@alilc/lowcode-engine/1.2.3/dist/css/engine-core.css\" />\n <link rel=\"stylesheet\" href=\"https://uipaas-assets.com/prod/npm/@alilc/lowcode-engine-ext/1.0.6/dist/css/engine-ext.css\" />\n <link rel=\"stylesheet\" href=\"https://g.alicdn.com/fone-lowcode/fr-generator/1.1.0/css/index.css\" />\n\n <!-- \u9632\u6B62 getFormRenderMaterial \u9519\u8BEF -->\n <script>\n // \u63D0\u524D\u5B9A\u4E49\u5B89\u5168\u51FD\u6570\n window.getFormRenderMaterial = function() {\n // \u5982\u679C\u5DF2\u7ECF\u6709\u771F\u5B9E\u51FD\u6570\uFF0C\u4F7F\u7528\u5B83\n if (window._realGetFormRenderMaterial) {\n return window._realGetFormRenderMaterial.apply(this, arguments);\n }\n \n console.warn('[XRender] getFormRenderMaterial called before ready');\n \n // \u7279\u6B8A\u5904\u7406 AliFormRenderMaterial \u8C03\u7528\n if (arguments[0] === 'AliFormRenderMaterial' && arguments[1] === '@ali/form-render-material') {\n console.warn('[XRender] Returning placeholder for AliFormRenderMaterial');\n return {};\n }\n \n // \u8FD4\u56DE Promise \u907F\u514D\u540C\u6B65\u9519\u8BEF\n return Promise.resolve({});\n };\n </script>\n\n <script>\n // \u5171\u4EABReact\n try {\n window.React = window.parent.React;\n window.ReactDOM = window.parent.ReactDOM;\n } catch(e) {\n console.error('[XRender] Error setting React from parent:', e);\n }\n </script>\n \n <!-- \u57FA\u7840\u5E93 -->\n <script src=\"https://g.alicdn.com/code/lib/prop-types/15.7.2/prop-types.js\"></script>\n <script src=\"https://g.alicdn.com/platform/c/react15-polyfill/0.0.1/dist/index.js\"></script>\n <script src=\"https://g.alicdn.com/platform/c/lodash/4.6.1/lodash.min.js\"></script>\n <script src=\"https://g.alicdn.com/mylib/moment/2.24.0/min/moment.min.js\"></script>\n <script src=\"https://g.alicdn.com/code/lib/alifd__next/1.23.24/next.min.js\"></script>\n <script crossorigin=\"anonymous\" src=\"https://uipaas-assets.com/prod/npm/@alilc/lowcode-engine/1.2.3/dist/js/engine-core.js\"></script>\n <script crossorigin=\"anonymous\" src=\"https://uipaas-assets.com/prod/npm/@alilc/lowcode-engine-ext/1.0.6/dist/js/engine-ext.js\"></script>\n\n <!-- \u5173\u952E\uFF1Afr-generator -->\n <script src=\"https://g.alicdn.com/fone-lowcode/fr-generator/1.1.0/js/index.js?nocache=".concat(timestamp, "\"></script>\n </head>\n\n <body>\n <div id=\"lce-container\"></div>\n \n <!-- \u52A0\u8F7D\u5B8C\u6210\u540E\u901A\u77E5\u7236\u7A97\u53E3 -->\n <script>\n (function() {\n let notified = false;\n \n function notifyParent() {\n if (notified) return;\n \n const checks = {\n React: typeof window.React !== 'undefined',\n ReactDOM: typeof window.ReactDOM !== 'undefined',\n getFormRenderMaterial: typeof window.getFormRenderMaterial === 'function',\n __FR_ENGINE__: typeof window.__FR_ENGINE__ !== 'undefined',\n engineCore: typeof window.AliLowCodeEngine !== 'undefined'\n };\n \n console.log('[XRender] Checks:', checks);\n \n // \u6240\u6709\u68C0\u67E5\u90FD\u901A\u8FC7\u624D\u901A\u77E5\n if (checks.__FR_ENGINE__) {\n notified = true;\n try {\n window.parent.postMessage({\n type: 'engine-load',\n ready: true,\n timestamp: Date.now(),\n checks: checks\n }, '*');\n } catch(e) {\n console.error('[XRender] Failed to post message:', e);\n }\n }\n }\n \n // \u5B9A\u671F\u68C0\u67E5\n const checkInterval = setInterval(() => {\n notifyParent();\n \n // \u5982\u679C\u5DF2\u7ECF\u901A\u77E5\uFF0C\u6E05\u9664\u5B9A\u65F6\u5668\n if (notified) {\n clearInterval(checkInterval);\n }\n }, 500);\n \n // 10\u79D2\u540E\u8D85\u65F6\n setTimeout(() => {\n clearInterval(checkInterval);\n if (!notified) {\n console.error('[XRender] Timeout waiting for resources');\n try {\n window.parent.postMessage({\n type: 'engine-load',\n ready: false,\n timestamp: Date.now()\n }, '*');\n } catch(e) {\n console.error('[XRender] Failed to post timeout message:', e);\n }\n }\n }, 10000);\n \n // \u76D1\u542C\u7A97\u53E3\u52A0\u8F7D\u5B8C\u6210\n window.addEventListener('load', function() {\n console.log('[XRender] Window loaded');\n setTimeout(notifyParent, 1000);\n });\n })();\n </script>\n </body>\n </html>\n ");
|
|
9
10
|
return html;
|
|
10
11
|
};
|
|
11
12
|
var _default = exports.default = function _default() {
|
|
12
13
|
var iframe = document.createElement('iframe');
|
|
14
|
+
|
|
15
|
+
// 设置iframe属性
|
|
13
16
|
iframe.width = '100%';
|
|
14
17
|
iframe.height = '100%';
|
|
15
18
|
iframe.frameBorder = '0';
|
|
19
|
+
iframe.style.border = 'none';
|
|
20
|
+
iframe.style.display = 'block';
|
|
21
|
+
|
|
22
|
+
// 添加sandbox属性但允许必要权限
|
|
23
|
+
iframe.setAttribute('sandbox', 'allow-same-origin allow-scripts allow-popups allow-forms');
|
|
24
|
+
|
|
25
|
+
// 使用srcdoc
|
|
16
26
|
iframe.srcdoc = createIframeContent();
|
|
27
|
+
|
|
28
|
+
// 添加加载事件监听
|
|
29
|
+
iframe.addEventListener('load', function () {
|
|
30
|
+
console.log('[createIframe] Iframe loaded successfully');
|
|
31
|
+
});
|
|
32
|
+
iframe.addEventListener('error', function (error) {
|
|
33
|
+
console.error('[createIframe] Iframe error:', error);
|
|
34
|
+
});
|
|
17
35
|
return iframe;
|
|
18
36
|
};
|
package/lib/main.js
CHANGED
|
@@ -16,59 +16,352 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
|
|
|
16
16
|
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
|
|
17
17
|
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
|
|
18
18
|
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
19
|
+
function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
|
|
20
|
+
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
21
|
+
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
|
|
22
|
+
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
|
|
23
|
+
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
|
|
24
|
+
function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
|
|
19
25
|
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
|
|
20
26
|
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
|
|
21
|
-
|
|
27
|
+
// 使用模块变量存储iframe实例，但每个组件实例应该有自己独立的iframe
|
|
22
28
|
var Design = function Design(props, ref) {
|
|
23
29
|
var widgets = props.widgets,
|
|
24
30
|
settings = props.settings,
|
|
25
31
|
restProps = _objectWithoutProperties(props, _excluded);
|
|
26
|
-
var containerRef = (0, _react.useRef)();
|
|
32
|
+
var containerRef = (0, _react.useRef)(null);
|
|
33
|
+
var iframeRef = (0, _react.useRef)(null);
|
|
34
|
+
var messageHandlerRef = (0, _react.useRef)(null);
|
|
35
|
+
var _useState = (0, _react.useState)(true),
|
|
36
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
37
|
+
loading = _useState2[0],
|
|
38
|
+
setLoading = _useState2[1];
|
|
39
|
+
var _useState3 = (0, _react.useState)(null),
|
|
40
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
41
|
+
loadError = _useState4[0],
|
|
42
|
+
setLoadError = _useState4[1];
|
|
43
|
+
var _useState5 = (0, _react.useState)(0),
|
|
44
|
+
_useState6 = _slicedToArray(_useState5, 2),
|
|
45
|
+
retryCount = _useState6[0],
|
|
46
|
+
setRetryCount = _useState6[1];
|
|
47
|
+
var MAX_RETRIES = 3;
|
|
48
|
+
|
|
49
|
+
// 暴露给父组件的方法
|
|
27
50
|
(0, _react.useImperativeHandle)(ref, function () {
|
|
28
51
|
return {
|
|
29
52
|
getValue: function getValue() {
|
|
30
|
-
var
|
|
31
|
-
|
|
32
|
-
return (_iframe2 = iframe) === null || _iframe2 === void 0 ? void 0 : (_iframe2$contentWindo = _iframe2.contentWindow) === null || _iframe2$contentWindo === void 0 ? void 0 : (_iframe2$contentWindo2 = _iframe2$contentWindo.__FR_ENGINE__) === null || _iframe2$contentWindo2 === void 0 ? void 0 : (_iframe2$contentWindo3 = _iframe2$contentWindo2.exportSchema) === null || _iframe2$contentWindo3 === void 0 ? void 0 : _iframe2$contentWindo3.call(_iframe2$contentWindo2);
|
|
53
|
+
var _iframeRef$current, _iframeRef$current$co, _iframeRef$current$co2, _iframeRef$current$co3;
|
|
54
|
+
return (_iframeRef$current = iframeRef.current) === null || _iframeRef$current === void 0 ? void 0 : (_iframeRef$current$co = _iframeRef$current.contentWindow) === null || _iframeRef$current$co === void 0 ? void 0 : (_iframeRef$current$co2 = _iframeRef$current$co.__FR_ENGINE__) === null || _iframeRef$current$co2 === void 0 ? void 0 : (_iframeRef$current$co3 = _iframeRef$current$co2.exportSchema) === null || _iframeRef$current$co3 === void 0 ? void 0 : _iframeRef$current$co3.call(_iframeRef$current$co2);
|
|
33
55
|
},
|
|
34
56
|
setValue: function setValue(schema) {
|
|
35
|
-
var
|
|
36
|
-
return (
|
|
57
|
+
var _iframeRef$current2, _iframeRef$current2$c, _iframeRef$current2$c2, _iframeRef$current2$c3;
|
|
58
|
+
return (_iframeRef$current2 = iframeRef.current) === null || _iframeRef$current2 === void 0 ? void 0 : (_iframeRef$current2$c = _iframeRef$current2.contentWindow) === null || _iframeRef$current2$c === void 0 ? void 0 : (_iframeRef$current2$c2 = _iframeRef$current2$c.__FR_ENGINE__) === null || _iframeRef$current2$c2 === void 0 ? void 0 : (_iframeRef$current2$c3 = _iframeRef$current2$c2.importSchema) === null || _iframeRef$current2$c3 === void 0 ? void 0 : _iframeRef$current2$c3.call(_iframeRef$current2$c2, schema);
|
|
59
|
+
},
|
|
60
|
+
reload: function reload() {
|
|
61
|
+
cleanup();
|
|
62
|
+
setRetryCount(0);
|
|
63
|
+
setLoadError(null);
|
|
64
|
+
setLoading(true);
|
|
65
|
+
setTimeout(initIframe, 100); // 延迟一点确保状态已更新
|
|
66
|
+
},
|
|
67
|
+
getStatus: function getStatus() {
|
|
68
|
+
return {
|
|
69
|
+
loading: loading,
|
|
70
|
+
error: loadError,
|
|
71
|
+
iframeReady: !!iframeRef.current,
|
|
72
|
+
retryCount: retryCount
|
|
73
|
+
};
|
|
37
74
|
}
|
|
38
75
|
};
|
|
39
76
|
});
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
77
|
+
|
|
78
|
+
// 清理函数
|
|
79
|
+
var cleanup = (0, _react.useCallback)(function () {
|
|
80
|
+
// 移除消息监听器
|
|
81
|
+
if (messageHandlerRef.current) {
|
|
82
|
+
window.removeEventListener('message', messageHandlerRef.current);
|
|
83
|
+
messageHandlerRef.current = null;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
// 移除iframe
|
|
87
|
+
if (iframeRef.current && containerRef.current) {
|
|
88
|
+
try {
|
|
89
|
+
if (containerRef.current.contains(iframeRef.current)) {
|
|
90
|
+
containerRef.current.removeChild(iframeRef.current);
|
|
91
|
+
}
|
|
92
|
+
} catch (error) {
|
|
93
|
+
console.warn('[SchemaBuilder] Error removing iframe:', error);
|
|
94
|
+
}
|
|
95
|
+
iframeRef.current = null;
|
|
96
|
+
}
|
|
46
97
|
}, []);
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
98
|
+
|
|
99
|
+
// 初始化iframe
|
|
100
|
+
var initIframe = (0, _react.useCallback)(function () {
|
|
101
|
+
console.log('[SchemaBuilder] Initializing iframe...');
|
|
102
|
+
|
|
103
|
+
// 确保容器存在
|
|
104
|
+
if (!containerRef.current) {
|
|
105
|
+
console.error('[SchemaBuilder] Container ref is null, waiting...');
|
|
106
|
+
setTimeout(initIframe, 100);
|
|
55
107
|
return;
|
|
56
108
|
}
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
109
|
+
|
|
110
|
+
// 清理旧的iframe
|
|
111
|
+
cleanup();
|
|
112
|
+
|
|
113
|
+
// 创建新的iframe
|
|
114
|
+
try {
|
|
115
|
+
var iframe = (0, _createIframe.default)();
|
|
116
|
+
iframeRef.current = iframe;
|
|
117
|
+
|
|
118
|
+
// 确保容器可见且已挂载
|
|
119
|
+
if (containerRef.current && containerRef.current.parentNode) {
|
|
120
|
+
containerRef.current.appendChild(iframe);
|
|
121
|
+
console.log('[SchemaBuilder] Iframe appended successfully');
|
|
122
|
+
|
|
123
|
+
// 设置消息监听器
|
|
124
|
+
messageHandlerRef.current = handleMessage;
|
|
125
|
+
window.addEventListener('message', messageHandlerRef.current);
|
|
126
|
+
|
|
127
|
+
// 设置超时检查
|
|
128
|
+
setTimeout(function () {
|
|
129
|
+
if (loading && iframeRef.current) {
|
|
130
|
+
console.warn('[SchemaBuilder] Iframe load timeout');
|
|
131
|
+
handleLoadTimeout();
|
|
132
|
+
}
|
|
133
|
+
}, 15000);
|
|
134
|
+
} else {
|
|
135
|
+
console.error('[SchemaBuilder] Container not mounted in DOM');
|
|
136
|
+
handleLoadError('容器未正确挂载到DOM');
|
|
63
137
|
}
|
|
64
|
-
}
|
|
65
|
-
|
|
138
|
+
} catch (error) {
|
|
139
|
+
console.error('[SchemaBuilder] Error creating iframe:', error);
|
|
140
|
+
handleLoadError('创建表单设计器失败');
|
|
141
|
+
}
|
|
142
|
+
}, [cleanup, loading]);
|
|
143
|
+
|
|
144
|
+
// 处理加载超时
|
|
145
|
+
var handleLoadTimeout = (0, _react.useCallback)(function () {
|
|
146
|
+
console.warn('[SchemaBuilder] Iframe load timeout');
|
|
147
|
+
if (retryCount < MAX_RETRIES) {
|
|
148
|
+
var newRetryCount = retryCount + 1;
|
|
149
|
+
setRetryCount(newRetryCount);
|
|
150
|
+
setLoadError("\u52A0\u8F7D\u8D85\u65F6\uFF0C\u6B63\u5728\u91CD\u8BD5... (".concat(newRetryCount, "/").concat(MAX_RETRIES, ")"));
|
|
151
|
+
setTimeout(function () {
|
|
152
|
+
cleanup();
|
|
153
|
+
initIframe();
|
|
154
|
+
}, 1000);
|
|
155
|
+
} else {
|
|
156
|
+
setLoadError('表单设计器加载超时，请刷新页面重试');
|
|
157
|
+
setLoading(false);
|
|
158
|
+
}
|
|
159
|
+
}, [retryCount, cleanup, initIframe]);
|
|
160
|
+
|
|
161
|
+
// 处理加载错误
|
|
162
|
+
var handleLoadError = (0, _react.useCallback)(function (message) {
|
|
163
|
+
console.error('[SchemaBuilder] Load error:', message);
|
|
164
|
+
if (retryCount < MAX_RETRIES) {
|
|
165
|
+
var newRetryCount = retryCount + 1;
|
|
166
|
+
setRetryCount(newRetryCount);
|
|
167
|
+
setLoadError("".concat(message, "\uFF0C\u6B63\u5728\u91CD\u8BD5... (").concat(newRetryCount, "/").concat(MAX_RETRIES, ")"));
|
|
168
|
+
setTimeout(function () {
|
|
169
|
+
cleanup();
|
|
170
|
+
initIframe();
|
|
171
|
+
}, 1000);
|
|
172
|
+
} else {
|
|
173
|
+
setLoadError("".concat(message, "\uFF0C\u8BF7\u5237\u65B0\u9875\u9762\u91CD\u8BD5"));
|
|
174
|
+
setLoading(false);
|
|
175
|
+
}
|
|
176
|
+
}, [retryCount, cleanup, initIframe]);
|
|
177
|
+
|
|
178
|
+
// 消息处理器
|
|
179
|
+
var handleMessage = (0, _react.useCallback)(function (event) {
|
|
180
|
+
// 检查消息是否来自我们的iframe
|
|
181
|
+
if (!iframeRef.current || event.source !== iframeRef.current.contentWindow) {
|
|
182
|
+
return;
|
|
183
|
+
}
|
|
184
|
+
console.log('[SchemaBuilder] Received message:', event.data.type);
|
|
185
|
+
switch (event.data.type) {
|
|
186
|
+
case 'engine-load':
|
|
187
|
+
if (event.data.ready) {
|
|
188
|
+
console.log('[SchemaBuilder] Engine loaded, checks:', event.data.checks);
|
|
189
|
+
|
|
190
|
+
// 等待一小段时间确保所有资源就绪
|
|
191
|
+
setTimeout(function () {
|
|
192
|
+
var _iframeRef$current3, _iframeRef$current3$c;
|
|
193
|
+
if ((_iframeRef$current3 = iframeRef.current) === null || _iframeRef$current3 === void 0 ? void 0 : (_iframeRef$current3$c = _iframeRef$current3.contentWindow) === null || _iframeRef$current3$c === void 0 ? void 0 : _iframeRef$current3$c.__FR_ENGINE__) {
|
|
194
|
+
initializeEngine();
|
|
195
|
+
} else {
|
|
196
|
+
console.warn('[SchemaBuilder] __FR_ENGINE__ not found, retrying check...');
|
|
197
|
+
// 再等一会重试
|
|
198
|
+
setTimeout(function () {
|
|
199
|
+
var _iframeRef$current4, _iframeRef$current4$c;
|
|
200
|
+
if ((_iframeRef$current4 = iframeRef.current) === null || _iframeRef$current4 === void 0 ? void 0 : (_iframeRef$current4$c = _iframeRef$current4.contentWindow) === null || _iframeRef$current4$c === void 0 ? void 0 : _iframeRef$current4$c.__FR_ENGINE__) {
|
|
201
|
+
initializeEngine();
|
|
202
|
+
} else {
|
|
203
|
+
handleLoadError('表单引擎加载失败');
|
|
204
|
+
}
|
|
205
|
+
}, 1000);
|
|
206
|
+
}
|
|
207
|
+
}, 500);
|
|
208
|
+
} else {
|
|
209
|
+
handleLoadError('引擎未就绪');
|
|
210
|
+
}
|
|
211
|
+
break;
|
|
212
|
+
default:
|
|
213
|
+
// 忽略其他消息
|
|
214
|
+
break;
|
|
215
|
+
}
|
|
216
|
+
}, [handleLoadError]);
|
|
217
|
+
|
|
218
|
+
// 初始化引擎
|
|
219
|
+
var initializeEngine = (0, _react.useCallback)(function () {
|
|
220
|
+
console.log('[SchemaBuilder] Initializing engine...');
|
|
221
|
+
if (!iframeRef.current || !iframeRef.current.contentWindow) {
|
|
222
|
+
console.error('[SchemaBuilder] Iframe not ready for engine initialization');
|
|
223
|
+
handleLoadError('iframe未就绪');
|
|
224
|
+
return;
|
|
225
|
+
}
|
|
226
|
+
var iframeWindow = iframeRef.current.contentWindow;
|
|
227
|
+
|
|
228
|
+
// 再次检查关键对象
|
|
229
|
+
if (!iframeWindow.__FR_ENGINE__) {
|
|
230
|
+
console.error('[SchemaBuilder] __FR_ENGINE__ not found in iframe window');
|
|
231
|
+
handleLoadError('表单引擎未找到');
|
|
232
|
+
return;
|
|
233
|
+
}
|
|
234
|
+
try {
|
|
235
|
+
iframeWindow.__FR_ENGINE__.init(_objectSpread({
|
|
236
|
+
settings: _objectSpread(_objectSpread({}, defaultSetting), settings),
|
|
237
|
+
widgets: widgets,
|
|
238
|
+
logo: {
|
|
239
|
+
title: 'XRender'
|
|
240
|
+
}
|
|
241
|
+
}, restProps));
|
|
242
|
+
console.log('[SchemaBuilder] Engine initialized successfully');
|
|
243
|
+
setLoading(false);
|
|
244
|
+
setLoadError(null);
|
|
245
|
+
|
|
246
|
+
// 如果有 onMount 回调，调用它
|
|
247
|
+
if (props.onMount) {
|
|
248
|
+
props.onMount();
|
|
249
|
+
}
|
|
250
|
+
} catch (error) {
|
|
251
|
+
console.error('[SchemaBuilder] Error initializing engine:', error);
|
|
252
|
+
handleLoadError('引擎初始化失败');
|
|
253
|
+
}
|
|
254
|
+
}, [settings, widgets, restProps, props.onMount, handleLoadError]);
|
|
255
|
+
|
|
256
|
+
// 组件挂载时初始化
|
|
257
|
+
(0, _react.useEffect)(function () {
|
|
258
|
+
// 延迟初始化，确保容器已渲染
|
|
259
|
+
var timer = setTimeout(function () {
|
|
260
|
+
initIframe();
|
|
261
|
+
}, 100);
|
|
262
|
+
|
|
263
|
+
// 清理函数
|
|
264
|
+
return function () {
|
|
265
|
+
clearTimeout(timer);
|
|
266
|
+
cleanup();
|
|
267
|
+
};
|
|
268
|
+
}, [initIframe, cleanup]);
|
|
269
|
+
|
|
270
|
+
// 处理手动重试
|
|
271
|
+
var handleManualRetry = (0, _react.useCallback)(function () {
|
|
272
|
+
setRetryCount(0);
|
|
273
|
+
setLoadError(null);
|
|
274
|
+
setLoading(true);
|
|
275
|
+
cleanup();
|
|
276
|
+
setTimeout(initIframe, 100);
|
|
277
|
+
}, [cleanup, initIframe]);
|
|
66
278
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
279
|
+
style: {
|
|
280
|
+
width: '100%',
|
|
281
|
+
height: '100%',
|
|
282
|
+
position: 'relative'
|
|
283
|
+
}
|
|
284
|
+
}, loading && /*#__PURE__*/_react.default.createElement("div", {
|
|
285
|
+
style: {
|
|
286
|
+
position: 'absolute',
|
|
287
|
+
top: 0,
|
|
288
|
+
left: 0,
|
|
289
|
+
right: 0,
|
|
290
|
+
bottom: 0,
|
|
291
|
+
display: 'flex',
|
|
292
|
+
flexDirection: 'column',
|
|
293
|
+
alignItems: 'center',
|
|
294
|
+
justifyContent: 'center',
|
|
295
|
+
backgroundColor: 'rgba(255, 255, 255, 0.95)',
|
|
296
|
+
zIndex: 10,
|
|
297
|
+
padding: '20px',
|
|
298
|
+
boxSizing: 'border-box'
|
|
299
|
+
}
|
|
300
|
+
}, loadError ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
|
|
301
|
+
style: {
|
|
302
|
+
color: '#f5222d',
|
|
303
|
+
marginBottom: 16,
|
|
304
|
+
textAlign: 'center',
|
|
305
|
+
fontSize: '14px'
|
|
306
|
+
}
|
|
307
|
+
}, loadError), /*#__PURE__*/_react.default.createElement("button", {
|
|
308
|
+
onClick: handleManualRetry,
|
|
309
|
+
style: {
|
|
310
|
+
padding: '8px 16px',
|
|
311
|
+
backgroundColor: '#1890ff',
|
|
312
|
+
color: 'white',
|
|
313
|
+
border: 'none',
|
|
314
|
+
borderRadius: '4px',
|
|
315
|
+
cursor: 'pointer',
|
|
316
|
+
fontSize: '14px'
|
|
317
|
+
}
|
|
318
|
+
}, "\u91CD\u65B0\u52A0\u8F7D"), /*#__PURE__*/_react.default.createElement("button", {
|
|
319
|
+
onClick: function onClick() {
|
|
320
|
+
return window.location.reload();
|
|
321
|
+
},
|
|
322
|
+
style: {
|
|
323
|
+
padding: '8px 16px',
|
|
324
|
+
backgroundColor: 'transparent',
|
|
325
|
+
color: '#1890ff',
|
|
326
|
+
border: '1px solid #1890ff',
|
|
327
|
+
borderRadius: '4px',
|
|
328
|
+
cursor: 'pointer',
|
|
329
|
+
marginTop: '8px',
|
|
330
|
+
fontSize: '14px'
|
|
331
|
+
}
|
|
332
|
+
}, "\u5237\u65B0\u9875\u9762")) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
|
|
333
|
+
style: {
|
|
334
|
+
marginBottom: '8px'
|
|
335
|
+
}
|
|
336
|
+
}, "\u6B63\u5728\u52A0\u8F7D\u8868\u5355\u8BBE\u8BA1\u5668..."), /*#__PURE__*/_react.default.createElement("div", {
|
|
337
|
+
style: {
|
|
338
|
+
fontSize: 12,
|
|
339
|
+
color: '#666',
|
|
340
|
+
marginBottom: 16
|
|
341
|
+
}
|
|
342
|
+
}, "\u8FD9\u53EF\u80FD\u9700\u8981\u51E0\u79D2\u949F\u65F6\u95F4 ", retryCount > 0 && "(\u91CD\u8BD5 ".concat(retryCount, "/").concat(MAX_RETRIES, ")")), /*#__PURE__*/_react.default.createElement("div", {
|
|
343
|
+
style: {
|
|
344
|
+
width: '200px',
|
|
345
|
+
height: '4px',
|
|
346
|
+
backgroundColor: '#f0f0f0',
|
|
347
|
+
borderRadius: '2px'
|
|
348
|
+
}
|
|
349
|
+
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
350
|
+
style: {
|
|
351
|
+
width: '60%',
|
|
352
|
+
height: '100%',
|
|
353
|
+
backgroundColor: '#1890ff',
|
|
354
|
+
borderRadius: '2px',
|
|
355
|
+
animation: 'loading 1.5s ease-in-out infinite'
|
|
356
|
+
}
|
|
357
|
+
})))), /*#__PURE__*/_react.default.createElement("div", {
|
|
67
358
|
ref: containerRef,
|
|
68
359
|
style: {
|
|
69
360
|
width: '100%',
|
|
70
|
-
height: '100%'
|
|
361
|
+
height: '100%',
|
|
362
|
+
minHeight: '500px',
|
|
363
|
+
position: 'relative'
|
|
71
364
|
}
|
|
72
|
-
});
|
|
365
|
+
}), /*#__PURE__*/_react.default.createElement("style", null, "\n @keyframes loading {\n 0% { transform: translateX(-100%); }\n 50% { transform: translateX(100%); }\n 100% { transform: translateX(100%); }\n }\n "));
|
|
73
366
|
};
|
|
74
367
|
var _default = exports.default = /*#__PURE__*/(0, _react.forwardRef)(Design);
|