liangxin/xdd-uniapp-new
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Feat(云灵AI):对话接口对接完成

Browse Source
This commit is contained in:
lifizer
2025-03-28 15:15:14 +08:00
parent aaf2e74cbb
commit d1bc3cc351
23 changed files with 564 additions and 131 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/aiChat/index.vue
+228 -40
View File
@@ -6,9 +6,10 @@
<hx-navbar
:back="true"
:fixed="true"
color="#333"
:statusBar="true"
transparent="hidden"
:pageScroll.sync="scrollData"
color="#333"
transparent="auto"
barPlaceholder="hidden"
title="云灵AI智能助手"
/>
@@ -19,6 +20,56 @@
}"
class="fix-tabbar-body"
>
<block v-if="chatMessageListLength < 1">
<view class="home-focus-wrap">
<view class="focus-guide-wrap">
<view class="guide-left">
<image
:src="webUrl + '/aiChat/logo-01.gif'"
class="avatar"
mode="widthFix"
/>
</view>
<view class="guide-right">
<view class="title">{{ settingInfo.helloMessageTitle }}</view>
<view class="content">{{ settingInfo.helloMessageContent }}</view>
</view>
</view>
</view>
<view class="topic-wrap">
<view class="title">
<image
:src="webUrl + '/aiChat/icon-01.png'"
class="icon"
mode="widthFix"
/>
<view class="txt">#大家都在问</view>
<image
:src="webUrl + '/aiChat/icon-01.png'"
class="icon"
mode="widthFix"
/>
</view>
<view class="list-wrap">
<view class="list-cont">
<view
v-for="(item, index) in topicList"
:key="index"
class="list-item"
@click="topicItemClickHandle(item.title)"
>
<image
v-if="item.isHot"
:src="webUrl + '/aiChat/hot.png'"
class="icon"
mode="widthFix"
/>
{{ item.title }}
</view>
</view>
</view>
</view>
</block>
<view class="chat-wrap">
<view v-if="chatMessageListLength > 0" class="chat-list-wrap">
<view
@@ -36,7 +87,7 @@
<view v-if="item.type === -2" class="chat-message-body">
<view class="avatar">
<image
:src="'http://resource.xdd618.com/v1ppYx3WizxJ72a1af114c9931828888d959066fa3e7-20240314125834.png'"
:src="webUrl + '/aiChat/avatar.png'"
class="chat-avatar"
mode="widthFix"
/>
@@ -59,6 +110,44 @@
<div class="loader" />
</view>
</view>
<view
v-if="!item.showCursor && item.nodes && item.nodes.length && !item.isError"
class="bottom-btns"
>
<!-- <button
open-type="share"
plain="true"
class="item"
@click="shareHandle"
>
<image
:src="webUrl + '/icon-25.png'"
class="icon"
mode="widthFix"
/>
分享
</button> -->
<view class="item" @click="copyContentHandle(item.content)">
<image
:src="webUrl + '/aiChat/icon-02.png'"
class="icon"
mode="widthFix"
/>
复制
</view>
<view
v-if="index === (chatMessageListLength - 1)"
class="item"
@click="regenerateHandle(item)"
>
<image
:src="webUrl + '/aiChat/icon-04.png'"
class="icon"
mode="widthFix"
/>
重新生成
</view>
</view>
</view>
</view>
<view
@@ -72,14 +161,16 @@
class="item"
@click="suggestionItemClickHandle(question)"
>
<view class="label">
<view class="item-cont">
<view class="txt">
{{ question }}
</view>
<image
:src="webUrl + '/icon-30.png'"
:src="webUrl + '/aiChat/icon-03.png'"
class="pic"
mode="widthFix"
/>
</view>
{{ question }}
</view>
</view>
</view>
@@ -89,12 +180,22 @@
<view id="bottom_postion" class="bottom-postion" />
</view>
</view>
<view
v-if="chatMessageListLength > 0 && !isScrollToBottom && !loading"
class="page-to-bottom"
>
<view class="page-to-bottom">
<view
v-if="chatNumber"
class="new-chat"
@click="createNewHandle"
>
<image
:src="webUrl + '/aiChat/icon-05.png'"
class="btn-icon"
mode="widthFix"
/>
开启新对话
</view>
<image
:src="webUrl + '/icon-29.png'"
v-if="chatMessageListLength > 0 && !isScrollToBottom && !loading"
:src="webUrl + '/aiChat/down.png'"
class="icon"
mode="widthFix"
@click="scrollToBottomHandle"
@@ -105,19 +206,52 @@
:loading="loading"
@send="streamReq"
@add="createNewHandle"
@history="historyViewHandle"
/>
<AiHistoryList
ref="history"
:status-bar-height="statusBarHeight"
/>
</view>
</template>
<script>
import { chatMixins } from '@/mixins/chatMixins.js'
import {
getAiSystemInfoSetting,
getAiSystemInfoTopic
} from '@/api/public'
import AiHistoryList from './components/historyList'
export default {
name: 'AiChatIndexPage',
components: {
AiHistoryList
},
mixins: [chatMixins],
data() {
return {
settingInfo: {},
topicList: [],
historyList: [],
moreList: []
}
},
methods: {
createdCallbak() {
this.$nextTick(() => {
this.scrollToBottomHandle()
getAiSystemInfoSetting().then(res => {
const { success, data } = res
if (success) {
this.settingInfo = data
}
})
getAiSystemInfoTopic().then(res => {
const { success, data } = res
if (success) {
this.topicList = data || []
}
})
})
},
// 创建新会话
@@ -127,34 +261,15 @@ export default {
this.showCursor = false
this.loading = false
this.getConfigLoading = false
this.infoResData = {}
this.chatMessageList = []
},
historyViewHandle() {
this.$refs.history.showView()
}
}
}
</script>
<style lang="scss" scoped>
.guide-wrap {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 706rpx;
padding: 24rpx 0 0 0;
margin: 0 auto;
.pic {
display: block;
width: 706rpx;
}
.pic2 {
position: absolute;
top: 42rpx;
left: 68rpx;
display: block;
width: 120rpx;
height: 120rpx;
}
}
.chat-wrap {
padding: 0 0 180rpx 0;
.chat-info-wrap {
@@ -163,12 +278,6 @@ export default {
padding: 0;
}
}
.no-info-list {
height: 240rpx;
line-height: 240rpx;
text-align: center;
color: #999;
}
}
.loading-wrap {
text-align: center;
@@ -180,7 +289,7 @@ export default {
}
.show-cursor .cursor {
display: inline-block;
color: #FA9108;
color: #3D4CF1;
font-weight: bold;
animation: blinking 1s infinite;
}
@@ -194,4 +303,83 @@ export default {
opacity: 0.0;
}
}
.focus-guide-wrap {
display: flex;
align-items: center;
justify-content: space-between;
padding: 60rpx 40rpx;
.guide-left {
.avatar {
display: block;
width: 267rpx;
height: 530rpx;
}
}
.guide-right {
padding: 30rpx;
margin: 0 0 0 40rpx;
border-radius: 20rpx;
font-size: 24rpx;
background-color: #fff;
box-shadow: 0rpx 12rpx 30rpx rgba(0,0,0,0.1);
.title {
font-weight: bold;
}
.content {
padding: 30rpx 0 0 0;
color: #999;
}
}
}
.topic-wrap {
width: 100%;
.title {
display: flex;
align-items: center;
justify-content: center;
.txt {
width: 186rpx;
height: 46rpx;
margin: 0 20rpx;
border-radius: 24rpx;
text-align: center;
line-height: 46rpx;
color: #fff;
font-size: 26rpx;
background-color: #3D4CF1;
}
.icon {
display: flex;
width: 40rpx;
}
}
.list-wrap {
width: 100%;
margin: 60rpx 0 0 0;
overflow-x: auto;
.list-cont {
display: flex;
flex-wrap: wrap;
width: 150%;
.list-item {
display: flex;
align-items: center;
height: 40rpx;
padding: 0 12rpx;
margin: 0 30rpx 30rpx 0;
border-radius: 20rpx;
font-size: 24rpx;
color: #666;
background: rgba(255,255,255,0.39);
box-shadow: 0rpx 6rpx 12rpx rgba(0,0,0,0.1);
.icon {
display: block;
width: 24rpx;
height: 24rpx;
margin: 0 8rpx 0 0;
}
}
}
}
}
</style>