admin-web/src/modules/overseas-warehouse/components/OrderReferenceText.vue

<script setup lang="ts">
import { computed } from 'vue'
import CopyButton from '@/shared/components/CopyButton.vue'

const props = withDefaults(defineProps<{
  value?: string | null
  emptyText?: string
  copyable?: boolean
  copyLabel?: string
}>(), { value: null, emptyText: '—', copyable: false, copyLabel: '尾程单号' })

const displayValue = computed(() => {
  const value = String(props.value ?? '')
  return value || props.emptyText
})

const fullTitle = computed(() => displayValue.value === props.emptyText ? undefined : displayValue.value)
</script>

<template>
  <span class="order-reference-text" :title="fullTitle"><span class="order-reference-text__value">{{ displayValue }}</span><CopyButton v-if="copyable && fullTitle" class="order-reference-text__copy" :value="displayValue" :label="copyLabel" button-text="" /></span>
</template>

<style scoped>
.order-reference-text {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  vertical-align: bottom;
}
.order-reference-text__value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.order-reference-text__copy { flex: 0 0 auto; margin: 0; padding-inline: 6px; }
</style>