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 ( +