pc-config-builder/docs/compose/plans/2026-07-18-pc-config-builder.md

# PC装机配置表 Implementation Plan

> **For agentic workers:** REQUIRED SUB-SKILL: Use compose:subagent (recommended) or compose:execute to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.

**Goal:** Build a single-page HTML web application for PC build configuration management with JSON storage, edit/view modes, modal editing, and real-time total price calculation.

**Architecture:** Single HTML file with embedded CSS and JavaScript. Data loaded from JSON via URL parameter or file import. Two modes: view (read-only with alternative selection) and edit (add/delete/edit components via modal). Local dev via Python http.server.

**Tech Stack:** Vanilla HTML/CSS/JS (no frameworks), Python http.server

## Global Constraints

- Single HTML file: `index.html` — all CSS and JS embedded
- No external dependencies (no CDN, no frameworks)
- JSON config loaded via `?config=<url>` URL parameter
- Local dev server: Python `http.server` on port 8080
- Component types: preset dropdown (CPU, 主板, 显卡, 内存, 硬盘, 电源, 机箱, 散热器, 显示器) + custom input
- Chinese UI language
- Responsive design (desktop-first, mobile-friendly)

---

## Task 1: Create project structure and sample JSON

**Covers:** Data structure definition

**Files:**
- Create: `sample_config.json`

- [ ] **Step 1: Create sample JSON config**

```json
{
  "configName": "我的装机方案",
  "components": [
    {
      "type": "CPU",
      "selected": 0,
      "options": [
        { "brand": "Intel", "model": "i7-14700K", "specs": "20核28线程 / 3.4GHz", "price": 2499, "link": "https://item.jd.com/100060726782.html" },
        { "brand": "AMD", "model": "R7 7800X3D", "specs": "8核16线程 / 4.2GHz", "price": 2199, "link": "https://item.jd.com/100057602578.html" }
      ]
    },
    {
      "type": "主板",
      "selected": 0,
      "options": [
        { "brand": "华硕", "model": "ROG STRIX Z790-E", "specs": "ATX / DDR5 / WiFi", "price": 2899, "link": "https://item.jd.com/100056938678.html" },
        { "brand": "微星", "model": "MPG Z790 EDGE", "specs": "ATX / DDR5 / WiFi", "price": 1999, "link": "https://item.jd.com/100058365432.html" }
      ]
    },
    {
      "type": "显卡",
      "selected": 0,
      "options": [
        { "brand": "NVIDIA", "model": "RTX 4070 Ti Super", "specs": "16GB GDDR6X", "price": 6499, "link": "https://item.jd.com/100080746782.html" },
        { "brand": "AMD", "model": "RX 7900 XT", "specs": "20GB GDDR6", "price": 5299, "link": "https://item.jd.com/100060987654.html" }
      ]
    },
    {
      "type": "内存",
      "selected": 0,
      "options": [
        { "brand": "金士顿", "model": "FURY Beast DDR5", "specs": "32GB(16G×2) / 6000MHz", "price": 699, "link": "https://item.jd.com/100041234567.html" },
        { "brand": "芝奇", "model": "Trident Z5 DDR5", "specs": "32GB(16G×2) / 6400MHz", "price": 899, "link": "https://item.jd.com/100039876543.html" }
      ]
    },
    {
      "type": "硬盘",
      "selected": 0,
      "options": [
        { "brand": "三星", "model": "990 PRO", "specs": "1TB / NVMe PCIe 4.0", "price": 699, "link": "https://item.jd.com/100038765432.html" },
        { "brand": "西部数据", "model": "SN850X", "specs": "1TB / NVMe PCIe 4.0", "price": 599, "link": "https://item.jd.com/100037654321.html" }
      ]
    },
    {
      "type": "电源",
      "selected": 0,
      "options": [
        { "brand": "海韵", "model": "FOCUS GX-850", "specs": "850W / 80Plus金牌 / 全模组", "price": 899, "link": "https://item.jd.com/100036543210.html" }
      ]
    },
    {
      "type": "机箱",
      "selected": 0,
      "options": [
        { "brand": "联力", "model": "O11 Dynamic EVO", "specs": "中塔 / 玻璃侧透", "price": 999, "link": "https://item.jd.com/100035432109.html" }
      ]
    },
    {
      "type": "散热器",
      "selected": 0,
      "options": [
        { "brand": "利民", "model": "Frozen Magic 360", "specs": "360mm一体式水冷", "price": 499, "link": "https://item.jd.com/100034321098.html" },
        { "brand": "猫头鹰", "model": "NH-D15", "specs": "双塔风冷 / 150W+", "price": 699, "link": "https://item.jd.com/100033210987.html" }
      ]
    }
  ]
}
```

- [ ] **Step 2: Commit**

```bash
git add sample_config.json
git commit -m "feat: add sample PC configuration JSON"
```

---

## Task 2: Create the main HTML page with view mode

**Covers:** View mode, component display, alternative selection, total price

**Files:**
- Create: `index.html`

**Interfaces:**
- Consumes: JSON data (from URL param or import)
- Produces: Rendered configuration list with selectable alternatives

- [ ] **Step 1: Create HTML structure with CSS**

Create `index.html` with:
- Header section: config name, mode toggle button, import button
- Main content: component cards list
- Footer: total price display
- Modal template (hidden by default)
- Embedded CSS for styling

Key CSS:
- Card-based layout for components
- Each card shows: type label, selected option details (brand, model, specs, price), link button
- Alternative selector as a horizontal pill/dropdown within each card
- Responsive grid layout
- Modal overlay with form fields

- [ ] **Step 2: Implement JSON loading**

JavaScript functions:
- `loadConfig()`: parse URL param `?config=`, fetch JSON, store in memory
- `importConfig()`: file input handler, read JSON file
- `renderConfig()`: render all components to DOM

- [ ] **Step 3: Implement view mode rendering**

- Render each component as a card
- Show current selected option's brand, model, specs, price, link
- If multiple options exist, show selector (radio buttons or dropdown)
- On selector change, update displayed info and recalculate total
- Bottom bar shows sum of all selected options' prices

- [ ] **Step 4: Test locally**

Run: `python -m http.server 8080`
Open: `http://localhost:8080/?config=sample_config.json`
Verify: all components render, alternatives switch correctly, total price updates

- [ ] **Step 5: Commit**

```bash
git add index.html
git commit -m "feat: implement view mode with component display and total price"
```

---

## Task 3: Implement edit mode

**Covers:** Edit mode, add/delete/edit components, modal dialog

**Files:**
- Modify: `index.html`

**Interfaces:**
- Consumes: current config state from Task 2
- Produces: editable component list with modal for data entry

- [ ] **Step 1: Add edit mode toggle and UI state**

- Add edit/view toggle button in header
- Edit mode shows: "添加部件" button, per-component edit/delete icons
- View mode hides edit controls
- CSS for edit mode visual indicators

- [ ] **Step 2: Implement modal dialog**

Modal form fields:
- 部件类型: dropdown (preset options) + text input for custom
- 品牌: text input
- 型号: text input
- 参数: text input
- 价格: number input
- 商品链接: URL input
- 备选配置列表: show existing alternatives, add/remove buttons
- Save/Cancel buttons

- [ ] **Step 3: Implement add component flow**

- Click "添加部件" → open empty modal
- Save → append new component to config → re-render

- [ ] **Step 4: Implement edit component flow**

- Click edit icon → open modal pre-filled with component data
- Modal shows all alternatives for that component
- Can add new alternative, edit existing, remove alternative
- Save → update component in config → re-render

- [ ] **Step 5: Implement delete component flow**

- Click delete icon → confirmation dialog
- Confirm → remove component from config → re-render

- [ ] **Step 6: Implement JSON export**

- Add "导出JSON" button (visible in edit mode)
- Click → download current config as JSON file
- Filename: `{configName}.json`

- [ ] **Step 7: Test edit mode**

- Add a new component (e.g., 显示器) with 2 alternatives
- Edit an existing component, change selected alternative
- Delete a component
- Export JSON and verify content
- Switch between edit/view modes

- [ ] **Step 8: Commit**

```bash
git add index.html
git commit -m "feat: implement edit mode with modal editing and JSON export"
```

---

## Task 4: Create local development server

**Covers:** Local dev environment

**Files:**
- Create: `start_server.py`

- [ ] **Step 1: Create Python server script**

```python
#!/usr/bin/env python3
"""Local development server for PC Configuration Builder."""
import http.server
import os
import sys

PORT = 8080

class Handler(http.server.SimpleHTTPRequestHandler):
    def end_headers(self):
        self.send_header('Access-Control-Allow-Origin', '*')
        super().end_headers()

if __name__ == '__main__':
    os.chdir(os.path.dirname(os.path.abspath(__file__)))
    with http.server.HTTPServer(('', PORT), Handler) as httpd:
        print(f'Serving at http://localhost:{PORT}')
        print(f'Open: http://localhost:{PORT}/?config=sample_config.json')
        try:
            httpd.serve_forever()
        except KeyboardInterrupt:
            print('\nServer stopped.')
```

- [ ] **Step 2: Test server**

Run: `python start_server.py`
Open: `http://localhost:8080/?config=sample_config.json`
Verify: page loads, config displays correctly

- [ ] **Step 3: Commit**

```bash
git add start_server.py
git commit -m "feat: add local Python development server"
```

---

## Task 5: Final integration and polish

**Covers:** All sections — final verification

**Files:**
- Modify: `index.html` (if needed)

- [ ] **Step 1: End-to-end test**

- Load config via URL parameter
- Load config via import button
- View mode: switch alternatives, verify total price
- Edit mode: add component, edit component, delete component
- Export JSON, re-import, verify data integrity
- Test with empty config (no components)

- [ ] **Step 2: UI polish**

- Ensure consistent spacing and alignment
- Mobile responsiveness check
- Error handling for invalid JSON
- Empty state message when no config loaded

- [ ] **Step 3: Final commit**

```bash
git add -A
git commit -m "feat: complete PC configuration builder application"
```