# 样式拆分方案

## 当前状况
- App.vue 中包含约 1870 行 CSS 代码
- 所有样式混在一起，难以维护
- 找到特定样式需要大量滚动

## 拆分目标
将样式按功能模块拆分到独立的 CSS 文件中，提高可维护性和可复用性。

## 样式文件结构

```
src/
├── styles/
│   ├── reset.css                      # 全局重置样式 (✅ 已创建)
│   ├── layout.css                     # 布局样式 (✅ 已创建)
│   ├── element-plus-override.css      # Element Plus 组件覆盖 (✅ 已创建)
│   ├── components/
│   │   ├── left-panel.css            # 左侧面板样式
│   │   ├── center-panel.css          # 中间面板样式
│   │   ├── right-panel.css           # 右侧面板样式
│   │   ├── device-cards.css          # 设备卡片样式
│   │   ├── sampling-barrel.css       # 采样桶样式
│   │   └── dialogs.css               # 对话框样式
│   ├── animations.css                # 动画效果
│   └── index.css                     # 样式入口文件（导入所有样式）
└── main.ts                           # 在这里导入 styles/index.css
```

## 已创建的样式文件

### 1. reset.css (✅)
**内容：** 全局重置样式
- CSS reset
- html、body 基础样式
- #app 基础样式

**大小：** 约 20 行

### 2. layout.css (✅)
**内容：** 整体布局样式
- .app-container（根容器）
- .top（顶部标题栏）
- .belt-sampling（三栏布局）
- .left, .center, .right（左中右三栏）
- .item（卡片通用样式）
- .title（标题样式）
- 响应式媒体查询

**大小：** 约 160 行

### 3. element-plus-override.css (✅)
**内容：** Element Plus 组件样式覆盖
- 表格样式
- 对话框样式
- 日期选择器样式
- 下拉选择器样式
- 图标颜色覆盖

**大小：** 约 180 行

## 待创建的样式文件

### 4. components/left-panel.css
**内容：**
- .yunxingrizhi（运行日志）
- .caozuojilu（操作记录）
- .baojingxinxi（报警信息）
- 表格特定样式

**预计大小：** 约 50 行

### 5. components/center-panel.css
**内容：**
- .devices（设备容器）
- .center-top（顶部操作区）
- .infos（设备信息容器）
- .device-content（设备内容区）
- .caiyang（采样图片）

**预计大小：** 约 200 行

### 6. components/device-cards.css
**内容：**
- .info, .info-item（设备卡片）
- .chujigeiliaopidai（初级给料皮带）
- .caiyangtou（采样头）
- .btns（按钮组）
- .btn（按钮样式）
- 状态指示灯样式（i.green, i.red）

**预计大小：** 约 300 行

### 7. components/sampling-barrel.css
**内容：**
- .caiyangtong（采样桶容器）
- .caiyangtong-item（桶项目）
- .caiyangtong-left/right（左右箭头）

**预计大小：** 约 100 行

### 8. components/right-panel.css
**内容：**
- .caiyang-system-panel（采样系统面板）
- .slider-buttons-group（滑块按钮组）
- .status-panel（状态面板）
- .fengzhuang-panel（封装系统面板）
- .log-export-btn-wrapper（日志导出按钮）

**预计大小：** 约 400 行

### 9. components/dialogs.css
**内容：**
- .log-export-dialog（日志导出对话框）
- .dialog-export-row（对话框行）
- 对话框特定的组件样式覆盖

**预计大小：** 约 150 行

### 10. animations.css
**内容：**
- @keyframes pulse-green（绿色脉动动画）
- @keyframes pulse-red（红色脉动动画）
- 其他动画效果

**预计大小：** 约 50 行

## 如何使用

### 方法一：在 main.ts 中全局导入（推荐）

```typescript
// main.ts
import { createApp } from 'vue'
import './styles/index.css'  // 导入所有样式
import App from './App.vue'

createApp(App).mount('#app')
```

然后创建 `styles/index.css`：

```css
/* styles/index.css */
@import './reset.css';
@import './layout.css';
@import './element-plus-override.css';
@import './components/left-panel.css';
@import './components/center-panel.css';
@import './components/device-cards.css';
@import './components/sampling-barrel.css';
@import './components/right-panel.css';
@import './components/dialogs.css';
@import './animations.css';
```

### 方法二：在 App.vue 中导入

```vue
<script setup lang="ts">
// App.vue
import './styles/index.css'
// 其他导入...
</script>
```

### 方法三：按需导入（组件化后）

```vue
<!-- LeftPanel.vue -->
<style scoped>
@import '../styles/components/left-panel.css';
</style>
```

## 重构步骤

### 第一阶段：基础样式拆分（✅ 已完成）
1. ✅ 创建 styles 目录
2. ✅ 创建 reset.css
3. ✅ 创建 layout.css
4. ✅ 创建 element-plus-override.css
5. [ ] 创建 styles/index.css
6. [ ] 在 main.ts 中导入

### 第二阶段：组件样式拆分
7. [ ] 创建 components 子目录
8. [ ] 创建 left-panel.css
9. [ ] 创建 device-cards.css
10. [ ] 创建 right-panel.css
11. [ ] 创建其他组件样式

### 第三阶段：清理和优化
12. [ ] 删除 App.vue 中的样式代码
13. [ ] 测试所有样式是否正常
14. [ ] 优化和去重

## 迁移示例

### 原来（App.vue）：

```vue
<template>
  <div class="app-container">
    <!-- 内容 -->
  </div>
</template>

<style>
/* 1870 行 CSS 代码 */
.app-container {
  width: 100vw;
  height: 100vh;
  /* ... */
}
/* 更多样式... */
</style>
```

### 迁移后（App.vue）：

```vue
<script setup lang="ts">
import './styles/index.css' // 只需要这一行
// 其他导入...
</script>

<template>
  <div class="app-container">
    <!-- 内容 -->
  </div>
</template>

<style>
/* 空的，或者只包含组件特定的 scoped 样式 */
</style>
```

## 优势

### 1. 可维护性
- ✅ 样式按功能模块组织
- ✅ 快速定位和修改特定样式
- ✅ 减少样式冲突

### 2. 可复用性
- ✅ 可以在其他项目中复用样式文件
- ✅ 组件和样式可以独立使用

### 3. 性能优化
- ✅ 可以按需加载样式
- ✅ 支持 CSS 代码分割

### 4. 团队协作
- ✅ 多人可以同时修改不同样式文件
- ✅ 减少 Git 冲突

### 5. 开发体验
- ✅ 样式文件更小，编辑器性能更好
- ✅ 支持 CSS 预处理器（Sass/Less）扩展

## 下一步行动

我可以帮你：

1. **创建 styles/index.css** 并修改 main.ts 导入样式
2. **创建所有组件样式文件** 并迁移对应的 CSS 代码
3. **清理 App.vue** 删除已迁移的样式
4. **提供完整的迁移脚本** 自动化整个过程

**你希望我现在继续哪一步？**

