Compare commits

...

65 Commits

Author SHA1 Message Date
陈昱达
2c630eac70 feat(ai-chat): 实现案例专家功能入口权限控制及消息展示优化- 修改AI聊天接口地址为本地开发环境地址
- 新增showCaseAiEntrance接口用于控制案例专家功能入口显示
- 优化消息组件中的案例引用展示逻辑,支持展开/收起功能
- 增加案例引用的上传时间、作者机构等信息展示
- 实现打字机效果的文本逐字显示功能
- 优化AI消息响应处理逻辑,支持think标签内容解析
2025-09-28 11:40:35 +08:00
陈昱达
483b57f667 feat(ai-chat): 实现AI聊天对话与会话消息记录功能
新增AI聊天对话接口和会话消息记录查询接口,支持SSE流式响应处理。
在sendMessage组件中集成真实SE调用逻辑,替换原有模拟实现,
并完善conversationId的获取与保存机制。新增sseHelper工具类用于统一处理SSE连接和数据解析。
2025-09-24 14:26:37 +08:00
陈昱达
be411ec72d feat(portal-case): 新增AI智能问答对话功能新增消息展示组件和发送消息组件,实现机器人与用户的消息交互。
支持打字机效果展示AI回复内容,并可显示思考过程与相关案例推荐。
添加对话框背景样式及自动滚动功能,优化用户体验。
提供开启新对话和推荐问题功能,增强交互性。
2025-09-24 09:34:45 +08:00
dong.ai
d7e425ce9d 案例专家添加图片 2025-09-24 09:27:26 +08:00
dong.ai
8b68489b25 案例AI弹窗ui 2025-09-23 09:50:21 +08:00
joshen
c3f53515b9 Merge branch '202599-da' 2025-09-19 18:58:47 +08:00
087be5dd38 fix: 修复分数异常展示的问题 2025-09-19 13:43:23 +08:00
joshen
1772c972b9 Merge branch '202599-da' 2025-09-18 18:51:50 +08:00
dong.ai
91bafcb5b9 调整字体展示位置 2025-09-15 17:15:47 +08:00
dong.ai
8c533c5f3a 修改字体大小 2025-09-15 17:02:45 +08:00
dong.ai
bb17784501 修改图片大小,背景图片 2025-09-15 16:32:23 +08:00
dong.ai
69530fe6ad 标题展示隐藏判断2 2025-09-15 14:01:32 +08:00
dong.ai
b1cd8e2f63 标题展示隐藏判断 2025-09-15 13:57:19 +08:00
dong.ai
7335dd4eba 首页教师名称展示 2025-09-15 13:45:35 +08:00
3860087fac feat: 增加搜索标签展示,修复样式问题,提示语修改 2025-09-15 11:36:08 +08:00
046509f70d fix: 修复课程名称展示异常的问题 2025-09-15 10:06:35 +08:00
bf0ae91184 feat: 优化调用显示方案 2025-09-15 10:06:35 +08:00
f61742a0b9 fix: 修复教师无法展示的问题 2025-09-14 22:09:03 +08:00
dong.ai
c886a80193 教师展示 2025-09-14 21:30:12 +08:00
05ad90b025 fix: 修复标签无法正常高亮的问题 2025-09-14 21:23:56 +08:00
f3833a23fa style: 优化选择年份和边距 2025-09-14 21:16:02 +08:00
d957a8d44b fix: 修复 主页图片无法正常展示的问题 2025-09-14 21:16:01 +08:00
dong.ai
89ed79828f 修复跳转详情2 2025-09-14 21:09:57 +08:00
dong.ai
b926590edc 修改跳转详情 2025-09-14 21:04:21 +08:00
19bc757dc2 fix: 修复 systype 错误的问题 2025-09-14 20:59:38 +08:00
f3a1036b64 feat: 样式修改,功能修复 2025-09-14 20:50:42 +08:00
3c1650b751 Merge branch '2025-912-hz' into 202599-da
# Conflicts:
#	src/api/phase2/index.js
2025-09-14 20:30:44 +08:00
ff2bdb4ae5 fix: 修复获取课程精品课标记时间年份列表
# Conflicts:
#	src/api/phase2/index.js
2025-09-14 20:29:53 +08:00
dong.ai
14fb53ccd3 解决冲突 2025-09-14 20:10:29 +08:00
dong.ai
72f9661150 Merge branch '202599-da' of https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal into 202599-da 2025-09-14 19:43:10 +08:00
dong.ai
7806afc5f7 还原代码 2025-09-14 19:40:05 +08:00
e1af233c5f feat: 完成精品课程专区的内容 2025-09-14 19:39:41 +08:00
2738493030 fix: 修复刷新页面自动调整错误的问题 2025-09-14 19:39:08 +08:00
480a4f5564 chore: 修正路由名称拼写错误 2025-09-14 19:39:06 +08:00
dong.ai
205bf5469f 字段展示 2025-09-14 19:08:21 +08:00
dong.ai
30897a1fa5 修改展示 2025-09-14 19:02:38 +08:00
dong.ai
1c59cffd3e 标题展示 2025-09-14 18:54:18 +08:00
dong.ai
6e9f93d6c9 字段处理 2025-09-14 18:48:47 +08:00
dong.ai
3ee4a2fd6e 调整首页字段展示 2025-09-14 18:11:33 +08:00
dong.ai
1b442ef040 首页跳转详情 2025-09-14 17:50:31 +08:00
dong.ai
4693cb0db1 收藏图标展示 2025-09-14 17:43:35 +08:00
dong.ai
92fecbec80 收藏图表展示 2025-09-14 17:36:13 +08:00
dong.ai
be63f5a1aa 收藏图片展示 2025-09-14 17:28:04 +08:00
dong.ai
c9899eda6b 修改收藏 2025-09-14 17:20:15 +08:00
dong.ai
0f52a69beb 收藏展示 2025-09-14 17:07:30 +08:00
dong.ai
3410afedcf 收藏发消息接口字段 2025-09-14 16:45:13 +08:00
dong.ai
33866c0f49 修改收藏 2025-09-14 16:28:36 +08:00
dong.ai
c9e51fc21f 完善收藏 2025-09-14 16:03:49 +08:00
dong.ai
a42668c929 调整背景样式 2025-09-14 15:29:45 +08:00
dong.ai
01d4bc0536 调整背景图样式 2025-09-14 14:52:19 +08:00
dong.ai
d52e8b389b 修改首页展示样式 2025-09-14 13:55:28 +08:00
dong.ai
e9a86d0364 修改入参格式 2025-09-14 12:25:56 +08:00
dong.ai
0e43ca5e82 修改请求头类型 2025-09-14 12:01:08 +08:00
dong.ai
0771460f60 首页精品课部分 2025-09-14 11:45:27 +08:00
dong.ai
1a2829d70a 精品课列表接口 2025-09-13 19:58:11 +08:00
dong.ai
68eda7efcc 首页添加精品课模块 2025-09-13 15:39:35 +08:00
0b0789feda feat: 右侧菜单高度调整为 650 2025-09-09 17:51:26 +08:00
70bb87a17a feat: 溢出控制高度的代码, 防止内容塌陷 2025-09-09 17:51:25 +08:00
4e60811542 feat: 溢出控制高度的代码, 防止内容塌陷 2025-09-09 17:51:24 +08:00
670788339
075fdb1913 认证讲师库删除年份后缀 2025-09-09 17:39:58 +08:00
670788339
8c7569ae4e banner跳转 2025-09-04 16:46:09 +08:00
670788339
56f565cbf3 banner跳转暂时注释 2025-09-02 08:46:33 +08:00
670788339
c15f52e325 banner跳转 2025-09-01 15:37:12 +08:00
670788339
98c10e703e 教师专区banner点击跳转 2025-09-01 13:21:12 +08:00
670788339
2078c128c9 教师专区banner点击跳转 2025-09-01 13:12:22 +08:00
24 changed files with 4087 additions and 233 deletions

BIN
public/images/case-logo.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 438 KiB

BIN
public/images/qualityBg.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 KiB

30
src/api/boe/aiChat.js Normal file
View File

@@ -0,0 +1,30 @@
import ajax from '@/utils/xajax.js'
/**
* AI聊天对话接口
* @param {Object} data - 请求参数
* @param {string} data.conversationId - 会话ID如果为空则创建新会话
* @param {string} data.query - 用户提问内容
* @returns {Promise} - 返回SSE流
*/
export function aiChat(data) {
return ajax.postJson('http://192.168.3.178/xboe/m/boe/case/ai/chat', data)
}
/**
* 查询会话消息记录接口
* @param {string} conversationId - 会话ID
* @returns {Promise} - 返回会话历史记录
*/
export function getChatMessages(conversationId) {
return ajax.get('/xboe/m/boe/case/ai/messages?conversationId=' + conversationId)
}
/**
* 案例专家功能入口显示权限判断接口
* 判断当前登录用户是否显示"案例专家"功能入口
* @returns {Promise} - 返回是否显示功能入口的布尔值
*/
export function showCaseAiEntrance() {
return ajax.get('/xboe/m/boe/case/ai/show-entrance')
}

208
src/api/httpAjax.js Normal file
View File

@@ -0,0 +1,208 @@
import axios from 'axios'
import qs from 'qs'
import {Notification, MessageBox, Message} from 'element-ui'
import store from '@/store'
import {getToken} from '@/utils/token'
import errorCode from '@/utils/errorCode'
/**
*request请求 axios.request(config)
*requestJson请求 axios.request(config)
*get请求 axios.get(url[, config])
*post请求 axios.post(url[, data[, config]])
*postJson请求 axios.post(url[, data[, config]])
*put请求 axios.put(url[, data[, config]])
*putJson请求 axios.put(url[, data[, config]])
*patch请求 axios.patch(url[, data[, config]])
*patchJson请求 axios.patch(url[, data[, config]])
*delete请求 axios.delete(url[, config])
*/
// const ReLoginUrl=process.env.VUE_APP_LOGIN_URL;
const TokenName = 'token';
/**axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded'**/
//只是用于发送json对象数据时使用post,put,patch
/**axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded'**/
//只是用于发送json对象数据时使用post,put,patch
//用于普通的发送请求
const formRequest = axios.create({
//headers:{'Content-Type':'application/x-www-form-urlencoded'},
// axios中请求配置有baseURL选项表示请求URL公共部分
// baseURL: process.env.VUE_APP_CESOURCE_BASE_API,
//超时
timeout: 10000,
})
//发送json对象的拦截器
formRequest.interceptors.request.use(config => {
//是否需要设置 token
const isToken = (config.headers || {}).isToken === false
let curToken = getToken();
//curToken='eyJ0eXBlIjoidG9rZW4iLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJodHRwOlwvXC91LmJvZS5jb20iLCJpYXQiOjE2NzIzMTE2MTIsImV4cCI6MTY3MjMxODgxMiwiR2l2ZW5OYW1lIjoiYm9ldSIsInVzZXJJZCI6IjZCMDQ5RkFGLUMzMTQtN0NDRi0wRDI4LTBEMjNGNEM0MjUzMSIsInVJZCI6Ijk2NTM0MjAyNzQ5NzYwNzE2OCIsInBlcm1pc3Npb24iOiIifQ==.a4f41376e994c5fcd3ab537ce17572ef4c633863f87785cf7b6ffa353e2ed51c';
if (curToken && !isToken) {
config.headers[TokenName] = curToken // 让每个请求携带自定义token 请根据实际情况自行修改
}
return config
}, error => {
console.log(error)
Promise.reject(error)
});
formRequest.interceptors.response.use(res => {
//console.log(res);
const code = res.data.status || 200;
if (code === 200) {
return res.data
} else {
if (code === 401) {
// store.dispatch('LogOut').then(() => {
// location.href = this.webBaseUrl + ReLoginUrl;
// })
console.error('', res.data);
return Promise.reject(new Error('接口返回未登录'))
} else if (code === 403) {
var msg = '当前操作没有权限';
Message({message: msg, type: 'error'});
return Promise.reject(new Error(msg))
} else {
//Message({message: res.data.message, type: 'error'});
//console.log('err' + res.data.error);
return res.data
}
}
},
error => {
console.log('err', error)
let {message} = error;
if (message == "Network Error") {
message = "网络异常,请稍后重试";
} else if (message.includes("timeout")) {
message = "网络异常或接口错误,请求超时";
} else if (message.includes("Request failed with status code")) {
message = "系统接口" + message.substr(message.length - 3) + "异常";
}
Message({
message: message,
type: 'error',
duration: 5 * 1000
})
return Promise.reject(error)
}
)
/**
* request请求,可以自定义参数
*/
const request = formRequest.request;
/**
* get请求 ,只有url
*/
const get = function (baseURL, url) {
return request({
baseURL,
url: url,
method: 'get',
headers: {'Content-Type': 'application/json'}
})
}
/**
* post请求
* @param {Object} url
* @param {Object} postData
*/
const post = function (baseURL, url, postData) {
// if (postData) {
// postData = qs.stringify(postData);
// }
return request({
baseURL,
url: url,
method: 'post',
data: postData,
headers: {'Content-Type': 'application/json'}
})
}
//post请求
const postForm = function (baseURL, url, data) {
return request({
baseURL,
url,
data,
method: 'post',
headers: {'Content-Type': 'application/x-www-form-urlencoded'}
});
}
// const postJson=jsonRequest.post;
const postJson = function (baseURL, url, postData) {
return request({
baseURL,
url: url,
method: 'post',
data: postData,
headers: {'Content-Type': 'application/json;charset=utf-8'},
})
}
// 导出文件请求定义
const postJsonToFile = function (baseURL, url, postData) {
return request({
baseURL,
url: url,
method: 'post',
data: postData,
headers: {'Content-Type': 'application/json;charset=utf-8'},
responseType: 'blob'
})
}
const getJsonToFile = function (baseURL, url, postData) {
return request({
baseURL,
url: url,
method: 'get',
data: postData,
headers: {'Content-Type': 'application/json;charset=utf-8'},
responseType: 'blob'
})
}
/**
* put请求
*/
const put = function (baseURL, url, data) {
if (data) {
data = qs.stringify(data);
}
return request({
baseURL,
url: url,
method: 'put',
data: data,
headers: {'Content-Type': 'application/x-www-form-urlencoded'}
})
}
const putJson = function (baseURL, url, data) {
return request({
baseURL,
url: url,
method: 'put',
data: data,
headers: {'Content-Type': 'application/json;charset=utf-8'},
})
}
export default {
tokenName: TokenName,
request,
get,
post,
postJson,
postJsonToFile,
put,
putJson,
getJsonToFile
}

View File

@@ -1,5 +1,7 @@
import ajax from '@/utils/xajax.js'
import http from '../unionAjax'
import httpAjax from '../httpAjax'
const baseURL = process.env.VUE_APP_MANAGER_API_PATH;
@@ -47,6 +49,18 @@ const articlelist=function (type){
const courselist=function (data){
return ajax.post('/xboe/portal/index/courselist',data);
}
// 精品课信息列表
const qualitylist=function (data){
return httpAjax.post(baseURL,'/quality/home/qualityItem',data);
}
// 精品课分页查询
export const qualityPageList=function (data){
return httpAjax.post(baseURL,'/quality/home/qualityPages',data);
}
// 课程精品课标记时间年份列表
export const qualityCourseTimeMark=function (){
return httpAjax.post(baseURL,'/quality/manage/qualityYearList',{});
}
/**
* 首页新课程推荐列表
*/
@@ -61,5 +75,7 @@ export default {
articlelist,
courselist,
newCases,
getRecommendList
getRecommendList,
qualitylist,
qualityPageList
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 166 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 34 KiB

View File

@@ -44,7 +44,7 @@
<!-- <svg-icon v-else style="margin-right: 0;" :style="{'font-size':(size+2)+'px'}" :icon-class="isFavorite?'scactive2':'xihuan'"></svg-icon> -->
<div v-else class="is_favorite" :class="isFavorite?'is_favorite_a':'is_favorite'"></div>
</el-tooltip>
<span v-if="!courseExclusive" class="interact-bar-value"> {{ data.favorites? data.favorites:0}}</span>
<span v-if="!courseExclusive" class="interact-bar-value"> {{ data.favorites? data.favorites:data.hasCollect?number(data.hasCollect):1}}</span>
</div>
<div v-if="shares" @click="addShare()" :style="`min-width: ${nodeWidth};`" class="interact-bar-btn" :class="{cursor:!readonly}">
<el-tooltip effect="light" content="分享" placement="top" :visible-arrow="false" popper-class="text-tooltip">
@@ -114,6 +114,8 @@ export default {
shares:0,
praises:0,
views:0,
courseId:'',
courseName:''
}
}
},
@@ -234,7 +236,7 @@ export default {
created(){
},
mounted() {
if(this.data && this.data.id && !this.readonly){
if(this.data && (this.data.id||this.data.courseId) && !this.readonly){
this.checkHas();
}
@@ -308,7 +310,7 @@ export default {
}
let msgPageParams=this.pageParams;
if(!msgPageParams){
msgPageParams=this.data.id;
msgPageParams=this.data.id ?this.data.id: this.data.courseId;
}
let message={
content,
@@ -331,9 +333,9 @@ export default {
})
},
checkHas(){
if(this.type>0 && !this.readonly && this.data.id){
if(this.type>0 && !this.readonly && (this.data.id||this.data.courseId)){
if(this.favorites){
apiFavorites.has(this.type,this.data.id).then(rs=>{
apiFavorites.has(this.type,(this.data.id || this.data.courseId)).then(rs=>{
if(rs.status==200 && rs.result){
this.isFavorite=true;
}else{
@@ -506,9 +508,11 @@ export default {
return;
}
//需要判断是否已点赞,已点赞的不再加
console.log(this.data,'---------------');
let postData={
objType:this.type,
objId:this.data.id,
objId:this.data.id ?this.data.id: this.data.courseId,
title:'',
}
if(this.loading) {
@@ -516,7 +520,7 @@ export default {
}
this.loading=true;
if(this.type==1){
postData.title=this.data.name;
postData.title=this.data.name?this.data.name:this.data.courseName;
}else if(this.type==60){
postData.title=this.data.content;
} else if(this.type==5){
@@ -525,7 +529,7 @@ export default {
postData.title=this.data.title;
}
if(this.isFavorite) {// 已经收藏,再次点击取消收藏
apiFavorites.remove(this.type,this.data.id).then(res=>{
apiFavorites.remove(this.type,this.data.id ?this.data.id: this.data.courseId).then(res=>{
this.loading=false;
if(res.status==200){
this.isFavorite=false;
@@ -554,7 +558,7 @@ export default {
this.$store.dispatch("unicomFavorites",true)
}
//if(this.type===2||this.type===4){
this.messageSave(this.data.id,this.data.title,this.userInfo.name,this.data.sysCreateBy,this.data.sysCreateAid,'收藏了我发布的');
this.messageSave(this.data.id ?this.data.id: this.data.courseId,this.data.title,this.userInfo.name,this.data.sysCreateBy,this.data.sysCreateAid,'收藏了我发布的');
//}
this.$message({message:'已加入收藏',type:'success'});
//this.$emit('addFavorite',res.result);//添加收藏,如果是true代表添加成功false代表已存在

View File

@@ -13,9 +13,9 @@
</router-link>
</div>
<div class="top-nav" :style="{color:textColor}" :class="current == 'course' ? activeNav : ''">
<router-link to="/course">课程
<a @click="handleChangeCourse">课程
<div :class="current == 'course' ? 'nav-bottbor' : ''"></div>
</router-link>
</a>
</div>
<div class="top-nav" :style="{color:textColor}" :class="current == 'case' ? activeNav : ''">
<router-link to="/case">案例
@@ -214,6 +214,12 @@ export default {
//this.loadPopupConfig();
},
methods: {
handleChangeCourse() {
const paths = ["/course","/qualityCourse"]
// 如果是 课程 和 精品课程, 那么就不再重定向
const needReload = paths.findIndex(e=> e === this.$route.path) === -1
if (needReload) this.$router.push({path: paths[0]})
},
setCurIdentity(iden){
this.$store.dispatch('SetCurIdentity',iden);

View File

@@ -2,7 +2,6 @@ import Vue from 'vue'
import VueRouter from 'vue-router'
/* Layout */
import Layout from '@/layout/index'
import LayoutPortal from '@/layout/portal'
import Grateful from '@/views/grateful'
Vue.use(VueRouter)
@@ -362,7 +361,15 @@ export const constantRoutes = [{
path: '/500',
component: (resolve) => require(['@/views/error/500'], resolve),
hidden: true
},
{
path: '/qualityCourse',
hidden: true,
component: (resolve) => require(['@/views/portal/course/qualityCourse'], resolve),
name: 'qualityCourse',
meta: {title: '精品课课程', keepAlive: true, icon: 'dashboard', noCache: true, affix: false},
}
]
const router = new VueRouter({

83
src/utils/sseHelper.js Normal file
View File

@@ -0,0 +1,83 @@
/**
* SSE流式数据处理工具
*/
/**
* 处理SSE响应数据
* @param {String} data - SSE响应数据
* @param {Function} onMessage - 处理消息的回调函数
* @param {Function} onComplete - 完成时的回调函数
* @param {Function} onError - 错误处理回调函数
*/
export function processSSEData(data, onMessage, onComplete, onError) {
try {
const lines = data.split('\n')
for (const line of lines) {
if (line.startsWith('data: ')) {
const jsonData = JSON.parse(line.substring(6))
onMessage(jsonData)
// 如果状态为4表示对话结束
if (jsonData.data && jsonData.data.status === 4) {
onComplete()
}
}
}
} catch (error) {
console.error('处理SSE数据时出错:', error)
if (onError) {
onError(error)
}
}
}
/**
* 创建SSE连接
* @param {String} url - 请求地址
* @param {Object} data - 请求数据
* @param {Function} onMessage - 消息处理回调
* @param {Function} onComplete - 完成回调
* @param {Function} onError - 错误回调
* @returns {Promise} - 返回fetch Promise
*/
export function createSSEConnection(url, data, onMessage, onComplete, onError) {
return fetch(url, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(data)
}).then(response => {
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`)
}
const reader = response.body.getReader()
const decoder = new TextDecoder('utf-8')
let buffer = ''
function read() {
reader.read().then(({ done, value }) => {
if (done) {
if (onComplete) onComplete()
return
}
buffer += decoder.decode(value, { stream: true })
processSSEData(buffer, onMessage, onComplete, onError)
// 继续读取
read()
}).catch(error => {
console.error('SSE读取错误:', error)
if (onError) onError(error)
})
}
// 开始读取数据
read()
}).catch(error => {
console.error('SSE连接错误:', error)
if (onError) onError(error)
})
}

View File

@@ -153,9 +153,85 @@
</div>
</div>
<div class="xindex-content">
<!-- 推荐课程 -->
<div class="modules xcontent2">
<!-- <div class="xcontent2-main"> -->
<!--内容块-->
<!-- </div> -->
<!-- 精品课模块 -->
<div class="xcontent2-main">
<div class="modules-title xindex-main" v-if="this.qusisityList.list.length > 0">
<!-- <span class="modules-text" style="color: #3D86F4;">精品课</span> -->
<span class="quyer-tag" style="margin-left: 0px;">
<!-- <img src="../assets/images/tutoring1.pn" alt=""> -->
<img class="modules-text" style="height: 28px;" src="../assets/images/course/courseTitle.png" alt="">
</span>
<span class="more">
<router-link to="/qualityCourse">查看更多>></router-link>
</span>
</div>
<div
v-for="(course, eIndex) in exquisiteList"
:key="'cc' + eIndex"
class="xindex-course courseBg"
style="position: relative;margin-top: 20px;"
>
<div style="position: absolute; right: 25px; bottom: 72px">
<interactBar
nodeWidth="20px"
:courseExclusive="true"
:type="1"
:data="course"
:comments="false"
:praises="false"
:shares="false"
:views="false"
>
</interactBar>
<!-- <svg-icon style="font-size: 32px;margin-top: -5px;" icon-class="collectedCourse"></svg-icon> -->
</div>
<a @click="toCourseDetail(course)">
<div class="xindex-course-image">
<course-image :course="course"></course-image>
<!-- <span v-if="course.type == 20 || 10" class="course-type"
>录播课</span
> -->
<img v-if="course.type == 20 || 10" src="../assets/images/course/courseTag.png" class="course-type" style="background: none;" alt="">
</div>
<div
style="width: 80%"
:title="course.courseName"
class="course-title portal-title-tow two-line-ellipsis"
>
{{ course.courseName }}
</div>
<div class="course-author">
<div class="course-author-left">
{{ course.authorInfo.name }}
<span class="study-num"
>{{ formatNum(course.studyNum) }}人学习</span
>
</div>
<div style="display: flex">
<div v-if="course.courseScore">
<span class="course-score-value" style="margin-left: 10px"
>{{ toScore(course.courseScore) }}</span
>
</div>
<div v-else class="course-score-no">未评分</div>
</div>
</div>
</a>
</div>
<!--内容块-->
<div class="modules-title xindex-main">
<span class="modules-text">推荐课程</span>
@@ -1137,6 +1213,9 @@ export default {
orderType: 2,
list: [],
},
qusisityList: {
list: [],
},
// 推荐课程
recommendedList:{
list: [],
@@ -1164,6 +1243,7 @@ export default {
},
mounted() {
this.getCourseData(1);
this.getEsqusiteList();
this.getRecommendList();
this.getPositive()
this.getCaseData();
@@ -1227,6 +1307,10 @@ export default {
courseComputedTwoList(){
return this.courseList.list.slice(3)
},
// 精品课展示
exquisiteList() {
return this.qusisityList.list.slice(0,3)
},
},
methods: {
getPositive() {
@@ -1421,21 +1505,27 @@ export default {
//二期调整,直接改成一个地址
//return this.webBaseUrl + '/course/detail?id=' + item.id;
let $this = this;
let cId = "";
if (item.id) {
cId = item.id;
} else {
cId = item.courseId;
}
if (item.type == 10) {
//return this.webBaseUrl + "/course/studyindex?id=" + item.id;
//console.log("直接进入学习页面");
this.$router.push("/course/studyindex?id=" + item.id);
this.$router.push("/course/studyindex?id=" + cId);
} else if (item.type == 20) {
apiCourseStudy.hasSignup(item.id).then((rs) => {
apiCourseStudy.hasSignup(cId).then((rs) => {
if (rs.status == 200) {
//return $this.webBaseUrl + "/course/studyindex?id=" + item.id;
this.$router.push("/course/studyindex?id=" + item.id);
//return $this.webBaseUrl + "/course/studyindex?id=" + cId;
this.$router.push("/course/studyindex?id=" + cId);
} else {
//return $this.webBaseUrl + "/course/detail?id=" + item.id;
this.$router.push("/course/detail?id=" + item.id);
//return $this.webBaseUrl + "/course/detail?id=" + cId;
this.$router.push("/course/detail?id=" + cId);
}
});
//return $this.webBaseUrl + "/course/detail?id=" + item.id;
//return $this.webBaseUrl + "/course/detail?id=" + cId;
}
},
orderTypeFilter(val) {
@@ -1472,6 +1562,29 @@ export default {
}
})
},
//精品课展示
getEsqusiteList(){
let course = {
aid: this.userInfo.aid,
}
apiIndex.qualitylist(course).then((res) => {
let courseIds = [];
res.data.result.forEach((item) => {
item.authorInfo = {
aid: "",
name: "",
orgInfo: "",
avatar: "",
code: "",
sex: null,
};
courseIds.push(item.courseId);
});
this.loadCouserTeacher(res.data.result, courseIds);
console.log(res.data.result,'--------------------------');
this.qusisityList.list = res.data.result;
})
},
getCourseData(pageIndex) {
this.isNext = false;
let { orderType, num } = this.courseList;
@@ -1671,7 +1784,7 @@ export default {
let userIds = [];
list.forEach((item, index) => {
cres.result.some((courseTeahcer) => {
if (courseTeahcer.courseId == item.id) {
if (courseTeahcer.courseId == (item.id||item.courseId)) {
if (courseTeahcer.teacherIds) {
userIds.push(courseTeahcer.teacherIds[0]);
item.authorInfo.aid = courseTeahcer.teacherIds[0];
@@ -2661,6 +2774,7 @@ export default {
// padding-bottom: 10px;
display: flex;
justify-content: space-between;
margin-bottom: 20px;
.course-author-left {
font-size: 14px;
@@ -3009,4 +3123,17 @@ export default {
}
}
}
.courseBg{
// width: 332px;
// height: 323px;
// background: url("../assets/images/course/courseBackground.png") no-repeat;
// background-size: 100% 100%; /* 或 use 'contain' */
// background-position: center;
// border: none;
border-radius: 12px;
background: linear-gradient(135deg, #e6f7ff, #f0f8ff, #ffffff);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
border: 1px solid #d9edf7;
//overflow: hidden;
}
</style>

View File

@@ -5,8 +5,8 @@
<!-- 当轮播图等于一张时 -->
<swiper :options="swiperOptiontwo">
<swiper-slide style="margin: 0 auto" v-for="(item, idx) in resonimg" :key="'a' + idx"
class="swiper-slide games pointer">
<div class="bannbox" :style="{
class="swiper-slide games pointer" >
<div class="bannbox" @click="handleCarouselClick(item)" :style="{
background: `url(${fileBaseUrl + item.image
}) center center no-repeat`,
}"></div>
@@ -17,8 +17,8 @@
<div id="container" style="z-index: 99" v-else>
<swiper :options="swiperOption" ref="mySwiper" v-if="resonimg.length > 1">
<swiper-slide style="margin: 0 auto" v-for="(item, idx) in resonimg" :key="'b' + idx"
class="swiper-slide games pointer">
<div class="bannbox" :style="{
class="swiper-slide games pointer" >
<div class="bannbox" @click="handleCarouselClick(item)" :style="{
background: `url(${fileBaseUrl + item.image
}) center center no-repeat`,
}"></div>
@@ -220,7 +220,7 @@ export default {
autoplay: false,
// noSwiping: true,
},
resonimg: [],
// resonimg: [],
swiperOption: {
autoplay: {
delay: 2000,
@@ -249,6 +249,13 @@ export default {
this.getToolData()
},
methods: {
// 添加点击轮播图跳转的方法
handleCarouselClick(item) {
if (item.url) {
window.open(item.url, '_blank');
}
},
downTool(toolInfo) {
console.log(toolInfo);
window.open(`/activityApi/xboe/m/boe/tools/url/download?urlStr=${process.env.VUE_APP_BOE_WEB_URL}/upload${toolInfo.filePath}&fileName=${toolInfo.name}`)

View File

@@ -8,7 +8,7 @@
<div class="navTop">
<div>
<router-link to="/grateful" class="nav">首页</router-link>&nbsp;>&nbsp;
<span style="cursor: pointer;" class="nav">认证讲师库2023</span>
<span style="cursor: pointer;" class="nav">认证讲师库</span>
</div>
<div style="position: relative;">
<el-input class="portal-input" placeholder="请输入课程名称" style="border-radius: 20px !important; "

View File

@@ -0,0 +1,313 @@
<template>
<el-dialog
:visible="dialogVisible"
width="600px"
:close-on-click-modal="false"
:show-close="true"
@close="onClose"
class="case-expert-dialog"
>
<!-- 标题 -->
<div slot="title" class="dialog-title">
<!-- <img src="@/assets/images/case-expert-icon.png" alt="案例专家" class="icon" /> -->
<span>案例专家</span>
</div>
<!-- 内容区域 -->
<div class="content-wrapper">
<div
class="welcome-message"
ref="messageContainer"
@scroll="handleScroll"
>
<div class="message-text" v-for="(item, index) in messageList" :key="index">
<messages :messageData="item" :suggestions="suggestions"></messages>
</div>
<div class="message-suggestions" v-if="messageList[messageList.length-1].textCompleted">
<div class="suggestion-item" v-for="(item, index) in suggestions" :key="index">
<a @click="sendSuggestions(item)"> {{ item }} </a>
</div>
</div>
<div v-if="isLoading" class="loading-message">
<div class="loading-dots">
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
<!-- 输入框区域 -->
<send-message
v-model="AIContent"
:message-list="messageList"
:suggestions="suggestions"
@loading="handleLoading"
@update-message="updateMessage"
@update-suggestions="updateSuggestions"
@new-conversation="startNewConversation"
:disabled="isLoading"
class="input-area-wrapper"
ref="sendMessage"
/>
</div>
<!-- 关闭按钮在右上角 el-dialog 自动处理 -->
</el-dialog>
</template>
<script>
import messages from './components/messages.vue'
import sendMessage from './components/sendMessage.vue'
export default {
name: 'CaseExpertDialog',
props: {
dialogVisible: {
type: Boolean,
default: false
}
},
components: {
messages,
sendMessage
},
data() {
return {
AIContent: '',
isLoading: false,
messageList: [
{
typing:true,
isBot: true, // 是否为机器人
text: `<p><b>您好!我是京东方案侧智能问答助手,随时为您服务。</b></p>
<p>我可以帮您快速查找和解读平台内的各类案例内容。只需输入您想了解的问题或关键词,我会从案例库中精准匹配相关信息,并提供清晰的解答。每条回答都会附上来源链接,方便您随时查阅原始案例全文。</p>
<p>我还会根据您的提问,智能推荐相关延伸问题,助您更高效地探索知识、解决问题。</p>
<p>现在,欢迎随时向我提问,开启高效的知识查询体验吧!</p>`
}
],
suggestions:[],
isAutoScroll: true // 是否自动滚动
}
},
watch: {
messageList: {
handler() {
this.$nextTick(() => {
this.scrollToBottom();
});
},
deep: true
}
},
methods: {
onClose() {
console.log('关闭弹窗')
this.$emit('close')
// 可以在这里执行其他逻辑
},
// 处理加载状态
handleLoading(status) {
this.isLoading = status;
},
// 更新消息
updateMessage(message) {
// 由于Vue的响应式系统message对象的更改会自动更新视图
// 这里不需要额外的操作
},
updateSuggestions(arr){
this.suggestions = arr
},
// 处理建议
sendSuggestions(item){
// this.suggestions = []
this.AIContent = item
setTimeout(()=>{
this.$refs.sendMessage.handleSend()
this.AIContent = ''
},500)
},
startNewConversation() {
this.messageList = [
{
isBot: true,
text: `<p><b>您好!我是京东方案侧智能问答助手,随时为您服务。</b></p>
<p>我可以帮您快速查找和解读平台内的各类案例内容。只需输入您想了解的问题或关键词,我会从案例库中精准匹配相关信息,并提供清晰的解答。每条回答都会附上来源链接,方便您随时查阅原始案例全文。</p>
<p>我还会根据您的提问,智能推荐相关延伸问题,助您更高效地探索知识、解决问题。</p>
<p>现在,欢迎随时向我提问,开启高效的知识查询体验吧!</p>`
}
];
this.AIContent = '';
this.isLoading = false;
},
// 处理滚动事件
handleScroll(event) {
const element = event.target;
// 判断是否滚动到底部
const isAtBottom = element.scrollHeight - element.scrollTop <= element.clientHeight + 1;
// 如果滚动到底部,则开启自动滚动
// 如果离开底部,则关闭自动滚动
this.isAutoScroll = isAtBottom;
},
// 滚动到底部
scrollToBottom() {
if (this.isAutoScroll && this.$refs.messageContainer) {
this.$refs.messageContainer.scrollTop = this.$refs.messageContainer.scrollHeight;
}
}
}
}
</script>
<style scoped lang="scss">
.case-expert-dialog {
::v-deep .el-dialog{
background: url("./components/u762.svg") no-repeat ;
background-size: cover;
//background-color: rgba(255, 255, 255, 0.8);
}
::v-deep .el-dialog__body{
padding: 10px;
//font-size: 12px;
*{
font-size:unset ;
}
}
.dialog-title {
background: transparent;
display: flex;
align-items: center;
gap: 10px;
font-size: 16px;
font-weight: 600;
color: #333;
.icon {
width: 24px;
height: 24px;
}
}
.message-suggestions{
display: flex;
flex-direction: column;
.suggestion-item{
cursor: pointer;
float: right;
padding: 5px 15px;
box-sizing: border-box;
background-color: rgba(228, 231, 237, 1);
border-radius: 5px;
margin-bottom: 5px;
}
}
.content-wrapper {
padding: 20px;
background-color: transparent;
border-radius: 8px;
height: 550px;
position: relative;
//margin-bottom: 20px;
display: flex;
flex-direction: column;
.welcome-message {
display: flex;
flex-direction: column;
align-items: flex-start;
margin-bottom: 10px;
flex:1;
overflow-y: auto;
.avatar {
margin-right: 12px;
img {
width: 32px;
height: 32px;
border-radius: 50%;
background-color: #007aff;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 14px;
}
}
.message-text {
width: 100%;
//margin-bottom: 15px;
p {
color: #333;
//font-size: 14px;
line-height: 1.6;
margin: 8px 0;
}
}
.loading-message {
display: flex;
align-items: center;
width: 100%;
margin-bottom: 15px;
.avatar {
width: 32px;
height: 32px;
border-radius: 50%;
background-color: #007aff;
margin-right: 12px;
}
.loading-dots {
display: flex;
align-items: center;
span {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
background-color: #999;
margin-right: 5px;
animation: loading 1.4s infinite ease-in-out both;
&:nth-child(1) {
animation-delay: -0.32s;
}
&:nth-child(2) {
animation-delay: -0.16s;
}
}
}
}
}
.input-area-wrapper {
//position: absolute;
//bottom: 10px;
//width: calc(100% - 40px);
}
@keyframes loading {
0%, 80%, 100% {
transform: scale(0);
}
40% {
transform: scale(1);
}
}
}
}
</style>

File diff suppressed because it is too large Load Diff

View 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="1759024984858" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4686" xmlns:xlink="http://www.w3.org/1999/xlink" width="25" height="25"><path d="M451.673935 994.395699C478.883834 1025.019147 524.254807 1024.808979 551.400292 993.928851 553.755808 991.387908 558.821323 985.796762 565.872444 977.84835 577.572838 964.659017 590.597131 949.62432 604.615947 932.998315 644.662065 885.504506 684.708678 834.717818 722.129538 782.646447 759.658524 730.424619 792.492213 679.709274 819.314991 631.458462 868.685946 542.646317 896 465.543426 896 402.285715 896 180.109449 719.301715 0 501.333333 0 283.364952 0 106.666667 180.109449 106.666667 402.285715 106.666667 465.598716 134.05152 542.80573 183.54613 631.762622 210.371803 679.976529 243.193308 730.651876 280.699364 782.833154 318.155192 834.94455 358.239268 885.77421 398.322835 933.311031 412.354743 949.952073 425.391185 965.00073 437.102468 978.202579 444.160087 986.158466 449.230214 991.754921 451.982775 994.736706L451.673935 994.395699ZM486.822684 961.321348C484.281231 958.568254 479.425084 953.207989 472.585916 945.498359 461.135889 932.591017 448.364015 917.847761 434.602351 901.527215 395.275714 854.888073 355.949587 805.019548 319.289224 754.014863 282.808749 703.260452 250.983685 654.123578 225.158316 607.707522 179.388826 525.445805 154.50505 455.290161 154.50505 402.285715 154.50505 207.039905 309.785362 48.761905 501.333333 48.761905 692.881306 48.761905 848.161617 207.039905 848.161617 402.285715 848.161617 455.246022 823.345286 525.298263 777.693969 607.419251 751.873483 653.867066 720.038415 703.039925 683.537446 753.831262 646.912604 804.794967 607.624538 854.619674 568.335977 901.215038 554.587654 917.520243 541.828177 932.24925 530.389289 945.143797 523.556841 952.845711 518.705521 958.200435 516.166694 960.950526 507.543772 970.748911 495.255793 970.80583 487.131524 961.662353L486.822684 961.321348Z" fill="#979797" p-id="4687"></path><path d="M714.955981 467.028806C723.919106 442.627955 728.565658 416.668998 728.565658 390.095238 728.565658 268.908183 632.184774 170.666667 513.29293 170.666667 394.401086 170.666667 298.020202 268.908183 298.020202 390.095238 298.020202 511.282291 394.401086 609.52381 513.29293 609.52381 549.003859 609.52381 583.510052 600.631947 614.373097 583.874409 626.032316 577.543868 630.449257 562.77782 624.238611 550.893519 618.027966 539.009218 603.541579 534.507006 591.882359 540.837549 567.900883 553.858639 541.111735 560.761905 513.29293 560.761905 420.821495 560.761905 345.858586 484.351836 345.858586 390.095238 345.858586 295.838641 420.821495 219.428572 513.29293 219.428572 605.764365 219.428572 680.727273 295.838641 680.727273 390.095238 680.727273 410.807981 677.117041 430.977316 670.154965 449.930592 665.522846 462.540883 671.796821 476.591108 684.168282 481.312651 696.53974 486.034191 710.323861 479.639095 714.955981 467.028806L714.955981 467.028806Z" fill="#979797" p-id="4688"></path></svg>

After

Width:  |  Height:  |  Size: 3.0 KiB

View File

@@ -0,0 +1,300 @@
<!--消息渲染-->
<script>
export default {
name: "message",
props: {
messageData: {
type: Object,
default: function () {
return {}
}
},
suggestions: {
type: Array,
default: () => []
}
},
data() {
return {
displayText: '',
typingTimer: null,
typingSpeed: 30, // 打字机速度(毫秒/字符)
showAllCaseRefers: false // 控制是否显示所有案例引用
}
},
computed: {
// 计算需要显示的案例引用
displayedCaseRefers() {
if (this.showAllCaseRefers || !this.messageData.caseRefers) {
return this.messageData.caseRefers || [];
}
return this.messageData.caseRefers.slice(0, 3);
},
// 判断是否需要显示"查看更多"按钮
shouldShowMoreButton() {
return this.messageData.caseRefers && this.messageData.caseRefers.length > 3;
}
},
watch: {
'messageData.text': {
handler(newVal) {
if (newVal && this.messageData.isBot && !this.messageData.typing) {
// this.startTyping(newVal)
this.displayText = newVal || ''
} else {
this.displayText = newVal || ''
}
},
immediate: true
}
},
methods: {
startTyping(text) {
// 清除之前的定时器
if (this.typingTimer) {
clearInterval(this.typingTimer)
this.typingTimer = null
}
// 初始化
// this.displayText = ''
let index = 0
// 开始打字机效果
this.typingTimer = setInterval(() => {
if (index < text.length) {
this.displayText += text.charAt(index)
index++
} else {
// 打字完成,清除定时器
clearInterval(this.typingTimer)
this.typingTimer = null
}
}, this.typingSpeed)
},
// 切换显示所有案例引用
toggleShowAllCaseRefers() {
this.showAllCaseRefers = !this.showAllCaseRefers;
}
},
beforeDestroy() {
// 组件销毁前清除定时器
if (this.typingTimer) {
clearInterval(this.typingTimer)
this.typingTimer = null
}
}
}
</script>
<template>
<div class="messages">
{{messageData}}
<!-- 机器人消息-->
<div v-if="messageData.isBot" class="bot-message">
<div class="bot-think" v-if="messageData.thinkText" v-html="messageData.thinkText"></div>
<div v-html="displayText" ></div>
<div v-if="messageData.caseRefers && messageData.caseRefers.length > 0 && messageData.textCompleted">
<div class="case-refers">
<div class="case-refers-title">
<span> <i class="iconfont icon-think"></i> 引用案例</span>
<span v-if="shouldShowMoreButton" class="more" @click="toggleShowAllCaseRefers">
{{ showAllCaseRefers ? '收起' : '查看更多' }}
</span>
</div>
<div class="case-refers-list">
<div class="case-refers-item" v-for="item in displayedCaseRefers" :key="item.caseId">
<div class="case-refers-item-title">
<a :href="'#case-' + item.caseId" class="title">{{ item.title }}</a>
<span class="case-refers-item-timer">{{item.uploadTime}}</span>
</div>
<div class="case-refers-item-author">
<span class="user"></span>
<span>{{ item.authorName }}</span>
<span class="case-inter-orginInfo">{{ item.orgInfo }}</span>
</div>
<div class="case-refers-item-keywords">
<span v-for="keyword in item.keywords" :key="keyword">{{ keyword }}</span>
</div>
<div class="message-content">{{item.content}}</div>
</div>
</div>
</div>
</div>
</div>
<!-- 非机器人消息-->
<div v-else class="user-message">
<div class="message-text">
<div v-html="messageData.text"></div>
</div>
</div>
<!-- 推荐问题-->
<!-- <div v-if="suggestions && suggestions.length > 0">-->
<!-- <div class="suggestions">-->
<!-- <div class="suggestions-title">-->
<!-- <span>推荐问题</span>-->
<!-- </div>-->
<!-- <div class="suggestions-list">-->
<!-- <div class="suggestions-item" v-for="item in suggestions">-->
<!-- <div class="suggestions-item-title">-->
<!-- {{item}}-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
</div>
</template>
<style scoped lang="scss">
.messages {
width: 100%;
.bot-message {
background-color: #fff;
border-radius: 5px;
padding: 10px;
margin-bottom: 10px;
.bot-think {
color: #909399;
padding-bottom: 5px;
position: relative;
padding-left: 10px;
&:before {
content: ' ';
border-left: 0.5px solid #909399;
position: absolute;
height: 100%;
left: 0;
top: -3px;
transform: scaleX(0.5);
margin-right: 5px;
}
}
.case-refers {
margin-top: 10px;
.case-refers-title {
font-weight: bold;
margin-bottom: 5px;
display: flex;
align-items: center;
justify-content: space-between;
.icon-think {
background-image: url("./map.svg") ;
width: 15px;
height: 13px;
display: inline-block;
background-repeat: no-repeat;
background-size: 100% 100%;
}
.more{
font-size: 10px;
padding: 2px 6px;
background-color: #F4F7FD;
border-radius: 5px;
color:#577EE1;font-weight: unset;
cursor: pointer;
}
}
.case-refers-list {
display: flex;
flex-direction: column;
.case-refers-item {
//margin-right: 10px;
margin-bottom: 5px;
border: 1px solid rgba(144, 147, 153, 0.44);
padding: 5px;
border-radius: 5px;
.case-refers-item-title {
font-size: 14px;
margin-bottom: 5px;
font-weight: 600;
color: #000;
display: flex;
align-items: flex-end;
justify-content: space-between;
.title{
max-width: 70% ;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.case-refers-item-timer{
font-size: 10px;
margin-right: 20px;
color:#cecece;
font-weight: unset!important;
}
}
.case-refers-item-author{
display: flex;
align-items: center;
.user{
background-image: url("./user.svg");
width: 15px;
height: 15px;
display: inline-block;
background-repeat: no-repeat;
background-size: 100% 100%;
margin-right: 5px;
}
.case-inter-orginInfo{
font-size: 10px;
color: rgba(144, 147, 153, 0.44);margin-left: 5px;
}
}
.case-refers-item-author,
.case-refers-item-keywords {
font-size: 12px;
font-weight: 600;
color: #000;
}
}
}
}
}
.user-message {
float: right;
padding: 5px 15px;
box-sizing: border-box;
background-color: rgba(228, 231, 237, 1);
border-radius: 5px;
margin-bottom: 10px;
}
.case-refers-item-keywords{
margin-top: 5px;
span{
padding: 1px 4px;
background-color: #F4F7FD;
border-radius: 5px;
font-size: 10px!important;
color:#577EE1
}
span + span{
margin-left: 8px;
}
}
.message-content{
font-size: 12px!important;
margin-top: 5px;
}
}
</style>

View File

@@ -0,0 +1,386 @@
<template>
<div class="input-area">
<el-input
v-model="inputContent"
class="input-placeholder"
placeholder="有问题,尽管问"
@keyup.enter.native="handleSend"
:disabled="disabled"
></el-input>
<div class="action-buttons">
<el-button type="primary" size="small" class="start-btn" @click="handleNewConversation">
+ 开启新对话
</el-button>
<el-button type="text" class="send-btn" @click="handleSend" :disabled="disabled">
<i class="el-icon-s-promotion"></i>
</el-button>
</div>
</div>
</template>
<script>
import { aiChat } from '@/api/boe/aiChat.js'
export default {
name: 'SendMessage',
props: {
value: {
type: String,
default: ''
},
disabled: {
type: Boolean,
default: false
},
messageList: {
type: Array,
default: () => []
},
suggestions: {
type: Array,
default: () => []
}
},
data() {
return {
inputContent: this.value,
conversationId: '' // 会话ID
}
},
watch: {
value(newVal) {
this.inputContent = newVal
}
},
methods: {
handleSend() {
if (!this.inputContent.trim() || this.disabled) return
// 添加用户消息到列表
const userMessage = {
isBot: false,
text: this.inputContent
};
this.messageList.push(userMessage);
// 显示加载状态
this.$emit('loading', true);
// 调用AI聊天接口 (暂时注释掉SSE使用模拟数据)
this.callAIChat(this.inputContent);
// 清空输入框
this.inputContent = ''
},
// 真实的SSE实现暂时注释掉
callAIChat(question) {
// 创建新的AI消息对象
const aiMessage = {
isBot: true,
text: '',
status:null,
thinkText: '',
caseRefers: [], // 添加caseRefers字段
textCompleted: false // 添加文字处理完成状态默认为false
};
this.messageList.push(aiMessage);
// 构造请求参数
const requestData = {
conversationId: this.conversationId,
query: question
};
// 创建POST请求
fetch('/systemapi/xboe/m/boe/case/ai/chat',{
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(requestData)
}).then(r=>{
return r
}).then(response => {
// 处理流式响应
const reader = response.body.getReader();
const decoder = new TextDecoder('utf-8');
let buffer = '';
let accumulatedContent = ''; // 累积的内容用于打字机效果
let accumulatedThinkContent = ''; // 累积的思考内容
let inThinkSection = false; // 是否在思考部分
let typingTimer = null; // 打字机定时器
let thinkTypingTimer = null; // 思考内容打字机定时器
// 逐字显示文本的函数
const typeText = (message, fullContent) => {
// 如果已有定时器在运行,先清除它
if (typingTimer) {
clearInterval(typingTimer);
}
// 获取当前已显示的文本长度
const currentLength = message.text.length;
// 获取完整文本
const targetLength = fullContent.length;
// 如果已经显示完整文本,不需要继续
if (currentLength >= targetLength) {
return;
}
const typingSpeed = 50; // 每个字符的间隔时间(毫秒)
typingTimer = setInterval(() => {
// 计算下一个要显示的字符索引
const nextIndex = message.text.length + 1;
if (nextIndex <= targetLength) {
message.text = fullContent.substring(0, nextIndex);
this.$emit('update-message', message);
} else {
clearInterval(typingTimer);
typingTimer = null;
// 当打字机效果完成时检查是否应该设置textCompleted为true
// 这应该在status 4交互完成时才设置
if (message.status === 4) {
if (nextIndex >= targetLength) {
message.textCompleted = true;
}
}
}
}, typingSpeed);
};
// 逐字显示思考内容的函数
const typeThinkText = (message, fullThinkContent) => {
// 如果已有定时器在运行,先清除它
if (thinkTypingTimer) {
clearInterval(thinkTypingTimer);
}
// 获取当前已显示的文本长度
const currentLength = message.thinkText.length;
// 获取完整文本
const targetLength = fullThinkContent.length;
// 如果已经显示完整文本,不需要继续
if (currentLength >= targetLength) {
return;
}
// 从当前显示位置开始继续显示(避免清空重显)
const startIndex = currentLength;
const typingSpeed = 20; // 每个字符的间隔时间(毫秒)
thinkTypingTimer = setInterval(() => {
// 计算下一个要显示的字符索引
const nextIndex = message.thinkText.length + 1;
if (nextIndex <= targetLength) {
message.thinkText = fullThinkContent.substring(0, nextIndex);
this.$emit('update-message', message);
} else {
clearInterval(thinkTypingTimer);
thinkTypingTimer = null;
}
}, typingSpeed);
};
// 添加一个检查是否所有文本都已完成显示的函数
const isTextDisplayCompleted = (message, fullContent) => {
return message.text.length >= fullContent.length;
};
// 读取流数据
const read = () => {
reader.read().then(({ done, value }) => {
if (done) {
// 当流结束时,等待打字机效果完成
const waitForTyping = () => {
if (!typingTimer) {
this.$emit('loading', false);
} else {
setTimeout(waitForTyping, 100);
}
};
waitForTyping();
return;
}
// 解码数据
buffer += decoder.decode(value, { stream: true });
// 按行分割数据
const lines = buffer.split('\n');
buffer = lines.pop(); // 保留不完整的行
for (const line of lines) {
if (line.startsWith('data:')) {
try {
const jsonData = JSON.parse(line.substring(5));
// 根据status处理不同类型的数据
switch (jsonData.status) {
case 0: // 引用文件
// 处理引用文件信息
if (jsonData.fileRefer && jsonData.fileRefer.caseRefers) {
aiMessage.caseRefers = jsonData.fileRefer.caseRefers;
// 更新父组件的messageList
this.$emit('update-message', aiMessage);
}
// 从响应中获取并保存conversationId
if (jsonData.conversationId) {
this.conversationId = jsonData.conversationId;
}
break;
case 1: // 流式对话内容
// 处理
const content = jsonData.content;
aiMessage.hasThink = false;
if (content.startsWith('<think>')) {
aiMessage.hasThink = true
inThinkSection = true;
accumulatedThinkContent = content.replace('<think>', '');
// 使用打字机效果显示think内容
typeThinkText(aiMessage, accumulatedThinkContent);
} else if (content.startsWith('</think>')) {
inThinkSection = false;
accumulatedThinkContent += content.replace('</think>', '');
// 使用打字机效果显示think内容
typeThinkText(aiMessage, accumulatedThinkContent);
} else if (inThinkSection) {
accumulatedThinkContent += content;
// 使用打字机效果显示think内容
typeThinkText(aiMessage, accumulatedThinkContent);
} else {
// 累积内容并使用打字机效果更新显示
accumulatedContent += content;
// 如果thinkText已经显示完整则继续使用打字机效果显示内容
if( aiMessage.hasThink){
if(aiMessage.thinkText.length >=accumulatedThinkContent.length){
typeText(aiMessage, accumulatedContent);
}
} else {
typeText(aiMessage, accumulatedContent);
}
}
// 不在这里直接更新,让打字机效果处理更新
break;
case 2: // 回答完成
// 不再在这里设置textCompleted状态
// 更新父组件的messageList
this.$emit('update-message', aiMessage);
// 从响应中获取并保存conversationId
break;
case 3: // 返回建议
// 这里可以处理建议问题
this.$emit('update-suggestions', jsonData.suggestions);
break;
case 4: // 交互完成
aiMessage.status = 4
// 从响应中获取并保存conversationId
this.$emit('loading', false);
// 检查文本是否已经完全显示如果是则设置textCompleted为true
if (isTextDisplayCompleted(aiMessage, accumulatedContent)) {
// aiMessage.textCompleted = true;
this.$emit('update-message', aiMessage);
}
break;
}
} catch (error) {
console.error('解析SSE数据错误:', error);
}
}
}
// 继续读取
read();
}).catch(error => {
console.error('SSE连接错误:', error);
// 出错时也设置文字处理完成状态
if (typingTimer) {
clearInterval(typingTimer);
typingTimer = null;
}
aiMessage.textCompleted = true;
this.$emit('loading', false);
aiMessage.text = '抱歉,网络连接出现问题,请稍后重试。';
// 更新父组件的messageList
this.$emit('update-message', aiMessage);
});
};
// 开始读取数据
read();
}).catch(error => {
console.error('请求失败:', error);
// 出错时也设置文字处理完成状态
aiMessage.textCompleted = true;
this.$emit('loading', false);
aiMessage.text = '抱歉,网络连接出现问题,请稍后重试。';
// 更新父组件的messageList
this.$emit('update-message', aiMessage);
});
},
handleNewConversation() {
this.$emit('new-conversation')
}
}
}
</script>
<style scoped lang="scss">
.input-area {
background-color: white;
border: 1px solid #ebeef5;
border-radius: 8px;
padding: 5px 16px 10px 16px;
display: flex;
flex-direction: column;
.input-placeholder {
color: #999;
font-size: 14px;
margin: 0;
border: none;
::v-deep .el-input__inner {
border: none;
padding: 0;
height: 30px;
}
}
.action-buttons {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 5px;
.start-btn {
padding: 6px 10px;
font-size: 12px;
border-radius: 4px;
color: #409eff;
background-color: #f5f7fa;
border: 1px solid #dcdfe6;
}
.send-btn {
font-size: 18px;
color: #409eff;
padding: 6px;
&[disabled] {
color: #c0c4cc;
}
}
}
}
</style>

View File

@@ -0,0 +1,12 @@
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="750px" height="850px" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient cx="362.789473684209" cy="413.96491228069874" r="1153.015055438179" gradientTransform="matrix(0.023310357358899587 0.999728276703125 -0.9997282767031253 0.02331035735889959 768.1851497765263 41.62434690904212 )" gradientUnits="userSpaceOnUse" id="RadialGradient4">
<stop id="Stop5" stop-color="#ffffff" offset="0" />
<stop id="Stop6" stop-color="#d4def7" offset="1" />
</radialGradient>
</defs>
<g>
<path d="M 0 5.000000000000001 A 5 5 0 0 1 4.999999999999999 0 L 745 0 A 5 5 0 0 1 750 5 L 750 845 A 5 5 0 0 1 745 850 L 5 850 A 5 5 0 0 1 0 845 L 0 5 Z " fill-rule="nonzero" fill="url(#RadialGradient4)" stroke="none" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 858 B

View 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="1759026139840" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5676" xmlns:xlink="http://www.w3.org/1999/xlink" width="25" height="25"><path d="M512 74.666667C270.933333 74.666667 74.666667 270.933333 74.666667 512S270.933333 949.333333 512 949.333333 949.333333 753.066667 949.333333 512 753.066667 74.666667 512 74.666667zM288 810.666667c0-123.733333 100.266667-224 224-224S736 686.933333 736 810.666667c-61.866667 46.933333-140.8 74.666667-224 74.666666s-162.133333-27.733333-224-74.666666z m128-384c0-53.333333 42.666667-96 96-96s96 42.666667 96 96-42.666667 96-96 96-96-42.666667-96-96z m377.6 328.533333c-19.2-96-85.333333-174.933333-174.933333-211.2 32-29.866667 51.2-70.4 51.2-117.333333 0-87.466667-72.533333-160-160-160s-160 72.533333-160 160c0 46.933333 19.2 87.466667 51.2 117.333333-89.6 36.266667-155.733333 115.2-174.933334 211.2-55.466667-66.133333-91.733333-149.333333-91.733333-243.2 0-204.8 168.533333-373.333333 373.333333-373.333333S885.333333 307.2 885.333333 512c0 93.866667-34.133333 177.066667-91.733333 243.2z" fill="#666666" p-id="5677"></path></svg>

After

Width:  |  Height:  |  Size: 1.2 KiB

File diff suppressed because it is too large Load Diff

View File

@@ -177,7 +177,7 @@
</div>
<!-- 课程单元 -->
<div class="course-units" v-if="tab == 1">
<div :style="`height: ${controlHeight}px;overflow-y: auto;`">
<div style="min-height: 350px;max-height: 650px ;overflow-y: auto;">
<div class="catalog" v-if="courseInfo.type == 20">
<div v-for="(item, index) in catalogTree" :key="index" :name="index">
<el-menu
@@ -816,7 +816,8 @@
}else if(h>500){
h=h+60;
}
$this.controlHeight=h-95;
// 移除高度控制 防止内容塌陷
// $this.controlHeight=h-95;
})
@@ -1800,7 +1801,7 @@
margin: 20px auto;
.course-playbox {
background-color: #fff;
min-height: 400px;
//min-height: 400px;
display: flex;
justify-content: space-between;
.course-player-container {