添加表单卡片分组 (#447)

* feat: 添加卡片类型的 theme

* feat: 调整圆角

* feat: 移除示例中的 theme
Co-authored-by: N柏丘 <zhaolin.zhaolin@alibaba-inc.com>

packages/form-render/src/index.less

@@ -365,4 +365,19 @@
   .fr-row-error {
     background-color: rgba(255, 77, 79, 0.2);
   }
+
+  // 卡片 theme
+  .fr-theme-card-wrap {
+    background-color: #fff;
+    padding: 36px 40px;
+    margin-bottom: 24px;
+    border-radius: 4px;
+    display: flex;
+    justify-content: space-between;
+
+    .fr-theme-card-title {
+      font-size: 16px;
+      margin-bottom: 16px;
+    }
+  }
 }

packages/form-render/src/widgets/antd/map.js

@@ -35,6 +35,27 @@ export default function Map({ children, title, ...rest }) {
     );
   }
 
+  // 新增卡片视图
+  if (theme == '2') {
+    const { id } = rest.schema
+    return (
+      <div class="fr-theme-card-wrap">
+        <div>
+          {/* title 容器的 id，用来加锚点用 */}
+          <div 
+            id={id || title}
+            class="fr-theme-card-title"
+          >
+            {title}
+          </div>
+          <div style={{ marginLeft: displayType == 'row' ? 0 : 12 }}>
+            {children}
+          </div>
+        </div>
+      </div>
+    );
+  }
+
   const toggle = keyList => {
     if (keyList.length > 0) {
       setCollapsed(false);