From f765b936eccdaa6b14ca68372437dc187e9723e1 Mon Sep 17 00:00:00 2001
From: zxc <1171051090@qq.com>
Date: Sun, 15 Sep 2024 15:40:17 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E5=85=BC=E5=AE=B9=E8=87=B31024px?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/plugins/icon.ts                   |  2 ++
 src/views/Editor/CanvasTool/index.vue | 19 +++++++++++++++++--
 2 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/src/plugins/icon.ts b/src/plugins/icon.ts
index bd45c46b..da9ce976 100644
--- a/src/plugins/icon.ts
+++ b/src/plugins/icon.ts
@@ -124,6 +124,7 @@ import {
   Comment,
   User,
   Switch,
+  More,
 } from '@icon-park/vue-next'
 
 export interface Icons {
@@ -253,6 +254,7 @@ export const icons: Icons = {
   IconComment: Comment,
   IconUser: User,
   IconSwitch: Switch,
+  IconMore: More,
 }
 
 export default {
diff --git a/src/views/Editor/CanvasTool/index.vue b/src/views/Editor/CanvasTool/index.vue
index 7a8ee100..a92b0109 100644
--- a/src/views/Editor/CanvasTool/index.vue
+++ b/src/views/Editor/CanvasTool/index.vue
@@ -5,7 +5,15 @@
       <IconNext class="handler-item" :class="{ 'disable': !canRedo }" v-tooltip="'重做（Ctrl + Y）'" @click="redo()" />
       <div class="more">
         <Divider type="vertical" style="height: 20px;" />
-        <IconComment class="handler-item" :class="{ 'active': showNotesPanel }" v-tooltip="'批注'" @click="toggleNotesPanel()" />
+        <Popover class="more-icon" trigger="click" v-model:value="moreVisible" :offset="10">
+          <template #content>
+            <PopoverMenuItem center @click="toggleNotesPanel(); moreVisible = false">批注面板</PopoverMenuItem>
+            <PopoverMenuItem center @click="toggleSelectPanel(); moreVisible = false">选择窗格</PopoverMenuItem>
+            <PopoverMenuItem center @click="toggleSraechPanel(); moreVisible = false">查找替换</PopoverMenuItem>
+          </template>
+          <IconMore class="handler-item" />
+        </Popover>
+        <IconComment class="handler-item" :class="{ 'active': showNotesPanel }" v-tooltip="'批注面板'" @click="toggleNotesPanel()" />
         <IconMoveOne class="handler-item" :class="{ 'active': showSelectPanel }" v-tooltip="'选择窗格'" @click="toggleSelectPanel()" />
         <IconSearch class="handler-item" :class="{ 'active': showSearchPanel }" v-tooltip="'查找/替换（Ctrl + F）'" @click="toggleSraechPanel()" />
       </div>
@@ -172,6 +180,7 @@ const mediaInputVisible = ref(false)
 const latexEditorVisible = ref(false)
 const textTypeSelectVisible = ref(false)
 const shapeMenuVisible = ref(false)
+const moreVisible = ref(false)
 
 // 绘制文字范围
 const drawText = (vertical = false) => {
@@ -235,6 +244,9 @@ const toggleNotesPanel = () => {
   display: flex;
   align-items: center;
 }
+.more-icon {
+  display: none;
+}
 .add-element-handler {
   position: absolute;
   top: 50%;
@@ -334,9 +346,12 @@ const toggleNotesPanel = () => {
   .right-handler .text {
     display: none;
   }
-  .more {
+  .more > .handler-item {
     display: none;
   }
+  .more-icon {
+    display: block;
+  }
 }
 @media screen and (width <= 1000px) {
   .left-handler, .right-handler {