add MyTooltip

labring · Apr 22, 2024 · ed459c5 · ed459c5
1 parent 81e1b1b
commit ed459c5
Show file tree

Hide file tree

Showing 6 changed files with 70 additions and 39 deletions.
diff --git 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
@@ -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
@@ -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/小时。"
+}
diff --git 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<CloudServerType>();
 
   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({
       </Flex>
       <Box pt="24px" px="42px" pb="64px" flex={1} h="0" overflow={'auto'}>
         <Flex alignItems={'center'} mb={'24px'}>
-          <Label alignSelf={'self-start'}>{t('Type')}</Label>
+          <Label alignSelf={'self-start'}>
+            <Text>{t('Type')}</Text>
+          </Label>
           <Box flex={1}>
             {ServersData ? (
               <MyTable
@@ -288,6 +293,7 @@ export default function Form({
                 onRowClick={(item: CloudServerType) => {
                   setValue('virtualMachinePackageName', item.virtualMachinePackageName);
                   setValue('virtualMachinePackageFamily', item.virtualMachinePackageFamily);
+                  setInstanceType(item);
                 }}
               />
             ) : (
@@ -298,7 +304,9 @@ export default function Form({
           </Box>
         </Flex>
         <Flex alignItems={'center'} mb={'24px'} flex={1}>
-          <Label alignSelf={'self-start'}>{t('Image')}</Label>
+          <Label alignSelf={'self-start'}>
+            <Text>{t('Image')}</Text>
+          </Label>
           <Box>
             <Flex flexWrap={'wrap'} gap={'12px'}>
               {SystemImage &&
@@ -375,8 +383,18 @@ export default function Form({
           </Box>
         </Flex>
 
-        <Flex alignItems={'center'} mb={'24px'}>
-          <Label alignSelf={'self-start'}>{t('Storage')}</Label>
+        <Flex alignItems={'center'} mb={'24px'} position={'relative'}>
+          <Label alignSelf={'self-start'}>
+            <MyTooltip
+              label={t('Reference fee disk tips', { price: instanceType?.diskPerG })}
+              placement="bottom-start"
+            >
+              <Flex alignItems={'center'} gap={'4px'} width={'60px'}>
+                <Text>{t('Storage')}</Text>
+                <MyIcon name="help" width={'16px'} color={'grayModern.500'} />
+              </Flex>
+            </MyTooltip>
+          </Label>
           {clientRender && (
             <Box width={'100%'}>
               <MyTable
@@ -405,7 +423,9 @@ export default function Form({
         </Flex>
 
         <Flex alignItems={'center'} mb={'24px'}>
-          <Label alignSelf={'self-start'}>{t('Public IP')}</Label>
+          <Label alignSelf={'self-start'}>
+            <Text>{t('Public IP')}</Text>
+          </Label>
           <Flex flexDirection={'column'}>
             <Flex alignItems={'center'}>
               <Text mr={'12px'}>{t('Assign Public IP')}</Text>
@@ -454,12 +474,25 @@ export default function Form({
               }}
             />
             <Text>Mbps</Text>
+            <MyTooltip
+              label={t('Reference fee network tips', {
+                price1: instanceType?.networkSpeedUnderSpeedBoundaryPerHour,
+                price2: instanceType?.networkSpeedAboveSpeedBoundaryPerHour
+              })}
+              placement="bottom-start"
+            >
+              <Box ml={'4px'}>
+                <MyIcon name="help" width={'16px'} color={'grayModern.500'} />
+              </Box>
+            </MyTooltip>
           </Flex>
         )}
 
         <Box mb={'24px'}>
           <Flex alignItems={'center'}>
-            <Label>{t('Login Method')}</Label>
+            <Label>
+              <Text>{t('Login Method')}</Text>
+            </Label>
             <Tabs
               size={'sm'}
               list={[

diff --git a/frontend/providers/cloudserver/src/pages/cloudserver/create/components/Header.tsx b/frontend/providers/cloudserver/src/pages/cloudserver/create/components/Header.tsx
@@ -35,7 +35,6 @@ const Header = ({
 
   const priceItemStyle = {
     alignItems: 'center',
-    justifyContent: 'space-between',
     py: '4px',
     px: '6px',
     borderRadius: 'base',
@@ -78,39 +77,32 @@ const Header = ({
               </PopoverHeader>
               <PopoverBody>
                 <Flex flexDirection={'column'} gap={'4px'}>
-                  <Flex
-                    alignItems={'center'}
-                    justifyContent={'space-between'}
-                    py={'4px'}
-                    px={'6px'}
-                    borderRadius={'base'}
-                    _hover={{
-                      bg: 'grayModern.100'
-                    }}
-                  >
+                  <Flex {...priceItemStyle}>
                     <Text fontSize={'base'}>{t('Instance')}</Text>
-                    <Text fontWeight={'bold'} color={'brightBlue.600'}>
+                    <Text ml={'auto'} fontWeight={'bold'} color={'brightBlue.600'}>
                       ¥{prices?.instancePrice}/{t('hour')}
                     </Text>
                   </Flex>
-                  <Flex
-                    alignItems={'center'}
-                    justifyContent={'space-between'}
-                    py={'4px'}
-                    px={'6px'}
-                    borderRadius={'base'}
-                    _hover={{
-                      bg: 'grayModern.100'
-                    }}
-                  >
-                    <Text fontSize={'base'}>{t('storage fees')}</Text>
-                    <Text fontWeight={'bold'} color={'brightBlue.600'}>
+
+                  <Flex {...priceItemStyle}>
+                    <Text alignSelf={'self-start'} fontSize={'base'} width={'50px'}>
+                      {t('storage fees')}
+                    </Text>
+                    <Text ml={'auto'} fontWeight={'bold'} color={'brightBlue.600'}>
                       ¥{prices?.diskPrice}/{t('hour')}
                     </Text>
                   </Flex>
+
                   <Flex {...priceItemStyle}>
-                    <Text fontSize={'base'}>{t('Public network bandwidth')}</Text>
-                    <Text fontWeight={'bold'} color={'brightBlue.600'}>
+                    <Text alignSelf={'self-start'} fontSize={'base'} width={'50px'}>
+                      {t('Public network bandwidth')}
+                    </Text>
+                    <Text
+                      ml={'auto'}
+                      alignSelf={'self-start'}
+                      fontWeight={'bold'}
+                      color={'brightBlue.600'}
+                    >
                       ¥{prices?.networkPrice}/{t('hour')}
                     </Text>
                   </Flex>

diff --git a/frontend/providers/cloudserver/src/pages/cloudserver/create/index.tsx b/frontend/providers/cloudserver/src/pages/cloudserver/create/index.tsx
@@ -6,14 +6,14 @@ 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';
 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('');