@blocklet/pages-kit-block-studio 0.5.0 → 0.5.2

package/lib/esm/plugins/_theme.js

@@ -5,6 +5,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // import BlockStudio from '@blocklet/pages-kit-block-studio/frontend';
 // export default BlockStudio;
 import { createAuthServiceSessionContext } from '@arcblock/did-connect/lib/Session';
+import { useConfig } from '@arcblock/ux/lib/Config';
 import Empty from '@arcblock/ux/lib/Empty';
 import { LocaleProvider, useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Toast, { ToastProvider } from '@arcblock/ux/lib/Toast';
@@ -24,6 +25,7 @@ import LaptopMacIcon from '@mui/icons-material/LaptopMac';
 import PhoneAndroidIcon from '@mui/icons-material/PhoneAndroid';
 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';
 import { useDebounceFn, useLocalStorageState, useReactive } from 'ahooks';
+import { useUpdateEffect } from 'ahooks';
 import cloneDeep from 'lodash/cloneDeep';
 import get from 'lodash/get';
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -112,6 +114,7 @@ function Layout({ loadState, loadedData }) {
         simulatorType: 'pc',
         iframeLoaded: false,
     });
+    const { theme, mode, toggleMode } = useConfig();
     // 添加renderComponentTrigger状态，用于触发组件重新渲染
     const [renderComponentTrigger, setRenderComponentTrigger] = useState(0);
     const [hSizes, setHSizes] = useLocalStorageState('BlockStudioHorizontalSizes', {
@@ -122,6 +125,19 @@ function Layout({ loadState, loadedData }) {
     const location = useLocation();
     const navigate = useNavigate();
     const staticData = useStaticData();
+    useUpdateEffect(() => {
+        const iframe = document.querySelector('#preview-iframe');
+        if (iframe && iframe.contentWindow) {
+            // 创建精简版数据，只包含必要信息，并避免循环引用
+            const safeData = {
+                type: 'TOGGLE_MODE',
+                data: {
+                    mode: mode,
+                },
+            };
+            iframe.contentWindow.postMessage(safeData, '*');
+        }
+    }, [mode]);
     const { routes, currentPage } = useMemo(() => {
         const routes = Object.keys(staticData)
             .sort((a, b) => a.localeCompare(b))
@@ -321,6 +337,11 @@ function Layout({ loadState, loadedData }) {
                 }
                 setRenderComponentTrigger((prev) => prev + 1);
             }
+            if (event.data && event.data.type === 'TOGGLE_MODE') {
+                if (mode !== event.data.data.mode) {
+                    toggleMode();
+                }
+            }
         };
         window.addEventListener('message', handleMessage);
         return () => window.removeEventListener('message', handleMessage);
@@ -386,7 +407,11 @@ function Layout({ loadState, loadedData }) {
             const url = new URL(window.location.href);
             const initialComponentId = url.searchParams.get('componentId') || state.metadata.id;
             const initialLocale = url.searchParams.get('locale') || locale || 'en';
-            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: { mode: 'draft', components: mergedAllBlocks, defaultLocale }, properties: mergedPropertiesValues }, `custom-${renderComponentTrigger}`) }) }) }));
+            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: {
+                                mode: 'draft',
+                                components: mergedAllBlocks,
+                                defaultLocale,
+                            }, properties: mergedPropertiesValues }, `custom-${renderComponentTrigger}`) }) }) }));
         }
         // 没有匹配到路由，使用欢迎页面
         if (notSelectedBlock) {
@@ -427,7 +452,12 @@ function Layout({ loadState, loadedData }) {
                                             }, children: t(`themeTranslations.step${step}`) })] }, step))) })] })] }, "content-welcome"));
         }
         // 外部容器，包含设备切换按钮和iframe
-        return (_jsxs(Box, { sx: { height: '100%', display: 'flex', flexDirection: 'column' }, children: [_jsx(Box, { sx: { p: 1, display: 'flex', justifyContent: 'center', borderBottom: '1px solid #e0e0e0' }, children: _jsxs(ToggleButtonGroup, { size: "small", exclusive: true, color: "primary", value: state.simulatorType, onChange: (_, value) => (state.simulatorType = value ?? state.simulatorType), sx: {
+        return (_jsxs(Box, { sx: { height: '100%', display: 'flex', flexDirection: 'column' }, children: [_jsx(Box, { sx: {
+                        p: 1,
+                        display: 'flex',
+                        justifyContent: 'center',
+                        borderBottom: (theme) => `1px solid ${theme.palette.divider}`,
+                    }, children: _jsxs(ToggleButtonGroup, { size: "small", exclusive: true, color: "primary", value: state.simulatorType, onChange: (_, value) => (state.simulatorType = value ?? state.simulatorType), sx: {
                             '& > button': {
                                 p: 0.75,
                                 minWidth: 50,
@@ -451,16 +481,31 @@ function Layout({ loadState, loadedData }) {
                             flexDirection: 'column',
                         }, children: [state.simulatorType === 'pc' && (_jsx(Box, { sx: {
                                     height: '30px',
-                                    backgroundColor: '#f5f5f5',
+                                    backgroundColor: 'grey.100',
                                     borderTopLeftRadius: '6px',
                                     borderTopRightRadius: '6px',
-                                    borderTop: '1px solid #e0e0e0',
-                                    borderLeft: '1px solid #e0e0e0',
-                                    borderRight: '1px solid #e0e0e0',
+                                    borderTop: (theme) => `1px solid ${theme.palette.grey[100]}`,
+                                    borderLeft: (theme) => `1px solid ${theme.palette.grey[100]}`,
+                                    borderRight: (theme) => `1px solid ${theme.palette.grey[100]}`,
                                     display: 'flex',
                                     alignItems: 'center',
                                     px: 1.5,
-                                }, children: _jsxs(Box, { sx: { display: 'flex', gap: 0.7, alignItems: 'center' }, children: [_jsx(Box, { sx: { width: 12, height: 12, borderRadius: '50%', backgroundColor: '#ff5f57' } }), _jsx(Box, { sx: { width: 12, height: 12, borderRadius: '50%', backgroundColor: '#febc2e' } }), _jsx(Box, { sx: { width: 12, height: 12, borderRadius: '50%', backgroundColor: '#28c840' } })] }) })), state.simulatorType === 'mobile' && (_jsxs(Box, { sx: {
+                                }, children: _jsxs(Box, { sx: { display: 'flex', gap: 0.7, alignItems: 'center' }, children: [_jsx(Box, { sx: {
+                                                width: 12,
+                                                height: 12,
+                                                borderRadius: '50%',
+                                                backgroundColor: '#ff5f57',
+                                            } }), _jsx(Box, { sx: {
+                                                width: 12,
+                                                height: 12,
+                                                borderRadius: '50%',
+                                                backgroundColor: '#febc2e',
+                                            } }), _jsx(Box, { sx: {
+                                                width: 12,
+                                                height: 12,
+                                                borderRadius: '50%',
+                                                backgroundColor: '#28c840',
+                                            } })] }) })), state.simulatorType === 'mobile' && (_jsxs(Box, { sx: {
                                     height: '30px',
                                     backgroundColor: '#111',
                                     borderTopLeftRadius: '20px',