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