diff --git a/app/components/auth.module.scss b/app/components/auth.module.scss index 02c1f4292..fe143b428 100644 --- a/app/components/auth.module.scss +++ b/app/components/auth.module.scss @@ -5,6 +5,54 @@ 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 { + 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%); + } + } + + @media (max-width: 600px) { + .top-banner { + padding: 12px 24px 12px 12px; + .top-banner-close { + right: 10px; + } + .top-banner-inner { + .top-banner-logo { + margin-right: 8px; + } + } + } + } .auth-header { display: flex; diff --git a/app/components/auth.tsx b/app/components/auth.tsx index c044fb0ac..e19512d87 100644 --- a/app/components/auth.tsx +++ b/app/components/auth.tsx @@ -1,25 +1,34 @@ 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/close.svg"; +import Arrow from "../icons/arrow.svg"; +import Logo from "../icons/logo.svg"; +import { useMobileScreen } from "@/app/utils"; import BotIcon from "../icons/bot.svg"; -import { useEffect } from "react"; import { getClientConfig } from "../config/client"; import LeftIcon from "@/app/icons/left.svg"; +import { safeLocalStorage } from "@/app/utils"; +import { + trackSettingsPageGuideToCPaymentClick, + trackAuthorizationPageButtonToCPaymentClick, +} from "../utils/auth-settings-events"; +const storage = safeLocalStorage(); export function AuthPage() { const navigate = useNavigate(); const accessStore = useAccessStore(); - const goHome = () => navigate(Path.Home); const goChat = () => navigate(Path.Chat); const goSaas = () => { + trackAuthorizationPageButtonToCPaymentClick(); window.location.href = SAAS_CHAT_URL; }; + const resetAccessCode = () => { accessStore.update((access) => { access.openaiApiKey = ""; @@ -36,6 +45,7 @@ export function AuthPage() { return (
+
} @@ -105,3 +115,65 @@ export function AuthPage() {
); } + +function TopBanner() { + const [isHovered, setIsHovered] = useState(false); + const [isVisible, setIsVisible] = useState(true); + const isMobile = useMobileScreen(); + useEffect(() => { + // 检查 localStorage 中是否有标记 + const bannerDismissed = storage.getItem("bannerDismissed"); + // 如果标记不存在，存储默认值并显示横幅 + if (!bannerDismissed) { + storage.setItem("bannerDismissed", "false"); + setIsVisible(true); // 显示横幅 + } else if (bannerDismissed === "true") { + // 如果标记为 "true"，则隐藏横幅 + setIsVisible(false); + } + }, []); + + const handleMouseEnter = () => { + setIsHovered(true); + }; + + const handleMouseLeave = () => { + setIsHovered(false); + }; + + const handleClose = () => { + setIsVisible(false); + storage.setItem("bannerDismissed", "true"); + }; + + if (!isVisible) { + return null; + } + return ( +
+
+ + + {Locale.Auth.TopTips} + { + trackSettingsPageGuideToCPaymentClick(); + }} + > + {Locale.Settings.Access.SaasStart.ChatNow} + + + +
+ {(isHovered || isMobile) && ( + + )} +
+ ); +} diff --git a/app/components/button.module.scss b/app/components/button.module.scss index e332df2d2..05248bee8 100644 --- a/app/components/button.module.scss +++ b/app/components/button.module.scss @@ -5,7 +5,6 @@ align-items: center; justify-content: center; padding: 10px; - cursor: pointer; transition: all 0.3s ease; overflow: hidden; diff --git a/app/components/markdown.tsx b/app/components/markdown.tsx index b57fd7490..9e1d17a30 100644 --- a/app/components/markdown.tsx +++ b/app/components/markdown.tsx @@ -21,7 +21,6 @@ import { } from "./artifacts"; import { useChatStore } from "../store"; import { IconButton } from "./button"; - export function Mermaid(props: { code: string }) { const ref = useRef(null); const [hasError, setHasError] = useState(false); diff --git a/app/components/model-config.module.scss b/app/components/model-config.module.scss new file mode 100644 index 000000000..40ba03f86 --- /dev/null +++ b/app/components/model-config.module.scss @@ -0,0 +1,7 @@ +.select-compress-model { + width: 60%; + select { + max-width: 100%; + white-space: normal; + } +} diff --git a/app/components/model-config.tsx b/app/components/model-config.tsx index 04cd3ff01..f2297e10b 100644 --- a/app/components/model-config.tsx +++ b/app/components/model-config.tsx @@ -6,6 +6,7 @@ import { InputRange } from "./input-range"; import { ListItem, Select } from "./ui-lib"; import { useAllModels } from "../utils/hooks"; import { groupBy } from "lodash-es"; +import styles from "./model-config.module.scss"; export function ModelConfigList(props: { modelConfig: ModelConfig; @@ -242,6 +243,7 @@ export function ModelConfigList(props: { subTitle={Locale.Settings.CompressModel.SubTitle} >