From ed459c5c4862a51d4af71d06b0c3696fdcb9edf5 Mon Sep 17 00:00:00 2001 From: jingyang <3161362058@qq.com> Date: Mon, 22 Apr 2024 14:34:21 +0800 Subject: [PATCH] add MyTooltip --- .../cloudserver/public/locales/en/common.json | 2 + .../cloudserver/public/locales/jp/common.json | 2 + .../cloudserver/public/locales/zh/common.json | 6 ++- .../cloudserver/create/components/Form.tsx | 53 +++++++++++++++---- .../cloudserver/create/components/Header.tsx | 44 +++++++-------- .../src/pages/cloudserver/create/index.tsx | 2 +- 6 files changed, 70 insertions(+), 39 deletions(-) diff --git a/frontend/providers/cloudserver/public/locales/en/common.json b/frontend/providers/cloudserver/public/locales/en/common.json index 216c7e328fbc..37f4d0dd8cd9 100644 --- a/frontend/providers/cloudserver/public/locales/en/common.json +++ b/frontend/providers/cloudserver/public/locales/en/common.json @@ -51,6 +51,8 @@ "Quantity is 1 to 100": "Quantity is 1 to 100", "ReStart": "Restart", "Reference fee": "Reference fee", + "Reference fee disk tips": "{{price}}/GiB/hour", + "Reference fee network tips": "When the public network bandwidth is less than 5 Mbps, the price is {{price1}}/Mbps/hour; when the public network bandwidth is greater than or equal to 5 Mbps, the price is {{price2}}/Mbps/hour.", "Reference fee tip": "{{price}}/hour", "Restarting": "Restarting", "Set Password": "Set Password", diff --git a/frontend/providers/cloudserver/public/locales/jp/common.json b/frontend/providers/cloudserver/public/locales/jp/common.json index 6b6ab88ca196..d8c8aa5b6df3 100644 --- a/frontend/providers/cloudserver/public/locales/jp/common.json +++ b/frontend/providers/cloudserver/public/locales/jp/common.json @@ -51,6 +51,8 @@ "Quantity is 1 to 100": "数量は1から100までです", "ReStart": "再起動", "Reference fee": "参考料金", + "Reference fee disk tips": "{{price}}/GiB/時間あたり", + "Reference fee network tips": "パブリックネットワークの帯域幅が5 Mbps未満の場合、価格は{{price1}}/Mbps/時間です。帯域幅が5 Mbps以上の場合、価格は{{price2}}/Mbps/時間です。", "Reference fee tip": "{{price}}/時間", "Restarting": "再起動中", "Set Password": "パスワードを設定する", diff --git a/frontend/providers/cloudserver/public/locales/zh/common.json b/frontend/providers/cloudserver/public/locales/zh/common.json index 9d863e21260c..d6933af3e079 100644 --- a/frontend/providers/cloudserver/public/locales/zh/common.json +++ b/frontend/providers/cloudserver/public/locales/zh/common.json @@ -84,5 +84,7 @@ "price": "价格", "publicIpAssigned tips": "注意：未分配独立公网IP，无法使用外网IP对外进行互相通信，服务器无法用于备案，请慎重选择。", "Fee inquiry in progress": "费用查询中...", - "hour": "小时" -} + "hour": "小时", + "Reference fee disk tips": "{{price}}/GiB/小时", + "Reference fee network tips": "当公网带宽小于5 Mbps时，价格为{{price1}}/Mbps/小时；当公网带宽大于等于5 Mbps时，价格为{{price2}}/Mbps/小时。" +} \ No newline at end of file diff --git a/frontend/providers/cloudserver/src/pages/cloudserver/create/components/Form.tsx b/frontend/providers/cloudserver/src/pages/cloudserver/create/components/Form.tsx index 028a74a69e5c..802c41b60295 100644 --- a/frontend/providers/cloudserver/src/pages/cloudserver/create/components/Form.tsx +++ b/frontend/providers/cloudserver/src/pages/cloudserver/create/components/Form.tsx @@ -1,22 +1,23 @@ import { getCloudServerImage, getCloudServerType } from '@/api/cloudserver'; import MyIcon from '@/components/Icon'; import { MyTable, TableColumnsType } from '@/components/MyTable'; +import MyTooltip from '@/components/MyTooltip'; import { CloudServerType, EditForm, StorageType } from '@/types/cloudserver'; import { Box, Button, Divider, Flex, + FormControl, IconButton, + Image, Input, Radio, Skeleton, Stack, Switch, Text, - useTheme, - Image, - FormControl + useTheme } from '@chakra-ui/react'; import { MySelect, RangeInput, Tabs } from '@sealos/ui'; import { useQuery } from '@tanstack/react-query'; @@ -33,7 +34,7 @@ const Label = ({ w = 120, ...props }: { - children: string; + children: JSX.Element; w?: number | 'auto'; [key: string]: any; }) => ( @@ -57,6 +58,7 @@ export default function Form({ }) { if (!formHook) return <>; const [clientRender, setClientRender] = useState(false); + const [instanceType, setInstanceType] = useState(); useEffect(() => { setClientRender(true); @@ -71,6 +73,7 @@ export default function Form({ onSuccess(data) { if (data?.[0]) { formHook.setValue('virtualMachinePackageName', data[0].virtualMachinePackageName); + setInstanceType(data?.[0]); } } }); @@ -277,7 +280,9 @@ export default function Form({ - + {ServersData ? ( { setValue('virtualMachinePackageName', item.virtualMachinePackageName); setValue('virtualMachinePackageFamily', item.virtualMachinePackageFamily); + setInstanceType(item); }} /> ) : ( @@ -298,7 +304,9 @@ export default function Form({ - + {SystemImage && @@ -375,8 +383,18 @@ export default function Form({ - - + + {clientRender && ( - + {t('Assign Public IP')} @@ -454,12 +474,25 @@ export default function Form({ }} /> Mbps + + + + + )} - + - + {t('Instance')} - + ¥{prices?.instancePrice}/{t('hour')} - - {t('storage fees')} - + + + + {t('storage fees')} + + ¥{prices?.diskPrice}/{t('hour')} + - {t('Public network bandwidth')} - + + {t('Public network bandwidth')} + + ¥{prices?.networkPrice}/{t('hour')} diff --git a/frontend/providers/cloudserver/src/pages/cloudserver/create/index.tsx b/frontend/providers/cloudserver/src/pages/cloudserver/create/index.tsx index 7554e6f624f4..0a511f3d8b62 100644 --- a/frontend/providers/cloudserver/src/pages/cloudserver/create/index.tsx +++ b/frontend/providers/cloudserver/src/pages/cloudserver/create/index.tsx @@ -6,6 +6,7 @@ import { useGlobalStore } from '@/store/global'; import { EditForm } from '@/types/cloudserver'; import { serviceSideProps } from '@/utils/i18n'; import { Box, Flex } from '@chakra-ui/react'; +import { useQuery } from '@tanstack/react-query'; import { useTranslation } from 'next-i18next'; import { useRouter } from 'next/router'; import { useCallback, useState } from 'react'; @@ -13,7 +14,6 @@ import { useForm } from 'react-hook-form'; import ErrorModal from './components/ErrorModal'; import Form from './components/Form'; import Header from './components/Header'; -import { useQuery } from '@tanstack/react-query'; export default function EditOrder() { const [errorMessage, setErrorMessage] = useState('');