From d32471d2052ab97f92dc38a377ac3b2102ae058b Mon Sep 17 00:00:00 2001 From: jingyang <72259332+zjy365@users.noreply.github.com> Date: Fri, 16 Aug 2024 14:53:00 +0800 Subject: [PATCH] feat:launchpad && database add cost tip (#4980) * feat:launchpad && database add cost tip * fix color --- .../desktop/src/components/AppDock/index.tsx | 4 ++-- .../src/components/desktop_content/apps.tsx | 2 +- .../ui/src/components/Message/index.tsx | 10 +++++----- .../public/locales/en/common.json | 5 +++-- .../public/locales/zh/common.json | 5 +++-- .../src/components/Icon/icons/help.svg | 3 +++ .../src/components/Icon/index.tsx | 1 + .../pages/app/edit/components/PriceBox.tsx | 18 +++++++++++++++--- .../dbprovider/public/locales/en/common.json | 3 ++- .../dbprovider/public/locales/zh/common.json | 3 ++- .../src/components/Icon/icons/help.svg | 3 +++ .../dbprovider/src/components/Icon/index.tsx | 1 + .../src/components/PriceBox/index.tsx | 19 +++++++++++++++---- 13 files changed, 56 insertions(+), 21 deletions(-) create mode 100644 frontend/providers/applaunchpad/src/components/Icon/icons/help.svg create mode 100644 frontend/providers/dbprovider/src/components/Icon/icons/help.svg diff --git a/frontend/desktop/src/components/AppDock/index.tsx b/frontend/desktop/src/components/AppDock/index.tsx index c24df168470..398b0c52a4f 100644 --- 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() { /> = { - info: { bg: '#F0FBFF', icon: }, - error: { bg: 'red.50', icon: }, - success: { bg: '#EDFBF3', icon: }, - warning: { bg: 'yellow.50', icon: }, - loading: { bg: 'yellow.50', icon: } + info: { bg: '#DBF3FF', icon: }, + error: { bg: '#FEE4E2', icon: }, + success: { bg: '#D0F5DC', icon: }, + warning: { bg: '#FEF0C7', icon: }, + loading: { bg: '#FEF0C7', icon: } }; const renderStatusIcon = (status: AlertStatus) => { diff --git a/frontend/providers/applaunchpad/public/locales/en/common.json b/frontend/providers/applaunchpad/public/locales/en/common.json index 157cad8b535..5442f526cfb 100644 --- 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" -} \ No newline at end of file + "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 index cd69651166f..f2976668c85 100644 --- 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": "应用商店" -} \ No newline at end of file + "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 new file mode 100644 index 00000000000..29dad639285 --- /dev/null +++ b/frontend/providers/applaunchpad/src/components/Icon/icons/help.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/frontend/providers/applaunchpad/src/components/Icon/index.tsx b/frontend/providers/applaunchpad/src/components/Icon/index.tsx index 3c20c120aec..6f72e383a5e 100644 --- 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 index 30cd06452cb..0941217f72d 100644 --- 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 = ({ ({t('Perday')}) - {priceList.map((item) => ( + {priceList.map((item, index) => ( - {t(item.label)}: + + {t(item.label)} + {index === priceList.length - 1 && ( + +
+ +
+ + )} + : + {item.value} ))} diff --git a/frontend/providers/dbprovider/public/locales/en/common.json b/frontend/providers/dbprovider/public/locales/en/common.json index 6728e837190..8a19bf23a16 100644 --- 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" -} \ No newline at end of file +} diff --git a/frontend/providers/dbprovider/public/locales/zh/common.json b/frontend/providers/dbprovider/public/locales/zh/common.json index ed744ecd1e5..bbc4374922f 100644 --- 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 文件" -} \ No newline at end of file +} diff --git a/frontend/providers/dbprovider/src/components/Icon/icons/help.svg b/frontend/providers/dbprovider/src/components/Icon/icons/help.svg new file mode 100644 index 00000000000..29dad639285 --- /dev/null +++ b/frontend/providers/dbprovider/src/components/Icon/icons/help.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/frontend/providers/dbprovider/src/components/Icon/index.tsx b/frontend/providers/dbprovider/src/components/Icon/index.tsx index 75eabab5a78..9a0304e689a 100644 --- 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 index 57216b1bdd4..009b4559161 100644 --- 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 = ({ ({t('Perday')}) - {priceList.map((item) => ( + {priceList.map((item, index) => ( - {t(item.label)}: + + {t(item.label)} + {index === priceList.length - 1 && ( + +
+ +
+ + )} + : + {item.value}