abearxiong/get-colors-from-beans

Fork 0

Files

xiongxiao 88a508478b update

2026-01-06 04:16:17 +08:00

5.0 KiB

Raw Permalink Blame History

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

📁 文件清单

核心脚本

文件	大小	说明
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提取颜色数据

bun run extract-colors.ts

或

bun run extract

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

步骤2：转换为ColorMap

bun run parse-db.ts

或

bun run parse

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

步骤3：运行示例代码

# 颜色数据示例
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%)

最多引用的颜色

#FFFFFF (白色) - 32次引用
#000000 (黑色) - 16次引用
#F7EC5C - 15次引用

🔍 数据结构对比

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

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

colorMap.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:

import colorMap from './colorMap.json';

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

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

使用 get-colors.json:

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

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

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

使用 colorMap.json:

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);

📝 可用脚本

# 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 - 颜色数据提取完整文档
COLORMAP_README.md - ColorMap生成工具详细说明
QUICK_START.md - 快速开始指南

✅ 验证清单

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

🔍 故障排除

常见问题

找不到 get-colors.json

# 检查文件是否存在
ls -lh get-colors.json

解析失败

# 验证 JSON 格式
node -e "const data = require('./get-colors.json'); console.log('OK');"

脚本运行错误

# 检查 Bun 版本
bun --version

# 重新安装依赖
bun install

📞 支持

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

最后更新: 2024-01-06

5.0 KiB Raw Permalink Blame History Unescape Escape