☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
如果您从未接触过编程，但希望快速构建一款具备AI辅助记账功能并能直观展示收支趋势的小程序，Cursor作为集成AI编码助手的IDE，可显著降低开发门槛。以下是实现该目标的具体路径：
一、环境准备与项目初始化
需在本地建立基础开发环境，确保Cursor能调用AI模型生成代码片段，并为后续可视化模块预留运行支持。此步骤不涉及编码，仅完成工具链配置。
1、访问cursor.sh官网下载并安装最新版Cursor IDE，安装时勾选“Add to PATH”选项。
2、启动Cursor后，在设置中启用内置AI（Settings → Cursor → Enable AI）并登录GitHub账户绑定Copilot权限。
3、新建文件夹命名为ai-accounting-app，右键该文件夹选择“Open with Cursor”，在侧边栏终端执行npm init -y初始化Node.js项目。
4、运行npm install chart.js react-chartjs-2安装可视化依赖，同时执行npm install express cors为后续API接口提供支撑。
二、构建简易记账数据结构与本地存储
采用JSON文件模拟数据库，避免引入复杂后端服务，适合零基础用户理解数据流向与持久化逻辑。
1、在项目根目录创建data/文件夹，并新建transactions.json文件，写入空数组[]作为初始记账记录容器。
2、创建src/utils/storage.js文件，编写读写函数：使用fs.readFileSync读取JSON内容，用fs.writeFileSync追加新条目，每条包含id、amount、category、date、note字段。
3、在storage.js中添加generateId()函数，基于当前毫秒时间戳生成唯一ID，避免重复冲突。
4、创建sample-data.js脚本，调用storage.js的写入函数插入5条测试数据，如{ "amount": 85.5, "category": "餐饮", "date": "2024-06-12" }。
三、接入AI辅助记账逻辑（基于Cursor指令驱动）
利用Cursor的自然语言交互能力，将口语化描述直接转为可执行代码，聚焦于支出分类与摘要生成两个核心AI任务。
1、在Cursor编辑器中新建src/ai/transaction-parser.js，光标定位后输入提示词：“写一个函数parseTransactionNote，接收字符串如‘晚饭外卖花了42元’，返回对象{ amount: 42, category: '餐饮', note: '晚饭外卖' }，金额提取用正则匹配数字，类别通过关键词映射确定。”
2、按下Ctrl+K（Windows）或Cmd+K（Mac）触发AI响应，接受生成代码后，手动补充关键词映射表：{ '外卖': '餐饮', '地铁': '交通', '充电': '日用品', '工资': '收入' }。
3、新建src/ai/trend-summary.js，输入提示词：“写一个函数generateSummary，接收transactions数组，统计近7天各品类支出占比，返回形如‘餐饮占38%，交通占22%’的中文字符串。”
4、AI生成后，检查是否调用reduce累加逻辑及toFixed(0)格式化，若缺失则手动补全，并确保日期过滤条件为new Date(item.date) > sevenDaysAgo。
四、搭建前端记账界面与图表渲染
使用React轻量框架承载UI组件，Chart.js负责将本地数据转化为柱状图与环形图，所有组件均通过Cursor逐个生成。
1、执行npx create-react-app client --template typescript创建子应用，进入client目录后安装npm install chart.js react-chartjs-2。
2、在client/src/App.tsx中，用Cursor输入：“生成React函数组件AccountDashboard，包含输入框、分类下拉菜单、备注文本域和提交按钮；点击后调用父级onAddTransaction传递表单值。”
3、在client/src/components/ChartDisplay.tsx中，让Cursor生成折线图组件：横轴为日期，纵轴为累计支出，数据源来自useEffect中fetch('/api/transactions')获取的JSON。
4、针对环形图，输入提示词：“创建PieChart组件，接收categories数组和values数组，使用Chart.js的pie类型渲染，图例位置设为right，颜色使用['#36A2EB', '#FF6384', '#FFCE56']。”
五、连接前后端并启用本地调试服务
通过Express搭建极简API层，使React前端可跨域请求记账数据，同时暴露AI处理接口供按钮触发调用。
1、在项目根目录创建server.js，用Cursor生成基础Express服务：监听3001端口，设置app.use(cors())解决跨域，app.use(express.json())解析请求体。
2、添加GET路由/api/transactions，读取data/transactions.json并用res.json()返回全部记录。
3、添加POST路由/api/parse-note，接收{ note: string }，调用src/ai/transaction-parser.js中的parseTransactionNote，返回结构化结果。
4、在client/src/App.tsx中，修改提交事件：阻止默认行为后，先fetch/api/parse-note获取AI解析结果，再将结果与用户选择的分类合并，最后POST到/api/transactions存入JSON文件。
