【Code with SOLO】用 SOLO 2 天搭建「闪念智记」——AI 驱动的微信小程序全栈智能记录助手
摘要
用 TRAE SOLO 开发了一款微信小程序「闪念智记」：只需用自然语言告诉 AI “买了两杯咖啡 68 元” 或 “明天下午 3 点开会”，AI 就能自动理解意图、将内容归类到笔记、待办或记账模块并保存；说"帮我把上周的咖啡支出改一下"也能直接完成修改；上传一份 PDF 合同或截图，就能建立私人知识库，随时检索。整个 App 前后端代码（含 AI 流式对话、对话式 CRUD、知识库 RAG、多 Tab 模块、小程序兼容层）均由 SOLO 辅助生成，34 个 Vue 组件 + 100 余个 TypeScript 文件，从 0 到功能可用前后约 2 天，比自己手写估计快了 5-6 倍。
背景
我是一名独立开发者，平时需要同时管理碎片信息——有时是一笔消费、有时是一个念头、有时是一个临时待办。过去用不同 App 分开记，切换成本高、忘记记的概率也高。
我想做一个「一句话记万物」的智能助手：打开就是聊天框，说什么 AI 帮我分类存档。但实现起来有几个难点：
- AI 多轮对话 + SSE 流式输出要同时支持 H5 和微信小程序（小程序没有
TextDecoder，也不能用EventSource） - 对话式 CRUD：AI 不只是记录，还要能理解"删掉"“改一下”"查一下上周"这类意图，并准确定位到对应数据执行操作
- 知识库 RAG：用户上传 PDF / 图片 / 文档后，要能做向量检索并在对话中精准引用，而不是简单关键词匹配
- 小程序兼容性陷阱极多（样式穿透、z-index 跨组件失效、弹框被 TabBar 遮挡……）
- 全栈代码量大，手写太慢
实践过程
1. 任务拆解
我把整个项目分成三层让 SOLO 依次攻克：
后端 AI Agent 接口（SSE 流式）
→ 对话式 CRUD Agent（意图识别 + 工具调用）
→ 知识库 RAG 模块（文件解析 + 向量检索）
→ 前端 UniApp 页面（多 Tab + 对话 UI + 文件上传）
→ 小程序兼容性修复（逐个踩坑处理）
2. 用了 SOLO 哪些能力
- 代码生成：完整 Composable 逻辑、Vue3 组件、TypeScript 类型定义
- 架构建议：
uni.request + enableChunked实现小程序 SSE、Tool Calling 意图路由方案、RAG 向量检索分层设计 - Bug 诊断：
t-tab-bar遮挡弹框、scoped 样式无法穿透 TDesign 组件、小程序文件上传 ArrayBuffer 编码等 - 知识补充：小程序自定义组件层叠上下文隔离原理、UTF-8 增量解码、向量数据库选型对比
3. 关键 Prompt 示例
让 SOLO 生成小程序 SSE 方案时：
“微信小程序不支持 EventSource 和 TextDecoder，需要用 uni.request 的 enableChunked 模式实现 SSE 流式对话，同时解决跨 chunk 的中文乱码问题，帮我写一个 Composable”
SOLO 生成了完整的增量 UTF-8 解码器（纯手写，不依赖任何 API），逐字节解析 1/2/3/4 字节 UTF-8 序列，解决了中文跨 chunk 乱码的根本问题：
// 小程序环境无 TextDecoder，使用增量 UTF-8 解码器避免跨 chunk 中文乱码
const decodeUtf8Chunk = (chunk: ArrayBuffer, pending: number[]) => {
const bytes = pending.concat(Array.from(new Uint8Array(chunk)))
// ... 逐字节解析 1/2/3/4 字节 UTF-8，未完整的字节留 pending 等下次合并
}
让 SOLO 实现对话式增删改查时：
“AI 现在能新增记录，但我想让它也能处理’删掉昨天那笔咖啡’、'把那个待办改成明天’这类修改/删除意图。后端用 langchain4j Tool Calling，帮我设计工具函数的签名和前端意图识别的交互流程”
SOLO 设计了一套基于 Tool Calling 的意图路由方案，AI Agent 根据用户意图自动选择调用 createRecord、updateRecord、deleteRecord、queryRecord 四类工具，工具执行结果再回流给 AI 生成自然语言确认：
// Agent 工具调用记录结构
export interface ToolCallRecord {
toolName: string // "createNote" | "updateTodo" | "deleteAccounting" | ...
params?: string // 工具入参 JSON
resultSummary?: string // 执行结果摘要，AI 据此生成回复
}
用户体验上，AI 在执行删除/修改前会先用流式输出"确认"文字，防止误操作：
用户：“删掉上周买咖啡那条”
AI：“找到了：2026-04-28 咖啡 68元（支出），确认删除吗？”
用户：“确认”
AI：“已删除 ✓”
让 SOLO 实现知识库 RAG 功能时：
“用户上传 PDF、图片、Word 文档后，需要做向量化存储，然后在对话中能检索相关内容回答问题。后端用 langchain4j + 向量数据库，前端小程序需要支持选择文件/拍照上传，帮我设计完整方案”
SOLO 给出了分层架构：文件解析（PDF/图片 OCR/Word）→ 文本分块 → 向量化 → 存入向量库，检索时用问题向量做 Top-K 相似度召回，拼入 Prompt 上下文：
前端上传部分 SOLO 也处理了小程序的文件选择兼容问题：
// 小程序文件选择（兼容图片 + 文档）
const chooseFile = () => {
// #ifdef MP-WEIXIN
wx.chooseMessageFile({ count: 5, type: 'file', ... })
// #endif
// #ifdef H5
// input type=file 走普通上传
// #endif
}
知识库检索效果示例：
用户上传：《项目合同.pdf》
用户：“合同里的付款条款是什么？”
AI：“根据您上传的合同，第五条约定：首付 30%，验收后付 70%，账期 30 天……”
让 SOLO 处理弹框被 TabBar 遮挡问题时：
“小程序中日期选择弹框在 Tab 子组件里，被外层 t-tab-bar 遮挡，z-index 无效，怎么解决？”
SOLO 给出了「Composable 桥接模式」：子组件只负责触发，弹框提升到页面级（index.vue）渲染：
// useWeekCalPicker.ts —— 跨组件桥接
export function useWeekCalPicker() {
return {
requestPick(initValue, onConfirm) { /* 子组件调用 */ },
handleConfirm(e) { /* 页面级绑定 @confirm */ },
}
}
4. 踩过的坑
| 问题 | 原因 | SOLO 给出的解法 |
|---|---|---|
| 中文 SSE 内容乱码 | 小程序 chunk 切割不按字符边界 | 自实现增量 UTF-8 解码器 |
| 日期弹框被 TabBar 遮挡 | 小程序 z-index 不跨自定义组件 | 提升到页面级 + Composable 桥接 |
| TDesign 组件样式无法覆盖 | scoped 带 data-v-xxx 无法穿透 | 非 scoped + styleIsolation: shared |
| 键盘弹出后底部 AI 输入栏消失 | 系统上推 + tabbar 安全区叠加 | adjust-position=false + 手动 padding-bottom |
| AI 回复完成后气泡不滚动 | content 流式更新但 scrollIntoView 未响应 | watch content 变化触发 scrollToBottom |
| AI 误删数据（无二次确认） | Tool Calling 直接执行无用户确认环节 | Agent 先流式输出确认文字，等用户回复"确认"再调用工具 |
| 知识库检索结果不准 | 分块粒度太大，向量相似度被稀释 | SOLO 建议改为滑动窗口分块 + 段落级 overlap 策略 |
| 小程序选文件只能选图片 | wx.chooseImage 不支持 PDF/Word |
改用 wx.chooseMessageFile 兼容任意文件类型 |
成果展示
功能截图描述（文字说明，截图请见实际发帖）
首页 - AI 对话界面
- 顶部：笔记总数 / 未完成待办 / 本月支出三卡片统计
- 中部：流式渐进气泡对话，支持 Markdown 渲染
- 底部：多行自适应输入框 + 发送按钮（激活态绿色高亮）
AI 自动分类效果（新增）
- 输入：“买了两杯咖啡，68元” → AI 自动创建记账记录，类型「支出」，金额 68
- 输入：“明天下午3点开会，记一下” → AI 自动创建待办，提醒时间明天 15:00
- 输入：“整理了一份 Vue3 学习笔记” → AI 自动创建笔记并润色内容
对话式增删改查效果
- 输入：“删掉上周买咖啡那条” → AI 确认具体记录后删除，防误操作
- 输入：“把明天开会的待办改成后天下午2点” → AI 定位记录并更新提醒时间
- 输入：“帮我查一下这个月总共花了多少在餐饮上” → AI 汇总记账数据并用自然语言回答
知识库功能
- 上传 PDF / Word / 截图 → 自动解析、分块、向量化存储
- 输入：“合同里的付款条款是什么？” → RAG 检索相关段落，精准引用回答
- 支持多文件混合检索，来源可追溯
其他 Tab
- 笔记 Tab：列表 + 分类筛选 + 内容润色
- 待办 Tab：周日历视图 + 完成/未完成筛选
- 记账 Tab：月度收支统计 + 记录列表
核心代码文件
uniapp-smart-record/
├── src/composables/useAgentChat.ts # AI 对话核心（SSE + 小程序兼容）
├── src/components/biz/index/
│ ├── HomeTab.vue # 首页 AI 对话入口
│ ├── SmartRecordChat.vue # 对话气泡组件
│ ├── NoteTab.vue # 笔记模块
│ ├── TodoTab.vue # 待办模块
│ └── AccountingTab.vue # 记账模块
├── src/api/smartrecord/
│ ├── agentApi.ts # AI Agent 接口（含对话式 CRUD 工具调用）
│ ├── smartrecordApi.ts # 业务 CRUD 接口
│ └── knowledgeApi.ts # 知识库上传 / 检索接口
效果与总结
提效数据
| 工作项 | 估计手写时间 | 实际（SOLO 辅助） | 节省 |
|---|---|---|---|
| 项目脚手架 + 基础配置 | 1 天 | 半天 | ~50% |
| SSE 小程序兼容方案 | 1-2 天 | 3-4 小时 | ~75% |
| 笔记 / 待办 / 记账三模块 CRUD | 3-4 天 | 1 天 | ~75% |
| AI 对话 UI + 流式渲染 | 1-2 天 | 半天 | ~75% |
| 对话式增删改查（Tool Calling） | 2-3 天 | 4-5 小时 | ~80% |
| 知识库 RAG（上传 + 检索） | 3-5 天 | 1 天 | ~80% |
| 小程序兼容性 Bug 修复 | 1-2 天 | 3-4 小时 | ~80% |
| TypeScript 类型定义 | 1 天 | 2-3 小时 | ~70% |
| 整体评估 | 3-4 周 | 约 2 天 | ~85% |
SOLO 在我流程中做了什么
- 帮我想到了我没想到的方案：小程序 SSE 的增量 UTF-8 解码思路，是 SOLO 主动提出的，我之前想用 base64 绕过，SOLO 给了更优雅的方案
- 极大降低了"反复查文档"的成本：TDesign UniApp 组件的
styleIsolation、externalClasses、virtualHost这些配置，SOLO 直接给出了正确用法 - 把踩坑时间压缩到极致：
t-tab-bar遮挡弹框这个坑，自己排查可能要 1-2 小时，SOLO 说出原因（小程序自定义组件层叠上下文隔离）并给出解法，10 分钟搞定
可复用的方法论
- 小程序 SSE 通用模板：
uni.request + enableChunked + 增量 UTF-8 解码，可适配任何需要流式输出的小程序场景 - Composable 桥接模式：凡是弹框/弹层被
t-tab-bar遮挡，一律提升到页面级渲染，用 Composable 做状态桥接 - TDesign 样式覆盖标准：非 scoped +
styleIsolation: shared，彻底解决组件内部样式穿透问题 - 对话式 CRUD 安全机制：删除/修改类操作必须 AI 先输出确认文字再执行工具，"确认"作为二次意图触发，防止误操作
- RAG 分块策略：滑动窗口 + 段落级 overlap，比固定长度分块检索准确率提升明显，SOLO 直接给出了可落地的参数建议
感受
用 SOLO 开发小程序最大的价值不是"少写代码"，而是把「不知道怎么做」的时间变成了「告诉 SOLO 要做什么」的时间。小程序有太多奇怪的坑，以前靠经验和运气，现在靠 SOLO 的知识库和推理能力——效率差距是质的飞跃。
对话式 CRUD 和知识库 RAG 这两块是我最没把握的部分，Tool Calling 的意图识别准确性、RAG 的检索质量都有很多细节要调。但 SOLO 不只是帮我写代码，它把背后的原理讲清楚了——为什么分块要 overlap、为什么删除前要加确认环节——这让我真正理解了做了什么，而不只是复制粘贴。
技术栈：Vue3 + UniApp + TypeScript + TDesign UniApp + langchain4j（AI Agent + Tool Calling + RAG）
发布平台：微信小程序