From 59292259a6038c12ed0dc4d75b024fbf4f45cf9a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=8D=A3=E5=BD=AC?= <rongbin.arb@alibaba-inc.com>
Date: Sun, 2 Aug 2020 08:52:58 +0800
Subject: [PATCH] =?UTF-8?q?feat:=F0=9F=98=88=20history=20undo-redo?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD=E5=AE=8C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/plugin-undo-redo/package.json   |  1 +
 packages/plugin-undo-redo/src/index.scss |  8 +++++++
 packages/plugin-undo-redo/src/index.tsx  | 30 ++++++++++++++++++++----
 3 files changed, 35 insertions(+), 4 deletions(-)

diff --git a/packages/plugin-undo-redo/package.json b/packages/plugin-undo-redo/package.json
index 2bacd62f1..9d6fd3972 100644
--- a/packages/plugin-undo-redo/package.json
+++ b/packages/plugin-undo-redo/package.json
@@ -24,6 +24,7 @@
     "@ali/lowcode-editor-skeleton": "^0.8.33",
     "@ali/lowcode-types": "^0.8.11",
     "@ali/lowcode-utils": "^0.8.12",
+    "@ali/ve-icons": "^4.1.14",
     "react": "^16.8.1",
     "react-dom": "^16.8.1"
   },
diff --git a/packages/plugin-undo-redo/src/index.scss b/packages/plugin-undo-redo/src/index.scss
index e69de29bb..1b1d2a075 100644
--- a/packages/plugin-undo-redo/src/index.scss
+++ b/packages/plugin-undo-redo/src/index.scss
@@ -0,0 +1,8 @@
+.lowcode-plugin-undo-redo{
+  .next-btn-ghost.next-btn-dark{
+    color: #3c3c3c;
+  }
+  .next-btn-ghost.next-btn-dark[disabled]{
+    color: #ccc;
+  }
+}
\ No newline at end of file
diff --git a/packages/plugin-undo-redo/src/index.tsx b/packages/plugin-undo-redo/src/index.tsx
index 891b1e7b9..4439e55d6 100644
--- a/packages/plugin-undo-redo/src/index.tsx
+++ b/packages/plugin-undo-redo/src/index.tsx
@@ -1,10 +1,12 @@
 import React, { PureComponent } from 'react';
-import './index.scss';
 import { Editor, Title } from '@ali/lowcode-editor-core';
-import { TopIcon } from '@ali/lowcode-editor-skeleton';
+import Icon from '@ali/ve-icons';
+import { Button } from '@alifd/next';
 import { Designer } from '@ali/lowcode-designer';
 import { PluginProps } from '@ali/lowcode-types';
 
+import './index.scss';
+
 export interface IProps extends PluginProps {
   editor: Editor;
   logo?: string;
@@ -78,8 +80,28 @@ export default class UndoRedo extends PureComponent<IProps, IState> {
     const { undoEnable, redoEnable } = this.state;
     return (
       <div className="lowcode-plugin-undo-redo">
-        <TopIcon icon="houtui" title="后退" disabled={!undoEnable} onClick={this.handleUndoClick} />
-        <TopIcon icon="qianjin" title="前进" disabled={!redoEnable} onClick={this.handleRedoClick} />
+        <Button
+          size="18px"
+          data-tip="撤销"
+          data-dir="bottom"
+          className="ve-local-history-item"
+          onClick={this.handleUndoClick}
+          ghost
+          disabled={!undoEnable}
+        >
+          <Icon name="amindUndo" size="18px" />
+        </Button>
+        <Button
+          size="18px"
+          data-tip="恢复"
+          data-dir="bottom"
+          className="ve-local-history-item"
+          onClick={this.handleRedoClick}
+          ghost
+          disabled={!redoEnable}
+        >
+          <Icon name="forward" size="18px" />
+        </Button>
       </div>
     );
   }