106 lines
3.2 KiB
TypeScript
106 lines
3.2 KiB
TypeScript
import { useIntl } from '@umijs/max';
|
|
import { Space, Typography } from 'antd';
|
|
import React, { useMemo } from 'react';
|
|
|
|
const { Text } = Typography;
|
|
|
|
interface AddWorkerMacOSProps {
|
|
token?: string;
|
|
platform: {
|
|
os: string;
|
|
supportVersions: string;
|
|
};
|
|
}
|
|
|
|
const registerWorkerSteps = [
|
|
'resources.register.worker.step2',
|
|
`resources.register.worker.step4`,
|
|
'resources.register.worker.step5',
|
|
'resources.register.worker.step6',
|
|
`resources.register.worker.step7`
|
|
];
|
|
|
|
const AddWorkerMacOS: React.FC<AddWorkerMacOSProps> = ({ platform }) => {
|
|
const intl = useIntl();
|
|
const labels = useMemo(
|
|
() => ({
|
|
step1: intl.formatMessage({ id: 'resources.worker.add.step1' }),
|
|
step2: intl.formatMessage({ id: 'resources.worker.add.step2' }),
|
|
step2Tips: intl.formatMessage({ id: 'resources.worker.add.step2.tips' }),
|
|
step3: intl.formatMessage({ id: 'resources.worker.add.step3' }),
|
|
linuxOrMac: intl.formatMessage({ id: 'resources.worker.linuxormaxos' })
|
|
}),
|
|
[intl]
|
|
);
|
|
return (
|
|
<div className="script-install">
|
|
<h3 className="font-size-14 font-600">
|
|
1.{' '}
|
|
{intl.formatMessage(
|
|
{ id: 'resources.register.install.title' },
|
|
{ os: platform.os }
|
|
)}
|
|
</h3>
|
|
<Typography.Paragraph type="secondary" style={{ paddingLeft: 14 }}>
|
|
<span
|
|
dangerouslySetInnerHTML={{
|
|
__html: intl.formatMessage(
|
|
{ id: 'resources.register.download' },
|
|
{
|
|
versions: intl.formatMessage({
|
|
id: platform.supportVersions
|
|
})
|
|
}
|
|
)
|
|
}}
|
|
></span>
|
|
</Typography.Paragraph>
|
|
<h3 className="font-size-14 font-600">
|
|
2. <span dangerouslySetInnerHTML={{ __html: labels.step1 }}></span>
|
|
</h3>
|
|
<Typography.Paragraph style={{ paddingLeft: 14 }}>
|
|
<div className="flex">
|
|
<Typography.Text type="secondary">
|
|
<span
|
|
dangerouslySetInnerHTML={{
|
|
__html: intl.formatMessage({
|
|
id: 'resources.register.worker.step1'
|
|
})
|
|
}}
|
|
></span>
|
|
</Typography.Text>
|
|
</div>
|
|
</Typography.Paragraph>
|
|
<h3 className="m-t-10 font-size-14 font-600">
|
|
3. {labels.step2}{' '}
|
|
<span
|
|
className="font-size-12"
|
|
style={{ color: 'var(--ant-color-text-tertiary)' }}
|
|
dangerouslySetInnerHTML={{
|
|
__html: `${labels.step2Tips}`
|
|
}}
|
|
></span>
|
|
</h3>
|
|
<Typography.Paragraph style={{ paddingLeft: 14 }}>
|
|
<div className="flex">
|
|
<Space direction="vertical">
|
|
{registerWorkerSteps.map((step, index) => (
|
|
<Typography.Text key={index} type="secondary">
|
|
{index + 1}.{' '}
|
|
<span
|
|
dangerouslySetInnerHTML={{
|
|
__html: intl.formatMessage({ id: step })
|
|
}}
|
|
></span>
|
|
</Typography.Text>
|
|
))}
|
|
</Space>
|
|
</div>
|
|
</Typography.Paragraph>
|
|
<h3 className="m-b-0 m-t-10 font-size-14 font-600">4. {labels.step3}</h3>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default AddWorkerMacOS;
|