# 组件拆分示例

## 已完成：LeftPanel 组件

### 1. 组件文件位置
`src/components/LeftPanel.vue`

### 2. 如何在 App.vue 中使用

#### 步骤 1：导入组件
在 `App.vue` 的 `<script setup>` 部分添加：

```typescript
import LeftPanel from './components/LeftPanel.vue'
```

#### 步骤 2：替换模板中的左侧面板代码

**原代码（约50行）：**
```vue
<div class="left">
  <div class="item yunxingrizhi">
    <div class="title">运行日志</div>
    <el-table :data="tableData" :max-height="240">
      <!-- 表格列定义 -->
    </el-table>
  </div>
  <!-- 操作记录和报警信息... -->
</div>
```

**替换为（1行）：**
```vue
<LeftPanel
  :table-data="tableData"
  :operation-table-data="operationTableData"
  :alarm-table-data="alarmTableData"
  @dismiss-alarm="jiechu"
/>
```

### 3. 完整示例

```vue
<template>
  <el-config-provider :locale="locale">
    <div class="app-container">
      <div class="top">
        <img id="bg-image" src="./assets/header.png" alt="">
        <span>福泉公司1号火车采样机</span>
      </div>
      
      <div class="belt-sampling">
        <!-- 左侧面板 - 使用组件 -->
        <LeftPanel
          :table-data="tableData"
          :operation-table-data="operationTableData"
          :alarm-table-data="alarmTableData"
          @dismiss-alarm="jiechu"
        />

        <!-- 中间面板 - 暂时保持原样 -->
        <div class="center">
          <!-- 原有代码 -->
        </div>

        <!-- 右侧面板 - 暂时保持原样 -->
        <div class="right">
          <!-- 原有代码 -->
        </div>
      </div>

      <!-- 对话框等其他内容 -->
    </div>
  </el-config-provider>
</template>

<script setup lang="ts">
import { ref, computed, watchEffect, onUnmounted } from 'vue'
import { ElMessage, ElConfigProvider } from 'element-plus'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import LeftPanel from './components/LeftPanel.vue' // 导入左侧面板组件

// 其他导入和代码保持不变...
const locale = zhCn

// 数据定义保持不变
const tableData = ref<any[]>([])
const operationTableData = ref<any[]>([])
const alarmTableData = ref<any[]>([])

// jiechu 函数保持不变
const jiechu = async (row: any) => {
  // 原有逻辑
}
</script>
```

### 4. 优势对比

**重构前（App.vue）：**
- 总行数：4338 行
- 左侧面板代码：约 50 行模板代码

**重构后：**
- App.vue 减少：约 50 行
- LeftPanel.vue：约 80 行（独立、清晰、可复用）
- 总体代码组织更好，更易维护

### 5. 组件通信说明

#### Props（父 → 子）
- `tableData`: 运行日志数据
- `operationTableData`: 操作记录数据
- `alarmTableData`: 报警信息数据

#### Events（子 → 父）
- `@dismiss-alarm`: 当用户点击"解除报警"按钮时触发
  - 参数：报警记录对象
  - 父组件的 `jiechu` 函数会处理这个事件

### 6. 下一步可以拆分的组件

**简单优先（推荐）：**
1. ✅ LeftPanel（已完成）
2. LogExportDialog（日志导出对话框）- 约 60 行
3. HistoryDialog（历史记录对话框）- 约 30 行
4. PageHeader（顶部标题栏）- 约 10 行

**复杂组件（建议后期）：**
5. RightPanel（右侧面板）- 约 200 行
6. CenterPanel（中间面板）- 约 300 行

### 7. 如果需要我继续

我可以帮你：
1. 创建并集成 LogExportDialog 组件
2. 创建并集成 HistoryDialog 组件  
3. 创建并集成其他任何组件
4. 抽离 WebSocket、API 等逻辑到 composables

**请告诉我你想先拆分哪个部分？**

