From a569fc9522b98cddd112a86812a519ff0df9cd6f Mon Sep 17 00:00:00 2001
From: xiaozzzi <42293085+xiaozzzi@users.noreply.github.com>
Date: Sun, 14 Jan 2024 15:56:34 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96=20tooltip=20?=
 =?UTF-8?q?=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../renderer/src/assets/styles/bl-tip.scss    |   2 +-
 .../src/assets/styles/bl-tooltip.scss         |   4 +
 .../src/renderer/src/components/AppHeader.vue |  10 +-
 .../src/views/article/EditorTools.vue         | 255 +++++++++++++++---
 .../renderer/src/views/index/AsideUpload.vue  |   4 +-
 5 files changed, 235 insertions(+), 40 deletions(-)

diff --git a/blossom-editor/src/renderer/src/assets/styles/bl-tip.scss b/blossom-editor/src/renderer/src/assets/styles/bl-tip.scss
index 76a547b..c29bf91 100644
--- a/blossom-editor/src/renderer/src/assets/styles/bl-tip.scss
+++ b/blossom-editor/src/renderer/src/assets/styles/bl-tip.scss
@@ -58,4 +58,4 @@
   &-bottom:hover:after {
     margin-top: 9px;
   }
-}
\ No newline at end of file
+}
diff --git a/blossom-editor/src/renderer/src/assets/styles/bl-tooltip.scss b/blossom-editor/src/renderer/src/assets/styles/bl-tooltip.scss
index f3a53a2..fad6b73 100644
--- a/blossom-editor/src/renderer/src/assets/styles/bl-tooltip.scss
+++ b/blossom-editor/src/renderer/src/assets/styles/bl-tooltip.scss
@@ -117,3 +117,7 @@
     }
   }
 }
+
+.el-popper.is-small {
+  padding: 0 8px;
+}
diff --git a/blossom-editor/src/renderer/src/components/AppHeader.vue b/blossom-editor/src/renderer/src/components/AppHeader.vue
index ebce614..09ea455 100644
--- a/blossom-editor/src/renderer/src/components/AppHeader.vue
+++ b/blossom-editor/src/renderer/src/components/AppHeader.vue
@@ -36,17 +36,19 @@
         ref="ButtonRef"
         v-click-outside="onClickOutside"></div>
 
-      <div class="iconbl bl-a-colorpalette-line" @click="themeStrore.show()"></div>
+      <el-tooltip content="主题配置" popper-class="is-small" transition="none" effect="light" placement="top" :show-after="0" :hide-after="0">
+        <div class="iconbl bl-a-colorpalette-line" @click="themeStrore.show()"></div>
+      </el-tooltip>
 
-      <el-tooltip content="查看图标" effect="light" placement="top" :show-after="1000" :hide-after="0" :auto-close="2000">
+      <el-tooltip content="所有图标" popper-class="is-small" transition="none" effect="light" placement="top" :show-after="0" :hide-after="0">
         <div class="iconbl bl-a-radiochoose-line" @click="toRoute('/iconListIndex')"></div>
       </el-tooltip>
 
-      <el-tooltip content="显示网页收藏" effect="light" placement="top" :show-after="1000" :hide-after="0" :auto-close="2000">
+      <el-tooltip content="网页收藏" popper-class="is-small" transition="none" effect="light" placement="top" :show-after="0" :hide-after="0">
         <div class="iconbl bl-folding-line" @click="isShowWebDrawer = !isShowWebDrawer"></div>
       </el-tooltip>
 
-      <el-tooltip content="最佳窗口大小" effect="light" placement="top" :show-after="1000" :hide-after="0" :auto-close="2000">
+      <el-tooltip content="最佳窗口大小" popper-class="is-small" transition="none" effect="light" placement="top" :show-after="0" :hide-after="0">
         <div v-if="isElectron()" :class="['iconbl bl-computer-line', isWindows() ? '' : 'electron-mac-last']" @click="setBestSize"></div>
       </el-tooltip>
 
diff --git a/blossom-editor/src/renderer/src/views/article/EditorTools.vue b/blossom-editor/src/renderer/src/views/article/EditorTools.vue
index e6eccb9..e1c2679 100644
--- a/blossom-editor/src/renderer/src/views/article/EditorTools.vue
+++ b/blossom-editor/src/renderer/src/views/article/EditorTools.vue
@@ -3,51 +3,240 @@
     <div class="tomato-bell" ref="TomatoBellRef"></div>
     <div class="tools-container">
       <!-- 文章的操作 -->
-      <div class="iconbl bl-a-texteditorsave-line" @click="emits('save')"></div>
-      <div class="iconbl bl-eye-line" @click="emits('previewFullScreen')"></div>
-      <div class="iconbl bl-expansion-line" @click="emits('editorFullScreen')"></div>
+      <el-tooltip
+        content="保存"
+        popper-class="is-small"
+        effect="light"
+        placement="top"
+        transition="none"
+        :hide-after="0"
+        :show-arrow="false"
+        :offset="10">
+        <div class="iconbl bl-a-texteditorsave-line" @click="emits('save')"></div>
+      </el-tooltip>
+      <el-tooltip
+        content="开启/关闭全屏预览"
+        popper-class="is-small"
+        effect="light"
+        placement="top"
+        transition="none"
+        :hide-after="0"
+        :show-arrow="false"
+        :offset="10">
+        <div class="iconbl bl-eye-line" @click="emits('previewFullScreen')"></div>
+      </el-tooltip>
+      <el-tooltip
+        content="开启/关闭全屏编辑"
+        popper-class="is-small"
+        effect="light"
+        placement="top"
+        transition="none"
+        :hide-after="0"
+        :show-arrow="false"
+        :offset="10">
+        <div class="iconbl bl-expansion-line" @click="emits('editorFullScreen')"></div>
+      </el-tooltip>
 
       <!--  -->
       <div class="divider"></div>
-      <div class="iconbl bl-bold" @click="emits('bold')"></div>
-      <div class="iconbl bl-italic" @click="emits('italic')"></div>
-      <div class="iconbl bl-strikethrough" @click="emits('strike')"></div>
-      <div class="iconbl bl-a-texteditorsuperscript-line" @click="emits('sup')"></div>
-      <div class="iconbl bl-a-texteditorsubscript-line" @click="emits('sub')"></div>
-      <div class="iconbl bl-separator" @click="emits('separator')"></div>
+      <el-tooltip
+        content="加粗"
+        popper-class="is-small"
+        effect="light"
+        placement="top"
+        transition="none"
+        :hide-after="0"
+        :show-arrow="false"
+        :offset="10">
+        <div class="iconbl bl-bold" @click="emits('bold')"></div>
+      </el-tooltip>
+      <el-tooltip
+        content="斜体"
+        popper-class="is-small"
+        effect="light"
+        placement="top"
+        transition="none"
+        :hide-after="0"
+        :show-arrow="false"
+        :offset="10">
+        <div class="iconbl bl-italic" @click="emits('italic')"></div>
+      </el-tooltip>
+      <el-tooltip
+        content="删除线"
+        popper-class="is-small"
+        effect="light"
+        placement="top"
+        transition="none"
+        :hide-after="0"
+        :show-arrow="false"
+        :offset="10">
+        <div class="iconbl bl-strikethrough" @click="emits('strike')"></div>
+      </el-tooltip>
+      <el-tooltip
+        content="上标"
+        popper-class="is-small"
+        effect="light"
+        placement="top"
+        transition="none"
+        :hide-after="0"
+        :show-arrow="false"
+        :offset="10">
+        <div class="iconbl bl-a-texteditorsuperscript-line" @click="emits('sup')"></div>
+      </el-tooltip>
+      <el-tooltip
+        content="下标"
+        popper-class="is-small"
+        effect="light"
+        placement="top"
+        transition="none"
+        :hide-after="0"
+        :show-arrow="false"
+        :offset="10">
+        <div class="iconbl bl-a-texteditorsubscript-line" @click="emits('sub')"></div>
+      </el-tooltip>
+      <el-tooltip
+        content="删除线"
+        popper-class="is-small"
+        effect="light"
+        placement="top"
+        transition="none"
+        :hide-after="0"
+        :show-arrow="false"
+        :offset="10">
+        <div class="iconbl bl-separator" @click="emits('separator')"></div>
+      </el-tooltip>
 
       <!--  -->
       <div class="divider"></div>
-      <el-dropdown>
-        <div class="iconbl bl-a-rightsmallline-line"></div>
-        <template #dropdown>
-          <el-dropdown-menu>
-            <el-dropdown-item @click="emits('blockquote')">⚪ Normal</el-dropdown-item>
-            <el-dropdown-item @click="emits('blockquoteBlock')">⚫ Black</el-dropdown-item>
-            <el-dropdown-item @click="emits('blockquoteGreen')">🟢 Green</el-dropdown-item>
-            <el-dropdown-item @click="emits('blockquoteYellow')">🟡 Yellow</el-dropdown-item>
-            <el-dropdown-item @click="emits('blockquoteRed')">🔴 Red</el-dropdown-item>
-            <el-dropdown-item @click="emits('blockquoteBlue')">🔵 Blue</el-dropdown-item>
-            <el-dropdown-item @click="emits('blockquotePurple')">🟣 Purple</el-dropdown-item>
-          </el-dropdown-menu>
-        </template>
-      </el-dropdown>
-      <!-- </div> -->
-      <div class="iconbl bl-single-quotes-r" @click="emits('code')"></div>
-      <div class="iconbl bl-double-quotes-r" @click="emits('pre')"></div>
-      <div class="iconbl bl-a-underbox-line" @click="emits('checkbox')"></div>
-      <div class="iconbl bl-list-unordered" @click="emits('unordered')"></div>
-      <div class="iconbl bl-list-ordered" @click="emits('ordered')"></div>
+      <el-tooltip
+        content="引用"
+        popper-class="is-small"
+        effect="light"
+        placement="top"
+        transition="none"
+        :hide-after="0"
+        :show-arrow="false"
+        :offset="10">
+        <el-dropdown>
+          <div class="iconbl bl-a-rightsmallline-line"></div>
+          <template #dropdown>
+            <el-dropdown-menu>
+              <el-dropdown-item @click="emits('blockquote')">⚪ Normal</el-dropdown-item>
+              <el-dropdown-item @click="emits('blockquoteBlock')">⚫ Black</el-dropdown-item>
+              <el-dropdown-item @click="emits('blockquoteGreen')">🟢 Green</el-dropdown-item>
+              <el-dropdown-item @click="emits('blockquoteYellow')">🟡 Yellow</el-dropdown-item>
+              <el-dropdown-item @click="emits('blockquoteRed')">🔴 Red</el-dropdown-item>
+              <el-dropdown-item @click="emits('blockquoteBlue')">🔵 Blue</el-dropdown-item>
+              <el-dropdown-item @click="emits('blockquotePurple')">🟣 Purple</el-dropdown-item>
+            </el-dropdown-menu>
+          </template>
+        </el-dropdown>
+      </el-tooltip>
+      <el-tooltip
+        content="行内代码块"
+        popper-class="is-small"
+        effect="light"
+        placement="top"
+        transition="none"
+        :hide-after="0"
+        :show-arrow="false"
+        :offset="10">
+        <div class="iconbl bl-single-quotes-r" @click="emits('code')"></div>
+      </el-tooltip>
+      <el-tooltip
+        content="多行代码块"
+        popper-class="is-small"
+        effect="light"
+        placement="top"
+        transition="none"
+        :hide-after="0"
+        :show-arrow="false"
+        :offset="10">
+        <div class="iconbl bl-double-quotes-r" @click="emits('pre')"></div>
+      </el-tooltip>
+      <el-tooltip
+        content="单选框"
+        popper-class="is-small"
+        effect="light"
+        placement="top"
+        transition="none"
+        :hide-after="0"
+        :show-arrow="false"
+        :offset="10">
+        <div class="iconbl bl-a-underbox-line" @click="emits('checkbox')"></div>
+      </el-tooltip>
+      <el-tooltip
+        content="无序列表"
+        popper-class="is-small"
+        effect="light"
+        placement="top"
+        transition="none"
+        :hide-after="0"
+        :show-arrow="false"
+        :offset="10">
+        <div class="iconbl bl-list-unordered" @click="emits('unordered')"></div>
+      </el-tooltip>
+      <el-tooltip
+        content="有序列表"
+        popper-class="is-small"
+        effect="light"
+        placement="top"
+        transition="none"
+        :hide-after="0"
+        :show-arrow="false"
+        :offset="10">
+        <div class="iconbl bl-list-ordered" @click="emits('ordered')"></div>
+      </el-tooltip>
 
       <!-- 表格及其他 -->
       <div class="divider"></div>
-      <div class="iconbl bl-table-" @click="emits('table')"></div>
-      <div class="iconbl bl-image--line" @click="emits('image')"></div>
-      <div class="iconbl bl-link-m" @click="emits('link')"></div>
+      <el-tooltip
+        content="表格"
+        popper-class="is-small"
+        effect="light"
+        placement="top"
+        transition="none"
+        :hide-after="0"
+        :show-arrow="false"
+        :offset="10">
+        <div class="iconbl bl-table-" @click="emits('table')"></div>
+      </el-tooltip>
+      <el-tooltip
+        content="图片链接"
+        popper-class="is-small"
+        effect="light"
+        placement="top"
+        transition="none"
+        :hide-after="0"
+        :show-arrow="false"
+        :offset="10">
+        <div class="iconbl bl-image--line" @click="emits('image')"></div>
+      </el-tooltip>
+      <el-tooltip
+        content="链接"
+        popper-class="is-small"
+        effect="light"
+        placement="top"
+        transition="none"
+        :hide-after="0"
+        :show-arrow="false"
+        :offset="10">
+        <div class="iconbl bl-link-m" @click="emits('link')"></div>
+      </el-tooltip>
 
       <!-- 其他工具 -->
       <div class="divider"></div>
-      <div class="iconbl bl-jianpan-xianxing" @click="handleShowHotKeyDialog"></div>
+      <el-tooltip
+        content="查看快捷键"
+        popper-class="is-small"
+        effect="light"
+        placement="top"
+        transition="none"
+        :hide-after="0"
+        :show-arrow="false"
+        :offset="10">
+        <div class="iconbl bl-jianpan-xianxing" @click="handleShowHotKeyDialog"></div>
+      </el-tooltip>
 
       <!-- 番茄 -->
       <el-popover placement="bottom" :width="220" trigger="click" popper-style="padding:0;">
diff --git a/blossom-editor/src/renderer/src/views/index/AsideUpload.vue b/blossom-editor/src/renderer/src/views/index/AsideUpload.vue
index 392e5b6..22d2488 100644
--- a/blossom-editor/src/renderer/src/views/index/AsideUpload.vue
+++ b/blossom-editor/src/renderer/src/views/index/AsideUpload.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="aside-upload-root">
-    <el-tooltip effect="light" placement="right-start" :show-after="1000" :hide-after="0">
-      <template #content>提示:<br />从这里上传, 会上传至<br />《🌌 默认文件夹》</template>
+    <el-tooltip effect="light" placement="right" :show-after="1000" :hide-after="0">
+      <template #content>从这里上传, 会上传至<br />《🌌 默认文件夹》</template>
       <el-upload
         name="file"
         :action="serverStore.serverUrl + uploadFileApiUrl"