@zzdadelu/schema-builder 1.0.0-alpha.57 → 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/createIframe.js +23 -2
- package/es/main.js +174 -109
- package/lib/createIframe.js +23 -2
- package/lib/main.js +174 -109
- package/package.json +1 -1
package/es/createIframe.js
CHANGED
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
var createIframeContent = function createIframeContent() {
|
|
2
|
-
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 \n\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=' + Date.now() + '&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 ";
|
|
2
|
+
// 使用时间戳避免缓存
|
|
3
|
+
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
5
|
return html;
|
|
4
6
|
};
|
|
5
7
|
export default (function () {
|
|
@@ -7,6 +9,25 @@ export default (function () {
|
|
|
7
9
|
iframe.width = '100%';
|
|
8
10
|
iframe.height = '100%';
|
|
9
11
|
iframe.frameBorder = '0';
|
|
10
|
-
|
|
12
|
+
|
|
13
|
+
// 使用 Blob URL 避免缓存问题
|
|
14
|
+
var htmlContent = createIframeContent();
|
|
15
|
+
var blob = new Blob([htmlContent], {
|
|
16
|
+
type: 'text/html'
|
|
17
|
+
});
|
|
18
|
+
var url = URL.createObjectURL(blob);
|
|
19
|
+
iframe.src = url;
|
|
20
|
+
|
|
21
|
+
// 清理 Blob URL
|
|
22
|
+
iframe.onload = function () {
|
|
23
|
+
setTimeout(function () {
|
|
24
|
+
return URL.revokeObjectURL(url);
|
|
25
|
+
}, 1000);
|
|
26
|
+
console.log('[XRender] Iframe loaded with Blob URL');
|
|
27
|
+
};
|
|
28
|
+
iframe.onerror = function (error) {
|
|
29
|
+
console.error('[XRender] Iframe load error:', error);
|
|
30
|
+
URL.revokeObjectURL(url);
|
|
31
|
+
};
|
|
11
32
|
return iframe;
|
|
12
33
|
});
|
package/es/main.js
CHANGED
|
@@ -16,7 +16,7 @@ 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) {
|
|
@@ -28,163 +28,207 @@ var Design = function Design(props, ref) {
|
|
|
28
28
|
_useState2 = _slicedToArray(_useState, 2),
|
|
29
29
|
loading = _useState2[0],
|
|
30
30
|
setLoading = _useState2[1];
|
|
31
|
-
var _useState3 = useState(
|
|
31
|
+
var _useState3 = useState(null),
|
|
32
32
|
_useState4 = _slicedToArray(_useState3, 2),
|
|
33
|
-
|
|
34
|
-
|
|
33
|
+
loadError = _useState4[0],
|
|
34
|
+
setLoadError = _useState4[1];
|
|
35
35
|
useImperativeHandle(ref, function () {
|
|
36
36
|
return {
|
|
37
37
|
getValue: function getValue() {
|
|
38
|
-
var
|
|
39
|
-
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);
|
|
40
40
|
},
|
|
41
41
|
setValue: function setValue(schema) {
|
|
42
|
-
var
|
|
43
|
-
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);
|
|
44
44
|
},
|
|
45
45
|
reload: function reload() {
|
|
46
|
-
if (containerRef.current &&
|
|
47
|
-
|
|
48
|
-
|
|
46
|
+
if (containerRef.current && iframeInstance) {
|
|
47
|
+
try {
|
|
48
|
+
containerRef.current.removeChild(iframeInstance);
|
|
49
|
+
} catch (e) {
|
|
50
|
+
// 忽略错误
|
|
51
|
+
}
|
|
52
|
+
iframeInstance = null;
|
|
49
53
|
retryCount = 0;
|
|
50
|
-
|
|
54
|
+
setLoadError(null);
|
|
55
|
+
setLoading(true);
|
|
56
|
+
_initIframe();
|
|
51
57
|
}
|
|
58
|
+
},
|
|
59
|
+
getStatus: function getStatus() {
|
|
60
|
+
return {
|
|
61
|
+
loading: loading,
|
|
62
|
+
error: loadError,
|
|
63
|
+
iframeReady: !!iframeInstance,
|
|
64
|
+
retryCount: retryCount
|
|
65
|
+
};
|
|
52
66
|
}
|
|
53
67
|
};
|
|
54
68
|
});
|
|
55
69
|
useEffect(function () {
|
|
56
|
-
|
|
70
|
+
_initIframe();
|
|
71
|
+
|
|
72
|
+
// 清理函数
|
|
57
73
|
return function () {
|
|
58
|
-
|
|
74
|
+
if (iframeInstance && containerRef.current) {
|
|
75
|
+
try {
|
|
76
|
+
containerRef.current.removeChild(iframeInstance);
|
|
77
|
+
} catch (e) {
|
|
78
|
+
// 忽略错误
|
|
79
|
+
}
|
|
80
|
+
iframeInstance = null;
|
|
81
|
+
}
|
|
59
82
|
};
|
|
60
83
|
}, []);
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
initIframe();
|
|
64
|
-
var messageHandler = handleMessage;
|
|
65
|
-
window.addEventListener('message', messageHandler);
|
|
66
|
-
return function () {
|
|
67
|
-
window.removeEventListener('message', messageHandler);
|
|
68
|
-
cleanupIframe();
|
|
69
|
-
};
|
|
70
|
-
}, [isMounted]);
|
|
71
|
-
var cleanupIframe = function cleanupIframe() {
|
|
72
|
-
// if (iframe && containerRef.current) {
|
|
73
|
-
// try {
|
|
74
|
-
// containerRef.current.removeChild(iframe);
|
|
75
|
-
// } catch (e) {
|
|
76
|
-
// // 忽略移除错误
|
|
77
|
-
// }
|
|
78
|
-
// iframe = null;
|
|
79
|
-
// }
|
|
80
|
-
};
|
|
81
|
-
var initIframe = function initIframe() {
|
|
82
|
-
console.log('[SchemaBuilder] Initializing iframe, retry:', retryCount);
|
|
83
|
-
|
|
84
|
-
// 确保容器存在
|
|
84
|
+
var _initIframe = function initIframe() {
|
|
85
|
+
console.log('[SchemaBuilder] Initializing iframe...');
|
|
85
86
|
if (!containerRef.current) {
|
|
86
87
|
console.error('[SchemaBuilder] Container ref is null');
|
|
88
|
+
setTimeout(function () {
|
|
89
|
+
return _initIframe();
|
|
90
|
+
}, 100);
|
|
87
91
|
return;
|
|
88
92
|
}
|
|
89
93
|
|
|
90
94
|
// 清理旧的 iframe
|
|
91
|
-
|
|
95
|
+
if (iframeInstance && containerRef.current.contains(iframeInstance)) {
|
|
96
|
+
try {
|
|
97
|
+
containerRef.current.removeChild(iframeInstance);
|
|
98
|
+
} catch (e) {
|
|
99
|
+
console.warn('[SchemaBuilder] Error removing old iframe:', e);
|
|
100
|
+
}
|
|
101
|
+
}
|
|
92
102
|
|
|
93
103
|
// 创建新的 iframe
|
|
94
|
-
|
|
104
|
+
iframeInstance = createIframe();
|
|
95
105
|
|
|
96
|
-
//
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
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('无法创建表单设计器');
|
|
102
113
|
setLoading(false);
|
|
103
|
-
};
|
|
104
|
-
|
|
105
|
-
// 确保容器存在再添加 iframe
|
|
106
|
-
if (containerRef.current) {
|
|
107
|
-
containerRef.current.appendChild(iframe);
|
|
108
|
-
} else {
|
|
109
|
-
console.error('[SchemaBuilder] Cannot append iframe, container is null');
|
|
110
114
|
return;
|
|
111
115
|
}
|
|
112
116
|
|
|
113
|
-
//
|
|
117
|
+
// 设置消息监听
|
|
118
|
+
var messageHandler = handleMessage;
|
|
119
|
+
window.addEventListener('message', messageHandler);
|
|
120
|
+
|
|
121
|
+
// 设置超时检查
|
|
114
122
|
var timeoutId = setTimeout(function () {
|
|
115
|
-
|
|
116
|
-
|
|
123
|
+
console.warn('[SchemaBuilder] Iframe initialization timeout');
|
|
124
|
+
if (loading) {
|
|
117
125
|
retryIframe();
|
|
118
126
|
}
|
|
119
|
-
},
|
|
127
|
+
}, 15000);
|
|
120
128
|
|
|
121
|
-
//
|
|
129
|
+
// 清理函数
|
|
122
130
|
return function () {
|
|
123
|
-
|
|
131
|
+
window.removeEventListener('message', messageHandler);
|
|
132
|
+
clearTimeout(timeoutId);
|
|
124
133
|
};
|
|
125
134
|
};
|
|
126
135
|
var retryIframe = function retryIframe() {
|
|
127
|
-
if (!isMounted || !containerRef.current) {
|
|
128
|
-
console.log('[SchemaBuilder] Component unmounted, skipping retry');
|
|
129
|
-
return;
|
|
130
|
-
}
|
|
131
136
|
if (retryCount < MAX_RETRIES) {
|
|
132
137
|
retryCount++;
|
|
133
|
-
console.warn("[SchemaBuilder] Retrying iframe
|
|
134
|
-
|
|
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);
|
|
135
143
|
} else {
|
|
136
144
|
console.error('[SchemaBuilder] Max retries reached');
|
|
145
|
+
setLoadError('表单设计器加载失败，请刷新页面重试');
|
|
146
|
+
setLoading(false);
|
|
137
147
|
}
|
|
138
148
|
};
|
|
139
149
|
var handleMessage = function handleMessage(event) {
|
|
140
|
-
//
|
|
150
|
+
// 只处理来自我们 iframe 的消息
|
|
151
|
+
if (!iframeInstance || event.source !== iframeInstance.contentWindow) {
|
|
152
|
+
return;
|
|
153
|
+
}
|
|
154
|
+
console.log('[SchemaBuilder] Received message:', event.data.type);
|
|
141
155
|
switch (event.data.type) {
|
|
142
|
-
case 'getFormRenderMaterial-ready':
|
|
143
|
-
console.log('[SchemaBuilder] getFormRenderMaterial is ready in iframe');
|
|
144
|
-
break;
|
|
145
156
|
case 'engine-load':
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
console.error('[SchemaBuilder] getFormRenderMaterial check failed, retrying...');
|
|
149
|
-
setTimeout(function () {
|
|
150
|
-
if (isMounted) retryIframe();
|
|
151
|
-
}, 500);
|
|
152
|
-
return;
|
|
153
|
-
}
|
|
157
|
+
if (event.data.ready) {
|
|
158
|
+
console.log('[SchemaBuilder] Engine loaded, checks:', event.data.checks);
|
|
154
159
|
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
}
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
console.error('[SchemaBuilder] __FR_ENGINE__ not found in iframe');
|
|
170
|
-
if (isMounted) retryIframe();
|
|
171
|
-
}
|
|
172
|
-
} catch (error) {
|
|
173
|
-
console.error('[SchemaBuilder] Error initializing engine:', error);
|
|
174
|
-
if (isMounted) 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;
|
|
175
174
|
}
|
|
176
|
-
}, 500);
|
|
177
175
|
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
176
|
+
// 一切正常，初始化引擎
|
|
177
|
+
initializeEngine();
|
|
178
|
+
} else {
|
|
179
|
+
console.error('[SchemaBuilder] Engine not ready');
|
|
180
|
+
retryIframe();
|
|
181
|
+
}
|
|
182
|
+
break;
|
|
182
183
|
default:
|
|
183
|
-
//
|
|
184
|
+
// 忽略其他消息
|
|
184
185
|
break;
|
|
185
186
|
}
|
|
186
187
|
};
|
|
187
|
-
|
|
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", {
|
|
188
232
|
style: {
|
|
189
233
|
position: 'absolute',
|
|
190
234
|
top: 0,
|
|
@@ -192,17 +236,38 @@ var Design = function Design(props, ref) {
|
|
|
192
236
|
right: 0,
|
|
193
237
|
bottom: 0,
|
|
194
238
|
display: 'flex',
|
|
239
|
+
flexDirection: 'column',
|
|
195
240
|
alignItems: 'center',
|
|
196
241
|
justifyContent: 'center',
|
|
197
|
-
backgroundColor: 'rgba(255, 255, 255, 0.
|
|
242
|
+
backgroundColor: 'rgba(255, 255, 255, 0.9)',
|
|
198
243
|
zIndex: 10
|
|
199
244
|
}
|
|
200
|
-
}, /*#__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", {
|
|
201
265
|
style: {
|
|
202
|
-
fontSize:
|
|
203
|
-
color: '#666'
|
|
266
|
+
fontSize: 12,
|
|
267
|
+
color: '#666',
|
|
268
|
+
marginTop: 8
|
|
204
269
|
}
|
|
205
|
-
}, "\
|
|
270
|
+
}, "\u8BF7\u7A0D\u5019 ", retryCount > 0 && "(\u91CD\u8BD5 ".concat(retryCount, "/").concat(MAX_RETRIES, ")")))), /*#__PURE__*/React.createElement("div", {
|
|
206
271
|
ref: containerRef,
|
|
207
272
|
style: {
|
|
208
273
|
width: '100%',
|
package/lib/createIframe.js
CHANGED
|
@@ -5,7 +5,9 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
7
|
var createIframeContent = function createIframeContent() {
|
|
8
|
-
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 \n\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=' + Date.now() + '&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 ";
|
|
8
|
+
// 使用时间戳避免缓存
|
|
9
|
+
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
11
|
return html;
|
|
10
12
|
};
|
|
11
13
|
var _default = exports.default = function _default() {
|
|
@@ -13,6 +15,25 @@ var _default = exports.default = function _default() {
|
|
|
13
15
|
iframe.width = '100%';
|
|
14
16
|
iframe.height = '100%';
|
|
15
17
|
iframe.frameBorder = '0';
|
|
16
|
-
|
|
18
|
+
|
|
19
|
+
// 使用 Blob URL 避免缓存问题
|
|
20
|
+
var htmlContent = createIframeContent();
|
|
21
|
+
var blob = new Blob([htmlContent], {
|
|
22
|
+
type: 'text/html'
|
|
23
|
+
});
|
|
24
|
+
var url = URL.createObjectURL(blob);
|
|
25
|
+
iframe.src = url;
|
|
26
|
+
|
|
27
|
+
// 清理 Blob URL
|
|
28
|
+
iframe.onload = function () {
|
|
29
|
+
setTimeout(function () {
|
|
30
|
+
return URL.revokeObjectURL(url);
|
|
31
|
+
}, 1000);
|
|
32
|
+
console.log('[XRender] Iframe loaded with Blob URL');
|
|
33
|
+
};
|
|
34
|
+
iframe.onerror = function (error) {
|
|
35
|
+
console.error('[XRender] Iframe load error:', error);
|
|
36
|
+
URL.revokeObjectURL(url);
|
|
37
|
+
};
|
|
17
38
|
return iframe;
|
|
18
39
|
};
|
package/lib/main.js
CHANGED
|
@@ -24,7 +24,7 @@ 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) {
|
|
@@ -36,163 +36,207 @@ var Design = function Design(props, ref) {
|
|
|
36
36
|
_useState2 = _slicedToArray(_useState, 2),
|
|
37
37
|
loading = _useState2[0],
|
|
38
38
|
setLoading = _useState2[1];
|
|
39
|
-
var _useState3 = (0, _react.useState)(
|
|
39
|
+
var _useState3 = (0, _react.useState)(null),
|
|
40
40
|
_useState4 = _slicedToArray(_useState3, 2),
|
|
41
|
-
|
|
42
|
-
|
|
41
|
+
loadError = _useState4[0],
|
|
42
|
+
setLoadError = _useState4[1];
|
|
43
43
|
(0, _react.useImperativeHandle)(ref, function () {
|
|
44
44
|
return {
|
|
45
45
|
getValue: function getValue() {
|
|
46
|
-
var
|
|
47
|
-
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);
|
|
48
48
|
},
|
|
49
49
|
setValue: function setValue(schema) {
|
|
50
|
-
var
|
|
51
|
-
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);
|
|
52
52
|
},
|
|
53
53
|
reload: function reload() {
|
|
54
|
-
if (containerRef.current &&
|
|
55
|
-
|
|
56
|
-
|
|
54
|
+
if (containerRef.current && iframeInstance) {
|
|
55
|
+
try {
|
|
56
|
+
containerRef.current.removeChild(iframeInstance);
|
|
57
|
+
} catch (e) {
|
|
58
|
+
// 忽略错误
|
|
59
|
+
}
|
|
60
|
+
iframeInstance = null;
|
|
57
61
|
retryCount = 0;
|
|
58
|
-
|
|
62
|
+
setLoadError(null);
|
|
63
|
+
setLoading(true);
|
|
64
|
+
_initIframe();
|
|
59
65
|
}
|
|
66
|
+
},
|
|
67
|
+
getStatus: function getStatus() {
|
|
68
|
+
return {
|
|
69
|
+
loading: loading,
|
|
70
|
+
error: loadError,
|
|
71
|
+
iframeReady: !!iframeInstance,
|
|
72
|
+
retryCount: retryCount
|
|
73
|
+
};
|
|
60
74
|
}
|
|
61
75
|
};
|
|
62
76
|
});
|
|
63
77
|
(0, _react.useEffect)(function () {
|
|
64
|
-
|
|
78
|
+
_initIframe();
|
|
79
|
+
|
|
80
|
+
// 清理函数
|
|
65
81
|
return function () {
|
|
66
|
-
|
|
82
|
+
if (iframeInstance && containerRef.current) {
|
|
83
|
+
try {
|
|
84
|
+
containerRef.current.removeChild(iframeInstance);
|
|
85
|
+
} catch (e) {
|
|
86
|
+
// 忽略错误
|
|
87
|
+
}
|
|
88
|
+
iframeInstance = null;
|
|
89
|
+
}
|
|
67
90
|
};
|
|
68
91
|
}, []);
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
initIframe();
|
|
72
|
-
var messageHandler = handleMessage;
|
|
73
|
-
window.addEventListener('message', messageHandler);
|
|
74
|
-
return function () {
|
|
75
|
-
window.removeEventListener('message', messageHandler);
|
|
76
|
-
cleanupIframe();
|
|
77
|
-
};
|
|
78
|
-
}, [isMounted]);
|
|
79
|
-
var cleanupIframe = function cleanupIframe() {
|
|
80
|
-
// if (iframe && containerRef.current) {
|
|
81
|
-
// try {
|
|
82
|
-
// containerRef.current.removeChild(iframe);
|
|
83
|
-
// } catch (e) {
|
|
84
|
-
// // 忽略移除错误
|
|
85
|
-
// }
|
|
86
|
-
// iframe = null;
|
|
87
|
-
// }
|
|
88
|
-
};
|
|
89
|
-
var initIframe = function initIframe() {
|
|
90
|
-
console.log('[SchemaBuilder] Initializing iframe, retry:', retryCount);
|
|
91
|
-
|
|
92
|
-
// 确保容器存在
|
|
92
|
+
var _initIframe = function initIframe() {
|
|
93
|
+
console.log('[SchemaBuilder] Initializing iframe...');
|
|
93
94
|
if (!containerRef.current) {
|
|
94
95
|
console.error('[SchemaBuilder] Container ref is null');
|
|
96
|
+
setTimeout(function () {
|
|
97
|
+
return _initIframe();
|
|
98
|
+
}, 100);
|
|
95
99
|
return;
|
|
96
100
|
}
|
|
97
101
|
|
|
98
102
|
// 清理旧的 iframe
|
|
99
|
-
|
|
103
|
+
if (iframeInstance && containerRef.current.contains(iframeInstance)) {
|
|
104
|
+
try {
|
|
105
|
+
containerRef.current.removeChild(iframeInstance);
|
|
106
|
+
} catch (e) {
|
|
107
|
+
console.warn('[SchemaBuilder] Error removing old iframe:', e);
|
|
108
|
+
}
|
|
109
|
+
}
|
|
100
110
|
|
|
101
111
|
// 创建新的 iframe
|
|
102
|
-
|
|
112
|
+
iframeInstance = (0, _createIframe.default)();
|
|
103
113
|
|
|
104
|
-
//
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
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('无法创建表单设计器');
|
|
110
121
|
setLoading(false);
|
|
111
|
-
};
|
|
112
|
-
|
|
113
|
-
// 确保容器存在再添加 iframe
|
|
114
|
-
if (containerRef.current) {
|
|
115
|
-
containerRef.current.appendChild(iframe);
|
|
116
|
-
} else {
|
|
117
|
-
console.error('[SchemaBuilder] Cannot append iframe, container is null');
|
|
118
122
|
return;
|
|
119
123
|
}
|
|
120
124
|
|
|
121
|
-
//
|
|
125
|
+
// 设置消息监听
|
|
126
|
+
var messageHandler = handleMessage;
|
|
127
|
+
window.addEventListener('message', messageHandler);
|
|
128
|
+
|
|
129
|
+
// 设置超时检查
|
|
122
130
|
var timeoutId = setTimeout(function () {
|
|
123
|
-
|
|
124
|
-
|
|
131
|
+
console.warn('[SchemaBuilder] Iframe initialization timeout');
|
|
132
|
+
if (loading) {
|
|
125
133
|
retryIframe();
|
|
126
134
|
}
|
|
127
|
-
},
|
|
135
|
+
}, 15000);
|
|
128
136
|
|
|
129
|
-
//
|
|
137
|
+
// 清理函数
|
|
130
138
|
return function () {
|
|
131
|
-
|
|
139
|
+
window.removeEventListener('message', messageHandler);
|
|
140
|
+
clearTimeout(timeoutId);
|
|
132
141
|
};
|
|
133
142
|
};
|
|
134
143
|
var retryIframe = function retryIframe() {
|
|
135
|
-
if (!isMounted || !containerRef.current) {
|
|
136
|
-
console.log('[SchemaBuilder] Component unmounted, skipping retry');
|
|
137
|
-
return;
|
|
138
|
-
}
|
|
139
144
|
if (retryCount < MAX_RETRIES) {
|
|
140
145
|
retryCount++;
|
|
141
|
-
console.warn("[SchemaBuilder] Retrying iframe
|
|
142
|
-
|
|
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);
|
|
143
151
|
} else {
|
|
144
152
|
console.error('[SchemaBuilder] Max retries reached');
|
|
153
|
+
setLoadError('表单设计器加载失败，请刷新页面重试');
|
|
154
|
+
setLoading(false);
|
|
145
155
|
}
|
|
146
156
|
};
|
|
147
157
|
var handleMessage = function handleMessage(event) {
|
|
148
|
-
//
|
|
158
|
+
// 只处理来自我们 iframe 的消息
|
|
159
|
+
if (!iframeInstance || event.source !== iframeInstance.contentWindow) {
|
|
160
|
+
return;
|
|
161
|
+
}
|
|
162
|
+
console.log('[SchemaBuilder] Received message:', event.data.type);
|
|
149
163
|
switch (event.data.type) {
|
|
150
|
-
case 'getFormRenderMaterial-ready':
|
|
151
|
-
console.log('[SchemaBuilder] getFormRenderMaterial is ready in iframe');
|
|
152
|
-
break;
|
|
153
164
|
case 'engine-load':
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
console.error('[SchemaBuilder] getFormRenderMaterial check failed, retrying...');
|
|
157
|
-
setTimeout(function () {
|
|
158
|
-
if (isMounted) retryIframe();
|
|
159
|
-
}, 500);
|
|
160
|
-
return;
|
|
161
|
-
}
|
|
165
|
+
if (event.data.ready) {
|
|
166
|
+
console.log('[SchemaBuilder] Engine loaded, checks:', event.data.checks);
|
|
162
167
|
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
}
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
console.error('[SchemaBuilder] __FR_ENGINE__ not found in iframe');
|
|
178
|
-
if (isMounted) retryIframe();
|
|
179
|
-
}
|
|
180
|
-
} catch (error) {
|
|
181
|
-
console.error('[SchemaBuilder] Error initializing engine:', error);
|
|
182
|
-
if (isMounted) 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;
|
|
183
182
|
}
|
|
184
|
-
}, 500);
|
|
185
183
|
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
184
|
+
// 一切正常，初始化引擎
|
|
185
|
+
initializeEngine();
|
|
186
|
+
} else {
|
|
187
|
+
console.error('[SchemaBuilder] Engine not ready');
|
|
188
|
+
retryIframe();
|
|
189
|
+
}
|
|
190
|
+
break;
|
|
190
191
|
default:
|
|
191
|
-
//
|
|
192
|
+
// 忽略其他消息
|
|
192
193
|
break;
|
|
193
194
|
}
|
|
194
195
|
};
|
|
195
|
-
|
|
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", {
|
|
196
240
|
style: {
|
|
197
241
|
position: 'absolute',
|
|
198
242
|
top: 0,
|
|
@@ -200,17 +244,38 @@ var Design = function Design(props, ref) {
|
|
|
200
244
|
right: 0,
|
|
201
245
|
bottom: 0,
|
|
202
246
|
display: 'flex',
|
|
247
|
+
flexDirection: 'column',
|
|
203
248
|
alignItems: 'center',
|
|
204
249
|
justifyContent: 'center',
|
|
205
|
-
backgroundColor: 'rgba(255, 255, 255, 0.
|
|
250
|
+
backgroundColor: 'rgba(255, 255, 255, 0.9)',
|
|
206
251
|
zIndex: 10
|
|
207
252
|
}
|
|
208
|
-
}, /*#__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", {
|
|
209
273
|
style: {
|
|
210
|
-
fontSize:
|
|
211
|
-
color: '#666'
|
|
274
|
+
fontSize: 12,
|
|
275
|
+
color: '#666',
|
|
276
|
+
marginTop: 8
|
|
212
277
|
}
|
|
213
|
-
}, "\
|
|
278
|
+
}, "\u8BF7\u7A0D\u5019 ", retryCount > 0 && "(\u91CD\u8BD5 ".concat(retryCount, "/").concat(MAX_RETRIES, ")")))), /*#__PURE__*/_react.default.createElement("div", {
|
|
214
279
|
ref: containerRef,
|
|
215
280
|
style: {
|
|
216
281
|
width: '100%',
|