@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.
|
@@ -5,6 +5,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
5
5
|
// import BlockStudio from '@blocklet/pages-kit-block-studio/frontend';
|
|
6
6
|
// export default BlockStudio;
|
|
7
7
|
import { createAuthServiceSessionContext } from '@arcblock/did-connect/lib/Session';
|
|
8
|
+
import { useConfig } from '@arcblock/ux/lib/Config';
|
|
8
9
|
import Empty from '@arcblock/ux/lib/Empty';
|
|
9
10
|
import { LocaleProvider, useLocaleContext } from '@arcblock/ux/lib/Locale/context';
|
|
10
11
|
import Toast, { ToastProvider } from '@arcblock/ux/lib/Toast';
|
|
@@ -24,6 +25,7 @@ import LaptopMacIcon from '@mui/icons-material/LaptopMac';
|
|
|
24
25
|
import PhoneAndroidIcon from '@mui/icons-material/PhoneAndroid';
|
|
25
26
|
import { Alert, Box, Button, CircularProgress, Dialog, DialogContent, DialogTitle, List, ListItem, ListItemButton, Skeleton, Stack, StyledEngineProvider, TextField, ToggleButton, ToggleButtonGroup, Tooltip, Typography, backdropClasses, circularProgressClasses, styled, } from '@mui/material';
|
|
26
27
|
import { useDebounceFn, useLocalStorageState, useReactive } from 'ahooks';
|
|
28
|
+
import { useUpdateEffect } from 'ahooks';
|
|
27
29
|
import cloneDeep from 'lodash/cloneDeep';
|
|
28
30
|
import get from 'lodash/get';
|
|
29
31
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
@@ -112,6 +114,7 @@ function Layout({ loadState, loadedData }) {
|
|
|
112
114
|
simulatorType: 'pc',
|
|
113
115
|
iframeLoaded: false,
|
|
114
116
|
});
|
|
117
|
+
const { theme, mode, toggleMode } = useConfig();
|
|
115
118
|
// 添加renderComponentTrigger状态，用于触发组件重新渲染
|
|
116
119
|
const [renderComponentTrigger, setRenderComponentTrigger] = useState(0);
|
|
117
120
|
const [hSizes, setHSizes] = useLocalStorageState('BlockStudioHorizontalSizes', {
|
|
@@ -122,6 +125,19 @@ function Layout({ loadState, loadedData }) {
|
|
|
122
125
|
const location = useLocation();
|
|
123
126
|
const navigate = useNavigate();
|
|
124
127
|
const staticData = useStaticData();
|
|
128
|
+
useUpdateEffect(() => {
|
|
129
|
+
const iframe = document.querySelector('#preview-iframe');
|
|
130
|
+
if (iframe && iframe.contentWindow) {
|
|
131
|
+
// 创建精简版数据，只包含必要信息，并避免循环引用
|
|
132
|
+
const safeData = {
|
|
133
|
+
type: 'TOGGLE_MODE',
|
|
134
|
+
data: {
|
|
135
|
+
mode: mode,
|
|
136
|
+
},
|
|
137
|
+
};
|
|
138
|
+
iframe.contentWindow.postMessage(safeData, '*');
|
|
139
|
+
}
|
|
140
|
+
}, [mode]);
|
|
125
141
|
const { routes, currentPage } = useMemo(() => {
|
|
126
142
|
const routes = Object.keys(staticData)
|
|
127
143
|
.sort((a, b) => a.localeCompare(b))
|
|
@@ -321,6 +337,11 @@ function Layout({ loadState, loadedData }) {
|
|
|
321
337
|
}
|
|
322
338
|
setRenderComponentTrigger((prev) => prev + 1);
|
|
323
339
|
}
|
|
340
|
+
if (event.data && event.data.type === 'TOGGLE_MODE') {
|
|
341
|
+
if (mode !== event.data.data.mode) {
|
|
342
|
+
toggleMode();
|
|
343
|
+
}
|
|
344
|
+
}
|
|
324
345
|
};
|
|
325
346
|
window.addEventListener('message', handleMessage);
|
|
326
347
|
return () => window.removeEventListener('message', handleMessage);
|
|
@@ -386,7 +407,11 @@ function Layout({ loadState, loadedData }) {
|
|
|
386
407
|
const url = new URL(window.location.href);
|
|
387
408
|
const initialComponentId = url.searchParams.get('componentId') || state.metadata.id;
|
|
388
409
|
const initialLocale = url.searchParams.get('locale') || locale || 'en';
|
|
389
|
-
return (_jsx(Box, { className: "custom-component-root", sx: { height: '100%', width: '100%', overflow: 'auto' }, children: _jsx(PageProvider, { children: _jsx(Suspense, { fallback: _jsx(CircularProgress, {}), children: _jsx(CustomComponentRenderer, { locale: initialLocale, componentId: initialComponentId || state.metadata.id, dev: {
|
|
410
|
+
return (_jsx(Box, { className: "custom-component-root", sx: { height: '100%', width: '100%', overflow: 'auto' }, children: _jsx(PageProvider, { children: _jsx(Suspense, { fallback: _jsx(CircularProgress, {}), children: _jsx(CustomComponentRenderer, { locale: initialLocale, componentId: initialComponentId || state.metadata.id, dev: {
|
|
411
|
+
mode: 'draft',
|
|
412
|
+
components: mergedAllBlocks,
|
|
413
|
+
defaultLocale,
|
|
414
|
+
}, properties: mergedPropertiesValues }, `custom-${renderComponentTrigger}`) }) }) }));
|
|
390
415
|
}
|
|
391
416
|
// 没有匹配到路由，使用欢迎页面
|
|
392
417
|
if (notSelectedBlock) {
|
|
@@ -427,7 +452,12 @@ function Layout({ loadState, loadedData }) {
|
|
|
427
452
|
}, children: t(`themeTranslations.step${step}`) })] }, step))) })] })] }, "content-welcome"));
|
|
428
453
|
}
|
|
429
454
|
// 外部容器，包含设备切换按钮和iframe
|
|
430
|
-
return (_jsxs(Box, { sx: { height: '100%', display: 'flex', flexDirection: 'column' }, children: [_jsx(Box, { sx: {
|
|
455
|
+
return (_jsxs(Box, { sx: { height: '100%', display: 'flex', flexDirection: 'column' }, children: [_jsx(Box, { sx: {
|
|
456
|
+
p: 1,
|
|
457
|
+
display: 'flex',
|
|
458
|
+
justifyContent: 'center',
|
|
459
|
+
borderBottom: (theme) => `1px solid ${theme.palette.divider}`,
|
|
460
|
+
}, children: _jsxs(ToggleButtonGroup, { size: "small", exclusive: true, color: "primary", value: state.simulatorType, onChange: (_, value) => (state.simulatorType = value ?? state.simulatorType), sx: {
|
|
431
461
|
'& > button': {
|
|
432
462
|
p: 0.75,
|
|
433
463
|
minWidth: 50,
|
|
@@ -451,16 +481,31 @@ function Layout({ loadState, loadedData }) {
|
|
|
451
481
|
flexDirection: 'column',
|
|
452
482
|
}, children: [state.simulatorType === 'pc' && (_jsx(Box, { sx: {
|
|
453
483
|
height: '30px',
|
|
454
|
-
backgroundColor: '
|
|
484
|
+
backgroundColor: 'grey.100',
|
|
455
485
|
borderTopLeftRadius: '6px',
|
|
456
486
|
borderTopRightRadius: '6px',
|
|
457
|
-
borderTop:
|
|
458
|
-
borderLeft:
|
|
459
|
-
borderRight:
|
|
487
|
+
borderTop: (theme) => `1px solid ${theme.palette.grey[100]}`,
|
|
488
|
+
borderLeft: (theme) => `1px solid ${theme.palette.grey[100]}`,
|
|
489
|
+
borderRight: (theme) => `1px solid ${theme.palette.grey[100]}`,
|
|
460
490
|
display: 'flex',
|
|
461
491
|
alignItems: 'center',
|
|
462
492
|
px: 1.5,
|
|
463
|
-
}, children: _jsxs(Box, { sx: { display: 'flex', gap: 0.7, alignItems: 'center' }, children: [_jsx(Box, { sx: {
|
|
493
|
+
}, children: _jsxs(Box, { sx: { display: 'flex', gap: 0.7, alignItems: 'center' }, children: [_jsx(Box, { sx: {
|
|
494
|
+
width: 12,
|
|
495
|
+
height: 12,
|
|
496
|
+
borderRadius: '50%',
|
|
497
|
+
backgroundColor: '#ff5f57',
|
|
498
|
+
} }), _jsx(Box, { sx: {
|
|
499
|
+
width: 12,
|
|
500
|
+
height: 12,
|
|
501
|
+
borderRadius: '50%',
|
|
502
|
+
backgroundColor: '#febc2e',
|
|
503
|
+
} }), _jsx(Box, { sx: {
|
|
504
|
+
width: 12,
|
|
505
|
+
height: 12,
|
|
506
|
+
borderRadius: '50%',
|
|
507
|
+
backgroundColor: '#28c840',
|
|
508
|
+
} })] }) })), state.simulatorType === 'mobile' && (_jsxs(Box, { sx: {
|
|
464
509
|
height: '30px',
|
|
465
510
|
backgroundColor: '#111',
|
|
466
511
|
borderTopLeftRadius: '20px',
|
|
@@ -499,7 +544,7 @@ function Layout({ loadState, loadedData }) {
|
|
|
499
544
|
height: state.simulatorType === 'mobile' ? 'calc(100% - 60px)' : 'calc(100% - 30px)',
|
|
500
545
|
display: 'flex',
|
|
501
546
|
width: '100%',
|
|
502
|
-
backgroundColor: '
|
|
547
|
+
backgroundColor: 'background.paper',
|
|
503
548
|
...(state.simulatorType === 'mobile'
|
|
504
549
|
? {
|
|
505
550
|
borderRadius: '0 0 20px 20px',
|
|
@@ -508,7 +553,8 @@ function Layout({ loadState, loadedData }) {
|
|
|
508
553
|
: {
|
|
509
554
|
borderBottomLeftRadius: '6px',
|
|
510
555
|
borderBottomRightRadius: '6px',
|
|
511
|
-
border: '1px solid
|
|
556
|
+
border: '1px solid',
|
|
557
|
+
borderColor: 'grey.100',
|
|
512
558
|
}),
|
|
513
559
|
}, children: [state.draggingSplitPane && DraggingSplitPlaceholder, _jsx(Box, { id: "preview-iframe", component: "iframe", src: iframeUrl, sx: {
|
|
514
560
|
flex: 1,
|