布局修改 部分bug修复
This commit is contained in:
X1627315083
@@ -1,50 +1,26 @@
|
||||
<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 class="select" v-show="!isCreateBox">
|
||||
<div class="title">AiDA</div>
|
||||
<div class="info">{{ $t('newProjectg.info') }}</div>
|
||||
<div class="selectList">
|
||||
<div :class="{active:selectFlow?.value == seiesDesign.value}" @click="selectSeiesOrSingle(seiesDesign)">
|
||||
<img src="@/assets/images/homePage/icon/homeCreateSeriesDesign.svg" alt="">
|
||||
<span>{{ seiesDesign.title }}</span>
|
||||
</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 :class="{active:selectFlow?.value == singleDesign.value}" @click="selectSeiesOrSingle(singleDesign)">
|
||||
<img src="@/assets/images/homePage/icon/homeCreateSingleDesign.svg" alt="">
|
||||
<span>{{ singleDesign.title }}</span>
|
||||
</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 class="gallery_btn gallery_btn_radius" @click="goCreate">{{ $t('newProjectg.CreateProject') }}</div>
|
||||
</div>
|
||||
<div class="content" v-show="isCreateBox">
|
||||
<i class="fi fi-rr-arrow-small-left" @click="()=>isCreateBox = false"></i>
|
||||
|
||||
<div class="workspaceBox">
|
||||
<workspace @setProject="setProject" :httpWorkflowType="selectFlow?.value"></workspace>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -74,176 +50,44 @@ export default defineComponent({
|
||||
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')),
|
||||
seiesDesign:{
|
||||
title:computed(()=>t('newProjectg.series')),
|
||||
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')),
|
||||
],
|
||||
singleDesign:{
|
||||
title:computed(()=>t('newProjectg.single')),
|
||||
value:'SINGLE_DESIGN',
|
||||
},
|
||||
selectFlow:{
|
||||
|
||||
},
|
||||
enableThinking:false,//深度思考
|
||||
uploadFile:null as any,
|
||||
isCreateBox:false,
|
||||
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}`)
|
||||
}
|
||||
const selectSeiesOrSingle = (type:any)=>{
|
||||
data.selectFlow = type
|
||||
}
|
||||
const goCreate = ()=>{
|
||||
if(!data.selectFlow?.value){
|
||||
return message.info(t('newProjectg.selectDesignType'))
|
||||
}
|
||||
data.isCreateBox = true
|
||||
}
|
||||
onMounted(()=>{
|
||||
store.commit('createProbject')
|
||||
})
|
||||
return{
|
||||
...toRefs(dataDom),
|
||||
...toRefs(data),
|
||||
setFlow,
|
||||
inputText,
|
||||
addChatContent,
|
||||
sendChat,
|
||||
handleFileUpload,
|
||||
deleteFile,
|
||||
setChatOrSetting,
|
||||
setProject,
|
||||
selectSeiesOrSingle,
|
||||
goCreate,
|
||||
}
|
||||
},
|
||||
provide() {
|
||||
@@ -264,211 +108,97 @@ export default defineComponent({
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
> .content{
|
||||
// background: red;
|
||||
width: 88rem;
|
||||
height: 100%;
|
||||
> .select{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
> .title{
|
||||
font-size: 4rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
> .info{
|
||||
margin-top: 1.2rem;
|
||||
font-weight: 600;
|
||||
font-size: 2.4rem;
|
||||
}
|
||||
> .selectList{
|
||||
margin-top: 4.8rem;
|
||||
display: flex;
|
||||
> div{
|
||||
margin-right: 6rem;
|
||||
border-radius: 3.2rem;
|
||||
cursor: pointer;
|
||||
border: 1px solid #D9D9D9;
|
||||
background-color: #fff;
|
||||
height: 6.5rem;
|
||||
padding: 0 2.3rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
&.active{
|
||||
background-color: #efeff1;
|
||||
}
|
||||
> img{
|
||||
width: 2.7rem;
|
||||
height: 2.7rem;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
> span{
|
||||
font-weight: 600;
|
||||
font-size: 2rem;
|
||||
color: #3B3B3B;
|
||||
}
|
||||
&:last-child{
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
.gallery_btn{
|
||||
margin-top: 4rem;
|
||||
}
|
||||
}
|
||||
> .content{
|
||||
// background: red;
|
||||
// width: 88rem;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
> i{
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
transform: translateX(-100%);
|
||||
left: -2.6rem;
|
||||
top: 1.8rem;
|
||||
width: 5rem;
|
||||
height: 5rem;
|
||||
display: flex;
|
||||
font-size: 4rem;
|
||||
color: #fff;
|
||||
background-color: #000;
|
||||
border-radius: 50%;
|
||||
align-items: center;
|
||||
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;
|
||||
// height: 89rem;
|
||||
height: 100%;
|
||||
// flex: 1;
|
||||
border-radius: 1.6rem;
|
||||
padding: 3.2rem 0rem;
|
||||
border: 2px solid #D0D0D0;
|
||||
: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;
|
||||
height: 100%;
|
||||
> .workspaceBox{
|
||||
> div{
|
||||
padding: 0rem 2.1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
> .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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user