[Fix #9925]: fix ellipsis bug in table column (#9936)

* fix: fix ellipsis bug in table column

* fix ellipsis bug in table column

dolphinscheduler-ui/src/common/column-width-config.ts

@@ -28,6 +28,12 @@ export const COLUMN_WIDTH_CONFIG = {
   index: {
     width: 50
   },
+  linkName: {
+    width: 200
+  },
+  linkEllipsis: {
+    style: 'max-width: 180px;line-height: 1.5'
+  },
   name: {
     width: 200,
     ellipsis: {

dolphinscheduler-ui/src/views/projects/list/use-table.ts

@@ -76,13 +76,8 @@ export function useTable() {
         title: t('project.list.project_name'),
         key: 'name',
         className: 'project-name',
-        ...COLUMN_WIDTH_CONFIG['name'],
+        ...COLUMN_WIDTH_CONFIG['linkName'],
         render: (row: { code: string; name: any }) =>
-          h(
-            NEllipsis,
-            { style: 'max-width: 200px; color: #2080f0' },
-            {
-              default: () =>
           h(
             ButtonLink,
             {
@@ -90,9 +85,13 @@ export function useTable() {
                 router.push({ path: `/projects/${row.code}` })
               }
             },
-                  { default: () => row.name }
-                ),
-              tooltip: () => row.name
+            {
+              default: () =>
+                h(
+                  NEllipsis,
+                  COLUMN_WIDTH_CONFIG['linkEllipsis'],
+                  () => row.name
+                )
             }
           )
       },

dolphinscheduler-ui/src/views/projects/task/definition/use-table.ts

@@ -17,7 +17,15 @@
 
 import { useAsyncState } from '@vueuse/core'
 import { reactive, h, ref } from 'vue'
-import { NButton, NIcon, NPopconfirm, NSpace, NTag, NTooltip } from 'naive-ui'
+import {
+  NButton,
+  NIcon,
+  NPopconfirm,
+  NSpace,
+  NTag,
+  NTooltip,
+  NEllipsis
+} from 'naive-ui'
 import ButtonLink from '@/components/button-link'
 import { useI18n } from 'vue-i18n'
 import {
@@ -58,15 +66,22 @@ export function useTable(onEdit: Function) {
       {
         title: t('project.task.task_name'),
         key: 'taskName',
+        ...COLUMN_WIDTH_CONFIG['linkName'],
         render: (row: IRecord) =>
           h(
             ButtonLink,
             {
               onClick: () => void onEdit(row, true)
             },
-            { default: () => row.taskName }
-          ),
-        ...COLUMN_WIDTH_CONFIG['name']
+            {
+              default: () =>
+                h(
+                  NEllipsis,
+                  COLUMN_WIDTH_CONFIG['linkEllipsis'],
+                  () => row.taskName
+                )
+            }
+          )
       },
       {
         title: t('project.task.workflow_name'),

dolphinscheduler-ui/src/views/projects/task/instance/use-table.ts

@@ -23,7 +23,7 @@ import {
   forceSuccess,
   downloadLog
 } from '@/service/modules/task-instances'
-import { NButton, NIcon, NSpace, NTooltip, NSpin } from 'naive-ui'
+import { NButton, NIcon, NSpace, NTooltip, NSpin, NEllipsis } from 'naive-ui'
 import ButtonLink from '@/components/button-link'
 import {
   AlignLeftOutlined,
@@ -86,7 +86,7 @@ export function useTable() {
       {
         title: t('project.task.workflow_instance'),
         key: 'processInstanceName',
-        ...COLUMN_WIDTH_CONFIG['name'],
+        ...COLUMN_WIDTH_CONFIG['linkName'],
         render: (row: {
           processInstanceId: number
           processInstanceName: string
@@ -101,7 +101,14 @@ export function useTable() {
                   query: { code: projectCode }
                 })
             },
-            { default: () => row.processInstanceName }
+            {
+              default: () =>
+                h(
+                  NEllipsis,
+                  COLUMN_WIDTH_CONFIG['linkEllipsis'],
+                  () => row.processInstanceName
+                )
+            }
           )
       },
       {

dolphinscheduler-ui/src/views/projects/workflow/instance/use-table.ts

@@ -21,6 +21,7 @@ import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
 import ButtonLink from '@/components/button-link'
 import { RowKey } from 'naive-ui/lib/data-table/src/interface'
+import { NEllipsis } from 'naive-ui'
 import {
   queryProcessInstanceListPaging,
   deleteProcessInstanceById,
@@ -79,7 +80,7 @@ export function useTable() {
       {
         title: t('project.workflow.workflow_name'),
         key: 'name',
-        ...COLUMN_WIDTH_CONFIG['name'],
+        ...COLUMN_WIDTH_CONFIG['linkName'],
         className: 'workflow-name',
         render: (row: IWorkflowInstance) =>
           h(
@@ -92,7 +93,14 @@ export function useTable() {
                   query: { code: row.processDefinitionCode }
                 })
             },
-            { default: () => row.name }
+            {
+              default: () =>
+                h(
+                  NEllipsis,
+                  COLUMN_WIDTH_CONFIG['linkEllipsis'],
+                  () => row.name
+                )
+            }
           )
       },
       {

dolphinscheduler-ui/src/views/resource/file/table/use-table.ts

@@ -23,6 +23,7 @@ import { useFileStore } from '@/store/file/file'
 import TableAction from './table-action'
 import { IRenameFile } from '../types'
 import ButtonLink from '@/components/button-link'
+import { NEllipsis } from 'naive-ui'
 import {
   COLUMN_WIDTH_CONFIG,
   calculateTableWidth,
@@ -57,14 +58,17 @@ export function useTable(renameResource: IRenameFile, updateList: () => void) {
     {
       title: t('resource.file.name'),
       key: 'name',
-      ...COLUMN_WIDTH_CONFIG['name'],
+      ...COLUMN_WIDTH_CONFIG['linkName'],
       render: (row) =>
         h(
           ButtonLink,
           {
             onClick: () => void goSubFolder(router, row)
           },
-          { default: () => row.name }
+          {
+            default: () =>
+              h(NEllipsis, COLUMN_WIDTH_CONFIG['linkEllipsis'], () => row.name)
+          }
         )
     },
     {

dolphinscheduler-ui/src/views/resource/udf/resource/use-table.ts

@@ -21,6 +21,7 @@ import { useRouter } from 'vue-router'
 import { bytesToSize } from '@/common/common'
 import { useFileStore } from '@/store/file/file'
 import type { Router } from 'vue-router'
+import { NEllipsis } from 'naive-ui'
 import type { TableColumns } from 'naive-ui/es/data-table/src/interface'
 import { NSpace, NTooltip, NButton, NPopconfirm } from 'naive-ui'
 import { EditOutlined, DeleteOutlined, DownloadOutlined } from '@vicons/antd'
@@ -81,7 +82,7 @@ export function useTable() {
       {
         title: t('resource.udf.udf_source_name'),
         key: 'alias',
-        width: 220,
+        ...COLUMN_WIDTH_CONFIG['linkName'],
         render: (row) => {
           return !row.directory
             ? row.alias
@@ -90,7 +91,14 @@ export function useTable() {
                 {
                   onClick: () => void goSubFolder(router, row)
                 },
-                { default: () => row.alias }
+                {
+                  default: () =>
+                    h(
+                      NEllipsis,
+                      COLUMN_WIDTH_CONFIG['linkEllipsis'],
+                      () => row.alias
+                    )
+                }
               )
         }
       },