[Fix][UI Next][V1.0.0-Alpha] Fix the problem of not copying. (#9285)

* [Fix][UI Next][V1.0.0-Alpha] Fix the problem of not copying.

* [Fix][UI Next][V1.0.0-Alpha] Fix the warning.

dolphinscheduler-ui-next/src/utils/clipboard.ts

@@ -0,0 +1,31 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export const copy = (text: string): boolean => {
+  const range = document.createRange()
+  const node = document.createTextNode(text)
+  document.body.append(node)
+  range.selectNode(node)
+  window.getSelection()?.addRange(range)
+  let result = false
+  try {
+    result = document.execCommand('copy')
+  } catch (err) {}
+  window.getSelection()?.removeAllRanges()
+  document.body.removeChild(node)
+  return result
+}

dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/use-text-copy.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { useClipboard } from '@vueuse/core'
+import { copy } from '@/utils/clipboard'
 import { useMessage } from 'naive-ui'
 import { useI18n } from 'vue-i18n'
 
@@ -24,12 +24,11 @@ import { useI18n } from 'vue-i18n'
  */
 export function useTextCopy() {
   const { t } = useI18n()
-  const { copy } = useClipboard()
   const message = useMessage()
   const copyText = (text: string) => {
-    copy(text).then(() => {
+    if (copy(text)) {
       message.success(t('project.dag.copy_success'))
-    })
+    }
   }
   return {
     copy: copyText

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

@@ -102,3 +102,16 @@
   overflow: hidden;
   word-break: break-all;
 }
+
+.workflow-name {
+  :global {
+    div:first-child {
+      width: calc(100% - 32px);
+
+      .n-button,
+      .n-button__content {
+        width: 100%;
+      }
+    }
+  }
+}

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

@@ -19,9 +19,8 @@ import _ from 'lodash'
 import { h, ref, reactive } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
-import type { Router } from 'vue-router'
-import type { TableColumns, RowKey } from 'naive-ui/es/data-table/src/interface'
 import { useAsyncState } from '@vueuse/core'
+import { useTextCopy } from '../components/dag/use-text-copy'
 import {
   batchCopyByCodes,
   batchDeleteByCodes,
@@ -32,19 +31,22 @@ import {
 } from '@/service/modules/process-definition'
 import TableAction from './components/table-action'
 import styles from './index.module.scss'
-import { NTag } from 'naive-ui'
+import { NTag, NSpace, NIcon, NButton, NEllipsis } from 'naive-ui'
+import { CopyOutlined } from '@vicons/antd'
 import ButtonLink from '@/components/button-link'
 import {
   COLUMN_WIDTH_CONFIG,
   calculateTableWidth,
   DefaultTableWidth
 } from '@/utils/column-width-config'
 import type { IDefinitionParam } from './types'
+import type { Router } from 'vue-router'
+import type { TableColumns, RowKey } from 'naive-ui/es/data-table/src/interface'
 
 export function useTable() {
   const { t } = useI18n()
   const router: Router = useRouter()
-
+  const { copy } = useTextCopy()
   const variables = reactive({
     columns: [],
     tableWidth: DefaultTableWidth,
@@ -82,18 +84,43 @@ export function useTable() {
         title: t('project.workflow.workflow_name'),
         key: 'name',
         className: 'workflow-name',
-        ...COLUMN_WIDTH_CONFIG['name'],
+        width: 200,
         render: (row) =>
           h(
-            ButtonLink,
+            NSpace,
             {
-              onClick: () =>
-                void router.push({
-                  name: 'workflow-definition-detail',
-                  params: { code: row.code }
-                })
+              justify: 'space-between',
+              wrap: false,
+              class: styles['workflow-name']
             },
-            { default: () => row.name }
+            {
+              default: () => [
+                h(
+                  ButtonLink,
+                  {
+                    onClick: () =>
+                      void router.push({
+                        name: 'workflow-definition-detail',
+                        params: { code: row.code }
+                      })
+                  },
+                  {
+                    default: () => h(NEllipsis, null, () => row.name)
+                  }
+                ),
+                h(
+                  NButton,
+                  {
+                    quaternary: true,
+                    circle: true,
+                    type: 'info',
+                    size: 'tiny',
+                    onClick: () => void copy(row.name)
+                  },
+                  { icon: () => h(NIcon, { size: 16 }, () => h(CopyOutlined)) }
+                )
+              ]
+            }
           )
       },
       {