优化

src/shared/components/LineClampText.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+
+const props = withDefaults(defineProps<{
+  content?: string | number | null
+  lines?: 1 | 2 | 3
+}>(), {
+  content: '',
+  lines: 1,
+})
+
+const text = computed(() => props.content === null || props.content === undefined ? '' : String(props.content))
+const lineStyle = computed(() => ({ '--cc-line-clamp': props.lines }))
+const tooltipVisible = ref(false)
+
+function showTooltip() {
+  if (text.value) tooltipVisible.value = true
+}
+
+function hideTooltip() {
+  tooltipVisible.value = false
+}
+</script>
+
+<template>
+  <el-tooltip
+    :content="text || '—'"
+    :disabled="!text"
+    :visible="Boolean(text) && tooltipVisible"
+    placement="top-start"
+  >
+    <span
+      class="line-clamp-text"
+      :style="lineStyle"
+      :tabindex="text ? 0 : undefined"
+      :aria-label="text || '—'"
+      @mouseenter="showTooltip"
+      @mouseleave="hideTooltip"
+      @focus="showTooltip"
+      @blur="hideTooltip"
+    >{{ text || '—' }}</span>
+  </el-tooltip>
+</template>
+
+<style scoped>
+.line-clamp-text { display: -webkit-box; min-width: 0; overflow: hidden; line-height: 1.5; -webkit-box-orient: vertical; -webkit-line-clamp: var(--cc-line-clamp); overflow-wrap: anywhere; white-space: pre-line; }
+.line-clamp-text:focus-visible { outline: 2px solid color-mix(in srgb, var(--cc-primary) 45%, transparent); outline-offset: 2px; }
+</style>