feat: agent聊天样式
This commit is contained in:
75
src/views/home/agent/components/Agent.vue
Normal file
75
src/views/home/agent/components/Agent.vue
Normal file
@@ -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>
|
||||
127
src/views/home/agent/components/Item.vue
Normal file
127
src/views/home/agent/components/Item.vue
Normal file
@@ -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>
|
||||
29
src/views/home/agent/components/List.vue
Normal file
29
src/views/home/agent/components/List.vue
Normal file
@@ -0,0 +1,29 @@
|
||||
<template>
|
||||
<div class="agent-list flex flex-col flex-1">
|
||||
<Item v-for="message in messageList" :key="message.id" :content="message" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import Item from './Item.vue'
|
||||
|
||||
const messageList = ref([
|
||||
{ id: 1, text: 'Hello', isUser: true },
|
||||
{
|
||||
id: 2,
|
||||
text: 'Hey, I am your design assistant FiDA. I noticed that you want to design a yellow sofa. I can help you! Tell me what else you need?'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
text: 'Please design a vintage-inspired sofa with smooth, flowing lines and a sculptural silhouette. The sofa features a retro aesthetic combined with elegant curves, creating a timeless and refined look.',
|
||||
isUser: true
|
||||
}
|
||||
])
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.agent-list {
|
||||
row-gap: 3.2rem;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user