diff --git a/src/renderer/src/assets/css/components/system/system-card.scss b/src/renderer/src/assets/css/components/common/url-card.scss similarity index 82% rename from src/renderer/src/assets/css/components/system/system-card.scss rename to src/renderer/src/assets/css/components/common/url-card.scss index 9c12029..8110115 100644 --- a/src/renderer/src/assets/css/components/system/system-card.scss +++ b/src/renderer/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; diff --git a/src/renderer/src/assets/css/pages/system/index.scss b/src/renderer/src/assets/css/pages/system/index.scss index 6f3f7b6..5dbfd3f 100644 --- a/src/renderer/src/assets/css/pages/system/index.scss +++ b/src/renderer/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; } diff --git a/src/renderer/src/components/common/UrlCard.tsx b/src/renderer/src/components/common/UrlCard.tsx new file mode 100644 index 0000000..13abf64 --- /dev/null +++ b/src/renderer/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, 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(null) + + useEffect(() => { + cardRef.current && VanillaTilt.init(cardRef.current, options) + }, [options]) + + const handleCardOnClick = () => { + url && navigate(url) + } + + return ( + + + +
{children}
+
{description}
+
+
+ ) +} + +export default UrlCard diff --git a/src/renderer/src/components/system/SystemCard.tsx b/src/renderer/src/components/system/SystemCard.tsx deleted file mode 100644 index 1afce03..0000000 --- a/src/renderer/src/components/system/SystemCard.tsx +++ /dev/null @@ -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, HTMLDivElement> { - icon: IconComponent - description?: ReactNode - options?: TiltOptions - url?: string -} - -const SystemCard = forwardRef( - ({ - 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(null) - - useEffect(() => { - cardRef.current && VanillaTilt.init(cardRef.current, options) - }, [options]) - - const handleCardOnClick = () => { - url && navigate(url) - } - - return ( - - - -
{children}
-
{description}
-
-
- ) - } -) - -export default SystemCard diff --git a/src/renderer/src/components/tools/RepositoryCard.tsx b/src/renderer/src/components/tools/RepositoryCard.tsx index c00a9d7..eebe6dd 100644 --- a/src/renderer/src/components/tools/RepositoryCard.tsx +++ b/src/renderer/src/components/tools/RepositoryCard.tsx @@ -7,10 +7,9 @@ import FlexBox from '@/components/common/FlexBox' interface RepositoryCardProps extends DetailedHTMLProps, HTMLDivElement> { icon: ReactNode - toolName?: string - toolId?: string + toolName: 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(null) useEffect(() => { cardRef.current && VanillaTilt.init(cardRef.current, options) }, [options]) - const handleCardOnClick = () => { - url && navigate(url) - } - return (
{icon}
diff --git a/src/renderer/src/pages/System/index.tsx b/src/renderer/src/pages/System/index.tsx index c194cae..6ab01d5 100644 --- a/src/renderer/src/pages/System/index.tsx +++ b/src/renderer/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 = () => { - + 系统概况 - + - + 系统设置 - + - + 工具管理 - + - + 模板管理 - + - + 基板管理 - + - + 类别管理 - + - + 用户管理 - + - + 角色管理 - + - + 群组管理 - + - + 系统日志 - + diff --git a/src/renderer/src/pages/Tools/index.tsx b/src/renderer/src/pages/Tools/index.tsx index 95526da..9269bbb 100644 --- a/src/renderer/src/pages/Tools/index.tsx +++ b/src/renderer/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 = () => { - } - toolName={'创建工具'} - url={'/create'} - /> + + 创建工具 + {toolData && Object.values( toolData.reduce((result: Record, item) => {