fix(query): 结尾分号导致 LIMIT 拼接成两条语句（MySQL 1064）+ SQL 编辑器光标异常与无法滚动

=== 一、点表生成的语句带分号 → 查询必报 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

@@ -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)

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<SqlEditorHandle, SqlEditorProps>(
           }),
           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<SqlEditorHandle, SqlEditorProps>(
 
       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<SqlEditorHandle, SqlEditorProps>(
       });
     }, [placeholder]);
 
-    return <div ref={containerRef} style={{ height, minHeight: height }} className="sql-editor-wrapper" />;
+    return (
+      <div
+        ref={containerRef}
+        // height 固定 → 内层 .cm-scroller 才有确定的可用高度，从而出现滚动条；
+        // resize: vertical → 用户可以自己把编辑区拖高（右下角有拖拽柄），
+        // 比写死 200px 灵活；overflow hidden 保证内容不会溢出到卡片外。
+        style={{
+          height,
+          minHeight: '120px',
+          resize: 'vertical',
+          overflow: 'hidden',
+        }}
+        className="sql-editor-wrapper"
+      />
+    );
   },
 );
 

frontend/src/features/query/components/SqlEditorSection.tsx

@@ -39,7 +39,7 @@ export function SqlEditorSection({
           onChange={onSqlChange}
           placeholder={placeholderMap[dbType]}
           language={editorLang}
-          height="200px"
+          height="240px"
           onExecute={onExecute}
           schema={dbType === 'mysql' || dbType === 'postgresql' ? schema : undefined}
         />