feat: agent聊天样式

2026-02-10 13:05:24 +08:00
parent 40cf156e2e
commit 8feda12724
18 changed files with 1392 additions and 1053 deletions
--- a/src/views/home/agent/components/Agent.vue
+++ b/src/views/home/agent/components/Agent.vue
@@ -0,0 +1,75 @@
+<template>
+	<div class="agent-container flex flex-col">
+		<div class="agent-header flex align-center space-between">
+			<div class="header-title-wrapper">
+				<div class="agent-title">{{ props.title }}</div>
+				<div class="agent-name">AI Assistant 1.0</div>
+			</div>
+			<SvgIcon name="equal" color="#0d0d0d" size="24" />
+		</div>
+		<div class="agent-body flex-1 flex flex-col">
+			<List />
+			<Input :is-agent-mode="true" @send="handleSendMessage" />
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+	import List from './List.vue'
+	import Input from '../../components/Input.vue'
+
+	const props = withDefaults(
+		defineProps<{
+			title: string
+		}>(),
+		{
+			title: 'Retro Sofa Sketch'
+		}
+	)
+
+	const handleSendMessage = (message: string) => {
+		console.log('Message sent:', message)
+	}
+</script>
+
+<style lang="less" scoped>
+	.c-svg {
+		width: initial;
+	}
+	.agent-container {
+		// width: 39%;
+		width: 63.4rem;
+		background-color: #fff;
+		border-radius: 2rem;
+		box-shadow: 0px 15px 21px 0px #0000000d;
+
+		.agent-header {
+			height: 7.4rem;
+			border-bottom: 0.1rem solid #c9c9c9;
+			font-family: 'GeneralMedium';
+			padding: 1.4rem 3.4rem 1.4rem 3.1rem;
+
+			.agent-title {
+				font-size: 1.8rem;
+				margin-bottom: 0.6rem;
+			}
+
+			.agent-name {
+				font-size: 1.4rem;
+			}
+		}
+		.agent-body {
+			padding: 3.2rem;
+			.assist-input-wrapper {
+				width: 100%;
+				height: 14.4rem;
+				min-height: 14.4rem !important;
+				max-height: 14.4rem !important;
+			}
+		}
+		.input-wrapper {
+			height: 14.4rem;
+			padding: 0 2rem 3rem;
+		}
+	}
+</style>