Feat(云灵AI):对话接口对接完成
This commit is contained in:
lifizer
@@ -7,3 +7,11 @@ export function getSseConfigV1(data) {
|
||||
export function getCompletions(params) {
|
||||
return request.get('/v1/chat/sse/completions', params, { login: true })
|
||||
}
|
||||
|
||||
export function deleteChatItemByConversationId(id) {
|
||||
return request.delete('/v1/chat/message/' + id, {}, { login: true })
|
||||
}
|
||||
|
||||
export function getChatList(params) {
|
||||
return request.get('/v1/chat', params, { login: true })
|
||||
}
|
||||
|
||||
+17
@@ -0,0 +1,17 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
export function getAction(url, params) {
|
||||
return request.get(url, params)
|
||||
}
|
||||
|
||||
export function postAction(url, data) {
|
||||
return request.post(url, data)
|
||||
}
|
||||
|
||||
export function putAction(url, data) {
|
||||
return request.put(url, data)
|
||||
}
|
||||
|
||||
export function deleteAction(url, data) {
|
||||
return request.delete(url, data)
|
||||
}
|
||||
@@ -217,3 +217,8 @@ export function pushSystemStatic(data) {
|
||||
export function getAiSystemInfoSetting() {
|
||||
return request.get('/ai/systemInfo', {}, { login: false })
|
||||
}
|
||||
|
||||
// 获取AI系统预设话题列表
|
||||
export function getAiSystemInfoTopic() {
|
||||
return request.get('/ai/systemTopic', {}, { login: false })
|
||||
}
|
||||
|
||||
+84
-42
@@ -11,6 +11,10 @@ page {
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
background-color: #fff;
|
||||
background-size: 100% 100vh;
|
||||
background-image: url(https://wxapp.xdd618.com/api/file/pic/aiChat/bg.png);
|
||||
background-repeat: no-repeat;
|
||||
background-attachment: fixed;
|
||||
.fix-tabbar-header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
@@ -82,7 +86,6 @@ page {
|
||||
z-index: 2;
|
||||
min-height: 100vh;
|
||||
box-sizing: border-box;
|
||||
background: linear-gradient(180deg, #FFF0DC 0%, rgba(255,234,216,0.67) 57%, rgba(255,255,255,0) 100%);
|
||||
}
|
||||
.page-to-bottom {
|
||||
position: fixed;
|
||||
@@ -92,11 +95,32 @@ page {
|
||||
z-index: 8;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
justify-content: flex-end;
|
||||
padding: 0 24rpx;
|
||||
.new-chat {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 68rpx;
|
||||
padding: 0 24rpx;
|
||||
border-radius: 40rpx;
|
||||
line-height: 68rpx;
|
||||
font-size: 30rpx;
|
||||
background-color: #fff;
|
||||
box-shadow: 0rpx 6rpx 12rpx rgba(0,0,0,0.16);
|
||||
.btn-icon {
|
||||
display: block;
|
||||
width: 40rpx;
|
||||
height: 40rrpx;
|
||||
margin: 0 8rpx 0 0;
|
||||
}
|
||||
}
|
||||
.icon {
|
||||
display: block;
|
||||
width: 68rpx;
|
||||
height: 68rpx;
|
||||
margin: 0 0 0 24rpx;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0rpx 6rpx 12rpx rgba(0,0,0,0.16);
|
||||
}
|
||||
}
|
||||
.fix-page-bottom {
|
||||
@@ -106,8 +130,6 @@ page {
|
||||
right: 0;
|
||||
z-index: 9;
|
||||
padding: 24rpx 24rpx 48rpx 24rpx;
|
||||
background-color: #fff;
|
||||
box-shadow: 0rpx -20rpx 30rpx rgba(176,186,206,0.16);
|
||||
transition: all 0.2s;
|
||||
&.focus {
|
||||
transform: translateY(-48rpx);
|
||||
@@ -116,11 +138,34 @@ page {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
min-height: 100rpx;
|
||||
.history-wrap {
|
||||
width: 98rpx;
|
||||
height: 100rpx;
|
||||
border-radius: 30rpx;
|
||||
text-align: center;
|
||||
line-height: 100rpx;
|
||||
font-size: 30rpx;
|
||||
color: #333;
|
||||
background-color: #fff;
|
||||
box-shadow: 0rpx 6rpx 20rpx rgba(19,27,65,0.16);
|
||||
}
|
||||
.input-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 100rpx;
|
||||
width: calc(100% - 122rpx);
|
||||
padding: 6rpx 6rpx 6rpx 24rpx;
|
||||
border-radius: 30rpx;
|
||||
box-sizing: border-box;
|
||||
background-color: #fff;
|
||||
box-shadow: 0rpx 6rpx 20rpx rgba(19,27,65,0.16);
|
||||
}
|
||||
.input-model {
|
||||
.icon {
|
||||
display: block;
|
||||
width: 68rpx;
|
||||
height: 68rpx;
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
}
|
||||
}
|
||||
.input-wrap {
|
||||
@@ -130,21 +175,16 @@ page {
|
||||
position: relative;
|
||||
z-index: 5;
|
||||
width: 100%;
|
||||
max-height: 50vh;
|
||||
padding: 15rpx;
|
||||
margin: 0 24rpx;
|
||||
height: 88rpx;
|
||||
border: 0;
|
||||
box-sizing: border-box;
|
||||
border-radius: 20rpx;
|
||||
line-height: 50rpx;
|
||||
line-height: 88rpx;
|
||||
color: #333;
|
||||
font-size: 30rpx;
|
||||
overflow-y: auto;
|
||||
box-shadow: 0rpx 6rpx 20rpx rgba(19,27,65,0.16);
|
||||
}
|
||||
.placeholder-txt {
|
||||
position: absolute;
|
||||
left: 40rpx;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
z-index: 2;
|
||||
color: #999;
|
||||
@@ -155,8 +195,8 @@ page {
|
||||
.send-btn {
|
||||
.icon {
|
||||
display: block;
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
width: 88rpx;
|
||||
height: 88rpx;
|
||||
}
|
||||
}
|
||||
.sound-input-wrap {
|
||||
@@ -374,30 +414,32 @@ page {
|
||||
}
|
||||
.suggestion-list {
|
||||
.item {
|
||||
display: inline-flex;
|
||||
min-height: 44rpx;
|
||||
padding: 12rpx 12rpx 12rpx 18rpx;
|
||||
border-radius: 30rpx;
|
||||
margin: 24rpx 24rpx 0 0;
|
||||
font-size: 26rpx;
|
||||
color: #333;
|
||||
line-height: 38rpx;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
background-color: #fff;
|
||||
.label {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
.item-cont {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 44rpx;
|
||||
justify-content: space-between;
|
||||
height: 44rpx;
|
||||
margin: 0 16rpx 0 0;
|
||||
border-radius: 16rpx;
|
||||
background: rgba(249,248,246,0.39);
|
||||
padding: 12rpx 20rpx;
|
||||
border-radius: 30rpx;
|
||||
margin: 24rpx 0 0 0;
|
||||
font-size: 26rpx;
|
||||
color: #333;
|
||||
line-height: 44rpx;
|
||||
background-color: #fff;
|
||||
box-shadow: 0rpx 6rpx 12rpx rgba(0,0,0,0.1);
|
||||
.txt {
|
||||
flex: 1;
|
||||
max-width: calc(100% - 80rpx);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.pic {
|
||||
display: block;
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -414,7 +456,7 @@ page {
|
||||
color: #fff;
|
||||
font-size: 30rpx;
|
||||
line-height: 48rpx;
|
||||
background: linear-gradient(270deg, #FA9108 0%, #FFC25C 100%);
|
||||
background: #3D4CF1;
|
||||
box-shadow: 0rpx 6rpx 12rpx rgba(0,0,0,0.16);
|
||||
.copy-btn {
|
||||
display: inline-block;
|
||||
@@ -429,12 +471,12 @@ page {
|
||||
}
|
||||
.bottom-btns {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
justify-content: flex-start;
|
||||
padding: 20rpx 0 0 0;
|
||||
.item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 0 0 0 48rpx;
|
||||
margin: 0 48rpx 0 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
@@ -592,13 +634,13 @@ page {
|
||||
word-break: normal;
|
||||
white-space: initial;
|
||||
.cursor {
|
||||
color: #FA9108;
|
||||
color: #3D4CF1;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
.show-cursor {
|
||||
.cursor {
|
||||
color: #FA9108;
|
||||
color: #3D4CF1;
|
||||
opacity: 1;
|
||||
animation: blinking 1s infinite;
|
||||
}
|
||||
@@ -633,7 +675,7 @@ page {
|
||||
border-radius: 50%;
|
||||
}
|
||||
.loader::before {
|
||||
border-color: #FA9108 #0000;
|
||||
border-color: #3D4CF1 #0000;
|
||||
animation: inherit;
|
||||
animation-duration: .5s;
|
||||
animation-direction: reverse;
|
||||
@@ -661,7 +703,7 @@ page {
|
||||
width: 8px;
|
||||
margin: 0 24rpx;
|
||||
border-radius: 6px;
|
||||
background-color: #FA9108;
|
||||
background-color: #3D4CF1;
|
||||
}
|
||||
.one {
|
||||
height: 86rpx;
|
||||
|
||||
@@ -14,55 +14,61 @@
|
||||
<view class="item six" />
|
||||
<view class="item seven" />
|
||||
</view>
|
||||
<view class="bottom-body flex-center-between">
|
||||
<!-- 输入模式切换 -->
|
||||
<view
|
||||
class="input-model"
|
||||
@click="toggleInputModel"
|
||||
>
|
||||
输入模式
|
||||
<view v-if="inputModel === 'input'" class="bottom-body flex-center-between">
|
||||
<view class="history-wrap" @click="historyViewHandle">
|
||||
历史
|
||||
</view>
|
||||
<!-- 输入框 -->
|
||||
<view
|
||||
v-if="inputModel === 'input'"
|
||||
class="input-wrap flex-center-between"
|
||||
>
|
||||
<input
|
||||
v-model.trim="prompt"
|
||||
:show-confirm-bar="false"
|
||||
:disabled="loading"
|
||||
:maxlength="-1"
|
||||
class="inp"
|
||||
@confirm="sendHandle"
|
||||
@focus="promptInputFocusHandle"
|
||||
@blur="promptInputBlurHandle"
|
||||
/>
|
||||
<view v-if="!prompt && !inputOnFocus" class="placeholder-txt">请输入关键字...</view>
|
||||
</view>
|
||||
<view
|
||||
v-if="inputModel === 'input'"
|
||||
class="send-btn"
|
||||
>
|
||||
<view class="input-container">
|
||||
<!-- 输入模式切换 -->
|
||||
<view
|
||||
class="input-model"
|
||||
@click="toggleInputModel"
|
||||
>
|
||||
<image
|
||||
:src="webUrl + '/aiChat/microphone.png'"
|
||||
class="icon"
|
||||
mode="widthFix"
|
||||
/>
|
||||
</view>
|
||||
<!-- 输入框 -->
|
||||
<view class="input-wrap flex-center-between">
|
||||
<input
|
||||
v-model.trim="prompt"
|
||||
:show-confirm-bar="false"
|
||||
:disabled="loading"
|
||||
:maxlength="-1"
|
||||
class="inp"
|
||||
@confirm="sendHandle"
|
||||
@focus="promptInputFocusHandle"
|
||||
@blur="promptInputBlurHandle"
|
||||
/>
|
||||
<view v-if="!prompt && !inputOnFocus" class="placeholder-txt">发消息...</view>
|
||||
</view>
|
||||
<view
|
||||
class="send-btn"
|
||||
@click="sendHandle"
|
||||
>
|
||||
发送
|
||||
<image
|
||||
:src="webUrl + '/aiChat/send.png'"
|
||||
class="icon"
|
||||
mode="widthFix"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 语音输入 -->
|
||||
<view
|
||||
v-if="inputModel === 'sound'"
|
||||
class="sound-input-wrap"
|
||||
@touchstart="startRecord"
|
||||
@touchend="stopRecord"
|
||||
>
|
||||
<image
|
||||
:src="webUrl + '/icon-20.png'"
|
||||
class="icon"
|
||||
mode="widthFix"
|
||||
/>
|
||||
按住说话
|
||||
</view>
|
||||
</view>
|
||||
<!-- 语音输入 -->
|
||||
<view
|
||||
v-if="inputModel === 'sound'"
|
||||
class="sound-input-wrap"
|
||||
@touchstart="startRecord"
|
||||
@touchend="stopRecord"
|
||||
>
|
||||
<image
|
||||
:src="webUrl + '/icon-20.png'"
|
||||
class="icon"
|
||||
mode="widthFix"
|
||||
/>
|
||||
按住说话
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
@@ -87,10 +93,10 @@ export default {
|
||||
return {
|
||||
token: cookie.get('login_status'),
|
||||
userInfo: cookie.get('userInfo'),
|
||||
webUrl: this.$webUrl,
|
||||
webUrl: this.$VUE_APP_RESOURCES_URL,
|
||||
// 输入模式:input-键盘，sound-语音
|
||||
inputModel: 'input',
|
||||
prompt: '今天天气',
|
||||
prompt: '',
|
||||
recordManager: null,
|
||||
// 录音权限是否开通
|
||||
recordPermission: false,
|
||||
@@ -262,6 +268,9 @@ export default {
|
||||
this.$emit('send', { prompt: this.prompt })
|
||||
this.prompt = ''
|
||||
this.inputOnFocus = false
|
||||
},
|
||||
historyViewHandle() {
|
||||
this.$emit('history')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
+12
-4
@@ -1,6 +1,7 @@
|
||||
import {
|
||||
getSseConfigV1,
|
||||
getCompletions
|
||||
getCompletions,
|
||||
deleteChatItemByConversationId
|
||||
} from '@/api/chat/index'
|
||||
import { VUE_APP_API_URL } from '@/config'
|
||||
import settings from '@/config/baseSetting.js'
|
||||
@@ -12,7 +13,8 @@ export const chatMixins = {
|
||||
return {
|
||||
token: cookie.get('login_status'),
|
||||
userInfo: cookie.get('userInfo'),
|
||||
webUrl: this.$webUrl,
|
||||
webUrl: this.$VUE_APP_RESOURCES_URL,
|
||||
scrollData: {},
|
||||
scrollTop: 0,
|
||||
isScrollToBottom: false,
|
||||
// 状态栏高度
|
||||
@@ -49,6 +51,7 @@ export const chatMixins = {
|
||||
}
|
||||
},
|
||||
onPageScroll(e) {
|
||||
this.scrollData = e
|
||||
const scrollTop = e.scrollTop
|
||||
this.scrollTop = scrollTop
|
||||
const query = wx.createSelectorQuery().in(this)
|
||||
@@ -77,8 +80,6 @@ export const chatMixins = {
|
||||
_this.statusBarHeight = statusBar
|
||||
}
|
||||
})
|
||||
console.log(this.token)
|
||||
console.log(this.userInfo)
|
||||
_this.createdCallbak()
|
||||
},
|
||||
methods: {
|
||||
@@ -133,6 +134,13 @@ export const chatMixins = {
|
||||
init: 0
|
||||
})
|
||||
},
|
||||
// 大家都在问
|
||||
topicItemClickHandle(question) {
|
||||
this.streamReq({
|
||||
prompt: question,
|
||||
init: 0
|
||||
})
|
||||
},
|
||||
streamReq(params) {
|
||||
const _this = this
|
||||
// 需要校验登录状态
|
||||
|
||||
@@ -0,0 +1,156 @@
|
||||
<template>
|
||||
<view
|
||||
:class="{
|
||||
'show': showLayer
|
||||
}"
|
||||
class="history-wrap"
|
||||
>
|
||||
<view class="layer" @click="closeLayer" />
|
||||
<view
|
||||
:style="{
|
||||
'padding-top': statusBarHeight + 'px'
|
||||
}"
|
||||
class="history-container"
|
||||
>
|
||||
<view class="history-type">
|
||||
<view class="title">
|
||||
<view class="txt">30天内</view>
|
||||
<image
|
||||
:src="webUrl + '/aiChat/delete.png'"
|
||||
class="icon"
|
||||
mode="widthFix"
|
||||
/>
|
||||
</view>
|
||||
<view class="list-cont">
|
||||
<view
|
||||
v-for="(item, index) in list"
|
||||
:key="index"
|
||||
class="item"
|
||||
>
|
||||
<view class="item-txt one-t">
|
||||
{{ item.title }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
getChatList
|
||||
} from '@/api/chat/index'
|
||||
export default {
|
||||
name: 'AiHistoryList',
|
||||
props: {
|
||||
statusBarHeight: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
webUrl: this.$VUE_APP_RESOURCES_URL,
|
||||
showLayer: false,
|
||||
list: [],
|
||||
moreList: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showView() {
|
||||
this.showLayer = true
|
||||
getChatList().then(res => {
|
||||
const { success, data } = res
|
||||
if (success) {
|
||||
this.list = data['今天']
|
||||
this.moreList = data['超过30天']
|
||||
}
|
||||
})
|
||||
},
|
||||
closeLayer() {
|
||||
this.showLayer = false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.history-wrap {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 1001;
|
||||
transform: translateX(-100%);
|
||||
opacity: 0;
|
||||
transition: all 0.3s;
|
||||
.layer {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 2;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
.history-container {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
z-index: 5;
|
||||
width: 75%;
|
||||
padding: 40rpx;
|
||||
box-sizing: border-box;
|
||||
border-top-right-radius: 60rpx;
|
||||
border-bottom-right-radius: 60rpx;
|
||||
overflow-y: auto;
|
||||
background-color: #fff;
|
||||
.history-type + .history-type {
|
||||
padding: 40rpx 0 0 0;
|
||||
}
|
||||
.history-type {
|
||||
.title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.txt {
|
||||
font-size: 34rpx;
|
||||
line-height: 50rpx;
|
||||
}
|
||||
.icon {
|
||||
display: block;
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
}
|
||||
}
|
||||
.list-cont {
|
||||
padding: 24rpx 0 0 0;
|
||||
.item + .item {
|
||||
margin: 12rpx 0 0 0;
|
||||
}
|
||||
.item {
|
||||
.item-txt {
|
||||
display: inline-block;
|
||||
max-width: 100%;
|
||||
height: 60rpx;
|
||||
padding: 0 24rpx;
|
||||
box-sizing: border-box;
|
||||
border-radius: 30rpx;
|
||||
color: #333;
|
||||
font-size: 28rpx;
|
||||
line-height: 60rpx;
|
||||
background-color: #F1F2FF;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.show {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
+228
-40
@@ -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>
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
|
Before Width: | Height: | Size: 316 KiB After Width: | Height: | Size: 316 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 891 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 671 B |
Binary file not shown.
|
After Width: | Height: | Size: 722 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.0 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
Reference in New Issue
Block a user