From d099ddc3aec634ec993ff11a6d712ecfd5588b52 Mon Sep 17 00:00:00 2001
From: zxc <1171051090@qq.com>
Date: Sun, 16 Mar 2025 09:36:25 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E6=94=BE=E6=98=A0=E5=B7=A5=E5=85=B7?=
 =?UTF-8?q?=E4=BA=A4=E4=BA=92=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Popover.vue            | 12 ++++++++++--
 src/views/Screen/BaseView.vue         |  5 +++--
 src/views/Screen/CountdownTimer.vue   |  1 +
 src/views/Screen/WritingBoardTool.vue | 17 ++++++-----------
 4 files changed, 20 insertions(+), 15 deletions(-)

diff --git a/src/components/Popover.vue b/src/components/Popover.vue
index a175453e..07df3068 100644
--- a/src/components/Popover.vue
+++ b/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
     },
   })
diff --git a/src/views/Screen/BaseView.vue b/src/views/Screen/BaseView.vue
index 81c24b40..7a9d0845 100644
--- a/src/views/Screen/BaseView.vue
+++ b/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;
diff --git a/src/views/Screen/CountdownTimer.vue b/src/views/Screen/CountdownTimer.vue
index 523ff439..5aa94ac0 100644
--- a/src/views/Screen/CountdownTimer.vue
+++ b/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>
\ No newline at end of file
diff --git a/src/views/Screen/WritingBoardTool.vue b/src/views/Screen/WritingBoardTool.vue
index 1b61d722..b13c9e99 100644
--- a/src/views/Screen/WritingBoardTool.vue
+++ b/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) {
-    sizePopoverType.value = sizePopoverType.value === model ? '' : model
-  }
-  else {
-    if (sizePopoverType.value) sizePopoverType.value = ''
-    writingBoardModel.value = model
-  }
+  writingBoardModel.value = model
+  sizePopoverType.value = sizePopoverType.value === model ? '' : model
 }
 
 // 清除画布上的墨迹