diff --git a/src/components/BackTop/index.tsx b/src/components/BackTop/index.tsx
index aef8d46..689ab63 100644
--- a/src/components/BackTop/index.tsx
+++ b/src/components/BackTop/index.tsx
@@ -8,7 +8,7 @@ const themeObj = {
   primary: { bgColor: '#00bc71', color: '#fff' },
   blue: { bgColor: '#06c', color: '#fff' },
 };
-const BackTop = memo((props: { theme: any }) => {
+const BackTop = memo((props: { theme: keyof typeof themeObj }) => {
   const { theme = 'simple' } = props;
 
   return (
diff --git a/src/components/CardPicker/index.js b/src/components/CardPicker/index.tsx
similarity index 86%
rename from src/components/CardPicker/index.js
rename to src/components/CardPicker/index.tsx
index f0c4c0d..f97bfbb 100644
--- a/src/components/CardPicker/index.js
+++ b/src/components/CardPicker/index.tsx
@@ -3,7 +3,13 @@ import classnames from 'classnames';
 import Icon from '../Icon';
 import styles from './index.less';
 
-export default memo(props => {
+interface CardPickerType {
+  type: any;
+  icons: Array<any>;
+  onChange: any;
+}
+
+export default memo((props: CardPickerType) => {
   const { type, icons, onChange } = props;
 
   const [selected, setSelected] = useState(type);
diff --git a/src/components/Icon/index.js b/src/components/Icon/index.js
deleted file mode 100644
index 8fcd47d..0000000
--- a/src/components/Icon/index.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import { memo } from 'react';
-import * as Icon from '@ant-design/icons';
-import IconImg from 'assets/icon.png';
-
-const XIcon = memo(props => {
-  const { color, size, type, spin, isTpl } = props;
-
-  const MyIcon = Icon[type];
-
-  return isTpl ? (
-    <div style={{ textAlign: 'center' }}>
-      <img style={{ verticalAlign: '-20px', width: '82px' }} src={IconImg} alt={type} />
-      图标
-    </div>
-  ) : (
-    <MyIcon twoToneColor={color} style={{ fontSize: size }} spin={spin} />
-  );
-});
-
-export default XIcon;
diff --git a/src/components/Icon/index.tsx b/src/components/Icon/index.tsx
new file mode 100644
index 0000000..81baf1f
--- /dev/null
+++ b/src/components/Icon/index.tsx
@@ -0,0 +1,396 @@
+import { memo } from 'react';
+import * as Icon from '@ant-design/icons';
+import IconImg from 'assets/icon.png';
+import { TwoToneColor } from '@ant-design/icons';
+import { AntdIconProps } from '@ant-design/icons/lib/components/AntdIcon';
+
+interface IconType {
+  color?: TwoToneColor;
+  size?: number;
+  type?: string;
+  spin?: boolean;
+  isTpl?: string;
+}
+
+export type AntdIconType =
+  | 'max'
+  | 'required'
+  | 'default'
+  | 'high'
+  | 'low'
+  | 'disabled'
+  | 'start'
+  | 'open'
+  | 'media'
+  | 'hidden'
+  | 'cite'
+  | 'data'
+  | 'dir'
+  | 'form'
+  | 'label'
+  | 'slot'
+  | 'span'
+  | 'style'
+  | 'summary'
+  | 'title'
+  | 'pattern'
+  | 'async'
+  | 'defer'
+  | 'manifest'
+  | 'color'
+  | 'content'
+  | 'size'
+  | 'wrap'
+  | 'multiple'
+  | 'height'
+  | 'rotate'
+  | 'translate'
+  | 'width'
+  | 'prefix'
+  | 'src'
+  | 'children'
+  | 'key'
+  | 'list'
+  | 'step'
+  | 'aria-label'
+  | 'spin'
+  | 'accept'
+  | 'acceptCharset'
+  | 'action'
+  | 'allowFullScreen'
+  | 'allowTransparency'
+  | 'alt'
+  | 'as'
+  | 'autoComplete'
+  | 'autoFocus'
+  | 'autoPlay'
+  | 'capture'
+  | 'cellPadding'
+  | 'cellSpacing'
+  | 'charSet'
+  | 'challenge'
+  | 'checked'
+  | 'classID'
+  | 'cols'
+  | 'colSpan'
+  | 'controls'
+  | 'coords'
+  | 'crossOrigin'
+  | 'dateTime'
+  | 'download'
+  | 'encType'
+  | 'formAction'
+  | 'formEncType'
+  | 'formMethod'
+  | 'formNoValidate'
+  | 'formTarget'
+  | 'frameBorder'
+  | 'headers'
+  | 'href'
+  | 'hrefLang'
+  | 'htmlFor'
+  | 'httpEquiv'
+  | 'integrity'
+  | 'keyParams'
+  | 'keyType'
+  | 'kind'
+  | 'loop'
+  | 'marginHeight'
+  | 'marginWidth'
+  | 'maxLength'
+  | 'mediaGroup'
+  | 'method'
+  | 'min'
+  | 'minLength'
+  | 'muted'
+  | 'name'
+  | 'nonce'
+  | 'noValidate'
+  | 'optimum'
+  | 'placeholder'
+  | 'playsInline'
+  | 'poster'
+  | 'preload'
+  | 'readOnly'
+  | 'rel'
+  | 'reversed'
+  | 'rows'
+  | 'rowSpan'
+  | 'sandbox'
+  | 'scope'
+  | 'scoped'
+  | 'scrolling'
+  | 'seamless'
+  | 'selected'
+  | 'shape'
+  | 'sizes'
+  | 'srcDoc'
+  | 'srcLang'
+  | 'srcSet'
+  | 'target'
+  | 'type'
+  | 'useMap'
+  | 'value'
+  | 'wmode'
+  | 'defaultChecked'
+  | 'defaultValue'
+  | 'suppressContentEditableWarning'
+  | 'suppressHydrationWarning'
+  | 'accessKey'
+  | 'className'
+  | 'contentEditable'
+  | 'contextMenu'
+  | 'draggable'
+  | 'id'
+  | 'lang'
+  | 'spellCheck'
+  | 'tabIndex'
+  | 'radioGroup'
+  | 'role'
+  | 'about'
+  | 'datatype'
+  | 'inlist'
+  | 'property'
+  | 'resource'
+  | 'typeof'
+  | 'vocab'
+  | 'autoCapitalize'
+  | 'autoCorrect'
+  | 'autoSave'
+  | 'itemProp'
+  | 'itemScope'
+  | 'itemType'
+  | 'itemID'
+  | 'itemRef'
+  | 'results'
+  | 'security'
+  | 'unselectable'
+  | 'inputMode'
+  | 'is'
+  | 'aria-activedescendant'
+  | 'aria-atomic'
+  | 'aria-autocomplete'
+  | 'aria-busy'
+  | 'aria-checked'
+  | 'aria-colcount'
+  | 'aria-colindex'
+  | 'aria-colspan'
+  | 'aria-controls'
+  | 'aria-current'
+  | 'aria-describedby'
+  | 'aria-details'
+  | 'aria-disabled'
+  | 'aria-dropeffect'
+  | 'aria-errormessage'
+  | 'aria-expanded'
+  | 'aria-flowto'
+  | 'aria-grabbed'
+  | 'aria-haspopup'
+  | 'aria-hidden'
+  | 'aria-invalid'
+  | 'aria-keyshortcuts'
+  | 'aria-labelledby'
+  | 'aria-level'
+  | 'aria-live'
+  | 'aria-modal'
+  | 'aria-multiline'
+  | 'aria-multiselectable'
+  | 'aria-orientation'
+  | 'aria-owns'
+  | 'aria-placeholder'
+  | 'aria-posinset'
+  | 'aria-pressed'
+  | 'aria-readonly'
+  | 'aria-relevant'
+  | 'aria-required'
+  | 'aria-roledescription'
+  | 'aria-rowcount'
+  | 'aria-rowindex'
+  | 'aria-rowspan'
+  | 'aria-selected'
+  | 'aria-setsize'
+  | 'aria-sort'
+  | 'aria-valuemax'
+  | 'aria-valuemin'
+  | 'aria-valuenow'
+  | 'aria-valuetext'
+  | 'dangerouslySetInnerHTML'
+  | 'onCopy'
+  | 'onCopyCapture'
+  | 'onCut'
+  | 'onCutCapture'
+  | 'onPaste'
+  | 'onPasteCapture'
+  | 'onCompositionEnd'
+  | 'onCompositionEndCapture'
+  | 'onCompositionStart'
+  | 'onCompositionStartCapture'
+  | 'onCompositionUpdate'
+  | 'onCompositionUpdateCapture'
+  | 'onFocus'
+  | 'onFocusCapture'
+  | 'onBlur'
+  | 'onBlurCapture'
+  | 'onChange'
+  | 'onChangeCapture'
+  | 'onBeforeInput'
+  | 'onBeforeInputCapture'
+  | 'onInput'
+  | 'onInputCapture'
+  | 'onReset'
+  | 'onResetCapture'
+  | 'onSubmit'
+  | 'onSubmitCapture'
+  | 'onInvalid'
+  | 'onInvalidCapture'
+  | 'onLoad'
+  | 'onLoadCapture'
+  | 'onError'
+  | 'onErrorCapture'
+  | 'onKeyDown'
+  | 'onKeyDownCapture'
+  | 'onKeyPress'
+  | 'onKeyPressCapture'
+  | 'onKeyUp'
+  | 'onKeyUpCapture'
+  | 'onAbort'
+  | 'onAbortCapture'
+  | 'onCanPlay'
+  | 'onCanPlayCapture'
+  | 'onCanPlayThrough'
+  | 'onCanPlayThroughCapture'
+  | 'onDurationChange'
+  | 'onDurationChangeCapture'
+  | 'onEmptied'
+  | 'onEmptiedCapture'
+  | 'onEncrypted'
+  | 'onEncryptedCapture'
+  | 'onEnded'
+  | 'onEndedCapture'
+  | 'onLoadedData'
+  | 'onLoadedDataCapture'
+  | 'onLoadedMetadata'
+  | 'onLoadedMetadataCapture'
+  | 'onLoadStart'
+  | 'onLoadStartCapture'
+  | 'onPause'
+  | 'onPauseCapture'
+  | 'onPlay'
+  | 'onPlayCapture'
+  | 'onPlaying'
+  | 'onPlayingCapture'
+  | 'onProgress'
+  | 'onProgressCapture'
+  | 'onRateChange'
+  | 'onRateChangeCapture'
+  | 'onSeeked'
+  | 'onSeekedCapture'
+  | 'onSeeking'
+  | 'onSeekingCapture'
+  | 'onStalled'
+  | 'onStalledCapture'
+  | 'onSuspend'
+  | 'onSuspendCapture'
+  | 'onTimeUpdate'
+  | 'onTimeUpdateCapture'
+  | 'onVolumeChange'
+  | 'onVolumeChangeCapture'
+  | 'onWaiting'
+  | 'onWaitingCapture'
+  | 'onAuxClick'
+  | 'onAuxClickCapture'
+  | 'onClick'
+  | 'onClickCapture'
+  | 'onContextMenu'
+  | 'onContextMenuCapture'
+  | 'onDoubleClick'
+  | 'onDoubleClickCapture'
+  | 'onDrag'
+  | 'onDragCapture'
+  | 'onDragEnd'
+  | 'onDragEndCapture'
+  | 'onDragEnter'
+  | 'onDragEnterCapture'
+  | 'onDragExit'
+  | 'onDragExitCapture'
+  | 'onDragLeave'
+  | 'onDragLeaveCapture'
+  | 'onDragOver'
+  | 'onDragOverCapture'
+  | 'onDragStart'
+  | 'onDragStartCapture'
+  | 'onDrop'
+  | 'onDropCapture'
+  | 'onMouseDown'
+  | 'onMouseDownCapture'
+  | 'onMouseEnter'
+  | 'onMouseLeave'
+  | 'onMouseMove'
+  | 'onMouseMoveCapture'
+  | 'onMouseOut'
+  | 'onMouseOutCapture'
+  | 'onMouseOver'
+  | 'onMouseOverCapture'
+  | 'onMouseUp'
+  | 'onMouseUpCapture'
+  | 'onSelect'
+  | 'onSelectCapture'
+  | 'onTouchCancel'
+  | 'onTouchCancelCapture'
+  | 'onTouchEnd'
+  | 'onTouchEndCapture'
+  | 'onTouchMove'
+  | 'onTouchMoveCapture'
+  | 'onTouchStart'
+  | 'onTouchStartCapture'
+  | 'onPointerDown'
+  | 'onPointerDownCapture'
+  | 'onPointerMove'
+  | 'onPointerMoveCapture'
+  | 'onPointerUp'
+  | 'onPointerUpCapture'
+  | 'onPointerCancel'
+  | 'onPointerCancelCapture'
+  | 'onPointerEnter'
+  | 'onPointerEnterCapture'
+  | 'onPointerLeave'
+  | 'onPointerLeaveCapture'
+  | 'onPointerOver'
+  | 'onPointerOverCapture'
+  | 'onPointerOut'
+  | 'onPointerOutCapture'
+  | 'onGotPointerCapture'
+  | 'onGotPointerCaptureCapture'
+  | 'onLostPointerCapture'
+  | 'onLostPointerCaptureCapture'
+  | 'onScroll'
+  | 'onScrollCapture'
+  | 'onWheel'
+  | 'onWheelCapture'
+  | 'onAnimationStart'
+  | 'onAnimationStartCapture'
+  | 'onAnimationEnd'
+  | 'onAnimationEndCapture'
+  | 'onAnimationIteration'
+  | 'onAnimationIterationCapture'
+  | 'onTransitionEnd'
+  | 'onTransitionEndCapture'
+  | 'twoToneColor';
+
+const XIcon = memo((props: IconType) => {
+  const { color, size, type, spin, isTpl } = props;
+
+  const MyIcon: React.ForwardRefExoticComponent<Pick<AntdIconProps, AntdIconType> &
+    React.RefAttributes<HTMLSpanElement>> = Icon[type];
+
+  return isTpl ? (
+    <div style={{ textAlign: 'center' }}>
+      <img style={{ verticalAlign: '-20px', width: '82px' }} src={IconImg} alt={type} />
+      图标
+    </div>
+  ) : (
+    <MyIcon twoToneColor={color} style={{ fontSize: size }} spin={spin} />
+  );
+});
+
+export default XIcon;
diff --git a/src/pages/editor/Container.js b/src/pages/editor/Container.js
index e8502fd..9b4e19b 100644
--- a/src/pages/editor/Container.js
+++ b/src/pages/editor/Container.js
@@ -18,7 +18,6 @@ import template from 'components/DynamicEngine/template';
 import mediaTpl from 'components/DynamicEngine/mediaTpl';
 import graphTpl from 'components/DynamicEngine/graphTpl';
 import schema from 'components/DynamicEngine/schema';
-import { uuid } from 'utils/tool';
 
 import styles from './index.less';
 
diff --git a/src/pages/mobileTip.js b/src/pages/mobileTip.js
deleted file mode 100644
index 2cca494..0000000
--- a/src/pages/mobileTip.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from 'react'
-import { Result } from 'antd';
-
-function MobileTip(props) {
-  return (
-    <div>
-      <Result
-            status="500"
-            title="Dooring热情❤️提示"
-            subTitle="你好，客官，请在PC端使用Dooring哦～"
-        />
-    </div>
-  );
-}
-
-export default MobileTip;
diff --git a/src/pages/mobileTip.tsx b/src/pages/mobileTip.tsx
new file mode 100644
index 0000000..48c04da
--- /dev/null
+++ b/src/pages/mobileTip.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import { Result } from 'antd';
+
+function MobileTip(props) {
+  return (
+    <div>
+      <Result
+        status="500"
+        title="Dooring热情❤️提示"
+        subTitle="你好，客官，请在PC端使用Dooring哦～"
+      />
+    </div>
+  );
+}
+
+export default MobileTip;