From 75a174f650b3e95d5831fb3a9daa55ef9569273b Mon Sep 17 00:00:00 2001
From: Cmen <1176967590@qq.com>
Date: Wed, 19 Jan 2022 20:36:02 +0800
Subject: [PATCH] =?UTF-8?q?=E5=88=9D=E5=A7=8B=E5=8C=96=E5=B7=A5=E5=85=B7?=
 =?UTF-8?q?=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/editor/Plot/Tools/index.tsx | 21 +++++++++
 src/editor/Plot/index.less      | 29 ++++++++++++
 src/editor/Plot/index.tsx       |  6 ++-
 src/icon.less                   | 78 +++++++++++++++++++++++++++++++++
 src/index.less                  |  2 +
 5 files changed, 134 insertions(+), 2 deletions(-)
 create mode 100644 src/editor/Plot/Tools/index.tsx
 create mode 100644 src/icon.less

diff --git a/src/editor/Plot/Tools/index.tsx b/src/editor/Plot/Tools/index.tsx
new file mode 100644
index 0000000..12bc66c
--- /dev/null
+++ b/src/editor/Plot/Tools/index.tsx
@@ -0,0 +1,21 @@
+
+const Tools = () => {
+  return (
+    <>
+      <div className="marker-tools">
+        <span className="icon icon-rect"></span>
+        <span className="icon icon-circle"></span>
+      </div>
+      <div className="common-tools">
+        <div className="tools-group">
+          <span className="icon icon-search"></span>
+        </div>
+        <div className="tools-group">
+        <span className="icon icon-select"></span>
+        </div>
+      </div>
+    </>
+  );
+}
+
+export default Tools;
\ No newline at end of file
diff --git a/src/editor/Plot/index.less b/src/editor/Plot/index.less
index 807feb6..9edecf5 100644
--- a/src/editor/Plot/index.less
+++ b/src/editor/Plot/index.less
@@ -4,6 +4,7 @@
   height: calc(100% - 40px);
   top: 40px;
   left: 0;
+  z-index: 0;
 }
 .tools-properties{
   position: absolute;
@@ -11,4 +12,32 @@
   height: 40px;
   background-color: #fff;
   border-bottom: 1px solid #ccc;
+}
+.tools-area{
+  margin-top: 40px;
+  padding: 20px;
+  position: relative;
+  z-index: 10;
+  .marker-tools{
+    background-color: rgb(105, 105, 105);
+    border-radius: 4px;
+    display: inline-block;
+    color: #fff;
+    .icon{
+      border-right: 1px dashed rgb(168, 168, 168);
+    }
+  }
+  .common-tools{
+    margin-top: 10px;
+    display: flex;
+    flex-direction: column;
+    .tools-group{
+      width: 26px;
+      background-color: #fff;
+      display: inline-block;
+      border-radius: 4px;
+      margin-top: 4px;
+      box-shadow: 1px 1px 4px rgba(0, 0, 0, .3);
+    }
+  }
 }
\ No newline at end of file
diff --git a/src/editor/Plot/index.tsx b/src/editor/Plot/index.tsx
index 7342801..1bd23c2 100644
--- a/src/editor/Plot/index.tsx
+++ b/src/editor/Plot/index.tsx
@@ -1,7 +1,7 @@
 import { Layout } from "antd";
 import { useEffect, useRef } from "react";
 import { MapStage } from "../../mapStage";
-
+import Tools from "./Tools";
 
 import "./index.less";
 
@@ -20,7 +20,9 @@ const Plot = () => {
     <>
       <div className="map-stage" ref={mapStageRef}></div>
       <div className="tools-properties"></div>
-      <div className="tools-area"></div>
+      <div className="tools-area">
+        <Tools />
+      </div>
     </>
   );
 };
diff --git a/src/icon.less b/src/icon.less
new file mode 100644
index 0000000..4897424
--- /dev/null
+++ b/src/icon.less
@@ -0,0 +1,78 @@
+@font-face {
+  font-family: 'iconfont';  /* Project id 2872894 */
+  src: url('//at.alicdn.com/t/font_2872894_c6wq9g1vj1v.woff2?t=1642594908994') format('woff2'),
+       url('//at.alicdn.com/t/font_2872894_c6wq9g1vj1v.woff?t=1642594908994') format('woff'),
+       url('//at.alicdn.com/t/font_2872894_c6wq9g1vj1v.ttf?t=1642594908994') format('truetype');
+}
+.icon{
+  font-family: 'iconfont';
+  font-size: 14px;
+  line-height: 20px;
+  cursor: pointer;
+  font-weight: bold;
+  user-select: none;
+  outline: none;
+  padding: 3px 6px;
+  display: inline-block;
+}
+.icon-boundary:after{
+  content: '\e7a9'; 
+}
+.icon-confirm:after{
+  content: '\e618';
+}
+.icon-export:after{
+  content: '\e791';
+}
+.icon-polygon:after{
+  content: '\e67b';
+}
+.icon-ellipse:after{
+  content: '\e610';
+}
+.icon-polyline:after{
+  content: '\e68f';
+}
+.icon-edit:after{
+  content: '\e609';
+}
+.icon-delete:after{
+  content: '\e61c';
+}
+.icon-search:after{
+  content: '\e600';
+}
+.icon-select:after{
+  content: '\e607';
+}
+.icon-help:after{
+  content: '\e752';
+}
+.icon-import:after{
+  content: '\e792';
+}
+.icon-open:after{
+  content: '\eddb'
+}
+.icon-save:after{
+  content: '\eddc';
+}
+.icon-setting:after{
+  content: '\e78e';
+}
+.icon-location:after{
+  content: '\e793';
+}
+.icon-rect:after{
+  content: '\e604';
+}
+.icon-circle:after{
+  content: '\edf8';
+}
+.icon-selected{
+  color: rgb(31, 107, 206);
+}
+.icon-disable{
+  color: rgb(155, 155, 155);
+  cursor: default;
+}
\ No newline at end of file
diff --git a/src/index.less b/src/index.less
index 4c5d835..3c80883 100644
--- a/src/index.less
+++ b/src/index.less
@@ -1,3 +1,5 @@
+@import "./icon.less";
+
 html, body{
   margin: 0;
   padding: 0;