PC Builder / 电脑装机配置工具

一个基于 Electron 的电脑装机配置工具，支持 8 大类配件浏览、智能兼容性检测、高级多选筛选、价格区间展示和配置导出。

功能特性

8 大配件分类：CPU、主板、显卡、内存、存储、电源、机箱、散热器
数据驱动：从 data/parts.json 加载 2500+ 配件数据，支持热重载
智能兼容性检测：
- CPU 插槽 ↔ 主板插槽自动匹配
- 内存类型 ↔ 主板内存类型自动匹配
- 选择配件后自动过滤不兼容选项
- 实时显示兼容性错误提示
高级多选筛选系统：
- 品牌筛选（点击切换）
- 规格范围筛选（核心数、TDP、显存、频率等）
- 布尔筛选（PCIe 5.0、RGB 等）
- 多条件同时生效
实时搜索：支持按型号、品牌、规格关键词搜索
价格区间展示：每个配件显示最低~最高价格区间
上市时间排序：优先展示最新发布的配件
配置管理：
- 选择/切换/取消配件
- 实时显示当前配置和预估总价区间
- 导出配置清单为 TXT 文件
- 一键清空配置
外部比价链接：点击"查看价格"按钮跳转电商页面
暗色主题 UI：GitHub 风格暗色主题，保护眼睛
数据热重载：修改 parts.json 后 30 秒内自动检测并重新加载

技术栈

技术	版本	用途
Electron	^33.0.0	跨平台桌面应用框架
TypeScript	^5.7.2	类型安全的 JavaScript 超集
electron-store	^10.0.0	配置持久化存储
electron-builder	^25.1.8	应用打包工具

项目结构

pc-builder/
├── src/
│   ├── main/
│   │   └── index.ts          # 主进程：数据加载、IPC 通信、兼容性检测
│   ├── preload/
│   │   └── preload.ts        # 预加载脚本：安全暴露 API 给渲染进程
│   └── renderer/
│       └── index.html        # 渲染进程：完整 UI（HTML + CSS + JS 内联）
├── data/
│   ├── parts.json            # 配件数据（2500+ 条）
│   └── parts-backup.json     # 数据备份
├── dist/                     # TypeScript 编译输出
├── release/                  # electron-builder 打包输出
├── clean-parts.js            # 数据清洗脚本
├── deduplicate.js            # 数据去重脚本
├── check-data.js             # 数据检查脚本
├── update-release-dates.js   # 上市日期更新脚本
├── package.json
├── tsconfig.json
└── README.md

安装运行

环境要求

Node.js 18+ （推荐 20+）
npm 9+

安装依赖

cd pc-builder
npm install

开发模式运行

npm run dev

这会执行：

TypeScript 编译（tsc）
复制 index.html 到 dist/renderer/
启动 Electron 应用

打包发布

npm run build

使用 electron-builder 打包为 Windows 便携版（Portable），输出在 release/ 目录。

使用指南

1. 浏览配件

启动应用后，左侧导航栏显示 8 个配件分类，点击即可浏览对应分类的配件列表。

每个配件卡片显示：

品牌和 型号名称
价格区间（最低价 ~ 最高价）
关键规格标签（不同分类显示不同规格）
上市日期（如有）

2. 筛选配件

高级多选筛选：

点击分类后，内容区顶部会出现筛选栏
品牌筛选：点击品牌名称按钮，支持多选
规格筛选：如 CPU 可按核心数、线程数、TDP 等筛选
范围筛选：如显卡按显存大小、TDP 范围筛选
布尔筛选：如主板可选择"支持 PCIe 5.0"

搜索：

在搜索框输入关键词（型号、品牌、规格等）
实时过滤，显示匹配结果数量

3. 选择配件

点击配件卡片即可选中，右侧配置面板会实时更新：

显示已选配件名称和价格
显示预估总价区间
如果有兼容性问题，会显示错误提示

兼容性检测规则：

CPU 插槽必须与主板插槽一致
内存类型必须与主板支持的内存类型一致

4. 查看价格

点击配件卡片下方的"查看价格"按钮，会自动打开浏览器并跳转到该配件的电商页面（需在 parts.json 中配置 url 字段）。

5. 导出配置

点击右侧配置面板的"导出配置清单"按钮，会下载一个 TXT 文件，包含：

所有已选配件的详细信息（名称、价格、品牌、规格）
预估总价区间
生成时间

6. 刷新数据

如果你修改了 data/parts.json，可以：

点击左上角的"🔄 刷新"按钮手动刷新
等待 30 秒，应用会自动检测文件变化并重新加载

数据格式

data/parts.json 是一个 JSON 对象，键为分类名称，值为配件数组。

{
  "cpus": [
    {
      "id": "cpu-i9-14900k",
      "name": "Intel Core i9-14900K",
      "brand": "Intel",
      "priceMin": 3899,
      "priceMax": 4299,
      "releaseYear": 2023,
      "releaseMonth": 10,
      "releaseDay": 17,
      "url": "https://item.jd.com/100083912928.html",
      "specs": {
        "socket": "LGA1700",
        "cores": 24,
        "threads": 32,
        "baseFreq": 3.2,
        "boostFreq": 6.0,
        "tdp": 125,
        "process": "Intel 7",
        "iGPU": true,
        "cache": 36
      }
    }
  ],
  "motherboards": [ ... ],
  "gpus": [ ... ],
  ...
}

字段说明

字段	类型	说明
`id`	string	唯一标识符（建议格式：`分类-品牌-型号`）
`name`	string	显示名称
`brand`	string	品牌名称
`priceMin`	number	最低价格（元）
`priceMax`	number	最高价格（元）
`releaseYear`	number	上市年份（可选）
`releaseMonth`	number	上市月份（可选）
`releaseDay`	number	上市日期（可选）
`url`	string	电商页面链接（可选）
`specs`	object	规格对象（不同分类有不同的规格字段）

各分类的 specs 字段

CPU（cpus）

socket: 插槽类型（如 LGA1700、AM5）
cores: 核心数
threads: 线程数
baseFreq: 基础频率（GHz）
boostFreq: 睿频频率（GHz）
tdp: 热设计功耗（W）
process: 制程工艺（如 TSMC 5nm、Intel 7）
iGPU: 是否有核显（boolean）
cache: 缓存大小（MB）

主板（motherboards）

socket: CPU 插槽类型
chipset: 芯片组（如 Z790、B650）
formFactor: 板型（如 ATX、Micro-ATX、Mini-ITX）
memoryType: 支持的内存类型（如 DDR4、DDR5）
memory: 内存插槽数量
m2: M.2 接口数量
pcie5: 是否支持 PCIe 5.0（boolean）

显卡（gpus）

vram: 显存大小（GB）
vramType: 显存类型（如 GDDR6X、GDDR7）
busWidth: 位宽（bit）
cuda: CUDA 核心数 / 流处理器数量
tdp: 热设计功耗（W）
length: 显卡长度（mm）

内存（memory）

type: 内存类型（DDR4、DDR5）
speed: 频率（MHz）
capacity: 单条容量（GB）
latency: 延迟（CL 值）

存储（storage）

type: 类型（如 NVMe SSD、SATA SSD）
interface: 接口（如 PCIe 4.0、SATA III）
capacity: 容量（GB）
seqRead: 顺序读取速度（MB/s）

电源（psus）

wattage: 额定功率（W）
efficiency: 效率认证（如 80+ Gold、80+ Platinum）
modular: 模组类型（Full Modular / Semi-Modular / Non-Modular）
atxVersion: ATX 版本（如 ATX 3.0、ATX 3.1）
formFactor: 电源规格（如 ATX、SFX）

机箱（cases）

formFactor: 支持的主板板型（如 ATX、Micro-ATX）
maxGpuLength: 最大显卡长度（mm）
maxCoolerHeight: 最大散热器高度（mm）
radiatorSupport: 水冷支持（如 360mm、240mm、无）
material: 材质（如 Steel、Aluminum、Tempered Glass）

散热器（coolers）

type: 类型（如 Air Cooler、Liquid Cooler）
tdp: 支持的最大 TDP（W）
height: 高度（mm，风冷）
fanSize: 风扇尺寸（如 120mm、140mm）
rgb: 是否支持 RGB 灯效（boolean）

实用脚本

项目中包含几个数据处理脚本（位于项目根目录）：

脚本	用途
`clean-parts.js`	清洗 `parts.json` 数据，统一格式、去除异常值
`deduplicate.js`	检测并去除重复的配件数据
`check-data.js`	检查数据完整性，输出统计信息
`update-release-dates.js`	批量更新配件上市日期

运行方式：

node clean-parts.js
node deduplicate.js
node check-data.js
node update-release-dates.js

兼容性说明

已测试平台

✅ Windows 10 / 11
✅ Node.js 18+ / 20+
✅ npm 9+

已知问题

显卡长度与机箱兼容：当前版本未自动检测显卡长度与机箱限长的兼容性（计划后续版本加入）
电源功率估算：当前版本未根据配置自动估算所需电源功率（计划后续版本加入）
数据更新：parts.json 需要手动维护，计划后续加入网络数据源自动更新

贡献指南

欢迎提交 Issue 和 Pull Request！

开发流程

Fork 本仓库
创建特性分支（git checkout -b feature/AmazingFeature）
提交更改（git commit -m 'Add some AmazingFeature'）
推送到分支（git push origin feature/AmazingFeature）
提交 Pull Request

代码规范

TypeScript 代码使用 2 空格缩进
遵循 ESLint 规范（如有）
提交信息使用中文或英文均可

开源协议

ISC License

致谢

Electron - 跨平台桌面应用框架
electron-builder - 应用打包工具
TypeScript - 类型安全的 JavaScript

PC Builder

An Electron-based PC assembly configuration tool that supports browsing 8 categories of components, intelligent compatibility detection, advanced multi-select filtering, price range display, and configuration export.

Features • Installation • Usage • Data Format • Build

Features

8 Component Categories: CPU, Motherboard, GPU, Memory, Storage, PSU, Case, Cooler
Data-Driven: Loads 2500+ component data from data/parts.json with hot-reload support
Intelligent Compatibility Detection:
- CPU socket ↔ Motherboard socket auto-matching
- Memory type ↔ Motherboard memory type auto-matching
- Automatically filters incompatible options after selecting a component
- Real-time compatibility error display
Advanced Multi-Select Filtering:
- Brand filtering (click to toggle)
- Spec range filtering (cores, TDP, VRAM, frequency, etc.)
- Boolean filtering (PCIe 5.0, RGB, etc.)
- Multiple filters work simultaneously
Real-Time Search: Search by model, brand, spec keywords
Price Range Display: Each component shows min~max price range
Release Date Sorting: Prioritizes newly released components
Configuration Management:
- Select/switch/deselect components
- Real-time display of current config and estimated total price range
- Export configuration list as TXT file
- One-click clear configuration
External Price Comparison Links: Click "View Price" button to open e-commerce page
Dark Theme UI: GitHub-inspired dark theme for eye protection
Data Hot-Reload: Automatically detects and reloads parts.json changes within 30 seconds

Tech Stack

Technology	Version	Purpose
Electron	^33.0.0	Cross-platform desktop app framework
TypeScript	^5.7.2	Type-safe JavaScript superset
electron-store	^10.0.0	Configuration persistence
electron-builder	^25.1.8	App packaging tool

Project Structure

pc-builder/
├── src/
│   ├── main/
│   │   └── index.ts          # Main process: data loading, IPC, compatibility check
│   ├── preload/
│   │   └── preload.ts        # Preload script: securely expose API to renderer
│   └── renderer/
│       └── index.html        # Renderer: complete UI (HTML + CSS + JS inline)
├── data/
│   ├── parts.json            # Component data (2500+ entries)
│   └── parts-backup.json     # Data backup
├── dist/                     # TypeScript compilation output
├── release/                  # electron-builder packaging output
├── clean-parts.js            # Data cleaning script
├── deduplicate.js            # Data deduplication script
├── check-data.js             # Data validation script
├── update-release-dates.js   # Release date update script
├── package.json
├── tsconfig.json
└── README.md

Installation

Requirements

Node.js 18+ (recommended 20+)
npm 9+

Install Dependencies

cd pc-builder
npm install

Run in Development Mode

npm run dev

This executes:

TypeScript compilation (tsc)
Copy index.html to dist/renderer/
Launch Electron app

Build for Production

npm run build

Uses electron-builder to package as Windows Portable executable, output in release/ directory.

Usage

1. Browse Components

After launching the app, the left navigation bar shows 8 component categories. Click to browse the component list for each category.

Each component card displays:

Brand and Model Name
Price Range (min price ~ max price)
Key Spec Tags (different specs for different categories)
Release Date (if available)

2. Filter Components

Advanced Multi-Select Filtering:

After clicking a category, a filter bar appears at the top of the content area
Brand Filter: Click brand name buttons, supports multi-select
Spec Filter: e.g., CPUs can be filtered by cores, threads, TDP, etc.
Range Filter: e.g., GPUs filtered by VRAM size, TDP range
Boolean Filter: e.g., motherboards can filter "Supports PCIe 5.0"

Search:

Type keywords in the search box (model, brand, specs, etc.)
Real-time filtering with matching result count

3. Select Components

Click a component card to select it. The right configuration panel updates in real-time:

Shows selected component name and price
Shows estimated total price range
Displays error messages if there are compatibility issues

Compatibility Check Rules:

CPU socket must match motherboard socket
Memory type must match motherboard supported memory type

4. View Prices

Click the "View Price" button below the component card to automatically open the browser and navigate to the component's e-commerce page (requires url field in parts.json).

5. Export Configuration

Click the "Export Configuration List" button in the right configuration panel to download a TXT file containing:

Detailed information of all selected components (name, price, brand, specs)
Estimated total price range
Generation time

6. Refresh Data

If you modify data/parts.json, you can:

Click the "🔄 Refresh" button in the top left to manually refresh
Wait 30 seconds, the app will automatically detect file changes and reload

Data Format

data/parts.json is a JSON object with category names as keys and component arrays as values.

{
  "cpus": [
    {
      "id": "cpu-i9-14900k",
      "name": "Intel Core i9-14900K",
      "brand": "Intel",
      "priceMin": 3899,
      "priceMax": 4299,
      "releaseYear": 2023,
      "releaseMonth": 10,
      "releaseDay": 17,
      "url": "https://item.jd.com/100083912928.html",
      "specs": {
        "socket": "LGA1700",
        "cores": 24,
        "threads": 32,
        "baseFreq": 3.2,
        "boostFreq": 6.0,
        "tdp": 125,
        "process": "Intel 7",
        "iGPU": true,
        "cache": 36
      }
    }
  ],
  "motherboards": [ ... ],
  "gpus": [ ... ],
  ...
}

Field Description

Field	Type	Description
`id`	string	Unique identifier (recommended format: `category-brand-model`)
`name`	string	Display name
`brand`	string	Brand name
`priceMin`	number	Minimum price (CNY)
`priceMax`	number	Maximum price (CNY)
`releaseYear`	number	Release year (optional)
`releaseMonth`	number	Release month (optional)
`releaseDay`	number	Release day (optional)
`url`	string	E-commerce page link (optional)
`specs`	object	Specs object (different categories have different spec fields)

Specs Fields by Category

CPU

socket: Socket type (e.g., LGA1700, AM5)
cores: Number of cores
threads: Number of threads
baseFreq: Base frequency (GHz)
boostFreq: Boost frequency (GHz)
tdp: Thermal Design Power (W)
process: Process node (e.g., TSMC 5nm, Intel 7)
iGPU: Has integrated graphics (boolean)
cache: Cache size (MB)

Motherboard

socket: CPU socket type
chipset: Chipset (e.g., Z790, B650)
formFactor: Form factor (e.g., ATX, Micro-ATX, Mini-ITX)
memoryType: Supported memory type (e.g., DDR4, DDR5)
memory: Number of memory slots
m2: Number of M.2 slots
pcie5: Supports PCIe 5.0 (boolean)

GPU

vram: VRAM size (GB)
vramType: VRAM type (e.g., GDDR6X, GDDR7)
busWidth: Bus width (bit)
cuda: CUDA cores / Stream processors
tdp: Thermal Design Power (W)
length: GPU length (mm)

Memory

type: Memory type (DDR4, DDR5)
speed: Frequency (MHz)
capacity: Single stick capacity (GB)
latency: Latency (CL value)

Storage

type: Type (e.g., NVMe SSD, SATA SSD)
interface: Interface (e.g., PCIe 4.0, SATA III)
capacity: Capacity (GB)
seqRead: Sequential read speed (MB/s)

PSU

wattage: Rated power (W)
efficiency: Efficiency certification (e.g., 80+ Gold, 80+ Platinum)
modular: Modular type (Full Modular / Semi-Modular / Non-Modular)
atxVersion: ATX version (e.g., ATX 3.0, ATX 3.1)
formFactor: PSU form factor (e.g., ATX, SFX)

Case

formFactor: Supported motherboard form factors (e.g., ATX, Micro-ATX)
maxGpuLength: Maximum GPU length (mm)
maxCoolerHeight: Maximum cooler height (mm)
radiatorSupport: Liquid cooling support (e.g., 360mm, 240mm, None)
material: Material (e.g., Steel, Aluminum, Tempered Glass)

Cooler

type: Type (e.g., Air Cooler, Liquid Cooler)
tdp: Maximum supported TDP (W)
height: Height (mm, air cooler)
fanSize: Fan size (e.g., 120mm, 140mm)
rgb: Supports RGB lighting (boolean)

Utility Scripts

The project includes several data processing scripts (located in the project root):

Script	Purpose
`clean-parts.js`	Clean `parts.json` data, unify formats, remove outliers
`deduplicate.js`	Detect and remove duplicate component data
`check-data.js`	Check data integrity, output statistics
`update-release-dates.js`	Batch update component release dates

Usage:

node clean-parts.js
node deduplicate.js
node check-data.js
node update-release-dates.js

Compatibility

Tested Platforms

✅ Windows 10 / 11
✅ Node.js 18+ / 20+
✅ npm 9+

Known Issues

GPU Length vs Case Compatibility: Current version does not automatically detect GPU length vs case max GPU length compatibility (planned for future versions)
PSU Wattage Estimation: Current version does not automatically estimate required PSU wattage based on configuration (planned for future versions)
Data Updates: parts.json requires manual maintenance, planning to add automatic updates from web data sources

Contributing

Issues and Pull Requests are welcome!

Development Workflow

Fork this repository
Create a feature branch (git checkout -b feature/AmazingFeature)
Commit your changes (git commit -m 'Add some AmazingFeature')
Push to the branch (git push origin feature/AmazingFeature)
Open a Pull Request

Code Style

TypeScript code uses 2-space indentation
Follow ESLint rules (if available)
Commit messages can be in Chinese or English

License

ISC License

Acknowledgments

Electron - Cross-platform desktop app framework
electron-builder - App packaging tool
TypeScript - Type-safe JavaScript

Name		Name	Last commit message	Last commit date
Latest commit History 2 Commits
data		data
src		src
.gitignore		.gitignore
README.md		README.md
check-data.js		check-data.js
clean-parts.js		clean-parts.js
deduplicate.js		deduplicate.js
package.json		package.json
tsconfig.json		tsconfig.json
update-release-dates.js		update-release-dates.js

Folders and files

Latest commit

History

Repository files navigation

PC Builder / 电脑装机配置工具

功能特性

技术栈

项目结构

安装运行

环境要求

安装依赖

开发模式运行

打包发布

使用指南

1. 浏览配件

2. 筛选配件

3. 选择配件

4. 查看价格

5. 导出配置

6. 刷新数据

数据格式

字段说明

各分类的 specs 字段

实用脚本

兼容性说明

已测试平台

已知问题

贡献指南

开发流程

代码规范

开源协议

致谢

PC Builder

Features

Tech Stack

Project Structure

Installation

Requirements

Install Dependencies

Run in Development Mode

Build for Production

Usage

1. Browse Components

2. Filter Components

3. Select Components

4. View Prices

5. Export Configuration

6. Refresh Data

Data Format

Field Description

Specs Fields by Category

Utility Scripts

Compatibility

Tested Platforms

Known Issues

Contributing

Development Workflow

Code Style

License

Acknowledgments

About

Topics

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Contributors

Uh oh!

Languages

Packages