132 lines
3.6 KiB
Vue
132 lines
3.6 KiB
Vue
<script setup>
|
||
import { computed, ref } from 'vue';
|
||
import { ElMessage } from 'element-plus';
|
||
import { thumbUpAction } from '@/http/api.js';
|
||
// 受控组件：由父组件通过 v-model:visible 控制打开/关闭
|
||
const props = defineProps({
|
||
visible: { type: Boolean, default: false },
|
||
width: { type: [String, Number], default: '660' },
|
||
messageId: {
|
||
type: String,
|
||
required: true,
|
||
},
|
||
conversationId: {
|
||
type: String,
|
||
default: '',
|
||
required: true,
|
||
},
|
||
});
|
||
|
||
const emit = defineEmits(['update:visible', 'confirm']);
|
||
|
||
const btnNames = ['问题理解有误', '内容太浮夸', '逻辑不清晰', '重复输出', '遗忘上下文', '引用网页质量不高', '语言风格不喜欢'];
|
||
const feedback = ref('');
|
||
// 将外部的 visible 与内部 v-model 绑定
|
||
const dialogVisible = computed({
|
||
get: () => props.visible,
|
||
set: (val) => emit('update:visible', val),
|
||
});
|
||
|
||
const btnLoading = ref(false);
|
||
const handleClose = () => {
|
||
feedback.value = '';
|
||
// 关闭弹窗时清空表单，防止下次打开仍然显示旧数据
|
||
emit('update:visible', false);
|
||
};
|
||
|
||
const onConfirm = async () => {
|
||
// 执行表单校验
|
||
try {
|
||
// 例如：await api.createRepository({ name: form.email })
|
||
btnLoading.value = true;
|
||
let res = await thumbUpAction({
|
||
conversation_id: props.conversationId,
|
||
message_id: props.messageId,
|
||
feedback: feedback.value,
|
||
thumbup: false,
|
||
});
|
||
if (res.code === 0) {
|
||
emit('confirm');
|
||
ElMessage.success('感谢您的反馈');
|
||
handleClose();
|
||
// 保存成功后重置表单并关闭弹窗
|
||
} else {
|
||
ElMessage.error(res.message);
|
||
}
|
||
// 通知父组件确认事件（如需外部继续处理）
|
||
} catch (error) {
|
||
const message = (error && (error.message || error.msg)) || '提交失败，请稍后重试';
|
||
ElMessage.error(message);
|
||
} finally {
|
||
btnLoading.value = false;
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<template>
|
||
<el-dialog
|
||
v-model="dialogVisible"
|
||
:width="width"
|
||
align-center
|
||
:before-close="handleClose"
|
||
:append-to-body="true"
|
||
class="gradient-dialog"
|
||
style="background: linear-gradient(180deg, #e8f0ff 0%, #ffffff 44%)"
|
||
>
|
||
<template #header>
|
||
<div class="dialog-title text-[20px]">抱歉，让你有不好的体验</div>
|
||
<div class="text-[14px] text-quaternary-text">你的反馈将帮助我们更好的进步。</div>
|
||
</template>
|
||
<div class="flex gap-4 flex-wrap">
|
||
<el-button v-for="(btn, index) in btnNames" :key="index" @click="feedback = btn">{{ btn }}</el-button>
|
||
</div>
|
||
|
||
<textarea :rows="8" v-model="feedback" class="mt-8 w-full common-border rounded-lg p-2" placeholder="其他反馈建议内容" maxlength="300" />
|
||
|
||
<template #footer>
|
||
<div class="dialog-footer">
|
||
<el-button color="#1570ef" :loading="btnLoading" @click="onConfirm">确 定</el-button>
|
||
</div>
|
||
</template>
|
||
</el-dialog>
|
||
</template>
|
||
|
||
<style scoped>
|
||
:deep(.el-button + .el-button) {
|
||
margin-left: 0;
|
||
}
|
||
/* 给当前对话框应用渐变背景色 */
|
||
.gradient-dialog {
|
||
background: linear-gradient(180deg, #e8f0ff 0%, #ffffff 44%);
|
||
}
|
||
|
||
/* 让头部、主体、底部背景透明，以便显示整体渐变 */
|
||
:deep(.gradient-dialog .el-dialog__header),
|
||
:deep(.gradient-dialog .el-dialog__body),
|
||
:deep(.gradient-dialog .el-dialog__footer) {
|
||
background-color: transparent;
|
||
}
|
||
|
||
/* 搜索编辑区文本域样式 */
|
||
textarea {
|
||
width: 100%;
|
||
min-height: 60px;
|
||
outline: none;
|
||
box-shadow: none;
|
||
background: transparent;
|
||
color: #111827;
|
||
caret-color: #111827;
|
||
font-size: 16px;
|
||
line-height: 1.5;
|
||
resize: none;
|
||
}
|
||
textarea:focus {
|
||
outline: none;
|
||
box-shadow: none;
|
||
}
|
||
textarea::placeholder {
|
||
color: #9ca3af;
|
||
font-size: 14px;
|
||
}
|
||
</style>
|