@zzdadelu/schema-builder 1.0.0-alpha.58 → 1.0.0-alpha.59
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/main.js +182 -78
- package/lib/main.js +182 -78
- package/package.json +1 -1
package/es/main.js
CHANGED
|
@@ -16,136 +16,219 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
|
|
|
16
16
|
import React, { useEffect, useRef, useImperativeHandle, forwardRef, useState } from 'react';
|
|
17
17
|
import createIframe from './createIframe';
|
|
18
18
|
import * as defaultSetting from './settings';
|
|
19
|
-
var
|
|
19
|
+
var iframeInstance = null;
|
|
20
20
|
var retryCount = 0;
|
|
21
21
|
var MAX_RETRIES = 3;
|
|
22
22
|
var Design = function Design(props, ref) {
|
|
23
23
|
var widgets = props.widgets,
|
|
24
24
|
settings = props.settings,
|
|
25
25
|
restProps = _objectWithoutProperties(props, _excluded);
|
|
26
|
-
var containerRef = useRef();
|
|
26
|
+
var containerRef = useRef(null);
|
|
27
27
|
var _useState = useState(true),
|
|
28
28
|
_useState2 = _slicedToArray(_useState, 2),
|
|
29
29
|
loading = _useState2[0],
|
|
30
30
|
setLoading = _useState2[1];
|
|
31
|
+
var _useState3 = useState(null),
|
|
32
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
33
|
+
loadError = _useState4[0],
|
|
34
|
+
setLoadError = _useState4[1];
|
|
31
35
|
useImperativeHandle(ref, function () {
|
|
32
36
|
return {
|
|
33
37
|
getValue: function getValue() {
|
|
34
|
-
var
|
|
35
|
-
return (
|
|
38
|
+
var _iframeInstance, _iframeInstance$conte, _iframeInstance$conte2, _iframeInstance$conte3;
|
|
39
|
+
return (_iframeInstance = iframeInstance) === null || _iframeInstance === void 0 ? void 0 : (_iframeInstance$conte = _iframeInstance.contentWindow) === null || _iframeInstance$conte === void 0 ? void 0 : (_iframeInstance$conte2 = _iframeInstance$conte.__FR_ENGINE__) === null || _iframeInstance$conte2 === void 0 ? void 0 : (_iframeInstance$conte3 = _iframeInstance$conte2.exportSchema) === null || _iframeInstance$conte3 === void 0 ? void 0 : _iframeInstance$conte3.call(_iframeInstance$conte2);
|
|
36
40
|
},
|
|
37
41
|
setValue: function setValue(schema) {
|
|
38
|
-
var
|
|
39
|
-
return (
|
|
42
|
+
var _iframeInstance2, _iframeInstance2$cont, _iframeInstance2$cont2, _iframeInstance2$cont3;
|
|
43
|
+
return (_iframeInstance2 = iframeInstance) === null || _iframeInstance2 === void 0 ? void 0 : (_iframeInstance2$cont = _iframeInstance2.contentWindow) === null || _iframeInstance2$cont === void 0 ? void 0 : (_iframeInstance2$cont2 = _iframeInstance2$cont.__FR_ENGINE__) === null || _iframeInstance2$cont2 === void 0 ? void 0 : (_iframeInstance2$cont3 = _iframeInstance2$cont2.importSchema) === null || _iframeInstance2$cont3 === void 0 ? void 0 : _iframeInstance2$cont3.call(_iframeInstance2$cont2, schema);
|
|
40
44
|
},
|
|
41
45
|
reload: function reload() {
|
|
42
|
-
if (containerRef.current &&
|
|
43
|
-
|
|
44
|
-
|
|
46
|
+
if (containerRef.current && iframeInstance) {
|
|
47
|
+
try {
|
|
48
|
+
containerRef.current.removeChild(iframeInstance);
|
|
49
|
+
} catch (e) {
|
|
50
|
+
// 忽略错误
|
|
51
|
+
}
|
|
52
|
+
iframeInstance = null;
|
|
45
53
|
retryCount = 0;
|
|
46
|
-
|
|
54
|
+
setLoadError(null);
|
|
55
|
+
setLoading(true);
|
|
56
|
+
_initIframe();
|
|
47
57
|
}
|
|
58
|
+
},
|
|
59
|
+
getStatus: function getStatus() {
|
|
60
|
+
return {
|
|
61
|
+
loading: loading,
|
|
62
|
+
error: loadError,
|
|
63
|
+
iframeReady: !!iframeInstance,
|
|
64
|
+
retryCount: retryCount
|
|
65
|
+
};
|
|
48
66
|
}
|
|
49
67
|
};
|
|
50
68
|
});
|
|
51
69
|
useEffect(function () {
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
70
|
+
_initIframe();
|
|
71
|
+
|
|
72
|
+
// 清理函数
|
|
55
73
|
return function () {
|
|
56
|
-
|
|
57
|
-
if (iframe && containerRef.current) {
|
|
74
|
+
if (iframeInstance && containerRef.current) {
|
|
58
75
|
try {
|
|
59
|
-
containerRef.current.removeChild(
|
|
60
|
-
} catch (e) {
|
|
61
|
-
|
|
76
|
+
containerRef.current.removeChild(iframeInstance);
|
|
77
|
+
} catch (e) {
|
|
78
|
+
// 忽略错误
|
|
79
|
+
}
|
|
80
|
+
iframeInstance = null;
|
|
62
81
|
}
|
|
63
82
|
};
|
|
64
83
|
}, []);
|
|
65
|
-
var
|
|
66
|
-
console.log('[SchemaBuilder] Initializing iframe
|
|
84
|
+
var _initIframe = function initIframe() {
|
|
85
|
+
console.log('[SchemaBuilder] Initializing iframe...');
|
|
86
|
+
if (!containerRef.current) {
|
|
87
|
+
console.error('[SchemaBuilder] Container ref is null');
|
|
88
|
+
setTimeout(function () {
|
|
89
|
+
return _initIframe();
|
|
90
|
+
}, 100);
|
|
91
|
+
return;
|
|
92
|
+
}
|
|
67
93
|
|
|
68
94
|
// 清理旧的 iframe
|
|
69
|
-
if (containerRef.current
|
|
95
|
+
if (iframeInstance && containerRef.current.contains(iframeInstance)) {
|
|
70
96
|
try {
|
|
71
|
-
containerRef.current.removeChild(
|
|
72
|
-
} catch (e) {
|
|
73
|
-
|
|
97
|
+
containerRef.current.removeChild(iframeInstance);
|
|
98
|
+
} catch (e) {
|
|
99
|
+
console.warn('[SchemaBuilder] Error removing old iframe:', e);
|
|
100
|
+
}
|
|
74
101
|
}
|
|
75
102
|
|
|
76
103
|
// 创建新的 iframe
|
|
77
|
-
|
|
104
|
+
iframeInstance = createIframe();
|
|
78
105
|
|
|
79
|
-
//
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
console.
|
|
106
|
+
// 添加 iframe 到容器
|
|
107
|
+
try {
|
|
108
|
+
containerRef.current.appendChild(iframeInstance);
|
|
109
|
+
console.log('[SchemaBuilder] Iframe appended to container');
|
|
110
|
+
} catch (error) {
|
|
111
|
+
console.error('[SchemaBuilder] Error appending iframe:', error);
|
|
112
|
+
setLoadError('无法创建表单设计器');
|
|
85
113
|
setLoading(false);
|
|
86
|
-
|
|
87
|
-
|
|
114
|
+
return;
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
// 设置消息监听
|
|
118
|
+
var messageHandler = handleMessage;
|
|
119
|
+
window.addEventListener('message', messageHandler);
|
|
88
120
|
|
|
89
|
-
//
|
|
90
|
-
setTimeout(function () {
|
|
91
|
-
|
|
92
|
-
|
|
121
|
+
// 设置超时检查
|
|
122
|
+
var timeoutId = setTimeout(function () {
|
|
123
|
+
console.warn('[SchemaBuilder] Iframe initialization timeout');
|
|
124
|
+
if (loading) {
|
|
93
125
|
retryIframe();
|
|
94
126
|
}
|
|
95
|
-
},
|
|
127
|
+
}, 15000);
|
|
128
|
+
|
|
129
|
+
// 清理函数
|
|
130
|
+
return function () {
|
|
131
|
+
window.removeEventListener('message', messageHandler);
|
|
132
|
+
clearTimeout(timeoutId);
|
|
133
|
+
};
|
|
96
134
|
};
|
|
97
135
|
var retryIframe = function retryIframe() {
|
|
98
136
|
if (retryCount < MAX_RETRIES) {
|
|
99
137
|
retryCount++;
|
|
100
|
-
console.warn("[SchemaBuilder] Retrying iframe
|
|
101
|
-
|
|
138
|
+
console.warn("[SchemaBuilder] Retrying iframe initialization (".concat(retryCount, "/").concat(MAX_RETRIES, ")"));
|
|
139
|
+
setLoadError("\u6B63\u5728\u91CD\u8BD5... (".concat(retryCount, "/").concat(MAX_RETRIES, ")"));
|
|
140
|
+
setTimeout(function () {
|
|
141
|
+
_initIframe();
|
|
142
|
+
}, 1000);
|
|
102
143
|
} else {
|
|
103
144
|
console.error('[SchemaBuilder] Max retries reached');
|
|
145
|
+
setLoadError('表单设计器加载失败，请刷新页面重试');
|
|
146
|
+
setLoading(false);
|
|
104
147
|
}
|
|
105
148
|
};
|
|
106
149
|
var handleMessage = function handleMessage(event) {
|
|
107
|
-
//
|
|
150
|
+
// 只处理来自我们 iframe 的消息
|
|
151
|
+
if (!iframeInstance || event.source !== iframeInstance.contentWindow) {
|
|
152
|
+
return;
|
|
153
|
+
}
|
|
154
|
+
console.log('[SchemaBuilder] Received message:', event.data.type);
|
|
108
155
|
switch (event.data.type) {
|
|
109
|
-
case 'getFormRenderMaterial-ready':
|
|
110
|
-
console.log('[SchemaBuilder] getFormRenderMaterial is ready in iframe');
|
|
111
|
-
break;
|
|
112
156
|
case 'engine-load':
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
console.error('[SchemaBuilder] getFormRenderMaterial check failed, retrying...');
|
|
116
|
-
setTimeout(retryIframe, 500);
|
|
117
|
-
return;
|
|
118
|
-
}
|
|
157
|
+
if (event.data.ready) {
|
|
158
|
+
console.log('[SchemaBuilder] Engine loaded, checks:', event.data.checks);
|
|
119
159
|
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
}
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
console.error('[SchemaBuilder] __FR_ENGINE__ not found in iframe');
|
|
135
|
-
retryIframe();
|
|
136
|
-
}
|
|
137
|
-
} catch (error) {
|
|
138
|
-
console.error('[SchemaBuilder] Error initializing engine:', error);
|
|
139
|
-
retryIframe();
|
|
160
|
+
// 检查关键资源
|
|
161
|
+
if (!event.data.checks || !event.data.checks.__FR_ENGINE__) {
|
|
162
|
+
console.error('[SchemaBuilder] __FR_ENGINE__ not found in checks');
|
|
163
|
+
setTimeout(function () {
|
|
164
|
+
var _iframeInstance3, _iframeInstance3$cont;
|
|
165
|
+
// 延迟检查，可能 fr-generator 还在初始化
|
|
166
|
+
if (!((_iframeInstance3 = iframeInstance) === null || _iframeInstance3 === void 0 ? void 0 : (_iframeInstance3$cont = _iframeInstance3.contentWindow) === null || _iframeInstance3$cont === void 0 ? void 0 : _iframeInstance3$cont.__FR_ENGINE__)) {
|
|
167
|
+
console.warn('[SchemaBuilder] __FR_ENGINE__ still not found, retrying...');
|
|
168
|
+
retryIframe();
|
|
169
|
+
} else {
|
|
170
|
+
initializeEngine();
|
|
171
|
+
}
|
|
172
|
+
}, 1000);
|
|
173
|
+
return;
|
|
140
174
|
}
|
|
141
|
-
|
|
175
|
+
|
|
176
|
+
// 一切正常，初始化引擎
|
|
177
|
+
initializeEngine();
|
|
178
|
+
} else {
|
|
179
|
+
console.error('[SchemaBuilder] Engine not ready');
|
|
180
|
+
retryIframe();
|
|
181
|
+
}
|
|
142
182
|
break;
|
|
143
183
|
default:
|
|
144
|
-
//
|
|
184
|
+
// 忽略其他消息
|
|
145
185
|
break;
|
|
146
186
|
}
|
|
147
187
|
};
|
|
148
|
-
|
|
188
|
+
var initializeEngine = function initializeEngine() {
|
|
189
|
+
console.log('[SchemaBuilder] Initializing engine...');
|
|
190
|
+
if (!iframeInstance || !iframeInstance.contentWindow) {
|
|
191
|
+
console.error('[SchemaBuilder] Iframe not ready for engine initialization');
|
|
192
|
+
retryIframe();
|
|
193
|
+
return;
|
|
194
|
+
}
|
|
195
|
+
var iframeWindow = iframeInstance.contentWindow;
|
|
196
|
+
|
|
197
|
+
// 再次检查关键对象
|
|
198
|
+
if (!iframeWindow.__FR_ENGINE__) {
|
|
199
|
+
console.error('[SchemaBuilder] __FR_ENGINE__ not found in iframe window');
|
|
200
|
+
retryIframe();
|
|
201
|
+
return;
|
|
202
|
+
}
|
|
203
|
+
try {
|
|
204
|
+
iframeWindow.__FR_ENGINE__.init(_objectSpread({
|
|
205
|
+
settings: _objectSpread(_objectSpread({}, defaultSetting), settings),
|
|
206
|
+
widgets: widgets,
|
|
207
|
+
logo: {
|
|
208
|
+
title: 'XRender'
|
|
209
|
+
}
|
|
210
|
+
}, restProps));
|
|
211
|
+
console.log('[SchemaBuilder] Engine initialized successfully');
|
|
212
|
+
setLoading(false);
|
|
213
|
+
setLoadError(null);
|
|
214
|
+
|
|
215
|
+
// 如果有 onMount 回调，调用它
|
|
216
|
+
if (props.onMount) {
|
|
217
|
+
props.onMount();
|
|
218
|
+
}
|
|
219
|
+
} catch (error) {
|
|
220
|
+
console.error('[SchemaBuilder] Error initializing engine:', error);
|
|
221
|
+
setLoadError('引擎初始化失败');
|
|
222
|
+
retryIframe();
|
|
223
|
+
}
|
|
224
|
+
};
|
|
225
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
226
|
+
style: {
|
|
227
|
+
width: '100%',
|
|
228
|
+
height: '100%',
|
|
229
|
+
position: 'relative'
|
|
230
|
+
}
|
|
231
|
+
}, loading && /*#__PURE__*/React.createElement("div", {
|
|
149
232
|
style: {
|
|
150
233
|
position: 'absolute',
|
|
151
234
|
top: 0,
|
|
@@ -153,17 +236,38 @@ var Design = function Design(props, ref) {
|
|
|
153
236
|
right: 0,
|
|
154
237
|
bottom: 0,
|
|
155
238
|
display: 'flex',
|
|
239
|
+
flexDirection: 'column',
|
|
156
240
|
alignItems: 'center',
|
|
157
241
|
justifyContent: 'center',
|
|
158
|
-
backgroundColor: 'rgba(255, 255, 255, 0.
|
|
242
|
+
backgroundColor: 'rgba(255, 255, 255, 0.9)',
|
|
159
243
|
zIndex: 10
|
|
160
244
|
}
|
|
161
|
-
}, /*#__PURE__*/React.createElement(
|
|
245
|
+
}, loadError ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
|
|
246
|
+
style: {
|
|
247
|
+
color: '#f5222d',
|
|
248
|
+
marginBottom: 16
|
|
249
|
+
}
|
|
250
|
+
}, loadError), /*#__PURE__*/React.createElement("button", {
|
|
251
|
+
onClick: function onClick() {
|
|
252
|
+
retryCount = 0;
|
|
253
|
+
setLoadError(null);
|
|
254
|
+
_initIframe();
|
|
255
|
+
},
|
|
256
|
+
style: {
|
|
257
|
+
padding: '8px 16px',
|
|
258
|
+
backgroundColor: '#1890ff',
|
|
259
|
+
color: 'white',
|
|
260
|
+
border: 'none',
|
|
261
|
+
borderRadius: '4px',
|
|
262
|
+
cursor: 'pointer'
|
|
263
|
+
}
|
|
264
|
+
}, "\u91CD\u8BD5")) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", null, "\u6B63\u5728\u52A0\u8F7D\u8868\u5355\u8BBE\u8BA1\u5668..."), /*#__PURE__*/React.createElement("div", {
|
|
162
265
|
style: {
|
|
163
|
-
fontSize:
|
|
164
|
-
color: '#666'
|
|
266
|
+
fontSize: 12,
|
|
267
|
+
color: '#666',
|
|
268
|
+
marginTop: 8
|
|
165
269
|
}
|
|
166
|
-
}, "\
|
|
270
|
+
}, "\u8BF7\u7A0D\u5019 ", retryCount > 0 && "(\u91CD\u8BD5 ".concat(retryCount, "/").concat(MAX_RETRIES, ")")))), /*#__PURE__*/React.createElement("div", {
|
|
167
271
|
ref: containerRef,
|
|
168
272
|
style: {
|
|
169
273
|
width: '100%',
|
package/lib/main.js
CHANGED
|
@@ -24,136 +24,219 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
|
|
|
24
24
|
function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
|
|
25
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; }
|
|
26
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; }
|
|
27
|
-
var
|
|
27
|
+
var iframeInstance = null;
|
|
28
28
|
var retryCount = 0;
|
|
29
29
|
var MAX_RETRIES = 3;
|
|
30
30
|
var Design = function Design(props, ref) {
|
|
31
31
|
var widgets = props.widgets,
|
|
32
32
|
settings = props.settings,
|
|
33
33
|
restProps = _objectWithoutProperties(props, _excluded);
|
|
34
|
-
var containerRef = (0, _react.useRef)();
|
|
34
|
+
var containerRef = (0, _react.useRef)(null);
|
|
35
35
|
var _useState = (0, _react.useState)(true),
|
|
36
36
|
_useState2 = _slicedToArray(_useState, 2),
|
|
37
37
|
loading = _useState2[0],
|
|
38
38
|
setLoading = _useState2[1];
|
|
39
|
+
var _useState3 = (0, _react.useState)(null),
|
|
40
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
41
|
+
loadError = _useState4[0],
|
|
42
|
+
setLoadError = _useState4[1];
|
|
39
43
|
(0, _react.useImperativeHandle)(ref, function () {
|
|
40
44
|
return {
|
|
41
45
|
getValue: function getValue() {
|
|
42
|
-
var
|
|
43
|
-
return (
|
|
46
|
+
var _iframeInstance, _iframeInstance$conte, _iframeInstance$conte2, _iframeInstance$conte3;
|
|
47
|
+
return (_iframeInstance = iframeInstance) === null || _iframeInstance === void 0 ? void 0 : (_iframeInstance$conte = _iframeInstance.contentWindow) === null || _iframeInstance$conte === void 0 ? void 0 : (_iframeInstance$conte2 = _iframeInstance$conte.__FR_ENGINE__) === null || _iframeInstance$conte2 === void 0 ? void 0 : (_iframeInstance$conte3 = _iframeInstance$conte2.exportSchema) === null || _iframeInstance$conte3 === void 0 ? void 0 : _iframeInstance$conte3.call(_iframeInstance$conte2);
|
|
44
48
|
},
|
|
45
49
|
setValue: function setValue(schema) {
|
|
46
|
-
var
|
|
47
|
-
return (
|
|
50
|
+
var _iframeInstance2, _iframeInstance2$cont, _iframeInstance2$cont2, _iframeInstance2$cont3;
|
|
51
|
+
return (_iframeInstance2 = iframeInstance) === null || _iframeInstance2 === void 0 ? void 0 : (_iframeInstance2$cont = _iframeInstance2.contentWindow) === null || _iframeInstance2$cont === void 0 ? void 0 : (_iframeInstance2$cont2 = _iframeInstance2$cont.__FR_ENGINE__) === null || _iframeInstance2$cont2 === void 0 ? void 0 : (_iframeInstance2$cont3 = _iframeInstance2$cont2.importSchema) === null || _iframeInstance2$cont3 === void 0 ? void 0 : _iframeInstance2$cont3.call(_iframeInstance2$cont2, schema);
|
|
48
52
|
},
|
|
49
53
|
reload: function reload() {
|
|
50
|
-
if (containerRef.current &&
|
|
51
|
-
|
|
52
|
-
|
|
54
|
+
if (containerRef.current && iframeInstance) {
|
|
55
|
+
try {
|
|
56
|
+
containerRef.current.removeChild(iframeInstance);
|
|
57
|
+
} catch (e) {
|
|
58
|
+
// 忽略错误
|
|
59
|
+
}
|
|
60
|
+
iframeInstance = null;
|
|
53
61
|
retryCount = 0;
|
|
54
|
-
|
|
62
|
+
setLoadError(null);
|
|
63
|
+
setLoading(true);
|
|
64
|
+
_initIframe();
|
|
55
65
|
}
|
|
66
|
+
},
|
|
67
|
+
getStatus: function getStatus() {
|
|
68
|
+
return {
|
|
69
|
+
loading: loading,
|
|
70
|
+
error: loadError,
|
|
71
|
+
iframeReady: !!iframeInstance,
|
|
72
|
+
retryCount: retryCount
|
|
73
|
+
};
|
|
56
74
|
}
|
|
57
75
|
};
|
|
58
76
|
});
|
|
59
77
|
(0, _react.useEffect)(function () {
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
78
|
+
_initIframe();
|
|
79
|
+
|
|
80
|
+
// 清理函数
|
|
63
81
|
return function () {
|
|
64
|
-
|
|
65
|
-
if (iframe && containerRef.current) {
|
|
82
|
+
if (iframeInstance && containerRef.current) {
|
|
66
83
|
try {
|
|
67
|
-
containerRef.current.removeChild(
|
|
68
|
-
} catch (e) {
|
|
69
|
-
|
|
84
|
+
containerRef.current.removeChild(iframeInstance);
|
|
85
|
+
} catch (e) {
|
|
86
|
+
// 忽略错误
|
|
87
|
+
}
|
|
88
|
+
iframeInstance = null;
|
|
70
89
|
}
|
|
71
90
|
};
|
|
72
91
|
}, []);
|
|
73
|
-
var
|
|
74
|
-
console.log('[SchemaBuilder] Initializing iframe
|
|
92
|
+
var _initIframe = function initIframe() {
|
|
93
|
+
console.log('[SchemaBuilder] Initializing iframe...');
|
|
94
|
+
if (!containerRef.current) {
|
|
95
|
+
console.error('[SchemaBuilder] Container ref is null');
|
|
96
|
+
setTimeout(function () {
|
|
97
|
+
return _initIframe();
|
|
98
|
+
}, 100);
|
|
99
|
+
return;
|
|
100
|
+
}
|
|
75
101
|
|
|
76
102
|
// 清理旧的 iframe
|
|
77
|
-
if (containerRef.current
|
|
103
|
+
if (iframeInstance && containerRef.current.contains(iframeInstance)) {
|
|
78
104
|
try {
|
|
79
|
-
containerRef.current.removeChild(
|
|
80
|
-
} catch (e) {
|
|
81
|
-
|
|
105
|
+
containerRef.current.removeChild(iframeInstance);
|
|
106
|
+
} catch (e) {
|
|
107
|
+
console.warn('[SchemaBuilder] Error removing old iframe:', e);
|
|
108
|
+
}
|
|
82
109
|
}
|
|
83
110
|
|
|
84
111
|
// 创建新的 iframe
|
|
85
|
-
|
|
112
|
+
iframeInstance = (0, _createIframe.default)();
|
|
86
113
|
|
|
87
|
-
//
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
console.
|
|
114
|
+
// 添加 iframe 到容器
|
|
115
|
+
try {
|
|
116
|
+
containerRef.current.appendChild(iframeInstance);
|
|
117
|
+
console.log('[SchemaBuilder] Iframe appended to container');
|
|
118
|
+
} catch (error) {
|
|
119
|
+
console.error('[SchemaBuilder] Error appending iframe:', error);
|
|
120
|
+
setLoadError('无法创建表单设计器');
|
|
93
121
|
setLoading(false);
|
|
94
|
-
|
|
95
|
-
|
|
122
|
+
return;
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
// 设置消息监听
|
|
126
|
+
var messageHandler = handleMessage;
|
|
127
|
+
window.addEventListener('message', messageHandler);
|
|
96
128
|
|
|
97
|
-
//
|
|
98
|
-
setTimeout(function () {
|
|
99
|
-
|
|
100
|
-
|
|
129
|
+
// 设置超时检查
|
|
130
|
+
var timeoutId = setTimeout(function () {
|
|
131
|
+
console.warn('[SchemaBuilder] Iframe initialization timeout');
|
|
132
|
+
if (loading) {
|
|
101
133
|
retryIframe();
|
|
102
134
|
}
|
|
103
|
-
},
|
|
135
|
+
}, 15000);
|
|
136
|
+
|
|
137
|
+
// 清理函数
|
|
138
|
+
return function () {
|
|
139
|
+
window.removeEventListener('message', messageHandler);
|
|
140
|
+
clearTimeout(timeoutId);
|
|
141
|
+
};
|
|
104
142
|
};
|
|
105
143
|
var retryIframe = function retryIframe() {
|
|
106
144
|
if (retryCount < MAX_RETRIES) {
|
|
107
145
|
retryCount++;
|
|
108
|
-
console.warn("[SchemaBuilder] Retrying iframe
|
|
109
|
-
|
|
146
|
+
console.warn("[SchemaBuilder] Retrying iframe initialization (".concat(retryCount, "/").concat(MAX_RETRIES, ")"));
|
|
147
|
+
setLoadError("\u6B63\u5728\u91CD\u8BD5... (".concat(retryCount, "/").concat(MAX_RETRIES, ")"));
|
|
148
|
+
setTimeout(function () {
|
|
149
|
+
_initIframe();
|
|
150
|
+
}, 1000);
|
|
110
151
|
} else {
|
|
111
152
|
console.error('[SchemaBuilder] Max retries reached');
|
|
153
|
+
setLoadError('表单设计器加载失败，请刷新页面重试');
|
|
154
|
+
setLoading(false);
|
|
112
155
|
}
|
|
113
156
|
};
|
|
114
157
|
var handleMessage = function handleMessage(event) {
|
|
115
|
-
//
|
|
158
|
+
// 只处理来自我们 iframe 的消息
|
|
159
|
+
if (!iframeInstance || event.source !== iframeInstance.contentWindow) {
|
|
160
|
+
return;
|
|
161
|
+
}
|
|
162
|
+
console.log('[SchemaBuilder] Received message:', event.data.type);
|
|
116
163
|
switch (event.data.type) {
|
|
117
|
-
case 'getFormRenderMaterial-ready':
|
|
118
|
-
console.log('[SchemaBuilder] getFormRenderMaterial is ready in iframe');
|
|
119
|
-
break;
|
|
120
164
|
case 'engine-load':
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
console.error('[SchemaBuilder] getFormRenderMaterial check failed, retrying...');
|
|
124
|
-
setTimeout(retryIframe, 500);
|
|
125
|
-
return;
|
|
126
|
-
}
|
|
165
|
+
if (event.data.ready) {
|
|
166
|
+
console.log('[SchemaBuilder] Engine loaded, checks:', event.data.checks);
|
|
127
167
|
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
}
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
console.error('[SchemaBuilder] __FR_ENGINE__ not found in iframe');
|
|
143
|
-
retryIframe();
|
|
144
|
-
}
|
|
145
|
-
} catch (error) {
|
|
146
|
-
console.error('[SchemaBuilder] Error initializing engine:', error);
|
|
147
|
-
retryIframe();
|
|
168
|
+
// 检查关键资源
|
|
169
|
+
if (!event.data.checks || !event.data.checks.__FR_ENGINE__) {
|
|
170
|
+
console.error('[SchemaBuilder] __FR_ENGINE__ not found in checks');
|
|
171
|
+
setTimeout(function () {
|
|
172
|
+
var _iframeInstance3, _iframeInstance3$cont;
|
|
173
|
+
// 延迟检查，可能 fr-generator 还在初始化
|
|
174
|
+
if (!((_iframeInstance3 = iframeInstance) === null || _iframeInstance3 === void 0 ? void 0 : (_iframeInstance3$cont = _iframeInstance3.contentWindow) === null || _iframeInstance3$cont === void 0 ? void 0 : _iframeInstance3$cont.__FR_ENGINE__)) {
|
|
175
|
+
console.warn('[SchemaBuilder] __FR_ENGINE__ still not found, retrying...');
|
|
176
|
+
retryIframe();
|
|
177
|
+
} else {
|
|
178
|
+
initializeEngine();
|
|
179
|
+
}
|
|
180
|
+
}, 1000);
|
|
181
|
+
return;
|
|
148
182
|
}
|
|
149
|
-
|
|
183
|
+
|
|
184
|
+
// 一切正常，初始化引擎
|
|
185
|
+
initializeEngine();
|
|
186
|
+
} else {
|
|
187
|
+
console.error('[SchemaBuilder] Engine not ready');
|
|
188
|
+
retryIframe();
|
|
189
|
+
}
|
|
150
190
|
break;
|
|
151
191
|
default:
|
|
152
|
-
//
|
|
192
|
+
// 忽略其他消息
|
|
153
193
|
break;
|
|
154
194
|
}
|
|
155
195
|
};
|
|
156
|
-
|
|
196
|
+
var initializeEngine = function initializeEngine() {
|
|
197
|
+
console.log('[SchemaBuilder] Initializing engine...');
|
|
198
|
+
if (!iframeInstance || !iframeInstance.contentWindow) {
|
|
199
|
+
console.error('[SchemaBuilder] Iframe not ready for engine initialization');
|
|
200
|
+
retryIframe();
|
|
201
|
+
return;
|
|
202
|
+
}
|
|
203
|
+
var iframeWindow = iframeInstance.contentWindow;
|
|
204
|
+
|
|
205
|
+
// 再次检查关键对象
|
|
206
|
+
if (!iframeWindow.__FR_ENGINE__) {
|
|
207
|
+
console.error('[SchemaBuilder] __FR_ENGINE__ not found in iframe window');
|
|
208
|
+
retryIframe();
|
|
209
|
+
return;
|
|
210
|
+
}
|
|
211
|
+
try {
|
|
212
|
+
iframeWindow.__FR_ENGINE__.init(_objectSpread({
|
|
213
|
+
settings: _objectSpread(_objectSpread({}, defaultSetting), settings),
|
|
214
|
+
widgets: widgets,
|
|
215
|
+
logo: {
|
|
216
|
+
title: 'XRender'
|
|
217
|
+
}
|
|
218
|
+
}, restProps));
|
|
219
|
+
console.log('[SchemaBuilder] Engine initialized successfully');
|
|
220
|
+
setLoading(false);
|
|
221
|
+
setLoadError(null);
|
|
222
|
+
|
|
223
|
+
// 如果有 onMount 回调，调用它
|
|
224
|
+
if (props.onMount) {
|
|
225
|
+
props.onMount();
|
|
226
|
+
}
|
|
227
|
+
} catch (error) {
|
|
228
|
+
console.error('[SchemaBuilder] Error initializing engine:', error);
|
|
229
|
+
setLoadError('引擎初始化失败');
|
|
230
|
+
retryIframe();
|
|
231
|
+
}
|
|
232
|
+
};
|
|
233
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
234
|
+
style: {
|
|
235
|
+
width: '100%',
|
|
236
|
+
height: '100%',
|
|
237
|
+
position: 'relative'
|
|
238
|
+
}
|
|
239
|
+
}, loading && /*#__PURE__*/_react.default.createElement("div", {
|
|
157
240
|
style: {
|
|
158
241
|
position: 'absolute',
|
|
159
242
|
top: 0,
|
|
@@ -161,17 +244,38 @@ var Design = function Design(props, ref) {
|
|
|
161
244
|
right: 0,
|
|
162
245
|
bottom: 0,
|
|
163
246
|
display: 'flex',
|
|
247
|
+
flexDirection: 'column',
|
|
164
248
|
alignItems: 'center',
|
|
165
249
|
justifyContent: 'center',
|
|
166
|
-
backgroundColor: 'rgba(255, 255, 255, 0.
|
|
250
|
+
backgroundColor: 'rgba(255, 255, 255, 0.9)',
|
|
167
251
|
zIndex: 10
|
|
168
252
|
}
|
|
169
|
-
}, /*#__PURE__*/_react.default.createElement(
|
|
253
|
+
}, loadError ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
|
|
254
|
+
style: {
|
|
255
|
+
color: '#f5222d',
|
|
256
|
+
marginBottom: 16
|
|
257
|
+
}
|
|
258
|
+
}, loadError), /*#__PURE__*/_react.default.createElement("button", {
|
|
259
|
+
onClick: function onClick() {
|
|
260
|
+
retryCount = 0;
|
|
261
|
+
setLoadError(null);
|
|
262
|
+
_initIframe();
|
|
263
|
+
},
|
|
264
|
+
style: {
|
|
265
|
+
padding: '8px 16px',
|
|
266
|
+
backgroundColor: '#1890ff',
|
|
267
|
+
color: 'white',
|
|
268
|
+
border: 'none',
|
|
269
|
+
borderRadius: '4px',
|
|
270
|
+
cursor: 'pointer'
|
|
271
|
+
}
|
|
272
|
+
}, "\u91CD\u8BD5")) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, "\u6B63\u5728\u52A0\u8F7D\u8868\u5355\u8BBE\u8BA1\u5668..."), /*#__PURE__*/_react.default.createElement("div", {
|
|
170
273
|
style: {
|
|
171
|
-
fontSize:
|
|
172
|
-
color: '#666'
|
|
274
|
+
fontSize: 12,
|
|
275
|
+
color: '#666',
|
|
276
|
+
marginTop: 8
|
|
173
277
|
}
|
|
174
|
-
}, "\
|
|
278
|
+
}, "\u8BF7\u7A0D\u5019 ", retryCount > 0 && "(\u91CD\u8BD5 ".concat(retryCount, "/").concat(MAX_RETRIES, ")")))), /*#__PURE__*/_react.default.createElement("div", {
|
|
175
279
|
ref: containerRef,
|
|
176
280
|
style: {
|
|
177
281
|
width: '100%',
|