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

55
sidepanel.js
View File

@@ -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) {