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

{
  "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

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

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

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

#!/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

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

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