Cursor 太强了，效果展示

[hughfenghen]

Cursor 是基于 VSCode 的 AI 代码编辑器。

ChatGPT 4o 生成代码也挺强的，Cursor 胜在与编码场景的无缝结合。

这里通过展示提示语与最终的 UI 效果图，来直观展现它的牛逼之处。

---

1. 提示语

第一段，新建空白文件 @Layout.svelte
我需要使用 svelte 实现类型 MacOS 下的 Finder App。
布局结构：
1. 左侧快捷导航区域，包括“个人收藏”，“标签”两个分组
3. 右侧上方是工具栏，包括“前进 后退” icon，当前文件夹名字，以及一系列功能相关 ICON
4. 右侧工具栏下方是主内容区域，显示文件、文件夹信息

第二段，新建空白文件 @DirList.svelte
参考 MacOS 的 finder，以列表形式展示文件夹的内容。
最上方是表头，包括：名称、大小、修改日期、创建日期 四列。
1. 名称列显示文件、文件夹的名字，名字左边是文件夹或文件的 icon
2. 如果当前行是文件夹，名称列允许展开/折叠文件夹的内容，默认折叠状态，所以 DirList 是一个递归组件，用于支持地轨展开子文件夹内容
3. “大小“列显示文件的体积大小，文件夹使用 “--“ 占位；文件体积原始数据单位是 byte，页面显示单位需要格式化为”字节、KB、MB、GB“，最多保留一位小数
5. 修改日期、创建日期列，将时间戳格式化为本地时间字符串，包含”年、日、月、小时、分钟“

少量错别字也不影响结果

2. 效果图

没有任何调试，直接运行的效果。
因为它生成的代码中包含了示例数据，所以运行后能直接看到效果。

3. 项目文件结构，Svelte 模板 + 新建的两个组件