Merge branch 'main' of http://47.112.118.149:10082/xgxt_sd/zhxg_pc
This commit is contained in:
110
src/api/aiChat/ai_index.js
Normal file
110
src/api/aiChat/ai_index.js
Normal file
@@ -0,0 +1,110 @@
|
||||
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
|
||||
}
|
||||
|
||||
// 如果有beforeId参数，添加到请求中（后端参数名为firstId）
|
||||
if (beforeId) {
|
||||
params.firstId = 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/AI.png
Normal file
BIN
src/assets/ai/AI.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
1
src/assets/ai/good.svg
Normal file
1
src/assets/ai/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/tread.svg
Normal file
1
src/assets/ai/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 |
BIN
src/assets/ai/yonghu.png
Normal file
BIN
src/assets/ai/yonghu.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.3 KiB |
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
|
||||
1235
src/layout/components/Aichat/ChatPopup.vue
Normal file
1235
src/layout/components/Aichat/ChatPopup.vue
Normal file
File diff suppressed because it is too large
Load Diff
@@ -1,3 +1,4 @@
|
||||
<!--E:\桌面\AI辅导员\学工系统\zhxg_pc\src\layout\index.vue-->
|
||||
<template>
|
||||
<div :class="classObj" class="app-wrapper" :style="{ '--current-color': theme }">
|
||||
<el-scrollbar>
|
||||
@@ -16,11 +17,17 @@
|
||||
</el-scrollbar>
|
||||
|
||||
<!-- ai悬停 -->
|
||||
<div class="ai-hover" @click="showAI()">
|
||||
<div class="ai-hover-content">
|
||||
<i class="el-icon-question" style="font-size: 30px;"></i>
|
||||
<div>
|
||||
<!-- 其他页面内容 -->
|
||||
<!-- 触发按钮，控制弹窗显示隐藏 -->
|
||||
<div class="ai-hover" @click="showAI = !showAI">
|
||||
<span v-if="!showAI" style="font-size: 14px; font-weight: bold;">AI</span>
|
||||
<i v-else class="el-icon-close" style="font-size: 20px;"></i>
|
||||
</div>
|
||||
<!-- 聊天弹窗，通过 v-if 控制显隐 -->
|
||||
<ChatPopup v-if="showAI" @close="showAI = false" />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -30,13 +37,15 @@ import { AppMain, Navbar, Settings, Sidebar, TagsView } from './components'
|
||||
import ResizeMixin from './mixin/ResizeHandler'
|
||||
import { mapState } from 'vuex'
|
||||
import variables from '@/assets/styles/variables.scss'
|
||||
import ChatPopup from '../layout/components/Aichat/ChatPopup.vue'
|
||||
|
||||
import {
|
||||
initCoze
|
||||
} from "@/utils/ai.js";
|
||||
} from '@/utils/ai.js'
|
||||
import {
|
||||
getAccessToken
|
||||
} from "@/api/aiJWT/aiJWT.js"
|
||||
} from '@/api/aiJWT/aiJWT.js'
|
||||
|
||||
export default {
|
||||
name: 'Layout',
|
||||
components: {
|
||||
@@ -45,9 +54,15 @@ export default {
|
||||
RightPanel,
|
||||
Settings,
|
||||
Sidebar,
|
||||
TagsView
|
||||
TagsView,
|
||||
ChatPopup // 注册ChatPopup组件
|
||||
},
|
||||
mixins: [ResizeMixin],
|
||||
data() {
|
||||
return {
|
||||
showAI: false // 控制AI弹窗显示/隐藏的变量
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
theme: state => state.settings.theme,
|
||||
@@ -70,42 +85,54 @@ export default {
|
||||
}
|
||||
},
|
||||
variables() {
|
||||
return variables;
|
||||
return variables
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleClickOutside() {
|
||||
this.$store.dispatch('app/closeSideBar', { withoutAnimation: false })
|
||||
},
|
||||
async showAI() {
|
||||
let userInfo = {
|
||||
roleGroup: this.userInfo.roles[0].roleName || "student",
|
||||
nickName: this.userInfo.nickName,
|
||||
username: this.userInfo.userName,
|
||||
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();
|
||||
// 切换AI弹窗显示状态
|
||||
toggleAI() {
|
||||
this.showAI = !this.showAI
|
||||
// 如果需要在显示时执行原有逻辑，可以取消下面的注释
|
||||
// if (this.showAI) {
|
||||
// this.initializeAI()
|
||||
// }
|
||||
},
|
||||
// 原有AI初始化逻辑，保持注释状态
|
||||
async initializeAI() {
|
||||
// let userInfo = {
|
||||
// roleGroup: this.userInfo.roles[0].roleName || "student",
|
||||
// nickName: this.userInfo.nickName,
|
||||
// username: this.userInfo.userName,
|
||||
// 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() {
|
||||
const res = await getAccessToken(); // 调用请求函数
|
||||
const data = JSON.parse(res.data); // 解析数据
|
||||
return data; // ✅ 返回 data
|
||||
const res = await getAccessToken() // 调用请求函数
|
||||
const data = JSON.parse(res.data) // 解析数据
|
||||
return data // ✅ 返回 data
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "~@/assets/styles/mixin.scss";
|
||||
@import "~@/assets/styles/variables.scss";
|
||||
|
||||
//~@/assets/styles/variables.scss
|
||||
|
||||
.app-wrapper {
|
||||
@include clearfix;
|
||||
position: relative;
|
||||
@@ -178,4 +205,22 @@ export default {
|
||||
align-items: center;
|
||||
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>
|
||||
|
||||
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 { getTokenKeySessionStorage } 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',
|
||||
timeout: 15000,
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
}
|
||||
})
|
||||
|
||||
// 请求拦截器
|
||||
service.interceptors.request.use(
|
||||
config => {
|
||||
// 从本地存储获取token
|
||||
const token = getTokenKeySessionStorage()
|
||||
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
|
||||
115
src/utils/ai_stream.js
Normal file
115
src/utils/ai_stream.js
Normal file
@@ -0,0 +1,115 @@
|
||||
import { getTokenKeySessionStorage } 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 = getTokenKeySessionStorage();
|
||||
|
||||
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