You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

241 lines
6.6 KiB

10 months ago
<template>
<div>
<el-text type="info">
<span class="ml-4" style="margin-left: 4px">{{ datetimeFormat(data.time) }}</span>
</el-text>
</div>
<div>
<span>
<el-tooltip effect="dark" content="换个答案" placement="top" popper-class="operate-tooltip">
<el-button text @click="regeneration" style="padding: 0">
<el-icon><RefreshRight /></el-icon>
</el-button>
</el-tooltip>
<el-divider direction="vertical" />
<el-tooltip effect="dark" content="复制" placement="top" popper-class="operate-tooltip">
<el-button text @click="copyClick(data)" style="padding: 0">
<el-icon><CopyDocument /></el-icon>
</el-button>
</el-tooltip>
<el-divider direction="vertical" />
<el-tooltip
effect="dark"
content="赞同"
placement="top"
v-if="data.operate === null || data.operate === ''"
popper-class="operate-tooltip"
>
<el-button text @click="thumbUp" style="padding: 0">
<i class="ri-thumb-up-line"></i>
</el-button>
</el-tooltip>
<el-tooltip
effect="dark"
content="取消赞同"
placement="top"
v-if="data.operate !== null && data.operate === 'thumb_up'"
popper-class="operate-tooltip"
>
<el-button text @click="cancelThumb" style="padding: 0">
<i class="ri-thumb-up-fill" style="color: orange"></i>
</el-button>
</el-tooltip>
<el-divider direction="vertical" v-if="data.operate === null || data.operate === ''" />
<el-popover
:visible="visible"
v-if="data.operate === null || data.operate === ''"
placement="left"
popper-style="z-index:99999;"
:show-arrow=false
title="反对原因"
:width="260">
<template #default>
<el-input v-model="thumbDownReason"></el-input>
<div style="text-align: right; margin-top: 10px">
<el-button size="small" text @click="closeThumb">取消</el-button>
<el-button size="small" type="primary" @click="confirmReason">确定</el-button>
</div>
</template>
<template #reference>
<el-button text @click="showPop" style="padding: 0">
<el-tooltip
effect="dark"
content="反对"
placement="top"
popper-class="operate-tooltip"
>
<i class="ri-thumb-down-line"></i>
</el-tooltip>
</el-button>
</template>
</el-popover>
<el-tooltip
effect="dark"
:content="'反对原因:'+data.thumbDownReason"
placement="top"
v-if="data.operate !== null && data.operate === 'thumb_down'"
popper-class="operate-tooltip"
>
<el-button text @click="cancelThumb" style="padding: 0">
<i class="ri-thumb-down-fill" style="color: orange"></i>
</el-button>
</el-tooltip>
</span>
</div>
</template>
<script setup>
import { ref } from 'vue'
import { useRoute } from 'vue-router'
import Clipboard from 'vue-clipboard3'
import { datetimeFormat } from '@/utils/time'
import {updateChat} from "@/api/aichat/aichat.js";
const { proxy } = getCurrentInstance();
const route = useRoute()
const {
params: { id }
} = route
const props = defineProps({
data: {
type: Object,
default: () => {}
},
index: Number
})
const thumbDownReason = ref("")
const visible = ref(false)
const emit = defineEmits(['update:data', 'regeneration', 'changeThumb'])
function regeneration() {
emit('regeneration')
}
function closeThumb(){
visible.value = false
thumbDownReason.value = ""
}
function showPop(){
visible.value = true
thumbDownReason.value = props.data.thumbDownReason?props.data.thumbDownReason:''
}
function confirmReason(){
let obj = {
operate:'thumb_down',
thumbDownReason: thumbDownReason.value
}
let chat = JSON.parse(JSON.stringify(props.data))
chat.operate = 'thumb_down'
chat.thumbDownReason = thumbDownReason.value
chat.content = JSON.stringify(chat.content)
updateChat(chat).then(res=>{
visible.value = false
emit("changeThumb",props.index,obj)
})
}
async function copyClick(data) {
const {toClipboard} = Clipboard()
let str = ''
let content = data.content
for (let i = 0; i < content.length; i++){
let cont = content[i]
if (cont.type === 'text'){
str += cont.content
}
}
try {
await toClipboard(str)
proxy.$modal.msgSuccess("复制成功");
} catch (e) {
console.error(e)
proxy.$modal.msgError('复制失败')
}
}
function thumbUp(){
let obj = {
operate:'thumb_up',
thumbDownReason: ''
}
let chat = JSON.parse(JSON.stringify(props.data))
chat.operate = 'thumb_up'
chat.content = JSON.stringify(chat.content)
updateChat(chat).then(res=>{
emit("changeThumb",props.index,obj)
})
}
function cancelThumb(){
let obj = {
operate:'',
thumbDownReason: ''
}
let chat = JSON.parse(JSON.stringify(props.data))
chat.operate = ''
chat.content = JSON.stringify(chat.content)
updateChat(chat).then(res=>{
emit("changeThumb",props.index,obj)
})
}
function voteHandle(operate) {
let chat = props.data
let obj = {
operate:'',
thumbDownReason:''
}
if (operate === 'thumb_up'){
chat.operate = 'thumb_up'
chat.content = JSON.stringify(chat.content)
updateChat(chat).then(res=>{
obj.operate = 'thumb_up'
emit("changeThumb",props.index,obj)
})
}
if (operate === 'cancel-thumb-up'){
chat.operate = ''
chat.content = JSON.stringify(chat.content)
updateChat(chat).then(res=>{
obj.operate = ''
emit("changeThumb",props.index,obj)
})
}
if(operate === 'cancel-thumb-down'){
}
emit("voteHandle",props.index,val)
}
function ToPlainText(md) {
return (
md
// 移除图片 ![alt](url)
.replace(/!\[.*?\]\(.*?\)/g, '')
// 移除链接 [text](url)
.replace(/\[([^\]]+)\]\([^)]+\)/g, '$1')
// 移除 标题符号 (#, ##, ###)
.replace(/^#{1,6}\s+/gm, '')
// 移除加粗 **text** 或 __text__
.replace(/\*\*(.*?)\*\*/g, '$1')
.replace(/__(.*?)__/g, '$1')
// 移除斜体 *text* 或 _text_
.replace(/\*(.*?)\*/g, '$1')
.replace(/_(.*?)_/g, '$1')
// 移除行内代码 `code`
.replace(/`(.*?)`/g, '$1')
// 移除代码块 ```code```
.replace(/```[\s\S]*?```/g, '')
// 移除多余的换行符
.replace(/\n{2,}/g, '\n')
.trim()
)
}
</script>
<style lang="scss">
.operate-tooltip {
z-index: 99999 !important;
}
</style>