feat: add version and updatedAt fields with export check and display

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>` 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"
+```

editor.html

@@ -431,6 +431,7 @@ body {
   <div class="header">
     <h1 id="configName">PC装机配置表 - 编辑器</h1>
     <div class="header-actions">
+      <span class="version-info" style="font-size:13px;color:#999;margin-right:8px">版本: <input type="text" id="versionInput" value="1.0.0" style="width:80px;padding:2px 6px;border:1px solid #d9d9d9;border-radius:4px;font-size:13px" onchange="config.version=this.value"></span>
       <button class="btn btn-default btn-sm" onclick="openLocalFile()">打开文件</button>
       <button class="btn btn-primary btn-sm" onclick="exportJSON()">导出JSON</button>
     </div>
@@ -551,7 +552,8 @@ body {
 
 <script>
 // ========== State ==========
-let config = { configName: 'PC装机配置表', components: [] };
+let config = { configName: 'PC装机配置表', version: '1.0.0', updatedAt: '', components: [] };
+let initialVersion = '1.0.0';
 let tempAlts = [];
 
 const PRESET_TYPES = ['CPU', '主板', '显卡', '内存', '硬盘', '电源', '机箱', '散热器', '显示器'];
@@ -666,6 +668,8 @@ function handleFileImport(event) {
   reader.onload = (e) => {
     try {
       config = JSON.parse(e.target.result);
+      initialVersion = config.version || '1.0.0';
+      document.getElementById('versionInput').value = initialVersion;
       document.getElementById('configName').textContent = (config.configName || 'PC装机配置表') + ' - 编辑器';
       render();
     } catch (err) {
@@ -677,6 +681,11 @@ function handleFileImport(event) {
 }
 
 function exportJSON() {
+  config.version = document.getElementById('versionInput').value.trim() || '1.0.0';
+  if (config.version === initialVersion) {
+    if (!confirm(`版本号仍为 ${config.version}，未修改。是否继续导出？`)) return;
+  }
+  config.updatedAt = new Date().toISOString();
   const json = JSON.stringify(config, null, 2);
   const blob = new Blob([json], { type: 'application/json' });
   const url = URL.createObjectURL(blob);

index.html

@@ -253,7 +253,10 @@ body {
 
 <div class="container">
   <div class="header">
+    <div>
       <h1 id="configName">PC装机配置表</h1>
+      <div id="configMeta" style="font-size:12px;color:#999;margin-top:4px"></div>
+    </div>
   </div>
 
   <div id="contentArea"></div>
@@ -286,13 +289,25 @@ function loadFromURL() {
   if (configURL) {
     fetch(configURL)
       .then(r => { if (!r.ok) throw new Error(`HTTP ${r.status}`); return r.json(); })
-      .then(data => { config = data; document.getElementById('configName').textContent = config.configName || 'PC装机配置表'; render(); })
+      .then(data => { config = data; document.getElementById('configName').textContent = config.configName || 'PC装机配置表'; updateMeta(); render(); })
       .catch(err => { console.error('加载配置失败:', err); render(); });
   } else {
     render();
   }
 }
 
+// ========== Meta ==========
+function updateMeta() {
+  const meta = document.getElementById('configMeta');
+  const parts = [];
+  if (config.version) parts.push('v' + config.version);
+  if (config.updatedAt) {
+    const d = new Date(config.updatedAt);
+    parts.push('更新于 ' + d.toLocaleDateString('zh-CN') + ' ' + d.toLocaleTimeString('zh-CN', {hour:'2-digit', minute:'2-digit'}));
+  }
+  meta.textContent = parts.join(' · ');
+}
+
 // ========== Render ==========
 function render() {
   const area = document.getElementById('contentArea');

sample_config.json

@@ -1,5 +1,7 @@
 {
   "configName": "我的装机方案",
+  "version": "1.0.0",
+  "updatedAt": "2026-07-18T20:00:00.000Z",
   "components": [
     {
       "type": "CPU",