@windrun-huaiin/diaomao 2.3.6 → 2.5.0

package/.env.local.txt

@@ -1,38 +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
-
+# 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.6",
+  "version": "2.5.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/base-ui": "^6.0.2",
     "@windrun-huaiin/lib": "^6.2.0",
-    "@windrun-huaiin/third-ui": "^5.13.0",
+    "@windrun-huaiin/third-ui": "^5.13.4",
     "autoprefixer": "^10.4.21",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",

package/patches/fumadocs-ui@15.3.3.patch

@@ -1,17 +1,17 @@
 diff --git a/dist/components/layout/toc-clerk.d.ts.map b/dist/components/layout/toc-clerk.d.ts.map
-index 30dfe1ce45819999661e37005f3c0238a596b678..478144443e205959381138a5ff0cbe45bdae2f7b 100644
+index 30dfe1ce45819999661e37005f3c0238a596b678..6b9c00aef82311612b7e549c419b9534c01a03a7 100644
 --- a/dist/components/layout/toc-clerk.d.ts.map
 +++ b/dist/components/layout/toc-clerk.d.ts.map
 @@ -1 +1 @@
 -{"version":3,"file":"toc-clerk.d.ts","sourceRoot":"","sources":["../../../src/components/layout/toc-clerk.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAOxD,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EAAE,KAAK,EAAE,EAAE;IAAE,KAAK,EAAE,WAAW,EAAE,CAAA;CAAE,2CA2FxE"}
 
-+{"version":3,"file":"toc-clerk.d.ts","sourceRoot":"","sources":["../../../src/components/layout/toc-clerk.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AA8BxD,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EAAE,KAAK,EAAE,EAAE;IAAE,KAAK,EAAE,WAAW,EAAE,CAAA;CAAE,2CAyFxE"}
++{"version":3,"file":"toc-clerk.d.ts","sourceRoot":"","sources":["../../../src/components/layout/toc-clerk.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAuDxD,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EAAE,KAAK,EAAE,EAAE;IAAE,KAAK,EAAE,WAAW,EAAE,CAAA;CAAE,2CAyFxE"}
 
 diff --git a/dist/components/layout/toc-clerk.js b/dist/components/layout/toc-clerk.js
-index 7c128748acf238d7fd63a446876f35d5a0679fed..58bd8c8effdf362d62acd20d2910b61093327659 100644
+index 7c128748acf238d7fd63a446876f35d5a0679fed..d90e60ef967bc3e5f82ffb87f0ff6624a9d54e46 100644
 --- a/dist/components/layout/toc-clerk.js
 +++ b/dist/components/layout/toc-clerk.js
-@@ -1,10 +1,32 @@
+@@ -1,10 +1,55 @@
  'use client';
 -import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 +import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -34,18 +34,41 @@ index 7c128748acf238d7fd63a446876f35d5a0679fed..58bd8c8effdf362d62acd20d2910b610
 +    // e.g., if depth >=3, line is at 10px from the start of the content box of TOCItem
 +    return depth >= 3 ? 10 : 0;
 +}
-+// New helper function to extract step info from URL
-+function getStepInfoFromUrl(url) {
-+    const match = url.match(/^#(\d+)-/);
-+    if (match && match[1]) {
-+        return { isStep: true, stepNumber: match[1] };
++// Fallback: extract leading digits from URL like "#12-title"
++function _getDigitsFromUrl(url) {
++    const m = /^#(\d+)-/.exec(url);
++    if (!m)
++        return null;
++    const n = Number.parseInt(m[1], 10);
++    return Number.isNaN(n) ? null : n;
++}
++// (Deprecated) URL-based step detection and mapping removed in favor of title-based rules
++// Extract step info from the ORIGINAL title for h3-only rendering.
++// Rules:
++// - Title must match: number(.number)* <space> <non-empty text>
++// - Display step is the last numeric segment, clamped to 0..19
++function getStepInfoFromTitle(title) {
++    const trimmed = title.trim();
++    // Trailing dot is optional: e.g., "1 ", "1. ", "1.1 ", "1.1. "
++    const match = trimmed.match(/^(\d+(?:\.\d+)*\.?)\s+(.+)$/);
++    if (!match)
++        return { isStep: false, displayStep: null, content: null };
++    const content = (match[2] ?? '').trim();
++    if (content.length === 0)
++        return { isStep: false, displayStep: null, content: null };
++    const numericPart = match[1].replace(/\.$/, '');
++    const parts = numericPart.split('.').map((p) => Number.parseInt(p, 10));
++    const lastPart = parts.at(-1);
++    if (lastPart == null || Number.isNaN(lastPart)) {
++        return { isStep: false, displayStep: null, content: null };
 +    }
-+    return { isStep: false, stepNumber: null };
++    const clamped = Math.max(0, Math.min(19, lastPart));
++    return { isStep: true, displayStep: clamped, content };
 +}
  export default function ClerkTOCItems({ items }) {
      const containerRef = useRef(null);
      const [svg, setSvg] = useState();
-@@ -18,21 +40,25 @@ export default function ClerkTOCItems({ items }) {
+@@ -18,21 +63,25 @@ export default function ClerkTOCItems({ items }) {
              let w = 0, h = 0;
              const d = [];
              for (let i = 0; i < items.length; i++) {
@@ -77,7 +100,7 @@ index 7c128748acf238d7fd63a446876f35d5a0679fed..58bd8c8effdf362d62acd20d2910b610
                  height: h,
              });
          }
-@@ -45,29 +71,31 @@ export default function ClerkTOCItems({ items }) {
+@@ -45,29 +94,51 @@ export default function ClerkTOCItems({ items }) {
      }, [items]);
      if (items.length === 0)
          return _jsx(TocItemsEmpty, {});
@@ -89,7 +112,9 @@ index 7c128748acf238d7fd63a446876f35d5a0679fed..58bd8c8effdf362d62acd20d2910b610
 -                    // Inline SVG
 -                    encodeURIComponent(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${svg.width} ${svg.height}"><path d="${svg.path}" stroke="black" stroke-width="1" fill="none" /></svg>`)}")`,
 -                }, children: _jsx(TocThumb, { containerRef: containerRef, className: "mt-(--fd-top) h-(--fd-height) bg-fd-primary transition-all" }) })) : null, _jsx("div", { className: "flex flex-col", ref: containerRef, children: items.map((item, i) => (_jsx(TOCItem, { item: item, upper: items[i - 1]?.depth, lower: items[i + 1]?.depth }, item.url))) })] }));
--}
++                    maskImage: `url("data:image/svg+xml,${encodeURIComponent(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${svg.width} ${svg.height}"><path d="${svg.path}" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none" /></svg>`)}")`,
++                }, children: _jsx(TocThumb, { containerRef: containerRef, className: "bg-fd-primary transition-all duration-500 ease-in-out" }) })) : null, _jsx("div", { className: "flex flex-col", ref: containerRef, children: items.map((item, i) => (_jsx(EnhancedClerkTOCItemInternal, { item: item, upperDepth: items[i - 1]?.depth, lowerDepth: items[i + 1]?.depth }, item.url))) })] }));
+ }
 -function getItemOffset(depth) {
 -    if (depth <= 2)
 -        return 14;
@@ -99,13 +124,35 @@ index 7c128748acf238d7fd63a446876f35d5a0679fed..58bd8c8effdf362d62acd20d2910b610
 -}
 -function getLineOffset(depth) {
 -    return depth >= 3 ? 10 : 0;
-+                    maskImage: `url("data:image/svg+xml,${encodeURIComponent(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${svg.width} ${svg.height}"><path d="${svg.path}" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none" /></svg>`)}")`,
-+                }, children: _jsx(TocThumb, { containerRef: containerRef, className: "bg-fd-primary transition-all duration-500 ease-in-out" }) })) : null, _jsx("div", { className: "flex flex-col", ref: containerRef, children: items.map((item, i) => (_jsx(EnhancedClerkTOCItemInternal, { item: item, upperDepth: items[i - 1]?.depth, lowerDepth: items[i + 1]?.depth }, item.url))) })] }));
- }
+-}
 -function TOCItem({ item, upper = item.depth, lower = item.depth, }) {
 -    const offset = getLineOffset(item.depth), upperOffset = getLineOffset(upper), lowerOffset = getLineOffset(lower);
 +function EnhancedClerkTOCItemInternal({ item, upperDepth = item.depth, lowerDepth = item.depth, }) {
-+    const { isStep, stepNumber } = getStepInfoFromUrl(item.url);
++    // New rule: only h3 and based on ORIGINAL title pattern
++    const isH3 = item.depth === 3;
++    const rawTitle = typeof item.title === 'string' ? item.title : '';
++    const { isStep, displayStep, content } = getStepInfoFromTitle(rawTitle);
++    let stepNumber = isH3 && isStep ? String(displayStep) : null;
++    let resolvedContent = item.title;
++    if (isH3 && isStep) {
++        resolvedContent = content ?? item.title;
++    }
++    // Fallback to URL-based digits if title-based detection fails unexpectedly
++    if (isH3 && !stepNumber) {
++        const urlNum = _getDigitsFromUrl(item.url);
++        if (urlNum != null) {
++            const clamped = Math.max(0, Math.min(19, urlNum));
++            stepNumber = String(clamped);
++            // Try to strip numeric prefix from title even if title-based regex failed
++            if (typeof rawTitle === 'string') {
++                const m = rawTitle.match(/^(\d+(?:\.\d+)*\.?)\s+(.+)$/);
++                if (m && m[2]) {
++                    resolvedContent = m[2];
++                }
++            }
++        }
++    }
++    const shouldRenderCircle = isH3 && stepNumber !== null;
 +    const lineOffsetWithinItem = getLineOffset(item.depth);
 +    const upperLineOffsetWithinItem = getLineOffset(upperDepth);
 +    const lowerLineOffsetWithinItem = getLineOffset(lowerDepth);
@@ -119,13 +166,9 @@ index 7c128748acf238d7fd63a446876f35d5a0679fed..58bd8c8effdf362d62acd20d2910b610
 +        }, className: "prose group relative py-1.5 text-sm text-fd-muted-foreground transition-colors [overflow-wrap:anywhere] first:pt-0 last:pb-0 data-[active=true]:text-fd-primary", children: [lineOffsetWithinItem !== upperLineOffsetWithinItem ? (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", className: "absolute -top-1.5 size-4 rtl:-scale-x-100 pointer-events-none", style: { insetInlineStart: Math.min(lineOffsetWithinItem, upperLineOffsetWithinItem), zIndex: 1 }, children: _jsx("line", { x1: upperLineOffsetWithinItem - Math.min(lineOffsetWithinItem, upperLineOffsetWithinItem), y1: "0", x2: lineOffsetWithinItem - Math.min(lineOffsetWithinItem, upperLineOffsetWithinItem), y2: "12", className: cn('stroke-fd-foreground/10', 'group-data-[active=true]:stroke-fd-primary'), strokeWidth: "1", strokeLinecap: "round" }) })) : null, _jsx("div", { className: cn('absolute inset-y-0 w-px pointer-events-none', 'bg-fd-foreground/10 group-data-[active=true]:bg-fd-primary', lineOffsetWithinItem !== upperLineOffsetWithinItem && 'top-1.5', lineOffsetWithinItem !== lowerLineOffsetWithinItem && 'bottom-1.5'), style: {
 +                    insetInlineStart: lineOffsetWithinItem,
 +                    zIndex: 1,
-+                } }), isStep && stepNumber && (_jsx("span", { className: cn('absolute z-10 flex size-[14px] rounded-full justify-center items-center', 'bg-black text-white dark:bg-white dark:text-black', 'group-data-[active=true]:bg-fd-primary group-data-[active=true]:text-white dark:group-data-[active=true]:text-black', 'font-medium text-xs'), style: {
++                } }), shouldRenderCircle && stepNumber && (_jsx("span", { className: cn('absolute z-10 flex size-[14px] rounded-full justify-center items-center', 'bg-black text-white dark:bg-white dark:text-black', 'group-data-[active=true]:bg-fd-primary group-data-[active=true]:text-white dark:group-data-[active=true]:text-black', 'font-medium text-xs'), style: {
 +                    left: lineOffsetWithinItem - CIRCLE_RADIUS_PX,
 +                    top: '50%',
 +                    transform: 'translateY(-50%)',
-+                }, children: stepNumber })), _jsx("span", { style: {
-+                    position: 'relative',
-+                    zIndex: 1,
-+                    // marginLeft: isStep ? lineOffsetWithinItem : undefined,
-+                }, children: item.title })] }));
++                }, children: stepNumber })), _jsx("span", { style: { position: 'relative', zIndex: 1 }, children: resolvedContent })] }));
  }

package/src/mdx/blog/async-architecture.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/index.mdx

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

package/src/mdx/blog/ioc.mdx

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