基于 Next.js 的曼德勃罗集 Web 可视化应用

• 框架: Next.js 16.0.10 (App Router)
• 语言: TypeScript 5
• UI: React 19 + Tailwind CSS 4
• 渲染: HTML5 Canvas
• 组件库: shadcn/ui

快速开始

环境要求

• Node.js 18+
• npm

操作指南

基本操作

• 拖拽：按住鼠标左键拖动视图
• 放大：按住 Shift 键并拖拽选择区域
• 缩小：按住 Ctrl 键并拖拽选择区域
• 缩放滑块：在控制面板中拖动滑块快速缩放
• 撤销：按 Ctrl+Z 或点击撤销按钮

预设位置

在控制面板的'上帝的指纹'下拉菜单中选择预设位置，快速跳转到经典分形区域。

颜色主题

在控制面板的'颜色主题'下拉菜单中选择不同的配色方案，探索不同的视觉风格。

书签管理

1. 点击控制面板中的书签图标（黄色书签按钮）
2. 点击'添加书签'保存当前视图
3. 为书签命名并选择分类
4. 点击书签条目快速跳转

移动端操作

• 单指拖拽：平移视图
• 双指捏合：缩放视图

主题切换

点击控制面板右上角的太阳/月亮图标切换深色/浅色主题。

项目结构

mandelbrot-set/
├── src/
│   ├── app/
│   │   └── page.tsx # 主页面组件
│   ├── components/
│   │   ├── ControlPanel.tsx # 控制面板
│   │   ├── MandelbrotCanvas.tsx # Canvas 渲染组件
│   │   ├── BookmarksPanel.tsx # 书签管理面板
│   │   ├── ProgressBar.tsx # 进度指示器
│   │   └── ui/ # shadcn/ui 组件
│   └── lib/
│       └── mandelbrot.ts # 核心算法和工具函数
├── public/ # 静态资源
└── package.json

核心算法

本项目使用经典的曼德勃罗集迭代算法：

z_{n+1} = z_n^2 + c

其中 c 是复平面上的点，z 从 0 开始迭代。如果 |z| 始终保持在 2 以内，则点 c 属于曼德勃罗集。

性能优化

• 使用 Canvas 直接操作像素，避免 DOM 操作
• 画质模式切换：预览模式降低分辨率提升性能
• 分块渲染：大画布分块处理，避免界面卡顿
• Web Worker 支持：后台计算，保持界面响应

浏览器支持

• Chrome/Edge 90+
• Firefox 88+
• Safari 14+
• 支持桌面和移动端

开发说明

代码规范

• 使用 TypeScript 进行类型检查
• 遵循 ESLint 规则
• 使用 Prettier 格式化代码

构建检查

pnpm build

许可证

MIT

致谢

本应用受到曼德勃罗集的数学美学的启发，旨在为用户提供探索分形世界的沉浸式体验。