fix ui

sidepanel.html

@@ -16,44 +16,53 @@
 
     <!-- API Config -->
     <section class="bg-white rounded-lg shadow-sm mb-4 border border-gray-200">
-      <div id="toggleConfig" class="p-4 flex items-center justify-between cursor-pointer hover:bg-gray-50 transition-colors">
+      <div id="toggleConfig" class="px-4 py-2 flex items-center justify-between cursor-pointer hover:bg-gray-50 transition-colors">
         <h2 class="text-sm font-semibold text-gray-700">配置选项</h2>
         <span id="configChevron" class="text-gray-400 transition-transform" style="font-size: 10px;">▼</span>
       </div>
-      <div id="configContent" class="px-4 pb-4 pt-2 space-y-3 hidden">
+      <div id="configContent" class="px-4 pb-4 pt-2 hidden">
+        <!-- Compact Gemini Config -->
+        <div class="space-y-2 mb-4">
           <div>
-          <label class="block text-xs text-gray-500">Gemini API 密钥</label>
-          <input type="password" id="apiKey" class="w-full mt-1 border border-gray-300 rounded px-2 py-1 text-sm focus:ring-1 focus:ring-indigo-500 outline-none" placeholder="输入 API Key">
+            <label class="block text-[10px] uppercase font-bold text-gray-400">Gemini API 密钥</label>
+            <input type="password" id="apiKey" class="w-full mt-0.5 border border-gray-300 rounded px-2 py-1 text-sm focus:ring-1 focus:ring-indigo-500 outline-none" placeholder="输入 API Key">
           </div>
           <div>
-          <label class="block text-xs text-gray-500">Apps Script 链接</label>
-          <input type="text" id="scriptUrl" class="w-full mt-1 border border-gray-300 rounded px-2 py-1 text-sm focus:ring-1 focus:ring-indigo-500 outline-none" placeholder="输入 Google Apps Script 链接">
+            <label class="block text-[10px] uppercase font-bold text-gray-400">Apps Script 链接</label>
+            <input type="text" id="scriptUrl" class="w-full mt-0.5 border border-gray-300 rounded px-2 py-1 text-sm focus:ring-1 focus:ring-indigo-500 outline-none" placeholder="输入 Google Apps Script 链接">
           </div>
           <div>
-          <label class="block text-xs text-gray-500">AI 模型名称</label>
-          <input type="text" id="modelInput" class="w-full mt-1 border border-gray-300 rounded px-2 py-1 text-sm focus:ring-1 focus:ring-indigo-500 outline-none" placeholder="例如：gemini-1.5-flash">
-        </div>
-        
-        <!-- Preset Management -->
-        <div class="pt-2 border-t border-gray-100">
-          <label class="block text-xs font-bold text-gray-600 mb-2">预设管理</label>
-          <div class="space-y-2">
-            <input type="text" id="newPresetName" class="w-full border border-gray-300 rounded px-2 py-1 text-sm outline-none" placeholder="预设名称 (如：手机)">
-            <textarea id="newPresetFields" class="w-full border border-gray-300 rounded px-2 py-1 text-sm outline-none h-16" placeholder="提取字段 (用逗号分隔，如：品牌, 型号, 价格)"></textarea>
-            <button id="addPreset" class="w-full bg-indigo-100 text-indigo-700 text-xs py-1.5 rounded hover:bg-indigo-200 transition-colors font-semibold">添加新预设</button>
-          </div>
-          <div id="presetList" class="mt-3 space-y-2">
-            <!-- Saved presets will appear here with delete buttons -->
+            <label class="block text-[10px] uppercase font-bold text-gray-400">AI 模型名称</label>
+            <input type="text" id="modelInput" class="w-full mt-0.5 border border-gray-300 rounded px-2 py-1 text-sm focus:ring-1 focus:ring-indigo-500 outline-none" placeholder="例如：gemini-1.5-flash">
           </div>
         </div>
         
-        <button id="saveConfig" class="w-full bg-indigo-600 hover:bg-indigo-700 text-white text-sm py-2 rounded transition-colors">保存所有设置</button>
+        <!-- Spacious Preset Management -->
+        <div class="pt-4 border-t border-gray-100 space-y-3">
+          <label class="block text-xs font-bold text-gray-600 mb-1">预设管理</label>
+          <div class="space-y-2.5">
+            <input type="text" id="newPresetName" class="w-full border border-gray-300 rounded px-2 py-1.5 text-sm outline-none" placeholder="预设名称 (如：手机)">
+            <textarea id="newPresetFields" class="w-full border border-gray-300 rounded px-2 py-1.5 text-sm outline-none h-16" placeholder="提取字段 (用逗号分隔，如：品牌, 型号, 价格)"></textarea>
+            <button id="addPreset" class="w-full bg-indigo-50 text-indigo-700 text-xs py-2 rounded hover:bg-indigo-100 transition-colors font-semibold border border-indigo-200">添加新预设</button>
+          </div>
+          <div id="presetList" class="mt-4 space-y-2 max-h-40 overflow-y-auto pr-1">
+            <!-- Saved presets -->
+          </div>
+        </div>
+
+        <button id="saveConfig" class="w-full mt-4 bg-indigo-600 hover:bg-indigo-700 text-white text-sm py-2 rounded transition-colors font-medium">保存所有设置</button>
       </div>
     </section>
 
-    <!-- Dynamic Action Buttons -->
-    <section id="presetButtons" class="grid grid-cols-2 gap-3 mb-4">
-      <!-- Buttons will be injected here by JS -->
+    <!-- Unified Extraction Control -->
+    <section class="bg-white p-4 rounded-lg shadow-sm border border-gray-200 mb-4">
+      <h2 class="text-sm font-semibold mb-3 text-gray-700">执行提取任务</h2>
+      <div class="flex gap-2">
+        <select id="presetSelect" class="flex-1 border border-gray-300 rounded px-2 py-1.5 text-sm outline-none bg-white">
+          <!-- Options injected by JS -->
+        </select>
+        <button id="runPreset" class="bg-indigo-600 text-white px-4 py-1.5 rounded text-sm font-medium hover:bg-indigo-700 transition-colors">提取</button>
+      </div>
     </section>
 
     <!-- Chat / Custom Instructions -->

sidepanel.js

@@ -13,7 +13,8 @@ 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');
+const presetSelect = document.getElementById('presetSelect');
+const runPresetBtn = document.getElementById('runPreset');
 
 // Collapsible logic
 const toggleConfig = document.getElementById('toggleConfig');
@@ -25,6 +26,8 @@ const DEFAULT_PRESETS = [
   { id: 'p2', name: '提取外设', fields: '品牌, 型号, 连接方式, 电池寿命, 价格, URL' }
 ];
 
+let currentPresets = [];
+
 toggleConfig.addEventListener('click', () => {
   const isHidden = configContent.classList.toggle('hidden');
   configChevron.classList.toggle('rotate-180', !isHidden);
@@ -43,11 +46,11 @@ chrome.storage.local.get(['geminiApiKey', 'googleScriptUrl', 'geminiModel', 'use
   if (data.googleScriptUrl) scriptUrlInput.value = data.googleScriptUrl;
   if (data.geminiModel) modelInput.value = data.geminiModel;
 
-  const presets = data.userPresets || DEFAULT_PRESETS;
-  renderPresets(presets);
+  currentPresets = data.userPresets || DEFAULT_PRESETS;
+  renderPresets(currentPresets);
 });
 
-// Save settings (including presets is handled separately via add/delete)
+// Save settings
 saveConfigBtn.addEventListener('click', () => {
   const apiKey = apiKeyInput.value.trim();
   const scriptUrl = scriptUrlInput.value.trim();
@@ -70,53 +73,57 @@ addPresetBtn.addEventListener('click', async () => {
 
   const { userPresets = DEFAULT_PRESETS } = await chrome.storage.local.get('userPresets');
   const newPreset = { id: Date.now().toString(), name, fields };
-  const updatedPresets = [...userPresets, newPreset];
+  currentPresets = [...userPresets, newPreset];
 
-  await chrome.storage.local.set({ userPresets: updatedPresets });
+  await chrome.storage.local.set({ userPresets: currentPresets });
   newPresetName.value = '';
   newPresetFields.value = '';
-  renderPresets(updatedPresets);
+  renderPresets(currentPresets);
 });
 
 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);
+  currentPresets = userPresets.filter(p => p.id !== id);
+  await chrome.storage.local.set({ userPresets: currentPresets });
+  renderPresets(currentPresets);
 }
 
 function renderPresets(presets) {
   // Clear containers
   presetList.innerHTML = '';
-  presetButtonsContainer.innerHTML = '';
+  presetSelect.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.className = 'flex items-center justify-between bg-gray-50 p-2.5 rounded border border-gray-200 text-xs shadow-sm';
     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 class="font-bold text-gray-700 truncate">${preset.name}</div>
+        <div class="text-gray-400 truncate mt-0.5">${preset.fields}</div>
       </div>
-      <button class="text-red-500 hover:text-red-700 font-bold p-1" data-id="${preset.id}">✕</button>
+      <button class="text-gray-400 hover:text-red-500 transition-colors p-1" data-id="${preset.id}">
+        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
+      </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);
+    // 2. Render as Dropdown Option
+    const opt = document.createElement('option');
+    opt.value = preset.id;
+    opt.textContent = preset.name;
+    presetSelect.appendChild(opt);
   });
 }
 
 // Action Handlers
+runPresetBtn.addEventListener('click', () => {
+  const selectedId = presetSelect.value;
+  const preset = currentPresets.find(p => p.id === selectedId);
+  if (preset) handleExtraction('preset', preset);
+});
+
 sendCustomBtn.addEventListener('click', () => handleExtraction('custom', { fields: customInput.value }));
 
 async function handleExtraction(type, presetObj) {

style.css

@@ -71,6 +71,11 @@ body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helve
 .rounded { border-radius: 0.25rem; }
 .rounded-lg { border-radius: 0.5rem; }
 .shadow-sm { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); }
+.max-h-40 { max-height: 10rem; }
+.text-\[10px\] { font-size: 10px; }
+.mt-0\.5 { margin-top: 0.125rem; }
+.space-y-2\.5 > * + * { margin-top: 0.625rem; }
+.pr-1 { padding-right: 0.25rem; }
 .hidden { display: none; }
 .rotate-180 { transform: rotate(180deg); }
 .cursor-pointer { cursor: pointer; }