[Fix][UI Next][V1.0.0-Alpha] Fix the display of the project name is too long, causing UI confusion. (#8669)

* [Fix][UI Next][V1.0.0-Alpha] Fix the display of the project name is too long, causing UI confusion.

* [Fix][UI Next][V1.0.0-Alpha] Fix the display of the project name is too long, causing UI confusion.

dolphinscheduler-ui-next/src/views/projects/list/index.module.scss

@@ -41,13 +41,3 @@
     justify-content: center;
   }
 }
-
-.links {
-  color: dodgerblue;
-  text-decoration: none;
-  cursor: pointer;
-
-  &:hover {
-    text-decoration: underline;
-  }
-}

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

@@ -21,12 +21,12 @@ import { useAsyncState } from '@vueuse/core'
 import { queryProjectListPaging } from '@/service/modules/projects'
 import { parseISO, format } from 'date-fns'
 import { useRouter } from 'vue-router'
+import { useMenuStore } from '@/store/menu/menu'
+import { NEllipsis } from 'naive-ui'
 import TableAction from './components/table-action'
-import styles from './index.module.scss'
 import type { Router } from 'vue-router'
 import type { TableColumns } from 'naive-ui/es/data-table/src/interface'
 import type { ProjectRes } from '@/service/modules/projects/types'
-import { useMenuStore } from '@/store/menu/menu'
 
 export function useTable(
   updateProjectItem = (
@@ -47,18 +47,25 @@ export function useTable(
       key: 'name',
       render: (row) =>
         h(
-          'a',
-          {
-            class: styles.links,
-            onClick: () => {
-              menuStore.setProjectCode(row.code)
-              router.push({ path: `/projects/${row.code}` })
-            }
-          },
+          NEllipsis,
+          { style: 'max-width: 200px; color: #2080f0' },
           {
-            default: () => {
-              return row.name
-            }
+            default: () =>
+              h(
+                'a',
+                {
+                  onClick: () => {
+                    menuStore.setProjectCode(row.code)
+                    router.push({ path: `/projects/${row.code}` })
+                  }
+                },
+                {
+                  default: () => {
+                    return row.name
+                  }
+                }
+              ),
+            tooltip: () => row.name
           }
         )
     },