优化，贴图

src/modules/quickpanel/QuickPanel.vue

@@ -6,6 +6,7 @@ import { getCurrentWindow, Effect, EffectState } from '@tauri-apps/api/window'
 import { commands } from '@/lib/bindings'
 import { Search, Command, Loader2, CornerDownLeft, Calculator, Globe, Lock, ChevronRight, Terminal, History, FolderOpen, Ruler, Trash2 } from '@lucide/vue'
 import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '@/components/ui/accordion'
+import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from '@/components/ui/tooltip'
 import { aggregateSearch, loadAppIconsForResults, recordHistoryItem, getMoreHistoryItems, getMoreHistoryCount, setFileIndexReady, type QPItem, type QPSubAction } from './providers'
 import { EVENTS, STORAGE_KEYS } from '@/lib/constants'
 
@@ -429,9 +430,10 @@ onUnmounted(() => {
 
 <template>
   <div class="qp-root flex flex-col h-screen w-screen" @keydown="onKeydown">
+    <TooltipProvider>
     <!-- 搜索输入 -->
     <div class="qp-input-wrap">
-      <Search class="h-4 w-4 text-muted-foreground shrink-0" />
+      <Search class="size-4 text-muted-foreground shrink-0" />
       <input
         ref="inputRef"
         v-model="query"
@@ -446,16 +448,16 @@ onUnmounted(() => {
     <!-- 结果区 -->
     <div class="qp-results">
       <div v-if="loading && !hasResults()" class="qp-empty">
-        <Loader2 class="h-6 w-6 animate-spin mb-2" />
+        <Loader2 class="size-6 animate-spin mb-2" />
         <p class="text-sm">搜索中…</p>
       </div>
       <div v-else-if="!hasResults() && query.trim()" class="qp-empty">
-        <Search class="h-10 w-10 mb-3 opacity-40" />
+        <Search class="size-10 mb-3 opacity-40" />
         <p class="text-sm">无匹配结果</p>
         <p class="text-xs mt-1 opacity-60">按 Enter 在搜索引擎中查找</p>
       </div>
       <div v-else-if="!hasResults()" class="qp-empty">
-        <Command class="h-10 w-10 mb-3 opacity-40" />
+        <Command class="size-10 mb-3 opacity-40" />
         <p class="text-sm">输入关键词开始搜索</p>
         <p class="text-xs mt-1 opacity-60">命令 · 计算 · 系统 · 网页</p>
       </div>
@@ -477,7 +479,7 @@ onUnmounted(() => {
             <component
               v-else
               :is="groupIcon(item.group)"
-              class="h-4 w-4 text-muted-foreground shrink-0"
+              class="size-4 text-muted-foreground shrink-0"
               :class="isAppLike(item) ? '' : 'mt-0.5'"
             />
             <div class="flex-1 min-w-0 flex" :class="isAppLike(item) ? 'items-center' : 'flex-col'">
@@ -522,7 +524,7 @@ onUnmounted(() => {
                 <component
                   v-else
                   :is="groupIcon(item.group)"
-                  class="h-4 w-4 text-muted-foreground shrink-0"
+                  class="size-4 text-muted-foreground shrink-0"
                   :class="isAppLike(item) ? '' : 'mt-0.5'"
                 />
                 <div class="flex-1 min-w-0 flex" :class="isAppLike(item) ? 'items-center' : 'flex-col'">
@@ -552,7 +554,7 @@ onUnmounted(() => {
             <component
               v-else
               :is="groupIcon(item.group)"
-              class="h-4 w-4 text-muted-foreground shrink-0"
+              class="size-4 text-muted-foreground shrink-0"
               :class="isAppLike(item) ? '' : 'mt-0.5'"
             />
             <div class="flex-1 min-w-0 flex" :class="isAppLike(item) ? 'items-center' : 'flex-col'">
@@ -605,10 +607,15 @@ onUnmounted(() => {
     <div v-if="pendingDelete" class="qp-confirm-mask" @click.self="cancelDelete">
       <div class="qp-confirm-box" role="alertdialog" aria-modal="true">
         <div class="qp-confirm-head">
-          <Trash2 class="h-4 w-4 shrink-0 text-destructive" />
+          <Trash2 class="size-4 shrink-0 text-destructive" />
           <p class="qp-confirm-title">确定删除？</p>
         </div>
-        <p class="qp-confirm-name truncate" :title="pendingDelete.name">{{ pendingDelete.name }}</p>
+        <Tooltip>
+          <TooltipTrigger as-child>
+            <p class="qp-confirm-name truncate">{{ pendingDelete.name }}</p>
+          </TooltipTrigger>
+          <TooltipContent>{{ pendingDelete.name }}</TooltipContent>
+        </Tooltip>
         <p class="qp-confirm-tip">将移动到回收站{{ pendingDelete.isDir ? '（含所有子内容）' : '' }}，删除后可在回收站中还原。</p>
         <div class="flex items-center justify-end gap-2 mt-4">
           <button class="qp-confirm-btn" @click="cancelDelete">取消</button>
@@ -616,6 +623,7 @@ onUnmounted(() => {
         </div>
       </div>
     </div>
+    </TooltipProvider>
   </div>
 </template>