Refactor(UrlCard): Optimize UrlCard

src/assets/css/components/common/url-card.scss

@@ -1,12 +1,12 @@
 @use '@/assets/css/constants' as constants;
 
-[data-component=component-system-card] {
+[data-component=component-url-card] {
   cursor: pointer;
 
-  .system-card {
+  .url-card {
     width: 100%;
     height: 100%;
-    margin-top: 100px;
+    margin-top: 80px;
     text-align: center;
     gap: 42px;
 

src/assets/css/pages/system/index.scss

@@ -9,7 +9,7 @@
 
     > .card-box {
       width: 200px;
-      height: 360px;
+      height: 320px;
       flex: 0 0 auto;
       overflow: hidden !important;
     }

src/components/common/UrlCard.tsx

@@ -0,0 +1,57 @@
+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.scss'
+import Card from '@/components/common/Card.tsx'
+import FlexBox from '@/components/common/FlexBox.tsx'
+
+interface UrlCardProps extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
+    icon: IconComponent
+    description?: ReactNode
+    options?: TiltOptions
+    url?: string
+}
+
+const UrlCard = ({
+    style,
+    icon,
+    description,
+    options = {
+        reverse: true,
+        max: 8,
+        glare: true,
+        scale: 1.03
+    },
+    url,
+    children,
+    ...props
+}: UrlCardProps) => {
+    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-url-card'}
+            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>
+        </Card>
+    )
+}
+
+export default UrlCard

src/components/system/SystemCard.tsx

@@ -1,62 +0,0 @@
-import { DetailedHTMLProps, HTMLAttributes, ReactNode } from 'react'
-import Icon from '@ant-design/icons'
-import VanillaTilt, { TiltOptions } from 'vanilla-tilt'
-import '@/assets/css/components/system/system-card.scss'
-import Card from '@/components/common/Card'
-import FlexBox from '@/components/common/FlexBox'
-
-interface SystemCardProps
-    extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
-    icon: IconComponent
-    description?: ReactNode
-    options?: TiltOptions
-    url?: string
-}
-
-const SystemCard = forwardRef<HTMLDivElement, SystemCardProps>(
-    ({
-        style,
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        ref,
-        icon,
-        description,
-        options = {
-            reverse: true,
-            max: 8,
-            glare: true,
-            scale: 1.03
-        },
-        url,
-        children,
-        ...props
-    }) => {
-        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-system-card'}
-                style={{ overflow: 'visible', ...style }}
-                ref={cardRef}
-                {...props}
-                onClick={handleCardOnClick}
-            >
-                <FlexBox className={'system-card'}>
-                    <Icon component={icon} className={'icon'} />
-                    <div className={'text'}>{children}</div>
-                    <div className={'description'}>{description}</div>
-                </FlexBox>
-            </Card>
-        )
-    }
-)
-
-export default SystemCard

src/components/tools/RepositoryCard.tsx

@@ -7,10 +7,9 @@ import FlexBox from '@/components/common/FlexBox'
 interface RepositoryCardProps
     extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
     icon: ReactNode
-    toolName?: string
+    toolName: string
-    toolId?: string
+    toolId: string
     options?: TiltOptions
-    url?: string
     onOpen?: () => void
     onEdit?: () => void
     onSource?: () => void
@@ -33,7 +32,6 @@ const RepositoryCard = ({
         ['max-glare']: 0.3,
         scale: 1.03
     },
-    url,
     onOpen,
     onEdit,
     onSource,
@@ -43,24 +41,18 @@ const RepositoryCard = ({
     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>

src/pages/System/index.tsx

@@ -3,7 +3,7 @@ import HideScrollbar from '@/components/common/HideScrollbar'
 import FitFullscreen from '@/components/common/FitFullscreen'
 import FlexBox from '@/components/common/FlexBox'
 import Permission from '@/components/common/Permission'
-import SystemCard from '@/components/system/SystemCard.tsx'
+import UrlCard from '@/components/common/UrlCard'
 
 const System = () => {
     return (
@@ -12,54 +12,54 @@ const System = () => {
                 <HideScrollbar isShowVerticalScrollbar autoHideWaitingTime={1000}>
                     <FlexBox direction={'horizontal'} className={'root-content'}>
                         <Permission path={'/system/statistics'}>
-                            <SystemCard icon={IconOxygenAnalysis} url={'statistics'}>
+                            <UrlCard icon={IconOxygenAnalysis} url={'statistics'}>
                                 系统概况
-                            </SystemCard>
+                            </UrlCard>
                         </Permission>
                         <Permission path={'/system/settings'}>
-                            <SystemCard icon={IconOxygenOption} url={'settings'}>
+                            <UrlCard icon={IconOxygenOption} url={'settings'}>
                                 系统设置
-                            </SystemCard>
+                            </UrlCard>
                         </Permission>
                         <Permission operationCode={['system:tool:query:tool']}>
-                            <SystemCard icon={IconOxygenTool} url={'tools'}>
+                            <UrlCard icon={IconOxygenTool} url={'tools'}>
                                 工具管理
-                            </SystemCard>
+                            </UrlCard>
                         </Permission>
                         <Permission operationCode={['system:tool:query:template']}>
-                            <SystemCard icon={IconOxygenTemplate} url={'tools/template'}>
+                            <UrlCard icon={IconOxygenTemplate} url={'tools/template'}>
                                 模板管理
-                            </SystemCard>
+                            </UrlCard>
                         </Permission>
                         <Permission operationCode={['system:tool:query:base']}>
-                            <SystemCard icon={IconOxygenBase} url={'tools/base'}>
+                            <UrlCard icon={IconOxygenBase} url={'tools/base'}>
                                 基板管理
-                            </SystemCard>
+                            </UrlCard>
                         </Permission>
                         <Permission operationCode={['system:tool:query:category']}>
-                            <SystemCard icon={IconOxygenCategory} url={'tools/category'}>
+                            <UrlCard icon={IconOxygenCategory} url={'tools/category'}>
                                 类别管理
-                            </SystemCard>
+                            </UrlCard>
                         </Permission>
                         <Permission path={'/system/user'}>
-                            <SystemCard icon={IconOxygenUser} url={'user'}>
+                            <UrlCard icon={IconOxygenUser} url={'user'}>
                                 用户管理
-                            </SystemCard>
+                            </UrlCard>
                         </Permission>
                         <Permission path={'/system/role'}>
-                            <SystemCard icon={IconOxygenRole} url={'role'}>
+                            <UrlCard icon={IconOxygenRole} url={'role'}>
                                 角色管理
-                            </SystemCard>
+                            </UrlCard>
                         </Permission>
                         <Permission path={'/system/group'}>
-                            <SystemCard icon={IconOxygenGroup} url={'group'}>
+                            <UrlCard icon={IconOxygenGroup} url={'group'}>
                                 群组管理
-                            </SystemCard>
+                            </UrlCard>
                         </Permission>
                         <Permission path={'/system/log'}>
-                            <SystemCard icon={IconOxygenLog} url={'log'}>
+                            <UrlCard icon={IconOxygenLog} url={'log'}>
                                 系统日志
-                            </SystemCard>
+                            </UrlCard>
                         </Permission>
                     </FlexBox>
                 </HideScrollbar>

src/pages/Tools/index.tsx

@@ -28,7 +28,8 @@ import HideScrollbar from '@/components/common/HideScrollbar'
 import FlexBox from '@/components/common/FlexBox'
 import RepositoryCard from '@/components/tools/RepositoryCard'
 import LoadMoreCard from '@/components/tools/LoadMoreCard'
-import StoreCard from '@/components/tools/StoreCard.tsx'
+import StoreCard from '@/components/tools/StoreCard'
+import UrlCard from '@/components/common/UrlCard'
 
 interface ToolCardProps {
     tools: ToolVo[]
@@ -540,11 +541,9 @@ const Tools = () => {
                 <HideScrollbar isShowVerticalScrollbar autoHideWaitingTime={1000}>
                     <FlexBox direction={'vertical'} className={'root-content'}>
                         <FlexBox direction={'horizontal'} className={'own-content'}>
-                            <RepositoryCard
+                            <UrlCard icon={IconOxygenNewProject} url={'/create'}>
-                                icon={<Icon component={IconOxygenNewProject} />}
+                                创建工具
-                                toolName={'创建工具'}
+                            </UrlCard>
-                                url={'/create'}
-                            />
                             {toolData &&
                                 Object.values(
                                     toolData.reduce((result: Record<string, ToolVo[]>, item) => {