# PC装机配置表

基于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」保存修改后的配置

### 本地开发

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

## JSON配置格式

```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`: 商品链接（可选）