颜色数据提取工具

简介

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

功能

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

使用方法

运行提取脚本

bun run extract-colors.ts

或者：

bun run extract

输出文件

提取的数据将保存到 colors.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：读取所有颜色

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：查找特定颜色

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：获取特定品牌的颜色

import colors from './colors.json';

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

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

示例4：统计颜色分布

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