feat: add theme color param to widget

src/widget/Popup/Header.tsx

@@ -4,12 +4,13 @@ import IconClose from './close.svg';
 
 type Props = {
   handleClose: () => void;
+  themeColor?: string
 };
 
-const Index: FC<Props> = ({ handleClose }) => {
+const Index: FC<Props> = ({ handleClose, themeColor = "#1fe1f9" }) => {
   const { name, logo } = useAppSelector(store => store.server);
   return (
-    <header className="relative flex justify-between items-center h-14 px-4 bg-[#1fe1f9]">
+    <header className="relative flex justify-between items-center h-14 px-4" style={{ backgroundColor: themeColor }}>
       <div className="relative w-8 h-8">
         <img src={logo} alt="logo" className="w-full h-full rounded-full" />
       </div>

src/widget/Popup/index.tsx

@@ -9,10 +9,11 @@ import useSSE from '../useSSE';
 
 type Props = {
     hostId: number,
+    themeColor?: string,
     handleClose: () => void
 }
 
-const Index = ({ handleClose, hostId }: Props) => {
+const Index = ({ handleClose, hostId, themeColor }: Props) => {
     // 建立SSE连接
     useSSE();
     const { user: loginUser, token, guest: isGuest } = useAppSelector(store => store.authData);
@@ -21,7 +22,7 @@ const Index = ({ handleClose, hostId }: Props) => {
     const notLogin = !token || isGuest;
     return (
         <aside className="flex flex-col bg-white w-full h-full rounded-md overflow-hidden">
-            <Header handleClose={handleClose} />
+            <Header themeColor={themeColor} handleClose={handleClose} />
             {/* message list */}
             <main id='MESSAGE_LIST_CONTAINER' className="relative flex-1 overflow-y-auto scroll-smooth">
                 {/* placeholder */}

src/widget/index.tsx

@@ -5,10 +5,11 @@ import Icon from "./Icon";
 import Popup from "./Popup";
 import useCache from "./useCache";
 type Props = {
-  hostId: number
+  hostId: number,
+  themeColor?: string
 };
 
-function Widget({ hostId }: Props) {
+function Widget({ hostId, themeColor }: Props) {
   const { rehydrated } = useCache();
   const [visible, setVisible] = useState(!!new URLSearchParams(location.search).get("open"));
   const { isLoading, isError } = useGetServerQuery();
@@ -21,7 +22,7 @@ function Widget({ hostId }: Props) {
     setVisible((prev) => !prev);
   };
   if (isLoading || isError || !rehydrated) return null;
-  return visible ? <Popup handleClose={toggleVisible} hostId={hostId} /> : <Icon handleClick={toggleVisible} />;
+  return visible ? <Popup handleClose={toggleVisible} hostId={hostId} themeColor={themeColor} /> : <Icon handleClick={toggleVisible} />;
 }
 
 export default Widget;