refactor: use UTooltip replace tippy

Author: cuixiaorui

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 {

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>

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>

apps/client/components/main/PrevAndNextBtn.vue

@@ -4,29 +4,35 @@
       <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>
 
     <div class="h-12 w-12">
       <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";
 

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;
 }>();

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";

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 | "">("");

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 || "",

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"

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>