Feat(Hint): Support dark mode

2024-10-23 14:37:43 +08:00
parent dbce6b9cf2
commit 1cdd1e5a93
40 changed files with 567 additions and 554 deletions
--- a/src/components/common/Card.tsx
+++ b/src/components/common/Card.tsx
@@ -4,9 +4,15 @@ import useStyles from '@/assets/css/components/common/card.style'
 type CardProps = DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>

 const Card = forwardRef<HTMLDivElement, CardProps>(({ className, ...props }, ref) => {
-    const { styles, cx } = useStyles()
+    const { styles } = useStyles()

-    return <div className={cx(styles.cardBox, className)} {...props} ref={ref} />
+    return (
+        <div
+            className={`${styles.cardBox}${className ? ` ${className}` : ''}`}
+            {...props}
+            ref={ref}
+        />
+    )
 })

 export default Card
--- a/src/components/common/FitCenter.tsx
+++ b/src/components/common/FitCenter.tsx
@@ -6,15 +6,11 @@ interface FitCenterProps extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement
 }

 const FitCenter = ({ className, vertical, ...props }: FitCenterProps) => {
-    const { styles, cx } = useStyles()
+    const { styles } = useStyles()

    return (
        <div
-            className={cx(
-                styles.fitCenter,
-                className,
-                vertical ? ' flex-vertical' : ' flex-horizontal'
-            )}
+            className={`${styles.fitCenter}${vertical ? ' flex-vertical' : ' flex-horizontal'}${className ? ` ${className}` : ''}`}
            {...props}
        />
    )
--- a/src/components/common/FitFullscreen.tsx
+++ b/src/components/common/FitFullscreen.tsx
@@ -9,11 +9,11 @@ interface FitFullscreenProps

 const FitFullscreen = forwardRef<HTMLDivElement, FitFullscreenProps>(
    ({ zIndex, backgroundColor, className, style, ...props }, ref) => {
-        const { styles, cx } = useStyles()
+        const { styles } = useStyles()

        return (
            <div
-                className={cx(styles.fitFullscreen, className)}
+                className={`${styles.fitFullscreen}${className ? ` ${className}` : ''}`}
                style={{
                    zIndex,
                    backgroundColor,
--- a/src/components/common/FlexBox.tsx
+++ b/src/components/common/FlexBox.tsx
@@ -8,15 +8,11 @@ interface FlexBoxProps extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>,

 const FlexBox = forwardRef<HTMLDivElement, FlexBoxProps>(
    ({ className, direction, gap, style, ...props }, ref) => {
-        const { styles, cx } = useStyles()
+        const { styles } = useStyles()

        return (
            <div
-                className={cx(
-                    styles.flexBox,
-                    className,
-                    direction === 'horizontal' ? 'flex-horizontal' : 'flex-vertical'
-                )}
+                className={`${styles.flexBox}${direction === 'horizontal' ? ' flex-horizontal' : ' flex-vertical'}${className ? ` ${className}` : ''}`}
                style={{ gap, ...style }}
                {...props}
                ref={ref}
--- a/src/components/common/HideScrollbar.tsx
+++ b/src/components/common/HideScrollbar.tsx
@@ -540,7 +540,7 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>(
                >
                    <div
                        ref={rootRef}
-                        className={cx(styles.hideScrollbarSelection, className)}
+                        className={`${styles.hideScrollbarSelection}${className ? ` ${className}` : ''}`}
                        tabIndex={0}
                        style={{
                            width: `calc(${maskRef.current?.clientWidth}px + ${verticalScrollbarWidth}px)`,
@@ -571,7 +571,7 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>(
                                className={cx(
                                    styles.scrollbar,
                                    styles.verticalScrollbar,
-                                    isVerticalScrollbarAutoHide ? ` ${styles.hide}` : ''
+                                    isVerticalScrollbarAutoHide ? styles.hide : ''
                                )}
                                style={{
                                    height: maskRef.current
@@ -619,7 +619,7 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>(
                                className={cx(
                                    styles.scrollbar,
                                    styles.horizontalScrollbar,
-                                    isHorizontalScrollbarAutoHide ? ` ${styles.hide}` : ''
+                                    isHorizontalScrollbarAutoHide ? styles.hide : ''
                                )}
                                style={{
                                    width: maskRef.current
--- a/src/components/common/Sidebar/Footer.tsx
+++ b/src/components/common/Sidebar/Footer.tsx
@@ -1,6 +1,7 @@
 import Icon from '@ant-design/icons'
 import useStyles from '@/assets/css/components/common/sidebar/footer.style'
 import { SidebarContext } from '@/components/common/Sidebar/index'
+import { notification } from '@/util/common'
 import { getRedirectUrl } from '@/util/route'
 import { getAvatar, getLoginStatus, getNickname, removeToken } from '@/util/auth'
 import { navigateToLogin, navigateToUser } from '@/util/navigation'
--- a/src/components/tools/StoreCard.tsx
+++ b/src/components/tools/StoreCard.tsx
@@ -3,7 +3,7 @@ import VanillaTilt, { TiltOptions } from 'vanilla-tilt'
 import protocolCheck from 'custom-protocol-check'
 import Icon from '@ant-design/icons'
 import useStyles from '@/assets/css/components/tools/store-card.style'
-import { checkDesktop, omitTextByByte } from '@/util/common'
+import { message, modal, checkDesktop, omitTextByByte } from '@/util/common'
 import { getLoginStatus, getUserId } from '@/util/auth'
 import {
    getAndroidUrl,
@@ -56,7 +56,6 @@ const StoreCard = ({
 }: StoreCardProps) => {
    const { styles, theme } = useStyles()
    const navigate = useNavigate()
-    const [modal, contextHolder] = AntdModal.useModal()
    const cardRef = useRef<HTMLDivElement>(null)
    const [favorite_, setFavorite_] = useState<boolean>(favorite)
    const [userId, setUserId] = useState('')
@@ -76,6 +75,7 @@ const StoreCard = ({
        if (platform === 'ANDROID') {
            void modal.confirm({
                centered: true,
+                keyboard: false,
                icon: <Icon style={{ color: theme.colorPrimary }} component={IconOxygenInfo} />,
                title: 'Android 端',
                content: (
@@ -144,6 +144,7 @@ const StoreCard = ({
        e.stopPropagation()
        void modal.confirm({
            centered: true,
+            keyboard: false,
            icon: <Icon style={{ color: theme.colorPrimary }} component={IconOxygenInfo} />,
            title: 'Android 端',
            content: (
@@ -190,114 +191,108 @@ const StoreCard = ({
    }

    return (
-        <>
-            <Draggable
-                id={`${author.username}:${toolId}:${ver}:${platform}`}
-                data={{
-                    icon,
-                    toolName,
-                    toolId,
-                    authorUsername: author.username,
-                    ver: '',
-                    platform
-                }}
+        <Draggable
+            id={`${author.username}:${toolId}:${ver}:${platform}`}
+            data={{
+                icon,
+                toolName,
+                toolId,
+                authorUsername: author.username,
+                ver: '',
+                platform
+            }}
+        >
+            <Card
+                style={{ overflow: 'visible', ...style }}
+                ref={cardRef}
+                {...props}
+                onClick={handleCardOnClick}
            >
-                <Card
-                    style={{ overflow: 'visible', ...style }}
-                    ref={cardRef}
-                    {...props}
-                    onClick={handleCardOnClick}
-                >
-                    <FlexBox className={styles.root}>
-                        <div className={styles.header}>
-                            <div className={styles.version}>
-                                <AntdTag>
-                                    {platform.slice(0, 1)}-{ver}
-                                </AntdTag>
-                            </div>
-                            <div className={styles.operation}>
-                                {platform !== 'ANDROID' && supportPlatform.includes('ANDROID') && (
-                                    <AntdTooltip title={'Android 端'}>
-                                        <Icon
-                                            component={IconOxygenMobile}
-                                            onClick={handleOnAndroidBtnClick}
-                                        />
-                                    </AntdTooltip>
-                                )}
-                                {platform === 'DESKTOP' && supportPlatform.includes('WEB') && (
-                                    <AntdTooltip title={'Web 端'}>
-                                        <Icon
-                                            component={IconOxygenBrowser}
-                                            onClick={handleOnWebBtnClick}
-                                        />
-                                    </AntdTooltip>
-                                )}
-                                {platform === 'WEB' && supportPlatform.includes('DESKTOP') && (
-                                    <AntdTooltip title={'桌面端'}>
-                                        <Icon
-                                            component={IconOxygenDesktop}
-                                            onClick={handleOnDesktopBtnClick}
-                                        />
-                                    </AntdTooltip>
-                                )}
-                                <AntdTooltip title={'源码'}>
+                <FlexBox className={styles.root}>
+                    <div className={styles.header}>
+                        <div className={styles.version}>
+                            <AntdTag>
+                                {platform.slice(0, 1)}-{ver}
+                            </AntdTag>
+                        </div>
+                        <div className={styles.operation}>
+                            {platform !== 'ANDROID' && supportPlatform.includes('ANDROID') && (
+                                <AntdTooltip title={'Android 端'}>
                                    <Icon
-                                        component={IconOxygenCode}
-                                        onClick={handleOnSourceBtnClick}
+                                        component={IconOxygenMobile}
+                                        onClick={handleOnAndroidBtnClick}
                                    />
                                </AntdTooltip>
-                                {author.id !== userId && (
-                                    <AntdTooltip title={favorite_ ? '取消收藏' : '收藏'}>
-                                        <Icon
-                                            component={
-                                                favorite_ ? IconOxygenStarFilled : IconOxygenStar
-                                            }
-                                            style={{
-                                                color: favorite_ ? theme.colorPrimary : undefined
-                                            }}
-                                            onClick={handleOnStarBtnClick}
-                                        />
-                                    </AntdTooltip>
-                                )}
-                                <DragHandle />
-                            </div>
-                        </div>
-                        <div className={styles.icon}>
-                            <img src={`data:image/svg+xml;base64,${icon}`} alt={'Icon'} />
-                        </div>
-                        <div className={styles.info}>
-                            <div className={styles.toolName} title={toolName}>
-                                {toolName}
-                            </div>
-                            <div>{`ID: ${toolId}`}</div>
-                            {toolDesc && (
-                                <div className={styles.toolDesc} title={toolDesc}>
-                                    {omitTextByByte(toolDesc, 64)}
-                                </div>
                            )}
-                        </div>
-                        {showAuthor && (
-                            <div className={styles.author} onClick={handleOnClickAuthor}>
-                                <div className={styles.avatar}>
-                                    <AntdAvatar
-                                        src={
-                                            <AntdImage
-                                                preview={false}
-                                                src={`data:image/png;base64,${author.userInfo.avatar}`}
-                                                alt={'Avatar'}
-                                            />
-                                        }
-                                        style={{ background: theme.colorBgLayout }}
+                            {platform === 'DESKTOP' && supportPlatform.includes('WEB') && (
+                                <AntdTooltip title={'Web 端'}>
+                                    <Icon
+                                        component={IconOxygenBrowser}
+                                        onClick={handleOnWebBtnClick}
                                    />
-                                </div>
-                                <div className={styles.authorName}>{author.userInfo.nickname}</div>
+                                </AntdTooltip>
+                            )}
+                            {platform === 'WEB' && supportPlatform.includes('DESKTOP') && (
+                                <AntdTooltip title={'桌面端'}>
+                                    <Icon
+                                        component={IconOxygenDesktop}
+                                        onClick={handleOnDesktopBtnClick}
+                                    />
+                                </AntdTooltip>
+                            )}
+                            <AntdTooltip title={'源码'}>
+                                <Icon component={IconOxygenCode} onClick={handleOnSourceBtnClick} />
+                            </AntdTooltip>
+                            {author.id !== userId && (
+                                <AntdTooltip title={favorite_ ? '取消收藏' : '收藏'}>
+                                    <Icon
+                                        component={
+                                            favorite_ ? IconOxygenStarFilled : IconOxygenStar
+                                        }
+                                        style={{
+                                            color: favorite_ ? theme.colorPrimary : undefined
+                                        }}
+                                        onClick={handleOnStarBtnClick}
+                                    />
+                                </AntdTooltip>
+                            )}
+                            <DragHandle />
+                        </div>
+                    </div>
+                    <div className={styles.icon}>
+                        <img src={`data:image/svg+xml;base64,${icon}`} alt={'Icon'} />
+                    </div>
+                    <div className={styles.info}>
+                        <div className={styles.toolName} title={toolName}>
+                            {toolName}
+                        </div>
+                        <div>{`ID: ${toolId}`}</div>
+                        {toolDesc && (
+                            <div className={styles.toolDesc} title={toolDesc}>
+                                {omitTextByByte(toolDesc, 64)}
                            </div>
                        )}
-                    </FlexBox>
-                </Card>
-            </Draggable>
-            {contextHolder}
-        </>
+                    </div>
+                    {showAuthor && (
+                        <div className={styles.author} onClick={handleOnClickAuthor}>
+                            <div className={styles.avatar}>
+                                <AntdAvatar
+                                    src={
+                                        <AntdImage
+                                            preview={false}
+                                            src={`data:image/png;base64,${author.userInfo.avatar}`}
+                                            alt={'Avatar'}
+                                        />
+                                    }
+                                    style={{ background: theme.colorBgLayout }}
+                                />
+                            </div>
+                            <div className={styles.authorName}>{author.userInfo.nickname}</div>
+                        </div>
+                    )}
+                </FlexBox>
+            </Card>
+        </Draggable>
    )
 }