@blocklet/pages-kit-block-studio 0.6.104 → 0.6.105

package/lib/esm/plugins/_theme.js

@@ -8,6 +8,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createAuthServiceSessionContext } from '@arcblock/did-connect-react/lib/Session';
 import { useConfig } from '@arcblock/ux/lib/Config';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { useDeepCompareMemo } from '@blocklet/pages-kit/hooks/use-deep-compare-memo';
 import Toast, { ToastProvider } from '@arcblock/ux/lib/Toast';
 import { createAxios } from '@blocklet/js-sdk';
 import { PagesKitThemeProvider } from '@blocklet/pages-kit-inner-components/theme';
@@ -31,8 +32,7 @@ import PhoneAndroidIcon from '@mui/icons-material/PhoneAndroid';
 import SettingsIcon from '@mui/icons-material/Settings';
 import SortByAlphaIcon from '@mui/icons-material/SortByAlpha';
 import { Alert, Box, Button, CircularProgress, Dialog, DialogContent, DialogTitle, IconButton, List, ListItem, ListItemButton, Skeleton, Stack, TextField, ToggleButton, ToggleButtonGroup, Tooltip, Typography, backdropClasses, circularProgressClasses, styled, } from '@mui/material';
-import { useDebounceFn, useLocalStorageState, useReactive } from 'ahooks';
-import { useUpdateEffect } from 'ahooks';
+import { useDebounceFn, useLocalStorageState, useReactive, useUpdateEffect, useDeepCompareEffect } from 'ahooks';
 import cloneDeep from 'lodash/cloneDeep';
 import get from 'lodash/get';
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -375,7 +375,7 @@ function Layout({ loadState, loadedData }) {
             description: '',
         };
     };
-    let mergedPropertiesValues = useMemo(() => {
+    let mergedPropertiesValues = useDeepCompareMemo(() => {
         return Object.fromEntries(Object.values(state.metadata.properties ?? {}).map(({ data }) => {
             return [
                 data.id,
@@ -388,7 +388,7 @@ function Layout({ loadState, loadedData }) {
                 },
             ];
         }));
-    }, [JSON.stringify(state.metadata.properties), JSON.stringify(state.propertiesValue)]);
+    }, [state.metadata.properties, state.propertiesValue]);
     // 添加防抖函数，延迟渲染
     const { run: triggerRerender } = useDebounceFn(() => {
         // 发送消息到 iframe
@@ -421,9 +421,9 @@ function Layout({ loadState, loadedData }) {
         }
     }, { wait: 50 });
     // 当属性变化时触发重新渲染
-    useEffect(() => {
+    useDeepCompareEffect(() => {
         triggerRerender();
-    }, [JSON.stringify(mergedPropertiesValues), JSON.stringify(mergedAllBlocks), state.metadata.id, locale]);
+    }, [mergedPropertiesValues, mergedAllBlocks, state.metadata.id, locale]);
     const DraggingSplitPlaceholder = useMemo(() => {
         return (_jsx(Box, { sx: {
                 p: 1.5,
@@ -628,7 +628,7 @@ function Layout({ loadState, loadedData }) {
         handleDeleteBlock,
     ]);
     // 修改 middlePanelContent - iframe 内部监听消息
-    const middlePanelContent = useMemo(() => {
+    const middlePanelContent = useDeepCompareMemo(() => {
         // 如果在iframe内部，添加消息接收逻辑
         if (isInsideIframe) {
             if (loadState.type === '404' || loadState.type === 'loading') {
@@ -821,12 +821,12 @@ function Layout({ loadState, loadedData }) {
         locale,
         mode,
         theme,
-        JSON.stringify(state.metadata || {}),
-        JSON.stringify(mergedAllBlocks || []),
-        JSON.stringify(mergedPropertiesValues || {}),
+        state.metadata || {},
+        mergedAllBlocks || [],
+        mergedPropertiesValues || {},
         handleDeleteBlock,
     ]);
-    const rightPanelContent = useMemo(() => {
+    const rightPanelContent = useDeepCompareMemo(() => {
         if (state.draggingSplitPane) {
             return DraggingSplitPlaceholder;
         }
@@ -990,11 +990,11 @@ function Layout({ loadState, loadedData }) {
                                 };
                             } }) }) }))] }));
     }, [
-        JSON.stringify(state.metadata || {}),
+        state.metadata || {},
         locale,
         defaultLocale,
-        JSON.stringify(mergedAllBlocks || []),
-        JSON.stringify(mergedPropertiesValues || {}),
+        mergedAllBlocks || [],
+        mergedPropertiesValues || {},
         getStaticData,
         state.draggingSplitPane,
         mode,