1+ /* eslint-disable react/display-name */
12import React from 'react' ;
2- import Dm from './user-icon/dm' ;
3- import Tpp from './user-icon/tpp' ;
43import { Button } from '@bifrostui/react' ;
5- import { usePrefersColor , useNavigate } from 'dumi' ;
4+ import { usePrefersColor , useNavigate , useIntl , useLocale } from 'dumi' ;
65import { ToTopOutlinedIcon } from '@bifrostui/icons' ;
7- import './home-page.less' ;
6+ import Tpp from './user-icon/tpp' ;
7+ import Dm from './user-icon/dm' ;
8+ import './index.less' ;
9+ import locales from './locales' ;
810
911export default ( ) => {
1012 const [ color ] = usePrefersColor ( ) ;
13+ const { locale } = useIntl ( ) ;
14+ const current = locale === 'zh-CN' ? 'zhCN' : 'enUS' ;
1115 const navigate = useNavigate ( ) ;
1216 return (
13- < div className = "main-container" >
17+ < div className = "main-container home-page " >
1418 < div className = "main-head" >
1519 < div >
1620 < img
1721 className = "main-logo"
1822 src = "https://gw.alicdn.com/imgextra/i2/O1CN01Bqi4MA1USNSLdER5C_!!6000000002516-55-tps-190-90.svg"
1923 />
20- < div className = "main-desc" > 一款简洁灵活的跨端组件库 </ div >
24+ < div className = "main-desc" > { locales [ current ] . description } </ div >
2125 < Button
2226 size = "large"
2327 variant = "contained"
2428 className = "start-btn"
2529 endIcon = { < ToTopOutlinedIcon /> }
2630 onClick = { ( ) => {
27- navigate ( " /guide/introduce" , { replace : true } ) ;
31+ navigate ( ' /guide/introduce' , { replace : true } ) ;
2832 } }
2933 >
30- 开始体验
34+ { locales [ current ] . start }
3135 </ Button >
3236 </ div >
3337 < img
@@ -41,51 +45,61 @@ export default () => {
4145 className = "introduce-icon"
4246 src = "https://gw.alicdn.com/imgextra/i1/O1CN01y4iaZr1aLP2g7R9xm_!!6000000003313-2-tps-160-160.png"
4347 />
44- < div className = "introduce-title" > 一码多端</ div >
48+ < div className = "introduce-title" >
49+ { locales [ current ] . features [ 0 ] . title }
50+ </ div >
4551 < div className = "introduce-desc" >
46- 同时支持H5和小程序
52+ { locales [ current ] . features [ 0 ] . desc }
4753 </ div >
4854 </ div >
4955 < div className = "introduce-item" >
5056 < img
5157 className = "introduce-icon"
5258 src = "https://gw.alicdn.com/imgextra/i4/O1CN01fvzf101QVLTsWkcrR_!!6000000001981-2-tps-160-160.png"
5359 />
54- < div className = "introduce-title" > 高定制</ div >
60+ < div className = "introduce-title" >
61+ { locales [ current ] . features [ 1 ] . title }
62+ </ div >
5563 < div className = "introduce-desc" >
56- 一致优雅的API帮助您快速创造新主题
64+ { locales [ current ] . features [ 1 ] . desc }
5765 </ div >
5866 </ div >
5967 < div className = "introduce-item" >
6068 < img
6169 className = "introduce-icon"
6270 src = "https://gw.alicdn.com/imgextra/i4/O1CN01CCqAR028qGfPoYba0_!!6000000007983-2-tps-160-160.png"
6371 />
64- < div className = "introduce-title" > 高可用</ div >
72+ < div className = "introduce-title" >
73+ { locales [ current ] . features [ 2 ] . title }
74+ </ div >
6575 < div className = "introduce-desc" >
66- 完善的配套，丰富的组件，开箱即用
76+ { locales [ current ] . features [ 2 ] . desc }
6777 </ div >
6878 </ div >
6979 </ div >
7080 < div className = "main-resource" >
7181 < div className = "resource-item" >
72- < div className = "resource-title" > 设计语言</ div >
82+ < div className = "resource-title" >
83+ { locales [ current ] . subTitle [ 0 ] . title }
84+ </ div >
7385 < div className = "resource-content" >
7486 < div >
75- < div className = "content-title" > 设计语言</ div >
87+ < div className = "content-title" >
88+ { locales [ current ] . subTitle [ 0 ] . title }
89+ </ div >
7690 < div className = "content-desc" >
77- 基于阿里影业的众多业务实践沉淀的设计语言和设计系统
91+ { locales [ current ] . subTitle [ 0 ] . desc }
7892 </ div >
7993 < Button
8094 size = "large"
8195 variant = "contained"
8296 style = { { '--bg-color' : '#2356df' , '--text-color' : '#fff' } }
8397 endIcon = { < ToTopOutlinedIcon /> }
8498 onClick = { ( ) => {
85- navigate ( " /design/colors" , { replace : true } ) ;
99+ navigate ( ' /design/colors' , { replace : true } ) ;
86100 } }
87101 >
88- 查看详情
102+ { locales [ current ] . subTitle [ 0 ] . btn }
89103 </ Button >
90104 </ div >
91105 < img
@@ -95,23 +109,27 @@ export default () => {
95109 </ div >
96110 </ div >
97111 < div className = "resource-item" >
98- < div className = "resource-title" > 组件列表</ div >
112+ < div className = "resource-title" >
113+ { locales [ current ] . subTitle [ 1 ] . title }
114+ </ div >
99115 < div className = "resource-content" >
100116 < div >
101- < div className = "content-title" > 组件列表</ div >
117+ < div className = "content-title" >
118+ { locales [ current ] . subTitle [ 1 ] . title }
119+ </ div >
102120 < div className = "content-desc" >
103- 一致的API、丰富的组件帮助您快速构建前端应用
121+ { locales [ current ] . subTitle [ 1 ] . desc }
104122 </ div >
105123 < Button
106124 size = "large"
107125 variant = "contained"
108126 style = { { '--bg-color' : '#2356df' , '--text-color' : '#fff' } }
109127 endIcon = { < ToTopOutlinedIcon /> }
110128 onClick = { ( ) => {
111- navigate ( " /cores/button" , { replace : true } ) ;
129+ navigate ( ' /cores/button' , { replace : true } ) ;
112130 } }
113131 >
114- 查看详情
132+ { locales [ current ] . subTitle [ 1 ] . btn }
115133 </ Button >
116134 </ div >
117135 < img
@@ -123,7 +141,7 @@ export default () => {
123141 </ div >
124142
125143 < div className = "main-users" >
126- < div className = "users-title" > 谁在使用 </ div >
144+ < div className = "users-title" > { locales [ current ] . subTitle [ 2 ] . title } </ div >
127145 < div className = "user-list" >
128146 < Tpp color = { color === 'light' ? '#eee' : '#5F6672' } />
129147 < Dm color = { color === 'light' ? '#eee' : '#5F6672' } />
0 commit comments