昨天晚上睡不着，想着这些天用各种免费服务搭建就了很多自己的小工具，然后各个服务的数据库（MySQL、Postgres）分散各地（Supabase、Neon、Sqlpub)，电脑网页端各平台自家 UI 做得也蛮不错的，就是不方便我手机端查看。我也上 Play Store 下了几款 app 试试，发现要不就是广告满天飞让你 upgrade vip，要不就是功能太简陋，Postgres 都连不上。所以索性就自己 Vibe Coding 一个了。（Cloudflare的D1数据库貌似不支持连接）
Claude出需求设计
之前用 Claude 做 skill 就感觉他比较听得懂人话，产出也考虑得很全面，所以就先用他出一个产品需求文档了。
题外话：Claude Fable 5 被米国出口限制了（无奈哈哈哈笑…），只能说老米还是有点固步自封了，也可能和A社前期铺天盖地的夸大宣传有关吧。
产出物还是可以的，用了一个之前做的skill，执行分析前会问几个更细致的问题以确定范围。
Google AI Studio
凌晨午夜寂寞难耐，只有一个小小的、会发光的方块，躺在床上没有电脑，我想就只能依靠咕噜咕噜先生帮我了。
于是，我打开了神秘的彩色图标网站，把克劳德先生给我的文件转成“破大防”（PDF）传到咕噜先生（因为不支持传docx，我也不知道为何克劳德要给我word，有点过于类人了）。
然后他用TypeScript给我做出来了，貌似也能部署网页？（后面干脆直接用网页了，app过于麻烦了，网页还能部署到Render上，自动拉取github更新）
第一版就做的挺完善的，有一些小bug提一嘴就修复了。因为是自己用，所以只有查询，其他修改语句还没试过支不支持。后面还用GPT做了个logo。
- 首次进入需要设置PIN码
- 目前仅支持MySQL和Postgres
- 点击table右侧自动生成对应的SELECT语句
- 查询结果支持导出CSV文件（中文编码乱码已修复）
- 支持主页pin数据库是否连通
- 多端显示适配
后续新增了以下功能：
- 界面主题（黑夜/白天）切换
- webdav同步数据库配置（无加密，数据库密码明文存储于json文件中，后续可能更新加密）
- 使用LocalStorage将PIN码、webdav配置、数据库配置存储于本地（不同浏览器可能需要重新配置，用webdav同步）
- 支持排序数据库，排序也会同步
- 新增star星标数据库进行置顶，star数据也会同步
- PIN码设置错误可以重置本地数据进行更改
- Table支持顶部搜索框进行表名模糊查询
- Table历史SQL查询命令支持暂存本地（最多200条）
- 查询结果表头字段支持拖动改变列宽
- 电脑端支持使用快捷键
ctrl+enter进行执行SQL查询
DBClient
Github地址：GitHub - xiangshenchi/DBClient: 一个轻量化网页数据库管理工具，支持webdav备份同步。 · GitHub
- PIN码页面
- 管理主页
- webdav页面
- SQL查询
- SQL历史暂存 & 列宽拖动显示
部署至Render
将服务免费部署到Render，搭建自己的DBClient，自定义服务域名
我试过Vercel，因为本项目用到了webdav，相关函数需额外配置vercel.json，故不使用此平台。Render提供原生的node.js适配，fork项目后可直接部署至Render（白嫖），且Render在国内没有被墙，提供的域名可直接访问。
Render免费套餐
Render的免费套餐还是可以的，不过小时不访问会进入休眠，冷启动需要几秒，如果你不想等这几秒，可以去UptimeRobot定时（每5分钟/…）进行HTTP保活，其提供了充沛的免费保活额度。
冷启动页面
部署
- 注册你的Render账号
- 注册/登录你的Github账号，并在Render绑定
- Fork本项目->GitHub - xiangshenchi/DBClient: 一个轻量化网页数据库管理工具，支持webdav备份同步。 · GitHub
- 创建Web Service
- 选择项目
- 切换免费套餐
- 点击部署
访问
稍后即可看到你的项目部署成功，点击网址访问
等待冷启动完成
w-d (w-d) 2
感谢楼主分享
mozer (mozer) 3
虽然用不上，还是给你一个大大的赞
pmg 4
有点意思，我还以为是个原生 app，结果是个 web app，但无所谓
就是不知道是否支持 PWA，性能咋样