@blocklet/pages-kit-block-studio 0.4.127 → 0.4.128

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 Empty from '@arcblock/ux/lib/Empty';
 import { LocaleProvider, useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Toast, { ToastProvider } from '@arcblock/ux/lib/Toast';
 import { createAxios } from '@blocklet/js-sdk';
@@ -20,15 +21,19 @@ import { parsePropertyValue } from '@blocklet/pages-kit/utils/property';
 import { Dashboard } from '@blocklet/studio-ui';
 import { BlockletStudio } from '@blocklet/ui-react';
 import AddIcon from '@mui/icons-material/Add';
-import { Alert, Box, Button, CircularProgress, Dialog, DialogContent, DialogTitle, Drawer, List, ListItem, ListItemButton, Stack, StyledEngineProvider, TextField, ThemeProvider, Tooltip, Typography, backdropClasses, circularProgressClasses, styled, } from '@mui/material';
-import { useDebounceFn, useReactive } from 'ahooks';
+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, ThemeProvider, ToggleButton, ToggleButtonGroup, Tooltip, Typography, backdropClasses, circularProgressClasses, styled, } from '@mui/material';
+import { useDebounceFn, useLocalStorageState, useReactive } from 'ahooks';
 import cloneDeep from 'lodash/cloneDeep';
 import get from 'lodash/get';
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-import { Suspense, useCallback, useContext, useEffect, useMemo } from 'react';
+import { Suspense, useCallback, useContext, useEffect, useMemo, useState } from 'react';
 import { DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
 import { Navigate, useLocation, useNavigate } from 'react-router-dom';
+import SplitPane, { Pane } from 'split-pane-react';
+import 'split-pane-react/esm/themes/default.css';
 import { joinURL } from 'ufo';
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { useStaticData } from 'vite-plugin-react-pages/client';
@@ -45,17 +50,18 @@ function useSessionContext() {
     const info = useContext(SessionContext);
     return info;
 }
-const LEFT_DRAWER_WIDTH = 200;
+const LEFT_DRAWER_WIDTH = 300;
 const RIGHT_DRAWER_WIDTH = 300;
 const defaultLocale = 'en';
-const ComparisonPreviewDialog = ({ open, title, leftTitle, leftContent, rightTitle, rightContent, description = '确认后将更新配置。', loading, onConfirm, onClose, }) => {
+const ComparisonPreviewDialog = ({ open, title, leftTitle, leftContent, rightTitle, rightContent, description, loading, onConfirm, onClose, }) => {
+    const { t } = useLocaleContext();
     const handleConfirm = async () => {
         try {
             await onConfirm();
         }
         catch (error) {
             console.error('执行操作失败:', error);
-            Toast.error('执行操作失败');
+            Toast.error(t('themeTranslations.operationFailed'));
         }
     };
     return (_jsxs(Dialog, { open: open, onClose: onClose, maxWidth: "md", fullWidth: true, children: [_jsx(DialogTitle, { children: title }), _jsx(DialogContent, { children: _jsxs(Box, { children: [_jsxs(Box, { sx: { display: 'flex', flexDirection: 'row', mb: 2 }, children: [_jsxs(Box, { sx: { flex: 1, mr: 1 }, children: [_jsx(Typography, { variant: "subtitle2", sx: { mb: 1 }, children: leftTitle }), _jsx(TextField, { multiline: true, fullWidth: true, rows: 10, InputProps: {
@@ -72,13 +78,10 @@ const ComparisonPreviewDialog = ({ open, title, leftTitle, leftContent, rightTit
                                                     fontFamily: 'monospace',
                                                     fontSize: '0.875rem',
                                                 },
-                                            } })] })] }), _jsx(Typography, { variant: "body2", sx: { mt: 2, color: 'text.secondary' }, children: description })] }) }), _jsxs(Box, { sx: { display: 'flex', justifyContent: 'flex-end', p: 2 }, children: [_jsx(Button, { variant: "outlined", onClick: onClose, sx: { mr: 1 }, children: "\u53D6\u6D88" }), _jsx(Button, { variant: "contained", onClick: handleConfirm, disabled: loading, children: loading ? _jsx(CircularProgress, { size: 24 }) : '确认更新' })] })] }));
+                                            } })] })] }), _jsx(Typography, { variant: "body2", sx: { mt: 2, color: 'text.secondary' }, children: description })] }) }), _jsxs(Box, { sx: { display: 'flex', justifyContent: 'flex-end', p: 2 }, children: [_jsx(Button, { variant: "outlined", onClick: onClose, sx: { mr: 1 }, children: t('themeTranslations.cancel') }), _jsx(Button, { variant: "contained", onClick: handleConfirm, disabled: loading, children: loading ? _jsx(CircularProgress, { size: 24 }) : t('themeTranslations.confirmUpdate') })] })] }));
 };
 function Layout({ loadState, loadedData }) {
     const state = useReactive({
-        injectBlocks: [],
-        selectingParam: null,
-        componentSelectOpen: false,
         createResourceOpen: false,
         createBlockOpen: false,
         metadata: {
@@ -106,8 +109,16 @@ function Layout({ loadState, loadedData }) {
         init: false,
         allComponents: [],
         propertiesValue: {},
+        draggingSplitPane: false,
+        simulatorType: 'pc',
+        iframeLoaded: false,
     });
-    const { locale } = useLocaleContext();
+    // 添加renderComponentTrigger状态，用于触发组件重新渲染
+    const [renderComponentTrigger, setRenderComponentTrigger] = useState(0);
+    const [hSizes, setHSizes] = useLocalStorageState('BlockStudioHorizontalSizes', {
+        defaultValue: [LEFT_DRAWER_WIDTH, 'auto', RIGHT_DRAWER_WIDTH],
+    });
+    const { t, locale } = useLocaleContext();
     const { session } = useSessionContext();
     const location = useLocation();
     const navigate = useNavigate();
@@ -142,14 +153,6 @@ function Layout({ loadState, loadedData }) {
         const response = await api.get('/api/blocks/components');
         return response.data || [];
     };
-    useEffect(() => {
-        if (currentPage && state.injectBlocks.length === 0) {
-            state.injectBlocks.push({
-                ...currentPage,
-                level: 0,
-            });
-        }
-    }, [currentPage]);
     // Add new effect to fetch metadata when page changes
     useEffect(() => {
         const fetchMetadata = async () => {
@@ -235,39 +238,402 @@ function Layout({ loadState, loadedData }) {
             description: '',
         };
     };
-    let mergedPropertiesValues = Object.fromEntries(Object.values(state.metadata.properties ?? {}).map(({ data }) => {
-        return [
-            data.id,
-            {
-                value: state.propertiesValue[data.id]?.value ??
-                    parsePropertyValue(data, data.locales?.[locale]?.defaultValue ?? data.locales?.[defaultLocale]?.defaultValue, {
-                        locale,
-                        defaultLocale,
-                    }),
-            },
-        ];
-    }));
-    const getRenderContent = useCallback(() => {
-        if (loadState.type === '404') {
-            return null;
+    let mergedPropertiesValues = useMemo(() => {
+        return Object.fromEntries(Object.values(state.metadata.properties ?? {}).map(({ data }) => {
+            return [
+                data.id,
+                {
+                    value: cloneDeep(state.propertiesValue[data.id]?.value ??
+                        parsePropertyValue(data, data.locales?.[locale]?.defaultValue ?? data.locales?.[defaultLocale]?.defaultValue, {
+                            locale,
+                            defaultLocale,
+                        })),
+                },
+            ];
+        }));
+    }, [JSON.stringify(state.metadata.properties), JSON.stringify(state.propertiesValue)]);
+    // 添加防抖函数，延迟渲染
+    const { run: triggerRerender } = useDebounceFn(() => {
+        // 发送消息到 iframe
+        try {
+            const iframe = document.querySelector('#preview-iframe');
+            if (iframe && iframe.contentWindow) {
+                // 创建精简版数据，只包含必要信息，并避免循环引用
+                const safeData = {
+                    type: 'STATE_UPDATE',
+                    data: {
+                        componentId: state.metadata.id,
+                        // 不传递整个 components 对象，只传递当前组件需要的最小数据集
+                        currentComponent: {
+                            id: state.metadata.id,
+                            // 使用 JSON 序列化和反序列化清除循环引用和函数
+                            mergedPropertiesValues: cloneDeep({
+                                ...mergedPropertiesValues,
+                                updatedAt: Date.now(),
+                            } || {}),
+                        },
+                        locale: locale,
+                        defaultLocale: defaultLocale,
+                    },
+                };
+                iframe.contentWindow.postMessage(safeData, '*');
+            }
+        }
+        catch (error) {
+            console.error('Failed to send message to iframe:', error);
+        }
+    }, { wait: 50 });
+    // 当属性变化时触发重新渲染
+    useEffect(() => {
+        triggerRerender();
+    }, [JSON.stringify(mergedPropertiesValues), JSON.stringify(mergedAllBlocks), state.metadata.id]);
+    const DraggingSplitPlaceholder = useMemo(() => {
+        return (_jsx(Box, { p: 1.5, width: "100%", height: "100%", children: _jsx(Skeleton, { variant: "rectangular", height: "100%", sx: { borderRadius: 1 } }) }));
+    }, []);
+    // 修改 iframe URL 构建逻辑，添加初始状态参数
+    const iframeUrl = useMemo(() => {
+        const url = new URL(window.location.href);
+        url.searchParams.set('simulator', '1');
+        // 添加初始状态参数
+        url.searchParams.set('componentId', state.metadata.id || '');
+        url.searchParams.set('locale', locale || defaultLocale || 'en');
+        return url.toString();
+    }, [window.location.href, state.metadata.id, locale, defaultLocale]);
+    // 获取当前URL参数判断是否是在iframe内
+    const isInsideIframe = useMemo(() => {
+        const url = new URL(window.location.href);
+        return url.searchParams.get('simulator') === '1';
+    }, [window.location.href]);
+    // 添加消息事件监听
+    useEffect(() => {
+        const handleMessage = (event) => {
+            if (event.data && event.data.type === 'STATE_UPDATE') {
+                // 接收并应用父窗口发来的状态更新
+                const { componentId, currentComponent, locale } = event.data.data;
+                // 安全地更新组件ID
+                if (componentId && componentId !== state.metadata.id) {
+                    state.metadata.id = componentId;
+                }
+                // 只更新当前组件的属性值，而不是整个组件列表
+                if (currentComponent && currentComponent.mergedPropertiesValues) {
+                    state.propertiesValue = cloneDeep(currentComponent.mergedPropertiesValues);
+                }
+                setRenderComponentTrigger((prev) => prev + 1);
+            }
+        };
+        window.addEventListener('message', handleMessage);
+        return () => window.removeEventListener('message', handleMessage);
+    }, []);
+    const leftPanelContent = useMemo(() => {
+        if (state.draggingSplitPane) {
+            return DraggingSplitPlaceholder;
         }
-        if (['load-error', 'loading'].includes(loadState.type)) {
-            return (_jsx(Box, { width: "100%", height: "100%", display: "flex", justifyContent: "center", alignItems: "center", children: loadState.type === 'load-error' ? (_jsx(Alert, { severity: "error", variant: "filled", children: "Failed to load component code" })) : (_jsx(CircularProgress, {})) }));
+        return (_jsxs(Stack, { height: "100%", children: [_jsxs(Stack, { gap: 1, direction: "row", alignItems: "center", sx: { py: 2, pr: 1, pl: 0.5, flex: 1 }, children: [_jsx(TextField, { placeholder: t('themeTranslations.search'), sx: { minWidth: 60, flex: 1 }, onChange: (e) => {
+                                state.searchValue = e.target.value;
+                            } }), _jsx(Button, { variant: "contained", sx: { minWidth: 40 }, onClick: () => {
+                                state.createBlockOpen = true;
+                            }, children: _jsx(AddIcon, { fontSize: "small" }) })] }), routes?.length > 0 ? (_jsx(List, { sx: { pr: 1, overflowY: 'auto', height: 'calc(100% - 60px)' }, children: routes
+                        .map((route) => {
+                        const routeName = route;
+                        const staticDataInRoute = staticData[route]?.main;
+                        if (state.searchValue && !routeName?.toLowerCase().includes(state.searchValue?.toLowerCase())) {
+                            return null;
+                        }
+                        if (!state.allComponents?.find(({ blockName }) => `/${blockName}` === routeName)) {
+                            return null;
+                        }
+                        return (_jsx(ListItem, { disablePadding: true, children: _jsx(ListItemButton, { selected: currentPage.pageId === route, onClick: () => {
+                                    navigate(route);
+                                    state.iframeLoaded = false;
+                                }, sx: {
+                                    borderRadius: 1,
+                                    mb: 1,
+                                    width: '100%',
+                                    textOverflow: 'ellipsis',
+                                    whiteSpace: 'nowrap',
+                                    overflowX: 'hidden',
+                                    transition: 'all 0.3s ease',
+                                    '&.Mui-selected': {
+                                        backgroundColor: 'primary.main',
+                                        color: 'white',
+                                        '&:hover': {
+                                            backgroundColor: 'primary.main',
+                                        },
+                                    },
+                                    fontSize: '14px',
+                                }, children: _jsx(Tooltip, { title: staticDataInRoute.blockName || routeName, children: _jsx("div", { style: {
+                                            width: '100%',
+                                            overflow: 'hidden',
+                                            textOverflow: 'ellipsis',
+                                        }, children: staticDataInRoute.blockName || routeName }) }) }) }, route));
+                    })
+                        .filter(Boolean) })) : (_jsx(Box, { display: "flex", justifyContent: "center", alignItems: "center", height: "100%", children: _jsx(Empty, { children: _jsx(Typography, { variant: "body2", color: "text.secondary", children: t('themeTranslations.noRoutesFound') }) }) }))] }));
+    }, [routes, staticData, state.allComponents, state.searchValue, state.draggingSplitPane, locale]);
+    // 修改 middlePanelContent - iframe 内部监听消息
+    const middlePanelContent = useMemo(() => {
+        // 如果在iframe内部，添加消息接收逻辑
+        if (isInsideIframe) {
+            if (loadState.type === '404' || loadState.type === 'loading') {
+                return null;
+            }
+            if (loadState.type === 'load-error') {
+                return (_jsx(Box, { width: "100%", height: "100%", display: "flex", justifyContent: "center", alignItems: "center", children: _jsx(Alert, { severity: "error", variant: "filled", children: t('themeTranslations.failedLoadCode') }) }));
+            }
+            // 从 URL 获取初始组件 ID 和语言
+            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(ThemeProvider, { theme: pagesTheme, 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}`) }) }) }));
         }
-        // const pageData = loadedData[loadState.routePath];
-        // const Component = pageData.main.default;
-        // return <Component />;
-        return [
-            _jsx(CustomComponentRenderer, { locale: locale, componentId: state.metadata.id, dev: { mode: 'draft', components: mergedAllBlocks, defaultLocale }, properties: mergedPropertiesValues }, "custom"),
-            // <Component key="original"  />,
-        ];
-    }, [loadedData, loadState, locale, state.injectBlocks, state.metadata, mergedAllBlocks, mergedPropertiesValues]);
+        // 外部容器，包含设备切换按钮和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: {
+                            '& > button': {
+                                p: 0.75,
+                                minWidth: 50,
+                            },
+                        }, children: [_jsx(ToggleButton, { value: "pc", children: _jsx(LaptopMacIcon, { fontSize: "small" }) }), _jsx(ToggleButton, { value: "mobile", children: _jsx(PhoneAndroidIcon, { fontSize: "small" }) })] }) }), _jsx(Box, { sx: {
+                        height: '100%',
+                        width: '100%',
+                        display: 'flex',
+                        justifyContent: 'center',
+                        flex: 1,
+                        overflowY: 'auto',
+                        position: 'relative', // 为绝对定位的loading提供参考
+                        p: 1.5,
+                        alignItems: 'center',
+                    }, children: _jsxs(Box, { sx: {
+                            position: 'relative',
+                            height: '100%',
+                            width: state.simulatorType === 'mobile' ? '375px' : '100%',
+                            maxWidth: '100%',
+                            display: 'flex',
+                            flexDirection: 'column',
+                        }, children: [state.simulatorType === 'pc' && (_jsx(Box, { sx: {
+                                    height: '30px',
+                                    backgroundColor: '#f5f5f5',
+                                    borderTopLeftRadius: '6px',
+                                    borderTopRightRadius: '6px',
+                                    borderTop: '1px solid #e0e0e0',
+                                    borderLeft: '1px solid #e0e0e0',
+                                    borderRight: '1px solid #e0e0e0',
+                                    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: {
+                                    height: '30px',
+                                    backgroundColor: '#111',
+                                    borderTopLeftRadius: '20px',
+                                    borderTopRightRadius: '20px',
+                                    display: 'flex',
+                                    justifyContent: 'center',
+                                    alignItems: 'center',
+                                    boxShadow: '0 0 0 12px #111',
+                                    mt: 2,
+                                }, children: [_jsx(Box, { sx: {
+                                            width: '60px',
+                                            height: '5px',
+                                            backgroundColor: '#333',
+                                            borderRadius: '3px',
+                                        } }), _jsx(Box, { sx: {
+                                            width: '40%',
+                                            height: '5px',
+                                            backgroundColor: '#333',
+                                            borderRadius: '3px',
+                                            position: 'absolute',
+                                            bottom: 20,
+                                            left: '50%',
+                                            transform: 'translateX(-50%)',
+                                        } })] })), !state.iframeLoaded && !isInsideIframe && (_jsx(Box, { sx: {
+                                    position: 'absolute',
+                                    top: 0,
+                                    left: 0,
+                                    right: 0,
+                                    bottom: 0,
+                                    display: 'flex',
+                                    justifyContent: 'center',
+                                    alignItems: 'center',
+                                    zIndex: 2,
+                                }, children: _jsx(CircularProgress, {}) })), _jsxs(Box, { sx: {
+                                    border: 'none',
+                                    height: state.simulatorType === 'mobile' ? 'calc(100% - 60px)' : 'calc(100% - 30px)',
+                                    display: 'flex',
+                                    width: '100%',
+                                    backgroundColor: '#fff',
+                                    ...(state.simulatorType === 'mobile'
+                                        ? {
+                                            borderRadius: '0 0 20px 20px',
+                                            boxShadow: '0 0 0 12px #111',
+                                        }
+                                        : {
+                                            borderBottomLeftRadius: '6px',
+                                            borderBottomRightRadius: '6px',
+                                            border: '1px solid #e0e0e0',
+                                        }),
+                                }, children: [state.draggingSplitPane && DraggingSplitPlaceholder, _jsx(Box, { id: "preview-iframe", component: "iframe", src: iframeUrl, sx: {
+                                            flex: 1,
+                                            border: 'none',
+                                            display: state.draggingSplitPane ? 'none' : 'flex',
+                                        }, onLoad: () => {
+                                            state.iframeLoaded = true;
+                                        }, title: "Component Preview" })] })] }) })] }, "middle-panel"));
+    }, [
+        loadedData,
+        loadState,
+        iframeUrl,
+        state.simulatorType,
+        state.draggingSplitPane,
+        renderComponentTrigger,
+        isInsideIframe,
+        state.iframeLoaded,
+        locale,
+    ]);
+    const rightPanelContent = useMemo(() => {
+        if (state.draggingSplitPane) {
+            return DraggingSplitPlaceholder;
+        }
+        return (_jsxs(List, { sx: { height: '100%', overflowY: 'auto', display: 'flex', flexDirection: 'column', gap: 1 }, children: [_jsx(ListItem, { children: _jsx(Box, { sx: { width: '100%' }, children: _jsx(BasicInfo, { config: state.metadata }) }) }), _jsx(ListItem, { children: _jsxs(Box, { sx: { width: '100%' }, children: [_jsx(PropertiesConfig, { config: state.metadata, currentLocale: locale, defaultLocale: defaultLocale, allComponents: mergedAllBlocks, onUpdateConfig: (updater) => {
+                                    updater(state.metadata);
+                                }, useI18nEditor: false }), _jsxs(Stack, { direction: "column", spacing: 1, sx: { mt: 1 }, children: [_jsx(Button, { variant: "contained", size: "small", color: "primary", onClick: async () => {
+                                            try {
+                                                const { dataPath } = getStaticData() || {};
+                                                if (!dataPath) {
+                                                    Toast.error(t('themeTranslations.componentPathNotFound'));
+                                                    return;
+                                                }
+                                                Toast.info(t('themeTranslations.analyzingInterface'));
+                                                const response = await api.post('/api/blocks/interface-to-properties', {
+                                                    componentPath: dataPath,
+                                                });
+                                                if (response.data.success) {
+                                                    const { currentProperties, newProperties } = response.data;
+                                                    state.previewDialog = {
+                                                        open: true,
+                                                        title: t('themeTranslations.interfacePropertiesPreview'),
+                                                        leftTitle: t('themeTranslations.currentProperties'),
+                                                        leftContent: JSON.stringify(currentProperties, null, 2),
+                                                        rightTitle: t('themeTranslations.newProperties'),
+                                                        rightContent: JSON.stringify(newProperties, null, 2),
+                                                        description: t('themeTranslations.confirmUpdateMetadata'),
+                                                        loading: false,
+                                                        onConfirm: async () => {
+                                                            state.previewDialog.loading = true;
+                                                            try {
+                                                                const updateResponse = await api.post('/api/blocks/interface-to-properties', {
+                                                                    componentPath: dataPath,
+                                                                    write: true,
+                                                                });
+                                                                if (updateResponse.data.success) {
+                                                                    Toast.success(t('themeTranslations.metadataSuccess'));
+                                                                    // 更新当前的metadata状态
+                                                                    state.metadata = {
+                                                                        ...updateResponse.data.metadata,
+                                                                        renderer: state.metadata.renderer,
+                                                                    };
+                                                                    state.previewDialog.open = false;
+                                                                }
+                                                                else {
+                                                                    throw new Error(updateResponse.data.error || t('themeTranslations.generationFailed'));
+                                                                }
+                                                            }
+                                                            finally {
+                                                                state.previewDialog.loading = false;
+                                                            }
+                                                        },
+                                                    };
+                                                }
+                                                else {
+                                                    Toast.error(response.data.error || t('themeTranslations.previewFailed'));
+                                                }
+                                            }
+                                            catch (error) {
+                                                console.error(error);
+                                                Toast.error(t('themeTranslations.previewFailed'));
+                                            }
+                                        }, children: t('themeTranslations.interfaceToProperties') }), _jsx(Button, { variant: "outlined", size: "small", color: "primary", onClick: async () => {
+                                            try {
+                                                const { dataPath } = getStaticData() || {};
+                                                if (!dataPath) {
+                                                    Toast.error(t('themeTranslations.componentPathNotFound'));
+                                                    return;
+                                                }
+                                                Toast.info(t('themeTranslations.generatingInterface'));
+                                                const response = await api.post('/api/blocks/properties-to-interface', {
+                                                    componentPath: dataPath,
+                                                });
+                                                if (response.data.success) {
+                                                    const { currentInterface, newInterface } = response.data;
+                                                    state.previewDialog = {
+                                                        open: true,
+                                                        title: t('themeTranslations.propertiesInterfacePreview'),
+                                                        leftTitle: t('themeTranslations.currentInterface'),
+                                                        leftContent: currentInterface,
+                                                        rightTitle: t('themeTranslations.newInterface'),
+                                                        rightContent: newInterface,
+                                                        description: t('themeTranslations.confirmUpdateInterface'),
+                                                        loading: false,
+                                                        onConfirm: async () => {
+                                                            state.previewDialog.loading = true;
+                                                            try {
+                                                                const updateResponse = await api.post('/api/blocks/properties-to-interface', {
+                                                                    componentPath: dataPath,
+                                                                    write: true,
+                                                                });
+                                                                if (updateResponse.data.success) {
+                                                                    Toast.success(t('themeTranslations.interfaceSuccess'));
+                                                                    state.previewDialog.open = false;
+                                                                }
+                                                                else {
+                                                                    throw new Error(updateResponse.data.error || t('themeTranslations.generationFailed'));
+                                                                }
+                                                            }
+                                                            finally {
+                                                                state.previewDialog.loading = false;
+                                                            }
+                                                        },
+                                                    };
+                                                }
+                                                else {
+                                                    Toast.error(response.data.error || t('themeTranslations.previewGenerationFailed'));
+                                                }
+                                            }
+                                            catch (error) {
+                                                console.error(error);
+                                                Toast.error(t('themeTranslations.interfacePreviewFailed'));
+                                            }
+                                        }, children: t('themeTranslations.propertiesToInterface') })] })] }) }), state.metadata.id && (_jsx(ListItem, { children: _jsx(Box, { sx: { width: '100%' }, children: _jsx(ParametersConfig, { config: state.metadata, allComponents: mergedAllBlocks, defaultLocale: defaultLocale, locale: locale, propertiesValue: mergedPropertiesValues, onChange: ({ key, value, id, path, ...rest }) => {
+                                const realPath = [...path, 'data'];
+                                const property = get(state.metadata, realPath);
+                                // ensure property exist
+                                if (!property) {
+                                    Toast.warning(`${t('themeTranslations.propertyNotFound')} ${realPath.join('.')}`);
+                                    return;
+                                }
+                                const realValue = parsePropertyValue(property, value.value, {
+                                    locale,
+                                    defaultLocale,
+                                });
+                                state.propertiesValue[id] = {
+                                    value: realValue,
+                                };
+                            } }) }) }))] }));
+    }, [
+        JSON.stringify(state.metadata || {}),
+        locale,
+        defaultLocale,
+        JSON.stringify(mergedAllBlocks || []),
+        JSON.stringify(mergedPropertiesValues || {}),
+        getStaticData,
+        state.draggingSplitPane,
+    ]);
     // add auto redirect to first route
     if (loadState.type === '404' &&
         !routes.includes(location.pathname) &&
         !location.search.includes('no-redirect=true')) {
         return _jsx(Navigate, { to: `${firstRoute ?? '/'}`, replace: true });
     }
+    if (isInsideIframe) {
+        return middlePanelContent;
+    }
     return (_jsx(DndProvider, { backend: HTML5Backend, children: _jsxs(StyledDashboard, { HeaderProps: {
                 // @ts-ignore
                 homeLink: joinURL(basename),
@@ -275,7 +641,7 @@ function Layout({ loadState, loadedData }) {
                     return [
                         _jsx(Button, { onClick: async () => {
                                 if (!session?.user?.did) {
-                                    Toast.warning('请先连接钱包');
+                                    Toast.warning(t('themeTranslations.connectWallet'));
                                     await session.login();
                                     setTimeout(() => {
                                         state.createResourceOpen = true;
@@ -284,208 +650,35 @@ function Layout({ loadState, loadedData }) {
                                 else {
                                     state.createResourceOpen = true;
                                 }
-                            }, children: "Create Resource" }, "logout"),
+                            }, children: t('themeTranslations.createResource') }, "logout"),
                         ...addons,
                     ];
                 },
-            }, MenusDrawerProps: { sx: { [`.${backdropClasses.root}`]: { top: 64 } } }, children: [_jsxs(Drawer, { variant: "permanent", sx: {
-                        width: LEFT_DRAWER_WIDTH,
-                        flexShrink: 0,
-                        zIndex: 1000,
-                        '& .MuiDrawer-paper': {
-                            width: LEFT_DRAWER_WIDTH,
-                            boxSizing: 'border-box',
-                            position: 'relative',
-                            height: '100%',
+            }, MenusDrawerProps: { sx: { [`.${backdropClasses.root}`]: { top: 64 } } }, children: [_jsxs(StyledSplitPane, { split: "vertical", sizes: hSizes, onChange: setHSizes, sashRender: SashRender, onDragStart: () => (state.draggingSplitPane = true), onDragEnd: () => (state.draggingSplitPane = false), sx: {
+                        '&.react-split--dragging': {
+                            '.react-split__pane': {
+                                '*': {
+                                    userSelect: 'none',
+                                },
+                            },
                         },
-                    }, children: [_jsxs(Stack, { gap: 1, direction: "row", alignItems: "center", sx: { py: 2, pr: 1, pl: 0.5 }, children: [_jsx(TextField, { placeholder: "Search Blocks...", sx: { minWidth: 120 }, onChange: (e) => {
-                                        state.searchValue = e.target.value;
-                                    } }), _jsx(Button, { variant: "contained", sx: { minWidth: 'auto' }, onClick: () => {
-                                        state.createBlockOpen = true;
-                                    }, children: _jsx(AddIcon, { fontSize: "small" }) })] }), _jsx(List, { sx: { pr: 1, overflowY: 'auto' }, children: routes
-                                .map((route) => {
-                                const routeName = route;
-                                const staticDataInRoute = staticData[route]?.main;
-                                if (state.searchValue && !routeName?.toLowerCase().includes(state.searchValue?.toLowerCase())) {
-                                    return null;
-                                }
-                                if (!state.allComponents?.find(({ blockName }) => `/${blockName}` === routeName)) {
-                                    return null;
-                                }
-                                return (_jsx(ListItem, { disablePadding: true, children: _jsx(ListItemButton, { selected: currentPage.pageId === route, onClick: () => {
-                                            navigate(route);
-                                        }, sx: {
-                                            borderRadius: 1,
-                                            mb: 1,
-                                            width: '100%',
-                                            textOverflow: 'ellipsis',
-                                            whiteSpace: 'nowrap',
-                                            overflowX: 'hidden',
-                                            transition: 'all 0.3s ease',
-                                            '&.Mui-selected': {
-                                                backgroundColor: 'primary.main',
-                                                color: 'white',
-                                                '&:hover': {
-                                                    backgroundColor: 'primary.main',
-                                                },
-                                            },
-                                            fontSize: '14px',
-                                        }, children: _jsx(Tooltip, { title: staticDataInRoute.blockName || routeName, children: _jsx("div", { style: {
-                                                    width: '100%',
-                                                    overflow: 'hidden',
-                                                    textOverflow: 'ellipsis',
-                                                }, children: staticDataInRoute.blockName || routeName }) }) }) }, route));
-                            })
-                                .filter(Boolean) })] }), _jsx(Box, { sx: { flex: 1, overflowX: 'hidden', overflowY: getStaticData()?.isHtml ? 'hidden' : 'auto' }, children: _jsx(ThemeProvider, { theme: pagesTheme, children: _jsx(Suspense, { children: getRenderContent() }) }) }), _jsx(Drawer, { variant: "permanent", anchor: "right", sx: {
-                        width: RIGHT_DRAWER_WIDTH,
-                        flexShrink: 0,
-                        zIndex: 1000,
-                        '& .MuiDrawer-paper': {
-                            width: RIGHT_DRAWER_WIDTH,
-                            boxSizing: 'border-box',
-                            position: 'relative',
-                            height: '100%',
-                        },
-                    }, children: _jsxs(List, { sx: { display: 'flex', flexDirection: 'column', gap: 1 }, children: [_jsx(ListItem, { children: _jsx(Box, { sx: { width: '100%' }, children: _jsx(BasicInfo, { config: state.metadata }) }) }), _jsx(ListItem, { children: _jsxs(Box, { sx: { width: '100%' }, children: [_jsx(PropertiesConfig, { config: state.metadata, currentLocale: locale, defaultLocale: defaultLocale, allComponents: mergedAllBlocks, onUpdateConfig: (updater) => {
-                                                updater(state.metadata);
-                                            }, useI18nEditor: false }), _jsxs(Stack, { direction: "column", spacing: 1, sx: { mt: 1 }, children: [_jsx(Button, { variant: "contained", size: "small", color: "primary", onClick: async () => {
-                                                        try {
-                                                            const { dataPath } = getStaticData() || {};
-                                                            if (!dataPath) {
-                                                                Toast.error('无法找到组件路径');
-                                                                return;
-                                                            }
-                                                            Toast.info('正在分析组件接口...');
-                                                            const response = await api.post('/api/blocks/interface-to-properties', {
-                                                                componentPath: dataPath,
-                                                            });
-                                                            if (response.data.success) {
-                                                                const { currentProperties, newProperties } = response.data;
-                                                                state.previewDialog = {
-                                                                    open: true,
-                                                                    title: 'Interface → Properties 预览',
-                                                                    leftTitle: '当前 Properties',
-                                                                    leftContent: JSON.stringify(currentProperties, null, 2),
-                                                                    rightTitle: '新 Properties',
-                                                                    rightContent: JSON.stringify(newProperties, null, 2),
-                                                                    description: '确认后将更新metadata文件。这将保留现有配置值，但可能更改属性结构。',
-                                                                    loading: false,
-                                                                    onConfirm: async () => {
-                                                                        state.previewDialog.loading = true;
-                                                                        try {
-                                                                            const updateResponse = await api.post('/api/blocks/interface-to-properties', {
-                                                                                componentPath: dataPath,
-                                                                                write: true,
-                                                                            });
-                                                                            if (updateResponse.data.success) {
-                                                                                Toast.success('Metadata生成成功！');
-                                                                                // 更新当前的metadata状态
-                                                                                state.metadata = {
-                                                                                    ...updateResponse.data.metadata,
-                                                                                    renderer: state.metadata.renderer,
-                                                                                };
-                                                                                state.previewDialog.open = false;
-                                                                            }
-                                                                            else {
-                                                                                throw new Error(updateResponse.data.error || '生成失败');
-                                                                            }
-                                                                        }
-                                                                        finally {
-                                                                            state.previewDialog.loading = false;
-                                                                        }
-                                                                    },
-                                                                };
-                                                            }
-                                                            else {
-                                                                Toast.error(response.data.error || '预览失败');
-                                                            }
-                                                        }
-                                                        catch (error) {
-                                                            console.error('生成预览失败:', error);
-                                                            Toast.error('生成预览失败');
-                                                        }
-                                                    }, children: "Interface \u2192 Properties" }), _jsx(Button, { variant: "outlined", size: "small", color: "primary", onClick: async () => {
-                                                        try {
-                                                            const { dataPath } = getStaticData() || {};
-                                                            if (!dataPath) {
-                                                                Toast.error('无法找到组件路径');
-                                                                return;
-                                                            }
-                                                            Toast.info('正在生成TypeScript接口预览...');
-                                                            const response = await api.post('/api/blocks/properties-to-interface', {
-                                                                componentPath: dataPath,
-                                                            });
-                                                            if (response.data.success) {
-                                                                const { currentInterface, newInterface } = response.data;
-                                                                state.previewDialog = {
-                                                                    open: true,
-                                                                    title: 'Properties → Interface 预览',
-                                                                    leftTitle: '当前接口',
-                                                                    leftContent: currentInterface,
-                                                                    rightTitle: '新接口',
-                                                                    rightContent: newInterface,
-                                                                    description: '确认后将更新TypeScript接口。这将覆盖当前的接口定义。',
-                                                                    loading: false,
-                                                                    onConfirm: async () => {
-                                                                        state.previewDialog.loading = true;
-                                                                        try {
-                                                                            const updateResponse = await api.post('/api/blocks/properties-to-interface', {
-                                                                                componentPath: dataPath,
-                                                                                write: true,
-                                                                            });
-                                                                            if (updateResponse.data.success) {
-                                                                                Toast.success('TypeScript接口生成成功！');
-                                                                                state.previewDialog.open = false;
-                                                                            }
-                                                                            else {
-                                                                                throw new Error(updateResponse.data.error || '生成失败');
-                                                                            }
-                                                                        }
-                                                                        finally {
-                                                                            state.previewDialog.loading = false;
-                                                                        }
-                                                                    },
-                                                                };
-                                                            }
-                                                            else {
-                                                                Toast.error(response.data.error || '预览失败');
-                                                            }
-                                                        }
-                                                        catch (error) {
-                                                            console.error('生成接口预览失败:', error);
-                                                            Toast.error('生成接口预览失败');
-                                                        }
-                                                    }, children: "Properties \u2192 Interface" })] })] }) }), state.metadata.id && (_jsx(ListItem, { children: _jsx(Box, { sx: { width: '100%' }, children: _jsx(ParametersConfig, { config: state.metadata, allComponents: mergedAllBlocks, defaultLocale: defaultLocale, locale: locale, propertiesValue: mergedPropertiesValues, onChange: ({ key, value, id, path, ...rest }) => {
-                                            const realPath = [...path, 'data'];
-                                            const property = get(state.metadata, realPath);
-                                            // ensure property exist
-                                            if (!property) {
-                                                Toast.warning(`无法找到属性，请检查在 @metadata.json 中，是否存在该属性: ${realPath.join('.')}`);
-                                                return;
-                                            }
-                                            const realValue = parsePropertyValue(property, value.value, {
-                                                locale,
-                                                defaultLocale,
-                                            });
-                                            state.propertiesValue[id] = {
-                                                value: realValue,
-                                            };
-                                        } }) }) }))] }) }), _jsx(CreateResource, { open: state.createResourceOpen, onClose: () => {
+                        flex: 1,
+                    }, children: [_jsx(Pane, { minSize: 100, maxSize: 400, children: leftPanelContent }), _jsx(Pane, { minSize: 400, children: middlePanelContent }), _jsx(Pane, { minSize: 100, maxSize: '30%', children: rightPanelContent })] }), _jsx(CreateResource, { open: state.createResourceOpen, onClose: () => {
                         state.createResourceOpen = false;
-                    } }), _jsxs(Dialog, { open: state.createBlockOpen, onClose: onCloseCreateBlock, children: [_jsx(DialogTitle, { children: "Create New Block" }), _jsx(DialogContent, { children: _jsxs(Stack, { spacing: 2, sx: { pt: 1, minWidth: 300 }, children: [_jsx(TextField, { autoFocus: true, required: true, label: "Name", fullWidth: true, value: state.newBlockParams.name, onChange: (e) => {
+                    } }), _jsxs(Dialog, { open: state.createBlockOpen, onClose: onCloseCreateBlock, children: [_jsx(DialogTitle, { children: t('themeTranslations.createNewBlock') }), _jsx(DialogContent, { children: _jsxs(Stack, { spacing: 2, sx: { pt: 1, minWidth: 300 }, children: [_jsx(TextField, { autoFocus: true, required: true, label: t('themeTranslations.name'), fullWidth: true, value: state.newBlockParams.name, onChange: (e) => {
                                             state.newBlockParams.name = e.target.value.replace(/[^a-zA-Z0-9-]/g, '');
-                                        } }), _jsx(TextField, { label: "Description", fullWidth: true, multiline: true, rows: 3, value: state.newBlockParams.description, onChange: (e) => {
+                                        } }), _jsx(TextField, { label: t('themeTranslations.description'), fullWidth: true, multiline: true, rows: 3, value: state.newBlockParams.description, onChange: (e) => {
                                             state.newBlockParams.description = e.target.value;
                                         } }), _jsx(Button, { variant: "contained", fullWidth: true, onClick: async () => {
                                             if (!state.newBlockParams.name) {
-                                                Toast.warning('Block name is required');
+                                                Toast.warning(t('themeTranslations.blockNameRequired'));
                                                 return;
                                             }
                                             if (routes.some((route) => {
                                                 const staticDataInRoute = staticData[route]?.main;
                                                 return staticDataInRoute?.blockName?.toLowerCase() === state.newBlockParams.name.toLowerCase();
                                             })) {
-                                                Toast.warning('Block name already exists, please change it');
+                                                Toast.warning(t('themeTranslations.blockNameExists'));
                                                 return;
                                             }
                                             try {
@@ -498,12 +691,29 @@ function Layout({ loadState, loadedData }) {
                                             }
                                             catch (error) {
                                                 console.error('Failed to create block:', error);
-                                                Toast.error('Failed to create block');
+                                                Toast.error(t('themeTranslations.failedCreateBlock'));
                                             }
-                                        }, children: "Create" })] }) })] }), _jsx(ComparisonPreviewDialog, { open: state.previewDialog.open, title: state.previewDialog.title, leftTitle: state.previewDialog.leftTitle, leftContent: state.previewDialog.leftContent, rightTitle: state.previewDialog.rightTitle, rightContent: state.previewDialog.rightContent, description: state.previewDialog.description, loading: state.previewDialog.loading, onConfirm: state.previewDialog.onConfirm, onClose: () => {
+                                        }, children: t('themeTranslations.create') })] }) })] }), _jsx(ComparisonPreviewDialog, { open: state.previewDialog.open, title: state.previewDialog.title, leftTitle: state.previewDialog.leftTitle, leftContent: state.previewDialog.leftContent, rightTitle: state.previewDialog.rightTitle, rightContent: state.previewDialog.rightContent, description: state.previewDialog.description, loading: state.previewDialog.loading, onConfirm: state.previewDialog.onConfirm, onClose: () => {
                         state.previewDialog.open = false;
                     } })] }) }));
 }
+// Add SplitPane styling
+const StyledSplitPane = styled(SplitPane) `
+  .react-split__sash {
+    z-index: 1000; // resolve the bug of uploader zIndex
+  }
+`;
+function SashRender() {
+    return _jsx(DragHandle, {});
+}
+const DragHandle = styled('div') `
+  height: 100%;
+  background-color: #f0f0f0;
+
+  &:hover {
+    background-color: #e3e3e3;
+  }
+`;
 const StyledDashboard = styled(Dashboard) `
   .dashboard-content {
     display: flex;
@@ -557,3 +767,85 @@ function CreateResource({ open, onClose }) {
             // 默认选中的资源
             resources: {} }) }));
 }
+// 添加 themeTranslations 到 translations 对象
+// 这里我们在运行时扩展 translations 对象，而不是修改源文件
+if (!translations.en.themeTranslations) {
+    translations.en.themeTranslations = {
+        search: 'Search Blocks...',
+        createNewBlock: 'Create New Block',
+        name: 'Name',
+        description: 'Description',
+        create: 'Create',
+        blockNameRequired: 'Block name is required',
+        blockNameExists: 'Block name already exists, please change it',
+        failedCreateBlock: 'Failed to create block',
+        createResource: 'Create Resource',
+        failedLoadCode: 'Failed to load component code',
+        interfaceToProperties: 'Interface → Properties',
+        propertiesToInterface: 'Properties → Interface',
+        componentPathNotFound: 'Component path not found',
+        analyzingInterface: 'Analyzing component interface...',
+        interfacePropertiesPreview: 'Interface → Properties Preview',
+        currentProperties: 'Current Properties',
+        newProperties: 'New Properties',
+        confirmUpdateMetadata: 'Confirm to update metadata file. This will preserve existing configuration values, but may change property structure.',
+        metadataSuccess: 'Metadata generated successfully!',
+        generationFailed: 'Generation failed',
+        previewFailed: 'Failed to generate preview',
+        generatingInterface: 'Generating TypeScript interface preview...',
+        propertiesInterfacePreview: 'Properties → Interface Preview',
+        currentInterface: 'Current Interface',
+        newInterface: 'New Interface',
+        confirmUpdateInterface: 'Confirm to update TypeScript interface. This will overwrite the current interface definition.',
+        interfaceSuccess: 'TypeScript interface generated successfully!',
+        previewGenerationFailed: 'Preview failed',
+        interfacePreviewFailed: 'Failed to generate interface preview',
+        propertyNotFound: 'Property not found, please check if it exists in @metadata.json:',
+        connectWallet: 'Please connect wallet first',
+        cancel: 'Cancel',
+        confirmUpdate: 'Confirm Update',
+        configUpdateConfirmation: 'Configuration will be updated after confirmation.',
+        operationFailed: 'Operation failed',
+        noRoutesFound: 'No Components Found',
+    };
+}
+if (!translations.zh.themeTranslations) {
+    translations.zh.themeTranslations = {
+        search: '搜索组件...',
+        createNewBlock: '创建新组件',
+        name: '名称',
+        description: '描述',
+        create: '创建',
+        blockNameRequired: '组件名称必填',
+        blockNameExists: '组件名称已存在，请更改',
+        failedCreateBlock: '创建组件失败',
+        createResource: '创建资源',
+        failedLoadCode: '加载组件代码失败',
+        interfaceToProperties: '接口 → 属性',
+        propertiesToInterface: '属性 → 接口',
+        componentPathNotFound: '无法找到组件路径',
+        analyzingInterface: '正在分析组件接口...',
+        interfacePropertiesPreview: '接口 → 属性预览',
+        currentProperties: '当前属性',
+        newProperties: '新属性',
+        confirmUpdateMetadata: '确认后将更新metadata文件。这将保留现有配置值，但可能更改属性结构。',
+        metadataSuccess: 'Metadata生成成功！',
+        generationFailed: '生成失败',
+        previewFailed: '生成预览失败',
+        generatingInterface: '正在生成TypeScript接口预览...',
+        propertiesInterfacePreview: '属性 → 接口预览',
+        currentInterface: '当前接口',
+        newInterface: '新接口',
+        confirmUpdateInterface: '确认后将更新TypeScript接口。这将覆盖当前的接口定义。',
+        interfaceSuccess: 'TypeScript接口生成成功！',
+        previewGenerationFailed: '预览失败',
+        interfacePreviewFailed: '生成接口预览失败',
+        propertyNotFound: '无法找到属性，请检查在 @metadata.json 中，是否存在该属性:',
+        connectWallet: '请先连接钱包',
+        cancel: '取消',
+        confirmUpdate: '确认更新',
+        configUpdateConfirmation: '确认后将更新配置。',
+        operationFailed: '执行操作失败',
+        noRoutesFound: '未找到组件',
+    };
+}