Unverified Commit 6a7a71af authored by bowen's avatar bowen Committed by GitHub

perf: operational feedback (#749)

parent a25e038a
...@@ -18,6 +18,9 @@ type IShareLinkProps = { ...@@ -18,6 +18,9 @@ type IShareLinkProps = {
onGenerateCode: () => Promise<void> onGenerateCode: () => Promise<void>
linkUrl: string linkUrl: string
} }
const prefixShare = 'appOverview.overview.appInfo.share'
const ShareLinkModal: FC<IShareLinkProps> = ({ const ShareLinkModal: FC<IShareLinkProps> = ({
linkUrl, linkUrl,
isShow, isShow,
...@@ -25,35 +28,37 @@ const ShareLinkModal: FC<IShareLinkProps> = ({ ...@@ -25,35 +28,37 @@ const ShareLinkModal: FC<IShareLinkProps> = ({
onGenerateCode, onGenerateCode,
}) => { }) => {
const [genLoading, setGenLoading] = useState(false) const [genLoading, setGenLoading] = useState(false)
const [isCopied, setIsCopied] = useState(false)
const { t } = useTranslation() const { t } = useTranslation()
return <Modal return <Modal
title={t('appOverview.overview.appInfo.share.explanation')} title={t(`${prefixShare}.explanation`)}
isShow={isShow} isShow={isShow}
onClose={onClose} onClose={onClose}
> >
{/* share url */} {/* share url */}
<p className='mt-5 text-xs font-medium text-gray-500'>{t('appOverview.overview.appInfo.share.shareUrl')}</p> <p className='mt-5 text-xs font-medium text-gray-500'>{t(`${prefixShare}.shareUrl`)}</p>
{/* input share url */} {/* input share url */}
<input disabled type='text' value={linkUrl} className='mt-1 w-full bg-gray-50 p-2 text-primary-600 text-xs font-normal outline-gray-50 hover:outline-gray-50 cursor-pointer' /> <input disabled type='text' value={linkUrl} className='mt-1 w-full bg-gray-50 p-2 text-primary-600 text-xs font-normal outline-gray-50 hover:outline-gray-50 cursor-pointer' />
{/* button copy link/ button regenerate */} {/* button copy link/ button regenerate */}
<div className='mt-4 flex gap-3'> <div className='mt-4 flex gap-3'>
<Button <Button
type="primary" type="primary"
className='w-32' className='w-32 !px-0'
onClick={() => { onClick={() => {
copy(linkUrl) copy(linkUrl) && setIsCopied(true)
}} }}
> >
<LinkIcon className='w-4 h-4 mr-2' /> <LinkIcon className='w-4 h-4 mr-2' />
{t('appOverview.overview.appInfo.share.copyLink')} { t(`${prefixShare}.${isCopied ? 'linkCopied' : 'copyLink'}`) }
</Button> </Button>
<Button className='w-32' onClick={async () => { <Button className='w-32 !px-0' onClick={async () => {
setGenLoading(true) setGenLoading(true)
await onGenerateCode() await onGenerateCode()
setGenLoading(false) setGenLoading(false)
setIsCopied(false)
}}> }}>
<ArrowPathIcon className={`w-4 h-4 mr-2 ${genLoading ? 'generateLogo' : ''}`} /> <ArrowPathIcon className={`w-4 h-4 mr-2 ${genLoading ? 'generateLogo' : ''}`} />
{t('appOverview.overview.appInfo.share.regenerate')} {t(`${prefixShare}.regenerate`)}
</Button> </Button>
</div> </div>
</Modal> </Modal>
......
...@@ -15,6 +15,7 @@ const translation = { ...@@ -15,6 +15,7 @@ const translation = {
entry: 'Share', entry: 'Share',
explanation: 'Share the following URL to invite more people to access the application.', explanation: 'Share the following URL to invite more people to access the application.',
shareUrl: 'Share URL', shareUrl: 'Share URL',
linkCopied: 'Copied',
copyLink: 'Copy Link', copyLink: 'Copy Link',
regenerate: 'Regenerate', regenerate: 'Regenerate',
}, },
......
...@@ -17,6 +17,7 @@ const translation = { ...@@ -17,6 +17,7 @@ const translation = {
shareUrl: '分享 URL', shareUrl: '分享 URL',
copyLink: '复制链接', copyLink: '复制链接',
regenerate: '重新生成', regenerate: '重新生成',
linkCopied: '已复制',
}, },
preUseReminder: '使用前请先打开开关', preUseReminder: '使用前请先打开开关',
settings: { settings: {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment