【web应用】设计模式图文学习详细设计
·
1. 概述
1.1 项目背景
本项目是一个 设计模式图文学习系统，旨在通过图文并茂的形式，帮助开发者系统化学习 23 种经典的 GoF 设计模式。系统以卡片式布局展示设计模式，支持分类筛选、关键词搜索，并提供了每种模式的核心思想、应用场景、经典案例及代码示例。
1.2 项目目标
| 目标 | 说明 |
|---|---|
| 内容全面 | 覆盖 23 种经典设计模式（5 创建型 + 7 结构型 + 11 行为型） |
| 图文并茂 | 每种设计模式配有精心设计的插图 |
| 交互友好 | 支持分类过滤、关键词搜索、详情弹窗 |
| 响应式布局 | 适配桌面端、平板端、移动端 |
| 可扩展 | 数据层与 UI 层解耦，便于扩展新模式 |
1.3 设计模式覆盖
| 分类 | 数量 | 模式列表 |
|---|---|---|
| 创建型 (Creational) | 5 | 单例、工厂、抽象工厂、建造者、原型 |
| 结构型 (Structural) | 7 | 适配器、装饰器、代理、外观、桥接、组合、享元 |
| 行为型 (Behavioral) | 11 | 观察者、策略、命令、责任链、状态、模板方法、迭代器、访问者、中介者、备忘录、解释器 |
2. 技术栈
2.1 核心技术
| 技术 | 版本 | 用途 |
|---|---|---|
| Next.js | ^16.1.1 | React 全栈框架，SSR/SSG/Standalone |
| React | ^19.0.0 | UI 渲染框架 |
| TypeScript | ^5 | 类型安全 |
| Tailwind CSS | ^4 | 原子化 CSS 框架 |
| shadcn/ui | — | 基于 Radix UI 的组件库 |
| Bun | — | JavaScript/TypeScript 运行时与包管理 |
| Prisma | ^6.11.1 | ORM 数据库访问层 |
| SQLite | — | 嵌入式关系型数据库 |
| Caddy | — | 反向代理 Web 服务器 |
2.2 关键依赖
| 依赖 | 用途 |
|---|---|
| framer-motion | 页面动画与过渡效果 |
| recharts | 数据可视化图表 |
| react-markdown | Markdown 内容渲染 |
| react-syntax-highlighter | 代码语法高亮 |
| zustand | 轻量级状态管理 |
| @tanstack/react-query | 服务端状态/缓存管理 |
| next-auth | 认证鉴权 |
| next-intl | 国际化支持 |
| @dnd-kit | 拖拽排序功能 |
| lucide-react | SVG 图标库 |
| zod | 运行时数据校验 |
3. 系统架构
3.1 整体架构图
┌─────────────────────────────────────────────────────────┐
│ Caddy (Port 81) │
│ 反向代理 & 路由转发 │
├─────────────────────────────────────────────────────────┤
│ │
│ ┌──────────────────┐ ┌──────────────────────────┐ │
│ │ Next.js App │ │ Mini-Services │ │
│ │ (Port 3000) │ │ (独立后端微服务) │ │
│ │ │ │ │ │
│ │ ┌─────────────┐ │ │ ┌──────────────────────┐ │ │
│ │ │ React 页面 │ │ │ │ Service A │ │ │
│ │ │ (SSR/CSR) │ │ │ │ (bun run dev) │ │ │
│ │ └──────┬──────┘ │ │ └──────────────────────┘ │ │
│ │ │ │ │ │ │
│ │ ┌──────▼──────┐ │ │ ┌──────────────────────┐ │ │
│ │ │ API Routes │ │ │ │ Service B │ │ │
│ │ │ (/api/*) │ │ │ │ (bun run dev) │ │ │
│ │ └──────┬──────┘ │ │ └──────────────────────┘ │ │
│ │ │ │ │ │ │
│ │ ┌──────▼──────┐ │ │ │ │
│ │ │ Prisma │ │ │ │ │
│ │ │ ORM │ │ │ │ │
│ │ └──────┬──────┘ │ │ │ │
│ │ │ │ │ │ │
│ │ ┌──────▼──────┐ │ │ │ │
│ │ │ SQLite │ │ │ │ │
│ │ │ (custom.db)│ │ │ │ │
│ │ └─────────────┘ │ │ │ │
│ └──────────────────┘ └──────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────┘
3.2 架构分层
┌──────────────────────────────────────────────┐
│ 表示层 (Presentation) │
│ page.tsx │ layout.tsx │ UI Components │
├──────────────────────────────────────────────┤
│ 业务逻辑层 (Business Logic) │
│ design-patterns.ts │ Hooks │ State │
├──────────────────────────────────────────────┤
│ 数据访问层 (Data Access) │
│ Prisma Client │ db.ts │ SQL │
├──────────────────────────────────────────────┤
│ 数据存储层 (Data Storage) │
│ SQLite (custom.db) │ Static JSON/TS Data │
├──────────────────────────────────────────────┤
│ 基础设施层 (Infrastructure) │
│ Caddy │ Next.js Server │ Bun Runtime │
└──────────────────────────────────────────────┘
3.3 数据流
用户交互 → React Component → State/Hook → 数据查询
│ │
▼ ▼
搜索/筛选 design-patterns.ts (静态数据)
│ / API Routes → Prisma → SQLite
▼ │
重新渲染 UI ← framer-motion 动画 ← ───────────┘
4. 目录结构
my-project/
├── .env # 环境变量（DATABASE_URL）
├── .gitignore # Git 忽略配置
├── Caddyfile # Caddy 反向代理配置
├── bun.lock # Bun 依赖锁文件
├── components.json # shadcn/ui 组件配置
├── next.config.ts # Next.js 配置
├── package.json # 项目依赖与脚本
├── postcss.config.mjs # PostCSS 配置
├── tailwind.config.ts # Tailwind CSS 配置
├── tsconfig.json # TypeScript 配置
│
├── .zscripts/ # 构建与部署脚本
│ ├── build.sh # 生产构建脚本
│ ├── dev.sh # 开发环境启动脚本
│ ├── start.sh # 生产环境启动脚本
│ ├── mini-services-install.sh # Mini-services 依赖安装
│ ├── mini-services-build.sh # Mini-services 构建
│ ├── mini-services-start.sh # Mini-services 启动
│ └── dev.pid # 开发进程 PID 文件
│
├── db/
│ └── custom.db # SQLite 数据库文件
│
├── download/
│ └── README.md # 下载说明
│
├── examples/
│ └── websocket/
│ ├── frontend.tsx # WebSocket 前端示例
│ └── server.ts # WebSocket 服务端示例
│
├── mini-services/ # 微服务扩展目录
│ └── .gitkeep
│
├── prisma/
│ └── schema.prisma # Prisma 数据库 Schema
│
├── public/ # 静态资源
│ ├── logo.svg
│ ├── robots.txt
│ └── patterns/ # 设计模式插图（23张）
│ ├── singleton.png
│ ├── factory.png
│ ├── abstract-factory.png
│ ├── builder.png
│ ├── prototype.png
│ ├── adapter.png
│ ├── bridge.png
│ ├── composite.png
│ ├── decorator.png
│ ├── facade.png
│ ├── flyweight.png
│ ├── proxy.png
│ ├── observer.png
│ ├── strategy.png
│ ├── command.png
│ ├── chain.png
│ ├── state.png
│ ├── template.png
│ ├── iterator.png
│ ├── visitor.png
│ ├── mediator.png
│ ├── memento.png
│ └── interpreter.png
│
└── src/
├── app/
│ ├── globals.css # 全局样式（Tailwind + CSS 变量）
│ ├── layout.tsx # 根布局（字体、元数据、Toaster）
│ ├── page.tsx # 主页面（设计模式展示系统）
│ └── api/
│ └── route.ts # API 路由入口
│
├── components/
│ └── ui/ # shadcn/ui 组件（50+）
│ ├── accordion.tsx
│ ├── alert-dialog.tsx
│ ├── badge.tsx
│ ├── button.tsx
│ ├── card.tsx
│ ├── dialog.tsx
│ ├── input.tsx
│ ├── scroll-area.tsx
│ ├── tabs.tsx
│ └── ... (40+ 其他组件)
│
├── data/
│ ├── design-patterns.ts # 设计模式核心数据（23种模式完整信息）
│ └── pattern-images.ts # 设计模式图片映射
│
├── hooks/
│ ├── use-mobile.ts # 移动端检测 Hook
│ └── use-toast.ts # Toast 提示 Hook
│
└── lib/
├── db.ts # Prisma 客户端单例
└── utils.ts # 通用工具函数（cn 类名合并）
5. 核心模块设计
5.1 数据层
5.1.1 设计模式数据模型 (design-patterns.ts)
interface DesignPattern {
id: string; // 唯一标识（如 'singleton'）
name: string; // 中文名称（如 '单例模式'）
nameEn: string; // 英文名称（如 'Singleton'）
category: 'creational' | 'structural' | 'behavioral';
categoryName: string; // 分类中文名（如 '创建型模式'）
coreIdea: string; // 核心思想
applicationScenarios: string[];// 应用场景
classicCases: string[]; // 经典案例
description: string; // 详细描述
codeExample: string; // 代码示例（Java 语法高亮）
imagePrompt: string; // 图片生成提示词
}
5.1.2 分类信息 (categoryInfo)
const categoryInfo = {
creational: {
name: '创建型模式',
description: '专注于对象创建机制，隐藏创建逻辑...',
color: 'from-emerald-500 to-teal-600',
bgColor: 'bg-emerald-50 dark:bg-emerald-950/30',
borderColor: 'border-emerald-200 dark:border-emerald-800',
icon: 'Layers',
},
structural: { /* 结构型 */ },
behavioral: { /* 行为型 */ },
};
5.1.3 数据查询接口
| 函数 | 参数 | 返回值 | 说明 |
|---|---|---|---|
getPatternsByCategory(category) |
分类ID | DesignPattern[] |
按类别获取模式列表 |
getPatternById(id) |
模式ID | DesignPattern | undefined |
根据ID获取单个模式 |
searchPatterns(query) |
搜索关键词 | DesignPattern[] |
在名称、核心思想、应用场景中搜索 |
5.1.4 图片映射 (pattern-images.ts)
将 23 种设计模式 ID 映射到 /public/patterns/ 下的对应图片文件，通过 getPatternImage(id) 函数获取图片路径。
5.2 UI 组件层
5.2.1 shadcn/ui 组件
项目集成 50+ shadcn/ui 组件，基于 Radix UI 原语：
| 类型 | 组件 |
|---|---|
| 基础组件 | Button, Input, Label, Badge, Separator, Skeleton |
| 布局组件 | Card, ScrollArea, Resizable, AspectRatio |
| 导航组件 | Breadcrumb, NavigationMenu, Pagination, Sidebar, Tabs |
| 表单组件 | Checkbox, Form, InputOTP, RadioGroup, Select, Slider, Switch, Textarea, Toggle |
| 浮层组件 | AlertDialog, Dialog, Drawer, DropdownMenu, HoverCard, Menubar, Popover, Sheet, Tooltip |
| 反馈组件 | Alert, Progress, Skeleton, Sonner, Toast |
| 数据展示 | Avatar, Calendar, Carousel, Chart, Command, ContextMenu, Table |
| 辅助组件 | Accordion, Collapsible, ToggleGroup |
5.2.2 核心页面组件结构
Home (page.tsx)
├── Header（搜索栏 + Logo）
│ ├── Logo（BookOpen 图标 + 标题）
│ └── SearchBar（Input + Search 图标 + 清除按钮）
├── Stats Cards（4 张统计卡片：总模式数 + 三类模式数）
├── Category Filter Pills（分类筛选按钮）
├── Pattern Grid（模式卡片网格）
│ ├── CategorySection（分类展示区域）
│ │ └── PatternCard（设计模式卡片）
│ └── FilteredView（筛选/搜索视图）
└── PatternDetail Dialog（模式详情弹窗）
├── Header Image（大图 + 渐隐效果）
├── Title & Badge（标题 + 分类标签）
└── Tabs（概述 / 应用场景 / 经典案例 / 代码示例）
5.3 页面与路由
| 路由 | 组件 | 功能 |
|---|---|---|
/ |
page.tsx |
主页面 — 设计模式展示系统 |
/api/* |
api/route.ts |
API 路由入口 |
layout |
layout.tsx |
根布局（字体、metadata、Toaster） |
当前项目为单页应用（SPA）架构，所有设计模式内容在主页面以卡片形式展示，详情通过 Dialog 弹窗呈现。
5.4 状态管理
5.4.1 页面级状态 (React useState + useMemo)
// 搜索状态
const [searchQuery, setSearchQuery] = useState('');
// 选中模式
const [selectedPattern, setSelectedPattern] = useState<DesignPattern | null>(null);
// 活跃分类
const [activeCategory, setActiveCategory] = useState<'creational' | 'structural' | 'behavioral' | 'all'>('all');
// 计算属性（useMemo 缓存）
const filteredPatterns // 按搜索词和分类筛选
const patternsByCategory // 按分类分组
const stats // 统计各分类数量
5.4.2 全局状态 (Zustand + TanStack Query)
- Zustand (
^5.0.6)：轻量级全局状态管理，用于跨组件共享状态 - @tanstack/react-query (
^5.82.0)：服务端状态管理与请求缓存
5.5 数据库设计
5.5.1 Prisma Schema
使用 SQLite 数据库，通过 Prisma ORM 操作：
datasource db {
provider = "sqlite"
url = env("DATABASE_URL")
}
model User {
id String @id @default(cuid())
email String @unique
name String?
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
}
model Post {
id String @id @default(cuid())
title String
content String?
published Boolean @default(false)
authorId String
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
}
5.5.2 数据库操作
| 表 | 用途 |
|---|---|
User |
用户信息（邮箱唯一，支持 name） |
Post |
文章/帖子（支持发布状态、关联作者） |
5.5.3 数据库脚本
| 命令 | 说明 |
|---|---|
bun run db:push |
直接推送 Schema 到数据库（开发用） |
bun run db:generate |
生成 Prisma Client |
bun run db:migrate |
创建数据库迁移 |
bun run db:reset |
重置数据库 |
5.6 API 层
API 路由位于 src/app/api/route.ts，基于 Next.js App Router 的 Route Handlers。支架提供了可扩展的 API 端点基础。
5.7 Mini-Services
项目支持通过 mini-services/ 目录挂载独立的微服务扩展：
- 发现机制：构建脚本扫描
mini-services/下所有包含package.json的子目录 - 运行方式：每个服务独立进程，通过
bun run dev运行 - 日志输出：
mini-service-{name}.log - 生产构建：通过
mini-services-install.sh安装依赖 →mini-services-build.sh构建
6. 设计模式内容模型
6.1 数据示例（单例模式）
{
"id": "singleton",
"name": "单例模式",
"nameEn": "Singleton",
"category": "creational",
"categoryName": "创建型模式",
"coreIdea": "确保一个类只有一个实例，提供一个全局访问点...",
"applicationScenarios": [
"配置管理器 - 应用程序只需要一个配置实例",
"日志记录器 - 统一管理日志输出",
"数据库连接池 - 控制数据库连接数量",
"线程池 - 管理线程资源",
"缓存系统 - 统一的缓存管理"
],
"classicCases": [
"Windows任务管理器",
"Java的Runtime类",
"Spring框架中的Bean默认单例",
"浏览器中的window对象"
],
"description": "单例模式保证一个类仅有一个实例...",
"codeExample": "public class Singleton { ... }",
"imagePrompt": "A minimalist illustration of a single glowing cube..."
}
6.2 内容结构
每种设计模式包含 7 个信息维度：
- 核心思想 — 一句话概括模式本质
- 详细描述 — 完整阐述模式的工作原理和使用时机
- 应用场景（5 个）— 实际开发中的典型场景
- 经典案例（4 个）— 业界知名框架/工具中的模式应用
- 代码示例 — Java 代码展示模式的典型实现
- 配图 — AI 生成的插画，直观展示模式概念
- 分类归属 — 创建型 / 结构型 / 行为型
7. 交互设计
7.1 主要交互
| 交互 | 行为 | 实现 |
|---|---|---|
| 分类过滤 | 点击统计卡片或筛选按钮切换分类 | setActiveCategory + useMemo |
| 关键词搜索 | 实时搜索，在名称、英文名、核心思想、场景中匹配 | searchPatterns() |
| 模式详情 | 点击模式卡片弹出详情 Dialog | Dialog + setSelectedPattern |
| Tab 切换 | 详情中切换概述/应用/案例/代码 | Tabs 组件 |
| 动画效果 | 卡片入场/鼠标悬停/页面过渡 | framer-motion |
7.2 响应式设计
| 断点 | 布局 |
|---|---|
< 640px (sm) |
单列卡片 |
640px - 1024px (md) |
双列卡片 |
1024px - 1280px (lg) |
三列/四列卡片 |
> 1280px (xl) |
四列/五列卡片 |
8. 性能与优化
| 优化策略 | 实现 |
|---|---|
| 静态数据 | 设计模式数据以 TypeScript 静态常量定义，零网络请求 |
| useMemo 缓存 | 筛选结果、分类分组、统计数据均使用 useMemo 避免重复计算 |
| Standalone 构建 | Next.js output: "standalone"，减小部署体积 |
| 图片优化 | 使用 Next.js <img> + public/ 静态托管 |
| 懒加载动画 | whileInView 仅在元素进入视口时触发动画 |
| CSS 原子化 | Tailwind CSS v4，按需生成，极致压缩 |
9. 安全设计
| 措施 | 说明 |
|---|---|
| 环境变量 | 数据库连接等敏感信息通过 .env 管理 |
| TypeScript 严格模式 | "strict": true 编译时类型检查 |
| Caddy 反向代理 | 统一入口，隐藏内部端口 |
| 认证预留 | next-auth 已引入，支持后续接入 OAuth |
| 数据校验 | zod 运行时 Schema 校验 |
10. 配置与环境变量
10.1 Next.js 配置 (next.config.ts)
const nextConfig: NextConfig = {
output: "standalone", // 独立部署模式
typescript: {
ignoreBuildErrors: true, // 构建时忽略 TS 错误
},
reactStrictMode: false, // 关闭严格模式
};
10.2 环境变量 (.env)
DATABASE_URL=file:/home/z/my-project/db/custom.db
10.3 shadcn/ui 配置 (components.json)
- 样式：New York 风格
- CSS 变量：启用
- 基础色：neutral
- 图标库：lucide
10.4 Tailwind 配置
- 暗黑模式：
class策略 - 动画插件：
tailwindcss-animate - 自定义主题色：CSS 变量驱动（background、foreground、card、primary、muted 等）
- 圆角：CSS 变量
--radius驱动
附录 A：依赖列表
A.1 运行时依赖
next, react, react-dom — 核心框架
@prisma/client — 数据库 ORM
@radix-ui/* (20+) — UI 原语组件
framer-motion — 动画库
recharts — 图表库
react-markdown — Markdown 渲染
react-syntax-highlighter — 代码高亮
zustand — 状态管理
@tanstack/react-query — 请求缓存
next-auth — 认证
next-intl — 国际化
@dnd-kit/* — 拖拽
lucide-react — 图标
zod — 数据校验
A.2 开发依赖
typescript, @types/react, @types/react-dom
eslint, eslint-config-next
tailwindcss, @tailwindcss/postcss
tw-animate-css
bun-types
AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念，把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起，为开发者提供从开发、训练到部署的一站式体验。
更多推荐
1
0- 0
已为社区贡献108条内容
所有评论(0)