11import * as React from 'react' ;
2- import { Callout , Link , Text } from '@fluentui/react' ;
3- import { useBoolean , useId } from '@fluentui/react-hooks' ;
4- import { CommandBarButton } from '@fluentui/react/lib/Button' ;
5- import styles from './about.module.scss' ;
62import { __INFO } from "@/config/info" ;
73import { useRelease } from "../../hooks/useRelease" ;
84import { logger } from '@/utils/logger' ;
95import useTrans from '@/hooks/useTrans' ;
6+ import { Link , Popover , PopoverSurface , PopoverTrigger , Text , Title1 , ToolbarButton } from '@fluentui/react-components' ;
7+ import { Info24Filled , Info24Regular , bundleIcon } from '@fluentui/react-icons' ;
8+ import { useState } from 'react' ;
109
1110interface DateTimeFormatOptions {
1211 year : 'numeric' | '2-digit' ;
@@ -15,15 +14,12 @@ interface DateTimeFormatOptions {
1514}
1615
1716const About : React . FunctionComponent = ( ) => {
18- const [ isCalloutVisible , { toggle : toggleIsCalloutVisible } ] = useBoolean ( false ) ;
19- const buttonId = useId ( 'callout-button' ) ;
20- const labelId = useId ( 'callout-label' ) ;
21- const descriptionId = useId ( 'callout-description' ) ;
22-
17+ const [ open , setOpen ] = useState ( false ) ;
2318 const t = useTrans ( 'editor.topBar.' ) ;
24-
2519 const latestRelease = useRelease ( ) ;
2620
21+ const InfoIcon = bundleIcon ( Info24Filled , Info24Regular ) ;
22+
2723 /**
2824 * 比较版本号
2925 * @param latestVersion 最新版本
@@ -60,29 +56,23 @@ const About: React.FunctionComponent = () => {
6056 const dateTimeOptions : DateTimeFormatOptions = { year : 'numeric' , month : '2-digit' , day : '2-digit' } ;
6157
6258 return (
63- < >
64- < CommandBarButton
65- className = { styles . button }
66- id = { buttonId }
67- onClick = { toggleIsCalloutVisible }
68- text = { `${ t ( 'about.about' ) } ${ isNewRelease ? `(${ t ( 'about.checkedForNewVersion' ) } )` : '' } ` }
69- iconProps = { { iconName : 'Info' } }
70- />
71- { isCalloutVisible &&
72- < Callout
73- className = { styles . callout }
74- ariaLabelledBy = { labelId }
75- ariaDescribedBy = { descriptionId }
76- role = "dialog"
77- gapSpace = { 0 }
78- target = { `#${ buttonId } ` }
79- onDismiss = { toggleIsCalloutVisible }
80- setInitialFocus
81- >
82- < Text as = "h1" block variant = "xLarge" className = { styles . title } id = { labelId } >
59+ < Popover
60+ withArrow
61+ trapFocus
62+ open = { open }
63+ onOpenChange = { ( ) => setOpen ( ! open ) }
64+ >
65+ < PopoverTrigger disableButtonEnhancement >
66+ < ToolbarButton aria-label = { t ( 'about.about' ) } icon = { < InfoIcon /> } >
67+ { t ( 'about.about' ) } { isNewRelease ? `(${ t ( 'about.checkedForNewVersion' ) } )` : '' }
68+ </ ToolbarButton >
69+ </ PopoverTrigger >
70+ < PopoverSurface >
71+ < div >
72+ < Text as = 'h1' block size = { 500 } >
8373 WebGAL Terre
8474 </ Text >
85- < Text block variant = "medium" className = { styles . info } id = { descriptionId } >
75+ < Text as = 'b' block >
8676 < p > { t ( 'about.slogan' ) } </ p >
8777 < small >
8878 { t ( 'about.currentVersion' ) } : { `${ __INFO . version } (${ new Date ( __INFO . buildTime ) . toLocaleString ( 'zh-CN' , dateTimeOptions ) . replaceAll ( '/' , '-' ) } )` } < br />
@@ -95,7 +85,7 @@ const About: React.FunctionComponent = () => {
9585 < p >
9686 {
9787 isNewRelease &&
98- < Link href = "https://openwebgal.com/download/" target = "_blank" className = { styles . link } >
88+ < Link href = "https://openwebgal.com/download/" target = "_blank" >
9989 { t ( 'about.downloadLatest' ) }
10090 </ Link >
10191 }
@@ -109,20 +99,20 @@ const About: React.FunctionComponent = () => {
10999 </ div >
110100 </ small >
111101 </ Text >
112- < div className = { styles . link_group } >
113- < Link href = "https://openwebgal.com/" target = "_blank" className = { styles . link } >
102+ < div style = { { display : 'flex' , gap : '0.5rem' , marginTop : '1rem' } } >
103+ < Link href = "https://openwebgal.com/" target = "_blank" >
114104 { t ( 'about.homePage' ) }
115105 </ Link >
116- < Link href = "https://docs.openwebgal.com/" target = "_blank" className = { styles . link } >
106+ < Link href = "https://docs.openwebgal.com/" target = "_blank" >
117107 { t ( 'about.document' ) }
118108 </ Link >
119- < Link href = "https://github.com/MakinoharaShoko/WebGAL_Terre" target = "_blank" className = { styles . link } >
109+ < Link href = "https://github.com/MakinoharaShoko/WebGAL_Terre" target = "_blank" >
120110 GitHub
121111 </ Link >
122112 </ div >
123- </ Callout >
124- }
125- </ >
113+ </ div >
114+ </ PopoverSurface >
115+ </ Popover >
126116 ) ;
127117} ;
128118
0 commit comments