From e90176f34e0ae4a27d886140c861b7ae1bc6d7fe Mon Sep 17 00:00:00 2001
From: cuixiaorui <cui_xiaorui@126.com>
Date: Wed, 14 Aug 2024 23:34:06 +0800
Subject: [PATCH] refactor: use UTooltip replace tippy

---
 apps/client/components/Home/CalendarGraph.vue | 20 +++---
 apps/client/components/courses/CourseCard.vue |  6 +-
 .../components/main/Contents/Contents.vue     | 16 ++---
 .../client/components/main/PrevAndNextBtn.vue | 32 +++++----
 .../client/components/main/StudyVideoLink.vue | 13 ++--
 apps/client/components/main/Tool.vue          | 64 +++++++++---------
 apps/client/composables/user/shortcutKey.ts   |  6 ++
 apps/client/nuxt.config.ts                    |  2 +-
 apps/client/package.json                      |  1 -
 apps/client/pages/mastered-elements.vue       | 11 ++--
 apps/client/plugins/lazyTippy.ts              | 66 -------------------
 pnpm-lock.yaml                                | 10 ---
 12 files changed, 92 insertions(+), 155 deletions(-)
 delete mode 100644 apps/client/plugins/lazyTippy.ts

diff --git a/apps/client/components/Home/CalendarGraph.vue b/apps/client/components/Home/CalendarGraph.vue
index 4b79df05a..0fb637330 100644
--- a/apps/client/components/Home/CalendarGraph.vue
+++ b/apps/client/components/Home/CalendarGraph.vue
@@ -16,7 +16,7 @@
             <th></th>
             <th
               v-for="{ colSpan, month } in thead"
-              class="text-left font-normal"
+              class="pb-1 text-left font-normal"
               :colspan="colSpan"
               :key="month"
             >
@@ -33,15 +33,17 @@
               </td>
               <td
                 v-for="(cell, j) in row"
-                class="m-0"
                 :key="j"
               >
-                <div
-                  class="cell block"
-                  :class="[cell?.bg]"
-                  :data-tippy-content="cell?.tips"
-                  @mouseenter="(e) => $calendarTippy(e, calendarTable)"
-                />
+                <UTooltip
+                  :text="cell?.tips"
+                  :ui="{ wrapper: '', strategy: 'override' }"
+                >
+                  <div
+                    class="cell block"
+                    :class="[cell?.bg]"
+                  ></div>
+                </UTooltip>
               </td>
             </tr>
           </tbody>
@@ -166,7 +168,7 @@ watchEffect(() => {
 
 <style scoped>
 .cell {
-  @apply mt-[2px] h-[12px] w-[12px] rounded-sm border-gray-200 bg-gray-200 hover:scale-125 hover:border hover:border-blue-400 dark:bg-gray-700 dark:hover:border-gray-50;
+  @apply h-[12px] w-[12px] rounded-sm border-gray-200 bg-gray-200 hover:scale-125 hover:border hover:border-blue-400 dark:bg-gray-700 dark:hover:border-gray-50;
 }
 
 .low {
diff --git a/apps/client/components/courses/CourseCard.vue b/apps/client/components/courses/CourseCard.vue
index ea8fe223b..648a9bb32 100644
--- a/apps/client/components/courses/CourseCard.vue
+++ b/apps/client/components/courses/CourseCard.vue
@@ -30,10 +30,10 @@
           'bg-purple-600': isActiveCourse,
         },
       ]"
-      :data-tippy-content="dataTip"
-      @mouseenter="$lazyTippy"
     >
-      {{ count }}
+      <UTooltip :text="dataTip">
+        {{ count }}
+      </UTooltip>
     </div>
   </div>
 </template>
diff --git a/apps/client/components/main/Contents/Contents.vue b/apps/client/components/main/Contents/Contents.vue
index f65e022bf..a22233bd0 100644
--- a/apps/client/components/main/Contents/Contents.vue
+++ b/apps/client/components/main/Contents/Contents.vue
@@ -10,17 +10,17 @@
         v-for="(item, index) in contentsList"
         :key="item.id"
         :class="getItemClassNames(index)"
-        :data-tippy-content="`${item.english}<br>${item.chinese}`"
         @click="jumpTo(index, item)"
-        @mouseenter="$lazyTippy"
       >
-        <div class="flex whitespace-pre-wrap border-b py-1 dark:border-slate-600">
-          <div class="w-12 text-center">{{ index + 1 }}</div>
-          <div class="flex-1 truncate text-left">
-            {{ item.chinese }}
-            {{ item.isMastered ? "✅" : "" }}
+        <UTooltip :text="`${item.english} ${item.chinese}`">
+          <div class="flex whitespace-pre-wrap border-b py-1 dark:border-slate-600">
+            <div class="w-12 text-center">{{ index + 1 }}</div>
+            <div class="flex-1 truncate text-left">
+              {{ item.chinese }}
+              {{ item.isMastered ? "✅" : "" }}
+            </div>
           </div>
-        </div>
+        </UTooltip>
       </div>
     </div>
   </div>
diff --git a/apps/client/components/main/PrevAndNextBtn.vue b/apps/client/components/main/PrevAndNextBtn.vue
index 0a1a71d14..2042ab57f 100644
--- a/apps/client/components/main/PrevAndNextBtn.vue
+++ b/apps/client/components/main/PrevAndNextBtn.vue
@@ -4,14 +4,17 @@
       <button
         v-show="courseStore.visibleStatementIndex !== 0"
         class="arrow-btn"
-        :data-tippy-content="PREV_BTN_TIP"
         @click="goToPreviousQuestion"
-        @mouseenter="$lazyTippy"
       >
-        <UIcon
-          name="i-ph-caret-left"
-          class="h-12 w-12"
-        ></UIcon>
+        <UTooltip
+          text="上一题"
+          :shortcuts="parseShortcut(shortcutKeys.previous)"
+        >
+          <UIcon
+            name="i-ph-caret-left"
+            class="h-12 w-12"
+          ></UIcon>
+        </UTooltip>
       </button>
     </div>
 
@@ -19,14 +22,17 @@
       <button
         v-show="courseStore.visibleStatementIndex + 1 !== courseStore.visibleStatementsCount"
         class="arrow-btn"
-        :data-tippy-content="NEXT_BTN_TIP"
         @click="goToNextQuestion"
-        @mouseenter="$lazyTippy"
       >
-        <UIcon
-          name="i-ph-caret-right"
-          class="h-12 w-12"
-        ></UIcon>
+        <UTooltip
+          text="下一题"
+          :shortcuts="parseShortcut(shortcutKeys.skip)"
+        >
+          <UIcon
+            name="i-ph-caret-right"
+            class="h-12 w-12"
+          ></UIcon>
+        </UTooltip>
       </button>
     </div>
   </div>
@@ -35,7 +41,7 @@
 import { onMounted, onUnmounted } from "vue";
 
 import { useGameMode } from "~/composables/main/game";
-import { useShortcutKeyMode } from "~/composables/user/shortcutKey";
+import { parseShortcut, useShortcutKeyMode } from "~/composables/user/shortcutKey";
 import { useCourseStore } from "~/store/course";
 import { cancelShortcut, registerShortcut } from "~/utils/keyboardShortcuts";
 
diff --git a/apps/client/components/main/StudyVideoLink.vue b/apps/client/components/main/StudyVideoLink.vue
index 60fce7152..412756f7f 100644
--- a/apps/client/components/main/StudyVideoLink.vue
+++ b/apps/client/components/main/StudyVideoLink.vue
@@ -4,18 +4,17 @@
     target="_blank"
     class="flex cursor-pointer items-center fill-current text-xl hover:text-fuchsia-500"
     :href="video"
-    :data-tippy-content="NOTE_TIP"
-    @mouseenter="$lazyTippy"
   >
-    <UIcon
-      name="i-simple-icons-bilibili"
-      class="h-5 w-5"
-    />
+    <UTooltip text="边看边练">
+      <UIcon
+        name="i-simple-icons-bilibili"
+        class="h-5 w-5"
+      />
+    </UTooltip>
   </NuxtLink>
 </template>
 
 <script setup lang="ts">
-const NOTE_TIP = "边看边练";
 defineProps<{
   video?: string;
 }>();
diff --git a/apps/client/components/main/Tool.vue b/apps/client/components/main/Tool.vue
index b42035a1f..89f1fc985 100644
--- a/apps/client/components/main/Tool.vue
+++ b/apps/client/components/main/Tool.vue
@@ -5,20 +5,20 @@
     <!-- 左侧 -->
     <div class="flex items-center">
       <NuxtLink
-        class="clickable-item"
-        data-tippy-content="课程列表"
+        class="clickable-item flex items-center justify-center"
         :href="`/course-pack/${courseStore.currentCourse?.coursePackId}`"
-        @mouseenter="$lazyTippy"
       >
-        <IconsExpand class="h-7 w-7" />
+        <UTooltip text="课程列表">
+          <IconsExpand class="h-7 w-7" />
+        </UTooltip>
       </NuxtLink>
       <div
         class="clickable-item ml-4"
-        data-tippy-content="课程题目列表"
         @click="toggleContents"
-        @mouseenter="$lazyTippy"
       >
-        {{ currentCourseInfo }}
+        <UTooltip text="课程题目列表">
+          {{ currentCourseInfo }}
+        </UTooltip>
       </div>
       <MainStudyVideoLink :video="courseStore.currentCourse?.video" />
     </div>
@@ -27,34 +27,34 @@
     <div class="flex items-center gap-4">
       <div
         v-if="isAuthenticated()"
-        :data-tippy-content="`暂停游戏 (${shortcutKeys.pause})`"
         @click="pauseGame"
-        @mouseenter="$lazyTippy"
       >
-        <UIcon
-          name="i-ph-pause"
-          class="clickable-item h-6 w-6"
-        />
+        <UTooltip
+          text="暂停游戏"
+          :shortcuts="parseShortcut(shortcutKeys.pause)"
+        >
+          <UIcon
+            name="i-ph-pause"
+            class="clickable-item h-6 w-6"
+          />
+        </UTooltip>
       </div>
-      <div
-        data-tippy-content="重置当前课程进度"
-        @click="handleDoAgain"
-        @mouseenter="$lazyTippy"
-      >
-        <UIcon
-          name="i-ph-arrow-counter-clockwise"
-          class="clickable-item h-6 w-6"
-        />
+
+      <div @click="handleDoAgain">
+        <UTooltip text="重置当前课程进度">
+          <UIcon
+            name="i-ph-arrow-counter-clockwise"
+            class="clickable-item h-6 w-6"
+          />
+        </UTooltip>
       </div>
-      <div
-        data-tippy-content="排行榜"
-        @click="rankingStore.showRankModal"
-        @mouseenter="$lazyTippy"
-      >
-        <UIcon
-          name="i-ph-ranking"
-          class="clickable-item h-6 w-6"
-        />
+      <div @click="rankingStore.showRankModal">
+        <UTooltip text="排行榜">
+          <UIcon
+            name="i-ph-ranking"
+            class="clickable-item h-6 w-6"
+          />
+        </UTooltip>
       </div>
     </div>
 
@@ -79,7 +79,7 @@ import { useGameMode } from "~/composables/main/game";
 import { clearQuestionInput } from "~/composables/main/question";
 import { useGamePause } from "~/composables/main/useGamePause";
 import { useRanking } from "~/composables/rank/rankingList";
-import { useShortcutKeyMode } from "~/composables/user/shortcutKey";
+import { parseShortcut, useShortcutKeyMode } from "~/composables/user/shortcutKey";
 import { isAuthenticated } from "~/services/auth";
 import { useCourseStore } from "~/store/course";
 import { useContent } from "./Contents/useContents";
diff --git a/apps/client/composables/user/shortcutKey.ts b/apps/client/composables/user/shortcutKey.ts
index 643025290..fbd14017d 100644
--- a/apps/client/composables/user/shortcutKey.ts
+++ b/apps/client/composables/user/shortcutKey.ts
@@ -50,6 +50,12 @@ export function convertMacKey(key: string) {
   );
 }
 
+export function parseShortcut(shortcut: string): string[] {
+  return shortcut
+    .split("+")
+    .map((key) => key.trim().charAt(0).toUpperCase() + key.slice(1).toLowerCase());
+}
+
 // 自定义快捷键
 const showModal = ref<boolean>(false);
 const currentKeyType = ref<SHORTCUT_KEY_TYPES | "">("");
diff --git a/apps/client/nuxt.config.ts b/apps/client/nuxt.config.ts
index d421ecc93..4bc8461d5 100644
--- a/apps/client/nuxt.config.ts
+++ b/apps/client/nuxt.config.ts
@@ -41,7 +41,7 @@ export default defineNuxtConfig({
     "@hypernym/nuxt-anime",
     "@nuxt/image",
   ],
-  plugins: ["~/plugins/logto.ts", "~/plugins/lazyTippy.ts", "~/plugins/http.ts"],
+  plugins: ["~/plugins/logto.ts", "~/plugins/http.ts"],
   runtimeConfig: {
     public: {
       apiBase: process.env.API_BASE || "",
diff --git a/apps/client/package.json b/apps/client/package.json
index 5cdda3099..8b34dc7ce 100644
--- a/apps/client/package.json
+++ b/apps/client/package.json
@@ -55,7 +55,6 @@
     "ofetch": "^1.3.4",
     "pinia": "^2.1.7",
     "satori": "^0.10.13",
-    "tippy.js": "^6.3.7",
     "vee-validate": "^4.12.5",
     "vue-sonner": "^1.1.4",
     "yup": "^1.3.3"
diff --git a/apps/client/pages/mastered-elements.vue b/apps/client/pages/mastered-elements.vue
index e2bc53639..8816f2198 100644
--- a/apps/client/pages/mastered-elements.vue
+++ b/apps/client/pages/mastered-elements.vue
@@ -27,14 +27,15 @@
         </div>
       </div>
       <div
-        data-tippy-content="删除"
         @click="removeItem(item)"
         class="cursor-pointer transition-transform duration-300 hover:scale-110"
       >
-        <UIcon
-          name="i-ph-trash-bold"
-          class="h-5 w-5"
-        />
+        <UTooltip text="删除">
+          <UIcon
+            name="i-ph-trash-bold"
+            class="h-5 w-5"
+          />
+        </UTooltip>
       </div>
     </div>
   </div>
diff --git a/apps/client/plugins/lazyTippy.ts b/apps/client/plugins/lazyTippy.ts
deleted file mode 100644
index 07a801b9e..000000000
--- a/apps/client/plugins/lazyTippy.ts
+++ /dev/null
@@ -1,66 +0,0 @@
-import type { Instance } from "tippy.js";
-
-import { defineNuxtPlugin } from "nuxt/app";
-import tippy, { createSingleton } from "tippy.js";
-
-import "tippy.js/dist/tippy.css";
-import "tippy.js/dist/svg-arrow.css";
-
-export default defineNuxtPlugin(() => {
-  const tippyInstances = new Map<HTMLElement, Instance>();
-  const options = {
-    arrow: true, // 箭头
-    allowHTML: true, // 允许 html
-    duration: 0, // 显示/隐藏动画时间
-    showOnCreate: true, // 创建时显示
-  };
-
-  // 创建打卡图 tip 单例
-  const tippySingleton = createSingleton([], {
-    moveTransition: "transform 0.1s ease-out",
-  });
-
-  return {
-    provide: {
-      lazyTippy: (e: MouseEvent, placement: "top" | "bottom" = "top") => {
-        const target = e.target as HTMLElement;
-        if (!target) return;
-
-        let instance = tippyInstances.get(target);
-        if (!instance) {
-          instance = tippy(target, {
-            ...options,
-            placement,
-          });
-          tippyInstances.set(target, instance);
-        } else {
-          // 针对虚拟列表处理，没有缓存只更新 tippy 内容
-          instance.setProps({
-            content: target.dataset.tippyContent,
-          });
-        }
-
-        instance.show();
-      },
-
-      calendarTippy: (e: MouseEvent, container?: HTMLElement | null) => {
-        const target = e.target as HTMLElement;
-        const calendarContainer = container || target;
-
-        if (!target) return;
-
-        tippySingleton.setProps({
-          getReferenceClientRect: () => target.getBoundingClientRect(),
-          content: target.dataset.tippyContent,
-        });
-
-        // 鼠标移出整个日历容器隐藏
-        calendarContainer.onmouseleave = () => {
-          tippySingleton.hide();
-        };
-
-        tippySingleton.show(target);
-      },
-    },
-  };
-});
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4c2f3873d..d08386b12 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -238,9 +238,6 @@ importers:
       satori:
         specifier: ^0.10.13
         version: 0.10.13
-      tippy.js:
-        specifier: ^6.3.7
-        version: 6.3.7
       vee-validate:
         specifier: ^4.12.5
         version: 4.13.1(vue@3.4.29(typescript@5.4.5))
@@ -7487,9 +7484,6 @@ packages:
     resolution: {integrity: sha512-q5nmENpTHgiPVd1cJDDc9cVoYN5x4vCvwT3FMilvKPKneCBZAxn2YWQjDF0UMcE9k0Cay1gBiDfTMU0g+mPMQA==}
     engines: {node: '>=14.0.0'}
 
-  tippy.js@6.3.7:
-    resolution: {integrity: sha512-E1d3oP2emgJ9dRQZdf3Kkn0qJgI6ZLpyS5z6ZkY1DF3kaQaBsGZsndEpHwx+eC+tYM41HaSNvNtLx8tU57FzTQ==}
-
   tmp@0.0.33:
     resolution: {integrity: sha512-jRCJlojKnZ3addtTOjdIqoRuPEKBvNXcGYqzO6zWZX8KfKEpnGY5jfggJQ3EjKuu8D4bJRr0y+cYJFmYbImXGw==}
     engines: {node: '>=0.6.0'}
@@ -16726,10 +16720,6 @@ snapshots:
 
   tinyspy@3.0.0: {}
 
-  tippy.js@6.3.7:
-    dependencies:
-      '@popperjs/core': 2.11.8
-
   tmp@0.0.33:
     dependencies:
       os-tmpdir: 1.0.2