Refactor(Card): Component all cards

Make all cards into components
2024-04-28 11:37:57 +08:00
parent a5b26d9680
commit 497fb28b5d
34 changed files with 908 additions and 1206 deletions
--- a/src/components/tools/RepositoryCard.tsx
+++ b/src/components/tools/RepositoryCard.tsx
@@ -0,0 +1,107 @@
+import { DetailedHTMLProps, HTMLAttributes, ReactNode } from 'react'
+import VanillaTilt, { TiltOptions } from 'vanilla-tilt'
+import '@/assets/css/components/tools/repository-card.scss'
+import Card from '@/components/common/Card'
+import FlexBox from '@/components/common/FlexBox'
+
+interface RepositoryCardProps
+    extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
+    icon: ReactNode
+    toolName?: string
+    toolId?: string
+    options?: TiltOptions
+    url?: string
+    onOpen?: () => void
+    onEdit?: () => void
+    onSource?: () => void
+    onPublish?: () => void
+    onCancelReview?: () => void
+    onDelete?: () => void
+}
+
+const RepositoryCard = ({
+    style,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    ref,
+    icon,
+    toolName,
+    toolId,
+    options = {
+        reverse: true,
+        max: 8,
+        glare: true,
+        ['max-glare']: 0.3,
+        scale: 1.03
+    },
+    url,
+    onOpen,
+    onEdit,
+    onSource,
+    onPublish,
+    onCancelReview,
+    onDelete,
+    children,
+    ...props
+}: RepositoryCardProps) => {
+    const navigate = useNavigate()
+    const cardRef = useRef<HTMLDivElement>(null)
+
+    useEffect(() => {
+        cardRef.current && VanillaTilt.init(cardRef.current, options)
+    }, [options])
+
+    const handleCardOnClick = () => {
+        url && navigate(url)
+    }
+
+    return (
+        <Card
+            data-component={'component-repository-card'}
+            style={{ overflow: 'visible', ...style }}
+            ref={cardRef}
+            {...props}
+            onClick={handleCardOnClick}
+        >
+            <FlexBox className={'repository-card'}>
+                <div className={'icon'}>{icon}</div>
+                <div className={'info'}>
+                    {toolName && <div className={'tool-name'}>{toolName}</div>}
+                    {toolId && <div className={'tool-id'}>{`ID: ${toolId}`}</div>}
+                </div>
+                <div className={'operation'}>
+                    {onOpen && (
+                        <AntdButton onClick={onOpen} size={'small'} type={'primary'}>
+                            打开
+                        </AntdButton>
+                    )}
+                    {onEdit && onPublish && (
+                        <div className={'edit'}>
+                            <AntdButton.Group size={'small'}>
+                                <AntdButton onClick={onEdit}>编辑</AntdButton>
+                                <AntdButton onClick={onPublish}>发布</AntdButton>
+                            </AntdButton.Group>
+                        </div>
+                    )}
+                    {onSource && (
+                        <AntdButton size={'small'} onClick={onSource}>
+                            源码
+                        </AntdButton>
+                    )}
+                    {onCancelReview && (
+                        <AntdButton size={'small'} onClick={onCancelReview}>
+                            取消审核
+                        </AntdButton>
+                    )}
+                    {onDelete && (
+                        <AntdButton size={'small'} danger onClick={onDelete}>
+                            删除
+                        </AntdButton>
+                    )}
+                </div>
+                {children}
+            </FlexBox>
+        </Card>
+    )
+}
+
+export default RepositoryCard