feat: agent聊天样式

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

@@ -0,0 +1,127 @@
+<template>
+	<div class="agent-item">
+		<div class="message-wrapper flex align-center" :class="{ 'is-user': content.isUser }">
+			<div class="thumb">
+				<img :src="content.isUser ? userThumb : agentThumb" class="thumb-icon" />
+			</div>
+			<div class="message-context">
+				<div class="message-txt">{{ content.text }}</div>
+				<div class="operate flex" :class="{ 'is-user': content.isUser }">
+					<template v-if="content.isUser">
+						<SvgIcon name="copy" size="16" color="#000" @click.stop="handleCopyText" />
+					</template>
+					<template v-else>
+						<SvgIcon
+							v-for="operate in operateList"
+							:key="operate.name"
+							:name="operate.name"
+							:size="operate.name === 'refreshTransparent' ? '14' : '16'"
+							color="#000000A6"
+							@click.stop="operate.action"
+						/>
+					</template>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+	import { ref } from 'vue'
+	import { useI18n } from 'vue-i18n'
+	import userThumb from '@/assets/images/user-thumb.jpg'
+	import agentThumb from '@/assets/images/agent-thumb.jpg'
+
+	const { t } = useI18n()
+
+	const props = defineProps<{
+		content: Object
+	}>()
+
+	const operateList = ref([
+		{
+			name: 'thumbUp',
+			action: () => {
+				console.log('thumbUp')
+			}
+		},
+		{
+			name: 'thumbDown',
+			action: () => {
+				console.log('thumbDown')
+			}
+		},
+		{
+			name: 'refreshTransparent',
+			action: () => {
+				console.log('refresh')
+			}
+		},
+		{
+			name: 'copy',
+			action: () => {
+				handleCopyText()
+			}
+		}
+	])
+
+	const handleCopyText = () => {
+		navigator.clipboard
+			.writeText(props.content.text)
+			.then(() => {
+				// console.log('Text copied to clipboard');
+				ElMessage({
+					message: t('agent.copySuccess'),
+					type: 'success',
+					offset: 300
+				})
+			})
+			.catch((err) => {
+				console.error('Could not copy text: ', err)
+				ElMessage({
+					message: t('agent.copyFailed'),
+					type: 'error',
+					offset: 300
+				})
+			})
+	}
+</script>
+
+<style lang="less" scoped>
+	.c-svg {
+		width: initial;
+		cursor: pointer;
+	}
+	.agent-item {
+		font-family: 'Regular';
+		font-size: 1.4rem;
+		.message-wrapper {
+			column-gap: 0.9rem;
+			&.is-user {
+				text-align: right;
+				flex-direction: row-reverse;
+				column-gap: 1.3rem;
+			}
+
+			.thumb {
+				flex-shrink: 0;
+				width: 4.4rem;
+				height: 4.4rem;
+				border-radius: 50%;
+				border: 0.1rem solid #e5dfdf;
+				.thumb-icon {
+					width: 100%;
+					height: 100%;
+					border-radius: 50%;
+				}
+			}
+		}
+		.operate {
+			margin-top: 1.3rem;
+			column-gap: 1.2rem;
+			&.is-user {
+				justify-content: flex-end;
+			}
+		}
+	}
+</style>