aida_front/src/component/home/newProject/index.vue

<template>
	<div class="newProject">
		<div class="contentBox">
			<div class="content">
				<div class="title" v-show="chatOrSetting == 'chat'">{{$t('newProjectg.helpYou')}}</div>
				<div class="selectFlow">
					<div class="select">
						<div class="item" @click="setFlow(item)" :class="{active:item.title == selectFlow.title}" v-for="item in flowList">{{ item.title }}</div>
					</div>
					<!-- <div class="describe">
						<p v-for="item in selectFlow.describe">{{ item }}</p>
					</div> -->
				</div>
				<div class="chatOrSetting">
					<div class="select">
						<div class="item" @click="setChatOrSetting('chat')" :class="{active:chatOrSetting == 'chat'}">{{$t('newProjectg.Chat')}}</div>
						<div class="item" @click="setChatOrSetting('setting')" :class="{active:chatOrSetting == 'setting'}">{{$t('newProjectg.Setting')}}</div>
					</div>
				</div>
				<div class="chatBox" v-show="chatOrSetting == 'chat'">
					<textarea ref="textarea" @input="inputText($event)" @keydown.enter.prevent="sendChat" placeholder="Write your message"></textarea>
					<div class="btn">
						<div class="uploadBox">
							<div class="filList">
								<div class="item" v-for="item,index in filList">
									<div>{{item.name}}</div>
									<span class="icon iconfont icon-shanchu" @click="deleteFile(item,index)"></span>
								</div>
							</div>
							<i class="fi fi-rs-paperclip-vertical">
								<input type="file" @change="handleFileUpload($event)">
							</i>
							<div class="enableThinking" :class="{active:enableThinking}" @click="()=>enableThinking = !enableThinking">{{$t('newProjectg.DeepThinking')}}</div>
						</div>
						<div class="sendBox">
							<div class="maxNum">{{ chatContent.length }}/10000</div>
							<div class="send" @click="sendChat">
								<i class="fi fi-ss-paper-plane-top"></i>
							</div>
						</div>
					</div>
				</div>
				<div v-show="chatOrSetting != 'chat'" class="workspaceBox">
					<workspace @setProject="setProject" :httpWorkflowType="selectFlow.value"></workspace>
				</div>
				<div class="hint" v-show="chatOrSetting == 'chat'">
					<div class="item" v-for="item in hintList[selectFlow.value]" :title="item.value" @click="addChatContent(item)">{{ item }}</div>
				</div>
			</div>
		</div>
		<div class="mark_loading" v-show="loadingShow">
			<a-spin size="large" />
		</div>
	</div>
</template>
<script lang="ts">
import { defineComponent,computed,ref,provide,nextTick,createVNode,toRefs, reactive, onMounted} from 'vue'
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { Https } from "@/tool/https";
import { useStore } from "vuex";
import { Modal,message,Upload,CascaderProps } from 'ant-design-vue';
import { useI18n } from 'vue-i18n'
import {getCookie,clonAllCookie} from '@/tool/cookie'
import router from '@/router';
import workspace from './workspace.vue'
export default defineComponent({
	components:{
		workspace,
	},
	props:{
	},
	emits:['newProject'],
	setup(props,{emit}) {
		const {t} = useI18n()
		const store = useStore();
		const data = reactive({
			flowList:[
				{
					title:computed(()=>t('newProjectg.SeriesDesign')),
					value:'SERIES_DESIGN',
					describe:[
						computed(()=>t('newProjectg.SeriesDesignInfo')),
					]
				},
				{
					title:computed(()=>t('newProjectg.SingleDesign')),
					value:'SINGLE_DESIGN',
					describe:[
						computed(()=>t('newProjectg.SingleDesignInfo')),
					]
				},
			],	
			selectFlow:{
				title:computed(()=>t('newProjectg.SeriesDesign')),
				value:'SERIES_DESIGN',
				describe:[
					computed(()=>t('newProjectg.SeriesDesignInfo')),
				]
			},
			chatContent:'',
			hintList:{
				SERIES_DESIGN:[
					computed(()=>t('newProjectg.hintListSERIES1')),
					computed(()=>t('newProjectg.hintListSERIES2')),
					computed(()=>t('newProjectg.hintListSERIES3')),
				],
				SINGLE_DESIGN:[
					computed(()=>t('newProjectg.hintListSIGNLE1')),
					computed(()=>t('newProjectg.hintListSIGNLE2')),
					computed(()=>t('newProjectg.hintListSIGNLE3')),
				],
			},
			enableThinking:false,//深度思考
			uploadFile:null as any,
			loadingShow:false,
			text:'',
			filList:[] as any,
			textarea:null as any,
			chatOrSetting:'chat',
		})
		const dataDom = reactive({
		})
		const setFlow = (item:any)=>{
			data.selectFlow = item
		}
		
		const inputText = (e:any)=>{
			if(e.target.value.length <= 1000){
				data.chatContent = e.target.value
			}else{
				e.target.value = data.chatContent 
			}
			e.target.style.height = `${e.target.scrollHeight}px`;
		}
		const addChatContent = (item:any)=>{
			let str = item.value
			if((data.textarea.value?.length + str.length) > 10000)return
			// data.chatContent += item
			// data.textarea.value += item
			data.chatContent = str
			data.textarea.value = str
		}
		const sendChat = ()=>{
			if(!data.chatContent)return
			data.loadingShow = true
			let fileList = JSON.parse(JSON.stringify(data.filList))
			let fileUrl = (fileList.filter((item:any)=>item.type == 'file').length > 0) ? fileList.filter((item:any)=>item.type == 'file')[0].minioPath : ''
			let imageUrlList = (fileList.filter((item:any)=>item.type == 'image').length > 0)? fileList.filter((item:any)=>item.type == 'image').map((item:any)=>item.minioPath).join(',') : ''
			Https.axiosGet(Https.httpUrls.chatCreateProject, {params:{prompt:data.chatContent,process:data.selectFlow.value,fileUrl:fileUrl,imageUrlList}}).then((rv)=>{
				if(rv){
					data.loadingShow = false
					let value = {
						id:rv,
						fileList:fileList,
						chatContent:data.chatContent,
						enableThinking:data.enableThinking,
						newMode:'chat',
					}
					emit('newProject',value)
				}
			}).catch(()=>{
				data.loadingShow = false
			})
			// let projectId = ''
			// const eventSource = new EventSource(`${import.meta.env.VITE_APP_BASE_URL}${Https.httpUrls.llmStream}?token=${getCookie('token')}&prompt=${data.chatContent}&projectId=&fileUrl=${fileUrl}&imageUrlList=${imageUrlList}&enableThinking=${data.enableThinking}&process=${data.selectFlow.value}`);
			// eventSource.onmessage = function(event) {
			// 	let eventData = JSON.parse(event.data)
			// 	if(eventData.status == "[PROJECT_CREATE_SIGNAL]"){
			// 		projectId = JSON.parse(eventData.tools_data).projectId
			// 	}
			// };
			// eventSource.onerror = function(error) {
			// 	if (eventSource.readyState === EventSource.CLOSED) {
			// 		// data.chatList[data.chatList.length-1].content.message='服务器繁忙，请稍后再试。'
			// 	} else {
			// 		if(projectId){
			//  			emit('newProject',projectId)
			// 		}
			// 		eventSource.close()
			// 	}
			// 	data.loadingShow = false
			// };
		}
		const handleFileUpload = (event:any)=>{
			if (event.target.files[0].size > 5 * 1024 * 1024) { // 5MB
				message.info(t('newProjectg.jsContent1'));
				return
			}
			let type = event.target.files[0].type.startsWith('image/')
			if(type){
				if(data.filList.filter((item:any)=>item.type == 'image').length >= 5){
					message.info(t('newProjectg.jsContent2'));
					return	
				}
			}else{
				if(data.filList.filter((item:any)=>item.type == 'file').length >= 1){
					message.info(t('newProjectg.jsContent3'));
					return	
				}
			}
			data.loadingShow = true
			const formData = new FormData();
			formData.append('file', event.target.files[0]);
			let config:any = {
				headers:{'Content-Type':'multipart/form-data','Accept':'*/*'  },
				params:formData,
			}
			Https.axiosPost(Https.httpUrls.llmUploadFile,formData,config)
			.then((rv: any) => {
				let obj = {
					name:event.target.files[0].name,
					type:type?'image':'file',
					minioPath:rv[0],
					url:rv[1],
				}
				data.filList.push(obj)
				data.loadingShow = false
			}
			).catch(rv=>{
				data.loadingShow = false
			})
		}
		const deleteFile = (item:any,index:number)=>{
			data.filList.splice(index,1)
		}
		const setChatOrSetting = (str:any)=>{
			data.chatOrSetting = str
		}
		const setProject = (item:any)=>{
			emit('newProject',item)
			// router.push(`home?history=${item.id}`)
		}
		onMounted(()=>{
			store.commit('createProbject')
		})
		return{
			...toRefs(dataDom),
			...toRefs(data),
			setFlow,
			inputText,
			addChatContent,
			sendChat,
			handleFileUpload,
			deleteFile,
			setChatOrSetting,
			setProject,
		}
	},
	provide() {
		return {
		}
	},
})
</script>
<style lang="less" scoped>
	.newProject{
		width: 100%;
		height: 100%;
		position: relative;
		> .contentBox{
			width: 100%;
			height: calc(100% - 3.9rem);
			// height: calc(100% - 7.8rem);
			display: flex;
			align-items: center;
			justify-content: center;
			> .content{
				// background: red;
				width: 88rem;
				height: 100%;
				display: flex;
				flex-direction: column;
				justify-content: center;
				> .title{
					font-size: 2rem;
					font-weight: 600;
					text-align: center;
				}
				> .workspaceBox{
					flex: 1;
					border-radius: 2.4rem;
					padding: 1.2rem;
					border: 1px solid #0000001a;
					:deep(.workspace){
						padding: 0;
						height: auto;
					}
				}
				> .selectFlow{
					margin-top: 4.8rem;
					width: 100%;
					border-radius: 2.4rem;
					// border: 1px solid #0000001a;
					// padding: 1.2rem;
					> .select{
						border: 1px solid #0000001a;
						border-radius: 2.4rem;
						display: flex;
						padding: .2rem;
						border-radius: 2rem;
						> div{
							white-space: nowrap;
							justify-content: space-between;
							border-radius: 2.2rem;
							font-size: 1.6rem;
							padding: .6rem .8rem;
							min-width: 25%;
							text-align: center;
							font-weight: 600;
							color: #71717a;
							cursor: pointer;
							&.active{
								background: #efeff1;
								color: #3f3f46;
							}
						}
					}
					> .describe{
						margin-top: 1.6rem;
						margin-left: .8rem;
						> p{
							margin: 0;
							color: #71717a;
							font-weight: 400;
							font-size: 1.2rem;
						}
					}
				}
				> .chatOrSetting{
					margin-top: 2.4rem;
					width: min-content;
					margin-left: auto;
					> .select{
						border: 1px solid #0000001a;
						border-radius: 2.4rem;
						display: flex;
						padding: .2rem;
						border-radius: 2rem;
						> div{
							white-space: nowrap;
							justify-content: space-between;
							border-radius: 2.2rem;
							font-size: 1.6rem;
							padding: .6rem .8rem;
							min-width: 10rem;
							text-align: center;
							font-weight: 600;
							color: #71717a;
							cursor: pointer;
							&.active{
								background: #efeff1;
								color: #3f3f46;
							}
						}
					}
				}
				> .chatBox{
					margin-top: .4rem;
					border-radius: 2.4rem;
					position: relative;
					background: #f5f5f5;
					> textarea{
						padding: 1.6rem 2rem 0;
						background: #f5f5f5;
						width: 100%;
						min-height: 7.2rem;
						border-radius: 2.4rem;
						font-weight: 400;
						line-height: 2rem;
						font-size: 1.4rem;
						resize: none;
						border: none;
						overflow-y: hidden;
					}
					> .btn{
						padding: 0 1.2rem 1.2rem;
						display: flex;
						justify-content: space-between;
						> .uploadBox{
							display: flex;
							align-items: center;
							> .filList{
								display: flex;
								> .item{
									height: 3rem;
									padding: .5rem 1rem;
									background: #efeff1;
									border-radius: .5rem;
									margin-right: 1rem;
									font-size: 1.4rem;
									line-height: 2rem;
									display: flex;
									> div{
										white-space: nowrap;
										overflow: hidden;
										max-width: 10rem;
										text-overflow: ellipsis;
									}
									> span{
										cursor: pointer;
									}
								}
							}
							> .enableThinking{
								width: 10rem;
								padding: .2rem .4rem;
								margin-left: 1rem;
								text-align: center;
								font-size: 1.4rem;
								border: 1px solid #000;
								border-radius: .4rem;
								cursor: pointer;
								&.active{
									background: #000;
									color: #fff;

								}
							}
						}
						i{
							font-size: 2rem;
							display: flex;
							cursor: pointer;
							position: relative;
							> input{
								width: 100%;
								height: 100%;
								position: absolute;
								top: 0;
								left: 0;
								opacity: 0;
								cursor: pointer;
								&::-webkit-file-upload-button {
									cursor: pointer;
								}
							}
						}
						> .sendBox{
							display: flex;
							align-items: center;
							
							> .maxNum{
								font-size: 1.2rem;
								margin-right: .8rem;
								font-weight: 400;
							}
						}
					}
				}
				> .hint{
					display: flex;
					margin-top: 2.4rem;
					> div{
						background: #efeff1;
						width: 25rem;
						// height: 4.8rem;
						margin-right: 1.2rem;
						border-radius: 1.6rem;
						font-size: 1.6rem;
						cursor: pointer;
						padding: 1.2rem;
						white-space: nowrap; /* 文本不换行 */
						overflow: hidden; /* 溢出部分隐藏 */
						text-overflow: ellipsis; /* 显示省略号 */
						&:hover{
							background: #f5f5f5;
						}
						:first-child{
							margin-right: 0;
						}
					}
				}
			}
		}
	}
</style>