From 71d5afff03d6ae5724a2e5d9bfc76d8fcff78e3b Mon Sep 17 00:00:00 2001 From: opsx Date: Tue, 27 Oct 2026 09:22:11 +0000 Subject: [PATCH] =?UTF-8?q?fix(query):=20=E7=BB=93=E5=B0=BE=E5=88=86?= =?UTF-8?q?=E5=8F=B7=E5=AF=BC=E8=87=B4=20LIMIT=20=E6=8B=BC=E6=8E=A5?= =?UTF-8?q?=E6=88=90=E4=B8=A4=E6=9D=A1=E8=AF=AD=E5=8F=A5=EF=BC=88MySQL=201?= =?UTF-8?q?064=EF=BC=89+=20SQL=20=E7=BC=96=E8=BE=91=E5=99=A8=E5=85=89?= =?UTF-8?q?=E6=A0=87=E5=BC=82=E5=B8=B8=E4=B8=8E=E6=97=A0=E6=B3=95=E6=BB=9A?= =?UTF-8?q?=E5=8A=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit === 一、点表生成的语句带分号 → 查询必报 1064 === 用户报错： Error 1064 (42000): You have an error in your SQL syntax; ... near 'LIMIT 100 OFFSET 0' at line 2 复现语句（点表自动生成的原文，天然带分号）： SELECT * FROM `cex_activity`.`concert_goods_language`; 根因在 instance_detail.go 的自动补 LIMIT： sqlStr = fmt.Sprintf("%s LIMIT %d OFFSET %d", sqlStr, limit, offset) 原语句已以 ';' 结尾 → 拼完变成 SELECT * FROM ...; LIMIT 100 OFFSET 0 → 两条语句，报错位置就是第 2 行的 LIMIT（与报错文案完全吻合）。 修复：新增 normalizeSQLForExec()，去掉首尾空白并反复剥掉结尾分号， 在两个「会拼 LIMIT」的入口统一调用： ① executeSQLQuery（查询）—— 归一化后再生效 COUNT(*) 统计与 LIMIT 注入 ② exportSQLCSV（导出 CSV）—— 同样先归一化再拼 LIMIT 顺带收益：COUNT(*) 统计以前也会带上分号（虽然 MySQL 容忍），现在干净了。 安全边界未被放松：多语句仍被 isReadOnlySQL 拦住 SELECT 1; SELECT 2 → 拒绝「不允许一次执行多条语句」✅ SELECT 1; LIMIT 5 → 拒绝 ✅（这是一次性两条语句，不是尾分号） 双分号 ;; → 归一化后正常执行 ✅ === 二、SQL / Redis / Mongo 编辑器：光标异常 + 只有 13 行且滚不动 === 用户反馈： 「默认还是有一个很长的竖线 一闪一闪，需要回车后第 2 行才正常」 「输入框下面还有空白，最后只有 13 行可以输入，至少需要加一个滚动」 根因 1（滚不动，13 行）：appTheme 的 '&' 没有 height:100%。 .cm-editor 会随内容无限增高，而外层 div 固定 200px 且裁切， CodeMirror 内部的 .cm-scroller 永远拿不到受限高度 → 不产生滚动条。 13 行 = 200px ÷ 15px 行高，正好对上。 根因 2（光标拉长）：appTheme 在 extensions 里排在 oneDark 【之前】。 CodeMirror theme 是后者覆盖前者，oneDark 的默认行高/内边距盖掉了我们的 line-height，首次测量拿到的行高不对 → 空文档时光标高度算成好几行。 修复： ① appTheme '&' 增加 height:'100%'；外层容器 style 改为 height + minHeight:120px + resize:vertical + overflow:hidden （.cm-scroller 立刻有确定高度 → 内部滚动生效；右下角还能拖动拉高） ② appTheme 移到 oneDark 之后（顺序即优先级） ③ 行高统一写成 1.55em，并在 .cm-scroller / .cm-content / .cm-line / .cm-gutters 四处保持一致（CM 靠读 .cm-content 的 line-height 算光标高度） ④ 挂载后 requestMeasure() + 下一帧再测一次 + document.fonts.ready 后再测一次， 修掉「首帧测量错乱」这一大类问题 ⑤ SqlEditorSection 默认高度 200px → 240px（约 15 行可见） 注意：仍然不要给 .cm-cursor 写死 height / marginTop —— CM 自己按行高算，写死会溢出到相邻行（历史上已经踩过一次）。 === 三、实测 === 表本身为空：cex_activity.concert_goods_language COUNT(*)=0 → SELECT * 返回 0 行是正确结果，不是故障 分号归一化：带分号 / 不带分号 / 双分号 → rows=100 total=17447 完全一致，无 1064 ✅ 安全边界：两条语句、分号后接 LIMIT 均被拒 ✅ 编辑器产物：SqlEditor-*.js 内含 1.55em 与 resize:"vertical" ✅ 镜像：lghost/opsxsql:latest + v0.1 = sha256:72a00dda2419 --- backend/internal/handler/instance_detail.go | 32 +++++++++ frontend/src/components/SqlEditor.tsx | 69 ++++++++++++++++--- .../query/components/SqlEditorSection.tsx | 2 +- 3 files changed, 92 insertions(+), 11 deletions(-) diff --git a/backend/internal/handler/instance_detail.go b/backend/internal/handler/instance_detail.go index 57f713a..d26d996 100644 --- a/backend/internal/handler/instance_detail.go +++ b/backend/internal/handler/instance_detail.go @@ -768,6 +768,8 @@ func executeSQLQuery(instance *model.Instance, dbName string, sqlStr string, lim defer cancel() _ = ctx + // 先剥掉结尾分号：否则后面拼 LIMIT/OFFSET 会变成两条语句（MySQL 1064） + sqlStr = normalizeSQLForExec(sqlStr) upperSQL := strings.ToUpper(strings.TrimSpace(sqlStr)) if ok, reason := isReadOnlySQL(sqlStr); !ok { return nil, fmt.Errorf("查询入口仅允许只读语句：%s。数据变更请提交工单", reason) @@ -843,6 +845,34 @@ func executeSQLQuery(instance *model.Instance, dbName string, sqlStr string, lim }, nil } +// normalizeSQLForExec 去掉首尾空白与结尾分号。 +// +// 必须做这一步的原因：前端「点表」生成的语句天然带分号，例如 +// +// SELECT * FROM `cex_activity`.`concert_goods_language`; +// +// 而 executeSQLQuery 在没有 LIMIT 时会在末尾拼 " LIMIT %d OFFSET %d"， +// 拼完就成了两条语句： +// +// SELECT * FROM ...; LIMIT 100 OFFSET 0 +// +// MySQL 直接报： +// +// Error 1064 (42000): ... near 'LIMIT 100 OFFSET 0' at line 2 +// +// 所以拼 LIMIT / 生成 COUNT(*) 之前必须先剥掉结尾分号。 +func normalizeSQLForExec(sqlStr string) string { + s := strings.TrimSpace(sqlStr) + for { + trimmed := strings.TrimSpace(strings.TrimSuffix(s, ";")) + if trimmed == s { + break + } + s = trimmed + } + return s +} + func isReadOnlySQL(sqlStr string) (bool, string) { cleaned := strings.TrimSpace(stripLeadingSQLComments(sqlStr)) if cleaned == "" { @@ -1594,6 +1624,8 @@ func exportSQLCSV(c *gin.Context, instance *model.Instance, dbName string, sqlSt } defer db.Close() + // 同 executeSQLQuery：结尾分号会让 " LIMIT n" 变成第二条语句 + sqlStr = normalizeSQLForExec(sqlStr) upperSQL := strings.ToUpper(strings.TrimSpace(sqlStr)) if !strings.Contains(upperSQL, " LIMIT ") { sqlStr = fmt.Sprintf("%s LIMIT %d", sqlStr, limit) diff --git a/frontend/src/components/SqlEditor.tsx b/frontend/src/components/SqlEditor.tsx index f8f3135..774d45b 100644 --- a/frontend/src/components/SqlEditor.tsx +++ b/frontend/src/components/SqlEditor.tsx @@ -293,6 +293,8 @@ function getSQLExtension(language: SqlEditorProps['language'], schema?: SqlEdito // Custom theme to match app CSS variables // --------------------------------------------------------------------------- +const MONO_FONT = "'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Consolas', monospace"; + const appTheme = EditorView.theme({ '&': { fontSize: '13px', @@ -300,22 +302,38 @@ const appTheme = EditorView.theme({ color: 'var(--dg-text-primary)', border: '1px solid var(--dg-border)', borderRadius: '6px', + // ★ 必须撑满外层容器：否则 .cm-editor 会随内容无限增高， + // .cm-scroller 永远不会变成可滚动区域，外层高度一裁就只剩十几行， + // 再多输入的内容既看不到也滚不动（用户反馈的「只有 13 行」就是这个）。 + height: '100%', + }, + // ★ 行高统一写在 .cm-scroller / .cm-content / .cm-line / .cm-gutters 四处， + // 并且用带单位的值（1.55em）。CodeMirror 靠读取 .cm-content 的 line-height + // 来决定光标高度；若各处不一致或用了无单位数值，首次测量会拿到错的行高， + // 表现为「空文档时光标是一根贯穿好几行的长竖线，敲个回车才恢复正常」。 + '.cm-scroller': { + overflow: 'auto', + fontFamily: MONO_FONT, + lineHeight: '1.55em', }, '.cm-content': { caretColor: 'var(--dg-text-primary)', - fontFamily: "'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Consolas', monospace", - lineHeight: '1.55', + fontFamily: MONO_FONT, + lineHeight: '1.55em', + padding: '4px 0', }, - // 光标只改颜色/粗细，不要强改 height 与 marginTop： - // CodeMirror 按行高自行计算光标高度，强制 1.25em + marginTop 会溢出到相邻行， - // 视觉上表现为「光标同时在两行闪烁」。 + '.cm-line': { + lineHeight: '1.55em', + }, + '.cm-gutters': { + lineHeight: '1.55em', + }, + // 光标只改颜色/粗细，绝不要强改 height 与 marginTop： + // CM 会按行高自己算光标高度，写死 height 会溢出到相邻行（光标两行同时闪）。 '.cm-cursor': { borderLeftColor: 'var(--dg-text-primary)', borderLeftWidth: '1.5px', }, - '.cm-line': { - lineHeight: '1.55', - }, '&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection': { backgroundColor: 'rgba(66, 133, 244, 0.3) !important', }, @@ -670,8 +688,11 @@ const SqlEditor = forwardRef( }), highlightSelectionMatches(), syntaxHighlighting(defaultHighlightStyle, { fallback: true }), - appTheme, + // ★ 顺序很重要：oneDark 在前、appTheme 在后。 + // CodeMirror 的 theme 是后者覆盖前者；反过来会让 oneDark 的 + // 默认行高/内边距盖掉我们的设置，光标高度测量又会出问题。 oneDark, + appTheme, langCompartmentRef.current.of(getSQLExtension(language, schema)), readOnlyCompartmentRef.current.of(EditorState.readOnly.of(readOnly)), placeholderCompartmentRef.current.of(cmPlaceholder(placeholder)), @@ -689,7 +710,21 @@ const SqlEditor = forwardRef( viewRef.current = view; + // ★ 强制重新测量：编辑器挂载瞬间若容器还没布局完成（或在隐藏面板里）， + // CM 会把行高/光标高度算错，表现为「首行光标是一根几行高的长竖线」。 + // 这里在下一帧、以及等自定义字体加载完成后各测一次，把高度纠正回来。 + view.requestMeasure(); + const raf = requestAnimationFrame(() => view.requestMeasure()); + let cancelled = false; + if (typeof document !== 'undefined' && document.fonts?.ready) { + document.fonts.ready.then(() => { + if (!cancelled) view.requestMeasure(); + }); + } + return () => { + cancelled = true; + cancelAnimationFrame(raf); view.destroy(); viewRef.current = null; }; @@ -739,7 +774,21 @@ const SqlEditor = forwardRef( }); }, [placeholder]); - return
; + return ( +