PC Config Builder

基于HTML的网页版PC装机配置管理工具，支持编辑和查看两种模式。

功能

• 表格展示：以表格形式展示所有部件配置，包含图片、类型、品牌、型号、参数、价格、链接
• 备选方案：每个部件支持主配置+多个备选方案，点击即可切换，底部总价同步更新
• 图片预览：支持图片URL，点击可放大查看
• 部件类型：预设CPU、主板、显卡等常用类型，同时支持自定义输入
• JSON存储：配置以JSON格式存储，支持导入导出

文件说明

文件	用途	部署方式
index.html	查看页面	服务器部署，只读
editor.html	编辑页面	本地双击打开，支持编辑
sample_config.json	示例配置	-
start_server.py	本地开发服务器	python start_server.py

使用方法

查看配置（服务器部署）

1. 将 index.html 和JSON配置文件部署到Web服务器
2. 浏览器打开：http://你的域名/index.html?config=配置文件地址.json
3. 示例：http://localhost:8080/?config=sample_config.json

编辑配置（本地使用）

1. 双击 editor.html 在浏览器中打开
2. 点击「打开文件」按钮，选择JSON配置文件
3. 进行编辑操作：添加部件、编辑部件、删除部件、切换备选方案
4. 点击「导出JSON」保存修改后的配置

本地开发

python start_server.py
# 打开 http://localhost:8080/editor.html

Caddy 部署

纯静态文件，无需后端，可直接部署在 Caddy 后面。

pc.example.com {
    root * /path/to/pc-config-builder
    file_server
}

访问：https://pc.example.com/?config=sample_config.json

JSON 配置文件需与页面在同一服务器上（或配置 CORS）。编辑器页面仅供本地使用，无需部署。

JSON配置格式

{
  "configName": "我的装机方案",
  "components": [
    {
      "type": "CPU",
      "selected": 0,
      "options": [
        {
          "image": "https://example.com/image.jpg",
          "brand": "Intel",
          "model": "i7-14700K",
          "specs": "20核28线程 / 3.4GHz",
          "price": 2499,
          "link": "https://item.jd.com/xxx.html"
        }
      ]
    }
  ]
}

• selected: 当前选中的配置索引（0为主配置）
• options: 该部件的所有配置选项
• image: 图片URL（可选）
• link: 商品链接（可选）