# 数字孪生系统场景拆分实施方案

## 一、现状分析

### 1.1 现有代码结构

| 文件 | 行数 | 功能 | 所属场景 |
|------|------|------|----------|
| `IndustrialDashboard.tsx` | 1627行 | 监控大屏 + 3D模型渲染 | 氧化铝 |
| `DigitalTwin.tsx` | 1462行 | 数字孪生制作系统 | 氧化铝 |

### 1.2 现有设备模型

**IndustrialDashboard.tsx (13个模型函数)**：
```
createReactor           - 溶出反应器
createTank              - 沉降槽
createPump              - 循环泵
createFurnace           - 焙烧炉
createHeatExchanger     - 换热器
createStorage           - 原料储罐
createSlurryTank        - 泥浆槽（来自DigitalTwin）
createPressureVessel    - 压力容器（来自DigitalTwin）
createSettlingTankDT   - 沉降槽DT版（来自DigitalTwin）
createDecompositionTower - 分解塔（来自DigitalTwin）
createEvaporator        - 蒸发器（来自DigitalTwin）
createCalcinationFurnace - 煅烧炉（来自DigitalTwin）
createPipeSystem        - 管道系统
```

**DigitalTwin.tsx (7个模型函数)**：
```
createSlurryTank        - 泥浆槽
createPressureVessel    - 压力容器
createSettlingTank      - 沉降槽
createDecompositionTower - 分解塔
createEvaporator        - 蒸发器
createCalcinationFurnace - 煅烧炉
createPipingSystem      - 管道系统
```

### 1.3 问题总结

1. **场景混淆**：文档描述钢铁+有色冶金两个行业，但代码只有氧化铝
2. **代码重复**：DigitalTwin的模型被复制到IndustrialDashboard
3. **设备冗余**：同一个设备有多个版本（如SettlingTank vs SettlingTankDT）
4. **维护困难**：修改一个模型需要改多处

---

## 二、拆分方案

### 2.1 目标架构

```
src/app/
├── components/
│   └── shared/                    # ⭐ 新建：共享组件
│       ├── scene/                # 共享3D场景组件
│       │   ├── SceneSetup.tsx    # 相机、灯光、地面
│       │   ├── CameraControls.tsx # 相机控制逻辑
│       │   └── PipeSystem.tsx    # 管道系统组件
│       ├── models/               # 共享3D模型
│       │   ├── base/             # 基础模型（反应器、储罐等）
│       │   └── pipes/            # 管道连接件
│       └── ui/                   # 共享UI组件
│           ├── DevicePanel.tsx   # 设备详情面板
│           ├── StatusBar.tsx      # 状态栏
│           └── AlertList.tsx     # 告警列表
│
├── pages/
│   ├── alumina/                  # ⭐ 新建：铝冶炼场景
│   │   ├── AluminaDashboard.tsx  # 氧化铝监控大屏（改造自IndustrialDashboard）
│   │   ├── AluminaDigitalTwin.tsx # 氧化铝数字孪生（改造自DigitalTwin）
│   │   └── devices/              # 铝冶炼专用设备模型
│   │       ├── SlurryTank.ts
│   │       ├── PressureVessel.ts
│   │       ├── SettlingTank.ts
│   │       ├── DecompositionTower.ts
│   │       ├── Evaporator.ts
│   │       └── CalcinationFurnace.ts
│   │
│   ├── steel/                    # ⭐ 新建：钢铁场景
│   │   ├── SteelDashboard.tsx    # 钢铁监控大屏
│   │   ├── SteelDigitalTwin.tsx  # 钢铁数字孪生
│   │   └── devices/              # 钢铁专用设备模型
│   │       ├── BlastFurnace.ts   # 高炉
│   │       ├── HotBlastStove.ts  # 热风炉
│   │       ├── AirBlower.ts      # 鼓风机
│   │       ├── CoolingWall.ts    # 冷却壁
│   │       ├── CoalMill.ts       # 磨煤机
│   │       └── FeedConveyor.ts   # 给煤机
│   │
│   └── legacy/                   # ⭐ 保留：旧文件（可后续删除）
│       ├── IndustrialDashboard.tsx
│       └── DigitalTwin.tsx
```

### 2.2 共享模块设计

#### 2.2.1 共享3D场景组件

**SceneSetup.tsx** - 场景初始化
```typescript
interface SceneSetupProps {
  containerRef: RefObject<HTMLDivElement>;
  cameraPosition?: [number, number, number];
  lookAt?: [number, number, number];
  autoRotate?: boolean;
  onSceneReady?: (scene: THREE.Scene, camera: THREE.PerspectiveCamera) => void;
}
```

**CameraControls.tsx** - 相机控制
```typescript
interface CameraControlsProps {
  camera: THREE.PerspectiveCamera;
  autoRotate: boolean;
  onToggleRotate?: () => void;
  onResetView?: () => void;
}
```

#### 2.2.2 共享UI组件

**DevicePanel.tsx** - 设备详情面板
```typescript
interface DevicePanelProps {
  device: DeviceData | null;
  onClose: () => void;
}
```

**AlertList.tsx** - 告警列表
```typescript
interface AlertListProps {
  alerts: AlertItem[];
  onAlertClick?: (alert: AlertItem) => void;
}
```

### 2.3 场景专用模块设计

#### 2.3.1 铝冶炼场景设备模型

| 设备 | 文件 | 描述 |
|------|------|------|
| 泥浆槽 | `SlurryTank.ts` | 带搅拌器和叶轮的圆柱形槽体 |
| 压力容器 | `PressureVessel.ts` | 带圆顶和管道的压力容器 |
| 沉降槽 | `SettlingTank.ts` | 带锥形底部的沉降槽 |
| 分解塔 | `DecompositionTower.ts` | 带夹套和盘管的塔式设备 |
| 蒸发器 | `Evaporator.ts` | 带管束和冷凝器的蒸发设备 |
| 煅烧炉 | `CalcinationFurnace.ts` | 带炉膛和烟囱的煅烧炉 |

#### 2.3.2 钢铁场景设备模型（待实现）

| 设备 | 文件 | 描述 |
|------|------|------|
| 高炉 | `BlastFurnace.ts` | 核心冶炼设备，圆柱形炉体 |
| 热风炉 | `HotBlastStove.ts` | 预热鼓风的设备 |
| 鼓风机 | `AirBlower.ts` | 提供冶炼用空气 |
| 冷却壁 | `CoolingWall.ts` | 高炉冷却系统 |
| 磨煤机 | `CoalMill.ts` | 煤粉制备设备 |
| 给煤机 | `FeedConveyor.ts` | 煤粉输送设备 |

---

## 三、实施步骤

### 阶段一：基础设施（共享模块）

**步骤1.1**：创建共享目录结构
```
mkdir -p src/app/components/shared/{scene,models/base,models/pipes,ui}
```

**步骤1.2**：实现 SceneSetup.tsx
- 提取场景初始化逻辑（相机、灯光、地面、渲染器）
- 统一 Three.js 版本和配置

**步骤1.3**：实现 CameraControls.tsx
- 提取相机旋转逻辑（360度旋转实现）
- 统一的缩放、重置视角逻辑

**步骤1.4**：实现共享UI组件
- DevicePanel.tsx
- StatusBar.tsx
- AlertList.tsx

### 阶段二：铝冶炼场景（改造）

**步骤2.1**：创建 AluminaDashboard.tsx
- 引用共享 SceneSetup
- 保留现有的17个氧化铝设备
- 保留现有的监控面板

**步骤2.2**：创建设备模型文件
```
src/app/pages/alumina/devices/
├── SlurryTank.ts      # 从DigitalTwin提取
├── PressureVessel.ts  # 从DigitalTwin提取
├── SettlingTank.ts    # 从DigitalTwin提取
├── DecompositionTower.ts
├── Evaporator.ts
└── CalcinationFurnace.ts
```

**步骤2.3**：创建 AluminaDigitalTwin.tsx
- 引用共享 SceneSetup
- 保留现有的数字孪生编辑功能

### 阶段三：钢铁场景（新建）

**步骤3.1**：创建设备模型
```
src/app/pages/steel/devices/
├── BlastFurnace.ts
├── HotBlastStove.ts
├── AirBlower.ts
├── CoolingWall.ts
├── CoalMill.ts
└── FeedConveyor.ts
```

**步骤3.2**：创建 SteelDashboard.tsx
- 参考 AluminaDashboard 结构
- 使用钢铁设备模型

**步骤3.3**：创建设备数据
```typescript
const steelDeviceList = [
  { id: "bf-1", name: "1号高炉", type: "blastFurnace", position: [0, 5, 0], ... },
  { id: "hbs-1", name: "1号热风炉", type: "hotBlastStove", position: [-5, 3, 0], ... },
  // ...
];
```

### 阶段四：路由和菜单整合

**步骤4.1**：更新路由配置（routes.tsx）
```typescript
// 新路由结构
{
  path: '/alumina/dashboard',
  component: AluminaDashboard
},
{
  path: '/alumina/digital-twin',
  component: AluminaDigitalTwin
},
{
  path: '/steel/dashboard',
  component: SteelDashboard
},
{
  path: '/steel/digital-twin',
  component: SteelDigitalTwin
},
```

**步骤4.2**：更新菜单（RootLayout.tsx）
```
├── 铝冶炼
│   ├── 监控大屏
│   └── 数字孪生
└── 钢铁
    ├── 监控大屏
    └── 数字孪生
```

---

## 四、关键文件映射

### 4.1 IndustrialDashboard.tsx 拆分

| 原函数/组件 | 目标位置 | 说明 |
|------------|----------|------|
| createReactor | alumina/devices/Reactor.ts | 溶出反应器 |
| createTank | alumina/devices/Tank.ts | 沉降槽 |
| createPump | alumina/devices/Pump.ts | 循环泵 |
| createFurnace | alumina/devices/Furnace.ts | 焙烧炉 |
| createHeatExchanger | shared/models/base/HeatExchanger.ts | 换热器（通用） |
| createStorage | shared/models/base/Storage.ts | 储罐（通用） |
| createSlurryTank | alumina/devices/SlurryTank.ts | 泥浆槽 |
| createPressureVessel | alumina/devices/PressureVessel.ts | 压力容器 |
| createSettlingTankDT | alumina/devices/SettlingTank.ts | 沉降槽 |
| createDecompositionTower | alumina/devices/DecompositionTower.ts | 分解塔 |
| createEvaporator | alumina/devices/Evaporator.ts | 蒸发器 |
| createCalcinationFurnace | alumina/devices/CalcinationFurnace.ts | 煅烧炉 |
| createPipeSystem | shared/scene/PipeSystem.tsx | 管道系统 |
| 场景初始化 | shared/scene/SceneSetup.tsx | 相机、灯光等 |
| 相机旋转逻辑 | shared/scene/CameraControls.tsx | 360度旋转 |

### 4.2 DigitalTwin.tsx 拆分

| 原函数/组件 | 目标位置 | 说明 |
|------------|----------|------|
| createSlurryTank | alumina/devices/SlurryTank.ts | 与ID共享 |
| createPressureVessel | alumina/devices/PressureVessel.ts | 与ID共享 |
| createSettlingTank | alumina/devices/SettlingTank.ts | 替换DT版 |
| createDecompositionTower | alumina/devices/DecompositionTower.ts | 与ID共享 |
| createEvaporator | alumina/devices/Evaporator.ts | 与ID共享 |
| createCalcinationFurnace | alumina/devices/CalcinationFurnace.ts | 与ID共享 |
| createPipingSystem | shared/scene/PipeSystem.tsx | 与ID共享 |
| 工厂/场景/模型管理 | alumina/AluminaDigitalTwin.tsx | 保留 |
| 左侧边栏 | shared/ui/ModelLibrary.tsx | 提取为共享 |

---

## 五、数据流设计

### 5.1 设备数据接口（统一）

```typescript
// 共享设备数据类型
interface DeviceData {
  id: string;
  name: string;
  type: string;                    // 设备类型（如"blastFurnace"、"slurryTank"）
  industry: "steel" | "alumina";   // ⭐ 新增：行业标识
  position: [number, number, number];
  status: "running" | "warning" | "stopped";
  temperature: number;
  pressure: number;
  flow: number;
  efficiency: number;
  color: number;
}
```

### 5.2 场景切换机制

```typescript
// 场景上下文
const IndustryContext = createContext<{
  industry: "steel" | "alumina";
  setIndustry: (industry: "steel" | "alumina") => void;
}>(null);

// 设备列表根据行业加载
const deviceList = useMemo(() => {
  return industry === "steel" ? steelDevices : aluminaDevices;
}, [industry]);
```

---

## 六、测试计划

### 6.1 单元测试
- 每个设备模型渲染测试
- 共享组件功能测试

### 6.2 集成测试
- 铝冶炼场景完整流程
- 钢铁场景完整流程
- 场景切换测试

### 6.3 性能测试
- 17个设备同时渲染
- 60fps 相机旋转
- 内存占用监测

---

## 七、风险评估

| 风险 | 影响 | 缓解措施 |
|------|------|----------|
| 改动范围大 | 可能引入bug | 分阶段实施，每阶段验证 |
| 代码重复 | 维护成本增加 | 充分提取共享模块 |
| 钢铁设备模型缺失 | 功能不完整 | 先完成铝冶炼，后续补充 |
| 路由变更 | 旧链接失效 | 保持向后兼容或做重定向 |

---

## 八、预计工作量

| 阶段 | 内容 | 优先级 |
|------|------|--------|
| 阶段一 | 共享基础设施 | P0（必须先完成） |
| 阶段二 | 铝冶炼场景改造 | P0 |
| 阶段三 | 钢铁场景新建 | P1 |
| 阶段四 | 路由菜单整合 | P0 |

---

**文档版本**：V1.0
**创建日期**：2026-04-08
**状态**：待审批