diff --git a/packages/editor-sdk/src/components/Form/ExpressionEditor.tsx b/packages/editor-sdk/src/components/Form/ExpressionEditor.tsx index ff25357a..11f9c547 100644 --- a/packages/editor-sdk/src/components/Form/ExpressionEditor.tsx +++ b/packages/editor-sdk/src/components/Form/ExpressionEditor.tsx @@ -408,11 +408,12 @@ export const ExpressionEditor = React.forwardRef< borderStyle="solid" borderWidth="1px" borderRadius="0 0 4px 4px" + whiteSpace="pre-wrap" > {error ? 'Error' : getTypeString(evaledValue)} - {error || JSON.stringify(evaledValue)} + {error || JSON.stringify(evaledValue, null, 2)} ) : null} {showModal && ( diff --git a/packages/editor/src/components/EditorHeader/EditorHeader.tsx b/packages/editor/src/components/EditorHeader/EditorHeader.tsx index 3c2f0646..a7d22bba 100644 --- a/packages/editor/src/components/EditorHeader/EditorHeader.tsx +++ b/packages/editor/src/components/EditorHeader/EditorHeader.tsx @@ -14,13 +14,13 @@ export const EditorHeader: React.FC<{ {scale}% diff --git a/packages/editor/src/components/StructureTree/ComponentItemView.tsx b/packages/editor/src/components/StructureTree/ComponentItemView.tsx index 70d9baab..6bba8021 100644 --- a/packages/editor/src/components/StructureTree/ComponentItemView.tsx +++ b/packages/editor/src/components/StructureTree/ComponentItemView.tsx @@ -90,6 +90,7 @@ export const ComponentItemView: React.FC = props => { return ( setIsHover(true)} diff --git a/packages/editor/src/components/StructureTree/StructureTree.tsx b/packages/editor/src/components/StructureTree/StructureTree.tsx index 5c0c33e4..5f95160b 100644 --- a/packages/editor/src/components/StructureTree/StructureTree.tsx +++ b/packages/editor/src/components/StructureTree/StructureTree.tsx @@ -1,4 +1,4 @@ -import React, { useMemo } from 'react'; +import React, { useMemo, useRef, useEffect } from 'react'; import { ComponentSchema } from '@sunmao-ui/core'; import { Box, Text, VStack } from '@chakra-ui/react'; import { ComponentTree } from './ComponentTree'; @@ -20,9 +20,12 @@ type Props = { export const StructureTree: React.FC = props => { const { components, selectedComponentId, onSelectComponent, services } = props; + const wrapperRef = useRef(null); const realComponents = useMemo(() => { - return components.filter(c => c.type !== `${CORE_VERSION}/${CoreComponentName.Dummy}`); + return components.filter( + c => c.type !== `${CORE_VERSION}/${CoreComponentName.Dummy}` + ); }, [components]); const componentEles = useMemo(() => { @@ -45,9 +48,15 @@ export const StructureTree: React.FC = props => { )); }, [realComponents, selectedComponentId, onSelectComponent, services]); + useEffect(() => { + wrapperRef.current + ?.querySelector(`#tree-item-${selectedComponentId}`) + ?.scrollIntoView(); + }, [selectedComponentId]); + return ( - - + + Components {componentEles.length > 0 ? componentEles : } diff --git a/packages/runtime/src/traits/core/Fetch.tsx b/packages/runtime/src/traits/core/Fetch.tsx index 278fba88..96c618e4 100644 --- a/packages/runtime/src/traits/core/Fetch.tsx +++ b/packages/runtime/src/traits/core/Fetch.tsx @@ -28,7 +28,7 @@ export const FetchTraitPropertiesSpec = Type.Object({ headers: Type.Record(Type.String(), Type.String(), { title: 'Headers', }), - body: Type.Record(Type.String(), Type.String(), { + body: Type.Record(Type.String(), Type.Any(), { title: 'Body', widget: `${CORE_VERSION}/${CoreWidgetName.RecordField}`, }),