chore: 组件拆分动态引入

src/components/ConfigDialog.module.scss

@@ -1,3 +1,15 @@
+@keyframes show {
+    0% {
+        transform: translateX(-50%) translateY(-100%);
+        opacity: 0;
+    }
+
+    100% {
+        transform: translateX(-50%) translateY(0);
+        opacity: 1;
+    }
+}
+
 .dialog {
     text-align: left;
     overflow-y: auto;
@@ -17,8 +29,7 @@
         width: calc(100% - 32px);
         max-width: 500px;
         bottom: 0;
-        transform: translateX(-50%) translateY(-100%);
-        opacity: 0;
+        animation: ease-in-out show 0.3s both;
         transition: 0.3s;
         padding: 16px;
         display: flex;
@@ -32,11 +43,6 @@
         }
     }
 
-    &Show {
-        transform: translateX(-50%) translateY(0);
-        opacity: 1;
-    }
-
     .error {
         color: crimson;
     }

src/components/ConfigDialog.tsx

@@ -8,22 +8,11 @@ import { captureElement, LAST_UPLOAD_TIME_STORAGE_KEY } from '../utils';
 import { copy } from 'clipboard';
 
 const STORAGEKEY = 'customTheme';
-let storageTheme: Theme<any>;
-try {
-    const configString = localStorage.getItem(STORAGEKEY);
-    if (configString) {
-        const parseRes = JSON.parse(configString);
-        if (typeof parseRes === 'object') storageTheme = parseRes;
-    }
-} catch (e) {
-    //
-}
 
-export const ConfigDialog: FC<{
-    show: boolean;
+const ConfigDialog: FC<{
     closeMethod: () => void;
     previewMethod: (theme: Theme<string>) => void;
-}> = ({ show, closeMethod, previewMethod }) => {
+}> = ({ closeMethod, previewMethod }) => {
     const [sounds, setSounds] = useState<Sound[]>([]);
     const [icons, setIcons] = useState<Icon[]>([]);
     const inputRefMap = useRef<
@@ -57,38 +46,44 @@ export const ConfigDialog: FC<{
 
     // 初始化
     useEffect(() => {
-        if (storageTheme) {
-            const {
-                title,
-                desc = '',
-                bgm = '',
-                sounds,
-                icons,
-                background = '',
-                backgroundBlur = false,
-            } = storageTheme;
-            setSounds(
-                sounds.filter(
-                    (s) => !['triple', 'button-click'].includes(s.name)
-                )
-            );
-            setIcons(
-                icons.map((icon) => {
-                    if (icon.clickSound === 'button-click')
-                        icon.clickSound = '';
-                    if (icon.tripleSound === 'triple') icon.tripleSound = '';
-                    return icon;
-                })
-            );
-            setCustomThemeInfo({
-                title,
-                // @ts-ignore
-                desc,
-                bgm,
-                background,
-                backgroundBlur,
-            });
+        let storageTheme: Theme<any> | undefined = undefined;
+        try {
+            const configString = localStorage.getItem(STORAGEKEY);
+            if (configString) {
+                const parseRes = JSON.parse(configString);
+                if (typeof parseRes === 'object') storageTheme = parseRes;
+            }
+        } catch (e) {
+            //
         }
+        if (!storageTheme) return;
+        const {
+            title,
+            desc = '',
+            bgm = '',
+            sounds,
+            icons,
+            background = '',
+            backgroundBlur = false,
+        } = storageTheme;
+        setSounds(
+            sounds.filter((s) => !['triple', 'button-click'].includes(s.name))
+        );
+        setIcons(
+            icons.map((icon) => {
+                if (icon.clickSound === 'button-click') icon.clickSound = '';
+                if (icon.tripleSound === 'triple') icon.tripleSound = '';
+                return icon;
+            })
+        );
+        setCustomThemeInfo({
+            title,
+            // @ts-ignore
+            desc,
+            bgm,
+            background,
+            backgroundBlur,
+        });
     }, []);
 
     // 音效保存
@@ -340,7 +335,6 @@ export const ConfigDialog: FC<{
             className={classNames(
                 style.dialog,
                 style.dialogWrapper,
-                show && style.dialogShow,
                 'flex-container flex-container'
             )}
         >
@@ -646,3 +640,5 @@ export const ConfigDialog: FC<{
         </div>
     );
 };
+
+export default ConfigDialog;

src/components/ThemeChanger.tsx

@@ -16,7 +16,7 @@ const BuiltinThemes = [
     pddTheme,
 ];
 
-export const ThemeChanger: FC<{
+const ThemeChanger: FC<{
     changeTheme: (theme: Theme<any>) => void;
     onDiyClick: () => void;
 }> = ({ changeTheme, onDiyClick }) => {
@@ -75,3 +75,5 @@ export const ThemeChanger: FC<{
         </div>
     );
 };
+
+export default ThemeChanger;