perf: 放映工具交互优化

src/components/Popover.vue

@@ -31,6 +31,8 @@ const props = withDefaults(defineProps<{
 
 const emit = defineEmits<{
   (event: 'update:value', payload: boolean): void
+  (event: 'show'): void
+  (event: 'hide'): void
 }>()
 
 const instance = ref<Instance>()
@@ -69,10 +71,16 @@ onMounted(() => {
       contentVisible.value = true
     },
     onShown() {
-      if (!props.value) emit('update:value', true)
+      if (!props.value) {
+        emit('update:value', true)
+        emit('show')
+      }
     },
     onHidden() {
-      if (props.value) emit('update:value', false)
+      if (props.value) {
+        emit('update:value', false)
+        emit('hide')
+      }
       contentVisible.value = false
     },
   })

src/views/Screen/BaseView.vue

@@ -207,11 +207,12 @@ const contextmenus = (): ContextmenuItem[] => {
   z-index: 10;
 
   .tool-btn {
-    opacity: .35;
+    opacity: .3;
     cursor: pointer;
+    transition: opacity $transitionDelay;
 
     &:hover {
-      opacity: .9;
+      opacity: .95;
     }
     & + .tool-btn {
       margin-left: 8px;

src/views/Screen/CountdownTimer.vue

@@ -198,6 +198,7 @@ const changeTime = (e: FocusEvent | KeyboardEvent, type: 'minute' | 'second') =>
   top: 0;
   right: 0;
   padding: 10px;
+  line-height: 1;
   cursor: pointer;
 }
 </style>

src/views/Screen/WritingBoardTool.vue

@@ -29,7 +29,7 @@
     >
       <div class="tools" @mousedown.stop>
         <div class="tool-content">
-          <Popover placement="top" trigger="manual" :value="sizePopoverType === 'pen'">
+          <Popover placement="top" trigger="manual" :value="sizePopoverType === 'pen'" @hide="sizePopoverType = ''">
             <template #content>
               <div class="setting">
                 <div class="label">墨迹粗细：</div>
@@ -40,7 +40,7 @@
               <IconWrite class="icon" />
             </div>
           </Popover>
-          <Popover placement="top" trigger="manual" :value="sizePopoverType === 'shape'">
+          <Popover placement="top" trigger="manual" :value="sizePopoverType === 'shape'" @hide="sizePopoverType = ''">
             <template #content>
               <div class="setting shape">
                 <div class="shapes">
@@ -57,7 +57,7 @@
               <IconGraphicDesign class="icon" />
             </div>
           </Popover>
-          <Popover placement="top" trigger="manual" :value="sizePopoverType === 'mark'">
+          <Popover placement="top" trigger="manual" :value="sizePopoverType === 'mark'" @hide="sizePopoverType = ''">
             <template #content>
               <div class="setting">
                 <div class="label">墨迹粗细：</div>
@@ -68,7 +68,7 @@
               <IconHighLight class="icon" />
             </div>
           </Popover>
-          <Popover placement="top" trigger="manual" :value="sizePopoverType === 'eraser'">
+          <Popover placement="top" trigger="manual" :value="sizePopoverType === 'eraser'" @hide="sizePopoverType = ''">
             <template #content>
               <div class="setting">
                 <div class="label">橡皮大小：</div>
@@ -149,13 +149,8 @@ const rubberSize = ref(80)
 const shapeSize = ref(4)
 
 const changeModel = (model: WritingBoardModel) => {
-  if (writingBoardModel.value === model) {
+  writingBoardModel.value = model
-    sizePopoverType.value = sizePopoverType.value === model ? '' : model
+  sizePopoverType.value = sizePopoverType.value === model ? '' : model
-  }
-  else {
-    if (sizePopoverType.value) sizePopoverType.value = ''
-    writingBoardModel.value = model
-  }
 }
 
 // 清除画布上的墨迹