feat: 画布内聊天组件

src/components/Assistant/component/List.vue

@@ -0,0 +1,43 @@
+<template>
+	<div class="list-wrapper flex flex-col">
+		<div
+			class="list-item flex align-center"
+			v-for="item in props.messageList"
+			:key="item.id"
+			:class="item.role"
+		>
+			<div class="list-item-content-text">{{ item.content }}</div>
+		</div>
+	</div>
+</template>
+<script setup lang="ts">
+	const props = defineProps<{
+		messageList: Array<any>
+	}>()
+</script>
+<style lang="less" scoped>
+	.list-wrapper {
+    row-gap: 1.6rem;
+		.list-item {
+			min-height: 3.86rem;
+			width: fit-content;
+			&.user {
+				width: 26.2rem;
+				align-self: end;
+			}
+			font-size: 1.4rem;
+			font-family: 'Regular';
+			color: #333;
+			padding: 1.1rem 1.7rem;
+			background: linear-gradient(#fffcf4, #fffcf4) padding-box,
+				linear-gradient(
+						119.03deg,
+						rgba(233, 121, 60, 0.3) 1.61%,
+						rgba(255, 207, 144, 0.3) 101.01%
+					)
+					border-box;
+			border: 1px solid transparent;
+			border-radius: 3.18rem;
+		}
+	}
+</style>