feat: add tooltip for model card and folder path (#149)

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)

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)

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>

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,
   }
 })