update

public/index.html

@@ -15,6 +15,6 @@
     <div id="app"></div>
     <!-- built files will be auto injected -->
     
-    <script src="//at.alicdn.com/t/font_2266335_sink06liepd.js"></script>
+    <script src="//at.alicdn.com/t/font_2266335_1ahwvgfxj4ej.js"></script>
   </body>
 </html>

src/views/Editor/CanvasTool/index.vue

@@ -1,6 +1,25 @@
 <template>
   <div class="canvas-tool">
-    
+    <div class="left-handler">
+      <IconFont class="handler-item" type="icon-undo" />
+      <IconFont class="handler-item" type="icon-redo" />
+    </div>
+
+    <div class="add-element-handler">
+      <IconFont class="handler-item" type="icon-font-size" />
+      <IconFont class="handler-item" type="icon-image" />
+      <IconFont class="handler-item" type="icon-star" />
+      <IconFont class="handler-item" type="icon-line" />
+      <IconFont class="handler-item" type="icon-table" />
+      <IconFont class="handler-item" type="icon-piechart" />
+    </div>
+
+    <div class="right-handler">
+      <IconFont class="handler-item viewport-size" type="icon-minus" />
+      <span class="text">100%</span>
+      <IconFont class="handler-item viewport-size" type="icon-plus" />
+      <IconFont class="handler-item viewport-size" type="icon-number" />
+    </div>
   </div>
 </template>
 
@@ -14,7 +33,35 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .canvas-tool {
+  position: relative;
   border-bottom: 1px solid #eee;
   background-color: #fff;
+  display: flex;
+  justify-content: space-between;
+  padding: 0 10px;
+  font-size: 13px;
+}
+.left-handler {
+  display: flex;
+  align-items: center;
+}
+.add-element-handler {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+.handler-item {
+  margin: 0 10px;
+  cursor: pointer;
+}
+.right-handler {
+  display: flex;
+  align-items: center;
+
+  .viewport-size {
+    font-size: 12px;
+    margin-top: -1px;
+  }
 }
 </style>

src/views/Editor/Thumbnails/index.vue

@@ -4,6 +4,9 @@
     @mousedown="() => setThumbnailsFocus(true)"
     v-click-outside="() => setThumbnailsFocus(false)"
   >
+    <div class="add-slide">
+      <span>+ 添加幻灯片</span>
+    </div>
     <draggable 
       class="thumbnail-list"
       :modelValue="slides"
@@ -22,7 +25,7 @@
         >
           <div class="slide-index">{{ fillDigit(index + 1) }}</div>
           <div class="thumbnail"></div>
-        </div>        
+        </div>
       </template>
     </draggable>
   </div>
@@ -152,9 +155,26 @@ export default defineComponent({
   display: flex;
   flex-direction: column;
   overflow: auto;
-  padding: 5px 0;
   user-select: none;
 }
+.add-slide {
+  height: 40px;
+  font-size: 12px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  span {
+    cursor: pointer;
+    padding: 5px;
+    &:hover {
+      border: 1px solid #eee;
+    }
+  }
+}
+.thumbnail-list {
+  padding: 5px 0;
+}
 .thumbnail-wrapper {
   display: flex;
   justify-content: center;