@windrun-huaiin/diaomao 2.3.5 → 2.4.0

package/.env.local.txt

@@ -1,39 +1,49 @@
-# domain and github link
+# 域名(必须配置)
 NEXT_PUBLIC_BASE_URL=http://localhost:3000
+# 测试(线上需要删除)
+EXAMPLE_TEST_X=sk-dev-7C021EA0-386B-4908-BFDD-3ACC55B2BD6F
 
+# Github在菜单上的筛选按钮链接配置(可选)
 NEXT_PUBLIC_GITHUB=https://github.com/PowerZCY/next-ai-build/
+# Blog页面的EditOnGithub按钮的链接base-url配置(可选, 若开放编辑则必须配置)
 NEXT_PUBLIC_GITHUB_BASE_URL=https://github.com/PowerZCY/next-ai-build/blob/main/apps/diaomao
+# R2上的图片下载代理服务器配置(可选, 如果需要下载图片则必须配置, 否则会出现跨域报错)
 NEXT_PUBLIC_STYLE_CDN_PROXY_URL=https://r2-explorer-template.zcy777et.workers.dev/proxy
 
-# Website uniform style
+# 网站icon图标统一颜色(可选), 紫色
 NEXT_PUBLIC_STYLE_ICON_COLOR=text-purple-500
+# 网站svg图标统一颜色(可选), 紫色
 NEXT_PUBLIC_STYLE_SVG_ICON_COLOR=#AC62FD
+# 网站svg图标大小适配(可选)
 NEXT_PUBLIC_STYLE_SVG_ICON_SIZE=18
 
+# 网站Banner展示开关, 默认展示
 NEXT_PUBLIC_STYLE_SHOW_BANNER=true
+# 网站Clerk页面Banner展示开关(可选), 默认不展示
 NEXT_PUBLIC_STYLE_CLERK_PAGE_BANNER=false
+# 网站Clerk登录与注册功能展示的方式(可选), true是以弹窗展示; false则是以页面展示, 默认是true
 NEXT_PUBLIC_STYLE_CLERK_AUTH_IN_MODAL=false
-NEXT_PUBLIC_STYLE_OPEN_MDX_SEO_SITE_MAP=true
-
+# MDX页面中mermaid图是否开启图片水印(可选), 默认开启
 NEXT_PUBLIC_STYLE_WATERMARK_ENABLED=true
+# MDX页面中mermaid图的水印txt文字
 NEXT_PUBLIC_STYLE_WATERMARK_TEXT=Windrun·Huaiin
 
-# GoogleID TODO
+# GoogleID分析ID(线上必须配置)
 NEXT_PUBLIC_GOOGLE_ANALYTICS_ID=
-# MicrosoftID TODO
+# MicrosoftID分析ID(线上必须配置)
 NEXT_PUBLIC_MICROSOFT_CLARITY_ID=
 
 # Only-Use-In-Server, !!DO NOT USE IN CLIENT!!
+# Clerk组件的日志调试开关(可选)
 CLERK_DEBUG=false
+# Clerk组件的公钥, 在Clerk后台大盘配置里, 接入Clerk后线上必须配置
 NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
+# Clerk组件的私钥, 在Clerk后台大盘配置里, 接入Clerk后线上必须配置
 CLERK_SECRET_KEY=
 
-# signin-url
+# Clerk组件登录/注册/邀请白名单, url配置(可选)
 NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
 NEXT_PUBLIC_CLERK_SIGN_IN_FALLBACK_REDIRECT_URL=/
-# signupurl
 NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
 NEXT_PUBLIC_CLERK_SIGN_UP_FALLBACK_REDIRECT_URL=/
-
-# waitlist-url
 NEXT_PUBLIC_CLERK_WAITLIST_URL=/waitlist

package/messages/en.json

@@ -1,7 +1,6 @@
 {
   "home": {
     "title": "Diaomao",
-    "slug": "Rethink | Redefine | Rebuild",
     "banner": "Rethink | Redefine | Rebuild",
     "webTitle": "Diaomao Directory - Showcase Beautiful Images & Tips",
     "webDescription": "Discover stunning AI-generated images and learn expert tips for creating beautiful visuals with Diaomao's powerful text-to-image technology.",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@windrun-huaiin/diaomao",
-  "version": "2.3.5",
+  "version": "2.4.0",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -25,9 +25,9 @@
     "@radix-ui/react-slot": "^1.2.2",
     "@tailwindcss/typography": "latest",
     "@types/mdx": "^2.0.13",
-    "@windrun-huaiin/base-ui": "^6.0.1",
-    "@windrun-huaiin/lib": "^6.1.2",
-    "@windrun-huaiin/third-ui": "^5.12.4",
+    "@windrun-huaiin/base-ui": "^6.0.2",
+    "@windrun-huaiin/lib": "^6.2.0",
+    "@windrun-huaiin/third-ui": "^5.13.4",
     "autoprefixer": "^10.4.21",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",

package/src/app/sitemap.ts

@@ -4,6 +4,5 @@ import { createSitemapHandler } from "@windrun-huaiin/third-ui/lib/server";
 export default createSitemapHandler(
   appConfig.baseUrl,
   appConfig.i18n.locales as string[],
-  appConfig.mdxSourceDir.blog,
-  appConfig.style.openMdxSEOSiteMap
+  appConfig.mdxSourceDir.blog
 );

package/src/mdx/blog/AsyncArchitecture.mdx

@@ -0,0 +1,179 @@
+---
+title: Next.js 异步处理架构升级方案
+description: NextJS全栈技术中间件之异步处理
+date: 2025-07-31
+---
+
+
+## 项目背景
+- **环境**: Next.js 后端服务部署在 Vercel, 无服务器架构, 需处理异步任务(如用户状态更新、数据清理、订单检查)。
+- **目标**: 从轻量级事件驱动逐步升级到高性能分布式消息队列, 适应项目规模增长。
+- **约束**: Vercel 函数超时(免费层 10s, Pro 层 300s), 不支持持久化进程, 需外部服务或无服务器方案。
+
+## 升级路径
+1. **Node.js EventEmitter**: 轻量级事件驱动, 适合初期快速开发。
+2. **Redis + Bull**: 引入任务队列, 支持持久化和重试, 适合中小型项目。
+3. **Cloudflare Queues**: 全球分布式消息队列, 低延迟, 适合高并发。
+4. **Vercel Queues**: 原生无服务器队列, 简化集成, 适合 Vercel 生态。
+5. **Apache Pulsar**: 分布式流处理, 适合大规模、复杂场景。
+
+## 各阶段方案
+
+### 1. Node.js EventEmitter
+- **描述**: 使用 Node.js 内置 `EventEmitter` 在内存中处理事件, API 路由触发异步任务。
+- **部署**: Vercel API 路由内实现, 任务处理在同一函数调用中完成。
+
+<Mermaid
+title="EventEmitter时序图"
+chart={`
+sequenceDiagram
+    actor Client
+    participant API as Vercel API Route
+    participant EE as EventEmitter
+    Client->>API: POST /api/update-user
+    API->>EE: emit('updateUserStatus', { userId })
+    EE->>EE: Process task (e.g., update DB)
+    API-->>Client: 200 OK ('Event triggered')
+
+`}/>
+
+- **优缺点**: 
+  - **优点**: 简单, 无外部依赖, 实时性高。
+  - **缺点**: 无持久化, Vercel 无状态限制长任务, 扩展性差。
+- **升级原因**: 任务量增加需持久化、重试机制。
+
+### 2. Redis Bull Queue
+- **描述**: 使用 Redis(Upstash Redis)+ Bull 实现任务队列, API 路由入队, 外部 Worker 消费。
+- **部署**: 
+  - Vercel: API 路由推送任务。
+  - 外部: Worker 部署在 Railway/Dokku/AWS EC2。
+
+<Mermaid
+title="Redis·Bull时序图"
+chart={`
+  sequenceDiagram
+    actor Client
+    participant API as Vercel API Route
+    participant Redis as Redis (Bull)
+    participant Worker as External Worker
+    participant DB as Database
+    Client->>API: POST /api/queue-task
+    API->>Redis: Add task
+    API-->>Client: 200 OK ('Task queued')
+    Redis->>Worker: Poll task
+    Worker->>DB: Execute task
+    Worker->>Redis: Mark complete
+`}/>
+
+- **优缺点**: 
+  - **优点**: 支持持久化(RDB/AOF)、重试, 易集成。
+  - **缺点**: 持久化较弱, Worker 需独立部署, 高并发需 Redis 集群。
+- **升级原因**: 需全球分布式、低延迟、强持久化。
+
+### 3. Cloudflare Queues
+- **描述**: Cloudflare Queues 提供全球分布式消息队列, Vercel API 路由通过 HTTP 调用 Cloudflare Worker 入队, Worker 消费任务。
+- **部署**: 
+  - Vercel: API 路由发送任务到 Cloudflare Worker。
+  - Cloudflare: Workers 实现生产者和消费者, 绑定队列。
+
+<Mermaid
+title="Cloudflare Queues时序图"
+chart={`
+  sequenceDiagram
+    actor Client
+    participant API as Vercel API Route
+    participant Worker as Cloudflare Worker
+    participant Queue as Cloudflare Queue
+    participant Consumer as Cloudflare Consumer Worker
+    participant DB as Database
+    Client->>API: POST /api/queue-task
+    API->>Worker: POST / (task data)
+    Worker->>Queue: Send task
+    Worker-->>API: 200 OK
+    API-->>Client: 200 OK ('Task queued')
+    Queue->>Consumer: Poll task
+    Consumer->>DB: Update data
+    Consumer->>Queue: Acknowledge
+`}/>
+
+- **优缺点**: 
+  - **优点**: 全球分布式, 低延迟, 强持久化(4 天保留), 支持死信队列。
+  - **缺点**: 跨平台集成复杂, 消费者需 Cloudflare Workers。
+- **升级原因**: 需 Vercel 原生集成, 简化架构。
+
+### 4. Vercel Queues
+- **描述**: Vercel Queues(Limited Beta)提供无服务器消息队列, API 路由入队, Vercel 函数消费。
+- **部署**: 全流程在 Vercel 环境, 需 Beta 访问权限, 替代方案为 Upstash QStash。
+- **时序图**: 
+
+<Mermaid
+title="Vercel Queues时序图"
+chart={`
+  sequenceDiagram
+    actor Client
+    participant API as Vercel API Route
+    participant Queue as Vercel Queue
+    participant Consumer as Vercel Consumer Function
+    participant DB as Database
+    Client->>API: POST /api/queue-task
+    API->>Queue: Enqueue task
+    API-->>Client: 200 OK ('Task queued')
+    Queue->>Consumer: Poll task
+    Consumer->>DB: Update data
+    Consumer->>Queue: Acknowledge
+`}/>
+
+- **优缺点**: 
+  - **优点**: Vercel 原生, 配置简单, 自动扩展。
+  - **缺点**: Beta 阶段, 功能未知, 函数超时限制。
+- **升级原因**: 需多租户、流处理支持。
+
+### 5. Apache Pulsar
+- **描述**: Pulsar 提供分布式消息队列和流处理, API 路由入队, 消费者运行在外部服务器。
+- **部署**: 
+  - Vercel: API 路由通过 `pulsar-client` 推送任务。
+  - 外部: 消费者部署在 AWS EC2/Kubernetes 或托管服务(DataStax)。
+- **时序图**: 
+
+<Mermaid
+title="Pulsar时序图"
+chart={`
+  sequenceDiagram
+    actor Client
+    participant API as Vercel API Route
+    participant Broker as Pulsar Broker
+    participant Consumer as External Consumer
+    participant DB as Database
+    Client->>API: POST /api/queue-task
+    API->>Broker: Send task
+    API-->>Client: 200 OK ('Task queued')
+    Broker->>Consumer: Deliver task
+    Consumer->>DB: Update data
+    Consumer->>Broker: Acknowledge
+`}/>
+
+- **优缺点**: 
+  - **优点**: 支持多租户、流处理, 持久化强(BookKeeper), 死信主题。
+  - **缺点**: 部署复杂, Node.js 客户端需 C++ 环境, 运维成本高。
+- **升级原因**: 满足大规模、复杂场景。
+
+## 升级路径分析
+- **阶段 1 -> 2**: EventEmitter 无持久化, 升级到 Redis + Bull 提供队列和重试。
+- **阶段 2 -> 3**: Redis 持久化弱, Cloudflare Queues 提供全球分布式和强持久化。
+- **阶段 3 -> 4**: 跨平台复杂, Vercel Queues 原生集成更简单。
+- **阶段 4 -> 5**: Vercel Queues 功能有限, Pulsar 支持大规模分布式需求。
+
+## 注意事项
+- **Vercel 限制**: 无状态函数, 需外部 Worker(Redis、Pulsar)或云服务(Cloudflare、Vercel Queues)。
+- **跨平台集成**: Cloudflare Queues 需 HTTP 桥接, 确保 CORS 和安全(API Token/OIDC)。
+- **成本**: 
+  - Redis (Upstash): 按使用量(免费层 1 万命令/天)。
+  - Cloudflare Queues: $1.20/百万条消息。
+  - Vercel Queues: 未知(Beta)。
+  - Pulsar: 自托管高成本, 托管按使用量。
+- **监控**: 使用 Vercel Logs、Cloudflare Analytics、Sentry 跟踪任务。
+
+## 推荐
+- **中小型项目**: Upstash QStash(代替 Vercel Queues)或 Cloudflare Queues, 简单低成本。
+- **大规模项目**: Pulsar, 优先托管服务(DataStax)降低运维负担。
+- **Cloudflare 集成**: Vercel API 调用 Cloudflare Worker, 确保安全和监控。

package/src/mdx/blog/PaidDesign.mdx

@@ -0,0 +1,8 @@
+---
+title: 订阅与积分系统产品设计文档 v1.0
+description: 付费订阅系统通用设计
+date: 2025-07-31
+---
+
+## 概述
+

package/src/mdx/blog/index.mdx

@@ -2,8 +2,16 @@
 title: Blog
 description: Articles and thoughts about various topics.
 icon: Rss
-date: 2025-07-30
+date: 2025-07-31
 ---
 
-## Ooops
-No blog posts found yet. Stay tuned!
+## Past List
+
+<Cards>
+  <ZiaCard  href="blog/AsyncArchitecture" title="Next.js 异步处理架构升级方案">
+    2025-07-31
+  </ZiaCard>
+  <ZiaCard  href="blog/PaidDesign-v1.0" title="订阅与积分系统产品设计文档 v1.0">
+    2025-07-31
+  </ZiaCard>
+</Cards>

package/src/mdx/blog/ioc.mdx

@@ -1,12 +1,15 @@
 ---
 title: Monthly Summary
 description: Index and Summary
-date: 2025-07-30
+date: 2025-07-31
 ---
 
 
 ## Overview
 <Files>
-  <ZiaFile name="Comming Soon" className="opacity-50" disabled/>
+  <ZiaFolder name="2025-07(2)" defaultOpen>
+    <ZiaFile name="2025-07-31(Next.js 异步处理架构升级方案)" href="./AsyncArchitecture" />
+    <ZiaFile name="2025-07-31(订阅与积分系统产品设计文档 v1.0)" href="./PaidDesign-v1.0" />
+  </ZiaFolder>
 </Files>