chore: 组件拆分动态引入

This commit is contained in:
streakingman 2022-10-08 21:01:01 +08:00
parent 657422eb4f
commit e6449f9d8c
4 changed files with 78 additions and 72 deletions

View File

@ -1,4 +1,4 @@
import React, { FC, useEffect, useState } from 'react'; import React, { FC, useEffect, useState, Suspense } from 'react';
import './App.scss'; import './App.scss';
import { import {
domRelatedOptForTheme, domRelatedOptForTheme,
@ -12,8 +12,8 @@ import { BeiAn } from './components/BeiAn';
import { Title } from './components/Title'; import { Title } from './components/Title';
import { PersonalInfo } from './components/PersonalInfo'; import { PersonalInfo } from './components/PersonalInfo';
import { Info } from './components/Info'; import { Info } from './components/Info';
import { ThemeChanger } from './components/ThemeChanger'; const ThemeChanger = React.lazy(() => import('./components/ThemeChanger'));
import { ConfigDialog } from './components/ConfigDialog'; const ConfigDialog = React.lazy(() => import('./components/ConfigDialog'));
// 读取缓存关卡得分 // 读取缓存关卡得分
const initLevel = Number(localStorage.getItem(LAST_LEVEL_STORAGE_KEY) || '1'); const initLevel = Number(localStorage.getItem(LAST_LEVEL_STORAGE_KEY) || '1');
@ -63,37 +63,39 @@ const App: FC<{ theme: Theme<any> }> = ({ theme: initTheme }) => {
/> />
)} )}
<Title title={theme.title} desc={theme.desc} /> <Title title={theme.title} desc={theme.desc} />
<PersonalInfo />
<Game <Game
key={theme.title} key={theme.title}
theme={theme} theme={theme}
initLevel={initLevel} initLevel={initLevel}
initScore={initScore} initScore={initScore}
/> />
<PersonalInfo />
<div className={'flex-spacer'} /> <div className={'flex-spacer'} />
<p style={{ textAlign: 'center', fontSize: 10, opacity: 0.5 }}> <p style={{ textAlign: 'center', fontSize: 10, opacity: 0.5 }}>
<span id="busuanzi_container_site_pv"> <span id="busuanzi_container_site_pv">
{' '}
访 访
<span id="busuanzi_value_site_pv" /> <span id="busuanzi_value_site_pv" />
</span> </span>
<br /> <br />
<BeiAn /> <BeiAn />
</p> </p>
<Info /> <Suspense fallback={<span>Loading</span>}>
{!theme.pure && ( {!theme.pure && (
<> <>
<ThemeChanger <Info />
changeTheme={changeTheme} <ThemeChanger
onDiyClick={() => setDiyDialogShow(true)} changeTheme={changeTheme}
/> onDiyClick={() => setDiyDialogShow(true)}
<ConfigDialog />
show={diyDialogShow} {diyDialogShow && (
closeMethod={() => setDiyDialogShow(false)} <ConfigDialog
previewMethod={previewTheme} closeMethod={() => setDiyDialogShow(false)}
/> previewMethod={previewTheme}
</> />
)} )}
</>
)}
</Suspense>
</> </>
); );
}; };

View File

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

View File

@ -8,22 +8,11 @@ import { captureElement, LAST_UPLOAD_TIME_STORAGE_KEY } from '../utils';
import { copy } from 'clipboard'; import { copy } from 'clipboard';
const STORAGEKEY = 'customTheme'; 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<{ const ConfigDialog: FC<{
show: boolean;
closeMethod: () => void; closeMethod: () => void;
previewMethod: (theme: Theme<string>) => void; previewMethod: (theme: Theme<string>) => void;
}> = ({ show, closeMethod, previewMethod }) => { }> = ({ closeMethod, previewMethod }) => {
const [sounds, setSounds] = useState<Sound[]>([]); const [sounds, setSounds] = useState<Sound[]>([]);
const [icons, setIcons] = useState<Icon[]>([]); const [icons, setIcons] = useState<Icon[]>([]);
const inputRefMap = useRef< const inputRefMap = useRef<
@ -57,38 +46,44 @@ export const ConfigDialog: FC<{
// 初始化 // 初始化
useEffect(() => { useEffect(() => {
if (storageTheme) { let storageTheme: Theme<any> | undefined = undefined;
const { try {
title, const configString = localStorage.getItem(STORAGEKEY);
desc = '', if (configString) {
bgm = '', const parseRes = JSON.parse(configString);
sounds, if (typeof parseRes === 'object') storageTheme = parseRes;
icons, }
background = '', } catch (e) {
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,
});
} }
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( className={classNames(
style.dialog, style.dialog,
style.dialogWrapper, style.dialogWrapper,
show && style.dialogShow,
'flex-container flex-container' 'flex-container flex-container'
)} )}
> >
@ -646,3 +640,5 @@ export const ConfigDialog: FC<{
</div> </div>
); );
}; };
export default ConfigDialog;

View File

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