> ## Documentation Index
> Fetch the complete documentation index at: https://clickhouse.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

> Web SQL UI（Play）文档：这是内置的浏览器查询界面，通过 `/play` 路径提供

# Web SQL UI（Play）

Web SQL UI (Play) 是 ClickHouse 内置的浏览器查询界面。它可通过任意 ClickHouse HTTP 端口上的 `/play` 路径访问 (例如 `http://localhost:8123/play`) 。您可以在其中编写并运行查询、以表或图表形式查看结果，以及通过复制查询的 URL 来共享查询。

整个界面都包含在 `programs/server/play.html` 中：这是一个完全自包含的单页，直接由 ClickHouse 可执行文件提供，不依赖任何框架，也无需构建步骤。唯一的例外是图表渲染：当首次以图表形式显示结果时，会从第三方 CDN 按需加载 `uPlot` 图表库，因此在离线或出站网络受限的部署中无法使用图表。

<div id="query-tabs">
  ## 查询选项卡
</div>

选项卡可让你并排保留多个查询，而不必在单个编辑器中反复切换，或依赖浏览器历史记录。

每个选项卡都有各自的查询文本、标题、查询参数和最近一次结果。连接设置 (URL、用户、密码) 是全局的，由所有选项卡共享。

<div id="when-the-tab-bar-appears">
  ### 选项卡栏何时出现
</div>

运行查询后，或者存在多个选项卡时，选项卡栏就会出现。只有一个且没有结果的选项卡时，页面看起来与引入选项卡之前完全一样，因此在你真正需要之前，选项卡栏不会显示。

活动选项卡在视觉上会与页面融为一体：其背景会沿用每个查询的哈希颜色 (也就是页面背景已使用的同一种颜色) ，并带有渐变效果——在浅色主题中顶部的饱和度更高，在深色主题中顶部则更明亮。非活动选项卡则会根据各自查询文本的哈希值着色，因此不同选项卡会自动通过颜色区分开来。

<div id="creating-closing-and-renaming-tabs">
  ### 创建、关闭和重命名选项卡
</div>

* 使用选项卡右侧的 `[+]` 按钮创建新选项卡。
* 点击选项卡上的 `x` 图标可关闭该选项卡。
* 新选项卡默认命名为 `Query A`、`Query B`，依此类推。
* 点击当前活动选项卡的标题可直接编辑；编辑框会自动扩展以适应文本长度。

<div id="switching-tabs">
  ### 切换选项卡
</div>

* 点击未激活的选项卡即可切换过去。
* 将鼠标指针移到选项卡面板上，然后滚动滚轮即可切换选项卡：向上滚动会切换到左侧的选项卡，向下滚动会切换到右侧的选项卡 (如果有) 。纵向和横向滚轮滚动都支持。

选项卡栏在水平方向上是粘性的——页面水平滚动时，它会像底部的 ClickHouse 标志一样固定在左侧；而在垂直方向上，它会随页面其余部分一起滚动离开。

<div id="persistence-and-browser-history">
  ### 持久化与浏览器历史记录
</div>

工作区——包括各个选项卡、它们的标题、当前活动的选项卡、排列顺序以及小型结果快照——会持久保存到 IndexedDB 中，并在重新加载时恢复。持久化采用尽力而为的方式：如果 IndexedDB 不可用，工作区会在当前会话期间退化为内存状态。

选项卡还会与浏览器的 History API 和 URL 集成：

* 历史状态会记录当前活动的选项卡，因此浏览器的后退和前进按钮可以用来切换选项卡。
* URL 会新增一个 `tab=<name>` 参数。加载时，URL 中的查询和 `tab` 参数会与已保存的选项卡进行协调：如果存在同名选项卡，则复用该选项卡 (并替换其查询) ；如果未找到该名称，或者该选项卡原本未命名，则会创建一个新选项卡。这样，你就可以打开带有新查询的 URL，同时保留自己已保存的选项卡。

<div id="limitations">
  ### 限制
</div>

在查询运行时切换选项卡会丢失该查询的运行状态。

只有较小的结果才会创建快照以便恢复。较大的结果 (超过快照大小限制) 或图片结果不会被保存：切换选项卡或重新加载后，选项卡中会保留查询，但不会保留已渲染的结果，重新运行查询即可再次生成该结果。这既适用于单个查询的结果，也适用于“Run all” (多查询) 运行的合并输出。