@blocklet/pages-kit-block-studio 0.4.73 → 0.4.74

package/lib/cjs/utils/zod-utils.js

@@ -79,12 +79,9 @@ exports.PROPERTIES_TYPE_SCHEMA = {
             const { subProperties } = properties;
             if (subProperties && Object.keys(subProperties)?.length > 0) {
                 // 使用联合类型：字符串或结构化对象
-                return zod_1.z.union([
-                    zod_1.z.string(),
-                    propertiesToZodSchema(subProperties, { addZodDescribe, llmConfig: propLLMConfig?.subProperties }),
-                ]);
+                return propertiesToZodSchema(subProperties, { addZodDescribe, llmConfig: propLLMConfig?.subProperties });
             }
-            return zod_1.z.string();
+            return zod_1.z.object({});
         },
         array: (properties, { addZodDescribe, propLLMConfig }) => {
             const { subProperties } = properties;

package/lib/esm/plugins/_theme.js

@@ -15,6 +15,7 @@ import { BasicInfo, ParametersConfig, PropertiesConfig } from '@blocklet/pages-k
 // @ts-ignore
 import { translations } from '@blocklet/pages-kit-runtime/locales';
 import { CustomComponentRenderer } from '@blocklet/pages-kit/components';
+import { parsePropertyValue } from '@blocklet/pages-kit/utils/property';
 // @ts-ignore
 import { Dashboard } from '@blocklet/studio-ui';
 import { BlockletStudio } from '@blocklet/ui-react';
@@ -22,6 +23,7 @@ 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 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 { DndProvider } from 'react-dnd';
@@ -45,6 +47,7 @@ function useSessionContext() {
 }
 const LEFT_DRAWER_WIDTH = 200;
 const RIGHT_DRAWER_WIDTH = 300;
+const defaultLocale = 'en';
 const ComparisonPreviewDialog = ({ open, title, leftTitle, leftContent, rightTitle, rightContent, description = '确认后将更新配置。', loading, onConfirm, onClose, }) => {
     const handleConfirm = async () => {
         try {
@@ -83,7 +86,6 @@ function Layout({ loadState, loadedData }) {
             createdAt: '',
             updatedAt: '',
         },
-        data: {},
         allResources: {},
         searchValue: '',
         newBlockParams: {
@@ -103,6 +105,7 @@ function Layout({ loadState, loadedData }) {
         },
         init: false,
         allComponents: [],
+        propertiesValue: {},
     });
     const { locale } = useLocaleContext();
     const { session } = useSessionContext();
@@ -232,6 +235,18 @@ 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;
@@ -241,12 +256,12 @@ function Layout({ loadState, loadedData }) {
         }
         // const pageData = loadedData[loadState.routePath];
         // const Component = pageData.main.default;
-        // return <Component {...state.data} />;
+        // return <Component />;
         return [
-            _jsx(CustomComponentRenderer, { locale: locale, componentId: state.metadata.id, dev: { mode: 'draft', components: mergedAllBlocks, defaultLocale: 'en' }, props: state.data }, "custom"),
-            // <Component key="original" {...state.data} />,
+            _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]);
+    }, [loadedData, loadState, locale, state.injectBlocks, state.metadata, mergedAllBlocks, mergedPropertiesValues]);
     // add auto redirect to first route
     if (loadState.type === '404' &&
         !routes.includes(location.pathname) &&
@@ -331,7 +346,7 @@ function Layout({ loadState, loadedData }) {
                             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: "en", allComponents: mergedAllBlocks, onUpdateConfig: (updater) => {
+                    }, 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 {
@@ -440,16 +455,15 @@ function Layout({ loadState, loadedData }) {
                                                             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: "en", locale: locale, 
-                                        // 不需要 propertiesValue
-                                        // propertiesValue={{}}
-                                        onChange: ({ key, value }) => {
-                                            state.data = {
-                                                ...state.data,
-                                                [key]: value.value,
+                                                    }, 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 property = get(state.metadata, [...path, 'data']);
+                                            const realValue = parsePropertyValue(property, value.value, {
+                                                locale,
+                                                defaultLocale,
+                                            });
+                                            state.propertiesValue[id] = {
+                                                value: realValue,
                                             };
-                                        }, props: {
-                                            ...state.data,
                                         } }) }) }))] }) }), _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) => {