fix: 主题配置表单样式优化

src/components/ConfigDialog.module.scss

@@ -69,6 +69,56 @@
     }
 }
 
+.inputContainer {
+    word-break: keep-all;
+
+    audio {
+        height: 30px;
+    }
+
+    input,
+    select {
+        flex-grow: 1;
+    }
+
+    input[type='file'] {
+        padding: 4px 12px;
+    }
+
+    input[type='checkbox'] {
+        flex-grow: 0;
+        width: 24px;
+        height: 24px;
+    }
+
+    input[type='color'] {
+        padding: 0 2px;
+        flex-grow: 0;
+        width: 30px;
+        height: 30px;
+    }
+
+    .label {
+        min-width: 74px;
+        opacity: 0.7;
+        font-weight: 600;
+    }
+
+    .imgPreview {
+        height: 30px;
+        border: 1px dashed rgb(0 0 0 / 30%);
+        min-width: 30px;
+        object-fit: contain;
+    }
+
+    &.required .label {
+        &::after {
+            content: '*';
+            color: red;
+        }
+    }
+}
+
 .dialog {
     text-align: left;
     overflow-y: auto;
@@ -135,55 +185,18 @@
             }
         }
     }
+
+    input {
+        &:not([type='checkbox']) {
+            width: 100%;
         }
 
-.inputContainer {
+        max-width: 100%;
-    word-break: keep-all;
+        box-sizing: border-box;
-
-    audio {
-        height: 30px;
-    }
-
-    input,
-    select {
-        flex-grow: 1;
     }
 
     input[type='file'] {
-        padding: 4px 12px;
+        padding: 3px 12px;
-    }
-
-    input[type='checkbox'] {
-        flex-grow: 0;
-        width: 24px;
-        height: 24px;
-    }
-
-    input[type='color'] {
-        padding: 0 2px;
-        flex-grow: 0;
-        width: 30px;
-        height: 30px;
-    }
-
-    .label {
-        min-width: 74px;
-        opacity: 0.7;
-        font-weight: 600;
-    }
-
-    .imgPreview {
-        height: 30px;
-        border: 1px dashed rgb(0 0 0 / 30%);
-        min-width: 30px;
-        object-fit: contain;
-    }
-
-    &.required .label {
-        &::after {
-            content: '*';
-            color: red;
-        }
     }
 }
 
@@ -205,16 +218,6 @@
         align-items: center;
         gap: 8px;
 
-        input {
-            width: 100%;
-            max-width: 100%;
-            box-sizing: border-box;
-        }
-
-        input[type='file'] {
-            padding: 3px 12px;
-        }
-
         .iconPreview {
             height: 109px;
             width: 109px;

src/components/ConfigDialog.tsx

@@ -65,6 +65,7 @@ const ConfigDialog: FC<{
     const [customTheme, setCustomTheme] = useState<CustomTheme>({
         title: '',
         sounds: [],
+        pure: false,
         icons: new Array(10).fill(0).map(() => ({
             name: randomString(4),
             content: '',
@@ -375,6 +376,15 @@ const ConfigDialog: FC<{
             });
     };
 
+    // 彩蛋
+    const [pureClickTime, setPureClickTime] = useState<number>(0);
+    useEffect(() => {
+        updateCustomTheme(
+            'pure',
+            pureClickTime % 5 === 0 && pureClickTime !== 0
+        );
+    }, [pureClickTime]);
+
     return (
         <div className={classNames(style.dialog)}>
             <div className={style.closeBtn} onClick={closeMethod}>
@@ -680,7 +690,12 @@ const ConfigDialog: FC<{
                 (谨慎操作，单文件不超过1M为宜，文件过大可能导致崩溃，介时请刷新浏览器)
             </div>
             {configError && <div className={style.errorTip}>{configError}</div>}
-            <WxQrCode />
+            {customTheme.pure && (
+                <div className={style.tip}>
+                    🎉🎉🎉恭喜发现彩蛋，生成的主题将开启纯净模式～
+                </div>
+            )}
+            <WxQrCode onClick={() => setPureClickTime(pureClickTime + 1)} />
             <div className={'flex-container'}>
                 <button
                     className={'primary flex-grow'}

src/components/WxQrCode.tsx

@@ -1,8 +1,9 @@
-import React, { FC, useState } from 'react';
+import React, { FC, MouseEventHandler, useState } from 'react';
 import style from './WxQrCode.module.scss';
 import classNames from 'classnames';
-const WxQrCode: FC<{ title?: string }> = ({
+const WxQrCode: FC<{ title?: string; onClick?: MouseEventHandler }> = ({
     title = '【广告位招租中】同时如果您喜欢这个项目的话，可以点击扫描下方收款码分摊后台相关费用，感谢~😘',
+    onClick,
 }) => {
     const [fullScreen, setFullScreen] = useState<Record<number, boolean>>({
         0: false,
@@ -28,7 +29,7 @@ const WxQrCode: FC<{ title?: string }> = ({
         });
     };
     return (
-        <div className={style.wxQrCodeContainer}>
+        <div className={style.wxQrCodeContainer} onClick={onClick}>
             <div className={style.wxQrCodeTitle}>{title}</div>
             {[1, 5, 8].map((num, idx) => (
                 <div