fix: update FormObject style (#91)

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 {

packages/setting-form/src/form-ui.tsx

@@ -103,9 +103,11 @@ export function FormControlGroup({
           {extra}
         </Box>
       }
-      borderTop="solid"
-      borderBottom="solid"
+      border="solid"
       borderColor="line.normal"
+      headerProps={{
+        bg: 'fill1',
+      }}
     >
       <Box
         p="m"

packages/setting-form/src/form.tsx

@@ -47,7 +47,8 @@ const formStyle = css`
     margin-top: var(--tango-space-m);
   }
 
-  > .SettingFormMain > .FormControl {
+  > .SettingFormMain > .FormControl,
+  .FormObject {
     margin-left: var(--tango-space-m);
     margin-right: var(--tango-space-m);
   }

packages/ui/src/collapse-panel.tsx

@@ -32,6 +32,8 @@ export interface CollapsePanelProps extends Omit<HTMLCoralProps<'div'>, '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}
       >
         <Box display="flex" alignItems="center" fontSize="14px" fontWeight="500">
@@ -100,7 +105,7 @@ export function CollapsePanel(props: CollapsePanelProps) {
         </Box>
         <Box>{extra}</Box>
       </Box>
-      <Box className="CollapsePanelBody" display={collapsed ? 'none' : 'block'}>
+      <Box className="CollapsePanelBody" display={collapsed ? 'none' : 'block'} {...bodyProps}>
         {children}
       </Box>
     </Box>