feat: add theme color param to widget

src/index-widget.tsx

@@ -8,8 +8,9 @@ import './i18n';
 
 const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement);
 const hostId = new URLSearchParams(location.search).get("host");
+const themeColor = new URLSearchParams(location.search).get("themeColor") || "#1fe1f9";
 root.render(
   hostId ? <Provider store={store}>
-    <Widget hostId={Number(hostId)} />
+    <Widget hostId={Number(hostId)} themeColor={themeColor} />
   </Provider> : null
 );

src/routes/setting/Widget.tsx

@@ -29,7 +29,7 @@ export default function Widget() {
         {t('code')}:
       </label>
       <SyntaxHighlighter id="code" language="html" style={vscDarkPlus} className="rounded">
-        {`<!-- ${t('code_comment')} -->\n<script \n  data-host-id="1" \n  data-close-width="48" \n  data-close-height="48" \n  data-open-width="380" \n  data-open-height="680" \n  src="${location.origin}/widget.js" \n  async \n/>`}
+        {`<!-- ${t('code_comment')} -->\n<script \n  data-host-id="1" \n  data-theme-color="#1fe1f9" \n  data-close-width="48" \n  data-close-height="48" \n  data-open-width="380" \n  data-open-height="680" \n  src="${location.origin}/widget.js" \n  async \n/>`}
       </SyntaxHighlighter>
       <div className="text-gray-500 dark:text-white text-sm mt-5 mb-2">
         {t('config')}:
@@ -48,6 +48,10 @@ export default function Widget() {
               paramKey: "host-id",
               paramDefault: 1,
               remarks: t("param_host")
+            }, {
+              paramKey: "theme-color",
+              paramDefault: "#1fe1f9",
+              remarks: t("param_theme_color")
             }, {
               paramKey: "close-width",
               paramDefault: `48(px)`,

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;