From 84fa8483d9aa511477d10cd391df0634ca42f9f6 Mon Sep 17 00:00:00 2001 From: streakingman Date: Sun, 9 Oct 2022 23:11:58 +0800 Subject: [PATCH] =?UTF-8?q?chore:=20=E6=8F=90=E7=A4=BA=E9=9D=A2=E6=9D=BF?= =?UTF-8?q?=E5=B0=81=E8=A3=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .stylelintrc.cjs | 3 + .../FixedAnimateScalePanel.module.scss | 63 +++++++++++++++++++ src/components/FixedAnimateScalePanel.tsx | 48 ++++++++++++++ src/components/Info.module.scss | 46 +------------- src/components/Info.tsx | 44 +++++++++---- src/components/PersonalInfo.module.scss | 40 +----------- src/components/PersonalInfo.tsx | 13 ++-- 7 files changed, 155 insertions(+), 102 deletions(-) create mode 100644 src/components/FixedAnimateScalePanel.module.scss create mode 100644 src/components/FixedAnimateScalePanel.tsx diff --git a/.stylelintrc.cjs b/.stylelintrc.cjs index 16bbc13..4ec655e 100644 --- a/.stylelintrc.cjs +++ b/.stylelintrc.cjs @@ -9,4 +9,7 @@ module.exports = { 'stylelint-config-standard-scss', 'stylelint-config-prettier-scss', ], + rules: { + 'selector-class-pattern': '^[a-z][a-zA-Z0-9]+$', + }, }; diff --git a/src/components/FixedAnimateScalePanel.module.scss b/src/components/FixedAnimateScalePanel.module.scss new file mode 100644 index 0000000..3163363 --- /dev/null +++ b/src/components/FixedAnimateScalePanel.module.scss @@ -0,0 +1,63 @@ +.panel { + position: fixed; + width: 36px; + height: 36px; + border-radius: 18px; + transition: 0.3s; + padding: 16px; + background-color: rgb(0 0 0/ 50%); + color: white; + overflow: hidden; + backdrop-filter: blur(8px); + box-sizing: border-box; + cursor: pointer; + font-size: 14px; + + > * { + opacity: 0; + } + + &.leftBottom { + left: 8px; + bottom: 8px; + } + + .closeBtn { + position: absolute; + border-radius: 8px; + background-color: rgb(0 0 0/20%); + width: 36px; + height: 36px; + right: 0; + top: 0; + display: flex; + align-items: center; + justify-content: center; + transform: scale(0); + color: white; + cursor: pointer; + user-select: none; + } + + &.open { + height: 100px; + border-radius: 8px; + cursor: default; + z-index: 5 !important; + + @media screen and (max-width: 500px) { + width: calc(100% - 16px); + } + @media screen and (min-width: 501px) { + width: 500px; + } + + > * { + opacity: 1; + } + + .closeBtn { + transform: scale(1); + } + } +} diff --git a/src/components/FixedAnimateScalePanel.tsx b/src/components/FixedAnimateScalePanel.tsx new file mode 100644 index 0000000..71c1d13 --- /dev/null +++ b/src/components/FixedAnimateScalePanel.tsx @@ -0,0 +1,48 @@ +import React, { FC, ReactNode, useState } from 'react'; +import style from './FixedAnimateScalePanel.module.scss'; +import classNames from 'classnames'; + +export const FixedAnimateScalePanel: FC<{ + children: ReactNode; + className?: string; + openClassName?: string; + closeClassName?: string; + initOpen?: boolean; +}> = ({ + children, + className, + openClassName, + closeClassName, + initOpen = false, +}) => { + const [open, setOpen] = useState(initOpen); + return ( +
!open && setOpen(true)} + className={classNames( + style.panel, + open && style.open, + className, + open ? openClassName : closeClassName + )} + > + {children} +
setOpen(false)}> + + + +
+
+ ); +}; diff --git a/src/components/Info.module.scss b/src/components/Info.module.scss index 00da815..985d446 100644 --- a/src/components/Info.module.scss +++ b/src/components/Info.module.scss @@ -1,24 +1,9 @@ -/* 可封装 */ .info { - position: fixed; left: 8px; bottom: 8px; - transition: 0.3s; - padding: 16px; - width: 36px; - height: 36px; - border-radius: 18px; - background: rgb(0 0 0/ 50%); - color: white; - overflow: hidden; - backdrop-filter: blur(8px); - box-sizing: border-box; - cursor: pointer; - font-size: 14px; p { margin: 0; - opacity: 0; transition: 0.6s; } @@ -33,42 +18,13 @@ font-size: 24px; font-weight: 900; transition: 0.2s; - } - - .close { - position: absolute; - border-radius: 8px; - background-color: rgb(0 0 0/20%); - width: 36px; - height: 36px; - right: 0; - top: 0; - line-height: 36px; - text-align: center; - transform: scale(0); - color: white; - cursor: pointer; - user-select: none; + opacity: 1; } &.open { - height: 100px; - border-radius: 8px; - @media screen and (max-width: 500px) { width: calc(100% - 70px); } - @media screen and (min-width: 501px) { - width: 500px; - } - - p { - opacity: 1; - } - - .close { - transform: scale(1); - } .icon { transform: scale(0); diff --git a/src/components/Info.tsx b/src/components/Info.tsx index 973f61c..208af5b 100644 --- a/src/components/Info.tsx +++ b/src/components/Info.tsx @@ -1,12 +1,11 @@ -import React, { CSSProperties, FC, useState } from 'react'; +import React, { FC } from 'react'; import style from './Info.module.scss'; -import classNames from 'classnames'; +import { FixedAnimateScalePanel } from './FixedAnimateScalePanel'; export const Info: FC = () => { - const [open, setOpen] = useState(false); return ( -
!open && setOpen(true)} - className={classNames(style.info, open && style.open)} +
i

@@ -16,11 +15,27 @@ export const Info: FC = () => { target="_blank" rel="noreferrer" > - 洛天依，言和原创《普通DISCO》 + 普通DISCO（言洛版） + + 、 + + 贫民百万歌星 + + 、 + + 只因你太美

- 玩法来源➡️羊了个羊➡️ + 玩法来源-{'>'}羊了个羊-{'>'} { > 3 Tiles + -{'>'} + + 中国龙 +

仅供交流，禁止商用

-
setOpen(false)}> - X -
-
+ ); }; diff --git a/src/components/PersonalInfo.module.scss b/src/components/PersonalInfo.module.scss index ccd0252..b409744 100644 --- a/src/components/PersonalInfo.module.scss +++ b/src/components/PersonalInfo.module.scss @@ -12,14 +12,9 @@ } } -.info { - position: fixed; +.personalInfo { right: 8px; top: 8px; - padding: 4px; - width: 36px; - height: 36px; - border-radius: 18px; animation: gradient 4s ease infinite; background-image: linear-gradient( -45deg, @@ -30,12 +25,8 @@ ); background-size: 400% 400%; background-position: 0 0; - box-sizing: border-box; transition: 0.4s; - backdrop-filter: blur(8px); z-index: 9; - overflow: hidden; - color: white; * { transition: 0.6s; @@ -47,28 +38,13 @@ font-weight: 900; } - .close { - position: absolute; - border-radius: 8px; - background-color: rgb(0 0 0/20%); - width: 36px; - height: 36px; - right: 0; - top: 0; - line-height: 36px; - text-align: center; - transform: scale(0); - color: white; - cursor: pointer; - user-select: none; - } - .github { &Icon { position: absolute; right: 6px; top: 6px; cursor: pointer; + opacity: 1 !important; } &Link { @@ -93,18 +69,8 @@ } &.open { - height: 100px; - border-radius: 8px; - @media screen and (max-width: 500px) { - width: calc(100% - 16px); - } - @media screen and (min-width: 501px) { - width: 500px; - } - - .close { - transform: scale(1); + width: calc(100% - 60px) !important; } .github { diff --git a/src/components/PersonalInfo.tsx b/src/components/PersonalInfo.tsx index c2b6f4a..d36bf8f 100644 --- a/src/components/PersonalInfo.tsx +++ b/src/components/PersonalInfo.tsx @@ -1,6 +1,7 @@ import React, { FC, useState } from 'react'; import style from './PersonalInfo.module.scss'; import classNames from 'classnames'; +import { FixedAnimateScalePanel } from './FixedAnimateScalePanel'; const GithubIcon: FC = () => { return ( @@ -63,19 +64,15 @@ export const BiliBiliLink: FC = () => { }; export const PersonalInfo: FC = () => { - const [open, setOpen] = useState(false); return ( -
!open && setOpen(true)} - className={classNames(style.info, open && style.open)} + -
setOpen(false)}> - X -
-
+ ); };