From e5214420fc76c38e9289ef260c27d14437968d1b Mon Sep 17 00:00:00 2001
From: kushidou <kushidou@small09.top>
Date: Sat, 18 Jul 2026 20:53:35 +0800
Subject: [PATCH] feat: switch to table layout and add image URL field

---
 index.html         | 570 ++++++++++++++++++++-------------------------
 sample_config.json |  28 +--
 2 files changed, 263 insertions(+), 335 deletions(-)

diff --git a/index.html b/index.html
index 1d6119a..3bbf9d2 100644
--- a/index.html
+++ b/index.html
@@ -15,7 +15,7 @@ body {
 }
 
 .container {
-  max-width: 960px;
+  max-width: 1100px;
   margin: 0 auto;
   padding: 20px;
 }
@@ -56,29 +56,13 @@ body {
   font-weight: 500;
 }
 
-.btn-primary {
-  background: #1677ff;
-  color: #fff;
-}
+.btn-primary { background: #1677ff; color: #fff; }
 .btn-primary:hover { background: #4096ff; }
-
-.btn-default {
-  background: #fff;
-  color: #333;
-  border: 1px solid #d9d9d9;
-}
+.btn-default { background: #fff; color: #333; border: 1px solid #d9d9d9; }
 .btn-default:hover { border-color: #1677ff; color: #1677ff; }
-
-.btn-danger {
-  background: #ff4d4f;
-  color: #fff;
-}
+.btn-danger { background: #ff4d4f; color: #fff; }
 .btn-danger:hover { background: #ff7875; }
-
-.btn-sm {
-  padding: 4px 10px;
-  font-size: 12px;
-}
+.btn-sm { padding: 4px 10px; font-size: 12px; }
 
 .mode-toggle {
   background: #f0f0f0;
@@ -104,48 +88,140 @@ body {
   box-shadow: 0 1px 3px rgba(0,0,0,0.1);
 }
 
-/* Component Cards */
-.component-list {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
+/* Table */
+.config-table-wrap {
+  background: #fff;
+  border-radius: 12px;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
+  overflow: hidden;
   margin-bottom: 80px;
 }
 
-.component-card {
-  background: #fff;
-  border-radius: 12px;
-  padding: 20px 24px;
-  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
-  transition: box-shadow 0.2s;
+.config-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 14px;
 }
 
-.component-card:hover {
-  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
+.config-table thead {
+  background: #fafafa;
 }
 
-.card-header {
+.config-table th {
+  padding: 12px 16px;
+  text-align: left;
+  font-weight: 600;
+  color: #666;
+  font-size: 13px;
+  border-bottom: 1px solid #f0f0f0;
+  white-space: nowrap;
+}
+
+.config-table td {
+  padding: 12px 16px;
+  border-bottom: 1px solid #f0f0f0;
+  vertical-align: middle;
+}
+
+.config-table tbody tr:last-child td {
+  border-bottom: none;
+}
+
+.config-table tbody tr:hover {
+  background: #fafafa;
+}
+
+/* Image cell */
+.cell-img {
+  width: 64px;
+  height: 64px;
+  border-radius: 8px;
+  object-fit: contain;
+  background: #f5f5f5;
+  border: 1px solid #eee;
+}
+
+.cell-img-placeholder {
+  width: 64px;
+  height: 64px;
+  border-radius: 8px;
+  background: #f5f5f5;
+  border: 1px solid #eee;
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  margin-bottom: 12px;
+  justify-content: center;
+  color: #ccc;
+  font-size: 20px;
 }
 
-.component-type {
+/* Type badge */
+.type-badge {
   font-size: 13px;
   font-weight: 600;
   color: #1677ff;
   background: #e6f4ff;
-  padding: 4px 12px;
+  padding: 4px 10px;
   border-radius: 6px;
+  display: inline-block;
 }
 
-.card-actions {
+/* Price cell */
+.price-cell {
+  font-weight: 700;
+  color: #ff4d4f;
+  white-space: nowrap;
+}
+
+.price-cell .currency {
+  font-size: 12px;
+  font-weight: 500;
+}
+
+/* Link cell */
+.link-cell a {
+  color: #1677ff;
+  text-decoration: none;
+  font-size: 13px;
+}
+.link-cell a:hover { text-decoration: underline; }
+
+/* Alt selector */
+.alt-selector {
+  margin-top: 4px;
+}
+
+.alt-label {
+  font-size: 11px;
+  color: #999;
+  margin-bottom: 4px;
+}
+
+.alt-options {
   display: flex;
-  gap: 6px;
+  gap: 4px;
+  flex-wrap: wrap;
 }
 
-.card-actions button {
+.alt-pill {
+  padding: 3px 8px;
+  border: 1px solid #e8e8e8;
+  border-radius: 4px;
+  font-size: 11px;
+  cursor: pointer;
+  background: #fff;
+  color: #666;
+  transition: all 0.2s;
+}
+
+.alt-pill:hover { border-color: #1677ff; color: #1677ff; }
+.alt-pill.active { border-color: #1677ff; background: #e6f4ff; color: #1677ff; font-weight: 500; }
+
+/* Action cells */
+.action-cell {
+  white-space: nowrap;
+}
+
+.action-cell button {
   background: none;
   border: 1px solid #e8e8e8;
   border-radius: 6px;
@@ -154,107 +230,17 @@ body {
   font-size: 12px;
   color: #666;
   transition: all 0.2s;
+  margin-left: 4px;
 }
 
-.card-actions button:hover {
-  border-color: #1677ff;
-  color: #1677ff;
-}
+.action-cell button:first-child { margin-left: 0; }
+.action-cell button:hover { border-color: #1677ff; color: #1677ff; }
+.action-cell button.delete-btn:hover { border-color: #ff4d4f; color: #ff4d4f; }
 
-.card-actions button.delete-btn:hover {
-  border-color: #ff4d4f;
-  color: #ff4d4f;
-}
-
-.card-body {
-  display: grid;
-  grid-template-columns: 1fr auto;
-  gap: 8px 20px;
-  align-items: start;
-}
-
-.card-info {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-}
-
-.info-row {
-  display: flex;
-  align-items: baseline;
-  gap: 8px;
-}
-
-.info-label {
-  font-size: 12px;
-  color: #999;
-  min-width: 42px;
-}
-
-.info-value {
-  font-size: 14px;
-  color: #333;
-}
-
-.info-value a {
-  color: #1677ff;
-  text-decoration: none;
-}
-.info-value a:hover { text-decoration: underline; }
-
-.card-price {
-  font-size: 22px;
-  font-weight: 700;
-  color: #ff4d4f;
-  white-space: nowrap;
-}
-
-.card-price .currency {
-  font-size: 14px;
-  font-weight: 500;
-}
-
-/* Alternative Selector */
-.alt-selector {
-  grid-column: 1 / -1;
-  margin-top: 8px;
-  padding-top: 12px;
-  border-top: 1px solid #f0f0f0;
-}
-
-.alt-label {
-  font-size: 12px;
-  color: #999;
-  margin-bottom: 6px;
-}
-
-.alt-options {
-  display: flex;
-  gap: 6px;
-  flex-wrap: wrap;
-}
-
-.alt-pill {
-  padding: 5px 12px;
-  border: 1px solid #e8e8e8;
-  border-radius: 6px;
-  font-size: 12px;
-  cursor: pointer;
-  background: #fff;
-  color: #666;
-  transition: all 0.2s;
-}
-
-.alt-pill:hover {
-  border-color: #1677ff;
-  color: #1677ff;
-}
-
-.alt-pill.active {
-  border-color: #1677ff;
-  background: #e6f4ff;
-  color: #1677ff;
-  font-weight: 500;
+/* Add button row */
+.add-row {
+  padding: 16px;
+  text-align: center;
 }
 
 /* Footer / Total */
@@ -270,17 +256,14 @@ body {
 }
 
 .footer-inner {
-  max-width: 960px;
+  max-width: 1100px;
   margin: 0 auto;
   display: flex;
   align-items: center;
   justify-content: space-between;
 }
 
-.footer-label {
-  font-size: 14px;
-  color: #666;
-}
+.footer-label { font-size: 14px; color: #666; }
 
 .footer-total {
   font-size: 28px;
@@ -288,9 +271,7 @@ body {
   color: #ff4d4f;
 }
 
-.footer-total .currency {
-  font-size: 16px;
-}
+.footer-total .currency { font-size: 16px; }
 
 /* Modal */
 .modal-overlay {
@@ -303,14 +284,12 @@ body {
   align-items: center;
 }
 
-.modal-overlay.active {
-  display: flex;
-}
+.modal-overlay.active { display: flex; }
 
 .modal {
   background: #fff;
   border-radius: 12px;
-  width: 560px;
+  width: 600px;
   max-width: 90vw;
   max-height: 85vh;
   overflow-y: auto;
@@ -324,10 +303,7 @@ body {
   justify-content: space-between;
 }
 
-.modal-header h2 {
-  font-size: 18px;
-  font-weight: 600;
-}
+.modal-header h2 { font-size: 18px; font-weight: 600; }
 
 .modal-close {
   background: none;
@@ -339,13 +315,9 @@ body {
 }
 .modal-close:hover { color: #333; }
 
-.modal-body {
-  padding: 20px 24px;
-}
+.modal-body { padding: 20px 24px; }
 
-.form-group {
-  margin-bottom: 16px;
-}
+.form-group { margin-bottom: 16px; }
 
 .form-group label {
   display: block;
@@ -356,8 +328,7 @@ body {
 }
 
 .form-group input,
-.form-group select,
-.form-group textarea {
+.form-group select {
   width: 100%;
   padding: 8px 12px;
   border: 1px solid #d9d9d9;
@@ -368,8 +339,7 @@ body {
 }
 
 .form-group input:focus,
-.form-group select:focus,
-.form-group textarea:focus {
+.form-group select:focus {
   outline: none;
   border-color: #1677ff;
   box-shadow: 0 0 0 2px rgba(22,119,255,0.1);
@@ -395,17 +365,13 @@ body {
   margin-bottom: 12px;
 }
 
-.alt-section-header h3 {
-  font-size: 14px;
-  font-weight: 600;
-}
+.alt-section-header h3 { font-size: 14px; font-weight: 600; }
 
 .alt-item {
   background: #fafafa;
   border-radius: 8px;
   padding: 12px;
   margin-bottom: 8px;
-  position: relative;
 }
 
 .alt-item-header {
@@ -415,11 +381,7 @@ body {
   margin-bottom: 8px;
 }
 
-.alt-item-label {
-  font-size: 12px;
-  font-weight: 600;
-  color: #1677ff;
-}
+.alt-item-label { font-size: 12px; font-weight: 600; color: #1677ff; }
 
 .alt-item-remove {
   background: none;
@@ -444,10 +406,7 @@ body {
   color: #999;
 }
 
-.empty-state p {
-  margin-bottom: 16px;
-  font-size: 15px;
-}
+.empty-state p { margin-bottom: 16px; font-size: 15px; }
 
 /* Import Overlay */
 .import-overlay {
@@ -460,9 +419,7 @@ body {
   align-items: center;
 }
 
-.import-overlay.active {
-  display: flex;
-}
+.import-overlay.active { display: flex; }
 
 .import-box {
   background: #fff;
@@ -472,18 +429,14 @@ body {
   box-shadow: 0 8px 32px rgba(0,0,0,0.2);
 }
 
-.import-box p {
-  margin-bottom: 16px;
-  color: #666;
-}
+.import-box p { margin-bottom: 16px; color: #666; }
 
 /* Responsive */
-@media (max-width: 640px) {
+@media (max-width: 768px) {
   .container { padding: 12px; }
   .header { padding: 16px; }
-  .component-card { padding: 16px; }
-  .card-body { grid-template-columns: 1fr; }
-  .card-price { justify-self: start; }
+  .config-table-wrap { overflow-x: auto; }
+  .config-table { min-width: 700px; }
   .form-row { grid-template-columns: 1fr; }
 }
 </style>
@@ -491,7 +444,6 @@ body {
 <body>
 
 <div class="container">
-  <!-- Header -->
   <div class="header">
     <h1 id="configName">PC装机配置表</h1>
     <div class="header-actions">
@@ -504,12 +456,11 @@ body {
     </div>
   </div>
 
-  <!-- Component List -->
-  <div class="component-list" id="componentList"></div>
+  <div id="contentArea"></div>
 </div>
 
 <!-- Footer Total -->
-<div class="footer" id="footer">
+<div class="footer">
   <div class="footer-inner">
     <span class="footer-label">总计</span>
     <span class="footer-total"><span class="currency">¥</span><span id="totalPrice">0</span></span>
@@ -525,7 +476,6 @@ body {
     </div>
     <div class="modal-body">
       <input type="hidden" id="editComponentIndex" value="-1">
-      <input type="hidden" id="editAltIndex" value="-1">
 
       <div class="form-group">
         <label>部件类型</label>
@@ -545,6 +495,11 @@ body {
         <input type="text" id="formTypeCustom" style="display:none;margin-top:6px" placeholder="输入自定义类型名称">
       </div>
 
+      <div class="form-group">
+        <label>图片链接</label>
+        <input type="url" id="formImage" placeholder="https://example.com/image.jpg">
+      </div>
+
       <div class="form-row">
         <div class="form-group">
           <label>品牌</label>
@@ -619,34 +574,21 @@ body {
 // ========== State ==========
 let config = { configName: 'PC装机配置表', components: [] };
 let currentMode = 'view';
-let tempAlts = []; // temporary alt items in modal
+let tempAlts = [];
 
-// ========== Preset Types ==========
 const PRESET_TYPES = ['CPU', '主板', '显卡', '内存', '硬盘', '电源', '机箱', '散热器', '显示器'];
 
 // ========== Init ==========
-document.addEventListener('DOMContentLoaded', () => {
-  loadFromURL();
-});
+document.addEventListener('DOMContentLoaded', loadFromURL);
 
 function loadFromURL() {
   const params = new URLSearchParams(window.location.search);
   const configURL = params.get('config');
   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();
-      })
-      .catch(err => {
-        console.error('加载配置失败:', err);
-        render();
-      });
+      .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(); })
+      .catch(err => { console.error('加载配置失败:', err); render(); });
   } else {
     render();
   }
@@ -663,10 +605,10 @@ function setMode(mode) {
 
 // ========== Render ==========
 function render() {
-  const list = document.getElementById('componentList');
+  const area = document.getElementById('contentArea');
 
   if (!config.components || config.components.length === 0) {
-    list.innerHTML = `
+    area.innerHTML = `
       <div class="empty-state">
         <p>暂无配置数据</p>
         <button class="btn btn-primary" onclick="loadSample()">加载示例配置</button>
@@ -676,62 +618,79 @@ function render() {
     return;
   }
 
-  list.innerHTML = config.components.map((comp, i) => renderCard(comp, i)).join('');
-  updateTotal();
-}
+  const editHeaders = currentMode === 'edit' ? '<th style="width:100px">操作</th>' : '';
 
-function renderCard(comp, index) {
-  const selectedIdx = comp.selected || 0;
-  const opt = comp.options[selectedIdx];
-  if (!opt) return '';
+  let rows = config.components.map((comp, i) => {
+    const selectedIdx = comp.selected || 0;
+    const opt = comp.options[selectedIdx];
+    if (!opt) return '';
 
-  const editActions = currentMode === 'edit' ? `
-    <div class="card-actions">
-      <button onclick="editComponent(${index})">编辑</button>
-      <button class="delete-btn" onclick="confirmDelete(${index})">删除</button>
-    </div>` : '';
+    const imgCell = opt.image
+      ? `<img class="cell-img" src="${opt.image}" alt="${opt.model}" onerror="this.outerHTML='<div class=\\'cell-img-placeholder\\'> </div>'">`
+      : '<div class="cell-img-placeholder"> </div>';
 
-  const altSelector = comp.options.length > 1 ? `
-    <div class="alt-selector">
-      <div class="alt-label">备选方案（${comp.options.length}个可选）</div>
-      <div class="alt-options">
-        ${comp.options.map((o, j) => `
-          <button class="alt-pill ${j === selectedIdx ? 'active' : ''}" onclick="selectAlt(${index}, ${j})">
-            ${o.brand} ${o.model} ¥${o.price}
-          </button>
-        `).join('')}
-      </div>
-    </div>` : '';
+    const linkCell = opt.link
+      ? `<a href="${opt.link}" target="_blank" rel="noopener">查看商品</a>`
+      : '-';
 
-  return `
-    <div class="component-card">
-      <div class="card-header">
-        <span class="component-type">${comp.type}</span>
-        ${editActions}
-      </div>
-      <div class="card-body">
-        <div class="card-info">
-          <div class="info-row">
-            <span class="info-label">品牌</span>
-            <span class="info-value">${opt.brand || '-'}</span>
-          </div>
-          <div class="info-row">
-            <span class="info-label">型号</span>
-            <span class="info-value">${opt.model || '-'}</span>
-          </div>
-          <div class="info-row">
-            <span class="info-label">参数</span>
-            <span class="info-value">${opt.specs || '-'}</span>
-          </div>
-          <div class="info-row">
-            <span class="info-label">链接</span>
-            <span class="info-value">${opt.link ? `<a href="${opt.link}" target="_blank" rel="noopener">查看商品</a>` : '-'}</span>
-          </div>
+    const altCell = comp.options.length > 1 ? `
+      <div class="alt-selector">
+        <div class="alt-label">备选 (${comp.options.length})</div>
+        <div class="alt-options">
+          ${comp.options.map((o, j) => `
+            <button class="alt-pill ${j === selectedIdx ? 'active' : ''}" onclick="selectAlt(${i}, ${j})">
+              ${o.brand} ${o.model} ¥${o.price}
+            </button>
+          `).join('')}
         </div>
-        <div class="card-price"><span class="currency">¥</span>${opt.price || 0}</div>
-        ${altSelector}
-      </div>
+      </div>` : '';
+
+    const actionCell = currentMode === 'edit' ? `
+      <td class="action-cell">
+        <button onclick="editComponent(${i})">编辑</button>
+        <button class="delete-btn" onclick="confirmDelete(${i})">删除</button>
+      </td>` : '';
+
+    return `
+      <tr>
+        <td>${imgCell}</td>
+        <td><span class="type-badge">${comp.type}</span></td>
+        <td>${opt.brand || '-'}</td>
+        <td>${opt.model || '-'}</td>
+        <td>${opt.specs || '-'}</td>
+        <td class="price-cell"><span class="currency">¥</span>${(opt.price || 0).toLocaleString()}</td>
+        <td class="link-cell">${linkCell}</td>
+        <td>${altCell}</td>
+        ${actionCell}
+      </tr>`;
+  }).join('');
+
+  const addRow = currentMode === 'edit'
+    ? `<div class="add-row"><button class="btn btn-primary" onclick="addComponent()">+ 添加部件</button></div>`
+    : '';
+
+  area.innerHTML = `
+    <div class="config-table-wrap">
+      <table class="config-table">
+        <thead>
+          <tr>
+            <th style="width:80px">图片</th>
+            <th style="width:80px">类型</th>
+            <th style="width:80px">品牌</th>
+            <th style="width:120px">型号</th>
+            <th>参数</th>
+            <th style="width:100px">价格</th>
+            <th style="width:80px">链接</th>
+            <th style="width:200px">备选</th>
+            ${editHeaders}
+          </tr>
+        </thead>
+        <tbody>${rows}</tbody>
+      </table>
+      ${addRow}
     </div>`;
+
+  updateTotal();
 }
 
 // ========== Total Price ==========
@@ -762,12 +721,10 @@ function closeImport() {
 function handleFileImport(event) {
   const file = event.target.files[0];
   if (!file) return;
-
   const reader = new FileReader();
   reader.onload = (e) => {
     try {
-      const data = JSON.parse(e.target.result);
-      config = data;
+      config = JSON.parse(e.target.result);
       document.getElementById('configName').textContent = config.configName || 'PC装机配置表';
       closeImport();
       render();
@@ -781,11 +738,7 @@ function handleFileImport(event) {
 function loadSample() {
   fetch('sample_config.json')
     .then(r => 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装机配置表'; render(); })
     .catch(err => alert('加载示例失败: ' + err.message));
 }
 
@@ -801,7 +754,7 @@ function exportJSON() {
   URL.revokeObjectURL(url);
 }
 
-// ========== Edit Modal ==========
+// ========== Modal ==========
 function openModal(title) {
   document.getElementById('modalTitle').textContent = title;
   document.getElementById('editModal').classList.add('active');
@@ -814,16 +767,12 @@ function closeModal() {
 
 function onTypeChange() {
   const sel = document.getElementById('formType');
-  const custom = document.getElementById('formTypeCustom');
-  custom.style.display = sel.value === '__custom__' ? '' : 'none';
+  document.getElementById('formTypeCustom').style.display = sel.value === '__custom__' ? '' : 'none';
 }
 
 function getFormType() {
   const sel = document.getElementById('formType');
-  if (sel.value === '__custom__') {
-    return document.getElementById('formTypeCustom').value.trim();
-  }
-  return sel.value;
+  return sel.value === '__custom__' ? document.getElementById('formTypeCustom').value.trim() : sel.value;
 }
 
 function setFormType(type) {
@@ -841,6 +790,7 @@ function setFormType(type) {
 
 function getFormData() {
   return {
+    image: document.getElementById('formImage').value.trim(),
     brand: document.getElementById('formBrand').value.trim(),
     model: document.getElementById('formModel').value.trim(),
     specs: document.getElementById('formSpecs').value.trim(),
@@ -850,6 +800,7 @@ function getFormData() {
 }
 
 function setFormData(opt) {
+  document.getElementById('formImage').value = opt.image || '';
   document.getElementById('formBrand').value = opt.brand || '';
   document.getElementById('formModel').value = opt.model || '';
   document.getElementById('formSpecs').value = opt.specs || '';
@@ -861,16 +812,14 @@ function clearForm() {
   document.getElementById('formType').value = '';
   document.getElementById('formTypeCustom').value = '';
   document.getElementById('formTypeCustom').style.display = 'none';
-  document.getElementById('formBrand').value = '';
-  document.getElementById('formModel').value = '';
-  document.getElementById('formSpecs').value = '';
-  document.getElementById('formPrice').value = '';
-  document.getElementById('formLink').value = '';
+  ['formImage', 'formBrand', 'formModel', 'formSpecs', 'formPrice', 'formLink'].forEach(id => {
+    document.getElementById(id).value = '';
+  });
   tempAlts = [];
   renderAltList();
 }
 
-// ========== Add Component ==========
+// ========== Add / Edit Component ==========
 function addComponent() {
   clearForm();
   document.getElementById('editComponentIndex').value = -1;
@@ -878,28 +827,20 @@ function addComponent() {
   openModal('添加部件');
 }
 
-// ========== Edit Component ==========
 function editComponent(index) {
   const comp = config.components[index];
   document.getElementById('editComponentIndex').value = index;
-
   setFormType(comp.type);
-
-  // Load first option as main
-  const opt = comp.options[0] || {};
-  setFormData(opt);
-
-  // Load alternatives (skip first)
+  setFormData(comp.options[0] || {});
   tempAlts = comp.options.slice(1).map(o => ({...o}));
   document.getElementById('altSection').style.display = tempAlts.length > 0 || comp.options.length > 0 ? '' : 'none';
   renderAltList();
-
   openModal('编辑部件');
 }
 
 // ========== Alternatives in Modal ==========
 function addAltItem() {
-  tempAlts.push({ brand: '', model: '', specs: '', price: 0, link: '' });
+  tempAlts.push({ image: '', brand: '', model: '', specs: '', price: 0, link: '' });
   renderAltList();
 }
 
@@ -914,13 +855,16 @@ function renderAltList() {
     container.innerHTML = '<p style="font-size:12px;color:#999">暂无备选配置，点击上方按钮添加</p>';
     return;
   }
-
   container.innerHTML = tempAlts.map((alt, i) => `
     <div class="alt-item">
       <div class="alt-item-header">
         <span class="alt-item-label">备选 ${i + 1}</span>
         <button class="alt-item-remove" onclick="removeAltItem(${i})">删除</button>
       </div>
+      <div class="form-group">
+        <label>图片链接</label>
+        <input type="url" value="${alt.image || ''}" onchange="tempAlts[${i}].image=this.value" placeholder="https://example.com/image.jpg">
+      </div>
       <div class="form-row">
         <div class="form-group">
           <label>品牌</label>
@@ -952,39 +896,27 @@ function renderAltList() {
 // ========== Save Component ==========
 function saveComponent() {
   const type = getFormType();
-  if (!type) {
-    alert('请选择或输入部件类型');
-    return;
-  }
+  if (!type) { alert('请选择或输入部件类型'); return; }
 
   const mainOpt = getFormData();
   const options = [mainOpt, ...tempAlts];
   const index = parseInt(document.getElementById('editComponentIndex').value);
 
   if (index >= 0) {
-    // Edit existing
     config.components[index].type = type;
     config.components[index].options = options;
-    if (config.components[index].selected >= options.length) {
-      config.components[index].selected = 0;
-    }
+    if (config.components[index].selected >= options.length) config.components[index].selected = 0;
   } else {
-    // Add new
-    config.components.push({
-      type: type,
-      selected: 0,
-      options: options
-    });
+    config.components.push({ type, selected: 0, options });
   }
 
   closeModal();
   render();
 }
 
-// ========== Delete Component ==========
+// ========== Delete ==========
 function confirmDelete(index) {
-  document.getElementById('confirmMessage').textContent =
-    `确定要删除「${config.components[index].type}」吗？`;
+  document.getElementById('confirmMessage').textContent = `确定要删除「${config.components[index].type}」吗？`;
   document.getElementById('confirmDeleteBtn').onclick = () => {
     config.components.splice(index, 1);
     closeConfirm();
@@ -997,13 +929,9 @@ function closeConfirm() {
   document.getElementById('confirmModal').classList.remove('active');
 }
 
-// ========== Keyboard Shortcuts ==========
+// ========== Keyboard ==========
 document.addEventListener('keydown', (e) => {
-  if (e.key === 'Escape') {
-    closeModal();
-    closeImport();
-    closeConfirm();
-  }
+  if (e.key === 'Escape') { closeModal(); closeImport(); closeConfirm(); }
 });
 </script>
 
diff --git a/sample_config.json b/sample_config.json
index f648b3e..6c88faa 100644
--- a/sample_config.json
+++ b/sample_config.json
@@ -5,62 +5,62 @@
       "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" }
+        { "image": "", "brand": "Intel", "model": "i7-14700K", "specs": "20核28线程 / 3.4GHz", "price": 2499, "link": "https://item.jd.com/100060726782.html" },
+        { "image": "", "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" }
+        { "image": "", "brand": "华硕", "model": "ROG STRIX Z790-E", "specs": "ATX / DDR5 / WiFi", "price": 2899, "link": "https://item.jd.com/100056938678.html" },
+        { "image": "", "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" }
+        { "image": "", "brand": "NVIDIA", "model": "RTX 4070 Ti Super", "specs": "16GB GDDR6X", "price": 6499, "link": "https://item.jd.com/100080746782.html" },
+        { "image": "", "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" }
+        { "image": "", "brand": "金士顿", "model": "FURY Beast DDR5", "specs": "32GB(16G×2) / 6000MHz", "price": 699, "link": "https://item.jd.com/100041234567.html" },
+        { "image": "", "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" }
+        { "image": "", "brand": "三星", "model": "990 PRO", "specs": "1TB / NVMe PCIe 4.0", "price": 699, "link": "https://item.jd.com/100038765432.html" },
+        { "image": "", "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" }
+        { "image": "", "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" }
+        { "image": "", "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" }
+        { "image": "", "brand": "利民", "model": "Frozen Magic 360", "specs": "360mm一体式水冷", "price": 499, "link": "https://item.jd.com/100034321098.html" },
+        { "image": "", "brand": "猫头鹰", "model": "NH-D15", "specs": "双塔风冷 / 150W+", "price": 699, "link": "https://item.jd.com/100033210987.html" }
       ]
     }
   ]