# 颜色数据提取工具

## 简介

这个工具用于从 `pages-list` 目录下的HTML文件中提取拼豆/像素格子颜色数据，并保存为JSON格式。

## 功能

- 自动扫描 `pages-list` 目录下所有的 `像素格子.html` 文件
- 从HTML中提取 `color-name`（颜色名称）和 `color`（Hex颜色值）
- 按文件夹名称组织数据
- 生成格式化的JSON文件

## 使用方法

### 运行提取脚本

```bash
bun run extract-colors.ts
```

或者：

```bash
bun run extract
```

### 输出文件

提取的数据将保存到 `colors.json` 文件中。

## 数据格式

JSON文件的结构如下：

```json
{
  "COCO - 色号预览（291色）": [
    {
      "color-name": "A01",
      "color": "#FFFFFF"
    },
    {
      "color-name": "A02",
      "color": "#FEFCFF"
    }
    ...
  ],
  "DMC十字绣实色 - 色号预览（508色）": [
    {
      "color-name": "B5200",
      "color": "#FFFFFF"
    },
    ...
  ],
  ...
}
```

## 统计信息

- **颜色集合数量**: 31个
- **总颜色数量**: 5888个

### 包含的颜色品牌

- COCO系列（多种规格：291色、120色、144色、168色、192色、221色、24色、48色、72色、96色）
- DMC十字绣实色（508色）
- DODO（291色）
- Mard系列（多种规格：291色、120色、144色、221色、24色、264色、48色、72色、96色）
- 优肯（174色、221色）
- 卡卡（284色）
- 咪小窝（290色）
- 小舞（291色）
- 柿柿（220色）
- 漫漫（278色）
- 盼盼（289色）
- 童趣（120色）
- 黄豆豆（291色）

## 在代码中使用

### 示例1：读取所有颜色

```javascript
import colors from './colors.json';

// 遍历所有颜色集合
Object.entries(colors).forEach(([setName, colorList]) => {
  console.log(`${setName} - 共 ${colorList.length} 个颜色`);
  
  colorList.forEach((color, index) => {
    console.log(`  ${index + 1}. ${color['color-name']}: ${color.color}`);
  });
});
```

### 示例2：查找特定颜色

```javascript
import colors from './colors.json';

function findColor(hexColor: string) {
  const results = [];
  
  Object.entries(colors).forEach(([setName, colorList]) => {
    const found = colorList.find(c => c.color === hexColor);
    if (found) {
      results.push({
        brand: setName,
        colorName: found['color-name']
      });
    }
  });
  
  return results;
}

// 查找白色
const whiteColors = findColor('#FFFFFF');
console.log('白色色号:', whiteColors);
```

### 示例3：获取特定品牌的颜色

```javascript
import colors from './colors.json';

const cocoColors = colors['COCO - 色号预览（291色）'];
console.log(`COCO共有 ${cocoColors.length} 个颜色`);

// 获取前5个颜色
console.log('前5个颜色:', cocoColors.slice(0, 5));
```

### 示例4：统计颜色分布

```javascript
import colors from './colors.json';

const stats = {
  totalColors: 0,
  totalSets: Object.keys(colors).length,
  largestSet: '',
  largestSize: 0,
  smallestSet: '',
  smallestSize: Infinity
};

Object.entries(colors).forEach(([setName, colorList]) => {
  stats.totalColors += colorList.length;
  
  if (colorList.length > stats.largestSize) {
    stats.largestSize = colorList.length;
    stats.largestSet = setName;
  }
  
  if (colorList.length < stats.smallestSize) {
    stats.smallestSize = colorList.length;
    stats.smallestSet = setName;
  }
});

console.log('统计信息:', stats);
```

## 技术细节

- **运行时**: Bun
- **语言**: TypeScript
- **数据提取方式**: 正则表达式解析HTML
- **输出格式**: JSON（UTF-8编码）

## 文件说明

- `extract-colors.ts`: 主程序文件，负责扫描、解析和保存数据
- `colors.json`: 提取后的颜色数据（自动生成）
- `README.md`: 本说明文件

## 注意事项

1. 确保 `pages-list` 目录和HTML文件存在
2. HTML文件的名称必须为 `像素格子.html`
3. 颜色数据从HTML的 `<li class="color-item">` 元素中提取
4. 如需重新提取，直接运行脚本即可覆盖旧的JSON文件

## 故障排除

### 问题：运行时找不到HTML文件

**解决方案**：确保在正确的目录下运行脚本，`pages-list` 文件夹应该在当前目录。

### 问题：提取的颜色数量不对

**解决方案**：检查HTML文件的格式是否符合预期，特别是 `color-name` 和 Hex颜色的HTML结构。

### 问题：JSON文件格式错误

**解决方案**：删除 `colors.json` 文件，重新运行脚本。

## 许可证

MIT