fix: setting 面板样式调整

packages/editor-skeleton/src/components/field/fields.tsx

@@ -14,7 +14,7 @@ export interface FieldProps {
   className?: string;
   meta?: { package: string; componentName: string } | string;
   title?: TitleContent | null;
-  defaultDisplay?: 'accordion' | 'inline' | 'block';
+  defaultDisplay?: 'accordion' | 'inline' | 'block' | 'plain' | 'popup' | 'entry';
   collapsed?: boolean;
   valueState?: number;
   name?: string;
@@ -134,14 +134,18 @@ export class Field extends Component<FieldProps> {
         })}
         id={id}
       >
-        <div className="lc-field-head" onClick={isAccordion ? this.toggleExpand : undefined}>
-          <div className="lc-field-title">
-            {createValueState(valueState, this.handleClear)}
-            <Title title={title || ''} />
-            <InlineTip position="top">{tipContent}</InlineTip>
-          </div>
-          {isAccordion && <Icon className="lc-field-icon" type="arrow-up" size="xs" />}
-        </div>
+        {
+          display !== 'plain' && (
+            <div className="lc-field-head" onClick={isAccordion ? this.toggleExpand : undefined}>
+              <div className="lc-field-title">
+                {createValueState(valueState, this.handleClear)}
+                <Title title={title || ''} />
+                <InlineTip position="top">{tipContent}</InlineTip>
+              </div>
+              {isAccordion && <Icon className="lc-field-icon" type="arrow-up" size="xs" />}
+            </div>
+          )
+        }
         <div key="body" ref={(shell) => (this.body = shell)} className="lc-field-body">
           {children}
         </div>

packages/editor-skeleton/src/components/field/index.less

@@ -68,16 +68,9 @@
   &.lc-inline-field {
     display: flex;
     align-items: center;
-    // for top-level style
-    padding: 16px;
-    &:first-child{
-      padding-top: 16px;
-    }
+    margin-bottom: 12px;
     &:last-child{
-      padding-bottom: 16px;
-    }
-    &+.lc-inline-field{
-      padding-top: 0;
+      margin-bottom: 0;
     }
 
     > .lc-field-head {
@@ -96,6 +89,12 @@
     }
   }
 
+  &.lc-plain-field {
+    .lc-inline-field {
+      margin: 12px;
+    }
+  }
+
   &.lc-block-field, &.lc-accordion-field {
     display: block;
     &:first-child {
@@ -123,12 +122,6 @@
     > .lc-field-body {
       // padding: @y-gap @x-gap/2;
       padding: 12px;
-      .lc-inline-field{
-        margin-bottom: 12px;
-        &:last-child{
-          margin-bottom: 0;
-        }
-      }
     }
 
     + .lc-inline-field {
@@ -180,8 +173,6 @@
   // 2rd level reset
   .lc-field-body {
     .lc-inline-field {
-      // padding: @y-gap @x-gap/2 0 @x-gap/2;
-      padding: 0;
       &:first-child {
         padding-top: 0;
       }

packages/editor-skeleton/src/components/settings/settings-pane.tsx

@@ -111,7 +111,7 @@ class SettingGroupView extends Component<{ field: SettingField }> {
   render() {
     const { field } = this.props;
     const { extraProps } = field;
-    const { condition } = extraProps;
+    const { condition, display } = extraProps;
     const visible = field.isSingle && typeof condition === 'function' ? condition(field) !== false : true;
 
     if (!visible) {
@@ -119,9 +119,18 @@ class SettingGroupView extends Component<{ field: SettingField }> {
     }
 
     // todo: split collapsed state | field.items for optimize
+    // return createField({
+    //     meta: field?.componentMeta?.npm || field?.componentMeta?.componentName || '',
+    //     title: field.title,
+    //     collapsed: !field.expanded,
+    //     onExpandChange: (expandState) => field.setExpanded(expandState),
+    //   }, 
+    //   field.items.map((item, index) => createSettingFieldView(item, field, index)),
+    //   display);
     return (
       <Field
         defaultDisplay="accordion"
+        // defaultDisplay={display}
         meta={field?.componentMeta?.npm || field?.componentMeta?.componentName || ''}
         title={field.title}
         collapsed={!field.expanded}