diff --git a/frontend/providers/costcenter/public/locales/en/common.json b/frontend/providers/costcenter/public/locales/en/common.json index 322c365acc4..e783eda3c00 100644 --- a/frontend/providers/costcenter/public/locales/en/common.json +++ b/frontend/providers/costcenter/public/locales/en/common.json @@ -161,5 +161,6 @@ "All APP": "all", "APP Type": "App type", "Details": "Details", - "Handle": "Handle" + "Handle": "Handle", + "currencyUnit": "Currency Unit" } \ No newline at end of file diff --git a/frontend/providers/costcenter/public/locales/zh/common.json b/frontend/providers/costcenter/public/locales/zh/common.json index 47a9bf2d055..0eac0499f0c 100644 --- a/frontend/providers/costcenter/public/locales/zh/common.json +++ b/frontend/providers/costcenter/public/locales/zh/common.json @@ -161,5 +161,6 @@ "All APP": "所有应用", "APP Type": "应用类型", "Details": "详情", - "Handle": "操作" + "Handle": "操作", + "currencyUnit": "金额单位" } \ No newline at end of file diff --git a/frontend/providers/costcenter/src/components/CurrencySymbol.tsx b/frontend/providers/costcenter/src/components/CurrencySymbol.tsx index 740d97b0afd..8b4b9b52322 100644 --- a/frontend/providers/costcenter/src/components/CurrencySymbol.tsx +++ b/frontend/providers/costcenter/src/components/CurrencySymbol.tsx @@ -1,4 +1,5 @@ import { Text, Icon, IconProps, TextProps } from '@chakra-ui/react'; + export default function CurrencySymbol({ type = 'shellCoin', ...props @@ -7,12 +8,29 @@ export default function CurrencySymbol({ } & IconProps & TextProps) { return type === 'shellCoin' ? ( - + + + + + + + + ) : type === 'cny' ? ( diff --git a/frontend/providers/costcenter/src/components/billing/billingTable.tsx b/frontend/providers/costcenter/src/components/billing/billingTable.tsx index 4e74530baa0..6ffdd50ed9a 100644 --- a/frontend/providers/costcenter/src/components/billing/billingTable.tsx +++ b/frontend/providers/costcenter/src/components/billing/billingTable.tsx @@ -35,8 +35,9 @@ import { useMemo } from 'react'; import { enableGpu } from '@/service/enabled'; export function CommonBillingTable({ data, + isOverview = false, ...styles -}: { data: BillingItem[] } & TableContainerProps) { +}: { data: BillingItem[]; isOverview?: boolean } & TableContainerProps) { const { t } = useTranslation(); const gpuEnabled = useEnvStore((state) => state.gpuEnabled); const currency = useEnvStore((s) => s.currency); @@ -47,7 +48,11 @@ export function CommonBillingTable({ return ( {t(header.id)} - {!!needCurrency && } + {!!needCurrency && ( + + () + + )} ); }; @@ -96,41 +101,41 @@ export function CommonBillingTable({ }), columnHelper.accessor((row) => row.costs.cpu, { id: TableHeaderID.CPU, - header: customTh(true), + header: customTh(), cell: customCell() }), columnHelper.accessor((row) => row.costs.memory, { id: TableHeaderID.Memory, - header: customTh(true), + header: customTh(), cell: customCell() }), columnHelper.accessor((row) => row.costs.network, { id: TableHeaderID.Network, - header: customTh(true), + header: customTh(), cell: customCell() }), columnHelper.accessor((row) => row.costs.storage, { id: TableHeaderID.Storage, - header: customTh(true), + header: customTh(), cell: customCell() }), columnHelper.accessor((row) => row.costs.port, { id: TableHeaderID.Port, - header: customTh(true), + header: customTh(), cell: customCell() }), ...(gpuEnabled ? [ columnHelper.accessor((row) => row.costs.gpu, { id: TableHeaderID.GPU, - header: customTh(true), + header: customTh(), cell: customCell() }) ] : []), columnHelper.accessor((row) => row.amount, { id: TableHeaderID.TotalAmount, - header: customTh(true), + header: customTh(!isOverview), cell: customCell(true) }), columnHelper.display({ @@ -176,7 +181,11 @@ export function TransferBillingTable({ data }: { data: BillingItem[] }) { return ( {t(header.id)} - {!!needCurrency && } + {!!needCurrency && ( + + () + + )} ); }; @@ -209,7 +218,7 @@ export function TransferBillingTable({ data }: { data: BillingItem[] }) { }), columnHelper.accessor((row) => row.appType, { id: TableHeaderID.APPType, - header: customTh(true), + header: customTh(), cell(props) { const item = props.row.original; return ( @@ -243,7 +252,7 @@ export function TransferBillingTable({ data }: { data: BillingItem[] }) { } }), columnHelper.accessor((row) => row.amount, { - header: customTh(), + header: customTh(true), id: TableHeaderID.TotalAmount, cell(props) { const original = props.row.original; @@ -289,7 +298,11 @@ export function BillingDetailsTable({ return ( {t(header.id)} - {!!needCurrency && } + {!!needCurrency && ( + + () + + )} ); }; @@ -306,34 +319,34 @@ export function BillingDetailsTable({ }), columnHelper.accessor((row) => row.costs.cpu, { id: TableHeaderID.CPU, - header: customTh(true), + header: customTh(), cell: customCell() }), columnHelper.accessor((row) => row.costs.memory, { id: TableHeaderID.Memory, - header: customTh(true), + header: customTh(), cell: customCell() }), columnHelper.accessor((row) => row.costs.network, { id: TableHeaderID.Network, - header: customTh(true), + header: customTh(), cell: customCell() }), columnHelper.accessor((row) => row.costs.storage, { id: TableHeaderID.Storage, - header: customTh(true), + header: customTh(), cell: customCell() }), columnHelper.accessor((row) => row.costs.port, { id: TableHeaderID.Port, - header: customTh(true), + header: customTh(), cell: customCell() }), ...(gpuEnabled ? [ columnHelper.accessor((row) => row.costs.gpu, { id: TableHeaderID.GPU, - header: customTh(true), + header: customTh(), cell: customCell() }) ] diff --git a/frontend/providers/costcenter/src/components/cost_overview/buget.tsx b/frontend/providers/costcenter/src/components/cost_overview/buget.tsx index c53d08ad727..e196ca32767 100644 --- a/frontend/providers/costcenter/src/components/cost_overview/buget.tsx +++ b/frontend/providers/costcenter/src/components/cost_overview/buget.tsx @@ -1,4 +1,4 @@ -import { Flex, Text, Heading, Img } from '@chakra-ui/react'; +import { Flex, Text, Heading, Img, VStack, HStack } from '@chakra-ui/react'; import { Card, CardBody } from '@chakra-ui/react'; import down_icon from '@/assert/ic_round-trending-down.svg'; import up_icon from '@/assert/ic_round-trending-up.svg'; @@ -60,12 +60,12 @@ export function Buget() { {t(v.title)} - - + + {displayMoney(v.value)} - + ))} diff --git a/frontend/providers/costcenter/src/components/cost_overview/components/RechargeModal.tsx b/frontend/providers/costcenter/src/components/cost_overview/components/RechargeModal.tsx index 860dbbfda51..347702a48e9 100644 --- a/frontend/providers/costcenter/src/components/cost_overview/components/RechargeModal.tsx +++ b/frontend/providers/costcenter/src/components/cost_overview/components/RechargeModal.tsx @@ -168,7 +168,7 @@ const BonusBox = (props: { {t('Bonus')} {props.bouns} - + {props.amount} @@ -357,7 +357,7 @@ const RechargeModal = forwardRef( {t('Balance')} - + {formatMoney(balance).toFixed(2)} @@ -404,7 +404,7 @@ const RechargeModal = forwardRef( variant={'unstyled'} onChange={(str, v) => (str.trim() ? setAmount(v) : setAmount(0))} > - + diff --git a/frontend/providers/costcenter/src/components/cost_overview/components/pieChart.tsx b/frontend/providers/costcenter/src/components/cost_overview/components/pieChart.tsx index 1fc05338257..756f3a851ff 100644 --- a/frontend/providers/costcenter/src/components/cost_overview/components/pieChart.tsx +++ b/frontend/providers/costcenter/src/components/cost_overview/components/pieChart.tsx @@ -109,11 +109,17 @@ export default function CostChart({ data }: { data: BillingData['status']['deduc type: 'pie', radius: [publicOption.radius[0], publicOption.radius[0]], center: publicOption.center, + selected: true, label: { position: 'center', show: true, formatter: function (params: any) { - return amount.toFixed(2) + `\n${t('Expenditure')}`; + let result = amount.toFixed(2) + `\n${t('Expenditure')}`; + if (result) return result; + else return ' '; + }, + emphasis: { + label: true }, fontSize: 16, textStyle: { @@ -124,7 +130,7 @@ export default function CostChart({ data }: { data: BillingData['status']['deduc label: { show: false }, - scale: 0 + scale: false }, encode: { itemName: 'name', diff --git a/frontend/providers/costcenter/src/components/cost_overview/components/user.tsx b/frontend/providers/costcenter/src/components/cost_overview/components/user.tsx index a5d4a470bf9..c7719bc4365 100644 --- a/frontend/providers/costcenter/src/components/cost_overview/components/user.tsx +++ b/frontend/providers/costcenter/src/components/cost_overview/components/user.tsx @@ -110,8 +110,14 @@ export default memo(function UserCard() { {t('Balance')} - - + + {displayMoney(formatMoney(balance))} diff --git a/frontend/providers/costcenter/src/components/valuation/predictCard.tsx b/frontend/providers/costcenter/src/components/valuation/predictCard.tsx index c9b89db729b..775afbcb273 100644 --- a/frontend/providers/costcenter/src/components/valuation/predictCard.tsx +++ b/frontend/providers/costcenter/src/components/valuation/predictCard.tsx @@ -4,7 +4,6 @@ import { displayMoney, formatMoney } from '@/utils/format'; import { Box, Flex, Stack, Text, filter } from '@chakra-ui/react'; import { useMemo } from 'react'; import { useTranslation } from 'react-i18next'; -import CurrencySymbol from '../CurrencySymbol'; import { END_TIME, valuationMap } from '@/constants/payment'; import useBillingData from '@/hooks/useBillingData'; import { BillingType, Costs } from '@/types'; @@ -88,7 +87,6 @@ export default function PredictCard() { {t(item.name)} - {item.cost} diff --git a/frontend/providers/costcenter/src/pages/cost_overview/index.tsx b/frontend/providers/costcenter/src/pages/cost_overview/index.tsx index 40e6db1fc4e..b9a9889ed31 100644 --- a/frontend/providers/costcenter/src/pages/cost_overview/index.tsx +++ b/frontend/providers/costcenter/src/pages/cost_overview/index.tsx @@ -1,7 +1,7 @@ import bar_icon from '@/assert/bar_chart_4_bars_black.svg'; import SelectRange from '@/components/billing/selectDateRange'; import useNotEnough from '@/hooks/useNotEnough'; -import { Box, Flex, Heading, Img, useToast } from '@chakra-ui/react'; +import { Box, Flex, Heading, HStack, Img, Text, useToast } from '@chakra-ui/react'; import { useTranslation } from 'next-i18next'; import { serverSideTranslations } from 'next-i18next/serverSideTranslations'; import { MutableRefObject, createContext, useEffect, useRef } from 'react'; @@ -16,11 +16,15 @@ import useOverviewStore from '@/stores/overview'; import { CommonBillingTable } from '@/components/billing/billingTable'; import { QueryClient } from '@tanstack/react-query'; import request from '@/service/request'; +import CurrencySymbol from '@/components/CurrencySymbol'; +import useEnvStore from '@/stores/env'; + const getProperties = () => request.post('/api/billing/propertiesUsedAmount'); export const RechargeContext = createContext<{ rechargeRef: MutableRefObject | null }>({ rechargeRef: null }); + function CostOverview() { const { t } = useTranslation(); const setRecharge = useOverviewStore((s) => s.setRecharge); @@ -58,6 +62,7 @@ function CostOverview() { const billingItems = data?.data?.status.item.filter((v) => v.type === 0) || []; const totast = useToast(); const rechargeRef = useRef(); + const currency = useEnvStore((s) => s.currency); return ( @@ -92,10 +97,16 @@ function CostOverview() { - - {t('Recent Transactions')} - - + + + {t('Recent Transactions')} + + + ({t('currencyUnit')}:{' '} + ) + + + {(isInitialLoading || billingItems.length === 0) && ( diff --git a/frontend/providers/costcenter/src/pages/valuation/index.tsx b/frontend/providers/costcenter/src/pages/valuation/index.tsx index 3969e970eef..3652982e2c9 100644 --- a/frontend/providers/costcenter/src/pages/valuation/index.tsx +++ b/frontend/providers/costcenter/src/pages/valuation/index.tsx @@ -124,13 +124,14 @@ function CycleMenu({ ); } + const getValuation = () => request>('/api/properties'); + function Valuation() { const { t } = useTranslation(); const gpuEnabled = useEnvStore((state) => state.gpuEnabled); const [cycleIdx, setCycleIdx] = useState(0); - const currency = useEnvStore((s) => s.currency); const { data: _data } = useQuery(['valuation'], getValuation); const data = _data?.data?.properties @@ -176,6 +177,7 @@ function Valuation() { }) ?.sort((a, b) => (a.name > b.name ? 1 : -1)) || [] : []; + const currency = useEnvStore((s) => s.currency); return ( - - - {t('Next month cost estimation')}({t('Predict Detail')}) + + + {t('Next month cost estimation')} + ({t('Predict Detail')}) + + + ( {t('Unit')} )