415 lines
10 KiB
Vue
415 lines
10 KiB
Vue
<template>
|
|
<div class="newProject">
|
|
<div class="contentBox">
|
|
<div class="content">
|
|
<div class="title">How can I help you today?</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'}">Chat</div>
|
|
<div class="item" @click="setChatOrSetting('setting')" :class="{active:chatOrSetting == 'setting'}">Setting</div>
|
|
</div>
|
|
</div>
|
|
<div class="chatBox" v-show="chatOrSetting == 'chat'">
|
|
<textarea ref="textarea" @input="inputText($event)" 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-br-upload">
|
|
<input type="file" @change="handleFileUpload($event)">
|
|
</i>
|
|
</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'">
|
|
<workspace @setProject="setProject" :httpWorkflowType="selectFlow.value"></workspace>
|
|
</div>
|
|
<div class="hint" v-show="chatOrSetting == 'chat'">
|
|
<div class="item" v-for="item in hintList" @click="addChatContent(item)">{{ item }}</div>
|
|
</div>
|
|
{{ text }}
|
|
</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} 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:[],
|
|
setup(props,{emit}) {
|
|
const store = useStore();
|
|
const data = reactive({
|
|
flowList:[
|
|
{
|
|
title:'Series Design',
|
|
value:'SERIES_DESIGN',
|
|
describe:[
|
|
'12312312',
|
|
'12312312',
|
|
]
|
|
},
|
|
{
|
|
title:'Single Design',
|
|
value:'SINGLE_DESIGN',
|
|
describe:[
|
|
'12312312',
|
|
'12312312',
|
|
]
|
|
},
|
|
],
|
|
selectFlow:{
|
|
title:'Series Design',
|
|
value:'SERIES_DESIGN',
|
|
describe:[
|
|
'12312312',
|
|
'12312312',
|
|
]
|
|
},
|
|
chatContent:'',
|
|
hintList:[
|
|
'描述1',
|
|
'描述3',
|
|
'描述2',
|
|
],
|
|
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)=>{
|
|
if((data.textarea.value += item.length) > 10000)return
|
|
data.chatContent += item
|
|
data.textarea.value += item
|
|
}
|
|
const sendChat = ()=>{
|
|
if(!data.chatContent)return
|
|
data.loadingShow = true
|
|
Https.axiosGet(Https.httpUrls.chatCreateProject, {params:{prompt:data.chatContent,process:data.selectFlow.value}}).then((rv)=>{
|
|
if(rv){
|
|
data.loadingShow = false
|
|
router.push(`home?history=${rv}`)
|
|
}
|
|
}).catch(()=>{
|
|
data.loadingShow = false
|
|
})
|
|
|
|
// const eventSource = new EventSource(`http://192.168.1.3:5567${Https.httpUrls.chatCreateProject}?prompt=${data.chatContent}&token=${getCookie('token')}`,{
|
|
// });
|
|
// eventSource.onmessage = function(event) {
|
|
|
|
// data.text+=event.data
|
|
// console.log('收到数据:', event.data);
|
|
// };
|
|
// eventSource.onerror = function(error) {
|
|
// console.log(EventSource.CLOSED,EventSource)
|
|
// console.log(eventSource.readyState )
|
|
// if (eventSource.readyState === EventSource.CLOSED) {
|
|
// console.log('连接已正常关闭');
|
|
// } else {
|
|
// console.error('错误:', error);
|
|
// // 处理错误重连逻辑
|
|
// }
|
|
// eventSource.close()
|
|
// };
|
|
}
|
|
const handleFileUpload = (event:any)=>{
|
|
if (event.target.files[0].size > 5 * 1024 * 1024) { // 5MB
|
|
message.info('The file size cannot exceed 5MB.');
|
|
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('You can only upload five pictures.');
|
|
return
|
|
}
|
|
}else{
|
|
if(data.filList.filter((item:any)=>item.type == 'file').length >= 1){
|
|
message.info('You can only upload one file.');
|
|
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) => {
|
|
rv.name = event.target.files[0].name
|
|
rv.type = type?'image':'file'
|
|
data.filList.push(rv)
|
|
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)=>{
|
|
router.push(`home?history=${item.id}`)
|
|
}
|
|
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% - 7.8rem);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
> .content{
|
|
// background: red;
|
|
width: 88rem;
|
|
// height: 100%;
|
|
> .title{
|
|
font-size: 2rem;
|
|
font-weight: 600;
|
|
text-align: center;
|
|
}
|
|
> .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;
|
|
|
|
}
|
|
}
|
|
}
|
|
> .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;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
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;
|
|
cursor: pointer;
|
|
padding: 1.2rem;
|
|
&:hover{
|
|
background: #f5f5f5;
|
|
}
|
|
:first-child{
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |