From ef41b59822ad16e2388e22f72dc0a4967d1b9724 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E5=98=89=E8=B1=AA?=
 <42510293+ziyujiahao@users.noreply.github.com>
Date: Thu, 27 Nov 2025 17:56:21 +0800
Subject: [PATCH] refactor: refactor quick question style (#511)

---
 frontend/src/views/chat/QuickQuestion.vue     | 18 ++++++++++--------
 frontend/src/views/chat/RecommendQuestion.vue |  1 +
 2 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/frontend/src/views/chat/QuickQuestion.vue b/frontend/src/views/chat/QuickQuestion.vue
index 6c17a79b..5c7a2998 100644
--- a/frontend/src/views/chat/QuickQuestion.vue
+++ b/frontend/src/views/chat/QuickQuestion.vue
@@ -5,18 +5,20 @@ import { Close } from '@element-plus/icons-vue'
 import RecommendQuestion from '@/views/chat/RecommendQuestion.vue'
 import { ChatInfo } from '@/api/chat.ts'
 import RecentQuestion from '@/views/chat/RecentQuestion.vue'
-const visible = ref(false)
 const activeName = ref('recommend')
 const recommendQuestionRef = ref()
-
+const popoverRef = ref()
 const getRecommendQuestions = () => {
   recommendQuestionRef.value.getRecommendQuestions()
 }
 const quickAsk = (question: string) => {
   emits('quickAsk', question)
-  visible.value = false
+  hiddenProps()
 }
 
+const hiddenProps = () => {
+  popoverRef.value.hide()
+}
 const onChatStop = () => {
   emits('stop')
 }
@@ -50,13 +52,14 @@ const props = withDefaults(
 
 <template>
   <el-popover
+    ref="popoverRef"
     :title="$t('qa.quick_question')"
-    :visible="visible"
     popper-class="quick_question_popover"
     placement="top-start"
+    trigger="click"
     :width="320"
   >
-    <el-icon class="close_icon"><Close @click="visible = false" /></el-icon>
+    <el-icon class="close_icon"><Close @click="hiddenProps" /></el-icon>
     <el-tabs v-model="activeName" class="quick_question_tab">
       <el-tab-pane :label="$t('qa.recommend')" name="recommend">
         <RecommendQuestion
@@ -73,12 +76,11 @@ const props = withDefaults(
         />
       </el-tab-pane>
       <el-tab-pane v-if="datasourceId" :label="$t('qa.recently')" name="recently">
-        <RecentQuestion v-if="visible" :datasource-id="datasourceId" @click-question="quickAsk">
-        </RecentQuestion>
+        <RecentQuestion :datasource-id="datasourceId" @click-question="quickAsk"> </RecentQuestion>
       </el-tab-pane>
     </el-tabs>
     <template #reference>
-      <el-button plain size="small" @click="visible = true">
+      <el-button plain size="small">
         <el-icon size="16" class="el-icon--left">
           <icon_quick_question />
         </el-icon>
diff --git a/frontend/src/views/chat/RecommendQuestion.vue b/frontend/src/views/chat/RecommendQuestion.vue
index 1cc56b6a..edcb529c 100644
--- a/frontend/src/views/chat/RecommendQuestion.vue
+++ b/frontend/src/views/chat/RecommendQuestion.vue
@@ -160,6 +160,7 @@ defineExpose({ getRecommendQuestions, id: () => props.recordId, stop })
       <div v-else class="continue-ask">{{ t('qa.continue_to_ask') }}</div>
     </template>
     <div v-if="loading">
+      <div v-if="position === 'input'" style="margin-bottom: 8px">{{ t('qa.guess_u_ask') }}</div>
       <el-button style="min-width: unset" type="primary" link loading />
     </div>
     <div v-else-if="position === 'input'" class="question-grid-input">