From 7df89c72655114fafc0ff677c5841a8872bbe958 Mon Sep 17 00:00:00 2001
From: Hayden <48267247+hayden-fr@users.noreply.github.com>
Date: Sat, 22 Feb 2025 18:10:28 +0800
Subject: [PATCH] feat: add tooltip for model card and folder path (#149)

---
 src/components/DialogExplorer.vue | 20 +++++++++++++++++---
 src/components/DialogManager.vue  | 10 ++++++++--
 src/components/ModelBaseInfo.vue  | 12 +++++++++++-
 src/hooks/model.ts                |  7 +++++++
 4 files changed, 43 insertions(+), 6 deletions(-)

diff --git a/src/components/DialogExplorer.vue b/src/components/DialogExplorer.vue
index dc0294d..8615df4 100644
--- a/src/components/DialogExplorer.vue
+++ b/src/components/DialogExplorer.vue
@@ -68,13 +68,21 @@
             }"
           >
             <ModelCard
-              :model="rowItem"
               v-for="rowItem in item.row"
+              :model="rowItem"
               :key="genModelKey(rowItem)"
               :style="{
                 width: `${cardSize.width}px`,
                 height: `${cardSize.height}px`,
               }"
+              v-tooltip.top="{
+                value: getFullPath(rowItem),
+                disabled: folderPaths.length < 2,
+                autoHide: false,
+                showDelay: 800,
+                hideDelay: 300,
+                pt: { root: { style: { zIndex: 2100, maxWidth: '32rem' } } },
+              }"
               @dblclick="openItem(rowItem, $event)"
               @contextmenu.stop.prevent="openItemContext(rowItem, $event)"
             ></ModelCard>
@@ -137,8 +145,14 @@ const gutter = {
   y: 32,
 }
 
-const { dataTreeList, folderPaths, findFolder, openFolder, openModelDetail } =
-  useModelExplorer()
+const {
+  dataTreeList,
+  folderPaths,
+  findFolder,
+  openFolder,
+  openModelDetail,
+  getFullPath,
+} = useModelExplorer()
 const { cardSize, cardSizeMap, cardSizeFlag, dialog: settings } = useConfig()
 
 const showToolbar = ref(false)
diff --git a/src/components/DialogManager.vue b/src/components/DialogManager.vue
index b7afdc5..976d824 100644
--- a/src/components/DialogManager.vue
+++ b/src/components/DialogManager.vue
@@ -55,7 +55,13 @@
             }"
             class="group/card cursor-pointer !p-0"
             @click="openModelDetail(model)"
-            v-tooltip.top="{ value: model.basename, disabled: showModelName }"
+            v-tooltip.top="{
+              value: getFullPath(model),
+              autoHide: false,
+              showDelay: 800,
+              hideDelay: 300,
+              pt: { root: { style: { zIndex: 2100, maxWidth: '32rem' } } },
+            }"
           >
             <template #name>
               <div
@@ -139,7 +145,7 @@ const {
   dialog: settings,
 } = useConfig()
 
-const { data, folders, openModelDetail } = useModels()
+const { data, folders, openModelDetail, getFullPath } = useModels()
 const { t } = useI18n()
 
 const toolbarContainer = ref<HTMLElement | null>(null)
diff --git a/src/components/ModelBaseInfo.vue b/src/components/ModelBaseInfo.vue
index d98b9e1..a245bbe 100644
--- a/src/components/ModelBaseInfo.vue
+++ b/src/components/ModelBaseInfo.vue
@@ -84,7 +84,17 @@
           <td class="border-r bg-gray-300 px-4 dark:bg-gray-800">
             {{ $t(`info.${item.key}`) }}
           </td>
-          <td class="overflow-hidden text-ellipsis break-all px-4">
+          <td
+            class="overflow-hidden text-ellipsis break-all px-4"
+            v-tooltip.top="{
+              value: item.display,
+              disabled: !['pathIndex', 'basename'].includes(item.key),
+              autoHide: false,
+              showDelay: 800,
+              hideDelay: 300,
+              pt: { root: { style: { zIndex: 2100, maxWidth: '32rem' } } },
+            }"
+          >
             {{ item.display }}
           </td>
         </tr>
diff --git a/src/hooks/model.ts b/src/hooks/model.ts
index a3e72bc..6e74a2b 100644
--- a/src/hooks/model.ts
+++ b/src/hooks/model.ts
@@ -226,6 +226,12 @@ export const useModels = defineStore('models', (store) => {
     })
   }
 
+  function getFullPath(model: BaseModel) {
+    const fullname = genModelFullName(model)
+    const prefixPath = folders.value[model.type]?.[model.pathIndex]
+    return [prefixPath, fullname].filter(Boolean).join('/')
+  }
+
   return {
     folders: folders,
     data: models,
@@ -233,6 +239,7 @@ export const useModels = defineStore('models', (store) => {
     remove: deleteModel,
     update: updateModel,
     openModelDetail: openModelDetail,
+    getFullPath: getFullPath,
   }
 })