perf: 画笔交互方式优化

src/views/Screen/WritingBoardTool.vue

@@ -4,17 +4,14 @@
       <WritingBoard 
         ref="writingBoardRef" 
         :color="writingBoardColor" 
-        :model="writingBoardModel" 
-        v-if="writingBoardVisible" 
-        v-contextmenu="contextmenus"
+        :model="writingBoardModel"
       />
     </teleport>
 
     <div class="tools">
-      <div class="btn" @click="changePen()">画笔</div>
-      <div class="btn" @click="changeEraser()">橡皮擦</div>
-      <div class="btn" @click="clearCanvas()">擦除所有墨迹</div>
-      <div class="btn" @click="closeWritingBoard()">退出画笔</div>
+      <div class="btn" :class="{ 'active': writingBoardModel === 'pen' }" @click="changePen()">画笔</div>
+      <div class="btn" :class="{ 'active': writingBoardModel === 'eraser' }" @click="changeEraser()">橡皮</div>
+      <div class="btn" @click="clearCanvas()">清除墨迹</div>
       <div class="colors">
         <div 
           class="color" 
@@ -25,6 +22,7 @@
           @click="changeColor(color)"
         ></div>
       </div>
+      <div class="btn" @click="closeWritingBoard()">退出画笔</div>
     </div>
   </div>
 </template>
@@ -32,7 +30,6 @@
 <script lang="ts">
 import { defineComponent, ref } from 'vue'
 import WritingBoard from '@/components/WritingBoard.vue'
-import { ContextmenuItem } from '@/components/Contextmenu/types'
 
 const writingBoardColors = ['#000000', '#ffffff', '#1e497b', '#4e81bb', '#e2534d', '#9aba60', '#8165a0', '#47acc5', '#f9974c']
 
@@ -43,68 +40,37 @@ export default defineComponent({
   },
   setup(props, { emit }) {
     const writingBoardRef = ref()
-    const writingBoardVisible = ref(false)
     const writingBoardColor = ref('#e2534d')
     const writingBoardModel = ref('pen')
 
     // 切换到画笔状态
     const changePen = () => {
-      if (!writingBoardVisible.value) writingBoardVisible.value = true
       writingBoardModel.value = 'pen'
-      emit('close')
     }
 
     // 切换到橡皮状态
     const changeEraser = () => {
       writingBoardModel.value = 'eraser'
-      emit('close')
     }
 
     // 清除画布上的墨迹
     const clearCanvas = () => {
       writingBoardRef.value.clearCanvas()
-      emit('close')
     }
 
     // 修改画笔颜色，如果当前不处于画笔状态则先切换到画笔状态
     const changeColor = (color: string) => {
       if (writingBoardModel.value !== 'pen') writingBoardModel.value = 'pen'
       writingBoardColor.value = color
-      emit('close')
     }
     
     // 关闭写字板
     const closeWritingBoard = () => {
-      writingBoardVisible.value = false
       emit('close')
     }
 
-    const contextmenus = (): ContextmenuItem[] => {
-      return [
-        {
-          text: '画笔',
-          handler: changePen,
-          disable: writingBoardModel.value === 'pen',
-        },
-        {
-          text: '橡皮擦',
-          handler: changeEraser,
-          disable: writingBoardModel.value === 'eraser',
-        },
-        {
-          text: '擦除所有墨迹',
-          handler: clearCanvas,
-        },
-        {
-          text: '退出画笔',
-          handler: closeWritingBoard,
-        },
-      ]
-    }
-
     return {
       writingBoardRef,
-      writingBoardVisible,
       writingBoardColors,
       writingBoardColor,
       writingBoardModel,
@@ -113,7 +79,6 @@ export default defineComponent({
       clearCanvas,
       changeColor,
       closeWritingBoard,
-      contextmenus,
     }
   },
 })
@@ -123,19 +88,28 @@ export default defineComponent({
 .writing-board-tool {
   font-size: 12px;
 
+  .tools {
+    height: 50px;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    z-index: 11;
+    padding: 12px;
+    background-color: #fff;
+    display: flex;
+    align-items: center;
+  }
   .btn {
-    padding: 3px 10px;
-    margin: 0 -10px;
-    margin-bottom: 3px;
+    padding: 6px 10px;
     cursor: pointer;
 
-    &:hover {
+    &:hover, &.active {
       background-color: rgba($color: $themeColor, $alpha: .2);
     }
   }
   .colors {
     display: flex;
-    margin-top: 8px;
+    padding: 0 10px;
   }
   .color {
     width: 15px;

src/views/Screen/index.vue

@@ -41,15 +41,12 @@
       @close="slideThumbnailModelVisible = false"
     />
 
+    <WritingBoardTool v-if="writingBoardToolVisible" @close="writingBoardToolVisible = false" />
+
     <div class="tools">
       <IconLeftTwo class="tool-btn" theme="two-tone" :fill="['#111', '#fff']" @click="execPrev()" />
       <IconRightTwo class="tool-btn" theme="two-tone" :fill="['#111', '#fff']" @click="execNext()" />
-      <Popover trigger="click" v-model:visible="writingBoardToolVisible">
-        <template #content>
-          <WritingBoardTool @close="writingBoardToolVisible = false" />
-        </template>
-        <IconWrite class="tool-btn" theme="two-tone" :fill="['#111', '#fff']" />
-      </Popover>
+      <IconWrite class="tool-btn" theme="two-tone" :fill="['#111', '#fff']" @click="writingBoardToolVisible = true" />
     </div>
 
     <div class="page-number" @click="slideThumbnailModelVisible = true" v-if="showPageNumber">
@@ -283,6 +280,10 @@ export default defineComponent({
           text: '查看所有幻灯片',
           handler: () => slideThumbnailModelVisible.value = true,
         },
+        {
+          text: '画笔',
+          handler: () => writingBoardToolVisible.value = true,
+        },
         { divider: true },
         {
           text: autoPlayTimer.value ? '取消自动放映' : '自动放映',