mirror of https://gitee.com/answerdev/answer.git
chore: add install pages
This commit is contained in:
shuai
parent
d72425b343
commit
2ad6a40d76
|
|
@ -732,6 +732,66 @@
|
|||
"x_answers": "answers",
|
||||
"x_questions": "questions"
|
||||
},
|
||||
"install": {
|
||||
"title": "Answer",
|
||||
"next": "Next",
|
||||
"done": "Done",
|
||||
"choose_lang": {
|
||||
"label": "Please choose a language"
|
||||
},
|
||||
"database_engine": {
|
||||
"label": "Database Engine"
|
||||
},
|
||||
"username": {
|
||||
"label": "Username",
|
||||
"placeholder": "root"
|
||||
},
|
||||
"password": {
|
||||
"label": "Password",
|
||||
"placeholder": "root"
|
||||
},
|
||||
"database_host": {
|
||||
"label": "Database Host",
|
||||
"placeholder": "db:3306"
|
||||
},
|
||||
"database_name": {
|
||||
"label": "Database Name",
|
||||
"placeholder": "answer"
|
||||
},
|
||||
"table_prefix": {
|
||||
"label": "Table Prefix (optional)",
|
||||
"placeholder": "answer_"
|
||||
},
|
||||
"config_yaml": {
|
||||
"title": "Create config.yaml",
|
||||
"label": "The config.yaml file created.",
|
||||
"description": "You can create the <1>config.yaml</1> file manually in the <1>/var/wwww/xxx/</1> directory and paste the following text into it.",
|
||||
"info": "After you’ve done that, click “Next” button."
|
||||
},
|
||||
"site_information": "Site Information",
|
||||
"admin_account": "Admin Account",
|
||||
"site_name": {
|
||||
"label": "Site Name"
|
||||
},
|
||||
"contact_email": {
|
||||
"label": "Contact Email",
|
||||
"text": "Email address of key contact responsible for this site."
|
||||
},
|
||||
"admin_name": {
|
||||
"label": "Name"
|
||||
},
|
||||
"admin_password": {
|
||||
"label": "Password",
|
||||
"text": "You will need this password to log in. Please store it in a secure location."
|
||||
},
|
||||
"admin_email": {
|
||||
"label": "Email",
|
||||
"text": "You will need this email to log in."
|
||||
},
|
||||
"ready_title": "Your Answer is Ready!",
|
||||
"ready_description": "If you ever feel like changing more settings, visit <1>admin section</1>; find it in the site menu.",
|
||||
"good_luck": "Have fun, and good luck!"
|
||||
},
|
||||
"page_404": {
|
||||
"description": "Unfortunately, this page doesn't exist.",
|
||||
"back_home": "Back to homepage"
|
||||
|
|
|
|||
|
|
@ -0,0 +1,33 @@
|
|||
import { FC } from 'react';
|
||||
import { Button } from 'react-bootstrap';
|
||||
import { useTranslation, Trans } from 'react-i18next';
|
||||
|
||||
import Progress from '../Progress';
|
||||
|
||||
interface Props {
|
||||
visible: boolean;
|
||||
}
|
||||
const Index: FC<Props> = ({ visible }) => {
|
||||
const { t } = useTranslation('translation', { keyPrefix: 'install' });
|
||||
|
||||
if (!visible) return null;
|
||||
return (
|
||||
<div>
|
||||
<h5>{t('ready_title')}</h5>
|
||||
<p>
|
||||
<Trans i18nKey="install.ready_description">
|
||||
If you ever feel like changing more settings, visit
|
||||
<a href="/">admin section</a>; find it in the site menu.
|
||||
</Trans>
|
||||
</p>
|
||||
<p>{t('good_luck')}</p>
|
||||
|
||||
<div className="d-flex align-items-center justify-content-between">
|
||||
<Progress step={5} />
|
||||
<Button>{t('done')}</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Index;
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
import { FC } from 'react';
|
||||
import { Form, Button } from 'react-bootstrap';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
import Progress from '../Progress';
|
||||
|
||||
interface Props {
|
||||
visible: boolean;
|
||||
}
|
||||
const Index: FC<Props> = ({ visible }) => {
|
||||
const { t } = useTranslation('translation', { keyPrefix: 'install' });
|
||||
|
||||
if (!visible) return null;
|
||||
return (
|
||||
<Form>
|
||||
<Form.Group controlId="langSelect" className="mb-3">
|
||||
<Form.Label>{t('choose_lang.label')}</Form.Label>
|
||||
<Form.Select>
|
||||
<option>English</option>
|
||||
</Form.Select>
|
||||
</Form.Group>
|
||||
|
||||
<div className="d-flex align-items-center justify-content-between">
|
||||
<Progress step={1} />
|
||||
<Button>{t('next')}</Button>
|
||||
</div>
|
||||
</Form>
|
||||
);
|
||||
};
|
||||
|
||||
export default Index;
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
import { FC } from 'react';
|
||||
import { Form, Button } from 'react-bootstrap';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
import Progress from '../Progress';
|
||||
|
||||
interface Props {
|
||||
visible: boolean;
|
||||
}
|
||||
const Index: FC<Props> = ({ visible }) => {
|
||||
const { t } = useTranslation('translation', { keyPrefix: 'install' });
|
||||
|
||||
if (!visible) return null;
|
||||
return (
|
||||
<Form>
|
||||
<h5>{t('site_information')}</h5>
|
||||
<Form.Group controlId="site_name" className="mb-3">
|
||||
<Form.Label>{t('site_name.label')}</Form.Label>
|
||||
<Form.Control required type="text" />
|
||||
</Form.Group>
|
||||
<Form.Group controlId="contact_email" className="mb-3">
|
||||
<Form.Label>{t('contact_email.label')}</Form.Label>
|
||||
<Form.Control required type="text" />
|
||||
<Form.Text>{t('contact_email.text')}</Form.Text>
|
||||
</Form.Group>
|
||||
|
||||
<h5>{t('admin_account')}</h5>
|
||||
<Form.Group controlId="admin_name" className="mb-3">
|
||||
<Form.Label>{t('admin_name.label')}</Form.Label>
|
||||
<Form.Control required type="text" />
|
||||
</Form.Group>
|
||||
|
||||
<Form.Group controlId="admin_password" className="mb-3">
|
||||
<Form.Label>{t('admin_password.label')}</Form.Label>
|
||||
<Form.Control required type="text" />
|
||||
<Form.Text>{t('admin_password.text')}</Form.Text>
|
||||
</Form.Group>
|
||||
|
||||
<Form.Group controlId="admin_email" className="mb-3">
|
||||
<Form.Label>{t('admin_email.label')}</Form.Label>
|
||||
<Form.Control required type="text" />
|
||||
<Form.Text>{t('admin_email.text')}</Form.Text>
|
||||
</Form.Group>
|
||||
|
||||
<div className="d-flex align-items-center justify-content-between">
|
||||
<Progress step={4} />
|
||||
<Button>{t('next')}</Button>
|
||||
</div>
|
||||
</Form>
|
||||
);
|
||||
};
|
||||
|
||||
export default Index;
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
import { FC, memo } from 'react';
|
||||
import { ProgressBar } from 'react-bootstrap';
|
||||
|
||||
interface IProps {
|
||||
step: number;
|
||||
}
|
||||
|
||||
const Index: FC<IProps> = ({ step }) => {
|
||||
return (
|
||||
<div className="d-flex align-items-center fs-14 text-secondary">
|
||||
<ProgressBar
|
||||
now={(step / 5) * 100}
|
||||
variant="success"
|
||||
style={{ width: '200px' }}
|
||||
className="me-2"
|
||||
/>
|
||||
<span>{step}/5</span>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default memo(Index);
|
||||
|
|
@ -0,0 +1,57 @@
|
|||
import { FC } from 'react';
|
||||
import { Form, Button } from 'react-bootstrap';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
import Progress from '../Progress';
|
||||
|
||||
interface Props {
|
||||
visible: boolean;
|
||||
}
|
||||
|
||||
const Index: FC<Props> = ({ visible }) => {
|
||||
const { t } = useTranslation('translation', { keyPrefix: 'install' });
|
||||
|
||||
if (!visible) return null;
|
||||
return (
|
||||
<Form>
|
||||
<Form.Group controlId="database_engine" className="mb-3">
|
||||
<Form.Label>{t('database_engine.label')}</Form.Label>
|
||||
<Form.Select>
|
||||
<option>English</option>
|
||||
</Form.Select>
|
||||
</Form.Group>
|
||||
|
||||
<Form.Group controlId="username" className="mb-3">
|
||||
<Form.Label>{t('username.label')}</Form.Label>
|
||||
<Form.Control placeholder={t('username.placeholder')} />
|
||||
</Form.Group>
|
||||
|
||||
<Form.Group controlId="password" className="mb-3">
|
||||
<Form.Label>{t('password.label')}</Form.Label>
|
||||
<Form.Control placeholder={t('password.placeholder')} />
|
||||
</Form.Group>
|
||||
|
||||
<Form.Group controlId="database_host" className="mb-3">
|
||||
<Form.Label>{t('database_host.label')}</Form.Label>
|
||||
<Form.Control placeholder={t('database_host.placeholder')} />
|
||||
</Form.Group>
|
||||
|
||||
<Form.Group controlId="database_name" className="mb-3">
|
||||
<Form.Label>{t('database_name.label')}</Form.Label>
|
||||
<Form.Control placeholder={t('database_name.placeholder')} />
|
||||
</Form.Group>
|
||||
|
||||
<Form.Group controlId="table_prefix" className="mb-3">
|
||||
<Form.Label>{t('table_prefix.label')}</Form.Label>
|
||||
<Form.Control placeholder={t('table_prefix.placeholder')} />
|
||||
</Form.Group>
|
||||
|
||||
<div className="d-flex align-items-center justify-content-between">
|
||||
<Progress step={2} />
|
||||
<Button>{t('next')}</Button>
|
||||
</div>
|
||||
</Form>
|
||||
);
|
||||
};
|
||||
|
||||
export default Index;
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
import { FC } from 'react';
|
||||
import { Form, Button, FormGroup } from 'react-bootstrap';
|
||||
import { useTranslation, Trans } from 'react-i18next';
|
||||
|
||||
import Progress from '../Progress';
|
||||
|
||||
interface Props {
|
||||
visible: boolean;
|
||||
}
|
||||
|
||||
const Index: FC<Props> = ({ visible }) => {
|
||||
const { t } = useTranslation('translation', { keyPrefix: 'install' });
|
||||
|
||||
if (!visible) return null;
|
||||
return (
|
||||
<div>
|
||||
<h5>{t('config_yaml.title')}</h5>
|
||||
<div className="mb-3">{t('config_yaml.label')}</div>
|
||||
<div className="fmt">
|
||||
<p>
|
||||
<Trans
|
||||
i18nKey="install.config_yaml.description"
|
||||
components={{ 1: <code /> }}
|
||||
/>
|
||||
</p>
|
||||
</div>
|
||||
<FormGroup className="mb-3">
|
||||
<Form.Control type="text" as="textarea" rows={5} className="fs-14" />
|
||||
</FormGroup>
|
||||
<div className="mb-3">{t('config_yaml.info')}</div>
|
||||
<div className="d-flex align-items-center justify-content-between">
|
||||
<Progress step={3} />
|
||||
<Button>{t('next')}</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Index;
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
import FirstStep from './FirstStep';
|
||||
import SecondStep from './SecondStep';
|
||||
import ThirdStep from './ThirdStep';
|
||||
import FourthStep from './FourthStep';
|
||||
import Fifth from './FifthStep';
|
||||
|
||||
export { FirstStep, SecondStep, ThirdStep, FourthStep, Fifth };
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
import { FC, useState } from 'react';
|
||||
import { Container, Row, Col, Card, Alert } from 'react-bootstrap';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
import {
|
||||
FirstStep,
|
||||
SecondStep,
|
||||
ThirdStep,
|
||||
FourthStep,
|
||||
Fifth,
|
||||
} from './components';
|
||||
|
||||
const Index: FC = () => {
|
||||
const { t } = useTranslation('translation', { keyPrefix: 'install' });
|
||||
const [step] = useState(5);
|
||||
|
||||
return (
|
||||
<div style={{ background: '#f5f5f5', minHeight: '100vh' }}>
|
||||
<Container style={{ paddingTop: '74px' }}>
|
||||
<Row className="justify-content-center">
|
||||
<Col lg={6}>
|
||||
<h2 className="mb-4 text-center">{t('title')}</h2>
|
||||
<Card>
|
||||
<Card.Body>
|
||||
<Alert variant="danger"> show error msg </Alert>
|
||||
<FirstStep visible={step === 1} />
|
||||
|
||||
<SecondStep visible={step === 2} />
|
||||
|
||||
<ThirdStep visible={step === 3} />
|
||||
|
||||
<FourthStep visible={step === 4} />
|
||||
|
||||
<Fifth visible={step === 5} />
|
||||
</Card.Body>
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
</Container>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Index;
|
||||
|
|
@ -211,5 +211,9 @@ const routes: RouteNode[] = [
|
|||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
path: 'install',
|
||||
page: 'pages/Install',
|
||||
},
|
||||
];
|
||||
export default routes;
|
||||
|
|
|
|||
Loading…
Reference in New Issue