Compare commits
No commits in common. "5292ede3c574338c55154c4395e60f67e7ca0716" and "c6271e9f4b892258a7c18bb28ffeb0f7b93e4f9e" have entirely different histories.
5292ede3c5
...
c6271e9f4b
@ -1,17 +0,0 @@
|
|||||||
# EditorConfig is awesome: https://EditorConfig.org
|
|
||||||
|
|
||||||
# top-most EditorConfig file
|
|
||||||
root = true
|
|
||||||
|
|
||||||
[*]
|
|
||||||
indent_style = space
|
|
||||||
indent_size = 4
|
|
||||||
tab_width = 4
|
|
||||||
end_of_line = lf
|
|
||||||
charset = utf-8
|
|
||||||
trim_trailing_whitespace = true
|
|
||||||
insert_final_newline = true
|
|
||||||
|
|
||||||
[*.md]
|
|
||||||
trim_trailing_whitespace = false
|
|
||||||
insert_final_newline = false
|
|
||||||
@ -2,7 +2,4 @@
|
|||||||
export const SCROLL_TO_BOTTOM = 'SCROLL_TO_BOTTOM'
|
export const SCROLL_TO_BOTTOM = 'SCROLL_TO_BOTTOM'
|
||||||
|
|
||||||
// 推荐帖子
|
// 推荐帖子
|
||||||
export const RECOMMEND_POSTS_TITLE = 'RECOMMEND_POSTS_TITLE'
|
export const RECOMMEND_POSTS_TITLE = 'RECOMMEND_POSTS_TITLE'
|
||||||
|
|
||||||
// 发送命令
|
|
||||||
export const SEND_COMMAND_TEXT = 'SEND_COMMAND_TEXT'
|
|
||||||
11
pages.json
11
pages.json
@ -13,17 +13,6 @@
|
|||||||
"navigationStyle": "custom"
|
"navigationStyle": "custom"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
|
||||||
"path": "pages/chat/ChatMainList",
|
|
||||||
"style": {
|
|
||||||
"navigationStyle": "custom",
|
|
||||||
"app-plus": {
|
|
||||||
"softinputMode": "adjustPan",
|
|
||||||
"bounce": "none",
|
|
||||||
"titleNView": false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
"path": "pages/chat/ChatQuickAccess",
|
"path": "pages/chat/ChatQuickAccess",
|
||||||
"style": {
|
"style": {
|
||||||
|
|||||||
@ -1,267 +1,59 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="area-input">
|
<view class="area-input">
|
||||||
<!-- 语音/键盘切换 -->
|
<!-- 发送语音 -->
|
||||||
<view class="input-container-voice" @click="toggleVoiceMode">
|
<view class="input-container-voice">
|
||||||
<image v-if="!isVoiceMode" src='/static/input_voice_icon.png'></image>
|
<image src='/static/input_voice_icon.png'></image>
|
||||||
<image v-else src='/static/input_keyboard_icon.png'></image>
|
|
||||||
</view>
|
</view>
|
||||||
|
<!-- 输入框 -->
|
||||||
<!-- 输入框/语音按钮容器 -->
|
<textarea
|
||||||
<view class="input-button-container">
|
class="textarea"
|
||||||
<textarea
|
type="text"
|
||||||
ref="textareaRef"
|
:placeholder="placeholder"
|
||||||
class="textarea"
|
cursor-spacing="65"
|
||||||
type="text"
|
confirm-type='done'
|
||||||
:placeholder="placeholder"
|
v-model="inputMessage"
|
||||||
cursor-spacing="65"
|
@confirm="sendMessage"
|
||||||
confirm-type='done'
|
@touchend="handleNoHideKeyboard"
|
||||||
v-model="inputMessage"
|
:confirm-hold="true"
|
||||||
@confirm="sendMessage"
|
auto-height
|
||||||
@focus="handleFocus"
|
:show-confirm-bar='false'
|
||||||
@blur="handleBlur"
|
:hold-keyboard="holdKeyboard"
|
||||||
@touchstart="handleTouchStart"
|
maxlength="300"
|
||||||
@touchend="handleTouchEnd"
|
/>
|
||||||
:confirm-hold="true"
|
<view class="input-container-send" @click="sendMessage">
|
||||||
auto-height
|
<image src='/static/input_send_icon.png'></image>
|
||||||
:show-confirm-bar='false'
|
|
||||||
:hold-keyboard="holdKeyboard"
|
|
||||||
:adjust-position="true"
|
|
||||||
maxlength="300"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<view
|
|
||||||
v-if="isVoiceMode"
|
|
||||||
class="hold-to-talk-button"
|
|
||||||
@touchstart.stop="startRecording"
|
|
||||||
@touchend.stop="stopRecording"
|
|
||||||
@touchmove.stop="handleTouchMove"
|
|
||||||
>
|
|
||||||
按住说话
|
|
||||||
</view>
|
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="input-container-send">
|
|
||||||
<view v-if="!isVoiceMode" class="input-container-send-btn" @click="sendMessage">
|
|
||||||
<image v-if="props.isSessionActive" src='/static/input_stop_icon.png'></image>
|
|
||||||
<image v-else src='/static/input_send_icon.png'></image>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 录音界面 -->
|
|
||||||
<uni-popup v-model:show="isRecording" position="center" :mask-click-able="false">
|
|
||||||
<view class="recording-popup">
|
|
||||||
<view class="recording-wave">
|
|
||||||
<!-- 波形动画 -->
|
|
||||||
<view class="wave-animation"></view>
|
|
||||||
</view>
|
|
||||||
<view class="recording-text">
|
|
||||||
{{ isSlideToText ? '松开发送 转文字' : '松开发送' }}
|
|
||||||
</view>
|
|
||||||
<view class="recording-cancel">
|
|
||||||
取消
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</uni-popup>
|
|
||||||
|
|
||||||
|
|
||||||
<!-- 语音结果界面 -->
|
|
||||||
<uni-popup v-model:show="showVoiceResult" position="center" :mask-click-able="false">
|
|
||||||
<view class="voice-result-popup">
|
|
||||||
<view class="voice-result-bubble">
|
|
||||||
{{ voiceText }}
|
|
||||||
</view>
|
|
||||||
<view class="voice-result-actions">
|
|
||||||
<view class="action-button cancel" @click="cancelVoice">取消</view>
|
|
||||||
<view class="action-button voice">发送原语音</view>
|
|
||||||
<view class="action-button send" @click="sendVoiceMessage">发送</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</uni-popup>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, watch, nextTick, onMounted, onUnmounted } from 'vue'
|
import { ref, watch } from 'vue'
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
inputMessage: String,
|
inputMessage: String,
|
||||||
holdKeyboard: Boolean,
|
holdKeyboard: Boolean
|
||||||
isSessionActive: Boolean,
|
|
||||||
stopRequest: Function
|
|
||||||
})
|
})
|
||||||
const emit = defineEmits(['update:inputMessage', 'send', 'noHideKeyboard', 'keyboardShow', 'keyboardHide', 'sendVoice'])
|
const emit = defineEmits(['update:inputMessage', 'send', 'noHideKeyboard'])
|
||||||
|
|
||||||
const textareaRef = ref(null)
|
|
||||||
const placeholder = ref('快告诉朵朵您在想什么~')
|
const placeholder = ref('快告诉朵朵您在想什么~')
|
||||||
const inputMessage = ref(props.inputMessage || '')
|
const inputMessage = ref(props.inputMessage || '')
|
||||||
const isFocused = ref(false)
|
|
||||||
const keyboardHeight = ref(0)
|
|
||||||
const isVoiceMode = ref(false)
|
|
||||||
const isRecording = ref(false)
|
|
||||||
const recordingTime = ref(0)
|
|
||||||
const recordingTimer = ref(null)
|
|
||||||
const voiceText = ref('')
|
|
||||||
const showVoiceResult = ref(false)
|
|
||||||
const isSlideToText = ref(false)
|
|
||||||
|
|
||||||
|
|
||||||
// 保持和父组件同步
|
// 保持和父组件同步
|
||||||
watch(() => props.inputMessage, (val) => {
|
watch(() => props.inputMessage, (val) => {
|
||||||
inputMessage.value = val
|
inputMessage.value = val
|
||||||
})
|
})
|
||||||
|
|
||||||
// 切换语音/文本模式
|
|
||||||
const toggleVoiceMode = () => {
|
|
||||||
isVoiceMode.value = !isVoiceMode.value
|
|
||||||
}
|
|
||||||
|
|
||||||
// 开始录音
|
|
||||||
const startRecording = () => {
|
|
||||||
isRecording.value = true
|
|
||||||
|
|
||||||
return
|
|
||||||
recordingTime.value = 0
|
|
||||||
// 启动录音计时器
|
|
||||||
recordingTimer.value = setInterval(() => {
|
|
||||||
recordingTime.value += 1
|
|
||||||
}, 1000)
|
|
||||||
|
|
||||||
// 调用uni-app录音API
|
|
||||||
uni.startRecord({
|
|
||||||
success: (res) => {
|
|
||||||
// 录音成功,处理录音文件
|
|
||||||
const tempFilePath = res.tempFilePath
|
|
||||||
// 这里可以添加语音转文字的逻辑
|
|
||||||
// 模拟语音转文字
|
|
||||||
setTimeout(() => {
|
|
||||||
voiceText.value = '这是语音转文字的结果'
|
|
||||||
showVoiceResult.value = true
|
|
||||||
}, 1000)
|
|
||||||
},
|
|
||||||
fail: (err) => {
|
|
||||||
console.error('录音失败:', err)
|
|
||||||
isRecording.value = false
|
|
||||||
clearInterval(recordingTimer.value)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
// 结束录音
|
|
||||||
const stopRecording = () => {
|
|
||||||
isRecording.value = false
|
|
||||||
|
|
||||||
return
|
|
||||||
clearInterval(recordingTimer.value)
|
|
||||||
|
|
||||||
// 如果录音时间小于1秒,取消录音
|
|
||||||
if (recordingTime.value < 1) {
|
|
||||||
uni.stopRecord()
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
// 停止录音
|
|
||||||
uni.stopRecord()
|
|
||||||
}
|
|
||||||
|
|
||||||
// 处理滑动事件
|
|
||||||
const handleTouchMove = (e) => {
|
|
||||||
// 检测滑动位置,判断是否需要转文字
|
|
||||||
// 这里只是示例逻辑,需要根据实际UI调整
|
|
||||||
const touchY = e.touches[0].clientY
|
|
||||||
// 假设滑动到某个位置以下转为文字
|
|
||||||
isSlideToText.value = touchY < 200
|
|
||||||
}
|
|
||||||
|
|
||||||
// 发送语音
|
|
||||||
const sendVoiceMessage = () => {
|
|
||||||
// 发送语音逻辑
|
|
||||||
emit('sendVoice', {
|
|
||||||
text: voiceText.value,
|
|
||||||
// 可以添加语音文件路径等信息
|
|
||||||
})
|
|
||||||
showVoiceResult.value = false
|
|
||||||
isVoiceMode.value = false
|
|
||||||
}
|
|
||||||
|
|
||||||
// 取消语音
|
|
||||||
const cancelVoice = () => {
|
|
||||||
showVoiceResult.value = false
|
|
||||||
isVoiceMode.value = false
|
|
||||||
}
|
|
||||||
|
|
||||||
// 监听键盘高度变化
|
|
||||||
onMounted(() => {
|
|
||||||
// 监听键盘弹起
|
|
||||||
uni.onKeyboardHeightChange((res) => {
|
|
||||||
keyboardHeight.value = res.height
|
|
||||||
if (res.height > 0) {
|
|
||||||
emit('keyboardShow', res.height)
|
|
||||||
} else {
|
|
||||||
emit('keyboardHide')
|
|
||||||
}
|
|
||||||
})
|
|
||||||
})
|
|
||||||
|
|
||||||
const sendMessage = () => {
|
const sendMessage = () => {
|
||||||
if (props.isSessionActive) {
|
if (!inputMessage.value.trim()) return;
|
||||||
// 如果会话进行中,调用停止请求函数
|
emit('send', inputMessage.value)
|
||||||
if (props.stopRequest) {
|
inputMessage.value = ''
|
||||||
props.stopRequest();
|
emit('update:inputMessage', inputMessage.value)
|
||||||
}
|
|
||||||
} else {
|
|
||||||
// 否则发送新消息
|
|
||||||
if (!inputMessage.value.trim()) return;
|
|
||||||
emit('send', inputMessage.value)
|
|
||||||
|
|
||||||
// 发送后保持焦点(可选)
|
|
||||||
if (props.holdKeyboard && textareaRef.value) {
|
|
||||||
nextTick(() => {
|
|
||||||
textareaRef.value.focus()
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const handleFocus = () => {
|
const handleNoHideKeyboard = () => {
|
||||||
isFocused.value = true
|
|
||||||
emit('noHideKeyboard')
|
emit('noHideKeyboard')
|
||||||
}
|
}
|
||||||
|
|
||||||
const handleBlur = () => {
|
|
||||||
isFocused.value = false
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleTouchStart = () => {
|
|
||||||
emit('noHideKeyboard')
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleTouchEnd = () => {
|
|
||||||
emit('noHideKeyboard')
|
|
||||||
}
|
|
||||||
|
|
||||||
// 手动聚焦输入框
|
|
||||||
const focusInput = () => {
|
|
||||||
if (textareaRef.value) {
|
|
||||||
textareaRef.value.focus()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 手动失焦输入框
|
|
||||||
const blurInput = () => {
|
|
||||||
if (textareaRef.value) {
|
|
||||||
textareaRef.value.blur()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 暴露方法给父组件
|
|
||||||
defineExpose({
|
|
||||||
focusInput,
|
|
||||||
blurInput,
|
|
||||||
isFocused,
|
|
||||||
toggleVoiceMode
|
|
||||||
})
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
@ -272,9 +64,7 @@ defineExpose({
|
|||||||
background-color: #FFFFFF;
|
background-color: #FFFFFF;
|
||||||
box-shadow: 0px 0px 20px 0px rgba(52,25,204,0.05);
|
box-shadow: 0px 0px 20px 0px rgba(52,25,204,0.05);
|
||||||
margin: 0 12px;
|
margin: 0 12px;
|
||||||
/* 确保输入框在安全区域内 */
|
|
||||||
margin-bottom: 8px;
|
|
||||||
|
|
||||||
.input-container-voice {
|
.input-container-voice {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@ -283,34 +73,13 @@ defineExpose({
|
|||||||
height: 44px;
|
height: 44px;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
align-self: flex-end;
|
align-self: flex-end;
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
image {
|
image {
|
||||||
width: 22px;
|
width: 22px;
|
||||||
height: 22px;
|
height: 22px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.input-button-container {
|
|
||||||
flex: 1;
|
|
||||||
position: relative;
|
|
||||||
height: 44px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hold-to-talk-button {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
color: #333333;
|
|
||||||
font-size: 16px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
background-color: #FFFFFF;
|
|
||||||
}
|
|
||||||
|
|
||||||
.input-container-send {
|
.input-container-send {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@ -319,132 +88,21 @@ defineExpose({
|
|||||||
height: 44px;
|
height: 44px;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
align-self: flex-end;
|
align-self: flex-end;
|
||||||
|
|
||||||
.input-container-send-btn {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
image {
|
image {
|
||||||
width: 28px;
|
width: 28px;
|
||||||
height: 28px;
|
height: 28px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.textarea {
|
.textarea {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
max-height: 92px;
|
max-height: 92px;
|
||||||
min-height: 44px;
|
min-height: 22px;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
line-height: 22px;
|
line-height: 22px;
|
||||||
padding: 3px 0 0;
|
margin-bottom: 2px;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 确保textarea在iOS上的样式正常 */
|
|
||||||
.textarea::-webkit-input-placeholder {
|
|
||||||
color: #CCCCCC;
|
|
||||||
}
|
|
||||||
.textarea:focus {
|
|
||||||
outline: none;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
</style>
|
||||||
/* 录音弹窗样式 */
|
|
||||||
.recording-popup {
|
|
||||||
width: 280px;
|
|
||||||
height: 280px;
|
|
||||||
background-color: rgba(0, 0, 0, 0.7);
|
|
||||||
border-radius: 20px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.recording-wave {
|
|
||||||
width: 160px;
|
|
||||||
height: 160px;
|
|
||||||
border-radius: 50%;
|
|
||||||
background-color: rgba(76, 217, 100, 0.3);
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.wave-animation {
|
|
||||||
width: 100px;
|
|
||||||
height: 100px;
|
|
||||||
/* 这里可以添加波形动画 */
|
|
||||||
background-image: url('/static/wave_icon.png');
|
|
||||||
background-size: contain;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-position: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.recording-text {
|
|
||||||
font-size: 16px;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.recording-cancel {
|
|
||||||
font-size: 14px;
|
|
||||||
color: #CCCCCC;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 语音结果弹窗样式 */
|
|
||||||
.voice-result-popup {
|
|
||||||
width: 300px;
|
|
||||||
background-color: white;
|
|
||||||
border-radius: 16px;
|
|
||||||
padding: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.voice-result-bubble {
|
|
||||||
background-color: #4CD964;
|
|
||||||
color: white;
|
|
||||||
padding: 15px;
|
|
||||||
border-radius: 18px;
|
|
||||||
border-top-left-radius: 4px;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
min-height: 60px;
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.voice-result-actions {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
|
|
||||||
.action-button {
|
|
||||||
padding: 8px 16px;
|
|
||||||
border-radius: 20px;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cancel {
|
|
||||||
color: #666666;
|
|
||||||
background-color: #F5F5F5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.voice {
|
|
||||||
color: #007AFF;
|
|
||||||
background-color: #E8F0FE;
|
|
||||||
}
|
|
||||||
|
|
||||||
.send {
|
|
||||||
color: white;
|
|
||||||
background-color: #007AFF;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -2,7 +2,7 @@
|
|||||||
<view class="chat-container" @touchend="handleTouchEnd">
|
<view class="chat-container" @touchend="handleTouchEnd">
|
||||||
<!-- 顶部的背景 -->
|
<!-- 顶部的背景 -->
|
||||||
<ChatTopBgImg class="chat-container-bg"></ChatTopBgImg>
|
<ChatTopBgImg class="chat-container-bg"></ChatTopBgImg>
|
||||||
|
|
||||||
<view class="chat-content">
|
<view class="chat-content">
|
||||||
<!-- 顶部自定义导航栏 -->
|
<!-- 顶部自定义导航栏 -->
|
||||||
<view class="nav-bar-container" :style="{
|
<view class="nav-bar-container" :style="{
|
||||||
@ -10,7 +10,7 @@
|
|||||||
}">
|
}">
|
||||||
<ChatTopNavBar @openDrawer="openDrawer"></ChatTopNavBar>
|
<ChatTopNavBar @openDrawer="openDrawer"></ChatTopNavBar>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 消息列表(可滚动区域) -->
|
<!-- 消息列表(可滚动区域) -->
|
||||||
<scroll-view
|
<scroll-view
|
||||||
:scroll-top="scrollTop"
|
:scroll-top="scrollTop"
|
||||||
@ -19,15 +19,15 @@
|
|||||||
class="area-msg-list"
|
class="area-msg-list"
|
||||||
>
|
>
|
||||||
<!-- welcome栏 -->
|
<!-- welcome栏 -->
|
||||||
<ChatTopWelcome class="chat-container-top-bannar"
|
<ChatTopWelcome class="chat-container-top-bannar"
|
||||||
:initPageImages="mainPageDataModel.initPageImages"
|
:initPageImages="mainPageDataModel.initPageImages"
|
||||||
:welcomeContent="mainPageDataModel.welcomeContent">
|
:welcomeContent="mainPageDataModel.welcomeContent">
|
||||||
</ChatTopWelcome>
|
</ChatTopWelcome>
|
||||||
|
|
||||||
<view class="area-msg-list-content" v-for="item in chatMsgList" :key="item.msgId" :id="item.msgId">
|
<view class="area-msg-list-content" v-for="item in chatMsgList" :key="item.msgId" :id="item.msgId">
|
||||||
<template v-if="item.msgType === MessageRole.AI">
|
<template v-if="item.msgType === MessageRole.AI">
|
||||||
<ChatCardAI class="message-item-ai" :text="item.msg">
|
<ChatCardAI class="message-item-ai" :text="item.msg">
|
||||||
<template #content v-if="item.toolCall">
|
<template #content v-if="item.toolCall">
|
||||||
<QuickBookingComponent v-if="item.toolCall.componentName === CompName.quickBookingCard"/>
|
<QuickBookingComponent v-if="item.toolCall.componentName === CompName.quickBookingCard"/>
|
||||||
<DiscoveryCardComponent v-else-if="item.toolCall.componentName === CompName.discoveryCard"/>
|
<DiscoveryCardComponent v-else-if="item.toolCall.componentName === CompName.discoveryCard"/>
|
||||||
<CreateServiceOrder v-else-if="item.toolCall.componentName === CompName.createWorkOrderCard"/>
|
<CreateServiceOrder v-else-if="item.toolCall.componentName === CompName.createWorkOrderCard"/>
|
||||||
@ -36,52 +36,47 @@
|
|||||||
<!-- 这个是底部 -->
|
<!-- 这个是底部 -->
|
||||||
<AttachListComponent v-if="item.question" :question="item.question" @replySent="handleReply"/>
|
<AttachListComponent v-if="item.question" :question="item.question" @replySent="handleReply"/>
|
||||||
</template>
|
</template>
|
||||||
</ChatCardAI>
|
</ChatCardAI>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template v-else-if="item.msgType === MessageRole.ME">
|
<template v-else-if="item.msgType === MessageRole.ME">
|
||||||
<ChatCardMine class="message-item-mine" :text="item.msg">
|
<ChatCardMine class="message-item-mine" :text="item.msg">
|
||||||
</ChatCardMine>
|
</ChatCardMine>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template v-else>
|
<template v-else>
|
||||||
<ChatCardOther class="message-item-other" :text="item.msg">
|
<ChatCardOther class="message-item-other" :text="item.msg">
|
||||||
<ChatMoreTips @replySent="handleReply" :itemList="mainPageDataModel.guideWords"/>
|
<ChatMoreTips @replySent="handleReply" :itemList="mainPageDataModel.guideWords"/>
|
||||||
|
|
||||||
<ActivityListComponent v-if="mainPageDataModel.activityList.length > 0" :activityList="mainPageDataModel.activityList"/>
|
<ActivityListComponent v-if="mainPageDataModel.activityList.length > 0" :activityList="mainPageDataModel.activityList"/>
|
||||||
|
|
||||||
<RecommendPostsComponent v-if="mainPageDataModel.recommendTheme.length > 0" :recommendThemeList="mainPageDataModel.recommendTheme" />
|
<RecommendPostsComponent v-if="mainPageDataModel.recommendTheme.length > 0" :recommendThemeList="mainPageDataModel.recommendTheme" />
|
||||||
</ChatCardOther>
|
</ChatCardOther>
|
||||||
</template>
|
</template>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
</scroll-view>
|
</scroll-view>
|
||||||
|
|
||||||
<!-- 输入框区域 -->
|
<!-- 输入框区域 -->
|
||||||
<view class="footer-area">
|
<view class="footer-area">
|
||||||
<ChatQuickAccess @replySent="handleReplyInstruct"/>
|
<ChatQuickAccess @replySent="handleReplyInstruct"/>
|
||||||
<ChatInputArea
|
<ChatInputArea
|
||||||
ref="inputAreaRef"
|
v-model="inputMessage"
|
||||||
v-model="inputMessage"
|
:holdKeyboard="holdKeyboard"
|
||||||
:holdKeyboard="holdKeyboard"
|
@send="sendMessageAction"
|
||||||
:is-session-active="isSessionActive"
|
@noHideKeyboard="handleNoHideKeyboard"
|
||||||
:stop-request="stopRequest"
|
/>
|
||||||
@send="sendMessageAction"
|
|
||||||
@noHideKeyboard="handleNoHideKeyboard"
|
|
||||||
@keyboardShow="handleKeyboardShow"
|
|
||||||
@keyboardHide="handleKeyboardHide"
|
|
||||||
/>
|
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup >
|
<script setup >
|
||||||
import { onMounted, nextTick, computed } from 'vue'
|
import { onMounted, nextTick } from 'vue'
|
||||||
import { ref } from 'vue'
|
import { ref } from 'vue'
|
||||||
import { defineEmits } from 'vue'
|
import { defineEmits } from 'vue'
|
||||||
import { onLoad } from '@dcloudio/uni-app';
|
import { onLoad } from '@dcloudio/uni-app';
|
||||||
import { SCROLL_TO_BOTTOM, RECOMMEND_POSTS_TITLE, SEND_COMMAND_TEXT } from '@/constant/constant'
|
import { SCROLL_TO_BOTTOM, RECOMMEND_POSTS_TITLE } from '@/constant/constant'
|
||||||
import { MessageRole, MessageType, CompName } from '../../model/ChatModel';
|
import { MessageRole, MessageType, CompName } from '../../model/ChatModel';
|
||||||
|
|
||||||
import ChatTopWelcome from './ChatTopWelcome.vue';
|
import ChatTopWelcome from './ChatTopWelcome.vue';
|
||||||
@ -94,46 +89,38 @@
|
|||||||
import ChatMoreTips from './ChatMoreTips.vue';
|
import ChatMoreTips from './ChatMoreTips.vue';
|
||||||
import ChatInputArea from './ChatInputArea.vue'
|
import ChatInputArea from './ChatInputArea.vue'
|
||||||
import CommandWrapper from '@/components/CommandWrapper/index.vue'
|
import CommandWrapper from '@/components/CommandWrapper/index.vue'
|
||||||
|
|
||||||
import QuickBookingComponent from '../module/booking/QuickBookingComponent.vue'
|
import QuickBookingComponent from '../module/booking/QuickBookingComponent.vue'
|
||||||
import DiscoveryCardComponent from '../module/discovery/DiscoveryCardComponent.vue';
|
import DiscoveryCardComponent from '../module/discovery/DiscoveryCardComponent.vue';
|
||||||
import ActivityListComponent from '../module/banner/ActivityListComponent.vue';
|
import ActivityListComponent from '../module/banner/ActivityListComponent.vue';
|
||||||
import RecommendPostsComponent from '../module/recommend/RecommendPostsComponent.vue';
|
import RecommendPostsComponent from '../module/recommend/RecommendPostsComponent.vue';
|
||||||
import AttachListComponent from '../module/attach/AttachListComponent.vue';
|
import AttachListComponent from '../module/attach/AttachListComponent.vue';
|
||||||
|
|
||||||
import CreateServiceOrder from '@/components/CreateServiceOrder/index.vue'
|
import CreateServiceOrder from '@/components/CreateServiceOrder/index.vue'
|
||||||
|
|
||||||
import { agentChatStream } from '@/request/api/AgentChatStream';
|
import { agentChatStream } from '@/request/api/AgentChatStream';
|
||||||
import { mainPageData } from '@/request/api/MainPageDataApi';
|
import { mainPageData } from '@/request/api/MainPageDataApi';
|
||||||
import { conversationMsgList, recentConversation } from '@/request/api/ConversationApi';
|
import { conversationMsgList, recentConversation } from '@/request/api/ConversationApi';
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/// 导航栏相关
|
/// 导航栏相关
|
||||||
const statusBarHeight = ref(20);
|
const statusBarHeight = ref(20);
|
||||||
/// 输入框组件引用
|
|
||||||
const inputAreaRef = ref(null);
|
|
||||||
|
|
||||||
const timer = ref(null)
|
const timer = ref(null)
|
||||||
/// focus时,点击页面的时候不收起键盘
|
/// focus时,点击页面的时候不收起键盘
|
||||||
const holdKeyboard = ref(false)
|
const holdKeyboard = ref(false)
|
||||||
/// 是否在键盘弹出,点击界面时关闭键盘
|
/// 是否在键盘弹出,点击界面时关闭键盘
|
||||||
const holdKeyboardFlag = ref(true)
|
const holdKeyboardFlag = ref(true)
|
||||||
/// 键盘高度
|
|
||||||
const keyboardHeight = ref(0)
|
|
||||||
/// 是否显示键盘
|
|
||||||
const isKeyboardShow = ref(false)
|
|
||||||
|
|
||||||
///(控制滚动位置)
|
///(控制滚动位置)
|
||||||
const scrollTop = ref(99999);
|
const scrollTop = ref(99999);
|
||||||
|
|
||||||
/// 会话列表
|
/// 会话列表
|
||||||
const chatMsgList = ref([])
|
const chatMsgList = ref([])
|
||||||
/// 输入口的输入消息
|
/// 输入口的输入消息
|
||||||
const inputMessage = ref('')
|
const inputMessage = ref('')
|
||||||
/// 加载中
|
|
||||||
let currentAIMsgIndex = 0
|
|
||||||
|
|
||||||
/// 从个渠道获取如二维,没有的时候就返回首页的数据
|
/// 从个渠道获取如二维,没有的时候就返回首页的数据
|
||||||
const sceneId = ref('')
|
const sceneId = ref('')
|
||||||
/// agentId 首页接口中获取
|
/// agentId 首页接口中获取
|
||||||
@ -144,15 +131,11 @@
|
|||||||
const mainPageDataModel = ref({})
|
const mainPageDataModel = ref({})
|
||||||
|
|
||||||
// 会话进行中标志
|
// 会话进行中标志
|
||||||
const isSessionActive = ref(false);
|
let isSessionActive = false;
|
||||||
// 请求任务引用
|
|
||||||
const requestTaskRef = ref(null);
|
|
||||||
/// 指令
|
/// 指令
|
||||||
let commonType = ''
|
let commonType = ''
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// 打开抽屉
|
// 打开抽屉
|
||||||
const emits = defineEmits(['openDrawer'])
|
const emits = defineEmits(['openDrawer'])
|
||||||
const openDrawer = () => {
|
const openDrawer = () => {
|
||||||
@ -161,37 +144,23 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
const handleTouchEnd = () => {
|
const handleTouchEnd = () => {
|
||||||
|
// #ifdef MP-WEIXIN
|
||||||
clearTimeout(timer.value)
|
clearTimeout(timer.value)
|
||||||
timer.value = setTimeout(() => {
|
timer.value = setTimeout(() => {
|
||||||
// 键盘弹出时点击界面则关闭键盘
|
// 键盘弹出时点击界面则关闭键盘
|
||||||
if (holdKeyboardFlag.value && isKeyboardShow.value) {
|
if (handleNoHideKeyboard) {
|
||||||
uni.hideKeyboard()
|
uni.hideKeyboard()
|
||||||
}
|
}
|
||||||
holdKeyboardFlag.value = true
|
holdKeyboardFlag.value = true
|
||||||
}, 100)
|
}, 50)
|
||||||
|
// #endif
|
||||||
}
|
}
|
||||||
|
|
||||||
// 点击输入框、发送按钮时,不收键盘
|
// 点击输入框、发送按钮时,不收键盘
|
||||||
const handleNoHideKeyboard = () => {
|
const handleNoHideKeyboard = () => {
|
||||||
|
// #ifdef MP-WEIXIN
|
||||||
holdKeyboardFlag.value = false
|
holdKeyboardFlag.value = false
|
||||||
}
|
// #endif
|
||||||
|
|
||||||
// 键盘弹起事件
|
|
||||||
const handleKeyboardShow = (height) => {
|
|
||||||
keyboardHeight.value = height
|
|
||||||
isKeyboardShow.value = true
|
|
||||||
holdKeyboard.value = true
|
|
||||||
// 键盘弹起时调整聊天内容的底部边距并滚动到底部
|
|
||||||
setTimeout(() => {
|
|
||||||
scrollToBottom()
|
|
||||||
}, 150)
|
|
||||||
}
|
|
||||||
|
|
||||||
// 键盘收起事件
|
|
||||||
const handleKeyboardHide = () => {
|
|
||||||
keyboardHeight.value = 0
|
|
||||||
isKeyboardShow.value = false
|
|
||||||
holdKeyboard.value = false
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/// 滚动到底部
|
/// 滚动到底部
|
||||||
@ -208,7 +177,7 @@
|
|||||||
scrollToBottom()
|
scrollToBottom()
|
||||||
}, 100)
|
}, 100)
|
||||||
}
|
}
|
||||||
|
|
||||||
/// 发送普通消息
|
/// 发送普通消息
|
||||||
const handleReply = (text) => {
|
const handleReply = (text) => {
|
||||||
sendMessage(text)
|
sendMessage(text)
|
||||||
@ -235,11 +204,8 @@
|
|||||||
if (!inputText.trim()) return;
|
if (!inputText.trim()) return;
|
||||||
handleNoHideKeyboard()
|
handleNoHideKeyboard()
|
||||||
sendMessage(inputText)
|
sendMessage(inputText)
|
||||||
// 发送消息后保持键盘状态
|
if(!isSessionActive) {
|
||||||
if (holdKeyboard.value && inputAreaRef.value) {
|
inputMessage.value = ''
|
||||||
setTimeout(() => {
|
|
||||||
inputAreaRef.value.focusInput()
|
|
||||||
}, 100)
|
|
||||||
}
|
}
|
||||||
setTimeoutScrollToBottom()
|
setTimeoutScrollToBottom()
|
||||||
}
|
}
|
||||||
@ -251,14 +217,14 @@
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
onMounted( async() => {
|
onMounted( async() => {
|
||||||
getMainPageData()
|
getMainPageData()
|
||||||
await loadRecentConversation()
|
await loadRecentConversation()
|
||||||
loadConversationMsgList()
|
loadConversationMsgList()
|
||||||
addNoticeListener()
|
addNoticeListener()
|
||||||
})
|
})
|
||||||
|
|
||||||
const addNoticeListener = () => {
|
const addNoticeListener = () => {
|
||||||
uni.$on(SCROLL_TO_BOTTOM, (value) => {
|
uni.$on(SCROLL_TO_BOTTOM, (value) => {
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
@ -272,17 +238,8 @@
|
|||||||
handleReply(value)
|
handleReply(value)
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
uni.$on(SEND_COMMAND_TEXT, (value) => {
|
|
||||||
console.log('SEND_COMMAND_TEXT:', value)
|
|
||||||
if(value && value.length > 0) {
|
|
||||||
commonType = 'Command.quickBooking'
|
|
||||||
sendMessage(value, true)
|
|
||||||
setTimeoutScrollToBottom()
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/// 获取最近一次的会话id
|
/// 获取最近一次的会话id
|
||||||
const loadRecentConversation = async() => {
|
const loadRecentConversation = async() => {
|
||||||
const res = await recentConversation()
|
const res = await recentConversation()
|
||||||
@ -290,7 +247,7 @@
|
|||||||
conversationId.value = res.data.conversationId
|
conversationId.value = res.data.conversationId
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/// 加载历史消息的数据
|
/// 加载历史消息的数据
|
||||||
let historyCurrentPageNum = 1
|
let historyCurrentPageNum = 1
|
||||||
const loadConversationMsgList = async() => {
|
const loadConversationMsgList = async() => {
|
||||||
@ -308,7 +265,7 @@
|
|||||||
scrollToBottom()
|
scrollToBottom()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/// 初始化数据 首次数据加载的时候
|
/// 初始化数据 首次数据加载的时候
|
||||||
const initData = () => {
|
const initData = () => {
|
||||||
const msg = {
|
const msg = {
|
||||||
@ -318,18 +275,18 @@
|
|||||||
}
|
}
|
||||||
chatMsgList.value.push(msg)
|
chatMsgList.value.push(msg)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/// 发送消息的参数拼接
|
/// 发送消息的参数拼接
|
||||||
const sendMessage = (message, isInstruct = false) => {
|
const sendMessage = (message, isInstruct = false) => {
|
||||||
if (isSessionActive.value) {
|
if (isSessionActive) {
|
||||||
uni.showToast({
|
uni.showToast({
|
||||||
title: '请等待当前回复完成',
|
title: '请等待当前回复完成',
|
||||||
icon: 'none'
|
icon: 'none'
|
||||||
});
|
});
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
isSessionActive.value = true;
|
isSessionActive = true;
|
||||||
const newMsg = {
|
const newMsg = {
|
||||||
msgId: `msg_${chatMsgList.value.length}`,
|
msgId: `msg_${chatMsgList.value.length}`,
|
||||||
msgType: MessageRole.ME,
|
msgType: MessageRole.ME,
|
||||||
@ -340,11 +297,10 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
chatMsgList.value.push(newMsg)
|
chatMsgList.value.push(newMsg)
|
||||||
inputMessage.value = '';
|
sendChat(message, isInstruct)
|
||||||
sendChat(message, isInstruct)
|
|
||||||
console.log("发送的新消息:",JSON.stringify(newMsg))
|
console.log("发送的新消息:",JSON.stringify(newMsg))
|
||||||
}
|
}
|
||||||
|
|
||||||
/// 打字机效果实现的变量
|
/// 打字机效果实现的变量
|
||||||
let loadingTimer = null;
|
let loadingTimer = null;
|
||||||
let typeWriterTimer = null;
|
let typeWriterTimer = null;
|
||||||
@ -359,7 +315,7 @@
|
|||||||
messageType: isInstruct ? 1 : 0,
|
messageType: isInstruct ? 1 : 0,
|
||||||
messageContent: isInstruct ? commonType : message
|
messageContent: isInstruct ? commonType : message
|
||||||
}
|
}
|
||||||
|
|
||||||
// 插入AI消息
|
// 插入AI消息
|
||||||
const aiMsg = {
|
const aiMsg = {
|
||||||
msgId: `msg_${chatMsgList.value.length}`,
|
msgId: `msg_${chatMsgList.value.length}`,
|
||||||
@ -372,8 +328,7 @@
|
|||||||
}
|
}
|
||||||
chatMsgList.value.push(aiMsg)
|
chatMsgList.value.push(aiMsg)
|
||||||
const aiMsgIndex = chatMsgList.value.length - 1
|
const aiMsgIndex = chatMsgList.value.length - 1
|
||||||
currentAIMsgIndex = aiMsgIndex
|
|
||||||
|
|
||||||
// 动态加载中动画
|
// 动态加载中动画
|
||||||
let dotCount = 1;
|
let dotCount = 1;
|
||||||
loadingTimer && clearInterval(loadingTimer);
|
loadingTimer && clearInterval(loadingTimer);
|
||||||
@ -381,16 +336,16 @@
|
|||||||
dotCount = dotCount % 3 + 1;
|
dotCount = dotCount % 3 + 1;
|
||||||
chatMsgList.value[aiMsgIndex].msg = '加载中' + '.'.repeat(dotCount);
|
chatMsgList.value[aiMsgIndex].msg = '加载中' + '.'.repeat(dotCount);
|
||||||
}, 400);
|
}, 400);
|
||||||
|
|
||||||
aiMsgBuffer = '';
|
aiMsgBuffer = '';
|
||||||
isTyping = false;
|
isTyping = false;
|
||||||
if (typeWriterTimer) {
|
if (typeWriterTimer) {
|
||||||
clearTimeout(typeWriterTimer);
|
clearTimeout(typeWriterTimer);
|
||||||
typeWriterTimer = null;
|
typeWriterTimer = null;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 流式接收内容
|
// 流式接收内容
|
||||||
const { promise, requestTask } = agentChatStream(args, (chunk) => {
|
agentChatStream(args, (chunk) => {
|
||||||
console.log('分段内容:', chunk)
|
console.log('分段内容:', chunk)
|
||||||
if (chunk && chunk.error) {
|
if (chunk && chunk.error) {
|
||||||
chatMsgList.value[aiMsgIndex].msg = '请求错误,请重试';
|
chatMsgList.value[aiMsgIndex].msg = '请求错误,请重试';
|
||||||
@ -398,7 +353,7 @@
|
|||||||
loadingTimer = null;
|
loadingTimer = null;
|
||||||
isTyping = false;
|
isTyping = false;
|
||||||
typeWriterTimer = null;
|
typeWriterTimer = null;
|
||||||
isSessionActive.value = false; // 出错也允许再次发送
|
isSessionActive = false; // 出错也允许再次发送
|
||||||
console.error('流式错误:', chunk.message, chunk.detail);
|
console.error('流式错误:', chunk.message, chunk.detail);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
@ -411,7 +366,7 @@
|
|||||||
}
|
}
|
||||||
// 把新内容追加到缓冲区
|
// 把新内容追加到缓冲区
|
||||||
aiMsgBuffer += chunk.content;
|
aiMsgBuffer += chunk.content;
|
||||||
|
|
||||||
// 启动打字机(只启动一次)
|
// 启动打字机(只启动一次)
|
||||||
if (!isTyping) {
|
if (!isTyping) {
|
||||||
isTyping = true;
|
isTyping = true;
|
||||||
@ -428,7 +383,7 @@
|
|||||||
loadingTimer = null;
|
loadingTimer = null;
|
||||||
isTyping = false;
|
isTyping = false;
|
||||||
typeWriterTimer = null;
|
typeWriterTimer = null;
|
||||||
|
|
||||||
// 补全:如果消息内容还停留在'加载中.'或为空,则给出友好提示
|
// 补全:如果消息内容还停留在'加载中.'或为空,则给出友好提示
|
||||||
const msg = chatMsgList.value[aiMsgIndex].msg;
|
const msg = chatMsgList.value[aiMsgIndex].msg;
|
||||||
console.log('msg:', msg)
|
console.log('msg:', msg)
|
||||||
@ -438,41 +393,33 @@
|
|||||||
chatMsgList.value[aiMsgIndex].msg = '';
|
chatMsgList.value[aiMsgIndex].msg = '';
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// 如果有组件
|
// 如果有组件
|
||||||
if(chunk.toolCall) {
|
if(chunk.toolCall) {
|
||||||
console.log('chunk.toolCall:', chunk.toolCall)
|
console.log('chunk.toolCall:', chunk.toolCall)
|
||||||
chatMsgList.value[aiMsgIndex].toolCall = chunk.toolCall
|
chatMsgList.value[aiMsgIndex].toolCall = chunk.toolCall
|
||||||
}
|
}
|
||||||
|
|
||||||
// 如果有问题,则设置问题
|
// 如果有问题,则设置问题
|
||||||
if(chunk.question && chunk.question.length > 0) {
|
if(chunk.question && chunk.question.length > 0) {
|
||||||
chatMsgList.value[aiMsgIndex].question = chunk.question
|
chatMsgList.value[aiMsgIndex].question = chunk.question
|
||||||
}
|
}
|
||||||
|
|
||||||
isSessionActive.value = false;
|
isSessionActive = false;
|
||||||
scrollToBottom();
|
scrollToBottom();
|
||||||
}
|
}
|
||||||
}, 50);
|
}, 50);
|
||||||
}
|
}
|
||||||
})
|
}).catch(e => {
|
||||||
|
isSessionActive = false; // 出错也允许再次发送
|
||||||
// 存储请求任务
|
console.log('error:', e)
|
||||||
requestTaskRef.value = requestTask;
|
|
||||||
|
|
||||||
// 可选:处理Promise完成/失败, 已经在回调中处理数据,此处无需再处理
|
|
||||||
promise.then(data => {
|
|
||||||
console.log('请求完成');
|
|
||||||
}).catch(err => {
|
|
||||||
isSessionActive.value = false; // 出错也允许再次发送
|
|
||||||
console.log('error:', err);
|
|
||||||
});
|
});
|
||||||
|
|
||||||
// 打字机函数
|
// 打字机函数
|
||||||
function typeWriter() {
|
function typeWriter() {
|
||||||
if (aiMsgBuffer.length > 0) {
|
if (aiMsgBuffer.length > 0) {
|
||||||
chatMsgList.value[aiMsgIndex].msg += aiMsgBuffer[0];
|
chatMsgList.value[aiMsgIndex].msg += aiMsgBuffer[0];
|
||||||
aiMsgBuffer = aiMsgBuffer.slice(1);
|
aiMsgBuffer = aiMsgBuffer.slice(1);
|
||||||
|
|
||||||
nextTick(() => {
|
nextTick(() => {
|
||||||
scrollToBottom();
|
scrollToBottom();
|
||||||
});
|
});
|
||||||
@ -481,40 +428,12 @@
|
|||||||
// 等待新内容到来,不结束
|
// 等待新内容到来,不结束
|
||||||
typeWriterTimer = setTimeout(typeWriter, 30);
|
typeWriterTimer = setTimeout(typeWriter, 30);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
// 停止请求函数
|
|
||||||
const stopRequest = () => {
|
|
||||||
if (requestTaskRef.value && requestTaskRef.value.abort) {
|
|
||||||
// 标记请求已中止,用于过滤后续可能到达的数据
|
|
||||||
requestTaskRef.value.isAborted = true;
|
|
||||||
// 中止请求
|
|
||||||
requestTaskRef.value.abort();
|
|
||||||
// 重置状态
|
|
||||||
isSessionActive.value = false;
|
|
||||||
const msg = chatMsgList.value[currentAIMsgIndex].msg;
|
|
||||||
if (!msg || msg === '加载中.' || msg.startsWith('加载中')) {
|
|
||||||
chatMsgList.value[currentAIMsgIndex].msg = '已终止请求,请重试';
|
|
||||||
}
|
|
||||||
// 清除计时器
|
|
||||||
if (loadingTimer) {
|
|
||||||
clearInterval(loadingTimer);
|
|
||||||
loadingTimer = null;
|
|
||||||
}
|
|
||||||
if (typeWriterTimer) {
|
|
||||||
clearTimeout(typeWriterTimer);
|
|
||||||
typeWriterTimer = null;
|
|
||||||
}
|
|
||||||
setTimeoutScrollToBottom()
|
|
||||||
// 清空请求引用
|
|
||||||
requestTaskRef.value = null;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
@import "styles/ChatMainList.scss";
|
@import "styles/ChatMainList.scss";
|
||||||
</style>
|
</style>
|
||||||
@ -1,4 +1,4 @@
|
|||||||
.chat-container {
|
.chat-container {
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
background-color: #E9F3F7;
|
background-color: #E9F3F7;
|
||||||
@ -6,9 +6,7 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
overflow: hidden !important;
|
overflow: hidden !important;
|
||||||
position: relative;
|
position: relative;
|
||||||
/* 确保在键盘弹起时布局正确 */
|
|
||||||
box-sizing: border-box;
|
|
||||||
|
|
||||||
.chat-container-bg {
|
.chat-container-bg {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
@ -22,12 +20,14 @@
|
|||||||
|
|
||||||
.chat-content {
|
.chat-content {
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
min-height: 0;
|
min-height: 0;
|
||||||
|
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.chat-container-top-bannar {
|
.chat-container-top-bannar {
|
||||||
@ -77,19 +77,13 @@
|
|||||||
.footer-area {
|
.footer-area {
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
padding: 4px 0 20px 0; /* 直接设置20px底部安全距离 */
|
padding: 4px 0 24px 0;
|
||||||
background-color: #E9F3F7;
|
background-color: #E9F3F7;
|
||||||
touch-action: pan-x;
|
touch-action: pan-x; /* 仅允许横向触摸滚动 */
|
||||||
overflow-x: auto;
|
overflow-x: auto; /* 允许横向滚动 */
|
||||||
overflow-y: hidden;
|
overflow-y: hidden; /* 禁止垂直滚动 */
|
||||||
|
/* 确保高度能够正确计算 */
|
||||||
min-height: fit-content;
|
min-height: fit-content;
|
||||||
/* 安卓键盘适配 - 使用相对定位配合adjustPan */
|
|
||||||
position: relative;
|
|
||||||
z-index: 1;
|
|
||||||
transition: padding-bottom 0.3s ease;
|
|
||||||
/* 确保输入区域始终可见 */
|
|
||||||
transform: translateZ(0);
|
|
||||||
-webkit-transform: translateZ(0);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.area-input {
|
.area-input {
|
||||||
|
|||||||
@ -31,7 +31,7 @@
|
|||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 底部退出按钮 -->
|
<!-- 底部退出按钮 -->
|
||||||
<text class="logout-btn" @click="handleLogout">退出登录</text>
|
<button class="logout-btn" @click="handleLogout">退出登录</button>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -140,11 +140,8 @@ const handleLogout = () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.logout-btn {
|
.logout-btn {
|
||||||
display: flex;
|
width: 90%;
|
||||||
align-items: center;
|
margin: 80rpx auto;
|
||||||
justify-content: center;
|
|
||||||
height: 42px;
|
|
||||||
margin-top: 40px;
|
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
color: #333;
|
color: #333;
|
||||||
border-radius: 8rpx;
|
border-radius: 8rpx;
|
||||||
|
|||||||
@ -8,7 +8,7 @@
|
|||||||
:interval="interval"
|
:interval="interval"
|
||||||
:duration="duration">
|
:duration="duration">
|
||||||
<swiper-item v-for="item in activityList" :key="item.id">
|
<swiper-item v-for="item in activityList" :key="item.id">
|
||||||
<view class="swiper-item" @click="handleClick(item)">
|
<view class="swiper-item">
|
||||||
<image :src="item.activityCover" mode="aspectFill"></image>
|
<image :src="item.activityCover" mode="aspectFill"></image>
|
||||||
<view class="corner-btn">快速预定</view>
|
<view class="corner-btn">快速预定</view>
|
||||||
</view>
|
</view>
|
||||||
@ -20,7 +20,6 @@
|
|||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref } from 'vue'
|
import { ref } from 'vue'
|
||||||
import { SEND_COMMAND_TEXT } from '@/constant/constant'
|
|
||||||
|
|
||||||
const autoplay = ref(true)
|
const autoplay = ref(true)
|
||||||
const interval = ref(3000)
|
const interval = ref(3000)
|
||||||
@ -33,10 +32,6 @@
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
const handleClick = (item) => {
|
|
||||||
uni.$emit(SEND_COMMAND_TEXT, '快速预定')
|
|
||||||
}
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
|
|||||||
@ -3,18 +3,18 @@
|
|||||||
<ModuleTitle :title="commodityDTO.title" />
|
<ModuleTitle :title="commodityDTO.title" />
|
||||||
<view class="container-scroll">
|
<view class="container-scroll">
|
||||||
<view class="mk-card-item" v-for="(item) in commodityDTO.commodityList" :key="item.commodityName">
|
<view class="mk-card-item" v-for="(item) in commodityDTO.commodityList" :key="item.commodityName">
|
||||||
<!-- <view class="card-badge">超值推荐</view> -->
|
<view class="card-badge">超值推荐</view>
|
||||||
<image class="card-img" :src="item.commodityIcon" mode="aspectFill" />
|
<image class="card-img" :src="item.commodityIcon" mode="widthFix" />
|
||||||
<view class="card-content">
|
<view class="card-content">
|
||||||
<view class="card-title-column">
|
<view class="card-title-column">
|
||||||
<text class="card-title">{{ item.commodityName }}</text>
|
<text class="card-title">{{ item.commodityName }}</text>
|
||||||
<view class="card-tags" v-for="(tag) in item.commodityTradeRuleList" :key="tag">
|
<view class="card-tags">
|
||||||
<text class="card-tag">{{ tag }}</text>
|
<text class="card-tag">随时可退</text>
|
||||||
|
<text class="card-tag">民俗表演</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<template v-for="(serviceItem, index) in item.commodityServices" :key="serviceItem.serviceTitle">
|
<view class="card-desc">· 往返观光车票</view>
|
||||||
<view v-if="index < 3" class="card-desc">· {{ serviceItem.serviceTitle }}</view>
|
<view class="card-desc">· 营业时间:9:00-22:00</view>
|
||||||
</template>
|
|
||||||
<view class="card-bottom-row">
|
<view class="card-bottom-row">
|
||||||
<view class="card-price-row">
|
<view class="card-price-row">
|
||||||
<text class="card-price-fu">¥</text>
|
<text class="card-price-fu">¥</text>
|
||||||
@ -72,7 +72,7 @@
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: start;
|
align-items: start;
|
||||||
width: 188px;
|
width: 188px;
|
||||||
// height: 244px;
|
height: 244px;
|
||||||
background-color: #ffffff;
|
background-color: #ffffff;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
margin-right: 8px;
|
margin-right: 8px;
|
||||||
@ -94,42 +94,27 @@
|
|||||||
width: 188px;
|
width: 188px;
|
||||||
height: 114px;
|
height: 114px;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
object-fit: cover; /* 确保图片不变形,保持比例裁剪 */
|
|
||||||
flex-shrink: 0; /* 防止图片被压缩 */
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-content {
|
.card-content {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
padding: 10px 12px 0 12px;
|
padding: 10px 12px 0 12px;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: space-between;
|
|
||||||
align-items: start;
|
align-items: start;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
flex: 1; /* 让内容区域占据剩余空间 */
|
|
||||||
overflow: hidden; /* 防止内容溢出 */
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-title-column {
|
.card-title-column {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: start;
|
align-items: start;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
width: 100%;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-title {
|
.card-title {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: #222;
|
color: #222;
|
||||||
width: 100%;
|
|
||||||
/* 限制标题最多显示两行 */
|
|
||||||
display: -webkit-box;
|
|
||||||
-webkit-box-orient: vertical;
|
|
||||||
-webkit-line-clamp: 2;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
line-height: 1.4;
|
|
||||||
max-height: 2.8em; /* 2行的高度 */
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-tags {
|
.card-tags {
|
||||||
|
|||||||
@ -7,17 +7,16 @@ const API = '/agent/assistant/chat';
|
|||||||
* 获取AI聊天流式信息(仅微信小程序支持)
|
* 获取AI聊天流式信息(仅微信小程序支持)
|
||||||
* @param {Object} params 请求参数
|
* @param {Object} params 请求参数
|
||||||
* @param {Function} onChunk 回调,每收到一段数据触发
|
* @param {Function} onChunk 回调,每收到一段数据触发
|
||||||
* @returns {Object} 包含Promise和requestTask的对象
|
* @returns {Promise}
|
||||||
*/
|
*/
|
||||||
function agentChatStream(params, onChunk) {
|
function agentChatStream(params, onChunk) {
|
||||||
let requestTask;
|
return new Promise((resolve, reject) => {
|
||||||
const promise = new Promise((resolve, reject) => {
|
|
||||||
const token = uni.getStorageSync('token');
|
const token = uni.getStorageSync('token');
|
||||||
let hasError = false;
|
let hasError = false;
|
||||||
|
|
||||||
console.log("发送请求内容: ", params)
|
console.log("发送请求内容: ", params)
|
||||||
// #ifdef MP-WEIXIN
|
// #ifdef MP-WEIXIN
|
||||||
requestTask = uni.request({
|
const requestTask = uni.request({
|
||||||
url: BASE_URL + API, // 替换为你的接口地址
|
url: BASE_URL + API, // 替换为你的接口地址
|
||||||
method: 'POST',
|
method: 'POST',
|
||||||
data: params,
|
data: params,
|
||||||
@ -29,21 +28,22 @@ function agentChatStream(params, onChunk) {
|
|||||||
},
|
},
|
||||||
responseType: 'arraybuffer',
|
responseType: 'arraybuffer',
|
||||||
success(res) {
|
success(res) {
|
||||||
resolve(res.data);
|
resolve(res.data);
|
||||||
},
|
},
|
||||||
fail(err) {
|
fail(err) {
|
||||||
console.log("====> ", JSON.stringify(err))
|
console.log("====> ", JSON.stringify(err))
|
||||||
reject(err);
|
reject(err);
|
||||||
},
|
},
|
||||||
complete(res) {
|
complete(res) {
|
||||||
if(res.statusCode !== 200) {
|
if(res.statusCode !== 200) {
|
||||||
console.log("====> ", JSON.stringify(res))
|
console.log("====> ", JSON.stringify(res))
|
||||||
if (onChunk) {
|
|
||||||
onChunk({ error: true, message: '服务器错误', detail: res });
|
if (onChunk) {
|
||||||
}
|
onChunk({ error: true, message: '服务器错误', detail: res });
|
||||||
reject(res);
|
}
|
||||||
}
|
reject(res);
|
||||||
}
|
}
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
requestTask.onHeadersReceived(res => {
|
requestTask.onHeadersReceived(res => {
|
||||||
@ -59,12 +59,11 @@ function agentChatStream(params, onChunk) {
|
|||||||
});
|
});
|
||||||
|
|
||||||
requestTask.onChunkReceived(res => {
|
requestTask.onChunkReceived(res => {
|
||||||
// 检查请求是否已被中止
|
if (hasError) return;
|
||||||
if (hasError || requestTask.isAborted) return;
|
|
||||||
const base64 = uni.arrayBufferToBase64(res.data);
|
const base64 = uni.arrayBufferToBase64(res.data);
|
||||||
let data = '';
|
let data = '';
|
||||||
try {
|
try {
|
||||||
data = decodeURIComponent(escape(weAtob(base64)));
|
data = decodeURIComponent(escape(atob(base64)));
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
// 某些平台可能不支持 atob,可以直接用 base64
|
// 某些平台可能不支持 atob,可以直接用 base64
|
||||||
data = base64;
|
data = base64;
|
||||||
@ -76,62 +75,8 @@ function agentChatStream(params, onChunk) {
|
|||||||
});
|
});
|
||||||
// #endif
|
// #endif
|
||||||
});
|
});
|
||||||
|
|
||||||
return {
|
|
||||||
promise,
|
|
||||||
requestTask
|
|
||||||
};
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// window.atob兼容性处理
|
|
||||||
const weAtob = (string) => {
|
|
||||||
const b64re = /^(?:[A-Za-z\d+/]{4})*?(?:[A-Za-z\d+/]{2}(?:==)?|[A-Za-z\d+/]{3}=?)?$/;
|
|
||||||
const b64 = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=';
|
|
||||||
// 去除空白字符
|
|
||||||
string = String(string).replace(/[\t\n\f\r ]+/g, '');
|
|
||||||
// 验证 Base64 编码
|
|
||||||
if (!b64re.test(string)) {
|
|
||||||
throw new TypeError(
|
|
||||||
// eslint-disable-next-line quotes
|
|
||||||
"Failed to execute 'atob' on 'Window': The string to be decoded is not correctly encoded."
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
// 填充字符
|
|
||||||
string += '=='.slice(2 - (string.length & 3));
|
|
||||||
|
|
||||||
let bitmap,
|
|
||||||
result = '',
|
|
||||||
r1,
|
|
||||||
r2,
|
|
||||||
i = 0;
|
|
||||||
|
|
||||||
for (; i < string.length;) {
|
|
||||||
bitmap =
|
|
||||||
(b64.indexOf(string.charAt(i++)) << 18) |
|
|
||||||
(b64.indexOf(string.charAt(i++)) << 12) |
|
|
||||||
((r1 = b64.indexOf(string.charAt(i++))) << 6) |
|
|
||||||
(r2 = b64.indexOf(string.charAt(i++)));
|
|
||||||
|
|
||||||
if (r1 === 64) {
|
|
||||||
result += String.fromCharCode((bitmap >> 16) & 255);
|
|
||||||
} else if (r2 === 64) {
|
|
||||||
result += String.fromCharCode(
|
|
||||||
(bitmap >> 16) & 255,
|
|
||||||
(bitmap >> 8) & 255
|
|
||||||
);
|
|
||||||
} else {
|
|
||||||
result += String.fromCharCode(
|
|
||||||
(bitmap >> 16) & 255,
|
|
||||||
(bitmap >> 8) & 255,
|
|
||||||
bitmap & 255
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return result;
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
// 解析SSE分段数据
|
// 解析SSE分段数据
|
||||||
function parseSSEChunk(raw) {
|
function parseSSEChunk(raw) {
|
||||||
// 拆分为多段
|
// 拆分为多段
|
||||||
@ -152,4 +97,4 @@ function parseSSEChunk(raw) {
|
|||||||
return results;
|
return results;
|
||||||
}
|
}
|
||||||
|
|
||||||
export { agentChatStream }
|
export { agentChatStream }
|
||||||
@ -1,5 +1,4 @@
|
|||||||
import { BASE_URL } from "../../constant/base";
|
import { BASE_URL } from "../../constant/base";
|
||||||
import { goLogin } from "@/hooks/useGoLogin";
|
|
||||||
|
|
||||||
const defaultConfig = {
|
const defaultConfig = {
|
||||||
header: {
|
header: {
|
||||||
@ -15,7 +14,7 @@ function request(url, args = {}, method = 'POST', customConfig = {}) {
|
|||||||
}
|
}
|
||||||
// 动态获取 token
|
// 动态获取 token
|
||||||
const token = uni.getStorageSync('token');
|
const token = uni.getStorageSync('token');
|
||||||
|
|
||||||
let header = {
|
let header = {
|
||||||
...defaultConfig.header,
|
...defaultConfig.header,
|
||||||
...customConfig.header
|
...customConfig.header
|
||||||
@ -27,16 +26,16 @@ function request(url, args = {}, method = 'POST', customConfig = {}) {
|
|||||||
if (token) {
|
if (token) {
|
||||||
header.Authorization = `Bearer ${token}`;
|
header.Authorization = `Bearer ${token}`;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
console.log("请求头customConfig:" + JSON.stringify(customConfig))
|
console.log("请求头customConfig:" + JSON.stringify(customConfig))
|
||||||
|
|
||||||
const config = {
|
const config = {
|
||||||
...defaultConfig,
|
...defaultConfig,
|
||||||
...customConfig,
|
...customConfig,
|
||||||
header
|
header
|
||||||
};
|
};
|
||||||
|
|
||||||
console.log("请求接口:" + url)
|
console.log("请求接口:" + url)
|
||||||
console.log("请求头:" + JSON.stringify(config))
|
console.log("请求头:" + JSON.stringify(config))
|
||||||
console.log("请求参数:" + JSON.stringify(args))
|
console.log("请求参数:" + JSON.stringify(args))
|
||||||
@ -50,10 +49,6 @@ function request(url, args = {}, method = 'POST', customConfig = {}) {
|
|||||||
success: (res) => {
|
success: (res) => {
|
||||||
console.log("请求响应:" + JSON.stringify(res))
|
console.log("请求响应:" + JSON.stringify(res))
|
||||||
resolve(res.data)
|
resolve(res.data)
|
||||||
if(res.statusCode && res.statusCode === 424) {
|
|
||||||
uni.setStorageSync('token', '')
|
|
||||||
goLogin();
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
fail: (err) => {
|
fail: (err) => {
|
||||||
console.error("请求失败:", err);
|
console.error("请求失败:", err);
|
||||||
@ -74,4 +69,4 @@ request.get = function(url, args = {}, config = {}) {
|
|||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
export default request;
|
export default request;
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.3 KiB |
Loading…
Reference in New Issue
Block a user