update
This commit is contained in:
317
COLORMAP_README.md
Normal file
317
COLORMAP_README.md
Normal file
@@ -0,0 +1,317 @@
|
||||
# ColorMap 生成工具说明
|
||||
|
||||
## 简介
|
||||
|
||||
`parse-db.ts` 是一个用于将品牌颜色数据转换为颜色映射表的工具。它读取 `get-colors.json`,生成一个以颜色值为键的映射表。
|
||||
|
||||
## 功能
|
||||
|
||||
- 读取 `get-colors.json`(品牌颜色数据)
|
||||
- 按颜色值(Hex)重新组织数据
|
||||
- 生成 `colorMap.json`,格式为 `Color -> [品牌信息数组]`
|
||||
- 提供详细统计信息
|
||||
|
||||
## 使用方法
|
||||
|
||||
### 运行解析脚本
|
||||
|
||||
```bash
|
||||
bun run parse-db.ts
|
||||
```
|
||||
|
||||
或使用 npm script:
|
||||
|
||||
```bash
|
||||
bun run parse
|
||||
```
|
||||
|
||||
### 运行使用示例
|
||||
|
||||
```bash
|
||||
bun run example-colormap.ts
|
||||
```
|
||||
|
||||
## 数据格式
|
||||
|
||||
### 输入格式(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"
|
||||
}
|
||||
],
|
||||
"#000000": [...]
|
||||
}
|
||||
```
|
||||
|
||||
## 数据结构
|
||||
|
||||
### 输入数据结构
|
||||
|
||||
```typescript
|
||||
interface ColorItem {
|
||||
"color-name": string;
|
||||
color: string;
|
||||
}
|
||||
|
||||
interface BrandData {
|
||||
[brandName: string]: ColorItem[];
|
||||
}
|
||||
```
|
||||
|
||||
### 输出数据结构
|
||||
|
||||
```typescript
|
||||
interface ColorGroupItem {
|
||||
"color-name": string;
|
||||
"color-title": string;
|
||||
color: string;
|
||||
}
|
||||
|
||||
interface ColorMap {
|
||||
[color: string]: ColorGroupItem[];
|
||||
}
|
||||
```
|
||||
|
||||
## 统计信息
|
||||
|
||||
运行后显示以下统计信息:
|
||||
|
||||
- **处理的品牌数**: 31个
|
||||
- **总颜色条目数**: 5888个
|
||||
- **重复颜色数**: 3851个
|
||||
- **唯一颜色数**: 2037个
|
||||
|
||||
## 使用示例
|
||||
|
||||
### 示例1:查找特定颜色
|
||||
|
||||
```typescript
|
||||
import colorMap from './colorMap.json';
|
||||
|
||||
function findColorByHex(hexColor: string) {
|
||||
return colorMap[hexColor] || null;
|
||||
}
|
||||
|
||||
const whiteColor = findColorByHex('#FFFFFF');
|
||||
console.log(whiteColor);
|
||||
// 输出包含32个元素的数组,每个元素代表一个品牌对该颜色的使用
|
||||
```
|
||||
|
||||
### 示例2:统计颜色引用次数
|
||||
|
||||
```typescript
|
||||
import colorMap from './colorMap.json';
|
||||
|
||||
const colorStats = Object.entries(colorMap)
|
||||
.map(([color, items]) => ({ color, count: items.length }))
|
||||
.sort((a, b) => b.count - a.count);
|
||||
|
||||
console.log('引用最多的颜色:', colorStats[0]);
|
||||
// 输出: { color: '#FFFFFF', count: 32 }
|
||||
```
|
||||
|
||||
### 示例3:查找特定品牌的所有颜色
|
||||
|
||||
```typescript
|
||||
import colorMap from './colorMap.json';
|
||||
|
||||
function findColorsByBrand(brandName: string) {
|
||||
const results = [];
|
||||
|
||||
Object.entries(colorMap).forEach(([hexColor, items]) => {
|
||||
items.forEach(item => {
|
||||
if (item['color-title'] === brandName) {
|
||||
results.push({
|
||||
color: hexColor,
|
||||
colorName: item['color-name']
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
return results;
|
||||
}
|
||||
|
||||
const cocoColors = findColorsByBrand('COCO-291');
|
||||
console.log(`COCO-291 有 ${cocoColors.length} 个颜色`);
|
||||
```
|
||||
|
||||
### 示例4:查找跨品牌共享的颜色
|
||||
|
||||
```typescript
|
||||
import colorMap from './colorMap.json';
|
||||
|
||||
function findSharedColors(minBrandCount: number = 2) {
|
||||
const sharedColors = [];
|
||||
|
||||
Object.entries(colorMap).forEach(([hexColor, items]) => {
|
||||
const uniqueBrands = [...new Set(items.map(item => item['color-title']))];
|
||||
if (uniqueBrands.length >= minBrandCount) {
|
||||
sharedColors.push({
|
||||
color: hexColor,
|
||||
brands: uniqueBrands
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
return sharedColors.sort((a, b) => b.brands.length - a.brands.length);
|
||||
}
|
||||
|
||||
const sharedColors = findSharedColors(5);
|
||||
console.log(`被5个以上品牌共享的颜色: ${sharedColors.length} 个`);
|
||||
```
|
||||
|
||||
### 示例5:按色号查找颜色
|
||||
|
||||
```typescript
|
||||
import colorMap from './colorMap.json';
|
||||
|
||||
function findColorByName(colorName: string) {
|
||||
const results = [];
|
||||
|
||||
Object.entries(colorMap).forEach(([hexColor, items]) => {
|
||||
items.forEach(item => {
|
||||
if (item['color-name'] === colorName) {
|
||||
results.push({
|
||||
brand: item['color-title'],
|
||||
color: hexColor
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
return results;
|
||||
}
|
||||
|
||||
const a01Colors = findColorByName('A01');
|
||||
console.log(`色号 A01 在 ${a01Colors.length} 个品牌中使用:`);
|
||||
a01Colors.forEach(item => {
|
||||
console.log(` - ${item.brand}: ${item.color}`);
|
||||
});
|
||||
```
|
||||
|
||||
## 常见颜色引用统计
|
||||
|
||||
### 引用最多的颜色(前10名)
|
||||
|
||||
| 排名 | 颜色 | 引用次数 | 主要品牌 |
|
||||
|------|------|----------|----------|
|
||||
| 1 | #FFFFFF | 32 | 所有品牌 |
|
||||
| 2 | #000000 | 16 | 大部分品牌 |
|
||||
| 3 | #F7EC5C | 15 | Mard, DODO等 |
|
||||
| 4 | #FDA951 | 15 | Mard, DODO等 |
|
||||
| 5 | #FA8C4F | 15 | Mard, DODO等 |
|
||||
|
||||
### 品牌颜色统计
|
||||
|
||||
| 品牌 | 颜色数量 |
|
||||
|------|----------|
|
||||
| DMC-508 | 508 |
|
||||
| COCO-291 | 291 |
|
||||
| DODO-291 | 291 |
|
||||
| Mard-291 | 291 |
|
||||
| 小舞-291 | 291 |
|
||||
| 黄豆豆-291 | 291 |
|
||||
| 咪小窝-290 | 290 |
|
||||
|
||||
## 性能优化建议
|
||||
|
||||
1. **颜色查找**: 使用 Map 或对象的直接访问,时间复杂度 O(1)
|
||||
2. **批量处理**: 对于大量查找操作,可以预先建立索引
|
||||
3. **内存优化**: 考虑使用更紧凑的数据格式,如压缩的 JSON
|
||||
|
||||
## 文件说明
|
||||
|
||||
| 文件 | 大小 | 说明 |
|
||||
|------|------|------|
|
||||
| parse-db.ts | ~3KB | 解析脚本 |
|
||||
| get-colors.json | 374KB | 输入数据 |
|
||||
| colorMap.json | 607KB | 输出数据 |
|
||||
| example-colormap.ts | ~4KB | 使用示例 |
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. **颜色重复**: 相同的 Hex 值会在不同品牌中被使用
|
||||
2. **色号重复**: 相同的色号(如 A01)可能对应不同的颜色值
|
||||
3. **大小写敏感**: 颜色值的查找是大小写敏感的(建议统一转换)
|
||||
|
||||
## 故障排除
|
||||
|
||||
### 问题:找不到颜色
|
||||
|
||||
**解决方案**: 确保颜色值的格式正确,使用完整的 Hex 格式(如 #FFFFFF)
|
||||
|
||||
```typescript
|
||||
// ✅ 正确
|
||||
findColorByHex('#FFFFFF');
|
||||
|
||||
// ✗ 错误
|
||||
findColorByHex('FFFFFF');
|
||||
findColorByHex('#ffffff'); // 大小写不匹配
|
||||
```
|
||||
|
||||
### 问题:数据为空
|
||||
|
||||
**解决方案**: 检查 `get-colors.json` 是否存在且格式正确
|
||||
|
||||
```bash
|
||||
# 检查文件
|
||||
ls -lh get-colors.json
|
||||
|
||||
# 验证 JSON
|
||||
node -e "const data = require('./get-colors.json'); console.log(Object.keys(data).length);"
|
||||
```
|
||||
|
||||
### 问题:内存不足
|
||||
|
||||
**解决方案**: 对于大数据集,可以考虑分批处理或使用流式解析
|
||||
|
||||
## 相关文档
|
||||
|
||||
- [README.md](./README.md) - 颜色数据提取工具文档
|
||||
- [QUICK_START.md](./QUICK_START.md) - 快速开始指南
|
||||
|
||||
## 更新日志
|
||||
|
||||
### v1.0.0 (2024-01-06)
|
||||
- ✅ 初始版本发布
|
||||
- ✅ 支持从 get-colors.json 生成 colorMap.json
|
||||
- ✅ 提供完整的使用示例
|
||||
- ✅ 详细的统计信息输出
|
||||
|
||||
## 贡献
|
||||
|
||||
如需提交问题或建议,请查看项目主文档。
|
||||
|
||||
## 许可证
|
||||
|
||||
MIT
|
||||
Reference in New Issue
Block a user