# 颜色数据处理工具完整说明

## 📁 文件清单

### 核心脚本
| 文件 | 大小 | 说明 |
|------|------|------|
| extract-colors.ts | 3.0KB | HTML颜色提取脚本 |
| parse-db.ts | 3.3KB | ColorMap生成脚本 |

### 数据文件
| 文件 | 大小 | 说明 |
|------|------|------|
| get-colors.json | 374KB | 品牌颜色数据（输入）|
| colorMap.json | 607KB | 颜色映射表（输出）|

### 示例代码
| 文件 | 大小 | 说明 |
|------|------|------|
| example-usage.ts | 5.0KB | 颜色数据使用示例 |
| example-colormap.ts | 4.7KB | ColorMap使用示例 |

### 文档
| 文件 | 大小 | 说明 |
|------|------|------|
| README.md | 4.4KB | 颜色数据提取文档 |
| COLORMAP_README.md | 6.6K B | ColorMap生成工具文档 |
| QUICK_START.md | 2.4KB | 快速开始指南 |
| IMPLEMENTATION_SUMMARY.md | 4.0KB | 实现总结 |

## 🚀 快速开始

### 步骤1：从HTML提取颜色数据
```bash
bun run extract-colors.ts
```
或
```bash
bun run extract
```

**输出**: colors.json (按品牌分组的颜色数据)

### 步骤2：转换为ColorMap
```bash
bun run parse-db.ts
```
或
```bash
bun run parse
```

**输出**: colorMap.json (按颜色值分组的映射表)

### 步骤3：运行示例代码
```bash
# 颜色数据示例
bun run example-usage.ts

# ColorMap示例
bun run example-colormap.ts
```

## 📊 数据统计

### 总体统计
- 品牌数量: 31个
- 总颜色条目: 5888个
- 唯一颜色: 2037个
- 平均每个颜色被引用: 2.89次

### 颜色分布
- 红色系: 2655个 (45.1%)
- 蓝色系: 1245个 (21.1%)
- 绿色系: 969个 (16.5%)
- 白色系: 559个 (9.5%)
- 其他: 660个 (11.2%)

### 最多引用的颜色
1. #FFFFFF (白色) - 32次引用
2. #000000 (黑色) - 16次引用
3. #F7EC5C - 15次引用

## 🔍 数据结构对比

### get-colors.json (按品牌分组)

```json
{
  "COCO-291": [
    {
      "color-name": "A01",
      "color": "#FFFFFF"
    }
  ],
  "DMC-508": [...]
}
```

### colorMap.json (按颜色值分组)

```json
{
  "#FFFFFF": [
    {
      "color-name": "A01",
      "color-title": "COCO-291",
      "color": "#FFFFFF"
    },
    {
      "color-name": "L14",
      "color-title": "COCO-291",
      "color": "#FFFFFF"
    },
    {
      "color-name": "B5200",
      "color-title": "DMC-508",
      "color": "#FFFFFF"
    }
  ]
}
```

## 💻 使用场景

### 场景1：查找特定颜色的所有品牌引用

使用 `colorMap.json`:

```typescript
import colorMap from './colorMap.json';

const whiteColor = colorMap['#FFFFFF'];
whiteColor.forEach(item => {
  console.log(`${item['color-title']}: ${item['color-name']}`);
});
```

### 场景2：获取特定品牌的所有颜色

使用 `get-colors.json`:

```typescript
import brandColors from './get-colors.json';

const cocoColors = brandColors['COCO-291'];
console.log(`COCO-291 有 ${cocoColors.length} 个颜色`);
```

### 场景3：查找跨品牌共享的颜色

使用 `colorMap.json`:

```typescript
import colorMap from './colorMap.json';

const sharedColors = Object.entries(colorMap)
  .filter(([_, items]) => items.length > 5)
  .map(([color, items]) => ({
    color,
    count: items.length,
    brands: [...new Set(items.map(i => i['color-title']))]
  }));

console.log('被6个以上品牌共享的颜色:', sharedColors.length);
```

## 📝 可用脚本

```bash
# package.json 中定义的脚本
bun run extract          # 提取颜色数据
bun run parse           # 生成ColorMap
bun run example-colormap # 运行ColorMap示例
```

## 🔧 数据处理流程

```
HTML文件 (pages-list/)
    ↓
extract-colors.ts
    ↓
colors.json (按品牌分组)
    ↓
parse-db.ts
    ↓
colorMap.json (按颜色值分组)
```

## 📈 性能说明

| 操作 | 文件 | 时间复杂度 |
|------|------|-----------|
| 按品牌查找颜色 | get-colors.json | O(1) |
| 按颜色查找品牌 | colorMap.json | O(1) |
| 跨品牌颜色统计 | colorMap.json | O(n) |

## 🎯 适用场景

- **需要按品牌查找颜色**: 使用 `get-colors.json`
- **需要按颜色查找品牌**: 使用 `colorMap.json`
- **需要统计颜色分布**: 使用 `colorMap.json`
- **需要品牌颜色列表**: 使用 `get-colors.json`

## 📚 相关文档

- [README.md](./README.md) - 颜色数据提取完整文档
- [COLORMAP_README.md](./COLORMAP_README.md) - ColorMap生成工具详细说明
- [QUICK_START.md](./QUICK_START.md) - 快速开始指南

## ✅ 验证清单

- ✅ 所有脚本运行正常
- ✅ JSON文件格式正确
- ✅ 数据完整性验证通过
- ✅ 示例代码运行成功
- ✅ 文档完整

## 🔍 故障排除

### 常见问题

1. **找不到 get-colors.json**
   ```bash
   # 检查文件是否存在
   ls -lh get-colors.json
   ```

2. **解析失败**
   ```bash
   # 验证 JSON 格式
   node -e "const data = require('./get-colors.json'); console.log('OK');"
   ```

3. **脚本运行错误**
   ```bash
   # 检查 Bun 版本
   bun --version
   
   # 重新安装依赖
   bun install
   ```

## 📞 支持

如需帮助，请查看相关文档或检查示例代码。

---

**最后更新**: 2024-01-06