From 0127253fddaa4236b14e6ff7306a7b9f5c840c49 Mon Sep 17 00:00:00 2001 From: streakingman Date: Mon, 26 Sep 2022 21:40:15 +0800 Subject: [PATCH] =?UTF-8?q?feat(=E8=87=AA=E5=AE=9A=E4=B9=89=E4=B8=BB?= =?UTF-8?q?=E9=A2=98):=20=E7=BA=AF=E5=87=80=E6=A8=A1=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.tsx | 89 ++++++++++++++---------- src/components/ConfigDialog.module.scss | 17 ++++- src/components/ConfigDialog.tsx | 10 ++- src/components/Info.tsx | 8 +-- src/components/PersonalInfo.tsx | 90 ++++++++++++++----------- src/themes/interface.ts | 1 + 6 files changed, 133 insertions(+), 82 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index cd79b5c..541e6de 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -7,7 +7,7 @@ import React, { } from 'react'; import './App.scss'; -import { PersonalInfo } from './components/PersonalInfo'; +import { BilibiliLink, PersonalInfo } from './components/PersonalInfo'; import { parsePathCustomThemeId, parsePathThemeName, @@ -182,10 +182,16 @@ const Symbol: FC = ({ x, y, icon, isCover, status, onClick }) => { // 从url初始化主题 const themeFromPath: string = parsePathThemeName(location.href); const customThemeIdFromPath = parsePathCustomThemeId(location.href); +const CUSTOM_THEME_FAIL_TIP = '查询配置失败'; const App: FC = () => { - const [curTheme, setCurTheme] = useState>(defaultTheme); + const [curTheme, setCurTheme] = useState>( + customThemeIdFromPath + ? { title: '', icons: [], sounds: [], name: '' } + : defaultTheme + ); const [themes, setThemes] = useState[]>(builtInThemes); + const [pureMode, setPureMode] = useState(!!customThemeIdFromPath); const [scene, setScene] = useState(makeScene(1, curTheme.icons)); const [level, setLevel] = useState(1); @@ -227,13 +233,17 @@ const App: FC = () => { try { const customTheme = JSON.parse(content); - setThemes([...themes, customTheme]); + if (!customTheme.pure) { + setPureMode(false); + setThemes([...themes, customTheme]); + } setCurTheme(customTheme); } catch (e) { console.log(e); } }) .catch((e) => { + setCurTheme({ ...curTheme, title: CUSTOM_THEME_FAIL_TIP }); console.log(e); }); } else if (themeFromPath) { @@ -473,32 +483,40 @@ const App: FC = () => { return ( <> -

{curTheme.title}

-

- -

-

- 主题: - {/*TODO themes维护方式调整*/} - - Level: {level} -

+

+ {curTheme.title}{' '} + {curTheme.title === CUSTOM_THEME_FAIL_TIP && ( + 返回首页 + )} +

{curTheme.desc} + {!pureMode && } +

+ {!pureMode && ( + <> + 主题: + {/*TODO themes维护方式调整*/} + + + )} + Level: {level} +

+
@@ -534,20 +552,23 @@ const App: FC = () => { - {/**/}
- + {!pureMode && ( + + )} - + + {pureMode && } + {/*提示弹窗*/} {finished && (
diff --git a/src/components/ConfigDialog.module.scss b/src/components/ConfigDialog.module.scss index e76ffc5..b0881ae 100644 --- a/src/components/ConfigDialog.module.scss +++ b/src/components/ConfigDialog.module.scss @@ -1,6 +1,13 @@ .dialog { text-align: left; overflow-y: auto; + color: rgb(255 255 255 / 87%); + background-color: #242424; + + @media (prefers-color-scheme: light) { + color: #213547; + background-color: #fff; + } &Wrapper { z-index: 10; @@ -12,7 +19,6 @@ bottom: 0; transform: translateX(-50%) translateY(-100%); opacity: 0; - background-color: white; transition: 0.3s; padding: 16px; display: flex; @@ -74,9 +80,16 @@ transform: translateX(-50%) translateY(-60vh); opacity: 0; transition: 0.3s; - background-color: white; border-radius: 8px; border: 2px solid #535bf2; + color: rgb(255 255 255 / 87%); + background-color: #242424; + + // 写冗余了，待优化 + @media (prefers-color-scheme: light) { + color: #213547; + background-color: #fff; + } &Show { transform: translateX(-50%) translateY(-50%); diff --git a/src/components/ConfigDialog.tsx b/src/components/ConfigDialog.tsx index 04ffa82..137af45 100644 --- a/src/components/ConfigDialog.tsx +++ b/src/components/ConfigDialog.tsx @@ -52,6 +52,7 @@ export const ConfigDialog: FC<{ error: '', }); const [genLink, setGenLink] = useState(''); + const [pureCount, setPureCount] = useState(0); // 初始化 useEffect(() => { @@ -63,7 +64,7 @@ export const ConfigDialog: FC<{ ) ); setIcons( - storageTheme.icons.map((icon) => { + icons.map((icon) => { if (icon.clickSound === 'button-click') icon.clickSound = ''; if (icon.tripleSound === 'triple') icon.tripleSound = ''; @@ -229,6 +230,8 @@ export const ConfigDialog: FC<{ const customTheme: Theme = { name: `自定义-${title}`, + // 恭喜你发现纯净模式彩蛋🎉，点击文字十次可以开启纯净模式 + pure: pureCount !== 0 && pureCount % 10 === 0, title, desc, bgm, @@ -312,9 +315,12 @@ export const ConfigDialog: FC<{ 'flex-container flex-container' )} > -

+

setPureCount(pureCount + 1)}> 目前自定义仅支持配置https链接，可网上自行搜索素材复制链接，或者将自己处理好的素材上传第三方存储服务/图床上再复制外链 （想白嫖的话自行搜索【免费图床】【免费对象存储】【免费mp3外链】等） + {pureCount != 0 && + pureCount % 10 === 0 && + '🎉🎉🎉恭喜发现彩蛋！主题分享后将开启纯净模式～'}

{/*基本配置*/} diff --git a/src/components/Info.tsx b/src/components/Info.tsx index e286e8f..94566ff 100644 --- a/src/components/Info.tsx +++ b/src/components/Info.tsx @@ -1,8 +1,8 @@ -import React, { FC } from 'react'; +import React, { CSSProperties, FC } from 'react'; -export const Info: FC = () => { +export const Info: FC<{ style?: CSSProperties }> = ({ style }) => { return ( - <> +

累计访问：次 @@ -44,6 +44,6 @@ export const Info: FC = () => { 3 Tiles

- +
); }; diff --git a/src/components/PersonalInfo.tsx b/src/components/PersonalInfo.tsx index cc61c45..4ae55ff 100644 --- a/src/components/PersonalInfo.tsx +++ b/src/components/PersonalInfo.tsx @@ -1,46 +1,56 @@ import React, { FC } from 'react'; +export const GithubLink: FC = () => { + return ( + + 点个✨不迷路 @StreakingMan + + + ); +}; + +export const BilibiliLink: FC = () => { + return ( + + @streaking_man + + + ); +}; + export const PersonalInfo: FC = () => { return ( - <> - - 点个✨不迷路 @StreakingMan - - - 、 - - @streaking_man - - - +

+ 、 +

); }; diff --git a/src/themes/interface.ts b/src/themes/interface.ts index 3d7ad32..8964b51 100644 --- a/src/themes/interface.ts +++ b/src/themes/interface.ts @@ -20,6 +20,7 @@ export interface Theme { desc?: ReactNode; name: string; bgm?: string; + pure?: boolean; icons: Icon[]; sounds: Sound[]; operateSoundMap?: Record;