add fanyi add top tip

app/components/auth.module.scss

@@ -5,6 +5,43 @@
   height: 100%;
   width: 100%;
   flex-direction: column;
+  .top-banner {
+    position: relative;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    padding: 12px 64px;
+    box-sizing: border-box;
+    background: var(--second);
+    .top-banner-inner {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      font-size: 14px;
+      line-height: 150%;
+      span {
+        display: inline-flex;
+        align-items: center;
+        gap: 8px;
+        a {
+          display: inline-flex;
+          align-items: center;
+          text-decoration: none;
+          margin-left: 8px;
+          color: var(--primary);
+        }
+      }
+    }
+    .top-banner-close {
+      cursor: pointer;
+      position: absolute;
+      top: 50%;
+      right: 48px;
+      transform: translateY(-50%);
+    }
+  }
 
   .auth-header {
     display: flex;

app/components/auth.tsx

@@ -1,13 +1,14 @@
 import styles from "./auth.module.scss";
 import { IconButton } from "./button";
-
+import { useState, useEffect } from "react";
 import { useNavigate } from "react-router-dom";
 import { Path, SAAS_CHAT_URL } from "../constant";
 import { useAccessStore } from "../store";
 import Locale from "../locales";
-
+import Delete from "../icons/www-delete.svg";
+import Arrow from "../icons/arrow.svg";
+import Logo from "../icons/logo.svg";
 import BotIcon from "../icons/bot.svg";
-import { useEffect } from "react";
 import { getClientConfig } from "../config/client";
 import LeftIcon from "@/app/icons/left.svg";
 
@@ -20,6 +21,7 @@ export function AuthPage() {
   const goSaas = () => {
     window.location.href = SAAS_CHAT_URL;
   };
+
   const resetAccessCode = () => {
     accessStore.update((access) => {
       access.openaiApiKey = "";
@@ -36,6 +38,7 @@ export function AuthPage() {
 
   return (
     <div className={styles["auth-page"]}>
+      <TopBanner></TopBanner>
       <div className={styles["auth-header"]}>
         <IconButton
           icon={<LeftIcon />}
@@ -105,3 +108,60 @@ export function AuthPage() {
     </div>
   );
 }
+
+function TopBanner() {
+  const [isHovered, setIsHovered] = useState(false);
+  const [isVisible, setIsVisible] = useState(true);
+
+  useEffect(() => {
+    // 检查 localStorage 中是否有标记
+    const bannerDismissed = localStorage.getItem("bannerDismissed");
+
+    // 如果标记不存在，存储默认值并显示横幅
+    if (!bannerDismissed) {
+      localStorage.setItem("bannerDismissed", "false");
+      setIsVisible(true); // 显示横幅
+    } else if (bannerDismissed === "true") {
+      // 如果标记为 "true"，则隐藏横幅
+      setIsVisible(false);
+    }
+  }, []);
+
+  const handleMouseEnter = () => {
+    setIsHovered(true);
+  };
+
+  const handleMouseLeave = () => {
+    setIsHovered(false);
+  };
+
+  const handleClose = () => {
+    setIsVisible(false);
+    localStorage.setItem("bannerDismissed", "true");
+  };
+
+  if (!isVisible) {
+    return null;
+  }
+  return (
+    <div
+      className={styles["top-banner"]}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+    >
+      <div className={styles["top-banner-inner"]}>
+        <span>
+          <Logo></Logo>
+          {Locale.Auth.TopTips}
+          <a href={SAAS_CHAT_URL} rel="stylesheet">
+            {Locale.Settings.Access.SaasStart.ChatNow}
+            <Arrow style={{ marginLeft: "8px" }} />
+          </a>
+        </span>
+      </div>
+      {isHovered && (
+        <Delete className={styles["top-banner-close"]} onClick={handleClose} />
+      )}
+    </div>
+  );
+}