From 6d72bba82d8e29bbbf0751ff0ce773e6c4d5f6c2 Mon Sep 17 00:00:00 2001
From: qianmoQ <shicheng@devlive.org>
Date: Fri, 3 Jul 2026 15:39:12 +0800
Subject: [PATCH 01/23] =?UTF-8?q?feat(lsp):=20=E9=97=AE=E9=A2=98=E9=9D=A2?=
 =?UTF-8?q?=E6=9D=BF=E8=B7=A8=E6=96=87=E4=BB=B6=E8=81=9A=E5=90=88=E8=AF=8A?=
 =?UTF-8?q?=E6=96=AD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

新增 allDiagnostics store：拦截 lsp:messages 的 publishDiagnostics，按文件(URI→路径)聚合；
问题面板改为按文件分组展示（当前文件优先），点击诊断打开对应文件并定位。
---
 src/App.vue                         | 14 +++++-
 src/components/DiagnosticsPanel.vue | 51 +++++++++++++++------
 src/editor/allDiagnostics.ts        | 71 +++++++++++++++++++++++++++++
 3 files changed, 121 insertions(+), 15 deletions(-)
 create mode 100644 src/editor/allDiagnostics.ts

diff --git a/src/App.vue b/src/App.vue
index 7b821eef..7ffd0eac 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -420,7 +420,8 @@
 
     <!-- LSP 问题面板 -->
     <DiagnosticsPanel v-if="showDiagnostics"
-                      @go="(line, col) => gotoLine(line, col)"
+                      :current-path="currentFilePath"
+                      @open="openDiagnostic"
                       @close="showDiagnostics = false"/>
 
     <!-- 编辑器 LSP 右键菜单 -->
@@ -551,6 +552,7 @@ import {foldAll, unfoldAll, matchBrackets} from '@codemirror/language'
 import {selectParentSyntax} from '@codemirror/commands'
 import {format as formatSql} from 'sql-formatter'
 import {diagnostics} from './editor/lspDiagnostics'
+import {initDiagnosticsAggregator} from './editor/allDiagnostics'
 import {useGitPermalink} from './composables/useGitPermalink'
 import {useRevealInTree} from './composables/useRevealInTree'
 import {useWorkspaceRoots} from './composables/useWorkspaceRoots'
@@ -1581,6 +1583,15 @@ const openSearchResult = async (path: string, line: number) => {
   gotoLine(line)
 }
 
+// 问题面板：打开诊断所在文件并定位
+const openDiagnostic = async (path: string, line: number, col: number) => {
+  if (path && path !== currentFilePath.value) {
+    await smartOpen(path)
+    await nextTick()
+  }
+  gotoLine(line, col)
+}
+
 // LSP 跨文件跳转定义：编辑器扩展派发 lsp:open-location，这里打开目标文件并定位
 const onLspOpenLocation = async (e: Event) => {
   const detail = (e as CustomEvent).detail as {path: string; line: number; character?: number}
@@ -2385,6 +2396,7 @@ useGlobalShortcuts(matchShortcut, shortcutDispatch, isOverlayOpen)
 const {init: initTheme, setTheme: setAppTheme} = useTheme()
 
 onMounted(async () => {
+  initDiagnosticsAggregator()
   await initTheme()
   await initialize()
   await buildLanguageRegistry()
diff --git a/src/components/DiagnosticsPanel.vue b/src/components/DiagnosticsPanel.vue
index b09448fe..b511dd1a 100644
--- a/src/components/DiagnosticsPanel.vue
+++ b/src/components/DiagnosticsPanel.vue
@@ -16,18 +16,25 @@
       </button>
     </div>
 
-    <!-- 列表 -->
+    <!-- 按文件分组的列表 -->
     <div class="flex-1 overflow-y-auto text-sm">
-      <div v-if="!diagnostics.length" class="px-4 py-6 text-center text-gray-400">
+      <div v-if="!groups.length" class="px-4 py-6 text-center text-gray-400">
         {{ t('diag.empty') }}
       </div>
-      <button v-for="(d, i) in diagnostics" :key="i"
-              class="flex w-full items-start gap-2 px-4 py-1.5 text-left hover:bg-gray-100 dark:hover:bg-gray-800 cursor-pointer"
-              @click="emit('go', d.line, d.col)">
-        <component :is="iconOf(d.severity)" class="w-4 h-4 mt-0.5 flex-shrink-0" :class="colorOf(d.severity)"/>
-        <span class="flex-1 text-gray-700 dark:text-gray-200 break-words">{{ d.message }}</span>
-        <span class="text-xs text-gray-400 flex-shrink-0 mt-0.5">[{{ d.line }}:{{ d.col }}]</span>
-      </button>
+      <template v-for="g in groups" :key="g.path">
+        <div class="sticky top-0 flex items-center gap-1.5 px-3 py-1 bg-gray-50 dark:bg-gray-800/80 border-b border-gray-100 dark:border-gray-700 text-xs text-gray-500 dark:text-gray-400">
+          <FileText class="w-3.5 h-3.5 text-gray-400 flex-shrink-0"/>
+          <span class="font-medium text-gray-700 dark:text-gray-200">{{ g.name }}</span>
+          <span class="ml-auto">{{ g.items.length }}</span>
+        </div>
+        <button v-for="(d, i) in g.items" :key="i"
+                class="flex w-full items-start gap-2 px-4 py-1.5 text-left hover:bg-gray-100 dark:hover:bg-gray-800 cursor-pointer"
+                @click="emit('open', g.path, d.line, d.col)">
+          <component :is="iconOf(d.severity)" class="w-4 h-4 mt-0.5 flex-shrink-0" :class="colorOf(d.severity)"/>
+          <span class="flex-1 text-gray-700 dark:text-gray-200 break-words">{{ d.message }}</span>
+          <span class="text-xs text-gray-400 flex-shrink-0 mt-0.5">[{{ d.line }}:{{ d.col }}]</span>
+        </button>
+      </template>
     </div>
   </div>
 </template>
@@ -35,18 +42,34 @@
 <script setup lang="ts">
 import {computed} from 'vue'
 import {useI18n} from 'vue-i18n'
-import {AlertTriangle, Info, X, XCircle} from 'lucide-vue-next'
-import {diagnostics} from '../editor/lspDiagnostics'
+import {AlertTriangle, FileText, Info, X, XCircle} from 'lucide-vue-next'
+import {allDiagnostics} from '../editor/allDiagnostics'
 
 const {t} = useI18n()
 
+const props = defineProps<{ currentPath?: string | null }>()
 const emit = defineEmits<{
-  go: [line: number, col: number]
+  open: [path: string, line: number, col: number]
   close: []
 }>()
 
-const errorCount = computed(() => diagnostics.value.filter(d => d.severity === 'error').length)
-const warningCount = computed(() => diagnostics.value.filter(d => d.severity === 'warning').length)
+const fileName = (p: string) => p.split(/[\\/]/).filter(Boolean).pop() || p
+
+// 分组：当前文件优先，其余按路径排序
+const groups = computed(() =>
+  Object.entries(allDiagnostics.value)
+    .filter(([, items]) => items.length)
+    .map(([path, items]) => ({path, name: fileName(path), items}))
+    .sort((a, b) => {
+      if (a.path === props.currentPath) return -1
+      if (b.path === props.currentPath) return 1
+      return a.path.localeCompare(b.path)
+    })
+)
+
+const all = computed(() => Object.values(allDiagnostics.value).flat())
+const errorCount = computed(() => all.value.filter(d => d.severity === 'error').length)
+const warningCount = computed(() => all.value.filter(d => d.severity === 'warning').length)
 
 const iconOf = (sev: string) => (sev === 'error' ? XCircle : sev === 'warning' ? AlertTriangle : Info)
 const colorOf = (sev: string) =>
diff --git a/src/editor/allDiagnostics.ts b/src/editor/allDiagnostics.ts
new file mode 100644
index 00000000..68f3c24e
--- /dev/null
+++ b/src/editor/allDiagnostics.ts
@@ -0,0 +1,71 @@
+// 跨文件诊断聚合：拦截 LSP 的 lsp:messages 原始流，按文件(URI)收集 publishDiagnostics，
+// 供「问题」面板跨文件展示。语言服务通常至少推送已打开文件的诊断，部分服务会推送整个工程。
+import {ref} from 'vue'
+import {listen} from '@tauri-apps/api/event'
+
+export interface FileDiag {
+  severity: string // 'error' | 'warning' | 'info' | 'hint'
+  message: string
+  line: number     // 1-based
+  col: number      // 1-based
+}
+
+// 绝对路径 → 诊断列表
+export const allDiagnostics = ref<Record<string, FileDiag[]>>({})
+
+const SEVERITY = ['', 'error', 'warning', 'info', 'hint']
+
+// file:// URI → 本地路径（兼容 Windows 的 file:///C:/…）
+const uriToPath = (uri: string): string => {
+  let p = uri.replace(/^file:\/\//, '')
+  try {
+    p = decodeURIComponent(p)
+  }
+  catch { /* 保留原样 */ }
+  if (/^\/[A-Za-z]:\//.test(p)) {
+    p = p.slice(1)
+  }
+  return p
+}
+
+let started = false
+
+export const initDiagnosticsAggregator = async () => {
+  if (started) {
+    return
+  }
+  started = true
+  await listen<{ language: string; messages: string[] }>('lsp:messages', (e) => {
+    for (const raw of e.payload.messages) {
+      let msg: any
+      try {
+        msg = JSON.parse(raw)
+      }
+      catch {
+        continue
+      }
+      if (msg?.method !== 'textDocument/publishDiagnostics' || !msg.params) {
+        continue
+      }
+      const path = uriToPath(msg.params.uri)
+      const items: FileDiag[] = (msg.params.diagnostics || []).map((d: any) => ({
+        severity: SEVERITY[d.severity] || 'info',
+        message: d.message,
+        line: (d.range?.start?.line ?? 0) + 1,
+        col: (d.range?.start?.character ?? 0) + 1
+      }))
+      const next = {...allDiagnostics.value}
+      if (items.length) {
+        next[path] = items
+      }
+      else {
+        delete next[path]
+      }
+      allDiagnostics.value = next
+    }
+  })
+}
+
+export const clearAllDiagnostics = () => {
+  allDiagnostics.value = {}
+}

From c322b11acdba9ab8946687f3fe85e62cea4bdf0d Mon Sep 17 00:00:00 2001
From: qianmoQ <shicheng@devlive.org>
Date: Fri, 3 Jul 2026 15:45:23 +0800
Subject: [PATCH 02/23] =?UTF-8?q?feat(editor):=20=E6=96=B0=E5=A2=9E?=
 =?UTF-8?q?=E3=80=8C=E6=B8=B2=E6=9F=93=E7=A9=BA=E7=99=BD=E5=AD=97=E7=AC=A6?=
 =?UTF-8?q?=E3=80=8D=E5=BC=80=E5=85=B3=EF=BC=88=E7=A9=BA=E6=A0=BC=C2=B7/?=
 =?UTF-8?q?=E5=88=B6=E8=A1=A8=E7=AC=A6=E2=86=92=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

用 @codemirror/view 内置 highlightWhitespace，可在设置开关；配置项前后端同步
（config.rs 结构体与默认值、types/app.ts），切换即时生效。
---
 src-tauri/src/config.rs                |  4 ++++
 src/components/setting/Editor.vue      |  4 ++++
 src/composables/useCodeMirrorEditor.ts | 11 ++++++++++-
 src/i18n/locales/en.json               |  1 +
 src/i18n/locales/zh-CN.json            |  1 +
 src/types/app.ts                       |  1 +
 6 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/src-tauri/src/config.rs b/src-tauri/src/config.rs
index a6705d25..a690fb6e 100644
--- a/src-tauri/src/config.rs
+++ b/src-tauri/src/config.rs
@@ -24,6 +24,7 @@ pub struct EditorConfig {
     pub show_sticky_scroll: Option<bool>,  // 是否启用粘性滚动
     pub word_wrap: Option<bool>,           // 是否自动换行
     pub show_indent_guides: Option<bool>,  // 是否显示缩进参考线
+    pub render_whitespace: Option<bool>,   // 是否渲染空白字符
     pub layout: Option<String>,            // 编辑器/控制台布局: horizontal | vertical | editor
     pub last_direction: Option<String>,    // 仅编辑器模式下控制台弹出方向: horizontal | vertical
     pub max_open_file_size: Option<u32>,   // 打开文件大小上限(MB)，超过则拒绝打开
@@ -77,6 +78,7 @@ impl Default for AppConfig {
                 show_sticky_scroll: Some(false),
                 word_wrap: Some(false),
                 show_indent_guides: Some(false),
+                render_whitespace: Some(false),
                 layout: Some("horizontal".to_string()),
                 last_direction: Some("horizontal".to_string()),
                 max_open_file_size: Some(5),
@@ -151,6 +153,7 @@ impl ConfigManager {
                                 show_sticky_scroll: Some(false),
                                 word_wrap: Some(false),
                                 show_indent_guides: Some(false),
+                                render_whitespace: Some(false),
                                 layout: Some("horizontal".to_string()),
                                 last_direction: Some("horizontal".to_string()),
                                 max_open_file_size: Some(5),
@@ -278,6 +281,7 @@ impl ConfigManager {
                 show_sticky_scroll: Some(false),
                 word_wrap: Some(false),
                 show_indent_guides: Some(false),
+                render_whitespace: Some(false),
                 layout: Some("horizontal".to_string()),
                 last_direction: Some("horizontal".to_string()),
                 max_open_file_size: Some(5),
diff --git a/src/components/setting/Editor.vue b/src/components/setting/Editor.vue
index efcf5645..0f038ea2 100644
--- a/src/components/setting/Editor.vue
+++ b/src/components/setting/Editor.vue
@@ -32,6 +32,10 @@
       <Switch v-model="editorConfig.show_indent_guides"/>
     </Label>
 
+    <Label :label="t('settings.editor.renderWhitespace')">
+      <Switch v-model="editorConfig.render_whitespace"/>
+    </Label>
+
     <Label :label="t('settings.editor.tabSize')">
       <Number v-model="editorConfig.tab_size" :min="1" :max="8" :placeholder="t('settings.editor.tabSize')"/>
     </Label>
diff --git a/src/composables/useCodeMirrorEditor.ts b/src/composables/useCodeMirrorEditor.ts
index f3334a62..10a1c95b 100644
--- a/src/composables/useCodeMirrorEditor.ts
+++ b/src/composables/useCodeMirrorEditor.ts
@@ -88,7 +88,7 @@ import {StreamLanguage} from '@codemirror/language'
 import {EditorConfig} from '../types/app.ts'
 import {useCodeMirrorFunctionHelp} from './useCodeMirrorFunctionHelp'
 import {useCodeMirrorSpaceOmission} from './useCodeMirrorSpaceOmission.ts'
-import {EditorView, keymap} from "@codemirror/view";
+import {EditorView, keymap, highlightWhitespace} from "@codemirror/view";
 import {showMinimap} from "@replit/codemirror-minimap";
 import {indentationMarkers} from "@replit/codemirror-indentation-markers";
 import {bookmarkExtension} from "../editor/bookmark";
@@ -707,6 +707,11 @@ export function useCodeMirrorEditor(props: Props)
         // 书签：行高亮，数据由 App 按当前文件 dispatch
         result.push(bookmarkExtension)
 
+        // 渲染空白字符：空格显示为 · 、制表符显示为 →，可在设置中开关
+        if (editorConfig.value?.render_whitespace) {
+            result.push(highlightWhitespace())
+        }
+
         // 断点 gutter + 调试悬停求值（仅可调试语言）
         if (dapSupportsLanguage(props.language)) {
             result.push(breakpointExtension((line) => debug.toggleBreakpoint(props.filePath ?? null, line)))
@@ -852,6 +857,10 @@ export function useCodeMirrorEditor(props: Props)
         await reRenderEditor()
     })
 
+    watch(() => editorConfig.value?.render_whitespace, async () => {
+        await reRenderEditor()
+    })
+
     return {
         // 状态
         isReady,
diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
index d32ed8f8..55edadd4 100644
--- a/src/i18n/locales/en.json
+++ b/src/i18n/locales/en.json
@@ -50,6 +50,7 @@
       "showStickyScroll": "Enable sticky scroll",
       "wordWrap": "Word wrap",
       "showIndentGuides": "Show indent guides",
+      "renderWhitespace": "Render whitespace",
       "tabSize": "Indent size",
       "font": "Editor font",
       "fontSize": "Font size",
diff --git a/src/i18n/locales/zh-CN.json b/src/i18n/locales/zh-CN.json
index f20ed598..9e6050f4 100644
--- a/src/i18n/locales/zh-CN.json
+++ b/src/i18n/locales/zh-CN.json
@@ -50,6 +50,7 @@
       "showStickyScroll": "启用粘性滚动 (sticky scroll)",
       "wordWrap": "自动换行",
       "showIndentGuides": "显示缩进参考线",
+      "renderWhitespace": "渲染空白字符",
       "tabSize": "缩进空格数",
       "font": "编辑器字体",
       "fontSize": "字体大小",
diff --git a/src/types/app.ts b/src/types/app.ts
index 0417eaf3..e560cf71 100644
--- a/src/types/app.ts
+++ b/src/types/app.ts
@@ -61,6 +61,7 @@ export interface EditorConfig
     show_sticky_scroll?: boolean
     word_wrap?: boolean
     show_indent_guides?: boolean
+    render_whitespace?: boolean
     layout?: LayoutMode
     last_direction?: SplitDirection
     max_open_file_size?: number

From d3cb43bac249fe8243e3b2bcfa4050014a069337 Mon Sep 17 00:00:00 2001
From: qianmoQ <shicheng@devlive.org>
Date: Sat, 4 Jul 2026 15:11:54 +0800
Subject: [PATCH 03/23] =?UTF-8?q?feat(run):=20=E8=BF=90=E8=A1=8C=E9=A2=84?=
 =?UTF-8?q?=E8=AE=BE=E7=AE=A1=E7=90=86=EF=BC=88=E5=A4=9A=E5=A5=97=E8=BF=90?=
 =?UTF-8?q?=E8=A1=8C=E8=BE=93=E5=85=A5=E4=B8=80=E9=94=AE=E5=88=87=E6=8D=A2?=
 =?UTF-8?q?=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

新增 useLaunchPresets（KV 存储）+ LaunchPresets 下拉：把当前参数/stdin/环境变量存为命名预设，
一键应用/删除；置于运行输入栏内。
---
 src/App.vue                         | 19 ++++++--
 src/components/LaunchPresets.vue    | 74 +++++++++++++++++++++++++++++
 src/composables/useLaunchPresets.ts | 40 ++++++++++++++++
 src/i18n/locales/en.json            |  8 ++++
 src/i18n/locales/zh-CN.json         |  8 ++++
 5 files changed, 145 insertions(+), 4 deletions(-)
 create mode 100644 src/components/LaunchPresets.vue
 create mode 100644 src/composables/useLaunchPresets.ts

diff --git a/src/App.vue b/src/App.vue
index 7ffd0eac..3a57081d 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -43,10 +43,13 @@
           <label class="text-[11px] text-gray-400 mb-0.5">{{ t('app.envVars') }}</label>
           <input v-model="runEnv" class="text-xs border border-gray-300 rounded px-2 py-1 font-mono focus:outline-none focus:border-blue-400" :placeholder="t('app.envVarsPlaceholder')"/>
         </div>
-        <label class="flex items-center gap-2 text-xs text-gray-500 dark:text-gray-400 cursor-pointer select-none">
-          <input v-model="watchMode" type="checkbox" class="cursor-pointer"/>
-          {{ t('app.watchMode') }}
-        </label>
+        <div class="flex items-center justify-between">
+          <label class="flex items-center gap-2 text-xs text-gray-500 dark:text-gray-400 cursor-pointer select-none">
+            <input v-model="watchMode" type="checkbox" class="cursor-pointer"/>
+            {{ t('app.watchMode') }}
+          </label>
+          <LaunchPresets :args="runArgs" :stdin="runStdin" :env="runEnv" @apply="applyLaunchPreset"/>
+        </div>
       </div>
     </div>
 
@@ -598,6 +601,7 @@ import AiAssistant from './components/AiAssistant.vue'
 import InlineGenerate from './components/InlineGenerate.vue'
 import SearchPanel from './components/SearchPanel.vue'
 import WorkspaceManager from './components/WorkspaceManager.vue'
+import LaunchPresets from './components/LaunchPresets.vue'
 import {useTheme, type AppTheme} from './composables/useTheme'
 import Modal from './ui/Modal.vue'
 import Button from './ui/Button.vue'
@@ -1889,6 +1893,13 @@ const showRunInput = ref(false)
 const runArgs = ref('')
 const runStdin = ref('')
 const runEnv = ref('')
+// 应用运行预设：填充参数/stdin/环境变量
+const applyLaunchPreset = (p: {args: string; stdin: string; env: string}) => {
+  runArgs.value = p.args
+  runStdin.value = p.stdin
+  runEnv.value = p.env
+  showRunInput.value = true
+}
 
 // 监听模式：保存后自动运行
 const watchMode = ref(kvGet('watch-mode') === 'true')
diff --git a/src/components/LaunchPresets.vue b/src/components/LaunchPresets.vue
new file mode 100644
index 00000000..bd23ad39
--- /dev/null
+++ b/src/components/LaunchPresets.vue
@@ -0,0 +1,74 @@
+<template>
+  <div class="relative inline-block">
+    <button class="flex items-center gap-1 text-xs text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 cursor-pointer"
+            @click.stop="open = !open">
+      <Rocket class="w-3 h-3"/>
+      {{ t('launch.presets') }}
+      <ChevronDown class="w-3 h-3"/>
+    </button>
+
+    <template v-if="open">
+      <div class="fixed inset-0 z-40" @click="open = false" @contextmenu.prevent="open = false"></div>
+      <div class="absolute left-0 top-full mt-1 z-50 w-64 bg-white dark:bg-gray-800 dark:text-gray-100 rounded-md shadow-lg border border-gray-200 dark:border-gray-700 py-1 text-xs">
+        <!-- 保存当前 -->
+        <div class="flex items-center gap-1.5 px-2 py-1.5 border-b border-gray-100 dark:border-gray-700">
+          <input v-model="name"
+                 class="flex-1 border border-gray-300 dark:border-gray-600 dark:bg-gray-900 rounded px-2 py-1 focus:outline-none focus:border-blue-500"
+                 :placeholder="t('launch.namePlaceholder')"
+                 @keydown.enter="saveCurrent"/>
+          <button class="px-2 py-1 rounded bg-brand-600 text-white hover:bg-brand-700 disabled:opacity-40 cursor-pointer whitespace-nowrap"
+                  :disabled="!name.trim()"
+                  @click="saveCurrent">
+            {{ t('launch.save') }}
+          </button>
+        </div>
+        <!-- 列表 -->
+        <div class="max-h-52 overflow-y-auto">
+          <div v-if="!presets.length" class="px-3 py-3 text-center text-gray-400">{{ t('launch.empty') }}</div>
+          <div v-for="p in presets" :key="p.name"
+               class="group flex items-center gap-1 px-2 py-1.5 hover:bg-gray-100 dark:hover:bg-gray-700">
+            <button class="flex-1 min-w-0 text-left cursor-pointer" @click="applyPreset(p)">
+              <div class="font-medium text-gray-800 dark:text-gray-100 truncate">{{ p.name }}</div>
+              <div class="text-[10px] text-gray-400 truncate font-mono">{{ summary(p) }}</div>
+            </button>
+            <button class="p-1 rounded text-gray-400 hover:text-red-500 opacity-0 group-hover:opacity-100 cursor-pointer"
+                    :title="t('launch.delete')"
+                    @click.stop="remove(p.name)">
+              <Trash2 class="w-3 h-3"/>
+            </button>
+          </div>
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {ref} from 'vue'
+import {useI18n} from 'vue-i18n'
+import {ChevronDown, Rocket, Trash2} from 'lucide-vue-next'
+import {useLaunchPresets, type LaunchPreset} from '../composables/useLaunchPresets'
+
+const {t} = useI18n()
+const props = defineProps<{ args: string; stdin: string; env: string }>()
+const emit = defineEmits<{ apply: [preset: LaunchPreset] }>()
+
+const {presets, save, remove} = useLaunchPresets()
+const open = ref(false)
+const name = ref('')
+
+const summary = (p: LaunchPreset) => [p.args, p.env].filter(Boolean).join(' · ') || t('launch.emptyInputs')
+
+const saveCurrent = () => {
+  if (!name.value.trim()) {
+    return
+  }
+  save(name.value, props.args, props.stdin, props.env)
+  name.value = ''
+}
+
+const applyPreset = (p: LaunchPreset) => {
+  emit('apply', p)
+  open.value = false
+}
+</script>
diff --git a/src/composables/useLaunchPresets.ts b/src/composables/useLaunchPresets.ts
new file mode 100644
index 00000000..3b121ee4
--- /dev/null
+++ b/src/composables/useLaunchPresets.ts
@@ -0,0 +1,40 @@
+// 运行预设（launch presets）：把一组运行输入（参数/stdin/环境变量）存为命名条目，便于切换。
+import {ref} from 'vue'
+import {kvGetJSON, kvSetJSON} from './useKvStore'
+
+export interface LaunchPreset {
+  name: string
+  args: string
+  stdin: string
+  env: string
+}
+
+const KEY = 'launch-presets'
+
+export function useLaunchPresets() {
+  const presets = ref<LaunchPreset[]>(kvGetJSON<LaunchPreset[]>(KEY, []))
+  const persist = () => kvSetJSON(KEY, presets.value)
+
+  const save = (name: string, args: string, stdin: string, env: string) => {
+    const n = name.trim()
+    if (!n) {
+      return
+    }
+    const entry: LaunchPreset = {name: n, args, stdin, env}
+    const idx = presets.value.findIndex(p => p.name === n)
+    if (idx >= 0) {
+      presets.value = presets.value.map((p, i) => (i === idx ? entry : p))
+    }
+    else {
+      presets.value = [...presets.value, entry]
+    }
+    persist()
+  }
+
+  const remove = (name: string) => {
+    presets.value = presets.value.filter(p => p.name !== name)
+    persist()
+  }
+
+  return {presets, save, remove}
+}
diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
index 55edadd4..fa7b1685 100644
--- a/src/i18n/locales/en.json
+++ b/src/i18n/locales/en.json
@@ -825,6 +825,14 @@
     "noOutput": "No output",
     "noOutputHint": "Try running some code"
   },
+  "launch": {
+    "presets": "Run presets",
+    "namePlaceholder": "Preset name…",
+    "save": "Save",
+    "empty": "No run presets yet",
+    "emptyInputs": "(empty inputs)",
+    "delete": "Delete"
+  },
   "workspaces": {
     "title": "Named workspaces",
     "namePlaceholder": "Name this workspace…",
diff --git a/src/i18n/locales/zh-CN.json b/src/i18n/locales/zh-CN.json
index 9e6050f4..aff88d4d 100644
--- a/src/i18n/locales/zh-CN.json
+++ b/src/i18n/locales/zh-CN.json
@@ -825,6 +825,14 @@
     "noOutput": "没有输出",
     "noOutputHint": "可以尝试运行一些代码"
   },
+  "launch": {
+    "presets": "运行预设",
+    "namePlaceholder": "预设名称…",
+    "save": "保存",
+    "empty": "还没有运行预设",
+    "emptyInputs": "（空输入）",
+    "delete": "删除"
+  },
   "workspaces": {
     "title": "命名工作区",
     "namePlaceholder": "为当前工作区命名…",

From e4ebf1c3a2ba2711df871780aa88df40e9708364 Mon Sep 17 00:00:00 2001
From: qianmoQ <shicheng@devlive.org>
Date: Sat, 4 Jul 2026 15:21:14 +0800
Subject: [PATCH 04/23] =?UTF-8?q?feat(run):=20=E8=BF=90=E8=A1=8C=E8=BE=93?=
 =?UTF-8?q?=E5=87=BA=E6=94=AF=E6=8C=81=E8=BF=87=E6=BB=A4=EF=BC=88=E4=BB=85?=
 =?UTF-8?q?=E6=98=BE=E7=A4=BA=E5=90=AB=E5=85=B3=E9=94=AE=E5=AD=97=E7=9A=84?=
 =?UTF-8?q?=E8=A1=8C=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

控制台头部新增过滤开关，展开后输入关键字仅渲染匹配行并显示行数；
不影响原始输出与复制。
---
 src/components/ConsoleOutput.vue | 43 +++++++++++++++++++++++++++++---
 src/i18n/locales/en.json         |  3 +++
 src/i18n/locales/zh-CN.json      |  3 +++
 3 files changed, 46 insertions(+), 3 deletions(-)

diff --git a/src/components/ConsoleOutput.vue b/src/components/ConsoleOutput.vue
index be76d1e5..a6491e37 100644
--- a/src/components/ConsoleOutput.vue
+++ b/src/components/ConsoleOutput.vue
@@ -12,6 +12,15 @@
       <div class="flex items-center space-x-3">
         <span v-if="isCopied" class="text-xs text-gray-400">{{ t('console.copied') }}</span>
 
+        <!-- 过滤按钮 -->
+        <button v-if="output"
+                @click="showFilter = !showFilter"
+                class="text-gray-400 hover:text-white transition-colors duration-200 p-1 rounded hover:bg-gray-700 cursor-pointer"
+                :class="{ 'text-white bg-gray-700': showFilter }"
+                :title="t('console.filterTitle')">
+          <Search class="w-3 h-3"/>
+        </button>
+
         <!-- 复制按钮 -->
         <button v-if="output && !isRunning"
                 @click="copyOutput"
@@ -35,6 +44,15 @@
       </div>
     </div>
 
+    <!-- 过滤栏：仅显示包含关键字的行 -->
+    <div v-if="showFilter && output" class="px-2 py-1 border-b border-gray-700 flex items-center gap-2">
+      <Search class="w-3 h-3 text-gray-500 flex-shrink-0"/>
+      <input v-model="filterQuery"
+             class="flex-1 bg-transparent text-xs text-gray-200 placeholder-gray-600 focus:outline-none"
+             :placeholder="t('console.filterPlaceholder')"/>
+      <span v-if="filterQuery.trim()" class="text-[10px] text-gray-500 flex-shrink-0">{{ t('console.filterCount', { n: matchCount }) }}</span>
+    </div>
+
     <div class="flex-1 overflow-auto" ref="outputContainer">
       <div v-if="isRunning && !output" class="p-4 flex items-center space-x-2 text-yellow-400">
         <Loader class="w-4 h-4 animate-spin"/>
@@ -63,7 +81,7 @@
 <script setup lang="ts">
 import { computed, nextTick, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { Check, Clock, Copy, Loader, Terminal, Trash2 } from 'lucide-vue-next'
+import { Check, Clock, Copy, Loader, Search, Terminal, Trash2 } from 'lucide-vue-next'
 import { ansiToHtml } from '../utils/ansi'
 
 const props = defineProps<{
@@ -81,12 +99,31 @@ const {t} = useI18n()
 const isCopied = ref(false)
 const outputContainer = ref<HTMLElement>()
 
+// 输出过滤：仅显示包含关键字的行
+const showFilter = ref(false)
+const filterQuery = ref('')
+const filteredText = computed(() => {
+  const q = filterQuery.value.trim().toLowerCase()
+  const text = props.output || ''
+  if (!showFilter.value || !q) {
+    return text
+  }
+  return text.split('\n').filter(l => l.toLowerCase().includes(q)).join('\n')
+})
+const matchCount = computed(() => {
+  const q = filterQuery.value.trim()
+  if (!q) {
+    return 0
+  }
+  return filteredText.value ? filteredText.value.split('\n').length : 0
+})
+
 // 动态切换图标
 const copyIcon = computed(() => isCopied.value ? Check : Copy)
 
 // 根据执行状态和成功状态确定输出样式
-// 渲染 ANSI 颜色（自带 HTML 转义）
-const renderedOutput = computed(() => ansiToHtml(props.output || ''))
+// 渲染 ANSI 颜色（自带 HTML 转义）；过滤开启时仅渲染匹配行
+const renderedOutput = computed(() => ansiToHtml(filteredText.value))
 
 const getOutputClass = () => {
   if (props.isRunning) {
diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
index fa7b1685..eecac9c1 100644
--- a/src/i18n/locales/en.json
+++ b/src/i18n/locales/en.json
@@ -819,6 +819,9 @@
     "copyFailed": "Copy failed",
     "copyTitle": "Copy output",
     "clearTitle": "Clear console",
+    "filterTitle": "Filter output",
+    "filterPlaceholder": "Filter lines containing…",
+    "filterCount": "{n} lines",
     "ms": "{n} ms",
     "executing": "Running code...",
     "programRunning": "Program is running...",
diff --git a/src/i18n/locales/zh-CN.json b/src/i18n/locales/zh-CN.json
index aff88d4d..c6a70b71 100644
--- a/src/i18n/locales/zh-CN.json
+++ b/src/i18n/locales/zh-CN.json
@@ -819,6 +819,9 @@
     "copyFailed": "复制失败",
     "copyTitle": "复制输出内容",
     "clearTitle": "清空控制台",
+    "filterTitle": "过滤输出",
+    "filterPlaceholder": "过滤包含关键字的行…",
+    "filterCount": "{n} 行",
     "ms": "{n} 毫秒",
     "executing": "执行代码中...",
     "programRunning": "程序正在运行...",

From 26fc07053ee8afe2a31e41c597b7ab47f6f428d2 Mon Sep 17 00:00:00 2001
From: qianmoQ <shicheng@devlive.org>
Date: Sun, 5 Jul 2026 07:58:10 +0800
Subject: [PATCH 05/23] =?UTF-8?q?feat(run):=20=E5=90=AF=E5=8A=A8=20REPL?=
 =?UTF-8?q?=EF=BC=88=E4=BA=A4=E4=BA=92=E5=BC=8F=E8=A7=A3=E9=87=8A=E5=99=A8?=
 =?UTF-8?q?=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

命令面板「启动 REPL」按当前语言在集成终端启动交互解释器（python3/node/irb/iex 等），
配合「发送选区到终端」即可交互式运行代码。
---
 src/App.vue                 | 18 ++++++++++++++++++
 src/i18n/locales/en.json    |  3 +++
 src/i18n/locales/zh-CN.json |  3 +++
 3 files changed, 24 insertions(+)

diff --git a/src/App.vue b/src/App.vue
index 3a57081d..9a015586 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1403,6 +1403,23 @@ const runTask = async (command: string) => {
   terminalRef.value?.runCommand(command)
 }
 
+// B4：启动当前语言的交互式解释器(REPL)，配合「发送选区到终端」做交互开发
+const REPL_CMDS: Record<string, string> = {
+  python: 'python3', javascript: 'node', nodejs: 'node', typescript: 'node',
+  ruby: 'irb', php: 'php -a', lua: 'lua', r: 'R', scala: 'scala',
+  clojure: 'clj', groovy: 'groovy', elixir: 'iex', erlang: 'erl', perl: 'perl -de1'
+}
+const startRepl = () => {
+  const base = (currentLanguage.value || '').toLowerCase().replace(/\d+$/, '')
+  const cmd = REPL_CMDS[base]
+  if (!cmd) {
+    toast.info(t('app.replUnsupported'))
+    return
+  }
+  runTask(cmd)
+  toast.success(t('app.replStarted', {cmd}))
+}
+
 // B1-P3：开始调试当前文件（需已保存 + 语言可调试）
 const startDebug = async () => {
   const path = currentFilePath.value
@@ -2365,6 +2382,7 @@ const paletteCommands = computed<PaletteCommand[]>(() => [
   {id: 'runTests', label: t('command.runTests'), icon: ListChecks, run: () => runTests()},
   {id: 'startDebug', label: t('command.startDebug'), icon: Play, run: () => startDebug()},
   {id: 'sendToTerminal', label: t('command.sendToTerminal'), icon: TerminalIcon, run: () => sendToTerminal()},
+  {id: 'startRepl', label: t('command.startRepl'), icon: TerminalIcon, run: () => startRepl()},
   {id: 'revealInTree', label: t('command.revealInTree'), icon: FolderOpen, run: () => revealInTree()},
   {id: 'copyPermalink', label: t('command.copyPermalink'), icon: GitBranch, run: () => copyPermalink()},
   {id: 'openPermalink', label: t('command.openPermalink'), icon: GitBranch, run: () => openPermalink()},
diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
index eecac9c1..b1753e92 100644
--- a/src/i18n/locales/en.json
+++ b/src/i18n/locales/en.json
@@ -699,6 +699,7 @@
     "runTests": "Run tests (auto-detect)",
     "startDebug": "Debug current file",
     "sendToTerminal": "Send selection to terminal",
+    "startRepl": "Start REPL (interactive interpreter)",
     "reopenClosed": "Reopen closed tab",
     "revealInTree": "Reveal in file tree",
     "foldAll": "Fold all",
@@ -1372,6 +1373,8 @@
     "indentConverted": "Indentation converted",
     "noMatchingBracket": "No matching bracket at cursor",
     "noDiagnostics": "No diagnostics in the current file",
+    "replUnsupported": "No built-in REPL for the current language",
+    "replStarted": "REPL started: {cmd}",
     "sqlFormatted": "SQL formatted",
     "sqlFormatFailed": "SQL format failed: ",
     "sqlFormatOnlySql": "Only available when editing SQL",
diff --git a/src/i18n/locales/zh-CN.json b/src/i18n/locales/zh-CN.json
index c6a70b71..4b1f25e9 100644
--- a/src/i18n/locales/zh-CN.json
+++ b/src/i18n/locales/zh-CN.json
@@ -699,6 +699,7 @@
     "runTests": "运行测试（自动识别）",
     "startDebug": "开始调试当前文件",
     "sendToTerminal": "发送选区到终端",
+    "startRepl": "启动 REPL（交互式解释器）",
     "reopenClosed": "重新打开已关闭标签",
     "revealInTree": "在文件树中定位",
     "foldAll": "折叠全部代码",
@@ -1372,6 +1373,8 @@
     "indentConverted": "已转换缩进",
     "noMatchingBracket": "光标处没有可匹配的括号",
     "noDiagnostics": "当前文件没有诊断问题",
+    "replUnsupported": "当前语言暂无内置 REPL",
+    "replStarted": "已启动 REPL：{cmd}",
     "sqlFormatted": "SQL 已格式化",
     "sqlFormatFailed": "SQL 格式化失败: ",
     "sqlFormatOnlySql": "仅在 SQL 编辑时可用",

From d530ce2da257a29675da149166292f52beebaf6c Mon Sep 17 00:00:00 2001
From: qianmoQ <shicheng@devlive.org>
Date: Sun, 5 Jul 2026 08:04:54 +0800
Subject: [PATCH 06/23] =?UTF-8?q?feat(ai):=20AI=20=E7=BF=BB=E8=AF=91?=
 =?UTF-8?q?=E6=B3=A8=E9=87=8A/=E6=96=87=E6=A1=A3=EF=BC=88=E4=B8=AD?=
 =?UTF-8?q?=E8=8B=B1=E4=BA=92=E8=AF=91=EF=BC=8C=E4=BF=9D=E7=95=99=E4=BB=A3?=
 =?UTF-8?q?=E7=A0=81=E7=BB=93=E6=9E=84=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                     | 6 ++++--
 src/components/AiCodeAction.vue | 6 ++++--
 src/i18n/locales/en.json        | 3 ++-
 src/i18n/locales/zh-CN.json     | 4 +++-
 4 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 9a015586..035293cc 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -471,6 +471,7 @@
         <button class="w-full text-left px-3 py-1.5 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer" @click="aiCodeAction('refactor')">{{ t('aiCode.title.refactor') }}</button>
         <button class="w-full text-left px-3 py-1.5 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer" @click="aiCodeAction('test')">{{ t('aiCode.title.test') }}</button>
         <button class="w-full text-left px-3 py-1.5 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer" @click="aiCodeAction('doc')">{{ t('aiCode.title.doc') }}</button>
+        <button class="w-full text-left px-3 py-1.5 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer" @click="aiCodeAction('translate')">{{ t('aiCode.title.translate') }}</button>
         <button v-if="canBlame || editorCtx.lsp" class="w-full text-left px-3 py-1.5 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer" @click="aiFixDiagnostics">{{ t('aiCode.title.fix') }}</button>
         <div class="border-t border-gray-100 dark:border-gray-700 my-1"></div>
         <button class="w-full text-left px-3 py-1.5 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer" @click="sendToTerminal">
@@ -1519,7 +1520,7 @@ const runTests = async () => {
 }
 
 // C2：对选区（无选区则整篇）执行 AI 操作：解释 / 重构 / 生成测试
-const aiCodeCtx = ref<{action: 'explain' | 'refactor' | 'test' | 'fix' | 'doc'; code: string; from: number; to: number; diagnostics?: string} | null>(null)
+const aiCodeCtx = ref<{action: 'explain' | 'refactor' | 'test' | 'fix' | 'doc' | 'translate'; code: string; from: number; to: number; diagnostics?: string} | null>(null)
 // AI 修复诊断：把当前文件的 LSP 诊断交给 AI 修复整篇
 const aiFixDiagnostics = () => {
   closeEditorCtx()
@@ -1534,7 +1535,7 @@ const aiFixDiagnostics = () => {
   const diagText = diagnostics.value.map(d => `[${d.severity}] L${d.line}:${d.col} ${d.message}`).join('\n')
   aiCodeCtx.value = {action: 'fix', code: view.state.doc.toString(), from: 0, to: view.state.doc.length, diagnostics: diagText}
 }
-const aiCodeAction = (action: 'explain' | 'refactor' | 'test' | 'doc') => {
+const aiCodeAction = (action: 'explain' | 'refactor' | 'test' | 'doc' | 'translate') => {
   closeEditorCtx()
   const view = editorView.value
   if (!view) {
@@ -2372,6 +2373,7 @@ const paletteCommands = computed<PaletteCommand[]>(() => [
   {id: 'formatWithAi', label: t('command.formatWithAi'), icon: Sparkles, run: () => formatWithAi()},
   {id: 'aiFixDiagnostics', label: t('command.aiFixDiagnostics'), icon: Sparkles, run: () => aiFixDiagnostics()},
   {id: 'aiGenDoc', label: t('command.aiGenDoc'), icon: Sparkles, run: () => aiCodeAction('doc')},
+  {id: 'aiTranslate', label: t('command.aiTranslate'), icon: Sparkles, run: () => aiCodeAction('translate')},
   {id: 'history', label: t('command.history'), icon: History, run: () => { showHistory.value = true }},
   {id: 'diff', label: t('command.diff'), icon: GitCompare, run: () => openDiff()},
   {id: 'compareClipboard', label: t('command.compareClipboard'), icon: GitCompare, run: () => compareWithClipboard()},
diff --git a/src/components/AiCodeAction.vue b/src/components/AiCodeAction.vue
index 59dadf45..bae6710e 100644
--- a/src/components/AiCodeAction.vue
+++ b/src/components/AiCodeAction.vue
@@ -22,7 +22,7 @@
       <div class="flex items-center justify-end gap-2 px-4 py-2.5 border-t border-gray-200 dark:border-gray-700 flex-shrink-0">
         <button class="text-xs px-3 py-1.5 rounded text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer" @click="emit('close')">{{ t('aiCode.close') }}</button>
         <button v-if="!loading && result" class="text-xs px-3 py-1.5 rounded text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer" @click="copy">{{ t('aiCode.copy') }}</button>
-        <button v-if="!loading && result && (action === 'refactor' || action === 'fix')" class="text-xs px-3 py-1.5 rounded bg-blue-500 text-white hover:bg-blue-600 cursor-pointer" @click="apply('replace')">{{ t('aiCode.replace') }}</button>
+        <button v-if="!loading && result && (action === 'refactor' || action === 'fix' || action === 'translate')" class="text-xs px-3 py-1.5 rounded bg-blue-500 text-white hover:bg-blue-600 cursor-pointer" @click="apply('replace')">{{ t('aiCode.replace') }}</button>
         <button v-if="!loading && result && (action === 'test' || action === 'doc')" class="text-xs px-3 py-1.5 rounded bg-blue-500 text-white hover:bg-blue-600 cursor-pointer" @click="apply('insert')">{{ t('aiCode.insert') }}</button>
       </div>
     </div>
@@ -37,7 +37,7 @@ import {useI18n} from 'vue-i18n'
 import {useAiConfig} from '../composables/useAiConfig'
 import {useToast} from '../plugins/toast'
 
-const props = defineProps<{ language: string; code: string; action: 'explain' | 'refactor' | 'test' | 'fix' | 'doc'; diagnostics?: string }>()
+const props = defineProps<{ language: string; code: string; action: 'explain' | 'refactor' | 'test' | 'fix' | 'doc' | 'translate'; diagnostics?: string }>()
 const emit = defineEmits<{ replace: [code: string]; insert: [code: string]; close: [] }>()
 
 const toast = useToast()
@@ -66,6 +66,8 @@ const systemFor = (): string => {
       return `你是代码助手。修复给定 ${lang} 代码中的错误与警告（用户消息附带诊断信息），保持其余行为不变。只输出修复后的完整代码，不要解释，不要使用 Markdown 代码块标记。`
     case 'doc':
       return `你是代码助手。为给定的 ${lang} 代码生成规范的文档注释（如 JSDoc/docstring/rustdoc 等，与语言习惯一致）。只输出注释块本身，不要重复原代码，不要解释，不要使用 Markdown 代码块标记。`
+    case 'translate':
+      return `你是翻译助手。把给定内容里的自然语言（注释、文档、字符串描述）在中文与英文之间互译：中文译为英文，英文译为中文。严格保留代码结构、标识符、符号与缩进不变，只翻译其中的自然语言部分。只输出翻译后的完整内容，不要解释，不要使用 Markdown 代码块标记。`
   }
 }
 
diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
index b1753e92..3e5326c5 100644
--- a/src/i18n/locales/en.json
+++ b/src/i18n/locales/en.json
@@ -1162,7 +1162,8 @@
       "refactor": "AI: Refactor code",
       "test": "AI: Generate tests",
       "fix": "AI: Fix diagnostics",
-      "doc": "AI: Generate doc comment"
+      "doc": "AI: Generate doc comment",
+      "translate": "AI: Translate comments/docs"
     },
     "thinking": "AI is thinking…",
     "replace": "Replace selection",
diff --git a/src/i18n/locales/zh-CN.json b/src/i18n/locales/zh-CN.json
index 4b1f25e9..951e452c 100644
--- a/src/i18n/locales/zh-CN.json
+++ b/src/i18n/locales/zh-CN.json
@@ -690,6 +690,7 @@
     "formatWithAi": "AI 格式化代码",
     "aiFixDiagnostics": "AI 修复诊断",
     "aiGenDoc": "AI 生成文档注释",
+    "aiTranslate": "AI 翻译注释/文档",
     "history": "执行历史",
     "diff": "差异对比（当前 vs 已保存）",
     "preview": "实时预览（Markdown / HTML）",
@@ -1162,7 +1163,8 @@
       "refactor": "AI 重构代码",
       "test": "AI 生成测试",
       "fix": "AI 修复诊断",
-      "doc": "AI 生成文档注释"
+      "doc": "AI 生成文档注释",
+      "translate": "AI 翻译注释/文档"
     },
     "thinking": "AI 思考中…",
     "replace": "替换选区",

From 6e07e405582262b382522482349d265a20b854e3 Mon Sep 17 00:00:00 2001
From: qianmoQ <shicheng@devlive.org>
Date: Sun, 5 Jul 2026 08:13:24 +0800
Subject: [PATCH 07/23] =?UTF-8?q?feat(ai):=20AI=20=E5=A4=9A=E6=96=87?=
 =?UTF-8?q?=E4=BB=B6=E7=BC=96=E8=BE=91=EF=BC=88=E8=B7=A8=E5=B7=B2=E6=89=93?=
 =?UTF-8?q?=E5=BC=80=E6=96=87=E4=BB=B6=E7=94=9F=E6=88=90=E5=B9=B6=E9=80=90?=
 =?UTF-8?q?=E4=B8=AA=E5=AE=A1=E6=9F=A5=E5=BA=94=E7=94=A8=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                    |  53 ++++++++
 src/components/AiMultiEdit.vue | 240 +++++++++++++++++++++++++++++++++
 src/i18n/locales/en.json       |  18 +++
 src/i18n/locales/zh-CN.json    |  17 +++
 4 files changed, 328 insertions(+)
 create mode 100644 src/components/AiMultiEdit.vue

diff --git a/src/App.vue b/src/App.vue
index 035293cc..4fb0e58f 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -408,6 +408,9 @@
     <AiCodeAction v-if="aiCodeCtx" :language="currentLanguage" :code="aiCodeCtx.code" :action="aiCodeCtx.action" :diagnostics="aiCodeCtx.diagnostics"
                   @replace="onAiReplace" @insert="onAiInsert" @close="aiCodeCtx = null"/>
 
+    <!-- AI 多文件编辑（跨已打开文件） -->
+    <AiMultiEdit v-if="showAiMultiEdit" :files="gatherOpenFiles()" @apply="onAiMultiApply" @close="showAiMultiEdit = false"/>
+
     <!-- .gitignore 模板 -->
     <GitIgnoreTemplates v-if="showGitignore && rootDir" :root-dir="rootDir" @close="showGitignore = false"/>
 
@@ -582,6 +585,7 @@ import GitIgnoreTemplates from './components/GitIgnoreTemplates.vue'
 import DebugToolbar from './components/DebugToolbar.vue'
 import DebugPanel from './components/DebugPanel.vue'
 import AiCodeAction from './components/AiCodeAction.vue'
+import AiMultiEdit from './components/AiMultiEdit.vue'
 import ErDiagram from './components/ErDiagram.vue'
 import TxnControl from './components/TxnControl.vue'
 import {useSqlTxn} from './composables/useSqlTxn'
@@ -1699,6 +1703,54 @@ const pickCodeAction = async (action: any) => {
   }
 }
 
+// ===== AI 多文件编辑（跨已打开文件） =====
+const showAiMultiEdit = ref(false)
+// 收集已打开、且已关联磁盘路径的文件及其当前内容（活动标签取实时内容）
+const gatherOpenFiles = () =>
+  editorTabs.value
+    .filter(tab => tab.filePath)
+    .map(tab => ({
+      path: tab.filePath as string,
+      name: (tab.filePath as string).split(/[\\/]/).pop() || (tab.filePath as string),
+      content: tab.id === activeTabId.value ? code.value : (tab.code ?? '')
+    }))
+const openAiMultiEdit = () => {
+  if (gatherOpenFiles().length === 0) {
+    toast.info(t('app.aiMultiNeedFiles'))
+    return
+  }
+  showAiMultiEdit.value = true
+}
+// 应用 AI 的多文件编辑：写回磁盘并同步内存中的标签内容
+const onAiMultiApply = async (edits: { path: string; content: string }[]) => {
+  let n = 0
+  for (const e of edits) {
+    try {
+      await invoke('write_file_text', {path: e.path, content: e.content})
+      n++
+      for (const tab of editorTabs.value) {
+        if (tab.filePath !== e.path) {
+          continue
+        }
+        if (tab.id === activeTabId.value) {
+          code.value = e.content
+          savedContent.value = e.content
+        }
+        else {
+          tab.code = e.content
+          tab.savedContent = e.content
+        }
+      }
+    }
+    catch (err) {
+      toast.error(t('app.aiMultiWriteFailed', {name: e.path.split(/[\\/]/).pop()}) + err)
+    }
+  }
+  if (n > 0) {
+    toast.success(t('app.aiMultiApplied', {n}))
+  }
+}
+
 // 全局替换后：刷新涉及到的已打开标签（保留有未保存修改的标签）
 const reloadAffectedFiles = async (paths: string[]) => {
   const set = new Set(paths)
@@ -2374,6 +2426,7 @@ const paletteCommands = computed<PaletteCommand[]>(() => [
   {id: 'aiFixDiagnostics', label: t('command.aiFixDiagnostics'), icon: Sparkles, run: () => aiFixDiagnostics()},
   {id: 'aiGenDoc', label: t('command.aiGenDoc'), icon: Sparkles, run: () => aiCodeAction('doc')},
   {id: 'aiTranslate', label: t('command.aiTranslate'), icon: Sparkles, run: () => aiCodeAction('translate')},
+  {id: 'aiMultiEdit', label: t('command.aiMultiEdit'), icon: Sparkles, run: openAiMultiEdit},
   {id: 'history', label: t('command.history'), icon: History, run: () => { showHistory.value = true }},
   {id: 'diff', label: t('command.diff'), icon: GitCompare, run: () => openDiff()},
   {id: 'compareClipboard', label: t('command.compareClipboard'), icon: GitCompare, run: () => compareWithClipboard()},
diff --git a/src/components/AiMultiEdit.vue b/src/components/AiMultiEdit.vue
new file mode 100644
index 00000000..0a9839f9
--- /dev/null
+++ b/src/components/AiMultiEdit.vue
@@ -0,0 +1,240 @@
+<template>
+  <div class="fixed inset-0 z-50 flex items-start justify-center pt-16 px-6 pb-6" @click="emit('close')">
+    <div class="w-full max-w-[980px] max-h-full bg-white dark:bg-gray-900 dark:text-gray-100 rounded-lg shadow-2xl border border-gray-200 dark:border-gray-700 overflow-hidden flex flex-col"
+         @click.stop>
+      <!-- 标题栏 -->
+      <div class="flex items-center justify-between px-4 py-2.5 border-b border-gray-200 dark:border-gray-700 flex-shrink-0">
+        <div class="flex items-center gap-2 text-sm font-medium text-gray-700 dark:text-gray-200">
+          <Sparkles class="w-4 h-4 text-purple-500"/>
+          <span>{{ t('aiMulti.title') }}</span>
+        </div>
+        <button class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 cursor-pointer" @click="emit('close')">
+          <X class="w-4 h-4"/>
+        </button>
+      </div>
+
+      <!-- 输入阶段：指令 + 选择参与文件 -->
+      <template v-if="stage === 'input'">
+        <div class="p-4 flex flex-col gap-3 overflow-auto">
+          <textarea v-model="instruction"
+                    rows="3"
+                    :placeholder="t('aiMulti.instructionPlaceholder')"
+                    class="w-full text-sm rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 px-3 py-2 resize-none focus:outline-none focus:ring-1 focus:ring-blue-400"></textarea>
+          <div>
+            <div class="text-xs text-gray-500 mb-1.5">{{ t('aiMulti.contextFiles', { n: selectedFiles.length }) }}</div>
+            <div class="max-h-[220px] overflow-auto rounded border border-gray-200 dark:border-gray-700 divide-y divide-gray-100 dark:divide-gray-800">
+              <label v-for="f in files" :key="f.path"
+                     class="flex items-center gap-2 px-3 py-1.5 text-xs cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800">
+                <input type="checkbox" :value="f.path" v-model="picked" class="cursor-pointer"/>
+                <span class="font-medium">{{ f.name }}</span>
+                <span class="text-gray-400 truncate">{{ f.path }}</span>
+              </label>
+            </div>
+          </div>
+        </div>
+        <div class="flex items-center justify-end gap-2 px-4 py-2.5 border-t border-gray-200 dark:border-gray-700 flex-shrink-0">
+          <button class="text-xs px-3 py-1.5 rounded text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer" @click="emit('close')">{{ t('aiMulti.cancel') }}</button>
+          <button :disabled="!instruction.trim() || selectedFiles.length === 0 || loading"
+                  class="text-xs px-3 py-1.5 rounded bg-blue-500 text-white hover:bg-blue-600 disabled:opacity-40 disabled:cursor-not-allowed cursor-pointer"
+                  @click="generate">
+            <span v-if="loading" class="inline-flex items-center gap-1"><Sparkles class="w-3 h-3 animate-pulse"/>{{ t('aiMulti.thinking') }}</span>
+            <span v-else>{{ t('aiMulti.generate') }}</span>
+          </button>
+        </div>
+      </template>
+
+      <!-- 审查阶段：逐文件差异 + 勾选应用 -->
+      <template v-else>
+        <div class="flex-1 overflow-auto p-4 flex flex-col gap-3">
+          <div v-if="proposals.length === 0" class="text-center text-sm text-gray-400 py-10">{{ t('aiMulti.noChange') }}</div>
+          <div v-for="p in proposals" :key="p.path" class="rounded border border-gray-200 dark:border-gray-700 overflow-hidden">
+            <div class="flex items-center gap-2 px-3 py-2 bg-gray-50 dark:bg-gray-800 text-xs">
+              <input type="checkbox" :value="p.path" v-model="applyPicked" class="cursor-pointer"/>
+              <span class="font-medium">{{ p.name }}</span>
+              <span class="text-gray-400 truncate flex-1">{{ p.path }}</span>
+              <span class="text-green-600 dark:text-green-400">+{{ p.added }}</span>
+              <span class="text-red-600 dark:text-red-400">−{{ p.removed }}</span>
+              <button class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 cursor-pointer" @click="toggle(p.path)">
+                <component :is="expanded.has(p.path) ? ChevronDown : ChevronRight" class="w-4 h-4"/>
+              </button>
+            </div>
+            <div v-if="expanded.has(p.path)" class="font-mono text-xs leading-5 max-h-[300px] overflow-auto">
+              <div v-for="(row, i) in p.rows" :key="i" class="flex" :class="rowClass(row.type)">
+                <span class="w-10 flex-shrink-0 text-right pr-2 select-none text-gray-400 dark:text-gray-500">{{ row.oldNo || '' }}</span>
+                <span class="w-10 flex-shrink-0 text-right pr-2 select-none text-gray-400 dark:text-gray-500">{{ row.newNo || '' }}</span>
+                <span class="w-4 flex-shrink-0 select-none text-center">{{ sign(row.type) }}</span>
+                <span class="flex-1 whitespace-pre-wrap break-all pr-3">{{ row.text }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="flex items-center justify-between gap-2 px-4 py-2.5 border-t border-gray-200 dark:border-gray-700 flex-shrink-0">
+          <button class="text-xs px-3 py-1.5 rounded text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer" @click="stage = 'input'">{{ t('aiMulti.back') }}</button>
+          <div class="flex items-center gap-2">
+            <button class="text-xs px-3 py-1.5 rounded text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer" @click="emit('close')">{{ t('aiMulti.cancel') }}</button>
+            <button :disabled="applyPicked.length === 0"
+                    class="text-xs px-3 py-1.5 rounded bg-blue-500 text-white hover:bg-blue-600 disabled:opacity-40 disabled:cursor-not-allowed cursor-pointer"
+                    @click="apply">
+              {{ t('aiMulti.apply', { n: applyPicked.length }) }}
+            </button>
+          </div>
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {computed, ref} from 'vue'
+import {invoke} from '@tauri-apps/api/core'
+import {ChevronDown, ChevronRight, Sparkles, X} from 'lucide-vue-next'
+import {useI18n} from 'vue-i18n'
+import {useAiConfig} from '../composables/useAiConfig'
+import {useToast} from '../plugins/toast'
+
+interface InputFile { path: string; name: string; content: string }
+interface DiffRow { type: 'same' | 'add' | 'del'; text: string; oldNo?: number; newNo?: number }
+interface Proposal { path: string; name: string; original: string; modified: string; rows: DiffRow[]; added: number; removed: number }
+
+const props = defineProps<{ files: InputFile[] }>()
+const emit = defineEmits<{ apply: [edits: { path: string; content: string }[]]; close: [] }>()
+
+const toast = useToast()
+const {t} = useI18n()
+const {active, reload} = useAiConfig()
+
+const stage = ref<'input' | 'review'>('input')
+const instruction = ref('')
+const loading = ref(false)
+const picked = ref<string[]>(props.files.map(f => f.path))
+const selectedFiles = computed(() => props.files.filter(f => picked.value.includes(f.path)))
+
+const proposals = ref<Proposal[]>([])
+const applyPicked = ref<string[]>([])
+const expanded = ref<Set<string>>(new Set())
+
+const toggle = (path: string) => {
+  const s = new Set(expanded.value)
+  s.has(path) ? s.delete(path) : s.add(path)
+  expanded.value = s
+}
+
+const stripFences = (text: string) => {
+  const trimmed = text.trim()
+  const m = trimmed.match(/^```[\w+-]*\n([\s\S]*?)\n?```$/)
+  return m ? m[1] : trimmed
+}
+
+// 基于 LCS 的逐行差异（与 DiffView 保持一致的编辑器规模算法）
+const diffRows = (original: string, modified: string): DiffRow[] => {
+  const a = original.split('\n')
+  const b = modified.split('\n')
+  const n = a.length, m = b.length
+  if (n * m > 4_000_000) {
+    return [{type: 'del', text: t('aiMulti.tooLarge')}]
+  }
+  const dp: number[][] = Array.from({length: n + 1}, () => new Array(m + 1).fill(0))
+  for (let i = n - 1; i >= 0; i--) {
+    for (let j = m - 1; j >= 0; j--) {
+      dp[i][j] = a[i] === b[j] ? dp[i + 1][j + 1] + 1 : Math.max(dp[i + 1][j], dp[i][j + 1])
+    }
+  }
+  const out: DiffRow[] = []
+  let i = 0, j = 0, oldNo = 0, newNo = 0
+  while (i < n && j < m) {
+    if (a[i] === b[j]) {
+      out.push({type: 'same', text: a[i], oldNo: ++oldNo, newNo: ++newNo}); i++; j++
+    }
+    else if (dp[i + 1][j] >= dp[i][j + 1]) {
+      out.push({type: 'del', text: a[i], oldNo: ++oldNo}); i++
+    }
+    else {
+      out.push({type: 'add', text: b[j], newNo: ++newNo}); j++
+    }
+  }
+  while (i < n) out.push({type: 'del', text: a[i++], oldNo: ++oldNo})
+  while (j < m) out.push({type: 'add', text: b[j++], newNo: ++newNo})
+  return out
+}
+
+const rowClass = (ty: DiffRow['type']) =>
+  ty === 'add' ? 'bg-green-50 dark:bg-green-900/25 text-green-800 dark:text-green-300'
+    : ty === 'del' ? 'bg-red-50 dark:bg-red-900/25 text-red-800 dark:text-red-300'
+      : 'text-gray-700 dark:text-gray-300'
+const sign = (ty: DiffRow['type']) => (ty === 'add' ? '+' : ty === 'del' ? '−' : '')
+
+const buildUser = (): string => {
+  const parts = [instruction.value.trim()]
+  for (const f of selectedFiles.value) {
+    parts.push(`\n\n===== FILE: ${f.path} =====\n${f.content}`)
+  }
+  return parts.join('')
+}
+
+const SYSTEM = `你是资深工程师，负责跨多个文件完成用户的修改需求。只修改确有必要的文件，未改动的文件不要出现在结果里。`
+  + `每个文件的输入以「===== FILE: <路径> =====」开头，其后是该文件的完整内容。`
+  + `必须严格输出 JSON（不要 Markdown 代码块、不要任何解释），格式为：`
+  + `{"edits":[{"path":"<与输入完全一致的文件路径>","content":"<该文件完整的新内容>"}]}。`
+  + `content 必须是文件的完整新内容而非片段，且只能使用输入中出现过的文件路径。`
+
+const generate = async () => {
+  reload()
+  if (!active.value.apiKey) {
+    toast.error(t('chat.needKey'))
+    return
+  }
+  loading.value = true
+  try {
+    const reply = await invoke<string>('ai_chat', {
+      provider: active.value.provider,
+      baseUrl: active.value.baseUrl,
+      apiKey: active.value.apiKey,
+      model: active.value.model,
+      system: SYSTEM,
+      messages: [{role: 'user', content: buildUser()}]
+    })
+    const parsed = JSON.parse(stripFences(reply))
+    const edits: { path: string; content: string }[] = Array.isArray(parsed?.edits) ? parsed.edits : []
+    const byPath = new Map(props.files.map(f => [f.path, f]))
+    const next: Proposal[] = []
+    for (const e of edits) {
+      const src = byPath.get(e.path)
+      // 仅接受输入中存在、且内容确有变化的文件
+      if (!src || typeof e.content !== 'string' || e.content === src.content) {
+        continue
+      }
+      const rows = diffRows(src.content, e.content)
+      next.push({
+        path: src.path,
+        name: src.name,
+        original: src.content,
+        modified: e.content,
+        rows,
+        added: rows.filter(r => r.type === 'add').length,
+        removed: rows.filter(r => r.type === 'del').length
+      })
+    }
+    proposals.value = next
+    applyPicked.value = next.map(p => p.path)
+    expanded.value = new Set(next.length === 1 ? [next[0].path] : [])
+    stage.value = 'review'
+  }
+  catch (error) {
+    toast.error(t('aiMulti.failed') + error)
+  }
+  finally {
+    loading.value = false
+  }
+}
+
+const apply = () => {
+  const edits = proposals.value
+    .filter(p => applyPicked.value.includes(p.path))
+    .map(p => ({path: p.path, content: p.modified}))
+  if (edits.length === 0) {
+    return
+  }
+  emit('apply', edits)
+  emit('close')
+}
+</script>
diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
index 3e5326c5..b7c1e664 100644
--- a/src/i18n/locales/en.json
+++ b/src/i18n/locales/en.json
@@ -690,6 +690,8 @@
     "formatWithAi": "AI format code",
     "aiFixDiagnostics": "AI fix diagnostics",
     "aiGenDoc": "AI generate doc comment",
+    "aiTranslate": "AI translate comments/docs",
+    "aiMultiEdit": "AI multi-file edit",
     "history": "Run history",
     "diff": "Diff (current vs saved)",
     "preview": "Live preview (Markdown / HTML)",
@@ -1174,6 +1176,19 @@
     "failed": "AI action failed: ",
     "noCode": "No code to process"
   },
+  "aiMulti": {
+    "title": "AI multi-file edit",
+    "instructionPlaceholder": "Describe the change to make across files, e.g. switch all fetch calls to a shared request wrapper",
+    "contextFiles": "Files in context ({n} selected)",
+    "cancel": "Cancel",
+    "generate": "Generate edits",
+    "thinking": "AI is thinking…",
+    "back": "Back",
+    "apply": "Apply {n} file(s)",
+    "noChange": "AI proposed no changes",
+    "tooLarge": "(file too large, diff skipped)",
+    "failed": "Generation failed: "
+  },
   "task": {
     "title": "Run tasks",
     "labelPlaceholder": "Task name",
@@ -1376,6 +1391,9 @@
     "noDiagnostics": "No diagnostics in the current file",
     "replUnsupported": "No built-in REPL for the current language",
     "replStarted": "REPL started: {cmd}",
+    "aiMultiNeedFiles": "Open the files you want to edit first",
+    "aiMultiApplied": "AI edits applied ({n} file(s))",
+    "aiMultiWriteFailed": "Failed to write {name}: ",
     "sqlFormatted": "SQL formatted",
     "sqlFormatFailed": "SQL format failed: ",
     "sqlFormatOnlySql": "Only available when editing SQL",
diff --git a/src/i18n/locales/zh-CN.json b/src/i18n/locales/zh-CN.json
index 951e452c..436e3af5 100644
--- a/src/i18n/locales/zh-CN.json
+++ b/src/i18n/locales/zh-CN.json
@@ -691,6 +691,7 @@
     "aiFixDiagnostics": "AI 修复诊断",
     "aiGenDoc": "AI 生成文档注释",
     "aiTranslate": "AI 翻译注释/文档",
+    "aiMultiEdit": "AI 多文件编辑",
     "history": "执行历史",
     "diff": "差异对比（当前 vs 已保存）",
     "preview": "实时预览（Markdown / HTML）",
@@ -1175,6 +1176,19 @@
     "failed": "AI 操作失败：",
     "noCode": "没有可处理的代码"
   },
+  "aiMulti": {
+    "title": "AI 多文件编辑",
+    "instructionPlaceholder": "描述要跨文件完成的修改，例如：把所有 fetch 调用改为使用统一的 request 封装",
+    "contextFiles": "参与的文件（已选 {n} 个）",
+    "cancel": "取消",
+    "generate": "生成修改",
+    "thinking": "AI 思考中…",
+    "back": "返回",
+    "apply": "应用 {n} 个文件",
+    "noChange": "AI 未提出任何修改",
+    "tooLarge": "（文件过大，已跳过差异计算）",
+    "failed": "生成失败："
+  },
   "task": {
     "title": "运行任务",
     "labelPlaceholder": "任务名",
@@ -1377,6 +1391,9 @@
     "noDiagnostics": "当前文件没有诊断问题",
     "replUnsupported": "当前语言暂无内置 REPL",
     "replStarted": "已启动 REPL：{cmd}",
+    "aiMultiNeedFiles": "请先打开需要参与编辑的文件",
+    "aiMultiApplied": "已应用 AI 修改（{n} 个文件）",
+    "aiMultiWriteFailed": "写入 {name} 失败：",
     "sqlFormatted": "SQL 已格式化",
     "sqlFormatFailed": "SQL 格式化失败: ",
     "sqlFormatOnlySql": "仅在 SQL 编辑时可用",

From 7f3ca990a0878205858110eb4f98a7052f146323 Mon Sep 17 00:00:00 2001
From: qianmoQ <shicheng@devlive.org>
Date: Sun, 5 Jul 2026 08:28:06 +0800
Subject: [PATCH 08/23] =?UTF-8?q?feat(sql):=20=E8=A1=A8=E6=A0=BC=E8=A1=8C?=
 =?UTF-8?q?=E5=86=85=E7=BC=96=E8=BE=91=E5=9B=9E=E5=86=99=EF=BC=88=E5=8F=8C?=
 =?UTF-8?q?=E5=87=BB=E6=94=B9=E5=80=BC=EF=BC=8C=E7=94=9F=E6=88=90=20UPDATE?=
 =?UTF-8?q?=20=E7=A1=AE=E8=AE=A4=E5=90=8E=E5=86=99=E5=BA=93=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                       | 86 +++++++++++++++++++++++++++++++
 src/components/SqlResultTable.vue |  7 ++-
 src/components/SqlTableView.vue   | 11 +++-
 src/components/VirtualTable.vue   | 65 +++++++++++++++++++++--
 src/i18n/locales/en.json          |  8 +++
 src/i18n/locales/zh-CN.json       |  8 +++
 6 files changed, 177 insertions(+), 8 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 4fb0e58f..28e6e276 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -201,8 +201,10 @@
                             :is-running="isRunning"
                             :execution-time="lastExecutionTime"
                             :paging="sqlPaging"
+                            :editable-table="sqlEditableTable"
                             @prev="sqlPrevPage"
                             @next="sqlNextPage"
+                            @edit-cell="onSqlEditCell"
                             @clear="clearOutput"/>
 
               <!-- 数据表 / 图表（CSV / TSV） -->
@@ -328,6 +330,18 @@
       </div>
     </Modal>
 
+    <!-- SQL 行内编辑：回写前确认生成的 UPDATE -->
+    <Modal :show="!!pendingSqlUpdate" :title="t('sqlEdit.confirmTitle')" size="md" @update:show="(v) => { if (!v) pendingSqlUpdate = null }">
+      <div v-if="pendingSqlUpdate" class="space-y-3">
+        <p class="text-sm text-gray-600 dark:text-gray-400">{{ t('sqlEdit.confirmHint') }}</p>
+        <pre class="text-xs font-mono bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded p-2 whitespace-pre-wrap break-all max-h-60 overflow-auto">{{ pendingSqlUpdate.sql }}</pre>
+        <div class="flex justify-end space-x-2">
+          <Button type="secondary" size="sm" @click="pendingSqlUpdate = null">{{ t('app.cancel') }}</Button>
+          <Button size="sm" @click="runPendingSqlUpdate">{{ t('sqlEdit.confirmRun') }}</Button>
+        </div>
+      </div>
+    </Modal>
+
     <!-- AI 助手 -->
     <AiAssistant v-if="showAi" :code="code" :language="currentLanguage" :execution-id="aiExecutionId" :error-context="aiErrorContext" :initial-prompt="aiInitialPrompt" :root-dir="rootDir" @close="showAi = false" @insert-code="applyAiCode"/>
 
@@ -2108,6 +2122,78 @@ const loadSqlPage = async (offset: number, record: boolean) => {
 const sqlPrevPage = () => sqlPage.offset > 0 && loadSqlPage(Math.max(0, sqlPage.offset - SQL_PAGE_SIZE), false)
 const sqlNextPage = () => sqlPage.hasMore && loadSqlPage(sqlPage.offset + SQL_PAGE_SIZE, false)
 
+// ===== SQL 表格行内编辑回写 =====
+// 从当前分页 SQL 解析唯一目标表（单表 SELECT 才允许编辑；含 JOIN/子查询/多表则返回 null）
+const sqlEditableTable = computed<string | null>(() => {
+  if (!sqlPage.active || !sqlPage.sql) {
+    return null
+  }
+  const s = sqlPage.sql.replace(/\s+/g, ' ').trim()
+  const m = /\bfrom\s+([`"[]?[A-Za-z_][\w.]*[`"\]]?)/i.exec(s)
+  if (!m) {
+    return null
+  }
+  if (/\bjoin\b/i.test(s) || /\bfrom\s*\(/i.test(s)) {
+    return null
+  }
+  // FROM 与后续子句之间若出现逗号则为多表，禁止编辑
+  const rest = s.slice(m.index + m[0].length).split(/\bwhere\b|\bgroup\b|\border\b|\blimit\b|\bhaving\b/i)[0]
+  if (rest.includes(',')) {
+    return null
+  }
+  return m[1].replace(/[`"[\]]/g, '')
+})
+
+// 生成 SQL 字面量（跨 SQLite/MySQL/Postgres 的基本类型）
+const sqlLiteral = (v: any): string => {
+  if (v === null || v === undefined) {
+    return 'NULL'
+  }
+  if (typeof v === 'number') {
+    return String(v)
+  }
+  if (typeof v === 'boolean') {
+    return v ? '1' : '0'
+  }
+  return `'${String(v).replace(/'/g, "''")}'`
+}
+
+const pendingSqlUpdate = ref<{ sql: string } | null>(null)
+// 单元格编辑 → 生成 UPDATE（WHERE 用该行全部原值定位）→ 确认后回写
+const onSqlEditCell = (p: { table: string; column: string; row: any[]; columns: string[]; oldValue: any; newValue: any }) => {
+  const where = p.columns
+    .map((col, i) => {
+      const val = p.row[i]
+      return val === null || val === undefined ? `${col} IS NULL` : `${col} = ${sqlLiteral(val)}`
+    })
+    .join(' AND ')
+  const sql = `UPDATE ${p.table} SET ${p.column} = ${sqlLiteral(p.newValue)} WHERE ${where}`
+  pendingSqlUpdate.value = {sql}
+}
+const runPendingSqlUpdate = async () => {
+  const pending = pendingSqlUpdate.value
+  if (!pending) {
+    return
+  }
+  pendingSqlUpdate.value = null
+  try {
+    const source = sqlPage.source ?? resolveActiveSource()
+    const res = sqlTxn.active.value
+      ? await sqlTxn.exec(pending.sql)
+      : await invoke<any>('run_sql', {sql: pending.sql, source})
+    if (res.error) {
+      toast.error(t('sqlEdit.failed') + res.error)
+      return
+    }
+    toast.success(t('sqlEdit.done'))
+    // 回写成功后刷新当前页，保证表格与数据库一致
+    await loadSqlPage(sqlPage.offset, false)
+  }
+  catch (error) {
+    toast.error(t('sqlEdit.failed') + error)
+  }
+}
+
 const runSql = async (sqlOverride?: string) => {
   const sql = sqlOverride ?? code.value
   if (!sql.trim()) {
diff --git a/src/components/SqlResultTable.vue b/src/components/SqlResultTable.vue
index 762ea57e..2e6709a5 100644
--- a/src/components/SqlResultTable.vue
+++ b/src/components/SqlResultTable.vue
@@ -15,7 +15,9 @@
       <div v-for="(rs, ri) in result.result_sets" :key="ri" :class="fill ? 'flex-1 min-h-0 flex flex-col' : 'mb-4'">
         <div v-if="result.result_sets.length > 1" class="text-[11px] text-gray-400 mb-1 flex-shrink-0">{{ t('sql.resultSet', { n: ri + 1, rows: rs.rows.length }) }}</div>
         <div class="border border-gray-200 dark:border-gray-700 rounded overflow-hidden" :class="fill ? 'flex-1 min-h-0' : ''">
-          <VirtualTable :columns="rs.columns" :rows="rs.rows" :show-index="false" :max-height="fill ? undefined : 420"/>
+          <VirtualTable :columns="rs.columns" :rows="rs.rows" :show-index="false" :max-height="fill ? undefined : 420"
+                        :editable="editable && fill"
+                        @edit-cell="(p) => emit('editCell', { column: rs.columns[p.ci], row: p.row, columns: rs.columns, oldValue: p.oldValue, newValue: p.newValue })"/>
         </div>
       </div>
 
@@ -37,7 +39,8 @@ const {t} = useI18n()
 interface ResultSet { columns: string[]; rows: any[][] }
 interface SqlResult { result_sets: ResultSet[]; messages: string[]; error: string | null; elapsed_ms: number }
 
-const props = defineProps<{ output: string; emptyText?: string; fillHeight?: boolean }>()
+const props = defineProps<{ output: string; emptyText?: string; fillHeight?: boolean; editable?: boolean }>()
+const emit = defineEmits<{ editCell: [payload: { column: string; row: any[]; columns: string[]; oldValue: any; newValue: any }] }>()
 
 const result = computed<SqlResult | null>(() => {
   if (!props.output.trim()) {
diff --git a/src/components/SqlTableView.vue b/src/components/SqlTableView.vue
index e06d6259..69646c9a 100644
--- a/src/components/SqlTableView.vue
+++ b/src/components/SqlTableView.vue
@@ -62,7 +62,8 @@
     </div>
     <!-- 表格视图 -->
     <div v-else class="flex-1 min-h-0 overflow-auto p-2">
-      <SqlResultTable :output="stable" fill-height :empty-text="t('sql.emptyResult', { label: activeLabel() })"/>
+      <SqlResultTable :output="stable" fill-height :editable="!!editableTable" :empty-text="t('sql.emptyResult', { label: activeLabel() })"
+                      @edit-cell="(p) => editableTable && emit('editCell', { table: editableTable, ...p })"/>
     </div>
   </div>
 </template>
@@ -84,8 +85,14 @@ const props = defineProps<{
   isRunning: boolean
   executionTime?: number
   paging?: { active: boolean; offset: number; pageSize: number; hasMore: boolean }
+  editableTable?: string | null
+}>()
+const emit = defineEmits<{
+  clear: []
+  prev: []
+  next: []
+  editCell: [payload: { table: string; column: string; row: any[]; columns: string[]; oldValue: any; newValue: any }]
 }>()
-const emit = defineEmits<{ clear: []; prev: []; next: [] }>()
 
 const {t} = useI18n()
 const viewMode = ref<'table' | 'chart' | 'pivot'>('table')
diff --git a/src/components/VirtualTable.vue b/src/components/VirtualTable.vue
index b874c842..fa85116b 100644
--- a/src/components/VirtualTable.vue
+++ b/src/components/VirtualTable.vue
@@ -16,8 +16,23 @@
         <tr v-if="topPad > 0" :style="{height: topPad + 'px'}"><td :colspan="colCount"/></tr>
         <tr v-for="(row, i) in visibleRows" :key="start + i" class="hover:bg-gray-50 dark:hover:bg-gray-800/50" :style="{height: rowHeight + 'px'}">
           <td v-if="showIndex" class="px-2 border-b border-gray-100 dark:border-gray-800 text-gray-400 whitespace-nowrap">{{ start + i + 1 }}</td>
-          <td v-for="(_c, ci) in columns" :key="ci" :style="colStyle(ci)" class="px-3 border-b border-gray-100 dark:border-gray-800 font-mono overflow-hidden whitespace-nowrap text-ellipsis"
-              :class="row[ci] === null || row[ci] === undefined ? 'text-gray-400 italic' : 'text-gray-700 dark:text-gray-300'" :title="fmt(row[ci])">{{ fmt(row[ci]) }}</td>
+          <td v-for="(_c, ci) in columns" :key="ci" :style="colStyle(ci)"
+              class="px-3 border-b border-gray-100 dark:border-gray-800 font-mono overflow-hidden whitespace-nowrap text-ellipsis"
+              :class="[
+                row[ci] === null || row[ci] === undefined ? 'text-gray-400 italic' : 'text-gray-700 dark:text-gray-300',
+                editable ? 'cursor-text' : ''
+              ]"
+              :title="editable ? t('view.editHint') : fmt(row[ci])"
+              @dblclick="editable && beginEdit(row, ci)">
+            <input v-if="editing && editing.row === row && editing.ci === ci"
+                   ref="editInput"
+                   v-model="editValue"
+                   class="w-full bg-white dark:bg-gray-900 text-gray-800 dark:text-gray-100 border border-blue-400 rounded px-1 py-0 font-mono outline-none"
+                   @keydown.enter.prevent="commitEdit"
+                   @keydown.esc.prevent="cancelEdit"
+                   @blur="commitEdit"/>
+            <template v-else>{{ fmt(row[ci]) }}</template>
+          </td>
         </tr>
         <tr v-if="bottomPad > 0" :style="{height: bottomPad + 'px'}"><td :colspan="colCount"/></tr>
         <tr v-if="rows.length === 0">
@@ -29,11 +44,50 @@
 </template>
 
 <script setup lang="ts">
-import {computed, onBeforeUnmount, onMounted, ref, watch} from 'vue'
+import {computed, nextTick, onBeforeUnmount, onMounted, ref, watch} from 'vue'
 import {useI18n} from 'vue-i18n'
 
 const {t} = useI18n()
 
+// ---- 行内编辑（editable 时双击单元格）----
+const editing = ref<{ row: any[]; ci: number } | null>(null)
+const editValue = ref('')
+const editInput = ref<HTMLInputElement[] | HTMLInputElement>()
+const beginEdit = async (row: any[], ci: number) => {
+  const v = row[ci]
+  editing.value = {row, ci}
+  editValue.value = v === null || v === undefined ? '' : String(v)
+  await nextTick()
+  const el = Array.isArray(editInput.value) ? editInput.value[0] : editInput.value
+  el?.focus()
+  el?.select()
+}
+const cancelEdit = () => { editing.value = null }
+// 依据原值类型对输入做轻量强转：原为数字且新值为数值 → 数字；原为 null 且清空 → 仍 null
+const coerce = (raw: string, old: any): any => {
+  if (raw === '' && (old === null || old === undefined)) {
+    return null
+  }
+  if (typeof old === 'number' && raw.trim() !== '' && !isNaN(Number(raw))) {
+    return Number(raw)
+  }
+  return raw
+}
+const commitEdit = () => {
+  const cur = editing.value
+  if (!cur) {
+    return
+  }
+  editing.value = null
+  const oldValue = cur.row[cur.ci]
+  const newValue = coerce(editValue.value, oldValue)
+  // 值未变化则不触发回写
+  if (newValue === oldValue) {
+    return
+  }
+  emit('editCell', {row: [...cur.row], ci: cur.ci, oldValue, newValue})
+}
+
 const props = withDefaults(defineProps<{
   columns: string[]
   rows: any[][]
@@ -41,7 +95,10 @@ const props = withDefaults(defineProps<{
   showIndex?: boolean
   buffer?: number
   maxHeight?: number
-}>(), {rowHeight: 28, showIndex: true, buffer: 8})
+  editable?: boolean
+}>(), {rowHeight: 28, showIndex: true, buffer: 8, editable: false})
+
+const emit = defineEmits<{ editCell: [payload: { row: any[]; ci: number; oldValue: any; newValue: any }] }>()
 
 const scroller = ref<HTMLElement>()
 const scrollTop = ref(0)
diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
index b7c1e664..a7563b38 100644
--- a/src/i18n/locales/en.json
+++ b/src/i18n/locales/en.json
@@ -810,6 +810,7 @@
     "items": "items",
     "keys": "keys",
     "zeroRows": "(0 rows)",
+    "editHint": "Double-click to edit cell",
     "expand": "Expand",
     "collapse": "Collapse",
     "trigger": "Trigger (on)",
@@ -1025,6 +1026,13 @@
     "all": "All",
     "pivotHint": "Drag a field to \"Values\" to build the pivot table"
   },
+  "sqlEdit": {
+    "confirmTitle": "Confirm write-back",
+    "confirmHint": "The following statement will update the database (the WHERE clause matches the row's original values; identical rows would all be updated):",
+    "confirmRun": "Run update",
+    "failed": "Write-back failed: ",
+    "done": "Updated"
+  },
   "about": {
     "title": "About CodeForge",
     "tagline": "CodeForge is a lightweight, high-performance desktop code runner designed for developers, students and coding enthusiasts.",
diff --git a/src/i18n/locales/zh-CN.json b/src/i18n/locales/zh-CN.json
index 436e3af5..19ab76b1 100644
--- a/src/i18n/locales/zh-CN.json
+++ b/src/i18n/locales/zh-CN.json
@@ -810,6 +810,7 @@
     "items": "项",
     "keys": "键",
     "zeroRows": "（0 行）",
+    "editHint": "双击编辑单元格",
     "expand": "展开",
     "collapse": "收起",
     "trigger": "触发 (on)",
@@ -1025,6 +1026,13 @@
     "all": "全部",
     "pivotHint": "把字段拖到「值」即可生成透视表"
   },
+  "sqlEdit": {
+    "confirmTitle": "确认写回",
+    "confirmHint": "将执行以下语句更新数据库（WHERE 依据该行原值定位，若存在完全相同的行会一并更新）：",
+    "confirmRun": "执行更新",
+    "failed": "写回失败：",
+    "done": "已更新"
+  },
   "about": {
     "title": "关于 CodeForge",
     "tagline": "CodeForge 是一款轻量级、高性能的桌面代码执行器，专为开发者、学生和编程爱好者设计。",

From 9262be901dfd31a86aee2546660a77a7960bf864 Mon Sep 17 00:00:00 2001
From: qianmoQ <shicheng@devlive.org>
Date: Mon, 6 Jul 2026 08:37:04 +0800
Subject: [PATCH 09/23] =?UTF-8?q?feat(sql):=20=E5=8F=AF=E8=A7=86=E5=8C=96?=
 =?UTF-8?q?=E6=9F=A5=E8=AF=A2=E6=9E=84=E5=BB=BA=E5=99=A8=EF=BC=88=E9=80=89?=
 =?UTF-8?q?=E8=A1=A8/=E5=88=97/=E6=9D=A1=E4=BB=B6/=E6=8E=92=E5=BA=8F?=
 =?UTF-8?q?=E7=94=9F=E6=88=90=20SQL=20=E5=B9=B6=E8=BF=90=E8=A1=8C=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                     |   3 +
 src/components/QueryBuilder.vue | 237 ++++++++++++++++++++++++++++++++
 src/i18n/locales/en.json        |  20 +++
 src/i18n/locales/zh-CN.json     |  20 +++
 src/utils/dbSchema.ts           |  22 ++-
 5 files changed, 301 insertions(+), 1 deletion(-)
 create mode 100644 src/components/QueryBuilder.vue

diff --git a/src/App.vue b/src/App.vue
index 28e6e276..6cbbf070 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -104,6 +104,7 @@
                   </span>
                   <SqlSourceSelect v-if="currentLanguage === 'sql'" class="flex-shrink-0"/>
                   <SchemaBrowser v-if="currentLanguage === 'sql'" class="flex-shrink-0" @preview="previewTable" @insert="insertAtCursor"/>
+                  <QueryBuilder v-if="currentLanguage === 'sql'" class="flex-shrink-0" @preview="previewTable" @insert="insertAtCursor"/>
                   <AiSql v-if="currentLanguage === 'sql'" class="flex-shrink-0" @generated="insertAtCursor"/>
                   <ErDiagram v-if="currentLanguage === 'sql'" class="flex-shrink-0"/>
                   <TxnControl v-if="currentLanguage === 'sql'" class="flex-shrink-0" @notice="onTxnNotice"/>
@@ -248,6 +249,7 @@
             </span>
             <SqlSourceSelect v-if="currentLanguage === 'sql'" class="flex-shrink-0"/>
             <SchemaBrowser v-if="currentLanguage === 'sql'" class="flex-shrink-0" @preview="previewTable" @insert="insertAtCursor"/>
+                  <QueryBuilder v-if="currentLanguage === 'sql'" class="flex-shrink-0" @preview="previewTable" @insert="insertAtCursor"/>
                   <AiSql v-if="currentLanguage === 'sql'" class="flex-shrink-0" @generated="insertAtCursor"/>
                   <ErDiagram v-if="currentLanguage === 'sql'" class="flex-shrink-0"/>
                   <TxnControl v-if="currentLanguage === 'sql'" class="flex-shrink-0" @notice="onTxnNotice"/>
@@ -553,6 +555,7 @@ import DataTableView from "./components/DataTableView.vue";
 import XlsxView from "./components/XlsxView.vue";
 import SqlSourceSelect from "./components/SqlSourceSelect.vue";
 import SchemaBrowser from "./components/SchemaBrowser.vue";
+import QueryBuilder from "./components/QueryBuilder.vue";
 import AiSql from "./components/AiSql.vue";
 import StatusBar from './components/StatusBar.vue'
 import About from './components/About.vue'
diff --git a/src/components/QueryBuilder.vue b/src/components/QueryBuilder.vue
new file mode 100644
index 00000000..28c3f7b9
--- /dev/null
+++ b/src/components/QueryBuilder.vue
@@ -0,0 +1,237 @@
+<template>
+  <div class="inline-block">
+    <Tooltip :text="t('qb.title')">
+      <button class="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer" @click="openBuilder">
+        <Blocks class="w-3.5 h-3.5"/>
+      </button>
+    </Tooltip>
+
+    <Teleport to="body">
+      <div v-if="visible" class="fixed inset-0 z-50 flex items-start justify-center pt-10 px-6 pb-6" @click="visible = false">
+        <div class="w-full max-w-[880px] max-h-[85vh] bg-white dark:bg-gray-900 dark:text-gray-100 rounded-lg shadow-2xl border border-gray-200 dark:border-gray-700 flex flex-col overflow-hidden" @click.stop>
+          <!-- 标题栏 -->
+          <div class="flex items-center justify-between px-4 py-2.5 border-b border-gray-200 dark:border-gray-700 flex-shrink-0">
+            <div class="flex items-center gap-2 text-sm font-medium text-gray-700 dark:text-gray-200">
+              <Blocks class="w-4 h-4 text-gray-400"/>
+              <span>{{ t('qb.title') }} · {{ activeLabel() }}</span>
+            </div>
+            <button class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 cursor-pointer" @click="visible = false">
+              <X class="w-4 h-4"/>
+            </button>
+          </div>
+
+          <div class="flex-1 overflow-auto p-4 flex flex-col gap-4">
+            <div v-if="loading" class="text-sm text-gray-400">{{ t('qb.loading') }}</div>
+            <div v-else-if="error" class="text-sm text-red-500">{{ error }}</div>
+            <div v-else-if="tables.length === 0" class="text-sm text-gray-400">{{ t('qb.noTables') }}</div>
+
+            <template v-else>
+              <!-- 表 -->
+              <div class="flex items-center gap-2">
+                <label class="text-xs text-gray-500 w-16 flex-shrink-0">{{ t('qb.table') }}</label>
+                <select v-model="table" class="text-xs rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 px-2 py-1 min-w-[220px] focus:outline-none">
+                  <option v-for="tb in tables" :key="tb.name" :value="tb.name">{{ tb.name }}</option>
+                </select>
+              </div>
+
+              <!-- 列 -->
+              <div class="flex gap-2">
+                <label class="text-xs text-gray-500 w-16 flex-shrink-0 pt-1">{{ t('qb.columns') }}</label>
+                <div class="flex-1">
+                  <label class="inline-flex items-center gap-1 text-xs mb-1 cursor-pointer">
+                    <input type="checkbox" v-model="selectAll" class="cursor-pointer"/> {{ t('qb.allColumns') }}
+                  </label>
+                  <div v-if="!selectAll" class="flex flex-wrap gap-x-3 gap-y-1 max-h-28 overflow-auto p-2 rounded border border-gray-200 dark:border-gray-700">
+                    <label v-for="c in currentCols" :key="c.name" class="inline-flex items-center gap-1 text-xs cursor-pointer">
+                      <input type="checkbox" :value="c.name" v-model="pickedCols" class="cursor-pointer"/>
+                      {{ c.name }}<span class="text-gray-400">{{ c.type }}</span>
+                    </label>
+                  </div>
+                </div>
+              </div>
+
+              <!-- 条件 WHERE -->
+              <div class="flex gap-2">
+                <label class="text-xs text-gray-500 w-16 flex-shrink-0 pt-1">{{ t('qb.where') }}</label>
+                <div class="flex-1 flex flex-col gap-1.5">
+                  <div v-for="(w, i) in wheres" :key="i" class="flex items-center gap-1.5">
+                    <select v-model="w.col" class="text-xs rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 px-2 py-1 focus:outline-none">
+                      <option value="">{{ t('qb.pickColumn') }}</option>
+                      <option v-for="c in currentCols" :key="c.name" :value="c.name">{{ c.name }}</option>
+                    </select>
+                    <select v-model="w.op" class="text-xs rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 px-1.5 py-1 focus:outline-none">
+                      <option v-for="op in OPS" :key="op" :value="op">{{ op }}</option>
+                    </select>
+                    <input v-model="w.value" :disabled="w.op === 'IS NULL' || w.op === 'IS NOT NULL'"
+                           :placeholder="t('qb.value')"
+                           class="flex-1 text-xs rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 px-2 py-1 focus:outline-none disabled:opacity-40"/>
+                    <button class="text-gray-400 hover:text-red-500 cursor-pointer p-1" @click="wheres.splice(i, 1)"><Trash2 class="w-3.5 h-3.5"/></button>
+                  </div>
+                  <button class="self-start inline-flex items-center gap-1 text-xs text-blue-500 hover:underline cursor-pointer" @click="wheres.push({ col: '', op: '=', value: '' })">
+                    <Plus class="w-3.5 h-3.5"/>{{ t('qb.addCondition') }}
+                  </button>
+                </div>
+              </div>
+
+              <!-- 排序 + 限制 -->
+              <div class="flex items-center gap-2 flex-wrap">
+                <label class="text-xs text-gray-500 w-16 flex-shrink-0">{{ t('qb.orderBy') }}</label>
+                <select v-model="orderCol" class="text-xs rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 px-2 py-1 focus:outline-none">
+                  <option value="">{{ t('qb.noOrder') }}</option>
+                  <option v-for="c in currentCols" :key="c.name" :value="c.name">{{ c.name }}</option>
+                </select>
+                <select v-if="orderCol" v-model="orderDir" class="text-xs rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 px-1.5 py-1 focus:outline-none">
+                  <option value="ASC">ASC</option>
+                  <option value="DESC">DESC</option>
+                </select>
+                <label class="text-xs text-gray-500 ml-3">{{ t('qb.limit') }}</label>
+                <input v-model.number="limit" type="number" min="0" class="w-24 text-xs rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 px-2 py-1 focus:outline-none"/>
+              </div>
+
+              <!-- SQL 预览 -->
+              <div>
+                <div class="text-xs text-gray-500 mb-1">{{ t('qb.preview') }}</div>
+                <pre class="text-xs font-mono bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded p-2 whitespace-pre-wrap break-all">{{ sql }}</pre>
+              </div>
+            </template>
+          </div>
+
+          <div class="flex items-center justify-end gap-2 px-4 py-2.5 border-t border-gray-200 dark:border-gray-700 flex-shrink-0">
+            <button class="text-xs px-3 py-1.5 rounded text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer" @click="copySql" :disabled="!sql">{{ t('qb.copy') }}</button>
+            <button class="text-xs px-3 py-1.5 rounded text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer" @click="doInsert" :disabled="!sql">{{ t('qb.insert') }}</button>
+            <button class="text-xs px-3 py-1.5 rounded bg-blue-500 text-white hover:bg-blue-600 disabled:opacity-40 disabled:cursor-not-allowed cursor-pointer" @click="doRun" :disabled="!sql">{{ t('qb.run') }}</button>
+          </div>
+        </div>
+      </div>
+    </Teleport>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {computed, ref, watch} from 'vue'
+import {invoke} from '@tauri-apps/api/core'
+import {Blocks, Plus, Trash2, X} from 'lucide-vue-next'
+import {useI18n} from 'vue-i18n'
+import Tooltip from '../ui/Tooltip.vue'
+import {useDbConnections} from '../composables/useDbConnections'
+import {useToast} from '../plugins/toast'
+import {columnsSql, groupTables, quoteIdent, type Tbl} from '../utils/dbSchema'
+
+const emit = defineEmits<{ preview: [sql: string]; insert: [sql: string] }>()
+const {t} = useI18n()
+const toast = useToast()
+const {resolveActiveSource, activeLabel} = useDbConnections()
+
+const OPS = ['=', '!=', '>', '>=', '<', '<=', 'LIKE', 'IS NULL', 'IS NOT NULL']
+
+const visible = ref(false)
+const loading = ref(false)
+const error = ref('')
+const tables = ref<Tbl[]>([])
+
+const table = ref('')
+const selectAll = ref(true)
+const pickedCols = ref<string[]>([])
+const wheres = ref<{ col: string; op: string; value: string }[]>([])
+const orderCol = ref('')
+const orderDir = ref<'ASC' | 'DESC'>('ASC')
+const limit = ref(100)
+
+const currentCols = computed(() => tables.value.find(tb => tb.name === table.value)?.columns ?? [])
+
+// 切表时重置列/条件/排序，避免残留其它表的字段
+watch(table, () => {
+  pickedCols.value = []
+  wheres.value = []
+  orderCol.value = ''
+})
+
+const kind = () => resolveActiveSource().kind
+const q = (name: string) => quoteIdent(kind(), name)
+
+// 值字面量：LIKE 恒为字符串；其余若为纯数字则原样，否则加引号并转义
+const literal = (op: string, v: string): string => {
+  const s = String(v ?? '')
+  if (op !== 'LIKE' && s.trim() !== '' && !isNaN(Number(s))) {
+    return s
+  }
+  return `'${s.replace(/'/g, "''")}'`
+}
+
+const sql = computed(() => {
+  if (!table.value) {
+    return ''
+  }
+  const cols = selectAll.value || pickedCols.value.length === 0 ? '*' : pickedCols.value.map(q).join(', ')
+  let out = `SELECT ${cols} FROM ${q(table.value)}`
+  const conds = wheres.value
+    .filter(w => w.col)
+    .map(w => (w.op === 'IS NULL' || w.op === 'IS NOT NULL')
+      ? `${q(w.col)} ${w.op}`
+      : `${q(w.col)} ${w.op} ${literal(w.op, w.value)}`)
+  if (conds.length) {
+    out += ' WHERE ' + conds.join(' AND ')
+  }
+  if (orderCol.value) {
+    out += ` ORDER BY ${q(orderCol.value)} ${orderDir.value}`
+  }
+  if (limit.value && limit.value > 0) {
+    out += ` LIMIT ${limit.value}`
+  }
+  return out
+})
+
+const load = async () => {
+  loading.value = true
+  error.value = ''
+  try {
+    const source = resolveActiveSource()
+    const db = source.kind === 'mysql' ? source.database || undefined : undefined
+    const res = await invoke<any>('run_sql', {sql: columnsSql(source.kind, db), source})
+    if (res.error) {
+      throw new Error(res.error)
+    }
+    tables.value = groupTables((res.result_sets || [])[0]?.rows || [])
+    if (tables.value.length && !tables.value.find(tb => tb.name === table.value)) {
+      table.value = tables.value[0].name
+    }
+  }
+  catch (e: any) {
+    error.value = e?.message || String(e)
+    tables.value = []
+  }
+  finally {
+    loading.value = false
+  }
+}
+
+const openBuilder = () => {
+  visible.value = true
+  load()
+}
+
+const copySql = async () => {
+  if (!sql.value) {
+    return
+  }
+  try {
+    await navigator.clipboard.writeText(sql.value)
+    toast.success(t('qb.copied'))
+  }
+  catch { /* 忽略 */ }
+}
+const doInsert = () => {
+  if (!sql.value) {
+    return
+  }
+  emit('insert', sql.value)
+  visible.value = false
+}
+const doRun = () => {
+  if (!sql.value) {
+    return
+  }
+  emit('preview', sql.value)
+  visible.value = false
+}
+</script>
diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
index a7563b38..ab3988b9 100644
--- a/src/i18n/locales/en.json
+++ b/src/i18n/locales/en.json
@@ -1033,6 +1033,26 @@
     "failed": "Write-back failed: ",
     "done": "Updated"
   },
+  "qb": {
+    "title": "Query builder",
+    "loading": "Loading schema…",
+    "noTables": "No tables in the current source (pick a database first for MySQL)",
+    "table": "Table",
+    "columns": "Columns",
+    "allColumns": "All columns (*)",
+    "where": "Where",
+    "pickColumn": "Pick column",
+    "value": "Value",
+    "addCondition": "Add condition",
+    "orderBy": "Order by",
+    "noOrder": "No order",
+    "limit": "Limit",
+    "preview": "SQL preview",
+    "copy": "Copy",
+    "copied": "SQL copied",
+    "insert": "Insert to editor",
+    "run": "Run"
+  },
   "about": {
     "title": "About CodeForge",
     "tagline": "CodeForge is a lightweight, high-performance desktop code runner designed for developers, students and coding enthusiasts.",
diff --git a/src/i18n/locales/zh-CN.json b/src/i18n/locales/zh-CN.json
index 19ab76b1..9549b022 100644
--- a/src/i18n/locales/zh-CN.json
+++ b/src/i18n/locales/zh-CN.json
@@ -1033,6 +1033,26 @@
     "failed": "写回失败：",
     "done": "已更新"
   },
+  "qb": {
+    "title": "查询构建器",
+    "loading": "加载表结构中…",
+    "noTables": "当前数据源没有可用的表（MySQL 请先选择数据库）",
+    "table": "表",
+    "columns": "列",
+    "allColumns": "全部列 (*)",
+    "where": "条件",
+    "pickColumn": "选择列",
+    "value": "值",
+    "addCondition": "添加条件",
+    "orderBy": "排序",
+    "noOrder": "不排序",
+    "limit": "限制",
+    "preview": "SQL 预览",
+    "copy": "复制",
+    "copied": "已复制 SQL",
+    "insert": "插入编辑器",
+    "run": "运行"
+  },
   "about": {
     "title": "关于 CodeForge",
     "tagline": "CodeForge 是一款轻量级、高性能的桌面代码执行器，专为开发者、学生和编程爱好者设计。",
diff --git a/src/utils/dbSchema.ts b/src/utils/dbSchema.ts
index 53ab712e..ecdfc076 100644
--- a/src/utils/dbSchema.ts
+++ b/src/utils/dbSchema.ts
@@ -1,6 +1,26 @@
-// 按数据库类型构造「列」与「外键」查询。用于 schema 浏览 / ER 图。
+// 按数据库类型构造「列」与「外键」查询。用于 schema 浏览 / ER 图 / 查询构建器。
 const esc = (s: string) => s.replace(/'/g, "''")
 
+export interface Col { name: string; type: string }
+export interface Tbl { name: string; columns: Col[] }
+
+// 标识符引用（MySQL/ClickHouse 用反引号，其余用双引号）
+export const quoteIdent = (kind: string, name: string) =>
+  kind === 'mysql' || kind === 'clickhouse' ? `\`${name}\`` : `"${name}"`
+
+// 把 columnsSql 返回的 (tbl, col, typ) 行分组为按表聚合的结构
+export const groupTables = (rows: any[][]): Tbl[] => {
+  const map = new Map<string, Tbl>()
+  for (const row of rows) {
+    const tbl = String(row[0])
+    if (!map.has(tbl)) {
+      map.set(tbl, {name: tbl, columns: []})
+    }
+    map.get(tbl)!.columns.push({name: String(row[1]), type: String(row[2] ?? '')})
+  }
+  return [...map.values()]
+}
+
 // 返回 (tbl, col, typ) 行
 export function columnsSql(kind: string, db?: string): string {
   if (kind === 'mysql') {

From 412e3f6ddd719092dd457cbf956bba5af91b1cf9 Mon Sep 17 00:00:00 2001
From: qianmoQ <shicheng@devlive.org>
Date: Mon, 6 Jul 2026 10:43:35 +0800
Subject: [PATCH 10/23] =?UTF-8?q?refactor(sql):=20=E6=9F=A5=E8=AF=A2?=
 =?UTF-8?q?=E6=9E=84=E5=BB=BA=E5=99=A8=E6=94=B9=E4=B8=BA=E6=8B=96=E6=8B=BD?=
 =?UTF-8?q?=E5=BC=8F=EF=BC=88=E5=88=97=E6=8B=96=E5=85=A5=20SELECT/WHERE/OR?=
 =?UTF-8?q?DER=20BY=20=E8=90=BD=E5=8C=BA=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/QueryBuilder.vue | 179 ++++++++++++++++++++------------
 src/i18n/locales/en.json        |  12 +--
 src/i18n/locales/zh-CN.json     |  12 +--
 3 files changed, 124 insertions(+), 79 deletions(-)

diff --git a/src/components/QueryBuilder.vue b/src/components/QueryBuilder.vue
index 28c3f7b9..f467170c 100644
--- a/src/components/QueryBuilder.vue
+++ b/src/components/QueryBuilder.vue
@@ -8,97 +8,115 @@
 
     <Teleport to="body">
       <div v-if="visible" class="fixed inset-0 z-50 flex items-start justify-center pt-10 px-6 pb-6" @click="visible = false">
-        <div class="w-full max-w-[880px] max-h-[85vh] bg-white dark:bg-gray-900 dark:text-gray-100 rounded-lg shadow-2xl border border-gray-200 dark:border-gray-700 flex flex-col overflow-hidden" @click.stop>
+        <div class="w-full max-w-[960px] h-[82vh] bg-white dark:bg-gray-900 dark:text-gray-100 rounded-lg shadow-2xl border border-gray-200 dark:border-gray-700 flex flex-col overflow-hidden" @click.stop>
           <!-- 标题栏 -->
           <div class="flex items-center justify-between px-4 py-2.5 border-b border-gray-200 dark:border-gray-700 flex-shrink-0">
             <div class="flex items-center gap-2 text-sm font-medium text-gray-700 dark:text-gray-200">
               <Blocks class="w-4 h-4 text-gray-400"/>
               <span>{{ t('qb.title') }} · {{ activeLabel() }}</span>
+              <span class="text-[11px] text-gray-400 font-normal">{{ t('qb.dragHint') }}</span>
             </div>
             <button class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 cursor-pointer" @click="visible = false">
               <X class="w-4 h-4"/>
             </button>
           </div>
 
-          <div class="flex-1 overflow-auto p-4 flex flex-col gap-4">
-            <div v-if="loading" class="text-sm text-gray-400">{{ t('qb.loading') }}</div>
-            <div v-else-if="error" class="text-sm text-red-500">{{ error }}</div>
-            <div v-else-if="tables.length === 0" class="text-sm text-gray-400">{{ t('qb.noTables') }}</div>
+          <div v-if="loading" class="flex-1 flex items-center justify-center text-sm text-gray-400">{{ t('qb.loading') }}</div>
+          <div v-else-if="error" class="flex-1 flex items-center justify-center text-sm text-red-500 px-6 text-center">{{ error }}</div>
+          <div v-else-if="tables.length === 0" class="flex-1 flex items-center justify-center text-sm text-gray-400 px-6 text-center">{{ t('qb.noTables') }}</div>
 
-            <template v-else>
-              <!-- 表 -->
-              <div class="flex items-center gap-2">
-                <label class="text-xs text-gray-500 w-16 flex-shrink-0">{{ t('qb.table') }}</label>
-                <select v-model="table" class="text-xs rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 px-2 py-1 min-w-[220px] focus:outline-none">
-                  <option v-for="tb in tables" :key="tb.name" :value="tb.name">{{ tb.name }}</option>
-                </select>
+          <div v-else class="flex-1 flex min-h-0">
+            <!-- 左：结构面板（表 + 可拖拽的列） -->
+            <div class="w-56 flex-shrink-0 border-r border-gray-200 dark:border-gray-700 flex flex-col min-h-0">
+              <div class="px-3 py-1.5 text-[11px] uppercase tracking-wide text-gray-400 flex-shrink-0">{{ t('qb.tables') }}</div>
+              <div class="overflow-auto flex-shrink-0 max-h-40 border-b border-gray-100 dark:border-gray-800">
+                <button v-for="tb in tables" :key="tb.name"
+                        class="w-full text-left px-3 py-1 text-xs flex items-center gap-1.5 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-800"
+                        :class="tb.name === table ? 'bg-blue-50 dark:bg-blue-900/30 text-blue-600 dark:text-blue-300' : 'text-gray-600 dark:text-gray-300'"
+                        @click="table = tb.name">
+                  <Table2 class="w-3.5 h-3.5 flex-shrink-0"/>
+                  <span class="truncate">{{ tb.name }}</span>
+                  <span class="ml-auto text-[10px] text-gray-400">{{ tb.columns.length }}</span>
+                </button>
+              </div>
+              <div class="px-3 py-1.5 text-[11px] uppercase tracking-wide text-gray-400 flex-shrink-0">{{ t('qb.columns') }}</div>
+              <div class="overflow-auto flex-1 px-2 pb-2 flex flex-col gap-1">
+                <div v-for="c in currentCols" :key="c.name"
+                     draggable="true"
+                     class="flex items-center gap-1.5 px-2 py-1 rounded border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-xs cursor-grab active:cursor-grabbing hover:border-blue-400"
+                     @dragstart="draggedCol = c.name">
+                  <GripVertical class="w-3 h-3 text-gray-300 flex-shrink-0"/>
+                  <span class="truncate">{{ c.name }}</span>
+                  <span class="ml-auto text-[10px] text-gray-400 flex-shrink-0">{{ c.type }}</span>
+                </div>
               </div>
+            </div>
 
-              <!-- 列 -->
-              <div class="flex gap-2">
-                <label class="text-xs text-gray-500 w-16 flex-shrink-0 pt-1">{{ t('qb.columns') }}</label>
-                <div class="flex-1">
-                  <label class="inline-flex items-center gap-1 text-xs mb-1 cursor-pointer">
-                    <input type="checkbox" v-model="selectAll" class="cursor-pointer"/> {{ t('qb.allColumns') }}
-                  </label>
-                  <div v-if="!selectAll" class="flex flex-wrap gap-x-3 gap-y-1 max-h-28 overflow-auto p-2 rounded border border-gray-200 dark:border-gray-700">
-                    <label v-for="c in currentCols" :key="c.name" class="inline-flex items-center gap-1 text-xs cursor-pointer">
-                      <input type="checkbox" :value="c.name" v-model="pickedCols" class="cursor-pointer"/>
-                      {{ c.name }}<span class="text-gray-400">{{ c.type }}</span>
-                    </label>
-                  </div>
+            <!-- 右：落区 + SQL 预览 -->
+            <div class="flex-1 min-w-0 overflow-auto p-3 flex flex-col gap-3">
+              <!-- SELECT 列 -->
+              <div class="rounded border transition-colors" :class="zoneClass('select')"
+                   @dragover.prevent="dropHover = 'select'" @dragleave="dropHover = ''" @drop="onDropSelect">
+                <div class="px-2.5 py-1 text-[11px] font-medium text-gray-500 flex items-center gap-1">SELECT</div>
+                <div class="px-2.5 pb-2 flex flex-wrap gap-1.5 min-h-[28px]">
+                  <span v-if="selectedCols.length === 0" class="text-xs text-gray-400 italic">{{ t('qb.selectEmpty') }}</span>
+                  <span v-for="(col, i) in selectedCols" :key="col" class="inline-flex items-center gap-1 px-2 py-0.5 rounded bg-blue-50 dark:bg-blue-900/30 text-blue-600 dark:text-blue-300 text-xs">
+                    {{ col }}
+                    <button class="hover:text-red-500 cursor-pointer" @click="selectedCols.splice(i, 1)"><X class="w-3 h-3"/></button>
+                  </span>
                 </div>
               </div>
 
-              <!-- 条件 WHERE -->
-              <div class="flex gap-2">
-                <label class="text-xs text-gray-500 w-16 flex-shrink-0 pt-1">{{ t('qb.where') }}</label>
-                <div class="flex-1 flex flex-col gap-1.5">
+              <!-- WHERE 条件 -->
+              <div class="rounded border transition-colors" :class="zoneClass('where')"
+                   @dragover.prevent="dropHover = 'where'" @dragleave="dropHover = ''" @drop="onDropWhere">
+                <div class="px-2.5 py-1 text-[11px] font-medium text-gray-500">WHERE</div>
+                <div class="px-2.5 pb-2 flex flex-col gap-1.5 min-h-[28px]">
+                  <span v-if="wheres.length === 0" class="text-xs text-gray-400 italic">{{ t('qb.whereEmpty') }}</span>
                   <div v-for="(w, i) in wheres" :key="i" class="flex items-center gap-1.5">
-                    <select v-model="w.col" class="text-xs rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 px-2 py-1 focus:outline-none">
-                      <option value="">{{ t('qb.pickColumn') }}</option>
-                      <option v-for="c in currentCols" :key="c.name" :value="c.name">{{ c.name }}</option>
-                    </select>
+                    <span class="px-2 py-0.5 rounded bg-gray-100 dark:bg-gray-800 text-xs font-mono">{{ w.col }}</span>
                     <select v-model="w.op" class="text-xs rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 px-1.5 py-1 focus:outline-none">
                       <option v-for="op in OPS" :key="op" :value="op">{{ op }}</option>
                     </select>
                     <input v-model="w.value" :disabled="w.op === 'IS NULL' || w.op === 'IS NOT NULL'"
                            :placeholder="t('qb.value')"
-                           class="flex-1 text-xs rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 px-2 py-1 focus:outline-none disabled:opacity-40"/>
+                           class="flex-1 min-w-0 text-xs rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 px-2 py-1 focus:outline-none disabled:opacity-40"/>
                     <button class="text-gray-400 hover:text-red-500 cursor-pointer p-1" @click="wheres.splice(i, 1)"><Trash2 class="w-3.5 h-3.5"/></button>
                   </div>
-                  <button class="self-start inline-flex items-center gap-1 text-xs text-blue-500 hover:underline cursor-pointer" @click="wheres.push({ col: '', op: '=', value: '' })">
-                    <Plus class="w-3.5 h-3.5"/>{{ t('qb.addCondition') }}
-                  </button>
                 </div>
               </div>
 
-              <!-- 排序 + 限制 -->
-              <div class="flex items-center gap-2 flex-wrap">
-                <label class="text-xs text-gray-500 w-16 flex-shrink-0">{{ t('qb.orderBy') }}</label>
-                <select v-model="orderCol" class="text-xs rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 px-2 py-1 focus:outline-none">
-                  <option value="">{{ t('qb.noOrder') }}</option>
-                  <option v-for="c in currentCols" :key="c.name" :value="c.name">{{ c.name }}</option>
-                </select>
-                <select v-if="orderCol" v-model="orderDir" class="text-xs rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 px-1.5 py-1 focus:outline-none">
-                  <option value="ASC">ASC</option>
-                  <option value="DESC">DESC</option>
-                </select>
-                <label class="text-xs text-gray-500 ml-3">{{ t('qb.limit') }}</label>
+              <!-- ORDER BY -->
+              <div class="rounded border transition-colors" :class="zoneClass('order')"
+                   @dragover.prevent="dropHover = 'order'" @dragleave="dropHover = ''" @drop="onDropOrder">
+                <div class="px-2.5 py-1 text-[11px] font-medium text-gray-500">ORDER BY</div>
+                <div class="px-2.5 pb-2 flex flex-wrap gap-1.5 min-h-[28px] items-center">
+                  <span v-if="orders.length === 0" class="text-xs text-gray-400 italic">{{ t('qb.orderEmpty') }}</span>
+                  <span v-for="(o, i) in orders" :key="o.col" class="inline-flex items-center gap-1 px-2 py-0.5 rounded bg-gray-100 dark:bg-gray-800 text-xs">
+                    {{ o.col }}
+                    <button class="text-blue-500 hover:underline cursor-pointer font-mono" @click="o.dir = o.dir === 'ASC' ? 'DESC' : 'ASC'">{{ o.dir }}</button>
+                    <button class="hover:text-red-500 cursor-pointer" @click="orders.splice(i, 1)"><X class="w-3 h-3"/></button>
+                  </span>
+                </div>
+              </div>
+
+              <!-- LIMIT -->
+              <div class="flex items-center gap-2">
+                <label class="text-[11px] font-medium text-gray-500">LIMIT</label>
                 <input v-model.number="limit" type="number" min="0" class="w-24 text-xs rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 px-2 py-1 focus:outline-none"/>
               </div>
 
               <!-- SQL 预览 -->
-              <div>
-                <div class="text-xs text-gray-500 mb-1">{{ t('qb.preview') }}</div>
+              <div class="mt-auto">
+                <div class="text-[11px] font-medium text-gray-500 mb-1">{{ t('qb.preview') }}</div>
                 <pre class="text-xs font-mono bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded p-2 whitespace-pre-wrap break-all">{{ sql }}</pre>
               </div>
-            </template>
+            </div>
           </div>
 
           <div class="flex items-center justify-end gap-2 px-4 py-2.5 border-t border-gray-200 dark:border-gray-700 flex-shrink-0">
-            <button class="text-xs px-3 py-1.5 rounded text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer" @click="copySql" :disabled="!sql">{{ t('qb.copy') }}</button>
-            <button class="text-xs px-3 py-1.5 rounded text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer" @click="doInsert" :disabled="!sql">{{ t('qb.insert') }}</button>
+            <button class="text-xs px-3 py-1.5 rounded text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer disabled:opacity-40" @click="copySql" :disabled="!sql">{{ t('qb.copy') }}</button>
+            <button class="text-xs px-3 py-1.5 rounded text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer disabled:opacity-40" @click="doInsert" :disabled="!sql">{{ t('qb.insert') }}</button>
             <button class="text-xs px-3 py-1.5 rounded bg-blue-500 text-white hover:bg-blue-600 disabled:opacity-40 disabled:cursor-not-allowed cursor-pointer" @click="doRun" :disabled="!sql">{{ t('qb.run') }}</button>
           </div>
         </div>
@@ -110,7 +128,7 @@
 <script setup lang="ts">
 import {computed, ref, watch} from 'vue'
 import {invoke} from '@tauri-apps/api/core'
-import {Blocks, Plus, Trash2, X} from 'lucide-vue-next'
+import {Blocks, GripVertical, Table2, Trash2, X} from 'lucide-vue-next'
 import {useI18n} from 'vue-i18n'
 import Tooltip from '../ui/Tooltip.vue'
 import {useDbConnections} from '../composables/useDbConnections'
@@ -130,22 +148,53 @@ const error = ref('')
 const tables = ref<Tbl[]>([])
 
 const table = ref('')
-const selectAll = ref(true)
-const pickedCols = ref<string[]>([])
+const selectedCols = ref<string[]>([])
 const wheres = ref<{ col: string; op: string; value: string }[]>([])
-const orderCol = ref('')
-const orderDir = ref<'ASC' | 'DESC'>('ASC')
+const orders = ref<{ col: string; dir: 'ASC' | 'DESC' }[]>([])
 const limit = ref(100)
 
+// 当前被拖拽的列名 + 悬停中的落区（用于高亮）
+const draggedCol = ref('')
+const dropHover = ref('')
+
 const currentCols = computed(() => tables.value.find(tb => tb.name === table.value)?.columns ?? [])
 
-// 切表时重置列/条件/排序，避免残留其它表的字段
+// 切表时清空所有落区，避免残留其它表的字段
 watch(table, () => {
-  pickedCols.value = []
+  selectedCols.value = []
   wheres.value = []
-  orderCol.value = ''
+  orders.value = []
 })
 
+const zoneClass = (zone: string) =>
+  dropHover.value === zone
+    ? 'border-blue-400 bg-blue-50/50 dark:bg-blue-900/10'
+    : 'border-gray-200 dark:border-gray-700'
+
+const onDropSelect = () => {
+  dropHover.value = ''
+  const c = draggedCol.value
+  if (c && !selectedCols.value.includes(c)) {
+    selectedCols.value.push(c)
+  }
+  draggedCol.value = ''
+}
+const onDropWhere = () => {
+  dropHover.value = ''
+  if (draggedCol.value) {
+    wheres.value.push({col: draggedCol.value, op: '=', value: ''})
+  }
+  draggedCol.value = ''
+}
+const onDropOrder = () => {
+  dropHover.value = ''
+  const c = draggedCol.value
+  if (c && !orders.value.some(o => o.col === c)) {
+    orders.value.push({col: c, dir: 'ASC'})
+  }
+  draggedCol.value = ''
+}
+
 const kind = () => resolveActiveSource().kind
 const q = (name: string) => quoteIdent(kind(), name)
 
@@ -162,7 +211,7 @@ const sql = computed(() => {
   if (!table.value) {
     return ''
   }
-  const cols = selectAll.value || pickedCols.value.length === 0 ? '*' : pickedCols.value.map(q).join(', ')
+  const cols = selectedCols.value.length === 0 ? '*' : selectedCols.value.map(q).join(', ')
   let out = `SELECT ${cols} FROM ${q(table.value)}`
   const conds = wheres.value
     .filter(w => w.col)
@@ -172,8 +221,8 @@ const sql = computed(() => {
   if (conds.length) {
     out += ' WHERE ' + conds.join(' AND ')
   }
-  if (orderCol.value) {
-    out += ` ORDER BY ${q(orderCol.value)} ${orderDir.value}`
+  if (orders.value.length) {
+    out += ' ORDER BY ' + orders.value.map(o => `${q(o.col)} ${o.dir}`).join(', ')
   }
   if (limit.value && limit.value > 0) {
     out += ` LIMIT ${limit.value}`
diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
index ab3988b9..25d0b3d5 100644
--- a/src/i18n/locales/en.json
+++ b/src/i18n/locales/en.json
@@ -1035,17 +1035,15 @@
   },
   "qb": {
     "title": "Query builder",
+    "dragHint": "Drag columns from the left into the zones below",
     "loading": "Loading schema…",
     "noTables": "No tables in the current source (pick a database first for MySQL)",
-    "table": "Table",
+    "tables": "Tables",
     "columns": "Columns",
-    "allColumns": "All columns (*)",
-    "where": "Where",
-    "pickColumn": "Pick column",
     "value": "Value",
-    "addCondition": "Add condition",
-    "orderBy": "Order by",
-    "noOrder": "No order",
+    "selectEmpty": "Drag columns here; empty means *",
+    "whereEmpty": "Drag a column here to add a condition",
+    "orderEmpty": "Drag a column here to sort",
     "limit": "Limit",
     "preview": "SQL preview",
     "copy": "Copy",
diff --git a/src/i18n/locales/zh-CN.json b/src/i18n/locales/zh-CN.json
index 9549b022..0ae9ad4b 100644
--- a/src/i18n/locales/zh-CN.json
+++ b/src/i18n/locales/zh-CN.json
@@ -1035,17 +1035,15 @@
   },
   "qb": {
     "title": "查询构建器",
+    "dragHint": "从左侧把列拖到下方落区",
     "loading": "加载表结构中…",
     "noTables": "当前数据源没有可用的表（MySQL 请先选择数据库）",
-    "table": "表",
+    "tables": "表",
     "columns": "列",
-    "allColumns": "全部列 (*)",
-    "where": "条件",
-    "pickColumn": "选择列",
     "value": "值",
-    "addCondition": "添加条件",
-    "orderBy": "排序",
-    "noOrder": "不排序",
+    "selectEmpty": "拖拽列到此；留空表示 *",
+    "whereEmpty": "拖拽列到此添加条件",
+    "orderEmpty": "拖拽列到此排序",
     "limit": "限制",
     "preview": "SQL 预览",
     "copy": "复制",

From 06bfb421aeaf843c83e49311428670614df1132b Mon Sep 17 00:00:00 2001
From: qianmoQ <shicheng@devlive.org>
Date: Mon, 6 Jul 2026 10:49:48 +0800
Subject: [PATCH 11/23] =?UTF-8?q?fix(sql):=20=E8=A1=8C=E5=86=85=E7=BC=96?=
 =?UTF-8?q?=E8=BE=91=E4=B8=8D=E5=86=8D=E4=BE=9D=E8=B5=96=E5=88=86=E9=A1=B5?=
 =?UTF-8?q?=E8=B7=AF=E5=BE=84=EF=BC=88=E6=8C=89=E7=BB=93=E6=9E=9C=20SQL=20?=
 =?UTF-8?q?=E5=88=A4=E5=AE=9A=E5=8F=AF=E7=BC=96=E8=BE=91=E5=8D=95=E8=A1=A8?=
 =?UTF-8?q?=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue | 27 +++++++++++++++++++++------
 1 file changed, 21 insertions(+), 6 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 6cbbf070..d7224db8 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -2126,12 +2126,18 @@ const sqlPrevPage = () => sqlPage.offset > 0 && loadSqlPage(Math.max(0, sqlPage.
 const sqlNextPage = () => sqlPage.hasMore && loadSqlPage(sqlPage.offset + SQL_PAGE_SIZE, false)
 
 // ===== SQL 表格行内编辑回写 =====
-// 从当前分页 SQL 解析唯一目标表（单表 SELECT 才允许编辑；含 JOIN/子查询/多表则返回 null）
+// 记录「当前结果集」对应的 SQL 与数据源（分页/非分页/事务都会写入），供编辑回写与刷新使用
+const resultSql = ref('')
+const resultSource = ref<any>(null)
+// 从当前结果 SQL 解析唯一目标表（单表 SELECT 才允许编辑；含 JOIN/子查询/多表则返回 null）
 const sqlEditableTable = computed<string | null>(() => {
-  if (!sqlPage.active || !sqlPage.sql) {
+  if (!resultSql.value) {
+    return null
+  }
+  const s = resultSql.value.replace(/\s+/g, ' ').trim()
+  if (!/^(select|with)\b/i.test(s)) {
     return null
   }
-  const s = sqlPage.sql.replace(/\s+/g, ' ').trim()
   const m = /\bfrom\s+([`"[]?[A-Za-z_][\w.]*[`"\]]?)/i.exec(s)
   if (!m) {
     return null
@@ -2180,7 +2186,7 @@ const runPendingSqlUpdate = async () => {
   }
   pendingSqlUpdate.value = null
   try {
-    const source = sqlPage.source ?? resolveActiveSource()
+    const source = resultSource.value ?? sqlPage.source ?? resolveActiveSource()
     const res = sqlTxn.active.value
       ? await sqlTxn.exec(pending.sql)
       : await invoke<any>('run_sql', {sql: pending.sql, source})
@@ -2189,8 +2195,13 @@ const runPendingSqlUpdate = async () => {
       return
     }
     toast.success(t('sqlEdit.done'))
-    // 回写成功后刷新当前页，保证表格与数据库一致
-    await loadSqlPage(sqlPage.offset, false)
+    // 回写成功后刷新结果：分页则重拉当前页，否则按原 SQL 重跑，保证与数据库一致
+    if (sqlPage.active) {
+      await loadSqlPage(sqlPage.offset, false)
+    }
+    else if (resultSql.value) {
+      await runSql(resultSql.value)
+    }
   }
   catch (error) {
     toast.error(t('sqlEdit.failed') + error)
@@ -2207,6 +2218,8 @@ const runSql = async (sqlOverride?: string) => {
   if (sqlTxn.active.value) {
     output.value = ''
     isSuccess.value = false
+    resultSql.value = sql
+    resultSource.value = null
     if (layoutMode.value === 'editor') {
       showConsole.value = true
     }
@@ -2232,6 +2245,8 @@ const runSql = async (sqlOverride?: string) => {
   const source = resolveActiveSource()
   output.value = ''
   isSuccess.value = false
+  resultSql.value = sql
+  resultSource.value = source
   // 可分页查询：走分页拉取（首页记入历史）
   if (isPageableSql(sql)) {
     sqlPage.active = true

From b5e2d4d01a04094da693fee56647dc5999573962 Mon Sep 17 00:00:00 2001
From: qianmoQ <shicheng@devlive.org>
Date: Mon, 6 Jul 2026 11:53:33 +0800
Subject: [PATCH 12/23] =?UTF-8?q?feat(sql):=20=E6=9F=A5=E8=AF=A2=E6=9E=84?=
 =?UTF-8?q?=E5=BB=BA=E5=99=A8=E7=8A=B6=E6=80=81=E8=AE=B0=E5=BF=86=E4=B8=8E?=
 =?UTF-8?q?=E6=8B=96=E6=8B=BD=E6=94=BE=E7=BD=AE=E6=8F=90=E7=A4=BA=EF=BC=88?=
 =?UTF-8?q?=E6=8C=89=E6=95=B0=E6=8D=AE=E6=BA=90=E6=8C=81=E4=B9=85=E5=8C=96?=
 =?UTF-8?q?=EF=BC=8C=E8=90=BD=E5=8C=BA=E6=98=BE=E7=A4=BA=E6=94=BE=E7=BD=AE?=
 =?UTF-8?q?=E5=9D=97=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/QueryBuilder.vue | 125 +++++++++++++++++++++++++++-----
 src/i18n/locales/en.json        |   2 +
 src/i18n/locales/zh-CN.json     |   2 +
 3 files changed, 109 insertions(+), 20 deletions(-)

diff --git a/src/components/QueryBuilder.vue b/src/components/QueryBuilder.vue
index f467170c..42149f48 100644
--- a/src/components/QueryBuilder.vue
+++ b/src/components/QueryBuilder.vue
@@ -16,9 +16,14 @@
               <span>{{ t('qb.title') }} · {{ activeLabel() }}</span>
               <span class="text-[11px] text-gray-400 font-normal">{{ t('qb.dragHint') }}</span>
             </div>
-            <button class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 cursor-pointer" @click="visible = false">
-              <X class="w-4 h-4"/>
-            </button>
+            <div class="flex items-center gap-2">
+              <button class="inline-flex items-center gap-1 text-xs text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 cursor-pointer" @click="reset">
+                <RotateCcw class="w-3.5 h-3.5"/>{{ t('qb.reset') }}
+              </button>
+              <button class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 cursor-pointer" @click="visible = false">
+                <X class="w-4 h-4"/>
+              </button>
+            </div>
           </div>
 
           <div v-if="loading" class="flex-1 flex items-center justify-center text-sm text-gray-400">{{ t('qb.loading') }}</div>
@@ -44,7 +49,7 @@
                 <div v-for="c in currentCols" :key="c.name"
                      draggable="true"
                      class="flex items-center gap-1.5 px-2 py-1 rounded border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-xs cursor-grab active:cursor-grabbing hover:border-blue-400"
-                     @dragstart="draggedCol = c.name">
+                     @dragstart="onDragStart(c.name)" @dragend="onDragEnd">
                   <GripVertical class="w-3 h-3 text-gray-300 flex-shrink-0"/>
                   <span class="truncate">{{ c.name }}</span>
                   <span class="ml-auto text-[10px] text-gray-400 flex-shrink-0">{{ c.type }}</span>
@@ -58,12 +63,16 @@
               <div class="rounded border transition-colors" :class="zoneClass('select')"
                    @dragover.prevent="dropHover = 'select'" @dragleave="dropHover = ''" @drop="onDropSelect">
                 <div class="px-2.5 py-1 text-[11px] font-medium text-gray-500 flex items-center gap-1">SELECT</div>
-                <div class="px-2.5 pb-2 flex flex-wrap gap-1.5 min-h-[28px]">
-                  <span v-if="selectedCols.length === 0" class="text-xs text-gray-400 italic">{{ t('qb.selectEmpty') }}</span>
+                <div class="px-2.5 pb-2 flex flex-wrap gap-1.5 min-h-[28px] items-center">
+                  <span v-if="selectedCols.length === 0 && !isDragging" class="text-xs text-gray-400 italic">{{ t('qb.selectEmpty') }}</span>
                   <span v-for="(col, i) in selectedCols" :key="col" class="inline-flex items-center gap-1 px-2 py-0.5 rounded bg-blue-50 dark:bg-blue-900/30 text-blue-600 dark:text-blue-300 text-xs">
                     {{ col }}
                     <button class="hover:text-red-500 cursor-pointer" @click="selectedCols.splice(i, 1)"><X class="w-3 h-3"/></button>
                   </span>
+                  <span v-if="isDragging" class="border-2 border-dashed rounded px-2 py-0.5 text-xs pointer-events-none transition-colors"
+                        :class="dropHover === 'select' ? 'border-blue-400 text-blue-500 bg-blue-50 dark:bg-blue-900/20' : 'border-gray-300 dark:border-gray-600 text-gray-400'">
+                    {{ t('qb.dropHere', { col: draggedCol }) }}
+                  </span>
                 </div>
               </div>
 
@@ -72,7 +81,11 @@
                    @dragover.prevent="dropHover = 'where'" @dragleave="dropHover = ''" @drop="onDropWhere">
                 <div class="px-2.5 py-1 text-[11px] font-medium text-gray-500">WHERE</div>
                 <div class="px-2.5 pb-2 flex flex-col gap-1.5 min-h-[28px]">
-                  <span v-if="wheres.length === 0" class="text-xs text-gray-400 italic">{{ t('qb.whereEmpty') }}</span>
+                  <span v-if="wheres.length === 0 && !isDragging" class="text-xs text-gray-400 italic">{{ t('qb.whereEmpty') }}</span>
+                  <div v-if="isDragging" class="border-2 border-dashed rounded px-2 py-1 text-xs text-center pointer-events-none transition-colors"
+                       :class="dropHover === 'where' ? 'border-blue-400 text-blue-500 bg-blue-50 dark:bg-blue-900/20' : 'border-gray-300 dark:border-gray-600 text-gray-400'">
+                    {{ t('qb.dropHere', { col: draggedCol }) }}
+                  </div>
                   <div v-for="(w, i) in wheres" :key="i" class="flex items-center gap-1.5">
                     <span class="px-2 py-0.5 rounded bg-gray-100 dark:bg-gray-800 text-xs font-mono">{{ w.col }}</span>
                     <select v-model="w.op" class="text-xs rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 px-1.5 py-1 focus:outline-none">
@@ -91,7 +104,11 @@
                    @dragover.prevent="dropHover = 'order'" @dragleave="dropHover = ''" @drop="onDropOrder">
                 <div class="px-2.5 py-1 text-[11px] font-medium text-gray-500">ORDER BY</div>
                 <div class="px-2.5 pb-2 flex flex-wrap gap-1.5 min-h-[28px] items-center">
-                  <span v-if="orders.length === 0" class="text-xs text-gray-400 italic">{{ t('qb.orderEmpty') }}</span>
+                  <span v-if="orders.length === 0 && !isDragging" class="text-xs text-gray-400 italic">{{ t('qb.orderEmpty') }}</span>
+                  <span v-if="isDragging" class="border-2 border-dashed rounded px-2 py-0.5 text-xs pointer-events-none transition-colors"
+                        :class="dropHover === 'order' ? 'border-blue-400 text-blue-500 bg-blue-50 dark:bg-blue-900/20' : 'border-gray-300 dark:border-gray-600 text-gray-400'">
+                    {{ t('qb.dropHere', { col: draggedCol }) }}
+                  </span>
                   <span v-for="(o, i) in orders" :key="o.col" class="inline-flex items-center gap-1 px-2 py-0.5 rounded bg-gray-100 dark:bg-gray-800 text-xs">
                     {{ o.col }}
                     <button class="text-blue-500 hover:underline cursor-pointer font-mono" @click="o.dir = o.dir === 'ASC' ? 'DESC' : 'ASC'">{{ o.dir }}</button>
@@ -126,19 +143,20 @@
 </template>
 
 <script setup lang="ts">
-import {computed, ref, watch} from 'vue'
+import {computed, nextTick, ref, watch} from 'vue'
 import {invoke} from '@tauri-apps/api/core'
-import {Blocks, GripVertical, Table2, Trash2, X} from 'lucide-vue-next'
+import {Blocks, GripVertical, RotateCcw, Table2, Trash2, X} from 'lucide-vue-next'
 import {useI18n} from 'vue-i18n'
 import Tooltip from '../ui/Tooltip.vue'
 import {useDbConnections} from '../composables/useDbConnections'
+import {kvGetJSON, kvSetJSON} from '../composables/useKvStore'
 import {useToast} from '../plugins/toast'
 import {columnsSql, groupTables, quoteIdent, type Tbl} from '../utils/dbSchema'
 
 const emit = defineEmits<{ preview: [sql: string]; insert: [sql: string] }>()
 const {t} = useI18n()
 const toast = useToast()
-const {resolveActiveSource, activeLabel} = useDbConnections()
+const {resolveActiveSource, activeLabel, activeRef} = useDbConnections()
 
 const OPS = ['=', '!=', '>', '>=', '<', '<=', 'LIKE', 'IS NULL', 'IS NOT NULL']
 
@@ -153,46 +171,111 @@ const wheres = ref<{ col: string; op: string; value: string }[]>([])
 const orders = ref<{ col: string; dir: 'ASC' | 'DESC' }[]>([])
 const limit = ref(100)
 
-// 当前被拖拽的列名 + 悬停中的落区（用于高亮）
+// 当前被拖拽的列名 + 悬停中的落区（用于高亮）+ 是否拖拽中（显示放置提示块）
 const draggedCol = ref('')
 const dropHover = ref('')
+const isDragging = ref(false)
 
 const currentCols = computed(() => tables.value.find(tb => tb.name === table.value)?.columns ?? [])
 
-// 切表时清空所有落区，避免残留其它表的字段
+// 切表时清空所有落区，避免残留其它表的字段（恢复状态期间不触发）
+let restoring = false
 watch(table, () => {
+  if (restoring) {
+    return
+  }
   selectedCols.value = []
   wheres.value = []
   orders.value = []
 })
 
+// ---- 状态记忆：按数据源分别持久化，重开时恢复 ----
+interface QbState {
+  table: string
+  selectedCols: string[]
+  wheres: { col: string; op: string; value: string }[]
+  orders: { col: string; dir: 'ASC' | 'DESC' }[]
+  limit: number
+}
+const stateKey = () => `qb-state:${activeRef.value}`
+const persist = () => {
+  if (restoring || !visible.value || !table.value) {
+    return
+  }
+  kvSetJSON(stateKey(), {
+    table: table.value,
+    selectedCols: selectedCols.value,
+    wheres: wheres.value,
+    orders: orders.value,
+    limit: limit.value
+  })
+}
+watch([table, selectedCols, wheres, orders, limit], persist, {deep: true})
+
+// 从持久化状态恢复（仅保留当前 schema 中仍存在的表/列）
+const restoreState = async () => {
+  const saved = kvGetJSON<QbState | null>(stateKey(), null)
+  if (!saved || !tables.value.some(tb => tb.name === saved.table)) {
+    return false
+  }
+  const cols = new Set((tables.value.find(tb => tb.name === saved.table)?.columns ?? []).map(c => c.name))
+  restoring = true
+  table.value = saved.table
+  selectedCols.value = (saved.selectedCols || []).filter(c => cols.has(c))
+  wheres.value = (saved.wheres || []).filter(w => cols.has(w.col))
+  orders.value = (saved.orders || []).filter(o => cols.has(o.col))
+  limit.value = saved.limit ?? 100
+  await nextTick()
+  restoring = false
+  return true
+}
+
+const reset = () => {
+  restoring = true
+  selectedCols.value = []
+  wheres.value = []
+  orders.value = []
+  limit.value = 100
+  nextTick(() => {
+    restoring = false
+    persist()
+  })
+}
+
 const zoneClass = (zone: string) =>
   dropHover.value === zone
     ? 'border-blue-400 bg-blue-50/50 dark:bg-blue-900/10'
     : 'border-gray-200 dark:border-gray-700'
 
-const onDropSelect = () => {
+const onDragStart = (col: string) => {
+  draggedCol.value = col
+  isDragging.value = true
+  dropHover.value = ''
+}
+const onDragEnd = () => {
+  isDragging.value = false
   dropHover.value = ''
+  draggedCol.value = ''
+}
+const onDropSelect = () => {
   const c = draggedCol.value
   if (c && !selectedCols.value.includes(c)) {
     selectedCols.value.push(c)
   }
-  draggedCol.value = ''
+  onDragEnd()
 }
 const onDropWhere = () => {
-  dropHover.value = ''
   if (draggedCol.value) {
     wheres.value.push({col: draggedCol.value, op: '=', value: ''})
   }
-  draggedCol.value = ''
+  onDragEnd()
 }
 const onDropOrder = () => {
-  dropHover.value = ''
   const c = draggedCol.value
   if (c && !orders.value.some(o => o.col === c)) {
     orders.value.push({col: c, dir: 'ASC'})
   }
-  draggedCol.value = ''
+  onDragEnd()
 }
 
 const kind = () => resolveActiveSource().kind
@@ -241,7 +324,9 @@ const load = async () => {
       throw new Error(res.error)
     }
     tables.value = groupTables((res.result_sets || [])[0]?.rows || [])
-    if (tables.value.length && !tables.value.find(tb => tb.name === table.value)) {
+    // 优先恢复上次内容；无可恢复且当前表无效时回退到第一张表
+    const restored = await restoreState()
+    if (!restored && tables.value.length && !tables.value.find(tb => tb.name === table.value)) {
       table.value = tables.value[0].name
     }
   }
diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
index 25d0b3d5..9c71d7c1 100644
--- a/src/i18n/locales/en.json
+++ b/src/i18n/locales/en.json
@@ -1036,6 +1036,8 @@
   "qb": {
     "title": "Query builder",
     "dragHint": "Drag columns from the left into the zones below",
+    "dropHere": "Release to add {col}",
+    "reset": "Reset",
     "loading": "Loading schema…",
     "noTables": "No tables in the current source (pick a database first for MySQL)",
     "tables": "Tables",
diff --git a/src/i18n/locales/zh-CN.json b/src/i18n/locales/zh-CN.json
index 0ae9ad4b..e2be6fe8 100644
--- a/src/i18n/locales/zh-CN.json
+++ b/src/i18n/locales/zh-CN.json
@@ -1036,6 +1036,8 @@
   "qb": {
     "title": "查询构建器",
     "dragHint": "从左侧把列拖到下方落区",
+    "dropHere": "松开以添加 {col}",
+    "reset": "清空",
     "loading": "加载表结构中…",
     "noTables": "当前数据源没有可用的表（MySQL 请先选择数据库）",
     "tables": "表",

From 95d8e327206ce02f10c044e25aee0c0e7207b180 Mon Sep 17 00:00:00 2001
From: qianmoQ <shicheng@devlive.org>
Date: Mon, 6 Jul 2026 12:12:15 +0800
Subject: [PATCH 13/23] =?UTF-8?q?feat(sql):=20=E6=9F=A5=E8=AF=A2=E6=9E=84?=
 =?UTF-8?q?=E5=BB=BA=E5=99=A8=E7=B1=BB=E5=9E=8B=E6=84=9F=E7=9F=A5=20WHERE?=
 =?UTF-8?q?=EF=BC=88=E8=BF=90=E7=AE=97=E7=AC=A6=E9=9A=8F=E5=88=97=E7=B1=BB?=
 =?UTF-8?q?=E5=9E=8B=E5=8F=98=E5=8C=96=EF=BC=8C=E5=80=BC=E8=BE=93=E5=85=A5?=
 =?UTF-8?q?=E9=80=82=E9=85=8D=20BETWEEN/IN/=E5=B8=83=E5=B0=94/=E6=97=A5?=
 =?UTF-8?q?=E6=9C=9F=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/QueryBuilder.vue | 123 ++++++++++++++++++++++++++------
 src/i18n/locales/en.json        |   4 ++
 src/i18n/locales/zh-CN.json     |   4 ++
 3 files changed, 110 insertions(+), 21 deletions(-)

diff --git a/src/components/QueryBuilder.vue b/src/components/QueryBuilder.vue
index 42149f48..e0d9b820 100644
--- a/src/components/QueryBuilder.vue
+++ b/src/components/QueryBuilder.vue
@@ -87,14 +87,29 @@
                     {{ t('qb.dropHere', { col: draggedCol }) }}
                   </div>
                   <div v-for="(w, i) in wheres" :key="i" class="flex items-center gap-1.5">
-                    <span class="px-2 py-0.5 rounded bg-gray-100 dark:bg-gray-800 text-xs font-mono">{{ w.col }}</span>
-                    <select v-model="w.op" class="text-xs rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 px-1.5 py-1 focus:outline-none">
-                      <option v-for="op in OPS" :key="op" :value="op">{{ op }}</option>
+                    <span class="px-2 py-0.5 rounded bg-gray-100 dark:bg-gray-800 text-xs font-mono flex-shrink-0">{{ w.col }}</span>
+                    <select v-model="w.op" class="text-xs rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 px-1.5 py-1 focus:outline-none flex-shrink-0">
+                      <option v-for="op in opsFor(w.col)" :key="op" :value="op">{{ opLabel(op) }}</option>
                     </select>
-                    <input v-model="w.value" :disabled="w.op === 'IS NULL' || w.op === 'IS NOT NULL'"
-                           :placeholder="t('qb.value')"
-                           class="flex-1 min-w-0 text-xs rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 px-2 py-1 focus:outline-none disabled:opacity-40"/>
-                    <button class="text-gray-400 hover:text-red-500 cursor-pointer p-1" @click="wheres.splice(i, 1)"><Trash2 class="w-3.5 h-3.5"/></button>
+                    <!-- 值编辑区：随运算符/类型自适应 -->
+                    <template v-if="w.op !== 'IS NULL' && w.op !== 'IS NOT NULL'">
+                      <template v-if="w.op === 'BETWEEN'">
+                        <input v-model="w.value" :type="inputType(w.col)" :placeholder="t('qb.value')"
+                               class="w-28 min-w-0 text-xs rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 px-2 py-1 focus:outline-none"/>
+                        <span class="text-xs text-gray-400">AND</span>
+                        <input v-model="w.value2" :type="inputType(w.col)" :placeholder="t('qb.value')"
+                               class="w-28 min-w-0 text-xs rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 px-2 py-1 focus:outline-none"/>
+                      </template>
+                      <select v-else-if="colType(w.col) === 'boolean'" v-model="w.value"
+                              class="text-xs rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 px-1.5 py-1 focus:outline-none">
+                        <option value="true">TRUE</option>
+                        <option value="false">FALSE</option>
+                      </select>
+                      <input v-else v-model="w.value" :type="w.op === 'IN' ? 'text' : inputType(w.col)"
+                             :placeholder="w.op === 'IN' ? t('qb.inPlaceholder') : t('qb.value')"
+                             class="flex-1 min-w-0 text-xs rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 px-2 py-1 focus:outline-none"/>
+                    </template>
+                    <button class="text-gray-400 hover:text-red-500 cursor-pointer p-1 ml-auto flex-shrink-0" @click="wheres.splice(i, 1)"><Trash2 class="w-3.5 h-3.5"/></button>
                   </div>
                 </div>
               </div>
@@ -158,7 +173,34 @@ const {t} = useI18n()
 const toast = useToast()
 const {resolveActiveSource, activeLabel, activeRef} = useDbConnections()
 
-const OPS = ['=', '!=', '>', '>=', '<', '<=', 'LIKE', 'IS NULL', 'IS NOT NULL']
+type TypeCat = 'number' | 'string' | 'date' | 'boolean' | 'other'
+
+// 各类型可用的运算符（contains/starts/ends 为 LIKE 语义预设）
+const OPS_BY_CAT: Record<TypeCat, string[]> = {
+  number: ['=', '!=', '>', '>=', '<', '<=', 'BETWEEN', 'IN', 'IS NULL', 'IS NOT NULL'],
+  string: ['contains', 'starts', 'ends', '=', '!=', 'LIKE', 'NOT LIKE', 'IN', 'IS NULL', 'IS NOT NULL'],
+  date: ['=', '!=', '>', '>=', '<', '<=', 'BETWEEN', 'IS NULL', 'IS NOT NULL'],
+  boolean: ['=', 'IS NULL', 'IS NOT NULL'],
+  other: ['=', '!=', 'IS NULL', 'IS NOT NULL']
+}
+
+// 由列的声明类型归类
+const typeCategory = (type: string): TypeCat => {
+  const s = (type || '').toLowerCase()
+  if (/bool|\bbit\b|tinyint\(1\)/.test(s)) {
+    return 'boolean'
+  }
+  if (/int|dec|numeric|real|double|float|serial|money|number/.test(s)) {
+    return 'number'
+  }
+  if (/date|time|timestamp|year/.test(s)) {
+    return 'date'
+  }
+  if (/char|text|clob|string|uuid|enum|json/.test(s)) {
+    return 'string'
+  }
+  return 'other'
+}
 
 const visible = ref(false)
 const loading = ref(false)
@@ -167,10 +209,18 @@ const tables = ref<Tbl[]>([])
 
 const table = ref('')
 const selectedCols = ref<string[]>([])
-const wheres = ref<{ col: string; op: string; value: string }[]>([])
+const wheres = ref<{ col: string; op: string; value: string; value2?: string }[]>([])
 const orders = ref<{ col: string; dir: 'ASC' | 'DESC' }[]>([])
 const limit = ref(100)
 
+// 按列名取类型分类 / 该列可用运算符 / 输入框类型
+const colType = (col: string): TypeCat => typeCategory(currentCols.value.find(c => c.name === col)?.type ?? '')
+const opsFor = (col: string) => OPS_BY_CAT[colType(col)]
+const inputType = (col: string) => (colType(col) === 'date' ? 'date' : 'text')
+const opLabel = (op: string) =>
+  op === 'contains' ? t('qb.opContains') : op === 'starts' ? t('qb.opStarts') : op === 'ends' ? t('qb.opEnds') : op
+const defaultOp = (col: string) => (colType(col) === 'string' ? 'contains' : '=')
+
 // 当前被拖拽的列名 + 悬停中的落区（用于高亮）+ 是否拖拽中（显示放置提示块）
 const draggedCol = ref('')
 const dropHover = ref('')
@@ -193,7 +243,7 @@ watch(table, () => {
 interface QbState {
   table: string
   selectedCols: string[]
-  wheres: { col: string; op: string; value: string }[]
+  wheres: { col: string; op: string; value: string; value2?: string }[]
   orders: { col: string; dir: 'ASC' | 'DESC' }[]
   limit: number
 }
@@ -265,8 +315,9 @@ const onDropSelect = () => {
   onDragEnd()
 }
 const onDropWhere = () => {
-  if (draggedCol.value) {
-    wheres.value.push({col: draggedCol.value, op: '=', value: ''})
+  const c = draggedCol.value
+  if (c) {
+    wheres.value.push({col: c, op: defaultOp(c), value: '', value2: ''})
   }
   onDragEnd()
 }
@@ -281,13 +332,47 @@ const onDropOrder = () => {
 const kind = () => resolveActiveSource().kind
 const q = (name: string) => quoteIdent(kind(), name)
 
-// 值字面量：LIKE 恒为字符串；其余若为纯数字则原样，否则加引号并转义
-const literal = (op: string, v: string): string => {
+const strLit = (s: string) => `'${String(s ?? '').replace(/'/g, "''")}'`
+// 按类型生成字面量：布尔→1/0，数字→原样，日期/字符串→带引号转义
+const litByCat = (cat: TypeCat, v: string): string => {
   const s = String(v ?? '')
-  if (op !== 'LIKE' && s.trim() !== '' && !isNaN(Number(s))) {
+  if (cat === 'boolean') {
+    return s === 'true' || s === '1' ? '1' : '0'
+  }
+  if (cat === 'number' && s.trim() !== '' && !isNaN(Number(s))) {
     return s
   }
-  return `'${s.replace(/'/g, "''")}'`
+  return strLit(s)
+}
+
+// 单个 WHERE 条件 → SQL 片段（无效条件返回空串，由上层过滤）
+const condSql = (w: { col: string; op: string; value: string; value2?: string }): string => {
+  const col = q(w.col)
+  const cat = colType(w.col)
+  switch (w.op) {
+    case 'IS NULL':
+    case 'IS NOT NULL':
+      return `${col} ${w.op}`
+    case 'BETWEEN':
+      return (w.value.trim() && (w.value2 ?? '').trim())
+        ? `${col} BETWEEN ${litByCat(cat, w.value)} AND ${litByCat(cat, w.value2 || '')}`
+        : ''
+    case 'IN': {
+      const items = w.value.split(',').map(s => s.trim()).filter(Boolean).map(v => litByCat(cat, v))
+      return items.length ? `${col} IN (${items.join(', ')})` : ''
+    }
+    case 'contains':
+      return w.value.trim() ? `${col} LIKE ${strLit('%' + w.value + '%')}` : ''
+    case 'starts':
+      return w.value.trim() ? `${col} LIKE ${strLit(w.value + '%')}` : ''
+    case 'ends':
+      return w.value.trim() ? `${col} LIKE ${strLit('%' + w.value)}` : ''
+    case 'LIKE':
+    case 'NOT LIKE':
+      return w.value.trim() ? `${col} ${w.op} ${strLit(w.value)}` : ''
+    default:
+      return w.value.trim() ? `${col} ${w.op} ${litByCat(cat, w.value)}` : ''
+  }
 }
 
 const sql = computed(() => {
@@ -296,11 +381,7 @@ const sql = computed(() => {
   }
   const cols = selectedCols.value.length === 0 ? '*' : selectedCols.value.map(q).join(', ')
   let out = `SELECT ${cols} FROM ${q(table.value)}`
-  const conds = wheres.value
-    .filter(w => w.col)
-    .map(w => (w.op === 'IS NULL' || w.op === 'IS NOT NULL')
-      ? `${q(w.col)} ${w.op}`
-      : `${q(w.col)} ${w.op} ${literal(w.op, w.value)}`)
+  const conds = wheres.value.filter(w => w.col).map(condSql).filter(Boolean)
   if (conds.length) {
     out += ' WHERE ' + conds.join(' AND ')
   }
diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
index 9c71d7c1..504c522d 100644
--- a/src/i18n/locales/en.json
+++ b/src/i18n/locales/en.json
@@ -1043,6 +1043,10 @@
     "tables": "Tables",
     "columns": "Columns",
     "value": "Value",
+    "inPlaceholder": "val1, val2, …",
+    "opContains": "contains",
+    "opStarts": "starts with",
+    "opEnds": "ends with",
     "selectEmpty": "Drag columns here; empty means *",
     "whereEmpty": "Drag a column here to add a condition",
     "orderEmpty": "Drag a column here to sort",
diff --git a/src/i18n/locales/zh-CN.json b/src/i18n/locales/zh-CN.json
index e2be6fe8..4c00068f 100644
--- a/src/i18n/locales/zh-CN.json
+++ b/src/i18n/locales/zh-CN.json
@@ -1043,6 +1043,10 @@
     "tables": "表",
     "columns": "列",
     "value": "值",
+    "inPlaceholder": "值1, 值2, …",
+    "opContains": "包含",
+    "opStarts": "开头是",
+    "opEnds": "结尾是",
     "selectEmpty": "拖拽列到此；留空表示 *",
     "whereEmpty": "拖拽列到此添加条件",
     "orderEmpty": "拖拽列到此排序",

From d8311f9517e1cc48bd24ca1da44e2a04cb84c9af Mon Sep 17 00:00:00 2001
From: qianmoQ <shicheng@devlive.org>
Date: Mon, 6 Jul 2026 12:26:43 +0800
Subject: [PATCH 14/23] =?UTF-8?q?feat(sql):=20=E6=9F=A5=E8=AF=A2=E6=9E=84?=
 =?UTF-8?q?=E5=BB=BA=E5=99=A8=E6=94=AF=E6=8C=81=E8=81=9A=E5=90=88=E5=87=BD?=
 =?UTF-8?q?=E6=95=B0/=E5=88=AB=E5=90=8D/DISTINCT/GROUP=20BY=EF=BC=88?=
 =?UTF-8?q?=E5=90=AB=E8=87=AA=E5=8A=A8=E5=88=86=E7=BB=84=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/QueryBuilder.vue | 120 ++++++++++++++++++++++++++------
 src/i18n/locales/en.json        |   4 ++
 src/i18n/locales/zh-CN.json     |   4 ++
 3 files changed, 106 insertions(+), 22 deletions(-)

diff --git a/src/components/QueryBuilder.vue b/src/components/QueryBuilder.vue
index e0d9b820..3c4752fe 100644
--- a/src/components/QueryBuilder.vue
+++ b/src/components/QueryBuilder.vue
@@ -59,20 +59,31 @@
 
             <!-- 右：落区 + SQL 预览 -->
             <div class="flex-1 min-w-0 overflow-auto p-3 flex flex-col gap-3">
-              <!-- SELECT 列 -->
+              <!-- SELECT 列（可套函数 + 别名 + DISTINCT） -->
               <div class="rounded border transition-colors" :class="zoneClass('select')"
                    @dragover.prevent="dropHover = 'select'" @dragleave="dropHover = ''" @drop="onDropSelect">
-                <div class="px-2.5 py-1 text-[11px] font-medium text-gray-500 flex items-center gap-1">SELECT</div>
-                <div class="px-2.5 pb-2 flex flex-wrap gap-1.5 min-h-[28px] items-center">
-                  <span v-if="selectedCols.length === 0 && !isDragging" class="text-xs text-gray-400 italic">{{ t('qb.selectEmpty') }}</span>
-                  <span v-for="(col, i) in selectedCols" :key="col" class="inline-flex items-center gap-1 px-2 py-0.5 rounded bg-blue-50 dark:bg-blue-900/30 text-blue-600 dark:text-blue-300 text-xs">
-                    {{ col }}
-                    <button class="hover:text-red-500 cursor-pointer" @click="selectedCols.splice(i, 1)"><X class="w-3 h-3"/></button>
-                  </span>
-                  <span v-if="isDragging" class="border-2 border-dashed rounded px-2 py-0.5 text-xs pointer-events-none transition-colors"
-                        :class="dropHover === 'select' ? 'border-blue-400 text-blue-500 bg-blue-50 dark:bg-blue-900/20' : 'border-gray-300 dark:border-gray-600 text-gray-400'">
+                <div class="px-2.5 py-1 text-[11px] font-medium text-gray-500 flex items-center gap-2">
+                  <span>SELECT</span>
+                  <label class="inline-flex items-center gap-1 font-normal cursor-pointer">
+                    <input type="checkbox" v-model="distinct" class="cursor-pointer"/> DISTINCT
+                  </label>
+                </div>
+                <div class="px-2.5 pb-2 flex flex-col gap-1.5 min-h-[28px]">
+                  <span v-if="selectItems.length === 0 && !isDragging" class="text-xs text-gray-400 italic">{{ t('qb.selectEmpty') }}</span>
+                  <div v-if="isDragging" class="border-2 border-dashed rounded px-2 py-1 text-xs text-center pointer-events-none transition-colors"
+                       :class="dropHover === 'select' ? 'border-blue-400 text-blue-500 bg-blue-50 dark:bg-blue-900/20' : 'border-gray-300 dark:border-gray-600 text-gray-400'">
                     {{ t('qb.dropHere', { col: draggedCol }) }}
-                  </span>
+                  </div>
+                  <div v-for="(it, i) in selectItems" :key="i" class="flex items-center gap-1.5">
+                    <select v-model="it.fn" class="text-xs rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 px-1.5 py-1 focus:outline-none flex-shrink-0">
+                      <option v-for="fn in FUNCS" :key="fn" :value="fn">{{ fn || t('qb.noFn') }}</option>
+                    </select>
+                    <span class="px-2 py-0.5 rounded bg-blue-50 dark:bg-blue-900/30 text-blue-600 dark:text-blue-300 text-xs font-mono flex-shrink-0">{{ it.col }}</span>
+                    <span class="text-[11px] text-gray-400 flex-shrink-0">AS</span>
+                    <input v-model="it.alias" :placeholder="t('qb.aliasPlaceholder')"
+                           class="flex-1 min-w-0 text-xs rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 px-2 py-1 focus:outline-none"/>
+                    <button class="text-gray-400 hover:text-red-500 cursor-pointer p-1 flex-shrink-0" @click="selectItems.splice(i, 1)"><Trash2 class="w-3.5 h-3.5"/></button>
+                  </div>
                 </div>
               </div>
 
@@ -114,6 +125,26 @@
                 </div>
               </div>
 
+              <!-- GROUP BY -->
+              <div class="rounded border transition-colors" :class="zoneClass('group')"
+                   @dragover.prevent="dropHover = 'group'" @dragleave="dropHover = ''" @drop="onDropGroup">
+                <div class="px-2.5 py-1 text-[11px] font-medium text-gray-500 flex items-center gap-2">
+                  <span>GROUP BY</span>
+                  <button v-if="hasAggregate" class="font-normal text-blue-500 hover:underline cursor-pointer" @click="autoGroupBy">{{ t('qb.autoGroup') }}</button>
+                </div>
+                <div class="px-2.5 pb-2 flex flex-wrap gap-1.5 min-h-[28px] items-center">
+                  <span v-if="groupBy.length === 0 && !isDragging" class="text-xs text-gray-400 italic">{{ t('qb.groupEmpty') }}</span>
+                  <span v-if="isDragging" class="border-2 border-dashed rounded px-2 py-0.5 text-xs pointer-events-none transition-colors"
+                        :class="dropHover === 'group' ? 'border-blue-400 text-blue-500 bg-blue-50 dark:bg-blue-900/20' : 'border-gray-300 dark:border-gray-600 text-gray-400'">
+                    {{ t('qb.dropHere', { col: draggedCol }) }}
+                  </span>
+                  <span v-for="(g, i) in groupBy" :key="g" class="inline-flex items-center gap-1 px-2 py-0.5 rounded bg-gray-100 dark:bg-gray-800 text-xs font-mono">
+                    {{ g }}
+                    <button class="hover:text-red-500 cursor-pointer" @click="groupBy.splice(i, 1)"><X class="w-3 h-3"/></button>
+                  </span>
+                </div>
+              </div>
+
               <!-- ORDER BY -->
               <div class="rounded border transition-colors" :class="zoneClass('order')"
                    @dragover.prevent="dropHover = 'order'" @dragleave="dropHover = ''" @drop="onDropOrder">
@@ -207,12 +238,19 @@ const loading = ref(false)
 const error = ref('')
 const tables = ref<Tbl[]>([])
 
+// 可用的聚合/函数（'' 表示不套函数）
+const FUNCS = ['', 'COUNT', 'SUM', 'AVG', 'MIN', 'MAX', 'COUNT DISTINCT']
+
 const table = ref('')
-const selectedCols = ref<string[]>([])
+const selectItems = ref<{ col: string; fn: string; alias: string }[]>([])
+const distinct = ref(false)
+const groupBy = ref<string[]>([])
 const wheres = ref<{ col: string; op: string; value: string; value2?: string }[]>([])
 const orders = ref<{ col: string; dir: 'ASC' | 'DESC' }[]>([])
 const limit = ref(100)
 
+const hasAggregate = computed(() => selectItems.value.some(it => it.fn))
+
 // 按列名取类型分类 / 该列可用运算符 / 输入框类型
 const colType = (col: string): TypeCat => typeCategory(currentCols.value.find(c => c.name === col)?.type ?? '')
 const opsFor = (col: string) => OPS_BY_CAT[colType(col)]
@@ -234,7 +272,9 @@ watch(table, () => {
   if (restoring) {
     return
   }
-  selectedCols.value = []
+  selectItems.value = []
+  distinct.value = false
+  groupBy.value = []
   wheres.value = []
   orders.value = []
 })
@@ -242,10 +282,13 @@ watch(table, () => {
 // ---- 状态记忆：按数据源分别持久化，重开时恢复 ----
 interface QbState {
   table: string
-  selectedCols: string[]
+  selectItems?: { col: string; fn: string; alias: string }[]
+  distinct?: boolean
+  groupBy?: string[]
   wheres: { col: string; op: string; value: string; value2?: string }[]
   orders: { col: string; dir: 'ASC' | 'DESC' }[]
   limit: number
+  selectedCols?: string[] // 旧版本字段，兼容迁移
 }
 const stateKey = () => `qb-state:${activeRef.value}`
 const persist = () => {
@@ -254,13 +297,15 @@ const persist = () => {
   }
   kvSetJSON(stateKey(), {
     table: table.value,
-    selectedCols: selectedCols.value,
+    selectItems: selectItems.value,
+    distinct: distinct.value,
+    groupBy: groupBy.value,
     wheres: wheres.value,
     orders: orders.value,
     limit: limit.value
   })
 }
-watch([table, selectedCols, wheres, orders, limit], persist, {deep: true})
+watch([table, selectItems, distinct, groupBy, wheres, orders, limit], persist, {deep: true})
 
 // 从持久化状态恢复（仅保留当前 schema 中仍存在的表/列）
 const restoreState = async () => {
@@ -269,9 +314,13 @@ const restoreState = async () => {
     return false
   }
   const cols = new Set((tables.value.find(tb => tb.name === saved.table)?.columns ?? []).map(c => c.name))
+  // 优先用新字段；否则从旧版 selectedCols 迁移
+  const items = saved.selectItems ?? (saved.selectedCols || []).map(c => ({col: c, fn: '', alias: ''}))
   restoring = true
   table.value = saved.table
-  selectedCols.value = (saved.selectedCols || []).filter(c => cols.has(c))
+  selectItems.value = items.filter(it => cols.has(it.col))
+  distinct.value = !!saved.distinct
+  groupBy.value = (saved.groupBy || []).filter(c => cols.has(c))
   wheres.value = (saved.wheres || []).filter(w => cols.has(w.col))
   orders.value = (saved.orders || []).filter(o => cols.has(o.col))
   limit.value = saved.limit ?? 100
@@ -282,7 +331,9 @@ const restoreState = async () => {
 
 const reset = () => {
   restoring = true
-  selectedCols.value = []
+  selectItems.value = []
+  distinct.value = false
+  groupBy.value = []
   wheres.value = []
   orders.value = []
   limit.value = 100
@@ -291,6 +342,10 @@ const reset = () => {
     persist()
   })
 }
+// 自动分组：把 SELECT 中未套聚合函数的列填入 GROUP BY
+const autoGroupBy = () => {
+  groupBy.value = selectItems.value.filter(it => !it.fn).map(it => it.col)
+}
 
 const zoneClass = (zone: string) =>
   dropHover.value === zone
@@ -309,8 +364,9 @@ const onDragEnd = () => {
 }
 const onDropSelect = () => {
   const c = draggedCol.value
-  if (c && !selectedCols.value.includes(c)) {
-    selectedCols.value.push(c)
+  if (c) {
+    // 允许同列多次加入（可套不同聚合函数）
+    selectItems.value.push({col: c, fn: '', alias: ''})
   }
   onDragEnd()
 }
@@ -328,10 +384,27 @@ const onDropOrder = () => {
   }
   onDragEnd()
 }
+const onDropGroup = () => {
+  const c = draggedCol.value
+  if (c && !groupBy.value.includes(c)) {
+    groupBy.value.push(c)
+  }
+  onDragEnd()
+}
 
 const kind = () => resolveActiveSource().kind
 const q = (name: string) => quoteIdent(kind(), name)
 
+// SELECT 项 → SQL 片段：套函数 + 可选别名
+const itemSql = (it: { col: string; fn: string; alias: string }): string => {
+  const base = it.fn === 'COUNT DISTINCT'
+    ? `COUNT(DISTINCT ${q(it.col)})`
+    : it.fn
+      ? `${it.fn}(${q(it.col)})`
+      : q(it.col)
+  return it.alias.trim() ? `${base} AS ${q(it.alias.trim())}` : base
+}
+
 const strLit = (s: string) => `'${String(s ?? '').replace(/'/g, "''")}'`
 // 按类型生成字面量：布尔→1/0，数字→原样，日期/字符串→带引号转义
 const litByCat = (cat: TypeCat, v: string): string => {
@@ -379,12 +452,15 @@ const sql = computed(() => {
   if (!table.value) {
     return ''
   }
-  const cols = selectedCols.value.length === 0 ? '*' : selectedCols.value.map(q).join(', ')
-  let out = `SELECT ${cols} FROM ${q(table.value)}`
+  const cols = selectItems.value.length === 0 ? '*' : selectItems.value.map(itemSql).join(', ')
+  let out = `SELECT ${distinct.value ? 'DISTINCT ' : ''}${cols} FROM ${q(table.value)}`
   const conds = wheres.value.filter(w => w.col).map(condSql).filter(Boolean)
   if (conds.length) {
     out += ' WHERE ' + conds.join(' AND ')
   }
+  if (groupBy.value.length) {
+    out += ' GROUP BY ' + groupBy.value.map(q).join(', ')
+  }
   if (orders.value.length) {
     out += ' ORDER BY ' + orders.value.map(o => `${q(o.col)} ${o.dir}`).join(', ')
   }
diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
index 504c522d..3c82a565 100644
--- a/src/i18n/locales/en.json
+++ b/src/i18n/locales/en.json
@@ -1050,6 +1050,10 @@
     "selectEmpty": "Drag columns here; empty means *",
     "whereEmpty": "Drag a column here to add a condition",
     "orderEmpty": "Drag a column here to sort",
+    "groupEmpty": "Drag a column here to group",
+    "noFn": "No function",
+    "aliasPlaceholder": "alias (optional)",
+    "autoGroup": "Auto group",
     "limit": "Limit",
     "preview": "SQL preview",
     "copy": "Copy",
diff --git a/src/i18n/locales/zh-CN.json b/src/i18n/locales/zh-CN.json
index 4c00068f..ca08300d 100644
--- a/src/i18n/locales/zh-CN.json
+++ b/src/i18n/locales/zh-CN.json
@@ -1050,6 +1050,10 @@
     "selectEmpty": "拖拽列到此；留空表示 *",
     "whereEmpty": "拖拽列到此添加条件",
     "orderEmpty": "拖拽列到此排序",
+    "groupEmpty": "拖拽列到此分组",
+    "noFn": "无函数",
+    "aliasPlaceholder": "别名（可选）",
+    "autoGroup": "自动分组",
     "limit": "限制",
     "preview": "SQL 预览",
     "copy": "复制",

From de3f171a605002724c3501e5bf457483ea1164e6 Mon Sep 17 00:00:00 2001
From: qianmoQ <shicheng@devlive.org>
Date: Mon, 6 Jul 2026 13:53:13 +0800
Subject: [PATCH 15/23] =?UTF-8?q?feat(sql):=20=E6=9F=A5=E8=AF=A2=E6=9E=84?=
 =?UTF-8?q?=E5=BB=BA=E5=99=A8=E6=94=AF=E6=8C=81=E5=A4=9A=E8=A1=A8=20JOIN?=
 =?UTF-8?q?=20=E4=B8=8E=20HAVING=EF=BC=88=E5=88=97=E8=87=AA=E5=8A=A8?=
 =?UTF-8?q?=E5=B8=A6=E8=A1=A8=E9=99=90=E5=AE=9A=EF=BC=8CON=20=E6=9D=A1?=
 =?UTF-8?q?=E4=BB=B6=E5=8F=AF=E9=85=8D=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/QueryBuilder.vue | 491 ++++++++++++++++++++------------
 src/i18n/locales/en.json        |   2 +
 src/i18n/locales/zh-CN.json     |   2 +
 3 files changed, 320 insertions(+), 175 deletions(-)

diff --git a/src/components/QueryBuilder.vue b/src/components/QueryBuilder.vue
index 3c4752fe..2faaa6e3 100644
--- a/src/components/QueryBuilder.vue
+++ b/src/components/QueryBuilder.vue
@@ -8,7 +8,7 @@
 
     <Teleport to="body">
       <div v-if="visible" class="fixed inset-0 z-50 flex items-start justify-center pt-10 px-6 pb-6" @click="visible = false">
-        <div class="w-full max-w-[960px] h-[82vh] bg-white dark:bg-gray-900 dark:text-gray-100 rounded-lg shadow-2xl border border-gray-200 dark:border-gray-700 flex flex-col overflow-hidden" @click.stop>
+        <div class="w-full max-w-[980px] h-[84vh] bg-white dark:bg-gray-900 dark:text-gray-100 rounded-lg shadow-2xl border border-gray-200 dark:border-gray-700 flex flex-col overflow-hidden" @click.stop>
           <!-- 标题栏 -->
           <div class="flex items-center justify-between px-4 py-2.5 border-b border-gray-200 dark:border-gray-700 flex-shrink-0">
             <div class="flex items-center gap-2 text-sm font-medium text-gray-700 dark:text-gray-200">
@@ -31,35 +31,69 @@
           <div v-else-if="tables.length === 0" class="flex-1 flex items-center justify-center text-sm text-gray-400 px-6 text-center">{{ t('qb.noTables') }}</div>
 
           <div v-else class="flex-1 flex min-h-0">
-            <!-- 左：结构面板（表 + 可拖拽的列） -->
+            <!-- 左：字段面板（按已用表分组的可拖拽列） -->
             <div class="w-56 flex-shrink-0 border-r border-gray-200 dark:border-gray-700 flex flex-col min-h-0">
-              <div class="px-3 py-1.5 text-[11px] uppercase tracking-wide text-gray-400 flex-shrink-0">{{ t('qb.tables') }}</div>
-              <div class="overflow-auto flex-shrink-0 max-h-40 border-b border-gray-100 dark:border-gray-800">
-                <button v-for="tb in tables" :key="tb.name"
-                        class="w-full text-left px-3 py-1 text-xs flex items-center gap-1.5 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-800"
-                        :class="tb.name === table ? 'bg-blue-50 dark:bg-blue-900/30 text-blue-600 dark:text-blue-300' : 'text-gray-600 dark:text-gray-300'"
-                        @click="table = tb.name">
-                  <Table2 class="w-3.5 h-3.5 flex-shrink-0"/>
-                  <span class="truncate">{{ tb.name }}</span>
-                  <span class="ml-auto text-[10px] text-gray-400">{{ tb.columns.length }}</span>
-                </button>
-              </div>
               <div class="px-3 py-1.5 text-[11px] uppercase tracking-wide text-gray-400 flex-shrink-0">{{ t('qb.columns') }}</div>
               <div class="overflow-auto flex-1 px-2 pb-2 flex flex-col gap-1">
-                <div v-for="c in currentCols" :key="c.name"
-                     draggable="true"
-                     class="flex items-center gap-1.5 px-2 py-1 rounded border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-xs cursor-grab active:cursor-grabbing hover:border-blue-400"
-                     @dragstart="onDragStart(c.name)" @dragend="onDragEnd">
-                  <GripVertical class="w-3 h-3 text-gray-300 flex-shrink-0"/>
-                  <span class="truncate">{{ c.name }}</span>
-                  <span class="ml-auto text-[10px] text-gray-400 flex-shrink-0">{{ c.type }}</span>
-                </div>
+                <template v-for="tn in usedTables" :key="tn">
+                  <div class="flex items-center gap-1.5 px-1 pt-1 text-[11px] text-gray-500 dark:text-gray-400 font-medium">
+                    <Table2 class="w-3 h-3 flex-shrink-0"/>
+                    <span class="truncate">{{ tn }}</span>
+                    <span class="text-[9px] px-1 rounded bg-gray-100 dark:bg-gray-800 text-gray-400">{{ tn === table ? 'FROM' : 'JOIN' }}</span>
+                  </div>
+                  <div v-for="c in colsOf(tn)" :key="tn + '.' + c.name"
+                       draggable="true"
+                       class="flex items-center gap-1.5 px-2 py-1 rounded border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-xs cursor-grab active:cursor-grabbing hover:border-blue-400"
+                       @dragstart="onDragStart(tn, c.name)" @dragend="onDragEnd">
+                    <GripVertical class="w-3 h-3 text-gray-300 flex-shrink-0"/>
+                    <span class="truncate">{{ c.name }}</span>
+                    <span class="ml-auto text-[10px] text-gray-400 flex-shrink-0">{{ c.type }}</span>
+                  </div>
+                </template>
               </div>
             </div>
 
-            <!-- 右：落区 + SQL 预览 -->
+            <!-- 右：FROM/JOIN + 落区 + SQL 预览 -->
             <div class="flex-1 min-w-0 overflow-auto p-3 flex flex-col gap-3">
-              <!-- SELECT 列（可套函数 + 别名 + DISTINCT） -->
+              <!-- FROM / JOIN -->
+              <div class="rounded border border-gray-200 dark:border-gray-700">
+                <div class="px-2.5 py-1 text-[11px] font-medium text-gray-500">FROM / JOIN</div>
+                <div class="px-2.5 pb-2 flex flex-col gap-1.5">
+                  <div class="flex items-center gap-1.5">
+                    <span class="text-[11px] text-gray-400 w-10 flex-shrink-0">FROM</span>
+                    <select v-model="table" class="text-xs rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 px-2 py-1 focus:outline-none min-w-[160px]">
+                      <option v-for="tb in tables" :key="tb.name" :value="tb.name">{{ tb.name }}</option>
+                    </select>
+                  </div>
+                  <div v-for="(j, i) in joins" :key="i" class="flex items-center gap-1.5 flex-wrap">
+                    <select v-model="j.type" class="text-xs rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 px-1.5 py-1 focus:outline-none flex-shrink-0">
+                      <option v-for="jt in JOIN_TYPES" :key="jt" :value="jt">{{ jt }}</option>
+                    </select>
+                    <span class="text-[11px] text-gray-400">JOIN</span>
+                    <span class="px-2 py-0.5 rounded bg-gray-100 dark:bg-gray-800 text-xs font-mono">{{ j.table }}</span>
+                    <span class="text-[11px] text-gray-400">ON</span>
+                    <select v-model="j.leftT" class="text-xs rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 px-1 py-1 focus:outline-none">
+                      <option v-for="lt in tablesBefore(i)" :key="lt" :value="lt">{{ lt }}</option>
+                    </select>
+                    <select v-model="j.leftC" class="text-xs rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 px-1 py-1 focus:outline-none">
+                      <option v-for="c in colsOf(j.leftT)" :key="c.name" :value="c.name">{{ c.name }}</option>
+                    </select>
+                    <span class="text-xs text-gray-400">=</span>
+                    <span class="text-[11px] text-gray-400 font-mono">{{ j.table }}.</span>
+                    <select v-model="j.rightC" class="text-xs rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 px-1 py-1 focus:outline-none">
+                      <option v-for="c in colsOf(j.table)" :key="c.name" :value="c.name">{{ c.name }}</option>
+                    </select>
+                    <button class="text-gray-400 hover:text-red-500 cursor-pointer p-1" @click="removeJoin(i)"><Trash2 class="w-3.5 h-3.5"/></button>
+                  </div>
+                  <select v-if="unusedTables.length" class="self-start text-xs rounded border border-dashed border-gray-300 dark:border-gray-600 bg-transparent text-blue-500 px-2 py-1 focus:outline-none cursor-pointer"
+                          :value="''" @change="onAddJoin($event)">
+                    <option value="" disabled>{{ t('qb.addJoin') }}</option>
+                    <option v-for="tb in unusedTables" :key="tb.name" :value="tb.name">{{ tb.name }}</option>
+                  </select>
+                </div>
+              </div>
+
+              <!-- SELECT（函数 + 别名 + DISTINCT） -->
               <div class="rounded border transition-colors" :class="zoneClass('select')"
                    @dragover.prevent="dropHover = 'select'" @dragleave="dropHover = ''" @drop="onDropSelect">
                 <div class="px-2.5 py-1 text-[11px] font-medium text-gray-500 flex items-center gap-2">
@@ -72,13 +106,13 @@
                   <span v-if="selectItems.length === 0 && !isDragging" class="text-xs text-gray-400 italic">{{ t('qb.selectEmpty') }}</span>
                   <div v-if="isDragging" class="border-2 border-dashed rounded px-2 py-1 text-xs text-center pointer-events-none transition-colors"
                        :class="dropHover === 'select' ? 'border-blue-400 text-blue-500 bg-blue-50 dark:bg-blue-900/20' : 'border-gray-300 dark:border-gray-600 text-gray-400'">
-                    {{ t('qb.dropHere', { col: draggedCol }) }}
+                    {{ t('qb.dropHere', { col: draggedRef?.c }) }}
                   </div>
                   <div v-for="(it, i) in selectItems" :key="i" class="flex items-center gap-1.5">
                     <select v-model="it.fn" class="text-xs rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 px-1.5 py-1 focus:outline-none flex-shrink-0">
                       <option v-for="fn in FUNCS" :key="fn" :value="fn">{{ fn || t('qb.noFn') }}</option>
                     </select>
-                    <span class="px-2 py-0.5 rounded bg-blue-50 dark:bg-blue-900/30 text-blue-600 dark:text-blue-300 text-xs font-mono flex-shrink-0">{{ it.col }}</span>
+                    <span class="px-2 py-0.5 rounded bg-blue-50 dark:bg-blue-900/30 text-blue-600 dark:text-blue-300 text-xs font-mono flex-shrink-0">{{ refLabel(it) }}</span>
                     <span class="text-[11px] text-gray-400 flex-shrink-0">AS</span>
                     <input v-model="it.alias" :placeholder="t('qb.aliasPlaceholder')"
                            class="flex-1 min-w-0 text-xs rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 px-2 py-1 focus:outline-none"/>
@@ -87,7 +121,7 @@
                 </div>
               </div>
 
-              <!-- WHERE 条件 -->
+              <!-- WHERE -->
               <div class="rounded border transition-colors" :class="zoneClass('where')"
                    @dragover.prevent="dropHover = 'where'" @dragleave="dropHover = ''" @drop="onDropWhere">
                 <div class="px-2.5 py-1 text-[11px] font-medium text-gray-500">WHERE</div>
@@ -95,28 +129,27 @@
                   <span v-if="wheres.length === 0 && !isDragging" class="text-xs text-gray-400 italic">{{ t('qb.whereEmpty') }}</span>
                   <div v-if="isDragging" class="border-2 border-dashed rounded px-2 py-1 text-xs text-center pointer-events-none transition-colors"
                        :class="dropHover === 'where' ? 'border-blue-400 text-blue-500 bg-blue-50 dark:bg-blue-900/20' : 'border-gray-300 dark:border-gray-600 text-gray-400'">
-                    {{ t('qb.dropHere', { col: draggedCol }) }}
+                    {{ t('qb.dropHere', { col: draggedRef?.c }) }}
                   </div>
                   <div v-for="(w, i) in wheres" :key="i" class="flex items-center gap-1.5">
-                    <span class="px-2 py-0.5 rounded bg-gray-100 dark:bg-gray-800 text-xs font-mono flex-shrink-0">{{ w.col }}</span>
+                    <span class="px-2 py-0.5 rounded bg-gray-100 dark:bg-gray-800 text-xs font-mono flex-shrink-0">{{ refLabel(w) }}</span>
                     <select v-model="w.op" class="text-xs rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 px-1.5 py-1 focus:outline-none flex-shrink-0">
-                      <option v-for="op in opsFor(w.col)" :key="op" :value="op">{{ opLabel(op) }}</option>
+                      <option v-for="op in opsFor(w)" :key="op" :value="op">{{ opLabel(op) }}</option>
                     </select>
-                    <!-- 值编辑区：随运算符/类型自适应 -->
                     <template v-if="w.op !== 'IS NULL' && w.op !== 'IS NOT NULL'">
                       <template v-if="w.op === 'BETWEEN'">
-                        <input v-model="w.value" :type="inputType(w.col)" :placeholder="t('qb.value')"
+                        <input v-model="w.value" :type="inputType(w)" :placeholder="t('qb.value')"
                                class="w-28 min-w-0 text-xs rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 px-2 py-1 focus:outline-none"/>
                         <span class="text-xs text-gray-400">AND</span>
-                        <input v-model="w.value2" :type="inputType(w.col)" :placeholder="t('qb.value')"
+                        <input v-model="w.value2" :type="inputType(w)" :placeholder="t('qb.value')"
                                class="w-28 min-w-0 text-xs rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 px-2 py-1 focus:outline-none"/>
                       </template>
-                      <select v-else-if="colType(w.col) === 'boolean'" v-model="w.value"
+                      <select v-else-if="colType(w) === 'boolean'" v-model="w.value"
                               class="text-xs rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 px-1.5 py-1 focus:outline-none">
                         <option value="true">TRUE</option>
                         <option value="false">FALSE</option>
                       </select>
-                      <input v-else v-model="w.value" :type="w.op === 'IN' ? 'text' : inputType(w.col)"
+                      <input v-else v-model="w.value" :type="w.op === 'IN' ? 'text' : inputType(w)"
                              :placeholder="w.op === 'IN' ? t('qb.inPlaceholder') : t('qb.value')"
                              class="flex-1 min-w-0 text-xs rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 px-2 py-1 focus:outline-none"/>
                     </template>
@@ -136,10 +169,10 @@
                   <span v-if="groupBy.length === 0 && !isDragging" class="text-xs text-gray-400 italic">{{ t('qb.groupEmpty') }}</span>
                   <span v-if="isDragging" class="border-2 border-dashed rounded px-2 py-0.5 text-xs pointer-events-none transition-colors"
                         :class="dropHover === 'group' ? 'border-blue-400 text-blue-500 bg-blue-50 dark:bg-blue-900/20' : 'border-gray-300 dark:border-gray-600 text-gray-400'">
-                    {{ t('qb.dropHere', { col: draggedCol }) }}
+                    {{ t('qb.dropHere', { col: draggedRef?.c }) }}
                   </span>
-                  <span v-for="(g, i) in groupBy" :key="g" class="inline-flex items-center gap-1 px-2 py-0.5 rounded bg-gray-100 dark:bg-gray-800 text-xs font-mono">
-                    {{ g }}
+                  <span v-for="(g, i) in groupBy" :key="refKey(g)" class="inline-flex items-center gap-1 px-2 py-0.5 rounded bg-gray-100 dark:bg-gray-800 text-xs font-mono">
+                    {{ refLabel(g) }}
                     <button class="hover:text-red-500 cursor-pointer" @click="groupBy.splice(i, 1)"><X class="w-3 h-3"/></button>
                   </span>
                 </div>
@@ -153,16 +186,41 @@
                   <span v-if="orders.length === 0 && !isDragging" class="text-xs text-gray-400 italic">{{ t('qb.orderEmpty') }}</span>
                   <span v-if="isDragging" class="border-2 border-dashed rounded px-2 py-0.5 text-xs pointer-events-none transition-colors"
                         :class="dropHover === 'order' ? 'border-blue-400 text-blue-500 bg-blue-50 dark:bg-blue-900/20' : 'border-gray-300 dark:border-gray-600 text-gray-400'">
-                    {{ t('qb.dropHere', { col: draggedCol }) }}
+                    {{ t('qb.dropHere', { col: draggedRef?.c }) }}
                   </span>
-                  <span v-for="(o, i) in orders" :key="o.col" class="inline-flex items-center gap-1 px-2 py-0.5 rounded bg-gray-100 dark:bg-gray-800 text-xs">
-                    {{ o.col }}
+                  <span v-for="(o, i) in orders" :key="refKey(o)" class="inline-flex items-center gap-1 px-2 py-0.5 rounded bg-gray-100 dark:bg-gray-800 text-xs">
+                    {{ refLabel(o) }}
                     <button class="text-blue-500 hover:underline cursor-pointer font-mono" @click="o.dir = o.dir === 'ASC' ? 'DESC' : 'ASC'">{{ o.dir }}</button>
                     <button class="hover:text-red-500 cursor-pointer" @click="orders.splice(i, 1)"><X class="w-3 h-3"/></button>
                   </span>
                 </div>
               </div>
 
+              <!-- HAVING（对聚合结果过滤，仅存在聚合时可用） -->
+              <div v-if="hasAggregate" class="rounded border transition-colors" :class="zoneClass('having')"
+                   @dragover.prevent="dropHover = 'having'" @dragleave="dropHover = ''" @drop="onDropHaving">
+                <div class="px-2.5 py-1 text-[11px] font-medium text-gray-500">HAVING</div>
+                <div class="px-2.5 pb-2 flex flex-col gap-1.5 min-h-[28px]">
+                  <span v-if="havings.length === 0 && !isDragging" class="text-xs text-gray-400 italic">{{ t('qb.havingEmpty') }}</span>
+                  <div v-if="isDragging" class="border-2 border-dashed rounded px-2 py-1 text-xs text-center pointer-events-none transition-colors"
+                       :class="dropHover === 'having' ? 'border-blue-400 text-blue-500 bg-blue-50 dark:bg-blue-900/20' : 'border-gray-300 dark:border-gray-600 text-gray-400'">
+                    {{ t('qb.dropHere', { col: draggedRef?.c }) }}
+                  </div>
+                  <div v-for="(h, i) in havings" :key="i" class="flex items-center gap-1.5">
+                    <select v-model="h.fn" class="text-xs rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 px-1.5 py-1 focus:outline-none flex-shrink-0">
+                      <option v-for="fn in AGG_FUNCS" :key="fn" :value="fn">{{ fn || t('qb.noFn') }}</option>
+                    </select>
+                    <span class="px-2 py-0.5 rounded bg-gray-100 dark:bg-gray-800 text-xs font-mono flex-shrink-0">{{ refLabel(h) }}</span>
+                    <select v-model="h.op" class="text-xs rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 px-1.5 py-1 focus:outline-none flex-shrink-0">
+                      <option v-for="op in NUM_OPS" :key="op" :value="op">{{ op }}</option>
+                    </select>
+                    <input v-model="h.value" :placeholder="t('qb.value')"
+                           class="flex-1 min-w-0 text-xs rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 px-2 py-1 focus:outline-none"/>
+                    <button class="text-gray-400 hover:text-red-500 cursor-pointer p-1 flex-shrink-0" @click="havings.splice(i, 1)"><Trash2 class="w-3.5 h-3.5"/></button>
+                  </div>
+                </div>
+              </div>
+
               <!-- LIMIT -->
               <div class="flex items-center gap-2">
                 <label class="text-[11px] font-medium text-gray-500">LIMIT</label>
@@ -197,7 +255,7 @@ import Tooltip from '../ui/Tooltip.vue'
 import {useDbConnections} from '../composables/useDbConnections'
 import {kvGetJSON, kvSetJSON} from '../composables/useKvStore'
 import {useToast} from '../plugins/toast'
-import {columnsSql, groupTables, quoteIdent, type Tbl} from '../utils/dbSchema'
+import {columnsSql, groupTables, quoteIdent, type Col, type Tbl} from '../utils/dbSchema'
 
 const emit = defineEmits<{ preview: [sql: string]; insert: [sql: string] }>()
 const {t} = useI18n()
@@ -205,8 +263,18 @@ const toast = useToast()
 const {resolveActiveSource, activeLabel, activeRef} = useDbConnections()
 
 type TypeCat = 'number' | 'string' | 'date' | 'boolean' | 'other'
+interface ColRef { t: string; c: string }
+interface Join { table: string; type: string; leftT: string; leftC: string; rightC: string }
+interface SelItem extends ColRef { fn: string; alias: string }
+interface Cond extends ColRef { op: string; value: string; value2?: string }
+interface Ord extends ColRef { dir: 'ASC' | 'DESC' }
+interface Having extends ColRef { fn: string; op: string; value: string }
+
+const JOIN_TYPES = ['INNER', 'LEFT', 'RIGHT', 'FULL']
+const FUNCS = ['', 'COUNT', 'SUM', 'AVG', 'MIN', 'MAX', 'COUNT DISTINCT']
+const AGG_FUNCS = ['COUNT', 'SUM', 'AVG', 'MIN', 'MAX']
+const NUM_OPS = ['=', '!=', '>', '>=', '<', '<=']
 
-// 各类型可用的运算符（contains/starts/ends 为 LIKE 语义预设）
 const OPS_BY_CAT: Record<TypeCat, string[]> = {
   number: ['=', '!=', '>', '>=', '<', '<=', 'BETWEEN', 'IN', 'IS NULL', 'IS NOT NULL'],
   string: ['contains', 'starts', 'ends', '=', '!=', 'LIKE', 'NOT LIKE', 'IN', 'IS NULL', 'IS NOT NULL'],
@@ -215,7 +283,6 @@ const OPS_BY_CAT: Record<TypeCat, string[]> = {
   other: ['=', '!=', 'IS NULL', 'IS NOT NULL']
 }
 
-// 由列的声明类型归类
 const typeCategory = (type: string): TypeCat => {
   const s = (type || '').toLowerCase()
   if (/bool|\bbit\b|tinyint\(1\)/.test(s)) {
@@ -238,175 +305,160 @@ const loading = ref(false)
 const error = ref('')
 const tables = ref<Tbl[]>([])
 
-// 可用的聚合/函数（'' 表示不套函数）
-const FUNCS = ['', 'COUNT', 'SUM', 'AVG', 'MIN', 'MAX', 'COUNT DISTINCT']
-
 const table = ref('')
-const selectItems = ref<{ col: string; fn: string; alias: string }[]>([])
+const joins = ref<Join[]>([])
+const selectItems = ref<SelItem[]>([])
 const distinct = ref(false)
-const groupBy = ref<string[]>([])
-const wheres = ref<{ col: string; op: string; value: string; value2?: string }[]>([])
-const orders = ref<{ col: string; dir: 'ASC' | 'DESC' }[]>([])
+const groupBy = ref<ColRef[]>([])
+const wheres = ref<Cond[]>([])
+const havings = ref<Having[]>([])
+const orders = ref<Ord[]>([])
 const limit = ref(100)
 
 const hasAggregate = computed(() => selectItems.value.some(it => it.fn))
 
-// 按列名取类型分类 / 该列可用运算符 / 输入框类型
-const colType = (col: string): TypeCat => typeCategory(currentCols.value.find(c => c.name === col)?.type ?? '')
-const opsFor = (col: string) => OPS_BY_CAT[colType(col)]
-const inputType = (col: string) => (colType(col) === 'date' ? 'date' : 'text')
+// ---- 表 / 列 基础 ----
+const colsOf = (tableName: string): Col[] => tables.value.find(tb => tb.name === tableName)?.columns ?? []
+const usedTables = computed(() => [table.value, ...joins.value.map(j => j.table)].filter(Boolean))
+const multiTable = computed(() => usedTables.value.length > 1)
+const unusedTables = computed(() => tables.value.filter(tb => !usedTables.value.includes(tb.name)))
+// 第 i 个 join 的 ON 左侧可选表：其之前已引入的表
+const tablesBefore = (i: number) => [table.value, ...joins.value.slice(0, i).map(j => j.table)]
+
+const refKey = (r: ColRef) => `${r.t}.${r.c}`
+const refLabel = (r: ColRef) => (multiTable.value ? `${r.t}.${r.c}` : r.c)
+const validRef = (r: ColRef) => usedTables.value.includes(r.t) && colsOf(r.t).some(c => c.name === r.c)
+
+const colType = (r: ColRef): TypeCat => typeCategory(colsOf(r.t).find(c => c.name === r.c)?.type ?? '')
+const opsFor = (r: ColRef) => OPS_BY_CAT[colType(r)]
+const inputType = (r: ColRef) => (colType(r) === 'date' ? 'date' : 'text')
 const opLabel = (op: string) =>
   op === 'contains' ? t('qb.opContains') : op === 'starts' ? t('qb.opStarts') : op === 'ends' ? t('qb.opEnds') : op
-const defaultOp = (col: string) => (colType(col) === 'string' ? 'contains' : '=')
+const defaultOp = (r: ColRef) => (colType(r) === 'string' ? 'contains' : '=')
 
-// 当前被拖拽的列名 + 悬停中的落区（用于高亮）+ 是否拖拽中（显示放置提示块）
-const draggedCol = ref('')
+// ---- 拖拽 ----
+const draggedRef = ref<ColRef | null>(null)
 const dropHover = ref('')
 const isDragging = ref(false)
 
-const currentCols = computed(() => tables.value.find(tb => tb.name === table.value)?.columns ?? [])
-
-// 切表时清空所有落区，避免残留其它表的字段（恢复状态期间不触发）
-let restoring = false
-watch(table, () => {
-  if (restoring) {
-    return
-  }
-  selectItems.value = []
-  distinct.value = false
-  groupBy.value = []
-  wheres.value = []
-  orders.value = []
-})
-
-// ---- 状态记忆：按数据源分别持久化，重开时恢复 ----
-interface QbState {
-  table: string
-  selectItems?: { col: string; fn: string; alias: string }[]
-  distinct?: boolean
-  groupBy?: string[]
-  wheres: { col: string; op: string; value: string; value2?: string }[]
-  orders: { col: string; dir: 'ASC' | 'DESC' }[]
-  limit: number
-  selectedCols?: string[] // 旧版本字段，兼容迁移
-}
-const stateKey = () => `qb-state:${activeRef.value}`
-const persist = () => {
-  if (restoring || !visible.value || !table.value) {
-    return
-  }
-  kvSetJSON(stateKey(), {
-    table: table.value,
-    selectItems: selectItems.value,
-    distinct: distinct.value,
-    groupBy: groupBy.value,
-    wheres: wheres.value,
-    orders: orders.value,
-    limit: limit.value
-  })
-}
-watch([table, selectItems, distinct, groupBy, wheres, orders, limit], persist, {deep: true})
-
-// 从持久化状态恢复（仅保留当前 schema 中仍存在的表/列）
-const restoreState = async () => {
-  const saved = kvGetJSON<QbState | null>(stateKey(), null)
-  if (!saved || !tables.value.some(tb => tb.name === saved.table)) {
-    return false
-  }
-  const cols = new Set((tables.value.find(tb => tb.name === saved.table)?.columns ?? []).map(c => c.name))
-  // 优先用新字段；否则从旧版 selectedCols 迁移
-  const items = saved.selectItems ?? (saved.selectedCols || []).map(c => ({col: c, fn: '', alias: ''}))
-  restoring = true
-  table.value = saved.table
-  selectItems.value = items.filter(it => cols.has(it.col))
-  distinct.value = !!saved.distinct
-  groupBy.value = (saved.groupBy || []).filter(c => cols.has(c))
-  wheres.value = (saved.wheres || []).filter(w => cols.has(w.col))
-  orders.value = (saved.orders || []).filter(o => cols.has(o.col))
-  limit.value = saved.limit ?? 100
-  await nextTick()
-  restoring = false
-  return true
-}
-
-const reset = () => {
-  restoring = true
-  selectItems.value = []
-  distinct.value = false
-  groupBy.value = []
-  wheres.value = []
-  orders.value = []
-  limit.value = 100
-  nextTick(() => {
-    restoring = false
-    persist()
-  })
-}
-// 自动分组：把 SELECT 中未套聚合函数的列填入 GROUP BY
-const autoGroupBy = () => {
-  groupBy.value = selectItems.value.filter(it => !it.fn).map(it => it.col)
-}
-
-const zoneClass = (zone: string) =>
-  dropHover.value === zone
-    ? 'border-blue-400 bg-blue-50/50 dark:bg-blue-900/10'
-    : 'border-gray-200 dark:border-gray-700'
-
-const onDragStart = (col: string) => {
-  draggedCol.value = col
+const onDragStart = (tn: string, c: string) => {
+  draggedRef.value = {t: tn, c}
   isDragging.value = true
   dropHover.value = ''
 }
 const onDragEnd = () => {
   isDragging.value = false
   dropHover.value = ''
-  draggedCol.value = ''
+  draggedRef.value = null
 }
 const onDropSelect = () => {
-  const c = draggedCol.value
-  if (c) {
-    // 允许同列多次加入（可套不同聚合函数）
-    selectItems.value.push({col: c, fn: '', alias: ''})
+  const r = draggedRef.value
+  if (r) {
+    selectItems.value.push({t: r.t, c: r.c, fn: '', alias: ''})
   }
   onDragEnd()
 }
 const onDropWhere = () => {
-  const c = draggedCol.value
-  if (c) {
-    wheres.value.push({col: c, op: defaultOp(c), value: '', value2: ''})
+  const r = draggedRef.value
+  if (r) {
+    wheres.value.push({t: r.t, c: r.c, op: defaultOp(r), value: '', value2: ''})
   }
   onDragEnd()
 }
 const onDropOrder = () => {
-  const c = draggedCol.value
-  if (c && !orders.value.some(o => o.col === c)) {
-    orders.value.push({col: c, dir: 'ASC'})
+  const r = draggedRef.value
+  if (r && !orders.value.some(o => o.t === r.t && o.c === r.c)) {
+    orders.value.push({t: r.t, c: r.c, dir: 'ASC'})
   }
   onDragEnd()
 }
 const onDropGroup = () => {
-  const c = draggedCol.value
-  if (c && !groupBy.value.includes(c)) {
-    groupBy.value.push(c)
+  const r = draggedRef.value
+  if (r && !groupBy.value.some(g => g.t === r.t && g.c === r.c)) {
+    groupBy.value.push({t: r.t, c: r.c})
+  }
+  onDragEnd()
+}
+const onDropHaving = () => {
+  const r = draggedRef.value
+  if (r) {
+    havings.value.push({t: r.t, c: r.c, fn: 'COUNT', op: '>', value: ''})
   }
   onDragEnd()
 }
 
+// ---- JOIN 增删 ----
+const guessOn = (leftT: string, rightT: string) => {
+  const l = colsOf(leftT).map(c => c.name)
+  const r = colsOf(rightT).map(c => c.name)
+  const leftC = l.includes('id') ? 'id' : l[0] || ''
+  const rightC = r.find(c => c === `${leftT}_id` || c === leftC) ?? (r.includes('id') ? 'id' : r[0] || '')
+  return {leftC, rightC}
+}
+const onAddJoin = (e: Event) => {
+  const name = (e.target as HTMLSelectElement).value
+  ;(e.target as HTMLSelectElement).value = ''
+  if (!name || usedTables.value.includes(name)) {
+    return
+  }
+  const on = guessOn(table.value, name)
+  joins.value.push({table: name, type: 'INNER', leftT: table.value, leftC: on.leftC, rightC: on.rightC})
+}
+const pruneRefs = () => {
+  selectItems.value = selectItems.value.filter(validRef)
+  wheres.value = wheres.value.filter(validRef)
+  groupBy.value = groupBy.value.filter(validRef)
+  orders.value = orders.value.filter(validRef)
+  havings.value = havings.value.filter(validRef)
+}
+const removeJoin = (i: number) => {
+  const removed = joins.value[i].table
+  joins.value.splice(i, 1)
+  // 连带移除以被删表作为左表的后续 join，再清理失效引用
+  joins.value = joins.value.filter(j => j.leftT !== removed)
+  pruneRefs()
+}
+
+const zoneClass = (zone: string) =>
+  dropHover.value === zone
+    ? 'border-blue-400 bg-blue-50/50 dark:bg-blue-900/10'
+    : 'border-gray-200 dark:border-gray-700'
+
+// 自动分组：把 SELECT 中未套聚合函数的列填入 GROUP BY
+const autoGroupBy = () => {
+  groupBy.value = selectItems.value.filter(it => !it.fn).map(it => ({t: it.t, c: it.c}))
+}
+
+// 切换主表：清空所有配置（恢复状态期间不触发）
+let restoring = false
+watch(table, () => {
+  if (restoring) {
+    return
+  }
+  joins.value = []
+  selectItems.value = []
+  distinct.value = false
+  groupBy.value = []
+  wheres.value = []
+  havings.value = []
+  orders.value = []
+})
+
+// ---- SQL 生成 ----
 const kind = () => resolveActiveSource().kind
 const q = (name: string) => quoteIdent(kind(), name)
+const qRef = (r: ColRef) => (multiTable.value ? `${q(r.t)}.${q(r.c)}` : q(r.c))
 
-// SELECT 项 → SQL 片段：套函数 + 可选别名
-const itemSql = (it: { col: string; fn: string; alias: string }): string => {
+const itemSql = (it: SelItem): string => {
   const base = it.fn === 'COUNT DISTINCT'
-    ? `COUNT(DISTINCT ${q(it.col)})`
+    ? `COUNT(DISTINCT ${qRef(it)})`
     : it.fn
-      ? `${it.fn}(${q(it.col)})`
-      : q(it.col)
+      ? `${it.fn}(${qRef(it)})`
+      : qRef(it)
   return it.alias.trim() ? `${base} AS ${q(it.alias.trim())}` : base
 }
 
 const strLit = (s: string) => `'${String(s ?? '').replace(/'/g, "''")}'`
-// 按类型生成字面量：布尔→1/0，数字→原样，日期/字符串→带引号转义
 const litByCat = (cat: TypeCat, v: string): string => {
   const s = String(v ?? '')
   if (cat === 'boolean') {
@@ -418,10 +470,9 @@ const litByCat = (cat: TypeCat, v: string): string => {
   return strLit(s)
 }
 
-// 单个 WHERE 条件 → SQL 片段（无效条件返回空串，由上层过滤）
-const condSql = (w: { col: string; op: string; value: string; value2?: string }): string => {
-  const col = q(w.col)
-  const cat = colType(w.col)
+const condSql = (w: Cond): string => {
+  const col = qRef(w)
+  const cat = colType(w)
   switch (w.op) {
     case 'IS NULL':
     case 'IS NOT NULL':
@@ -448,21 +499,38 @@ const condSql = (w: { col: string; op: string; value: string; value2?: string })
   }
 }
 
+// HAVING 条件（聚合 + 数值比较）
+const havingSql = (h: Having): string => {
+  if (!h.value.trim()) {
+    return ''
+  }
+  const agg = `${h.fn}(${qRef(h)})`
+  const v = !isNaN(Number(h.value)) ? h.value : strLit(h.value)
+  return `${agg} ${h.op} ${v}`
+}
+
 const sql = computed(() => {
   if (!table.value) {
     return ''
   }
   const cols = selectItems.value.length === 0 ? '*' : selectItems.value.map(itemSql).join(', ')
   let out = `SELECT ${distinct.value ? 'DISTINCT ' : ''}${cols} FROM ${q(table.value)}`
-  const conds = wheres.value.filter(w => w.col).map(condSql).filter(Boolean)
+  for (const j of joins.value) {
+    out += ` ${j.type} JOIN ${q(j.table)} ON ${qRef({t: j.leftT, c: j.leftC})} = ${q(j.table)}.${q(j.rightC)}`
+  }
+  const conds = wheres.value.map(condSql).filter(Boolean)
   if (conds.length) {
     out += ' WHERE ' + conds.join(' AND ')
   }
   if (groupBy.value.length) {
-    out += ' GROUP BY ' + groupBy.value.map(q).join(', ')
+    out += ' GROUP BY ' + groupBy.value.map(qRef).join(', ')
+  }
+  const havs = havings.value.map(havingSql).filter(Boolean)
+  if (havs.length) {
+    out += ' HAVING ' + havs.join(' AND ')
   }
   if (orders.value.length) {
-    out += ' ORDER BY ' + orders.value.map(o => `${q(o.col)} ${o.dir}`).join(', ')
+    out += ' ORDER BY ' + orders.value.map(o => `${qRef(o)} ${o.dir}`).join(', ')
   }
   if (limit.value && limit.value > 0) {
     out += ` LIMIT ${limit.value}`
@@ -470,6 +538,80 @@ const sql = computed(() => {
   return out
 })
 
+// ---- 状态记忆：按数据源持久化 ----
+interface QbState {
+  table: string
+  joins?: Join[]
+  selectItems?: any[]
+  distinct?: boolean
+  groupBy?: any[]
+  wheres?: any[]
+  havings?: Having[]
+  orders?: any[]
+  limit: number
+  selectedCols?: string[] // 旧版本字段
+}
+const stateKey = () => `qb-state:${activeRef.value}`
+const persist = () => {
+  if (restoring || !visible.value || !table.value) {
+    return
+  }
+  kvSetJSON(stateKey(), {
+    table: table.value,
+    joins: joins.value,
+    selectItems: selectItems.value,
+    distinct: distinct.value,
+    groupBy: groupBy.value,
+    wheres: wheres.value,
+    havings: havings.value,
+    orders: orders.value,
+    limit: limit.value
+  })
+}
+watch([table, joins, selectItems, distinct, groupBy, wheres, havings, orders, limit], persist, {deep: true})
+
+// 把任意（含旧版 {col}）引用规整为 {t,c}
+const asRef = (o: any, fallbackT: string): ColRef => ({t: o?.t ?? fallbackT, c: o?.c ?? o?.col ?? o})
+
+const restoreState = async () => {
+  const saved = kvGetJSON<QbState | null>(stateKey(), null)
+  if (!saved || !tables.value.some(tb => tb.name === saved.table)) {
+    return false
+  }
+  restoring = true
+  table.value = saved.table
+  // 仅恢复 schema 中真实存在的 join
+  joins.value = (saved.joins || []).filter(j =>
+    tables.value.some(tb => tb.name === j.table) && [saved.table, ...(saved.joins || []).map(x => x.table)].includes(j.leftT))
+  const items = saved.selectItems ?? (saved.selectedCols || []).map((c: string) => ({t: saved.table, c, fn: '', alias: ''}))
+  selectItems.value = items.map((o: any) => ({...asRef(o, saved.table), fn: o.fn || '', alias: o.alias || ''})).filter(validRef)
+  distinct.value = !!saved.distinct
+  groupBy.value = (saved.groupBy || []).map((o: any) => asRef(o, saved.table)).filter(validRef)
+  wheres.value = (saved.wheres || []).map((o: any) => ({...asRef(o, saved.table), op: o.op, value: o.value ?? '', value2: o.value2 ?? ''})).filter(validRef)
+  havings.value = (saved.havings || []).map((o: any) => ({...asRef(o, saved.table), fn: o.fn || 'COUNT', op: o.op || '>', value: o.value ?? ''})).filter(validRef)
+  orders.value = (saved.orders || []).map((o: any) => ({...asRef(o, saved.table), dir: o.dir || 'ASC'})).filter(validRef)
+  limit.value = saved.limit ?? 100
+  await nextTick()
+  restoring = false
+  return true
+}
+
+const reset = () => {
+  restoring = true
+  joins.value = []
+  selectItems.value = []
+  distinct.value = false
+  groupBy.value = []
+  wheres.value = []
+  havings.value = []
+  orders.value = []
+  limit.value = 100
+  nextTick(() => {
+    restoring = false
+    persist()
+  })
+}
+
 const load = async () => {
   loading.value = true
   error.value = ''
@@ -481,7 +623,6 @@ const load = async () => {
       throw new Error(res.error)
     }
     tables.value = groupTables((res.result_sets || [])[0]?.rows || [])
-    // 优先恢复上次内容；无可恢复且当前表无效时回退到第一张表
     const restored = await restoreState()
     if (!restored && tables.value.length && !tables.value.find(tb => tb.name === table.value)) {
       table.value = tables.value[0].name
diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
index 3c82a565..7193ccd2 100644
--- a/src/i18n/locales/en.json
+++ b/src/i18n/locales/en.json
@@ -1051,6 +1051,8 @@
     "whereEmpty": "Drag a column here to add a condition",
     "orderEmpty": "Drag a column here to sort",
     "groupEmpty": "Drag a column here to group",
+    "havingEmpty": "Drag a column here to filter aggregates",
+    "addJoin": "+ Join table…",
     "noFn": "No function",
     "aliasPlaceholder": "alias (optional)",
     "autoGroup": "Auto group",
diff --git a/src/i18n/locales/zh-CN.json b/src/i18n/locales/zh-CN.json
index ca08300d..0419b789 100644
--- a/src/i18n/locales/zh-CN.json
+++ b/src/i18n/locales/zh-CN.json
@@ -1051,6 +1051,8 @@
     "whereEmpty": "拖拽列到此添加条件",
     "orderEmpty": "拖拽列到此排序",
     "groupEmpty": "拖拽列到此分组",
+    "havingEmpty": "拖拽列到此，对聚合结果过滤",
+    "addJoin": "+ 连接表…",
     "noFn": "无函数",
     "aliasPlaceholder": "别名（可选）",
     "autoGroup": "自动分组",

From c72504c6022bbc485cb1b806e3d222fa4bbba531 Mon Sep 17 00:00:00 2001
From: qianmoQ <shicheng@devlive.org>
Date: Mon, 6 Jul 2026 13:54:54 +0800
Subject: [PATCH 16/23] =?UTF-8?q?feat(sql):=20=E6=9F=A5=E8=AF=A2=E6=9E=84?=
 =?UTF-8?q?=E5=BB=BA=E5=99=A8=E4=BF=9D=E5=AD=98/=E8=BD=BD=E5=85=A5?=
 =?UTF-8?q?=E5=91=BD=E5=90=8D=E6=9F=A5=E8=AF=A2=EF=BC=88=E6=8C=89=E6=95=B0?=
 =?UTF-8?q?=E6=8D=AE=E6=BA=90=E5=AD=98=E5=8F=96=EF=BC=8C=E5=8F=AF=E5=88=A0?=
 =?UTF-8?q?=E9=99=A4=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/QueryBuilder.vue | 86 +++++++++++++++++++++++++++++++--
 src/i18n/locales/en.json        |  4 ++
 src/i18n/locales/zh-CN.json     |  4 ++
 3 files changed, 89 insertions(+), 5 deletions(-)

diff --git a/src/components/QueryBuilder.vue b/src/components/QueryBuilder.vue
index 2faaa6e3..bd2d3396 100644
--- a/src/components/QueryBuilder.vue
+++ b/src/components/QueryBuilder.vue
@@ -17,6 +17,29 @@
               <span class="text-[11px] text-gray-400 font-normal">{{ t('qb.dragHint') }}</span>
             </div>
             <div class="flex items-center gap-2">
+              <!-- 已存查询：载入 -->
+              <select v-if="savedList.length" class="text-xs rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 px-2 py-1 focus:outline-none cursor-pointer max-w-[160px]"
+                      :value="''" @change="loadSaved">
+                <option value="" disabled>{{ t('qb.loadSaved') }}</option>
+                <option v-for="s in savedList" :key="s.name" :value="s.name">{{ s.name }}</option>
+              </select>
+              <!-- 保存当前 -->
+              <div class="relative">
+                <button class="inline-flex items-center gap-1 text-xs text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 cursor-pointer" @click="showSave = !showSave">
+                  <Save class="w-3.5 h-3.5"/>{{ t('qb.save') }}
+                </button>
+                <div v-if="showSave" class="absolute right-0 mt-1 z-10 w-56 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded shadow-lg p-2 flex flex-col gap-1.5">
+                  <input v-model="saveName" :placeholder="t('qb.savePlaceholder')" @keydown.enter="saveQuery"
+                         class="text-xs rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-900 px-2 py-1 focus:outline-none"/>
+                  <button class="text-xs px-2 py-1 rounded bg-blue-500 text-white hover:bg-blue-600 cursor-pointer disabled:opacity-40" :disabled="!saveName.trim() || !sql" @click="saveQuery">{{ t('qb.save') }}</button>
+                  <div v-if="savedList.length" class="border-t border-gray-100 dark:border-gray-700 pt-1 max-h-32 overflow-auto">
+                    <div v-for="s in savedList" :key="s.name" class="flex items-center justify-between text-xs px-1 py-0.5 hover:bg-gray-100 dark:hover:bg-gray-700 rounded">
+                      <span class="truncate">{{ s.name }}</span>
+                      <button class="text-gray-400 hover:text-red-500 cursor-pointer" @click="deleteSaved(s.name)"><Trash2 class="w-3 h-3"/></button>
+                    </div>
+                  </div>
+                </div>
+              </div>
               <button class="inline-flex items-center gap-1 text-xs text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 cursor-pointer" @click="reset">
                 <RotateCcw class="w-3.5 h-3.5"/>{{ t('qb.reset') }}
               </button>
@@ -249,7 +272,7 @@
 <script setup lang="ts">
 import {computed, nextTick, ref, watch} from 'vue'
 import {invoke} from '@tauri-apps/api/core'
-import {Blocks, GripVertical, RotateCcw, Table2, Trash2, X} from 'lucide-vue-next'
+import {Blocks, GripVertical, RotateCcw, Save, Table2, Trash2, X} from 'lucide-vue-next'
 import {useI18n} from 'vue-i18n'
 import Tooltip from '../ui/Tooltip.vue'
 import {useDbConnections} from '../composables/useDbConnections'
@@ -573,14 +596,13 @@ watch([table, joins, selectItems, distinct, groupBy, wheres, havings, orders, li
 // 把任意（含旧版 {col}）引用规整为 {t,c}
 const asRef = (o: any, fallbackT: string): ColRef => ({t: o?.t ?? fallbackT, c: o?.c ?? o?.col ?? o})
 
-const restoreState = async () => {
-  const saved = kvGetJSON<QbState | null>(stateKey(), null)
-  if (!saved || !tables.value.some(tb => tb.name === saved.table)) {
+// 应用一份持久化状态（供自动恢复与载入已存查询复用）
+const applyState = async (saved: QbState) => {
+  if (!tables.value.some(tb => tb.name === saved.table)) {
     return false
   }
   restoring = true
   table.value = saved.table
-  // 仅恢复 schema 中真实存在的 join
   joins.value = (saved.joins || []).filter(j =>
     tables.value.some(tb => tb.name === j.table) && [saved.table, ...(saved.joins || []).map(x => x.table)].includes(j.leftT))
   const items = saved.selectItems ?? (saved.selectedCols || []).map((c: string) => ({t: saved.table, c, fn: '', alias: ''}))
@@ -595,6 +617,59 @@ const restoreState = async () => {
   restoring = false
   return true
 }
+const restoreState = () => {
+  const saved = kvGetJSON<QbState | null>(stateKey(), null)
+  return saved ? applyState(saved) : Promise.resolve(false)
+}
+
+// ---- 已存查询：按数据源命名存取 ----
+interface SavedQuery { name: string; state: QbState }
+const savedKey = () => `qb-saved:${activeRef.value}`
+const savedList = ref<SavedQuery[]>([])
+const saveName = ref('')
+const showSave = ref(false)
+const currentState = (): QbState => ({
+  table: table.value,
+  joins: joins.value,
+  selectItems: selectItems.value,
+  distinct: distinct.value,
+  groupBy: groupBy.value,
+  wheres: wheres.value,
+  havings: havings.value,
+  orders: orders.value,
+  limit: limit.value
+})
+const saveQuery = () => {
+  const name = saveName.value.trim()
+  if (!name) {
+    return
+  }
+  const idx = savedList.value.findIndex(s => s.name === name)
+  const entry = {name, state: currentState()}
+  if (idx >= 0) {
+    savedList.value[idx] = entry
+  }
+  else {
+    savedList.value.push(entry)
+  }
+  kvSetJSON(savedKey(), savedList.value)
+  saveName.value = ''
+  showSave.value = false
+  toast.success(t('qb.savedOk', {name}))
+}
+const loadSaved = async (e: Event) => {
+  const name = (e.target as HTMLSelectElement).value
+  ;(e.target as HTMLSelectElement).value = ''
+  const found = savedList.value.find(s => s.name === name)
+  if (found) {
+    await applyState(found.state)
+    persist()
+  }
+}
+const deleteSaved = (name: string) => {
+  savedList.value = savedList.value.filter(s => s.name !== name)
+  kvSetJSON(savedKey(), savedList.value)
+}
 
 const reset = () => {
   restoring = true
@@ -623,6 +698,7 @@ const load = async () => {
       throw new Error(res.error)
     }
     tables.value = groupTables((res.result_sets || [])[0]?.rows || [])
+    savedList.value = kvGetJSON<SavedQuery[]>(savedKey(), [])
     const restored = await restoreState()
     if (!restored && tables.value.length && !tables.value.find(tb => tb.name === table.value)) {
       table.value = tables.value[0].name
diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
index 7193ccd2..6167f15d 100644
--- a/src/i18n/locales/en.json
+++ b/src/i18n/locales/en.json
@@ -1056,6 +1056,10 @@
     "noFn": "No function",
     "aliasPlaceholder": "alias (optional)",
     "autoGroup": "Auto group",
+    "save": "Save",
+    "savePlaceholder": "Query name",
+    "savedOk": "Saved query \"{name}\"",
+    "loadSaved": "Load saved query…",
     "limit": "Limit",
     "preview": "SQL preview",
     "copy": "Copy",
diff --git a/src/i18n/locales/zh-CN.json b/src/i18n/locales/zh-CN.json
index 0419b789..38537a2e 100644
--- a/src/i18n/locales/zh-CN.json
+++ b/src/i18n/locales/zh-CN.json
@@ -1056,6 +1056,10 @@
     "noFn": "无函数",
     "aliasPlaceholder": "别名（可选）",
     "autoGroup": "自动分组",
+    "save": "保存",
+    "savePlaceholder": "查询名称",
+    "savedOk": "已保存查询「{name}」",
+    "loadSaved": "载入已存查询…",
     "limit": "限制",
     "preview": "SQL 预览",
     "copy": "复制",

From e2a8e439e464884df2f0f61c920c2c37690a9de9 Mon Sep 17 00:00:00 2001
From: qianmoQ <shicheng@devlive.org>
Date: Mon, 6 Jul 2026 14:00:56 +0800
Subject: [PATCH 17/23] =?UTF-8?q?feat(sql):=20=E5=87=BD=E6=95=B0=E9=80=89?=
 =?UTF-8?q?=E6=8B=A9=E5=99=A8=E6=94=B9=E4=B8=BA=E5=8F=AF=E6=90=9C=E7=B4=A2?=
 =?UTF-8?q?=E5=88=86=E7=B1=BB=E5=BC=B9=E5=B1=82=EF=BC=8C=E5=86=85=E7=BD=AE?=
 =?UTF-8?q?=E8=81=9A=E5=90=88/=E5=AD=97=E7=AC=A6=E4=B8=B2/=E6=97=A5?=
 =?UTF-8?q?=E6=9C=9F/=E6=95=B0=E5=AD=A6=E5=87=BD=E6=95=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/QueryBuilder.vue | 65 ++++++++++++++++++++++++++++++---
 src/i18n/locales/en.json        |  8 ++++
 src/i18n/locales/zh-CN.json     |  8 ++++
 3 files changed, 76 insertions(+), 5 deletions(-)

diff --git a/src/components/QueryBuilder.vue b/src/components/QueryBuilder.vue
index bd2d3396..4af41a54 100644
--- a/src/components/QueryBuilder.vue
+++ b/src/components/QueryBuilder.vue
@@ -132,9 +132,30 @@
                     {{ t('qb.dropHere', { col: draggedRef?.c }) }}
                   </div>
                   <div v-for="(it, i) in selectItems" :key="i" class="flex items-center gap-1.5">
-                    <select v-model="it.fn" class="text-xs rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 px-1.5 py-1 focus:outline-none flex-shrink-0">
-                      <option v-for="fn in FUNCS" :key="fn" :value="fn">{{ fn || t('qb.noFn') }}</option>
-                    </select>
+                    <!-- 函数选择器：可搜索、分类 -->
+                    <div class="relative flex-shrink-0">
+                      <button class="text-xs rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 px-2 py-1 min-w-[92px] cursor-pointer flex items-center gap-1 hover:border-blue-400" @click="openFnPicker(i)">
+                        <span :class="it.fn ? 'font-mono' : 'text-gray-400'" class="truncate">{{ it.fn || t('qb.noFn') }}</span>
+                        <ChevronDown class="w-3 h-3 ml-auto text-gray-400 flex-shrink-0"/>
+                      </button>
+                      <template v-if="fnPickerIdx === i">
+                        <div class="fixed inset-0 z-10" @click="closeFnPicker"></div>
+                        <div class="absolute left-0 mt-1 z-20 w-56 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded shadow-lg p-2">
+                          <input v-model="fnSearch" :placeholder="t('qb.searchFn')" autofocus
+                                 class="w-full text-xs rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-900 px-2 py-1 mb-1 focus:outline-none"/>
+                          <div class="max-h-56 overflow-auto">
+                            <button class="w-full text-left text-xs px-2 py-0.5 rounded hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer text-gray-500" @click="setFn(i, '')">{{ t('qb.noFn') }}</button>
+                            <template v-for="cat in FUNC_CATS" :key="cat">
+                              <div v-if="funcsInCat(cat).length" class="text-[10px] uppercase tracking-wide text-gray-400 px-1 pt-1.5">{{ catLabel(cat) }}</div>
+                              <button v-for="f in funcsInCat(cat)" :key="f.name"
+                                      class="w-full text-left text-xs px-2 py-0.5 rounded hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer font-mono"
+                                      @click="setFn(i, f.name)">{{ f.name }}</button>
+                            </template>
+                            <div v-if="filteredFuncs.length === 0" class="text-xs text-gray-400 px-2 py-1">{{ t('qb.noFnMatch') }}</div>
+                          </div>
+                        </div>
+                      </template>
+                    </div>
                     <span class="px-2 py-0.5 rounded bg-blue-50 dark:bg-blue-900/30 text-blue-600 dark:text-blue-300 text-xs font-mono flex-shrink-0">{{ refLabel(it) }}</span>
                     <span class="text-[11px] text-gray-400 flex-shrink-0">AS</span>
                     <input v-model="it.alias" :placeholder="t('qb.aliasPlaceholder')"
@@ -272,7 +293,7 @@
 <script setup lang="ts">
 import {computed, nextTick, ref, watch} from 'vue'
 import {invoke} from '@tauri-apps/api/core'
-import {Blocks, GripVertical, RotateCcw, Save, Table2, Trash2, X} from 'lucide-vue-next'
+import {Blocks, ChevronDown, GripVertical, RotateCcw, Save, Table2, Trash2, X} from 'lucide-vue-next'
 import {useI18n} from 'vue-i18n'
 import Tooltip from '../ui/Tooltip.vue'
 import {useDbConnections} from '../composables/useDbConnections'
@@ -294,10 +315,23 @@ interface Ord extends ColRef { dir: 'ASC' | 'DESC' }
 interface Having extends ColRef { fn: string; op: string; value: string }
 
 const JOIN_TYPES = ['INNER', 'LEFT', 'RIGHT', 'FULL']
-const FUNCS = ['', 'COUNT', 'SUM', 'AVG', 'MIN', 'MAX', 'COUNT DISTINCT']
 const AGG_FUNCS = ['COUNT', 'SUM', 'AVG', 'MIN', 'MAX']
 const NUM_OPS = ['=', '!=', '>', '>=', '<', '<=']
 
+// 可用函数（按分类分组，跨方言常见集合）
+interface FuncDef { name: string; cat: string }
+const FUNC_CATS = ['agg', 'string', 'date', 'math']
+const FUNC_DEFS: FuncDef[] = [
+  {name: 'COUNT', cat: 'agg'}, {name: 'COUNT DISTINCT', cat: 'agg'}, {name: 'SUM', cat: 'agg'},
+  {name: 'AVG', cat: 'agg'}, {name: 'MIN', cat: 'agg'}, {name: 'MAX', cat: 'agg'},
+  {name: 'UPPER', cat: 'string'}, {name: 'LOWER', cat: 'string'}, {name: 'LENGTH', cat: 'string'},
+  {name: 'TRIM', cat: 'string'}, {name: 'LTRIM', cat: 'string'}, {name: 'RTRIM', cat: 'string'}, {name: 'REVERSE', cat: 'string'},
+  {name: 'DATE', cat: 'date'}, {name: 'YEAR', cat: 'date'}, {name: 'MONTH', cat: 'date'}, {name: 'DAY', cat: 'date'},
+  {name: 'HOUR', cat: 'date'}, {name: 'MINUTE', cat: 'date'}, {name: 'SECOND', cat: 'date'},
+  {name: 'ABS', cat: 'math'}, {name: 'ROUND', cat: 'math'}, {name: 'CEIL', cat: 'math'},
+  {name: 'FLOOR', cat: 'math'}, {name: 'SQRT', cat: 'math'}, {name: 'SIGN', cat: 'math'}
+]
+
 const OPS_BY_CAT: Record<TypeCat, string[]> = {
   number: ['=', '!=', '>', '>=', '<', '<=', 'BETWEEN', 'IN', 'IS NULL', 'IS NOT NULL'],
   string: ['contains', 'starts', 'ends', '=', '!=', 'LIKE', 'NOT LIKE', 'IN', 'IS NULL', 'IS NOT NULL'],
@@ -340,6 +374,27 @@ const limit = ref(100)
 
 const hasAggregate = computed(() => selectItems.value.some(it => it.fn))
 
+// ---- 函数选择器（可搜索、按分类分组） ----
+const fnPickerIdx = ref<number | null>(null)
+const fnSearch = ref('')
+const openFnPicker = (i: number) => {
+  fnPickerIdx.value = i
+  fnSearch.value = ''
+}
+const closeFnPicker = () => {
+  fnPickerIdx.value = null
+}
+const setFn = (i: number, name: string) => {
+  selectItems.value[i].fn = name
+  closeFnPicker()
+}
+const filteredFuncs = computed(() => {
+  const kw = fnSearch.value.trim().toLowerCase()
+  return kw ? FUNC_DEFS.filter(f => f.name.toLowerCase().includes(kw)) : FUNC_DEFS
+})
+const funcsInCat = (cat: string) => filteredFuncs.value.filter(f => f.cat === cat)
+const catLabel = (cat: string) => t('qb.cat.' + cat)
+
 // ---- 表 / 列 基础 ----
 const colsOf = (tableName: string): Col[] => tables.value.find(tb => tb.name === tableName)?.columns ?? []
 const usedTables = computed(() => [table.value, ...joins.value.map(j => j.table)].filter(Boolean))
diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
index 6167f15d..f61394b9 100644
--- a/src/i18n/locales/en.json
+++ b/src/i18n/locales/en.json
@@ -1054,6 +1054,14 @@
     "havingEmpty": "Drag a column here to filter aggregates",
     "addJoin": "+ Join table…",
     "noFn": "No function",
+    "searchFn": "Search functions…",
+    "noFnMatch": "No matching function",
+    "cat": {
+      "agg": "Aggregate",
+      "string": "String",
+      "date": "Date/Time",
+      "math": "Math"
+    },
     "aliasPlaceholder": "alias (optional)",
     "autoGroup": "Auto group",
     "save": "Save",
diff --git a/src/i18n/locales/zh-CN.json b/src/i18n/locales/zh-CN.json
index 38537a2e..955e0855 100644
--- a/src/i18n/locales/zh-CN.json
+++ b/src/i18n/locales/zh-CN.json
@@ -1054,6 +1054,14 @@
     "havingEmpty": "拖拽列到此，对聚合结果过滤",
     "addJoin": "+ 连接表…",
     "noFn": "无函数",
+    "searchFn": "搜索函数…",
+    "noFnMatch": "无匹配函数",
+    "cat": {
+      "agg": "聚合",
+      "string": "字符串",
+      "date": "日期时间",
+      "math": "数学"
+    },
     "aliasPlaceholder": "别名（可选）",
     "autoGroup": "自动分组",
     "save": "保存",

From e286310d3e74ce99d3d3bcabbda82e73d160607d Mon Sep 17 00:00:00 2001
From: qianmoQ <shicheng@devlive.org>
Date: Mon, 6 Jul 2026 14:07:03 +0800
Subject: [PATCH 18/23] =?UTF-8?q?feat(db):=20=E6=95=B0=E6=8D=AE=E5=BA=93?=
 =?UTF-8?q?=E8=BF=9E=E6=8E=A5=E6=94=AF=E6=8C=81=E5=88=86=E7=BB=84=EF=BC=88?=
 =?UTF-8?q?=E6=96=B0=E5=A2=9E=20group=20=E5=AD=97=E6=AE=B5=EF=BC=8C?=
 =?UTF-8?q?=E8=AE=BE=E7=BD=AE=E9=A1=B5=E6=8C=89=E5=88=86=E7=BB=84=E5=BD=92?=
 =?UTF-8?q?=E7=B1=BB=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src-tauri/src/db_connections.rs     | 18 +++++---
 src/components/setting/Database.vue | 69 ++++++++++++++++++++---------
 src/composables/useDbConnections.ts |  2 +
 src/i18n/locales/en.json            |  3 ++
 src/i18n/locales/zh-CN.json         |  3 ++
 5 files changed, 70 insertions(+), 25 deletions(-)

diff --git a/src-tauri/src/db_connections.rs b/src-tauri/src/db_connections.rs
index acf8cb58..01b8e6cc 100644
--- a/src-tauri/src/db_connections.rs
+++ b/src-tauri/src/db_connections.rs
@@ -41,6 +41,9 @@ pub struct DbConnection {
     pub ssh_password: Option<String>,
     #[serde(default)]
     pub ssh_key_file: Option<String>,
+    // 分组（用于在列表里归类；数据库列名为 grp，避开 SQL 关键字）
+    #[serde(default)]
+    pub group: Option<String>,
 }
 
 pub struct DbConnStore {
@@ -72,6 +75,7 @@ impl DbConnStore {
                 ssh_user TEXT,
                 ssh_password TEXT,
                 ssh_key_file TEXT,
+                grp TEXT,
                 sort_order INTEGER NOT NULL DEFAULT 0
             )",
             [],
@@ -87,6 +91,7 @@ impl DbConnStore {
             "ssh_user TEXT",
             "ssh_password TEXT",
             "ssh_key_file TEXT",
+            "grp TEXT",
         ] {
             let _ = conn.execute(
                 &format!("ALTER TABLE db_connections ADD COLUMN {}", col),
@@ -101,7 +106,7 @@ impl DbConnStore {
 }
 
 const COLUMNS: &str = "id, name, kind, file, host, port, user, password, database, \
-     ssl, ssh_enabled, ssh_host, ssh_port, ssh_user, ssh_password, ssh_key_file";
+     ssl, ssh_enabled, ssh_host, ssh_port, ssh_user, ssh_password, ssh_key_file, grp";
 
 fn row_to_conn(row: &rusqlite::Row) -> rusqlite::Result<DbConnection> {
     Ok(DbConnection {
@@ -121,6 +126,7 @@ fn row_to_conn(row: &rusqlite::Row) -> rusqlite::Result<DbConnection> {
         ssh_user: row.get(13)?,
         ssh_password: row.get(14)?,
         ssh_key_file: row.get(15)?,
+        group: row.get(16)?,
     })
 }
 
@@ -166,7 +172,7 @@ pub async fn db_connection_save(
         conn.execute(
             "UPDATE db_connections SET name=?2, kind=?3, file=?4, host=?5, port=?6, user=?7, \
              password=?8, database=?9, ssl=?10, ssh_enabled=?11, ssh_host=?12, ssh_port=?13, \
-             ssh_user=?14, ssh_password=?15, ssh_key_file=?16 WHERE id=?1",
+             ssh_user=?14, ssh_password=?15, ssh_key_file=?16, grp=?17 WHERE id=?1",
             params![
                 c.id,
                 c.name,
@@ -183,7 +189,8 @@ pub async fn db_connection_save(
                 c.ssh_port,
                 c.ssh_user,
                 c.ssh_password,
-                c.ssh_key_file
+                c.ssh_key_file,
+                c.group
             ],
         )
         .map_err(|e| format!("更新连接失败: {}", e))?;
@@ -198,8 +205,8 @@ pub async fn db_connection_save(
         conn.execute(
             "INSERT INTO db_connections (id, name, kind, file, host, port, user, password, \
              database, ssl, ssh_enabled, ssh_host, ssh_port, ssh_user, ssh_password, \
-             ssh_key_file, sort_order)
-             VALUES (?1, ?2, ?3, ?4, ?5, ?6, ?7, ?8, ?9, ?10, ?11, ?12, ?13, ?14, ?15, ?16, ?17)",
+             ssh_key_file, grp, sort_order)
+             VALUES (?1, ?2, ?3, ?4, ?5, ?6, ?7, ?8, ?9, ?10, ?11, ?12, ?13, ?14, ?15, ?16, ?17, ?18)",
             params![
                 c.id,
                 c.name,
@@ -217,6 +224,7 @@ pub async fn db_connection_save(
                 c.ssh_user,
                 c.ssh_password,
                 c.ssh_key_file,
+                c.group,
                 next
             ],
         )
diff --git a/src/components/setting/Database.vue b/src/components/setting/Database.vue
index 36a40183..c709f958 100644
--- a/src/components/setting/Database.vue
+++ b/src/components/setting/Database.vue
@@ -9,21 +9,24 @@
       <!-- 左：连接列表 -->
       <div class="w-64 flex-shrink-0 space-y-2">
         <Button size="sm" :icon="Plus" class="w-full" :type="editingId ? 'secondary' : 'primary'" @click="resetForm">{{ t('settings.database.newConnection') }}</Button>
-        <div class="space-y-1 max-h-[55vh] overflow-y-auto pr-0.5">
-          <button v-for="c in connections" :key="c.id"
-                  class="group w-full text-left rounded-lg border px-2.5 py-2 transition-colors cursor-pointer"
-                  :class="editingId === c.id ? 'border-blue-400 bg-blue-50 dark:border-blue-500 dark:bg-blue-900/20' : 'border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-800'"
-                  @click="startEdit(c)">
-            <div class="flex items-center gap-2">
-              <span class="text-[10px] px-1.5 py-0.5 rounded uppercase font-semibold flex-shrink-0"
-                    :class="c.kind === 'mysql' ? 'bg-orange-100 dark:bg-orange-900/40 text-orange-600 dark:text-orange-300' : c.kind === 'postgres' ? 'bg-sky-100 dark:bg-sky-900/40 text-sky-600 dark:text-sky-300' : c.kind === 'clickhouse' ? 'bg-yellow-100 dark:bg-yellow-900/40 text-yellow-700 dark:text-yellow-300' : c.kind === 'duckdb' ? 'bg-amber-100 dark:bg-amber-900/40 text-amber-700 dark:text-amber-300' : 'bg-blue-100 dark:bg-blue-900/40 text-blue-600 dark:text-blue-300'">{{ c.kind }}</span>
-              <span class="flex-1 truncate text-sm font-medium text-gray-800 dark:text-gray-100">{{ c.name }}</span>
-              <Trash2 class="w-3.5 h-3.5 text-gray-400 hover:text-red-500 opacity-0 group-hover:opacity-100 flex-shrink-0" :title="t('settings.database.delete')" @click.stop="remove(c.id)"/>
-            </div>
-            <div class="text-xs text-gray-400 truncate mt-0.5">
-              {{ isFileKind(c.kind) ? (c.file || t('settings.database.memoryDb')) : `${c.user || ''}@${c.host || ''}:${c.port || defaultPortOf(c.kind)}/${c.database || ''}` }}
-            </div>
-          </button>
+        <div class="space-y-2 max-h-[55vh] overflow-y-auto pr-0.5">
+          <div v-for="[grp, conns] in groupedConnections" :key="grp || '__ungrouped'" class="space-y-1">
+            <div class="text-[10px] uppercase tracking-wide text-gray-400 px-0.5 pt-1 font-semibold">{{ grp || t('settings.database.ungrouped') }}</div>
+            <button v-for="c in conns" :key="c.id"
+                    class="group w-full text-left rounded-lg border px-2.5 py-2 transition-colors cursor-pointer"
+                    :class="editingId === c.id ? 'border-blue-400 bg-blue-50 dark:border-blue-500 dark:bg-blue-900/20' : 'border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-800'"
+                    @click="startEdit(c)">
+              <div class="flex items-center gap-2">
+                <span class="text-[10px] px-1.5 py-0.5 rounded uppercase font-semibold flex-shrink-0"
+                      :class="c.kind === 'mysql' ? 'bg-orange-100 dark:bg-orange-900/40 text-orange-600 dark:text-orange-300' : c.kind === 'postgres' ? 'bg-sky-100 dark:bg-sky-900/40 text-sky-600 dark:text-sky-300' : c.kind === 'clickhouse' ? 'bg-yellow-100 dark:bg-yellow-900/40 text-yellow-700 dark:text-yellow-300' : c.kind === 'duckdb' ? 'bg-amber-100 dark:bg-amber-900/40 text-amber-700 dark:text-amber-300' : 'bg-blue-100 dark:bg-blue-900/40 text-blue-600 dark:text-blue-300'">{{ c.kind }}</span>
+                <span class="flex-1 truncate text-sm font-medium text-gray-800 dark:text-gray-100">{{ c.name }}</span>
+                <Trash2 class="w-3.5 h-3.5 text-gray-400 hover:text-red-500 opacity-0 group-hover:opacity-100 flex-shrink-0" :title="t('settings.database.delete')" @click.stop="remove(c.id)"/>
+              </div>
+              <div class="text-xs text-gray-400 truncate mt-0.5">
+                {{ isFileKind(c.kind) ? (c.file || t('settings.database.memoryDb')) : `${c.user || ''}@${c.host || ''}:${c.port || defaultPortOf(c.kind)}/${c.database || ''}` }}
+              </div>
+            </button>
+          </div>
           <div v-if="!connections.length" class="text-xs text-gray-400 text-center py-6">{{ t('settings.database.noConnections') }}</div>
         </div>
       </div>
@@ -39,6 +42,13 @@
           <Label :label="t('settings.database.name')">
             <Input v-model="form.name" :placeholder="t('settings.database.namePlaceholder')"/>
           </Label>
+          <Label :label="t('settings.database.group')" custom-class="col-span-2">
+            <input v-model="form.group" list="qb-conn-groups" :placeholder="t('settings.database.groupPlaceholder')"
+                   class="w-full text-sm rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 px-3 py-1.5 focus:outline-none focus:ring-1 focus:ring-blue-400"/>
+            <datalist id="qb-conn-groups">
+              <option v-for="g in groups" :key="g" :value="g"/>
+            </datalist>
+          </Label>
         </div>
 
         <div v-if="!isFileKind(form.kind)" class="grid grid-cols-2 gap-x-4 gap-y-3">
@@ -145,15 +155,32 @@ const isFileKind = (kind: string) => kind === 'sqlite' || kind === 'duckdb'
 const editingId = ref<string | null>(null)
 const form = reactive<{
   kind: 'mysql' | 'postgres' | 'clickhouse' | 'sqlite' | 'duckdb'
-  name: string; host: string; port: number | null; user: string; password: string; database: string; file: string
+  name: string; group: string; host: string; port: number | null; user: string; password: string; database: string; file: string
   ssl: boolean
   sshEnabled: boolean; sshHost: string; sshPort: number | null; sshUser: string; sshPassword: string; sshKeyFile: string
 }>({
-  kind: 'mysql', name: '', host: '', port: null, user: '', password: '', database: '', file: '',
+  kind: 'mysql', name: '', group: '', host: '', port: null, user: '', password: '', database: '', file: '',
   ssl: false,
   sshEnabled: false, sshHost: '', sshPort: null, sshUser: '', sshPassword: '', sshKeyFile: ''
 })
 
+// 已有分组（用于输入建议）
+const groups = computed(() => [...new Set(connections.value.map(c => c.group).filter((g): g is string => !!g))].sort())
+// 连接按分组归类；未分组置于末尾
+const groupedConnections = computed(() => {
+  const map = new Map<string, DbConnection[]>()
+  for (const c of connections.value) {
+    const g = c.group || ''
+    if (!map.has(g)) {
+      map.set(g, [])
+    }
+    map.get(g)!.push(c)
+  }
+  const named = [...map.entries()].filter(([g]) => g).sort(([a], [b]) => a.localeCompare(b))
+  const ungrouped = map.get('') ? [['', map.get('')!] as [string, DbConnection[]]] : []
+  return [...named, ...ungrouped]
+})
+
 // 网络型数据源的加密/隧道字段（文件型不含）
 const netExtras = (): Partial<DataSource> => ({
   ssl: form.ssl,
@@ -210,7 +237,7 @@ const testConnection = async () => {
 const resetForm = () => {
   editingId.value = null
   Object.assign(form, {
-    kind: 'mysql', name: '', host: '', port: null, user: '', password: '', database: '', file: '',
+    kind: 'mysql', name: '', group: '', host: '', port: null, user: '', password: '', database: '', file: '',
     ssl: false, sshEnabled: false, sshHost: '', sshPort: null, sshUser: '', sshPassword: '', sshKeyFile: ''
   })
 }
@@ -220,6 +247,7 @@ const startEdit = (c: DbConnection) => {
   Object.assign(form, {
     kind: c.kind === 'sqlite' || c.kind === 'duckdb' || c.kind === 'postgres' || c.kind === 'clickhouse' ? c.kind : 'mysql',
     name: c.name,
+    group: c.group || '',
     host: c.host || '', port: c.port ?? null, user: c.user || '', password: c.password || '',
     database: c.database || '', file: c.file || '',
     ssl: !!c.ssl,
@@ -245,9 +273,10 @@ const pickKeyFile = async () => {
 
 const submit = () => {
   if (!canSave.value) return
+  const grp = form.group.trim() || undefined
   const payload = isFileKind(form.kind)
-      ? {kind: form.kind, name: form.name.trim(), file: form.file.trim()}
-      : {kind: form.kind, name: form.name.trim(), host: form.host.trim() || '127.0.0.1', port: form.port || defaultPortOf(form.kind), user: form.user.trim(), password: form.password, database: form.database.trim(), ...netExtras()}
+      ? {kind: form.kind, name: form.name.trim(), group: grp, file: form.file.trim()}
+      : {kind: form.kind, name: form.name.trim(), group: grp, host: form.host.trim() || '127.0.0.1', port: form.port || defaultPortOf(form.kind), user: form.user.trim(), password: form.password, database: form.database.trim(), ...netExtras()}
   if (editingId.value) {
     update(editingId.value, payload)
   }
diff --git a/src/composables/useDbConnections.ts b/src/composables/useDbConnections.ts
index 699183f9..a3ace8c1 100644
--- a/src/composables/useDbConnections.ts
+++ b/src/composables/useDbConnections.ts
@@ -27,6 +27,8 @@ export interface DbConnection extends DataSource
 {
     id: string
     name: string
+    // 分组名（用于列表归类；空表示未分组）
+    group?: string
 }
 
 const LEGACY_CONN_KEY = 'sql-connections' // 旧版：连接存于 KV 的一个 JSON 数组（已迁移到独立表）
diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
index f61394b9..1fd4db55 100644
--- a/src/i18n/locales/en.json
+++ b/src/i18n/locales/en.json
@@ -163,6 +163,9 @@
       "type": "Type",
       "name": "Connection Name",
       "namePlaceholder": "e.g. Local data source",
+      "group": "Group",
+      "groupPlaceholder": "Optional, e.g. Prod / Staging",
+      "ungrouped": "Ungrouped",
       "host": "Host",
       "hostPlaceholder": "Default 127.0.0.1",
       "port": "Port",
diff --git a/src/i18n/locales/zh-CN.json b/src/i18n/locales/zh-CN.json
index 955e0855..83050015 100644
--- a/src/i18n/locales/zh-CN.json
+++ b/src/i18n/locales/zh-CN.json
@@ -163,6 +163,9 @@
       "type": "类型",
       "name": "连接名称",
       "namePlaceholder": "例如：本地数据源",
+      "group": "分组",
+      "groupPlaceholder": "可选，如：生产 / 测试",
+      "ungrouped": "未分组",
       "host": "主机",
       "hostPlaceholder": "默认 127.0.0.1",
       "port": "端口",

From 3f481815921a3b0553235a1d25e895b5f8d269d9 Mon Sep 17 00:00:00 2001
From: qianmoQ <shicheng@devlive.org>
Date: Mon, 6 Jul 2026 14:08:52 +0800
Subject: [PATCH 19/23] =?UTF-8?q?feat(db):=20=E8=BF=9E=E6=8E=A5=E5=AF=BC?=
 =?UTF-8?q?=E5=85=A5/=E5=AF=BC=E5=87=BA=20JSON=EF=BC=88=E9=BB=98=E8=AE=A4?=
 =?UTF-8?q?=E4=B8=8D=E5=90=AB=E5=AF=86=E7=A0=81=EF=BC=8C=E5=8F=AF=E9=80=89?=
 =?UTF-8?q?=E5=8C=85=E5=90=AB=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/setting/Database.vue | 70 ++++++++++++++++++++++++++---
 src/i18n/locales/en.json            |  9 ++++
 src/i18n/locales/zh-CN.json         |  9 ++++
 3 files changed, 83 insertions(+), 5 deletions(-)

diff --git a/src/components/setting/Database.vue b/src/components/setting/Database.vue
index c709f958..2fec528b 100644
--- a/src/components/setting/Database.vue
+++ b/src/components/setting/Database.vue
@@ -1,8 +1,17 @@
 <template>
   <div class="-mt-1">
-    <p class="text-sm text-gray-600 dark:text-gray-300 mb-3">
-      {{ t('settings.database.desc') }}
-    </p>
+    <div class="flex items-center justify-between mb-3 gap-3">
+      <p class="text-sm text-gray-600 dark:text-gray-300">
+        {{ t('settings.database.desc') }}
+      </p>
+      <div class="flex items-center gap-2 flex-shrink-0">
+        <label class="flex items-center gap-1 text-xs text-gray-500 dark:text-gray-400 cursor-pointer select-none" :title="t('settings.database.includePasswordsHint')">
+          <input type="checkbox" v-model="includePasswords" class="cursor-pointer"/>{{ t('settings.database.includePasswords') }}
+        </label>
+        <Button size="sm" type="secondary" :icon="Download" @click="exportConnections">{{ t('settings.database.export') }}</Button>
+        <Button size="sm" type="secondary" :icon="Upload" @click="importConnections">{{ t('settings.database.import') }}</Button>
+      </div>
+    </div>
 
     <!-- 主从布局：左侧连接列表 + 右侧表单 -->
     <div class="flex gap-4 items-start">
@@ -121,8 +130,8 @@
 <script setup lang="ts">
 import {computed, reactive, ref} from 'vue'
 import {invoke} from '@tauri-apps/api/core'
-import {open} from '@tauri-apps/plugin-dialog'
-import {Plus, Trash2} from 'lucide-vue-next'
+import {open, save} from '@tauri-apps/plugin-dialog'
+import {Download, Plus, Trash2, Upload} from 'lucide-vue-next'
 import Button from '../../ui/Button.vue'
 import Select from '../../ui/Select.vue'
 import Input from '../../ui/Input.vue'
@@ -271,6 +280,57 @@ const pickKeyFile = async () => {
   }
 }
 
+// ---- 导入 / 导出 ----
+const includePasswords = ref(false)
+const exportConnections = async () => {
+  if (!connections.value.length) {
+    toast.info(t('settings.database.noConnections'))
+    return
+  }
+  // 去掉 id（导入时重新生成）；默认不含密码，避免明文外泄
+  const data = connections.value.map((c) => {
+    const {id: _id, password, sshPassword, ...rest} = c
+    return includePasswords.value ? {...rest, password, sshPassword} : rest
+  })
+  try {
+    const path = await save({defaultPath: 'codeforge-connections.json', filters: [{name: 'JSON', extensions: ['json']}]})
+    if (!path) {
+      return
+    }
+    await invoke('write_file_text', {path, content: JSON.stringify(data, null, 2)})
+    toast.success(t('settings.database.exported', {n: data.length}))
+  }
+  catch (e: any) {
+    toast.error(t('settings.database.exportFailed') + String(e?.message || e))
+  }
+}
+const importConnections = async () => {
+  const selected = await open({multiple: false, filters: [{name: 'JSON', extensions: ['json']}]})
+  if (typeof selected !== 'string') {
+    return
+  }
+  try {
+    const text = await invoke<string>('read_file_text', {path: selected, maxSizeMb: 10})
+    const arr = JSON.parse(text)
+    if (!Array.isArray(arr)) {
+      throw new Error(t('settings.database.importBadFormat'))
+    }
+    let n = 0
+    for (const c of arr) {
+      if (!c || !c.kind || !c.name) {
+        continue
+      }
+      const {id: _id, ...rest} = c
+      add(rest)
+      n++
+    }
+    toast.success(t('settings.database.imported', {n}))
+  }
+  catch (e: any) {
+    toast.error(t('settings.database.importFailed') + String(e?.message || e))
+  }
+}
+
 const submit = () => {
   if (!canSave.value) return
   const grp = form.group.trim() || undefined
diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
index 1fd4db55..2bd60a82 100644
--- a/src/i18n/locales/en.json
+++ b/src/i18n/locales/en.json
@@ -166,6 +166,15 @@
       "group": "Group",
       "groupPlaceholder": "Optional, e.g. Prod / Staging",
       "ungrouped": "Ungrouped",
+      "export": "Export",
+      "import": "Import",
+      "includePasswords": "With passwords",
+      "includePasswordsHint": "When checked, the export file contains plaintext passwords — keep it safe",
+      "exported": "Exported {n} connection(s)",
+      "exportFailed": "Export failed: ",
+      "imported": "Imported {n} connection(s)",
+      "importFailed": "Import failed: ",
+      "importBadFormat": "Invalid file format (expected an array of connections)",
       "host": "Host",
       "hostPlaceholder": "Default 127.0.0.1",
       "port": "Port",
diff --git a/src/i18n/locales/zh-CN.json b/src/i18n/locales/zh-CN.json
index 83050015..93b2b42c 100644
--- a/src/i18n/locales/zh-CN.json
+++ b/src/i18n/locales/zh-CN.json
@@ -166,6 +166,15 @@
       "group": "分组",
       "groupPlaceholder": "可选，如：生产 / 测试",
       "ungrouped": "未分组",
+      "export": "导出",
+      "import": "导入",
+      "includePasswords": "含密码",
+      "includePasswordsHint": "勾选后导出文件将包含明文密码，请妥善保管",
+      "exported": "已导出 {n} 个连接",
+      "exportFailed": "导出失败：",
+      "imported": "已导入 {n} 个连接",
+      "importFailed": "导入失败：",
+      "importBadFormat": "文件格式不正确（应为连接数组）",
       "host": "主机",
       "hostPlaceholder": "默认 127.0.0.1",
       "port": "端口",

From 5d475002905acc135b90db5115f79187e29105f9 Mon Sep 17 00:00:00 2001
From: qianmoQ <shicheng@devlive.org>
Date: Mon, 6 Jul 2026 14:16:00 +0800
Subject: [PATCH 20/23] =?UTF-8?q?feat(sql):=20=E5=87=BD=E6=95=B0=E6=94=AF?=
 =?UTF-8?q?=E6=8C=81=E8=87=AA=E7=94=B1=E8=BE=93=E5=85=A5=E4=BB=BB=E6=84=8F?=
 =?UTF-8?q?=E5=87=BD=E6=95=B0=E5=90=8D+=E5=8F=82=E6=95=B0=EF=BC=8C?=
 =?UTF-8?q?=E5=B9=B6=E5=8F=AF=E5=9C=A8=20WHERE=20=E5=AF=B9=E5=88=97?=
 =?UTF-8?q?=E5=A5=97=E5=87=BD=E6=95=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/FnPicker.vue     | 79 +++++++++++++++++++++++++++
 src/components/QueryBuilder.vue | 94 ++++++++-------------------------
 src/i18n/locales/en.json        | 10 ++--
 src/i18n/locales/zh-CN.json     | 10 ++--
 src/utils/sqlFunctions.ts       | 37 +++++++++++++
 5 files changed, 151 insertions(+), 79 deletions(-)
 create mode 100644 src/components/FnPicker.vue
 create mode 100644 src/utils/sqlFunctions.ts

diff --git a/src/components/FnPicker.vue b/src/components/FnPicker.vue
new file mode 100644
index 00000000..633f7202
--- /dev/null
+++ b/src/components/FnPicker.vue
@@ -0,0 +1,79 @@
+<template>
+  <div class="relative inline-block">
+    <button class="text-xs rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 px-2 py-1 min-w-[84px] cursor-pointer flex items-center gap-1 hover:border-blue-400"
+            @click="toggle">
+      <span :class="modelValue ? 'font-mono' : 'text-gray-400'" class="truncate">{{ modelValue || t('qb.noFn') }}</span>
+      <ChevronDown class="w-3 h-3 ml-auto text-gray-400 flex-shrink-0"/>
+    </button>
+    <template v-if="open">
+      <div class="fixed inset-0 z-10" @click="close"></div>
+      <div class="absolute left-0 mt-1 z-20 w-56 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded shadow-lg p-2">
+        <input ref="input" v-model="kw" :placeholder="t('qb.searchFn')" @keydown.enter.prevent="commitCustom"
+               class="w-full text-xs rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-900 px-2 py-1 mb-1 focus:outline-none"/>
+        <div class="max-h-56 overflow-auto">
+          <button class="w-full text-left text-xs px-2 py-0.5 rounded hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer text-gray-500" @click="pick('')">{{ t('qb.noFn') }}</button>
+          <button v-if="customName" class="w-full text-left text-xs px-2 py-0.5 rounded hover:bg-blue-50 dark:hover:bg-blue-900/20 cursor-pointer text-blue-500 font-mono" @click="pick(customName)">
+            {{ t('qb.useCustom', { name: customName }) }}
+          </button>
+          <template v-for="cat in FUNC_CATS" :key="cat">
+            <div v-if="funcsInCat(cat).length" class="text-[10px] uppercase tracking-wide text-gray-400 px-1 pt-1.5">{{ t('qb.cat.' + cat) }}</div>
+            <button v-for="f in funcsInCat(cat)" :key="f.name"
+                    class="w-full text-left text-xs px-2 py-0.5 rounded hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer font-mono"
+                    @click="pick(f.name)">{{ f.name }}</button>
+          </template>
+          <div v-if="filtered.length === 0 && !customName" class="text-xs text-gray-400 px-2 py-1">{{ t('qb.noFnMatch') }}</div>
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {computed, nextTick, ref} from 'vue'
+import {ChevronDown} from 'lucide-vue-next'
+import {useI18n} from 'vue-i18n'
+import {FUNC_CATS, FUNC_DEFS} from '../utils/sqlFunctions'
+
+defineProps<{ modelValue: string }>()
+const emit = defineEmits<{ 'update:modelValue': [value: string] }>()
+const {t} = useI18n()
+
+const open = ref(false)
+const kw = ref('')
+const input = ref<HTMLInputElement>()
+
+const filtered = computed(() => {
+  const q = kw.value.trim().toLowerCase()
+  return q ? FUNC_DEFS.filter(f => f.name.toLowerCase().includes(q)) : FUNC_DEFS
+})
+const funcsInCat = (cat: string) => filtered.value.filter(f => f.cat === cat)
+// 输入的名字若与建议无精确匹配，则提供“使用自定义”入口（支持任意函数）
+const customName = computed(() => {
+  const raw = kw.value.trim()
+  if (!raw) {
+    return ''
+  }
+  const up = raw.toUpperCase()
+  return FUNC_DEFS.some(f => f.name === up) ? '' : up
+})
+
+const toggle = async () => {
+  open.value = !open.value
+  if (open.value) {
+    kw.value = ''
+    await nextTick()
+    input.value?.focus()
+  }
+}
+const close = () => { open.value = false }
+const pick = (name: string) => {
+  emit('update:modelValue', name)
+  close()
+}
+const commitCustom = () => {
+  const raw = kw.value.trim()
+  if (raw) {
+    pick(raw.toUpperCase())
+  }
+}
+</script>
diff --git a/src/components/QueryBuilder.vue b/src/components/QueryBuilder.vue
index 4af41a54..0c644176 100644
--- a/src/components/QueryBuilder.vue
+++ b/src/components/QueryBuilder.vue
@@ -132,31 +132,10 @@
                     {{ t('qb.dropHere', { col: draggedRef?.c }) }}
                   </div>
                   <div v-for="(it, i) in selectItems" :key="i" class="flex items-center gap-1.5">
-                    <!-- 函数选择器：可搜索、分类 -->
-                    <div class="relative flex-shrink-0">
-                      <button class="text-xs rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 px-2 py-1 min-w-[92px] cursor-pointer flex items-center gap-1 hover:border-blue-400" @click="openFnPicker(i)">
-                        <span :class="it.fn ? 'font-mono' : 'text-gray-400'" class="truncate">{{ it.fn || t('qb.noFn') }}</span>
-                        <ChevronDown class="w-3 h-3 ml-auto text-gray-400 flex-shrink-0"/>
-                      </button>
-                      <template v-if="fnPickerIdx === i">
-                        <div class="fixed inset-0 z-10" @click="closeFnPicker"></div>
-                        <div class="absolute left-0 mt-1 z-20 w-56 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded shadow-lg p-2">
-                          <input v-model="fnSearch" :placeholder="t('qb.searchFn')" autofocus
-                                 class="w-full text-xs rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-900 px-2 py-1 mb-1 focus:outline-none"/>
-                          <div class="max-h-56 overflow-auto">
-                            <button class="w-full text-left text-xs px-2 py-0.5 rounded hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer text-gray-500" @click="setFn(i, '')">{{ t('qb.noFn') }}</button>
-                            <template v-for="cat in FUNC_CATS" :key="cat">
-                              <div v-if="funcsInCat(cat).length" class="text-[10px] uppercase tracking-wide text-gray-400 px-1 pt-1.5">{{ catLabel(cat) }}</div>
-                              <button v-for="f in funcsInCat(cat)" :key="f.name"
-                                      class="w-full text-left text-xs px-2 py-0.5 rounded hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer font-mono"
-                                      @click="setFn(i, f.name)">{{ f.name }}</button>
-                            </template>
-                            <div v-if="filteredFuncs.length === 0" class="text-xs text-gray-400 px-2 py-1">{{ t('qb.noFnMatch') }}</div>
-                          </div>
-                        </div>
-                      </template>
-                    </div>
+                    <FnPicker v-model="it.fn"/>
                     <span class="px-2 py-0.5 rounded bg-blue-50 dark:bg-blue-900/30 text-blue-600 dark:text-blue-300 text-xs font-mono flex-shrink-0">{{ refLabel(it) }}</span>
+                    <input v-if="it.fn && it.fn !== 'COUNT DISTINCT'" v-model="it.args" :placeholder="t('qb.argsPlaceholder')"
+                           class="w-24 min-w-0 text-xs rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 px-2 py-1 focus:outline-none" :title="t('qb.argsHint')"/>
                     <span class="text-[11px] text-gray-400 flex-shrink-0">AS</span>
                     <input v-model="it.alias" :placeholder="t('qb.aliasPlaceholder')"
                            class="flex-1 min-w-0 text-xs rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 px-2 py-1 focus:outline-none"/>
@@ -176,7 +155,10 @@
                     {{ t('qb.dropHere', { col: draggedRef?.c }) }}
                   </div>
                   <div v-for="(w, i) in wheres" :key="i" class="flex items-center gap-1.5">
+                    <FnPicker v-model="w.fn"/>
                     <span class="px-2 py-0.5 rounded bg-gray-100 dark:bg-gray-800 text-xs font-mono flex-shrink-0">{{ refLabel(w) }}</span>
+                    <input v-if="w.fn && w.fn !== 'COUNT DISTINCT'" v-model="w.args" :placeholder="t('qb.argsPlaceholder')"
+                           class="w-20 min-w-0 text-xs rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 px-2 py-1 focus:outline-none" :title="t('qb.argsHint')"/>
                     <select v-model="w.op" class="text-xs rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 px-1.5 py-1 focus:outline-none flex-shrink-0">
                       <option v-for="op in opsFor(w)" :key="op" :value="op">{{ opLabel(op) }}</option>
                     </select>
@@ -293,13 +275,15 @@
 <script setup lang="ts">
 import {computed, nextTick, ref, watch} from 'vue'
 import {invoke} from '@tauri-apps/api/core'
-import {Blocks, ChevronDown, GripVertical, RotateCcw, Save, Table2, Trash2, X} from 'lucide-vue-next'
+import {Blocks, GripVertical, RotateCcw, Save, Table2, Trash2, X} from 'lucide-vue-next'
 import {useI18n} from 'vue-i18n'
 import Tooltip from '../ui/Tooltip.vue'
+import FnPicker from './FnPicker.vue'
 import {useDbConnections} from '../composables/useDbConnections'
 import {kvGetJSON, kvSetJSON} from '../composables/useKvStore'
 import {useToast} from '../plugins/toast'
 import {columnsSql, groupTables, quoteIdent, type Col, type Tbl} from '../utils/dbSchema'
+import {wrapFunc} from '../utils/sqlFunctions'
 
 const emit = defineEmits<{ preview: [sql: string]; insert: [sql: string] }>()
 const {t} = useI18n()
@@ -309,8 +293,8 @@ const {resolveActiveSource, activeLabel, activeRef} = useDbConnections()
 type TypeCat = 'number' | 'string' | 'date' | 'boolean' | 'other'
 interface ColRef { t: string; c: string }
 interface Join { table: string; type: string; leftT: string; leftC: string; rightC: string }
-interface SelItem extends ColRef { fn: string; alias: string }
-interface Cond extends ColRef { op: string; value: string; value2?: string }
+interface SelItem extends ColRef { fn: string; args: string; alias: string }
+interface Cond extends ColRef { fn: string; args: string; op: string; value: string; value2?: string }
 interface Ord extends ColRef { dir: 'ASC' | 'DESC' }
 interface Having extends ColRef { fn: string; op: string; value: string }
 
@@ -318,20 +302,6 @@ const JOIN_TYPES = ['INNER', 'LEFT', 'RIGHT', 'FULL']
 const AGG_FUNCS = ['COUNT', 'SUM', 'AVG', 'MIN', 'MAX']
 const NUM_OPS = ['=', '!=', '>', '>=', '<', '<=']
 
-// 可用函数（按分类分组，跨方言常见集合）
-interface FuncDef { name: string; cat: string }
-const FUNC_CATS = ['agg', 'string', 'date', 'math']
-const FUNC_DEFS: FuncDef[] = [
-  {name: 'COUNT', cat: 'agg'}, {name: 'COUNT DISTINCT', cat: 'agg'}, {name: 'SUM', cat: 'agg'},
-  {name: 'AVG', cat: 'agg'}, {name: 'MIN', cat: 'agg'}, {name: 'MAX', cat: 'agg'},
-  {name: 'UPPER', cat: 'string'}, {name: 'LOWER', cat: 'string'}, {name: 'LENGTH', cat: 'string'},
-  {name: 'TRIM', cat: 'string'}, {name: 'LTRIM', cat: 'string'}, {name: 'RTRIM', cat: 'string'}, {name: 'REVERSE', cat: 'string'},
-  {name: 'DATE', cat: 'date'}, {name: 'YEAR', cat: 'date'}, {name: 'MONTH', cat: 'date'}, {name: 'DAY', cat: 'date'},
-  {name: 'HOUR', cat: 'date'}, {name: 'MINUTE', cat: 'date'}, {name: 'SECOND', cat: 'date'},
-  {name: 'ABS', cat: 'math'}, {name: 'ROUND', cat: 'math'}, {name: 'CEIL', cat: 'math'},
-  {name: 'FLOOR', cat: 'math'}, {name: 'SQRT', cat: 'math'}, {name: 'SIGN', cat: 'math'}
-]
-
 const OPS_BY_CAT: Record<TypeCat, string[]> = {
   number: ['=', '!=', '>', '>=', '<', '<=', 'BETWEEN', 'IN', 'IS NULL', 'IS NOT NULL'],
   string: ['contains', 'starts', 'ends', '=', '!=', 'LIKE', 'NOT LIKE', 'IN', 'IS NULL', 'IS NOT NULL'],
@@ -374,27 +344,6 @@ const limit = ref(100)
 
 const hasAggregate = computed(() => selectItems.value.some(it => it.fn))
 
-// ---- 函数选择器（可搜索、按分类分组） ----
-const fnPickerIdx = ref<number | null>(null)
-const fnSearch = ref('')
-const openFnPicker = (i: number) => {
-  fnPickerIdx.value = i
-  fnSearch.value = ''
-}
-const closeFnPicker = () => {
-  fnPickerIdx.value = null
-}
-const setFn = (i: number, name: string) => {
-  selectItems.value[i].fn = name
-  closeFnPicker()
-}
-const filteredFuncs = computed(() => {
-  const kw = fnSearch.value.trim().toLowerCase()
-  return kw ? FUNC_DEFS.filter(f => f.name.toLowerCase().includes(kw)) : FUNC_DEFS
-})
-const funcsInCat = (cat: string) => filteredFuncs.value.filter(f => f.cat === cat)
-const catLabel = (cat: string) => t('qb.cat.' + cat)
-
 // ---- 表 / 列 基础 ----
 const colsOf = (tableName: string): Col[] => tables.value.find(tb => tb.name === tableName)?.columns ?? []
 const usedTables = computed(() => [table.value, ...joins.value.map(j => j.table)].filter(Boolean))
@@ -432,14 +381,14 @@ const onDragEnd = () => {
 const onDropSelect = () => {
   const r = draggedRef.value
   if (r) {
-    selectItems.value.push({t: r.t, c: r.c, fn: '', alias: ''})
+    selectItems.value.push({t: r.t, c: r.c, fn: '', args: '', alias: ''})
   }
   onDragEnd()
 }
 const onDropWhere = () => {
   const r = draggedRef.value
   if (r) {
-    wheres.value.push({t: r.t, c: r.c, op: defaultOp(r), value: '', value2: ''})
+    wheres.value.push({t: r.t, c: r.c, fn: '', args: '', op: defaultOp(r), value: '', value2: ''})
   }
   onDragEnd()
 }
@@ -527,12 +476,11 @@ const kind = () => resolveActiveSource().kind
 const q = (name: string) => quoteIdent(kind(), name)
 const qRef = (r: ColRef) => (multiTable.value ? `${q(r.t)}.${q(r.c)}` : q(r.c))
 
+// 列引用 + 可选函数与额外参数：fn(col, args)
+const exprSql = (r: ColRef & { fn?: string; args?: string }) => wrapFunc(qRef(r), r.fn, r.args)
+
 const itemSql = (it: SelItem): string => {
-  const base = it.fn === 'COUNT DISTINCT'
-    ? `COUNT(DISTINCT ${qRef(it)})`
-    : it.fn
-      ? `${it.fn}(${qRef(it)})`
-      : qRef(it)
+  const base = exprSql(it)
   return it.alias.trim() ? `${base} AS ${q(it.alias.trim())}` : base
 }
 
@@ -549,7 +497,7 @@ const litByCat = (cat: TypeCat, v: string): string => {
 }
 
 const condSql = (w: Cond): string => {
-  const col = qRef(w)
+  const col = exprSql(w)
   const cat = colType(w)
   switch (w.op) {
     case 'IS NULL':
@@ -660,11 +608,11 @@ const applyState = async (saved: QbState) => {
   table.value = saved.table
   joins.value = (saved.joins || []).filter(j =>
     tables.value.some(tb => tb.name === j.table) && [saved.table, ...(saved.joins || []).map(x => x.table)].includes(j.leftT))
-  const items = saved.selectItems ?? (saved.selectedCols || []).map((c: string) => ({t: saved.table, c, fn: '', alias: ''}))
-  selectItems.value = items.map((o: any) => ({...asRef(o, saved.table), fn: o.fn || '', alias: o.alias || ''})).filter(validRef)
+  const items = saved.selectItems ?? (saved.selectedCols || []).map((c: string) => ({t: saved.table, c, fn: '', args: '', alias: ''}))
+  selectItems.value = items.map((o: any) => ({...asRef(o, saved.table), fn: o.fn || '', args: o.args || '', alias: o.alias || ''})).filter(validRef)
   distinct.value = !!saved.distinct
   groupBy.value = (saved.groupBy || []).map((o: any) => asRef(o, saved.table)).filter(validRef)
-  wheres.value = (saved.wheres || []).map((o: any) => ({...asRef(o, saved.table), op: o.op, value: o.value ?? '', value2: o.value2 ?? ''})).filter(validRef)
+  wheres.value = (saved.wheres || []).map((o: any) => ({...asRef(o, saved.table), fn: o.fn || '', args: o.args || '', op: o.op, value: o.value ?? '', value2: o.value2 ?? ''})).filter(validRef)
   havings.value = (saved.havings || []).map((o: any) => ({...asRef(o, saved.table), fn: o.fn || 'COUNT', op: o.op || '>', value: o.value ?? ''})).filter(validRef)
   orders.value = (saved.orders || []).map((o: any) => ({...asRef(o, saved.table), dir: o.dir || 'ASC'})).filter(validRef)
   limit.value = saved.limit ?? 100
diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
index 2bd60a82..862bbb2a 100644
--- a/src/i18n/locales/en.json
+++ b/src/i18n/locales/en.json
@@ -1066,13 +1066,17 @@
     "havingEmpty": "Drag a column here to filter aggregates",
     "addJoin": "+ Join table…",
     "noFn": "No function",
-    "searchFn": "Search functions…",
-    "noFnMatch": "No matching function",
+    "searchFn": "Search or type a function…",
+    "noFnMatch": "No match (type to use it anyway)",
+    "useCustom": "Use \"{name}\"",
+    "argsPlaceholder": "args",
+    "argsHint": "Extra args appended after the column, e.g. 1, 3 or ',', 1",
     "cat": {
       "agg": "Aggregate",
       "string": "String",
       "date": "Date/Time",
-      "math": "Math"
+      "math": "Math",
+      "convert": "Convert/Null"
     },
     "aliasPlaceholder": "alias (optional)",
     "autoGroup": "Auto group",
diff --git a/src/i18n/locales/zh-CN.json b/src/i18n/locales/zh-CN.json
index 93b2b42c..88e2ec8b 100644
--- a/src/i18n/locales/zh-CN.json
+++ b/src/i18n/locales/zh-CN.json
@@ -1066,13 +1066,17 @@
     "havingEmpty": "拖拽列到此，对聚合结果过滤",
     "addJoin": "+ 连接表…",
     "noFn": "无函数",
-    "searchFn": "搜索函数…",
-    "noFnMatch": "无匹配函数",
+    "searchFn": "搜索或输入函数名…",
+    "noFnMatch": "无匹配函数（可直接输入使用）",
+    "useCustom": "使用 “{name}”",
+    "argsPlaceholder": "参数",
+    "argsHint": "额外参数，原样拼到列后面，如 1, 3 或 ',', 1",
     "cat": {
       "agg": "聚合",
       "string": "字符串",
       "date": "日期时间",
-      "math": "数学"
+      "math": "数学",
+      "convert": "转换/空值"
     },
     "aliasPlaceholder": "别名（可选）",
     "autoGroup": "自动分组",
diff --git a/src/utils/sqlFunctions.ts b/src/utils/sqlFunctions.ts
new file mode 100644
index 00000000..c3e34c61
--- /dev/null
+++ b/src/utils/sqlFunctions.ts
@@ -0,0 +1,37 @@
+// SQL 函数建议表（仅作输入建议，用户可自由输入任意函数名 + 参数）
+export interface FuncDef { name: string; cat: string }
+
+export const FUNC_CATS = ['agg', 'string', 'date', 'math', 'convert']
+
+export const FUNC_DEFS: FuncDef[] = [
+  // 聚合
+  {name: 'COUNT', cat: 'agg'}, {name: 'COUNT DISTINCT', cat: 'agg'}, {name: 'SUM', cat: 'agg'},
+  {name: 'AVG', cat: 'agg'}, {name: 'MIN', cat: 'agg'}, {name: 'MAX', cat: 'agg'}, {name: 'GROUP_CONCAT', cat: 'agg'},
+  // 字符串
+  {name: 'UPPER', cat: 'string'}, {name: 'LOWER', cat: 'string'}, {name: 'LENGTH', cat: 'string'},
+  {name: 'TRIM', cat: 'string'}, {name: 'LTRIM', cat: 'string'}, {name: 'RTRIM', cat: 'string'}, {name: 'REVERSE', cat: 'string'},
+  {name: 'SUBSTRING', cat: 'string'}, {name: 'REPLACE', cat: 'string'}, {name: 'CONCAT', cat: 'string'},
+  {name: 'LEFT', cat: 'string'}, {name: 'RIGHT', cat: 'string'}, {name: 'SPLIT_PART', cat: 'string'},
+  // 日期时间
+  {name: 'DATE', cat: 'date'}, {name: 'YEAR', cat: 'date'}, {name: 'MONTH', cat: 'date'}, {name: 'DAY', cat: 'date'},
+  {name: 'HOUR', cat: 'date'}, {name: 'MINUTE', cat: 'date'}, {name: 'SECOND', cat: 'date'},
+  {name: 'DATE_TRUNC', cat: 'date'}, {name: 'EXTRACT', cat: 'date'},
+  // 数学
+  {name: 'ABS', cat: 'math'}, {name: 'ROUND', cat: 'math'}, {name: 'CEIL', cat: 'math'}, {name: 'FLOOR', cat: 'math'},
+  {name: 'SQRT', cat: 'math'}, {name: 'SIGN', cat: 'math'}, {name: 'MOD', cat: 'math'}, {name: 'POWER', cat: 'math'},
+  // 转换 / 空值
+  {name: 'CAST', cat: 'convert'}, {name: 'COALESCE', cat: 'convert'}, {name: 'NULLIF', cat: 'convert'}
+]
+
+// 把「函数 + 列表达式 + 额外参数」拼成 SQL 片段
+// expr 为已生成的列引用（可能带表限定）；fn 为空时原样返回
+export const wrapFunc = (expr: string, fn?: string, args?: string): string => {
+  if (!fn) {
+    return expr
+  }
+  if (fn === 'COUNT DISTINCT') {
+    return `COUNT(DISTINCT ${expr})`
+  }
+  const extra = (args || '').trim()
+  return `${fn}(${expr}${extra ? ', ' + extra : ''})`
+}

From 9876ab8eb6efbbf2129156aa6c01636f1a66ffb3 Mon Sep 17 00:00:00 2001
From: qianmoQ <shicheng@devlive.org>
Date: Mon, 6 Jul 2026 14:26:02 +0800
Subject: [PATCH 21/23] =?UTF-8?q?feat(sql):=20=E8=BF=9E=E6=8E=A5=E6=9C=AA?=
 =?UTF-8?q?=E6=8C=87=E5=AE=9A=E5=BA=93=E6=97=B6=E6=9F=A5=E8=AF=A2=E6=9E=84?=
 =?UTF-8?q?=E5=BB=BA=E5=99=A8=E5=86=85=E5=8F=AF=E9=80=89=E5=BA=93=EF=BC=88?=
 =?UTF-8?q?=E5=88=97=E5=BA=93/=E5=88=87=E5=BA=93=EF=BC=8C=E8=A1=A8?=
 =?UTF-8?q?=E5=90=8D=E8=87=AA=E5=8A=A8=E5=B8=A6=E5=BA=93=E9=99=90=E5=AE=9A?=
 =?UTF-8?q?=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/QueryBuilder.vue | 94 +++++++++++++++++++++++++++++----
 src/i18n/locales/en.json        |  5 +-
 src/i18n/locales/zh-CN.json     |  5 +-
 3 files changed, 93 insertions(+), 11 deletions(-)

diff --git a/src/components/QueryBuilder.vue b/src/components/QueryBuilder.vue
index 0c644176..b257c45d 100644
--- a/src/components/QueryBuilder.vue
+++ b/src/components/QueryBuilder.vue
@@ -51,6 +51,15 @@
 
           <div v-if="loading" class="flex-1 flex items-center justify-center text-sm text-gray-400">{{ t('qb.loading') }}</div>
           <div v-else-if="error" class="flex-1 flex items-center justify-center text-sm text-red-500 px-6 text-center">{{ error }}</div>
+          <!-- MySQL 连接未指定库：先选库 -->
+          <div v-else-if="srcNoDb && !pickedDb" class="flex-1 flex flex-col items-center justify-center gap-3 text-sm text-gray-400 px-6 text-center">
+            <span>{{ t('qb.pickDbFirst') }}</span>
+            <select class="text-sm rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 px-3 py-1.5 focus:outline-none cursor-pointer min-w-[200px]"
+                    :value="''" @change="onPickDb($event)">
+              <option value="" disabled>{{ t('qb.selectDb') }}</option>
+              <option v-for="d in databases" :key="d" :value="d">{{ d }}</option>
+            </select>
+          </div>
           <div v-else-if="tables.length === 0" class="flex-1 flex items-center justify-center text-sm text-gray-400 px-6 text-center">{{ t('qb.noTables') }}</div>
 
           <div v-else class="flex-1 flex min-h-0">
@@ -82,6 +91,12 @@
               <div class="rounded border border-gray-200 dark:border-gray-700">
                 <div class="px-2.5 py-1 text-[11px] font-medium text-gray-500">FROM / JOIN</div>
                 <div class="px-2.5 pb-2 flex flex-col gap-1.5">
+                  <div v-if="srcNoDb" class="flex items-center gap-1.5">
+                    <span class="text-[11px] text-gray-400 w-10 flex-shrink-0">{{ t('qb.db') }}</span>
+                    <select :value="pickedDb" class="text-xs rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 px-2 py-1 focus:outline-none min-w-[160px]" @change="onPickDb($event)">
+                      <option v-for="d in databases" :key="d" :value="d">{{ d }}</option>
+                    </select>
+                  </div>
                   <div class="flex items-center gap-1.5">
                     <span class="text-[11px] text-gray-400 w-10 flex-shrink-0">FROM</span>
                     <select v-model="table" class="text-xs rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 px-2 py-1 focus:outline-none min-w-[160px]">
@@ -332,6 +347,11 @@ const loading = ref(false)
 const error = ref('')
 const tables = ref<Tbl[]>([])
 
+// MySQL 连接未指定库时：需先在构建器内选库
+const srcNoDb = ref(false)
+const databases = ref<string[]>([])
+const pickedDb = ref('')
+
 const table = ref('')
 const joins = ref<Join[]>([])
 const selectItems = ref<SelItem[]>([])
@@ -475,6 +495,8 @@ watch(table, () => {
 const kind = () => resolveActiveSource().kind
 const q = (name: string) => quoteIdent(kind(), name)
 const qRef = (r: ColRef) => (multiTable.value ? `${q(r.t)}.${q(r.c)}` : q(r.c))
+// FROM/JOIN 表名：连接未指定库时用 库.表 限定
+const qTable = (name: string) => (srcNoDb.value && pickedDb.value ? `${q(pickedDb.value)}.${q(name)}` : q(name))
 
 // 列引用 + 可选函数与额外参数：fn(col, args)
 const exprSql = (r: ColRef & { fn?: string; args?: string }) => wrapFunc(qRef(r), r.fn, r.args)
@@ -540,9 +562,9 @@ const sql = computed(() => {
     return ''
   }
   const cols = selectItems.value.length === 0 ? '*' : selectItems.value.map(itemSql).join(', ')
-  let out = `SELECT ${distinct.value ? 'DISTINCT ' : ''}${cols} FROM ${q(table.value)}`
+  let out = `SELECT ${distinct.value ? 'DISTINCT ' : ''}${cols} FROM ${qTable(table.value)}`
   for (const j of joins.value) {
-    out += ` ${j.type} JOIN ${q(j.table)} ON ${qRef({t: j.leftT, c: j.leftC})} = ${q(j.table)}.${q(j.rightC)}`
+    out += ` ${j.type} JOIN ${qTable(j.table)} ON ${qRef({t: j.leftT, c: j.leftC})} = ${q(j.table)}.${q(j.rightC)}`
   }
   const conds = wheres.value.map(condSql).filter(Boolean)
   if (conds.length) {
@@ -567,6 +589,7 @@ const sql = computed(() => {
 // ---- 状态记忆：按数据源持久化 ----
 interface QbState {
   table: string
+  pickedDb?: string
   joins?: Join[]
   selectItems?: any[]
   distinct?: boolean
@@ -584,6 +607,7 @@ const persist = () => {
   }
   kvSetJSON(stateKey(), {
     table: table.value,
+    pickedDb: pickedDb.value,
     joins: joins.value,
     selectItems: selectItems.value,
     distinct: distinct.value,
@@ -633,6 +657,7 @@ const saveName = ref('')
 const showSave = ref(false)
 const currentState = (): QbState => ({
   table: table.value,
+  pickedDb: pickedDb.value,
   joins: joins.value,
   selectItems: selectItems.value,
   distinct: distinct.value,
@@ -690,19 +715,37 @@ const reset = () => {
   })
 }
 
+const runRows = async (source: any, sqlStr: string): Promise<any[][]> => {
+  const res = await invoke<any>('run_sql', {sql: sqlStr, source})
+  if (res.error) {
+    throw new Error(res.error)
+  }
+  return (res.result_sets || [])[0]?.rows || []
+}
+const fetchTables = async (source: any, db?: string) => groupTables(await runRows(source, columnsSql(source.kind, db)))
+
 const load = async () => {
   loading.value = true
   error.value = ''
   try {
     const source = resolveActiveSource()
-    const db = source.kind === 'mysql' ? source.database || undefined : undefined
-    const res = await invoke<any>('run_sql', {sql: columnsSql(source.kind, db), source})
-    if (res.error) {
-      throw new Error(res.error)
-    }
-    tables.value = groupTables((res.result_sets || [])[0]?.rows || [])
     savedList.value = kvGetJSON<SavedQuery[]>(savedKey(), [])
-    const restored = await restoreState()
+    srcNoDb.value = source.kind === 'mysql' && !source.database
+    if (srcNoDb.value) {
+      // 连接未指定库：先列出可选库，并尝试恢复上次所选库
+      databases.value = (await runRows(source,
+        'SELECT schema_name FROM information_schema.schemata '
+        + "WHERE schema_name NOT IN ('information_schema','mysql','performance_schema','sys') "
+        + 'ORDER BY schema_name')).map(r => String(r[0]))
+      const savedDb = kvGetJSON<QbState | null>(stateKey(), null)?.pickedDb
+      pickedDb.value = savedDb && databases.value.includes(savedDb) ? savedDb : ''
+      tables.value = pickedDb.value ? await fetchTables(source, pickedDb.value) : []
+    }
+    else {
+      pickedDb.value = ''
+      tables.value = await fetchTables(source, undefined)
+    }
+    const restored = tables.value.length ? await restoreState() : false
     if (!restored && tables.value.length && !tables.value.find(tb => tb.name === table.value)) {
       table.value = tables.value[0].name
     }
@@ -716,6 +759,39 @@ const load = async () => {
   }
 }
 
+// 选择/切换数据库：加载该库表并重置构建器
+const onPickDb = async (e: Event) => {
+  const db = (e.target as HTMLSelectElement).value
+  if (!db || db === pickedDb.value) {
+    return
+  }
+  loading.value = true
+  try {
+    const source = resolveActiveSource()
+    const list = await fetchTables(source, db)
+    restoring = true
+    pickedDb.value = db
+    tables.value = list
+    joins.value = []
+    selectItems.value = []
+    distinct.value = false
+    groupBy.value = []
+    wheres.value = []
+    havings.value = []
+    orders.value = []
+    table.value = list[0]?.name || ''
+    await nextTick()
+    restoring = false
+    persist()
+  }
+  catch (e: any) {
+    error.value = e?.message || String(e)
+  }
+  finally {
+    loading.value = false
+  }
+}
+
 const openBuilder = () => {
   visible.value = true
   load()
diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
index 862bbb2a..0d50d287 100644
--- a/src/i18n/locales/en.json
+++ b/src/i18n/locales/en.json
@@ -1051,7 +1051,10 @@
     "dropHere": "Release to add {col}",
     "reset": "Reset",
     "loading": "Loading schema…",
-    "noTables": "No tables in the current source (pick a database first for MySQL)",
+    "noTables": "No tables in the current source",
+    "db": "Database",
+    "pickDbFirst": "This connection has no database selected — pick one first",
+    "selectDb": "Select a database…",
     "tables": "Tables",
     "columns": "Columns",
     "value": "Value",
diff --git a/src/i18n/locales/zh-CN.json b/src/i18n/locales/zh-CN.json
index 88e2ec8b..450a3a16 100644
--- a/src/i18n/locales/zh-CN.json
+++ b/src/i18n/locales/zh-CN.json
@@ -1051,7 +1051,10 @@
     "dropHere": "松开以添加 {col}",
     "reset": "清空",
     "loading": "加载表结构中…",
-    "noTables": "当前数据源没有可用的表（MySQL 请先选择数据库）",
+    "noTables": "当前数据源没有可用的表",
+    "db": "数据库",
+    "pickDbFirst": "当前连接未指定数据库，请先选择一个数据库",
+    "selectDb": "选择数据库…",
     "tables": "表",
     "columns": "列",
     "value": "值",

From 94dbf30f77e4f196938e6c60f791904a60ea301d Mon Sep 17 00:00:00 2001
From: qianmoQ <shicheng@devlive.org>
Date: Mon, 6 Jul 2026 14:51:02 +0800
Subject: [PATCH 22/23] =?UTF-8?q?feat(sql):=20=E6=9F=A5=E8=AF=A2=E6=9E=84?=
 =?UTF-8?q?=E5=BB=BA=E5=99=A8=E6=8C=89=20ER=20=E5=9B=BE=E6=96=B9=E5=BC=8F?=
 =?UTF-8?q?=E5=88=87=E6=8D=A2=E6=95=B0=E6=8D=AE=E5=BA=93=EF=BC=88=E6=A0=87?=
 =?UTF-8?q?=E9=A2=98=E6=A0=8F=E5=88=87=E6=8D=A2=E5=BA=93+=E7=8B=AC?=
 =?UTF-8?q?=E7=AB=8B=E9=80=89=E5=BA=93=E9=A1=B5=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/QueryBuilder.vue | 56 ++++++++++++++++++---------------
 src/i18n/locales/en.json        |  3 +-
 src/i18n/locales/zh-CN.json     |  3 +-
 3 files changed, 34 insertions(+), 28 deletions(-)

diff --git a/src/components/QueryBuilder.vue b/src/components/QueryBuilder.vue
index b257c45d..e2e547ba 100644
--- a/src/components/QueryBuilder.vue
+++ b/src/components/QueryBuilder.vue
@@ -14,7 +14,9 @@
             <div class="flex items-center gap-2 text-sm font-medium text-gray-700 dark:text-gray-200">
               <Blocks class="w-4 h-4 text-gray-400"/>
               <span>{{ t('qb.title') }} · {{ activeLabel() }}</span>
-              <span class="text-[11px] text-gray-400 font-normal">{{ t('qb.dragHint') }}</span>
+              <span v-if="srcNoDb && pickedDb" class="text-[11px] text-gray-400 font-normal">/ {{ pickedDb }}</span>
+              <button v-if="srcNoDb && pickedDb && !picking" class="text-[11px] text-blue-500 hover:underline cursor-pointer font-normal" @click="picking = true">{{ t('qb.switchDb') }}</button>
+              <span v-else class="text-[11px] text-gray-400 font-normal">{{ t('qb.dragHint') }}</span>
             </div>
             <div class="flex items-center gap-2">
               <!-- 已存查询：载入 -->
@@ -51,14 +53,16 @@
 
           <div v-if="loading" class="flex-1 flex items-center justify-center text-sm text-gray-400">{{ t('qb.loading') }}</div>
           <div v-else-if="error" class="flex-1 flex items-center justify-center text-sm text-red-500 px-6 text-center">{{ error }}</div>
-          <!-- MySQL 连接未指定库：先选库 -->
-          <div v-else-if="srcNoDb && !pickedDb" class="flex-1 flex flex-col items-center justify-center gap-3 text-sm text-gray-400 px-6 text-center">
-            <span>{{ t('qb.pickDbFirst') }}</span>
-            <select class="text-sm rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 px-3 py-1.5 focus:outline-none cursor-pointer min-w-[200px]"
-                    :value="''" @change="onPickDb($event)">
-              <option value="" disabled>{{ t('qb.selectDb') }}</option>
-              <option v-for="d in databases" :key="d" :value="d">{{ d }}</option>
-            </select>
+          <!-- MySQL 连接未指定库：选库页（首次或点“切换库”后） -->
+          <div v-else-if="srcNoDb && (picking || !pickedDb)" class="flex-1 overflow-auto p-4">
+            <div class="text-xs text-gray-500 dark:text-gray-400 mb-2">{{ t('qb.pickDbFirst') }}</div>
+            <div v-if="databases.length" class="flex flex-wrap gap-2">
+              <button v-for="d in databases" :key="d"
+                      class="px-3 py-1.5 text-xs rounded border cursor-pointer transition-colors"
+                      :class="d === pickedDb ? 'border-blue-400 text-blue-500 bg-blue-50 dark:bg-blue-900/20' : 'border-gray-300 dark:border-gray-600 hover:border-blue-400 hover:text-blue-500'"
+                      @click="selectDb(d)">{{ d }}</button>
+            </div>
+            <div v-else class="text-xs text-gray-400">{{ t('qb.noTables') }}</div>
           </div>
           <div v-else-if="tables.length === 0" class="flex-1 flex items-center justify-center text-sm text-gray-400 px-6 text-center">{{ t('qb.noTables') }}</div>
 
@@ -91,12 +95,6 @@
               <div class="rounded border border-gray-200 dark:border-gray-700">
                 <div class="px-2.5 py-1 text-[11px] font-medium text-gray-500">FROM / JOIN</div>
                 <div class="px-2.5 pb-2 flex flex-col gap-1.5">
-                  <div v-if="srcNoDb" class="flex items-center gap-1.5">
-                    <span class="text-[11px] text-gray-400 w-10 flex-shrink-0">{{ t('qb.db') }}</span>
-                    <select :value="pickedDb" class="text-xs rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 px-2 py-1 focus:outline-none min-w-[160px]" @change="onPickDb($event)">
-                      <option v-for="d in databases" :key="d" :value="d">{{ d }}</option>
-                    </select>
-                  </div>
                   <div class="flex items-center gap-1.5">
                     <span class="text-[11px] text-gray-400 w-10 flex-shrink-0">FROM</span>
                     <select v-model="table" class="text-xs rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 px-2 py-1 focus:outline-none min-w-[160px]">
@@ -351,6 +349,7 @@ const tables = ref<Tbl[]>([])
 const srcNoDb = ref(false)
 const databases = ref<string[]>([])
 const pickedDb = ref('')
+const picking = ref(false)
 
 const table = ref('')
 const joins = ref<Join[]>([])
@@ -760,11 +759,11 @@ const load = async () => {
 }
 
 // 选择/切换数据库：加载该库表并重置构建器
-const onPickDb = async (e: Event) => {
-  const db = (e.target as HTMLSelectElement).value
-  if (!db || db === pickedDb.value) {
+const selectDb = async (db: string) => {
+  if (!db) {
     return
   }
+  const switching = db !== pickedDb.value
   loading.value = true
   try {
     const source = resolveActiveSource()
@@ -772,14 +771,18 @@ const onPickDb = async (e: Event) => {
     restoring = true
     pickedDb.value = db
     tables.value = list
-    joins.value = []
-    selectItems.value = []
-    distinct.value = false
-    groupBy.value = []
-    wheres.value = []
-    havings.value = []
-    orders.value = []
-    table.value = list[0]?.name || ''
+    picking.value = false
+    // 切到不同库才重置查询；重选同库则保持
+    if (switching) {
+      joins.value = []
+      selectItems.value = []
+      distinct.value = false
+      groupBy.value = []
+      wheres.value = []
+      havings.value = []
+      orders.value = []
+      table.value = list[0]?.name || ''
+    }
     await nextTick()
     restoring = false
     persist()
@@ -794,6 +797,7 @@ const onPickDb = async (e: Event) => {
 
 const openBuilder = () => {
   visible.value = true
+  picking.value = false
   load()
 }
 
diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
index 0d50d287..be13d950 100644
--- a/src/i18n/locales/en.json
+++ b/src/i18n/locales/en.json
@@ -1053,8 +1053,9 @@
     "loading": "Loading schema…",
     "noTables": "No tables in the current source",
     "db": "Database",
-    "pickDbFirst": "This connection has no database selected — pick one first",
+    "pickDbFirst": "This connection has no database selected — pick one",
     "selectDb": "Select a database…",
+    "switchDb": "Switch DB",
     "tables": "Tables",
     "columns": "Columns",
     "value": "Value",
diff --git a/src/i18n/locales/zh-CN.json b/src/i18n/locales/zh-CN.json
index 450a3a16..1221a506 100644
--- a/src/i18n/locales/zh-CN.json
+++ b/src/i18n/locales/zh-CN.json
@@ -1053,8 +1053,9 @@
     "loading": "加载表结构中…",
     "noTables": "当前数据源没有可用的表",
     "db": "数据库",
-    "pickDbFirst": "当前连接未指定数据库，请先选择一个数据库",
+    "pickDbFirst": "当前连接未指定数据库，请选择一个数据库",
     "selectDb": "选择数据库…",
+    "switchDb": "切换库",
     "tables": "表",
     "columns": "列",
     "value": "值",

From 8a375f793544d116e3af5fe5f0cf31c1bd64c201 Mon Sep 17 00:00:00 2001
From: qianmoQ <shicheng@devlive.org>
Date: Mon, 6 Jul 2026 19:09:22 +0800
Subject: [PATCH 23/23] =?UTF-8?q?docs(release):=20=E6=96=B0=E5=A2=9E=2026.?=
 =?UTF-8?q?4.0=20=E5=8F=91=E5=B8=83=E6=97=A5=E5=BF=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/src/content/release/26.4.0.md | 106 +++++++++++++++++++++++++++++
 1 file changed, 106 insertions(+)
 create mode 100644 docs/src/content/release/26.4.0.md

diff --git a/docs/src/content/release/26.4.0.md b/docs/src/content/release/26.4.0.md
new file mode 100644
index 00000000..1b33f3e3
--- /dev/null
+++ b/docs/src/content/release/26.4.0.md
@@ -0,0 +1,106 @@
+---
+title: 26.4.0
+date: 2026-07-06
+description: 可视化查询构建器、数据库工具、AI 增强与编辑器生产力
+---
+
+CodeForge v26.4.0 是一次以**数据库与 AI** 为核心的版本：全新的**拖拽式可视化查询构建器**让你不写 SQL 也能搭出多表 JOIN、聚合、分组、过滤与排序的复杂查询；配套带来**表格行内编辑回写、连接分组与导入导出、SQL 一键格式化**等数据库能力；AI 侧新增**修复诊断、生成文档注释、翻译注释、跨文件多文件编辑**；编辑器则补齐**行书签、折叠展开、括号跳转、语法扩选、空白字符渲染**等一批生产力功能。
+
+CodeForge v26.4.0 is a release centered on **database tooling and AI**: a brand-new **drag-and-drop visual query builder** lets you compose complex multi-table JOIN / aggregate / group / filter / sort queries without writing SQL; it ships alongside **inline cell editing with write-back, connection grouping and import/export, and one-click SQL formatting**; AI gains **diagnostic fixes, doc-comment generation, comment translation and multi-file editing**; and the editor adds **line bookmarks, folding, bracket matching, syntax-aware selection, and whitespace rendering**.
+
+---
+
+## 📦 版本信息 | Release Information
+
+- **项目地址 | Repository**：https://github.com/devlive-community/codeforge
+- **官方网站 | Official Website**：https://codeforge.devlive.org/
+- **版本号 | Version**：v26.4.0
+- **发布日期 | Release Date**：2026年7月6日 | July 6, 2026
+
+---
+
+## 🧱 可视化查询构建器 | Visual Query Builder
+
+不写 SQL，也能拖出完整查询——从左侧结构面板把列拖到各个落区即可实时生成 SQL 并运行：
+Compose a full query without writing SQL — drag columns from the schema panel into drop zones to generate and run SQL live:
+
+- **拖拽式搭建**：列拖入 SELECT / WHERE / GROUP BY / ORDER BY / HAVING 落区，落区带放置提示
+- **多表 JOIN**：加表、选 INNER/LEFT/RIGHT/FULL 与 ON 条件，列自动带表限定
+- **类型感知 WHERE**：运算符随列类型变化，值输入自适应 BETWEEN / IN / 布尔 / 日期
+- **聚合与分组**：聚合函数、别名（AS）、DISTINCT、GROUP BY（含自动分组）、HAVING
+- **函数任意用**：可搜索分类的函数选择器，支持**自由输入任意函数名 + 参数**（如 `SUBSTRING(col,1,3)`、`split_part(col,',',1)`），SELECT 与 WHERE 均可套函数
+- **保存 / 载入查询**：按数据源命名存取常用查询；状态自动记忆
+- **未指定库可切库**：连接未选数据库时在构建器内选库 / 切库，表名自动带库限定
+
+A drag-driven builder with drop zones for SELECT / WHERE / GROUP BY / ORDER BY / HAVING; **multi-table JOIN** with configurable ON conditions and auto table-qualified columns; **type-aware WHERE** (operators and value inputs adapt to the column type — BETWEEN / IN / boolean / date); aggregates, aliases, DISTINCT, GROUP BY (with auto-grouping) and HAVING; a searchable, categorized function picker that also accepts **any custom function name plus arguments** (usable in both SELECT and WHERE); **named saved queries** per data source with automatic state memory; and in-builder **database picking/switching** for connections without a default database.
+
+---
+
+## 🗄 数据库 · SQL | Database & SQL
+
+- **表格行内编辑回写** - 双击单元格改值，生成 UPDATE 语句确认后写库（单表结果）
+- **连接分组** - 为数据库连接分组，设置页按分组归类展示
+- **连接导入 / 导出** - 连接配置导出为 JSON、从 JSON 导入（默认不含密码，可选包含）
+- **格式化 SQL** - 命令面板一键格式化当前 SQL
+
+**Inline cell editing** with write-back (double-click to edit; generates a confirmed UPDATE for single-table results), **connection grouping** in settings, **connection import/export** as JSON (passwords excluded by default, optional to include), and a **Format SQL** command.
+
+---
+
+## 🤖 AI 能力增强 | AI
+
+- **AI 修复诊断** - 把当前文件的 LSP 诊断交给 AI 修复
+- **AI 生成文档注释** - 为选中代码生成规范的文档注释
+- **AI 翻译注释 / 文档** - 中英互译注释与文档，保留代码结构
+- **AI 多文件编辑** - 给出指令，跨已打开文件生成修改并逐个差异审查后应用
+
+**Fix diagnostics** (hand the file's LSP diagnostics to AI), **generate doc comments** for a selection, **translate comments/docs** between Chinese and English while preserving code structure, and **multi-file editing** — describe a change and review per-file diffs before applying across open files.
+
+---
+
+## 🏃 运行 · REPL | Run & REPL
+
+- **运行预设管理** - 保存多套运行输入（参数 / stdin / 环境变量）一键切换
+- **运行输出过滤** - 只显示包含关键字的输出行
+- **启动 REPL** - 为当前语言启动交互式解释器
+
+Manage **run presets** (args / stdin / env) with one-click switching, **filter run output** to lines matching a keyword, and **start a REPL** for the current language.
+
+---
+
+## ✏️ 编辑器生产力 | Editor Productivity
+
+- **行书签** - 切换 / 上一处 / 下一处 / 清空，按文件记忆
+- **折叠 / 展开全部代码**、**转到匹配括号**、**展开 / 收缩选区**（按语法节点逐级扩选）
+- **转换缩进** - 空格 ↔ 制表符互转
+- **渲染空白字符** - 空格与制表符可视化开关
+
+**Line bookmarks** (toggle / next / previous / clear, remembered per file), **fold/unfold all**, **go to matching bracket**, **expand/shrink selection** by syntax node, **convert indentation** (spaces ↔ tabs), and a **render-whitespace** toggle.
+
+---
+
+## 🧭 大纲 · 诊断 · 工作区 | Outline, Diagnostics & Workspace
+
+- **大纲优先用 LSP** - 基于 documentSymbol，回退正则解析
+- **问题面板跨文件聚合诊断** - 汇总多个文件的诊断
+- **命名工作区** - 保存 / 打开一组工作区根
+
+Outline now prefers **LSP documentSymbol** (falling back to regex), the problems panel **aggregates diagnostics across files**, and **named workspaces** let you save and reopen a set of roots.
+
+---
+
+## 🌿 Git · 命令面板 | Git & Command Palette
+
+- **在浏览器打开仓库主页** - 一键跳转远程仓库
+- **强制删除未合并分支** - 删除失败时可确认强制删除
+- **命令面板最近使用置顶** - 常用命令更快触达
+
+**Open the repository homepage in a browser**, **force-delete** branches that aren't fully merged (with confirmation), and **recently-used commands** float to the top of the command palette.
+
+---
+
+## 📥 立即下载 | Download Now
+
+在 [GitHub Releases](https://github.com/devlive-community/codeforge/releases) 下载最新版本，或访问[官方网站](https://codeforge.devlive.org/)了解更多信息。
+
+Download the latest version from [GitHub Releases](https://github.com/devlive-community/codeforge/releases), or visit the [Official Website](https://codeforge.devlive.org/) for more information.