81 lines
4.3 KiB
HTML
81 lines
4.3 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>AI 硬件采购助手</title>
|
||
<link rel="stylesheet" href="style.css">
|
||
</head>
|
||
<body class="bg-gray-50 p-4">
|
||
<div class="max-w-md mx-auto">
|
||
<!-- Header -->
|
||
<header class="mb-6">
|
||
<h1 class="text-xl font-bold text-indigo-700">AI 硬件采购助手</h1>
|
||
<p class="text-gray-500 text-sm">从任何网站提取产品数据。</p>
|
||
</header>
|
||
|
||
<!-- 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">
|
||
<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>
|
||
|
||
<!-- 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 -->
|
||
</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>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Dynamic Action Buttons -->
|
||
<section id="presetButtons" class="grid grid-cols-2 gap-3 mb-4">
|
||
<!-- Buttons will be injected here by JS -->
|
||
</section>
|
||
|
||
<!-- Chat / Custom Instructions -->
|
||
<section class="bg-white p-4 rounded-lg shadow-sm border border-gray-200 mb-4">
|
||
<h2 class="text-sm font-semibold mb-2">自定义指令</h2>
|
||
<div class="flex gap-2">
|
||
<input type="text" id="customInput" class="flex-1 border border-gray-300 rounded px-2 py-1 text-sm focus:ring-1 focus:ring-indigo-500 outline-none" placeholder="例如：查找电池容量...">
|
||
<button id="sendCustom" class="bg-indigo-100 text-indigo-700 px-3 py-1 rounded text-sm font-medium hover:bg-indigo-200 transition-colors">执行</button>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Logs / Status -->
|
||
<section class="bg-gray-100 rounded-lg p-3 text-xs">
|
||
<div class="flex items-center justify-between mb-2">
|
||
<span class="font-bold text-gray-600 uppercase">状态与结果</span>
|
||
<span id="statusBadge" class="status-badge bg-gray-200 text-gray-600">待机</span>
|
||
</div>
|
||
<div id="results" class="max-h-64 overflow-y-auto font-mono text-gray-700 bg-white p-2 rounded border border-gray-200 whitespace-pre-wrap">暂无操作。</div>
|
||
</section>
|
||
</div>
|
||
|
||
<script src="sidepanel.js"></script>
|
||
</body>
|
||
</html>
|