|
|
@@ -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>
|
|
|
+ );
|
|
|
+}
|