From c395724c71e3cedda87d07ec31906e6c6c105e52 Mon Sep 17 00:00:00 2001
From: ulleo <ulleo.wang@gmail.com>
Date: Wed, 24 Jun 2026 18:01:47 +0800
Subject: [PATCH] pref: improve show label button in chart display

---
 .../src/views/chat/answer/ChartAnswer.vue     |  2 ++
 .../src/views/chat/answer/PredictAnswer.vue   |  2 ++
 .../src/views/chat/chat-block/ChartBlock.vue  | 26 +++++++++++++------
 3 files changed, 22 insertions(+), 8 deletions(-)

diff --git a/frontend/src/views/chat/answer/ChartAnswer.vue b/frontend/src/views/chat/answer/ChartAnswer.vue
index 32c9fdd5..d0783ca3 100644
--- a/frontend/src/views/chat/answer/ChartAnswer.vue
+++ b/frontend/src/views/chat/answer/ChartAnswer.vue
@@ -259,6 +259,7 @@ function stop() {
 }
 
 const enableThousandsSeparatorList = ref<Array<string>>([])
+const showLabel = ref<boolean>(false)
 
 onBeforeUnmount(() => {
   stop()
@@ -276,6 +277,7 @@ defineExpose({ sendMessage, index: () => index.value, stop })
 <template>
   <BaseAnswer v-if="message" :message="message" :reasoning-name="reasoningName" :loading="_loading">
     <ChartBlock
+      v-model:show-label="showLabel"
       v-model:thousands-separator-list="enableThousandsSeparatorList"
       style="margin-top: 6px"
       :message="message"
diff --git a/frontend/src/views/chat/answer/PredictAnswer.vue b/frontend/src/views/chat/answer/PredictAnswer.vue
index 5a6c3858..a8df7f88 100644
--- a/frontend/src/views/chat/answer/PredictAnswer.vue
+++ b/frontend/src/views/chat/answer/PredictAnswer.vue
@@ -258,6 +258,7 @@ function stop() {
 }
 
 const enableThousandsSeparatorList = ref<Array<string>>([])
+const showLabel = ref<boolean>(false)
 
 onBeforeUnmount(() => {
   stop()
@@ -278,6 +279,7 @@ defineExpose({ sendMessage, index: () => index.value, chatList: () => _chatList,
     <ChartBlock
       v-if="message.record?.predict_data?.length > 0 && message.record?.data"
       ref="chartBlockRef"
+      v-model:show-label="showLabel"
       v-model:thousands-separator-list="enableThousandsSeparatorList"
       style="margin-top: 12px"
       :record-id="recordId"
diff --git a/frontend/src/views/chat/chat-block/ChartBlock.vue b/frontend/src/views/chat/chat-block/ChartBlock.vue
index c9635038..9a72980d 100644
--- a/frontend/src/views/chat/chat-block/ChartBlock.vue
+++ b/frontend/src/views/chat/chat-block/ChartBlock.vue
@@ -39,7 +39,8 @@ const props = withDefaults(
     chatType?: ChartTypes
     enlarge?: boolean
     loadingData?: boolean
-    thousandsSeparatorList?: Array<string>
+    thousandsSeparatorList: Array<string>
+    showLabel: boolean
   }>(),
   {
     recordId: undefined,
@@ -48,6 +49,7 @@ const props = withDefaults(
     enlarge: false,
     loadingData: false,
     thousandsSeparatorList: () => [],
+    showLabel: false,
   }
 )
 
@@ -55,7 +57,7 @@ const { copy } = useClipboard({ legacy: true })
 const loading = ref<boolean>(false)
 const { t } = useI18n()
 const addViewRef = ref(null)
-const emits = defineEmits(['exitFullScreen', 'update:thousandsSeparatorList'])
+const emits = defineEmits(['exitFullScreen', 'update:thousandsSeparatorList', 'update:showLabel'])
 
 const dataObject = computed<{
   fields: Array<string>
@@ -229,8 +231,6 @@ function showSql() {
   sqlShow.value = true
 }
 
-const showLabel = ref(false)
-
 function addToDashboard() {
   const recordeInfo = {
     id: '1-1',
@@ -368,6 +368,15 @@ watch(
   }
 )
 
+const _showLabel = computed({
+  get() {
+    return props.showLabel
+  },
+  set(v) {
+    emits('update:showLabel', v)
+  },
+})
+
 const enableThousandsSeparatorList = computed({
   get() {
     return props.thousandsSeparatorList
@@ -434,14 +443,14 @@ function getBaseAxis() {
             <el-tooltip
               effect="dark"
               :offset="8"
-              :content="showLabel ? t('chat.hide_label') : t('chat.show_label')"
+              :content="_showLabel ? t('chat.hide_label') : t('chat.show_label')"
               placement="top"
             >
               <el-button
                 class="tool-btn"
-                :class="{ 'chart-active': showLabel }"
+                :class="{ 'chart-active': _showLabel }"
                 text
-                @click="showLabel = !showLabel"
+                @click="_showLabel = !_showLabel"
               >
                 <el-icon size="16">
                   <ICON_STYLE />
@@ -589,7 +598,7 @@ function getBaseAxis() {
           :message="message"
           :data="data"
           :loading-data="loadingData"
-          :show-label="showLabel"
+          :show-label="_showLabel"
           :thousands-separator-list="enableThousandsSeparatorList"
         />
       </div>
@@ -610,6 +619,7 @@ function getBaseAxis() {
     >
       <ChartBlock
         v-if="dialogVisible && !enlarge"
+        v-model:show-label="_showLabel"
         v-model:thousands-separator-list="enableThousandsSeparatorList"
         :message="message"
         :record-id="recordId"