@blocklet/pages-kit-block-studio 0.5.1 → 0.5.3
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.
|
@@ -43,6 +43,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
|
|
|
43
43
|
// import BlockStudio from '@blocklet/pages-kit-block-studio/frontend';
|
|
44
44
|
// export default BlockStudio;
|
|
45
45
|
const Session_1 = require("@arcblock/did-connect/lib/Session");
|
|
46
|
+
const Config_1 = require("@arcblock/ux/lib/Config");
|
|
46
47
|
const Empty_1 = __importDefault(require("@arcblock/ux/lib/Empty"));
|
|
47
48
|
const context_1 = require("@arcblock/ux/lib/Locale/context");
|
|
48
49
|
const Toast_1 = __importStar(require("@arcblock/ux/lib/Toast"));
|
|
@@ -62,6 +63,7 @@ const LaptopMac_1 = __importDefault(require("@mui/icons-material/LaptopMac"));
|
|
|
62
63
|
const PhoneAndroid_1 = __importDefault(require("@mui/icons-material/PhoneAndroid"));
|
|
63
64
|
const material_1 = require("@mui/material");
|
|
64
65
|
const ahooks_1 = require("ahooks");
|
|
66
|
+
const ahooks_2 = require("ahooks");
|
|
65
67
|
const cloneDeep_1 = __importDefault(require("lodash/cloneDeep"));
|
|
66
68
|
const get_1 = __importDefault(require("lodash/get"));
|
|
67
69
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
@@ -150,6 +152,7 @@ function Layout({ loadState, loadedData }) {
|
|
|
150
152
|
simulatorType: 'pc',
|
|
151
153
|
iframeLoaded: false,
|
|
152
154
|
});
|
|
155
|
+
const { theme, mode, toggleMode } = (0, Config_1.useConfig)();
|
|
153
156
|
// 添加renderComponentTrigger状态，用于触发组件重新渲染
|
|
154
157
|
const [renderComponentTrigger, setRenderComponentTrigger] = (0, react_1.useState)(0);
|
|
155
158
|
const [hSizes, setHSizes] = (0, ahooks_1.useLocalStorageState)('BlockStudioHorizontalSizes', {
|
|
@@ -160,6 +163,19 @@ function Layout({ loadState, loadedData }) {
|
|
|
160
163
|
const location = (0, react_router_dom_1.useLocation)();
|
|
161
164
|
const navigate = (0, react_router_dom_1.useNavigate)();
|
|
162
165
|
const staticData = (0, client_1.useStaticData)();
|
|
166
|
+
(0, ahooks_2.useUpdateEffect)(() => {
|
|
167
|
+
const iframe = document.querySelector('#preview-iframe');
|
|
168
|
+
if (iframe && iframe.contentWindow) {
|
|
169
|
+
// 创建精简版数据，只包含必要信息，并避免循环引用
|
|
170
|
+
const safeData = {
|
|
171
|
+
type: 'TOGGLE_MODE',
|
|
172
|
+
data: {
|
|
173
|
+
mode: mode,
|
|
174
|
+
},
|
|
175
|
+
};
|
|
176
|
+
iframe.contentWindow.postMessage(safeData, '*');
|
|
177
|
+
}
|
|
178
|
+
}, [mode]);
|
|
163
179
|
const { routes, currentPage } = (0, react_1.useMemo)(() => {
|
|
164
180
|
const routes = Object.keys(staticData)
|
|
165
181
|
.sort((a, b) => a.localeCompare(b))
|
|
@@ -359,6 +375,11 @@ function Layout({ loadState, loadedData }) {
|
|
|
359
375
|
}
|
|
360
376
|
setRenderComponentTrigger((prev) => prev + 1);
|
|
361
377
|
}
|
|
378
|
+
if (event.data && event.data.type === 'TOGGLE_MODE') {
|
|
379
|
+
if (mode !== event.data.data.mode) {
|
|
380
|
+
toggleMode();
|
|
381
|
+
}
|
|
382
|
+
}
|
|
362
383
|
};
|
|
363
384
|
window.addEventListener('message', handleMessage);
|
|
364
385
|
return () => window.removeEventListener('message', handleMessage);
|
|
@@ -424,7 +445,11 @@ function Layout({ loadState, loadedData }) {
|
|
|
424
445
|
const url = new URL(window.location.href);
|
|
425
446
|
const initialComponentId = url.searchParams.get('componentId') || state.metadata.id;
|
|
426
447
|
const initialLocale = url.searchParams.get('locale') || locale || 'en';
|
|
427
|
-
return ((0, jsx_runtime_1.jsx)(material_1.Box, { className: "custom-component-root", sx: { height: '100%', width: '100%', overflow: 'auto' }, children: (0, jsx_runtime_1.jsx)(theme_1.PageProvider, { children: (0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: (0, jsx_runtime_1.jsx)(material_1.CircularProgress, {}), children: (0, jsx_runtime_1.jsx)(components_2.CustomComponentRenderer, { locale: initialLocale, componentId: initialComponentId || state.metadata.id, dev: {
|
|
448
|
+
return ((0, jsx_runtime_1.jsx)(material_1.Box, { className: "custom-component-root", sx: { height: '100%', width: '100%', overflow: 'auto' }, children: (0, jsx_runtime_1.jsx)(theme_1.PageProvider, { children: (0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: (0, jsx_runtime_1.jsx)(material_1.CircularProgress, {}), children: (0, jsx_runtime_1.jsx)(components_2.CustomComponentRenderer, { locale: initialLocale, componentId: initialComponentId || state.metadata.id, dev: {
|
|
449
|
+
mode: 'draft',
|
|
450
|
+
components: mergedAllBlocks,
|
|
451
|
+
defaultLocale,
|
|
452
|
+
}, properties: mergedPropertiesValues }, `custom-${renderComponentTrigger}`) }) }) }));
|
|
428
453
|
}
|
|
429
454
|
// 没有匹配到路由，使用欢迎页面
|
|
430
455
|
if (notSelectedBlock) {
|
|
@@ -465,7 +490,12 @@ function Layout({ loadState, loadedData }) {
|
|
|
465
490
|
}, children: t(`themeTranslations.step${step}`) })] }, step))) })] })] }, "content-welcome"));
|
|
466
491
|
}
|
|
467
492
|
// 外部容器，包含设备切换按钮和iframe
|
|
468
|
-
return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { height: '100%', display: 'flex', flexDirection: 'column' }, children: [(0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
|
|
493
|
+
return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { height: '100%', display: 'flex', flexDirection: 'column' }, children: [(0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
|
|
494
|
+
p: 1,
|
|
495
|
+
display: 'flex',
|
|
496
|
+
justifyContent: 'center',
|
|
497
|
+
borderBottom: (theme) => `1px solid ${theme.palette.divider}`,
|
|
498
|
+
}, children: (0, jsx_runtime_1.jsxs)(material_1.ToggleButtonGroup, { size: "small", exclusive: true, color: "primary", value: state.simulatorType, onChange: (_, value) => (state.simulatorType = value ?? state.simulatorType), sx: {
|
|
469
499
|
'& > button': {
|
|
470
500
|
p: 0.75,
|
|
471
501
|
minWidth: 50,
|
|
@@ -489,16 +519,31 @@ function Layout({ loadState, loadedData }) {
|
|
|
489
519
|
flexDirection: 'column',
|
|
490
520
|
}, children: [state.simulatorType === 'pc' && ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
|
|
491
521
|
height: '30px',
|
|
492
|
-
backgroundColor: '
|
|
522
|
+
backgroundColor: 'grey.100',
|
|
493
523
|
borderTopLeftRadius: '6px',
|
|
494
524
|
borderTopRightRadius: '6px',
|
|
495
|
-
borderTop:
|
|
496
|
-
borderLeft:
|
|
497
|
-
borderRight:
|
|
525
|
+
borderTop: (theme) => `1px solid ${theme.palette.grey[100]}`,
|
|
526
|
+
borderLeft: (theme) => `1px solid ${theme.palette.grey[100]}`,
|
|
527
|
+
borderRight: (theme) => `1px solid ${theme.palette.grey[100]}`,
|
|
498
528
|
display: 'flex',
|
|
499
529
|
alignItems: 'center',
|
|
500
530
|
px: 1.5,
|
|
501
|
-
}, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { display: 'flex', gap: 0.7, alignItems: 'center' }, children: [(0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
|
|
531
|
+
}, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { display: 'flex', gap: 0.7, alignItems: 'center' }, children: [(0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
|
|
532
|
+
width: 12,
|
|
533
|
+
height: 12,
|
|
534
|
+
borderRadius: '50%',
|
|
535
|
+
backgroundColor: '#ff5f57',
|
|
536
|
+
} }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
|
|
537
|
+
width: 12,
|
|
538
|
+
height: 12,
|
|
539
|
+
borderRadius: '50%',
|
|
540
|
+
backgroundColor: '#febc2e',
|
|
541
|
+
} }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
|
|
542
|
+
width: 12,
|
|
543
|
+
height: 12,
|
|
544
|
+
borderRadius: '50%',
|
|
545
|
+
backgroundColor: '#28c840',
|
|
546
|
+
} })] }) })), state.simulatorType === 'mobile' && ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
|
|
502
547
|
height: '30px',
|
|
503
548
|
backgroundColor: '#111',
|
|
504
549
|
borderTopLeftRadius: '20px',
|
|
@@ -537,7 +582,7 @@ function Layout({ loadState, loadedData }) {
|
|
|
537
582
|
height: state.simulatorType === 'mobile' ? 'calc(100% - 60px)' : 'calc(100% - 30px)',
|
|
538
583
|
display: 'flex',
|
|
539
584
|
width: '100%',
|
|
540
|
-
backgroundColor: '
|
|
585
|
+
backgroundColor: 'background.paper',
|
|
541
586
|
...(state.simulatorType === 'mobile'
|
|
542
587
|
? {
|
|
543
588
|
borderRadius: '0 0 20px 20px',
|
|
@@ -546,7 +591,8 @@ function Layout({ loadState, loadedData }) {
|
|
|
546
591
|
: {
|
|
547
592
|
borderBottomLeftRadius: '6px',
|
|
548
593
|
borderBottomRightRadius: '6px',
|
|
549
|
-
border: '1px solid
|
|
594
|
+
border: '1px solid',
|
|
595
|
+
borderColor: 'grey.100',
|
|
550
596
|
}),
|
|
551
597
|
}, children: [state.draggingSplitPane && DraggingSplitPlaceholder, (0, jsx_runtime_1.jsx)(material_1.Box, { id: "preview-iframe", component: "iframe", src: iframeUrl, sx: {
|
|
552
598
|
flex: 1,
|