# iFlow Engine Next.js Demo

这是一个使用 Next.js 15 + React 19 + TypeScript 的演示项目，展示如何在现代 React 框架中集成 iFlow Engine BIM 引擎 SDK。

## 前置要求

1. 确保父项目已经构建完成：
   ```bash
   cd ..
   npm run build
   ```

2. 复制 SDK 文件到 public 目录：
   ```bash
   npm run copy-sdk
   ```

3. 安装依赖：
   ```bash
   npm install
   ```

## 运行

### 开发模式

```bash
npm run dev
```

服务器会在 `http://localhost:3000` 启动。

### 构建

```bash
npm run build
```

构建后的静态文件会在 `dist` 目录中。

### 预览构建结果

```bash
npm start
```

## 项目结构

```
demo-next/
├── app/                     # Next.js App Router
│   ├── layout.tsx          # 根布局
│   ├── page.tsx            # 主页面
│   └── globals.css         # 全局样式
├── components/             # React 组件
│   ├── BimViewer.tsx       # BIM 引擎封装组件
│   └── ControlPanel.tsx    # 控制面板组件
├── public/                 # 静态资源
│   ├── lib/                # SDK 文件目录
│   │   ├── iflow-engine.umd.js
│   │   ├── iflow-engine.umd.js.map
│   │   └── iflow-engine.es.js
│   └── model/              # 3D 模型文件
├── package.json            # 项目配置
├── tsconfig.json           # TypeScript 配置
├── next.config.js          # Next.js 配置
└── README.md               # 说明文档
```

## 核心功能

- 🌍 **语言切换**: 支持中文/英文切换
- 🪟 **弹窗测试**: 测试对话框组件
- 🛠️ **工具栏控制**: 显示/隐藏工具栏和标签
- 🎨 **主题切换**: 深色/浅色/自定义主题
- 🎮 **3D 引擎**: 初始化引擎、加载模型、暂停/恢复渲染

## 使用说明

1. 点击 "初始化引擎" 按钮初始化 3D 引擎
2. 点击 "加载模型" 按钮加载默认 3D 模型（或输入自定义 URL）
3. 其他功能按钮可以测试 SDK 的各种功能

## 技术栈

- Next.js 15.3
- React 19.1
- TypeScript 5.9

## 注意事项

- 确保父项目的 `dist` 目录中有构建好的 SDK 文件
- 使用 HTTP 服务器运行（不能直接打开 HTML 文件）以避免 CORS 问题
- 页面使用客户端组件（'use client'）因为 BIM 引擎需要浏览器环境

## 与 demo-vue 的区别

| 特性 | demo-vue | demo-next |
|------|----------|-----------|
| 框架 | Vue 3 | Next.js 15 + React 19 |
| 路由 | Vue Router | Next.js App Router |
| 样式 | Scoped CSS | CSS-in-JSX |
| 构建输出 | SPA | 静态导出 |
| TypeScript | 可选 | 默认 |

## 许可证

ISC