diff --git a/public/widget.html b/public/widget.html index 4d4e249c..7a0dc5a0 100644 --- a/public/widget.html +++ b/public/widget.html @@ -21,6 +21,10 @@ html.dark #root { background: rgb(64 67 71); } + /* 暗黑模式 & 关闭状态 */ + html.dark.close #root { + background: transparent; + } diff --git a/src/widget/Icon.tsx b/src/widget/Icon.tsx index 13320317..8e48f0b6 100644 --- a/src/widget/Icon.tsx +++ b/src/widget/Icon.tsx @@ -8,7 +8,7 @@ type Props = { const Icon = ({ handleClick }: Props) => { const { logo } = useAppSelector(store => store.server); if (!logo) return null; - return ; }; diff --git a/src/widget/Popup/Login/index.tsx b/src/widget/Popup/Login/index.tsx index cbd18ce1..57e5ddc9 100644 --- a/src/widget/Popup/Login/index.tsx +++ b/src/widget/Popup/Login/index.tsx @@ -58,7 +58,7 @@ const Login = () => { } = loginConfig; const googleLogin = enableGoogleLogin && clientId; return ( -
+
diff --git a/src/widget/Popup/Welcome.tsx b/src/widget/Popup/Welcome.tsx index 93f2c101..8f4b436b 100644 --- a/src/widget/Popup/Welcome.tsx +++ b/src/widget/Popup/Welcome.tsx @@ -25,7 +25,7 @@ const Index = ({ needLogin = false }: Props) => {
- {needLogin &&
+ {needLogin &&
} diff --git a/src/widget/index.tsx b/src/widget/index.tsx index 4e53d58a..c1622769 100644 --- a/src/widget/index.tsx +++ b/src/widget/index.tsx @@ -1,4 +1,4 @@ -import { useState } from "react"; +import { useState, useEffect } from "react"; import { useGetServerQuery } from "../app/services/server"; import { useWidget } from "./WidgetContext"; import Icon from "./Icon"; @@ -21,6 +21,14 @@ function Widget({ hostId }: Props) { } setVisible((prev) => !prev); }; + useEffect(() => { + if (!visible) { + document.documentElement.classList.add("close"); + } else { + document.documentElement.classList.remove("close"); + } + }, [visible]); + if (isLoading || isError || !rehydrated) return null; if (!embed) return ; return visible ? : ;