diff --git a/apps/storybook/src/ui/var-tree.stories.tsx b/apps/storybook/src/ui/var-tree.stories.tsx
index 54e9cbba..457ff95d 100644
--- a/apps/storybook/src/ui/var-tree.stories.tsx
+++ b/apps/storybook/src/ui/var-tree.stories.tsx
@@ -1,5 +1,5 @@
import React from 'react';
-import { VariableTree } from '@music163/tango-designer';
+import { VariableTree } from '@music163/tango-designer/lib/cjs/components';
import { Box } from 'coral-system';
export default {
diff --git a/packages/setting-form/src/form-ui.tsx b/packages/setting-form/src/form-ui.tsx
index eaded26e..aaa0d722 100644
--- a/packages/setting-form/src/form-ui.tsx
+++ b/packages/setting-form/src/form-ui.tsx
@@ -103,9 +103,11 @@ export function FormControlGroup({
{extra}
}
- borderTop="solid"
- borderBottom="solid"
+ border="solid"
borderColor="line.normal"
+ headerProps={{
+ bg: 'fill1',
+ }}
>
.SettingFormMain > .FormControl {
+ > .SettingFormMain > .FormControl,
+ .FormObject {
margin-left: var(--tango-space-m);
margin-right: var(--tango-space-m);
}
diff --git a/packages/ui/src/collapse-panel.tsx b/packages/ui/src/collapse-panel.tsx
index dad6b4fe..6d81e80b 100644
--- a/packages/ui/src/collapse-panel.tsx
+++ b/packages/ui/src/collapse-panel.tsx
@@ -32,6 +32,8 @@ export interface CollapsePanelProps extends Omit, 'title'>
* 是否显示底部边框线
*/
showBottomBorder?: boolean;
+ headerProps?: HTMLCoralProps<'div'>;
+ bodyProps?: HTMLCoralProps<'div'>;
}
const headerStyle = css`
@@ -54,6 +56,8 @@ export function CollapsePanel(props: CollapsePanelProps) {
onCollapse,
stickyHeader,
showBottomBorder = true,
+ headerProps,
+ bodyProps,
...rest
} = props;
const [collapsed, setCollapsed] = useControllableState({
@@ -92,6 +96,7 @@ export function CollapsePanel(props: CollapsePanelProps) {
onClick={() => setCollapsed(!collapsed)}
p="m"
{...stickHeaderProps}
+ {...headerProps}
css={headerStyle}
>
@@ -100,7 +105,7 @@ export function CollapsePanel(props: CollapsePanelProps) {
{extra}
-
+
{children}