优化程序逻辑

popup/popup.html

@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <style>
+    body { width: 320px; padding: 15px; font-family: sans-serif; margin: 0; background: #f9fafc; }
+    h3 { margin-top: 0; color: #303133; font-size: 16px; border-left: 4px solid #409eff; padding-left: 8px; }
+    .item { margin-bottom: 12px; }
+    label { display: block; font-size: 12px; color: #606266; margin-bottom: 4px; }
+    input { width: 100%; box-sizing: border-box; padding: 8px; border: 1px solid #dcdfe6; border-radius: 4px; outline: none; }
+    input:focus { border-color: #409eff; }
+    .btn { background: #409eff; color: white; border: none; padding: 10px; border-radius: 4px; cursor: pointer; width: 100%; font-weight: bold; margin-top: 5px; }
+    .btn:hover { background: #66b1ff; }
+    #status { font-size: 12px; text-align: center; margin-top: 8px; height: 14px; }
+    .note { font-size: 11px; color: #999; margin-top: 4px; }
+  </style>
+</head>
+<body>
+  <h3>⚙️ AI 模型配置</h3>
+  
+  <div class="item">
+    <label>API Base URL</label>
+    <input type="text" id="apiUrl" placeholder="https://api-inference.modelscope.cn/v1">
+    <div class="note">通常使用兼容模式地址</div>
+  </div>
+
+  <div class="item">
+    <label>API Key</label>
+    <input type="password" id="apiKey" placeholder="sk-...">
+  </div>
+
+  <div class="item">
+    <label>Model Name</label>
+    <input type="text" id="modelName" placeholder="deepseek-ai/DeepSeek-V3.2">
+  </div>
+
+  <button id="save" class="btn">保存并生效</button>
+  <div id="status"></div>
+
+  <script src="popup.js"></script>
+</body>
+</html>

popup/popup.js

@@ -0,0 +1,41 @@
+// 页面加载时读取存储的配置
+document.addEventListener('DOMContentLoaded', () => {
+  chrome.storage.sync.get(['aiConfig'], (result) => {
+    const config = result.aiConfig || {};
+    
+    // 如果没有存储的值，则显示默认占位符或默认值
+    document.getElementById('apiUrl').value = config.apiUrl || DEFAULT_URL;
+    document.getElementById('apiKey').value = config.apiKey || "";
+    document.getElementById('modelName').value = config.modelName || DEFAULT_MODEL;
+  });
+});
+
+// 保存逻辑
+document.getElementById('save').addEventListener('click', () => {
+  const config = {
+    apiUrl: document.getElementById('apiUrl').value.trim() || DEFAULT_URL,
+    apiKey: document.getElementById('apiKey').value.trim(),
+    modelName: document.getElementById('modelName').value.trim() || DEFAULT_MODEL
+  };
+
+  // 验证 API Key 是否填写
+  if (!config.apiKey) {
+    showStatus("❌ 请输入 API Key", "#f56c6c");
+    return;
+  }
+
+  // 存储到 chrome.storage
+  chrome.storage.sync.set({ aiConfig: config }, () => {
+    showStatus("✅ 配置已保存，刷新页面生效", "#67c23a");
+  });
+});
+
+// 状态提示函数
+function showStatus(text, color) {
+  const status = document.getElementById('status');
+  status.textContent = text;
+  status.style.color = color;
+  setTimeout(() => {
+    status.textContent = '';
+  }, 3000);
+}