点踩功能更新

This commit is contained in:
14651
2025-08-15 11:44:42 +08:00
5 changed files with 337 additions and 55 deletions

View File

@@ -139,3 +139,10 @@ export function delAuditDetails(id) {
method: 'post'
})
}
//撤销审核
export function cancelAudit(id) {
return request({
url: '/comprehensive/auditDetails/cancelAudit/'+id,
method: 'post'
})
}

View File

@@ -64,7 +64,7 @@
</div>
<!-- AI操作区域 -->
<div v-if="message.content && message.content !== '正在思考...'" class="ai-actions">
<div v-if="message.content && message.content !== '正在思考...' && message.streamCompleted" class="ai-actions">
<div class="ai-text">AI回答也可能会犯错请核查重要信息</div>
<div class="action-icons">
<div class="action-icon"
@@ -149,7 +149,10 @@ export default {
showSingleReference: {},
// Markdown 渲染器
md: md
md: md,
// 组件销毁标志
isDestroyed: false
}
},
computed: {
@@ -168,6 +171,23 @@ export default {
return this.name || localStorage.getItem('userName') || '用户'
}
},
watch: {
// 监听聊天框显示状态变化
'$parent.showAI'(newVal, oldVal) {
if (newVal && !oldVal && !this.isDestroyed) {
// 只在从关闭状态变为打开状态时,且组件未销毁时,确保滚动到底部
this.$nextTick(() => {
if (!this.isDestroyed) {
setTimeout(() => {
if (!this.isDestroyed) {
this.scrollToBottom(false)
}
}, 100)
}
})
}
}
},
mounted() {
console.log(this.userInfo)
// 使用store中的userInfo.userName作为学号
@@ -176,12 +196,31 @@ export default {
this.userStuNo = this.userInfo.userName
}
console.log('当前用户学号:', this.user)
this.initChat()
// 确保DOM完全渲染后再初始化聊天
this.$nextTick(() => {
setTimeout(async () => {
await this.initChat()
// 初始化完成后立即滚动到底部
this.$nextTick(() => {
this.scrollToBottom(false)
})
}, 50)
})
},
beforeDestroy() {
// 设置销毁标志
this.isDestroyed = true
// 清理定时器
if (this.loadDebounceTimer) {
clearTimeout(this.loadDebounceTimer)
}
// 取消正在进行的请求
if (this.currentCancel) {
this.currentCancel()
}
},
methods: {
/**
@@ -222,7 +261,8 @@ export default {
conversationId: msg.conversation_id,
created_at: msg.created_at,
feedback: msg.feedback || null,
retrieverResources: msg.retriever_resources || []
retrieverResources: msg.retriever_resources || [],
streamCompleted: true // 历史消息的流输出已完成
})
}
})
@@ -262,8 +302,8 @@ export default {
// 滚动到底部
this.$nextTick(() => {
setTimeout(() => {
this.scrollToBottom(true) // 使用平滑滚动
}, 200)
this.scrollToBottom(false) // 初始化时直接定位到底部,不使用平滑滚动
}, 100) // 减少延迟时间
})
} catch (error) {
@@ -418,7 +458,8 @@ export default {
content: '正在思考...',
messageId: 'ai-' + Date.now(),
feedback: null,
retrieverResources: []
retrieverResources: [],
streamCompleted: false // 流输出完成标志
}
this.messages.push(aiMsg)
@@ -477,6 +518,8 @@ export default {
if (data.retriever_resources) {
aiMsg.retrieverResources = data.retriever_resources
}
// 标记流输出完成
aiMsg.streamCompleted = true
}
} catch (e) {
console.warn('JSON解析失败:', line, e)
@@ -486,6 +529,7 @@ export default {
} catch (error) {
console.error('发送消息失败:', error)
aiMsg.content = '抱歉,发送消息时出现错误,请稍后重试。'
aiMsg.streamCompleted = true // 即使出错也标记为完成,显示操作区域
this.showToast('发送消息失败')
} finally {
this.sending = false
@@ -500,22 +544,37 @@ export default {
this.$nextTick(() => {
if (this.$refs.messageList) {
const targetTop = this.$refs.messageList.scrollHeight
const messageList = this.$refs.messageList
if (smooth && this.$refs.messageList.scrollTo && !this.isLoadingHistory) {
if (smooth && messageList.scrollTo && !this.isLoadingHistory) {
// 只在非加载状态时使用平滑滚动
this.$refs.messageList.scrollTo({
top: targetTop,
messageList.scrollTo({
top: messageList.scrollHeight,
behavior: 'smooth'
})
} else {
// 直接设置滚动位置
this.$refs.messageList.scrollTop = targetTop
// 强制立即滚动到底部
const forceScrollToBottom = () => {
messageList.scrollTop = messageList.scrollHeight
}
// 立即执行一次
forceScrollToBottom()
// 再次确保滚动到底部
this.$nextTick(() => {
forceScrollToBottom()
// 第三次确保
setTimeout(() => {
forceScrollToBottom()
}, 10)
})
}
// 延迟更新lastScrollTop避免干扰滚动检测
setTimeout(() => {
this.lastScrollTop = targetTop
}, 100)
this.lastScrollTop = this.$refs.messageList.scrollHeight
}, smooth ? 300 : 50) // 非平滑滚动时更快更新
}
})
},
@@ -719,17 +778,21 @@ export default {
/* 聊天弹窗容器 */
.chat-popup {
position: fixed;
bottom: 80px;
right: 20px;
bottom: 45px;
right: 60px;
width: 400px;
height: 600px;
background: #fff;
border-radius: 12px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
border-radius: 16px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15), 0 8px 32px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
z-index: 1000;
overflow: hidden;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
transform-origin: bottom right;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
/* 导航栏 */
@@ -740,7 +803,30 @@ export default {
padding: 15px 20px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border-radius: 12px 12px 0 0;
border-radius: 16px 16px 0 0;
position: relative;
overflow: hidden;
}
.navbar::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
animation: shimmer 3s infinite;
}
@keyframes shimmer {
0% {
left: -100%;
}
100% {
left: 100%;
}
}
.nav-title {
@@ -751,17 +837,25 @@ export default {
.nav-close {
font-size: 24px;
cursor: pointer;
width: 30px;
height: 30px;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: background-color 0.2s;
transition: all 0.2s ease;
position: relative;
z-index: 10;
}
.nav-close:hover {
background-color: rgba(255, 255, 255, 0.2);
transform: scale(1.1);
}
.nav-close:active {
transform: scale(0.95);
background-color: rgba(255, 255, 255, 0.3);
}
/* 消息列表 */
@@ -770,7 +864,8 @@ export default {
overflow-y: auto;
padding: 20px;
background: #f8f9fa;
/* 移除scroll-behavior避免与手动滚动控制冲突 */
/* 强制禁用平滑滚动,确保立即定位 */
scroll-behavior: auto !important;
/* 优化滚动条样式 */
scrollbar-width: thin;
scrollbar-color: #c1c1c1 transparent;
@@ -859,6 +954,25 @@ export default {
/* 消息项 */
.message-item {
margin-bottom: 20px;
animation: messageSlideIn 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
transform-origin: left center;
}
@keyframes messageSlideIn {
0% {
opacity: 0;
transform: translateY(20px) scale(0.95);
}
60% {
opacity: 0.8;
transform: translateY(-2px) scale(1.01);
}
100% {
opacity: 1;
transform: translateY(0) scale(1);
}
}
/* 用户消息 */
@@ -876,6 +990,30 @@ export default {
border-radius: 18px 18px 4px 18px;
max-width: 70%;
word-wrap: break-word;
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
position: relative;
overflow: hidden;
}
.user-message .message-content::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
animation: messageShimmer 2s infinite;
}
@keyframes messageShimmer {
0% {
left: -100%;
}
100% {
left: 100%;
}
}
/* AI消息 */
@@ -887,12 +1025,19 @@ export default {
}
.ai-message .message-content {
background: white;
background: linear-gradient(145deg, #ffffff 0%, #f8f9fa 100%);
border: 1px solid #e1e5e9;
padding: 12px 16px;
border-radius: 18px 18px 18px 4px;
max-width: 70%;
word-wrap: break-word;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.06);
transition: all 0.2s ease;
}
.ai-message .message-content:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.08);
transform: translateY(-1px);
}
/* 头像 */
@@ -1101,8 +1246,20 @@ export default {
/* 输入框区域 */
.input-area {
padding: 20px;
background: white;
background: linear-gradient(145deg, #ffffff 0%, #f8f9fa 100%);
border-top: 1px solid #e1e5e9;
backdrop-filter: blur(10px);
position: relative;
}
.input-area::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(102, 126, 234, 0.3), transparent);
}
.input-container {
@@ -1139,16 +1296,42 @@ export default {
cursor: pointer;
font-size: 14px;
font-weight: 500;
transition: opacity 0.2s;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
position: relative;
overflow: hidden;
}
.send-button::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.5s;
}
.send-button:hover:not(:disabled) {
opacity: 0.9;
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}
.send-button:hover:not(:disabled)::before {
left: 100%;
}
.send-button:active:not(:disabled) {
transform: translateY(0);
box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}
.send-button:disabled {
opacity: 0.5;
cursor: not-allowed;
transform: none;
box-shadow: none;
}
/* Markdown 内容样式 */

View File

@@ -20,12 +20,14 @@
<div>
<!-- 其他页面内容 -->
<!-- 触发按钮控制弹窗显示隐藏 -->
<div class="ai-hover" @click="showAI = !showAI">
<div class="ai-hover" @click="toggleAI">
<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" />
<transition name="chat-popup">
<ChatPopup v-if="showAI" @close="showAI = false" />
</transition>
</div>
</div>
@@ -94,11 +96,12 @@ export default {
},
// 切换AI弹窗显示状态
toggleAI() {
this.showAI = !this.showAI
// 如果需要在显示时执行原有逻辑,可以取消下面的注释
// if (this.showAI) {
// this.initializeAI()
// }
// 使用明确的状态切换避免与close事件冲突
if (this.showAI) {
this.showAI = false
} else {
this.showAI = true
}
},
// 原有AI初始化逻辑保持注释状态
async initializeAI() {
@@ -222,5 +225,41 @@ export default {
color: #fff;
cursor: pointer;
z-index: 9999;
transition: all 0.2s ease;
box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
}
.ai-hover:hover {
transform: scale(1.05);
box-shadow: 0 6px 16px rgba(64, 158, 255, 0.4);
}
/* 聊天弹窗动画 - 优化版本,避免闪烁 */
.chat-popup-enter-active {
transition: all 0.25s ease-out;
}
.chat-popup-leave-active {
transition: all 0.15s ease-in;
}
.chat-popup-enter-from {
opacity: 0;
transform: translateY(15px) scale(0.95);
}
.chat-popup-enter-to {
opacity: 1;
transform: translateY(0) scale(1);
}
.chat-popup-leave-from {
opacity: 1;
transform: translateY(0) scale(1);
}
.chat-popup-leave-to {
opacity: 0;
transform: translateY(15px) scale(0.95);
}
</style>

View File

@@ -54,7 +54,6 @@
</el-row>
</el-form>
</div>
<el-row :gutter="10" class="mb8">
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
@@ -114,14 +113,6 @@
<div v-for="message in chatMessages" :key="message.id" class="message-item">
<div class="message-header">
<span class="message-time">{{ parseTime(message.created_at * 1000, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
<div class="feedback-status" v-if="message.feedback">
<el-tag v-if="message.feedback && message.feedback.rating === 'like'" type="success" size="mini">
<i class="el-icon-thumb-up"></i> 点赞
</el-tag>
<el-tag v-else-if="message.feedback && message.feedback.rating === 'dislike'" type="danger" size="mini">
<i class="el-icon-thumb-down"></i> 点踩
</el-tag>
</div>
</div>
<div class="message-content">
@@ -132,10 +123,25 @@
<div class="ai-message">
<div class="message-label">AI回答</div>
<div class="message-text ai-text" :class="{
'feedback-like': message.feedback && message.feedback.rating === 'like',
'feedback-dislike': message.feedback && message.feedback.rating === 'dislike'
}" v-html="renderMarkdown(message.answer)"></div>
<div class="ai-message-wrapper" style="position: relative;">
<div class="message-text ai-text ai-message-container" :class="{
'feedback-like': message.feedback && message.feedback.rating === 'like',
'feedback-dislike': message.feedback && message.feedback.rating === 'dislike'
}" v-html="renderMarkdown(message.answer)"></div>
<!-- 反馈图标显示在右下角 -->
<div v-if="message.feedback" class="feedback-icon" style="position: absolute; bottom: 8px; right: 8px; z-index: 10;">
<!-- 点赞图标 -->
<svg v-if="message.feedback.rating === 'like'" class="feedback-like-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" style="width: 16px; height: 16px; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));">
<path d="M424.6 811.9c13.4 0 24.3-10.9 24.3-24.3V631c0-13.4-10.9-24.3-24.3-24.3s-24.3 10.9-24.3 24.3v156.6c-0.1 13.4 10.8 24.3 24.3 24.3z" fill="#FF4E7D"></path>
<path d="M875.2 467.3c-12.4-16-31.1-25.2-51.3-25.2H598.8c-4.3 0-7.8-1.9-10-5.6-2.2-3.7-2.2-8.1-0.2-12 14.1-26 22.8-52 26-77.1 3.7-29.1 10.1-123.8-8.9-175.9-5.2-14.5-18.9-52.9-72.5-56.2h-0.7l-0.7 0.1c-25.2 1.9-44.5 11-57.5 27.1-10.5 13-13.9 27-15.6 33.8-2.1 8.3-4.2 17.9-6.4 28.1l-0.2 0.7c-8.5 38.7-20.1 91.8-40.5 127.3-32.9 57.5-103.8 98.1-127.1 110.2-1.1-0.1-2.2-0.1-3.3-0.1h-92.1c-28.6 0-52 23.3-52 52v364.3c0 28.6 23.3 52 52 52h92.1c0.8 0 1.7 0 2.6-0.1l455.8-0.4c27.5 0 51.5-18.6 58.5-45.3l88.4-341.6c5.2-19.7 1.1-40.1-11.3-56.1z m-546.4 6c35-20.9 93.6-61.7 125.1-116.8 24-42 36.6-99.3 45.8-141.1 2.4-10.9 4.4-19.8 6.3-27.6 2.8-11.3 5.4-21.9 26.8-23.8 19.1 1.5 22.5 10.9 28 26.4 12.1 33 11 108.9 5.6 150.9-2.4 19.1-9.4 39.4-20.6 60.1-10.3 19-9.8 41.5 1.2 60 10.9 18.4 30.3 29.3 51.8 29.3h225.1c5 0 9.7 2.3 12.8 6.3s4.1 9.1 2.8 14.1l-88.4 341.6c-1.3 5.2-6 8.8-11.4 8.8l-406.5 0.4c0.1-1.1 0.1-2.1 0.1-3.2V494.4c0-7.3-1.6-14.5-4.5-21.1z m-142.9 21.1c0-1.8 1.5-3.3 3.3-3.3h92.1c1.8 0 3.3 1.5 3.3 3.3v364.3c0 1.6-1.1 3-2.7 3.3h-11.5l-5 0.1h-76.2c-1.8 0-3.3-1.5-3.3-3.3V494.4z" fill="#4E30DC"></path>
</svg>
<!-- 点踩图标 -->
<svg v-else-if="message.feedback.rating === 'dislike'" class="feedback-dislike-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" style="width: 16px; height: 16px; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));">
<path d="M932.059429 689.005714c-39.350857 10.24-134.144 10.24-271.36 13.165715 5.851429 29.257143 7.314286 57.051429 7.314285 105.325714C669.549714 923.062857 586.459429 1024 512 1024c-52.516571 0-94.866286-42.422857-96.329143-95.085714-1.462857-64.365714-20.406857-175.542857-126.829714-232.594286-7.314286-4.388571-30.72-14.628571-33.645714-16.091429l1.462857-1.462857c-17.408 16.091429-40.813714 24.868571-64.146286 24.868572H96.256C43.739429 703.634286 0 661.211429 0 607.085714v-512C1.462857 43.885714 43.739429 0 97.718857 0h96.256c36.498286 0 70.070857 21.942857 84.626286 55.588571h1.462857l7.314286-1.462857h1.462857c19.017143-4.388571 53.906286-13.165714 129.828571-30.72 16.018286-4.388571 102.107429-21.942857 191.049143-21.942857h175.030857c52.516571 0 91.940571 20.48 113.810286 61.44C920.429714 99.474286 1024 299.885714 1024 580.754286c0 39.497143-29.184 90.697143-91.940571 108.251428z m-705.974858-592.457143c0-17.554286-14.628571-32.182857-32.109714-32.182857H97.718857c-17.554286 0-32.109714 14.628571-32.109714 32.182857v512c0 17.554286 14.628571 32.182857 32.182857 32.182858h96.182857c17.554286 0 32.109714-14.628571 32.109714-32.182858v-512z m732.233143 462.262858c-12.434286-304.859429-106.057143-450.925714-115.858285-465.408l-0.804572-1.243429c-10.24-17.554286-24.795429-27.794286-58.368-27.794286H609.718857c-87.552 0-175.030857 20.48-176.493714 20.48-69.046857 16.018286-104.155429 24.429714-122.953143 29.110857l-7.606857 1.828572c-10.971429 2.779429-13.897143 3.584-16.822857 4.169143l4.388571 469.577143 0.073143 16.310857c0.073143 8.923429 0.292571 14.262857 0.365714 17.334857v1.682286l-0.438857-0.219429c145.92 59.977143 189.659429 193.097143 191.122286 302.811429 0 17.554286 14.628571 32.182857 32.109714 32.182857 33.499429 0 93.330286-67.291429 93.330286-152.137143 0-76.068571-2.925714-89.234286-29.184-168.228572h60.928c207.872-0.512 247.954286-3.364571 269.897143-8.045714l3.803428-0.804571 3.657143-0.950857 3.657143-0.950858 3.730286-0.950857a49.737143 49.737143 0 0 0 37.961143-49.737143c-1.462857-10.24-1.462857-8.777143-2.925715-19.017142z" fill="#3B6FF4"></path>
</svg>
</div>
</div>
</div>
</div>
</div>
@@ -170,7 +176,6 @@ import { getMessagesToAdmin } from "@/api/aitutor/chat";
import { listGrade } from "@/api/stuCQS/basedata/grade";
import { getDeptName } from "@/api/system/dept";
import { marked } from 'marked';
export default {
name: "ChatHistory",
dicts: ['srs_stu_status'],
@@ -412,7 +417,8 @@ export default {
};
return marked(content, { renderer });
}
},
}
};
</script>
@@ -874,4 +880,41 @@ export default {
.el-divider--horizontal {
margin: 16px 0;
}
/* AI消息容器样式 */
.ai-message-container {
position: relative;
}
/* 反馈图标样式 */
.feedback-icon {
position: absolute;
bottom: 8px;
right: 8px;
z-index: 10;
}
.feedback-like-icon {
width: 16px;
height: 16px;
opacity: 0.8;
transition: all 0.3s ease;
}
.feedback-like-icon:hover {
opacity: 1;
transform: scale(1.1);
}
.feedback-dislike-icon {
width: 16px;
height: 16px;
opacity: 0.8;
transition: all 0.3s ease;
}
.feedback-dislike-icon:hover {
opacity: 1;
transform: scale(1.1);
}
</style>

View File

@@ -32,6 +32,8 @@
</el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="150">
<template slot-scope="scope">
<!-- <el-button v-if="scope.row.auditStatus == '6'" size="mini" type="text" icon="el-icon-close"
@click="processRClick(scope.row)">撤销</el-button> -->
<el-button size="mini" type="text" icon="el-icon-folder" @click="processVClick(scope.row)">查看详情</el-button>
<!-- <el-button v-if="scope.row.auditStatus == '6'" size="mini" type="text" icon="el-icon-circle-close"
@click="cancelVClick(scope.row)">取消加/扣分</el-button> -->
@@ -131,9 +133,9 @@
</div>
</template>
<script>
import { myProcessed, getAuditDetails, delAuditDetails, addAuditDetails, updateAuditDetails, listOwnProcessed, cancelProcess } from "@/api/stuCQS/process-center/auditDetails";
import { myProcessed, getAuditDetails, delAuditDetails, addAuditDetails, updateAuditDetails, listOwnProcessed, cancelProcess, cancelAudit } from "@/api/stuCQS/process-center/auditDetails";
import { isEmpty } from "@/api/helpFunc";
import lodash from "lodash";
@@ -176,8 +178,8 @@ export default {
queryParams: {
pageNum: 1,
pageSize: 10,
stuName:"",
stuNo:""
stuName: "",
stuNo: ""
},
// 表单参数
form: {},
@@ -231,6 +233,15 @@ export default {
this.processForm = val;
this.processV = true;
},
//撤销
async processRClick(row) {
const id = row.id;
cancelAudit(id).then(res => {
if (res.code == 200) {
this.getList();
}
});
},
/** 查询审核明细列表 */
getList() {
this.loading = true;
@@ -331,5 +342,4 @@ export default {
}
}
};
</script>
</script>