From 05ed76f625b92cb87c90930982379115b74a1daa Mon Sep 17 00:00:00 2001 From: kushidou Date: Sat, 18 Jul 2026 22:38:10 +0800 Subject: [PATCH] feat: add version and updatedAt fields with export check and display --- .../plans/2026-07-18-pc-config-builder.md | 315 ++++++++++++++++++ editor.html | 11 +- index.html | 19 +- sample_config.json | 2 + 4 files changed, 344 insertions(+), 3 deletions(-) create mode 100644 docs/compose/plans/2026-07-18-pc-config-builder.md diff --git a/docs/compose/plans/2026-07-18-pc-config-builder.md b/docs/compose/plans/2026-07-18-pc-config-builder.md new file mode 100644 index 0000000..c1df661 --- /dev/null +++ b/docs/compose/plans/2026-07-18-pc-config-builder.md @@ -0,0 +1,315 @@ +# 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 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" +``` diff --git a/editor.html b/editor.html index 399ff60..13ae525 100644 --- a/editor.html +++ b/editor.html @@ -431,6 +431,7 @@ body {

PC装机配置表 - 编辑器

+ 版本:
@@ -551,7 +552,8 @@ body {