252 lines
5.0 KiB
Markdown
252 lines
5.0 KiB
Markdown
# 颜色数据处理工具完整说明
|
||
|
||
## 📁 文件清单
|
||
|
||
### 核心脚本
|
||
| 文件 | 大小 | 说明 |
|
||
|------|------|------|
|
||
| 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
|