Vibe Coding - 本地图片浏览器

type
Post
status
Published
date
Apr 17, 2025
slug
vibe-dev1
summary
实现一个类似pinterest的瀑布流布局的本地图片浏览器，vibe coding体验
tags
开发
category
技术分享
titleIcon
password
icon
insider
🤠
实现一个类似pinterest的瀑布流布局的本地图片浏览器，vibe coding体验
  • 项目代码
  • 体验地址
React App
Web site created using create-react-app
React App
https://camelliav-gallery.netlify.app/
  • 参考效果
notion image
notion image
  • 主要的功能在github有说明，整个vibe coding的流程，只需要简要的声明需求，不需要任何复杂的prompt，gemini的效果让人印象深刻，每一次功能迭代基本都是完善的，开箱即用，唯一的缺点在于有时候偷懒只给修改的部分，不给完整的代码，需要重复第二次要求完整代码。
  • 第一个prompt，大致描绘需求后，会得到：项目结构+代码内容+文件解释+运行流程
notion image
notion image
  • 参考完整流程，最后一部分功能迭代没有保存成功
aistudio.google.com
https://aistudio.google.com/app/prompts?state=%7B%22ids%22:%5B%221t6BQCK_5Z_NDt-E_-7LKJbDaAPvCGiXA%22%5D,%22action%22:%22open%22,%22userId%22:%22109242167354559435521%22,%22resourceKeys%22:%7B%7D%7D&usp=sharing
  • 后期扩展
    • 删除图片
为了方便在多个设备上通用，给的要求是写web app，但web app是不能对本地文件进行修改的，所以删除功能目前仅是从画廊中移除，而无法做到直接删除图片
  • 子文件夹聚合
原则上这一功能可以通过点选子文件夹或通过搜索筛选（文件名包含文件夹名）实现，但没有直接的聚合功能来的直接，目前是将一个文件夹下所有（无论层次）图片全部加载展示（符合需求），缺少一些分类聚合的功能

© Camelliav 2025