style: switch sealos coin (labring#4509)

cuisongliu · Feb 1, 2024 · 53631c6 · 53631c6
1 parent 5492617
commit 53631c6
Show file tree

Hide file tree

Showing 11 changed files with 116 additions and 48 deletions.
diff --git 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"
 }
diff --git 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": "金额单位"
 }
diff --git 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' ? (
-    <Icon h="auto" {...props} viewBox="0 0 43 43">
+    <Icon w={'16px'} h="auto" fill="none" {...props} viewBox="0 0 17 16">
+      <circle cx="8.5" cy="8" r="7.728" fill="#E8E8E8" stroke="#37383A" strokeWidth="0.544" />
+      <circle cx="8.49995" cy="8.00002" r="6.98928" fill="#CFCFCF" />
       <path
-        fill="currentColor"
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M38.8452 16.3383C38.8452 16.3383 38.169 13.0791 34.6177 12.5018C34.6177 12.5018 32.91 5.22138 26.476 8.01336C26.476 8.01336 21.7775 1.34481 16.7833 8.01336C16.7833 8.01336 10.8267 4.86984 8.35511 12.513C8.35511 12.513 4.03522 12.6233 4.00011 18.5272C3.96499 24.4311 12.4728 30.8168 13.6867 31.3741C13.6867 31.3741 11.0158 34.2719 14.2876 36.284C18.8172 38.6577 27.3756 37.7936 29.4606 35.9326C30.7532 34.7789 30.6523 33.0064 29.4606 31.5498C29.4556 31.5548 40.4202 25.1038 38.8452 16.3383ZM31.6228 11.4841C29.9736 8.80397 26.7453 10.5751 26.7453 10.5751C27.9505 20.3212 24.1256 29.8479 24.1256 29.8479C27.7512 28.7132 33.6121 14.7169 31.6228 11.4841ZM21.1951 7.66792C21.1951 7.66792 18.5641 7.83387 18.1203 11.4413C17.6764 15.0488 18.7299 29.0557 21.5427 30.0673C21.5427 30.0673 23.5266 30.5865 24.8902 18.319C26.6924 6.40218 21.1951 7.66792 21.1951 7.66792ZM16.2936 10.5751C16.2936 10.5751 13.488 8.61467 11.4786 11.4841C9.49465 14.7169 15.3556 28.7132 18.9759 29.8479C18.9759 29.8479 15.2143 21.3388 16.2936 10.5751ZM8.87726 14.9454C8.87726 14.9454 6.13705 14.9454 6.43049 18.7633C6.79949 23.5643 12.9309 28.6588 15.2143 29.5044C15.2089 29.5044 10.0763 22.326 8.87726 14.9454ZM15.1097 34.6383C15.8744 35.9813 24.6742 36.3866 28.102 34.8719C28.102 34.8719 29.1783 33.7787 27.532 31.5994C27.4731 31.5216 26.8769 31.5791 26.5874 31.5627C26.2978 31.5463 26.0133 31.4758 25.6763 31.4068C25.6763 31.4068 24.6168 32.1662 22.9437 31.5994C22.9437 31.5994 21.7614 32.2601 20.3823 31.5994C20.3823 31.5994 18.6756 32.1821 17.6497 31.4068C17.6497 31.4068 16.9291 31.6032 15.8719 31.4068C15.8719 31.4068 14.3671 33.3342 15.1097 34.6383ZM34.2051 14.9533C32.8914 23.1395 27.9505 29.5113 27.9505 29.5113C30.9382 28.8784 36.0244 22.5811 36.6816 18.7633C37.3388 14.9454 34.2051 14.9533 34.2051 14.9533Z"
+        d="M8.50005 14.9893C12.3601 14.9893 15.4893 11.8601 15.4893 8C15.4893 6.41556 14.9621 4.95425 14.0735 3.78196C13.6263 3.71885 13.1692 3.68622 12.7045 3.68622C7.6875 3.68622 3.55904 7.49061 3.04662 12.3719C4.32758 13.9677 6.29451 14.9893 8.50005 14.9893Z"
+        fill="#BEBEBE"
+      />
+      <circle cx="8.50008" cy="7.99998" r="5.42039" fill="#828386" />
+      <path
+        d="M6.26651 7.75498C6.71617 8.41242 7.64649 8.35407 7.64649 8.35407C7.41391 8.12844 7.26274 7.92226 7.24723 7.33484C7.23172 6.74743 6.89836 6.59182 6.89836 6.59182C7.49532 6.21447 7.28212 5.806 7.26274 5.35085C7.25111 5.06687 7.41779 4.8568 7.54959 4.73621C6.79101 4.85024 6.10557 5.25371 5.63615 5.8625C5.16674 6.47129 4.94958 7.23842 5.02995 8.00395C5.08422 7.85224 5.85174 7.14812 6.26651 7.75498Z"
+        fill="#E8E8E8"
+      />
+      <path
+        d="M11.7749 6.58407C11.7548 6.52013 11.7302 6.45773 11.7012 6.39734V6.39345C11.5659 6.11723 11.3416 5.89498 11.0647 5.76276C10.7877 5.63053 10.4744 5.59608 10.1755 5.66499C9.87661 5.7339 9.60967 5.90213 9.418 6.1424C9.22633 6.38266 9.12116 6.68087 9.11956 6.98865C9.11958 7.08544 9.12998 7.18196 9.15057 7.27652C9.15066 7.27781 9.15066 7.27911 9.15057 7.28041C9.15832 7.31931 9.16995 7.35821 9.18158 7.39711C9.25077 7.67116 9.26423 7.95638 9.22117 8.23575C9.1781 8.51513 9.07939 8.78294 8.93093 9.02319C8.78247 9.26344 8.5873 9.47122 8.35706 9.63411C8.12683 9.797 7.86626 9.91167 7.59089 9.97128C7.31553 10.0309 7.03102 10.0342 6.75435 9.98105C6.47768 9.92789 6.21452 9.81934 5.98057 9.66187C5.74662 9.5044 5.54669 9.30124 5.39269 9.06452C5.2387 8.8278 5.1338 8.56237 5.08427 8.28408C5.15432 8.76648 5.32453 9.22875 5.58388 9.64095C5.84324 10.0532 6.18596 10.4061 6.58986 10.6769C6.99375 10.9478 7.44983 11.1305 7.92855 11.2132C8.40727 11.296 8.89797 11.2769 9.36888 11.1572C9.83979 11.0376 10.2804 10.82 10.6622 10.5186C11.044 10.2173 11.3585 9.83875 11.5853 9.40765C11.8121 8.97655 11.9462 8.50246 11.9788 8.01606C12.0115 7.52966 11.942 7.0418 11.7749 6.58407Z"
+        fill="#E8E8E8"
+      />
+      <path
+        d="M11.1972 7.52155C11.1972 9.21671 9.8279 10.5909 8.13876 10.5909C7.24225 10.5909 6.43583 10.2038 5.87641 9.58704C5.9103 9.61299 5.94508 9.63798 5.98057 9.66187C6.21452 9.81934 6.47768 9.92789 6.75435 9.98105C7.03102 10.0342 7.31553 10.0309 7.59089 9.97128C7.86626 9.91167 8.12683 9.797 8.35706 9.63411C8.5873 9.47122 8.78247 9.26344 8.93093 9.02319C9.07939 8.78294 9.1781 8.51513 9.22117 8.23575C9.26423 7.95638 9.25077 7.67116 9.18158 7.39711C9.16995 7.35821 9.15832 7.31931 9.15057 7.28041C9.15066 7.27911 9.15066 7.27781 9.15057 7.27652C9.12998 7.18196 9.11958 7.08544 9.11956 6.98865C9.12116 6.68087 9.22633 6.38266 9.418 6.1424C9.60967 5.90213 9.87661 5.7339 10.1755 5.66499C10.2988 5.63656 10.4245 5.62568 10.5492 5.63204C10.9552 6.15298 11.1972 6.8089 11.1972 7.52155Z"
+        fill="#E8E8E8"
+      />
+      <path
+        d="M11.3335 2.79407L11.6527 3.367L12.2257 3.6862L11.6527 4.0054L11.3335 4.57833L11.0143 4.0054L10.4414 3.6862L11.0143 3.367L11.3335 2.79407Z"
+        fill="#F0F0F0"
       />
     </Icon>
   ) : type === 'cny' ? (

diff --git 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 (
           <Flex display={'flex'} alignItems={'center'}>
             <Text mr="4px">{t(header.id)}</Text>
-            {!!needCurrency && <CurrencySymbol type={currency} />}
+            {!!needCurrency && (
+              <Text>
+                (<CurrencySymbol type={currency} />)
+              </Text>
+            )}
           </Flex>
         );
       };
@@ -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 (
           <Flex display={'flex'} alignItems={'center'}>
             <Text mr="4px">{t(header.id)}</Text>
-            {!!needCurrency && <CurrencySymbol type={currency} />}
+            {!!needCurrency && (
+              <Text>
+                (<CurrencySymbol type={currency} />)
+              </Text>
+            )}
           </Flex>
         );
       };
@@ -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 (
           <Flex display={'flex'} alignItems={'center'}>
             <Text mr="4px">{t(header.id)}</Text>
-            {!!needCurrency && <CurrencySymbol type={currency} />}
+            {!!needCurrency && (
+              <Text>
+                (<CurrencySymbol type={currency} />)
+              </Text>
+            )}
           </Flex>
         );
       };
@@ -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
@@ -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() {
               <Text fontSize={'12px'} mt={'6px'}>
                 {t(v.title)}
               </Text>
-              <Flex mt="8px">
-                <CurrencySymbol w="16px" type={currency} />
+              <HStack mt="8px" gap={'6px'}>
+                <CurrencySymbol boxSize="16px" type={currency} />
                 <Text fontWeight="500" fontSize="16px" ml="4px">
                   {displayMoney(v.value)}
                 </Text>
-              </Flex>
+              </HStack>
             </CardBody>
           </Card>
         ))}

diff --git 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}
       </Text>
       <Flex align={'center'}>
-        <Currencysymbol w="24px" type={currency} />
+        <Currencysymbol boxSize="20px" type={currency} />
         <Text ml="4px" fontStyle="normal" fontWeight="500" fontSize="24px">
           {props.amount}
         </Text>
@@ -357,7 +357,7 @@ const RechargeModal = forwardRef(
                     <Text color="#7B838B" fontWeight={'normal'} mr={'20px'}>
                       {t('Balance')}
                     </Text>
-                    <Currencysymbol w="24px" type={currency} />
+                    <Currencysymbol boxSize="20px" type={currency} />
                     <Text ml="4px" color="#24282C" fontSize="24px" fontWeight={'medium'}>
                       {formatMoney(balance).toFixed(2)}
                     </Text>
@@ -404,7 +404,7 @@ const RechargeModal = forwardRef(
                       variant={'unstyled'}
                       onChange={(str, v) => (str.trim() ? setAmount(v) : setAmount(0))}
                     >
-                      <Currencysymbol w="16px" type={currency} />
+                      <Currencysymbol boxSize="12px" mr={'2px'} type={currency} />
                       <NumberInputField />
                       <NumberInputStepper>
                         <NumberIncrementStepper>

diff --git 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
@@ -110,8 +110,14 @@ export default memo(function UserCard() {
           <Box fontSize="12px" fontWeight="400" alignSelf={'center'} mt="6px !important">
             {t('Balance')}
           </Box>
-          <Flex fontSize="24px" fontWeight="500" alignSelf={'center'} mt="3px !important">
-            <CurrencySymbol color={'white'} w="20px" type={currency} />
+          <Flex
+            fontSize="24px"
+            fontWeight="500"
+            alignSelf={'center'}
+            mt="3px !important"
+            alignItems={'center'}
+          >
+            <CurrencySymbol color={'white'} boxSize="20px" type={currency} />
             <Text ml="6px">{displayMoney(formatMoney(balance))}</Text>
           </Flex>
           <Flex alignItems="center" alignSelf={'center'} gap="10px" mt={'20px !important'}>

diff --git 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() {
             <Text>{t(item.name)}</Text>
           </Flex>
           <Flex align={'center'}>
-            <CurrencySymbol w="14px" type={currency} mr="6px" color={'#5A646E'} />
             <Text>{item.cost}</Text>
           </Flex>
         </Flex>

diff --git 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<any> | 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<any>();
+  const currency = useEnvStore((s) => s.currency);
   return (
     <RechargeContext.Provider value={{ rechargeRef }}>
       <Flex h={'100%'}>
@@ -92,10 +97,16 @@ function CostOverview() {
             </Box>
             <Trend></Trend>
             <Flex direction={'column'} h={'0'} flex={[1, null, null, 'auto']}>
-              <Heading size={'sm'} mb={'36px'}>
-                {t('Recent Transactions')}
-              </Heading>
-              <CommonBillingTable data={billingItems} />
+              <HStack h={'auto'} gap={'12px'} mb={'36px'}>
+                <Heading fontWeight={'500'} size={'sm'} verticalAlign={'middle'} display={'flex'}>
+                  {t('Recent Transactions')}
+                </Heading>
+                <Text fontSize={'12px'}>
+                  ({t('currencyUnit')}:{' '}
+                  <CurrencySymbol type={currency} boxSize={'14px'} verticalAlign={'middle'} /> )
+                </Text>
+              </HStack>
+              <CommonBillingTable data={billingItems} isOverview={true} />
               {(isInitialLoading || billingItems.length === 0) && (
                 <Flex h="160px" justify={'center'} align={'center'}>
                   <NotFound></NotFound>