第 02 章界面结构

整个程序只有一个窗口。窗口从上到下分四层:工具栏、连接颜色带、主体区、状态栏; 主体区横向再分三块:左侧栏、标签内容区、右侧字段栏。 把这一章看明白,后面每一章都只是往这张图里填内容。

窗口分区与职责

主窗口整体布局 本地开发 — app_dev 本地开发 + 新建查询 + 打开表… 放弃 预览 提交修改 · 7 app_dev 🔍 搜索表、视图… ▾ 表 (128) users orders articles ▾ 视图 (3) v_active_users 🕘 查询历史 📋 Console Log users 查询 1 orders # 🔑 id name email content created_at 1 1 张三 zs@example.c… 这是一篇很长的文… 2025-01-01 2 2 李四 ls@example.c… «BLOB 12.3 KB» 2025-01-02 3 3 王五 NULL NULL 2025-01-03 数据网格(只读) 单元格不能编辑:双击只会跳到右侧字段栏对应的字段 🔍 搜索字段 18 字段 🔑 id int unsigned 1 name varchar(255) 张三 email varchar(255) zs@example.com content longtext 这是一篇很长的文… photo blob «图片 PNG 45.2 KB» created_at datetime 2025-01-01 10:00 右侧字段栏 表数据标签专有 · 默认显示 改数据只在这里改,网格是只读的 …(滚动查看更多字段) ● 本地开发 · app_dev · MySQL 8.0.36 · utf8mb4 行 1–300 / 约 12,480 行 · 第 1 页 · 300 行/页 筛选 导出… 1 2 3 4 5 6 7
图 2-1 主窗口整体布局。主体区分三块:左侧栏、标签内容区、右侧字段栏。
#区域职责会变的东西
1工具栏 连接切换、标签导航、变更操作;最右端是右侧字段栏开关 变更操作组和 只在表数据标签下可用。
2连接颜色带 用连接配置里的颜色区分生产 / 测试 / 开发,专门用来防「以为自己连的是测试库」。 跟随连接配置里的颜色。
3左侧栏 选择库、浏览对象、进入查询历史与 Console Log。 随当前连接和当前库变化;可拖宽、可整体隐藏(⌃⌘S)。
4标签栏 当前连接打开的所有标签。有未提交改动的标签,标题右边有个橙色小圆点。 完全随打开的内容变化。
5标签内容区 所有实际内容都在这里。表数据标签里是只读的数据网格;查询标签里是编辑器加只读的结果网格。 完全随标签类型变化。
6右侧字段栏 只在表数据标签里出现:纵向列出焦点行的全部字段(列名 + 类型 + 值),是唯一能改数据的地方。 默认显示,可拖宽(260–560pt,默认 320pt)、可隐藏;没有选中行或选中多行时显示对应的提示。
7状态栏 当前状态、进度,以及随标签变化的操作按钮。 左半看状态,右半看操作。
右侧字段栏

选中一行后,窗口右侧会多出一列字段栏:纵向列出这一行的所有列,每行是列名(主键列带 🔑 并加粗)、 类型(灰色小字,如 varchar(255))、可直接编辑的值,以及右侧的 (设为 NULL)按钮。 顶部有「搜索字段」框和字段计数。表数据标签里只有它能改数据——网格本身是只读的。

默认显示,而且只在表数据标签里出现:查询结果、表结构、对象定义标签都没有。 用工具栏最右端的 按钮,或菜单「视图 → 显示 / 隐藏右侧字段栏」来开关它; 宽度可以拖(260–560pt,默认 320pt)。这里故意不配快捷键: ⌘ 组合已经分给了网格、编辑器和标签操作,再挤一个进去只会互相抢按键。

工具栏

工具栏各个按钮 工具栏底部 本地开发 + 新建查询 + 打开表… (拖动窗口) 放弃 预览 提交修改 7 ↑ 连接颜色带(跟随连接配置里的颜色,生产库建议设红色) 1 2 3 4 5 6 7 8 9
图 2-2 工具栏。左半边是「我在哪」,右半边是「改了什么、要不要提交」。
#控件作用快捷键
1连接切换器 点开是连接列表(见下图)。左边的小圆点是这个连接的状态:灰=未连接,转圈=连接中,绿=正常,红=异常。
2标签前进 / 后退 按你打开标签的顺序前后跳。和浏览器的前进后退是一个意思。走到头的时候箭头变灰。⌘[ ⌘]
3+ 新建查询 开一个空白的 SQL 标签,标题是「查询 1」「查询 2」这样递增。可以右键重命名。⌘T
4+ 打开表… 弹出一个表名搜索框。表特别多、不想在对象树里翻的时候用它。输入几个字母就出候选。
5放弃 丢掉当前标签的全部未提交修改,表格恢复成服务器上的真实数据。改动超过 5 条或包含删除时会先确认。⇧⌘⌫
6预览 打开一个面板,把将要执行的 SQL 一条条列出来。面板里看到的和实际提交的完全一致。⇧⌘P
7提交修改 真的写数据库。右上角的橙色数字是待提交条数,为 0 时整个按钮变灰。只读连接上永远禁用,鼠标悬停会说明原因。⌘S⌘↩
8连接颜色带 一条 2pt 的细带,用连接配置里选的颜色。它是整窗口最容易扫到的一条线,专门用来防「以为自己连的是测试库」。
9右侧字段栏开关 ▤ 切换右侧字段栏的显示 / 隐藏。只在表数据标签里可用,其它标签上是灰的。默认显示;它没有快捷键
变更操作组的启用条件

这一组只在表数据标签激活时可用。在查询标签、表结构标签、历史标签上,它们都是灰的。 没有未提交改动(条数 0)时也整体变灰。

工具栏最右端的 开关同样只在表数据标签里可用——右侧字段栏本来就只服务它。

连接切换器

点工具栏最左边那个下拉,会展开当前保存的所有连接。

连接切换器下拉 本地开发 本地开发 app_dev 预发布 app_staging 🔒 生产 app_prod 新建连接… ⌘N 编辑当前连接… 重新连接 ⇧⌘R 断开连接 ⇧⌘D 切换连接不会断开原来那个连接 同时最多保持 8 个连接 当前连接:打勾。后面显示当前选中的库 🔒 表示这个连接处于只读模式 重连不会重放上次的查询 1 2 3 4
图 2-3 连接切换器。这里是「换一个数据库看」,不是「关掉再开」。
#控件作用
1连接切换器按钮 显示当前连接名 + 状态点。无论你在哪个标签里,它永远在同一个位置。
2连接项 点一下切过去。左侧是状态点,名称后面灰字是当前选中的库。切换后标签栏立刻变成那个连接的标签集合。
3勾选标记 标出当前正在看的连接。展开时它会被高亮。
4连接操作 新建连接… ⌘N编辑当前连接…(改完保存会重连);重新连接 ⇧⌘R断开连接 ⇧⌘D

左侧栏

左侧栏从上到下是三层:选库、搜对象、看对象。底部还有两个固定的入口。 宽度可以拖,拖动后会记住;整个左侧栏也能用 ⌃⌘S 隐藏。

左侧栏与对象树 app_dev 🔍 搜索表、视图… 仅显示前 500 项,请用上方搜索框查找 ▾ 表 (128) application_logs articles orders users ▾ 视图 (3) v_active_users v_order_summary 🕘 查询历史 📋 Console Log 打开数据 打开结构 复制表名 导出… 导入 CSV… 截断表… 删除表… ↑ 这两项直接生效,不进暂存区 1 2 3 4 5 6 7
图 2-4 左侧栏、对象树,以及表项的右键菜单。
#控件作用
1库切换器 列出当前连接能访问的所有库。库多的时候下拉里自带搜索框。选中后对象树刷新为该库的内容;没选库时对象树显示「请选择一个数据库」。
2对象搜索框 输入即过滤,大小写不敏感,按子串匹配。搜索时自动展开所有分组,只显示命中的对象。⌘F 可以直接聚焦到这里。
3分组标题 表 / 视图两组,标题上带数量。可以折叠,折叠状态会记住。分组内容只在展开时才去加载,加载期间显示占位行。
4对象项 单击表打开数据视图(已打开则切过去);双击在新标签打开;单击视图在新标签打开只读定义。右键展开菜单。
5右键菜单 见下表。注意最后两项是红色的,因为它们直接生效、不进暂存区。
6查询历史 / Console Log 两个固定入口,点开各自成一个新标签。它们的详细用法在第 6 章
7500 项提示条 一个库超过 500 个表时只显示前 500 个,并在顶部挂这条提示,避免一次拉几千个名字把界面拖死。

表项的右键菜单

菜单项行为是否可撤销
打开数据在当前标签打开数据视图
打开结构在新标签打开表结构视图
复制表名把表名放进剪贴板
导出…打开导出面板,源是整张表
导入 CSV…打开 CSV 导入向导,目标表就是它
截断表…清空表内所有数据不能。需手动输入表名确认
删除表…删除整张表不能。需手动输入表名确认

截断表 / 删除表的确认弹窗

这两件事没法通过「放弃改动」回退,所以确认方式比普通弹窗重一档: 先把要执行的 SQL 摆出来,然后要求你手动输入表名,输入正确才能点确认按钮。

删除表确认弹窗 删除表 将要执行: DROP TABLE `app_dev`.`orders`; 该操作不可撤销,且无法通过「放弃改动」回退。 请输入表名 orders 以确认: 取消 (输入正确前,删除按钮是灰的)
图 2-5 删除表的确认弹窗。按钮会一直禁用,直到输入的表名完全匹配。

标签栏

标签栏里的每个标签都属于当前连接。切换连接时,整条标签栏会换成那个连接的标签集合。 一共有六种标签。

标签栏 常规 users 查询 1 orders orders · 结构 查询历史 Console Log ← 标签过多时横向滚动 结果标签超过 24 个 结果 1 结果 2 结果 3 前 23 个直接显示,其余收进这个下拉 标签上的标记 有改动 橙点 = 有未提交的修改 已断开 内容变灰 + 遮罩 错误 ● 执行失败的语句,标红 只读拦截 被只读模式挡下
图 2-6 标签栏。三种额外面板:超过 24 个结果标签时折叠、标签上的状态标记。
标签类型标题长这样内容可编辑
表数据users只读的数据网格 + 右侧字段栏网格只读;在右侧字段栏里编辑(有主键且非只读连接)
表结构users · 结构列 / 索引 / 外键 / 触发器 / 建表语句否(也没有字段栏)
对象定义v_active_users视图的定义语句否(也没有字段栏)
查询查询 1查询 2SQL 编辑器 + 只读的结果网格编辑器里可写;结果网格只读(也没有字段栏)
查询历史查询历史历史记录列表
Console LogConsole Log语句日志

右侧字段栏只在表数据标签里出现:查询结果、表结构、对象定义标签都没有。

标签的规则

关闭标签时会发生什么

标签状态行为
有未提交改动弹窗三选一:提交 / 放弃并关闭 / 取消
查询标签、内容来自草稿直接关闭,不提示(内容已经自动存成草稿)
查询标签、关联过磁盘文件且有新改动提示保存
其它直接关闭

状态栏

底部一条细状态栏,内容随当前标签变化。左半是「现在什么情况」,右半是「能做什么」。

状态栏的各种形态 表数据标签 本地开发 · app_dev · MySQL 8.0.36 · utf8mb4 行 1–300 / 约 12,480 行 · 第 1 页 · 300 行/页 筛选 结构 导出… 查询编辑器标签 本地开发 · app_dev 已执行 3 条语句 · 耗时 42 ms · 返回 1,204 行 停止 执行中的查询 正在执行… 已接收 12,480 行(2.1 MB)(3.4 秒) 停止 有未提交的修改 ● 有 7 处未提交的修改(3 新增 · 2 修改 · 2 删除) 查看详情 行 1–300 / 约 12,480 行 提交修改 · 7 表结构标签 / 只读连接 11 列 · 3 索引 · 1 外键 · 0 触发器 app_prod · 只读 (禁用,悬停说明原因) 提交
图 2-7 状态栏在不同标签下的内容。左半边永远是连接状态,右半边随标签变。

状态栏左侧的连接状态

格式含义
● 本地开发 · app_dev · MySQL 8.0.36 · utf8mb4正常连接
末尾多一段 · 只读该连接处于只读模式,用醒目颜色显示
圆点变黄SSH 隧道正在重建
圆点变红连接已断开,内容区会盖一层遮罩

点这一段会弹出一个菜单:

菜单栏

菜单内容
TableLite关于 TableLite / 偏好设置… ⌘, / 退出 ⌘Q
文件新建连接 ⌘N、新建查询 ⌘T、关闭标签 ⌘W、导入 CSV… ⇧⌘I、导出… ⇧⌘E、打开脚本… ⌘O、脚本另存为… ⇧⌘S
编辑撤销 / 重做 / 剪切 / 复制 / 粘贴、注释切换 ⌘/、缩进 / 反缩进、查找 ⌘F
连接重新连接 ⇧⌘R、断开连接 ⇧⌘D、切换数据库 ⌘K、刷新 ⌘R、提交修改 ⌘S、预览 SQL ⇧⌘P、放弃修改 ⇧⌘⌫、取消查询 ⌘.、☑ 只读模式
视图显示 / 隐藏左侧栏 ⌃⌘S、显示 / 隐藏右侧字段栏(没有快捷键)、显示 / 隐藏 Console Log ⇧⌘C、上一个 / 下一个标签 ⌘[ ⌘]
窗口最小化 / 缩放。没有「新建窗口」——单窗口应用
帮助使用说明 / 打开数据目录

空状态

每种「没东西可显示」的情况都有专门的文案,不会只留一片空白。

空状态 选择一个连接开始 + 新建连接 请选择一个数据库 当前数据库没有表 新建查询 这张表里还没有数据 按 ⌘I 插入第一行 查询成功,0 行,耗时 3 ms 「没有数据」和「有数据但被过滤掉了」会分开说明 ▾ 视图 (0) (空) 连接已断开 重新连接
图 2-8 空状态。每种都告诉用户「为什么空」以及「下一步能做什么」。

右侧字段栏也有自己的空状态:数据标签里没有选中行时,它显示「选中一行以查看和编辑它的字段」; 选中多行时显示「已选中 12 行 · 请只选一行」,不列出字段。