From 15cdbcb8a881c7280d5ee094bfcdf3c04106927d Mon Sep 17 00:00:00 2001
From: ptma <ptma@163.com>
Date: Thu, 6 Aug 2026 16:30:20 +0800
Subject: [PATCH] fix(query): show selected chart Y-axis fields

---
 apps/desktop/src/components/chart/QueryChart.vue   | 12 ++++++------
 .../chart/__tests__/QueryChartSelection.spec.ts    | 14 ++++++++++++++
 2 files changed, 20 insertions(+), 6 deletions(-)
 create mode 100644 apps/desktop/src/components/chart/__tests__/QueryChartSelection.spec.ts

diff --git a/apps/desktop/src/components/chart/QueryChart.vue b/apps/desktop/src/components/chart/QueryChart.vue
index a31f9503d..0f0478130 100644
--- a/apps/desktop/src/components/chart/QueryChart.vue
+++ b/apps/desktop/src/components/chart/QueryChart.vue
@@ -60,12 +60,12 @@ watch(
   { immediate: true },
 );
 
-function toggleYColumn(index: number) {
-  const idx = yColumnIndexes.value.indexOf(index);
-  if (idx >= 0) {
-    yColumnIndexes.value = yColumnIndexes.value.filter((selected) => selected !== index);
-  } else {
+function setYColumn(index: number, selected: boolean | "indeterminate") {
+  const isSelected = yColumnIndexes.value.includes(index);
+  if (selected === true && !isSelected) {
     yColumnIndexes.value = [...yColumnIndexes.value, index];
+  } else if (selected !== true && isSelected) {
+    yColumnIndexes.value = yColumnIndexes.value.filter((selected) => selected !== index);
   }
 }
 
@@ -163,7 +163,7 @@ const hasData = computed(() => props.result.rows.length > 0 && numericColumnInde
               </Button>
             </DropdownMenuTrigger>
             <DropdownMenuContent class="w-56" align="start" @close-auto-focus.prevent>
-              <DropdownMenuCheckboxItem v-for="col in numericColumnOptions" :key="col.index" :checked="yColumnIndexes.includes(col.index)" class="text-xs" @select.prevent @click="toggleYColumn(col.index)">
+              <DropdownMenuCheckboxItem v-for="col in numericColumnOptions" :key="col.index" :model-value="yColumnIndexes.includes(col.index)" :class="['text-xs', yColumnIndexes.includes(col.index) ? 'bg-primary/10' : '']" @select.prevent @update:model-value="setYColumn(col.index, $event)">
                 <span class="truncate">{{ col.label }}</span>
               </DropdownMenuCheckboxItem>
             </DropdownMenuContent>
diff --git a/apps/desktop/src/components/chart/__tests__/QueryChartSelection.spec.ts b/apps/desktop/src/components/chart/__tests__/QueryChartSelection.spec.ts
new file mode 100644
index 000000000..dffd02c64
--- /dev/null
+++ b/apps/desktop/src/components/chart/__tests__/QueryChartSelection.spec.ts
@@ -0,0 +1,14 @@
+import { readFileSync } from "node:fs";
+import { describe, expect, it } from "vitest";
+
+const queryChartSource = readFileSync(new URL("../QueryChart.vue", import.meta.url), "utf8");
+
+describe("QueryChart Y-axis selection", () => {
+  it("binds the visible checkbox state to the selected Y columns", () => {
+    expect(queryChartSource).toContain(':model-value="yColumnIndexes.includes(col.index)"');
+    expect(queryChartSource).toContain('@update:model-value="setYColumn(col.index, $event)"');
+    expect(queryChartSource).not.toContain(':checked="yColumnIndexes.includes(col.index)"');
+    expect(queryChartSource).not.toContain('@click="toggleYColumn(col.index)"');
+    expect(queryChartSource).not.toContain("CheckIcon");
+  });
+});