用时7天,花费30元,我vibe coding这个网站

动机

我有一款 2 年没更新的产品 One-step-admin ,开发初衷是为了更高效的进行跨业务模块操作,但当时设计的交互方式如今回看并不理想。

四月初的时候,我突然有了一个新的交互思路,但那会更多精力集中在发布 Fantastic-admin v6.0 这个全新版本上。但是我让 gemini 先产出了一份原型,验证了一下交互方案的可行性。

相信已经有人看出端倪了,是的,交互这块参考了 MacOS 上的台前调度。

执行

直到五一节前,我准备开始开发这款产品,并且我希望体验一下完全 vibe coding 是什么感觉。

我暂定名称为 One-step Console,中文叫一步控制台,它算是 One-step-admin 的迭代产品,因为目标其实是一致的,还是为了更高效的进行跨业务模块操作。

目前产品还没有对外发布,我先截取了一些图片,方便你了解产品的核心交互设计。

所有功能模块视为一个独立的窗口,每个舞台默认承载一个窗口,所以可以通过切换舞台来实现快速切换窗口。

这样设计的优势在于,传统的网站一个功能模块就是一个独立的路由,如果需要在多个模块间操作,就需要频繁跳转路由,在这前提下,开发中还需要考虑页面保活(KeepAlive)。但现在只需要切换激活舞台即可。

通过拖拽窗口到指定舞台,可以实现多窗口的舞台,每个舞台最多支持 4 个窗口,舞台内的窗口可以进行排序和布局的调整。

可以将多窗口的舞台添加到收藏,方便下次一键打开预设舞台。

未激活的舞台会缩小尺寸并停靠在侧边栏上,除了可以点击切换舞台外,也支持通过拖拽进行预览。

可以根据使用习惯,调整侧边栏的位置和宽度,并且也支持控制侧边栏显示舞台数。并且超出数量限制的舞台,并不会直接销毁,所以不用担心再次唤起舞台时,窗口会被重新渲染,这部分设计遵循了 LRU (Least Recently Used) 缓存淘汰算法。

最后

以上就是我用了 7 天时间,总计花费了 30 元,几乎纯靠 vibe coding 开发的一款产品,接下来我会完善后续工作,尽快将它发布出来。

相关推荐
小小高不懂写代码2 小时前
RAG--检索增强生成--原理及实战
前端·人工智能
空中海2 小时前
04 工程化、质量体系与 React 生态
前端·ubuntu·react.js
Java后端的Ai之路2 小时前
TRAE AI编程工具终端乱码解决方案
ai编程·trae
鱼跃厂长2 小时前
这份skill,能将你的简历提升到字节的水平!
c++·ai·ai编程
好运的阿财2 小时前
OpenClaw工具拆解之host_workspace_write+host_workspace_edit
前端·javascript·人工智能·机器学习·ai编程·openclaw·openclaw工具
ffqws_3 小时前
Spring Boot 接收前端请求的四种参数方式
前端·spring boot·后端
安逸sgr3 小时前
Hermes Agent + Obsidian 打造第二大脑(五):插件配置与效率提升——Templater、Dataview、QuickAdd 的完整指南!
agent·知识库·第二大脑·hermes·hermesagent
土豆12503 小时前
Superpowers 介绍与技能集使用实践:给你的 AI 编程助手装上超能力
llm·ai编程
是安迪吖3 小时前
企业资产管理系统练习
前端·ai