Compare commits
2 Commits
1268c2fd9c
...
2e80cc075a
| Author | SHA1 | Date | |
|---|---|---|---|
|
2e80cc075a | ||
|
|
e66713b51f |
109
src/api/aiChat/ai_index.js
Normal file
109
src/api/aiChat/ai_index.js
Normal file
@@ -0,0 +1,109 @@
|
|||||||
|
import request from '@/utils/ai_request'
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取聊天历史记录
|
||||||
|
* @param {Object} params 请求参数
|
||||||
|
* @param {string} params.conversationId 会话ID
|
||||||
|
* @param {string} params.user 用户ID
|
||||||
|
* @param {number} [params.limit=20] 返回记录数量
|
||||||
|
* @param {string} [params.beforeId] 获取此ID之前的记录
|
||||||
|
* @returns {Promise} 包含历史记录的Promise
|
||||||
|
*/
|
||||||
|
export const getHistory = ({
|
||||||
|
conversationId,
|
||||||
|
user,
|
||||||
|
limit = 20,
|
||||||
|
beforeId
|
||||||
|
}) => {
|
||||||
|
const params = {
|
||||||
|
conversationId,
|
||||||
|
user,
|
||||||
|
limit
|
||||||
|
}
|
||||||
|
|
||||||
|
if (beforeId) {
|
||||||
|
params.beforeId = beforeId
|
||||||
|
}
|
||||||
|
|
||||||
|
return request({
|
||||||
|
url: '/aitutor/aichat/getMessagesToUser',
|
||||||
|
method: 'get',
|
||||||
|
params
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 发送反馈（点赞/点踩）
|
||||||
|
* @param {Object} params 请求参数
|
||||||
|
* @param {string} params.messageId 消息ID
|
||||||
|
* @param {number} params.action 1-点赞 0-点踩
|
||||||
|
* @param {string} params.user 用户ID
|
||||||
|
* @returns {Promise} 包含操作结果的Promise
|
||||||
|
*/
|
||||||
|
export const sendFeedback = ({
|
||||||
|
messageId,
|
||||||
|
action,
|
||||||
|
user
|
||||||
|
}) => {
|
||||||
|
return request({
|
||||||
|
url: '/aitutor/aichat/feedback',
|
||||||
|
method: 'post',
|
||||||
|
data: {
|
||||||
|
message_id: messageId,
|
||||||
|
rating: action === 1 ? 'like' : 'dislike',
|
||||||
|
user
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 上传文件
|
||||||
|
* @param {FormData} formData 包含文件的FormData
|
||||||
|
* @param {string} user 用户ID
|
||||||
|
* @returns {Promise} 包含文件URL的Promise
|
||||||
|
*/
|
||||||
|
export const uploadFile = (formData, user) => {
|
||||||
|
formData.append('user', user)
|
||||||
|
return request({
|
||||||
|
url: '/aitutor/aichat/files/upload',
|
||||||
|
method: 'post',
|
||||||
|
data: formData,
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'multipart/form-data'
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 创建新会话
|
||||||
|
* @param {string} user 用户ID
|
||||||
|
* @param {string} title 会话标题
|
||||||
|
* @returns {Promise} 包含新会话ID的Promise
|
||||||
|
*/
|
||||||
|
export const createConversation = (user, title) => {
|
||||||
|
return request({
|
||||||
|
url: '/aitutor/aichat/conversation/create',
|
||||||
|
method: 'post',
|
||||||
|
data: {
|
||||||
|
user,
|
||||||
|
title
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 删除会话
|
||||||
|
* @param {string} conversationId 会话ID
|
||||||
|
* @param {string} user 用户ID
|
||||||
|
* @returns {Promise} 包含操作结果的Promise
|
||||||
|
*/
|
||||||
|
export const deleteConversation = (conversationId, user) => {
|
||||||
|
return request({
|
||||||
|
url: '/aitutor/aichat/conversation/delete',
|
||||||
|
method: 'post',
|
||||||
|
data: {
|
||||||
|
conversation_id: conversationId,
|
||||||
|
user
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
BIN
src/assets/ai_icon/AI.png
Normal file
BIN
src/assets/ai_icon/AI.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
1
src/assets/ai_icon/add.svg
Normal file
1
src/assets/ai_icon/add.svg
Normal file
@@ -0,0 +1 @@
|
|||||||
|
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1754037771551" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8573" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M972.8 460.8H51.2c-28.16 0-51.2 23.04-51.2 51.2s23.04 51.2 51.2 51.2h921.6c28.16 0 51.2-23.04 51.2-51.2s-23.04-51.2-51.2-51.2z" fill="#4F46E5" p-id="8574"></path><path d="M512 0c-28.16 0-51.2 23.04-51.2 51.2v921.6c0 28.16 23.04 51.2 51.2 51.2s51.2-23.04 51.2-51.2V51.2c0-28.16-23.04-51.2-51.2-51.2z" fill="#4F46E5" p-id="8575"></path></svg>
|
||||||
|
After Width: | Height: | Size: 673 B |
1
src/assets/ai_icon/good.svg
Normal file
1
src/assets/ai_icon/good.svg
Normal file
@@ -0,0 +1 @@
|
|||||||
|
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1753693561642" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11887" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M64 483.04V872c0 37.216 30.144 67.36 67.36 67.36H192V416.32l-60.64-0.64A67.36 67.36 0 0 0 64 483.04zM857.28 344.992l-267.808 1.696c12.576-44.256 18.944-83.584 18.944-118.208 0-78.56-68.832-155.488-137.568-145.504-60.608 8.8-67.264 61.184-67.264 126.816v59.264c0 76.064-63.84 140.864-137.856 148L256 416.96v522.4h527.552a102.72 102.72 0 0 0 100.928-83.584l73.728-388.96a102.72 102.72 0 0 0-100.928-121.824z" p-id="11888" fill="#4F46E5"></path></svg>
|
||||||
|
After Width: | Height: | Size: 782 B |
1
src/assets/ai_icon/history.svg
Normal file
1
src/assets/ai_icon/history.svg
Normal file
@@ -0,0 +1 @@
|
|||||||
|
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1754032734502" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5374" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M0 505.135c0-0.723 0.723-2.168 0.723-2.89 3.613-18.79 13.007-33.243 29.628-42.637 7.227-4.336 15.176-5.782 23.125-6.504H961.13c20.234 0 35.41 8.672 46.973 24.57 8.671 12.285 12.285 25.293 10.84 40.469-2.891 23.124-18.79 43.359-42.637 49.14-6.504 1.445-13.008 2.168-20.234 2.168H58.535c-23.848 0-39.746-11.563-51.308-31.074-3.614-5.781-5.059-12.285-6.504-18.79 0-0.722-0.723-2.167-0.723-2.89v-11.562zM0 205.234c0-0.723 0.723-2.168 0.723-2.891 3.613-18.789 13.007-33.242 29.628-42.637 7.227-4.335 15.176-5.78 23.125-6.503H961.13c20.234 0 35.41 8.671 46.973 24.57 8.671 12.285 12.285 25.293 10.84 40.468-2.891 23.125-18.79 43.36-42.637 49.14-6.504 1.446-13.008 2.169-20.234 2.169H58.535c-23.848 0-39.746-11.563-51.308-31.074-3.614-5.782-5.059-12.285-6.504-18.79 0-1.445-0.723-2.89-0.723-3.613v-10.84zM51.308 862.848c-1.445 0-2.168-0.722-3.613-0.722-16.62-3.614-28.183-13.008-36.855-27.461-6.504-10.84-9.395-22.402-8.672-34.688 2.168-24.57 19.512-46.25 44.804-52.03 5.06-1.446 10.84-1.446 16.622-1.446h899.703c19.512 0 34.687 8.672 46.25 23.848 7.226 10.117 11.562 22.402 11.562 34.687 0 14.453-5.058 27.46-14.453 38.3-9.394 10.84-21.68 17.344-36.132 18.79-0.723 0-1.446 0-2.168 0.722H51.308zM1024 189.335c-0.723-2.168-0.723-5.058-1.445-7.226l1.445 7.226z" fill="#000000" p-id="5375"></path></svg>
|
||||||
|
After Width: | Height: | Size: 1.6 KiB |
1
src/assets/ai_icon/newChat.svg
Normal file
1
src/assets/ai_icon/newChat.svg
Normal file
@@ -0,0 +1 @@
|
|||||||
|
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1754032784723" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7240" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M275.413 810.667L85.333 960V170.667A42.667 42.667 0 0 1 128 128h768a42.667 42.667 0 0 1 42.667 42.667V768A42.667 42.667 0 0 1 896 810.667H275.413z m193.92-384h-128V512h128v128h85.334V512h128v-85.333h-128v-128h-85.334v128z" fill="#2c2c2c" p-id="7241"></path></svg>
|
||||||
|
After Width: | Height: | Size: 596 B |
1
src/assets/ai_icon/search.svg
Normal file
1
src/assets/ai_icon/search.svg
Normal file
@@ -0,0 +1 @@
|
|||||||
|
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1754534613016" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6268" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M948.48 833.92l-185.6-183.68c-3.84-3.84-8.32-6.4-13.44-7.68C801.28 580.48 832 501.76 832 416 832 221.44 674.56 64 480 64 285.44 64 128 221.44 128 416 128 610.56 285.44 768 480 768c85.76 0 163.84-30.72 225.28-81.28 1.92 4.48 4.48 8.96 8.32 12.8l185.6 183.68c14.08 13.44 35.84 13.44 49.92 0S962.56 847.36 948.48 833.92zM480 704C320.64 704 192 575.36 192 416 192 256.64 320.64 128 480 128 639.36 128 768 256.64 768 416 768 575.36 639.36 704 480 704z" p-id="6269"></path></svg>
|
||||||
|
After Width: | Height: | Size: 806 B |
1
src/assets/ai_icon/send.svg
Normal file
1
src/assets/ai_icon/send.svg
Normal file
@@ -0,0 +1 @@
|
|||||||
|
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1754040545229" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1872" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M24.649143 399.36L965.485714 7.314286a29.257143 29.257143 0 0 1 39.643429 34.084571l-234.349714 937.472a29.257143 29.257143 0 0 1-47.104 15.36l-203.483429-169.545143a29.257143 29.257143 0 0 0-39.424 1.828572l-104.374857 104.301714a29.257143 29.257143 0 0 1-49.883429-20.626286V689.737143a29.257143 29.257143 0 0 1 8.557715-20.699429l424.448-424.448-501.101715 375.881143a29.257143 29.257143 0 0 1-36.278857-0.950857L17.188571 448.804571a29.257143 29.257143 0 0 1 7.460572-49.444571z" p-id="1873" fill="#4F46E5"></path></svg>
|
||||||
|
After Width: | Height: | Size: 857 B |
1
src/assets/ai_icon/tread.svg
Normal file
1
src/assets/ai_icon/tread.svg
Normal file
@@ -0,0 +1 @@
|
|||||||
|
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1753693581732" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13840" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M611.188364 651.962182h226.56a93.090909 93.090909 0 0 0 91.834181-108.334546l-61.905454-372.689454A93.090909 93.090909 0 0 0 775.889455 93.090909H372.968727v558.871273c82.152727 81.338182 72.866909 210.571636 88.832 242.338909 15.941818 31.767273 47.616 36.119273 55.621818 36.608 39.703273 0 179.665455-32.395636 93.789091-278.946909zM313.832727 651.636364V93.090909H202.891636a93.090909 93.090909 0 0 0-92.997818 88.901818l-16.709818 372.363637A93.090909 93.090909 0 0 0 186.181818 651.636364h127.650909z" fill="#4F46E5" p-id="13841"></path></svg>
|
||||||
|
After Width: | Height: | Size: 883 B |
1
src/assets/ai_icon/voice.svg
Normal file
1
src/assets/ai_icon/voice.svg
Normal file
@@ -0,0 +1 @@
|
|||||||
|
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1753693546032" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9939" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M216.064 418.816c-50.176 0-91.136 40.96-91.136 91.136s40.96 91.136 91.136 91.136 91.136-40.96 91.136-91.136-40.96-91.136-91.136-91.136zM415.232 815.104c-21.504 0-42.496-8.704-57.344-25.6-27.648-31.744-24.064-79.36 7.168-107.52 50.176-43.52 78.848-106.496 78.848-172.032 0-64.512-27.648-125.952-75.776-168.96-31.232-28.16-33.792-76.288-5.632-107.52s76.288-33.792 107.52-5.632c79.36 71.68 125.44 174.592 125.44 281.6 0 109.568-47.616 214.016-130.56 286.208-14.336 13.312-31.744 19.456-49.664 19.456z" p-id="9940" fill="#4F46E5"></path><path d="M601.088 985.088c-30.208-29.184-31.232-77.312-2.048-107.52 95.744-99.328 148.48-229.888 148.48-367.616 0-136.192-51.2-265.216-144.896-364.544-28.672-30.72-27.648-78.848 3.072-107.52s78.848-27.648 107.52 3.072c120.32 126.976 186.368 293.888 186.368 468.48 0 177.664-67.584 345.6-190.464 473.088-14.848 15.36-35.328 23.04-54.784 23.04-19.456 1.024-38.4-6.144-53.248-20.48z" p-id="9941" fill="#4F46E5"></path></svg>
|
||||||
|
After Width: | Height: | Size: 1.3 KiB |
BIN
src/assets/ai_icon/yonghu.png
Normal file
BIN
src/assets/ai_icon/yonghu.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.3 KiB |
499
src/components/aiChat/HistoryDrawer.vue
Normal file
499
src/components/aiChat/HistoryDrawer.vue
Normal file
@@ -0,0 +1,499 @@
|
|||||||
|
<template>
|
||||||
|
<!-- 抽屉容器，visible控制显示 -->
|
||||||
|
<div v-if="visible" class="drawer-container" @touchmove.prevent>
|
||||||
|
<!-- 遮罩层，点击关闭 -->
|
||||||
|
<div class="drawer-mask" @click="closeDrawer"></div>
|
||||||
|
|
||||||
|
<!-- 抽屉内容区域 -->
|
||||||
|
<div class="drawer-content">
|
||||||
|
<!-- 标题区域 -->
|
||||||
|
<div class="drawer-header">
|
||||||
|
<span class="title">历史记录</span>
|
||||||
|
<img src="@/assets/close.svg" class="close-icon" @click="closeDrawer" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 搜索栏 -->
|
||||||
|
<div class="search-bar">
|
||||||
|
<img src="@/assets/search.svg" class="search-icon" />
|
||||||
|
<input v-model="searchKeyword" placeholder="搜索聊天记录..." class="search-input" @input="handleSearch" />
|
||||||
|
<img v-if="searchKeyword" src="@/assets/clear.svg" class="clear-icon" @click="clearSearch" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 历史列表区域 -->
|
||||||
|
<div class="history-list">
|
||||||
|
<!-- 加载状态 -->
|
||||||
|
<div v-if="loading" class="loading-tip">加载中...</div>
|
||||||
|
|
||||||
|
<!-- 分组渲染历史记录 -->
|
||||||
|
<template v-else-if="filteredRecords.length > 0">
|
||||||
|
<template v-for="(group, groupIndex) in filteredRecords" :key="groupIndex">
|
||||||
|
<div class="group-title">{{ group.title }}</div>
|
||||||
|
<div v-for="item in group.list" :key="item.id" class="history-item"
|
||||||
|
@click="handleItemClick(item)">
|
||||||
|
<!-- 日期时间显示 -->
|
||||||
|
<div class="datetime">
|
||||||
|
<span class="date">{{ item.date }}</span>
|
||||||
|
<span class="time">{{ item.time }}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 消息内容 -->
|
||||||
|
<div class="record">
|
||||||
|
<span class="user-msg" v-html="highlightKeyword(item.content)"></span>
|
||||||
|
<span class="ai-msg" v-html="highlightKeyword(item.reply)"></span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="divider"></div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<!-- 空状态提示 -->
|
||||||
|
<div v-else class="empty-tip">
|
||||||
|
<span>{{ searchKeyword ? '没有找到匹配的记录' : '暂无聊天记录' }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { ref, watch } from 'vue'
|
||||||
|
import { getHistory } from '@/api/aiChat/ai_index'
|
||||||
|
import { useToast } from '@/composables/useToast'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'HistoryDrawer',
|
||||||
|
props: {
|
||||||
|
/** 是否显示抽屉 */
|
||||||
|
visible: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
emits: [
|
||||||
|
/** 关闭抽屉事件 */
|
||||||
|
'close',
|
||||||
|
/** 点击历史记录项事件 */
|
||||||
|
'item-click'
|
||||||
|
],
|
||||||
|
setup(props, { emit }) {
|
||||||
|
// 工具函数
|
||||||
|
const { showToast } = useToast()
|
||||||
|
|
||||||
|
// 响应式数据
|
||||||
|
const historyRecords = ref([]) // 所有历史记录（分组后）
|
||||||
|
const filteredRecords = ref([]) // 筛选后的历史记录
|
||||||
|
const searchKeyword = ref('') // 搜索关键词
|
||||||
|
const loading = ref(false) // 加载状态
|
||||||
|
|
||||||
|
// 监听抽屉显示状态，显示时加载数据，隐藏时清空搜索
|
||||||
|
watch(
|
||||||
|
() => props.visible,
|
||||||
|
(isVisible) => {
|
||||||
|
if (isVisible) {
|
||||||
|
loadHistoryRecords()
|
||||||
|
} else {
|
||||||
|
clearSearch()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 关闭抽屉
|
||||||
|
*/
|
||||||
|
const closeDrawer = () => {
|
||||||
|
emit('close')
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 加载历史记录
|
||||||
|
*/
|
||||||
|
const loadHistoryRecords = async () => {
|
||||||
|
// 显示加载状态
|
||||||
|
loading.value = true
|
||||||
|
|
||||||
|
try {
|
||||||
|
// 获取用户标识
|
||||||
|
const userNo = localStorage.getItem('stuNo')
|
||||||
|
if (!userNo) {
|
||||||
|
throw new Error('未获取到用户学号')
|
||||||
|
}
|
||||||
|
|
||||||
|
// 调用API获取历史记录
|
||||||
|
const response = await getHistory({
|
||||||
|
user: userNo,
|
||||||
|
conversationId: '',
|
||||||
|
limit: 20
|
||||||
|
})
|
||||||
|
|
||||||
|
// 处理获取到的数据
|
||||||
|
const rawList = Array.isArray(response.data?.data) ? response.data.data : []
|
||||||
|
const groupedRecords = groupRecordsByTime(rawList)
|
||||||
|
|
||||||
|
// 更新记录数据
|
||||||
|
historyRecords.value = groupedRecords
|
||||||
|
filteredRecords.value = [...groupedRecords]
|
||||||
|
} catch (error) {
|
||||||
|
console.error('加载历史记录失败:', error)
|
||||||
|
showToast(`加载失败: ${error.message}`, 'error')
|
||||||
|
historyRecords.value = []
|
||||||
|
filteredRecords.value = []
|
||||||
|
} finally {
|
||||||
|
// 隐藏加载状态
|
||||||
|
loading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 将原始记录按时间分组
|
||||||
|
* @param {Array} rawList - 原始记录列表
|
||||||
|
* @returns {Array} 分组后的记录
|
||||||
|
*/
|
||||||
|
const groupRecordsByTime = (rawList) => {
|
||||||
|
const groupMap = {}
|
||||||
|
|
||||||
|
rawList.forEach(item => {
|
||||||
|
// 处理时间戳，兼容不同字段名
|
||||||
|
const timestamp = item.created_at || item.create_time || item.timestamp || Date.now() / 1000
|
||||||
|
const recordDate = new Date(timestamp * 1000)
|
||||||
|
|
||||||
|
// 格式化记录数据
|
||||||
|
const record = {
|
||||||
|
id: item.id || Math.random().toString(36).slice(2),
|
||||||
|
date: formatDate(recordDate),
|
||||||
|
time: formatTime(recordDate),
|
||||||
|
content: item.query || item.content || '未知内容',
|
||||||
|
reply: item.answer || item.reply || '暂无回复',
|
||||||
|
timestamp: timestamp
|
||||||
|
}
|
||||||
|
|
||||||
|
// 按时间分组
|
||||||
|
const groupTitle = getGroupTitle(recordDate)
|
||||||
|
if (!groupMap[groupTitle]) {
|
||||||
|
groupMap[groupTitle] = []
|
||||||
|
}
|
||||||
|
groupMap[groupTitle].push(record)
|
||||||
|
})
|
||||||
|
|
||||||
|
// 转换为数组并排序
|
||||||
|
return Object.entries(groupMap)
|
||||||
|
.map(([title, list]) => ({
|
||||||
|
title,
|
||||||
|
// 按时间倒序排列（最新的在前）
|
||||||
|
list: list.sort((a, b) => b.timestamp - a.timestamp)
|
||||||
|
}))
|
||||||
|
// 按分组标题排序（今天、昨天、7天内、30天内、更早）
|
||||||
|
.sort((a, b) => getGroupOrder(b.title) - getGroupOrder(a.title))
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取分组的排序优先级
|
||||||
|
* @param {String} title - 分组标题
|
||||||
|
* @returns {Number} 排序优先级（数字越大越靠前）
|
||||||
|
*/
|
||||||
|
const getGroupOrder = (title) => {
|
||||||
|
const orderMap = {
|
||||||
|
'今天': 5,
|
||||||
|
'昨天': 4,
|
||||||
|
'7天内': 3,
|
||||||
|
'30天内': 2,
|
||||||
|
'更早': 1
|
||||||
|
}
|
||||||
|
return orderMap[title] || 0
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 处理搜索
|
||||||
|
*/
|
||||||
|
const handleSearch = () => {
|
||||||
|
const keyword = searchKeyword.value.trim().toLowerCase()
|
||||||
|
|
||||||
|
// 关键词为空时显示所有记录
|
||||||
|
if (!keyword) {
|
||||||
|
filteredRecords.value = [...historyRecords.value]
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
// 根据关键词筛选记录
|
||||||
|
filteredRecords.value = historyRecords.value
|
||||||
|
.map(group => ({
|
||||||
|
...group,
|
||||||
|
list: group.list.filter(item =>
|
||||||
|
item.content.toLowerCase().includes(keyword) ||
|
||||||
|
item.reply.toLowerCase().includes(keyword)
|
||||||
|
)
|
||||||
|
}))
|
||||||
|
.filter(group => group.list.length > 0)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 清空搜索
|
||||||
|
*/
|
||||||
|
const clearSearch = () => {
|
||||||
|
searchKeyword.value = ''
|
||||||
|
filteredRecords.value = [...historyRecords.value]
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 高亮显示关键词
|
||||||
|
* @param {String} text - 原始文本
|
||||||
|
* @returns {String} 处理后的HTML文本
|
||||||
|
*/
|
||||||
|
const highlightKeyword = (text) => {
|
||||||
|
if (!searchKeyword.value || !text) {
|
||||||
|
return text
|
||||||
|
}
|
||||||
|
|
||||||
|
const keyword = searchKeyword.value.trim()
|
||||||
|
return text.replace(
|
||||||
|
new RegExp(keyword, 'gi'),
|
||||||
|
`<span class="highlight">${keyword}</span>`
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取记录的分组标题（今天、昨天等）
|
||||||
|
* @param {Date} date - 记录日期
|
||||||
|
* @returns {String} 分组标题
|
||||||
|
*/
|
||||||
|
const getGroupTitle = (date) => {
|
||||||
|
const now = new Date()
|
||||||
|
const today = new Date(now.setHours(0, 0, 0, 0))
|
||||||
|
const yesterday = new Date(today)
|
||||||
|
yesterday.setDate(today.getDate() - 1)
|
||||||
|
const oneWeekAgo = new Date(today)
|
||||||
|
oneWeekAgo.setDate(today.getDate() - 7)
|
||||||
|
const oneMonthAgo = new Date(today)
|
||||||
|
oneMonthAgo.setDate(today.getDate() - 30)
|
||||||
|
|
||||||
|
if (date >= today) return '今天'
|
||||||
|
if (date >= yesterday) return '昨天'
|
||||||
|
if (date >= oneWeekAgo) return '7天内'
|
||||||
|
if (date >= oneMonthAgo) return '30天内'
|
||||||
|
return '更早'
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 格式化日期为YYYY-MM-DD
|
||||||
|
* @param {Date} date - 日期对象
|
||||||
|
* @returns {String} 格式化后的日期字符串
|
||||||
|
*/
|
||||||
|
const formatDate = (date) => {
|
||||||
|
return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')
|
||||||
|
}-${date.getDate().toString().padStart(2, '0')
|
||||||
|
}`
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 格式化时间为HH:MM
|
||||||
|
* @param {Date} date - 日期对象
|
||||||
|
* @returns {String} 格式化后的时间字符串
|
||||||
|
*/
|
||||||
|
const formatTime = (date) => {
|
||||||
|
return `${date.getHours().toString().padStart(2, '0')
|
||||||
|
}:${date.getMinutes().toString().padStart(2, '0')
|
||||||
|
}`
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 处理历史记录项点击
|
||||||
|
* @param {Object} item - 记录项数据
|
||||||
|
*/
|
||||||
|
const handleItemClick = (item) => {
|
||||||
|
// 移除HTML标签，避免传递富文本
|
||||||
|
emit('item-click', {
|
||||||
|
...item,
|
||||||
|
content: item.content.replace(/<[^>]+>/g, ''),
|
||||||
|
reply: item.reply.replace(/<[^>]+>/g, '')
|
||||||
|
})
|
||||||
|
closeDrawer()
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
historyRecords,
|
||||||
|
filteredRecords,
|
||||||
|
searchKeyword,
|
||||||
|
loading,
|
||||||
|
closeDrawer,
|
||||||
|
handleSearch,
|
||||||
|
clearSearch,
|
||||||
|
highlightKeyword,
|
||||||
|
handleItemClick
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.drawer-container {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
z-index: 999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.drawer-mask {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: rgba(0, 0, 0, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.drawer-content {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 66.67%;
|
||||||
|
height: 100vh;
|
||||||
|
background-color: #fff;
|
||||||
|
box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.drawer-header {
|
||||||
|
padding: 15px 15px 10px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
border-bottom: 1px solid #eee;
|
||||||
|
height: 50px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.close-icon {
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-bar {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 10px 15px;
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
border-bottom: 1px solid #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-icon {
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-input {
|
||||||
|
flex: 1;
|
||||||
|
height: 36px;
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 18px;
|
||||||
|
padding: 0 15px;
|
||||||
|
font-size: 14px;
|
||||||
|
border: none;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.clear-icon {
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
margin-left: 8px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.history-list {
|
||||||
|
flex: 1;
|
||||||
|
overflow-y: auto;
|
||||||
|
padding: 10px 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.group-title {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #888;
|
||||||
|
padding: 12px 20px;
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.history-item {
|
||||||
|
padding: 15px 20px;
|
||||||
|
background-color: #fff;
|
||||||
|
border-bottom: 1px solid #f0f0f0;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.history-item:hover {
|
||||||
|
background-color: #f9f9f9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.datetime {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.date {
|
||||||
|
font-size: 13px;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.time {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.record {
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-msg {
|
||||||
|
display: block;
|
||||||
|
color: #333;
|
||||||
|
margin-bottom: 6px;
|
||||||
|
padding: 6px 10px;
|
||||||
|
background-color: #f9f9f9;
|
||||||
|
border-radius: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ai-msg {
|
||||||
|
display: block;
|
||||||
|
color: #333;
|
||||||
|
padding: 6px 10px;
|
||||||
|
background-color: #eef7ff;
|
||||||
|
border-radius: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.highlight {
|
||||||
|
color: #ff4d4f;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.divider {
|
||||||
|
height: 8px;
|
||||||
|
background-color: #f9f9f9;
|
||||||
|
margin-top: 10px;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-tip,
|
||||||
|
.loading-tip {
|
||||||
|
text-align: center;
|
||||||
|
color: #999;
|
||||||
|
font-size: 16px;
|
||||||
|
margin-top: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
input::placeholder {
|
||||||
|
color: #ccc;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
17
src/composables/useToast.js
Normal file
17
src/composables/useToast.js
Normal file
@@ -0,0 +1,17 @@
|
|||||||
|
import { showToast, showSuccess, showError, showWarning, showInfo } from '@/utils/toast'
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Toast composable
|
||||||
|
* 提供统一的消息提示功能
|
||||||
|
*/
|
||||||
|
export function useToast() {
|
||||||
|
return {
|
||||||
|
showToast,
|
||||||
|
showSuccess,
|
||||||
|
showError,
|
||||||
|
showWarning,
|
||||||
|
showInfo
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default useToast
|
||||||
770
src/layout/components/Aichat/ChatPopup.vue
Normal file
770
src/layout/components/Aichat/ChatPopup.vue
Normal file
@@ -0,0 +1,770 @@
|
|||||||
|
<template>
|
||||||
|
<div class="chat-container">
|
||||||
|
<!-- 状态栏占位 -->
|
||||||
|
<div class="status-bar-placeholder"></div>
|
||||||
|
|
||||||
|
<!-- 自定义导航栏 -->
|
||||||
|
<div class="custom-nav-bar">
|
||||||
|
<div class="nav-left" @click="toggleHistoryDrawer">
|
||||||
|
<img src="@/assets/ai_icon/history.svg" class="nav-icon">
|
||||||
|
</div>
|
||||||
|
<div class="nav-title">智水AI辅导员</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 消息列表 -->
|
||||||
|
<div ref="messageList" class="message-list" @scroll="onScroll">
|
||||||
|
<!-- 加载提示 -->
|
||||||
|
<div v-if="isLoadingHistory" class="loading-history">
|
||||||
|
<span>正在加载历史记录...</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 没有更多历史记录提示 -->
|
||||||
|
<div v-if="!hasMoreHistory && messages.length > 0" class="no-more-history">
|
||||||
|
<span>没有更多历史记录了</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 消息列表 -->
|
||||||
|
<div v-for="(item, index) in messages" :key="item.messageId || index"
|
||||||
|
:class="['message-item', item.sender === 'user' ? 'user-message' : 'ai-message']">
|
||||||
|
<img class="avatar" :src="item.avatar">
|
||||||
|
<div class="message-content">
|
||||||
|
<!-- 文字内容 -->
|
||||||
|
<div v-if="item.content && item.sender === 'ai'" class="markdown-content"
|
||||||
|
v-html="renderMarkdown(item.content)"></div>
|
||||||
|
<span v-else-if="item.content">{{ item.content }}</span>
|
||||||
|
|
||||||
|
<!-- 图片内容 -->
|
||||||
|
<img v-if="item.image" :src="item.image" class="sent-image">
|
||||||
|
|
||||||
|
<!-- AI 特有内容 -->
|
||||||
|
<div v-if="item.sender === 'ai'" class="ai-hint">
|
||||||
|
<!-- 引用来源部分 -->
|
||||||
|
<div v-if="item.retrieverResources && item.retrieverResources.length" class="reference-section">
|
||||||
|
<span class="reference-title">引用来源：</span>
|
||||||
|
<div v-for="(ref, idx) in item.retrieverResources" :key="idx" class="reference-item-wrapper">
|
||||||
|
<span class="doc-name-link" @click="toggleSingleReference(index, idx)">
|
||||||
|
{{ ref.document_name }}
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<div v-if="showSingleReference[index] && showSingleReference[index][idx]"
|
||||||
|
class="reference-details-item">
|
||||||
|
<span class="reference-meta">{{ ref.name }}（{{ ref.document_name }}）</span>
|
||||||
|
<span class="reference-content" v-if="ref.content">{{ ref.content }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- AI操作区域（点赞/点踩） -->
|
||||||
|
<div class="ai-actions">
|
||||||
|
<span class="ai-text">回答由AI生成</span>
|
||||||
|
<div class="icon-group">
|
||||||
|
<img src="@/assets/ai_icon/good.svg" class="btn-icon" @click="handleThumbUpClick(item.messageId)" />
|
||||||
|
<img src="@/assets/ai_icon/tread.svg" class="btn-icon" @click="handleThumbDownClick(item.messageId)" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 输入框和发送按钮 -->
|
||||||
|
<div class="input-container">
|
||||||
|
<history-drawer v-if="showHistoryDrawer" :visible="showHistoryDrawer" @close="toggleHistoryDrawer"
|
||||||
|
@item-click="onHistoryItemClick" />
|
||||||
|
|
||||||
|
<input v-model="inputMessage" placeholder="输入消息..." @keyup.enter="sendMessage" />
|
||||||
|
<img src="@/assets/ai_icon/add.svg" class="add-icon" @click="selectImage" />
|
||||||
|
<img src="@/assets/ai_icon/send.svg" class="send-icon" @click="sendMessage" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import HistoryDrawer from '@/components/aiChat/HistoryDrawer.vue'
|
||||||
|
import { createChatStream } from '@/utils/ai_stream.js'
|
||||||
|
import { sendFeedback, getHistory } from '@/api/aiChat/ai_index.js'
|
||||||
|
|
||||||
|
// 简单的文本渲染函数，替代 markdown-it
|
||||||
|
function simpleTextRender(text) {
|
||||||
|
if (!text) return ''
|
||||||
|
// 简单的换行处理
|
||||||
|
return text.replace(/\n/g, '<br>')
|
||||||
|
}
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
HistoryDrawer
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
showHistoryDrawer: false,
|
||||||
|
inputMessage: '',
|
||||||
|
messages: [],
|
||||||
|
conversation_id: localStorage.getItem('conversation_id') || null,
|
||||||
|
showSingleReference: {},
|
||||||
|
currentCancel: null,
|
||||||
|
sending: false,
|
||||||
|
user: localStorage.getItem('stuNo') || '',
|
||||||
|
userId: localStorage.getItem('stuId') || '',
|
||||||
|
userName: localStorage.getItem('stuName') || '',
|
||||||
|
isLoadingHistory: false,
|
||||||
|
hasMoreHistory: true,
|
||||||
|
earliestMessageId: null,
|
||||||
|
lastScrollTime: 0,
|
||||||
|
scrollDebounce: 100,
|
||||||
|
lastUserScrollTime: 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 页面导航
|
||||||
|
goHome() {
|
||||||
|
this.$router.push('/')
|
||||||
|
},
|
||||||
|
|
||||||
|
// 切换历史记录抽屉
|
||||||
|
toggleHistoryDrawer() {
|
||||||
|
this.showHistoryDrawer = !this.showHistoryDrawer
|
||||||
|
},
|
||||||
|
|
||||||
|
// 渲染Markdown内容
|
||||||
|
renderMarkdown(text) {
|
||||||
|
return simpleTextRender(text || '')
|
||||||
|
},
|
||||||
|
|
||||||
|
// 显示提示信息
|
||||||
|
showToast(title, type = 'info') {
|
||||||
|
console.log(`[${type}] ${title}`)
|
||||||
|
},
|
||||||
|
|
||||||
|
// 强制滚动到底部
|
||||||
|
forceScrollToBottom(offset = 50) {
|
||||||
|
this.$nextTick(() => {
|
||||||
|
if (this.$refs.messageList) {
|
||||||
|
const targetScrollTop = this.$refs.messageList.scrollHeight - this.$refs.messageList.clientHeight - offset
|
||||||
|
this.$refs.messageList.scrollTo({
|
||||||
|
top: targetScrollTop,
|
||||||
|
behavior: 'smooth'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
// 初始化聊天
|
||||||
|
async initChat() {
|
||||||
|
if (!this.user) {
|
||||||
|
this.initConversation()
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
this.isLoadingHistory = false
|
||||||
|
this.hasMoreHistory = true
|
||||||
|
this.earliestMessageId = null
|
||||||
|
this.messages = []
|
||||||
|
|
||||||
|
try {
|
||||||
|
const res = await getHistory({
|
||||||
|
user: this.user,
|
||||||
|
conversationId: this.conversation_id || '',
|
||||||
|
limit: 20
|
||||||
|
})
|
||||||
|
|
||||||
|
if (res.code === 200 && res.data && Array.isArray(res.data.data)) {
|
||||||
|
const newMessages = []
|
||||||
|
|
||||||
|
res.data.data.forEach(msg => {
|
||||||
|
if (msg.query) {
|
||||||
|
newMessages.push({
|
||||||
|
sender: 'user',
|
||||||
|
avatar: require('@/assets/ai_icon/yonghu.png'),
|
||||||
|
content: msg.query,
|
||||||
|
image: '',
|
||||||
|
messageId: msg.id,
|
||||||
|
conversationId: msg.conversation_id
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
if (msg.answer) {
|
||||||
|
newMessages.push({
|
||||||
|
sender: 'ai',
|
||||||
|
avatar: require('../../../assets/ai_icon/AI.png'),
|
||||||
|
content: msg.answer,
|
||||||
|
retrieverResources: msg.retriever_resources || [],
|
||||||
|
image: '',
|
||||||
|
messageId: 'ai-' + msg.id,
|
||||||
|
conversationId: msg.conversation_id
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
newMessages.sort((a, b) => new Date(a.created_at) - new Date(b.created_at))
|
||||||
|
this.messages = newMessages
|
||||||
|
|
||||||
|
if (newMessages.length > 0) {
|
||||||
|
this.conversation_id = newMessages[0].conversationId
|
||||||
|
localStorage.setItem('conversation_id', this.conversation_id)
|
||||||
|
this.earliestMessageId = newMessages[0].messageId
|
||||||
|
}
|
||||||
|
|
||||||
|
this.hasMoreHistory = res.data.has_more || false
|
||||||
|
this.forceScrollToBottom()
|
||||||
|
} else {
|
||||||
|
this.messages = this.getWelcomeMessage()
|
||||||
|
this.hasMoreHistory = false
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
console.error('初始化聊天失败:', e)
|
||||||
|
this.showToast('加载历史记录失败')
|
||||||
|
this.initConversation()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// 发送消息
|
||||||
|
async sendMessage() {
|
||||||
|
const msg = this.inputMessage.trim()
|
||||||
|
if (!msg || this.sending) return
|
||||||
|
this.sending = true
|
||||||
|
|
||||||
|
// 添加用户消息
|
||||||
|
this.messages.push({
|
||||||
|
sender: 'user',
|
||||||
|
avatar: require('@/assets/big/fdy-avatar.png'),
|
||||||
|
content: msg,
|
||||||
|
image: '',
|
||||||
|
messageId: Date.now().toString()
|
||||||
|
})
|
||||||
|
this.inputMessage = ''
|
||||||
|
this.saveMessagesToLocal()
|
||||||
|
|
||||||
|
// 添加AI消息占位
|
||||||
|
const aiIdx = this.messages.push({
|
||||||
|
sender: 'ai',
|
||||||
|
avatar: require('@/assets/imagesPage1/ai.png'),
|
||||||
|
content: '<span class="loading-text">正在思考...</span>',
|
||||||
|
retrieverResources: [],
|
||||||
|
image: '',
|
||||||
|
messageId: 'pending-' + Date.now().toString()
|
||||||
|
}) - 1
|
||||||
|
|
||||||
|
this.$set(this.showSingleReference, aiIdx, {})
|
||||||
|
this.scrollToBottom()
|
||||||
|
|
||||||
|
try {
|
||||||
|
const { stream, cancel } = createChatStream({
|
||||||
|
conversationId: this.conversation_id,
|
||||||
|
prompt: msg,
|
||||||
|
user: this.user,
|
||||||
|
userId: this.userId,
|
||||||
|
userName: this.userName
|
||||||
|
})
|
||||||
|
|
||||||
|
this.currentCancel = cancel
|
||||||
|
|
||||||
|
// 处理流式响应
|
||||||
|
for await (const data of stream) {
|
||||||
|
if (data.event === 'message' && data.answer) {
|
||||||
|
const currentContent = this.messages[aiIdx].content
|
||||||
|
const newContent = (currentContent.includes('loading-text') ? '' : currentContent) + data.answer
|
||||||
|
this.messages[aiIdx].content = newContent
|
||||||
|
this.scrollToBottom(true)
|
||||||
|
this.saveMessagesToLocal()
|
||||||
|
}
|
||||||
|
|
||||||
|
if (data.event === 'message_end') {
|
||||||
|
if (data.conversation_id) {
|
||||||
|
this.conversation_id = data.conversation_id
|
||||||
|
localStorage.setItem('conversation_id', this.conversation_id)
|
||||||
|
}
|
||||||
|
if (data.metadata?.retriever_resources) {
|
||||||
|
this.messages[aiIdx].retrieverResources = data.metadata.retriever_resources
|
||||||
|
}
|
||||||
|
if (data.message_id) {
|
||||||
|
this.messages[aiIdx].messageId = data.message_id
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
console.error('流式请求失败:', e)
|
||||||
|
this.messages[aiIdx].content = 'AI回复失败: ' + (e.message || '网络错误')
|
||||||
|
} finally {
|
||||||
|
this.sending = false
|
||||||
|
this.currentCancel = null
|
||||||
|
|
||||||
|
if (this.messages[aiIdx].messageId.startsWith('pending-')) {
|
||||||
|
this.messages[aiIdx].messageId = 'ai-' + Date.now().toString()
|
||||||
|
}
|
||||||
|
|
||||||
|
this.saveMessagesToLocal()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// 初始化对话
|
||||||
|
initConversation() {
|
||||||
|
this.messages = this.getWelcomeMessage()
|
||||||
|
this.conversation_id = null
|
||||||
|
localStorage.removeItem('conversation_id')
|
||||||
|
},
|
||||||
|
|
||||||
|
// 获取欢迎消息
|
||||||
|
getWelcomeMessage() {
|
||||||
|
return [
|
||||||
|
{
|
||||||
|
sender: 'ai',
|
||||||
|
avatar: require('@/assets/imagesPage1/ai.png'),
|
||||||
|
content: '你好！我是智水AI辅导员，有什么可以帮助你的吗？',
|
||||||
|
retrieverResources: [],
|
||||||
|
image: '',
|
||||||
|
messageId: 'welcome-message'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
|
||||||
|
// 保存消息到本地
|
||||||
|
saveMessagesToLocal() {
|
||||||
|
try {
|
||||||
|
const messagesToSave = this.messages.filter(msg => !msg.messageId.startsWith('pending-'))
|
||||||
|
localStorage.setItem('chat_messages', JSON.stringify(messagesToSave))
|
||||||
|
} catch (e) {
|
||||||
|
console.warn('保存消息到本地失败:', e)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// 滚动到底部
|
||||||
|
scrollToBottom(smooth = false) {
|
||||||
|
this.$nextTick(() => {
|
||||||
|
if (this.$refs.messageList) {
|
||||||
|
const behavior = smooth ? 'smooth' : 'auto'
|
||||||
|
this.$refs.messageList.scrollTo({
|
||||||
|
top: this.$refs.messageList.scrollHeight,
|
||||||
|
behavior
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
// 选择图片
|
||||||
|
selectImage() {
|
||||||
|
console.log('选择图片功能待实现')
|
||||||
|
},
|
||||||
|
|
||||||
|
// 历史记录项点击
|
||||||
|
onHistoryItemClick(item) {
|
||||||
|
console.log('历史记录项点击:', item)
|
||||||
|
},
|
||||||
|
|
||||||
|
// 点赞
|
||||||
|
async handleThumbUpClick(messageId) {
|
||||||
|
try {
|
||||||
|
await sendFeedback({
|
||||||
|
messageId,
|
||||||
|
feedback: 'like'
|
||||||
|
})
|
||||||
|
this.showToast('感谢您的反馈！')
|
||||||
|
} catch (e) {
|
||||||
|
console.error('点赞失败:', e)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// 点踩
|
||||||
|
async handleThumbDownClick(messageId) {
|
||||||
|
try {
|
||||||
|
await sendFeedback({
|
||||||
|
messageId,
|
||||||
|
feedback: 'dislike'
|
||||||
|
})
|
||||||
|
this.showToast('感谢您的反馈！')
|
||||||
|
} catch (e) {
|
||||||
|
console.error('点踩失败:', e)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// 切换单个引用显示
|
||||||
|
toggleSingleReference(messageIndex, refIndex) {
|
||||||
|
if (!this.showSingleReference[messageIndex]) {
|
||||||
|
this.$set(this.showSingleReference, messageIndex, {})
|
||||||
|
}
|
||||||
|
this.$set(this.showSingleReference[messageIndex], refIndex,
|
||||||
|
!this.showSingleReference[messageIndex][refIndex])
|
||||||
|
},
|
||||||
|
|
||||||
|
// 滚动事件处理
|
||||||
|
onScroll() {
|
||||||
|
const now = Date.now()
|
||||||
|
if (now - this.lastScrollTime < this.scrollDebounce) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
this.lastScrollTime = now
|
||||||
|
this.lastUserScrollTime = now
|
||||||
|
|
||||||
|
// 检查是否需要加载更多历史记录
|
||||||
|
if (this.$refs.messageList &&
|
||||||
|
this.$refs.messageList.scrollTop === 0 &&
|
||||||
|
this.hasMoreHistory &&
|
||||||
|
!this.isLoadingHistory) {
|
||||||
|
console.log('加载更多历史记录')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
if (!this.user) {
|
||||||
|
this.showToast('请先登录', 'error')
|
||||||
|
setTimeout(() => this.$router.push('/login'), 1500)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
this.initChat().then(() => {
|
||||||
|
const scrollWithRetry = (attempt = 0) => {
|
||||||
|
this.$nextTick(() => {
|
||||||
|
setTimeout(() => {
|
||||||
|
this.forceScrollToBottom()
|
||||||
|
setTimeout(() => {
|
||||||
|
this.forceScrollToBottom(30)
|
||||||
|
if (attempt < 2) {
|
||||||
|
setTimeout(() => {
|
||||||
|
if (this.$refs.messageList &&
|
||||||
|
Math.abs(this.$refs.messageList.scrollHeight -
|
||||||
|
this.$refs.messageList.clientHeight -
|
||||||
|
this.$refs.messageList.scrollTop) > 50) {
|
||||||
|
scrollWithRetry(attempt + 1)
|
||||||
|
}
|
||||||
|
}, attempt === 0 ? 500 : 800)
|
||||||
|
}
|
||||||
|
}, 200)
|
||||||
|
}, 100)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
scrollWithRetry()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<!-- /* ChatPopup.vue 的 <style> 部分 */ -->
|
||||||
|
<style scoped>
|
||||||
|
/* ============= 整体容器 ============= */
|
||||||
|
.chat-container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
min-height: 100vh;
|
||||||
|
width: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
padding-top: 10px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ============= 状态栏占位 ============= */
|
||||||
|
.status-bar-placeholder {
|
||||||
|
height: var(--status-bar-height, 20px);
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ============= 自定义导航栏 ============= */
|
||||||
|
.custom-nav-bar {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
width: 100%;
|
||||||
|
height: 44px;
|
||||||
|
padding: 0 16px;
|
||||||
|
background-color: #fff;
|
||||||
|
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: 999;
|
||||||
|
border-bottom: 1px solid #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-title {
|
||||||
|
font-size: 17px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #333;
|
||||||
|
text-align: center;
|
||||||
|
flex: 1;
|
||||||
|
margin-right: 45px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-icon {
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-left,
|
||||||
|
.nav-right {
|
||||||
|
width: 44px;
|
||||||
|
height: 44px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ============= 消息列表 ============= */
|
||||||
|
.message-list {
|
||||||
|
flex: 1;
|
||||||
|
padding: 60px 0 80px;
|
||||||
|
/* 调整顶部和底部间距 */
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
overflow-y: auto;
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ============= 消息项 ============= */
|
||||||
|
.message-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
max-width: 100%;
|
||||||
|
padding: 0 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-message {
|
||||||
|
flex-direction: row-reverse;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ai-message {
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
border-radius: 8px;
|
||||||
|
margin: 0 8px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message-content {
|
||||||
|
max-width: 70%;
|
||||||
|
padding: 10px 12px;
|
||||||
|
border-radius: 10px;
|
||||||
|
word-break: break-word;
|
||||||
|
line-height: 1.5;
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-message .message-content {
|
||||||
|
background-color: #e1f5fe;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ai-message .message-content {
|
||||||
|
background-color: #fff;
|
||||||
|
border: 1px solid #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sent-image {
|
||||||
|
max-width: 200px;
|
||||||
|
max-height: 200px;
|
||||||
|
border-radius: 8px;
|
||||||
|
margin-top: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ============= AI提示区域 ============= */
|
||||||
|
.ai-hint {
|
||||||
|
margin-top: 8px;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ai-actions {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ai-text {
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-group {
|
||||||
|
display: flex;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-icon {
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ============= 输入框区域 ============= */
|
||||||
|
.input-container {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 8px 16px;
|
||||||
|
background-color: #fff;
|
||||||
|
border-top: 1px solid #eee;
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-container input {
|
||||||
|
flex: 1;
|
||||||
|
height: 40px;
|
||||||
|
padding: 0 16px;
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
border-radius: 20px;
|
||||||
|
font-size: 14px;
|
||||||
|
margin: 0 10px;
|
||||||
|
border: none;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.add-icon,
|
||||||
|
.send-icon {
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ============= 引用相关样式 ============= */
|
||||||
|
.reference-section {
|
||||||
|
margin-top: 8px;
|
||||||
|
border-top: 1px dashed #ddd;
|
||||||
|
padding-top: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reference-title {
|
||||||
|
display: block;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.doc-name-link {
|
||||||
|
color: #007aff;
|
||||||
|
text-decoration: underline;
|
||||||
|
margin-right: 8px;
|
||||||
|
font-size: 13px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reference-item-wrapper {
|
||||||
|
margin-top: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reference-details-item {
|
||||||
|
margin-top: 8px;
|
||||||
|
padding: 10px;
|
||||||
|
background-color: #f9f9f9;
|
||||||
|
border-radius: 4px;
|
||||||
|
border: 1px solid #e0e0e0;
|
||||||
|
font-size: 13px;
|
||||||
|
color: #555;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reference-meta {
|
||||||
|
font-weight: 500;
|
||||||
|
color: #333;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ============= Markdown内容样式 ============= */
|
||||||
|
.markdown-content :deep(h1),
|
||||||
|
.markdown-content :deep(h2),
|
||||||
|
.markdown-content :deep(h3) {
|
||||||
|
margin: 1em 0 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown-content :deep(p) {
|
||||||
|
margin: 0.5em 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown-content :deep(code) {
|
||||||
|
background-color: #f3f4f6;
|
||||||
|
padding: 0.2em 0.4em;
|
||||||
|
border-radius: 3px;
|
||||||
|
font-family: monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown-content :deep(pre) {
|
||||||
|
background-color: #f6f8fa;
|
||||||
|
border-radius: 5px;
|
||||||
|
padding: 10px;
|
||||||
|
overflow-x: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown-content :deep(blockquote) {
|
||||||
|
border-left: 4px solid #d0d7de;
|
||||||
|
color: #57606a;
|
||||||
|
padding-left: 1em;
|
||||||
|
margin: 1em 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ============= AI悬浮按钮 ============= */
|
||||||
|
.ai-hover {
|
||||||
|
position: fixed;
|
||||||
|
right: 20px;
|
||||||
|
bottom: 80px;
|
||||||
|
z-index: 1000;
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background-color: #409eff;
|
||||||
|
color: #fff;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
|
||||||
|
cursor: pointer;
|
||||||
|
transition: transform 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ai-hover:active {
|
||||||
|
transform: scale(0.95);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ai-hover-content {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ai-hover-text {
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ============= 加载状态 ============= */
|
||||||
|
.loading-history {
|
||||||
|
text-align: center;
|
||||||
|
padding: 10px;
|
||||||
|
color: #999;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.no-more-history {
|
||||||
|
text-align: center;
|
||||||
|
padding: 10px;
|
||||||
|
color: #ccc;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ============= 响应式调整 ============= */
|
||||||
|
@media (max-width: 600px) {
|
||||||
|
.message-content {
|
||||||
|
max-width: 80%;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-title {
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-icon {
|
||||||
|
width: 14px;
|
||||||
|
height: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ai-hover {
|
||||||
|
right: 15px;
|
||||||
|
bottom: 70px;
|
||||||
|
width: 45px;
|
||||||
|
height: 45px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -1,3 +1,4 @@
|
|||||||
|
<!--E:\桌面\AI辅导员\学工系统\zhxg_pc\src\layout\index.vue-->
|
||||||
<template>
|
<template>
|
||||||
<div :class="classObj" class="app-wrapper" :style="{ '--current-color': theme }">
|
<div :class="classObj" class="app-wrapper" :style="{ '--current-color': theme }">
|
||||||
<el-scrollbar>
|
<el-scrollbar>
|
||||||
@@ -16,11 +17,16 @@
|
|||||||
</el-scrollbar>
|
</el-scrollbar>
|
||||||
|
|
||||||
<!-- ai悬停 -->
|
<!-- ai悬停 -->
|
||||||
<div class="ai-hover" @click="showAI()">
|
<div>
|
||||||
<div class="ai-hover-content">
|
<!-- 其他页面内容 -->
|
||||||
<i class="el-icon-question" style="font-size: 30px;"></i>
|
<!-- 触发按钮，控制弹窗显示隐藏 -->
|
||||||
|
<div class="ai-hover" @click="showAI = !showAI">
|
||||||
|
<i class="el-icon-question" style="font-size: 24px;"></i>
|
||||||
</div>
|
</div>
|
||||||
|
<!-- 聊天弹窗，通过 v-if 控制显隐 -->
|
||||||
|
<ChatPopup v-if="showAI" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@@ -30,13 +36,15 @@ import { AppMain, Navbar, Settings, Sidebar, TagsView } from './components'
|
|||||||
import ResizeMixin from './mixin/ResizeHandler'
|
import ResizeMixin from './mixin/ResizeHandler'
|
||||||
import { mapState } from 'vuex'
|
import { mapState } from 'vuex'
|
||||||
import variables from '@/assets/styles/variables.scss'
|
import variables from '@/assets/styles/variables.scss'
|
||||||
|
import ChatPopup from '../layout/components/Aichat/ChatPopup.vue'
|
||||||
|
|
||||||
import {
|
import {
|
||||||
initCoze
|
initCoze
|
||||||
} from "@/utils/ai.js";
|
} from '@/utils/ai.js'
|
||||||
import {
|
import {
|
||||||
getAccessToken
|
getAccessToken
|
||||||
} from "@/api/aiJWT/aiJWT.js"
|
} from '@/api/aiJWT/aiJWT.js'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'Layout',
|
name: 'Layout',
|
||||||
components: {
|
components: {
|
||||||
@@ -45,9 +53,15 @@ export default {
|
|||||||
RightPanel,
|
RightPanel,
|
||||||
Settings,
|
Settings,
|
||||||
Sidebar,
|
Sidebar,
|
||||||
TagsView
|
TagsView,
|
||||||
|
ChatPopup // 注册ChatPopup组件
|
||||||
},
|
},
|
||||||
mixins: [ResizeMixin],
|
mixins: [ResizeMixin],
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
showAI: false // 控制AI弹窗显示/隐藏的变量
|
||||||
|
}
|
||||||
|
},
|
||||||
computed: {
|
computed: {
|
||||||
...mapState({
|
...mapState({
|
||||||
theme: state => state.settings.theme,
|
theme: state => state.settings.theme,
|
||||||
@@ -70,42 +84,54 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
variables() {
|
variables() {
|
||||||
return variables;
|
return variables
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
handleClickOutside() {
|
handleClickOutside() {
|
||||||
this.$store.dispatch('app/closeSideBar', { withoutAnimation: false })
|
this.$store.dispatch('app/closeSideBar', { withoutAnimation: false })
|
||||||
},
|
},
|
||||||
async showAI() {
|
// 切换AI弹窗显示状态
|
||||||
let userInfo = {
|
toggleAI() {
|
||||||
roleGroup: this.userInfo.roles[0].roleName || "student",
|
this.showAI = !this.showAI
|
||||||
nickName: this.userInfo.nickName,
|
// 如果需要在显示时执行原有逻辑，可以取消下面的注释
|
||||||
username: this.userInfo.userName,
|
// if (this.showAI) {
|
||||||
avater: this.avatar,
|
// this.initializeAI()
|
||||||
user_token: this.token
|
// }
|
||||||
}
|
},
|
||||||
console.log("请求AI的信息", userInfo)
|
// 原有AI初始化逻辑，保持注释状态
|
||||||
|
async initializeAI() {
|
||||||
//1.获取token
|
// let userInfo = {
|
||||||
userInfo.accessToken = (await this.getAccessToken()).access_token;
|
// roleGroup: this.userInfo.roles[0].roleName || "student",
|
||||||
userInfo.onRefreshToken = async () => (await this.getAccessToken()).accessToken;
|
// nickName: this.userInfo.nickName,
|
||||||
const sdk = await initCoze(userInfo);
|
// username: this.userInfo.userName,
|
||||||
sdk.showChatBot();
|
// avater: this.avatar,
|
||||||
|
// user_token: this.token
|
||||||
|
// }
|
||||||
|
// console.log("请求AI的信息", userInfo)
|
||||||
|
//
|
||||||
|
// //1.获取token
|
||||||
|
// userInfo.accessToken = (await this.getAccessToken()).access_token;
|
||||||
|
// userInfo.onRefreshToken = async () => (await this.getAccessToken()).accessToken;
|
||||||
|
// const sdk = await initCoze(userInfo);
|
||||||
|
// sdk.showChatBot();
|
||||||
},
|
},
|
||||||
async getAccessToken() {
|
async getAccessToken() {
|
||||||
const res = await getAccessToken(); // 调用请求函数
|
const res = await getAccessToken() // 调用请求函数
|
||||||
const data = JSON.parse(res.data); // 解析数据
|
const data = JSON.parse(res.data) // 解析数据
|
||||||
return data; // ✅ 返回 data
|
return data // ✅ 返回 data
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
@import "~@/assets/styles/mixin.scss";
|
@import "~@/assets/styles/mixin.scss";
|
||||||
@import "~@/assets/styles/variables.scss";
|
@import "~@/assets/styles/variables.scss";
|
||||||
|
|
||||||
|
//~@/assets/styles/variables.scss
|
||||||
|
|
||||||
.app-wrapper {
|
.app-wrapper {
|
||||||
@include clearfix;
|
@include clearfix;
|
||||||
position: relative;
|
position: relative;
|
||||||
@@ -178,4 +204,22 @@ export default {
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
//AI
|
||||||
|
.ai-hover {
|
||||||
|
position: fixed;
|
||||||
|
right: 20px;
|
||||||
|
bottom: 20px;
|
||||||
|
/* 和弹窗拉开距离 */
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
background-color: #409eff;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
color: #fff;
|
||||||
|
cursor: pointer;
|
||||||
|
z-index: 9999;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
54
src/utils/ai_request.js
Normal file
54
src/utils/ai_request.js
Normal file
@@ -0,0 +1,54 @@
|
|||||||
|
import axios from 'axios'
|
||||||
|
import { getToken } from './auth'
|
||||||
|
import { useRouter } from 'vue-router'
|
||||||
|
import { showToast } from '@/utils/toast' // 请替换为你的Toast组件
|
||||||
|
|
||||||
|
// 创建axios实例
|
||||||
|
const service = axios.create({
|
||||||
|
baseURL: process.env.VUE_APP_API_BASE_URL || 'http://localhost:8088/aitutor/aichat',
|
||||||
|
timeout: 15000,
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json'
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
// 请求拦截器
|
||||||
|
service.interceptors.request.use(
|
||||||
|
config => {
|
||||||
|
// 从本地存储获取token
|
||||||
|
const token = getToken()
|
||||||
|
if (token) {
|
||||||
|
config.headers.Authorization = `Bearer ${token}`
|
||||||
|
}
|
||||||
|
return config
|
||||||
|
},
|
||||||
|
error => {
|
||||||
|
return Promise.reject(error)
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
// 响应拦截器
|
||||||
|
service.interceptors.response.use(
|
||||||
|
response => {
|
||||||
|
// 对响应数据做处理
|
||||||
|
return response.data
|
||||||
|
},
|
||||||
|
error => {
|
||||||
|
const router = useRouter()
|
||||||
|
|
||||||
|
// 处理401未授权
|
||||||
|
if (error.response?.status === 401) {
|
||||||
|
showToast('登录已过期，请重新登录', 'error')
|
||||||
|
router.push('/login')
|
||||||
|
}
|
||||||
|
|
||||||
|
// 处理其他错误状态码
|
||||||
|
if (error.response?.status === 500) {
|
||||||
|
showToast('服务器错误，请稍后再试', 'error')
|
||||||
|
}
|
||||||
|
|
||||||
|
return Promise.reject(error)
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
export default service
|
||||||
110
src/utils/ai_stream.js
Normal file
110
src/utils/ai_stream.js
Normal file
@@ -0,0 +1,110 @@
|
|||||||
|
import { getToken } from '@/utils/auth'
|
||||||
|
|
||||||
|
// 使用环境变量配置基础URL
|
||||||
|
const BASE_URL = process.env.VUE_APP_API_BASE_URL || 'http://localhost:8088'
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 创建聊天流式连接
|
||||||
|
* @param {Object} params 请求参数
|
||||||
|
* @param {string} params.prompt 用户输入
|
||||||
|
* @param {string} params.userId 用户ID
|
||||||
|
* @param {string} params.userName 用户名
|
||||||
|
* @param {string} [params.conversationId] 会话ID
|
||||||
|
* @returns {Object} 包含stream和cancel方法的对象
|
||||||
|
*/
|
||||||
|
export function createChatStream(params) {
|
||||||
|
const requestId = `req-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`
|
||||||
|
const url = `${BASE_URL}/aitutor/aichat/stream`
|
||||||
|
const token = getToken()
|
||||||
|
|
||||||
|
if (!token) {
|
||||||
|
throw new Error('请先登录')
|
||||||
|
}
|
||||||
|
|
||||||
|
const controller = new AbortController()
|
||||||
|
|
||||||
|
const fetchPromise = fetch(url, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
'Authorization': `Bearer ${token}`,
|
||||||
|
'X-Request-ID': requestId
|
||||||
|
},
|
||||||
|
body: JSON.stringify({
|
||||||
|
query: params.prompt,
|
||||||
|
user_id: params.userId,
|
||||||
|
user_name: params.userName,
|
||||||
|
user_token: params.user_token || '123',
|
||||||
|
user_role: 'student',
|
||||||
|
conversation_id: params.conversationId || null,
|
||||||
|
}),
|
||||||
|
signal: controller.signal
|
||||||
|
})
|
||||||
|
.then(response => {
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error(`HTTP ${response.status}`)
|
||||||
|
}
|
||||||
|
if (!response.body) {
|
||||||
|
throw new Error('Response body is null')
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
reader: response.body.getReader(),
|
||||||
|
decoder: new TextDecoder('utf-8')
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
return {
|
||||||
|
stream: fetchPromise,
|
||||||
|
cancel: (reason) => {
|
||||||
|
if (!controller.signal.aborted) {
|
||||||
|
controller.abort(reason)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 处理流式响应
|
||||||
|
* @param {ReadableStreamDefaultReader} reader 读取器
|
||||||
|
* @param {TextDecoder} decoder 文本解码器
|
||||||
|
* @param {Function} onMessage 消息回调
|
||||||
|
* @param {Function} onError 错误回调
|
||||||
|
* @param {Function} onComplete 完成回调
|
||||||
|
*/
|
||||||
|
export async function processStream(reader, decoder, { onMessage, onError, onComplete }) {
|
||||||
|
let buffer = ''
|
||||||
|
|
||||||
|
try {
|
||||||
|
while (true) {
|
||||||
|
const { done, value } = await reader.read()
|
||||||
|
if (done) break
|
||||||
|
|
||||||
|
buffer += decoder.decode(value, { stream: true })
|
||||||
|
const lines = buffer.split('\n')
|
||||||
|
buffer = lines.pop() || ''
|
||||||
|
|
||||||
|
for (const line of lines) {
|
||||||
|
if (!line.trim()) continue
|
||||||
|
|
||||||
|
try {
|
||||||
|
const data = JSON.parse(line)
|
||||||
|
if (typeof onMessage === 'function') {
|
||||||
|
onMessage(data)
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
console.warn('解析消息失败:', line, e)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (typeof onComplete === 'function') {
|
||||||
|
onComplete()
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
if (error.name !== 'AbortError' && typeof onError === 'function') {
|
||||||
|
onError(error)
|
||||||
|
}
|
||||||
|
} finally {
|
||||||
|
reader.releaseLock()
|
||||||
|
}
|
||||||
|
}
|
||||||
48
src/utils/toast.js
Normal file
48
src/utils/toast.js
Normal file
@@ -0,0 +1,48 @@
|
|||||||
|
import { Message } from 'element-ui'
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 显示Toast消息
|
||||||
|
* @param {string} message - 消息内容
|
||||||
|
* @param {string} type - 消息类型: 'success', 'warning', 'info', 'error'
|
||||||
|
* @param {number} duration - 显示时长，默认3000ms
|
||||||
|
*/
|
||||||
|
export function showToast(message, type = 'info', duration = 3000) {
|
||||||
|
Message({
|
||||||
|
message,
|
||||||
|
type,
|
||||||
|
duration,
|
||||||
|
showClose: true
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 显示成功消息
|
||||||
|
* @param {string} message - 消息内容
|
||||||
|
*/
|
||||||
|
export function showSuccess(message) {
|
||||||
|
showToast(message, 'success')
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 显示错误消息
|
||||||
|
* @param {string} message - 消息内容
|
||||||
|
*/
|
||||||
|
export function showError(message) {
|
||||||
|
showToast(message, 'error')
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 显示警告消息
|
||||||
|
* @param {string} message - 消息内容
|
||||||
|
*/
|
||||||
|
export function showWarning(message) {
|
||||||
|
showToast(message, 'warning')
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 显示信息消息
|
||||||
|
* @param {string} message - 消息内容
|
||||||
|
*/
|
||||||
|
export function showInfo(message) {
|
||||||
|
showToast(message, 'info')
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user