From 8e026238aee77ce61a3fd5d37d687c34792f901c Mon Sep 17 00:00:00 2001
From: Gabe <yugang2002@gmail.com>
Date: Wed, 1 Oct 2025 11:18:41 +0800
Subject: [PATCH] fix: show error message dom

---
 src/common.js                | 59 +++++++++++++++++++++++++++++++++---
 src/views/Options/Setting.js |  2 +-
 2 files changed, 56 insertions(+), 5 deletions(-)

diff --git a/src/common.js b/src/common.js
index 18c8c66..20d32ac 100644
--- a/src/common.js
+++ b/src/common.js
@@ -99,10 +99,61 @@ async function showFab(translator) {
  * @param {*} message
  */
 function showErr(message) {
-  const $err = document.createElement("div");
-  $err.innerText = `KISS-Translator: ${message}`;
-  $err.style.cssText = "background:red; color:#fff;";
-  document.body.prepend($err);
+  const bannerId = "KISS-Translator-Message";
+  const existingBanner = document.getElementById(bannerId);
+  if (existingBanner) {
+    existingBanner.remove();
+  }
+
+  const banner = document.createElement("div");
+  banner.id = bannerId;
+
+  Object.assign(banner.style, {
+    position: "fixed",
+    top: "0",
+    left: "0",
+    width: "100%",
+    backgroundColor: "#f44336",
+    color: "white",
+    textAlign: "center",
+    padding: "8px 16px",
+    zIndex: "1001",
+    boxSizing: "border-box",
+    fontSize: "16px",
+    boxShadow: "0 2px 5px rgba(0,0,0,0.2)",
+  });
+
+  const closeButton = document.createElement("span");
+  closeButton.innerHTML = "&times;";
+
+  Object.assign(closeButton.style, {
+    position: "absolute",
+    top: "50%",
+    right: "20px",
+    transform: "translateY(-50%)",
+    cursor: "pointer",
+    fontSize: "22px",
+    fontWeight: "bold",
+  });
+
+  const messageText = document.createTextNode(`KISS-Translator: ${message}`);
+  banner.appendChild(messageText);
+  banner.appendChild(closeButton);
+
+  document.body.appendChild(banner);
+
+  const removeBanner = () => {
+    banner.style.transition = "opacity 0.5s ease";
+    banner.style.opacity = "0";
+    setTimeout(() => {
+      if (banner && banner.parentNode) {
+        banner.parentNode.removeChild(banner);
+      }
+    }, 500);
+  };
+
+  closeButton.onclick = removeBanner;
+  setTimeout(removeBanner, 10000);
 }
 
 /**
diff --git a/src/views/Options/Setting.js b/src/views/Options/Setting.js
index 909ae6d..3b5b25c 100644
--- a/src/views/Options/Setting.js
+++ b/src/views/Options/Setting.js
@@ -321,7 +321,7 @@ export default function Settings() {
                 size="small"
                 name="langDetector"
                 value={langDetector}
-                label={i18n("detect_lang_serve")}
+                label={i18n("detect_lang_service")}
                 onChange={handleChange}
               >
                 {OPT_LANGDETECTOR_ALL.map((item) => (