support custom item

sidepanel.js

@@ -3,40 +3,51 @@ const apiKeyInput = document.getElementById('apiKey');
 const scriptUrlInput = document.getElementById('scriptUrl');
 const modelInput = document.getElementById('modelInput');
 const saveConfigBtn = document.getElementById('saveConfig');
-const extractLaptopBtn = document.getElementById('extractLaptop');
-const extractPeripheralBtn = document.getElementById('extractPeripheral');
 const customInput = document.getElementById('customInput');
 const sendCustomBtn = document.getElementById('sendCustom');
 const statusBadge = document.getElementById('statusBadge');
 const resultsArea = document.getElementById('results');
 
+// Preset Management Elements
+const newPresetName = document.getElementById('newPresetName');
+const newPresetFields = document.getElementById('newPresetFields');
+const addPresetBtn = document.getElementById('addPreset');
+const presetList = document.getElementById('presetList');
+const presetButtonsContainer = document.getElementById('presetButtons');
+
 // Collapsible logic
 const toggleConfig = document.getElementById('toggleConfig');
 const configContent = document.getElementById('configContent');
 const configChevron = document.getElementById('configChevron');
 
+const DEFAULT_PRESETS = [
+  { id: 'p1', name: '提取笔记本', fields: '品牌, CPU, 内存, 存储, 价格, URL' },
+  { id: 'p2', name: '提取外设', fields: '品牌, 型号, 连接方式, 电池寿命, 价格, URL' }
+];
+
 toggleConfig.addEventListener('click', () => {
   const isHidden = configContent.classList.toggle('hidden');
   configChevron.classList.toggle('rotate-180', !isHidden);
 });
 
-// Load settings on startup
-chrome.storage.local.get(['geminiApiKey', 'googleScriptUrl', 'geminiModel'], (data) => {
+// Load settings and presets on startup
+chrome.storage.local.get(['geminiApiKey', 'googleScriptUrl', 'geminiModel', 'userPresets'], (data) => {
   if (data.geminiApiKey) {
     apiKeyInput.value = data.geminiApiKey;
-    // Fold by default if already configured
     configContent.classList.add('hidden');
     configChevron.classList.remove('rotate-180');
   } else {
-    // Expand if no API key
     configContent.classList.remove('hidden');
     configChevron.classList.add('rotate-180');
   }
   if (data.googleScriptUrl) scriptUrlInput.value = data.googleScriptUrl;
   if (data.geminiModel) modelInput.value = data.geminiModel;
+
+  const presets = data.userPresets || DEFAULT_PRESETS;
+  renderPresets(presets);
 });
 
-// Save settings
+// Save settings (including presets is handled separately via add/delete)
 saveConfigBtn.addEventListener('click', () => {
   const apiKey = apiKeyInput.value.trim();
   const scriptUrl = scriptUrlInput.value.trim();
@@ -51,12 +62,64 @@ saveConfigBtn.addEventListener('click', () => {
   });
 });
 
-// Action Handlers
-extractLaptopBtn.addEventListener('click', () => handleExtraction('laptop'));
-extractPeripheralBtn.addEventListener('click', () => handleExtraction('peripheral'));
-sendCustomBtn.addEventListener('click', () => handleExtraction('custom', customInput.value));
+// Preset Management Logic
+addPresetBtn.addEventListener('click', async () => {
+  const name = newPresetName.value.trim();
+  const fields = newPresetFields.value.trim();
+  if (!name || !fields) return alert('请输入名称和字段');
 
-async function handleExtraction(type, customText = '') {
+  const { userPresets = DEFAULT_PRESETS } = await chrome.storage.local.get('userPresets');
+  const newPreset = { id: Date.now().toString(), name, fields };
+  const updatedPresets = [...userPresets, newPreset];
+
+  await chrome.storage.local.set({ userPresets: updatedPresets });
+  newPresetName.value = '';
+  newPresetFields.value = '';
+  renderPresets(updatedPresets);
+});
+
+async function deletePreset(id) {
+  const { userPresets = DEFAULT_PRESETS } = await chrome.storage.local.get('userPresets');
+  const updatedPresets = userPresets.filter(p => p.id !== id);
+  await chrome.storage.local.set({ userPresets: updatedPresets });
+  renderPresets(updatedPresets);
+}
+
+function renderPresets(presets) {
+  // Clear containers
+  presetList.innerHTML = '';
+  presetButtonsContainer.innerHTML = '';
+
+  presets.forEach(preset => {
+    // 1. Render in Settings List
+    const item = document.createElement('div');
+    item.className = 'flex items-center justify-between bg-gray-50 p-2 rounded border border-gray-200 text-xs';
+    item.innerHTML = `
+      <div class="flex-1 overflow-hidden mr-2">
+        <div class="font-bold truncate">${preset.name}</div>
+        <div class="text-gray-500 truncate">${preset.fields}</div>
+      </div>
+      <button class="text-red-500 hover:text-red-700 font-bold p-1" data-id="${preset.id}">✕</button>
+    `;
+    item.querySelector('button').onclick = () => deletePreset(preset.id);
+    presetList.appendChild(item);
+
+    // 2. Render as Action Button
+    const btn = document.createElement('button');
+    btn.className = 'flex flex-col items-center justify-center p-4 bg-white border border-gray-200 rounded-lg hover:border-indigo-400 hover:bg-indigo-50 group transition-all';
+    btn.innerHTML = `
+      <span class="text-2xl mb-1 group-hover:scale-110 transition-transform">⚙️</span>
+      <span class="text-xs font-semibold">${preset.name}</span>
+    `;
+    btn.onclick = () => handleExtraction('preset', preset);
+    presetButtonsContainer.appendChild(btn);
+  });
+}
+
+// Action Handlers
+sendCustomBtn.addEventListener('click', () => handleExtraction('custom', { fields: customInput.value }));
+
+async function handleExtraction(type, presetObj) {
   const { geminiApiKey, googleScriptUrl, geminiModel } = await chrome.storage.local.get(['geminiApiKey', 'googleScriptUrl', 'geminiModel']);
   
   if (!geminiApiKey) {
@@ -66,10 +129,9 @@ async function handleExtraction(type, customText = '') {
 
   const selectedModel = geminiModel || 'gemini-1.5-flash';
   updateStatus('提取中...', 'bg-blue-500 text-white');
-  resultsArea.textContent = `正在使用 ${selectedModel} 读取内容...`;
+  resultsArea.textContent = `正在使用 ${selectedModel} 提取 ${presetObj.name || '自定义项'}...`;
 
   try {
-    // 1. Get current tab content
     const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
     const [{ result: pageData }] = await chrome.scripting.executeScript({
       target: { tabId: tab.id },
@@ -78,7 +140,6 @@ async function handleExtraction(type, customText = '') {
 
     resultsArea.textContent = '正在发送至 Gemini...';
     
-    // 2. Prepare Prompt
     const systemPrompt = `你是一个专业的采购助手。
 请从以下文本中提取产品数据。
 将技术术语翻译成中文。
@@ -87,25 +148,16 @@ async function handleExtraction(type, customText = '') {
 URL: ${pageData.url}
 Title: ${pageData.title}`;
 
-    let userPrompt = "";
-    if (type === 'laptop') {
-      userPrompt = "提取笔记本详情：品牌、CPU、内存、存储、价格、URL。仅返回 JSON。";
-    } else if (type === 'peripheral') {
-      userPrompt = "提取外设详情：品牌、型号、连接方式、电池寿命、价格、URL。仅返回 JSON。";
-    } else {
-      userPrompt = `提取以下信息：${customText}。仅返回 JSON。`;
-    }
+    const userPrompt = `提取以下字段：${presetObj.fields}。仅返回 JSON 格式。`;
 
-    // 3. Call Gemini API
     const geminiResult = await callGemini(geminiApiKey, selectedModel, systemPrompt, pageData.text, userPrompt);
     const cleanedJson = parseGeminiJson(geminiResult);
     
     resultsArea.textContent = JSON.stringify(cleanedJson, null, 2);
 
-    // 4. Send to Google Apps Script
     if (googleScriptUrl) {
       updateStatus('保存至表格...', 'bg-purple-500 text-white');
-      await sendToGoogleScript(googleScriptUrl, { ...cleanedJson, source_url: pageData.url, timestamp: new Date().toISOString() });
+      await sendToGoogleScript(googleScriptUrl, { ...cleanedJson, preset_type: presetObj.name || 'custom', source_url: pageData.url, timestamp: new Date().toISOString() });
       updateStatus('成功', 'bg-green-500 text-white');
     } else {
       updateStatus('完成 (未配置脚本链接)', 'bg-yellow-500 text-white');
@@ -120,7 +172,6 @@ Title: ${pageData.title}`;
 
 async function callGemini(apiKey, model, systemPrompt, contextText, userPrompt) {
   const url = `https://generativelanguage.googleapis.com/v1beta/models/${model}:generateContent?key=${apiKey}`;
-  
   const response = await fetch(url, {
     method: 'POST',
     headers: { 'Content-Type': 'application/json' },
@@ -132,7 +183,6 @@ async function callGemini(apiKey, model, systemPrompt, contextText, userPrompt)
       }]
     })
   });
-
   const data = await response.json();
   if (data.error) throw new Error(data.error.message);
   return data.candidates[0].content.parts[0].text;
@@ -140,7 +190,6 @@ async function callGemini(apiKey, model, systemPrompt, contextText, userPrompt)
 
 function parseGeminiJson(text) {
   try {
-    // Remove markdown code blocks if any
     const jsonStr = text.replace(/```json/g, '').replace(/```/g, '').trim();
     return JSON.parse(jsonStr);
   } catch (e) {
@@ -149,13 +198,12 @@ function parseGeminiJson(text) {
 }
 
 async function sendToGoogleScript(url, payload) {
-  const response = await fetch(url, {
+  return await fetch(url, {
     method: 'POST',
-    mode: 'no-cors', // Apps Script often requires no-cors for simple POST
+    mode: 'no-cors',
     headers: { 'Content-Type': 'application/json' },
     body: JSON.stringify(payload)
   });
-  return response;
 }
 
 function updateStatus(text, classes) {