feat: chart type select

2026-11-08 01:06:59 +08:00 · 2025-06-11 17:13:00 +08:00
parent 7b2695e567
commit 2512276152
7 changed files with 209 additions and 24 deletions
@@ -0,0 +1,7 @@
+<svg viewBox="0 0 80 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M37.5 6C37.7761 6 38 6.22386 38 6.5V13.5C38 13.7761 37.7761 14 37.5 14L9.5 14C9.22386 14 9 13.7761 9 13.5V6.5C9 6.22386 9.22386 6 9.5 6L37.5 6Z" fill="#3370FF"/>
+<path d="M71.5 18C71.7761 18 72 18.2239 72 18.5V25.5C72 25.7761 71.7761 26 71.5 26H9.5C9.22386 26 9 25.7761 9 25.5V18.5C9 18.2239 9.22386 18 9.5 18L71.5 18Z" fill="#3370FF"/>
+<path d="M50.5 30C50.7761 30 51 30.2239 51 30.5V37.5C51 37.7761 50.7761 38 50.5 38H9.5C9.22386 38 9 37.7761 9 37.5V30.5C9 30.2239 9.22386 30 9.5 30H50.5Z" fill="#3370FF"/>
+<path d="M29.5 42C29.7761 42 30 42.2239 30 42.5V49.5C30 49.7761 29.7761 50 29.5 50H9.5C9.22386 50 9 49.7761 9 49.5V42.5C9 42.2239 9.22386 42 9.5 42H29.5Z" fill="#3370FF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7 2.00391V53.0016V54.0016H4V2.00391H7Z" fill="#DEE0E3"/>
+</svg>
@@ -0,0 +1,7 @@
+<svg viewBox="0 0 80 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5 51H76L76 54H4V51H5Z" fill="#DEE0E3"/>
+<path d="M11 29.5C11 29.2239 11.2239 29 11.5 29H20.5C20.7761 29 21 29.2239 21 29.5V48.5C21 48.7761 20.7761 49 20.5 49H11.5C11.2239 49 11 48.7761 11 48.5V29.5Z" fill="#3370FF"/>
+<path d="M27 4.5C27 4.22386 27.2239 4 27.5 4H36.5C36.7761 4 37 4.22386 37 4.5V48.5C37 48.7761 36.7761 49 36.5 49H27.5C27.2239 49 27 48.7761 27 48.5V4.5Z" fill="#3370FF"/>
+<path d="M43 19.5C43 19.2239 43.2239 19 43.5 19H52.5C52.7761 19 53 19.2239 53 19.5V48.5C53 48.7761 52.7761 49 52.5 49H43.5C43.2239 49 43 48.7761 43 48.5V19.5Z" fill="#3370FF"/>
+<path d="M59 36.5C59 36.2239 59.2239 36 59.5 36H68.5C68.7761 36 69 36.2239 69 36.5V48.5C69 48.7761 68.7761 49 68.5 49H59.5C59.2239 49 59 48.7761 59 48.5V36.5Z" fill="#3370FF"/>
+</svg>
@@ -0,0 +1,5 @@
+<svg viewBox="0 0 80 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M37.686 13.231C37.2791 12.8242 36.6138 12.8437 36.2315 13.2737L34.8455 14.8327C34.1868 15.5735 33.2442 16.6333 32.1089 17.9092C29.8382 20.4611 26.7969 23.8773 23.714 27.3352C17.5164 34.2865 11.2327 41.313 10.6063 41.9394C10.0205 42.5252 10.0205 43.4749 10.6063 44.0607C11.1921 44.6465 12.1419 44.6465 12.7277 44.0607C13.4346 43.3537 19.8175 36.2136 25.9533 29.3316C29.0371 25.8728 32.0791 22.4557 34.3501 19.9034C35.4725 18.642 36.4066 17.5918 37.0644 16.8521L49.5834 29.3711C49.9141 29.7018 50.43 29.7591 50.8253 29.5089L72.851 15.5689L72.8605 15.5622C73.5392 15.0872 73.7043 14.1519 73.2292 13.4732C72.7567 12.7982 71.8291 12.6313 71.1513 13.0968L50.5191 26.0642L37.686 13.231Z" fill="#3370FF"/>
+<path d="M11.667 26.5C10.8386 26.5 10.167 27.1716 10.167 28C10.167 28.8284 10.8386 29.5 11.667 29.5H33.6392L42.646 40.1151C42.8119 40.3107 43.0467 40.4351 43.3017 40.4624L71.4856 43.489C72.3058 43.589 73.0528 43.0065 73.1554 42.1861C73.2582 41.364 72.6751 40.6143 71.8531 40.5115L44.4294 37.5801L35.3277 26.853C35.1377 26.6291 34.8588 26.5 34.5651 26.5H11.667Z" fill="#00D6B9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7 2.00391V51.0016L76 51.0016L76 54.0016H4V2.00391H7Z" fill="#DEE0E3"/>
+</svg>
@@ -0,0 +1,4 @@
+<svg viewBox="0 0 80 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M39.1377 52.9999C52.3009 52.9999 63.0031 42.4632 63.2702 29.364C63.2758 29.0879 63.0515 28.8623 62.7753 28.8623C54.8961 28.8623 47.0169 28.8623 39.1377 28.8623C39.1377 19.4553 39.1377 11.5758 39.1377 5.22392C39.1377 4.94778 38.912 4.72409 38.636 4.72972C25.5367 4.99681 15 15.699 15 28.8623C15 42.1931 25.8068 52.9999 39.1377 52.9999Z" fill="#3370FF"/>
+<path d="M46.6201 23.6894C45.3435 23.6894 44.3086 22.6545 44.3086 21.3779V3.5521C44.3086 3.25643 44.5649 3.02499 44.8583 3.06121C55.3368 4.35483 63.6432 12.6612 64.9368 23.1397C64.973 23.4331 64.7416 23.6894 64.4459 23.6894H46.6201Z" fill="#00D6B9"/>
+</svg>
@@ -0,0 +1,12 @@
+<svg viewBox="0 0 80 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13 7.16675C13 6.89061 13.2239 6.66675 13.5 6.66675H65.8333C66.1095 6.66675 66.3333 6.89061 66.3333 7.16675V17.3334H13V7.16675Z" fill="#3370FF"/>
+<path d="M29 20H13V28H29V20Z" fill="#ADC6FF"/>
+<path d="M47.6667 20H31.6667V28H47.6667V20Z" fill="#ADC6FF"/>
+<path d="M66.3333 20H50.3333V28H66.3333V20Z" fill="#ADC6FF"/>
+<path d="M29 41.3333H13V48C13 48.7364 13.597 49.3333 14.3333 49.3333H29V41.3333Z" fill="#ADC6FF"/>
+<path d="M47.6667 41.3333H31.6667V49.3333H47.6667V41.3333Z" fill="#ADC6FF"/>
+<path d="M66.3333 41.3333H50.3333V49.3333H65C65.7364 49.3333 66.3333 48.7364 66.3333 48V41.3333Z" fill="#ADC6FF"/>
+<path d="M29 30.6667H13V38.6667H29V30.6667Z" fill="#ADC6FF"/>
+<path d="M47.6667 30.6667H31.6667V38.6667H47.6667V30.6667Z" fill="#ADC6FF"/>
+<path d="M66.3333 30.6667H50.3333V38.6667H66.3333V30.6667Z" fill="#ADC6FF"/>
+</svg>
@@ -2,10 +2,16 @@

 import type {ChatMessage} from "@/api/chat.ts";
 import {computed, nextTick, ref} from "vue";
-import type {TabsPaneContext} from 'element-plus-secondary'
 import {Loading} from "@element-plus/icons-vue";
-import Component from "./component/Component.vue"
+import ChartComponent from "./component/ChartComponent.vue"
 import type {ChartTypes} from "@/views/chat/component/BaseChart.ts";
+import {ArrowDown} from "@element-plus/icons-vue";
+import ICON_BAR from "@/assets/svg/chart/bar.svg"
+import ICON_COLUMN from "@/assets/svg/chart/column.svg"
+import ICON_LINE from "@/assets/svg/chart/line.svg"
+import ICON_PIE from "@/assets/svg/chart/pie.svg"
+import ICON_TABLE from "@/assets/svg/chart/table.svg"
+import {find} from "lodash-es";

 const props = defineProps<{
  message?: ChatMessage
@@ -29,10 +35,6 @@ const renderChartThinking = computed(() => {
  return props.message?.record?.chart_answer
 })

-const handleClick = (tab: TabsPaneContext, event: Event) => {
-  console.log(tab, event)
-}
-
 const dataObject = computed<{
  fields: Array<string>,
  data: Array<{ [key: string]: any }>,
@@ -92,10 +94,59 @@ const chartType = computed<ChartTypes>({
  }
 })

+function clickTab(type: "chart" | "sql") {
+  settings.value.type = type
+}
+
+const chartSelectRef = ref()
+
+function openChartSelect() {
+  chartSelectRef.value.toggleMenu()
+}
+
+const chartTypeList = computed(() => {
+  const _list = [{
+    value: "table",
+    icon: ICON_TABLE
+  }]
+  if (chartObject.value) {
+    switch (chartObject.value.type) {
+      case "table":
+        break
+      case "column":
+      case "bar":
+      case "line":
+        _list.push({
+          value: "column",
+          icon: ICON_COLUMN
+        })
+        _list.push({
+          value: "bar",
+          icon: ICON_BAR
+        })
+        _list.push({
+          value: "line",
+          icon: ICON_LINE
+        })
+        break
+      case "pie":
+        _list.push({
+          value: "pie",
+          icon: ICON_PIE
+        })
+    }
+  }
+
+  return _list;
+})
+
+const currentChartTypeIcon = computed(() => {
+  return find(chartTypeList.value, c => c.value === chartType.value)?.icon ?? ICON_TABLE
+})
+
 const chartRef = ref()

-function onTypeChange(type: string) {
-  console.log(type)
+function onTypeChange() {
  nextTick(() => {
    chartRef.value?.destroyChart()
    chartRef.value?.renderChart()
@@ -112,21 +163,36 @@ function onTypeChange(type: string) {
        <div v-if="message.isTyping">Thinking ...</div>
        <div v-if="chartObject.title && !message.isTyping">{{ chartObject.title }}</div>
      </div>
-      <el-tabs v-model="settings.type" class="type-tabs" @tab-click="handleClick" tab-position="top">
-        <el-tab-pane label="Chart" name="chart">
-          <template #label>
-            <el-select v-model="chartType" style="width: 80px" :disabled="settings.type!== 'chart'"
-                       @change="onTypeChange">
-              <el-option value="table">table</el-option>
-              <el-option value="column">column</el-option>
-              <el-option value="bar">bar</el-option>
-              <el-option value="line">line</el-option>
-              <el-option value="pie">pie</el-option>
-            </el-select>
-          </template>
-        </el-tab-pane>
-        <el-tab-pane label="SQL" name="sql"></el-tab-pane>
-      </el-tabs>
+      <div class="tab-container">
+        <div class="base-chart-choose-btn" @click="clickTab('chart')">
+          <div class="chart-choose-btn"
+               :class="{'active': settings.type === 'chart', 'no-click': settings.type !== 'chart'}"
+               @click="openChartSelect">
+            <el-icon size="34">
+              <component :is="currentChartTypeIcon"/>
+            </el-icon>
+            <el-icon>
+              <ArrowDown/>
+            </el-icon>
+          </div>
+          <el-select v-model="chartType" class="inner-select" :disabled="settings.type!== 'chart'"
+                     ref="chartSelectRef"
+                     @change="onTypeChange">
+            <el-option v-for="t in chartTypeList " :key="t.value" :value="t.value">
+              <div class="inner-chart-option">
+                <el-icon size="34">
+                  <component :is="t.icon"/>
+                </el-icon>
+                {{ t.value }}
+              </div>
+            </el-option>
+          </el-select>
+
+        </div>
+        <div class="chart-choose-btn" :class="{'active': settings.type !== 'chart'}" @click="clickTab('sql')">
+          SQL
+        </div>
+      </div>
    </el-header>
    <el-container direction="vertical">
      <template v-if="message.record">
@@ -163,7 +229,7 @@ function onTypeChange(type: string) {
            <div>
              <div v-if="message.record.chart" class="chart-base-container">
                <div>
-                  <Component
+                  <ChartComponent
                      ref="chartRef"
                      v-if="message.record.id"
                      :id="message.record.id"
@@ -205,4 +271,88 @@ function onTypeChange(type: string) {
  padding: 20px;
  background: rgba(224, 224, 226, 0.29);
 }
+
+.tab-container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 4px;
+}
+
+.base-chart-choose-btn {
+  cursor: pointer;
+  color: var(--ed-color-primary);
+  font-size: 16px;
+  font-weight: 500;
+  height: 34px;
+
+  border-radius: 4px;
+
+  position: relative;
+
+  &:hover {
+    background: var(--ed-color-primary-light-5);
+    color: var(--ed-color-primary-light-9);
+  }
+
+  .inner-select {
+
+    position: absolute;
+
+    :deep(.ed-select__wrapper) {
+      height: 0;
+      padding: unset;
+      min-height: unset;
+      line-height: unset;
+    }
+
+    :deep(.ed-select__suffix) {
+      display: none;
+    }
+
+    :deep(.ed-select__selected-item) {
+      display: none;
+    }
+
+  }
+
+}
+
+.inner-chart-option {
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  padding-right: 4px;
+}
+
+.chart-choose-btn {
+
+  cursor: pointer;
+  color: var(--ed-color-primary);
+  font-size: 16px;
+  font-weight: 500;
+  height: 34px;
+
+  border-radius: 4px;
+
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  padding: 0 4px;
+
+  &.no-click {
+    pointer-events: none;
+  }
+
+  &.active {
+    background: var(--ed-color-primary-light-7);
+    color: var(--ed-color-primary);
+  }
+
+  &:hover {
+    background: var(--ed-color-primary-light-5);
+    color: var(--ed-color-primary-light-9);
+  }
+}
 </style>