feat: Add the `GGEditor` demo (#3810)

* feat: Add the `GGEditor` demo * style: Update the size of the card * feat: Extract the `MenuItem` and `ToolbarButton` components * feat: Add the shape type of the line * feat: Extract the `DetailForm` components * feat: add PageHeader * fix: add all local laug * fix: Fix the height of the editor

feat: Add the `GGEditor` demo (#3810)
* feat: Add the `GGEditor` demo * style: Update the size of the card * feat: Extract the `MenuItem` and `ToolbarButton` components * feat: Add the shape type of the line * feat: Extract the `DetailForm` components * feat: add PageHeader * fix: add all local laug * fix: Fix the height of the editor
19780739 · 高力 · 陈帅 · 7b84fe60 · 19780739 · 19780739
Commit 19780739 authored Mar 22, 2019 by 高力 Committed by 陈帅 Mar 22, 2019
52 changed files
--- a/config/router.config.js
+++ b/config/router.config.js
@@ -93,6 +93,29 @@ export default [
          },
        ],
      },
+      //  editor
+      {
+        name: 'editor',
+        icon: 'highlight',
+        path: '/editor',
+        routes: [
+          {
+            path: '/editor/flow',
+            name: 'flow',
+            component: './Editor/GGEditor/Flow',
+          },
+          {
+            path: '/editor/mind',
+            name: 'mind',
+            component: './Editor/GGEditor/Mind',
+          },
+          {
+            path: '/editor/koni',
+            name: 'koni',
+            component: './Editor/GGEditor/Koni',
+          },
+        ],
+      },
      // list
      {
        path: '/list',

--- a/package.json
+++ b/package.json
@@ -39,6 +39,7 @@
    "classnames": "^2.2.6",
    "dva": "^2.4.1",
    "enquire-js": "^0.2.1",
+    "gg-editor": "^2.0.2",
    "hash.js": "^1.1.7",
    "lodash": "^4.17.11",
    "lodash-decorators": "^6.0.1",

--- a/public/ggeditor/flow/decision.svg
+++ b/public/ggeditor/flow/decision.svg
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="86px" height="78px" viewBox="0 0 86 78" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 49.1 (51147) - http://www.bohemiancoding.com/sketch -->
+    <title>Group 3</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <path d="M42.6703722,1.66995728 L77.6353026,33.0218945 C79.2800648,34.4967003 79.4178417,37.0256099 77.9430359,38.6703722 C77.8461185,38.7784583 77.7433887,38.8811881 77.6353026,38.9781055 L42.6703722,70.3300427 C41.1508289,71.6925687 38.8491711,71.6925687 37.3296278,70.3300427 L2.36469744,38.9781055 C0.719935183,37.5032997 0.582158272,34.9743901 2.0569641,33.3296278 C2.1538815,33.2215417 2.25661129,33.1188119 2.36469744,33.0218945 L37.3296278,1.66995728 C38.8491711,0.307431303 41.1508289,0.307431303 42.6703722,1.66995728 Z" id="path-1"></path>
+        <filter x="-8.8%" y="-6.9%" width="117.5%" height="119.4%" filterUnits="objectBoundingBox" id="filter-2">
+            <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"></feComposite>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.04 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
+        </filter>
+    </defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Flow-01" transform="translate(-7.000000, -184.000000)">
+            <g id="Group-3" transform="translate(10.000000, 185.000000)">
+                <g id="Polygon">
+                    <use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
+                    <use fill-opacity="0.92" fill="#E6FFFB" fill-rule="evenodd" xlink:href="#path-1"></use>
+                    <path stroke="#5CDBD3" stroke-width="1" d="M42.3365757,2.04222047 C41.0069753,0.850010239 38.9930247,0.850010239 37.6634243,2.04222047 L2.69849396,33.3941577 C2.60391858,33.4789604 2.51403002,33.568849 2.42922729,33.6634243 C1.13877219,35.1025913 1.25932699,37.3153872 2.69849396,38.6058423 L37.6634243,69.9577795 C38.9930247,71.1499898 41.0069753,71.1499898 42.3365757,69.9577795 L77.301506,38.6058423 C77.3960814,38.5210396 77.48597,38.431151 77.5707727,38.3365757 C78.8612278,36.8974087 78.740673,34.6846128 77.301506,33.3941577 L42.3365757,2.04222047 Z"></path>
+                </g>
+                <text id="decision" font-family="PingFangSC-Regular, PingFang SC" font-size="12" font-weight="normal" line-spacing="12" fill="#000000" fill-opacity="0.65">
+                    <tspan x="18" y="42">Decision</tspan>
+                </text>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
--- a/public/ggeditor/flow/model.svg
+++ b/public/ggeditor/flow/model.svg
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="88px" height="56px" viewBox="0 0 88 56" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 49.1 (51147) - http://www.bohemiancoding.com/sketch -->
+    <title>Group 4</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <rect id="path-1" x="0" y="0" width="80" height="48" rx="24"></rect>
+        <filter x="-8.8%" y="-10.4%" width="117.5%" height="129.2%" filterUnits="objectBoundingBox" id="filter-2">
+            <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"></feComposite>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.04 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
+        </filter>
+    </defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Flow-01" transform="translate(-102.000000, -195.000000)">
+            <g id="Group-4" transform="translate(106.000000, 197.000000)">
+                <g id="Rectangle-15-Copy-35">
+                    <use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
+                    <use fill-opacity="0.92" fill="#F9F0FF" fill-rule="evenodd" xlink:href="#path-1"></use>
+                    <rect stroke="#B37FEB" stroke-width="1" x="0.5" y="0.5" width="79" height="47" rx="23.5"></rect>
+                </g>
+                <text id="model" font-family="PingFangSC-Regular, PingFang SC" font-size="12" font-weight="normal" line-spacing="12" fill="#000000" fill-opacity="0.65">
+                    <tspan x="24" y="29">Model</tspan>
+                </text>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
--- a/public/ggeditor/flow/normal.svg
+++ b/public/ggeditor/flow/normal.svg
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="88px" height="56px" viewBox="0 0 88 56" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 49.1 (51147) - http://www.bohemiancoding.com/sketch -->
+    <title>Group</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <rect id="path-1" x="0" y="0" width="80" height="48" rx="4"></rect>
+        <filter x="-8.8%" y="-10.4%" width="117.5%" height="129.2%" filterUnits="objectBoundingBox" id="filter-2">
+            <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"></feComposite>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.04 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
+        </filter>
+    </defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Flow-01" transform="translate(-6.000000, -105.000000)">
+            <g id="Group" transform="translate(10.000000, 107.000000)">
+                <g id="Rectangle-15-Copy">
+                    <use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
+                    <use fill-opacity="0.92" fill="#E6F7FF" fill-rule="evenodd" xlink:href="#path-1"></use>
+                    <rect stroke="#1890FF" stroke-width="1" x="0.5" y="0.5" width="79" height="47" rx="4"></rect>
+                </g>
+                <text id="normal" font-family="PingFangSC-Regular, PingFang SC" font-size="12" font-weight="normal" line-spacing="12" fill="#000000" fill-opacity="0.65">
+                    <tspan x="21" y="29">Normal</tspan>
+                </text>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
--- a/public/ggeditor/flow/start.svg
+++ b/public/ggeditor/flow/start.svg
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="80px" height="80px" viewBox="0 0 80 80" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 49.1 (51147) - http://www.bohemiancoding.com/sketch -->
+    <title>Group 2</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <circle id="path-1" cx="36" cy="36" r="36"></circle>
+        <filter x="-9.7%" y="-6.9%" width="119.4%" height="119.4%" filterUnits="objectBoundingBox" id="filter-2">
+            <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"></feComposite>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.04 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
+        </filter>
+    </defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Flow-01" transform="translate(-106.000000, -93.000000)">
+            <g id="Group-2" transform="translate(110.000000, 95.000000)">
+                <g id="Oval">
+                    <use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
+                    <use fill-opacity="0.92" fill="#FFF2E8" fill-rule="evenodd" xlink:href="#path-1"></use>
+                    <circle stroke="#FFC069" stroke-width="1" cx="36" cy="36" r="35.5"></circle>
+                </g>
+                <text id="start" font-family="PingFangSC-Regular, PingFang SC" font-size="12" font-weight="normal" line-spacing="12" fill="#000000" fill-opacity="0.65">
+                    <tspan x="23" y="41">Start</tspan>
+                </text>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
--- a/public/ggeditor/koni/bank.svg
+++ b/public/ggeditor/koni/bank.svg
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="48px" height="48px" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 52.2 (67145) - http://www.bohemiancoding.com/sketch -->
+    <title>Group 16</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <circle id="path-1" cx="20" cy="20" r="20"></circle>
+        <filter x="-17.5%" y="-12.5%" width="135.0%" height="135.0%" filterUnits="objectBoundingBox" id="filter-2">
+            <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"></feComposite>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.04 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
+        </filter>
+    </defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="拓扑图编译器" transform="translate(-30.000000, -139.000000)">
+            <g id="Group-16" transform="translate(34.000000, 141.000000)">
+                <g id="Oval-Copy-8">
+                    <use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
+                    <circle stroke="#69C0FF" stroke-width="1" stroke-linejoin="square" fill-opacity="0.92" fill="#69C0FF" fill-rule="evenodd" cx="20" cy="20" r="19.5"></circle>
+                </g>
+                <g id="earth-copy-6" transform="translate(12.000000, 12.000000)" fill="#FFFFFF" fill-rule="nonzero">
+                    <rect id="Rectangle-path" opacity="0" x="0" y="0" width="16" height="16"></rect>
+                    <path d="M13.35,12.5140625 C13.353125,12.509375 13.3578125,12.5046875 13.3609375,12.5 C14.384375,11.2828125 15,9.7140625 15,8 C15,6.2859375 14.384375,4.7171875 13.3625,3.5 C13.359375,3.4953125 13.3546875,3.4921875 13.3515625,3.4875 C13.334375,3.4671875 13.31875,3.4484375 13.3015625,3.4296875 C13.2953125,3.421875 13.2890625,3.415625 13.2828125,3.4078125 C13.2609375,3.3828125 13.240625,3.359375 13.21875,3.334375 L13.2171875,3.3328125 C13.19375,3.30625 13.16875,3.2796875 13.1453125,3.253125 L13.14375,3.2515625 C13.09375,3.1984375 13.04375,3.1453125 12.9921875,3.09375 L12.990625,3.0921875 L12.915625,3.0171875 L12.9109375,3.0125 C12.8875,2.9890625 12.8640625,2.9671875 12.840625,2.9453125 C12.8328125,2.9375 12.825,2.9296875 12.815625,2.921875 C12.8,2.90625 12.784375,2.8921875 12.76875,2.878125 C12.7640625,2.8734375 12.7578125,2.86875 12.753125,2.8625 C11.50625,1.70625 9.8359375,1 8,1 C6.1640625,1 4.49375,1.70625 3.2453125,2.8625 C3.240625,2.8671875 3.234375,2.871875 3.2296875,2.878125 C3.2140625,2.8921875 3.1984375,2.9078125 3.1828125,2.9234375 C3.175,2.93125 3.1671875,2.9390625 3.1578125,2.946875 C3.134375,2.96875 3.1109375,2.9921875 3.0875,3.0140625 L3.0828125,3.01875 L3.0078125,3.09375 L3.00625,3.0953125 C2.9546875,3.146875 2.9046875,3.2 2.8546875,3.253125 L2.853125,3.2546875 C2.828125,3.28125 2.8046875,3.3078125 2.78125,3.334375 L2.7796875,3.3359375 C2.7578125,3.359375 2.7359375,3.384375 2.715625,3.409375 C2.709375,3.4171875 2.703125,3.4234375 2.696875,3.43125 C2.6796875,3.45 2.6640625,3.4703125 2.646875,3.4890625 C2.64375,3.49375 2.6390625,3.496875 2.6359375,3.5015625 C1.615625,4.7171875 1,6.2859375 1,8 C1,9.7140625 1.615625,11.2828125 2.6375,12.5 C2.640625,12.5046875 2.6453125,12.509375 2.6484375,12.5140625 C2.6640625,12.5328125 2.68125,12.553125 2.696875,12.571875 C2.703125,12.5796875 2.709375,12.5859375 2.715625,12.59375 C2.7375,12.61875 2.7578125,12.6421875 2.7796875,12.6671875 C2.7796875,12.66875 2.78125,12.66875 2.78125,12.6703125 C2.8046875,12.696875 2.828125,12.7234375 2.853125,12.7484375 L2.8546875,12.75 C2.9046875,12.803125 2.9546875,12.85625 3.0046875,12.9078125 L3.00625,12.909375 C3.03125,12.934375 3.0546875,12.959375 3.0796875,12.9828125 L3.084375,12.9875 C3.1359375,13.0390625 3.1890625,13.0890625 3.2421875,13.1375 C4.49375,14.29375 6.1640625,15 8,15 C9.8359375,15 11.50625,14.29375 12.7546875,13.1375 C12.8078125,13.0890625 12.859375,13.0390625 12.9109375,12.9875 L12.915625,12.9828125 C12.940625,12.9578125 12.965625,12.934375 12.9890625,12.909375 L12.990625,12.9078125 C13.0421875,12.85625 13.0921875,12.803125 13.140625,12.75 L13.1421875,12.7484375 C13.165625,12.721875 13.190625,12.696875 13.2140625,12.6703125 C13.2140625,12.66875 13.215625,12.66875 13.215625,12.6671875 C13.2375,12.64375 13.259375,12.61875 13.2796875,12.59375 C13.2859375,12.5859375 13.2921875,12.5796875 13.2984375,12.571875 C13.3171875,12.5515625 13.334375,12.5328125 13.35,12.5140625 Z M13.4140625,10.2859375 C13.1984375,10.7953125 12.9140625,11.2671875 12.5671875,11.6953125 C12.178125,11.359375 11.7515625,11.065625 11.29375,10.821875 C11.475,10.0890625 11.5875,9.284375 11.6171875,8.4375 L13.859375,8.4375 C13.8125,9.0765625 13.6625,9.696875 13.4140625,10.2859375 Z M13.859375,7.5625 L11.6171875,7.5625 C11.5875,6.715625 11.475,5.9109375 11.29375,5.178125 C11.7515625,4.934375 12.178125,4.640625 12.5671875,4.3046875 C12.9140625,4.7328125 13.1984375,5.2046875 13.4140625,5.7140625 C13.6625,6.303125 13.8125,6.9234375 13.859375,7.5625 Z M10.2859375,2.5859375 C10.90625,2.8484375 11.4703125,3.2109375 11.9671875,3.6671875 C11.678125,3.9140625 11.3671875,4.13125 11.0390625,4.3203125 C10.79375,3.6171875 10.4796875,3.00625 10.1140625,2.5171875 C10.171875,2.5390625 10.2296875,2.5625 10.2859375,2.5859375 Z M8.8703125,13.5328125 C8.7265625,13.6453125 8.5828125,13.73125 8.4375,13.7890625 L8.4375,10.890625 C9.0609375,10.934375 9.665625,11.071875 10.2453125,11.3 C10.115625,11.684375 9.965625,12.0390625 9.7921875,12.359375 C9.5203125,12.865625 9.2015625,13.2703125 8.8703125,13.5328125 Z M9.7921875,3.640625 C9.9640625,3.9625 10.115625,4.3171875 10.2453125,4.7 C9.665625,4.928125 9.0609375,5.065625 8.4375,5.109375 L8.4375,2.2125 C8.58125,2.2703125 8.7265625,2.3546875 8.8703125,2.46875 C9.2015625,2.7296875 9.5203125,3.134375 9.7921875,3.640625 Z M8.4375,10.0140625 L8.4375,8.4375 L10.7421875,8.4375 C10.7171875,9.128125 10.63125,9.7984375 10.4875,10.434375 L10.4828125,10.453125 C9.840625,10.209375 9.153125,10.0578125 8.4375,10.0140625 Z M8.4375,7.5625 L8.4375,5.9859375 C9.153125,5.9421875 9.840625,5.790625 10.4828125,5.546875 L10.4875,5.565625 C10.63125,6.2015625 10.7171875,6.8703125 10.7421875,7.5625 L8.4375,7.5625 Z M7.5625,8.4375 L7.5625,10.0140625 C6.846875,10.0578125 6.159375,10.209375 5.5171875,10.453125 L5.5125,10.434375 C5.36875,9.7984375 5.2828125,9.1296875 5.2578125,8.4375 L7.5625,8.4375 Z M5.2578125,7.5625 C5.2828125,6.871875 5.36875,6.2015625 5.5125,5.565625 L5.5171875,5.546875 C6.159375,5.790625 6.8453125,5.9421875 7.5625,5.9859375 L7.5625,7.5625 L5.2578125,7.5625 Z M7.5625,10.890625 L7.5625,13.7875 C7.41875,13.7296875 7.2734375,13.6453125 7.1296875,13.53125 C6.7984375,13.2703125 6.478125,12.8640625 6.20625,12.3578125 C6.034375,12.0359375 5.8828125,11.68125 5.753125,11.2984375 C6.334375,11.0703125 6.9390625,10.934375 7.5625,10.890625 Z M7.5625,5.109375 C6.9390625,5.065625 6.334375,4.928125 5.7546875,4.7 C5.884375,4.315625 6.034375,3.9609375 6.2078125,3.640625 C6.4796875,3.134375 6.7984375,2.728125 7.13125,2.4671875 C7.275,2.3546875 7.41875,2.26875 7.5640625,2.2109375 L7.5640625,5.109375 L7.5625,5.109375 Z M5.7140625,2.5859375 C5.771875,2.5625 5.828125,2.5390625 5.8859375,2.5171875 C5.5203125,3.00625 5.20625,3.6171875 4.9609375,4.3203125 C4.6328125,4.1328125 4.321875,3.9140625 4.0328125,3.6671875 C4.5296875,3.2109375 5.09375,2.8484375 5.7140625,2.5859375 Z M2.5859375,5.7140625 C2.8015625,5.2046875 3.0859375,4.7328125 3.4328125,4.3046875 C3.821875,4.640625 4.2484375,4.934375 4.70625,5.178125 C4.525,5.9109375 4.4125,6.715625 4.3828125,7.5625 L2.140625,7.5625 C2.1875,6.9234375 2.3375,6.303125 2.5859375,5.7140625 Z M2.140625,8.4375 L4.3828125,8.4375 C4.4125,9.284375 4.525,10.0890625 4.70625,10.821875 C4.2484375,11.065625 3.821875,11.359375 3.4328125,11.6953125 C3.0859375,11.2671875 2.8015625,10.7953125 2.5859375,10.2859375 C2.3375,9.696875 2.1875,9.0765625 2.140625,8.4375 Z M5.7140625,13.4140625 C5.09375,13.1515625 4.5296875,12.7890625 4.0328125,12.3328125 C4.321875,12.0859375 4.6328125,11.86875 4.9609375,11.6796875 C5.20625,12.3828125 5.5203125,12.99375 5.8859375,13.4828125 C5.828125,13.4609375 5.7703125,13.4375 5.7140625,13.4140625 Z M10.2859375,13.4140625 C10.228125,13.4375 10.171875,13.4609375 10.1140625,13.4828125 C10.4796875,12.99375 10.79375,12.3828125 11.0390625,11.6796875 C11.3671875,11.8671875 11.678125,12.0859375 11.9671875,12.3328125 C11.4703125,12.7890625 10.90625,13.1515625 10.2859375,13.4140625 Z" id="Shape"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
--- a/public/ggeditor/koni/country.svg
+++ b/public/ggeditor/koni/country.svg
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="48px" height="48px" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 52.2 (67145) - http://www.bohemiancoding.com/sketch -->
+    <title>Group 18</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <circle id="path-1" cx="20" cy="20" r="20"></circle>
+        <filter x="-17.5%" y="-12.5%" width="135.0%" height="135.0%" filterUnits="objectBoundingBox" id="filter-2">
+            <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"></feComposite>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.04 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
+        </filter>
+    </defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="拓扑图编译器" transform="translate(-218.000000, -139.000000)">
+            <g id="Group-18" transform="translate(222.000000, 141.000000)">
+                <g id="Oval-Copy-10">
+                    <use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
+                    <circle stroke="#B37FEB" stroke-width="1" stroke-linejoin="square" fill-opacity="0.92" fill="#B37FEB" fill-rule="evenodd" cx="20" cy="20" r="19.5"></circle>
+                </g>
+                <g id="earth-copy-8" transform="translate(12.000000, 12.000000)" fill="#FFFFFF" fill-rule="nonzero">
+                    <rect id="Rectangle-path" opacity="0" x="0" y="0" width="16" height="16"></rect>
+                    <path d="M13.35,12.5140625 C13.353125,12.509375 13.3578125,12.5046875 13.3609375,12.5 C14.384375,11.2828125 15,9.7140625 15,8 C15,6.2859375 14.384375,4.7171875 13.3625,3.5 C13.359375,3.4953125 13.3546875,3.4921875 13.3515625,3.4875 C13.334375,3.4671875 13.31875,3.4484375 13.3015625,3.4296875 C13.2953125,3.421875 13.2890625,3.415625 13.2828125,3.4078125 C13.2609375,3.3828125 13.240625,3.359375 13.21875,3.334375 L13.2171875,3.3328125 C13.19375,3.30625 13.16875,3.2796875 13.1453125,3.253125 L13.14375,3.2515625 C13.09375,3.1984375 13.04375,3.1453125 12.9921875,3.09375 L12.990625,3.0921875 L12.915625,3.0171875 L12.9109375,3.0125 C12.8875,2.9890625 12.8640625,2.9671875 12.840625,2.9453125 C12.8328125,2.9375 12.825,2.9296875 12.815625,2.921875 C12.8,2.90625 12.784375,2.8921875 12.76875,2.878125 C12.7640625,2.8734375 12.7578125,2.86875 12.753125,2.8625 C11.50625,1.70625 9.8359375,1 8,1 C6.1640625,1 4.49375,1.70625 3.2453125,2.8625 C3.240625,2.8671875 3.234375,2.871875 3.2296875,2.878125 C3.2140625,2.8921875 3.1984375,2.9078125 3.1828125,2.9234375 C3.175,2.93125 3.1671875,2.9390625 3.1578125,2.946875 C3.134375,2.96875 3.1109375,2.9921875 3.0875,3.0140625 L3.0828125,3.01875 L3.0078125,3.09375 L3.00625,3.0953125 C2.9546875,3.146875 2.9046875,3.2 2.8546875,3.253125 L2.853125,3.2546875 C2.828125,3.28125 2.8046875,3.3078125 2.78125,3.334375 L2.7796875,3.3359375 C2.7578125,3.359375 2.7359375,3.384375 2.715625,3.409375 C2.709375,3.4171875 2.703125,3.4234375 2.696875,3.43125 C2.6796875,3.45 2.6640625,3.4703125 2.646875,3.4890625 C2.64375,3.49375 2.6390625,3.496875 2.6359375,3.5015625 C1.615625,4.7171875 1,6.2859375 1,8 C1,9.7140625 1.615625,11.2828125 2.6375,12.5 C2.640625,12.5046875 2.6453125,12.509375 2.6484375,12.5140625 C2.6640625,12.5328125 2.68125,12.553125 2.696875,12.571875 C2.703125,12.5796875 2.709375,12.5859375 2.715625,12.59375 C2.7375,12.61875 2.7578125,12.6421875 2.7796875,12.6671875 C2.7796875,12.66875 2.78125,12.66875 2.78125,12.6703125 C2.8046875,12.696875 2.828125,12.7234375 2.853125,12.7484375 L2.8546875,12.75 C2.9046875,12.803125 2.9546875,12.85625 3.0046875,12.9078125 L3.00625,12.909375 C3.03125,12.934375 3.0546875,12.959375 3.0796875,12.9828125 L3.084375,12.9875 C3.1359375,13.0390625 3.1890625,13.0890625 3.2421875,13.1375 C4.49375,14.29375 6.1640625,15 8,15 C9.8359375,15 11.50625,14.29375 12.7546875,13.1375 C12.8078125,13.0890625 12.859375,13.0390625 12.9109375,12.9875 L12.915625,12.9828125 C12.940625,12.9578125 12.965625,12.934375 12.9890625,12.909375 L12.990625,12.9078125 C13.0421875,12.85625 13.0921875,12.803125 13.140625,12.75 L13.1421875,12.7484375 C13.165625,12.721875 13.190625,12.696875 13.2140625,12.6703125 C13.2140625,12.66875 13.215625,12.66875 13.215625,12.6671875 C13.2375,12.64375 13.259375,12.61875 13.2796875,12.59375 C13.2859375,12.5859375 13.2921875,12.5796875 13.2984375,12.571875 C13.3171875,12.5515625 13.334375,12.5328125 13.35,12.5140625 Z M13.4140625,10.2859375 C13.1984375,10.7953125 12.9140625,11.2671875 12.5671875,11.6953125 C12.178125,11.359375 11.7515625,11.065625 11.29375,10.821875 C11.475,10.0890625 11.5875,9.284375 11.6171875,8.4375 L13.859375,8.4375 C13.8125,9.0765625 13.6625,9.696875 13.4140625,10.2859375 Z M13.859375,7.5625 L11.6171875,7.5625 C11.5875,6.715625 11.475,5.9109375 11.29375,5.178125 C11.7515625,4.934375 12.178125,4.640625 12.5671875,4.3046875 C12.9140625,4.7328125 13.1984375,5.2046875 13.4140625,5.7140625 C13.6625,6.303125 13.8125,6.9234375 13.859375,7.5625 Z M10.2859375,2.5859375 C10.90625,2.8484375 11.4703125,3.2109375 11.9671875,3.6671875 C11.678125,3.9140625 11.3671875,4.13125 11.0390625,4.3203125 C10.79375,3.6171875 10.4796875,3.00625 10.1140625,2.5171875 C10.171875,2.5390625 10.2296875,2.5625 10.2859375,2.5859375 Z M8.8703125,13.5328125 C8.7265625,13.6453125 8.5828125,13.73125 8.4375,13.7890625 L8.4375,10.890625 C9.0609375,10.934375 9.665625,11.071875 10.2453125,11.3 C10.115625,11.684375 9.965625,12.0390625 9.7921875,12.359375 C9.5203125,12.865625 9.2015625,13.2703125 8.8703125,13.5328125 Z M9.7921875,3.640625 C9.9640625,3.9625 10.115625,4.3171875 10.2453125,4.7 C9.665625,4.928125 9.0609375,5.065625 8.4375,5.109375 L8.4375,2.2125 C8.58125,2.2703125 8.7265625,2.3546875 8.8703125,2.46875 C9.2015625,2.7296875 9.5203125,3.134375 9.7921875,3.640625 Z M8.4375,10.0140625 L8.4375,8.4375 L10.7421875,8.4375 C10.7171875,9.128125 10.63125,9.7984375 10.4875,10.434375 L10.4828125,10.453125 C9.840625,10.209375 9.153125,10.0578125 8.4375,10.0140625 Z M8.4375,7.5625 L8.4375,5.9859375 C9.153125,5.9421875 9.840625,5.790625 10.4828125,5.546875 L10.4875,5.565625 C10.63125,6.2015625 10.7171875,6.8703125 10.7421875,7.5625 L8.4375,7.5625 Z M7.5625,8.4375 L7.5625,10.0140625 C6.846875,10.0578125 6.159375,10.209375 5.5171875,10.453125 L5.5125,10.434375 C5.36875,9.7984375 5.2828125,9.1296875 5.2578125,8.4375 L7.5625,8.4375 Z M5.2578125,7.5625 C5.2828125,6.871875 5.36875,6.2015625 5.5125,5.565625 L5.5171875,5.546875 C6.159375,5.790625 6.8453125,5.9421875 7.5625,5.9859375 L7.5625,7.5625 L5.2578125,7.5625 Z M7.5625,10.890625 L7.5625,13.7875 C7.41875,13.7296875 7.2734375,13.6453125 7.1296875,13.53125 C6.7984375,13.2703125 6.478125,12.8640625 6.20625,12.3578125 C6.034375,12.0359375 5.8828125,11.68125 5.753125,11.2984375 C6.334375,11.0703125 6.9390625,10.934375 7.5625,10.890625 Z M7.5625,5.109375 C6.9390625,5.065625 6.334375,4.928125 5.7546875,4.7 C5.884375,4.315625 6.034375,3.9609375 6.2078125,3.640625 C6.4796875,3.134375 6.7984375,2.728125 7.13125,2.4671875 C7.275,2.3546875 7.41875,2.26875 7.5640625,2.2109375 L7.5640625,5.109375 L7.5625,5.109375 Z M5.7140625,2.5859375 C5.771875,2.5625 5.828125,2.5390625 5.8859375,2.5171875 C5.5203125,3.00625 5.20625,3.6171875 4.9609375,4.3203125 C4.6328125,4.1328125 4.321875,3.9140625 4.0328125,3.6671875 C4.5296875,3.2109375 5.09375,2.8484375 5.7140625,2.5859375 Z M2.5859375,5.7140625 C2.8015625,5.2046875 3.0859375,4.7328125 3.4328125,4.3046875 C3.821875,4.640625 4.2484375,4.934375 4.70625,5.178125 C4.525,5.9109375 4.4125,6.715625 4.3828125,7.5625 L2.140625,7.5625 C2.1875,6.9234375 2.3375,6.303125 2.5859375,5.7140625 Z M2.140625,8.4375 L4.3828125,8.4375 C4.4125,9.284375 4.525,10.0890625 4.70625,10.821875 C4.2484375,11.065625 3.821875,11.359375 3.4328125,11.6953125 C3.0859375,11.2671875 2.8015625,10.7953125 2.5859375,10.2859375 C2.3375,9.696875 2.1875,9.0765625 2.140625,8.4375 Z M5.7140625,13.4140625 C5.09375,13.1515625 4.5296875,12.7890625 4.0328125,12.3328125 C4.321875,12.0859375 4.6328125,11.86875 4.9609375,11.6796875 C5.20625,12.3828125 5.5203125,12.99375 5.8859375,13.4828125 C5.828125,13.4609375 5.7703125,13.4375 5.7140625,13.4140625 Z M10.2859375,13.4140625 C10.228125,13.4375 10.171875,13.4609375 10.1140625,13.4828125 C10.4796875,12.99375 10.79375,12.3828125 11.0390625,11.6796875 C11.3671875,11.8671875 11.678125,12.0859375 11.9671875,12.3328125 C11.4703125,12.7890625 10.90625,13.1515625 10.2859375,13.4140625 Z" id="Shape"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
--- a/public/ggeditor/koni/icon.svg
+++ b/public/ggeditor/koni/icon.svg
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 52.2 (67145) - http://www.bohemiancoding.com/sketch -->
+    <title>earth copy 53</title>
+    <desc>Created with Sketch.</desc>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="拓扑图编译器" transform="translate(-222.000000, -1591.000000)" fill="#FFFFFF" fill-rule="nonzero">
+            <g id="earth-copy-53" transform="translate(221.000000, 1590.000000)">
+                <rect id="Rectangle-path" opacity="0" x="0" y="0" width="16" height="16"></rect>
+                <path d="M13.35,12.5140625 C13.353125,12.509375 13.3578125,12.5046875 13.3609375,12.5 C14.384375,11.2828125 15,9.7140625 15,8 C15,6.2859375 14.384375,4.7171875 13.3625,3.5 C13.359375,3.4953125 13.3546875,3.4921875 13.3515625,3.4875 C13.334375,3.4671875 13.31875,3.4484375 13.3015625,3.4296875 C13.2953125,3.421875 13.2890625,3.415625 13.2828125,3.4078125 C13.2609375,3.3828125 13.240625,3.359375 13.21875,3.334375 L13.2171875,3.3328125 C13.19375,3.30625 13.16875,3.2796875 13.1453125,3.253125 L13.14375,3.2515625 C13.09375,3.1984375 13.04375,3.1453125 12.9921875,3.09375 L12.990625,3.0921875 L12.915625,3.0171875 L12.9109375,3.0125 C12.8875,2.9890625 12.8640625,2.9671875 12.840625,2.9453125 C12.8328125,2.9375 12.825,2.9296875 12.815625,2.921875 C12.8,2.90625 12.784375,2.8921875 12.76875,2.878125 C12.7640625,2.8734375 12.7578125,2.86875 12.753125,2.8625 C11.50625,1.70625 9.8359375,1 8,1 C6.1640625,1 4.49375,1.70625 3.2453125,2.8625 C3.240625,2.8671875 3.234375,2.871875 3.2296875,2.878125 C3.2140625,2.8921875 3.1984375,2.9078125 3.1828125,2.9234375 C3.175,2.93125 3.1671875,2.9390625 3.1578125,2.946875 C3.134375,2.96875 3.1109375,2.9921875 3.0875,3.0140625 L3.0828125,3.01875 L3.0078125,3.09375 L3.00625,3.0953125 C2.9546875,3.146875 2.9046875,3.2 2.8546875,3.253125 L2.853125,3.2546875 C2.828125,3.28125 2.8046875,3.3078125 2.78125,3.334375 L2.7796875,3.3359375 C2.7578125,3.359375 2.7359375,3.384375 2.715625,3.409375 C2.709375,3.4171875 2.703125,3.4234375 2.696875,3.43125 C2.6796875,3.45 2.6640625,3.4703125 2.646875,3.4890625 C2.64375,3.49375 2.6390625,3.496875 2.6359375,3.5015625 C1.615625,4.7171875 1,6.2859375 1,8 C1,9.7140625 1.615625,11.2828125 2.6375,12.5 C2.640625,12.5046875 2.6453125,12.509375 2.6484375,12.5140625 C2.6640625,12.5328125 2.68125,12.553125 2.696875,12.571875 C2.703125,12.5796875 2.709375,12.5859375 2.715625,12.59375 C2.7375,12.61875 2.7578125,12.6421875 2.7796875,12.6671875 C2.7796875,12.66875 2.78125,12.66875 2.78125,12.6703125 C2.8046875,12.696875 2.828125,12.7234375 2.853125,12.7484375 L2.8546875,12.75 C2.9046875,12.803125 2.9546875,12.85625 3.0046875,12.9078125 L3.00625,12.909375 C3.03125,12.934375 3.0546875,12.959375 3.0796875,12.9828125 L3.084375,12.9875 C3.1359375,13.0390625 3.1890625,13.0890625 3.2421875,13.1375 C4.49375,14.29375 6.1640625,15 8,15 C9.8359375,15 11.50625,14.29375 12.7546875,13.1375 C12.8078125,13.0890625 12.859375,13.0390625 12.9109375,12.9875 L12.915625,12.9828125 C12.940625,12.9578125 12.965625,12.934375 12.9890625,12.909375 L12.990625,12.9078125 C13.0421875,12.85625 13.0921875,12.803125 13.140625,12.75 L13.1421875,12.7484375 C13.165625,12.721875 13.190625,12.696875 13.2140625,12.6703125 C13.2140625,12.66875 13.215625,12.66875 13.215625,12.6671875 C13.2375,12.64375 13.259375,12.61875 13.2796875,12.59375 C13.2859375,12.5859375 13.2921875,12.5796875 13.2984375,12.571875 C13.3171875,12.5515625 13.334375,12.5328125 13.35,12.5140625 Z M13.4140625,10.2859375 C13.1984375,10.7953125 12.9140625,11.2671875 12.5671875,11.6953125 C12.178125,11.359375 11.7515625,11.065625 11.29375,10.821875 C11.475,10.0890625 11.5875,9.284375 11.6171875,8.4375 L13.859375,8.4375 C13.8125,9.0765625 13.6625,9.696875 13.4140625,10.2859375 Z M13.859375,7.5625 L11.6171875,7.5625 C11.5875,6.715625 11.475,5.9109375 11.29375,5.178125 C11.7515625,4.934375 12.178125,4.640625 12.5671875,4.3046875 C12.9140625,4.7328125 13.1984375,5.2046875 13.4140625,5.7140625 C13.6625,6.303125 13.8125,6.9234375 13.859375,7.5625 Z M10.2859375,2.5859375 C10.90625,2.8484375 11.4703125,3.2109375 11.9671875,3.6671875 C11.678125,3.9140625 11.3671875,4.13125 11.0390625,4.3203125 C10.79375,3.6171875 10.4796875,3.00625 10.1140625,2.5171875 C10.171875,2.5390625 10.2296875,2.5625 10.2859375,2.5859375 Z M8.8703125,13.5328125 C8.7265625,13.6453125 8.5828125,13.73125 8.4375,13.7890625 L8.4375,10.890625 C9.0609375,10.934375 9.665625,11.071875 10.2453125,11.3 C10.115625,11.684375 9.965625,12.0390625 9.7921875,12.359375 C9.5203125,12.865625 9.2015625,13.2703125 8.8703125,13.5328125 Z M9.7921875,3.640625 C9.9640625,3.9625 10.115625,4.3171875 10.2453125,4.7 C9.665625,4.928125 9.0609375,5.065625 8.4375,5.109375 L8.4375,2.2125 C8.58125,2.2703125 8.7265625,2.3546875 8.8703125,2.46875 C9.2015625,2.7296875 9.5203125,3.134375 9.7921875,3.640625 Z M8.4375,10.0140625 L8.4375,8.4375 L10.7421875,8.4375 C10.7171875,9.128125 10.63125,9.7984375 10.4875,10.434375 L10.4828125,10.453125 C9.840625,10.209375 9.153125,10.0578125 8.4375,10.0140625 Z M8.4375,7.5625 L8.4375,5.9859375 C9.153125,5.9421875 9.840625,5.790625 10.4828125,5.546875 L10.4875,5.565625 C10.63125,6.2015625 10.7171875,6.8703125 10.7421875,7.5625 L8.4375,7.5625 Z M7.5625,8.4375 L7.5625,10.0140625 C6.846875,10.0578125 6.159375,10.209375 5.5171875,10.453125 L5.5125,10.434375 C5.36875,9.7984375 5.2828125,9.1296875 5.2578125,8.4375 L7.5625,8.4375 Z M5.2578125,7.5625 C5.2828125,6.871875 5.36875,6.2015625 5.5125,5.565625 L5.5171875,5.546875 C6.159375,5.790625 6.8453125,5.9421875 7.5625,5.9859375 L7.5625,7.5625 L5.2578125,7.5625 Z M7.5625,10.890625 L7.5625,13.7875 C7.41875,13.7296875 7.2734375,13.6453125 7.1296875,13.53125 C6.7984375,13.2703125 6.478125,12.8640625 6.20625,12.3578125 C6.034375,12.0359375 5.8828125,11.68125 5.753125,11.2984375 C6.334375,11.0703125 6.9390625,10.934375 7.5625,10.890625 Z M7.5625,5.109375 C6.9390625,5.065625 6.334375,4.928125 5.7546875,4.7 C5.884375,4.315625 6.034375,3.9609375 6.2078125,3.640625 C6.4796875,3.134375 6.7984375,2.728125 7.13125,2.4671875 C7.275,2.3546875 7.41875,2.26875 7.5640625,2.2109375 L7.5640625,5.109375 L7.5625,5.109375 Z M5.7140625,2.5859375 C5.771875,2.5625 5.828125,2.5390625 5.8859375,2.5171875 C5.5203125,3.00625 5.20625,3.6171875 4.9609375,4.3203125 C4.6328125,4.1328125 4.321875,3.9140625 4.0328125,3.6671875 C4.5296875,3.2109375 5.09375,2.8484375 5.7140625,2.5859375 Z M2.5859375,5.7140625 C2.8015625,5.2046875 3.0859375,4.7328125 3.4328125,4.3046875 C3.821875,4.640625 4.2484375,4.934375 4.70625,5.178125 C4.525,5.9109375 4.4125,6.715625 4.3828125,7.5625 L2.140625,7.5625 C2.1875,6.9234375 2.3375,6.303125 2.5859375,5.7140625 Z M2.140625,8.4375 L4.3828125,8.4375 C4.4125,9.284375 4.525,10.0890625 4.70625,10.821875 C4.2484375,11.065625 3.821875,11.359375 3.4328125,11.6953125 C3.0859375,11.2671875 2.8015625,10.7953125 2.5859375,10.2859375 C2.3375,9.696875 2.1875,9.0765625 2.140625,8.4375 Z M5.7140625,13.4140625 C5.09375,13.1515625 4.5296875,12.7890625 4.0328125,12.3328125 C4.321875,12.0859375 4.6328125,11.86875 4.9609375,11.6796875 C5.20625,12.3828125 5.5203125,12.99375 5.8859375,13.4828125 C5.828125,13.4609375 5.7703125,13.4375 5.7140625,13.4140625 Z M10.2859375,13.4140625 C10.228125,13.4375 10.171875,13.4609375 10.1140625,13.4828125 C10.4796875,12.99375 10.79375,12.3828125 11.0390625,11.6796875 C11.3671875,11.8671875 11.678125,12.0859375 11.9671875,12.3328125 C11.4703125,12.7890625 10.90625,13.1515625 10.2859375,13.4140625 Z" id="Shape"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
--- a/public/ggeditor/koni/person.svg
+++ b/public/ggeditor/koni/person.svg
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="48px" height="48px" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 52.2 (67145) - http://www.bohemiancoding.com/sketch -->
+    <title>Group 17</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <circle id="path-1" cx="20" cy="20" r="20"></circle>
+        <filter x="-17.5%" y="-12.5%" width="135.0%" height="135.0%" filterUnits="objectBoundingBox" id="filter-2">
+            <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"></feComposite>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.04 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
+        </filter>
+    </defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="拓扑图编译器" transform="translate(-119.000000, -139.000000)">
+            <g id="Group-17" transform="translate(123.000000, 141.000000)">
+                <g id="Oval-Copy-9">
+                    <use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
+                    <circle stroke="#5CDBD3" stroke-width="1" stroke-linejoin="square" fill-opacity="0.92" fill="#5CDBD3" fill-rule="evenodd" cx="20" cy="20" r="19.5"></circle>
+                </g>
+                <g id="earth-copy-7" transform="translate(12.000000, 12.000000)" fill="#FFFFFF" fill-rule="nonzero">
+                    <rect id="Rectangle-path" opacity="0" x="0" y="0" width="16" height="16"></rect>
+                    <path d="M13.35,12.5140625 C13.353125,12.509375 13.3578125,12.5046875 13.3609375,12.5 C14.384375,11.2828125 15,9.7140625 15,8 C15,6.2859375 14.384375,4.7171875 13.3625,3.5 C13.359375,3.4953125 13.3546875,3.4921875 13.3515625,3.4875 C13.334375,3.4671875 13.31875,3.4484375 13.3015625,3.4296875 C13.2953125,3.421875 13.2890625,3.415625 13.2828125,3.4078125 C13.2609375,3.3828125 13.240625,3.359375 13.21875,3.334375 L13.2171875,3.3328125 C13.19375,3.30625 13.16875,3.2796875 13.1453125,3.253125 L13.14375,3.2515625 C13.09375,3.1984375 13.04375,3.1453125 12.9921875,3.09375 L12.990625,3.0921875 L12.915625,3.0171875 L12.9109375,3.0125 C12.8875,2.9890625 12.8640625,2.9671875 12.840625,2.9453125 C12.8328125,2.9375 12.825,2.9296875 12.815625,2.921875 C12.8,2.90625 12.784375,2.8921875 12.76875,2.878125 C12.7640625,2.8734375 12.7578125,2.86875 12.753125,2.8625 C11.50625,1.70625 9.8359375,1 8,1 C6.1640625,1 4.49375,1.70625 3.2453125,2.8625 C3.240625,2.8671875 3.234375,2.871875 3.2296875,2.878125 C3.2140625,2.8921875 3.1984375,2.9078125 3.1828125,2.9234375 C3.175,2.93125 3.1671875,2.9390625 3.1578125,2.946875 C3.134375,2.96875 3.1109375,2.9921875 3.0875,3.0140625 L3.0828125,3.01875 L3.0078125,3.09375 L3.00625,3.0953125 C2.9546875,3.146875 2.9046875,3.2 2.8546875,3.253125 L2.853125,3.2546875 C2.828125,3.28125 2.8046875,3.3078125 2.78125,3.334375 L2.7796875,3.3359375 C2.7578125,3.359375 2.7359375,3.384375 2.715625,3.409375 C2.709375,3.4171875 2.703125,3.4234375 2.696875,3.43125 C2.6796875,3.45 2.6640625,3.4703125 2.646875,3.4890625 C2.64375,3.49375 2.6390625,3.496875 2.6359375,3.5015625 C1.615625,4.7171875 1,6.2859375 1,8 C1,9.7140625 1.615625,11.2828125 2.6375,12.5 C2.640625,12.5046875 2.6453125,12.509375 2.6484375,12.5140625 C2.6640625,12.5328125 2.68125,12.553125 2.696875,12.571875 C2.703125,12.5796875 2.709375,12.5859375 2.715625,12.59375 C2.7375,12.61875 2.7578125,12.6421875 2.7796875,12.6671875 C2.7796875,12.66875 2.78125,12.66875 2.78125,12.6703125 C2.8046875,12.696875 2.828125,12.7234375 2.853125,12.7484375 L2.8546875,12.75 C2.9046875,12.803125 2.9546875,12.85625 3.0046875,12.9078125 L3.00625,12.909375 C3.03125,12.934375 3.0546875,12.959375 3.0796875,12.9828125 L3.084375,12.9875 C3.1359375,13.0390625 3.1890625,13.0890625 3.2421875,13.1375 C4.49375,14.29375 6.1640625,15 8,15 C9.8359375,15 11.50625,14.29375 12.7546875,13.1375 C12.8078125,13.0890625 12.859375,13.0390625 12.9109375,12.9875 L12.915625,12.9828125 C12.940625,12.9578125 12.965625,12.934375 12.9890625,12.909375 L12.990625,12.9078125 C13.0421875,12.85625 13.0921875,12.803125 13.140625,12.75 L13.1421875,12.7484375 C13.165625,12.721875 13.190625,12.696875 13.2140625,12.6703125 C13.2140625,12.66875 13.215625,12.66875 13.215625,12.6671875 C13.2375,12.64375 13.259375,12.61875 13.2796875,12.59375 C13.2859375,12.5859375 13.2921875,12.5796875 13.2984375,12.571875 C13.3171875,12.5515625 13.334375,12.5328125 13.35,12.5140625 Z M13.4140625,10.2859375 C13.1984375,10.7953125 12.9140625,11.2671875 12.5671875,11.6953125 C12.178125,11.359375 11.7515625,11.065625 11.29375,10.821875 C11.475,10.0890625 11.5875,9.284375 11.6171875,8.4375 L13.859375,8.4375 C13.8125,9.0765625 13.6625,9.696875 13.4140625,10.2859375 Z M13.859375,7.5625 L11.6171875,7.5625 C11.5875,6.715625 11.475,5.9109375 11.29375,5.178125 C11.7515625,4.934375 12.178125,4.640625 12.5671875,4.3046875 C12.9140625,4.7328125 13.1984375,5.2046875 13.4140625,5.7140625 C13.6625,6.303125 13.8125,6.9234375 13.859375,7.5625 Z M10.2859375,2.5859375 C10.90625,2.8484375 11.4703125,3.2109375 11.9671875,3.6671875 C11.678125,3.9140625 11.3671875,4.13125 11.0390625,4.3203125 C10.79375,3.6171875 10.4796875,3.00625 10.1140625,2.5171875 C10.171875,2.5390625 10.2296875,2.5625 10.2859375,2.5859375 Z M8.8703125,13.5328125 C8.7265625,13.6453125 8.5828125,13.73125 8.4375,13.7890625 L8.4375,10.890625 C9.0609375,10.934375 9.665625,11.071875 10.2453125,11.3 C10.115625,11.684375 9.965625,12.0390625 9.7921875,12.359375 C9.5203125,12.865625 9.2015625,13.2703125 8.8703125,13.5328125 Z M9.7921875,3.640625 C9.9640625,3.9625 10.115625,4.3171875 10.2453125,4.7 C9.665625,4.928125 9.0609375,5.065625 8.4375,5.109375 L8.4375,2.2125 C8.58125,2.2703125 8.7265625,2.3546875 8.8703125,2.46875 C9.2015625,2.7296875 9.5203125,3.134375 9.7921875,3.640625 Z M8.4375,10.0140625 L8.4375,8.4375 L10.7421875,8.4375 C10.7171875,9.128125 10.63125,9.7984375 10.4875,10.434375 L10.4828125,10.453125 C9.840625,10.209375 9.153125,10.0578125 8.4375,10.0140625 Z M8.4375,7.5625 L8.4375,5.9859375 C9.153125,5.9421875 9.840625,5.790625 10.4828125,5.546875 L10.4875,5.565625 C10.63125,6.2015625 10.7171875,6.8703125 10.7421875,7.5625 L8.4375,7.5625 Z M7.5625,8.4375 L7.5625,10.0140625 C6.846875,10.0578125 6.159375,10.209375 5.5171875,10.453125 L5.5125,10.434375 C5.36875,9.7984375 5.2828125,9.1296875 5.2578125,8.4375 L7.5625,8.4375 Z M5.2578125,7.5625 C5.2828125,6.871875 5.36875,6.2015625 5.5125,5.565625 L5.5171875,5.546875 C6.159375,5.790625 6.8453125,5.9421875 7.5625,5.9859375 L7.5625,7.5625 L5.2578125,7.5625 Z M7.5625,10.890625 L7.5625,13.7875 C7.41875,13.7296875 7.2734375,13.6453125 7.1296875,13.53125 C6.7984375,13.2703125 6.478125,12.8640625 6.20625,12.3578125 C6.034375,12.0359375 5.8828125,11.68125 5.753125,11.2984375 C6.334375,11.0703125 6.9390625,10.934375 7.5625,10.890625 Z M7.5625,5.109375 C6.9390625,5.065625 6.334375,4.928125 5.7546875,4.7 C5.884375,4.315625 6.034375,3.9609375 6.2078125,3.640625 C6.4796875,3.134375 6.7984375,2.728125 7.13125,2.4671875 C7.275,2.3546875 7.41875,2.26875 7.5640625,2.2109375 L7.5640625,5.109375 L7.5625,5.109375 Z M5.7140625,2.5859375 C5.771875,2.5625 5.828125,2.5390625 5.8859375,2.5171875 C5.5203125,3.00625 5.20625,3.6171875 4.9609375,4.3203125 C4.6328125,4.1328125 4.321875,3.9140625 4.0328125,3.6671875 C4.5296875,3.2109375 5.09375,2.8484375 5.7140625,2.5859375 Z M2.5859375,5.7140625 C2.8015625,5.2046875 3.0859375,4.7328125 3.4328125,4.3046875 C3.821875,4.640625 4.2484375,4.934375 4.70625,5.178125 C4.525,5.9109375 4.4125,6.715625 4.3828125,7.5625 L2.140625,7.5625 C2.1875,6.9234375 2.3375,6.303125 2.5859375,5.7140625 Z M2.140625,8.4375 L4.3828125,8.4375 C4.4125,9.284375 4.525,10.0890625 4.70625,10.821875 C4.2484375,11.065625 3.821875,11.359375 3.4328125,11.6953125 C3.0859375,11.2671875 2.8015625,10.7953125 2.5859375,10.2859375 C2.3375,9.696875 2.1875,9.0765625 2.140625,8.4375 Z M5.7140625,13.4140625 C5.09375,13.1515625 4.5296875,12.7890625 4.0328125,12.3328125 C4.321875,12.0859375 4.6328125,11.86875 4.9609375,11.6796875 C5.20625,12.3828125 5.5203125,12.99375 5.8859375,13.4828125 C5.828125,13.4609375 5.7703125,13.4375 5.7140625,13.4140625 Z M10.2859375,13.4140625 C10.228125,13.4375 10.171875,13.4609375 10.1140625,13.4828125 C10.4796875,12.99375 10.79375,12.3828125 11.0390625,11.6796875 C11.3671875,11.8671875 11.678125,12.0859375 11.9671875,12.3328125 C11.4703125,12.7890625 10.90625,13.1515625 10.2859375,13.4140625 Z" id="Shape"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
--- a/src/locales/en-US.js
+++ b/src/locales/en-US.js
@@ -10,6 +10,7 @@ import settingDrawer from './en-US/settingDrawer';
 import settings from './en-US/settings';
 import pwa from './en-US/pwa';
 import component from './en-US/component';
+import editor from './en-US/editor';
 export default {
  'navBar.lang': 'Languages',
@@ -32,4 +33,5 @@ export default {
  ...settings,
  ...pwa,
  ...component,
+  ...editor,
 };
--- a/src/locales/en-US/editor.js
+++ b/src/locales/en-US/editor.js
+export default {
+  'app.editor.flow.title': 'Flowchart Editor',
+  'app.editor.flow.description':
+    'The flow chart is an excellent way to represent the idea of the algorithm.',
+  'app.editor.koni.title': 'Koni Editor',
+  'app.editor.koni.description':
+    'The topology diagram refers to the network structure diagram composed of network node devices and communication media.',
+  'app.editor.mind.title': 'Mind Map Editor',
+  'app.editor.mind.description':
+    'The brain map is an effective graphical thinking tool for expressing divergent thinking. It is simple but effective and is a practical thinking tool.',
+};
--- a/src/locales/en-US/menu.js
+++ b/src/locales/en-US/menu.js
@@ -38,4 +38,8 @@ export default {
  'menu.account.settings': 'Account Settings',
  'menu.account.trigger': 'Trigger Error',
  'menu.account.logout': 'Logout',
+  'menu.editor': 'Editor',
+  'menu.editor.flow': 'Flow Editor',
+  'menu.editor.mind': 'Mind Editor',
+  'menu.editor.koni': 'Koni Editor',
 };
--- a/src/locales/pt-BR.js
+++ b/src/locales/pt-BR.js
@@ -10,6 +10,7 @@ import settingDrawer from './pt-BR/settingDrawer';
 import settings from './pt-BR/settings';
 import pwa from './pt-BR/pwa';
 import component from './pt-BR/component';
+import editor from './pt-BR/editor';
 export default {
  'navBar.lang': 'Idiomas',
@@ -32,4 +33,5 @@ export default {
  ...settings,
  ...pwa,
  ...component,
+  ...editor,
 };
--- a/src/locales/pt-BR/editor.js
+++ b/src/locales/pt-BR/editor.js
+export default {
+  'app.editor.flow.title': 'Editor de diagrama de flujo',
+  'app.editor.flow.description':
+    'El diagrama de flujo es una excelente manera de representar la idea del algoritmo.',
+  'app.editor.koni.title': 'Editor de topologia',
+  'app.editor.koni.description':
+    'El diagrama de topología se refiere al diagrama de estructura de red compuesto por dispositivos de nodo de red y medios de comunicación.',
+  'app.editor.mind.title': 'Editor de mapas cerebrales',
+  'app.editor.mind.description':
+    'El mapa cerebral es una herramienta de pensamiento gráfico eficaz para expresar el pensamiento divergente. Es simple pero efectivo y es una herramienta de pensamiento práctico.',
+};
--- a/src/locales/pt-BR/menu.js
+++ b/src/locales/pt-BR/menu.js
@@ -38,4 +38,8 @@ export default {
  'menu.account.settings': 'Configurar Conta',
  'menu.account.trigger': 'Disparar Erro',
  'menu.account.logout': 'Sair',
+  'menu.editor': 'Editor',
+  'menu.editor.flow': 'Flow Editor',
+  'menu.editor.mind': 'Mind Editor',
+  'menu.editor.koni': 'Koni Editor',
 };
--- a/src/locales/zh-CN.js
+++ b/src/locales/zh-CN.js
@@ -10,6 +10,7 @@ import settingDrawer from './zh-CN/settingDrawer';
 import settings from './zh-CN/settings';
 import pwa from './zh-CN/pwa';
 import component from './zh-CN/component';
+import editor from './zh-CN/editor';
 export default {
  'navBar.lang': '语言',
@@ -32,4 +33,5 @@ export default {
  ...settings,
  ...pwa,
  ...component,
+  ...editor,
 };
--- a/src/locales/zh-CN/editor.js
+++ b/src/locales/zh-CN/editor.js
+export default {
+  'app.editor.flow.title': '流程图编辑器',
+  'app.editor.flow.description': '千言万语不如一张图，流程图是表示算法思路的好方法',
+  'app.editor.koni.title': '拓扑编辑器',
+  'app.editor.koni.description': '拓扑结构图是指由网络节点设备和通信介质构成的网络结构图',
+  'app.editor.mind.title': '脑图编辑器',
+  'app.editor.mind.description':
+    '脑图是表达发散性思维的有效图形思维工具 ，它简单却又很有效，是一种实用性的思维工具。',
+};
--- a/src/locales/zh-CN/menu.js
+++ b/src/locales/zh-CN/menu.js
@@ -38,4 +38,8 @@ export default {
  'menu.account.settings': '个人设置',
  'menu.account.trigger': '触发报错',
  'menu.account.logout': '退出登录',
+  'menu.editor': '编辑页',
+  'menu.editor.flow': '流程编辑器',
+  'menu.editor.mind': '脑图编辑器',
+  'menu.editor.koni': '拓扑编辑器',
 };
--- a/src/locales/zh-TW.js
+++ b/src/locales/zh-TW.js
@@ -10,6 +10,7 @@ import settingDrawer from './zh-TW/settingDrawer';
 import settings from './zh-TW/settings';
 import pwa from './zh-TW/pwa';
 import component from './zh-TW/component';
+import editor from './zh-TW/editor';
 export default {
  'navBar.lang': '語言',
@@ -32,4 +33,5 @@ export default {
  ...settings,
  ...pwa,
  ...component,
+  ...editor,
 };
--- a/src/locales/zh-TW/editor.js
+++ b/src/locales/zh-TW/editor.js
+export default {
+  'app.editor.flow.title': '流程圖編輯器',
+  'app.editor.flow.description': '千言萬語不如一張圖，流程圖是表示算法思路的好方法',
+  'app.editor.koni.title': '拓撲編輯器',
+  'app.editor.koni.description': '拓撲結構圖是指由網絡節點設備和通信介質構成的網絡結構圖',
+  'app.editor.mind.title': '腦圖編輯器',
+  'app.editor.mind.description':
+    '腦圖是表達發散性思維的有效圖形思維工具 ，它簡單卻又很有效，是一種實用性的思維工具',
+};
--- a/src/locales/zh-TW/menu.js
+++ b/src/locales/zh-TW/menu.js
@@ -38,4 +38,8 @@ export default {
  'menu.exception.not-find': '404',
  'menu.exception.server-error': '500',
  'menu.exception.trigger': '触发错误',
+  'menu.editor': '編輯頁',
+  'menu.editor.flow': '流程編輯器',
+  'menu.editor.mind': '腦圖編輯器',
+  'menu.editor.koni': '拓撲編輯器',
 };
--- a/src/pages/Editor/GGEditor/Flow/index.js
+++ b/src/pages/Editor/GGEditor/Flow/index.js
+import React from 'react';
+import { Row, Col } from 'antd';
+import GGEditor, { Flow } from 'gg-editor';
+import EditorMinimap from '../components/EditorMinimap';
+import { FlowContextMenu } from '../components/EditorContextMenu';
+import { FlowToolbar } from '../components/EditorToolbar';
+import { FlowItemPanel } from '../components/EditorItemPanel';
+import { FlowDetailPanel } from '../components/EditorDetailPanel';
+import styles from './index.less';
+import { FormattedMessage } from 'umi/locale';
+import PageHeaderWrapper from '@/components/PageHeaderWrapper';
+const FlowPage = () => {
+  return (
+    <PageHeaderWrapper
+      title={<FormattedMessage id="app.editor.flow.title" />}
+      content={<FormattedMessage id="app.editor.flow.description" />}
+    >
+      <GGEditor className={styles.editor}>
+        <Row type="flex" className={styles.editorHd}>
+          <Col span={24}>
+            <FlowToolbar />
+          </Col>
+        </Row>
+        <Row type="flex" className={styles.editorBd}>
+          <Col span={4} className={styles.editorSidebar}>
+            <FlowItemPanel />
+          </Col>
+          <Col span={16} className={styles.editorContent}>
+            <Flow className={styles.flow} />
+          </Col>
+          <Col span={4} className={styles.editorSidebar}>
+            <FlowDetailPanel />
+            <EditorMinimap />
+          </Col>
+        </Row>
+        <FlowContextMenu />
+      </GGEditor>
+    </PageHeaderWrapper>
+  );
+};
+export default FlowPage;
--- a/src/pages/Editor/GGEditor/Flow/index.less
+++ b/src/pages/Editor/GGEditor/Flow/index.less
+.editor {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  width: 100%;
+  height: calc(100vh - 250px);
+  background: #fff;
+}
+.editorHd {
+  padding: 8px;
+  border: 1px solid #e6e9ed;
+}
+.editorBd {
+  flex: 1;
+}
+.editorSidebar,
+.editorContent {
+  display: flex;
+  flex-direction: column;
+}
+.editorSidebar {
+  background: #fafafa;
+  &:first-child {
+    border-right: 1px solid #e6e9ed;
+  }
+  &:last-child {
+    border-left: 1px solid #e6e9ed;
+  }
+}
+.flow,
+.mind,
+.koni {
+  flex: 1;
+}
--- a/src/pages/Editor/GGEditor/Koni/index.js
+++ b/src/pages/Editor/GGEditor/Koni/index.js
+import React from 'react';
+import { Row, Col } from 'antd';
+import GGEditor, { Koni } from 'gg-editor';
+import EditorMinimap from '../components/EditorMinimap';
+import { KoniContextMenu } from '../components/EditorContextMenu';
+import { KoniToolbar } from '../components/EditorToolbar';
+import { KoniItemPanel } from '../components/EditorItemPanel';
+import { KoniDetailPanel } from '../components/EditorDetailPanel';
+import KoniCustomNode from './shape/nodes/KoniCustomNode';
+import styles from '../Flow/index.less';
+import { FormattedMessage } from 'umi/locale';
+import PageHeaderWrapper from '@/components/PageHeaderWrapper';
+const KoniPage = () => {
+  return (
+    <PageHeaderWrapper
+      title={<FormattedMessage id="app.editor.koni.title" />}
+      content={<FormattedMessage id="app.editor.koni.description" />}
+    >
+      <GGEditor className={styles.editor}>
+        <Row type="flex" className={styles.editorHd}>
+          <Col span={24}>
+            <KoniToolbar />
+          </Col>
+        </Row>
+        <Row type="flex" className={styles.editorBd}>
+          <Col span={4} className={styles.editorSidebar}>
+            <KoniItemPanel />
+          </Col>
+          <Col span={16} className={styles.editorContent}>
+            <Koni className={styles.koni} />
+          </Col>
+          <Col span={4} className={styles.editorSidebar}>
+            <KoniDetailPanel />
+            <EditorMinimap />
+          </Col>
+        </Row>
+        <KoniCustomNode />
+        <KoniContextMenu />
+      </GGEditor>
+    </PageHeaderWrapper>
+  );
+};
+export default KoniPage;
--- a/src/pages/Editor/GGEditor/Koni/shape/nodes/KoniCustomNode.js
+++ b/src/pages/Editor/GGEditor/Koni/shape/nodes/KoniCustomNode.js
+import React from 'react';
+import { RegisterNode } from 'gg-editor';
+class KoniCustomNode extends React.Component {
+  render() {
+    const config = {
+      draw(item) {
+        const keyShape = this.drawKeyShape(item);
+        // draw label
+        this.drawLabel(item);
+        // draw image
+        const group = item.getGraphicGroup();
+        const model = item.getModel();
+        group.addShape('image', {
+          attrs: {
+            x: -7,
+            y: -7,
+            img: model.icon,
+          },
+        });
+        return keyShape;
+      },
+    };
+    return <RegisterNode name="koni-custom-node" config={config} />;
+  }
+}
+export default KoniCustomNode;
--- a/src/pages/Editor/GGEditor/Mind/index.js
+++ b/src/pages/Editor/GGEditor/Mind/index.js
+import React from 'react';
+import { Row, Col } from 'antd';
+import GGEditor, { Mind } from 'gg-editor';
+import EditorMinimap from '../components/EditorMinimap';
+import { MindContextMenu } from '../components/EditorContextMenu';
+import { MindToolbar } from '../components/EditorToolbar';
+import { MindDetailPanel } from '../components/EditorDetailPanel';
+import data from '../mock/worldCup2018.json';
+import styles from '../Flow/index.less';
+import { FormattedMessage } from 'umi/locale';
+import PageHeaderWrapper from '@/components/PageHeaderWrapper';
+const MindPage = () => {
+  return (
+    <PageHeaderWrapper
+      title={<FormattedMessage id="app.editor.mind.title" />}
+      content={<FormattedMessage id="app.editor.mind.description" />}
+    >
+      <GGEditor className={styles.editor}>
+        <Row type="flex" className={styles.editorHd}>
+          <Col span={24}>
+            <MindToolbar />
+          </Col>
+        </Row>
+        <Row type="flex" className={styles.editorBd}>
+          <Col span={20} className={styles.editorContent}>
+            <Mind data={data} className={styles.mind} />
+          </Col>
+          <Col span={4} className={styles.editorSidebar}>
+            <MindDetailPanel />
+            <EditorMinimap />
+          </Col>
+        </Row>
+        <MindContextMenu />
+      </GGEditor>
+    </PageHeaderWrapper>
+  );
+};
+export default MindPage;
--- a/src/pages/Editor/GGEditor/common/IconFont/index.js
+++ b/src/pages/Editor/GGEditor/common/IconFont/index.js
+import { Icon } from 'antd';
+const IconFont = Icon.createFromIconfontCN({
+  scriptUrl: 'https://at.alicdn.com/t/font_1101588_01zniftxm9yp.js',
+});
+export default IconFont;
--- a/src/pages/Editor/GGEditor/components/EditorContextMenu/FlowContextMenu.js
+++ b/src/pages/Editor/GGEditor/components/EditorContextMenu/FlowContextMenu.js
+import React from 'react';
+import { NodeMenu, EdgeMenu, GroupMenu, MultiMenu, CanvasMenu, ContextMenu } from 'gg-editor';
+import MenuItem from './MenuItem';
+import styles from './index.less';
+const FlowContextMenu = () => {
+  return (
+    <ContextMenu className={styles.contextMenu}>
+      <NodeMenu>
+        <MenuItem command="copy" />
+        <MenuItem command="delete" />
+      </NodeMenu>
+      <EdgeMenu>
+        <MenuItem command="delete" />
+      </EdgeMenu>
+      <GroupMenu>
+        <MenuItem command="copy" />
+        <MenuItem command="delete" />
+        <MenuItem command="unGroup" icon="ungroup" text="Ungroup" />
+      </GroupMenu>
+      <MultiMenu>
+        <MenuItem command="copy" />
+        <MenuItem command="paste" />
+        <MenuItem command="addGroup" icon="group" text="Add Group" />
+        <MenuItem command="delete" />
+      </MultiMenu>
+      <CanvasMenu>
+        <MenuItem command="undo" />
+        <MenuItem command="redo" />
+        <MenuItem command="pasteHere" icon="paste" text="Paste Here" />
+      </CanvasMenu>
+    </ContextMenu>
+  );
+};
+export default FlowContextMenu;
--- a/src/pages/Editor/GGEditor/components/EditorContextMenu/KoniContextMenu.js
+++ b/src/pages/Editor/GGEditor/components/EditorContextMenu/KoniContextMenu.js
+import FlowContextMenu from './FlowContextMenu';
+export default FlowContextMenu;
--- a/src/pages/Editor/GGEditor/components/EditorContextMenu/MenuItem.js
+++ b/src/pages/Editor/GGEditor/components/EditorContextMenu/MenuItem.js
+import React from 'react';
+import { Command } from 'gg-editor';
+import upperFirst from 'lodash/upperFirst';
+import IconFont from '../../common/IconFont';
+import styles from './index.less';
+const MenuItem = props => {
+  const { command, icon, text } = props;
+  return (
+    <Command name={command}>
+      <div className={styles.item}>
+        <IconFont type={`icon-${icon || command}`} />
+        <span>{text || upperFirst(command)}</span>
+      </div>
+    </Command>
+  );
+};
+export default MenuItem;
--- a/src/pages/Editor/GGEditor/components/EditorContextMenu/MindContextMenu.js
+++ b/src/pages/Editor/GGEditor/components/EditorContextMenu/MindContextMenu.js
+import React from 'react';
+import { NodeMenu, CanvasMenu, ContextMenu } from 'gg-editor';
+import MenuItem from './MenuItem';
+import styles from './index.less';
+const MindContextMenu = () => {
+  return (
+    <ContextMenu className={styles.contextMenu}>
+      <NodeMenu>
+        <MenuItem command="append" text="Topic" />
+        <MenuItem command="appendChild" icon="append-child" text="Subtopic" />
+        <MenuItem command="collapse" text="Fold" />
+        <MenuItem command="expand" text="Unfold" />
+        <MenuItem command="delete" />
+      </NodeMenu>
+      <CanvasMenu>
+        <MenuItem command="undo" />
+        <MenuItem command="redo" />
+      </CanvasMenu>
+    </ContextMenu>
+  );
+};
+export default MindContextMenu;
--- a/src/pages/Editor/GGEditor/components/EditorContextMenu/index.js
+++ b/src/pages/Editor/GGEditor/components/EditorContextMenu/index.js
+import FlowContextMenu from './FlowContextMenu';
+import MindContextMenu from './MindContextMenu';
+import KoniContextMenu from './KoniContextMenu';
+export { FlowContextMenu, MindContextMenu, KoniContextMenu };
--- a/src/pages/Editor/GGEditor/components/EditorContextMenu/index.less
+++ b/src/pages/Editor/GGEditor/components/EditorContextMenu/index.less
+.contextMenu {
+  display: none;
+  overflow: hidden;
+  background: #fff;
+  border-radius: 4px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  .item {
+    display: flex;
+    align-items: center;
+    padding: 5px 12px;
+    cursor: pointer;
+    transition: all 0.3s;
+    user-select: none;
+    &:hover {
+      background: #e6f7ff;
+    }
+    i {
+      margin-right: 8px;
+    }
+  }
+  :global {
+    .disable {
+      :local {
+        .item {
+          color: rgba(0, 0, 0, 0.25);
+          cursor: auto;
+          &:hover {
+            background: #fff;
+          }
+        }
+      }
+    }
+  }
+}
--- a/src/pages/Editor/GGEditor/components/EditorDetailPanel/DetailForm.js
+++ b/src/pages/Editor/GGEditor/components/EditorDetailPanel/DetailForm.js
+import React, { Fragment } from 'react';
+import { Card, Form, Input, Select } from 'antd';
+import { withPropsAPI } from 'gg-editor';
+import upperFirst from 'lodash/upperFirst';
+const { Item } = Form;
+const { Option } = Select;
+const inlineFormItemLayout = {
+  labelCol: {
+    sm: { span: 8 },
+  },
+  wrapperCol: {
+    sm: { span: 16 },
+  },
+};
+class DetailForm extends React.Component {
+  get item() {
+    const { propsAPI } = this.props;
+    return propsAPI.getSelected()[0];
+  }
+  handleSubmit = e => {
+    if (e && e.preventDefault) {
+      e.preventDefault();
+    }
+    const { form, propsAPI } = this.props;
+    const { getSelected, executeCommand, update } = propsAPI;
+    setTimeout(() => {
+      form.validateFieldsAndScroll((err, values) => {
+        if (err) {
+          return;
+        }
+        const item = getSelected()[0];
+        if (!item) {
+          return;
+        }
+        executeCommand(() => {
+          update(item, {
+            ...values,
+          });
+        });
+      });
+    }, 0);
+  };
+  renderEdgeShapeSelect = () => {
+    return (
+      <Select onChange={this.handleSubmit}>
+        <Option value="flow-smooth">Smooth</Option>
+        <Option value="flow-polyline">Polyline</Option>
+        <Option value="flow-polyline-round">Polyline Round</Option>
+      </Select>
+    );
+  };
+  renderNodeDetail = () => {
+    const { form } = this.props;
+    const { label } = this.item.getModel();
+    return (
+      <Item label="Label" {...inlineFormItemLayout}>
+        {form.getFieldDecorator('label', {
+          initialValue: label,
+        })(<Input onBlur={this.handleSubmit} />)}
+      </Item>
+    );
+  };
+  renderEdgeDetail = () => {
+    const { form } = this.props;
+    const { label = '', shape = 'flow-smooth' } = this.item.getModel();
+    return (
+      <Fragment>
+        <Item label="Label" {...inlineFormItemLayout}>
+          {form.getFieldDecorator('label', {
+            initialValue: label,
+          })(<Input onBlur={this.handleSubmit} />)}
+        </Item>
+        <Item label="Shape" {...inlineFormItemLayout}>
+          {form.getFieldDecorator('shape', {
+            initialValue: shape,
+          })(this.renderEdgeShapeSelect())}
+        </Item>
+      </Fragment>
+    );
+  };
+  renderGroupDetail = () => {
+    const { form } = this.props;
+    const { label = '新建分组' } = this.item.getModel();
+    return (
+      <Item label="Label" {...inlineFormItemLayout}>
+        {form.getFieldDecorator('label', {
+          initialValue: label,
+        })(<Input onBlur={this.handleSubmit} />)}
+      </Item>
+    );
+  };
+  render() {
+    const { type } = this.props;
+    if (!this.item) {
+      return null;
+    }
+    return (
+      <Card type="inner" size="small" title={upperFirst(type)} bordered={false}>
+        <Form onSubmit={this.handleSubmit}>
+          {type === 'node' && this.renderNodeDetail()}
+          {type === 'edge' && this.renderEdgeDetail()}
+          {type === 'group' && this.renderGroupDetail()}
+        </Form>
+      </Card>
+    );
+  }
+}
+export default Form.create()(withPropsAPI(DetailForm));
--- a/src/pages/Editor/GGEditor/components/EditorDetailPanel/FlowDetailPanel.js
+++ b/src/pages/Editor/GGEditor/components/EditorDetailPanel/FlowDetailPanel.js
+import React from 'react';
+import { Card } from 'antd';
+import { NodePanel, EdgePanel, GroupPanel, MultiPanel, CanvasPanel, DetailPanel } from 'gg-editor';
+import DetailForm from './DetailForm';
+import styles from './index.less';
+const FlowDetailPanel = () => {
+  return (
+    <DetailPanel className={styles.detailPanel}>
+      <NodePanel>
+        <DetailForm type="node" />
+      </NodePanel>
+      <EdgePanel>
+        <DetailForm type="edge" />
+      </EdgePanel>
+      <GroupPanel>
+        <DetailForm type="group" />
+      </GroupPanel>
+      <MultiPanel>
+        <Card type="inner" size="small" title="Multi Select" bordered={false} />
+      </MultiPanel>
+      <CanvasPanel>
+        <Card type="inner" size="small" title="Canvas" bordered={false} />
+      </CanvasPanel>
+    </DetailPanel>
+  );
+};
+export default FlowDetailPanel;
--- a/src/pages/Editor/GGEditor/components/EditorDetailPanel/KoniDetailPanel.js
+++ b/src/pages/Editor/GGEditor/components/EditorDetailPanel/KoniDetailPanel.js
+import FlowDetailPanel from './FlowDetailPanel';
+export default FlowDetailPanel;
--- a/src/pages/Editor/GGEditor/components/EditorDetailPanel/MindDetailPanel.js
+++ b/src/pages/Editor/GGEditor/components/EditorDetailPanel/MindDetailPanel.js
+import React from 'react';
+import { Card } from 'antd';
+import { NodePanel, CanvasPanel, DetailPanel } from 'gg-editor';
+import DetailForm from './DetailForm';
+import styles from './index.less';
+const MindDetailPanel = () => {
+  return (
+    <DetailPanel className={styles.detailPanel}>
+      <NodePanel>
+        <DetailForm type="node" />
+      </NodePanel>
+      <CanvasPanel>
+        <Card type="inner" size="small" title="Canvas" bordered={false} />
+      </CanvasPanel>
+    </DetailPanel>
+  );
+};
+export default MindDetailPanel;
--- a/src/pages/Editor/GGEditor/components/EditorDetailPanel/index.js
+++ b/src/pages/Editor/GGEditor/components/EditorDetailPanel/index.js
+import FlowDetailPanel from './FlowDetailPanel';
+import MindDetailPanel from './MindDetailPanel';
+import KoniDetailPanel from './KoniDetailPanel';
+export { FlowDetailPanel, MindDetailPanel, KoniDetailPanel };
--- a/src/pages/Editor/GGEditor/components/EditorDetailPanel/index.less
+++ b/src/pages/Editor/GGEditor/components/EditorDetailPanel/index.less
+.detailPanel {
+  flex: 1;
+  background: #fafafa;
+  :global {
+    .ant-card {
+      background: #fafafa;
+    }
+  }
+}
--- a/src/pages/Editor/GGEditor/components/EditorItemPanel/FlowItemPanel.js
+++ b/src/pages/Editor/GGEditor/components/EditorItemPanel/FlowItemPanel.js
+import React from 'react';
+import { Card } from 'antd';
+import { ItemPanel, Item } from 'gg-editor';
+import styles from './index.less';
+const FlowItemPanel = () => {
+  return (
+    <ItemPanel className={styles.itemPanel}>
+      <Card bordered={false}>
+        <Item
+          type="node"
+          size="72*72"
+          shape="flow-circle"
+          model={{
+            color: '#FA8C16',
+            label: 'Start',
+          }}
+          src="/ggeditor/flow/start.svg"
+        />
+        <Item
+          type="node"
+          size="80*48"
+          shape="flow-rect"
+          model={{
+            color: '#1890FF',
+            label: 'Normal',
+          }}
+          src="/ggeditor/flow/normal.svg"
+        />
+        <Item
+          type="node"
+          size="80*72"
+          shape="flow-rhombus"
+          model={{
+            color: '#13C2C2',
+            label: 'Decision',
+          }}
+          src="/ggeditor/flow/decision.svg"
+        />
+        <Item
+          type="node"
+          size="80*48"
+          shape="flow-capsule"
+          model={{
+            color: '#722ED1',
+            label: 'Model',
+          }}
+          src="/ggeditor/flow/model.svg"
+        />
+      </Card>
+    </ItemPanel>
+  );
+};
+export default FlowItemPanel;
--- a/src/pages/Editor/GGEditor/components/EditorItemPanel/KoniItemPanel.js
+++ b/src/pages/Editor/GGEditor/components/EditorItemPanel/KoniItemPanel.js
+import React from 'react';
+import { Card } from 'antd';
+import { ItemPanel, Item } from 'gg-editor';
+import styles from './index.less';
+const KoniItemPanel = () => {
+  return (
+    <ItemPanel className={styles.itemPanel}>
+      <Card bordered={false}>
+        <Item
+          type="node"
+          size="40"
+          shape="koni-custom-node"
+          model={{
+            color: '#69C0FF',
+            label: 'Bank',
+            labelOffsetY: 28,
+            icon: '/ggeditor/koni/icon.svg',
+          }}
+          src="/ggeditor/koni/bank.svg"
+        />
+        <Item
+          type="node"
+          size="40"
+          shape="koni-custom-node"
+          model={{
+            color: '#5CDBD3',
+            label: 'Person',
+            labelOffsetY: 28,
+            icon: '/ggeditor/koni/icon.svg',
+          }}
+          src="/ggeditor/koni/person.svg"
+        />
+        <Item
+          type="node"
+          size="40"
+          shape="koni-custom-node"
+          model={{
+            color: '#B37FEB',
+            label: 'Country',
+            labelOffsetY: 28,
+            icon: '/ggeditor/koni/icon.svg',
+          }}
+          src="/ggeditor/koni/country.svg"
+        />
+      </Card>
+    </ItemPanel>
+  );
+};
+export default KoniItemPanel;
--- a/src/pages/Editor/GGEditor/components/EditorItemPanel/index.js
+++ b/src/pages/Editor/GGEditor/components/EditorItemPanel/index.js
+import FlowItemPanel from './FlowItemPanel';
+import KoniItemPanel from './KoniItemPanel';
+export { FlowItemPanel, KoniItemPanel };
--- a/src/pages/Editor/GGEditor/components/EditorItemPanel/index.less
+++ b/src/pages/Editor/GGEditor/components/EditorItemPanel/index.less
+.itemPanel {
+  flex: 1;
+  background: #fafafa;
+  :global {
+    .ant-card {
+      background: #fafafa;
+    }
+    .ant-card-body {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      > div {
+        margin-bottom: 16px;
+      }
+    }
+  }
+}
--- a/src/pages/Editor/GGEditor/components/EditorMinimap/index.js
+++ b/src/pages/Editor/GGEditor/components/EditorMinimap/index.js
+import React from 'react';
+import { Card } from 'antd';
+import { Minimap } from 'gg-editor';
+const EditorMinimap = () => {
+  return (
+    <Card type="inner" size="small" title="Minimap" bordered={false}>
+      <Minimap height={200} />
+    </Card>
+  );
+};
+export default EditorMinimap;
--- a/src/pages/Editor/GGEditor/components/EditorToolbar/FlowToolbar.js
+++ b/src/pages/Editor/GGEditor/components/EditorToolbar/FlowToolbar.js
+import React from 'react';
+import { Divider } from 'antd';
+import { Toolbar } from 'gg-editor';
+import ToolbarButton from './ToolbarButton';
+import styles from './index.less';
+const FlowToolbar = () => {
+  return (
+    <Toolbar className={styles.toolbar}>
+      <ToolbarButton command="undo" />
+      <ToolbarButton command="redo" />
+      <Divider type="vertical" />
+      <ToolbarButton command="copy" />
+      <ToolbarButton command="paste" />
+      <ToolbarButton command="delete" />
+      <Divider type="vertical" />
+      <ToolbarButton command="zoomIn" icon="zoom-in" text="Zoom In" />
+      <ToolbarButton command="zoomOut" icon="zoom-out" text="Zoom Out" />
+      <ToolbarButton command="autoZoom" icon="fit-map" text="Fit Map" />
+      <ToolbarButton command="resetZoom" icon="actual-size" text="Actual Size" />
+      <Divider type="vertical" />
+      <ToolbarButton command="toBack" icon="to-back" text="To Back" />
+      <ToolbarButton command="toFront" icon="to-front" text="To Front" />
+      <Divider type="vertical" />
+      <ToolbarButton command="multiSelect" icon="multi-select" text="Multi Select" />
+      <ToolbarButton command="addGroup" icon="group" text="Add Group" />
+      <ToolbarButton command="unGroup" icon="ungroup" text="Ungroup" />
+    </Toolbar>
+  );
+};
+export default FlowToolbar;
--- a/src/pages/Editor/GGEditor/components/EditorToolbar/KoniToolbar.js
+++ b/src/pages/Editor/GGEditor/components/EditorToolbar/KoniToolbar.js
+import FlowToolbar from './FlowToolbar';
+export default FlowToolbar;
--- a/src/pages/Editor/GGEditor/components/EditorToolbar/MindToolbar.js
+++ b/src/pages/Editor/GGEditor/components/EditorToolbar/MindToolbar.js
+import React from 'react';
+import { Divider } from 'antd';
+import { Toolbar } from 'gg-editor';
+import ToolbarButton from './ToolbarButton';
+import styles from './index.less';
+const FlowToolbar = () => {
+  return (
+    <Toolbar className={styles.toolbar}>
+      <ToolbarButton command="undo" />
+      <ToolbarButton command="redo" />
+      <Divider type="vertical" />
+      <ToolbarButton command="zoomIn" icon="zoom-in" text="Zoom In" />
+      <ToolbarButton command="zoomOut" icon="zoom-out" text="Zoom Out" />
+      <ToolbarButton command="autoZoom" icon="fit-map" text="Fit Map" />
+      <ToolbarButton command="resetZoom" icon="actual-size" text="Actual Size" />
+      <Divider type="vertical" />
+      <ToolbarButton command="append" text="Topic" />
+      <ToolbarButton command="appendChild" icon="append-child" text="Subtopic" />
+      <Divider type="vertical" />
+      <ToolbarButton command="collapse" text="Fold" />
+      <ToolbarButton command="expand" text="Unfold" />
+    </Toolbar>
+  );
+};
+export default FlowToolbar;
--- a/src/pages/Editor/GGEditor/components/EditorToolbar/ToolbarButton.js
+++ b/src/pages/Editor/GGEditor/components/EditorToolbar/ToolbarButton.js
+import React from 'react';
+import { Tooltip } from 'antd';
+import { Command } from 'gg-editor';
+import upperFirst from 'lodash/upperFirst';
+import IconFont from '../../common/IconFont';
+import styles from './index.less';
+const ToolbarButton = props => {
+  const { command, icon, text } = props;
+  return (
+    <Command name={command}>
+      <Tooltip
+        title={text || upperFirst(command)}
+        placement="bottom"
+        overlayClassName={styles.tooltip}
+      >
+        <IconFont type={`icon-${icon || command}`} />
+      </Tooltip>
+    </Command>
+  );
+};
+export default ToolbarButton;
--- a/src/pages/Editor/GGEditor/components/EditorToolbar/index.js
+++ b/src/pages/Editor/GGEditor/components/EditorToolbar/index.js
+import FlowToolbar from './FlowToolbar';
+import MindToolbar from './MindToolbar';
+import KoniToolbar from './KoniToolbar';
+export { FlowToolbar, MindToolbar, KoniToolbar };
--- a/src/pages/Editor/GGEditor/components/EditorToolbar/index.less
+++ b/src/pages/Editor/GGEditor/components/EditorToolbar/index.less
+.toolbar {
+  display: flex;
+  align-items: center;
+  :global {
+    .command i {
+      display: inline-block;
+      width: 27px;
+      height: 27px;
+      margin: 0 6px;
+      padding-top: 6px;
+      text-align: center;
+      border: 1px solid #fff;
+      cursor: pointer;
+      &:hover {
+        border: 1px solid #e6e9ed;
+      }
+    }
+    .disable i {
+      color: rgba(0, 0, 0, 0.25);
+      cursor: auto;
+      &:hover {
+        border: 1px solid #fff;
+      }
+    }
+  }
+}
+.tooltip {
+  :global {
+    .ant-tooltip-inner {
+      font-size: 12px;
+      border-radius: 0;
+    }
+  }
+}
--- a/src/pages/Editor/GGEditor/mock/worldCup2018.json
+++ b/src/pages/Editor/GGEditor/mock/worldCup2018.json
+{
+  "roots": [
+    {
+      "label": "法国",
+      "children": [
+        {
+          "label": "克罗地亚",
+          "side": "left",
+          "children": [
+            {
+              "label": "克罗地亚",
+              "children": [
+                {
+                  "label": "克罗地亚",
+                  "children": [
+                    {
+                      "label": "克罗地亚"
+                    },
+                    {
+                      "label": "丹麦"
+                    }
+                  ]
+                },
+                {
+                  "label": "俄罗斯",
+                  "children": [
+                    {
+                      "label": "俄罗斯"
+                    },
+                    {
+                      "label": "西班牙"
+                    }
+                  ]
+                }
+              ]
+            },
+            {
+              "label": "英格兰",
+              "children": [
+                {
+                  "label": "英格兰",
+                  "children": [
+                    {
+                      "label": "英格兰"
+                    },
+                    {
+                      "label": "哥伦比亚"
+                    }
+                  ]
+                },
+                {
+                  "label": "瑞典",
+                  "children": [
+                    {
+                      "label": "瑞士"
+                    },
+                    {
+                      "label": "瑞典"
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "label": "法国",
+          "side": "right",
+          "children": [
+            {
+              "label": "法国",
+              "children": [
+                {
+                  "label": "法国",
+                  "children": [
+                    {
+                      "label": "法国"
+                    },
+                    {
+                      "label": "阿根廷"
+                    }
+                  ]
+                },
+                {
+                  "label": "乌拉圭",
+                  "children": [
+                    {
+                      "label": "乌拉圭"
+                    },
+                    {
+                      "label": "葡萄牙"
+                    }
+                  ]
+                }
+              ]
+            },
+            {
+              "label": "比利时",
+              "children": [
+                {
+                  "label": "比利时",
+                  "children": [
+                    {
+                      "label": "比利时"
+                    },
+                    {
+                      "label": "日本"
+                    }
+                  ]
+                },
+                {
+                  "label": "巴西",
+                  "children": [
+                    {
+                      "label": "巴西"
+                    },
+                    {
+                      "label": "墨西哥"
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}