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

61
sidepanel.html
View File

@@ -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>
<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">
</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 链接">
</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 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-[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-[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>
<!-- 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>
<!-- 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-3 space-y-2">
<!-- Saved presets will appear here with delete buttons -->
<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 bg-indigo-600 hover:bg-indigo-700 text-white text-sm py-2 rounded transition-colors">保存所有设置</button>
<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 -->