perf: 优化UI

src/components/Button.vue

@@ -64,6 +64,7 @@ const handleClick = () => {
     line-height: 24px;
     padding: 0 7px;
     letter-spacing: 0;
+    font-size: 12px;
   }
 
   &.default {

src/components/MoveablePanel.vue

@@ -209,7 +209,7 @@ const startResize = (e: MouseEvent) => {
   justify-content: center;
   align-items: center;
   color: #666;
-  font-size: 12px;
+  font-size: 13px;
   cursor: pointer;
 }
 .content {

src/views/Editor/NotesPanel.vue

@@ -67,7 +67,7 @@
           @focus="replyNoteId = ''; activeNoteId = ''"
         />
         <div class="footer">
-          <Button class="btn" v-tooltip="'清空本页批注'" style="flex: 1" @click="clear()"><IconDelete /></Button>
+          <IconDelete class="btn icon" v-tooltip="'清空本页批注'" style="flex: 1" @click="clear()" />
           <Button type="primary" class="btn" style="flex: 12" @click="createNote()">添加批注</Button>
         </div>
       </div>
@@ -314,9 +314,20 @@ const close = () => {
     margin-top: 10px;
     display: flex;
 
+    .btn {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      
+      &.icon {
+        font-size: 18px;
+        color: #666;
+        cursor: pointer;
+      }
+    }
+
     .btn + .btn {
       margin-left: 8px;
-      flex-shrink: 0;
     }
   }
 }

src/views/Editor/SearchPanel.vue

@@ -145,7 +145,7 @@ watch(type, () => {
   justify-content: center;
   align-items: center;
   color: #666;
-  font-size: 12px;
+  font-size: 13px;
   cursor: pointer;
 }
 </style>

src/views/Editor/Thumbnails/LayoutPool.vue

@@ -1,14 +1,20 @@
 <template>
   <div class="layout-pool">
-    <div 
+    <div class="header">页面模板</div>
-      class="layout-item"
+    <div class="list">
-      v-for="slide in layouts" 
+      <div 
-      :key="slide.id"
+        class="layout-item"
-      @click="selectSlideTemplate(slide)"
+        v-for="slide in layouts" 
-    >
+        :key="slide.id"
-      <ThumbnailSlide class="thumbnail" :slide="slide" :size="180" />
+      >
+        <ThumbnailSlide class="thumbnail" :slide="slide" :size="180" />
+
+        <div class="btns">
+          <Button class="btn" type="primary" size="small" @click="insertTemplate(slide)">插入模板</Button>
+        </div>
+      </div>
+    </div>
     </div>
-  </div>
 </template>
 
 <script lang="ts" setup>
@@ -17,44 +23,73 @@ import { useSlidesStore } from '@/store'
 import type { Slide } from '@/types/slides'
 
 import ThumbnailSlide from '@/views/components/ThumbnailSlide/index.vue'
+import Button from '@/components/Button.vue'
 
 const emit = defineEmits<{
   (event: 'select', payload: Slide): void
 }>()
 
-const { layouts } = storeToRefs(useSlidesStore())
+const slidesStore = useSlidesStore()
+const { layouts } = storeToRefs(slidesStore)
 
-const selectSlideTemplate = (slide: Slide) => {
+const insertTemplate = (slide: Slide) => {
   emit('select', slide)
 }
 </script>
 
 <style lang="scss" scoped>
 .layout-pool {
-  width: 394px;
+  width: 382px;
   height: 500px;
+}
+.header {
+  height: 40px;
+  margin: -10px -10px 8px -10px;
+  padding: 10px 12px 0 12px;
+  background-color: $lightGray;
+  border-bottom: 1px solid $borderColor;
+}
+.list {
+  height: calc(100% - 40px);
   padding: 2px;
-  margin-right: -12px;
+  margin-right: -10px;
-  padding-right: 12px;
+  padding-right: 10px;
   overflow: auto;
-
   @include flex-grid-layout();
 }
 .layout-item {
+  position: relative;
   @include flex-grid-layout-children(2, 48%);
 
   &:nth-last-child(2), &:last-child {
     margin-bottom: 0;
   }
 
+  &:hover .btns {
+    opacity: 1;
+  }
+
+  &:hover .thumbnail {
+    outline-color: $themeColor;
+  }
+
+  .btns {
+    @include absolute-0();
+
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    display: flex;
+    background-color: rgba($color: #000, $alpha: .25);
+    opacity: 0;
+    transition: opacity $transitionDelay;
+  }
+
   .thumbnail {
     outline: 2px solid $borderColor;
     transition: outline $transitionDelay;
+    border-radius: $borderRadius;
     cursor: pointer;
-
-    &:hover {
-      outline-color: $themeColor;
-    }
   }
 }
 </style>

src/views/Editor/Toolbar/SlideDesignPanel.vue

@@ -281,8 +281,8 @@
           </div>
 
           <div class="btns">
-            <div class="btn" @click="applyPresetThemeToSingleSlide(item)">应用</div>
+            <Button type="primary" size="small" @click="applyPresetThemeToSingleSlide(item)">应用</Button>
-            <div class="btn" @click="applyPresetThemeToAllSlides(item)">应用全局</div>
+            <Button type="primary" size="small" style="margin-top: 3px;" @click="applyPresetThemeToAllSlides(item)">应用全局</Button>
           </div>
         </div>
       </div>
@@ -505,22 +505,5 @@ const updateViewportRatio = (value: number) => {
     opacity: 0;
     transition: opacity $transitionDelay;
   }
-  .btn {
-    width: 72px;
-    padding: 5px 0;
-    text-align: center;
-    background-color: $themeColor;
-    color: #fff;
-    font-size: 12px;
-    border-radius: $borderRadius;
-
-    &:hover {
-      background-color: $themeHoverColor;
-    }
-
-    & + .btn {
-      margin-top: 5px;
-    }
-  }
 }
 </style>