feat:launchpad && database add cost tip (#4980)

* feat:launchpad && database add cost tip * fix color
labring · Aug 16, 2024 · d32471d · d32471d
1 parent 3d0f964
commit d32471d
Show file tree

Hide file tree

Showing 13 changed files with 56 additions and 21 deletions.
diff --git a/frontend/desktop/src/components/AppDock/index.tsx b/frontend/desktop/src/components/AppDock/index.tsx
@@ -42,7 +42,7 @@ export default function AppDock() {
         name: 'home',
         icon: '/icons/home.svg',
         zIndex: 99999,
-        isShow: true,
+        isShow: false,
         pid: -9,
         size: 'maxmin',
         cacheSize: 'maxmin',
@@ -202,7 +202,7 @@ export default function AppDock() {
                   />
                 </Center>
                 <Box
-                  opacity={currentAppPid === item.pid ? 1 : 0}
+                  opacity={item?.isShow ? 1 : 0}
                   mt={'6px'}
                   width={'4px'}
                   height={'4px'}

diff --git a/frontend/desktop/src/components/desktop_content/apps.tsx b/frontend/desktop/src/components/desktop_content/apps.tsx
@@ -5,7 +5,7 @@ import { Box, Button, Flex, Grid, HStack, Image, Text, useBreakpointValue } from
 import { throttle } from 'lodash';
 import { useTranslation } from 'next-i18next';
 import { MouseEvent, useCallback, useEffect, useMemo, useState } from 'react';
-import { ArrowLeftIcon, ArrowRightIcon, DesktopSealosCoinIcon } from '../icons';
+import { ArrowLeftIcon, ArrowRightIcon } from '../icons';
 import { blurBackgroundStyles } from './index';
 import { validateNumber } from '@/utils/tools';
 

diff --git a/frontend/packages/ui/src/components/Message/index.tsx b/frontend/packages/ui/src/components/Message/index.tsx
@@ -6,11 +6,11 @@ import WarningIcon from '../icons/WarningIcon';
 
 export default function useMessage(props?: UseToastOptions) {
   const statusMap: Record<AlertStatus, { bg: string; icon: JSX.Element }> = {
-    info: { bg: '#F0FBFF', icon: <GeneralIcon w={'16px'} h="16px" fill={'#0884DD'} /> },
-    error: { bg: 'red.50', icon: <CloseIcon w={'16px'} h="16px" fill={'#D92D20'} /> },
-    success: { bg: '#EDFBF3', icon: <SuccessIcon w={'16px'} h="16px" fill={'#039855'} /> },
-    warning: { bg: 'yellow.50', icon: <WarningIcon /> },
-    loading: { bg: 'yellow.50', icon: <WarningIcon /> }
+    info: { bg: '#DBF3FF', icon: <GeneralIcon w={'16px'} h="16px" fill={'#0884DD'} /> },
+    error: { bg: '#FEE4E2', icon: <CloseIcon w={'16px'} h="16px" fill={'#D92D20'} /> },
+    success: { bg: '#D0F5DC', icon: <SuccessIcon w={'16px'} h="16px" fill={'#039855'} /> },
+    warning: { bg: '#FEF0C7', icon: <WarningIcon /> },
+    loading: { bg: '#FEF0C7', icon: <WarningIcon /> }
   };
 
   const renderStatusIcon = (status: AlertStatus) => {

diff --git a/frontend/providers/applaunchpad/public/locales/en/common.json b/frontend/providers/applaunchpad/public/locales/en/common.json
@@ -257,5 +257,6 @@
   "update_sealaf_app_tip": "This application is deployed through cloud development. To change the application, please go to cloud development.",
   "confirm_to_go": "Confirm",
   "app_store": "App Store",
-  "sealaf": "sealaf"
-}
+  "sealaf": "sealaf",
+  "total_price_tip": "The estimated cost does not include port fees and traffic fees, and is subject to actual usage."
+}
diff --git a/frontend/providers/applaunchpad/public/locales/zh/common.json b/frontend/providers/applaunchpad/public/locales/zh/common.json
@@ -257,5 +257,6 @@
   "update_sealaf_app_tip": "该应用是通过云开发部署的，变更该应用请到云开发中进行。",
   "confirm_to_go": "确认前往",
   "sealaf": "云开发",
-  "app_store": "应用商店"
-}
+  "app_store": "应用商店",
+  "total_price_tip": "预估费用不包括端口费用和流量费用,以实际使用为准"
+}
diff --git a/frontend/providers/applaunchpad/src/components/Icon/icons/help.svg b/frontend/providers/applaunchpad/src/components/Icon/icons/help.svg
diff --git a/frontend/providers/applaunchpad/src/components/Icon/index.tsx b/frontend/providers/applaunchpad/src/components/Icon/index.tsx
@@ -43,6 +43,7 @@ const map = {
   upperRight: require('./icons/upperRight.svg').default,
   target: require('./icons/target.svg').default,
   yaml: require('./icons/file/yaml.svg').default,
+  help: require('./icons/help.svg').default,
   folderLine: require('./icons/file/folder-line.svg').default,
   default: require('./icons/file/default.svg').default,
   home: require('./icons/home.svg').default,

diff --git a/frontend/providers/applaunchpad/src/pages/app/edit/components/PriceBox.tsx b/frontend/providers/applaunchpad/src/pages/app/edit/components/PriceBox.tsx
@@ -1,9 +1,11 @@
 import React, { useMemo } from 'react';
-import { Box, Flex, useTheme } from '@chakra-ui/react';
+import { Box, Center, Flex, useTheme } from '@chakra-ui/react';
 import { useTranslation } from 'next-i18next';
 import { Text, Icon } from '@chakra-ui/react';
 import { CURRENCY } from '@/store/static';
 import { useUserStore } from '@/store/user';
+import MyIcon from '@/components/Icon';
+import { MyTooltip } from '@sealos/ui';
 
 function Currencysymbol({
   type = 'shellCoin',
@@ -117,7 +119,7 @@ const PriceBox = ({
         <Text color={'grayModern.500'}> ({t('Perday')})</Text>
       </Flex>
       <Box py={3} px={4}>
-        {priceList.map((item) => (
+        {priceList.map((item, index) => (
           <Flex
             key={item.label}
             alignItems={'center'}
@@ -134,7 +136,17 @@ const PriceBox = ({
               borderRadius={'10px'}
               mr={2}
             ></Box>
-            <Box flex={'0 0 60px'}>{t(item.label)}:</Box>
+            <Flex alignItems={'center'} gap={'2px'} flex={'0 0 60px'}>
+              {t(item.label)}
+              {index === priceList.length - 1 && (
+                <MyTooltip label={t('total_price_tip')}>
+                  <Center width={'14px'} height={'14px'} cursor={'pointer'}>
+                    <MyIcon name="help" width={'14px'} height={'14px'} color={'grayModern.500'} />
+                  </Center>
+                </MyTooltip>
+              )}
+              :
+            </Flex>
             <Box whiteSpace={'nowrap'}>{item.value}</Box>
           </Flex>
         ))}

diff --git a/frontend/providers/dbprovider/public/locales/en/common.json b/frontend/providers/dbprovider/public/locales/en/common.json
@@ -277,6 +277,7 @@
   "successfully_closed_external_network_access": "Internet access disabled",
   "table_locks": "Table-level locks",
   "total_price": "total_price",
+  "total_price_tip": "The estimated cost does not include port fees and traffic fees, and is subject to actual usage.",
   "turn_on": "Enable",
   "update": "Update",
   "update_database": "Update DataBase",
@@ -288,4 +289,4 @@
   "use_docs": "Documentation",
   "version": "Version",
   "yaml_file": "YAML"
-}
+}
diff --git a/frontend/providers/dbprovider/public/locales/zh/common.json b/frontend/providers/dbprovider/public/locales/zh/common.json
@@ -277,6 +277,7 @@
   "successfully_closed_external_network_access": "已关闭外网访问",
   "table_locks": "表锁",
   "total_price": "总价",
+  "total_price_tip": "预估费用不包括端口费用和流量费用,以实际使用为准",
   "turn_on": "开启",
   "update": "变更",
   "update_database": "变更数据库",
@@ -288,4 +289,4 @@
   "use_docs": "使用文档",
   "version": "版本",
   "yaml_file": "YAML 文件"
-}
+}
diff --git a/frontend/providers/dbprovider/src/components/Icon/icons/help.svg b/frontend/providers/dbprovider/src/components/Icon/icons/help.svg
diff --git a/frontend/providers/dbprovider/src/components/Icon/index.tsx b/frontend/providers/dbprovider/src/components/Icon/index.tsx
@@ -45,6 +45,7 @@ const map = {
   pods: require('./icons/pods.svg').default,
   upload: require('./icons/upload.svg').default,
   target: require('./icons/target.svg').default,
+  help: require('./icons/help.svg').default,
   arrowDown: require('./icons/arrowDown.svg').default,
   docs: require('./icons/docs.svg').default
 };

diff --git a/frontend/providers/dbprovider/src/components/PriceBox/index.tsx b/frontend/providers/dbprovider/src/components/PriceBox/index.tsx
@@ -1,9 +1,10 @@
 import { SOURCE_PRICE } from '@/store/static';
 import { I18nCommonKey } from '@/types/i18next';
-import { Box, Flex, useTheme, Text } from '@chakra-ui/react';
-import { SealosCoin } from '@sealos/ui';
+import { Box, Flex, useTheme, Text, Center } from '@chakra-ui/react';
+import { MyTooltip, SealosCoin } from '@sealos/ui';
 import { useTranslation } from 'next-i18next';
 import { useMemo } from 'react';
+import MyIcon from '@/components/Icon';
 
 export const colorMap = {
   cpu: '#33BABB',
@@ -73,10 +74,20 @@ const PriceBox = ({
         <Text color={'grayModern.500'}> ({t('Perday')})</Text>
       </Flex>
       <Flex flexDirection={'column'} gap={'12px'} py={'16px'} px={'20px'}>
-        {priceList.map((item) => (
+        {priceList.map((item, index) => (
           <Flex key={item.label} alignItems={'center'}>
             <Box bg={item.color} w={'8px'} h={'8px'} borderRadius={'10px'} mr={2}></Box>
-            <Box flex={'0 0 65px'}>{t(item.label)}:</Box>
+            <Flex alignItems={'center'} flex={'0 0 65px'}>
+              {t(item.label)}
+              {index === priceList.length - 1 && (
+                <MyTooltip label={t('total_price_tip')}>
+                  <Center>
+                    <MyIcon name="help" width={'14px'} height={'14px'} color={'grayModern.500'} />
+                  </Center>
+                </MyTooltip>
+              )}
+              :
+            </Flex>
             <Flex alignItems={'center'} gap={'4px'}>
               <SealosCoin />
               {item.value}