项目实战集
一个项目练不熟。这一页给一组梯度案例，按难度从零依赖到接大模型，做完一类再进下一类。
你将学会
- 按难度挑项目，知道自己该练哪一类；
- 每个案例的关键切片怎么拆、怎么验；
- 把前面的方法（需求 → 切片 → 验证）用在不同类型上。
前置知识
从 0 到 1 用 Vibe Coding 写自己的项目（完整流程）。
案例地图
| # | 案例 | 难度 | 知识点 |
|---|---|---|---|
| 1 | 单文件网页工具 | ★ | HTML/CSS/JS、localStorage |
| 2 | 个人主页 / 文档站 | ★ | 静态站点生成、Markdown |
| 3 | 带数据的小应用 | ★★ | 组件化、状态管理 |
| 4 | 数据批处理脚本 | ★★ | Python、文件读写 |
| 5 | 微信小程序 | ★★★ | 跨端、云开发 |
| 6 | AI 小应用 | ★★★ | 调用大模型 API |
| 7 | 桌面应用：接单台 | ★★★★ | Tauri + Rust + SQLite，真实项目拆解 |
选一个，走完「一页说明 → 切片实现 → 验证 → 交付」全程，再换下一个。前六个是练习；第 7 个是真实项目拆解——它让你看到从“练手”到“交付”中间差了什么。
1. 单文件网页工具（★）
- 目标：番茄钟 / 单位换算 / 待办清单，任选一个。
- 技术：单个
index.html，不引入任何依赖。 - 关键切片：① 界面骨架 → ② 核心交互 → ③ 本地存储 → ④ 空状态与边界。
- 交付标准：双击文件即可用；刷新后数据还在；非法输入有提示。
2. 个人主页 / 文档站（★）
- 目标：自己的介绍页，或一套可以把 Markdown 变网页的文档站。
- 技术：Markdown + 静态站点生成器（如 VitePress）。
- 关键切片：① 选模板/生成器 → ② 写内容 → ③ 配导航与首页 → ④ 构建产物。
- 交付标准：本地预览正常；
build无坏链；能部署上线。
3. 带数据的小应用（★★）
- 目标：读书清单 / 记账本 / 习惯打卡。
- 技术：Vue 或 React（择一）+ 本地存储。
- 关键切片：① 列表与新增 → ② 编辑/删除 → ③ 筛选与统计 → ④ 导入导出。
- 交付标准：主流程 + 失败流程都手动验过；有可回退的提交历史。
4. 数据批处理脚本（★★）
- 目标：把一批 CSV / 图片 / 文件批量整理、重命名、汇总。
- 技术：Python + 命令行。
- 关键切片：① 读一个文件 → ② 处理并写出 → ③ 批量遍历 → ④ 异常与日志。
- 交付标准：给一份样本能跑出预期结果；出错有清晰提示；先备份原数据。
5. 微信小程序（★★★）
- 目标：一个能在手机预览的小工具。
- 技术：原生小程序框架，或 Taro（React 语法）。
- 关键切片：① 页面与列表 → ② 本地数据 → ③ 用户交互 → ④（可选）云开发接数据。
- 交付标准：开发者工具里主流程可走；真机预览正常。
6. AI 小应用（★★★）
- 目标：文档问答 / 摘要 / 翻译，接入大模型 API。
- 技术：前端 + 后端函数 + 大模型 API（详见AI 应用开发）。
- 关键切片：① 调通一次 API → ② 前端输入输出 → ③ 错误与限流处理 → ④（可选）RAG 检索。
- 交付标准：密钥走后端环境变量；失败有提示；有时间/费用上限。
7. 桌面应用：接单台（★★★★ · 真实项目拆解）
本站作者的一个真实项目。 放在最后，是为了让你看到从“练手”到“交付”之间差了什么。
它是什么：给程序员自己用的外包订单管理桌面软件（本地单机版）——订单台账 + 营收统计 + 需求文档库三合一。要解决的痛点很具体：单子散在微信里、收了多少记不清、月 / 年收入没有数、需求零散导致验收扯皮。数据全在本机，不联网、不注册、无账号。
技术选型：
| 层 | 选型 | 为什么 |
|---|---|---|
| 桌面壳 | Tauri 2（Rust） | 复用系统 WebView，安装包约 5MB、内存占用低（由 Electron 迁移而来） |
| 前端 | React + TypeScript + Vite | 组件化 + 类型安全 |
| UI / 图表 | Ant Design + ECharts | 后台类表格表单现成，统计图开箱即用 |
| 文档编辑 | md-editor-rt | 分屏预览、图片粘贴、自动保存 |
| 数据 | rusqlite（SQLite 单文件） | 本地单机、零运维；附件存目录，可打包备份 |
关键切片（按依赖顺序做，每步都能独立验证）：
- 数据落地：建库建表，增删改查先做到命令行能跑。
- 订单台账：列表 + 新建 / 编辑 / 删除 + 自定义类型 + 状态流转。
- 收款与分期：一单多笔（定金 / 尾款）；按百分比拆期（如 30/40/30）自动算每期金额。
- 统计仪表盘：按实际收款日期统计月 / 年营收、类型占比、状态分布。
- 需求文档库：每期挂多篇 Markdown，在线编辑 + 图片粘贴 + 自动保存。
- 提醒中心：3 天内截止 / 已逾期 / 交付超 7 天未收尾款 / 分期到期；接系统通知，点通知跳订单。
- 本地 AI 助手（最重的一段）：接单顾问——分析客户需求、参考历史成交价报价、生成建单方案；支持工具调用（检索订单、价格统计、联网搜索）。难点是把三种接入统一到一套调用层（官方 API / 网页版账号 / 任意 OpenAI 兼容接口），还要在不支持函数调用的接口上用文本协议模拟工具调用。
- 技能库与打包：兼容 Agent Skills 标准（
SKILL.md）加载技能；最后打 NSIS 安装包。
交付标准：装完能跑主流程；数据可一键导出 / 恢复（zip）；密钥 / Token 不进仓库；打包产物可分发。
这个案例教你的三件事：
- 切片顺序 = 依赖顺序：先让数据落地，再堆界面；先做能跑的最小闭环，再加统计与 AI。反过来一定返工。
- 难的不是界面，是边界：分期金额怎么算、非法输入怎么办、导入非法备份怎么不覆盖数据——真实项目的成本都藏在这里（对照代码质量与审查）。
- AI 只是最后一层：接大模型、做工具调用是锦上添花；前面几层没打牢，AI 再强也接不上（对照AI 应用开发）。
动手练习
任选一个案例，从 0 做到能演示，并留下一份 README（运行方式、数据存哪、已知限制）。
检查点
- 每个案例都给出“做完长什么样”的可演示标准；
- 你能说出所选案例的关键切片是哪几步。
常见问题
Q：做完一个就够了吗？ 至少做透一个（走完全流程），再做第二个不同类型——换类型才会暴露你方法上的盲区。
Q：想直接做案例 6 或 7？ 可以，但先确保你理解安全与合规里的密钥管理，否则很容易把 key 泄露出去。案例 7（接单台）还建议先做透前六类里的一个小项目——否则容易在“界面之外的边界”上翻车。