+```
+
+### 3. 配置开发环境
+
+```javascript
+// tailwind.config.js - 开发配置
+module.exports = {
+ // 开发模式下禁用清除以便调试
+ content: process.env.NODE_ENV === 'production'
+ ? ['./src/**/*.{html,js,ts,jsx,tsx,astro}']
+ : [],
+
+ theme: {
+ extend: {
+ // 开发时添加调试断点
+ screens: {
+ 'debug': '1px',
+ }
+ }
+ }
+}
+```
+
+## 结论
+
+Tailwind CSS 提供了一个强大而灵活的方式来构建现代用户界面。通过遵循这些最佳实践：
+
+- 使用实用优先的方法进行快速原型设计
+- 实现一致的设计系统
+- 优化性能和可访问性
+- 利用响应式设计原则
+- 正确实现暗模式支持
+
+你将能够创建美观、高性能且易于维护的用户界面。记住，Tailwind CSS 的真正力量在于它的可定制性和与现代开发工作流的无缝集成。
+
+---
+
+*准备深入了解更多？查看我们关于高级 CSS 动画和微交互的指南。*
\ No newline at end of file
diff --git a/src/pages/zh/blog/posts/scaling-nodejs-docker.md b/src/pages/zh/blog/posts/scaling-nodejs-docker.md
new file mode 100644
index 0000000..1f0fbe0
--- /dev/null
+++ b/src/pages/zh/blog/posts/scaling-nodejs-docker.md
@@ -0,0 +1,559 @@
+---
+title: "使用 Docker 扩展 Node.js 应用"
+description: "学习如何使用 Docker 容器化 Node.js 应用程序，实现生产环境中的无缝部署和可扩展性。"
+image: "https://images.unsplash.com/photo-1605745341112-85968b19335b?w=400&h=250&fit=crop&crop=center"
+date: "2025年4月25日"
+readTime: "7分钟阅读"
+tags: ["Node.js", "Docker", "DevOps"]
+slug: "scaling-nodejs-docker"
+layout: "../../../../layouts/BlogLayout.astro"
+---
+
+# 使用 Docker 扩展 Node.js 应用
+
+
+
+Docker 彻底改变了我们部署和扩展应用程序的方式。当与 Node.js 结合使用时，它提供了一个强大的平台来构建可扩展、可维护的应用程序。在本指南中，我们将探索如何容器化 Node.js 应用程序并有效地扩展它们。
+
+## 为什么为 Node.js 选择 Docker？
+
+Docker 为 Node.js 应用程序提供了几个优势：
+
+- **一致性**：开发、测试和生产环境保持一致
+- **隔离性**：应用程序在隔离的容器中运行
+- **可扩展性**：通过容器编排轻松实现水平扩展
+- **可移植性**：在任何支持 Docker 的地方运行
+- **资源效率**：相比虚拟机更轻量级
+
+## 为 Node.js 创建 Dockerfile
+
+让我们从一个基本的 Node.js 应用程序开始，创建一个 Dockerfile：
+
+```dockerfile
+# 使用官方 Node.js 运行时作为基础镜像
+FROM node:18-alpine
+
+# 设置容器内的工作目录
+WORKDIR /usr/src/app
+
+# 复制 package.json 和 package-lock.json（如果可用）
+COPY package*.json ./
+
+# 安装依赖
+RUN npm ci --only=production
+
+# 复制应用程序代码的其余部分
+COPY . .
+
+# 创建非 root 用户来运行应用程序
+RUN addgroup -g 1001 -S nodejs
+RUN adduser -S nextjs -u 1001
+
+# 将应用目录的所有权更改为 nodejs 用户
+RUN chown -R nextjs:nodejs /usr/src/app
+USER nextjs
+
+# 暴露应用程序运行的端口
+EXPOSE 3000
+
+# 定义运行应用程序的命令
+CMD ["node", "server.js"]
+```
+
+## 多阶段构建优化
+
+对于生产应用程序，使用多阶段构建来减少镜像大小：
+
+```dockerfile
+# 构建阶段
+FROM node:18-alpine AS builder
+
+WORKDIR /usr/src/app
+
+# 复制包文件
+COPY package*.json ./
+
+# 安装所有依赖（包括 devDependencies）
+RUN npm ci
+
+# 复制源代码
+COPY . .
+
+# 构建应用程序（如果有构建步骤）
+RUN npm run build
+
+# 生产阶段
+FROM node:18-alpine AS production
+
+WORKDIR /usr/src/app
+
+# 复制包文件
+COPY package*.json ./
+
+# 只安装生产依赖
+RUN npm ci --only=production && npm cache clean --force
+
+# 从构建阶段复制构建的应用程序
+COPY --from=builder /usr/src/app/dist ./dist
+COPY --from=builder /usr/src/app/server.js ./
+
+# 创建非 root 用户
+RUN addgroup -g 1001 -S nodejs
+RUN adduser -S nextjs -u 1001
+RUN chown -R nextjs:nodejs /usr/src/app
+USER nextjs
+
+EXPOSE 3000
+
+CMD ["node", "server.js"]
+```
+
+## 开发环境的 Docker Compose
+
+使用 Docker Compose 管理你的开发环境：
+
+```yaml
+# docker-compose.yml
+version: '3.8'
+
+services:
+ app:
+ build: .
+ ports:
+ - "3000:3000"
+ volumes:
+ - .:/usr/src/app
+ - /usr/src/app/node_modules
+ environment:
+ - NODE_ENV=development
+ - DATABASE_URL=mongodb://mongo:27017/myapp
+ depends_on:
+ - mongo
+ - redis
+ command: npm run dev
+
+ mongo:
+ image: mongo:5.0
+ ports:
+ - "27017:27017"
+ volumes:
+ - mongo_data:/data/db
+ environment:
+ - MONGO_INITDB_ROOT_USERNAME=admin
+ - MONGO_INITDB_ROOT_PASSWORD=password
+
+ redis:
+ image: redis:7-alpine
+ ports:
+ - "6379:6379"
+ volumes:
+ - redis_data:/data
+
+volumes:
+ mongo_data:
+ redis_data:
+```
+
+## 使用 Docker Swarm 进行生产部署
+
+对于生产扩展，使用 Docker Swarm 或 Kubernetes。这里是一个 Docker Swarm 示例：
+
+```yaml
+# docker-compose.prod.yml
+version: '3.8'
+
+services:
+ app:
+ image: myapp:latest
+ deploy:
+ replicas: 3
+ restart_policy:
+ condition: on-failure
+ delay: 5s
+ max_attempts: 3
+ update_config:
+ parallelism: 1
+ delay: 10s
+ failure_action: rollback
+ resources:
+ limits:
+ cpus: '0.5'
+ memory: 512M
+ reservations:
+ cpus: '0.25'
+ memory: 256M
+ ports:
+ - "3000:3000"
+ environment:
+ - NODE_ENV=production
+ - DATABASE_URL=mongodb://mongo:27017/myapp
+ networks:
+ - app-network
+ depends_on:
+ - mongo
+
+ mongo:
+ image: mongo:5.0
+ deploy:
+ replicas: 1
+ restart_policy:
+ condition: on-failure
+ volumes:
+ - mongo_data:/data/db
+ networks:
+ - app-network
+ environment:
+ - MONGO_INITDB_ROOT_USERNAME=admin
+ - MONGO_INITDB_ROOT_PASSWORD=password
+
+ nginx:
+ image: nginx:alpine
+ deploy:
+ replicas: 1
+ restart_policy:
+ condition: on-failure
+ ports:
+ - "80:80"
+ - "443:443"
+ volumes:
+ - ./nginx.conf:/etc/nginx/nginx.conf
+ - ./ssl:/etc/nginx/ssl
+ networks:
+ - app-network
+ depends_on:
+ - app
+
+volumes:
+ mongo_data:
+ external: true
+
+networks:
+ app-network:
+ driver: overlay
+```
+
+## 健康检查和监控
+
+在你的 Dockerfile 中添加健康检查：
+
+```dockerfile
+# 添加到你的 Dockerfile
+HEALTHCHECK --interval=30s --timeout=3s --start-period=5s --retries=3 \
+ CMD node healthcheck.js
+```
+
+创建一个简单的健康检查脚本：
+
+```javascript
+// healthcheck.js
+const http = require('http');
+
+const options = {
+ host: 'localhost',
+ port: 3000,
+ path: '/health',
+ timeout: 2000
+};
+
+const request = http.request(options, (res) => {
+ console.log(`状态: ${res.statusCode}`);
+ if (res.statusCode === 200) {
+ process.exit(0);
+ } else {
+ process.exit(1);
+ }
+});
+
+request.on('error', (err) => {
+ console.log('错误:', err);
+ process.exit(1);
+});
+
+request.end();
+```
+
+## 性能优化技巧
+
+### 1. 使用 .dockerignore
+
+创建一个 `.dockerignore` 文件来排除不必要的文件：
+
+```
+node_modules
+npm-debug.log
+.git
+.gitignore
+README.md
+.env
+.nyc_output
+coverage
+.cache
+```
+
+### 2. 优化层缓存
+
+在你的 Dockerfile 中排序命令以最大化缓存效率：
+
+```dockerfile
+# 首先复制包文件（变化频率较低）
+COPY package*.json ./
+RUN npm ci --only=production
+
+# 最后复制源代码（变化频率较高）
+COPY . .
+```
+
+### 3. 使用 Alpine 镜像
+
+Alpine Linux 镜像要小得多：
+
+```dockerfile
+FROM node:18-alpine # ~40MB
+# vs
+FROM node:18 # ~350MB
+```
+
+### 4. 实现优雅关闭
+
+```javascript
+// server.js
+const express = require('express');
+const app = express();
+const server = require('http').createServer(app);
+
+// 你的应用路由
+app.get('/', (req, res) => {
+ res.send('Hello World!');
+});
+
+app.get('/health', (req, res) => {
+ res.status(200).send('OK');
+});
+
+const PORT = process.env.PORT || 3000;
+server.listen(PORT, () => {
+ console.log(`服务器运行在端口 ${PORT}`);
+});
+
+// 优雅关闭
+process.on('SIGTERM', () => {
+ console.log('收到 SIGTERM，正在优雅关闭');
+ server.close(() => {
+ console.log('进程已终止');
+ process.exit(0);
+ });
+});
+
+process.on('SIGINT', () => {
+ console.log('收到 SIGINT，正在优雅关闭');
+ server.close(() => {
+ console.log('进程已终止');
+ process.exit(0);
+ });
+});
+```
+
+## 监控和日志记录
+
+使用结构化日志记录和监控：
+
+```javascript
+// logger.js
+const winston = require('winston');
+
+const logger = winston.createLogger({
+ level: 'info',
+ format: winston.format.combine(
+ winston.format.timestamp(),
+ winston.format.errors({ stack: true }),
+ winston.format.json()
+ ),
+ transports: [
+ new winston.transports.Console({
+ format: winston.format.combine(
+ winston.format.colorize(),
+ winston.format.simple()
+ )
+ })
+ ]
+});
+
+module.exports = logger;
+```
+
+## 安全最佳实践
+
+### 1. 使用非 root 用户
+
+```dockerfile
+# 创建专用用户
+RUN addgroup -g 1001 -S nodejs
+RUN adduser -S nextjs -u 1001
+
+# 切换到非 root 用户
+USER nextjs
+```
+
+### 2. 扫描漏洞
+
+```bash
+# 使用 Docker 安全扫描
+docker scan myapp:latest
+
+# 使用 Snyk 扫描
+npx snyk test --docker myapp:latest
+```
+
+### 3. 使用多阶段构建移除开发依赖
+
+```dockerfile
+# 确保生产镜像中没有开发依赖
+RUN npm ci --only=production
+```
+
+## 容器编排策略
+
+### 1. 负载均衡配置
+
+```nginx
+# nginx.conf
+upstream app {
+ server app:3000;
+}
+
+server {
+ listen 80;
+
+ location / {
+ proxy_pass http://app;
+ proxy_set_header Host $host;
+ proxy_set_header X-Real-IP $remote_addr;
+ proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+ proxy_set_header X-Forwarded-Proto $scheme;
+ }
+
+ location /health {
+ access_log off;
+ proxy_pass http://app/health;
+ }
+}
+```
+
+### 2. 环境变量管理
+
+```yaml
+# docker-compose.yml
+services:
+ app:
+ environment:
+ - NODE_ENV=${NODE_ENV:-production}
+ - DATABASE_URL=${DATABASE_URL}
+ - REDIS_URL=${REDIS_URL}
+ - JWT_SECRET=${JWT_SECRET}
+ env_file:
+ - .env.production
+```
+
+### 3. 数据持久化
+
+```yaml
+services:
+ mongo:
+ volumes:
+ - mongo_data:/data/db
+ - ./mongo-init:/docker-entrypoint-initdb.d
+
+volumes:
+ mongo_data:
+ driver: local
+ driver_opts:
+ type: none
+ o: bind
+ device: /opt/myapp/data
+```
+
+## 部署和 CI/CD 集成
+
+### 1. GitHub Actions 工作流
+
+```yaml
+# .github/workflows/deploy.yml
+name: Build and Deploy
+
+on:
+ push:
+ branches: [main]
+
+jobs:
+ build:
+ runs-on: ubuntu-latest
+
+ steps:
+ - uses: actions/checkout@v2
+
+ - name: Build Docker image
+ run: docker build -t myapp:${{ github.sha }} .
+
+ - name: Run tests
+ run: docker run --rm myapp:${{ github.sha }} npm test
+
+ - name: Push to registry
+ run: |
+ echo ${{ secrets.DOCKER_PASSWORD }} | docker login -u ${{ secrets.DOCKER_USERNAME }} --password-stdin
+ docker push myapp:${{ github.sha }}
+
+ - name: Deploy to production
+ run: |
+ docker service update --image myapp:${{ github.sha }} production_app
+```
+
+## 故障排除和调试
+
+### 1. 容器日志
+
+```bash
+# 查看容器日志
+docker logs -f container_name
+
+# 查看服务日志（Swarm）
+docker service logs -f service_name
+```
+
+### 2. 进入运行中的容器
+
+```bash
+# 进入容器进行调试
+docker exec -it container_name sh
+
+# 检查容器资源使用
+docker stats container_name
+```
+
+### 3. 网络调试
+
+```bash
+# 检查网络连接
+docker network ls
+docker network inspect network_name
+
+# 测试容器间连接
+docker exec container1 ping container2
+```
+
+## 结论
+
+Docker 为扩展 Node.js 应用程序提供了一个强大的平台。通过遵循这些最佳实践：
+
+- 使用多阶段构建优化生产镜像
+- 实现适当的健康检查和优雅关闭
+- 使用 Docker Compose 进行开发环境
+- 利用 Docker Swarm 或 Kubernetes 等编排工具进行生产
+- 正确监控和记录你的应用程序
+
+你将能够构建强大、可扩展的 Node.js 应用程序，能够高效地处理生产工作负载。
+
+记住，容器化只是可扩展架构的一部分。考虑实现负载均衡、缓存策略和数据库优化以实现完整的可扩展性。
+
+---
+
+*准备部署了吗？查看我们关于 Kubernetes 部署策略的指南，了解更高级的扩展技术。*
\ No newline at end of file
diff --git a/src/pages/zh/blog/posts/typescript-best-practices.md b/src/pages/zh/blog/posts/typescript-best-practices.md
new file mode 100644
index 0000000..1d98b69
--- /dev/null
+++ b/src/pages/zh/blog/posts/typescript-best-practices.md
@@ -0,0 +1,1142 @@
+---
+title: "TypeScript 在大型项目中的最佳实践"
+description: "掌握 TypeScript 在企业级应用中的高级技巧，提升代码质量、可维护性和团队协作效率。"
+image: "https://images.unsplash.com/photo-1516116216624-53e697fedbea?w=400&h=250&fit=crop&crop=center"
+date: "2025年4月15日"
+readTime: "8分钟阅读"
+tags: ["TypeScript", "架构", "最佳实践"]
+slug: "typescript-best-practices"
+layout: "../../../../layouts/BlogLayout.astro"
+---
+
+# TypeScript 在大型项目中的最佳实践
+
+
+
+TypeScript 已经成为现代 JavaScript 开发的标准选择，特别是在大型项目中。它提供了静态类型检查、更好的 IDE 支持和增强的代码可维护性。在本指南中，我们将探索在企业级应用中使用 TypeScript 的最佳实践。
+
+## 为什么在大型项目中选择 TypeScript？
+
+TypeScript 为大型项目带来了显著优势：
+
+- **类型安全**：在编译时捕获错误，减少运行时问题
+- **更好的重构支持**：IDE 可以安全地重命名和移动代码
+- **增强的 IntelliSense**：更准确的代码补全和文档
+- **团队协作**：类型作为代码文档，提高团队沟通效率
+- **渐进式采用**：可以逐步从 JavaScript 迁移
+
+## 项目结构和配置
+
+### 1. 推荐的项目结构
+
+```
+src/
+├── components/ # 可重用组件
+│ ├── ui/ # 基础 UI 组件
+│ ├── forms/ # 表单组件
+│ └── layout/ # 布局组件
+├── pages/ # 页面组件
+├── hooks/ # 自定义 Hooks
+├── services/ # API 服务
+├── utils/ # 工具函数
+├── types/ # 类型定义
+│ ├── api.ts # API 相关类型
+│ ├── common.ts # 通用类型
+│ └── index.ts # 类型导出
+├── constants/ # 常量定义
+├── store/ # 状态管理
+└── __tests__/ # 测试文件
+```
+
+### 2. TypeScript 配置优化
+
+```json
+// tsconfig.json
+{
+ "compilerOptions": {
+ "target": "ES2022",
+ "lib": ["ES2022", "DOM", "DOM.Iterable"],
+ "module": "ESNext",
+ "moduleResolution": "bundler",
+ "allowImportingTsExtensions": true,
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "noEmit": true,
+ "jsx": "react-jsx",
+
+ // 严格类型检查
+ "strict": true,
+ "noUnusedLocals": true,
+ "noUnusedParameters": true,
+ "exactOptionalPropertyTypes": true,
+ "noImplicitReturns": true,
+ "noFallthroughCasesInSwitch": true,
+ "noUncheckedIndexedAccess": true,
+ "noImplicitOverride": true,
+
+ // 路径映射
+ "baseUrl": ".",
+ "paths": {
+ "@/*": ["./src/*"],
+ "@/components/*": ["./src/components/*"],
+ "@/types/*": ["./src/types/*"],
+ "@/utils/*": ["./src/utils/*"],
+ "@/services/*": ["./src/services/*"]
+ },
+
+ // 其他有用选项
+ "skipLibCheck": true,
+ "allowSyntheticDefaultImports": true,
+ "esModuleInterop": true,
+ "forceConsistentCasingInFileNames": true
+ },
+ "include": [
+ "src/**/*",
+ "**/*.ts",
+ "**/*.tsx"
+ ],
+ "exclude": [
+ "node_modules",
+ "dist",
+ "build"
+ ]
+}
+```
+
+### 3. ESLint 和 Prettier 集成
+
+```json
+// .eslintrc.json
+{
+ "extends": [
+ "@typescript-eslint/recommended",
+ "@typescript-eslint/recommended-requiring-type-checking"
+ ],
+ "parser": "@typescript-eslint/parser",
+ "parserOptions": {
+ "project": "./tsconfig.json"
+ },
+ "plugins": ["@typescript-eslint"],
+ "rules": {
+ "@typescript-eslint/no-unused-vars": "error",
+ "@typescript-eslint/no-explicit-any": "warn",
+ "@typescript-eslint/explicit-function-return-type": "warn",
+ "@typescript-eslint/no-non-null-assertion": "warn",
+ "@typescript-eslint/prefer-nullish-coalescing": "error",
+ "@typescript-eslint/prefer-optional-chain": "error"
+ }
+}
+```
+
+## 类型定义最佳实践
+
+### 1. 创建强类型的 API 接口
+
+```typescript
+// types/api.ts
+
+// 基础响应类型
+interface ApiResponse
{
+ data: T;
+ message: string;
+ success: boolean;
+ timestamp: string;
+}
+
+// 分页响应类型
+interface PaginatedResponse extends ApiResponse {
+ pagination: {
+ page: number;
+ limit: number;
+ total: number;
+ totalPages: number;
+ };
+}
+
+// 用户相关类型
+interface User {
+ readonly id: string;
+ email: string;
+ name: string;
+ avatar?: string;
+ role: UserRole;
+ createdAt: string;
+ updatedAt: string;
+}
+
+type UserRole = 'admin' | 'user' | 'moderator';
+
+// 创建用户请求类型
+type CreateUserRequest = Omit & {
+ password: string;
+};
+
+// 更新用户请求类型
+type UpdateUserRequest = Partial>;
+
+// 用户查询参数
+interface UserQueryParams {
+ page?: number;
+ limit?: number;
+ search?: string;
+ role?: UserRole;
+ sortBy?: keyof Pick;
+ sortOrder?: 'asc' | 'desc';
+}
+
+// API 端点类型
+interface UserApiEndpoints {
+ getUsers: (params?: UserQueryParams) => Promise>;
+ getUser: (id: string) => Promise>;
+ createUser: (data: CreateUserRequest) => Promise>;
+ updateUser: (id: string, data: UpdateUserRequest) => Promise>;
+ deleteUser: (id: string) => Promise>;
+}
+```
+
+### 2. 使用联合类型和字面量类型
+
+```typescript
+// types/common.ts
+
+// 状态管理
+type LoadingState = 'idle' | 'loading' | 'success' | 'error';
+
+interface AsyncState {
+ data: T | null;
+ status: LoadingState;
+ error: string | null;
+}
+
+// 表单状态
+type FormFieldError = string | null;
+
+interface FormField {
+ value: T;
+ error: FormFieldError;
+ touched: boolean;
+ dirty: boolean;
+}
+
+type FormState> = {
+ [K in keyof T]: FormField;
+} & {
+ isValid: boolean;
+ isSubmitting: boolean;
+ submitCount: number;
+};
+
+// 主题系统
+type ThemeMode = 'light' | 'dark' | 'system';
+
+interface ThemeConfig {
+ mode: ThemeMode;
+ primaryColor: string;
+ fontSize: 'small' | 'medium' | 'large';
+ borderRadius: 'none' | 'small' | 'medium' | 'large';
+}
+
+// 权限系统
+type Permission =
+ | 'user:read'
+ | 'user:write'
+ | 'user:delete'
+ | 'admin:read'
+ | 'admin:write'
+ | 'content:read'
+ | 'content:write'
+ | 'content:publish';
+
+type RolePermissions = {
+ [K in UserRole]: Permission[];
+};
+
+// 事件系统
+interface BaseEvent {
+ type: string;
+ timestamp: number;
+ userId?: string;
+}
+
+interface UserLoginEvent extends BaseEvent {
+ type: 'user:login';
+ email: string;
+ ipAddress: string;
+}
+
+interface UserLogoutEvent extends BaseEvent {
+ type: 'user:logout';
+ sessionDuration: number;
+}
+
+interface ContentCreatedEvent extends BaseEvent {
+ type: 'content:created';
+ contentId: string;
+ contentType: 'post' | 'comment' | 'page';
+}
+
+type AppEvent = UserLoginEvent | UserLogoutEvent | ContentCreatedEvent;
+```
+
+### 3. 高级类型模式
+
+```typescript
+// types/advanced.ts
+
+// 条件类型
+type NonNullable = T extends null | undefined ? never : T;
+
+// 映射类型
+type Optional = Omit & Partial>;
+type Required = T & Required>;
+
+// 深度只读
+type DeepReadonly = {
+ readonly [P in keyof T]: T[P] extends object ? DeepReadonly : T[P];
+};
+
+// 深度部分
+type DeepPartial = {
+ [P in keyof T]?: T[P] extends object ? DeepPartial : T[P];
+};
+
+// 函数重载类型
+interface ApiClient {
+ get(url: string): Promise;
+ get(url: string, config: RequestConfig): Promise;
+ post(url: string, data: D): Promise;
+ post(url: string, data: D, config: RequestConfig): Promise;
+}
+
+// 品牌类型（Branded Types）
+type Brand = T & { __brand: B };
+
+type UserId = Brand;
+type Email = Brand;
+type Timestamp = Brand;
+
+// 类型守卫
+function isUserId(value: string): value is UserId {
+ return /^user_[a-zA-Z0-9]+$/.test(value);
+}
+
+function isEmail(value: string): value is Email {
+ return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);
+}
+
+// 模板字面量类型
+type EventName = `on${Capitalize}`;
+type CSSProperty = `--${string}`;
+type APIEndpoint = `/api/v${number}/${string}`;
+
+// 递归类型
+interface TreeNode {
+ value: T;
+ children?: TreeNode[];
+}
+
+type FlattenTree = T extends TreeNode
+ ? U | (T['children'] extends TreeNode[] ? FlattenTree : never)
+ : never;
+```
+
+## 错误处理模式
+
+### 1. 结果类型模式
+
+```typescript
+// utils/result.ts
+
+// Result 类型定义
+type Result = Success | Failure;
+
+interface Success {
+ success: true;
+ data: T;
+}
+
+interface Failure {
+ success: false;
+ error: E;
+}
+
+// Result 工具函数
+class ResultUtils {
+ static success(data: T): Success {
+ return { success: true, data };
+ }
+
+ static failure(error: E): Failure {
+ return { success: false, error };
+ }
+
+ static isSuccess(result: Result): result is Success {
+ return result.success;
+ }
+
+ static isFailure(result: Result): result is Failure {
+ return !result.success;
+ }
+
+ static map(
+ result: Result,
+ fn: (data: T) => U
+ ): Result {
+ return result.success
+ ? ResultUtils.success(fn(result.data))
+ : result;
+ }
+
+ static flatMap(
+ result: Result,
+ fn: (data: T) => Result
+ ): Result {
+ return result.success ? fn(result.data) : result;
+ }
+
+ static mapError(
+ result: Result,
+ fn: (error: E) => F
+ ): Result {
+ return result.success
+ ? result
+ : ResultUtils.failure(fn(result.error));
+ }
+}
+
+// 使用示例
+async function fetchUser(id: UserId): Promise> {
+ try {
+ const response = await api.get(`/users/${id}`);
+ return ResultUtils.success(response.data);
+ } catch (error) {
+ if (error instanceof ApiError) {
+ return ResultUtils.failure(error);
+ }
+ return ResultUtils.failure(new ApiError('Unknown error', 500));
+ }
+}
+
+// 错误类型定义
+class ApiError extends Error {
+ constructor(
+ message: string,
+ public statusCode: number,
+ public code?: string
+ ) {
+ super(message);
+ this.name = 'ApiError';
+ }
+}
+
+class ValidationError extends Error {
+ constructor(
+ message: string,
+ public field: string,
+ public value: any
+ ) {
+ super(message);
+ this.name = 'ValidationError';
+ }
+}
+```
+
+### 2. 异步错误处理
+
+```typescript
+// utils/async.ts
+
+// 安全的异步函数包装器
+type AsyncResult = Promise>;
+
+function safeAsync(
+ fn: () => Promise
+): AsyncResult {
+ return fn()
+ .then(data => ResultUtils.success(data))
+ .catch(error => ResultUtils.failure(error instanceof Error ? error : new Error(String(error))));
+}
+
+// 重试机制
+interface RetryOptions {
+ maxAttempts: number;
+ delay: number;
+ backoff?: 'linear' | 'exponential';
+}
+
+async function withRetry(
+ fn: () => Promise,
+ options: RetryOptions
+): Promise {
+ let lastError: Error;
+
+ for (let attempt = 1; attempt <= options.maxAttempts; attempt++) {
+ try {
+ return await fn();
+ } catch (error) {
+ lastError = error instanceof Error ? error : new Error(String(error));
+
+ if (attempt === options.maxAttempts) {
+ throw lastError;
+ }
+
+ const delay = options.backoff === 'exponential'
+ ? options.delay * Math.pow(2, attempt - 1)
+ : options.delay;
+
+ await new Promise(resolve => setTimeout(resolve, delay));
+ }
+ }
+
+ throw lastError!;
+}
+
+// 超时处理
+function withTimeout(
+ promise: Promise,
+ timeoutMs: number
+): Promise {
+ return Promise.race([
+ promise,
+ new Promise((_, reject) =>
+ setTimeout(() => reject(new Error('Operation timed out')), timeoutMs)
+ )
+ ]);
+}
+```
+
+## API 集成模式
+
+### 1. 类型安全的 API 客户端
+
+```typescript
+// services/api-client.ts
+
+interface RequestConfig {
+ headers?: Record;
+ timeout?: number;
+ retries?: number;
+}
+
+class ApiClient {
+ private baseURL: string;
+ private defaultHeaders: Record;
+
+ constructor(baseURL: string, defaultHeaders: Record = {}) {
+ this.baseURL = baseURL;
+ this.defaultHeaders = defaultHeaders;
+ }
+
+ private async request(
+ method: 'GET' | 'POST' | 'PUT' | 'DELETE',
+ endpoint: string,
+ data?: any,
+ config?: RequestConfig
+ ): Promise> {
+ try {
+ const url = `${this.baseURL}${endpoint}`;
+ const headers = { ...this.defaultHeaders, ...config?.headers };
+
+ const response = await fetch(url, {
+ method,
+ headers: {
+ 'Content-Type': 'application/json',
+ ...headers,
+ },
+ body: data ? JSON.stringify(data) : undefined,
+ signal: config?.timeout
+ ? AbortSignal.timeout(config.timeout)
+ : undefined,
+ });
+
+ if (!response.ok) {
+ const errorData = await response.json().catch(() => ({}));
+ return ResultUtils.failure(
+ new ApiError(
+ errorData.message || 'Request failed',
+ response.status,
+ errorData.code
+ )
+ );
+ }
+
+ const result = await response.json();
+ return ResultUtils.success(result);
+ } catch (error) {
+ return ResultUtils.failure(
+ error instanceof Error
+ ? new ApiError(error.message, 0)
+ : new ApiError('Unknown error', 0)
+ );
+ }
+ }
+
+ async get(endpoint: string, config?: RequestConfig): Promise> {
+ return this.request('GET', endpoint, undefined, config);
+ }
+
+ async post(
+ endpoint: string,
+ data: D,
+ config?: RequestConfig
+ ): Promise> {
+ return this.request('POST', endpoint, data, config);
+ }
+
+ async put(
+ endpoint: string,
+ data: D,
+ config?: RequestConfig
+ ): Promise> {
+ return this.request('PUT', endpoint, data, config);
+ }
+
+ async delete(endpoint: string, config?: RequestConfig): Promise> {
+ return this.request('DELETE', endpoint, undefined, config);
+ }
+}
+
+// API 服务实现
+class UserService {
+ constructor(private apiClient: ApiClient) {}
+
+ async getUsers(params?: UserQueryParams): Promise, ApiError>> {
+ const queryString = params ? new URLSearchParams(params as any).toString() : '';
+ const endpoint = `/users${queryString ? `?${queryString}` : ''}`;
+ return this.apiClient.get>(endpoint);
+ }
+
+ async getUser(id: UserId): Promise, ApiError>> {
+ return this.apiClient.get>(`/users/${id}`);
+ }
+
+ async createUser(data: CreateUserRequest): Promise, ApiError>> {
+ return this.apiClient.post, CreateUserRequest>('/users', data);
+ }
+
+ async updateUser(
+ id: UserId,
+ data: UpdateUserRequest
+ ): Promise, ApiError>> {
+ return this.apiClient.put, UpdateUserRequest>(`/users/${id}`, data);
+ }
+
+ async deleteUser(id: UserId): Promise, ApiError>> {
+ return this.apiClient.delete>(`/users/${id}`);
+ }
+}
+```
+
+### 2. 数据验证和转换
+
+```typescript
+// utils/validation.ts
+
+// 验证器类型
+type Validator = (value: unknown) => Result;
+
+// 基础验证器
+class Validators {
+ static string(): Validator {
+ return (value: unknown) => {
+ if (typeof value === 'string') {
+ return ResultUtils.success(value);
+ }
+ return ResultUtils.failure(
+ new ValidationError('Expected string', 'type', value)
+ );
+ };
+ }
+
+ static number(): Validator {
+ return (value: unknown) => {
+ if (typeof value === 'number' && !isNaN(value)) {
+ return ResultUtils.success(value);
+ }
+ return ResultUtils.failure(
+ new ValidationError('Expected number', 'type', value)
+ );
+ };
+ }
+
+ static email(): Validator {
+ return (value: unknown) => {
+ const stringResult = Validators.string()(value);
+ if (!stringResult.success) {
+ return stringResult;
+ }
+
+ if (isEmail(stringResult.data)) {
+ return ResultUtils.success(stringResult.data);
+ }
+
+ return ResultUtils.failure(
+ new ValidationError('Invalid email format', 'format', value)
+ );
+ };
+ }
+
+ static array(itemValidator: Validator): Validator {
+ return (value: unknown) => {
+ if (!Array.isArray(value)) {
+ return ResultUtils.failure(
+ new ValidationError('Expected array', 'type', value)
+ );
+ }
+
+ const results: T[] = [];
+ for (let i = 0; i < value.length; i++) {
+ const itemResult = itemValidator(value[i]);
+ if (!itemResult.success) {
+ return ResultUtils.failure(
+ new ValidationError(
+ `Invalid item at index ${i}: ${itemResult.error.message}`,
+ `[${i}]`,
+ value[i]
+ )
+ );
+ }
+ results.push(itemResult.data);
+ }
+
+ return ResultUtils.success(results);
+ };
+ }
+
+ static object>(
+ schema: { [K in keyof T]: Validator }
+ ): Validator {
+ return (value: unknown) => {
+ if (typeof value !== 'object' || value === null) {
+ return ResultUtils.failure(
+ new ValidationError('Expected object', 'type', value)
+ );
+ }
+
+ const obj = value as Record;
+ const result = {} as T;
+
+ for (const [key, validator] of Object.entries(schema)) {
+ const fieldResult = validator(obj[key]);
+ if (!fieldResult.success) {
+ return ResultUtils.failure(
+ new ValidationError(
+ `Invalid field '${key}': ${fieldResult.error.message}`,
+ key,
+ obj[key]
+ )
+ );
+ }
+ (result as any)[key] = fieldResult.data;
+ }
+
+ return ResultUtils.success(result);
+ };
+ }
+
+ static optional(validator: Validator): Validator {
+ return (value: unknown) => {
+ if (value === undefined) {
+ return ResultUtils.success(undefined);
+ }
+ return validator(value);
+ };
+ }
+}
+
+// 用户验证器
+const userValidator = Validators.object({
+ id: Validators.string(),
+ email: Validators.email(),
+ name: Validators.string(),
+ avatar: Validators.optional(Validators.string()),
+ role: (value: unknown) => {
+ if (typeof value === 'string' && ['admin', 'user', 'moderator'].includes(value)) {
+ return ResultUtils.success(value as UserRole);
+ }
+ return ResultUtils.failure(
+ new ValidationError('Invalid user role', 'role', value)
+ );
+ },
+ createdAt: Validators.string(),
+ updatedAt: Validators.string(),
+});
+```
+
+## 测试模式
+
+### 1. 类型安全的测试工具
+
+```typescript
+// __tests__/test-utils.ts
+
+// 测试数据工厂
+class TestDataFactory {
+ static createUser(overrides: Partial = {}): User {
+ return {
+ id: 'user_123' as UserId,
+ email: 'test@example.com' as Email,
+ name: 'Test User',
+ role: 'user',
+ createdAt: new Date().toISOString(),
+ updatedAt: new Date().toISOString(),
+ ...overrides,
+ };
+ }
+
+ static createApiResponse(data: T, overrides: Partial> = {}): ApiResponse {
+ return {
+ data,
+ message: 'Success',
+ success: true,
+ timestamp: new Date().toISOString(),
+ ...overrides,
+ };
+ }
+
+ static createPaginatedResponse(
+ items: T[],
+ overrides: Partial> = {}
+ ): PaginatedResponse {
+ return {
+ data: items,
+ message: 'Success',
+ success: true,
+ timestamp: new Date().toISOString(),
+ pagination: {
+ page: 1,
+ limit: 10,
+ total: items.length,
+ totalPages: Math.ceil(items.length / 10),
+ },
+ ...overrides,
+ };
+ }
+}
+
+// Mock API 客户端
+class MockApiClient implements ApiClient {
+ private responses = new Map();
+ private errors = new Map();
+
+ mockResponse(endpoint: string, response: T): void {
+ this.responses.set(endpoint, response);
+ }
+
+ mockError(endpoint: string, error: ApiError): void {
+ this.errors.set(endpoint, error);
+ }
+
+ async get(endpoint: string): Promise> {
+ if (this.errors.has(endpoint)) {
+ return ResultUtils.failure(this.errors.get(endpoint)!);
+ }
+
+ if (this.responses.has(endpoint)) {
+ return ResultUtils.success(this.responses.get(endpoint));
+ }
+
+ return ResultUtils.failure(new ApiError('Not mocked', 404));
+ }
+
+ async post(endpoint: string, data: D): Promise> {
+ return this.get(endpoint);
+ }
+
+ async put(endpoint: string, data: D): Promise> {
+ return this.get(endpoint);
+ }
+
+ async delete(endpoint: string): Promise> {
+ return this.get(endpoint);
+ }
+}
+
+// 类型安全的断言
+function assertSuccess(result: Result): asserts result is Success {
+ if (!result.success) {
+ throw new Error(`Expected success but got failure: ${result.error}`);
+ }
+}
+
+function assertFailure(result: Result): asserts result is Failure {
+ if (result.success) {
+ throw new Error(`Expected failure but got success: ${result.data}`);
+ }
+}
+```
+
+### 2. 组件测试示例
+
+```typescript
+// __tests__/UserService.test.ts
+
+import { describe, it, expect, beforeEach } from 'vitest';
+import { UserService } from '../services/UserService';
+import { MockApiClient, TestDataFactory, assertSuccess, assertFailure } from './test-utils';
+
+describe('UserService', () => {
+ let userService: UserService;
+ let mockApiClient: MockApiClient;
+
+ beforeEach(() => {
+ mockApiClient = new MockApiClient();
+ userService = new UserService(mockApiClient);
+ });
+
+ describe('getUser', () => {
+ it('should return user when API call succeeds', async () => {
+ // Arrange
+ const userId = 'user_123' as UserId;
+ const mockUser = TestDataFactory.createUser({ id: userId });
+ const mockResponse = TestDataFactory.createApiResponse(mockUser);
+
+ mockApiClient.mockResponse(`/users/${userId}`, mockResponse);
+
+ // Act
+ const result = await userService.getUser(userId);
+
+ // Assert
+ assertSuccess(result);
+ expect(result.data.data).toEqual(mockUser);
+ });
+
+ it('should return error when user not found', async () => {
+ // Arrange
+ const userId = 'user_nonexistent' as UserId;
+ const mockError = new ApiError('User not found', 404, 'USER_NOT_FOUND');
+
+ mockApiClient.mockError(`/users/${userId}`, mockError);
+
+ // Act
+ const result = await userService.getUser(userId);
+
+ // Assert
+ assertFailure(result);
+ expect(result.error.statusCode).toBe(404);
+ expect(result.error.code).toBe('USER_NOT_FOUND');
+ });
+ });
+
+ describe('createUser', () => {
+ it('should create user with valid data', async () => {
+ // Arrange
+ const createUserData: CreateUserRequest = {
+ email: 'new@example.com' as Email,
+ name: 'New User',
+ role: 'user',
+ password: 'securepassword123',
+ };
+
+ const createdUser = TestDataFactory.createUser({
+ email: createUserData.email,
+ name: createUserData.name,
+ role: createUserData.role,
+ });
+
+ const mockResponse = TestDataFactory.createApiResponse(createdUser);
+ mockApiClient.mockResponse('/users', mockResponse);
+
+ // Act
+ const result = await userService.createUser(createUserData);
+
+ // Assert
+ assertSuccess(result);
+ expect(result.data.data.email).toBe(createUserData.email);
+ expect(result.data.data.name).toBe(createUserData.name);
+ });
+ });
+});
+```
+
+## 性能优化
+
+### 1. 类型级别的优化
+
+```typescript
+// utils/performance.ts
+
+// 延迟加载类型
+type LazyComponent = () => Promise<{ default: T }>;
+
+// 缓存装饰器
+function memoize any>(
+ fn: T,
+ keyGenerator?: (...args: Parameters) => string
+): T {
+ const cache = new Map>();
+
+ return ((...args: Parameters): ReturnType => {
+ const key = keyGenerator ? keyGenerator(...args) : JSON.stringify(args);
+
+ if (cache.has(key)) {
+ return cache.get(key)!;
+ }
+
+ const result = fn(...args);
+ cache.set(key, result);
+ return result;
+ }) as T;
+}
+
+// 防抖装饰器
+function debounce any>(
+ fn: T,
+ delay: number
+): (...args: Parameters) => void {
+ let timeoutId: NodeJS.Timeout;
+
+ return (...args: Parameters) => {
+ clearTimeout(timeoutId);
+ timeoutId = setTimeout(() => fn(...args), delay);
+ };
+}
+
+// 节流装饰器
+function throttle any>(
+ fn: T,
+ limit: number
+): (...args: Parameters) => void {
+ let inThrottle: boolean;
+
+ return (...args: Parameters) => {
+ if (!inThrottle) {
+ fn(...args);
+ inThrottle = true;
+ setTimeout(() => inThrottle = false, limit);
+ }
+ };
+}
+
+// 类型安全的事件发射器
+class TypedEventEmitter> {
+ private listeners = new Map void>>();
+
+ on(event: K, listener: (...args: T[K]) => void): void {
+ if (!this.listeners.has(event)) {
+ this.listeners.set(event, new Set());
+ }
+ this.listeners.get(event)!.add(listener);
+ }
+
+ off(event: K, listener: (...args: T[K]) => void): void {
+ const eventListeners = this.listeners.get(event);
+ if (eventListeners) {
+ eventListeners.delete(listener);
+ }
+ }
+
+ emit(event: K, ...args: T[K]): void {
+ const eventListeners = this.listeners.get(event);
+ if (eventListeners) {
+ eventListeners.forEach(listener => listener(...args));
+ }
+ }
+
+ once(event: K, listener: (...args: T[K]) => void): void {
+ const onceListener = (...args: T[K]) => {
+ listener(...args);
+ this.off(event, onceListener);
+ };
+ this.on(event, onceListener);
+ }
+}
+
+// 使用示例
+interface AppEvents {
+ 'user:login': [User];
+ 'user:logout': [UserId];
+ 'data:updated': [string, any];
+}
+
+const eventEmitter = new TypedEventEmitter();
+
+// 类型安全的事件监听
+eventEmitter.on('user:login', (user) => {
+ console.log(`User ${user.name} logged in`);
+});
+
+eventEmitter.emit('user:login', TestDataFactory.createUser());
+```
+
+## 部署和构建优化
+
+### 1. 构建配置
+
+```json
+// package.json
+{
+ "scripts": {
+ "build": "tsc --noEmit && vite build",
+ "build:analyze": "npm run build && npx vite-bundle-analyzer",
+ "type-check": "tsc --noEmit",
+ "type-check:watch": "tsc --noEmit --watch",
+ "lint": "eslint src --ext .ts,.tsx",
+ "lint:fix": "eslint src --ext .ts,.tsx --fix",
+ "test": "vitest",
+ "test:coverage": "vitest --coverage",
+ "test:ui": "vitest --ui"
+ }
+}
+```
+
+### 2. CI/CD 配置
+
+```yaml
+# .github/workflows/ci.yml
+name: CI
+
+on:
+ push:
+ branches: [main, develop]
+ pull_request:
+ branches: [main]
+
+jobs:
+ test:
+ runs-on: ubuntu-latest
+
+ steps:
+ - uses: actions/checkout@v3
+
+ - name: Setup Node.js
+ uses: actions/setup-node@v3
+ with:
+ node-version: '18'
+ cache: 'npm'
+
+ - name: Install dependencies
+ run: npm ci
+
+ - name: Type check
+ run: npm run type-check
+
+ - name: Lint
+ run: npm run lint
+
+ - name: Test
+ run: npm run test:coverage
+
+ - name: Build
+ run: npm run build
+
+ - name: Upload coverage
+ uses: codecov/codecov-action@v3
+```
+
+## 结论
+
+TypeScript 在大型项目中的成功应用需要：
+
+- **严格的类型配置**：启用所有严格模式选项
+- **良好的项目结构**：清晰的文件组织和路径映射
+- **强类型的 API 集成**：使用 Result 类型和验证器
+- **全面的错误处理**：类型安全的错误处理模式
+- **高质量的测试**：类型安全的测试工具和模拟
+- **性能优化**：合理使用高级类型特性
+
+通过遵循这些最佳实践，你将能够构建可维护、可扩展且类型安全的大型 TypeScript 应用程序。记住，TypeScript 的真正价值在于它能够在开发时捕获错误，提高代码质量，并增强团队协作效率。
+
+---
+
+*想了解更多？查看我们关于 React 与 TypeScript 集成的深度指南。*
\ No newline at end of file
diff --git a/src/styles/global.css b/src/styles/global.css
index 7d37cb5..ecd03ad 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -1,5 +1,6 @@
@import "tailwindcss";
@import "tw-animate-css";
+@plugin "@tailwindcss/typography";
/* Blog List Component Styles */
.line-clamp-3 {
+
+ 
+