You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@dolphinscheduler.apache.org by so...@apache.org on 2022/03/30 10:48:54 UTC
[dolphinscheduler] branch dev updated: [Fix][UI Next][V1.0.0-Alpha] Fix the problem of not copying. (#9285)
This is an automated email from the ASF dual-hosted git repository.
songjian pushed a commit to branch dev
in repository https://gitbox.apache.org/repos/asf/dolphinscheduler.git
The following commit(s) were added to refs/heads/dev by this push:
new 9d68b17 [Fix][UI Next][V1.0.0-Alpha] Fix the problem of not copying. (#9285)
9d68b17 is described below
commit 9d68b178d9d2143d93c2a25fe97ebda560126f61
Author: Amy0104 <97...@users.noreply.github.com>
AuthorDate: Wed Mar 30 18:48:44 2022 +0800
[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.
---
.../dag/use-text-copy.ts => utils/clipboard.ts} | 32 ++++++--------
.../workflow/components/dag/use-text-copy.ts | 7 ++-
.../projects/workflow/definition/index.module.scss | 13 ++++++
.../projects/workflow/definition/use-table.ts | 51 +++++++++++++++++-----
4 files changed, 68 insertions(+), 35 deletions(-)
diff --git a/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/use-text-copy.ts b/dolphinscheduler-ui-next/src/utils/clipboard.ts
similarity index 64%
copy from dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/use-text-copy.ts
copy to dolphinscheduler-ui-next/src/utils/clipboard.ts
index b75b39e..e4f5e7f 100644
--- a/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/use-text-copy.ts
+++ b/dolphinscheduler-ui-next/src/utils/clipboard.ts
@@ -15,23 +15,17 @@
* limitations under the License.
*/
-import { useClipboard } from '@vueuse/core'
-import { useMessage } from 'naive-ui'
-import { useI18n } from 'vue-i18n'
-
-/**
- * Text copy with success message
- */
-export function useTextCopy() {
- const { t } = useI18n()
- const { copy } = useClipboard()
- const message = useMessage()
- const copyText = (text: string) => {
- copy(text).then(() => {
- message.success(t('project.dag.copy_success'))
- })
- }
- return {
- copy: copyText
- }
+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
}
diff --git a/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/use-text-copy.ts b/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/use-text-copy.ts
index b75b39e..33b6f22 100644
--- a/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/use-text-copy.ts
+++ b/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
diff --git a/dolphinscheduler-ui-next/src/views/projects/workflow/definition/index.module.scss b/dolphinscheduler-ui-next/src/views/projects/workflow/definition/index.module.scss
index 76e975d..2c40864 100644
--- a/dolphinscheduler-ui-next/src/views/projects/workflow/definition/index.module.scss
+++ b/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%;
+ }
+ }
+ }
+}
diff --git a/dolphinscheduler-ui-next/src/views/projects/workflow/definition/use-table.ts b/dolphinscheduler-ui-next/src/views/projects/workflow/definition/use-table.ts
index 375a295..1331e67 100644
--- a/dolphinscheduler-ui-next/src/views/projects/workflow/definition/use-table.ts
+++ b/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,7 +31,8 @@ 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,
@@ -40,11 +40,13 @@ import {
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)) }
+ )
+ ]
+ }
)
},
{