M-Wallet: 基于 Notion 的订阅追踪与钱包管理

English | 简体中文

基于 Next.js 16 构建的轻量级订阅管理与个人钱包应用。通过 Notion 数据库实时同步你的账单与订阅信息，让你的财务状况一目了然。

特性

• Notion 实时同步：直接从 Notion 数据库读取订阅数据。
• 订阅管理：追踪各种服务的订阅费用，支持按月/按年统计。
• 财务概览：自动计算月度支出、年度余额以及每日平均开销。
• 安全锁定：支持设置锁定密码，保护你的隐私信息。
• 现代化设计：基于 Tailwind CSS、Framer Motion 与 Lucide Icons 打造的丝滑 UI/UX。
• 多语言支持：原生支持中英文切换。

安装

由于项目采用 Turborepo 管理的 Monorepo 结构，请按照以下步骤操作：

1. 克隆仓库：

   git clone https://github.com/busyhe/m-wallet.git
   cd m-wallet

2. 安装依赖：

   pnpm install

3. 配置环境变量： 在 apps/web 目录下创建 .env.local 文件：

   NOTION_TOKEN=your_notion_internal_integration_token
   NOTION_DATABASE_ID=your_notion_database_id
   LOCK_PASSWORD=your_secure_password
   SESSION_SECRET=generate_a_random_secret_with_at_least_32_characters
   NEXT_PUBLIC_GA_ID=G-XXXXXXXXXX
   NEXT_PUBLIC_ANALYTICS_ENABLED=false
   NEXT_PUBLIC_APP_URL=http://localhost:3000
   NEXT_PUBLIC_LANGUAGE=zh

   • NOTION_TOKEN: 你的 Notion 集成令牌。
   • NOTION_DATABASE_ID: 对应数据库的 ID。
   • LOCK_PASSWORD: 设置进入应用的访问密码。
   • SESSION_SECRET: 至少 32 字符的随机会话签名密钥。生产环境必填。
   • NEXT_PUBLIC_ANALYTICS_ENABLED: 只有显式设为 true 才加载 Google Analytics。
   • NEXT_PUBLIC_APP_URL: 实际部署地址，用于站点元数据。
   • NEXT_PUBLIC_LANGUAGE: 默认语言（zh 或 en），用户之后可在设置页切换。

   生产环境缺少 LOCK_PASSWORD 或有效的 SESSION_SECRET 时，应用会拒绝提供受保护页面。AUTH_DISABLED=true 仅用于本地开发。

4. 准备 Notion 数据库：

   字段	Notion 类型	必填
   Name	Title	是
   Icon	URL	否
   Price	Number	是
   Currency	Select：CNY / USD	是
   Cycle	Select：monthly / quarterly / yearly / one-time / custom	是
   CustomCycleDays	Number	自定义周期时必填
   StartDate / EndDate	Date	开始日期必填
   Description / BundledServices	Rich text	否
   Category / Color	Select	否
   Position	Number	是

在 Vercel 上部署

部署 Next.js 应用最简单的方式是使用 Vercel 平台。

1. 复制这个 Notion 模板

   Notion 演示页面

2. 点击下方按钮部署：

   

3. 配置环境变量：

   • 将 NOTION_TOKEN 设置为你的 Notion 集成令牌
   • 将 NOTION_DATABASE_ID 设置为你的 Notion 页面 ID
   • 将 LOCK_PASSWORD 设置为应用访问密码
   • 将 SESSION_SECRET 设置为至少 32 字符的随机值
   • 将 NEXT_PUBLIC_APP_URL 设置为部署后的 HTTPS 地址
   • 将 NEXT_PUBLIC_GA_ID 设置为你的 Google Analytics ID（可选）

4. 部署并使用你的订阅管理应用。

你也可以通过推送到连接 Vercel 的 GitHub 仓库来手动部署。

开发与部署

本地运行

pnpm dev

构建

pnpm build

质量检查

pnpm format:check
pnpm lint
pnpm typecheck
pnpm test

月度/年度“实际支出”只统计到当前日期。不同币种不会直接相加，而是在首页分别显示、在统计页按币种切换。

详细设计与安全边界见 架构文档。

许可证

MIT License