p90524618
/
answer
mirror of https://gitee.com/answerdev/answer.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix(install,maintenance): set the page title correctly

This commit is contained in:
haitao(lj) 2022-12-09 16:12:09 +08:00
parent 32f7a0a89c
commit 1dcafe1a32
2 changed files with 103 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

157
ui/src/pages/Install/index.tsx
View File

@ -1,9 +1,8 @@
/* eslint-disable prettier/prettier */
import { FC, useState, useEffect } from 'react';
import { Container, Row, Col, Card, Alert } from 'react-bootstrap';
import { useTranslation, Trans } from 'react-i18next';
import { Helmet, HelmetProvider } from 'react-helmet-async';
import { usePageTags } from '@/hooks';
import type { FormDataType } from '@/common/interface';
import {
dbCheck,
@ -224,7 +223,7 @@ const Index: FC = () => {
});
if (res && res.config_file_exist) {
if (res.db_connection_success) {
setStep(6)
setStep(6);
} else {
setStep(7);
}
@ -239,87 +238,101 @@ const Index: FC = () => {
configYmlCheck();
}, []);
usePageTags({
title: t('install', { keyPrefix: 'page_title' })
});
if (loading) {
return <div />;
}
return (
<div className="bg-f5 py-5 flex-grow-1">
<Container className='py-3'>
<Row className="justify-content-center">
<Col lg={6}>
<h2 className="mb-4 text-center">{t('title')}</h2>
<Card>
<Card.Body>
{errorData?.msg && (
<Alert variant="danger">{errorData?.msg}</Alert>
)}
<HelmetProvider>
<Helmet>
<title>{t('install', { keyPrefix: 'page_title' })}</title>
</Helmet>
<div className="bg-f5 py-5 flex-grow-1">
<Container className="py-3">
<Row className="justify-content-center">
<Col lg={6}>
<h2 className="mb-4 text-center">{t('title')}</h2>
<Card>
<Card.Body>
{errorData?.msg && (
<Alert variant="danger">{errorData?.msg}</Alert>
)}
<FirstStep
visible={step === 1}
data={formData.lang}
changeCallback={handleChange}
nextCallback={handleStep}
/>
<FirstStep
visible={step === 1}
data={formData.lang}
changeCallback={handleChange}
nextCallback={handleStep}
/>
<SecondStep
visible={step === 2}
data={formData}
changeCallback={handleChange}
nextCallback={handleStep}
/>
<SecondStep
visible={step === 2}
data={formData}
changeCallback={handleChange}
nextCallback={handleStep}
/>
<ThirdStep
visible={step === 3}
nextCallback={handleStep}
errorMsg={errorData}
/>
<ThirdStep
visible={step === 3}
nextCallback={handleStep}
errorMsg={errorData}
/>
<FourthStep
visible={step === 4}
data={formData}
changeCallback={handleChange}
nextCallback={handleStep}
/>
<FourthStep
visible={step === 4}
data={formData}
changeCallback={handleChange}
nextCallback={handleStep}
/>
<Fifth visible={step === 5} siteUrl={formData.site_url.value} />
{step === 6 && (
<div>
<h5>{t('warn_title')}</h5>
<p>
<Trans i18nKey="install.warn_description" components={{ 1: <code />}} />
{' '}
<Trans i18nKey="install.install_now">
You may try <a href="###" onClick={e => handleInstallNow(e)}>installing now</a>.
</Trans>
</p>
</div>
)}
<Fifth
visible={step === 5}
siteUrl={formData.site_url.value}
/>
{step === 6 && (
<div>
<h5>{t('warn_title')}</h5>
<p>
<Trans
i18nKey="install.warn_description"
components={{ 1: <code /> }}
/>{' '}
<Trans i18nKey="install.install_now">
You may try{' '}
<a href="###" onClick={(e) => handleInstallNow(e)}>
installing now
</a>
.
</Trans>
</p>
</div>
)}
{step === 7 && (
<div>
<h5>{t('db_failed')}</h5>
<p>
<Trans i18nKey="install.db_failed_description" components={{ 1: <code />}} />
</p>
</div>
)}
{step === 7 && (
<div>
<h5>{t('db_failed')}</h5>
<p>
<Trans
i18nKey="install.db_failed_description"
components={{ 1: <code /> }}
/>
</p>
</div>
)}
{step === 8 && (
<div>
<h5>{t('installed')}</h5>
<p>{t('installed_description')}</p>
</div>
)}
</Card.Body>
</Card>
</Col>
</Row>
</Container>
</div>
{step === 8 && (
<div>
<h5>{t('installed')}</h5>
<p>{t('installed_description')}</p>
</div>
)}
</Card.Body>
</Card>
</Col>
</Row>
</Container>
</div>
</HelmetProvider>
);
};

35
ui/src/pages/Maintenance/index.tsx
View File

@ -1,28 +1,29 @@
import { Container } from 'react-bootstrap';
import { Helmet, HelmetProvider } from 'react-helmet-async';
import { useTranslation } from 'react-i18next';
import { usePageTags } from '@/hooks';
const Index = () => {
const { t } = useTranslation('translation', {
keyPrefix: 'page_maintenance',
});
usePageTags({
title: t('maintenance', { keyPrefix: 'page_title' }),
});
return (
<div className="bg-f5">
<Container
className="d-flex flex-column justify-content-center align-items-center"
style={{ minHeight: '100vh' }}>
<div
className="mb-4 text-secondary"
style={{ fontSize: '120px', lineHeight: 1.2 }}>
(=‘_‘=)
</div>
<div className="text-center mb-4">{t('desc')}</div>
</Container>
</div>
<HelmetProvider>
<Helmet>
<title>{t('maintenance', { keyPrefix: 'page_title' })}</title>
</Helmet>
<div className="bg-f5">
<Container
className="d-flex flex-column justify-content-center align-items-center"
style={{ minHeight: '100vh' }}>
<div
className="mb-4 text-secondary"
style={{ fontSize: '120px', lineHeight: 1.2 }}>
(=‘_‘=)
</div>
<div className="text-center mb-4">{t('desc')}</div>
</Container>
</div>
</HelmetProvider>
);
};