Merge branch 'main' of ssh://18.167.251.121:10002/aidlab/FiDA_Front

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>

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>

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

@@ -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>

src/views/home/agent/index.vue

@@ -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>

src/views/home/versionTree/components/dialog.vue

@@ -0,0 +1,139 @@
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
+const props = defineProps({
+	textData: {
+		type: Object,
+		default: () => {}
+	} as any,
+	styleData: {
+		type: Object,
+		default: () => {}
+	} as any,
+	callBack: {
+		type: Function,
+		default: () => {}
+	}
+})
+// const emit = defineEmits([
+// ])
+let data = reactive({
+})
+
+const dialogFormVisible = ref(false)
+
+const confirm = async ()=>{
+	if(props.callBack)await props.callBack()
+	dialogFormVisible.value = false
+}
+
+onMounted(()=>{
+})
+onUnmounted(()=>{
+})
+defineExpose({open:()=>dialogFormVisible.value = true})
+const {} = toRefs(data);
+</script>
+<template>
+	<div class="dialog">
+		<el-dialog 
+			:align-center="true"
+			v-model="dialogFormVisible" 
+			:close-on-click-modal="false"
+			:title="props.textData?.title" 
+			:show-close="false"
+			:width="props.styleData?.width || '50%'">
+			<template #header="{ close, titleId, titleClass }">
+				<div class="my-header">
+					<div class="text">{{ props.textData?.title }}</div>
+					<div class="icon" @click="dialogFormVisible = false">
+						<SvgIcon
+							name="close"
+							size="8"
+						/>
+					</div>
+				</div>
+			</template>
+			<div class="boundary"></div>
+			<div class="dialog-content">
+				{{ props.textData?.text }}
+			</div>
+			<template #footer>
+				<div class="dialog-footer">
+					<div class="dialog-footer-cancel" @click="dialogFormVisible = false">
+						{{ props.textData?.cancelText || 'Cancel' }}
+					</div>
+					<div class="dialog-footer-confirm" type="primary" @click="confirm">
+					{{ props.textData?.submitText || 'Confirm' }}
+					</div>
+				</div>
+			</template>
+		</el-dialog>
+	</div>
+</template>
+<style lang="less" scoped>
+	.dialog{
+		--el-dialog-padding-primary: 1.6rem 1.2rem;
+		--el-dialog-border-radius: .8rem;
+		:deep(.el-dialog){
+			.my-header{
+				display: flex;
+				padding: 0 .5rem;
+				justify-content: space-between;
+				--el-dialog-padding-primary: 1.2rem
+				.text{
+					font-family: 'Semibold';
+					font-size: 1.4rem;
+					line-height: 2rem;
+					letter-spacing: -0.18px;
+				}
+				.icon{
+					cursor: pointer;
+					width: 2rem;
+					height: 2rem;
+					display: flex;
+					justify-content: center;
+					align-items: center;
+				}
+			}
+			.boundary{
+				border-bottom: .7px solid rgba(0, 0, 0, 0.1);
+				width: 100%;
+			}
+			.dialog-content{
+				padding: 0 .5rem;
+				padding-top: 1.2rem;
+				font-family: 'Regular';
+				font-weight: 400;
+				font-size: 1.2rem;
+				line-height: 2rem;
+				letter-spacing: -0.18px;
+			}
+			.dialog-footer{
+				display: flex;
+				justify-content: flex-end;
+				--el-dialog-padding-primary: 1.7rem;
+				> div{
+					font-weight: 500;
+					font-size: 1.2rem;
+					line-height: 2rem;
+					letter-spacing: -0.18px;
+					width: 5.9rem;
+					text-align: center;
+					cursor: pointer;
+					border-radius: 1.5rem;
+					padding: .3rem 0 .4rem;
+				}
+				.dialog-footer-cancel{
+					color: #000;
+					margin-right: .6rem;
+					border: 0.7px solid #0000001A;
+					background: #FFFFFF;
+				}
+				.dialog-footer-confirm{
+					color: #fff;
+					background-color: #f74545;
+				}
+			}
+		}
+	}
+</style>

src/views/home/versionTree/detail/chatDetail.vue

@@ -18,7 +18,7 @@ let data = reactive({
 onMounted(()=>{
 })
 onUnmounted(()=>{
-})
+}) 
 defineExpose({})
 const {} = toRefs(data);
 </script>

src/views/home/versionTree/detail/index.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
 import VersionDetail from './versionDetail.vue'
-import ChatHistory from './chatHistory.vue'
+import ChatDetail from './chatDetail.vue'
 //const props = defineProps({
 //})
 const emit = defineEmits([
@@ -14,7 +14,7 @@ const detailData = ref({
 		versionSketch:'Version 1 - Sketch',
 		versionSketchTime:'2023-08-01 10:00:00',
 	},
-	userChatHistory:{
+	userChatDetail:{
 
 	}
 	
@@ -35,10 +35,10 @@ defineExpose({})
 			></VersionDetail>
 		</div>
 		<div class="useInput">
-			<ChatHistory type="user"></ChatHistory>
+			<ChatDetail type="user"></ChatDetail>
 		</div>
 		<div class="systemInput">
-			<ChatHistory type="robot"></ChatHistory>
+			<ChatDetail type="robot"></ChatDetail>
 		</div>
 	</div>
 </template>

src/views/home/versionTree/index.vue

@@ -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>

src/views/home/versionTree/tree/view2/index.vue

@@ -6,6 +6,7 @@ import SpecialEdge from './speciaiEdge.vue'
 import InputNode from './InputNode.vue'//主
 import SecondaryNode from './secondaryNode.vue'//分支
 import { useLayout } from '../../tools/tools'
+import dialogVue from "../../components/dialog.vue";
 const props = defineProps({
 	selectItem: {
 		type: Object,
@@ -22,6 +23,9 @@ const emit = defineEmits([
 	'versionDelete',
 ])
 
+const dialogDeleteRef = ref()
+const dialogRestoreRef = ref()
+
 // 节点类型：input、output、default、custom
 // input:开始点，output：结尾点，default：普通节点，custom：自定义节点
 const position = { x: 0, y: 0 }
@@ -88,10 +92,11 @@ watch(()=>props.selectItem.id, (newVal, oldVal) => {
 
 const versionRestore = ()=>{
 	emit('versionRestore')
+	dialogRestoreRef.value?.open()
 }
 
 const versionDelete = ()=>{
-	emit('versionDelete')
+	dialogDeleteRef.value?.open()
 }
 
 onMounted(()=>{
@@ -135,6 +140,30 @@ defineExpose({push})
 				</div>
 			</div>
 		</div>
+		<dialogVue 
+			:textData="{
+				title: $t('VersionTree.deleteChat'),
+				text: $t('VersionTree.deleteHint'),
+				submitText: $t('VersionTree.delete'),
+				cancelText: $t('VersionTree.cancel'),
+			}"
+			:styleData="{
+				width: '40.6rem'
+			}"
+			:callBack="()=>emit('versionDelete')"
+			ref="dialogDeleteRef" />
+		<dialogVue 
+			:textData="{
+				title: $t('VersionTree.restoreChat'),
+				text: $t('VersionTree.restoreHint'),
+				submitText: $t('VersionTree.confirm'),
+				cancelText: $t('VersionTree.cancel'),
+			}"
+			:styleData="{
+				width: '40.6rem'
+			}"
+			:callBack="()=>emit('versionRestore')"
+			ref="dialogRestoreRef" />
 	</div>
 </template>
 <style lang="less">