style(design,editor,form): 事件模块处理 & 卡片样式调整

packages/design/src/Card.vue

@@ -1,5 +1,9 @@
 <template>
-  <component :is="uiComponent" :class="['tmagic-design-card', { 'tmagic-design-card--flat': isFlat }]" v-bind="uiProps">
+  <component
+    :is="uiComponent"
+    :class="['tmagic-design-card', { 'tmagic-design-card--flat': isFlat, 'm-flat-hide-body': isHideBody }]"
+    v-bind="uiProps"
+  >
     <template #header v-if="$slots.header">
       <slot name="header" class="header"></slot>
     </template>
@@ -30,7 +34,7 @@ const uiComponent = ui?.component || 'el-card';
 // 当祖先 `<MEditor>` / `<MForm>` 的 theme 是 `magic-admin` 时，整套设计语言默认走「无卡片感」，
 // 因此这里自动等价于 `flat=true`；调用方仍可显式传 `flat` 强制开启。
 const isFlat = computed(() => !!props.flat || isGlobalFlat.value);
-
+const isHideBody = computed(() => isFlat.value && props.bodyStyle?.display === 'none');
 // 把 `flat` 从转发给底层 UI 库（el-card / t-card 等）的 props 中剥离：
 // 它仅作用于本组件的视觉修饰类，不需要也不应该作为属性落到底层组件 / DOM 上。
 const uiProps = computed<CardProps>(() => {

packages/design/src/theme/card.scss

@@ -11,7 +11,11 @@
   border-right: 0;
   border-radius: 0;
   border-bottom: 0;
-
+  &.m-flat-hide-body {
+    .el-card__header {
+      border-bottom: 0 !important;
+    }
+  }
   &.m-fields-group-list-item {
     margin-bottom: 0;
   }
@@ -21,7 +25,7 @@
 
   .el-card__header {
     border-bottom: none;
-    padding: 16px;
+    padding: 8px 16px;
     &:hover {
       background: transparent;
       box-shadow: none;
@@ -29,11 +33,15 @@
     }
   }
 
+  .m-fields-group-list-footer {
+    margin-bottom: 4px;
+    margin-top: 4px;
+  }
   .el-card__body {
     padding: 0 16px 0 16px;
     // 这里每个form-item应该要有一个16px间距，但是除了tbody中的form-item
     .tmagic-design-form-item:not(tbody .tmagic-design-form-item) {
-      margin-bottom: 16px;
+      margin-bottom: 8px;
     }
     > .m-container-row {
       overflow-x: hidden;
@@ -61,7 +69,7 @@
     }
     > .el-card__body {
       background-color: #fff;
-      padding-top: 16px;
+      padding-top: 8px;
     }
   }
 }

packages/editor/src/fields/EventSelect.vue

@@ -37,13 +37,12 @@
         :model="entry.cardItem"
         :last-values="entry.lastCardItem"
         :is-compare="isCompareMode"
-        :hide-expand="true"
+        :hide-expand="false"
         :label-width="config.labelWidth || '100px'"
         @change="onChangeHandler"
       >
         <template #header>
           <div class="event-item-header">
-            <div class="event-item-title">事件{{ Number(entry.index) + 1 }}</div>
             <MFormContainer
               class="fullWidth"
               :config="eventNameConfig"

packages/editor/src/theme/code-block.scss

@@ -26,7 +26,7 @@
     > .m-fields-group-list {
       > .tmagic-design-card--flat {
         > .el-card__header {
-          padding: 16px 0;
+          padding: 8px 0;
         }
       }
     }
@@ -34,7 +34,7 @@
   .create-button {
     &.fullWidth {
       width: 100%;
-      margin: 0 0 16px 0;
+      margin: 0 0 8px 0;
     }
   }
 }

packages/editor/src/theme/event.scss

@@ -1,8 +1,11 @@
 .m-fields-event-select {
   width: 100%;
   .fullWidth {
-    width: 100%;
+    width: calc(100% - 32px);
     box-sizing: border-box;
+    &.create-button {
+      width: 100%;
+    }
   }
   .event-select-container {
     padding: 0 16px;
@@ -11,7 +14,7 @@
         border-bottom: 1px solid #ebeef5;
       }
       > .el-card__body {
-        padding-bottom: 16px;
+        padding-bottom: 8px;
         .m-fields-group-list-footer {
           div {
             justify-content: flex-start !important;
@@ -19,7 +22,7 @@
         }
         .el-card.tmagic-design-card--flat {
           > .el-card__header {
-            padding: 16px 0;
+            padding: 8px 0;
           }
         }
       }
@@ -76,17 +79,18 @@
 .event-item-header {
   position: relative;
   width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
   .event-item-title {
     color: #0f1113;
     font-size: 16px;
     font-weight: 500;
     line-height: 24px;
-    margin-bottom: 16px;
+    margin-bottom: 8px;
   }
   .event-item-delete-button {
-    position: absolute;
+    color: #0f1113;
-    right: 0;
-    top: 0;
   }
 
   .el-form-item {

packages/form/src/theme/group-list.scss

@@ -2,7 +2,6 @@
   .m-fields-group-list-item.tmagic-design-card--flat:last-child {
     border: 0;
   }
-
   .el-button--text {
     padding: 0;
     margin-bottom: 7px;
@@ -32,7 +31,6 @@
   }
 
   .m-fields-group-list-footer {
-    display: flex;
     justify-content: space-between;
     margin-top: 10px;
     margin-bottom: 16px;