From 78a43ccaf34b6d2929f251a92908f395def62696 Mon Sep 17 00:00:00 2001
From: dataeaseShu <tong.shu@fit2cloud.com>
Date: Tue, 16 Jul 2024 15:38:04 +0800
Subject: [PATCH] =?UTF-8?q?fix(=E7=B3=BB=E7=BB=9F=E8=AE=BE=E7=BD=AE):=20?=
 =?UTF-8?q?=E5=88=87=E6=8D=A2=E5=9B=BE=E8=A1=A8=E7=B1=BB=E5=9E=8B=E3=80=81?=
 =?UTF-8?q?=E5=88=87=E6=8D=A2=E6=98=8E=E7=BB=86=E8=A1=A8=E4=B8=BA=E4=BA=92?=
 =?UTF-8?q?=E6=96=A5=E5=85=B3=E7=B3=BB=EF=BC=8C=E5=85=B7=E4=BD=93=E4=BA=A4?=
 =?UTF-8?q?=E4=BA=92=E5=A6=82=E4=B8=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/assets/svg/chart-table.svg            |  4 +-
 .../src/views/copilot/DialogueChart.vue       | 86 +++++++++++++++----
 2 files changed, 70 insertions(+), 20 deletions(-)

diff --git a/core/core-frontend/src/assets/svg/chart-table.svg b/core/core-frontend/src/assets/svg/chart-table.svg
index e9a718b1f3..5d8d412e67 100644
--- a/core/core-frontend/src/assets/svg/chart-table.svg
+++ b/core/core-frontend/src/assets/svg/chart-table.svg
@@ -1,3 +1,3 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M5.68833 5.68831C5.91562 5.46102 6.2239 5.33333 6.54534 5.33333H17.4547C17.7761 5.33333 18.0844 5.46102 18.3117 5.68831C18.539 5.91561 18.6667 6.22389 18.6667 6.54533V17.4547C18.6667 17.7761 18.539 18.0844 18.3117 18.3117C18.0844 18.539 17.7761 18.6667 17.4547 18.6667H6.54534C5.87601 18.6667 5.33334 18.124 5.33334 17.4547V6.54533C5.33334 6.22389 5.46104 5.91561 5.68833 5.68831ZM6.66668 10.6667V13.3333H9.33334V10.6667H6.66668ZM6.66668 14.6667V17.3333H9.33334V14.6667H6.66668ZM10.6667 17.3333H13.3333V14.6667H10.6667V17.3333ZM14.6667 17.3333H17.3333V14.6667H14.6667V17.3333ZM17.3333 13.3333V10.6667H14.6667V13.3333H17.3333ZM13.3333 10.6667H10.6667V13.3333H13.3333V10.6667ZM17.3333 6.66666H6.66668V9.33333H17.3333V6.66666Z" fill="#646A73"/>
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.68833 5.68831C5.91562 5.46102 6.2239 5.33333 6.54534 5.33333H17.4547C17.7761 5.33333 18.0844 5.46102 18.3117 5.68831C18.539 5.91561 18.6667 6.22389 18.6667 6.54533V17.4547C18.6667 17.7761 18.539 18.0844 18.3117 18.3117C18.0844 18.539 17.7761 18.6667 17.4547 18.6667H6.54534C5.87601 18.6667 5.33334 18.124 5.33334 17.4547V6.54533C5.33334 6.22389 5.46104 5.91561 5.68833 5.68831ZM6.66668 10.6667V13.3333H9.33334V10.6667H6.66668ZM6.66668 14.6667V17.3333H9.33334V14.6667H6.66668ZM10.6667 17.3333H13.3333V14.6667H10.6667V17.3333ZM14.6667 17.3333H17.3333V14.6667H14.6667V17.3333ZM17.3333 13.3333V10.6667H14.6667V13.3333H17.3333ZM13.3333 10.6667H10.6667V13.3333H13.3333V10.6667ZM17.3333 6.66666H6.66668V9.33333H17.3333V6.66666Z"/>
 </svg>
diff --git a/core/core-frontend/src/views/copilot/DialogueChart.vue b/core/core-frontend/src/views/copilot/DialogueChart.vue
index a0934bb987..456ecc03be 100644
--- a/core/core-frontend/src/views/copilot/DialogueChart.vue
+++ b/core/core-frontend/src/views/copilot/DialogueChart.vue
@@ -299,27 +299,45 @@ const tips = computed(() => {
       v-if="copilotInfo.msgType === 'api' && copilotInfo.msgStatus === 1"
     >
       <template v-if="!renderTable">
-        <el-icon v-if="activeCommand" class="select-prefix">
+        <el-icon
+          :class="!(renderTable || renderTableLocal) && 'active'"
+          v-if="activeCommand"
+          class="select-prefix"
+        >
           <Icon :name="curTypeList.find(ele => ele.value === activeCommand).icon" />
         </el-icon>
-        <el-select
-          popper-class="copilot-select_popper"
-          class="select-copilot-list"
-          v-model="activeCommand"
-          size="small"
-          @change="changeChartType"
-        >
-          <el-option
-            v-for="item in curTypeList"
-            :key="item.label"
-            :label="item.label"
-            :value="item.value"
-          />
-        </el-select>
+        <el-tooltip effect="dark" content="切换图表类型" placement="top">
+          <div
+            v-show="renderTable || renderTableLocal"
+            @click="switchChartType(activeCommand)"
+            class="fake-mask_select"
+          ></div>
+        </el-tooltip>
+        <el-tooltip effect="dark" content="切换图表类型" placement="top">
+          <el-select
+            popper-class="copilot-select_popper"
+            class="select-copilot-list"
+            :class="!(renderTable || renderTableLocal) && 'active'"
+            v-model="activeCommand"
+            size="small"
+            @change="changeChartType"
+          >
+            <el-option
+              v-for="item in curTypeList"
+              :key="item.label"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-tooltip>
         <el-divider direction="vertical" />
       </template>
       <el-tooltip effect="dark" content="切换至明细表" placement="top">
-        <el-icon class="ed-icon_chart" @click="switchChartType('table')">
+        <el-icon
+          :class="(renderTable || renderTableLocal) && 'active'"
+          class="ed-icon_chart"
+          @click="switchChartType('table')"
+        >
           <Icon name="chart-table" />
         </el-icon>
       </el-tooltip>
@@ -345,13 +363,19 @@ const tips = computed(() => {
     z-index: 100;
 
     :deep(.ed-input__wrapper) {
-      background: #3370ff1a;
+      background: transparent;
       box-shadow: none !important;
       padding-right: 4px;
       .ed-input__inner {
         visibility: hidden;
       }
     }
+
+    &.active {
+      :deep(.ed-input__wrapper) {
+        background: #3370ff1a;
+      }
+    }
   }
 
   .chart-type_list {
@@ -361,9 +385,24 @@ const tips = computed(() => {
     display: flex;
     align-items: center;
     font-size: 24px;
+    .fake-mask_select {
+      width: 40px;
+      height: 24px;
+      cursor: pointer;
+      border-radius: 4px;
+      position: absolute;
+      top: 50%;
+      left: 0;
+      transform: translateY(-50%);
+      z-index: 101;
+      &:hover {
+        background: #1f23291a;
+      }
+    }
     .ed-icon_chart {
       position: relative;
       cursor: pointer;
+      color: #646a73;
       &::after {
         content: '';
         position: absolute;
@@ -382,6 +421,14 @@ const tips = computed(() => {
           display: block;
         }
       }
+
+      &.active {
+        color: var(--ed-color-primary, #3370ff);
+        &::after {
+          display: block;
+          background: #3370ff1a;
+        }
+      }
     }
 
     .select-prefix {
@@ -390,7 +437,10 @@ const tips = computed(() => {
       top: 50%;
       transform: translateY(-50%);
       font-size: 16px;
-      color: var(--ed-color-primary, #3370ff);
+      color: #646a73;
+      &.active {
+        color: var(--ed-color-primary, #3370ff);
+      }
     }
     .ed-divider--vertical {
       border-color: #1f232926;