perf: 不要在大量遍历中使用 tooltip, 很容易把页面卡死

yubaoquan · Apr 14, 2024 · 487ccf8 · 487ccf8
1 parent 5572f85
commit 487ccf8
Show file tree

Hide file tree

Showing 5 changed files with 56 additions and 17 deletions.
diff --git a/src/renderer/src/components/common-header/common-header.vue b/src/renderer/src/components/common-header/common-header.vue
@@ -72,7 +72,6 @@ const languages = ref<any[]>([
 
 onMounted(async () => {
   const isDarkFromMain = await window.api.getIsDark();
-  console.info(`isDarkFromMain: ${isDarkFromMain}`);
   setTheme(isDarkFromMain);
 });
 

diff --git a/src/renderer/src/components/file-list/file-list.vue b/src/renderer/src/components/file-list/file-list.vue
@@ -4,15 +4,12 @@
       <v-toolbar color="purple" density="compact">
         <v-checkbox-btn
           v-model="allSelected"
+          class="grow-0"
           @update:model-value="handleSelectAll"
         ></v-checkbox-btn>
 
         <v-toolbar-title>
-          <v-tooltip :text="hash" location="bottom">
-            <template #activator="{ props: prps }">
-              <div v-bind="prps">{{ hash.slice(0, 20) }}</div>
-            </template>
-          </v-tooltip>
+          <div :title="hash">{{ hash.slice(0, 20) }}</div>
         </v-toolbar-title>
         <v-spacer></v-spacer>
         <v-btn
@@ -40,10 +37,7 @@
           </template>
 
           <v-list-item-title>{{ file.name }}</v-list-item-title>
-          <v-list-item-subtitle
-            >{{ file.path }}
-            <v-tooltip location="top" activator="parent">{{ file.path }}</v-tooltip>
-          </v-list-item-subtitle>
+          <v-list-item-subtitle :title="file.path">{{ file.path }} </v-list-item-subtitle>
 
           <template #append>
             <v-btn

diff --git a/src/renderer/src/components/scan-progress/scan-progress.vue b/src/renderer/src/components/scan-progress/scan-progress.vue
@@ -12,22 +12,30 @@
       <v-expansion-panels model-value="detail">
         <v-expansion-panel title="查看详情" value="detail">
           <v-expansion-panel-text>
-            <div class="flex justify-between items-start">
+            <div class="flex justify-between items-start max-h-96 overflow-y-auto">
               <div class="grow shrink-0 w-1/2 p-2">
                 <div>{{ $t('dutor.scanning') }} {{ scanningFiles.length }}</div>
                 <div class="scan-list">
-                  <div v-for="file in scanningFiles" :key="file.path" class="truncate">
+                  <div
+                    v-for="file in scanningFiles"
+                    :key="file.path"
+                    class="truncate"
+                    :title="file.path"
+                  >
                     {{ file.path }}
-                    <v-tooltip location="top" activator="parent">{{ file.path }}</v-tooltip>
                   </div>
                 </div>
               </div>
               <div class="grow shrink-0 w-1/2 p-2">
                 <div>{{ $t('dutor.finished') }} {{ finishedFiles.length }}</div>
                 <div class="scan-list">
-                  <div v-for="file in finishedFiles" :key="file.path" class="truncate">
+                  <div
+                    v-for="file in finishedFiles"
+                    :key="file.path"
+                    class="truncate"
+                    :title="file.path"
+                  >
                     {{ file.path }}
-                    <v-tooltip location="top" activator="parent">{{ file.path }}</v-tooltip>
                   </div>
                 </div>
               </div>

diff --git a/src/renderer/src/components/scan-progress/use-progress.ts b/src/renderer/src/components/scan-progress/use-progress.ts
@@ -22,12 +22,40 @@ export default () => {
     scanningFiles.value = scanningFiles.value.filter((item) => item.path !== file.path);
   };
 
+  /**
+   * @description: Start fake data for testing
+   */
+  const startFakeData = () => {
+    const fakeData = Array.from({ length: 2000 }, (_, index) => ({
+      path: `fake-path-${index}`,
+      size: 1024,
+      hash: `fake-hash-${index}`,
+    }));
+
+    allFiles.value = fakeData;
+    let scanningCount = 0;
+
+    const handle = setInterval(() => {
+      if (scanningCount < fakeData.length) {
+        const pushCountPerTime = 100;
+        const fd = fakeData.slice(scanningCount, scanningCount + pushCountPerTime);
+
+        scanningFiles.value.push(...fd);
+        scanningCount += pushCountPerTime;
+        console.info(`herex`, fd);
+      } else {
+        clearInterval(handle);
+      }
+    }, 500);
+  };
+
   return {
     allFiles,
     scanningFiles,
     finishedFiles,
     resetProgress,
     initProgress,
     updateProgress,
+    startFakeData,
   };
 };
diff --git a/src/renderer/src/views/dutor-view.vue b/src/renderer/src/views/dutor-view.vue
@@ -1,4 +1,6 @@
 <template>
+  <!-- <div @click="startFakeData">test</div> -->
+
   <v-container class="bg-surface-variant" fluid>
     <v-snackbar v-model="showMessage" location="top" :timeout="2000" rounded>
       {{ toastMessage }}
@@ -80,8 +82,16 @@ type HashItem = {
   files: FileItem[];
 };
 
-const { allFiles, scanningFiles, finishedFiles, resetProgress, initProgress, updateProgress } =
-  useScanProgress();
+const {
+  allFiles,
+  scanningFiles,
+  finishedFiles,
+  resetProgress,
+  initProgress,
+  updateProgress,
+
+  // startFakeData,
+} = useScanProgress();
 const targetFolder = ref<string>('');
 const isScanning = ref(false);
 const showMessage = ref(false);