@blocklet/pages-kit-block-studio 0.4.145 → 0.4.147

package/lib/esm/plugins/_theme.js

@@ -135,6 +135,9 @@ function Layout({ loadState, loadedData }) {
             },
         };
     }, [staticData, location.pathname]);
+    const notSelectedBlock = useMemo(() => {
+        return !currentPage?.blockName || !currentPage?.code;
+    }, [currentPage]);
     const getStaticData = useCallback(() => {
         return staticData[location.pathname]?.main || {};
     }, [staticData, location.pathname]);
@@ -384,6 +387,44 @@ function Layout({ loadState, loadedData }) {
             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}`) }) }) }));
         }
+        // 没有匹配到路由，使用欢迎页面
+        if (notSelectedBlock) {
+            return (_jsxs(Box, { width: "100%", height: "100%", display: "flex", flexDirection: "column", justifyContent: "center", alignItems: "center", sx: {
+                    backgroundColor: 'background.default',
+                    p: 3,
+                    textAlign: 'center',
+                }, children: [_jsx(Box, { component: "img", src: "https://api.iconify.design/fluent-emoji:waving-hand.svg", sx: { width: 64, height: 64, mb: 3 }, alt: "Welcome" }), _jsx(Typography, { variant: "h4", sx: { mb: 2, fontWeight: 'bold', color: 'primary.main' }, children: t('themeTranslations.welcomeTitle') }), _jsx(Typography, { variant: "body1", sx: { mb: 4, color: 'text.secondary', maxWidth: 600 }, children: t('themeTranslations.welcomeDescription') }), _jsxs(Box, { sx: { display: 'flex', gap: 2, mb: 4 }, children: [_jsx(Button, { variant: "contained", startIcon: _jsx(AddIcon, {}), onClick: () => {
+                                    state.createBlockOpen = true;
+                                }, children: t('themeTranslations.createBlock') }), _jsx(Button, { variant: "outlined", component: "a", href: "https://community.arcblock.io/", target: "_blank", rel: "noopener", children: t('themeTranslations.getHelp') })] }), _jsxs(Box, { sx: {
+                            display: 'flex',
+                            flexDirection: 'column',
+                            gap: 2,
+                            p: 3,
+                            bgcolor: 'background.paper',
+                            borderRadius: 2,
+                            boxShadow: 1,
+                            maxWidth: 600,
+                            mx: 2,
+                            width: 'calc(100% - 32px)',
+                            mt: 2,
+                        }, children: [_jsx(Typography, { variant: "h6", sx: { color: 'primary.main', mb: 1, textAlign: 'center' }, children: t('themeTranslations.quickStart') }), _jsx(Stack, { spacing: 2.5, children: [1, 2, 3].map((step) => (_jsxs(Box, { sx: { display: 'flex', gap: 2 }, children: [_jsx(Box, { sx: {
+                                                bgcolor: 'primary.main',
+                                                color: 'primary.contrastText',
+                                                width: 24,
+                                                height: 24,
+                                                borderRadius: '50%',
+                                                display: 'flex',
+                                                alignItems: 'center',
+                                                justifyContent: 'center',
+                                                fontWeight: 'bold',
+                                                flexShrink: 0,
+                                            }, children: step }), _jsx(Typography, { sx: {
+                                                flex: 1,
+                                                minWidth: 0,
+                                                wordBreak: 'break-word',
+                                                textAlign: 'left',
+                                            }, children: t(`themeTranslations.step${step}`) })] }, step))) })] })] }, "content-welcome"));
+        }
         // 外部容器，包含设备切换按钮和iframe
         return (_jsxs(Box, { sx: { height: '100%', display: 'flex', flexDirection: 'column' }, children: [_jsx(Box, { sx: { p: 1, display: 'flex', justifyContent: 'center', borderBottom: '1px solid #e0e0e0' }, children: _jsxs(ToggleButtonGroup, { size: "small", exclusive: true, color: "primary", value: state.simulatorType, onChange: (_, value) => (state.simulatorType = value ?? state.simulatorType), sx: {
                             '& > button': {
@@ -474,7 +515,7 @@ function Layout({ loadState, loadedData }) {
                                             display: state.draggingSplitPane ? 'none' : 'flex',
                                         }, onLoad: () => {
                                             state.iframeLoaded = true;
-                                        }, title: "Component Preview" })] })] }) })] }, "middle-panel"));
+                                        }, title: "Component Preview" })] })] }) }, "content-iframe")] }, "middle-panel"));
     }, [
         loadedData,
         loadState,
@@ -490,7 +531,20 @@ function Layout({ loadState, loadedData }) {
         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) => {
+        return (_jsxs(List, { sx: {
+                height: '100%',
+                overflowY: 'auto',
+                display: 'flex',
+                flexDirection: 'column',
+                gap: 1,
+                // add disabled backdrop if not selected block
+                '& .MuiListItem-root': {
+                    pointerEvents: notSelectedBlock ? 'none' : 'auto',
+                    opacity: notSelectedBlock ? 0.5 : 1,
+                    backdropFilter: notSelectedBlock ? 'blur(10px) !important' : 'none',
+                    userSelect: notSelectedBlock ? 'none' : 'auto',
+                },
+            }, 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 {
@@ -764,14 +818,14 @@ function CreateResource({ open, onClose }) {
 // 这里我们在运行时扩展 translations 对象，而不是修改源文件
 if (!translations.en.themeTranslations) {
     translations.en.themeTranslations = {
-        search: 'Search Blocks...',
-        createNewBlock: 'Create New Block',
+        search: 'Search Components...',
+        createNewBlock: 'Create New Component',
         name: 'Name',
         description: 'Description',
         create: 'Create',
-        blockNameRequired: 'Block name is required',
-        blockNameExists: 'Block name already exists, please change it',
-        failedCreateBlock: 'Failed to create block',
+        blockNameRequired: 'Component name is required',
+        blockNameExists: 'Component name already exists, please try another name',
+        failedCreateBlock: 'Failed to create component',
         createResource: 'Create Resource',
         failedLoadCode: 'Failed to load component code',
         interfaceToProperties: 'Interface → Properties',
@@ -800,6 +854,14 @@ if (!translations.en.themeTranslations) {
         configUpdateConfirmation: 'Configuration will be updated after confirmation.',
         operationFailed: 'Operation failed',
         noRoutesFound: 'No Components Found',
+        welcomeTitle: 'Welcome to Component Studio',
+        welcomeDescription: 'Create, customize, and manage your components with ease. Select an existing component or create a new one to start your creative journey.',
+        createBlock: 'Create Component',
+        getHelp: 'Community Support',
+        quickStart: 'Quick Start Guide',
+        step1: 'Browse and select components from the left menu, or create your own',
+        step2: 'Preview your component in the center area with responsive design views',
+        step3: 'Customize properties and configurations in the right panel to bring your ideas to life',
     };
 }
 if (!translations.zh.themeTranslations) {
@@ -809,8 +871,8 @@ if (!translations.zh.themeTranslations) {
         name: '名称',
         description: '描述',
         create: '创建',
-        blockNameRequired: '组件名称必填',
-        blockNameExists: '组件名称已存在，请更改',
+        blockNameRequired: '组件名称不能为空',
+        blockNameExists: '组件名称已存在，请尝试其他名称',
         failedCreateBlock: '创建组件失败',
         createResource: '创建资源',
         failedLoadCode: '加载组件代码失败',
@@ -840,5 +902,13 @@ if (!translations.zh.themeTranslations) {
         configUpdateConfirmation: '确认后将更新配置。',
         operationFailed: '执行操作失败',
         noRoutesFound: '未找到组件',
+        welcomeTitle: '欢迎使用 Block Studio',
+        welcomeDescription: '轻松创建、自定义和管理您的组件。选择现有组件或创建新组件，开启您的创意之旅。',
+        createBlock: '创建组件',
+        getHelp: '社区支持',
+        quickStart: '快速入门指南',
+        step1: '从左侧菜单浏览并选择组件，或创建您自己的组件',
+        step2: '在中央区域预览您的组件，支持响应式设计视图',
+        step3: '在右侧面板自定义属性和配置，让您的创意变为现实',
     };
 }