feat：新增面包屑组件 (#1644)

* feat：新增面包屑组件

* icon 加个小间距

docs/zh-CN/components/breadcrumb.md

@@ -0,0 +1,100 @@
+---
+title: Breadcrumb 面包屑
+description:
+type: 0
+group: ⚙ 组件
+menuName: Breadcrumb
+icon:
+order: 30
+---
+
+## 基本用法
+
+```schema: scope="body"
+{
+  "type": "breadcrumb",
+  "items": [
+    {
+      "label": "首页",
+      "href": "https://baidu.gitee.com/",
+      "icon": "fa fa-home"
+    },
+
+    {
+      "label": "上级页面"
+    },
+
+    {
+      "label": "<b>当前页面</b>"
+    }
+  ]
+}
+```
+
+## 动态数据
+
+可以配置 source 来获取上下文中的动态数据，结合 [service](service) 来实现动态生成。
+
+```schema
+{
+  "type": "page",
+  "data": {
+    "breadcrumb": [
+      {
+        "label": "首页",
+        "href": "https://baidu.gitee.com/"
+      },
+
+      {
+        "label": "上级页面"
+      },
+
+      {
+        "label": "<b>当前页面</b>"
+      }
+    ]
+  },
+  "body": {
+    "type": "breadcrumb",
+    "source": "${breadcrumb}"
+  }
+}
+```
+
+## 分隔符
+
+```schema: scope="body"
+{
+  "type": "breadcrumb",
+  "separator": ">",
+  "separatorClassName": "text-black",
+  "items": [
+    {
+      "label": "首页",
+      "href": "https://baidu.gitee.com/",
+      "icon": "fa fa-home"
+    },
+
+    {
+      "label": "上级页面"
+    },
+
+    {
+      "label": "<b>当前页面</b>"
+    }
+  ]
+}
+```
+
+## 属性表
+
+| 属性名             | 类型     | 默认值 | 说明             |
+| ------------------ | -------- | ------ | ---------------- |
+| className          | `string` |        | 外层类名         |
+| itemClassName      | `string` |        | 每个面包屑的类名 |
+| separatorClassName | `string` |        | 分割符的类名     |
+| separator          | `string` |        | 分隔符           |
+| source             | `string` |        | 动态数据         |
+| items[].label      | `string` |        | 显示文本         |
+| items[].href       | `string` |        | 链接地址         |
+| items[].icon       | `string` |        | [图标](icon)     |

docs/zh-CN/concepts/style.md

@@ -74,6 +74,180 @@ amis 中有大量的功能类 class 可以使用，即可以用在 schema 中，
 
 > 你可能需要掌握一些基础的 CSS 知识
 
+## 字体颜色
+
+实际颜色取决于主题，下面示例是默认主题的颜色。
+
+```css
+.text-primary {
+  color: #7266ba;
+}
+
+.text-primary-lt {
+  color: #6254b2;
+}
+
+.text-primary-lter {
+  color: #564aa3;
+}
+
+.text-primary-dk {
+  color: #6254b2;
+}
+
+.text-primary-dker {
+  color: #564aa3;
+}
+
+.text-info {
+  color: #23b7e5;
+}
+
+.text-info-lt {
+  color: #19a9d5;
+}
+
+.text-info-lter {
+  color: #1797be;
+}
+
+.text-info-dk {
+  color: #19a9d5;
+}
+
+.text-info-dker {
+  color: #1797be;
+}
+
+.text-success {
+  color: #27c24c;
+}
+
+.text-success-lt {
+  color: #23ad44;
+}
+
+.text-success-lter {
+  color: #1e983b;
+}
+
+.text-success-dk {
+  color: #23ad44;
+}
+
+.text-success-dker {
+  color: #1e983b;
+}
+
+.text-warning {
+  color: #fad733;
+}
+
+.text-warning-lt {
+  color: #f9d21a;
+}
+
+.text-warning-lter {
+  color: #f4ca06;
+}
+
+.text-warning-dk {
+  color: #f9d21a;
+}
+
+.text-warning-dker {
+  color: #f4ca06;
+}
+
+.text-danger {
+  color: #f05050;
+}
+
+.text-danger-lt {
+  color: #ee3939;
+}
+
+.text-danger-lter {
+  color: #ec2121;
+}
+
+.text-danger-dk {
+  color: #ee3939;
+}
+
+.text-danger-dker {
+  color: #ec2121;
+}
+
+.text-dark {
+  color: #3a3f51;
+}
+
+.text-dark-lt {
+  color: #2f3342;
+}
+
+.text-dark-lter {
+  color: #252833;
+}
+
+.text-dark-dk {
+  color: #2f3342;
+}
+
+.text-dark-dker {
+  color: #252833;
+}
+
+.text-white {
+  color: #fff;
+}
+
+.text-white-lt {
+  color: #f2f2f2;
+}
+
+.text-white-lter {
+  color: #e6e6e6;
+}
+
+.text-white-dk {
+  color: #f2f2f2;
+}
+
+.text-white-dker {
+  color: #e6e6e6;
+}
+
+.text-black {
+  color: #1c2b36;
+}
+
+.text-black-lt {
+  color: #131e25;
+}
+
+.text-black-lter {
+  color: #0b1014;
+}
+
+.text-black-dk {
+  color: #131e25;
+}
+
+.text-black-dker {
+  color: #0b1014;
+}
+
+.text-muted {
+  color: var(--text--muted-color);
+}
+
+.text-loud {
+  color: var(--text--loud-color);
+}
+```
+
 ## 图标
 
 amis 集成了 [fontawesome](http://fontawesome.io/icons/)，所以关于图标部分，请前往 [fontawesome](http://fontawesome.io/icons/) 查看。

examples/components/Components.tsx

@@ -146,6 +146,15 @@ export const components = [
             makeMarkdownRenderer
           )
       },
+      {
+        label: 'Breadcrumb 面包屑',
+        path: '/zh-CN/components/breadcrumb',
+        getComponent: () =>
+          // @ts-ignore
+          import('../../docs/zh-CN/components/breadcrumb.md').then(
+            makeMarkdownRenderer
+          )
+      },
       {
         label: 'Custom 自定义组件',
         path: '/zh-CN/components/custom',

package.json

@@ -1,6 +1,6 @@
 {
   "name": "amis",
-  "version": "1.1.4",
+  "version": "1.1.5",
   "description": "一种MIS页面生成工具",
   "main": "lib/index.js",
   "scripts": {

scss/components/_breadcrumb.scss

@@ -0,0 +1,9 @@
+.#{$ns}Breadcrumb {
+  &-icon {
+    margin-right: px2rem(2px);
+  }
+  &-separator {
+    user-select: none;
+    margin: 0 var(--gap-xs);
+  }
+}

scss/themes/_common.scss

@@ -9,6 +9,7 @@
 @import '../layout/hbox';
 @import '../layout/vbox';
 @import '../components/button'; // 这个要放在最前面
+@import '../components/breadcrumb';
 @import '../components/modal';
 @import '../components/drawer';
 @import '../components/tooltip';

src/Schema.ts

@@ -64,6 +64,7 @@ export type SchemaType =
   | 'audio'
   | 'button-group'
   | 'button-toolbar'
+  | 'breadcrumb'
   | 'card'
   | 'cards'
   | 'carousel'

src/index.tsx

@@ -51,6 +51,7 @@ import './renderers/App';
 import './renderers/Remark';
 import './renderers/ButtonGroup';
 import './renderers/ButtonToolbar';
+import './renderers/Breadcrumb';
 import './renderers/DropDownButton';
 import './renderers/Collapse';
 import './renderers/Color';

src/renderers/Breadcrumb.tsx

@@ -0,0 +1,111 @@
+/**
+ * @file 用来展示面包屑导航
+ */
+import React from 'react';
+import {Renderer, RendererProps} from '../factory';
+import {BaseSchema, SchemaIcon, SchemaUrlPath} from '../Schema';
+import {generateIcon} from '../utils/icon';
+import {filter} from '../utils/tpl';
+import {resolveVariable, resolveVariableAndFilter} from '../utils/tpl-builtin';
+
+export type BreadcrumbItemSchema = {
+  /**
+   * 文字
+   */
+  label?: string;
+
+  /**
+   * 图标类名
+   */
+  icon?: SchemaIcon;
+
+  /**
+   * 链接地址
+   */
+  href?: SchemaUrlPath;
+} & Omit<BaseSchema, 'type'>;
+
+/**
+ * Breadcrumb 显示渲染器
+ * 文档：https://baidu.gitee.io/amis/docs/components/breadcrumb
+ */
+export interface BreadcrumbSchema extends BaseSchema {
+  /**
+   *  指定为面包屑显示控件
+   */
+  type: 'breadcrumb';
+
+  /**
+   * 分隔符
+   */
+  separator?: string;
+
+  /**
+   * 分隔符类
+   */
+  separatorClassName?: string;
+
+  /**
+   * 列表
+   */
+  items: Array<BreadcrumbItemSchema>;
+}
+
+export interface BreadcrumbProps
+  extends RendererProps,
+    Omit<BreadcrumbSchema, 'type' | 'className'> {}
+
+export class BreadcrumbField extends React.Component<BreadcrumbProps, object> {
+  static defaultProps = {
+    className: '',
+    itemClassName: '',
+    separator: '/'
+  };
+
+  render() {
+    const {
+      className,
+      itemClassName,
+      separatorClassName,
+      classnames: cx,
+      items,
+      source,
+      data,
+      separator,
+      render
+    } = this.props;
+
+    const crumbItems = items
+      ? items
+      : (resolveVariable(source, data) as Array<BreadcrumbItemSchema>);
+
+    const crumbs = crumbItems
+      .map<React.ReactNode>(item => (
+        <span className={cx('Breadcrumb-item', itemClassName)}>
+          {item.icon
+            ? generateIcon(cx, item.icon, 'Icon', 'Breadcrumb-icon')
+            : null}
+          {item.href ? (
+            <a href={item.href}>{filter(item.label, data)}</a>
+          ) : (
+            render('label', filter(item.label, data))
+          )}
+        </span>
+      ))
+      .reduce((prev, curr) => [
+        prev,
+        <span className={cx('Breadcrumb-separator', separatorClassName)}>
+          {separator}
+        </span>,
+        curr
+      ]);
+
+    return <div className={cx('Breadcrumb', className)}>{crumbs}</div>;
+  }
+}
+
+@Renderer({
+  test: /(^|\/)breadcrumb$/,
+  name: 'breadcrumb'
+})
+export class BreadcrumbFieldRenderer extends BreadcrumbField {}