diff --git a/src/components/ConfigDialog.module.scss b/src/components/ConfigDialog.module.scss index 01a2d3f..7550e5d 100644 --- a/src/components/ConfigDialog.module.scss +++ b/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 @@ } } } -} -.inputContainer { - word-break: keep-all; + input { + &:not([type='checkbox']) { + width: 100%; + } - audio { - height: 30px; - } - - input, - select { - flex-grow: 1; + max-width: 100%; + box-sizing: border-box; } 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; - } + padding: 3px 12px; } } @@ -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; diff --git a/src/components/ConfigDialog.tsx b/src/components/ConfigDialog.tsx index e1170b1..65bc2bd 100644 --- a/src/components/ConfigDialog.tsx +++ b/src/components/ConfigDialog.tsx @@ -65,6 +65,7 @@ const ConfigDialog: FC<{ const [customTheme, setCustomTheme] = useState({ 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(0); + useEffect(() => { + updateCustomTheme( + 'pure', + pureClickTime % 5 === 0 && pureClickTime !== 0 + ); + }, [pureClickTime]); + return (
@@ -680,7 +690,12 @@ const ConfigDialog: FC<{ (谨慎操作,单文件不超过1M为宜,文件过大可能导致崩溃,介时请刷新浏览器)
{configError &&
{configError}
} - + {customTheme.pure && ( +
+ 🎉🎉🎉恭喜发现彩蛋,生成的主题将开启纯净模式~ +
+ )} + setPureClickTime(pureClickTime + 1)} />