fix: BsUi-文字提示控件、描述列表修改

src/components/BsUi/Descriptions/index.vue

@@ -36,7 +36,7 @@
           </template>
           <template v-if="!item.valueSlot">
             <div class="dsc-value">
-              {{ item.value }}
+              <bs-ellipsis-text :text="item.value" />
             </div>
           </template>
         </a-descriptions-item>
@@ -47,6 +47,7 @@
 <script setup>
   import { isEmpty } from 'lodash';
   import {ref, useSlots} from 'vue';
+  import {BsEllipsisText} from "/@/components/BsUi/index.js";
 
   const props = defineProps({
     title: {
@@ -111,6 +112,7 @@
       color: #6c6c6c;
     }
     .dsc-value {
+      width: 100%;
       font-size: 14px;
       color: #000;
       font-weight: 500;

src/components/BsUi/EllipsisText/index.vue

@@ -0,0 +1,68 @@
+<template>
+  <span ref="textRef" class="ellipsis-container">
+    <span class="ellipsis-text" :style="{ lineClamp: lines }">{{ text }}</span>
+    <a-tooltip v-if="isEllipsis" :title="text">
+      <span class="ellipsis-trigger">{{ text }}</span>
+    </a-tooltip>
+  </span>
+</template>
+
+<script setup>
+import { ref, onMounted, nextTick, watch } from 'vue';
+
+const props = defineProps({
+  text: {
+    type: String,
+    required: true
+  },
+  lines: {
+    type: [Number, String],
+    default: 1
+  }
+});
+
+const textRef = ref(null);
+const isEllipsis = ref(false);
+
+const checkEllipsis = () => {
+  if (!textRef.value) return;
+
+  const textElement = textRef.value.querySelector('.ellipsis-text');
+
+  isEllipsis.value = textElement.scrollHeight > textElement.clientHeight;
+};
+
+onMounted(() => {
+  nextTick(checkEllipsis);
+});
+
+watch(() => props.text, () => {
+  nextTick(checkEllipsis);
+});
+</script>
+
+<style scoped>
+.ellipsis-container {
+  position: relative;
+  display: inline-block;
+  max-width: 100%;
+}
+
+.ellipsis-text {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
+}
+
+.ellipsis-trigger {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  cursor: pointer;
+}
+</style>

src/components/BsUi/index.js

@@ -10,6 +10,7 @@ import BsModalTableSelector from './ModalTableSelector/index.vue';
 import BsDescriptions from "./Descriptions/index.vue"
 import BsContentsWrapper from "./ContentsWrapper/index.vue"
 import BsTabs from "./Tabs/index.vue"
+import BsEllipsisText from "./EllipsisText/index.vue"
 
 const BsUi = {
   install(app) {
@@ -22,7 +23,8 @@ const BsUi = {
     app.component('BsModalTableSelector', BsModalTableSelector);
     app.component('BsDescriptions', BsDescriptions)
     app.component('BsContentsWrapper', BsContentsWrapper)
-    app.component('BsTabs', BsTabs)
+    app.component('BsTabs', BsTabs);
+    app.component('BsEllipsisText', BsEllipsisText);
   },
 };
 
@@ -44,5 +46,6 @@ export {
   useBsForm,
   BsDescriptions,
   BsContentsWrapper,
-  BsTabs
+  BsTabs,
+  BsEllipsisText
 };