# 大屏组件拆分方案

## 当前状况
- 单文件 4338 行代码
- 所有逻辑、样式、模板都在 App.vue 中
- 难以维护和协作开发

## 拆分目标
将大屏拆分为多个独立组件，提高代码可维护性、可读性和可复用性。

## 组件拆分结构

```
src/
├── App.vue (主容器 - 精简为布局和状态管理)
├── components/
│   ├── layout/
│   │   ├── PageHeader.vue (顶部标题栏)
│   │   └── DebugPanel.vue (调试面板)
│   ├── panels/
│   │   ├── LeftPanel.vue (左侧面板 - 已创建)
│   │   ├── CenterPanel.vue (中间设备面板)
│   │   └── RightPanel.vue (右侧面板)
│   ├── dialogs/
│   │   ├── LogExportDialog.vue (日志导出对话框)
│   │   └── HistoryDialog.vue (历史记录对话框)
│   └── widgets/
│       ├── DeviceStatusCard.vue (设备状态卡片)
│       ├── SamplingBarrel.vue (采样桶组件)
│       └── StatusIndicator.vue (状态指示器)
├── composables/
│   ├── useWebSocket.ts (WebSocket 逻辑)
│   ├── useDeviceStatus.ts (设备状态管理)
│   ├── useDataPolling.ts (数据轮询)
│   └── useApiRequest.ts (API 请求封装)
├── utils/
│   ├── api.ts (API 接口定义)
│   ├── constants.ts (常量定义)
│   └── helpers.ts (辅助函数)
└── types/
    ├── device.ts (设备类型定义)
    ├── data.ts (数据类型定义)
    └── index.ts (类型导出)
```

## 拆分步骤

### 第一阶段：基础拆分（已完成部分）
- [x] 创建 components 目录
- [x] 创建 LeftPanel.vue（左侧三个表格）
- [ ] 创建 LogExportDialog.vue
- [ ] 创建 HistoryDialog.vue

### 第二阶段：核心组件拆分
- [ ] 创建 CenterPanel.vue（中间设备面板）
  - [ ] 拆分设备卡片为独立组件
  - [ ] 拆分采样桶为独立组件
- [ ] 创建 RightPanel.vue（右侧控制面板）
  - [ ] 拆分采样系统组件
  - [ ] 拆分封装系统组件

### 第三阶段：逻辑抽离
- [ ] 创建 useWebSocket composable
  - WebSocket 连接管理
  - 心跳机制
  - 重连逻辑
  - 消息处理
- [ ] 创建 useDeviceStatus composable
  - 设备状态映射
  - 状态更新逻辑
- [ ] 创建 useDataPolling composable
  - 轮询逻辑
  - 数据获取
- [ ] 创建 useApiRequest composable
  - API 请求封装
  - 缓存管理
  - 错误处理

### 第四阶段：类型定义和工具函数
- [ ] 定义 TypeScript 类型
- [ ] 抽离工具函数
- [ ] 抽离常量配置

## 示例：LeftPanel.vue 使用方式

```vue
<!-- App.vue -->
<template>
  <el-config-provider :locale="locale">
    <div class="app-container">
      <div class="top">...</div>
      <div class="belt-sampling">
        <!-- 使用左侧面板组件 -->
        <LeftPanel
          :table-data="tableData"
          :operation-table-data="operationTableData"
          :alarm-table-data="alarmTableData"
          @dismiss-alarm="jiechu"
        />
        
        <CenterPanel ... />
        <RightPanel ... />
      </div>
    </div>
  </el-config-provider>
</template>

<script setup lang="ts">
import LeftPanel from './components/panels/LeftPanel.vue'
import CenterPanel from './components/panels/CenterPanel.vue'
import RightPanel from './components/panels/RightPanel.vue'
// ...
</script>
```

## 重构优势

### 1. 可维护性提升
- 单个文件代码量减少到 200-500 行
- 职责单一，易于理解
- 修改某个功能不影响其他部分

### 2. 可复用性
- 组件可在其他项目中复用
- 通过 props 和 events 灵活配置

### 3. 团队协作
- 多人可同时开发不同组件
- 减少代码冲突

### 4. 性能优化
- 可按需加载组件
- 易于实现组件级别的懒加载

### 5. 测试友好
- 单个组件更容易编写单元测试
- 逻辑抽离到 composables 便于测试

## 下一步建议

1. **渐进式重构**：不要一次性全部重构，逐步替换
2. **保持功能不变**：每次拆分后确保功能正常
3. **增量测试**：每拆分一个组件就测试一次
4. **Git 提交**：每完成一个组件拆分就提交一次

## 需要我帮你完成的部分

请告诉我你希望：
1. 继续创建更多组件？
2. 创建某个特定的组件？
3. 抽离某个特定的逻辑到 composable？
4. 还是提供完整的重构实现？

