Optimize: copy

This commit is contained in:
Lazy 2024-01-10 13:03:40 +08:00
parent 126a37b847
commit 2c7ebd4e99
2 changed files with 23 additions and 18 deletions

View File

@ -1,8 +1,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, computed, onMounted, h } from "vue"; import { ref, computed, onMounted, h } from "vue";
import { t } from "@/lang/i18n"; import { t } from "@/lang/i18n";
import { Modal, message, notification } from "ant-design-vue"; import { Modal, notification } from "ant-design-vue";
import { PlusOutlined } from "@ant-design/icons-vue";
import CardPanel from "@/components/CardPanel.vue"; import CardPanel from "@/components/CardPanel.vue";
import BetweenMenus from "@/components/BetweenMenus.vue"; import BetweenMenus from "@/components/BetweenMenus.vue";
import { useScreen } from "@/hooks/useScreen"; import { useScreen } from "@/hooks/useScreen";
@ -10,7 +9,6 @@ import { arrayFilter } from "@/tools/array";
import { useLayoutCardTools } from "@/hooks/useCardTools"; import { useLayoutCardTools } from "@/hooks/useCardTools";
import { imageList, containerList } from "@/services/apis/envImage"; import { imageList, containerList } from "@/services/apis/envImage";
import type { LayoutCard, ImageInfo, ContainerInfo } from "@/types"; import type { LayoutCard, ImageInfo, ContainerInfo } from "@/types";
import CopyButton from "@/components/CopyButton.vue";
import { useAppRouters } from "@/hooks/useAppRouters"; import { useAppRouters } from "@/hooks/useAppRouters";
import type { AntColumnsType, AntTableCell } from "@/types/ant"; import type { AntColumnsType, AntTableCell } from "@/types/ant";
@ -51,8 +49,7 @@ const imageColumns = computed(() => {
align: "center", align: "center",
title: "ID", title: "ID",
dataIndex: "Id", dataIndex: "Id",
key: "Id", key: "Id"
minWidth: 200
}, },
{ {
align: "center", align: "center",
@ -122,8 +119,7 @@ const containerColumns = computed(() => {
align: "center", align: "center",
title: "ID", title: "ID",
dataIndex: "Id", dataIndex: "Id",
key: "Id", key: "Id"
minWidth: 200
}, },
{ {
align: "center", align: "center",
@ -238,8 +234,15 @@ onMounted(async () => {
> >
<template #bodyCell="{ column, record }: AntTableCell"> <template #bodyCell="{ column, record }: AntTableCell">
<template v-if="column.key === 'Id'"> <template v-if="column.key === 'Id'">
{{ record.Id }} <a-typography-paragraph
<CopyButton :value="record.Id" class="ml-4" type="text" size="small" /> class="mb-0"
:copyable="{
text: record.Id
}"
:ellipsis="{ rows: 1, expandable: false }"
>
{{ isPhone ? "" : record.Id }}
</a-typography-paragraph>
</template> </template>
<template v-if="column.key === 'action'"> <template v-if="column.key === 'action'">
<a-button class="mr-8" size="large" @click="showDetail(record)"> <a-button class="mr-8" size="large" @click="showDetail(record)">
@ -282,8 +285,15 @@ onMounted(async () => {
> >
<template #bodyCell="{ column, record }: AntTableCell"> <template #bodyCell="{ column, record }: AntTableCell">
<template v-if="column.key === 'Id'"> <template v-if="column.key === 'Id'">
{{ record.Id }} <a-typography-paragraph
<CopyButton :value="record.Id" class="ml-4" type="text" size="small" /> class="mb-0"
:copyable="{
text: record.Id
}"
:ellipsis="{ rows: 1, expandable: false }"
>
{{ isPhone ? "" : record.Id }}
</a-typography-paragraph>
</template> </template>
<template v-if="column.key === 'action'"> <template v-if="column.key === 'action'">
<a-button class="mr-8" size="large" @click="showDetail(record)"> <a-button class="mr-8" size="large" @click="showDetail(record)">

View File

@ -22,7 +22,6 @@ import { useLayoutCardTools } from "@/hooks/useCardTools";
import type { LayoutCard } from "@/types"; import type { LayoutCard } from "@/types";
import { arrayFilter } from "@/tools/array"; import { arrayFilter } from "@/tools/array";
import { GLOBAL_INSTANCE_UUID } from "@/config/const"; import { GLOBAL_INSTANCE_UUID } from "@/config/const";
import CopyButton from "@/components/CopyButton.vue";
import NodeDetailDialog from "./NodeDetailDialog.vue"; import NodeDetailDialog from "./NodeDetailDialog.vue";
const nodeDetailDialog = ref<InstanceType<typeof NodeDetailDialog>>(); const nodeDetailDialog = ref<InstanceType<typeof NodeDetailDialog>>();
@ -200,16 +199,12 @@ const nodeOperations = computed(() =>
{{ detail.title }} {{ detail.title }}
</div> </div>
<div v-if="detail.onlyCopy"> <div v-if="detail.onlyCopy">
<CopyButton type="link" size="small" :value="detail.value ?? ''" /> <a-typography-text :copyable="{ text: detail.value ?? '' }"></a-typography-text>
</div> </div>
<div v-else> <div v-else>
<a-tooltip v-if="detail.warn && detail.value"> <a-tooltip v-if="detail.warn && detail.value">
<template #title> <template #title>
{{ {{ t("TXT_CODE_e520908a") }}
t(
"TXT_CODE_e520908a"
)
}}
</template> </template>
<span class="color-danger"><InfoCircleOutlined /> {{ detail.value }}</span> <span class="color-danger"><InfoCircleOutlined /> {{ detail.value }}</span>
</a-tooltip> </a-tooltip>