Merge pull request #44 from Geniusay/master

生成提示词功能

Author: Geniusay

prompto-lab-ui/src/components/Chat/AIChatPage.vue

@@ -306,15 +306,10 @@ const handleConnectionMessage = (response: any): boolean => {
 // 处理生成提示词消息
 const handleGenPromptMessage = (response: any): boolean => {
   if (response.genPrompt) {
-    console.log('收到genPrompt数据:', response.genPrompt)
-    console.log('questionRendererRef.value:', questionRendererRef.value)
-    
     try {
       // 通过ref调用子组件的setPromptResult方法显示提示词结果
       if (questionRendererRef.value && questionRendererRef.value.setPromptResult) {
-        console.log('调用子组件setPromptResult方法')
         questionRendererRef.value.setPromptResult(response.genPrompt)
-        console.log('setPromptResult调用完成')
         
         toast.success({
           title: '提示词生成成功',
@@ -323,9 +318,6 @@ const handleGenPromptMessage = (response: any): boolean => {
         })
       } else {
         console.warn('QuestionRenderer组件引用不可用，无法显示提示词结果')
-        console.log('questionRendererRef.value存在:', !!questionRendererRef.value)
-        console.log('setPromptResult方法存在:', questionRendererRef.value && !!questionRendererRef.value.setPromptResult)
-        
         toast.error({
           title: '显示失败',
           message: '无法显示提示词结果，请重试',

prompto-lab-ui/src/components/Chat/QuestionRenderer.vue

@@ -218,9 +218,7 @@
     </div>
 
     <!-- 提示词结果展示 -->
-    <div v-if="promptResult" class="prompt-result">
-      <!-- 调试信息 -->
-      <div style="display: none;">{{ console.log('模板中promptResult值:', promptResult) }}</div>
+    <div v-if="showPromptResult && promptResult" class="prompt-result">
       <div class="prompt-result-container">
         <div class="prompt-result-header">
           <h3 class="result-title">生成的提示词</h3>
@@ -286,7 +284,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, nextTick, computed, watch } from 'vue'
+import { ref, reactive, nextTick, computed, watch, getCurrentInstance } from 'vue'
 import LoadingAnimation from './LoadingAnimation.vue'
 import SingleChoiceOptions from './SingleChoiceOptions.vue'
 import MultipleChoiceOptions from './MultipleChoiceOptions.vue'
@@ -401,12 +399,6 @@ watch(() => props.currentQuestion, (newQuestion, oldQuestion) => {
   }
 }, { deep: true })
 
-// 监听promptResult变化
-watch(() => promptResult.value, (newValue, oldValue) => {
-  console.log('promptResult变化:', { oldValue, newValue })
-  console.log('promptResult是否为真值:', !!newValue)
-}, { immediate: true })
-
 // 方法
 const resetAnswers = () => {
   answers.input = ''
@@ -539,8 +531,14 @@ const showRetryDialog = ref(false)
 const retryReason = ref('')
 
 // 提示词相关状态
-const promptResult = ref('')
+const promptResult = ref<string>('')
 const copySuccess = ref(false)
+const showPromptResult = ref(false)
+
+// 监听promptResult变化
+watch(() => promptResult.value, (newValue, oldValue) => {
+  // 可以在这里添加必要的响应式逻辑
+})
 
 const retryQuestion = () => {
   // 显示重试原因输入对话框
@@ -614,6 +612,7 @@ const regeneratePrompt = async () => {
 
 const continueChat = () => {
   promptResult.value = ''
+  showPromptResult.value = false
   // 继续问答功能暂时不实现
   console.log('继续问答功能待实现')
 }
@@ -648,20 +647,27 @@ const copyPrompt = async () => {
 // 关闭提示词结果
 const closePromptResult = () => {
   promptResult.value = ''
+  showPromptResult.value = false
   copySuccess.value = false
 }
 
+// 获取当前组件实例
+const instance = getCurrentInstance()
+
 // 暴露设置提示词结果的方法
 const setPromptResult = (result: string) => {
-  console.log('子组件setPromptResult被调用，参数:', result)
-  console.log('设置前promptResult.value:', promptResult.value)
+  // 设置提示词内容和显示状态
   promptResult.value = result
-  console.log('设置后promptResult.value:', promptResult.value)
+  showPromptResult.value = true
+  
+  // 强制更新组件以确保响应式更新
+  if (instance) {
+    instance.proxy?.$forceUpdate()
+  }
   
-  // 使用nextTick确保DOM更新
+  // 使用nextTick确保DOM更新完成
   nextTick(() => {
-    console.log('nextTick后promptResult.value:', promptResult.value)
-    console.log('DOM中是否存在.prompt-result元素:', !!document.querySelector('.prompt-result'))
+    // DOM更新完成后的回调
   })
 }