@zzdadelu/schema-builder 1.0.0-alpha.59 → 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 +17 -20
- package/es/main.js +207 -126
- package/lib/createIframe.js +17 -20
- package/lib/main.js +206 -125
- package/package.json +1 -1
package/es/createIframe.js
CHANGED
|
@@ -1,33 +1,30 @@
|
|
|
1
1
|
var createIframeContent = function createIframeContent() {
|
|
2
|
-
// 使用时间戳避免缓存
|
|
3
2
|
var timestamp = Date.now();
|
|
4
|
-
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 <!-- \u5173\u952E\u4FEE\u590D1\uFF1A\u63D0\u524D\u5B9A\u4E49 getFormRenderMaterial \u5360\u4F4D\u7B26 -->\n <script>\n (function() {\n // \u4FDD\u5B58\u771F\u6B63\u7684\u51FD\u6570\u5F15\u7528\n let __realGetFormRenderMaterial = null;\n let __isGetFormRenderMaterialReady = false;\n let __pendingCalls = [];\n \n // \u521B\u5EFA\u5B89\u5168\u7684\u4EE3\u7406\u51FD\u6570\n function __safeGetFormRenderMaterialWrapper(...args) {\n if (__isGetFormRenderMaterialReady && __realGetFormRenderMaterial) {\n return __realGetFormRenderMaterial.apply(this, args);\n }\n \n console.warn('[XRender] getFormRenderMaterial not ready yet, queuing call');\n \n // \u5982\u679C\u662F\u7B2C\u4E09\u65B9\u5E93\u7684\u8C03\u7528\uFF0C\u76F4\u63A5\u8FD4\u56DE\u7A7A\u5BF9\u8C61\u907F\u514D\u9519\u8BEF\n if (args[0] === 'AliFormRenderMaterial' && args[1] === '@ali/form-render-material') {\n console.warn('[XRender] Returning empty object for AliFormRenderMaterial');\n return {};\n }\n \n // \u5176\u4ED6\u8C03\u7528\u6392\u961F\u5904\u7406\n return new Promise((resolve, reject) => {\n __pendingCalls.push({\n args: args,\n resolve: resolve,\n reject: reject\n });\n });\n }\n \n // \u5B9A\u4E49 window.getFormRenderMaterial \u5C5E\u6027\n Object.defineProperty(window, 'getFormRenderMaterial', {\n configurable: true,\n enumerable: true,\n get: function() {\n return __safeGetFormRenderMaterialWrapper;\n },\n set: function(value) {\n console.log('[XRender] Setting getFormRenderMaterial to:', typeof value);\n __realGetFormRenderMaterial = value;\n __isGetFormRenderMaterialReady = true;\n \n // \u6267\u884C\u6392\u961F\u7684\u8C03\u7528\n __pendingCalls.forEach(call => {\n try {\n const result = value.apply(window, call.args);\n call.resolve(result);\n } catch (error) {\n call.reject(error);\n }\n });\n __pendingCalls = [];\n \n // \u901A\u77E5\u7236\u7A97\u53E3\n try {\n window.parent.postMessage({\n type: 'getFormRenderMaterial-ready',\n ready: true,\n timestamp: Date.now()\n }, '*');\n } catch(e) {}\n }\n });\n \n // \u62E6\u622A\u5371\u9669\u8C03\u7528\n const originalDefineProperty = Object.defineProperty;\n Object.defineProperty = function(obj, prop, descriptor) {\n if (prop === 'AliFormRenderMaterial' && obj === window) {\n console.warn('[XRender] Intercepted AliFormRenderMaterial definition');\n \n // \u5EF6\u8FDF\u8BBE\u7F6E AliFormRenderMaterial\n if (descriptor.value !== undefined) {\n const originalValue = descriptor.value;\n descriptor.value = undefined;\n \n setTimeout(() => {\n if (typeof window.getFormRenderMaterial === 'function') {\n try {\n const material = window.getFormRenderMaterial('AliFormRenderMaterial', '@ali/form-render-material');\n window.AliFormRenderMaterial = material || originalValue;\n console.log('[XRender] AliFormRenderMaterial set successfully');\n } catch (e) {\n console.error('[XRender] Error setting AliFormRenderMaterial:', e);\n window.AliFormRenderMaterial = originalValue;\n }\n } else {\n console.warn('[XRender] getFormRenderMaterial not available for AliFormRenderMaterial');\n window.AliFormRenderMaterial = originalValue;\n }\n }, 0);\n }\n }\n return originalDefineProperty.call(this, obj, prop, descriptor);\n };\n })();\n </script>\n\n <script>\n window.React = window.parent.React;\n window.ReactDOM = window.parent.ReactDOM;\n </script>\n \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\u4FEE\u590D2\uFF1A\u4F7F\u7528\u540C\u6B65\u65B9\u5F0F\u52A0\u8F7D fr-generator -->\n <script>\n (function() {\n const maxRetries = 3;\n let retryCount = 0;\n \n function loadFrGenerator() {\n return new Promise((resolve, reject) => {\n const script = document.createElement('script');\n const url = 'https://g.alicdn.com/fone-lowcode/fr-generator/1.1.0/js/index.js?t=' + ".concat(timestamp, " + '&retry=' + retryCount;\n script.src = url;\n script.type = 'text/javascript';\n \n script.onload = function() {\n console.log('[XRender] fr-generator loaded successfully, attempt', retryCount + 1);\n \n // \u7B49\u5F85\u51FD\u6570\u88AB\u5B9A\u4E49\n let checkCount = 0;\n const maxChecks = 50; // \u6700\u591A\u68C0\u67E55\u79D2\n const checkInterval = setInterval(() => {\n checkCount++;\n if (typeof window.getFormRenderMaterial === 'function') {\n clearInterval(checkInterval);\n console.log('[XRender] \u2713 getFormRenderMaterial is now a function');\n resolve();\n } else if (checkCount >= maxChecks) {\n clearInterval(checkInterval);\n console.warn('[XRender] getFormRenderMaterial not defined after fr-generator load');\n reject(new Error('getFormRenderMaterial not defined'));\n }\n }, 100);\n };\n \n script.onerror = function() {\n console.error('[XRender] Failed to load fr-generator, attempt', retryCount + 1);\n \n if (retryCount < maxRetries - 1) {\n retryCount++;\n setTimeout(() => loadFrGenerator().then(resolve).catch(reject), 1000 * retryCount);\n } else {\n console.error('[XRender] Max retries reached, creating emergency function');\n \n // \u521B\u5EFA\u5E94\u6025\u51FD\u6570\n window.getFormRenderMaterial = function() {\n console.error('[XRender] Using emergency fallback for getFormRenderMaterial');\n return {};\n };\n \n reject(new Error('Failed to load fr-generator after max retries'));\n }\n };\n \n // \u4F7F\u7528 document.write \u786E\u4FDD\u540C\u6B65\u6267\u884C\n document.write(script.outerHTML);\n });\n }\n \n // \u7ACB\u5373\u5F00\u59CB\u52A0\u8F7D\n loadFrGenerator().catch(error => {\n console.error('[XRender] fr-generator load failed:', error);\n });\n })();\n </script>\n </head>\n\n <body>\n <div id=\"lce-container\"></div>\n \n <!-- \u5173\u952E\u4FEE\u590D3\uFF1A\u6700\u7EC8\u68C0\u67E5 -->\n <script>\n window.addEventListener('load', function() {\n console.log('[XRender] Iframe fully loaded');\n \n // \u68C0\u67E5\u5173\u952E\u51FD\u6570\n setTimeout(() => {\n const checks = {\n getFormRenderMaterial: typeof window.getFormRenderMaterial === 'function',\n AliFormRenderMaterial: typeof window.AliFormRenderMaterial !== 'undefined',\n React: typeof window.React !== 'undefined',\n ReactDOM: typeof window.ReactDOM !== 'undefined'\n };\n \n console.log('[XRender] Final checks:', checks);\n \n if (!checks.getFormRenderMaterial) {\n console.error('[XRender] CRITICAL: getFormRenderMaterial is not a function!');\n \n // \u6700\u540E\u5C1D\u8BD5\uFF1A\u4ECE\u7236\u7A97\u53E3\u83B7\u53D6\n try {\n if (window.parent && typeof window.parent.getFormRenderMaterial === 'function') {\n window.getFormRenderMaterial = window.parent.getFormRenderMaterial;\n console.warn('[XRender] Copied getFormRenderMaterial from parent window');\n }\n } catch(e) {}\n }\n \n // \u901A\u77E5\u5F15\u64CE\u5DF2\u52A0\u8F7D\n try {\n window.parent.postMessage({\n type: 'engine-load',\n ready: true,\n checks: checks,\n timestamp: Date.now()\n }, '*');\n } catch(e) {\n console.error('[XRender] Failed to post message to parent:', e);\n }\n }, 1000);\n });\n </script>\n </body>\n </html>\n ");
|
|
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 ");
|
|
5
4
|
return html;
|
|
6
5
|
};
|
|
7
6
|
export default (function () {
|
|
8
7
|
var iframe = document.createElement('iframe');
|
|
8
|
+
|
|
9
|
+
// 设置iframe属性
|
|
9
10
|
iframe.width = '100%';
|
|
10
11
|
iframe.height = '100%';
|
|
11
12
|
iframe.frameBorder = '0';
|
|
13
|
+
iframe.style.border = 'none';
|
|
14
|
+
iframe.style.display = 'block';
|
|
12
15
|
|
|
13
|
-
//
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
var url = URL.createObjectURL(blob);
|
|
19
|
-
iframe.src = url;
|
|
16
|
+
// 添加sandbox属性但允许必要权限
|
|
17
|
+
iframe.setAttribute('sandbox', 'allow-same-origin allow-scripts allow-popups allow-forms');
|
|
18
|
+
|
|
19
|
+
// 使用srcdoc
|
|
20
|
+
iframe.srcdoc = createIframeContent();
|
|
20
21
|
|
|
21
|
-
//
|
|
22
|
-
iframe.
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
console.
|
|
27
|
-
};
|
|
28
|
-
iframe.onerror = function (error) {
|
|
29
|
-
console.error('[XRender] Iframe load error:', error);
|
|
30
|
-
URL.revokeObjectURL(url);
|
|
31
|
-
};
|
|
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
|
+
});
|
|
32
29
|
return iframe;
|
|
33
30
|
});
|
package/es/main.js
CHANGED
|
@@ -13,17 +13,17 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
|
|
|
13
13
|
function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
|
|
14
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; }
|
|
15
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; }
|
|
16
|
-
import React, { useEffect, useRef, useImperativeHandle, forwardRef, useState } from 'react';
|
|
16
|
+
import React, { useEffect, useRef, useImperativeHandle, forwardRef, useState, useCallback } from 'react';
|
|
17
17
|
import createIframe from './createIframe';
|
|
18
18
|
import * as defaultSetting from './settings';
|
|
19
|
-
|
|
20
|
-
var retryCount = 0;
|
|
21
|
-
var MAX_RETRIES = 3;
|
|
19
|
+
// 使用模块变量存储iframe实例，但每个组件实例应该有自己独立的iframe
|
|
22
20
|
var Design = function Design(props, ref) {
|
|
23
21
|
var widgets = props.widgets,
|
|
24
22
|
settings = props.settings,
|
|
25
23
|
restProps = _objectWithoutProperties(props, _excluded);
|
|
26
24
|
var containerRef = useRef(null);
|
|
25
|
+
var iframeRef = useRef(null);
|
|
26
|
+
var messageHandlerRef = useRef(null);
|
|
27
27
|
var _useState = useState(true),
|
|
28
28
|
_useState2 = _slicedToArray(_useState, 2),
|
|
29
29
|
loading = _useState2[0],
|
|
@@ -32,123 +32,145 @@ var Design = function Design(props, ref) {
|
|
|
32
32
|
_useState4 = _slicedToArray(_useState3, 2),
|
|
33
33
|
loadError = _useState4[0],
|
|
34
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
|
+
// 暴露给父组件的方法
|
|
35
42
|
useImperativeHandle(ref, function () {
|
|
36
43
|
return {
|
|
37
44
|
getValue: function getValue() {
|
|
38
|
-
var
|
|
39
|
-
return (
|
|
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);
|
|
40
47
|
},
|
|
41
48
|
setValue: function setValue(schema) {
|
|
42
|
-
var
|
|
43
|
-
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);
|
|
44
51
|
},
|
|
45
52
|
reload: function reload() {
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
}
|
|
52
|
-
iframeInstance = null;
|
|
53
|
-
retryCount = 0;
|
|
54
|
-
setLoadError(null);
|
|
55
|
-
setLoading(true);
|
|
56
|
-
_initIframe();
|
|
57
|
-
}
|
|
53
|
+
cleanup();
|
|
54
|
+
setRetryCount(0);
|
|
55
|
+
setLoadError(null);
|
|
56
|
+
setLoading(true);
|
|
57
|
+
setTimeout(initIframe, 100); // 延迟一点确保状态已更新
|
|
58
58
|
},
|
|
59
59
|
getStatus: function getStatus() {
|
|
60
60
|
return {
|
|
61
61
|
loading: loading,
|
|
62
62
|
error: loadError,
|
|
63
|
-
iframeReady: !!
|
|
63
|
+
iframeReady: !!iframeRef.current,
|
|
64
64
|
retryCount: retryCount
|
|
65
65
|
};
|
|
66
66
|
}
|
|
67
67
|
};
|
|
68
68
|
});
|
|
69
|
-
useEffect(function () {
|
|
70
|
-
_initIframe();
|
|
71
69
|
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
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);
|
|
79
83
|
}
|
|
80
|
-
|
|
84
|
+
} catch (error) {
|
|
85
|
+
console.warn('[SchemaBuilder] Error removing iframe:', error);
|
|
81
86
|
}
|
|
82
|
-
|
|
87
|
+
iframeRef.current = null;
|
|
88
|
+
}
|
|
83
89
|
}, []);
|
|
84
|
-
|
|
90
|
+
|
|
91
|
+
// 初始化iframe
|
|
92
|
+
var initIframe = useCallback(function () {
|
|
85
93
|
console.log('[SchemaBuilder] Initializing iframe...');
|
|
94
|
+
|
|
95
|
+
// 确保容器存在
|
|
86
96
|
if (!containerRef.current) {
|
|
87
|
-
console.error('[SchemaBuilder] Container ref is null');
|
|
88
|
-
setTimeout(
|
|
89
|
-
return _initIframe();
|
|
90
|
-
}, 100);
|
|
97
|
+
console.error('[SchemaBuilder] Container ref is null, waiting...');
|
|
98
|
+
setTimeout(initIframe, 100);
|
|
91
99
|
return;
|
|
92
100
|
}
|
|
93
101
|
|
|
94
|
-
// 清理旧的
|
|
95
|
-
|
|
96
|
-
try {
|
|
97
|
-
containerRef.current.removeChild(iframeInstance);
|
|
98
|
-
} catch (e) {
|
|
99
|
-
console.warn('[SchemaBuilder] Error removing old iframe:', e);
|
|
100
|
-
}
|
|
101
|
-
}
|
|
102
|
-
|
|
103
|
-
// 创建新的 iframe
|
|
104
|
-
iframeInstance = createIframe();
|
|
102
|
+
// 清理旧的iframe
|
|
103
|
+
cleanup();
|
|
105
104
|
|
|
106
|
-
//
|
|
105
|
+
// 创建新的iframe
|
|
107
106
|
try {
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
} catch (error) {
|
|
111
|
-
console.error('[SchemaBuilder] Error appending iframe:', error);
|
|
112
|
-
setLoadError('无法创建表单设计器');
|
|
113
|
-
setLoading(false);
|
|
114
|
-
return;
|
|
115
|
-
}
|
|
107
|
+
var iframe = createIframe();
|
|
108
|
+
iframeRef.current = iframe;
|
|
116
109
|
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
110
|
+
// 确保容器可见且已挂载
|
|
111
|
+
if (containerRef.current && containerRef.current.parentNode) {
|
|
112
|
+
containerRef.current.appendChild(iframe);
|
|
113
|
+
console.log('[SchemaBuilder] Iframe appended successfully');
|
|
120
114
|
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
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');
|
|
126
129
|
}
|
|
127
|
-
}
|
|
130
|
+
} catch (error) {
|
|
131
|
+
console.error('[SchemaBuilder] Error creating iframe:', error);
|
|
132
|
+
handleLoadError('创建表单设计器失败');
|
|
133
|
+
}
|
|
134
|
+
}, [cleanup, loading]);
|
|
128
135
|
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
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);
|
|
136
156
|
if (retryCount < MAX_RETRIES) {
|
|
137
|
-
retryCount
|
|
138
|
-
|
|
139
|
-
setLoadError("\u6B63\u5728\u91CD\u8BD5... (".concat(
|
|
157
|
+
var newRetryCount = retryCount + 1;
|
|
158
|
+
setRetryCount(newRetryCount);
|
|
159
|
+
setLoadError("".concat(message, "\uFF0C\u6B63\u5728\u91CD\u8BD5... (").concat(newRetryCount, "/").concat(MAX_RETRIES, ")"));
|
|
140
160
|
setTimeout(function () {
|
|
141
|
-
|
|
161
|
+
cleanup();
|
|
162
|
+
initIframe();
|
|
142
163
|
}, 1000);
|
|
143
164
|
} else {
|
|
144
|
-
|
|
145
|
-
setLoadError('表单设计器加载失败，请刷新页面重试');
|
|
165
|
+
setLoadError("".concat(message, "\uFF0C\u8BF7\u5237\u65B0\u9875\u9762\u91CD\u8BD5"));
|
|
146
166
|
setLoading(false);
|
|
147
167
|
}
|
|
148
|
-
};
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
168
|
+
}, [retryCount, cleanup, initIframe]);
|
|
169
|
+
|
|
170
|
+
// 消息处理器
|
|
171
|
+
var handleMessage = useCallback(function (event) {
|
|
172
|
+
// 检查消息是否来自我们的iframe
|
|
173
|
+
if (!iframeRef.current || event.source !== iframeRef.current.contentWindow) {
|
|
152
174
|
return;
|
|
153
175
|
}
|
|
154
176
|
console.log('[SchemaBuilder] Received message:', event.data.type);
|
|
@@ -157,47 +179,48 @@ var Design = function Design(props, ref) {
|
|
|
157
179
|
if (event.data.ready) {
|
|
158
180
|
console.log('[SchemaBuilder] Engine loaded, checks:', event.data.checks);
|
|
159
181
|
|
|
160
|
-
//
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
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);
|
|
178
200
|
} else {
|
|
179
|
-
|
|
180
|
-
retryIframe();
|
|
201
|
+
handleLoadError('引擎未就绪');
|
|
181
202
|
}
|
|
182
203
|
break;
|
|
183
204
|
default:
|
|
184
205
|
// 忽略其他消息
|
|
185
206
|
break;
|
|
186
207
|
}
|
|
187
|
-
};
|
|
188
|
-
|
|
208
|
+
}, [handleLoadError]);
|
|
209
|
+
|
|
210
|
+
// 初始化引擎
|
|
211
|
+
var initializeEngine = useCallback(function () {
|
|
189
212
|
console.log('[SchemaBuilder] Initializing engine...');
|
|
190
|
-
if (!
|
|
213
|
+
if (!iframeRef.current || !iframeRef.current.contentWindow) {
|
|
191
214
|
console.error('[SchemaBuilder] Iframe not ready for engine initialization');
|
|
192
|
-
|
|
215
|
+
handleLoadError('iframe未就绪');
|
|
193
216
|
return;
|
|
194
217
|
}
|
|
195
|
-
var iframeWindow =
|
|
218
|
+
var iframeWindow = iframeRef.current.contentWindow;
|
|
196
219
|
|
|
197
220
|
// 再次检查关键对象
|
|
198
221
|
if (!iframeWindow.__FR_ENGINE__) {
|
|
199
222
|
console.error('[SchemaBuilder] __FR_ENGINE__ not found in iframe window');
|
|
200
|
-
|
|
223
|
+
handleLoadError('表单引擎未找到');
|
|
201
224
|
return;
|
|
202
225
|
}
|
|
203
226
|
try {
|
|
@@ -218,10 +241,32 @@ var Design = function Design(props, ref) {
|
|
|
218
241
|
}
|
|
219
242
|
} catch (error) {
|
|
220
243
|
console.error('[SchemaBuilder] Error initializing engine:', error);
|
|
221
|
-
|
|
222
|
-
retryIframe();
|
|
244
|
+
handleLoadError('引擎初始化失败');
|
|
223
245
|
}
|
|
224
|
-
};
|
|
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]);
|
|
225
270
|
return /*#__PURE__*/React.createElement("div", {
|
|
226
271
|
style: {
|
|
227
272
|
width: '100%',
|
|
@@ -239,40 +284,76 @@ var Design = function Design(props, ref) {
|
|
|
239
284
|
flexDirection: 'column',
|
|
240
285
|
alignItems: 'center',
|
|
241
286
|
justifyContent: 'center',
|
|
242
|
-
backgroundColor: 'rgba(255, 255, 255, 0.
|
|
243
|
-
zIndex: 10
|
|
287
|
+
backgroundColor: 'rgba(255, 255, 255, 0.95)',
|
|
288
|
+
zIndex: 10,
|
|
289
|
+
padding: '20px',
|
|
290
|
+
boxSizing: 'border-box'
|
|
244
291
|
}
|
|
245
292
|
}, loadError ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
|
|
246
293
|
style: {
|
|
247
294
|
color: '#f5222d',
|
|
248
|
-
marginBottom: 16
|
|
295
|
+
marginBottom: 16,
|
|
296
|
+
textAlign: 'center',
|
|
297
|
+
fontSize: '14px'
|
|
249
298
|
}
|
|
250
299
|
}, loadError), /*#__PURE__*/React.createElement("button", {
|
|
251
|
-
onClick:
|
|
252
|
-
retryCount = 0;
|
|
253
|
-
setLoadError(null);
|
|
254
|
-
_initIframe();
|
|
255
|
-
},
|
|
300
|
+
onClick: handleManualRetry,
|
|
256
301
|
style: {
|
|
257
302
|
padding: '8px 16px',
|
|
258
303
|
backgroundColor: '#1890ff',
|
|
259
304
|
color: 'white',
|
|
260
305
|
border: 'none',
|
|
261
306
|
borderRadius: '4px',
|
|
262
|
-
cursor: 'pointer'
|
|
307
|
+
cursor: 'pointer',
|
|
308
|
+
fontSize: '14px'
|
|
263
309
|
}
|
|
264
|
-
}, "\u91CD\
|
|
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", {
|
|
265
329
|
style: {
|
|
266
330
|
fontSize: 12,
|
|
267
331
|
color: '#666',
|
|
268
|
-
|
|
332
|
+
marginBottom: 16
|
|
269
333
|
}
|
|
270
|
-
}, "\
|
|
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", {
|
|
271
350
|
ref: containerRef,
|
|
272
351
|
style: {
|
|
273
352
|
width: '100%',
|
|
274
|
-
height: '100%'
|
|
353
|
+
height: '100%',
|
|
354
|
+
minHeight: '500px',
|
|
355
|
+
position: 'relative'
|
|
275
356
|
}
|
|
276
|
-
}));
|
|
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 "));
|
|
277
358
|
};
|
|
278
359
|
export default /*#__PURE__*/forwardRef(Design);
|
package/lib/createIframe.js
CHANGED
|
@@ -5,35 +5,32 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
7
|
var createIframeContent = function createIframeContent() {
|
|
8
|
-
// 使用时间戳避免缓存
|
|
9
8
|
var timestamp = Date.now();
|
|
10
|
-
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 <!-- \u5173\u952E\u4FEE\u590D1\uFF1A\u63D0\u524D\u5B9A\u4E49 getFormRenderMaterial \u5360\u4F4D\u7B26 -->\n <script>\n (function() {\n // \u4FDD\u5B58\u771F\u6B63\u7684\u51FD\u6570\u5F15\u7528\n let __realGetFormRenderMaterial = null;\n let __isGetFormRenderMaterialReady = false;\n let __pendingCalls = [];\n \n // \u521B\u5EFA\u5B89\u5168\u7684\u4EE3\u7406\u51FD\u6570\n function __safeGetFormRenderMaterialWrapper(...args) {\n if (__isGetFormRenderMaterialReady && __realGetFormRenderMaterial) {\n return __realGetFormRenderMaterial.apply(this, args);\n }\n \n console.warn('[XRender] getFormRenderMaterial not ready yet, queuing call');\n \n // \u5982\u679C\u662F\u7B2C\u4E09\u65B9\u5E93\u7684\u8C03\u7528\uFF0C\u76F4\u63A5\u8FD4\u56DE\u7A7A\u5BF9\u8C61\u907F\u514D\u9519\u8BEF\n if (args[0] === 'AliFormRenderMaterial' && args[1] === '@ali/form-render-material') {\n console.warn('[XRender] Returning empty object for AliFormRenderMaterial');\n return {};\n }\n \n // \u5176\u4ED6\u8C03\u7528\u6392\u961F\u5904\u7406\n return new Promise((resolve, reject) => {\n __pendingCalls.push({\n args: args,\n resolve: resolve,\n reject: reject\n });\n });\n }\n \n // \u5B9A\u4E49 window.getFormRenderMaterial \u5C5E\u6027\n Object.defineProperty(window, 'getFormRenderMaterial', {\n configurable: true,\n enumerable: true,\n get: function() {\n return __safeGetFormRenderMaterialWrapper;\n },\n set: function(value) {\n console.log('[XRender] Setting getFormRenderMaterial to:', typeof value);\n __realGetFormRenderMaterial = value;\n __isGetFormRenderMaterialReady = true;\n \n // \u6267\u884C\u6392\u961F\u7684\u8C03\u7528\n __pendingCalls.forEach(call => {\n try {\n const result = value.apply(window, call.args);\n call.resolve(result);\n } catch (error) {\n call.reject(error);\n }\n });\n __pendingCalls = [];\n \n // \u901A\u77E5\u7236\u7A97\u53E3\n try {\n window.parent.postMessage({\n type: 'getFormRenderMaterial-ready',\n ready: true,\n timestamp: Date.now()\n }, '*');\n } catch(e) {}\n }\n });\n \n // \u62E6\u622A\u5371\u9669\u8C03\u7528\n const originalDefineProperty = Object.defineProperty;\n Object.defineProperty = function(obj, prop, descriptor) {\n if (prop === 'AliFormRenderMaterial' && obj === window) {\n console.warn('[XRender] Intercepted AliFormRenderMaterial definition');\n \n // \u5EF6\u8FDF\u8BBE\u7F6E AliFormRenderMaterial\n if (descriptor.value !== undefined) {\n const originalValue = descriptor.value;\n descriptor.value = undefined;\n \n setTimeout(() => {\n if (typeof window.getFormRenderMaterial === 'function') {\n try {\n const material = window.getFormRenderMaterial('AliFormRenderMaterial', '@ali/form-render-material');\n window.AliFormRenderMaterial = material || originalValue;\n console.log('[XRender] AliFormRenderMaterial set successfully');\n } catch (e) {\n console.error('[XRender] Error setting AliFormRenderMaterial:', e);\n window.AliFormRenderMaterial = originalValue;\n }\n } else {\n console.warn('[XRender] getFormRenderMaterial not available for AliFormRenderMaterial');\n window.AliFormRenderMaterial = originalValue;\n }\n }, 0);\n }\n }\n return originalDefineProperty.call(this, obj, prop, descriptor);\n };\n })();\n </script>\n\n <script>\n window.React = window.parent.React;\n window.ReactDOM = window.parent.ReactDOM;\n </script>\n \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\u4FEE\u590D2\uFF1A\u4F7F\u7528\u540C\u6B65\u65B9\u5F0F\u52A0\u8F7D fr-generator -->\n <script>\n (function() {\n const maxRetries = 3;\n let retryCount = 0;\n \n function loadFrGenerator() {\n return new Promise((resolve, reject) => {\n const script = document.createElement('script');\n const url = 'https://g.alicdn.com/fone-lowcode/fr-generator/1.1.0/js/index.js?t=' + ".concat(timestamp, " + '&retry=' + retryCount;\n script.src = url;\n script.type = 'text/javascript';\n \n script.onload = function() {\n console.log('[XRender] fr-generator loaded successfully, attempt', retryCount + 1);\n \n // \u7B49\u5F85\u51FD\u6570\u88AB\u5B9A\u4E49\n let checkCount = 0;\n const maxChecks = 50; // \u6700\u591A\u68C0\u67E55\u79D2\n const checkInterval = setInterval(() => {\n checkCount++;\n if (typeof window.getFormRenderMaterial === 'function') {\n clearInterval(checkInterval);\n console.log('[XRender] \u2713 getFormRenderMaterial is now a function');\n resolve();\n } else if (checkCount >= maxChecks) {\n clearInterval(checkInterval);\n console.warn('[XRender] getFormRenderMaterial not defined after fr-generator load');\n reject(new Error('getFormRenderMaterial not defined'));\n }\n }, 100);\n };\n \n script.onerror = function() {\n console.error('[XRender] Failed to load fr-generator, attempt', retryCount + 1);\n \n if (retryCount < maxRetries - 1) {\n retryCount++;\n setTimeout(() => loadFrGenerator().then(resolve).catch(reject), 1000 * retryCount);\n } else {\n console.error('[XRender] Max retries reached, creating emergency function');\n \n // \u521B\u5EFA\u5E94\u6025\u51FD\u6570\n window.getFormRenderMaterial = function() {\n console.error('[XRender] Using emergency fallback for getFormRenderMaterial');\n return {};\n };\n \n reject(new Error('Failed to load fr-generator after max retries'));\n }\n };\n \n // \u4F7F\u7528 document.write \u786E\u4FDD\u540C\u6B65\u6267\u884C\n document.write(script.outerHTML);\n });\n }\n \n // \u7ACB\u5373\u5F00\u59CB\u52A0\u8F7D\n loadFrGenerator().catch(error => {\n console.error('[XRender] fr-generator load failed:', error);\n });\n })();\n </script>\n </head>\n\n <body>\n <div id=\"lce-container\"></div>\n \n <!-- \u5173\u952E\u4FEE\u590D3\uFF1A\u6700\u7EC8\u68C0\u67E5 -->\n <script>\n window.addEventListener('load', function() {\n console.log('[XRender] Iframe fully loaded');\n \n // \u68C0\u67E5\u5173\u952E\u51FD\u6570\n setTimeout(() => {\n const checks = {\n getFormRenderMaterial: typeof window.getFormRenderMaterial === 'function',\n AliFormRenderMaterial: typeof window.AliFormRenderMaterial !== 'undefined',\n React: typeof window.React !== 'undefined',\n ReactDOM: typeof window.ReactDOM !== 'undefined'\n };\n \n console.log('[XRender] Final checks:', checks);\n \n if (!checks.getFormRenderMaterial) {\n console.error('[XRender] CRITICAL: getFormRenderMaterial is not a function!');\n \n // \u6700\u540E\u5C1D\u8BD5\uFF1A\u4ECE\u7236\u7A97\u53E3\u83B7\u53D6\n try {\n if (window.parent && typeof window.parent.getFormRenderMaterial === 'function') {\n window.getFormRenderMaterial = window.parent.getFormRenderMaterial;\n console.warn('[XRender] Copied getFormRenderMaterial from parent window');\n }\n } catch(e) {}\n }\n \n // \u901A\u77E5\u5F15\u64CE\u5DF2\u52A0\u8F7D\n try {\n window.parent.postMessage({\n type: 'engine-load',\n ready: true,\n checks: checks,\n timestamp: Date.now()\n }, '*');\n } catch(e) {\n console.error('[XRender] Failed to post message to parent:', e);\n }\n }, 1000);\n });\n </script>\n </body>\n </html>\n ");
|
|
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 ");
|
|
11
10
|
return html;
|
|
12
11
|
};
|
|
13
12
|
var _default = exports.default = function _default() {
|
|
14
13
|
var iframe = document.createElement('iframe');
|
|
14
|
+
|
|
15
|
+
// 设置iframe属性
|
|
15
16
|
iframe.width = '100%';
|
|
16
17
|
iframe.height = '100%';
|
|
17
18
|
iframe.frameBorder = '0';
|
|
19
|
+
iframe.style.border = 'none';
|
|
20
|
+
iframe.style.display = 'block';
|
|
18
21
|
|
|
19
|
-
//
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
var url = URL.createObjectURL(blob);
|
|
25
|
-
iframe.src = url;
|
|
22
|
+
// 添加sandbox属性但允许必要权限
|
|
23
|
+
iframe.setAttribute('sandbox', 'allow-same-origin allow-scripts allow-popups allow-forms');
|
|
24
|
+
|
|
25
|
+
// 使用srcdoc
|
|
26
|
+
iframe.srcdoc = createIframeContent();
|
|
26
27
|
|
|
27
|
-
//
|
|
28
|
-
iframe.
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
console.
|
|
33
|
-
};
|
|
34
|
-
iframe.onerror = function (error) {
|
|
35
|
-
console.error('[XRender] Iframe load error:', error);
|
|
36
|
-
URL.revokeObjectURL(url);
|
|
37
|
-
};
|
|
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
|
+
});
|
|
38
35
|
return iframe;
|
|
39
36
|
};
|
package/lib/main.js
CHANGED
|
@@ -24,14 +24,14 @@ 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
|
-
|
|
28
|
-
var retryCount = 0;
|
|
29
|
-
var MAX_RETRIES = 3;
|
|
27
|
+
// 使用模块变量存储iframe实例，但每个组件实例应该有自己独立的iframe
|
|
30
28
|
var Design = function Design(props, ref) {
|
|
31
29
|
var widgets = props.widgets,
|
|
32
30
|
settings = props.settings,
|
|
33
31
|
restProps = _objectWithoutProperties(props, _excluded);
|
|
34
32
|
var containerRef = (0, _react.useRef)(null);
|
|
33
|
+
var iframeRef = (0, _react.useRef)(null);
|
|
34
|
+
var messageHandlerRef = (0, _react.useRef)(null);
|
|
35
35
|
var _useState = (0, _react.useState)(true),
|
|
36
36
|
_useState2 = _slicedToArray(_useState, 2),
|
|
37
37
|
loading = _useState2[0],
|
|
@@ -40,123 +40,145 @@ var Design = function Design(props, ref) {
|
|
|
40
40
|
_useState4 = _slicedToArray(_useState3, 2),
|
|
41
41
|
loadError = _useState4[0],
|
|
42
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
|
+
// 暴露给父组件的方法
|
|
43
50
|
(0, _react.useImperativeHandle)(ref, function () {
|
|
44
51
|
return {
|
|
45
52
|
getValue: function getValue() {
|
|
46
|
-
var
|
|
47
|
-
return (
|
|
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);
|
|
48
55
|
},
|
|
49
56
|
setValue: function setValue(schema) {
|
|
50
|
-
var
|
|
51
|
-
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);
|
|
52
59
|
},
|
|
53
60
|
reload: function reload() {
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
}
|
|
60
|
-
iframeInstance = null;
|
|
61
|
-
retryCount = 0;
|
|
62
|
-
setLoadError(null);
|
|
63
|
-
setLoading(true);
|
|
64
|
-
_initIframe();
|
|
65
|
-
}
|
|
61
|
+
cleanup();
|
|
62
|
+
setRetryCount(0);
|
|
63
|
+
setLoadError(null);
|
|
64
|
+
setLoading(true);
|
|
65
|
+
setTimeout(initIframe, 100); // 延迟一点确保状态已更新
|
|
66
66
|
},
|
|
67
67
|
getStatus: function getStatus() {
|
|
68
68
|
return {
|
|
69
69
|
loading: loading,
|
|
70
70
|
error: loadError,
|
|
71
|
-
iframeReady: !!
|
|
71
|
+
iframeReady: !!iframeRef.current,
|
|
72
72
|
retryCount: retryCount
|
|
73
73
|
};
|
|
74
74
|
}
|
|
75
75
|
};
|
|
76
76
|
});
|
|
77
|
-
(0, _react.useEffect)(function () {
|
|
78
|
-
_initIframe();
|
|
79
77
|
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
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);
|
|
87
91
|
}
|
|
88
|
-
|
|
92
|
+
} catch (error) {
|
|
93
|
+
console.warn('[SchemaBuilder] Error removing iframe:', error);
|
|
89
94
|
}
|
|
90
|
-
|
|
95
|
+
iframeRef.current = null;
|
|
96
|
+
}
|
|
91
97
|
}, []);
|
|
92
|
-
|
|
98
|
+
|
|
99
|
+
// 初始化iframe
|
|
100
|
+
var initIframe = (0, _react.useCallback)(function () {
|
|
93
101
|
console.log('[SchemaBuilder] Initializing iframe...');
|
|
102
|
+
|
|
103
|
+
// 确保容器存在
|
|
94
104
|
if (!containerRef.current) {
|
|
95
|
-
console.error('[SchemaBuilder] Container ref is null');
|
|
96
|
-
setTimeout(
|
|
97
|
-
return _initIframe();
|
|
98
|
-
}, 100);
|
|
105
|
+
console.error('[SchemaBuilder] Container ref is null, waiting...');
|
|
106
|
+
setTimeout(initIframe, 100);
|
|
99
107
|
return;
|
|
100
108
|
}
|
|
101
109
|
|
|
102
|
-
// 清理旧的
|
|
103
|
-
|
|
104
|
-
try {
|
|
105
|
-
containerRef.current.removeChild(iframeInstance);
|
|
106
|
-
} catch (e) {
|
|
107
|
-
console.warn('[SchemaBuilder] Error removing old iframe:', e);
|
|
108
|
-
}
|
|
109
|
-
}
|
|
110
|
-
|
|
111
|
-
// 创建新的 iframe
|
|
112
|
-
iframeInstance = (0, _createIframe.default)();
|
|
110
|
+
// 清理旧的iframe
|
|
111
|
+
cleanup();
|
|
113
112
|
|
|
114
|
-
//
|
|
113
|
+
// 创建新的iframe
|
|
115
114
|
try {
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
} catch (error) {
|
|
119
|
-
console.error('[SchemaBuilder] Error appending iframe:', error);
|
|
120
|
-
setLoadError('无法创建表单设计器');
|
|
121
|
-
setLoading(false);
|
|
122
|
-
return;
|
|
123
|
-
}
|
|
115
|
+
var iframe = (0, _createIframe.default)();
|
|
116
|
+
iframeRef.current = iframe;
|
|
124
117
|
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
118
|
+
// 确保容器可见且已挂载
|
|
119
|
+
if (containerRef.current && containerRef.current.parentNode) {
|
|
120
|
+
containerRef.current.appendChild(iframe);
|
|
121
|
+
console.log('[SchemaBuilder] Iframe appended successfully');
|
|
128
122
|
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
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');
|
|
134
137
|
}
|
|
135
|
-
}
|
|
138
|
+
} catch (error) {
|
|
139
|
+
console.error('[SchemaBuilder] Error creating iframe:', error);
|
|
140
|
+
handleLoadError('创建表单设计器失败');
|
|
141
|
+
}
|
|
142
|
+
}, [cleanup, loading]);
|
|
136
143
|
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
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);
|
|
144
164
|
if (retryCount < MAX_RETRIES) {
|
|
145
|
-
retryCount
|
|
146
|
-
|
|
147
|
-
setLoadError("\u6B63\u5728\u91CD\u8BD5... (".concat(
|
|
165
|
+
var newRetryCount = retryCount + 1;
|
|
166
|
+
setRetryCount(newRetryCount);
|
|
167
|
+
setLoadError("".concat(message, "\uFF0C\u6B63\u5728\u91CD\u8BD5... (").concat(newRetryCount, "/").concat(MAX_RETRIES, ")"));
|
|
148
168
|
setTimeout(function () {
|
|
149
|
-
|
|
169
|
+
cleanup();
|
|
170
|
+
initIframe();
|
|
150
171
|
}, 1000);
|
|
151
172
|
} else {
|
|
152
|
-
|
|
153
|
-
setLoadError('表单设计器加载失败，请刷新页面重试');
|
|
173
|
+
setLoadError("".concat(message, "\uFF0C\u8BF7\u5237\u65B0\u9875\u9762\u91CD\u8BD5"));
|
|
154
174
|
setLoading(false);
|
|
155
175
|
}
|
|
156
|
-
};
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
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) {
|
|
160
182
|
return;
|
|
161
183
|
}
|
|
162
184
|
console.log('[SchemaBuilder] Received message:', event.data.type);
|
|
@@ -165,47 +187,48 @@ var Design = function Design(props, ref) {
|
|
|
165
187
|
if (event.data.ready) {
|
|
166
188
|
console.log('[SchemaBuilder] Engine loaded, checks:', event.data.checks);
|
|
167
189
|
|
|
168
|
-
//
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
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);
|
|
186
208
|
} else {
|
|
187
|
-
|
|
188
|
-
retryIframe();
|
|
209
|
+
handleLoadError('引擎未就绪');
|
|
189
210
|
}
|
|
190
211
|
break;
|
|
191
212
|
default:
|
|
192
213
|
// 忽略其他消息
|
|
193
214
|
break;
|
|
194
215
|
}
|
|
195
|
-
};
|
|
196
|
-
|
|
216
|
+
}, [handleLoadError]);
|
|
217
|
+
|
|
218
|
+
// 初始化引擎
|
|
219
|
+
var initializeEngine = (0, _react.useCallback)(function () {
|
|
197
220
|
console.log('[SchemaBuilder] Initializing engine...');
|
|
198
|
-
if (!
|
|
221
|
+
if (!iframeRef.current || !iframeRef.current.contentWindow) {
|
|
199
222
|
console.error('[SchemaBuilder] Iframe not ready for engine initialization');
|
|
200
|
-
|
|
223
|
+
handleLoadError('iframe未就绪');
|
|
201
224
|
return;
|
|
202
225
|
}
|
|
203
|
-
var iframeWindow =
|
|
226
|
+
var iframeWindow = iframeRef.current.contentWindow;
|
|
204
227
|
|
|
205
228
|
// 再次检查关键对象
|
|
206
229
|
if (!iframeWindow.__FR_ENGINE__) {
|
|
207
230
|
console.error('[SchemaBuilder] __FR_ENGINE__ not found in iframe window');
|
|
208
|
-
|
|
231
|
+
handleLoadError('表单引擎未找到');
|
|
209
232
|
return;
|
|
210
233
|
}
|
|
211
234
|
try {
|
|
@@ -226,10 +249,32 @@ var Design = function Design(props, ref) {
|
|
|
226
249
|
}
|
|
227
250
|
} catch (error) {
|
|
228
251
|
console.error('[SchemaBuilder] Error initializing engine:', error);
|
|
229
|
-
|
|
230
|
-
retryIframe();
|
|
252
|
+
handleLoadError('引擎初始化失败');
|
|
231
253
|
}
|
|
232
|
-
};
|
|
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]);
|
|
233
278
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
234
279
|
style: {
|
|
235
280
|
width: '100%',
|
|
@@ -247,40 +292,76 @@ var Design = function Design(props, ref) {
|
|
|
247
292
|
flexDirection: 'column',
|
|
248
293
|
alignItems: 'center',
|
|
249
294
|
justifyContent: 'center',
|
|
250
|
-
backgroundColor: 'rgba(255, 255, 255, 0.
|
|
251
|
-
zIndex: 10
|
|
295
|
+
backgroundColor: 'rgba(255, 255, 255, 0.95)',
|
|
296
|
+
zIndex: 10,
|
|
297
|
+
padding: '20px',
|
|
298
|
+
boxSizing: 'border-box'
|
|
252
299
|
}
|
|
253
300
|
}, loadError ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
|
|
254
301
|
style: {
|
|
255
302
|
color: '#f5222d',
|
|
256
|
-
marginBottom: 16
|
|
303
|
+
marginBottom: 16,
|
|
304
|
+
textAlign: 'center',
|
|
305
|
+
fontSize: '14px'
|
|
257
306
|
}
|
|
258
307
|
}, loadError), /*#__PURE__*/_react.default.createElement("button", {
|
|
259
|
-
onClick:
|
|
260
|
-
retryCount = 0;
|
|
261
|
-
setLoadError(null);
|
|
262
|
-
_initIframe();
|
|
263
|
-
},
|
|
308
|
+
onClick: handleManualRetry,
|
|
264
309
|
style: {
|
|
265
310
|
padding: '8px 16px',
|
|
266
311
|
backgroundColor: '#1890ff',
|
|
267
312
|
color: 'white',
|
|
268
313
|
border: 'none',
|
|
269
314
|
borderRadius: '4px',
|
|
270
|
-
cursor: 'pointer'
|
|
315
|
+
cursor: 'pointer',
|
|
316
|
+
fontSize: '14px'
|
|
271
317
|
}
|
|
272
|
-
}, "\u91CD\
|
|
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", {
|
|
273
337
|
style: {
|
|
274
338
|
fontSize: 12,
|
|
275
339
|
color: '#666',
|
|
276
|
-
|
|
340
|
+
marginBottom: 16
|
|
277
341
|
}
|
|
278
|
-
}, "\
|
|
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", {
|
|
279
358
|
ref: containerRef,
|
|
280
359
|
style: {
|
|
281
360
|
width: '100%',
|
|
282
|
-
height: '100%'
|
|
361
|
+
height: '100%',
|
|
362
|
+
minHeight: '500px',
|
|
363
|
+
position: 'relative'
|
|
283
364
|
}
|
|
284
|
-
}));
|
|
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 "));
|
|
285
366
|
};
|
|
286
367
|
var _default = exports.default = /*#__PURE__*/(0, _react.forwardRef)(Design);
|