74 lines
4.0 KiB
HTML
74 lines
4.0 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>
|
||
<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>
|
||
|
||
<!-- Action Buttons -->
|
||
<section class="grid grid-cols-2 gap-3 mb-4">
|
||
<button id="extractLaptop" class="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">
|
||
<span class="text-2xl mb-1 group-hover:scale-110 transition-transform">💻</span>
|
||
<span class="text-xs font-semibold">提取笔记本</span>
|
||
</button>
|
||
<button id="extractPeripheral" class="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">
|
||
<span class="text-2xl mb-1 group-hover:scale-110 transition-transform">⌨️</span>
|
||
<span class="text-xs font-semibold">提取外设</span>
|
||
</button>
|
||
</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>
|