@blocklet/pages-kit-block-studio 0.4.64 → 0.4.66

package/lib/cjs/plugins/_theme.js

@@ -1,7 +1,540 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = Theme;
 const jsx_runtime_1 = require("react/jsx-runtime");
-function Theme() {
-    return (0, jsx_runtime_1.jsx)("div", { children: "Theme" });
+/* eslint-disable */
+// @ts-nocheck
+const Session_1 = require("@arcblock/did-connect/lib/Session");
+const context_1 = require("@arcblock/ux/lib/Locale/context");
+const Toast_1 = __importStar(require("@arcblock/ux/lib/Toast"));
+const js_sdk_1 = require("@blocklet/js-sdk");
+// @ts-ignore
+const theme_1 = require("@blocklet/pages-kit-inner-components/theme");
+// @ts-ignore
+const components_1 = require("@blocklet/pages-kit-runtime/components");
+// @ts-ignore
+const locales_1 = require("@blocklet/pages-kit-runtime/locales");
+const components_2 = require("@blocklet/pages-kit/components");
+// @ts-ignore
+const studio_ui_1 = require("@blocklet/studio-ui");
+const ui_react_1 = require("@blocklet/ui-react");
+const Add_1 = __importDefault(require("@mui/icons-material/Add"));
+const material_1 = require("@mui/material");
+const ahooks_1 = require("ahooks");
+const cloneDeep_1 = __importDefault(require("lodash/cloneDeep"));
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const react_1 = require("react");
+const react_dnd_1 = require("react-dnd");
+const react_dnd_html5_backend_1 = require("react-dnd-html5-backend");
+const react_router_dom_1 = require("react-router-dom");
+const ufo_1 = require("ufo");
+// eslint-disable-next-line import/no-extraneous-dependencies
+const client_1 = require("vite-plugin-react-pages/client");
+// @ts-ignore
+const basename = window.blocklet?.prefix || '/';
+const PAGES_KIT_BLOCK_STUDIO_BLOCKLET_DID = 'z2qa7rr3eUyVnWp2PCxEVARuUfLFh6cE5V2xV';
+const api = (0, js_sdk_1.createAxios)({
+    timeout: 200000,
+}, {
+    componentDid: PAGES_KIT_BLOCK_STUDIO_BLOCKLET_DID,
+});
+const { SessionProvider, SessionContext, SessionConsumer, withSession } = (0, Session_1.createAuthServiceSessionContext)();
+const LEFT_DRAWER_WIDTH = 200;
+const RIGHT_DRAWER_WIDTH = 300;
+const ComparisonPreviewDialog = ({ open, title, leftTitle, leftContent, rightTitle, rightContent, description = '确认后将更新配置。', loading, onConfirm, onClose, }) => {
+    const handleConfirm = async () => {
+        try {
+            await onConfirm();
+        }
+        catch (error) {
+            console.error('执行操作失败:', error);
+            Toast_1.default.error('执行操作失败');
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)(material_1.Dialog, { open: open, onClose: onClose, maxWidth: "md", fullWidth: true, children: [(0, jsx_runtime_1.jsx)(material_1.DialogTitle, { children: title }), (0, jsx_runtime_1.jsx)(material_1.DialogContent, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { display: 'flex', flexDirection: 'row', mb: 2 }, children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { flex: 1, mr: 1 }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "subtitle2", sx: { mb: 1 }, children: leftTitle }), (0, jsx_runtime_1.jsx)(material_1.TextField, { multiline: true, fullWidth: true, rows: 10, InputProps: {
+                                                readOnly: true,
+                                            }, value: leftContent, sx: {
+                                                '& .MuiOutlinedInput-root': {
+                                                    fontFamily: 'monospace',
+                                                    fontSize: '0.875rem',
+                                                },
+                                            } })] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { flex: 1, ml: 1 }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "subtitle2", sx: { mb: 1 }, children: rightTitle }), (0, jsx_runtime_1.jsx)(material_1.TextField, { multiline: true, fullWidth: true, rows: 10, InputProps: {
+                                                readOnly: true,
+                                            }, value: rightContent, sx: {
+                                                '& .MuiOutlinedInput-root': {
+                                                    fontFamily: 'monospace',
+                                                    fontSize: '0.875rem',
+                                                },
+                                            } })] })] }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", sx: { mt: 2, color: 'text.secondary' }, children: description })] }) }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { display: 'flex', justifyContent: 'flex-end', p: 2 }, children: [(0, jsx_runtime_1.jsx)(material_1.Button, { variant: "outlined", onClick: onClose, sx: { mr: 1 }, children: "\u53D6\u6D88" }), (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", onClick: handleConfirm, disabled: loading, children: loading ? (0, jsx_runtime_1.jsx)(material_1.CircularProgress, { size: 24 }) : '确认更新' })] })] }));
+};
+function Layout({ loadState, loadedData }) {
+    const state = (0, ahooks_1.useReactive)({
+        injectBlocks: [],
+        selectingParam: null,
+        componentSelectOpen: false,
+        createResourceOpen: false,
+        createBlockOpen: false,
+        metadata: {
+            id: '',
+            createdAt: '',
+            updatedAt: '',
+        },
+        data: {},
+        allBlocks: {},
+        searchValue: '',
+        newBlockParams: {
+            name: '',
+            description: '',
+        },
+        previewDialog: {
+            open: false,
+            title: '',
+            leftTitle: '',
+            leftContent: '',
+            rightTitle: '',
+            rightContent: '',
+            description: '',
+            loading: false,
+            onConfirm: async () => { },
+        },
+    });
+    const { locale } = (0, context_1.useLocaleContext)();
+    const location = (0, react_router_dom_1.useLocation)();
+    const navigate = (0, react_router_dom_1.useNavigate)();
+    const staticData = (0, client_1.useStaticData)();
+    const { routes, firstRoute, currentPage } = (0, react_1.useMemo)(() => {
+        const routes = Object.keys(staticData).sort((a, b) => a.localeCompare(b));
+        return {
+            routes,
+            firstRoute: routes.find((route) => route !== '404' && route !== '*'),
+            currentPage: {
+                ...staticData[location.pathname]?.main,
+                pageId: location.pathname,
+            },
+        };
+    }, [staticData, location.pathname]);
+    const getStaticData = (0, react_1.useCallback)(() => {
+        return staticData[location.pathname]?.main || {};
+    }, [staticData, location.pathname]);
+    const getBlockMetadata = async (metadataPath) => {
+        if (!metadataPath)
+            return {};
+        const response = await api.get(`/api/blocks?path=${encodeURIComponent(metadataPath)}`);
+        return response.data || {};
+    };
+    const getAllBlocks = async () => {
+        const response = await api.get('/api/blocks/all');
+        return response.data || [];
+    };
+    const debouncedUpdateMetadata = (0, ahooks_1.useDebounceFn)(async (metadata) => {
+        const { metadataPath } = getStaticData() || {};
+        if (metadataPath) {
+            try {
+                const metdadataWithoutRenderer = (0, cloneDeep_1.default)(metadata);
+                delete metdadataWithoutRenderer.renderer;
+                await api.post('/api/blocks', {
+                    path: metadataPath,
+                    content: metdadataWithoutRenderer,
+                });
+            }
+            catch (error) {
+                console.error('Failed to write metadata:', error);
+            }
+        }
+    }, { wait: 500 });
+    (0, react_1.useEffect)(() => {
+        debouncedUpdateMetadata.run(state.metadata);
+    }, [state.metadata, debouncedUpdateMetadata]);
+    (0, react_1.useEffect)(() => {
+        if (currentPage && state.injectBlocks.length === 0) {
+            state.injectBlocks.push({
+                ...currentPage,
+                level: 0,
+            });
+        }
+    }, [currentPage]);
+    // Add new effect to fetch metadata when page changes
+    (0, react_1.useEffect)(() => {
+        const fetchMetadata = async () => {
+            const { metadataPath, code } = getStaticData() || {};
+            if (metadataPath) {
+                try {
+                    const metadata = await getBlockMetadata(metadataPath);
+                    state.metadata = {
+                        ...metadata,
+                        renderer: {
+                            script: code,
+                            type: 'react-component',
+                        },
+                    };
+                }
+                catch (error) {
+                    console.error('Failed to fetch metadata:', error);
+                }
+            }
+        };
+        const fetchAllBlocks = async () => {
+            const allBlocks = await getAllBlocks();
+            state.allBlocks = allBlocks;
+        };
+        fetchMetadata();
+        fetchAllBlocks();
+    }, [location.pathname]); // 当路由变化时重新获取
+    const mergedAllBlocks = (0, react_1.useMemo)(() => {
+        // Add all staticData code and importPath mappings
+        if (import.meta.env.DEV) {
+            const win = window;
+            win.__BLOCK_STUDIO__ = win.__BLOCK_STUDIO__ || {};
+            win.__BLOCK_STUDIO__.codeImportPathMap = win.__BLOCK_STUDIO__.codeImportPathMap || {};
+            Object.entries(staticData).forEach(([_, pageData]) => {
+                const { code, importPath } = pageData?.main || {};
+                if (code && importPath) {
+                    win.__BLOCK_STUDIO__.codeImportPathMap[code] = (0, ufo_1.joinURL)(window.blocklet?.prefix, importPath);
+                }
+            });
+            win.__BLOCK_STUDIO__.getCodeImportPath = (code) => {
+                return win.__BLOCK_STUDIO__?.codeImportPathMap?.[code];
+            };
+        }
+        return {
+            ...state.allBlocks,
+            [state.metadata.id]: {
+                ...state.allBlocks[state.metadata.id],
+                data: state.metadata,
+            },
+        };
+    }, [state.allBlocks, state.metadata, staticData]);
+    const onCloseCreateBlock = () => {
+        state.createBlockOpen = false;
+        state.newBlockParams = {
+            name: '',
+            description: '',
+        };
+    };
+    const getRenderContent = (0, react_1.useCallback)(() => {
+        if (loadState.type === '404') {
+            return null;
+        }
+        if (['load-error', 'loading'].includes(loadState.type)) {
+            return ((0, jsx_runtime_1.jsx)(material_1.Box, { width: "100%", height: "100%", display: "flex", justifyContent: "center", alignItems: "center", children: loadState.type === 'load-error' ? ((0, jsx_runtime_1.jsx)(material_1.Alert, { severity: "error", variant: "filled", children: "Failed to load component code" })) : ((0, jsx_runtime_1.jsx)(material_1.CircularProgress, {})) }));
+        }
+        // const pageData = loadedData[loadState.routePath];
+        // const Component = pageData.main.default;
+        // return <Component {...state.data} />;
+        return [
+            (0, jsx_runtime_1.jsx)(components_2.CustomComponentRenderer, { locale: locale, componentId: state.metadata.id, dev: { mode: 'draft', components: mergedAllBlocks, defaultLocale: 'en' }, props: state.data }, "custom"),
+            // <Component key="original" {...state.data} />,
+        ];
+    }, [loadedData, loadState, locale, state.injectBlocks, state.metadata, mergedAllBlocks]);
+    // add auto redirect to first route
+    if (loadState.type === '404' &&
+        !routes.includes(location.pathname) &&
+        !location.search.includes('no-redirect=true')) {
+        return (0, jsx_runtime_1.jsx)(react_router_dom_1.Navigate, { to: `${firstRoute ?? '/'}`, replace: true });
+    }
+    return ((0, jsx_runtime_1.jsx)(material_1.StyledEngineProvider, { injectFirst: true, children: (0, jsx_runtime_1.jsx)(material_1.ThemeProvider, { theme: theme_1.theme, children: (0, jsx_runtime_1.jsx)(SessionProvider, { serviceHost: basename, protectedRoutes: [`${basename}/*`], children: (0, jsx_runtime_1.jsx)(react_dnd_1.DndProvider, { backend: react_dnd_html5_backend_1.HTML5Backend, children: (0, jsx_runtime_1.jsxs)(StyledDashboard, { HeaderProps: {
+                            // @ts-ignore
+                            homeLink: (0, ufo_1.joinURL)(basename),
+                            addons: (addons) => {
+                                return [
+                                    (0, jsx_runtime_1.jsx)(material_1.Button, { onClick: () => (state.createResourceOpen = true), children: "Create Resource" }, "logout"),
+                                    ...addons,
+                                ];
+                            },
+                        }, MenusDrawerProps: { sx: { [`.${material_1.backdropClasses.root}`]: { top: 64 } } }, children: [(0, jsx_runtime_1.jsxs)(material_1.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%',
+                                    },
+                                }, children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: 1, direction: "row", alignItems: "center", sx: { py: 2, pr: 1, pl: 0.5 }, children: [(0, jsx_runtime_1.jsx)(material_1.TextField, { placeholder: "Search Blocks...", sx: { minWidth: 120 }, onChange: (e) => {
+                                                    state.searchValue = e.target.value;
+                                                } }), (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", sx: { minWidth: 'auto' }, onClick: () => {
+                                                    state.createBlockOpen = true;
+                                                }, children: (0, jsx_runtime_1.jsx)(Add_1.default, { fontSize: "small" }) })] }), (0, jsx_runtime_1.jsx)(material_1.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;
+                                            }
+                                            return ((0, jsx_runtime_1.jsx)(material_1.ListItem, { disablePadding: true, children: (0, jsx_runtime_1.jsx)(material_1.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: (0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: staticDataInRoute.blockName || routeName, children: (0, jsx_runtime_1.jsx)("div", { style: {
+                                                                width: '100%',
+                                                                overflow: 'hidden',
+                                                                textOverflow: 'ellipsis',
+                                                            }, children: staticDataInRoute.blockName || routeName }) }) }) }, route));
+                                        })
+                                            .filter(Boolean) })] }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: { flex: 1, overflowX: 'hidden', overflowY: getStaticData()?.isHtml ? 'hidden' : 'auto' }, children: (0, jsx_runtime_1.jsx)(material_1.ThemeProvider, { theme: theme_1.pagesTheme, children: (0, jsx_runtime_1.jsx)(react_1.Suspense, { children: getRenderContent() }) }) }), (0, jsx_runtime_1.jsx)(material_1.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: (0, jsx_runtime_1.jsxs)(material_1.List, { sx: { display: 'flex', flexDirection: 'column', gap: 1 }, children: [(0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(material_1.Box, { sx: { width: '100%' }, children: (0, jsx_runtime_1.jsx)(components_1.BasicInfo, { config: state.metadata }) }) }), (0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { width: '100%' }, children: [(0, jsx_runtime_1.jsx)(components_1.PropertiesConfig, { config: state.metadata, currentLocale: locale, defaultLocale: "en", allComponents: mergedAllBlocks, onUpdateConfig: (updater) => {
+                                                            updater(state.metadata);
+                                                        }, useI18nEditor: false }), (0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "column", spacing: 1, sx: { mt: 1 }, children: [(0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", size: "small", color: "primary", onClick: async () => {
+                                                                    try {
+                                                                        const { dataPath } = getStaticData() || {};
+                                                                        if (!dataPath) {
+                                                                            Toast_1.default.error('无法找到组件路径');
+                                                                            return;
+                                                                        }
+                                                                        Toast_1.default.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_1.default.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_1.default.error(response.data.error || '预览失败');
+                                                                        }
+                                                                    }
+                                                                    catch (error) {
+                                                                        console.error('生成预览失败:', error);
+                                                                        Toast_1.default.error('生成预览失败');
+                                                                    }
+                                                                }, children: "Interface \u2192 Properties" }), (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "outlined", size: "small", color: "primary", onClick: async () => {
+                                                                    try {
+                                                                        const { dataPath } = getStaticData() || {};
+                                                                        if (!dataPath) {
+                                                                            Toast_1.default.error('无法找到组件路径');
+                                                                            return;
+                                                                        }
+                                                                        Toast_1.default.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_1.default.success('TypeScript接口生成成功！');
+                                                                                            state.previewDialog.open = false;
+                                                                                        }
+                                                                                        else {
+                                                                                            throw new Error(updateResponse.data.error || '生成失败');
+                                                                                        }
+                                                                                    }
+                                                                                    finally {
+                                                                                        state.previewDialog.loading = false;
+                                                                                    }
+                                                                                },
+                                                                            };
+                                                                        }
+                                                                        else {
+                                                                            Toast_1.default.error(response.data.error || '预览失败');
+                                                                        }
+                                                                    }
+                                                                    catch (error) {
+                                                                        console.error('生成接口预览失败:', error);
+                                                                        Toast_1.default.error('生成接口预览失败');
+                                                                    }
+                                                                }, children: "Properties \u2192 Interface" })] })] }) }), state.metadata.id && ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(material_1.Box, { sx: { width: '100%' }, children: (0, jsx_runtime_1.jsx)(components_1.ParametersConfig, { config: state.metadata, allComponents: mergedAllBlocks, defaultLocale: "en", locale: locale, 
+                                                    // 不需要 propertiesValue
+                                                    // propertiesValue={{}}
+                                                    onChange: ({ key, value }) => {
+                                                        state.data = {
+                                                            ...state.data,
+                                                            [key]: value.value,
+                                                        };
+                                                    }, props: {
+                                                        ...state.data,
+                                                    } }) }) }))] }) }), (0, jsx_runtime_1.jsx)(CreateResource, { open: state.createResourceOpen, onClose: () => {
+                                    state.createResourceOpen = false;
+                                } }), (0, jsx_runtime_1.jsxs)(material_1.Dialog, { open: state.createBlockOpen, onClose: onCloseCreateBlock, children: [(0, jsx_runtime_1.jsx)(material_1.DialogTitle, { children: "Create New Block" }), (0, jsx_runtime_1.jsx)(material_1.DialogContent, { children: (0, jsx_runtime_1.jsxs)(material_1.Stack, { spacing: 2, sx: { pt: 1, minWidth: 300 }, children: [(0, jsx_runtime_1.jsx)(material_1.TextField, { autoFocus: true, required: true, label: "Name", fullWidth: true, value: state.newBlockParams.name, onChange: (e) => {
+                                                        state.newBlockParams.name = e.target.value.replace(/[^a-zA-Z0-9-]/g, '');
+                                                    } }), (0, jsx_runtime_1.jsx)(material_1.TextField, { label: "Description", fullWidth: true, multiline: true, rows: 3, value: state.newBlockParams.description, onChange: (e) => {
+                                                        state.newBlockParams.description = e.target.value;
+                                                    } }), (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", fullWidth: true, onClick: async () => {
+                                                        if (!state.newBlockParams.name) {
+                                                            Toast_1.default.warning('Block name is required');
+                                                            return;
+                                                        }
+                                                        if (routes.some((route) => {
+                                                            const staticDataInRoute = staticData[route]?.main;
+                                                            return (staticDataInRoute?.blockName?.toLowerCase() === state.newBlockParams.name.toLowerCase());
+                                                        })) {
+                                                            Toast_1.default.warning('Block name already exists, please change it');
+                                                            return;
+                                                        }
+                                                        try {
+                                                            await api.post('/api/blocks/create', state.newBlockParams);
+                                                            navigate(`/${state.newBlockParams.name}?no-redirect=true`);
+                                                            // wait for the file to be created
+                                                            setTimeout(() => {
+                                                                window.location.reload();
+                                                            }, 100);
+                                                            onCloseCreateBlock();
+                                                        }
+                                                        catch (error) {
+                                                            console.error('Failed to create block:', error);
+                                                            Toast_1.default.error('Failed to create block');
+                                                        }
+                                                    }, children: "Create" })] }) })] }), (0, jsx_runtime_1.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;
+                                } })] }) }) }) }) }));
+}
+const StyledDashboard = (0, material_1.styled)(studio_ui_1.Dashboard) `
+  .dashboard-content {
+    display: flex;
+    flex-direction: row;
+    gap: ${({ theme }) => theme.spacing(1)};
+    padding: 0 ${({ theme }) => theme.spacing(1)};
+    width: 100vw;
+    height: calc(100vh - 64px - 1px);
+  }
+
+  .header-container {
+    padding-left: ${({ theme }) => theme.spacing(3)};
+    padding-right: ${({ theme }) => theme.spacing(3)};
+
+    ${({ theme }) => theme.breakpoints.down('md')} {
+      padding-left: ${({ theme }) => theme.spacing(2)};
+      padding-right: ${({ theme }) => theme.spacing(2)};
+
+      .header-addons {
+        button {
+          svg,
+          .${material_1.circularProgressClasses.root} {
+            font-size: 1.25rem !important;
+            width: 1.25rem !important;
+            height: 1.25rem !important;
+          }
+        }
+      }
+    }
+
+    .locales {
+      border-radius: ${({ theme }) => theme.shape.borderRadius}px;
+      box-shadow: ${({ theme }) => theme.shadows[1]};
+      margin-top: ${({ theme }) => theme.spacing(1.5)}px;
+    }
+  }
+`;
+function LayoutWrapper({ loadState, loadedData, ...rest }) {
+    return ((0, jsx_runtime_1.jsx)(Toast_1.ToastProvider, { children: (0, jsx_runtime_1.jsx)(context_1.LocaleProvider, { translations: locales_1.translations, fallbackLocale: "en", children: (0, jsx_runtime_1.jsx)(Layout, { loadState: loadState, loadedData: loadedData }) }) }));
+}
+exports.default = LayoutWrapper;
+function CreateResource({ open, onClose }) {
+    if (!open) {
+        return null;
+    }
+    const tenantScope = 'pages-kit-block-studio';
+    return ((0, jsx_runtime_1.jsx)(react_1.Suspense, { children: (0, jsx_runtime_1.jsx)(ui_react_1.BlockletStudio, { mode: "dialog", tenantScope: tenantScope, title: "Pages Kit Blocks", description: "", note: "", introduction: "", logo: "", componentDid: PAGES_KIT_BLOCK_STUDIO_BLOCKLET_DID, 
+            // 透传到 get blocklet resource 的参数
+            resourcesParams: {}, dependentComponentsMode: "readonly", open: true, setOpen: () => onClose(), onConnected: () => { }, onUploaded: () => { }, onReleased: () => { }, 
+            // onOpened={() => onOpened?.()}
+            // 默认选中的资源
+            resources: {} }) }));
 }

package/lib/cjs/plugins/vite-plugin-block-studio.js

@@ -53,8 +53,8 @@ const vite_plugin_node_polyfills_1 = require("vite-plugin-node-polyfills");
 const vite_plugin_react_pages_1 = __importStar(require("vite-plugin-react-pages"));
 const helper_1 = require("../utils/helper");
 const vite_plugin_html_transform_1 = require("./vite-plugin-html-transform");
-const BUILTIN_MODULES_VAR = '__PAGES_KIT_BUILTIN_MODULES__';
-helper_1.logger.log('BUILTIN_MODULES_VAR', BUILTIN_MODULES_VAR);
+// const BUILTIN_MODULES_VAR = '__PAGES_KIT_BUILTIN_MODULES__';
+// logger.log('BUILTIN_MODULES_VAR', BUILTIN_MODULES_VAR);
 const defaultBlockExternals = {
     // 核心 React 相关
     react: '@blocklet/pages-kit/builtin/react',