chore: 优化UI为更耐看的浅色系主题

app/static/js/config_editor.js

@@ -1302,27 +1302,28 @@ function handleBulkDeleteVertexApiKeys() {
  * @param {string} tabId - The ID of the tab to switch to.
  */
 function switchTab(tabId) {
+  console.log(`Switching to tab: ${tabId}`);
+
+  // 定义选中态和未选中态的样式
+  const activeStyle = "background-color: #3b82f6 !important; color: #ffffff !important; border: 2px solid #2563eb !important; box-shadow: 0 4px 12px -2px rgba(59, 130, 246, 0.4), 0 2px 6px -1px rgba(59, 130, 246, 0.2) !important; transform: translateY(-2px) !important; font-weight: 600 !important;";
+  const inactiveStyle = "background-color: #f8fafc !important; color: #64748b !important; border: 2px solid #e2e8f0 !important; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1) !important; font-weight: 500 !important; transform: none !important;";
+
   // 更新标签按钮状态
   const tabButtons = document.querySelectorAll(".tab-btn");
+  console.log(`Found ${tabButtons.length} tab buttons`);
+
   tabButtons.forEach((button) => {
-    if (button.getAttribute("data-tab") === tabId) {
-      // 激活状态：主色背景，白色文字，添加阴影
-      button.classList.remove(
-        "bg-white",
-        "bg-opacity-50",
-        "text-gray-700",
-        "hover:bg-opacity-70"
-      );
-      button.classList.add("bg-primary-600", "text-white", "shadow-md");
+    const buttonTabId = button.getAttribute("data-tab");
+    if (buttonTabId === tabId) {
+      // 激活状态：直接设置内联样式
+      button.classList.add("active");
+      button.setAttribute("style", activeStyle);
+      console.log(`Applied active style to button: ${buttonTabId}`);
     } else {
-      // 非激活状态：白色背景，灰色文字，无阴影
-      button.classList.remove("bg-primary-600", "text-white", "shadow-md");
-      button.classList.add(
-        "bg-white",
-        "bg-opacity-50",
-        "text-gray-700",
-        "hover:bg-opacity-70"
-      );
+      // 非激活状态：直接设置内联样式
+      button.classList.remove("active");
+      button.setAttribute("style", inactiveStyle);
+      console.log(`Applied inactive style to button: ${buttonTabId}`);
     }
   });
 
@@ -1450,9 +1451,9 @@ function addArrayItemWithValue(key, value) {
 
   const inputWrapper = document.createElement("div");
   inputWrapper.className =
-    "flex items-center flex-grow rounded-md focus-within:border-violet-400 focus-within:ring focus-within:ring-violet-400 focus-within:ring-opacity-50";
-  // Apply themed border directly via style, and ensure it has a border
-  inputWrapper.style.border = "1px solid rgba(120, 100, 200, 0.5)";
+    "flex items-center flex-grow rounded-md focus-within:border-blue-500 focus-within:ring focus-within:ring-blue-500 focus-within:ring-opacity-50";
+  // Apply light theme border directly via style
+  inputWrapper.style.border = "1px solid rgba(0, 0, 0, 0.12)";
   inputWrapper.style.backgroundColor = "transparent"; // Ensure wrapper is transparent
 
   const input = createArrayInput(
@@ -2095,7 +2096,7 @@ function renderModelsInModal() {
     modelItemElement.type = "button";
     modelItemElement.textContent = model.id;
     modelItemElement.className =
-      "block w-full text-left px-4 py-2 rounded-md hover:bg-violet-700 focus:bg-violet-700 focus:outline-none transition-colors text-gray-200";
+      "block w-full text-left px-4 py-2 rounded-md hover:bg-blue-100 focus:bg-blue-100 focus:outline-none transition-colors text-gray-700 hover:text-gray-800";
     // Add any other classes for styling, e.g., from existing modals or array items
 
     modelItemElement.addEventListener("click", () =>

app/static/js/error_logs.js

@@ -782,29 +782,29 @@ function _createLogRowHtml(log, sequentialId) {
   const fullKey = log.gemini_key || "";
 
   return `
-        <td class="text-center px-3 py-3">
-            <input type="checkbox" class="row-checkbox form-checkbox h-4 w-4 text-primary-600 border-gray-300 rounded focus:ring-primary-500" data-key="${fullKey}" data-log-id="${
+        <td class="text-center px-3 py-3 text-gray-700">
+            <input type="checkbox" class="row-checkbox form-checkbox h-4 w-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500" data-key="${fullKey}" data-log-id="${
     log.id
   }">
         </td>
-        <td>${sequentialId}</td>
-        <td class="relative group" title="${fullKey}">
+        <td class="text-gray-700">${sequentialId}</td>
+        <td class="relative group text-gray-700" title="${fullKey}">
             ${maskedKey}
             <button class="copy-btn absolute top-1/2 right-2 transform -translate-y-1/2 bg-gray-200 hover:bg-gray-300 text-gray-600 p-1 rounded opacity-0 group-hover:opacity-100 transition-opacity text-xs" data-copy-text="${fullKey}" title="复制完整密钥">
                 <i class="far fa-copy"></i>
             </button>
         </td>
-        <td>${log.error_type || "未知"}</td>
-        <td class="error-code-content" title="${
+        <td class="text-gray-700">${log.error_type || "未知"}</td>
+        <td class="error-code-content text-gray-700" title="${
           log.error_code || ""
         }">${errorCodeContent}</td>
-        <td>${log.model_name || "未知"}</td>
-        <td>${formattedTime}</td>
+        <td class="text-gray-700">${log.model_name || "未知"}</td>
+        <td class="text-gray-700">${formattedTime}</td>
         <td>
-            <button class="btn-view-details mr-2" data-log-id="${log.id}">
+            <button class="btn-view-details mr-2 bg-blue-600 hover:bg-blue-700 text-white px-3 py-1 rounded text-sm transition-all duration-200" data-log-id="${log.id}">
                 <i class="fas fa-eye mr-1"></i>详情
             </button>
-            <button class="btn-delete-row text-danger-600 hover:text-danger-800" data-log-id="${
+            <button class="btn-delete-row bg-red-600 hover:bg-red-700 text-white px-2 py-1 rounded text-sm transition-all duration-200" data-log-id="${
               log.id
             }" title="删除此日志">
                 <i class="fas fa-trash-alt"></i>