From 9d68b178d9d2143d93c2a25fe97ebda560126f61 Mon Sep 17 00:00:00 2001 From: Amy0104 <97265214+Amy0104@users.noreply.github.com> Date: Wed, 30 Mar 2022 18:48:44 +0800 Subject: [PATCH] [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. --- .../src/utils/clipboard.ts | 31 +++++++++++ .../workflow/components/dag/use-text-copy.ts | 7 ++- .../workflow/definition/index.module.scss | 13 +++++ .../projects/workflow/definition/use-table.ts | 51 ++++++++++++++----- 4 files changed, 86 insertions(+), 16 deletions(-) create mode 100644 dolphinscheduler-ui-next/src/utils/clipboard.ts diff --git a/dolphinscheduler-ui-next/src/utils/clipboard.ts b/dolphinscheduler-ui-next/src/utils/clipboard.ts new file mode 100644 index 0000000000..e4f5e7f420 --- /dev/null +++ b/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 +} 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 b75b39ed5d..33b6f22c3b 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 76e975dd4e..2c40864b2d 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 375a295665..1331e67d5d 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)) } + ) + ] + } ) }, {