feat: card 增加 avatarTextBackground 设置，可以实现多背景色功能 Closes #3015 (#3020)

docs/zh-CN/components/card.md

@@ -85,6 +85,74 @@ order: 31
 }
 ```
 
+## 设置头像文本
+
+如果没有 avatar，还可以通过 `avatarText` 设置头像文本
+
+```schema: scope="body"
+{
+    "type": "card",
+    "href": "https://github.com/baidu/amis",
+    "header": {
+        "title": "标题",
+        "subTitle": "副标题",
+        "description": "这是一段描述",
+        "avatarText": "AMIS"
+    },
+    "body": "这里是内容"
+}
+```
+
+> 1.5.0 及以上版本
+
+可以设置文本背景色，它会根据数据分配一个颜色，主要配合 `cards` 使用
+
+```schema
+{
+  "type": "page",
+  "data": {
+    "items": [
+      {
+        "engine": "Trident",
+        "browser": "Internet Explorer 4.0"
+      },
+      {
+        "engine": "Chrome",
+        "browser": "Chrome 44"
+      },
+      {
+        "engine": "Gecko",
+        "browser": "Firefox 1.0"
+      },
+      {
+        "engine": "Presto",
+        "browser": "Opera 10"
+      },
+      {
+        "engine": "Webkie",
+        "browser": "Safari 12"
+      }
+    ]
+  },
+  "body": {
+    "type": "cards",
+    "source": "$items",
+    "card": {
+      "header": {
+        "avatarText": "${engine|substring:0:2|upperCase}",
+        "avatarTextBackground": ["#FFB900", "#D83B01", "#B50E0E", "#E81123", "#B4009E", "#5C2D91", "#0078D7", "#00B4FF", "#008272"]
+      },
+      "body": [
+        {
+          "label": "Browser",
+          "name": "browser"
+        }
+      ]
+    }
+  }
+}
+```
+
 ## 点击卡片的行为
 
 > 1.4.0 及以上版本

docs/zh-CN/concepts/data-mapping.md

@@ -1371,6 +1371,33 @@ ${xxx | upperCase}
 }
 ```
 
+### substring
+
+> 1.5.0 及以上版本
+
+取字符串的一部分，第一个参数是起始，第二个参数的结束
+
+##### 基本用法
+
+下面写法将会取前两个字符
+
+```
+${xxx | substring:0:2}
+```
+
+```schema
+{
+  "type": "page",
+  "data": {
+    "text": "World"
+  },
+  "body": {
+    "type": "tpl",
+    "tpl": "Hello ${text|substring:0:2}"
+  }
+}
+```
+
 ### base64Encode
 
 base64 加密

scss/components/_card.scss

@@ -71,7 +71,7 @@
     float: left;
     margin-right: var(--gap-base);
     font-size: var(--fontSizeXl);
-    text-transform: uppercase();
+    text-transform: uppercase;
   }
 
   &-meta {

src/renderers/Card.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import {findDOMNode} from 'react-dom';
 import {Renderer, RendererProps} from '../factory';
-import {SchemaNode, Schema, Action} from '../types';
+import {SchemaNode, Schema, Action, PlainObject} from '../types';
 import {filter, evalExpression} from '../utils/tpl';
 import cx from 'classnames';
 import Checkbox from '../components/Checkbox';
@@ -11,7 +11,8 @@ import {
   isVisible,
   isDisabled,
   noop,
-  isClickOnInput
+  isClickOnInput,
+  hashCode
 } from '../utils/helper';
 import {resolveVariable} from '../utils/tpl-builtin';
 import QuickEdit, {SchemaQuickEdit} from './QuickEdit';
@@ -128,6 +129,7 @@ export interface CardSchema extends BaseSchema {
     avatar?: SchemaUrlPath;
 
     avatarText?: SchemaTpl;
+    avatarTextBackground?: String[];
     avatarTextClassName?: SchemaClassName;
 
     /**
@@ -485,6 +487,7 @@ export class Card extends React.Component<CardProps> {
         highlight: highlightTpl,
         avatar: avatarTpl,
         avatarText: avatarTextTpl,
+        avatarTextBackground,
         title: titleTpl,
         subTitle: subTitleTpl,
         subTitlePlaceholder,
@@ -500,6 +503,13 @@ export class Card extends React.Component<CardProps> {
       const title = filter(titleTpl, data);
       const subTitle = filter(subTitleTpl, data);
       const desc = filter(header?.description || descTpl, data);
+      const avatarTextStyle: PlainObject = {};
+      if (avatarText && avatarTextBackground && avatarTextBackground.length) {
+        avatarTextStyle['background'] =
+          avatarTextBackground[
+            Math.abs(hashCode(avatarText)) % avatarTextBackground.length
+          ];
+      }
 
       heading = (
         <div className={cx('Card-heading', header?.className)}>
@@ -524,6 +534,7 @@ export class Card extends React.Component<CardProps> {
                 'Card-avtarText',
                 header?.avatarTextClassName || avatarTextClassName
               )}
+              style={avatarTextStyle}
             >
               {avatarText}
             </span>

src/utils/helper.ts

@@ -1707,6 +1707,14 @@ export function isClickOnInput(e: React.MouseEvent<HTMLElement>) {
   return false;
 }
 
+// 计算字符串 hash
+export function hashCode(s: string): number {
+  return s.split('').reduce((a, b) => {
+    a = (a << 5) - a + b.charCodeAt(0);
+    return a & a;
+  }, 0);
+}
+
 /**
  * 遍历 schema
  * @param json

src/utils/tpl-builtin.ts

@@ -514,6 +514,12 @@ export const filters: {
     );
   },
 
+  substring: (input, start, end) => {
+    return input && typeof input === 'string'
+      ? input.substring(start, end)
+      : input;
+  },
+
   lowerCase: input =>
     input && typeof input === 'string' ? input.toLowerCase() : input,
   upperCase: input =>