基于 Datasheet 二次开发：一个纯浏览器端的 PostgreSQL 数据分析工具

一款无需安装、直接在浏览器中运行的数据管理工具让 SQL 查询和数据可视化触手可及缘起积分统计的烦恼最近我一直在使用 CodeBuddy 和 WorkBuddy 辅助日常开发工作。每次对话都会生成详细日志记录着使用了哪些模型、消耗了多少积分、调用时间。这些数据被导出为一个 Excel 文件按理说用 Excel 做统计分析应该很轻松——但现实总是不那么理想。我对 Excel 的使用并不算精通复杂的数据透视表、公式统计常常把我绕晕。每次想统计某月各模型的使用次数与积分消耗或某月每天的积分使用趋势时我都得在 Excel 里折腾半天结果还常常出错。更理想的方式是什么呢把数据导入数据库用 SQL 查询——这才是我最顺手的方式。但每次都要启动本地数据库、写导入脚本实在太麻烦了。我想要的是一款工具无需安装打开浏览器就能用支持 SQL 查询用我最熟悉的方式分析数据数据持久化刷新页面不会丢失最好还能有一些可视化能力让数据更直观正好我在 GitHub 上刷到了一个很有意思的开源项目——Datasheet。它基于 PGlite 在浏览器中运行完整的 PostgreSQL 数据库数据存储在 IndexedDB 中完美满足了我浏览器内 SQL 分析的需求。于是我 Fork 了这个项目在使用过程中修复了一些 Bug根据实际需求新增了不少功能。现在把我的修改记录下来希望能帮到有类似需求的朋友。项目地址https://github.com/xiuji008/datasheet在线体验https://xiuji008.github.io/datasheet/什么是 DatasheetDatasheet 是一个基于浏览器的 PostgreSQL 数据管理工具核心技术是 PGlite——一个将 PostgreSQL 编译为 WebAssembly 的方案可以在浏览器中直接运行完整的 PG 数据库。原项目的核心特性浏览器内 PostgreSQL无需安装数据库数据持久化到 IndexedDB多工作区管理通过 Schema 隔离支持创建/切换/删除工作区SQL 编辑器基于 CodeMirror支持语法高亮、智能提示数据导入从 Excel/CSV 导入数据可视化配置映射关系表结构浏览左侧栏展示数据库表列表查询结果编辑表格形式展示支持直接编辑并保存我做了哪些修改说明此项目基于开源项目 Datasheet 二次开发在原作基础上修复了若干 Bug 并新增了大量功能。感谢原作者的开源贡献。Bug 修复1. 数据导入表头错误问题导入 Excel 时表头被当作数据行一起导入。原因ImportDialog.vue中获取数据行时使用了错误的切片起点。原代码用headerRow作为切片起点实际上应该用dataStartRow。修复后数据从正确的行开始读取表头独立映射为列名。2. 查询结果首行缺失问题执行SELECT查询后结果集的首行数据不显示。原因index.vue中对查询结果做了rows.slice(1)处理原本可能用于跳过表头但这导致真正的数据行被错误跳过。对于聚合查询如SUM、COUNT结果只有一行时会直接不显示。修复后不再对查询结果进行切片完整显示所有行。3. 类型推断精度不足问题导入数据时如果数值列后续行有大数值会报numeric field overflow错误。原因useImport.ts中类型推断只采样了前 10 行数据来判断列类型如果前 10 行都是小数但后面有大整数会导致类型设置过小。修复后改为扫描全部数据行进行类型推断确保精度足够。4. 日期时间类型丢失时间部分问题包含时间的日期列导入后被推断为DATE类型丢失了时间部分。原因日期和日期时间都被检测为DATE类型。修复后增加时间检测逻辑区分DATE仅日期和TIMESTAMP日期时间并在导入时格式化为标准格式。新增功能1. AI SQL 生成这是我最喜欢的新功能。接入兼容 OpenAI 格式的大模型 API用自然语言描述需求AI 自动生成 SQL。支持的平台DeepSeekOpenAI通义千问MoonshotSiliconFlow配置项API 地址、Key、模型自定义系统提示词可调整支持选择表结构作为上下文减少 Token 消耗可配置是否携带对话历史及轮数2. 数据可视化查询结果可以一键生成图表这对于数据分析来说太实用了。支持的图表类型柱状图折线图饼图特色多选数值列多 Y 轴交替左右分布不同颜色区分数据系列图例支持点击开关AI 根据 SQL 自动生成图表标题图表下载为 PNG 图片双饼图合并导出柱状图的细节优化自适应宽度横坐标过长时斜 45° 省略号截断网格边距防遮挡3. 表结构查看在左侧 TABLES 树中右键点击表名弹出菜单选择查看表结构。展示信息字段名数据类型是否可空主键标识默认值字段备注索引信息一键复制为 Markdown方便在文档中记录表结构或作为 AI 生成 SQL 的上下文。4. SQL 收藏常用 SQL 可以保存下来方便随时复用。保存时填写标题、SQL 内容、描述左侧 SAVED SQL 列表展示所有收藏点击即可加载到编辑器支持编辑和删除5. 标签页增强多标签页管理更加顺手右键菜单关闭其它标签、关闭左侧标签、关闭右侧标签新建查询按钮重新设计为青绿色渐变样式更加醒目6. 删除功能完善补充了原来缺失的删除操作删除表表行末固定显示删除按钮删除工作区非 default工作区列表行末显示删除按钮删除文件侧边栏、对话框、详情页均添加删除按钮7. 日期格式化显示所有查询结果中的 Date 对象统一显示为yyyy-MM-dd HH:mm:ss格式让时间数据一目了然。8. 列宽拖拽 ↔️查询结果表格支持鼠标拖拽调整列宽列头右侧显示蓝色拖拽手柄方便查看长文本内容。9. GitHub Pages 自动部署新增deploy.ymlGitHub Actions 工作流push 到 main 分支自动构建并部署到 GitHub Pages。项目技术栈Nuxt 4 Vue 3 TypeScriptElement Plus UI 组件库PGlite 浏览器内 PostgreSQLCodeMirror 5 SQL 编辑器ECharts 5 数据可视化UnoCSS 原子 CSSPinia VueUse如何使用在线体验直接访问https://xiuji008.github.io/datasheet/本地开发# 安装依赖pnpminstall# 启动开发服务器pnpmdev# 构建生产版本pnpmbuild# 静态生成用于 GitHub Pages 部署pnpmgenerateGithub Pages 部署直接fork 本项目后设置Pages, 然后在Actions执行 完成即可访问Docker部署创建部署目录mkdir datasheet创建docker-compose.yml文件内容如下services:datasheet:image:registry.cn-hangzhou.aliyuncs.com/xj_lew/datasheet:1.0.0container_name:datasheetports:-3000:3000restart:unless-stopped启动容器docker-composeup-d访问项目在浏览器中打开部署地址即可访问使用场景场景一积分统计与分析回到我最初的需求——把 CodeBuddy/WorkBuddy 的日志 Excel 导入 Datasheet点击导入数据选择 Excel 文件自动识别表头和数据映射到表中在 SQL 编辑器中写查询SELECTTO_CHAR(use_time,YYYY-MM-DD)AS日期,SUM(points)AS积分使用数量,COUNT(requestid)AS积分使用次数FROMrequest_usage_2026_06_28WHEREEXTRACT(MONTHFROMuse_time)6ANDEXTRACT(YEARFROMuse_time)2026GROUPBY日期;点击图表选择柱状图选择日期作为 X 轴使用次数和积分作为 Y 轴分析结果一目了然场景二AI 辅助 SQL 生成不熟悉 SQL 语法也没关系点击「✨ AI 生成 SQL」按钮用自然语言描述统计6月份各个时间段上午下午晚上 的积分使用情况次数和数量AI 自动生成 SQL点击回填并执行即可场景三数据探索与可视化导入任意数据后左侧查看所有表结构写 SQL 探索数据一键生成图表保存常用查询下次一键复用与原项目对比功能原版 Datasheet修改版SQL 编辑器✅✅数据导入✅✅修复表头错误、类型推断多工作区✅✅增加删除功能表结构查看基础✅ 右键弹窗 Markdown 复制SQL 收藏❌✅AI 生成 SQL❌✅数据可视化❌✅柱状/折线/饼图列宽拖拽❌✅日期格式化❌✅标签页管理基础✅ 右键关闭其它/左侧/右侧写在最后这个项目目前还在持续迭代中作为一个纯前端工具它很好地解决了在浏览器中分析数据这个需求。如果你也有类似的使用场景——比如分析日志数据、探索数据集、或者单纯想在浏览器里用 SQL 分析 Excel 数据——不妨试试这个工具。开源项目最有趣的地方就在于你可以根据自己的需求去修改它、扩展它让它真正为你所用。项目地址https://github.com/xiuji008/datasheet在线体验https://xiuji008.github.io/datasheet/