FatttSnake/oxygen-ui
1
0
Fork 0
Code Pull Requests Activity

Refactor(css): Change all less to module mode

Browse Source
This commit is contained in:
Fat Snake
2024-10-17 20:26:06 +08:00
parent 3d77dc793b
commit b7c3fb8524
111 changed files with 962 additions and 858 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/common/Card.tsx
View File

@@ -1,10 +1,16 @@
import { DetailedHTMLProps, HTMLAttributes } from 'react'
import '@/assets/css/components/common/card.less'
import styles from '@/assets/css/components/common/card.module.less'
type CardProps = DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>
const Card = forwardRef<HTMLDivElement, CardProps>(({ className, ...props }, ref) => {
return <div className={`card-box${className ? ` ${className}` : ''}`} {...props} ref={ref} />
return (
<div
className={`${styles.cardBox}${className ? ` ${className}` : ''}`}
{...props}
ref={ref}
/>
)
})
export default Card

4
src/components/common/FitCenter.tsx
View File

@@ -1,5 +1,5 @@
import { DetailedHTMLProps, HTMLAttributes } from 'react'
import '@/assets/css/components/common/fit-center.less'
import styles from '@/assets/css/components/common/fit-center.module.less'
interface FitCenterProps extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
vertical?: boolean
@@ -8,7 +8,7 @@ interface FitCenterProps extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement
const FitCenter = ({ className, vertical, ...props }: FitCenterProps) => {
return (
<div
className={`fit-center${className ? ` ${className}` : ''}${
className={`${styles.fitCenter}${className ? ` ${className}` : ''}${
vertical ? ' flex-vertical' : ' flex-horizontal'
}`}
{...props}

4
src/components/common/FitFullscreen.tsx
View File

@@ -1,5 +1,5 @@
import { DetailedHTMLProps, HTMLAttributes } from 'react'
import '@/assets/css/components/common/fit-fullscreen.less'
import styles from '@/assets/css/components/common/fit-fullscreen.module.less'
interface FitFullscreenProps
extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
@@ -11,7 +11,7 @@ const FitFullscreen = forwardRef<HTMLDivElement, FitFullscreenProps>(
({ zIndex, backgroundColor, className, style, ...props }, ref) => {
return (
<div
className={`fit-fullscreen${className ? ` ${className}` : ''}`}
className={`${styles.fitFullscreen}${className ? ` ${className}` : ''}`}
style={{
zIndex,
backgroundColor,

4
src/components/common/FlexBox.tsx
View File

@@ -1,5 +1,5 @@
import { DetailedHTMLProps, HTMLAttributes } from 'react'
import '@/assets/css/components/common/flex-box.less'
import styles from '@/assets/css/components/common/flex-box.module.less'
interface FlexBoxProps extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
direction?: 'horizontal' | 'vertical'
@@ -10,7 +10,7 @@ const FlexBox = forwardRef<HTMLDivElement, FlexBoxProps>(
({ className, direction, gap, style, ...props }, ref) => {
return (
<div
className={`flex-box ${
className={`${styles.flexBox} ${
direction === 'horizontal' ? 'flex-horizontal' : 'flex-vertical'
}${className ? ` ${className}` : ''}`}
style={{ gap, ...style }}

4
src/components/common/FullscreenLoadingMask.tsx
View File

@@ -1,5 +1,5 @@
import Icon from '@ant-design/icons'
import '@/assets/css/components/common/fullscreen-loading-mask.less'
import styles from '@/assets/css/components/common/fullscreen-loading-mask.module.less'
import { COLOR_FONT_MAIN } from '@/constants/common.constants'
import FitFullscreen from '@/components/common/FitFullscreen'
@@ -16,7 +16,7 @@ const FullscreenLoadingMask = () => {
return (
<>
<FitFullscreen>
<div className={'fullscreen-loading-mask'}>
<div className={styles.fullscreenLoadingMask}>
<AntdSpin indicator={loadingIcon} />
</div>
</FitFullscreen>

24
src/components/common/HideScrollbar.tsx
View File

@@ -6,7 +6,7 @@ import {
HTMLAttributes,
UIEvent
} from 'react'
import '@/assets/css/components/common/hide-scrollbar.less'
import styles from '@/assets/css/components/common/hide-scrollbar.module.less'
interface HideScrollbarProps
extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
@@ -515,7 +515,7 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>(
return (
<>
<div
className={'hide-scrollbar-mask'}
className={styles.hideScrollbarMask}
ref={maskRef}
onMouseMove={
!isPreventScroll ? handleScrollbarMouseEvent('move', 'all') : undefined
@@ -538,7 +538,7 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>(
>
<div
ref={rootRef}
className={`hide-scrollbar-selection${className ? ` ${className}` : ''}`}
className={`${styles.hideScrollbarSelection}${className ? ` ${className}` : ''}`}
tabIndex={0}
style={{
width: `calc(${maskRef.current?.clientWidth}px + ${verticalScrollbarWidth}px)`,
@@ -555,7 +555,7 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>(
onScroll={handleDefaultScroll}
>
<div
className={'hide-scrollbar-content'}
className={styles.hideScrollbarContent}
ref={contentRef}
style={{ minWidth, minHeight }}
data-refresh={refreshTime}
@@ -566,8 +566,8 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>(
{isShowVerticalScrollbar &&
(!isHiddenVerticalScrollbarWhenFull || verticalScrollbarLength < 100) && (
<div
className={`scrollbar vertical-scrollbar${
isVerticalScrollbarAutoHide ? ' hide' : ''
className={`${styles.scrollbar} ${styles.verticalScrollbar}${
isVerticalScrollbarAutoHide ? ` ${styles.hide}` : ''
}`}
style={{
height: maskRef.current
@@ -582,9 +582,9 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>(
padding: `${scrollbarAsidePadding}px ${scrollbarEdgePadding}px`
}}
>
<div className={'box'} style={{ width: scrollbarWidth }}>
<div className={styles.box} style={{ width: scrollbarWidth }}>
<div
className={'block'}
className={styles.block}
style={{
height: `${verticalScrollbarLength}%`,
top: `clamp(0px, ${verticalScrollbarPosition}%, ${
@@ -609,8 +609,8 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>(
(!isHiddenHorizontalScrollbarWhenFull ||
horizontalScrollbarLength < 100) && (
<div
className={`scrollbar horizontal-scrollbar${
isHorizontalScrollbarAutoHide ? ' hide' : ''
className={`${styles.scrollbar} ${styles.horizontalScrollbar}${
isHorizontalScrollbarAutoHide ? ` ${styles.hide}` : ''
}`}
style={{
width: maskRef.current
@@ -625,9 +625,9 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>(
padding: `${scrollbarEdgePadding}px ${scrollbarAsidePadding}px`
}}
>
<div className={'box'} style={{ height: scrollbarWidth }}>
<div className={styles.box} style={{ height: scrollbarWidth }}>
<div
className={'block'}
className={styles.block}
style={{
width: `${horizontalScrollbarLength}%`,
left: `clamp(0px, ${horizontalScrollbarPosition}%, ${

8
src/components/common/Indicator.tsx
View File

@@ -1,5 +1,5 @@
import _ from 'lodash'
import '@/assets/css/components/common/indicator.less'
import styles from '@/assets/css/components/common/indicator.module.less'
interface IndicatorProps {
total: number
@@ -16,15 +16,15 @@ const Indicator = ({ total, current, onSwitch }: IndicatorProps) => {
return (
<>
<ul className={'dot-list flex-vertical'}>
<ul className={`${styles.dotList} flex-vertical`}>
{_.range(0, total).map((_value, index) => {
return (
<li
key={index}
className={`item center-box${index === current ? ' active' : ''}`}
className={`${styles.item} center-box${index === current ? ` ${styles.active}` : ''}`}
onClick={handleClick(index)}
>
<div className={'dot'} />
<div className={styles.dot} />
</li>
)
})}

4
src/components/common/LoadingMask.tsx
View File

@@ -1,6 +1,6 @@
import { PropsWithChildren, ReactNode } from 'react'
import Icon from '@ant-design/icons'
import '@/assets/css/components/common/loading-mask.less'
import styles from '@/assets/css/components/common/loading-mask.module.less'
import { COLOR_FONT_MAIN } from '@/constants/common.constants'
interface LoadingMaskProps extends PropsWithChildren {
@@ -22,7 +22,7 @@ const LoadingMask = (props: LoadingMaskProps) => {
props.children
) : (
<>
<div className={'loading-mask'}>
<div className={styles.loadingMask}>
{props.maskContent || <AntdSpin indicator={loadingIcon} />}
</div>
</>

19
src/components/common/Sidebar/Footer.tsx
View File

@@ -1,4 +1,5 @@
import Icon from '@ant-design/icons'
import styles from '@/assets/css/components/common/sidebar.module.less'
import { COLOR_ERROR } from '@/constants/common.constants'
import { getRedirectUrl } from '@/util/route'
import { getAvatar, getLoginStatus, getNickname, removeToken } from '@/util/auth'
@@ -55,9 +56,9 @@ const Footer = () => {
}, [loginStatus])
return (
<div className={'footer'}>
<div className={styles.footer}>
<span
className={'icon-user'}
className={styles.iconUser}
onClick={handleClickAvatar}
title={getLoginStatus() ? '个人中心' : '登录'}
>
@@ -67,21 +68,25 @@ const Footer = () => {
<Icon viewBox={'-20 0 1024 1024'} component={IconOxygenUser} />
)}
</span>
<span hidden={getLoginStatus()} className={'text'}>
<span hidden={getLoginStatus()} className={styles.text}>
未
<NavLink to={getRedirectUrl('/login', `${lastMatch.pathname}${location.search}`)}>
登录
</NavLink>
</span>
<span hidden={!getLoginStatus()} className={'text'} title={nickname}>
<span hidden={!getLoginStatus()} className={styles.text} title={nickname}>
{nickname}
</span>
<div
hidden={!getLoginStatus()}
className={`submenu-exit${!getLoginStatus() ? ' hide' : ''}`}
className={`${styles.submenuExit}${!getLoginStatus() ? ` ${styles.hide}` : ''}`}
>
<div className={'content'}>
<span hidden={!getLoginStatus()} className={'icon-exit'} onClick={handleLogout}>
<div className={styles.content}>
<span
hidden={!getLoginStatus()}
className={styles.iconExit}
onClick={handleLogout}
>
<Icon
component={isExiting ? IconOxygenLoading : IconOxygenExit}
spin={isExiting}

21
src/components/common/Sidebar/Item.tsx
View File

@@ -1,5 +1,6 @@
import { ReactNode, MouseEvent } from 'react'
import Icon from '@ant-design/icons'
import styles from '@/assets/css/components/common/sidebar.module.less'
import Submenu from '@/components/common/Sidebar/Submenu'
type ItemProps = {
@@ -33,30 +34,26 @@ const Item = (props: ItemProps) => {
}
return (
<li className={'item'}>
<div className={'menu-bt'} onMouseEnter={showSubmenu}>
<li className={styles.item}>
<div className={styles.menuBt} onMouseEnter={showSubmenu}>
<NavLink
end={props.end}
to={props.path}
className={({ isActive, isPending }) =>
isPending ? 'pending' : isActive ? 'active' : ''
isPending ? 'pending' : isActive ? `${styles.active}` : ''
}
>
{props.icon && (
<div className={'icon-box'}>
<div className={styles.iconBox}>
{typeof props.icon === 'string' ? (
<img
className={'icon'}
src={`data:image/svg+xml;base64,${props.icon}`}
alt={'icon'}
/>
<img src={`data:image/svg+xml;base64,${props.icon}`} alt={'icon'} />
) : (
<Icon className={'icon'} component={props.icon} />
<Icon component={props.icon} />
)}
</div>
)}
<span className={'text'}>{props.text}</span>
<div className={'extend'}>{props.extend}</div>
<span className={styles.text}>{props.text}</span>
<div className={styles.extend}>{props.extend}</div>
</NavLink>
</div>
{props.children && (

3
src/components/common/Sidebar/Scroll.tsx
View File

@@ -1,9 +1,10 @@
import { PropsWithChildren } from 'react'
import styles from '@/assets/css/components/common/sidebar.module.less'
import HideScrollbar from '@/components/common/HideScrollbar'
const Scroll = (props: PropsWithChildren) => {
return (
<div className={'scroll'}>
<div className={styles.scroll}>
<HideScrollbar
isShowVerticalScrollbar={true}
scrollbarWidth={2}

3
src/components/common/Sidebar/Separate.tsx
View File

@@ -1,10 +1,11 @@
import { DetailedHTMLProps, HTMLAttributes } from 'react'
import styles from '@/assets/css/components/common/sidebar.module.less'
const Separate = ({
className,
...props
}: DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>) => {
return <div className={`separate${className ? ` ${className}` : ''}`} {...props} />
return <div className={`${styles.separate}${className ? ` ${className}` : ''}`} {...props} />
}
export default Separate

5
src/components/common/Sidebar/Submenu.tsx
View File

@@ -1,4 +1,5 @@
import { PropsWithChildren } from 'react'
import styles from '@/assets/css/components/common/sidebar.module.less'
interface SidebarSubmenuProps extends PropsWithChildren {
submenuTop: number
@@ -8,13 +9,13 @@ interface SidebarSubmenuProps extends PropsWithChildren {
const Submenu = (props: SidebarSubmenuProps) => {
return (
<ul
className={'submenu'}
className={styles.submenu}
style={{
top: props.submenuTop,
left: props.submenuLeft
}}
>
<div className={'content'}>{props.children}</div>
<div className={styles.content}>{props.children}</div>
</ul>
)
}

14
src/components/common/Sidebar/index.tsx
View File

@@ -1,6 +1,6 @@
import { PropsWithChildren, ReactNode } from 'react'
import Icon from '@ant-design/icons'
import '@/assets/css/components/common/sidebar.less'
import styles from '@/assets/css/components/common/sidebar.module.less'
import { getLocalStorage, setLocalStorage } from '@/util/browser'
import Item from '@/components/common/Sidebar/Item'
import ItemList from '@/components/common/Sidebar/ItemList'
@@ -28,18 +28,18 @@ const Sidebar = (props: SidebarProps) => {
return (
<>
<div
className={`sidebar${isHideSidebar ? ' hide' : ''}`}
className={`${styles.sidebar}${isHideSidebar ? ` ${styles.hide}` : ''}`}
style={{ width: props.width ?? 'clamp(180px, 20vw, 240px)' }}
>
<div className={'title'}>
<span className={'icon-box'} onClick={switchSidebar}>
<div className={styles.title}>
<span className={styles.iconBox} onClick={switchSidebar}>
<Icon component={IconOxygenExpand} />
</span>
<span className={'text'}>{props.title}</span>
<span className={styles.text}>{props.title}</span>
</div>
<Separate style={{ marginTop: 0 }} />
<div className={'content'}>{props.children}</div>
<div className={'bottom-fixed'} style={{ flex: 'none' }}>
<div className={styles.content}>{props.children}</div>
<div className={styles.bottomFixed} style={{ flex: 'none' }}>
{props.bottomFixed}
</div>
<Separate style={{ marginTop: 0, marginBottom: 0 }} />

12
src/components/common/UrlCard.tsx
View File

@@ -1,7 +1,7 @@
import { DetailedHTMLProps, HTMLAttributes, ReactNode } from 'react'
import Icon from '@ant-design/icons'
import VanillaTilt, { TiltOptions } from 'vanilla-tilt'
import '@/assets/css/components/common/url-card.less'
import styles from '@/assets/css/components/common/url-card.module.less'
import Card from '@/components/common/Card'
import FlexBox from '@/components/common/FlexBox'
@@ -39,16 +39,16 @@ const UrlCard = ({
return (
<Card
data-component={'component-url-card'}
className={styles.root}
style={{ overflow: 'visible', ...style }}
{...props}
ref={cardRef}
onClick={handleCardOnClick}
>
<FlexBox className={'url-card'}>
<Icon component={icon} className={'icon'} />
<div className={'text'}>{children}</div>
<div className={'description'}>{description}</div>
<FlexBox className={styles.urlCard}>
<Icon component={icon} className={styles.icon} />
<div className={styles.text}>{children}</div>
<div>{description}</div>
</FlexBox>
</Card>
)