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

Complete main UI #37

Merged
FatttSnake merged 192 commits from FatttSnake into dev 2024-02-23 16:31:17 +08:00
Conversation 0 Commits 192 Files Changed 215 +609 -593
10 changed files with 609 additions and 593 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit bcd7b761ac - Show all commits

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -2,10 +2,8 @@ import React from 'react'
const SidebarSeparate: React.FC<
React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>
> = (props) => {
const { className, ..._props } = props
return <div className={`separate ${className ? ` ${className}` : ''}`} {..._props} />
> = ({ className, ...props }) => {
return <div className={`separate ${className ? ` ${className}` : ''}`} {...props} />
}
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 FlexBox from '@/components/common/FlexBox'
import Card from '@/components/common/Card'
import Permission from '@/components/common/Permission.tsx'
import Permission from '@/components/common/Permission'
interface CommonCardProps
extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
@@ -16,11 +16,10 @@ interface CommonCardProps
url?: string
}
const CommonCard = forwardRef<HTMLDivElement, CommonCardProps>((props) => {
const navigate = useNavigate()
const cardRef = useRef<HTMLDivElement>(null)
const {
const CommonCard = forwardRef<HTMLDivElement, CommonCardProps>(
({
style,
// eslint-disable-next-line @typescript-eslint/no-unused-vars
ref,
icon,
description,
@@ -32,8 +31,10 @@ const CommonCard = forwardRef<HTMLDivElement, CommonCardProps>((props) => {
},
url,
children,
..._props
} = props
...props
}) => {
const navigate = useNavigate()
const cardRef = useRef<HTMLDivElement>(null)
useEffect(() => {
cardRef.current && VanillaTilt.init(cardRef.current, options)
@@ -47,7 +48,7 @@ const CommonCard = forwardRef<HTMLDivElement, CommonCardProps>((props) => {
<Card
style={{ overflow: 'visible', ...style }}
ref={cardRef}
{..._props}
{...props}
onClick={handleCardOnClick}
>
<FlexBox className={'common-card'}>
@@ -57,7 +58,8 @@ const CommonCard = forwardRef<HTMLDivElement, CommonCardProps>((props) => {
</FlexBox>
</Card>
)
})
}
)
const System: React.FC = () => {
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 { UniversalTransition } from 'echarts/features'
import { CallbackDataParams } from 'echarts/types/dist/shared'
import { utcToLocalTime } from '@/util/datetime.tsx'
import { utcToLocalTime } from '@/util/datetime'
echarts.use([
TooltipComponent,

2
src/router/system.tsx
View File

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