Design Patterns

const storeRef = useRef<AppStore>(undefined);
if (!storeRef.current) {
  // Create the store instance the first time this renders
  storeRef.current = makeStore();
}

const [store] = useState(() => makeStore());

import { PrismaClient } from "../app/generated/prisma/client";
import { PrismaPg } from "@prisma/adapter-pg";

const globalForPrisma = global as unknown as {
  prisma: PrismaClient;
};

const adapter = new PrismaPg({
  connectionString: process.env.DATABASE_URL,
});

// *关键代码在这里
const prisma =
  globalForPrisma.prisma ??
  new PrismaClient({
    adapter,
  });

if (process.env.NODE_ENV !== "production") globalForPrisma.prisma = prisma;

export default prisma;

import { z } from "zod";

// 1. 策略接口 (The Interface)
// 所有的登录策略都必须遵守这个协议
export interface AuthStrategy {
  name: string;
  authenticate(
    formData: FormData,
  ): Promise<{ success: boolean; userId?: string }>;
}

// 2. 具体策略 (Concrete Strategies)

// 策略 A: 邮箱密码登录
export const emailStrategy: AuthStrategy = {
  name: "email",
  async authenticate(formData) {
    const email = formData.get("email");
    const password = formData.get("password");
    // 模拟数据库验证逻辑
    if (email === "[email protected]" && password === "123456") {
      return { success: true, userId: "user_01" };
    }
    return { success: false };
  },
};

// 策略 B: Google OAuth (模拟)
export const googleStrategy: AuthStrategy = {
  name: "google",
  async authenticate(formData) {
    const idToken = formData.get("id_token");
    // 模拟 Google Token 验证
    if (idToken) {
      return { success: true, userId: "google_user_123" };
    }
    return { success: false };
  },
};

// 策略 C: Github OAuth (模拟)
export const githubStrategy: AuthStrategy = {
  name: "github",
  async authenticate(formData) {
    // ... Github 验证逻辑
    return { success: true, userId: "github_user_456" };
  },
};

"use server";

import {
  emailStrategy,
  googleStrategy,
  githubStrategy,
  type AuthStrategy,
} from "@/lib/auth/strategies";
import { cookies } from "next/headers";
import { redirect } from "next/navigation";

// 3. 策略注册表 (The Registry)
// 使用 Record 来管理策略，避免 switch-case
const strategies: Record<string, AuthStrategy> = {
  email: emailStrategy,
  google: googleStrategy,
  github: githubStrategy,
};

// 4. 调用方 (The Client)
export async function loginAction(formData: FormData) {
  const type = formData.get("type") as string;

  // *关键代码：动态匹配策略
  const strategy = strategies[type];

  if (!strategy) {
    throw new Error(`Unsupported login type: ${type}`);
  }

  // 执行策略，主流程无需关心具体是哪种实现
  const result = await strategy.authenticate(formData);

  if (result.success) {
    cookies().set("session", result.userId!);
    redirect("/dashboard");
  } else {
    return { error: "Authentication failed" };
  }
}

import { HeroSection } from "@/components/hero-section";
import { FeatureList } from "@/components/feature-list";
import { CallToAction } from "@/components/cta";
import { EmptyBlock } from "@/components/empty-block";

// 1. 定义组件映射表 (The Registry)
// 这就像是工厂的“生产目录”
const BLOCK_COMPONENTS: Record<string, React.ComponentType<any>> = {
  hero_section: HeroSection,
  feature_list: FeatureList,
  cta_button: CallToAction,
};

interface BlockData {
  id: string;
  type: string; // CMS 返回的区块类型标识
  data: any; // 区块的具体数据
}

// 2. 组件工厂函数 (The Factory Component)
export function BlockFactory({ block }: { block: BlockData }) {
  // 根据类型查找组件
  const Component = BLOCK_COMPONENTS[block.type];

  // 处理未知类型的“容错生产”
  if (!Component) {
    console.warn(`Unknown block type: ${block.type}`);
    return <EmptyBlock type={block.type} />;
  }

  // 生产组件实例
  return <Component key={block.id} {...block.data} />;
}

import { BlockFactory } from "@/components/block-factory";

async function getPageContent() {
  // 模拟从 CMS 获取的数据
  return [
    { id: "1", type: "hero_section", data: { title: "Hello Factory" } },
    { id: "2", type: "feature_list", data: { items: ["A", "B"] } },
    { id: "3", type: "unknown_type", data: {} }, // 测试容错
  ];
}

export default async function Page() {
  const blocks = await getPageContent();

  return (
    <main>
      {blocks.map((block) => (
        // 把渲染任务全权委托给工厂
        <BlockFactory key={block.id} block={block} />
      ))}
    </main>
  );
}

import { NextResponse } from "next/server";

// 错误响应工厂
export class ApiResponseFactory {
  static success(data: any, status = 200) {
    return NextResponse.json(
      {
        success: true,
        data,
        timestamp: new Date().toISOString(),
      },
      { status },
    );
  }

  static error(message: string, code: string, status = 400) {
    return NextResponse.json(
      {
        success: false,
        error: { code, message },
        timestamp: new Date().toISOString(),
      },
      { status },
    );
  }

  // 具体的工厂方法：未授权错误
  static unauthorized(message = "Unauthorized access") {
    return this.error(message, "AUTH_ERROR", 401);
  }

  // 具体的工厂方法：未找到资源
  static notFound(resource = "Resource") {
    return this.error(`${resource} not found`, "NOT_FOUND", 404);
  }
}

import { ApiResponseFactory } from "@/lib/api/response-factory";

export async function GET(request: Request) {
  const session = null; // 模拟无权限

  if (!session) {
    // 语义清晰，且无需关心底层 JSON 结构
    return ApiResponseFactory.unauthorized();
  }

  return ApiResponseFactory.success({ user: "Sawana" });
}

// 1. Target Interface (客户端期望的旧版本 2023)
interface OrderV2023 {
  id: string;
  charge_amount: number; // 单位: 分
  created: number; // timestamp
}

// 2. Adaptee Interface (系统内部的新版本 2025)
interface OrderV2025 {
  id: string;
  payment_intent: {
    amount_decimal: string; // 精度更高的字符串
    currency: string;
  };
  created_at: Date; // Date 对象
}

/**
 * Transformer: 将新版数据结构 适配为 旧版数据结构
 * 这里的核心是单纯的数据映射，不包含业务副作用
 */
export function transformToV2023(order: OrderV2025): OrderV2023 {
  return {
    id: order.id,
    // 转换金额格式：String -> Number
    charge_amount: parseInt(order.payment_intent.amount_decimal, 10),
    // 转换时间格式：Date -> Timestamp
    created: Math.floor(order.created_at.getTime() / 1000),
  };
}

import { transformToV2023 } from "@/lib/adapters/order-transformer";

export async function GET(request: Request) {
  const version = request.headers.get("stripe-version");

  // 模拟获取系统内部最新数据 (V2025)
  const currentOrder = await db.order.findFirst();

  if (version === "2023-08-16") {
    // 应用适配器，返回旧版结构
    return Response.json(transformToV2023(currentOrder));
  }

  // 默认返回最新结构
  return Response.json(currentOrder);
}

import { NextResponse } from "next/server";
import type { NextRequest } from "next/server";

// 这就是一个宏观的代理函数
export function middleware(request: NextRequest) {
  // 1. 前置拦截逻辑 (Pre-processing)
  const token = request.cookies.get("auth_token");

  if (!token) {
    // 控制访问：拒绝请求并重定向
    return NextResponse.redirect(new URL("/login", request.url));
  }

  // 2. 增强请求 (Enhancement)
  // 比如给请求头加一个追踪 ID
  const response = NextResponse.next();
  response.headers.set("x-trace-id", crypto.randomUUID());

  // 3. 放行 (Forwarding)
  return response;
}

export const config = {
  matcher: "/dashboard/:path*",
};

type FetchFn = typeof fetch;

// 目标对象：原始的 fetch 函数
const originalFetch: FetchFn = fetch;

// 创建代理处理器 (Handler)
const fetchHandler: ProxyHandler<FetchFn> = {
  // 拦截函数调用 (Traps)
  apply: async function (target, thisArg, argumentsList) {
    const [url, config] = argumentsList;

    // 1. 前置增强：自动注入 Authorization Header
    const enhancedConfig: RequestInit = {
      ...config,
      headers: {
        ...config?.headers,
        Authorization: `Bearer ${process.env.API_SECRET_KEY}`,
        "Content-Type": "application/json",
      },
    };

    console.log(`[Proxy Log] Requesting: ${url}`);

    try {
      // 2. 透传调用：执行原始 fetch
      const response = await target.apply(thisArg, [url, enhancedConfig]);

      // 3. 后置增强：统一错误检查
      if (!response.ok) {
        console.error(`[Proxy Error] ${response.status} on ${url}`);
        // 可以在这里抛出自定义错误工厂生成的 Error
      }

      return response;
    } catch (error) {
      // 异常捕获
      console.error("[Proxy Network Fail]", error);
      throw error;
    }
  },
};

// 创建代理实例
// 使用时，apiClient 就和 fetch 一模一样，但自带神力
export const apiClient = new Proxy(originalFetch, fetchHandler);

"use server";
import { apiClient } from "@/lib/api-client-proxy";

export async function getData() {
  // 看起来像普通 fetch，实际上已经经过了 Proxy 的处理
  // 自动带上了 Token，且会有日志输出
  const res = await apiClient("https://api.example.com/data");
  return res.json();
}