@blocklet/pages-kit-block-studio 0.5.11 → 0.5.13

package/lib/cjs/plugins/_theme.js

@@ -46,6 +46,7 @@ const Session_1 = require("@arcblock/did-connect/lib/Session");
 const Config_1 = require("@arcblock/ux/lib/Config");
 const Empty_1 = __importDefault(require("@arcblock/ux/lib/Empty"));
 const context_1 = require("@arcblock/ux/lib/Locale/context");
+const Theme_1 = require("@arcblock/ux/lib/Theme");
 const Toast_1 = __importStar(require("@arcblock/ux/lib/Toast"));
 const js_sdk_1 = require("@blocklet/js-sdk");
 const theme_1 = require("@blocklet/pages-kit-inner-components/theme");
@@ -152,7 +153,7 @@ function Layout({ loadState, loadedData }) {
         simulatorType: 'pc',
         iframeLoaded: false,
     });
-    const { theme, mode, toggleMode } = (0, Config_1.useConfig)();
+    const { theme, mode, changeMode } = (0, Config_1.useConfig)();
     // 添加renderComponentTrigger状态，用于触发组件重新渲染
     const [renderComponentTrigger, setRenderComponentTrigger] = (0, react_1.useState)(0);
     const [hSizes, setHSizes] = (0, ahooks_1.useLocalStorageState)('BlockStudioHorizontalSizes', {
@@ -377,13 +378,13 @@ function Layout({ loadState, loadedData }) {
             }
             if (event.data && event.data.type === 'TOGGLE_MODE') {
                 if (mode !== event.data.data.mode) {
-                    toggleMode();
+                    changeMode(event.data.data.mode);
                 }
             }
         };
         window.addEventListener('message', handleMessage);
         return () => window.removeEventListener('message', handleMessage);
-    }, []);
+    }, [changeMode, mode]);
     const leftPanelContent = (0, react_1.useMemo)(() => {
         if (state.draggingSplitPane) {
             return DraggingSplitPlaceholder;
@@ -445,7 +446,7 @@ 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 ((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: {
+            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.ThemeProvider, { theme: theme, 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: {
                                 mode: 'draft',
                                 components: mergedAllBlocks,
                                 defaultLocale,
@@ -612,6 +613,10 @@ function Layout({ loadState, loadedData }) {
         state.iframeLoaded,
         locale,
         mode,
+        theme,
+        JSON.stringify(state.metadata || {}),
+        JSON.stringify(mergedAllBlocks || []),
+        JSON.stringify(mergedPropertiesValues || {}),
     ]);
     const rightPanelContent = (0, react_1.useMemo)(() => {
         if (state.draggingSplitPane) {