julian/item-scraper
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix ui

Browse Source
This commit is contained in:
Julian Freeman
2026-03-11 12:43:17 -04:00
parent 9b55bea09d
commit 1bc5e4ecad
3 changed files with 71 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
sidepanel.html
View File

@@ -16,44 +16,53 @@
<!-- API Config --> <!-- API Config -->
<section class="bg-white rounded-lg shadow-sm mb-4 border border-gray-200"> <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> <h2 class="text-sm font-semibold text-gray-700">配置选项</h2>
<span id="configChevron" class="text-gray-400 transition-transform" style="font-size: 10px;">▼</span> <span id="configChevron" class="text-gray-400 transition-transform" style="font-size: 10px;">▼</span>
</div> </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">
<div> <!-- Compact Gemini Config -->
<label class="block text-xs text-gray-500">Gemini API 密钥</label> <div class="space-y-2 mb-4">
<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"> <div>
</div> <label class="block text-[10px] uppercase font-bold text-gray-400">Gemini API 密钥</label>
<div> <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">
<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 链接">
</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>
<div id="presetList" class="mt-3 space-y-2"> <div>
<!-- Saved presets will appear here with delete buttons --> <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-[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>
</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> </div>
</section> </section>
<!-- Dynamic Action Buttons --> <!-- Unified Extraction Control -->
<section id="presetButtons" class="grid grid-cols-2 gap-3 mb-4"> <section class="bg-white p-4 rounded-lg shadow-sm border border-gray-200 mb-4">
<!-- Buttons will be injected here by JS --> <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> </section>
<!-- Chat / Custom Instructions --> <!-- Chat / Custom Instructions -->

55
sidepanel.js
View File

@@ -13,7 +13,8 @@ const newPresetName = document.getElementById('newPresetName');
const newPresetFields = document.getElementById('newPresetFields'); const newPresetFields = document.getElementById('newPresetFields');
const addPresetBtn = document.getElementById('addPreset'); const addPresetBtn = document.getElementById('addPreset');
const presetList = document.getElementById('presetList'); const presetList = document.getElementById('presetList');
const presetButtonsContainer = document.getElementById('presetButtons'); const presetSelect = document.getElementById('presetSelect');
const runPresetBtn = document.getElementById('runPreset');
// Collapsible logic // Collapsible logic
const toggleConfig = document.getElementById('toggleConfig'); const toggleConfig = document.getElementById('toggleConfig');
@@ -25,6 +26,8 @@ const DEFAULT_PRESETS = [
{ id: 'p2', name: '提取外设', fields: '品牌, 型号, 连接方式, 电池寿命, 价格, URL' } { id: 'p2', name: '提取外设', fields: '品牌, 型号, 连接方式, 电池寿命, 价格, URL' }
]; ];
let currentPresets = [];
toggleConfig.addEventListener('click', () => { toggleConfig.addEventListener('click', () => {
const isHidden = configContent.classList.toggle('hidden'); const isHidden = configContent.classList.toggle('hidden');
configChevron.classList.toggle('rotate-180', !isHidden); 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.googleScriptUrl) scriptUrlInput.value = data.googleScriptUrl;
if (data.geminiModel) modelInput.value = data.geminiModel; if (data.geminiModel) modelInput.value = data.geminiModel;
const presets = data.userPresets || DEFAULT_PRESETS; currentPresets = data.userPresets || DEFAULT_PRESETS;
renderPresets(presets); renderPresets(currentPresets);
}); });
// Save settings (including presets is handled separately via add/delete) // Save settings
saveConfigBtn.addEventListener('click', () => { saveConfigBtn.addEventListener('click', () => {
const apiKey = apiKeyInput.value.trim(); const apiKey = apiKeyInput.value.trim();
const scriptUrl = scriptUrlInput.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 { userPresets = DEFAULT_PRESETS } = await chrome.storage.local.get('userPresets');
const newPreset = { id: Date.now().toString(), name, fields }; 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 = ''; newPresetName.value = '';
newPresetFields.value = ''; newPresetFields.value = '';
renderPresets(updatedPresets); renderPresets(currentPresets);
}); });
async function deletePreset(id) { async function deletePreset(id) {
const { userPresets = DEFAULT_PRESETS } = await chrome.storage.local.get('userPresets'); const { userPresets = DEFAULT_PRESETS } = await chrome.storage.local.get('userPresets');
const updatedPresets = userPresets.filter(p => p.id !== id); currentPresets = userPresets.filter(p => p.id !== id);
await chrome.storage.local.set({ userPresets: updatedPresets }); await chrome.storage.local.set({ userPresets: currentPresets });
renderPresets(updatedPresets); renderPresets(currentPresets);
} }
function renderPresets(presets) { function renderPresets(presets) {
// Clear containers // Clear containers
presetList.innerHTML = ''; presetList.innerHTML = '';
presetButtonsContainer.innerHTML = ''; presetSelect.innerHTML = '';
presets.forEach(preset => { presets.forEach(preset => {
// 1. Render in Settings List // 1. Render in Settings List
const item = document.createElement('div'); 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 = ` item.innerHTML = `
<div class="flex-1 overflow-hidden mr-2"> <div class="flex-1 overflow-hidden mr-2">
<div class="font-bold truncate">${preset.name}</div> <div class="font-bold text-gray-700 truncate">${preset.name}</div>
<div class="text-gray-500 truncate">${preset.fields}</div> <div class="text-gray-400 truncate mt-0.5">${preset.fields}</div>
</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); item.querySelector('button').onclick = () => deletePreset(preset.id);
presetList.appendChild(item); presetList.appendChild(item);
// 2. Render as Action Button // 2. Render as Dropdown Option
const btn = document.createElement('button'); const opt = document.createElement('option');
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'; opt.value = preset.id;
btn.innerHTML = ` opt.textContent = preset.name;
<span class="text-2xl mb-1 group-hover:scale-110 transition-transform">⚙️</span> presetSelect.appendChild(opt);
<span class="text-xs font-semibold">${preset.name}</span>
`;
btn.onclick = () => handleExtraction('preset', preset);
presetButtonsContainer.appendChild(btn);
}); });
} }
// Action Handlers // 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 })); sendCustomBtn.addEventListener('click', () => handleExtraction('custom', { fields: customInput.value }));
async function handleExtraction(type, presetObj) { async function handleExtraction(type, presetObj) {

5
style.css
View File

@@ -71,6 +71,11 @@ body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helve
.rounded { border-radius: 0.25rem; } .rounded { border-radius: 0.25rem; }
.rounded-lg { border-radius: 0.5rem; } .rounded-lg { border-radius: 0.5rem; }
.shadow-sm { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); } .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; } .hidden { display: none; }
.rotate-180 { transform: rotate(180deg); } .rotate-180 { transform: rotate(180deg); }
.cursor-pointer { cursor: pointer; } .cursor-pointer { cursor: pointer; }