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

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

@@ -16,22 +16,40 @@
 						class="img-item"
 					/>
 				</div>
-				<div class="message-context" v-show="content.thinkingText?.length > 0">
+				<!-- <div class="thinking-wrapper" v-show="content.thinkingText?.length > 0">
 					<div class="thinking">
 						<div
-							class="thinking-header flex align-center"
+							class="thinking-header flex align-center space-between"
 							@click="toggleThinkingCollapsed"
 						>
-							<span>{{ t('agent.thinking') }}</span>
-							<!-- <SvgIcon :name="content.thinkingCollapsed ? 'arrowDown' : 'arrowUp'" size="16" color="#666" /> -->
+							<div class="left flex align-center">
+								<span class="think-title" v-show="content.thinking">{{
+									t('agent.thinking')
+								}}</span>
+								<SvgIcon
+									v-show="!content.thinking"
+									class="think-icon"
+									name="checked"
+									size="12"
+									color="#FF7A51"
+								/>
+								<span class="think-title" v-show="!content.thinking">{{
+									t('agent.thinkComplete')
+								}}</span>
+							</div>
+							<SvgIcon
+								:class="{ reverse: thinkingCollapsed }"
+								name="arrowDown"
+								size="16"
+								color="#FF7A51"
+							/>
 						</div>
-						<div class="thinking-content" v-show="!content.thinkingCollapsed">
+						<div class="thinking-content" v-show="!thinkingCollapsed">
 							<pre>{{ content.thinkingText }}</pre>
 						</div>
 					</div>
-				</div>
+				</div> -->
 				<div class="message-txt markdown-body flex flex-col">
-					<!-- <div v-html="formatMessage"></div> -->
 					<VueMarkdown
 						:custom-attrs="customAttrs"
 						:markdown="content.text"
@@ -43,6 +61,9 @@
 						<template v-slot:s-url="{ children: children }">
 							<Url :list="content.webAddress" @click.native="handleClickUrls" />
 						</template>
+						<template v-slot:s-sketch="{ children: children }">
+							<Sketch @click.native="handleClickSketch" />
+						</template>
 					</VueMarkdown>
 					<div
 						class="web-address flex align-center"
@@ -94,6 +115,7 @@
 	import agentThumb from '@/assets/images/agent-thumb.png'
 	import Card from './ReportCard.vue'
 	import Url from './UrlCard.vue'
+	import Sketch from './SketchCard.vue'
 	import { VueMarkdown } from '@crazydos/vue-markdown'
 	import type { CustomAttrs } from '@crazydos/vue-markdown'
 	import rehypeRaw from 'rehype-raw'
@@ -228,9 +250,9 @@
 			})
 		}
 	}
-
+	const thinkingCollapsed = ref(true)
 	const toggleThinkingCollapsed = () => {
-		props.content.thinkingCollapsed = !props.content.thinkingCollapsed
+		thinkingCollapsed.value = !thinkingCollapsed.value
 	}
 
 	const handleClickReport = () => {
@@ -241,6 +263,9 @@
 		MyEvent.emit('openUrls', props.content.webAddress)
 		// 点击显示来源
 	}
+	const handleClickSketch = () => {
+		MyEvent.emit('openSketch')
+	}
 </script>
 
 <style lang="less" scoped>
@@ -327,24 +352,42 @@
 	}
 
 	.thinking {
-		border: 1px solid #ddd;
-		border-radius: 8px;
-		padding: 1rem;
-		background-color: #f9f9f9;
+		color: #ff7a51;
+		font-family: 'Medium';
+		margin-bottom: 1.6rem;
+		border: 0.1rem solid transparent;
+		border-radius: 0.4rem;
+		background: linear-gradient(#fffcf4, #fffcf4),
+			linear-gradient(
+				119.03deg,
+				rgba(233, 121, 60, 0.3) 1.61%,
+				rgba(255, 207, 144, 0.3) 101.01%
+			);
+		background-origin: padding-box, border-box;
+		background-clip: padding-box, border-box;
 
 		.thinking-header {
 			cursor: pointer;
-			font-weight: bold;
-			justify-content: space-between;
+			padding: 0.8rem 1.2rem;
+			.think-icon {
+				margin-right: 0.6rem;
+			}
+			.reverse {
+				transform: rotate(180deg);
+				transition: transform 0.3s ease-in-out;
+			}
 		}
 
 		.thinking-content {
-			margin-top: 0.5rem;
+			padding: 0 1.4rem 1.6rem;
 			pre {
+				color: #f6a478;
+				margin: 0;
+				border-left: 0.035rem solid #f6a478;
 				white-space: pre-wrap;
 				font-family: inherit;
 				font-size: 1.2rem;
-				color: #666;
+				padding-left: 1.2rem;
 			}
 		}
 	}