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

Optimize code

Browse Source
This commit is contained in:
Fat Snake
2024-01-03 15:16:48 +08:00
parent d67aea2895
commit bcd7b761ac
10 changed files with 609 additions and 593 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -4,9 +4,8 @@ import '@/assets/css/components/common/card.scss'
interface CardProps interface CardProps
extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {} extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {}
const Card = forwardRef<HTMLDivElement, CardProps>((props, ref) => { const Card = forwardRef<HTMLDivElement, CardProps>(({ className, ...props }, ref) => {
const { className, ..._props } = props return <div className={`card-box${className ? ` ${className}` : ''}`} {...props} ref={ref} />
return <div className={`card-box${className ? ` ${className}` : ''}`} {..._props} ref={ref} />
}) })
export default Card export default Card

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

@@ -6,14 +6,13 @@ interface FitCenterProps
vertical?: boolean vertical?: boolean
} }
const FitCenter: React.FC<FitCenterProps> = (props) => { const FitCenter: React.FC<FitCenterProps> = ({ className, vertical, ...props }) => {
const { className, vertical, ..._props } = props
return ( return (
<div <div
className={`fit-center${className ? ` ${className}` : ''}${ className={`fit-center${className ? ` ${className}` : ''}${
vertical ? ' flex-vertical' : ' flex-horizontal' vertical ? ' flex-vertical' : ' flex-horizontal'
}`} }`}
{..._props} {...props}
/> />
) )
} }

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

@@ -7,8 +7,8 @@ interface FitFullscreenProps
backgroundColor?: string backgroundColor?: string
} }
const FitFullscreen = forwardRef<HTMLDivElement, FitFullscreenProps>((props, ref) => { const FitFullscreen = forwardRef<HTMLDivElement, FitFullscreenProps>(
const { zIndex, backgroundColor, className, style, ..._props } = props ({ zIndex, backgroundColor, className, style, ...props }, ref) => {
return ( return (
<div <div
className={`fit-fullscreen${className ? ` ${className}` : ''}`} className={`fit-fullscreen${className ? ` ${className}` : ''}`}
@@ -18,9 +18,10 @@ const FitFullscreen = forwardRef<HTMLDivElement, FitFullscreenProps>((props, ref
...style ...style
}} }}
ref={ref} ref={ref}
{..._props} {...props}
/> />
) )
}) }
)
export default FitFullscreen export default FitFullscreen

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

@@ -7,18 +7,19 @@ interface FlexBoxProps
gap?: number gap?: number
} }
const FlexBox = forwardRef<HTMLDivElement, FlexBoxProps>((props, ref) => { const FlexBox = forwardRef<HTMLDivElement, FlexBoxProps>(
const { className, direction, gap, style, ..._props } = props ({ className, direction, gap, style, ...props }, ref) => {
return ( return (
<div <div
className={`flex-box ${ className={`flex-box ${
direction === 'horizontal' ? 'flex-horizontal' : 'flex-vertical' direction === 'horizontal' ? 'flex-horizontal' : 'flex-vertical'
}${className ? ` ${className}` : ''}`} }${className ? ` ${className}` : ''}`}
style={{ gap, ...style }} style={{ gap, ...style }}
{..._props} {...props}
ref={ref} ref={ref}
/> />
) )
}) }
)
export default FlexBox export default FlexBox

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

@@ -49,7 +49,27 @@ export interface HideScrollbarElement {
refreshLayout(): void refreshLayout(): void
} }
const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>((props, ref) => { const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>(
(
{
isPreventScroll,
isPreventVerticalScroll,
isPreventHorizontalScroll,
isShowVerticalScrollbar,
isHiddenVerticalScrollbarWhenFull,
isShowHorizontalScrollbar,
isHiddenHorizontalScrollbarWhenFull,
minWidth,
minHeight,
scrollbarWidth,
autoHideWaitingTime,
children,
style,
className,
...props
},
ref
) => {
useImperativeHandle<HideScrollbarElement, HideScrollbarElement>( useImperativeHandle<HideScrollbarElement, HideScrollbarElement>(
ref, ref,
() => { () => {
@@ -162,24 +182,6 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>((prop
const [horizontalScrollbarOnTouch, setHorizontalScrollbarOnTouch] = useState(false) const [horizontalScrollbarOnTouch, setHorizontalScrollbarOnTouch] = useState(false)
const [horizontalScrollbarAutoHide, setHorizontalScrollbarAutoHide] = useState(false) const [horizontalScrollbarAutoHide, setHorizontalScrollbarAutoHide] = useState(false)
const {
isPreventScroll,
isPreventVerticalScroll,
isPreventHorizontalScroll,
isShowVerticalScrollbar,
isHiddenVerticalScrollbarWhenFull,
isShowHorizontalScrollbar,
isHiddenHorizontalScrollbarWhenFull,
minWidth,
minHeight,
scrollbarWidth,
autoHideWaitingTime,
children,
style,
className,
..._props
} = props
const isPreventAnyScroll = const isPreventAnyScroll =
isPreventScroll || isPreventVerticalScroll || isPreventHorizontalScroll isPreventScroll || isPreventVerticalScroll || isPreventHorizontalScroll
@@ -230,14 +232,17 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>((prop
if (!isPreventVerticalScroll) { if (!isPreventVerticalScroll) {
rootRef.current?.scrollTo({ rootRef.current?.scrollTo({
top: rootRef.current?.scrollTop + (lastTouchPositionRef.current.y - clientY), top:
rootRef.current?.scrollTop + (lastTouchPositionRef.current.y - clientY),
behavior: 'instant' behavior: 'instant'
}) })
} }
if (!isPreventHorizontalScroll) { if (!isPreventHorizontalScroll) {
rootRef.current?.scrollTo({ rootRef.current?.scrollTo({
left: rootRef.current?.scrollLeft + (lastTouchPositionRef.current.x - clientX), left:
rootRef.current?.scrollLeft +
(lastTouchPositionRef.current.x - clientX),
behavior: 'instant' behavior: 'instant'
}) })
} }
@@ -295,7 +300,10 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>((prop
return (event: React.MouseEvent) => { return (event: React.MouseEvent) => {
switch (eventFlag) { switch (eventFlag) {
case 'down': case 'down':
lastScrollbarClickPositionRef.current = { x: event.clientX, y: event.clientY } lastScrollbarClickPositionRef.current = {
x: event.clientX,
y: event.clientY
}
switch (scrollbarFlag) { switch (scrollbarFlag) {
case 'vertical': case 'vertical':
setVerticalScrollbarOnClick(true) setVerticalScrollbarOnClick(true)
@@ -470,7 +478,12 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>((prop
wheelListenerRef.current = handleDefaultWheel wheelListenerRef.current = handleDefaultWheel
rootRef.current?.addEventListener('wheel', handleDefaultWheel, { passive: false }) rootRef.current?.addEventListener('wheel', handleDefaultWheel, { passive: false })
} }
}, [isPreventAnyScroll, isPreventHorizontalScroll, isPreventScroll, isPreventVerticalScroll]) }, [
isPreventAnyScroll,
isPreventHorizontalScroll,
isPreventScroll,
isPreventVerticalScroll
])
return ( return (
<> <>
@@ -483,8 +496,12 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>((prop
onTouchMove={ onTouchMove={
!isPreventScroll ? handleScrollbarTouchEvent('move', 'all') : undefined !isPreventScroll ? handleScrollbarTouchEvent('move', 'all') : undefined
} }
onMouseUp={!isPreventScroll ? handleScrollbarMouseEvent('up', 'all') : undefined} onMouseUp={
onTouchEnd={!isPreventScroll ? handleScrollbarTouchEvent('end', 'all') : undefined} !isPreventScroll ? handleScrollbarMouseEvent('up', 'all') : undefined
}
onTouchEnd={
!isPreventScroll ? handleScrollbarTouchEvent('end', 'all') : undefined
}
onMouseLeave={ onMouseLeave={
!isPreventScroll ? handleScrollbarMouseEvent('leave', 'all') : undefined !isPreventScroll ? handleScrollbarMouseEvent('leave', 'all') : undefined
} }
@@ -503,7 +520,7 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>((prop
msTouchAction: isPreventAnyScroll ? 'none' : '', msTouchAction: isPreventAnyScroll ? 'none' : '',
...style ...style
}} }}
{..._props} {...props}
onMouseDown={isPreventAnyScroll ? handleDefaultMouseDown : undefined} onMouseDown={isPreventAnyScroll ? handleDefaultMouseDown : undefined}
onKeyDown={isPreventAnyScroll ? handleDefaultKeyDown : undefined} onKeyDown={isPreventAnyScroll ? handleDefaultKeyDown : undefined}
onTouchStart={isPreventAnyScroll ? handleDefaultTouchStart : undefined} onTouchStart={isPreventAnyScroll ? handleDefaultTouchStart : undefined}
@@ -600,6 +617,7 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>((prop
</div> </div>
</> </>
) )
}) }
)
export default HideScrollbar export default HideScrollbar

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

@@ -8,9 +8,7 @@ interface IndicatorProps {
onSwitch?: (index: number) => void onSwitch?: (index: number) => void
} }
const Indicator: React.FC<IndicatorProps> = (props) => { const Indicator: React.FC<IndicatorProps> = ({ total, current, onSwitch }) => {
const { total, current, onSwitch } = props
const handleClick = (index: number) => { const handleClick = (index: number) => {
return () => { return () => {
onSwitch && onSwitch(index) onSwitch && onSwitch(index)

6
src/components/common/sidebar/SidebarSeparate.tsx
View File

@@ -2,10 +2,8 @@ import React from 'react'
const SidebarSeparate: React.FC< const SidebarSeparate: React.FC<
React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>
> = (props) => { > = ({ className, ...props }) => {
const { className, ..._props } = props return <div className={`separate ${className ? ` ${className}` : ''}`} {...props} />
return <div className={`separate ${className ? ` ${className}` : ''}`} {..._props} />
} }
export default SidebarSeparate export default SidebarSeparate

20
src/pages/system/index.tsx
View File

@@ -6,7 +6,7 @@ import HideScrollbar from '@/components/common/HideScrollbar'
import FitFullscreen from '@/components/common/FitFullscreen' import FitFullscreen from '@/components/common/FitFullscreen'
import FlexBox from '@/components/common/FlexBox' import FlexBox from '@/components/common/FlexBox'
import Card from '@/components/common/Card' import Card from '@/components/common/Card'
import Permission from '@/components/common/Permission.tsx' import Permission from '@/components/common/Permission'
interface CommonCardProps interface CommonCardProps
extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> { extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
@@ -16,11 +16,10 @@ interface CommonCardProps
url?: string url?: string
} }
const CommonCard = forwardRef<HTMLDivElement, CommonCardProps>((props) => { const CommonCard = forwardRef<HTMLDivElement, CommonCardProps>(
const navigate = useNavigate() ({
const cardRef = useRef<HTMLDivElement>(null)
const {
style, style,
// eslint-disable-next-line @typescript-eslint/no-unused-vars
ref, ref,
icon, icon,
description, description,
@@ -32,8 +31,10 @@ const CommonCard = forwardRef<HTMLDivElement, CommonCardProps>((props) => {
}, },
url, url,
children, children,
..._props ...props
} = props }) => {
const navigate = useNavigate()
const cardRef = useRef<HTMLDivElement>(null)
useEffect(() => { useEffect(() => {
cardRef.current && VanillaTilt.init(cardRef.current, options) cardRef.current && VanillaTilt.init(cardRef.current, options)
@@ -47,7 +48,7 @@ const CommonCard = forwardRef<HTMLDivElement, CommonCardProps>((props) => {
<Card <Card
style={{ overflow: 'visible', ...style }} style={{ overflow: 'visible', ...style }}
ref={cardRef} ref={cardRef}
{..._props} {...props}
onClick={handleCardOnClick} onClick={handleCardOnClick}
> >
<FlexBox className={'common-card'}> <FlexBox className={'common-card'}>
@@ -57,7 +58,8 @@ const CommonCard = forwardRef<HTMLDivElement, CommonCardProps>((props) => {
</FlexBox> </FlexBox>
</Card> </Card>
) )
}) }
)
const System: React.FC = () => { const System: React.FC = () => {
return ( return (

2
src/pages/system/statistics/shared.ts
View File

@@ -15,7 +15,7 @@ import { BarChart, BarSeriesOption, LineChart, LineSeriesOption } from 'echarts/
import { SVGRenderer } from 'echarts/renderers' import { SVGRenderer } from 'echarts/renderers'
import { UniversalTransition } from 'echarts/features' import { UniversalTransition } from 'echarts/features'
import { CallbackDataParams } from 'echarts/types/dist/shared' import { CallbackDataParams } from 'echarts/types/dist/shared'
import { utcToLocalTime } from '@/util/datetime.tsx' import { utcToLocalTime } from '@/util/datetime'
echarts.use([ echarts.use([
TooltipComponent, TooltipComponent,

2
src/router/system.tsx
View File

@@ -25,7 +25,7 @@ const system: RouteJsonObject[] = [
path: 'settings', path: 'settings',
absolutePath: '/system/settings', absolutePath: '/system/settings',
id: 'system-settings', id: 'system-settings',
component: React.lazy(() => import('@/pages/system/Settings')), component: React.lazy(() => import('@/pages/system/settings')),
name: '系统设置', name: '系统设置',
icon: React.lazy(() => import('~icons/oxygen/option.jsx')), icon: React.lazy(() => import('~icons/oxygen/option.jsx')),
menu: true, menu: true,