feat(client): add title to text-overflow: ellipsis, fix #243

koishijs · Nov 5, 2023 · a31d2bb · a31d2bb
1 parent 477b7be
commit a31d2bb
Show file tree

Hide file tree

Showing 7 changed files with 20 additions and 15 deletions.
diff --git a/packages/client/client/components/layout/tab-item.vue b/packages/client/client/components/layout/tab-item.vue
@@ -1,5 +1,6 @@
 <template>
   <div class="k-tab-item k-tab-menu-item"
+    :title="label"
     :class="{ active: label === modelValue }"
     @click="$emit('update:modelValue', label)">
     <slot>{{ label }}</slot>

diff --git a/packages/market/client/components/package.vue b/packages/market/client/components/package.vue
@@ -6,7 +6,7 @@
       </div>
       <div class="main">
         <h2 class="top">
-          <span class="title">{{ data.shortname }}</span>
+          <span class="title" :title="data.shortname">{{ data.shortname }}</span>
           <el-tooltip v-if="badge" placement="right" :content="t(`badge.${badge.type}`)">
             <span :class="['icon', badge.type]" @click.stop.prevent="$emit('query', badge.query)">
               <market-icon :name="badge.type"></market-icon>
@@ -25,7 +25,7 @@
         <slot name="action"></slot>
       </div>
     </div>
-    <k-markdown inline class="desc" :source="data.manifest ? tt(data.manifest.description) : data.package.description ?? ''"></k-markdown>
+    <k-markdown inline class="desc" :source="tt(data.manifest?.description) ?? ''"></k-markdown>
     <div class="footer">
       <el-tooltip :content="timeAgo(data.updatedAt)" placement="top">
         <a class="shrink" target="_blank" :href="data.package.links.npm">

diff --git a/packages/market/package.json b/packages/market/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@koishijs/market",
   "description": "Market UI for Koishi",
-  "version": "4.1.6",
+  "version": "4.1.7",
   "main": "client/index.ts",
   "files": [
     "client"

diff --git a/plugins/config/client/components/tree.vue b/plugins/config/client/components/tree.vue
@@ -24,13 +24,8 @@
       @node-collapse="handleCollapse"
       #="{ node }">
       <div class="item">
-        <div class="label">
-          <template v-if="node.data.name === 'group'">
-            {{ '分组：' + (node.label || node.data.alias) }}
-          </template>
-          <template v-else>
-            {{ node.label || node.data.name || '待添加' }}
-          </template>
+        <div class="label" :title="getLabel(node)">
+          {{ getLabel(node) }}
         </div>
         <div class="right"></div>
       </div>
@@ -63,12 +58,21 @@ function filterNode(value: string, data: Tree) {
 
 interface Node {
   data: Tree
+  label?: string
   parent: Node
   expanded: boolean
   isLeaf: boolean
   childNodes: Node[]
 }
 
+function getLabel(node: Node) {
+  if (node.data.name === 'group') {
+    return '分组：' + (node.label || node.data.alias)
+  } else {
+    return node.label || node.data.name || '待添加'
+  }
+}
+
 function allowDrag(node: Node) {
   return node.data.path !== ''
 }

diff --git a/plugins/explorer/client/index.vue b/plugins/explorer/client/index.vue
@@ -28,7 +28,7 @@
           @node-drop="handleDrop"
           #="{ node }">
           <div class="item">
-            <div class="label">
+            <div class="label" :title="node.data.name">
               <input
                 v-focus
                 v-if="node.data.filename === renaming"

diff --git a/plugins/market/package.json b/plugins/market/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@koishijs/plugin-market",
   "description": "Manage your bots and plugins with console",
-  "version": "2.4.1",
+  "version": "2.4.2",
   "main": "lib/node/index.js",
   "types": "lib/index.d.ts",
   "exports": {
@@ -69,7 +69,7 @@
   },
   "devDependencies": {
     "@koishijs/client": "^5.18.3",
-    "@koishijs/market": "^4.1.6",
+    "@koishijs/market": "^4.1.7",
     "@koishijs/plugin-config": "^2.4.5",
     "@types/semver": "^7.5.4",
     "@types/throttle-debounce": "^2.1.0",

diff --git a/plugins/status/client/bots/preview.vue b/plugins/status/client/bots/preview.vue
@@ -6,8 +6,8 @@
       </el-tooltip>
     </div>
     <div class="info">
-      <div><k-icon name="robot"/>{{ data.user.name }}</div>
-      <div><k-icon name="platform"/>{{ data.platform }}</div>
+      <div :title="data.user.name"><k-icon name="robot"/>{{ data.user.name }}</div>
+      <div :title="data.platform"><k-icon name="platform"/>{{ data.platform }}</div>
       <div class="cur-frequency">
         <span style="margin-right: 8px">
           <k-icon name="arrow-up"/>