feat: 优化sketch显示&添加sketch卡片

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

@@ -1,15 +1,15 @@
 <template>
-	<div class="report-card" :class="{ 'is-url': isUrl }">
+	<div class="report-card" :class="{ 'is-url': isUrl, 'is-sketch': isSketch }">
 		<div class="report-card-header">
-			<span v-if="!isUrl">{{ title }}</span>
+			<span v-if="!isUrl && !isSketch">{{ report.title }}</span>
 			<div v-else class="web-sources flex align-center">
-				<span>Web Sources</span>
+				<span>{{ report.title }}</span>
 				<img src="@/assets/images/link.png" class="link-icon" />
 			</div>
 		</div>
 		<div class="report-card-content">
-			<span v-if="!isUrl">markdown.md</span>
-			<span v-else>Destination URL</span>
+			<span v-if="!isUrl && !isSketch">{{ report.content || 'markdown.md' }}</span>
+			<span v-else>{{ report.content }}</span>
 		</div>
 	</div>
 </template>
@@ -25,11 +25,17 @@
 			title?: string
 			content?: string
 			isUrl?: boolean
+			isSketch?: boolean
+			report: {
+				title: ''
+				content: ''
+			}
 		}>(),
 		{
 			isUrl: false,
 			title: '',
-			content: ''
+			content: '',
+			isSketch: false
 		}
 	)
 </script>
@@ -48,6 +54,10 @@
 			background: url('@/assets/images/link-card.png') no-repeat;
 			background-size: 100% 100%;
 		}
+		&.is-sketch {
+			background: url('@/assets/images/sketch-card.png') no-repeat;
+			background-size: 100% 100%;
+		}
 		// &:first-of-type{
 		// 	margin-top: 0;
 		// }