xgxt_sd/zhxg_pc
12
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

更新点踩功能

Browse Source
This commit is contained in:
14651
2025-08-15 11:40:18 +08:00
parent d1658d32e3
commit 3ab98cecb7
1 changed files with 90 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

138
src/layout/components/Aichat/ChatPopup.vue
View File

@@ -49,8 +49,10 @@
<div class="reference-title">引用来源：</div>
<div v-for="(group, groupIndex) in getGroupedReferences(message.retrieverResources)" :key="groupIndex"
class="reference-group">
<div class="reference-doc" :class="{ expanded: showSingleReference[`${message.messageId}-${group.docName}`] }" @click="toggleSingleReference(message.messageId, group.docName)">
{{ group.docName }} ({{ group.items.length }})
<div class="reference-doc"
:class="{ expanded: showSingleReference[`${message.messageId}-${group.docName}`] }"
@click="toggleSingleReference(message.messageId, group.docName)">
{{ group.docName }} ({{ group.items.length }})
</div>
<div v-if="showSingleReference[`${message.messageId}-${group.docName}`]" class="reference-details">
<div v-for="(item, itemIndex) in group.items" :key="itemIndex" class="reference-segment">
@@ -65,16 +67,22 @@
<div v-if="message.content && message.content !== '正在思考...'" class="ai-actions">
<div class="ai-text">AI回答也可能会犯错。请核查重要信息。</div>
<div class="action-icons">
<div class="action-icon" :class="{ active: (message.feedback && message.feedback.rating === 'like') || message.feedback === 'like' }"
<div class="action-icon"
:class="{ active: (message.feedback && message.feedback.rating === 'like') || message.feedback === 'like' }"
@click="handleThumbUp(message)">
<svg class="action-svg" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7 22H4C3.46957 22 2.96086 21.7893 2.58579 21.4142C2.21071 21.0391 2 20.5304 2 20V13C2 12.4696 2.21071 11.9609 2.58579 11.5858C2.96086 11.2107 3.46957 11 4 11H7M14 9V5C14 4.20435 13.6839 3.44129 13.1213 2.87868C12.5587 2.31607 11.7956 2 11 2L7 11V22H18.28C18.7623 22.0055 19.2304 21.8364 19.5979 21.524C19.9654 21.2116 20.2077 20.7769 20.28 20.3L21.66 11.3C21.7035 11.0134 21.6842 10.7207 21.6033 10.4423C21.5225 10.1638 21.3821 9.90629 21.1919 9.68751C21.0016 9.46873 20.7661 9.29393 20.5016 9.17522C20.2371 9.0565 19.9499 8.99672 19.66 9H14Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path
d="M7 22H4C3.46957 22 2.96086 21.7893 2.58579 21.4142C2.21071 21.0391 2 20.5304 2 20V13C2 12.4696 2.21071 11.9609 2.58579 11.5858C2.96086 11.2107 3.46957 11 4 11H7M14 9V5C14 4.20435 13.6839 3.44129 13.1213 2.87868C12.5587 2.31607 11.7956 2 11 2L7 11V22H18.28C18.7623 22.0055 19.2304 21.8364 19.5979 21.524C19.9654 21.2116 20.2077 20.7769 20.28 20.3L21.66 11.3C21.7035 11.0134 21.6842 10.7207 21.6033 10.4423C21.5225 10.1638 21.3821 9.90629 21.1919 9.68751C21.0016 9.46873 20.7661 9.29393 20.5016 9.17522C20.2371 9.0565 19.9499 8.99672 19.66 9H14Z"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
<div class="action-icon" :class="{ active: (message.feedback && message.feedback.rating === 'dislike') || message.feedback === 'dislike' }"
<div class="action-icon"
:class="{ active: (message.feedback && message.feedback.rating === 'dislike') || message.feedback === 'dislike' }"
@click="handleThumbDown(message)">
<svg class="action-svg" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M17 2H20C20.5304 2 21.0391 2.21071 21.4142 2.58579C21.7893 2.96086 22 3.46957 22 4V11C22 11.5304 21.7893 12.0391 21.4142 12.4142C21.0391 12.7893 20.5304 13 20 13H17M10 15V19C10 19.7956 10.3161 20.5587 10.8787 21.1213C11.4413 21.6839 12.2044 22 13 22L17 13V2H5.72C5.23767 1.99448 4.76962 2.16361 4.40213 2.47596C4.03464 2.78831 3.79227 3.22305 3.72 3.7L2.34 12.7C2.29649 12.9866 2.31583 13.2793 2.39672 13.5577C2.47761 13.8362 2.61793 14.0937 2.80817 14.3125C2.9984 14.5313 3.23394 14.7061 3.49843 14.8248C3.76291 14.9435 4.05011 15.0033 4.34 15H10Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path
d="M17 2H20C20.5304 2 21.0391 2.21071 21.4142 2.58579C21.7893 2.96086 22 3.46957 22 4V11C22 11.5304 21.7893 12.0391 21.4142 12.4142C21.0391 12.7893 20.5304 13 20 13H17M10 15V19C10 19.7956 10.3161 20.5587 10.8787 21.1213C11.4413 21.6839 12.2044 22 13 22L17 13V2H5.72C5.23767 1.99448 4.76962 2.16361 4.40213 2.47596C4.03464 2.78831 3.79227 3.22305 3.72 3.7L2.34 12.7C2.29649 12.9866 2.31583 13.2793 2.39672 13.5577C2.47761 13.8362 2.61793 14.0937 2.80817 14.3125C2.9984 14.5313 3.23394 14.7061 3.49843 14.8248C3.76291 14.9435 4.05011 15.0033 4.34 15H10Z"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
</div>
@@ -353,16 +361,16 @@ export default {
setTimeout(() => {
const newScrollHeight = this.$refs.messageList.scrollHeight
const heightDiff = newScrollHeight - currentScrollHeight
// 计算目标滚动位置，确保用户看到的内容不变
const targetScrollTop = Math.max(0, currentScrollTop + heightDiff)
// 直接设置scrollTop，避免scrollTo的动画效果
this.$refs.messageList.scrollTop = targetScrollTop
// 更新lastScrollTop以避免触发新的加载
this.lastScrollTop = targetScrollTop
// 确保滚动位置稳定
this.$nextTick(() => {
if (Math.abs(this.$refs.messageList.scrollTop - targetScrollTop) > 5) {
@@ -492,7 +500,7 @@ export default {
this.$nextTick(() => {
if (this.$refs.messageList) {
const targetTop = this.$refs.messageList.scrollHeight
if (smooth && this.$refs.messageList.scrollTo && !this.isLoadingHistory) {
// 只在非加载状态时使用平滑滚动
this.$refs.messageList.scrollTo({
@@ -503,7 +511,7 @@ export default {
// 直接设置滚动位置
this.$refs.messageList.scrollTop = targetTop
}
// 延迟更新lastScrollTop，避免干扰滚动检测
setTimeout(() => {
this.lastScrollTop = targetTop
@@ -517,30 +525,30 @@ export default {
*/
onScroll(e) {
const scrollTop = e.target.scrollTop
// 检查是否需要加载历史记录
// 当滚动到距离顶部阈值范围内且向上滚动时触发加载
if (scrollTop <= this.loadThreshold &&
scrollTop < this.lastScrollTop &&
this.hasMoreHistory &&
!this.isLoadingHistory) {
if (scrollTop <= this.loadThreshold &&
scrollTop < this.lastScrollTop &&
this.hasMoreHistory &&
!this.isLoadingHistory) {
// 清除之前的防抖定时器
if (this.loadDebounceTimer) {
clearTimeout(this.loadDebounceTimer)
}
// 设置防抖延迟加载
this.loadDebounceTimer = setTimeout(() => {
// 再次检查条件，确保状态没有改变
if (this.hasMoreHistory &&
!this.isLoadingHistory &&
this.$refs.messageList.scrollTop <= this.loadThreshold) {
if (this.hasMoreHistory &&
!this.isLoadingHistory &&
this.$refs.messageList.scrollTop <= this.loadThreshold) {
this.loadMoreHistory()
}
}, 300) // 增加防抖时间，避免频繁触发
}
// 更新上次滚动位置（延迟更新，避免在位置调整时干扰）
setTimeout(() => {
this.lastScrollTop = scrollTop
@@ -560,27 +568,38 @@ export default {
* 处理点赞
*/
async handleThumbUp(message) {
if ((message.feedback && message.feedback.rating === 'like') || message.feedback === 'like') {
this.showToast('您已经点过赞了')
return
}
try {
const messageId = message.messageId.replace('ai-', '')
const currentFeedback = (message.feedback && message.feedback.rating) || message.feedback
let action, newFeedback, toastMessage
if (currentFeedback === 'like') {
// 如果已经点赞，则取消点赞
action = -1 // 假设-1表示取消反馈
newFeedback = null
toastMessage = '已取消点赞'
} else {
// 如果没有点赞或者是点踩状态，则设置为点赞
action = 1
newFeedback = 'like'
toastMessage = '感谢您的反馈！'
}
const res = await sendFeedback({
messageId: messageId,
action: 1,
action: action,
user: this.user
})
if (res.code === 200) {
message.feedback = 'like'
this.showToast('感谢您的反馈！')
message.feedback = newFeedback
this.showToast(toastMessage)
} else {
this.showToast('反馈失败，请稍后重试')
}
} catch (error) {
console.error('点赞失败:', error)
console.error('点赞操作失败:', error)
this.showToast('反馈失败，请稍后重试')
}
},
@@ -589,27 +608,38 @@ export default {
* 处理点踩
*/
async handleThumbDown(message) {
if ((message.feedback && message.feedback.rating === 'dislike') || message.feedback === 'dislike') {
this.showToast('您已经点过踩了')
return
}
try {
const messageId = message.messageId.replace('ai-', '')
const currentFeedback = (message.feedback && message.feedback.rating) || message.feedback
let action, newFeedback, toastMessage
if (currentFeedback === 'dislike') {
// 如果已经点踩，则取消点踩
action = -1 // 假设-1表示取消反馈
newFeedback = null
toastMessage = '已取消点踩'
} else {
// 如果没有点踩或者是点赞状态，则设置为点踩
action = 0
newFeedback = 'dislike'
toastMessage = '感谢您的反馈！'
}
const res = await sendFeedback({
messageId: messageId,
action: 0,
action: action,
user: this.user
})
if (res.code === 200) {
message.feedback = 'dislike'
this.showToast('感谢您的反馈！')
message.feedback = newFeedback
this.showToast(toastMessage)
} else {
this.showToast('反馈失败，请稍后重试')
}
} catch (error) {
console.error('点踩失败:', error)
console.error('点踩操作失败:', error)
this.showToast('反馈失败，请稍后重试')
}
},
@@ -795,13 +825,25 @@ export default {
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes fadeInOut {
0%, 100% { opacity: 0.7; }
50% { opacity: 1; }
0%,
100% {
opacity: 0.7;
}
50% {
opacity: 1;
}
}
.no-more-history {
@@ -1181,18 +1223,18 @@ export default {
line-height: 1.5;
}
.content-text >>> a {
.content-text>>>a {
color: #1890ff !important;
text-decoration: none;
transition: color 0.2s;
}
.content-text >>> a:hover {
.content-text>>>a:hover {
color: #40a9ff !important;
text-decoration: underline;
}
.content-text >>> a:visited {
.content-text>>>a:visited {
color: #722ed1 !important;
}