fix: Card组件内置label不显示问题 (#5164)

docs/zh-CN/components/card.md

@@ -20,7 +20,29 @@ order: 31
         "avatarClassName": "pull-left thumb-md avatar b-3x m-r",
         "avatar": "data:image/svg+xml,%3C%3Fxml version='1.0' standalone='no'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg t='1631083237695' class='icon' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='2420' xmlns:xlink='http://www.w3.org/1999/xlink' width='1024' height='1024'%3E%3Cdefs%3E%3Cstyle type='text/css'%3E%3C/style%3E%3C/defs%3E%3Cpath d='M959.872 128c0.032 0.032 0.096 0.064 0.128 0.128v767.776c-0.032 0.032-0.064 0.096-0.128 0.128H64.096c-0.032-0.032-0.096-0.064-0.128-0.128V128.128c0.032-0.032 0.064-0.096 0.128-0.128h895.776zM960 64H64C28.8 64 0 92.8 0 128v768c0 35.2 28.8 64 64 64h896c35.2 0 64-28.8 64-64V128c0-35.2-28.8-64-64-64z' p-id='2421' fill='%23bfbfbf'%3E%3C/path%3E%3Cpath d='M832 288c0 53.024-42.976 96-96 96s-96-42.976-96-96 42.976-96 96-96 96 42.976 96 96zM896 832H128V704l224-384 256 320h64l224-192z' p-id='2422' fill='%23bfbfbf'%3E%3C/path%3E%3C/svg%3E"
     },
-    "body": "这里是内容",
+    "body": [
+      {
+        "type": "divider"
+      },
+      {
+        "type": "tpl",
+        "tpl": "Trident",
+        "inline": false,
+        "label": "Engine"
+      },
+      {
+        "name": "static",
+        "type": "static",
+        "label": "Browser",
+        "value": "Internet Explorer 5.0"
+      },
+      {
+        "type": "input-number",
+        "name": "version",
+        "label": "Version",
+        "size": "sm"
+      }
+    ],
     "actions": [
         {
             "type": "button",
@@ -63,7 +85,32 @@ order: 31
         "avatarClassName": "pull-left thumb-md avatar b-3x m-r",
         "avatar": "data:image/svg+xml,%3C%3Fxml version='1.0' standalone='no'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg t='1631083237695' class='icon' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='2420' xmlns:xlink='http://www.w3.org/1999/xlink' width='1024' height='1024'%3E%3Cdefs%3E%3Cstyle type='text/css'%3E%3C/style%3E%3C/defs%3E%3Cpath d='M959.872 128c0.032 0.032 0.096 0.064 0.128 0.128v767.776c-0.032 0.032-0.064 0.096-0.128 0.128H64.096c-0.032-0.032-0.096-0.064-0.128-0.128V128.128c0.032-0.032 0.064-0.096 0.128-0.128h895.776zM960 64H64C28.8 64 0 92.8 0 128v768c0 35.2 28.8 64 64 64h896c35.2 0 64-28.8 64-64V128c0-35.2-28.8-64-64-64z' p-id='2421' fill='%23bfbfbf'%3E%3C/path%3E%3Cpath d='M832 288c0 53.024-42.976 96-96 96s-96-42.976-96-96 42.976-96 96-96 96 42.976 96 96zM896 832H128V704l224-384 256 320h64l224-192z' p-id='2422' fill='%23bfbfbf'%3E%3C/path%3E%3C/svg%3E"
     },
-    "body": "这里是内容",
+    "useCardLabel": false,
+    "body": [
+      {
+        "type": "divider"
+      },
+      {
+        "type": "tpl",
+        "tpl": "Trident",
+        "inline": false,
+        "label": "Engine"
+      },
+      {
+        "name": "static",
+        "type": "static",
+        "label": "Browser",
+        "value": "Internet Explorer 5.0",
+        "mode": "horizontal"
+      },
+      {
+        "type": "input-number",
+        "name": "version",
+        "label": "Version",
+        "size": "sm",
+        "mode": "horizontal"
+      }
+    ],
     "actions": [
         {
             "type": "button",

packages/amis/src/renderers/Card.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import omit from 'lodash/omit';
-import merge from 'lodash/merge';
+import extend from 'lodash/extend';
 import {Renderer, RendererProps} from 'amis-core';
 import {SchemaNode, Schema, ActionObject, PlainObject} from 'amis-core';
 import {filter, evalExpression} from 'amis-core';
@@ -498,7 +498,8 @@ export class CardRenderer extends React.Component<CardProps> {
   }
 
   renderFeild(region: string, field: Schema, key: any, props: any) {
-    const {render, classnames: cx, itemIndex, useCardLabel} = props;
+    const {render, classnames: cx, itemIndex} = props;
+    const useCardLabel = props?.useCardLabel !== false;
     const data = this.props.data;
     if (!field || !isVisible(field, data)) {
       return;
@@ -517,18 +518,14 @@ export class CardRenderer extends React.Component<CardProps> {
         {
           render(
             region,
-            merge(
-              {
-                ...field,
-                field: field,
-                $$id,
-                type: 'card-item-field'
-              },
-              useCardLabel
-                ? {label: false, field: {...field, label: false}}
-                : {}
-            ),
             {
+              ...field,
+              field: field,
+              $$id,
+              type: 'card-item-field'
+            },
+            {
+              useCardLabel,
               className: cx('Card-fieldValue', field.className),
               rowIndex: itemIndex,
               colIndex: key,
@@ -805,9 +802,9 @@ export class CardItemFieldRenderer extends TableCell {
       tabIndex,
       onKeyUp,
       field,
+      useCardLabel,
       ...rest
     } = this.props;
-
     const schema = {
       ...field,
       className: innerClassName,
@@ -819,7 +816,12 @@ export class CardItemFieldRenderer extends TableCell {
       : render('field', schema, {
           ...omit(rest, Object.keys(schema)),
           value,
-          data
+          data,
+          /** 表单项默认隐藏label，否则会显示两个label */
+          ...(useCardLabel &&
+          !~['tpl', 'html', 'plain', 'text'].indexOf(schema?.type)
+            ? {label: false}
+            : {})
         });
 
     if (width) {