textarea应设rows="12"并配合min/max-height、resize:vertical、white-space:pre-wrap、tab-size:4，监听input动态拉伸，移动端用scrollIntoView({behavior:'smooth',block:'nearest'})延时滚动。

SQL输入框默认高度太小，textarea 无法自适应内容行数

浏览器里原生 textarea 默认只有两行高，写几行 join 就要拖滚动条，根本没法看清上下文。这不是样式“不好看”的问题，是编辑效率直接掉档——尤其粘贴一段带缩进的 cte 查询时，第一眼根本看不出括号是否匹配。

实操上别碰 height 固定值，那会让用户缩放字体或换设备后更难受。优先用 rows 属性控制初始行数，再配合 JS 动态拉伸：

• rows="12" 是个稳妥起点，覆盖大多数中等复杂度查询（含 3 层嵌套、2 个子查询）
• 加 style="min-height: 200px; max-height: 600px;" 防止内容爆炸式增长撑爆页面
• 监听 input 事件 + scrollHeight 对比，只在内容超出可视区时才扩大，避免频繁重排

用 CSS resize 和 overflow 控制手动调整体验

用户自己想拖拽放大？得明确放开这个能力，否则右下角那个小三角会消失。但放任自由拉伸又可能把布局顶歪，特别是嵌在 Modal 或侧边栏里的 SQL 编辑器。

关键不是禁用，而是约束方向和边界：

• 加 resize: vertical; —— 只允许上下拉，避免横向拉宽破坏表格列宽或响应式断点
• 配 overflow-y: auto; overflow-x: hidden; —— 横向永远不出现滚动条（SQL 不该换行，缩进靠空格/Tab）
• 如果父容器用了 flex 布局，务必给 textarea 加 flex-shrink: 0;，否则拉大后会被压缩回原形

VS Code 风格自动换行和软缩进失效？检查 white-space 和 tab-size

复制进来的 SQL 一坨糊在一起，或者 Tab 缩进变成 2 字符宽，看着像没对齐——这通常不是编辑器逻辑问题，是 CSS 把空格和制表符当普通空白处理了。

两个属性必须显式声明：

• white-space: pre-wrap; —— 保留换行和空格，但允许长行自动折行（区别于 pre 的硬截断）
• tab-size: 4; —— 确保粘贴进来的 \t 渲染为 4 字符宽，和本地 IDE 一致；注意 Safari 目前仍需 -webkit-tab-size 前缀
• 如果用了代码高亮库（如 highlight.js），确认它没往 textarea 外套 div 并覆盖了这些样式

移动端键盘弹出遮挡输入框？scrollIntoView 要带行为参数

在 iOS Safari 或安卓 Chrome 里，点开输入框后虚拟键盘一顶，光标直接被盖住，用户得手动滚半天才能看到自己打的字。这不是 JavaScript 错误，是浏览器默认滚动行为太保守。

触发时机必须卡在键盘弹起后（即 focus 事件之后），且滚动动作要带平滑和对齐：

• 用 element.scrollIntoView({ behavior: 'smooth', block: 'nearest' }); —— block: 'nearest' 防止强行滚到顶部，留出键盘上方安全区
• 加 100ms 延迟（setTimeout），确保键盘状态稳定后再滚动，否则 iOS 可能计算错视口高度
• 如果输入框在 position: fixed 的底部工具栏里，改用 window.scrollTo() 手动算偏移，scrollIntoView 在 fixed 容器里常失效

最麻烦的其实是混合场景：比如一个带折叠面板的 SQL 工具，展开后高度突变，此时 resize 监听和滚动逻辑容易打架。这种时候别强求自动适配，加个「最大化编辑区」按钮反而更稳。