功能:优化用户地址账户名称展示

This commit is contained in:
czl231
2026-08-11 21:33:20 +08:00
parent e375e9851b
commit 8d6ffca1e2
9 changed files with 281 additions and 22 deletions

View File

@@ -0,0 +1,76 @@
<!-- 功能描述列表以关系名称为主展示并提供完整唯一标识的悬停查看与复制版本v1.0.0 -->
<template>
<div class="relation-name-text">
<a-tooltip :content="`用户唯一标识:${identity}`">
<span class="relation-name">{{ displayName }}</span>
</a-tooltip>
<a-tooltip content="复制用户唯一标识">
<button
class="copy-button"
type="button"
:aria-label="`复制用户唯一标识 ${identity}`"
@click.stop="copyIdentity"
>
<icon-copy />
</button>
</a-tooltip>
</div>
</template>
<script setup lang="ts">
import { Message } from '@arco-design/web-vue';
import { IconCopy } from '@arco-design/web-vue/es/icon';
import { computed } from 'vue';
const props = defineProps<{ name: string; identity: string }>();
const displayName = computed(() => props.name || props.identity);
/** 复制完整用户唯一标识,并给出明确操作反馈。 */
async function copyIdentity() {
try {
await navigator.clipboard.writeText(props.identity);
Message.success('用户唯一标识已复制');
} catch {
Message.error('复制失败,请从悬浮提示中复制');
}
}
</script>
<style scoped>
.relation-name-text {
display: flex;
gap: 6px;
align-items: center;
min-width: 0;
}
.relation-name {
min-width: 0;
overflow: hidden;
color: var(--color-text-1);
text-overflow: ellipsis;
white-space: nowrap;
}
.copy-button {
display: inline-flex;
flex: 0 0 auto;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
padding: 0;
color: rgb(var(--primary-6));
font-size: 14px;
background: transparent;
border: 0;
border-radius: 4px;
cursor: pointer;
}
.copy-button:hover,
.copy-button:focus-visible {
background: var(--color-fill-2);
outline: none;
}
</style>