# 设计文档

## 实现方案

### 1. 品种分类映射表
在前端定义 `SYMBOL_CATEGORIES` 对象，将品种名称映射到类别：
```javascript
const SYMBOL_CATEGORIES = {
    // 贵金属
    '沪金': '贵金属', '沪银': '贵金属', '铂金': '贵金属', '钯金': '贵金属',
    // 有色金属
    '沪铜': '有色金属', '沪铝': '有色金属', ...
    // 黑色系
    '螺纹钢': '黑色系', '热卷': '黑色系', ...
    // 能源化工
    '原油': '能源化工', 'PTA': '能源化工', ...
    // 农产品
    '豆粕': '农产品', '豆油': '农产品', ...
    // 金融期货
    '中证1000': '金融期货', ...
};
```

### 2. 分组渲染逻辑
修改 `renderTable` 函数：
1. 将品种按类别分组
2. 未分类的品种归入"其他"组
3. 按类别顺序渲染，每组显示标题行

### 3. CSS 样式
新增 `.symbol-category-header` 样式，用于分组标题行