AOUN/README.md

AounApp - 个人资源付费系统

这是一个基于 Next.js 全栈开发的个人资源付费与会员系统。支持文章/资源发布、会员订阅、积分充值、以及支付宝/微信支付集成。

🛠 技术栈 (Tech Stack)

核心框架

• Framework: Next.js 16 (Pages Router)
• Language: TypeScript
• Database: MongoDB (via Mongoose)

前端 UI & 交互

• UI Library: Shadcn UI (基于 Radix UI)
• Styling: Tailwind CSS v4
• Icons: Lucide React
• Forms: React Hook Form + Zod (验证)
• Notifications: Sonner
• Editor: Tiptap (Headless 富文本编辑器)

后端 & 工具

• Authentication: JWT (JSON Web Tokens) - 自定义实现，存储于 HttpOnly Cookie
• Payment: Native Alipay Integration (Node.js crypto 实现，无第三方 SDK 依赖)
• Markdown Processing:
  • unified, remark, rehype (服务端处理)
  • shiki (代码高亮)
• Date Handling: date-fns

✨ 核心功能 (Key Features)

1. 用户系统

   • 注册/登录 (JWT)
   • 个人中心 (Dashboard)：查看订单、会员状态、积分
   • 钱包系统：积分充值与消费

2. 内容管理 (CMS)

   • 文章/资源发布：支持 Markdown 编辑 (Tiptap)，支持设置价格（积分/现金）、隐藏内容（下载链接/提取码）。
   • 分类与标签：灵活的内容组织。
   • 评论系统：支持多级评论。

3. 会员与支付

   • 会员订阅：不同等级会员享受不同折扣和每日下载限制。
   • 支付集成：
     • 支付宝：原生集成，支持当面付/电脑网站支付（根据配置）。
     • 积分支付：站内虚拟货币支付。
   • 订单系统：完整的订单创建、支付回调、状态流转。

4. 管理后台 (Admin)

   • 仪表盘：数据概览。
   • 用户管理、文章管理、订单管理、会员套餐管理。
   • 系统设置：全局 SEO、支付参数配置。

⚠️ 关键架构与注意事项 (Architecture & Notes)

1. Markdown 渲染架构

• 服务端渲染 (SSR)：为了解决 rehype-pretty-code 在客户端运行时的兼容性问题，并将繁重的 Markdown 解析逻辑移出前端 bundle，我们采用了服务端预处理方案。
• 流程：
  1. API (/api/articles/[id]) 接收请求。
  2. 后端读取 Markdown 内容，使用 unified + remark + rehype + shiki 转换为 HTML。
  3. API 返回预渲染好的 HTML 字符串。
  4. 前端 (pages/article/[id].tsx) 使用 dangerouslySetInnerHTML 直接渲染。

2. 编辑器 (Tiptap)

• SSR 兼容性：Tiptap 在 Next.js 中使用时，必须在 useEditor 中设置 immediatelyRender: false，以避免服务端渲染与客户端水合不匹配 (Hydration Mismatch) 导致的运行时错误。
• Markdown 支持：集成了 tiptap-markdown 扩展，确保编辑器内容可以作为 Markdown 格式保存到数据库，保持数据格式的通用性。

3. 支付系统

• 去 SDK 化：为了避免 alipay-sdk 等库的潜在依赖问题和体积，我们使用 Node.js 原生 crypto 模块实现了支付宝的签名和验签逻辑 (src/lib/alipay.ts)。
• 安全性：支付回调 (notify) 必须严格验证签名，防止伪造请求。

4. 样式系统

• Tailwind v4：项目配置了 Tailwind CSS v4。
• Typography：使用了 @tailwindcss/typography 插件来美化文章详情页的 HTML 内容渲染 (prose 类)。

🚀 快速开始 (Getting Started)

1. 安装依赖

   pnpm install
   

2. 配置环境变量 复制 .env.example 到 .env.local 并填入 MongoDB URI 和 JWT Secret 等信息。

3. 运行开发服务器

   pnpm run dev
   

4. 访问

   • 前台: http://localhost:3000
   • 后台: http://localhost:3000/admin