可能是使用GPT太夸张了，导致官方都给限流了，后来才觉得原来和自己有默契的GPT是这么的难得，总是在说，我不懂代码，只是希望把自身对于产品的需求与想象告诉GPT，用共同协作的方式将项目落地。从最开始的很简单的网站，到现在完成度算比较高的桌面端和移动端，非常感谢GPT们对我的帮助，感谢我的change manager以及“控制塔”，这二位协作配合帮助了我很多，有的时候我甚至连续提出需要，同时ongoing的需求有至少五六个，但是他们也认真思考努力完成我的要求，甚至有的时候我会比较仔细查看他们的思考过程，在这个过程中我也有所学习。希望我的GPT可以早点恢复，因为磨合了这么久，我能确定这个GPT对LMN516这个项目最最最熟悉，快回来吧！！！
以下是我让GPT对我的项目进行的评价，提示的是“梳理一下我们当前建站所用到的所有的技术架构,不要求快,慢慢梳理,就比如说,就是技术代码上方向的一些东西。”（语音输入的）
GPT的回答（思考了6m9s）：
我按当前 BurgCreate/lmn516-v2 → main 的实际代码重新过了一遍。现在 LMN516.com 的技术架构，已经不能简单叫“一个 Next.js 博客”。
更准确的定义是：
Next.js 模块化单体全栈应用 + PostgreSQL 个人数据平台 + WordPress/LMN516 双内容源 + PWA 客户端 + Vercel Serverless + 外部能力接入层 + GitHub 自动化运维体系。
一、先看整张技术架构图
LMN516.com
│
┌──────────────┴──────────────┐
│ │
Safari / PWA 外部输入端
│ │
│ ┌──────────────┼─────────────┐
│ │ │ │
│ Apple Shortcut ChatGPT Mac
│ │ │ Clipboard
│ └──────────────┼─────────────┘
│ │
▼ ▼
┌──────────────────────────────────────────────────────────────┐
│ Vercel / Next.js 15 │
│ │
│ App Router │
│ React 19 │
│ TypeScript 5 │
│ │
│ ┌──────────────────┐ ┌──────────────────────────────┐ │
│ │ React UI │ │ Next.js Server │ │
│ │ Server Component │ │ │ │
│ │ Client Component │ │ Route Handlers / API │ │
│ │ Suspense │ │ Server-side Auth │ │
│ │ PWA │ │ Cache / Revalidation │ │
│ └─────────┬────────┘ └──────────────┬───────────────┘ │
│ │ │ │
│ └──────────────┬───────────────┘ │
│ ▼ │
│ lib/* 领域服务层 │
│ │
│ auth / content / posts / mail / voice / clipboard │
│ location / search / reminders / games / analytics │
│ control-room / pwa / storage / subscriptions / etc. │
└───────────────────────────┬──────────────────────────────────┘
│
┌─────────────────┼─────────────────────┐
│ │ │
▼ ▼ ▼
PostgreSQL WordPress CMS Vercel Blob
Supabase 承载 cms.lmn516.com 文件/图片
│ │ │
│ │ AES-256-GCM
│ │ 加密层
│ │ │
└─────────────────┼─────────────────────┘
│
┌──────────────┼───────────────┐
│ │ │
▼ ▼ ▼
Gmail API Web Push 外部模型/API
OAuth VAPID SenseVoice
Hugging Face
等
二、最核心的代码技术栈
| 层 | 当前技术 | 作用 |
|---|---|---|
| 主框架 | Next.js 15.5.x | 网站前端、后端、API、SSR 全部统一 |
| UI | React 19 | 页面与交互组件 |
| 开发语言 | TypeScript 5 | 主要业务代码 |
| JS 运行环境 | Node.js Runtime | API、加密、数据库、后台逻辑 |
| 路由 | Next.js App Router | app/ 目录组织页面/API |
| 数据库 | PostgreSQL | LMN516 主要结构化数据 |
| ORM | Prisma 6.19 | TypeScript ↔ PostgreSQL |
| 数据库基础设施 | Supabase PostgreSQL / Supavisor | 托管数据库与 Serverless 连接池 |
| 部署 | Vercel | Next.js Serverless 运行环境 |
| 代码仓库 | GitHub | Git、CI、协作、部署来源 |
| CMS | WordPress REST API | 当前历史文章和碎碎念的重要内容源 |
| 文件存储 | Vercel Blob | 图片/文件存储 |
| PWA | Service Worker + Web App Manifest | 离线、缓存、通知、类 App 能力 |
| 登录 | 自研 Auth + WebAuthn Passkey | 用户、Admin、Session、Passkey |
| Push | Web Push + VAPID | 浏览器/PWA 推送 |
| 3D | Three.js + React Three Fiber + Drei | Garden World |
| 本地语音 | WebAssembly + Sherpa/SenseVoice | 浏览器本地语音识别 |
| 分析 | Vercel Analytics + 自有 Analytics | 外部 + 自有行为数据 |
这些不是文档规划，而是当前 package.json 和代码中的实际依赖。
三、它本质上是「模块化单体」，不是微服务
这个概念很重要。
模块化单体 Modular Monolith：
一个部署单元
│
▼
Next.js
│
┌────┼────┬────┬────┬────┐
auth mail content pwa voice ...
也就是我们没有搞成：
用户服务
文章服务
邮件服务
通知服务
搜索服务
数据服务
↓
六七台服务器互相调用
而是：
一个 LMN516 Next.js 应用
│
├── lib/auth
├── lib/content
├── lib/mail
├── lib/clipboard
├── lib/location
├── lib/voice
├── lib/search
├── lib/reminders
├── lib/control-room
├── lib/games
├── lib/pwa
├── lib/storage
└── ...
当前 lib/ 已经明显按业务领域拆分，而不是所有代码塞在页面里。
这非常适合 LMN516 当前规模：逻辑上模块化，物理上仍保持简单。
四、前端不是传统 React SPA，而是 Server + Client 混合
当前 Next.js 用了比较完整的 App Router 模式。
首页本身就是一个 async Server Component，服务端直接拉数据，并使用：
Server Components
+
Client Components
+
Suspense
+
Next Cache
+
revalidate
例如首页：
Request
│
▼
Next Server Component
│
├── getUnifiedPosts()
├── getMoments()
├── getPushupData()
├── getRecentActivity()
└── getMediaImages()
│
▼
React HTML
│
▼
Safari / PWA
代码里目前有 Suspense、unstable_cache()、revalidate = 60，WordPress 请求还有 300 秒 revalidation。
所以我们的页面不是每一次访问都傻乎乎重新请求所有东西。
而是：
数据库 / WordPress
│
▼
Next Cache
│
▼
服务器渲染
│
▼
浏览器
这属于 SSR + 数据缓存 + 增量再验证 的组合。
五、桌面端和移动端已经开始成为两种「界面形态」
现在不是纯 CSS 响应式了。
首页服务器会读取：
User-Agent
sec-ch-ua-mobile
然后判断是不是手机。
手机访问：
请求
↓
服务器识别 Phone
↓
MobileTodayLoading
↓
Suspense
↓
MobileToday
↓
MobileTodayStream
桌面则继续加载完整 Garden 首页。
所以目前技术方向已经从：
同一页面
↓
CSS 缩小
变成：
同一数据系统
│
┌───┴────┐
│ │
Desktop Mobile
World App
这是一个比较大的架构变化。
六、CSS 也是自己的一套 Design System
目前没有 Tailwind。
我们维护的是自己的 CSS 架构。
入口：
app/globals.css
│
├── 00-tokens.css
├── 01-base.css
├── typography
├── spacing
├── layout
├── cards
├── buttons
├── navigation
├── motion
├── night-theme
│
├── moments
├── music
├── PWA
├── garden
├── library
├── admin
├── auth
├── comments
├── EPUB
├── room
│
└── 大量 mobile 专项层
现在全局 CSS 已经拆到了 00～62 这一套分层体系。
同时具体 React 组件还会用：
XXX.module.css
所以我们实际上是：
全局 Design Tokens
+
全局基础视觉规范
+
领域 CSS
+
组件 CSS Modules
而不是第三方 UI 框架。
七、后端也是 Next.js，本身没有另一套 Express/Nest 服务
这一点也要明确。
目前：
前端
app/*.tsx
后端 API
app/api/**/route.ts
业务逻辑
lib/**
数据库
Prisma
数据库本体
PostgreSQL
全部在同一个项目。
当前 API 已经分出很多领域：
/api/admin
/api/analytics
/api/assistant
/api/auth
/api/clipboard
/api/comments
/api/content
/api/control-room
/api/english
/api/epub
/api/games
/api/internal
/api/library
/api/location
/api/media
/api/messages
/api/music
/api/public
/api/push
/api/pushup
/api/search
/api/subscriptions
/api/v1
/api/voice
...
这已经是一个相当完整的内部 API 层。
所以：
不是
Next.js → Express → Database
而是
Next.js UI
↓
Next.js Route Handler
↓
lib Domain
↓
Prisma
↓
PostgreSQL
八、数据库架构：PostgreSQL + Prisma + Supabase
这里三个东西不要混。
Supabase
│
└── 提供 PostgreSQL 基础设施
│
▼
Prisma
│
▼
LMN516 TypeScript
Supabase ≠ 我们的业务后端。
目前代码并没有把核心架构建立在 Supabase JS SDK 上。
LMN516 自己通过 Prisma 操作 PostgreSQL。
生产 Serverless 环境：
Vercel
↓
Prisma
↓
Supabase Supavisor
transaction pool :6543
↓
PostgreSQL
数据库迁移/CLI 则可以使用：
DIRECT_URL
↓
5432 session/direct connection
代码还会在生产环境自动把不合适的 Supavisor session URL 修正到 transaction mode，并限制连接数，专门适配 Serverless。
九、数据库已经是「个人数据平台」
目前不是只有：
posts
users
comments
而是已经覆盖：
身份
├── User
├── UserSession
├── UserPasskey
├── UserApiToken
├── AuthChallenge
└── AuthRateLimit
互动
├── Comment
├── Conversation
└── Message
通知
├── PushEvent
├── PushDelivery
├── OwnerPushDevice
├── Reminder
└── ReminderOccurrence
个人资料
├── Book
├── Movie
├── MusicTrack
├── RoomItem
├── PushupDay
├── PushupSession
├── EnglishWord
└── EnglishProgress
归档
├── ArchiveMoment
└── ArchiveMomentMedia
系统
├── AnalyticsVisitor
├── AnalyticsSession
├── AnalyticsPageView
├── AnalyticsEvent
├── CodeSnapshot
└── InfrastructureMetric
而且 Prisma 已经采用多 Schema 文件：
prisma/
├── schema.prisma
├── mail.prisma
└── models/
├── assistant-activity.prisma
├── clipboard-record.prisma
├── location-point.prisma
└── personal-content.prisma
这说明数据库也开始按照领域模块拆了。
十、内容架构现在是「双源过渡架构」
这是目前非常关键的一点。
以前：
WordPress
↓
文章
↓
网站
现在已经变成：
┌── WordPress Article
│
UnifiedPosts ┼── ChatGPT Dialogue Article
│
└── LMN516 PersonalContent
│
▼
首页/文章
代码中的 getUnifiedPosts() 会：
WordPress getPosts()
+
PostgreSQL PersonalContent
↓
统一格式
↓
按时间排序
↓
UnifiedPost[]
而 PersonalContent 已经支持：
article / thought ...
title
content
summary
tags
targets
source
status
occurredAt
revision history
并记录 CHATGPT / WORDPRESS / LMN516 等来源。
因此现在准确状态是：
WordPress 仍然存在，但已经不再是 LMN516 唯一的内容数据库。
十一、但 WordPress 目前还没有完全退出
这里不能误判。
现在文章读取仍大量通过：
cms.lmn516.com
↓
WordPress REST API
↓
lib/wordpress.ts
↓
Next.js
而且当前 /api/v1/moments：
Apple Shortcut
↓
Bearer API Token
↓
/api/v1/moments
↓
publishMoment()
↓
publishMomentToWordPress()
↓
WordPress
↓
revalidatePath()
↓
发送 Web Push
所以目前叫：
Hybrid CMS / 混合内容架构
最准确。
不是纯 WordPress，也还不是纯 LMN516 CMS。
十二、认证是我们自己写的，不是 NextAuth
当前账号系统：
User
│
├── Password
├── Session
├── Passkey
├── API Token
└── Role
├── USER
└── ADMIN
密码：
Password
↓
random salt
↓
Node crypto.scrypt
↓
hash
↓
PostgreSQL
使用的是 scrypt N=16384, r=8, p=1，比较时使用 timing-safe comparison。
Session：
随机 32 byte Token
│
├── 浏览器：原始 Token
│ HttpOnly
│ Secure
│ SameSite=Lax
│
└── Database
SHA-256(Token)
数据库不直接保存浏览器手里的 Session Token。
另外还有：
WebAuthn / Passkey
Face ID / Touch ID / 系统 Passkey
↓
WebAuthn Challenge
↓
UserPasskey
依赖 @simplewebauthn/*。
十三、外部机器接入使用 Scoped API Token
比如 Apple Shortcut 并不是拿你的网页登录 Cookie。
而是：
lmn_xxxxxxxxx
↓
SHA-256
↓
UserApiToken
↓
scope
↓
moments:write
服务器还会检查：
token 是否存在
token 是否撤销
用户是否 ACTIVE
是否 ADMIN
是否拥有对应 scope
所以已经有了一个真正的：
Machine-to-Machine Authentication
也就是：
Mac / Shortcut / Agent
↓
API Token
↓
LMN516 API
这将来是 Intake Layer 很重要的底座。
十四、PWA 是一整个运行层，不只是“添加到主屏幕”
目前：
manifest.webmanifest
+
Service Worker
+
Cache Storage
+
Web Push
+
Offline Page
+
App Icons
Service Worker 已经自己维护：
Shell Cache
Static Cache
Image Cache
Next Image：
/_next/image
↓
PWA image cache
↓
24h freshness
↓
最多 240 项
网络断开：
页面导航失败
↓
/offline
而根布局会全局启动：
PwaBootstrap
LocationTracker
AnalyticsTracker
GardenWorldLayer
MessagePanelHost
所以 PWA 已经是 LMN516 的客户端运行时。
十五、Web Push 已经有完整遥测闭环
现在不是：
服务器 → 发通知 → 完
而是：
服务器
↓
Web Push
↓
Service Worker
│
├── received
├── shown
└── clicked
↓
/api/push/ack
↓
PostgreSQL
数据库也有：
PushEvent
PushDelivery
acceptedAt
acknowledgedAt
receivedAt
shownAt
clickedAt
failedAt
这已经属于一个小型通知基础设施。
十六、文件存储：Vercel Blob + 自己的加密层
普通图片可以直接使用 Blob。
但私有 Blob 现在已经做成：
原文件
↓
3 MB 分块
↓
AES-256-GCM
↓
SHA-256 checksum
↓
Vercel Blob
读取时：
Vercel Blob
↓
download
↓
AES-256-GCM decrypt
↓
SHA-256 verify
↓
原文件
单个私有对象的代码上限目前是 1 GB。
这是一个很重要的设计：
存储平台可以是公开 URL，但内容本身在上传前已经由 LMN516 加密。
十七、图片处理走 Next Image
当前 Next 配置：
原图片
↓
Next Image
↓
AVIF / WebP
↓
不同 deviceSize
↓
浏览器
支持来源：
lmn516.com
cms.lmn516.com
Vercel Blob
并设置了 24 小时最低缓存。
然后前面刚才讲过，PWA 又会继续缓存经过 Next 优化的图片。
所以：
原图
↓
Next Image 优化
↓
Vercel/CDN
↓
Service Worker 缓存
↓
Safari
这是我们的完整图片路径。
十八、3D Garden 属于 WebGL 技术栈
依赖：
Three.js
+
@react-three/fiber
+
@react-three/drei
可以理解为：
Three.js
│
└── JavaScript 3D 引擎
React Three Fiber
│
└── 用 React 写 Three.js
Drei
│
└── 常用 3D 工具组件
public/ 里也已经存在：
models/
garden-assets/
games/
images/
根页面长期挂着 GardenWorldLayer。
十九、语音现在也有两条技术路线
当前 lib/voice：
Voice Input
│
├── browser-speech-recognition
│
└── sensevoice-local
第二条比较有意思：
Microphone
↓
Web Audio
↓
16 kHz Mono Audio
↓
VAD
↓
Sherpa WASM
↓
SenseVoice
↓
本地识别结果
模型会从 Hugging Face 获取并进入浏览器 Cache Storage，然后通过 WebAssembly 在本地运行。
所以它不是：
录音 → 上传 OpenAI → 等结果
而是具备：
Browser Local AI / 浏览器本地 AI
的雏形。
二十、Gmail 现在也是网站自己的数据域
数据库已经有：
MailAccount
MailThread
MailMessage
包括：
OAuth credentialCiphertext
syncCursor
labels
unread
starred
attachments
bodyText
bodyHtml
rawHeaders
也就是说方向不是：
网页 iframe 一个 Gmail
而是：
Gmail
↓
OAuth / Gmail API
↓
LMN516 Mail Sync
↓
PostgreSQL
↓
LMN516 Inbox UI
.env.example 也已经有 Gmail OAuth Client ID、Secret、Redirect URI 和邮件凭证加密 Key。
二十一、Clipboard、Location、Assistant 也已经进入数据层
Clipboard
Mac / Device Clipboard
↓
LMN516 API
↓
ClipboardRecord
记录的不只是文字，还有：
文件
MIME
checksum
device
source app
source URL
source document
capture method
provenance
recognition result
Location
已经有：
latitude
longitude
accuracy
altitude
heading
speed
trackId
source
recordedAt
根布局也会启动 LocationTracker。
ChatGPT / Assistant Activity
已经有：
AssistantActivity
│
├── domain
├── kind
├── topic
├── summary
├── questionIds
├── issueIds
├── runIds
├── continuationOf
└── metadata
这就开始把 ChatGPT 的活动也变成网站自己的结构化数据。
二十二、部署架构
现在生产链基本是：
本地 / ChatGPT Agent
↓
Git
↓
GitHub
↓
main
↓
Vercel
↓
Next.js Build
↓
Production
↓
LMN516.com
生产 Region 当前明确设置为：
sin1
Singapore
并且已经主动禁止：
lmn-work-*
agent/*
自动触发 Vercel Deployment。
因此工程策略已经是：
多个开发 commit
↓
分支验证
↓
阶段性合并
↓
尽量少 Deployment
二十三、GitHub Actions 已经形成 CI 层
.github/workflows 目前已经包括针对：
Clipboard
CMS
Control Tower
Location
Mobile Interaction
Network
Studio
Traceability
Voice Input
...
的专项 Workflow。
也就是说现在 GitHub 不只是“存代码”。
它逐步承担：
代码仓库
+
CI
+
专项检查
+
状态回报
+
Control Tower 信号源
二十四、本地工程还有自己的 Audit / Maintenance 层
package.json 已经有：
typecheck
audit
audit:images
audit:pwa
audit:css-system
audit:wordpress-exit
control-room:scan
audit:control-room
verify
而且：
npm run dev
前
↓
control-room:scan
构建前：
control-room:scan
↓
audit
↓
next build
脚本目录还有：
audit/
change-management/
clipboard/
control-room/
import-wechat-moments.mjs
migrate-pushup-json.mjs
seed-technical-english.mjs
...
所以已经形成：
写代码
↓
扫描
↓
Audit
↓
Build
↓
CI
↓
Deploy
这样的工程质量层。
二十五、Control Room 其实已经进入「可观测性架构」
数据库目前有：
CodeSnapshot
记录：
总代码行数
组件数
页面 Route
API Route
CSS
Scripts
Prisma Models
还有：
InfrastructureMetric
记录：
CPU
Memory
Disk
Load
Network
Uptime
Services
环境配置里还能接收 VPS 上：
nginx
cron
php8.3-fpm
等服务状态。
所以 Control Room 的技术本质其实是：
Observability / 可观测性层
而不只是一个后台页面。
二十六、把现在所有东西重新抽象一下
我认为目前最准确的分层是：
┌─────────────────────────────────────────┐
│ ⑴ Experience Layer │
│ Desktop / Mobile / PWA / Garden │
├─────────────────────────────────────────┤
│ ⑵ Application Layer │
│ Next.js App Router / React │
├─────────────────────────────────────────┤
│ ⑶ API Layer │
│ Route Handlers / v1 / Internal API │
├─────────────────────────────────────────┤
│ ⑷ Domain Layer │
│ lib/auth / mail / content / ... │
├─────────────────────────────────────────┤
│ ⑸ Data Layer │
│ Prisma / PostgreSQL │
├─────────────────────────────────────────┤
│ ⑹ Content Layer │
│ PersonalContent + WordPress │
├─────────────────────────────────────────┤
│ ⑺ Storage Layer │
│ Vercel Blob / encrypted blobs │
├─────────────────────────────────────────┤
│ ⑻ Device & Integration Layer │
│ Gmail / Shortcut / Mac / Push / GPS │
├─────────────────────────────────────────┤
│ ⑼ Platform Layer │
│ Vercel / Supabase / WordPress VPS │
├─────────────────────────────────────────┤
│ ⑽ Engineering Layer │
│ Git / GitHub Actions / Audit / CI │
├─────────────────────────────────────────┤
│ ⑾ Observability Layer │
│ Analytics / Control Room │
└─────────────────────────────────────────┘
二十七、几个很重要的「它不是什么」
这可以防止以后概念越来越乱。
| 不是 | 实际情况 |
|---|---|
| 纯 WordPress 网站 | Next.js 是真正前台与应用主体 |
| 纯静态博客 | 有用户、API、DB、Push、邮件、位置等动态系统 |
| React SPA | 使用 Next Server Components / SSR / Cache |
| 前后端分离两套项目 | 一个 Next.js 全栈项目 |
| 微服务 | 模块化单体 |
| Supabase 应用 | Supabase 主要承担 PostgreSQL 基础设施 |
| Tailwind 项目 | 自研 CSS Design System |
| NextAuth 项目 | 自研 User/Session/WebAuthn/Auth |
| WordPress 单一内容库 | 已经是 WordPress + PersonalContent 双源 |
| 普通 PWA | 已有缓存、离线、Push、通知回执、位置等 |
| 单纯个人博客 DB | 已逐渐成为个人数字数据平台 |
最后，用一句话定义当前 LMN516.com 技术架构
LMN516.com
=
Next.js 模块化单体
+
React 多终端界面
+
PostgreSQL / Prisma 数据核心
+
WordPress → LMN516 CMS 过渡中的双内容源
+
PWA / Service Worker 客户端运行层
+
Passkey / Session / API Token 身份系统
+
Vercel Blob 加密文件层
+
Gmail / Mac / Shortcut / Location / Push 等 Intake 接口
+
WebAssembly 本地 AI
+
Three.js 3D 世界
+
GitHub Actions / Audit / Control Room 工程与可观测性体系
从代码架构上看，现在真正的核心已经不是“博客”，而是一个以 LMN516.com 为界面的、模块化的个人数字系统。 WordPress 目前仍是其中一个重要节点，但已经不再是中心。
COMMENTS
评论
正在读取评论…
登录后可以评论和回复。