feat: CRUD 工具栏增加 reload 按钮 (#2967)

* feat: CRUD 工具栏增加 reload 按钮

* 示例按钮改成右对齐

* 修复 Dark 主题下属性表显示问题

docs/zh-CN/components/crud.md

@@ -1948,6 +1948,95 @@ crud 组件支持通过配置`headerToolbar`和`footerToolbar`属性，实现在
 }
 ```
 
+### 刷新按钮
+
+> 1.5.0 及以上版本
+
+可以通过 `reload` 来展现刷新按钮
+
+```schema: scope="body"
+{
+    "type": "crud",
+    "syncLocation": false,
+    "api": "/api/sample",
+    "headerToolbar": [
+        "reload"
+    ],
+    "columns": [
+        {
+            "name": "id",
+            "label": "ID"
+        },
+        {
+            "name": "engine",
+            "label": "Rendering engine"
+        },
+        {
+            "name": "browser",
+            "label": "Browser"
+        },
+        {
+            "name": "platform",
+            "label": "Platform(s)"
+        },
+        {
+            "name": "version",
+            "label": "Engine version"
+        },
+        {
+            "name": "grade",
+            "label": "CSS grade"
+        }
+    ]
+}
+```
+
+它其实是个简化的 `button` 组件，可以参考 `button` 组件的文档做调整，比如
+
+```schema: scope="body"
+{
+    "type": "crud",
+    "syncLocation": false,
+    "api": "/api/sample",
+    "headerToolbar": [
+        {
+            "type": "reload",
+            "align": "right",
+            "icon": "iconfont icon-refresh",
+            "label": "刷新",
+            "tooltip": "",
+            "level": "success"
+        }
+    ],
+    "columns": [
+        {
+            "name": "id",
+            "label": "ID"
+        },
+        {
+            "name": "engine",
+            "label": "Rendering engine"
+        },
+        {
+            "name": "browser",
+            "label": "Browser"
+        },
+        {
+            "name": "platform",
+            "label": "Platform(s)"
+        },
+        {
+            "name": "version",
+            "label": "Engine version"
+        },
+        {
+            "name": "grade",
+            "label": "CSS grade"
+        }
+    ]
+}
+```
+
 ## 总结行
 
 如果是默认的表格模式，还支持增加总结行，具体请参考 [table](./table#总结行) 的文档。

examples/doc.css

@@ -471,7 +471,6 @@
 }
 
 .markdown-body table:not(.table) tr {
-  background-color: #fff;
   border-top: 1px solid #ccc;
 }
 
@@ -479,6 +478,10 @@
   background-color: #f8f8f8;
 }
 
+body.dark .markdown-body table:not(.table) tr:nth-child(2n) {
+  background: none;
+}
+
 /* modified by zhangjun08
  * 更改文档中的图片展示样式
  */

src/locale/de-DE.ts

@@ -223,6 +223,7 @@ register('de-DE', {
   'Wizard.saveAndNext': 'Speichern & Weiter',
   'year-to-year': '{{from}} - {{to}}',
   'Year.placeholder': 'Wählen Sie ein Jahr',
+  'reload': 'Neu laden',
   'rotate': 'Drehen',
   'Editor.fullscreen': 'Schirmfüllend Modus',
   'Editor.exitFullscreen': 'Zurücktreten Schirmfüllend Modus',

src/locale/en-US.ts

@@ -224,6 +224,7 @@ register('en-US', {
   'Wizard.saveAndNext': 'Save & Next',
   'year-to-year': '{{from}} - {{to}}',
   'Year.placeholder': 'Select a Year',
+  'reload': 'Reload',
   'rotate': 'Rotate',
   'Editor.fullscreen': 'full screen',
   'Editor.exitFullscreen': 'exit fullscreen mode',

src/locale/zh-CN.ts

@@ -228,6 +228,7 @@ register('zh-CN', {
   'Wizard.saveAndNext': '保存并下一步',
   'year-to-year': '{{from}} 年 - {{to}} 年',
   'Year.placeholder': '请选择年',
+  'reload': '刷新',
   'rotate': '旋转',
   'Editor.fullscreen': '全屏',
   'Editor.exitFullscreen': '退出全屏',

src/renderers/CRUD.tsx

@@ -1802,7 +1802,7 @@ export default class CRUD extends React.Component<CRUDProps, any> {
       return null;
     }
 
-    const {render, store} = this.props;
+    const {render, store, translate: __} = this.props;
     const type = (toolbar as Schema).type || toolbar;
 
     if (type === 'bulkActions' || type === 'bulk-actions') {
@@ -1819,6 +1819,22 @@ export default class CRUD extends React.Component<CRUDProps, any> {
       return this.renderFilterToggler();
     } else if (type === 'export-csv') {
       return this.renderExportCSV(toolbar as Schema);
+    } else if (type === 'reload') {
+      let reloadButton = {
+        label: '',
+        icon: 'fa fa-sync',
+        tooltip: __('reload'),
+        tooltipPlacement: 'top',
+        type: 'button'
+      };
+      if (typeof toolbar === 'object') {
+        reloadButton = {...reloadButton, ...omit(toolbar, ['type', 'align'])};
+      }
+      return render(`toolbar/${index}`, reloadButton, {
+        onAction: () => {
+          this.reload();
+        }
+      });
     } else if (Array.isArray(toolbar)) {
       const children: Array<any> = toolbar
         .filter((toolbar: any) => isVisible(toolbar, store.filterData))