Merge branch 'main' of ssh://18.167.251.121:10002/aidlab/FiDA_Front
This commit is contained in:
X1627315083@163.com
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>
|
||||
30
src/views/home/agent/index.vue
Normal file
30
src/views/home/agent/index.vue
Normal file
@@ -0,0 +1,30 @@
|
||||
<template>
|
||||
<div class="agent-wrapper flex space-between">
|
||||
<Agent :title="agentTitle" />
|
||||
<div class="preview-wrapper">preview</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import Agent from './components/Agent.vue'
|
||||
const agentTitle = ref('Retro Sofa Sketch')
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.agent-wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-top: 0.1rem solid #c9c9c9;
|
||||
padding: 8rem 2.3rem 6rem 2.8rem;
|
||||
|
||||
.c-svg {
|
||||
width: initial;
|
||||
}
|
||||
|
||||
.preview-wrapper {
|
||||
width: 91.2rem;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,20 +1,20 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
|
||||
import { ref, onMounted, onUnmounted, reactive, toRefs } from 'vue'
|
||||
import Tree from './tree/index.vue'
|
||||
import Detail from './detail/index.vue'
|
||||
import { versionsList } from './tools/versionsData'
|
||||
import { findAndAddChild, findAndRemoveChild } from './tools/tools'
|
||||
|
||||
const props = defineProps({
|
||||
versionTreeData:{
|
||||
type:Object,
|
||||
default:()=>{
|
||||
versionTreeData: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {
|
||||
drawer:false,
|
||||
list:[],
|
||||
drawer: false,
|
||||
list: []
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
})
|
||||
//const emit = defineEmits([
|
||||
//])
|
||||
@@ -65,24 +65,22 @@ const versionDelete = (versionDetail)=>{
|
||||
treeKey.value++
|
||||
}
|
||||
|
||||
let data = reactive({
|
||||
})
|
||||
onMounted(()=>{
|
||||
})
|
||||
onUnmounted(()=>{
|
||||
})
|
||||
let data = reactive({})
|
||||
onMounted(() => {})
|
||||
onUnmounted(() => {})
|
||||
defineExpose({})
|
||||
const {} = toRefs(data);
|
||||
const {} = toRefs(data)
|
||||
</script>
|
||||
<template>
|
||||
<div class="versionTree">
|
||||
<el-drawer
|
||||
v-model="versionTreeData.drawer"
|
||||
<el-drawer
|
||||
v-model="versionTreeData.drawer"
|
||||
:close-on-press-escape="false"
|
||||
:close-on-click-modal="false"
|
||||
:size="treeState?'109rem':'49rem'"
|
||||
:size="treeState ? '109rem' : '49rem'"
|
||||
body-class="versionTreeBody"
|
||||
:with-header="false">
|
||||
:with-header="false"
|
||||
>
|
||||
<div class="versionTreeTitle">
|
||||
<span>Version Tree: Retro Sofa Sketch</span>
|
||||
<div class="closeBtn" @click="versionTreeData.drawer = false">
|
||||
@@ -132,10 +130,23 @@ const {} = toRefs(data);
|
||||
--treeItem-background: #ffffff;
|
||||
--treeItem-active-background: #e6e6e6;
|
||||
|
||||
:deep(.versionTreeBody){
|
||||
--el-drawer-padding-primary: 0rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
:deep(.versionTreeBody) {
|
||||
--el-drawer-padding-primary: 0rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.versionTreeTitle {
|
||||
width: 100%;
|
||||
height: 8rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 0.8rem 0 2.4rem;
|
||||
border-bottom: 1px solid #c9c9c9;
|
||||
> span {
|
||||
font-size: 2rem;
|
||||
font-weight: 600;
|
||||
font-family: 'SemiBold';
|
||||
}
|
||||
.versionTreeTitle{
|
||||
width: 100%;
|
||||
@@ -213,4 +224,24 @@ const {} = toRefs(data);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
.expandBtnBox {
|
||||
}
|
||||
.versionTreeBox {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
> .tree {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
padding: 2.1rem 0 5.4rem 2.2rem;
|
||||
}
|
||||
> .detail {
|
||||
width: 35rem;
|
||||
margin: 2.1rem 3rem 5.4rem 3.4rem;
|
||||
height: calc(100% - 2.1rem - 5.4rem);
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user