feat: web sources卡片三行省略

src/main.ts

@@ -17,9 +17,12 @@ import 'element-plus/dist/index.css'
 
 import ignoredWarning from './ignoredWarning'
 
+import vEllipsis from './utils/ellispsis'
+
 
 const app = createApp(App)
 ignoredWarning(app)
+app.directive('ellipsis', vEllipsis)
 app.use(router)
 	.use(ElementPlus)
 	.use(store)

src/utils/ellispsis.ts

@@ -0,0 +1,52 @@
+import type { Directive } from 'vue'
+/**
+ * 多行文本省略指令（悬浮显示完整内容)
+ * @directive v-ellipsis
+ * @param {number} [value=3] - 超过value行数时显示省略号,不传参数默认为3
+ */
+
+const applyStyles = (el: HTMLElement, binding: any) => {
+	const lines = typeof binding.value === 'number' && binding.value > 0 ? binding.value : 3
+
+	el.style.display = '-webkit-box'
+	el.style.webkitBoxOrient = 'vertical'
+	el.style.overflow = 'hidden'
+	el.style.webkitLineClamp = lines.toString()
+
+	el.style.maxHeight = `${lines}lh`
+}
+
+const checkTruncated = (el: HTMLElement) => {
+	const isTruncated = el.scrollHeight > el.clientHeight + 1
+	if (isTruncated) {
+		el.title = el.textContent?.trim() || ''
+	} else {
+		el.removeAttribute('title')
+	}
+}
+
+const vEllipsis: Directive<HTMLElement> = {
+	mounted(el, binding) {
+		applyStyles(el, binding)
+		checkTruncated(el)
+
+		const ro = new ResizeObserver(() => checkTruncated(el))
+		ro.observe(el)
+		;(el as any)._ellipsisObserver = ro
+	},
+
+	updated(el, binding) {
+		applyStyles(el, binding)
+		checkTruncated(el)
+	},
+
+	unmounted(el) {
+		const ro = (el as any)._ellipsisObserver
+		if (ro) {
+			ro.disconnect()
+			delete (el as any)._ellipsisObserver
+		}
+	}
+}
+
+export default vEllipsis

src/views/home/agent/components/Preview.vue

@@ -53,12 +53,12 @@
 		</template>
 		<template v-else-if="type === 'url'">
 			<div class="url-list flex">
-				<div class="url-item" v-for="item in urlList" :key="item">
+				<div class="url-item flex flex-col" v-for="item in urlList" :key="item">
-					<div class="url-title" @click="handleClickUrl(item)">
+					<div class="url-title" v-ellipsis="3" @click="handleClickUrl(item)">
 						{{ item }}
 						<img src="@/assets/images/link-outer.png" class="link-outer" />
 					</div>
-					<div class="url-link">{{ item }}</div>
+					<div class="url-link" v-ellipsis="3">{{ item }}</div>
 				</div>
 			</div>
 		</template>
@@ -328,16 +328,27 @@
 			.url-item {
 				width: 24rem;
 				height: 28.7rem;
+				line-height: 2rem;
 				word-break: break-all;
 				background: url('@/assets/images/web-card.png') no-repeat;
 				background-size: 100% 100%;
 				padding: 5rem 1.5rem;
+				row-gap: 0.6rem;
+				// .url-title,.url-link{
+				// 	// 两行省略
+				// 	display: -webkit-box;
+				// 	-webkit-line-clamp: 2;
+				// 	line-clamp: 2;
+				// 	-webkit-box-orient: vertical;
+				// 	overflow: hidden;
+				// 	text-overflow: ellipsis;
+				// }
 				.url-title {
 					cursor: pointer;
 					font-family: 'Medium';
 					font-size: 1.6rem;
 					color: #232323;
-					padding-bottom: 0.6rem;
+					max-height: 4rem;
 					.link-outer {
 						width: 1.2rem;
 						height: 1.2rem;