feat: 对话功能开发

2026-04-12 15:36:36 +08:00
parent ca389824a1
commit c2a4d60edd
12 changed files with 2645 additions and 5 deletions
--- a/src/renderer/components/MarkdownRender/ThumbDownDialog.vue
+++ b/src/renderer/components/MarkdownRender/ThumbDownDialog.vue
@@ -0,0 +1,131 @@
+<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>