@ -3,158 +3,138 @@ import { useModel } from '@umijs/max';
import { Card , theme } from 'antd' ;
import React from 'react' ;
/ * *
* 每 个 单 独 的 卡 片 ， 为 了 复 用 样 式 抽 成 了 组 件
* @param param0
* @returns
* /
const InfoCard : React.FC < {
title : string ;
index : number ;
desc : string ;
href : string ;
} > = ( { title , href , index , desc } ) = > {
const { useToken } = theme ;
const { token } = useToken ( ) ;
isDark? : boolean ;
} > = ( { title , href , index , desc , isDark } ) = > {
const { token } = theme . useToken ( ) ;
return (
< div
< a
href = { href }
target = "_blank"
rel = "noreferrer"
className = "group relative overflow-hidden rounded-2xl p-6 transition-all duration-300 hover:scale-[1.02]"
style = { {
backgroundColor : token.colorBgContainer ,
boxShadow : token.boxShadow ,
borderRadius : '8px' ,
fontSize : '14px' ,
color : token.colorTextSecondary ,
lineHeight : '22px' ,
padding : '16px 19px' ,
minWidth : '220px' ,
flex : 1 ,
background : isDark
? 'rgba(255, 255, 255, 0.05)'
: 'rgba(255, 255, 255, 0.7)' ,
backdropFilter : 'blur(20px)' ,
border : ` 1px solid ${ isDark ? 'rgba(255,255,255,0.1)' : 'rgba(255,255,255,0.5)' } ` ,
boxShadow : isDark
? '0 4px 24px rgba(0,0,0,0.3)'
: '0 4px 24px rgba(0,0,0,0.06)' ,
} }
>
{ /* 悬停时的光效 */ }
< div
style = { {
display : 'flex' ,
gap : '4px' ,
alignItems : 'center' ,
} }
>
className = "absolute -inset-full top-0 block h-full w-1/2 -skew-x-12 bg-gradient-to-r from-transparent to-white opacity-0 transition-all duration-500 group-hover:animate-shine group-hover:opacity-10"
style = { { display : isDark ? 'none' : 'block' } }
/ >
< div className = "relative flex items-start gap-4" >
< div
className = "shrink-0 w-14 h-14 rounded-2xl flex items-center justify-center text-white text-xl font-bold"
style = { {
width : 48 ,
height : 48 ,
lineHeight : '22px' ,
backgroundSize : '100%' ,
textAlign : 'center' ,
padding : '8px 16px 16px 12px' ,
color : '#FFF' ,
fontWeight : 'bold' ,
backgroundImage :
"url('https://gw.alipayobjects.com/zos/bmw-prod/daaf8d50-8e6d-4251-905d-676a24ddfa12.svg')" ,
background : ` linear-gradient(135deg, ${ token . colorPrimary } 0%, ${ token . colorPrimaryHover } 100%) ` ,
boxShadow : ` 0 8px 20px ${ token . colorPrimary } 40 ` ,
} }
>
{ index }
< / div >
< div
style = { {
fontSize : '16px' ,
color : token.colorText ,
paddingBottom : 8 ,
} }
>
{ title }
< div className = "flex-1 min-w-0" >
< h3
className = "text-lg font-semibold mb-2 group-hover:text-primary transition-colors"
style = { { color : token.colorText } }
>
{ title }
< / h3 >
< p
className = "text-sm leading-relaxed line-clamp-2"
style = { { color : token.colorTextSecondary } }
>
{ desc }
< / p >
< / div >
< / div >
< div
style = { {
fontSize : '14px' ,
color : token.colorTextSecondary ,
textAlign : 'justify' ,
lineHeight : '22px' ,
marginBottom : 8 ,
} }
className = "mt-4 text-sm font-medium flex items-center gap-1 transition-colors group-hover:gap-2"
style = { { color : token.colorPrimary } }
>
{ desc }
了 解 更 多
< span className = "transition-transform" > → < / span >
< / div >
< a href = { href } target = "_blank" rel = "noreferrer" >
了 解 更 多 { '>' }
< / a >
< / div >
< / a >
) ;
} ;
const Welcome : React.FC = ( ) = > {
const { token } = theme . useToken ( ) ;
const { initialState } = useModel ( '@@initialState' ) ;
const isDark = initialState ? . settings ? . navTheme === 'realDark' ;
return (
< PageContainer >
< Card
style = { {
borderRadius : 8 ,
} }
className = "rounded-2xl overflow-hidden"
styles = { {
body : {
backgroundImage :
initialState ? . settings ? . navTheme === 'realDark '
? 'background-image: linear-gradient(75deg, #1A1B1F 0%, #191C1F 100%)'
: 'background-image: linear-gradient(75deg, #FBFDFF 0%, #F5F7FF 100%) ' ,
background : isDark
? 'linear-gradient(135deg, #0a0a0f 0%, #1a1a2e 50%, #16213e 100%) '
: 'linear-gradient(135deg, #f8fafc 0%, #e2e8f0 50%, #cbd5e1 100%)' ,
padding : '48px 0 ',
} ,
} }
>
< div
style = { {
backgroundPosition : '100% -30%' ,
backgroundRepeat : 'no-repeat' ,
backgroundSize : '274px auto' ,
backgroundImage :
"url('https://gw.alipayobjects.com/mdn/rms_a9745b/afts/img/A*BuFmQqsB2iAAAAAAAAAAAAAAARQnAQ')" ,
} }
>
< div
style = { {
fontSize : '20px' ,
color : token.colorTextHeading ,
} }
>
欢 迎 使 用 Ant Design Pro
< div className = "max-w-6xl mx-auto px-6" >
{ /* 标题区域 */ }
< div className = "text-center mb-16" >
< h1
className = "text-5xl font-bold mb-6"
style = { {
background : ` linear-gradient(135deg, ${ token . colorPrimary } 0%, ${ token . colorPrimaryHover } 100%) ` ,
WebkitBackgroundClip : 'text' ,
WebkitTextFillColor : 'transparent' ,
backgroundClip : 'text' ,
} }
>
欢 迎 使 用 Ant Design Pro
< / h1 >
< p
className = "text-lg max-w-2xl mx-auto leading-relaxed"
style = { { color : token.colorTextSecondary } }
>
Ant Design Pro 是 一 个 整 合 了 umi ， Ant Design 和 ProComponents
的 脚 手 架 方 案 。 致 力 于 在 设 计 规 范 和 基 础 组 件 的 基 础 上 ， 继 续 向 上 构 建 ， 提 炼 出 典 型 模 板 / 业 务 组 件 / 配 套 设 计 资 源 ， 进 一 步 提 升 企 业 级 中 后 台 产 品 设 计 研 发 过 程 中 的 『 用 户 』 和 『 设 计 者 』 的 体 验 。
< / p >
< / div >
< p
style = { {
fontSize : '14px' ,
color : token.colorTextSecondary ,
lineHeight : '22px' ,
marginTop : 16 ,
marginBottom : 32 ,
width : '65%' ,
} }
>
Ant Design Pro 是 一 个 整 合 了 umi ， Ant Design 和 ProComponents
的 脚 手 架 方 案 。 致 力 于 在 设 计 规 范 和 基 础 组 件 的 基 础 上 ， 继 续 向 上 构 建 ， 提 炼 出 典 型 模 板 / 业 务 组 件 / 配 套 设 计 资 源 ， 进 一 步 提 升 企 业 级 中 后 台 产 品 设 计 研 发 过 程 中 的 『 用 户 』 和 『 设 计 者 』 的 体 验 。
< / p >
< div
style = { {
display : 'flex' ,
flexWrap : 'wrap' ,
gap : 16 ,
} }
>
{ /* 卡片区域 */ }
< div className = "grid grid-cols-1 md:grid-cols-3 gap-6" >
< InfoCard
index = { 1 }
href = "https://umijs.org/docs/introduce/introduce"
title = "了解 umi"
desc = "umi 是一个可扩展的企业级前端应用框架,umi 以路由为基础的，同时支持配置式路由和约定式路由，保证路由的功能完备，并以此进行功能扩展。"
isDark = { isDark }
/ >
< InfoCard
index = { 2 }
title = "了解 ant design"
href = "https://ant.design"
desc = "antd 是基于 Ant Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。"
isDark = { isDark }
/ >
< InfoCard
index = { 3 }
title = "了解 Pro Components"
href = "https://procomponents.ant.design"
desc = "ProComponents 是一个基于 Ant Design 做了更高抽象的模板组件，以 一个组件就是一个页面为开发理念，为中后台开发带来更好的体验。"
isDark = { isDark }
/ >
< / div >
< / div >
afc163
2 months ago
GitHub