fix(frontend):fix desktop & gpu

labring · Dec 27, 2024 · 858752d · 858752d
1 parent c694cd7
commit 858752d
Show file tree

Hide file tree

Showing 19 changed files with 227 additions and 170 deletions.
diff --git a/frontend/desktop/src/components/account/AccountCenter/index.tsx b/frontend/desktop/src/components/account/AccountCenter/index.tsx
@@ -263,7 +263,7 @@ export default function Index(props: Omit<IconButtonProps, 'aria-label'>) {
                       }
                     />
                   )}
-                  {conf.authConfig?.idp.sms.enabled && (
+                  {conf.authConfig?.idp.sms.enabled && conf.authConfig.idp.sms.ali.enabled && (
                     <ConfigItem
                       LeftElement={<Text>{t('common:phone')}</Text>}
                       RightElement={
@@ -299,40 +299,42 @@ export default function Index(props: Omit<IconButtonProps, 'aria-label'>) {
                       }
                     />
                   )}
-                  <ConfigItem
-                    LeftElement={<Text>{t('common:email')}</Text>}
-                    RightElement={
-                      <>
-                        <Text>
-                          {providerState.EMAIL.isBinding
-                            ? providerState.EMAIL.id.replace(/(\d{3})\d+(\d{4})/, '$1****$2')
-                            : t('common:unbound')}
-                        </Text>
-                        <Flex gap={'5px'}>
-                          <BindingModifyButton
-                            modifyBehavior={
-                              providerState.EMAIL.isBinding
-                                ? BINDING_STATE_MODIFY_BEHAVIOR.CHANGE_BINDING
-                                : BINDING_STATE_MODIFY_BEHAVIOR.BINDING
-                            }
-                            onClick={() => {
-                              providerState.EMAIL.isBinding
-                                ? setPageState(PageState.EMAIL_CHANGE_BIND)
-                                : setPageState(PageState.EMAIL_BIND);
-                            }}
-                          />
-                          {providerState.EMAIL.isBinding && providerState.total > 1 && (
+                  {conf.authConfig?.idp.sms.enabled && conf.authConfig.idp.sms.email.enabled && (
+                    <ConfigItem
+                      LeftElement={<Text>{t('common:email')}</Text>}
+                      RightElement={
+                        <>
+                          <Text>
+                            {providerState.EMAIL.isBinding
+                              ? providerState.EMAIL.id.replace(/(\d{3})\d+(\d{4})/, '$1****$2')
+                              : t('common:unbound')}
+                          </Text>
+                          <Flex gap={'5px'}>
                             <BindingModifyButton
-                              modifyBehavior={BINDING_STATE_MODIFY_BEHAVIOR.UNBINDING}
+                              modifyBehavior={
+                                providerState.EMAIL.isBinding
+                                  ? BINDING_STATE_MODIFY_BEHAVIOR.CHANGE_BINDING
+                                  : BINDING_STATE_MODIFY_BEHAVIOR.BINDING
+                              }
                               onClick={() => {
-                                setPageState(PageState.EMAIL_UNBIND);
+                                providerState.EMAIL.isBinding
+                                  ? setPageState(PageState.EMAIL_CHANGE_BIND)
+                                  : setPageState(PageState.EMAIL_BIND);
                               }}
                             />
-                          )}
-                        </Flex>
-                      </>
-                    }
-                  />
+                            {providerState.EMAIL.isBinding && providerState.total > 1 && (
+                              <BindingModifyButton
+                                modifyBehavior={BINDING_STATE_MODIFY_BEHAVIOR.UNBINDING}
+                                onClick={() => {
+                                  setPageState(PageState.EMAIL_UNBIND);
+                                }}
+                              />
+                            )}
+                          </Flex>
+                        </>
+                      }
+                    />
+                  )}
                   <AuthModifyList
                     avatarUrl={infoData.data.avatarUri}
                     isOnlyOne={providerState.total === 1}

diff --git a/frontend/desktop/src/components/signin/index.tsx b/frontend/desktop/src/components/signin/index.tsx
@@ -31,11 +31,8 @@ export default function SigninComponent() {
   const conf = useConfigStore();
   const hasBaiduToken = conf.authConfig?.hasBaiduToken;
   const needPassword = conf.authConfig?.idp.password?.enabled;
-  const needSms = conf.authConfig?.idp.sms?.enabled;
-  const needTabsCount =
-    0 +
-    (conf.authConfig?.idp.password?.enabled ? 1 : 0) +
-    (conf.authConfig?.idp.sms?.enabled ? 1 : 0);
+  const needPhone = conf.authConfig?.idp.sms?.enabled && conf.authConfig.idp.sms.ali.enabled;
+  const needTabsCount = 0 + (conf.authConfig?.idp.password?.enabled ? 1 : 0) + (needPhone ? 1 : 0);
   const disclosure = useDisclosure();
   const { t, i18n } = useTranslation();
   const [tabIndex, setTabIndex] = useState<LoginType>(LoginType.NONE);
@@ -113,8 +110,8 @@ export default function SigninComponent() {
   ]);
 
   useEffect(() => {
-    setTabIndex(needSms ? LoginType.SMS : needPassword ? LoginType.PASSWORD : LoginType.NONE);
-  }, [needPassword, needSms]);
+    setTabIndex(needPhone ? LoginType.SMS : needPassword ? LoginType.PASSWORD : LoginType.NONE);
+  }, [needPassword, needPhone]);
 
   const LoginComponent = useMemo(
     () => (tabIndex !== LoginType.NONE ? loginConfig[tabIndex].component : null),

diff --git a/frontend/desktop/src/pages/api/platform/getAuthConfig.ts b/frontend/desktop/src/pages/api/platform/getAuthConfig.ts
@@ -29,7 +29,13 @@ function genResAuthClientConfig(conf: AuthConfigType) {
         enabled: !!conf.idp.password?.enabled
       },
       sms: {
-        enabled: !!conf.idp.sms?.ali?.enabled
+        enabled: !!conf.idp.sms?.enabled,
+        ali: {
+          enabled: !!conf.idp.sms?.ali?.enabled
+        },
+        email: {
+          enabled: !!conf.idp.sms?.email?.enabled
+        }
       },
       github: {
         enabled: !!conf.idp.github?.enabled,

diff --git a/frontend/desktop/src/types/system.ts b/frontend/desktop/src/types/system.ts
@@ -165,7 +165,19 @@ export type AuthClientConfigType = DeepRequired<
       'cloudVitrualMachineUrl'
     ]
   >
->;
+> & {
+  idp: {
+    sms: {
+      enabled: boolean;
+      ali: {
+        enabled: boolean;
+      };
+      email: {
+        enabled: boolean;
+      };
+    };
+  };
+};
 
 export type JwtConfigType = {
   internal?: string;
@@ -277,7 +289,13 @@ export const DefaultAuthClientConfig: AuthClientConfigType = {
       proxyAddress: ''
     },
     sms: {
-      enabled: false
+      enabled: false,
+      ali: {
+        enabled: false
+      },
+      email: {
+        enabled: false
+      }
     },
     oauth2: {
       enabled: false,

diff --git a/frontend/providers/costcenter/public/locales/en/common.json b/frontend/providers/costcenter/public/locales/en/common.json
@@ -24,6 +24,7 @@
   "Select Amount": "Select Amount",
   "Port Amount": "Port Amount",
   "CPU Amount": "CPU Amount",
+  "GPU Amount": "GPU Amount",
   "Storage Amount": "Storage Amount",
   "Memory Amount": "Memory Amount",
   "Network Amount": "Network Amount",
@@ -49,6 +50,7 @@
   "Network": "Network",
   "Storage": "Storage",
   "cpu": "CPU",
+  "gpu": "GPU",
   "memory": "Memory",
   "network": "Network",
   "storage": "Storage",

diff --git a/frontend/providers/costcenter/public/locales/zh/common.json b/frontend/providers/costcenter/public/locales/zh/common.json
@@ -43,11 +43,13 @@
   "Storage": "存储卷",
   "Network": "网络",
   "CPU Amount": "CPU金额",
+  "GPU Amount": "GPU金额",
   "Port Amount": "端口金额",
   "Storage Amount": "存储金额",
   "Memory Amount": "内存金额",
   "Network Amount": "网络金额",
   "cpu": "CPU",
+  "gpu": "GPU",
   "memory": "内存",
   "storage": "存储卷",
   "network": "网络",

diff --git a/frontend/providers/costcenter/src/components/RechargeModal.tsx b/frontend/providers/costcenter/src/components/RechargeModal.tsx
@@ -77,7 +77,7 @@ function WechatPayment(props: { complete: number; codeURL?: string; tradeNO?: st
       px="37px"
       justify={'center'}
       align={'center'}
-      mt={'135px'}
+      m={'auto'}
       display={'flex'}
       justifyContent={'center'}
       alignItems={'center'}
@@ -411,7 +411,12 @@ const RechargeModal = forwardRef(
     return (
       <Modal isOpen={isOpen} onClose={onClose}>
         <ModalOverlay />
-        <ModalContent maxW="530px" minH={'495'} display={'flex'} flexDir={'column'}>
+        <ModalContent
+          maxW="530px"
+          minH={complete === 0 ? 'unset' : '495px'}
+          display={'flex'}
+          flexDir={'column'}
+        >
           {!detail ? (
             complete === 0 ? (
               <>
@@ -447,35 +452,37 @@ const RechargeModal = forwardRef(
                       {formatMoney(balance).toFixed(2)}
                     </Text>
                   </Flex>
-                  <Flex direction={'column'} mb={'20px'}>
+                  <Flex direction={'column'} mb={'20px'} width={'full'}>
                     <Flex mb={'36px'} justify={'space-between'}>
                       <Text color="grayModern.600" fontWeight={'normal'}>
                         {t('Select Amount')}
                       </Text>
-                      <Flex align={'center'}>
-                        <GiftIcon boxSize={'16px'} mr={'8px'}></GiftIcon>
-                        <Text
-                          mr={'4px'}
-                          color={'grayModern.900'}
-                          fontSize={'14px'}
-                          fontWeight={500}
-                        >
-                          {t('first_recharge_title')}
-                        </Text>
-                        <MyTooltip
-                          px={'12px'}
-                          py={'8px'}
-                          minW={'unset'}
-                          width={'auto'}
-                          label={
-                            <Text fontSize={'12px'} fontWeight={400}>
-                              {t('first_recharge_tips')}
-                            </Text>
-                          }
-                        >
-                          <HelpIcon boxSize={'16px'}></HelpIcon>
-                        </MyTooltip>
-                      </Flex>
+                      {specialBonus && specialBonus.length > 0 && (
+                        <Flex align={'center'}>
+                          <GiftIcon boxSize={'16px'} mr={'8px'}></GiftIcon>
+                          <Text
+                            mr={'4px'}
+                            color={'grayModern.900'}
+                            fontSize={'14px'}
+                            fontWeight={500}
+                          >
+                            {t('first_recharge_title')}
+                          </Text>
+                          <MyTooltip
+                            px={'12px'}
+                            py={'8px'}
+                            minW={'unset'}
+                            width={'auto'}
+                            label={
+                              <Text fontSize={'12px'} fontWeight={400}>
+                                {t('first_recharge_tips')}
+                              </Text>
+                            }
+                          >
+                            <HelpIcon boxSize={'16px'}></HelpIcon>
+                          </MyTooltip>
+                        </Flex>
+                      )}
                     </Flex>
                     <Flex wrap={'wrap'} gap={'16px'}>
                       {steps.map((amount, index) => (

diff --git a/frontend/providers/costcenter/src/components/billing/AmountDisplay.tsx b/frontend/providers/costcenter/src/components/billing/AmountDisplay.tsx
@@ -1,15 +1,17 @@
-import { useQuery } from '@tanstack/react-query';
+import CurrencySymbol from '@/components/CurrencySymbol';
 import request from '@/service/request';
+import useBillingStore from '@/stores/billing';
+import useEnvStore from '@/stores/env';
+import useOverviewStore from '@/stores/overview';
 import { formatMoney } from '@/utils/format';
+import { Box, Flex, Text } from '@chakra-ui/react';
+import { useQuery } from '@tanstack/react-query';
 import { useTranslation } from 'next-i18next';
-import { Text, Box, Flex } from '@chakra-ui/react';
-import CurrencySymbol from '@/components/CurrencySymbol';
-import useOverviewStore from '@/stores/overview';
-import useBillingStore from '@/stores/billing';
 import { useMemo } from 'react';
 
 export default function AmountDisplay({ onlyOut = false }: { onlyOut?: boolean }) {
   const { startTime, endTime } = useOverviewStore();
+  const { currency } = useEnvStore();
   const { getNamespace, getAppType, getRegion, getAppName } = useBillingStore();
   const rechargeQueryBody = {
     startTime,
@@ -60,7 +62,7 @@ export default function AmountDisplay({ onlyOut = false }: { onlyOut?: boolean }
         <Flex align={'center'} gap={'8px'} fontSize={'12px'} key={item.title}>
           <Box w="8px" h="8px" bgColor={item.bgColor} borderRadius={'2px'} />
           <Text>{t(item.title)}: </Text>
-          <CurrencySymbol fontSize={'14px'} />
+          <CurrencySymbol fontSize={'14px'} type={currency} />
           <Text>{formatMoney(item.value).toFixed(2)}</Text>
         </Flex>
       ))}

diff --git a/frontend/providers/costcenter/src/components/cost_overview/components/pieChart.tsx b/frontend/providers/costcenter/src/components/cost_overview/components/pieChart.tsx
@@ -1,4 +1,5 @@
 import { resourceType } from '@/constants/billing';
+import useEnvStore from '@/stores/env';
 import { formatMoney } from '@/utils/format';
 import ReactEChartsCore from 'echarts-for-react/lib/core';
 import { PieChart } from 'echarts/charts';
@@ -20,9 +21,10 @@ echarts.use([
 
 export default function CostChart({ data }: { data: number[]; appName: string }) {
   const { t } = useTranslation();
-
+  const { gpuEnabled } = useEnvStore();
   const radius = ['50%', '90%'];
-  const result = [0, 1, 2, 3, 4].map((_, i) => {
+
+  const result = (gpuEnabled ? [0, 1, 2, 3, 4, 5] : [0, 1, 2, 3, 4]).map((_, i) => {
     return [t(resourceType[i]), formatMoney(data[i]).toFixed(2)];
   });
   const title = t('All APP', { ns: 'applist' }) + '\n' + t('Cost Form');

diff --git a/frontend/providers/costcenter/src/components/cost_overview/cost.tsx b/frontend/providers/costcenter/src/components/cost_overview/cost.tsx
@@ -1,15 +1,15 @@
-import { Box, Flex, HStack, Text } from '@chakra-ui/react';
-import { useTranslation } from 'next-i18next';
-import dynamic from 'next/dynamic';
 import Notfound from '@/components/notFound';
-import { useQuery } from '@tanstack/react-query';
-import useOverviewStore from '@/stores/overview';
 import request from '@/service/request';
-import { ApiResp, PropertiesCost } from '@/types';
 import useBillingStore from '@/stores/billing';
+import useOverviewStore from '@/stores/overview';
+import { PropertiesCost } from '@/types';
+import { Box, Flex, HStack, Text } from '@chakra-ui/react';
+import { useQuery } from '@tanstack/react-query';
+import { useTranslation } from 'next-i18next';
+import dynamic from 'next/dynamic';
+import SelectRange from '../billing/selectDateRange';
 import AppNameMenu from '../menu/AppNameMenu';
 import AppTypeMenu from '../menu/AppTypeMenu';
-import SelectRange from '../billing/selectDateRange';
 const Chart = dynamic(() => import('./components/pieChart'), {
   ssr: false
 });
@@ -18,7 +18,6 @@ export const Cost = function Cost() {
   const startTime = useOverviewStore((state) => state.startTime);
   const endTime = useOverviewStore((state) => state.endTime);
   const { getNamespace, getAppName, getAppType, getRegion } = useBillingStore();
-
   const query = {
     namespace: getNamespace()?.[0] || '',
     appType: getAppType(),
@@ -30,22 +29,11 @@ export const Cost = function Cost() {
   const { data, isInitialLoading, isFetching } = useQuery({
     queryKey: ['billing', 'properties', 'costs', query],
     queryFn: () => {
-      return request.post<ApiResp<PropertiesCost>>('/api/billing/costDistrube', query);
+      return request.post<PropertiesCost>('/api/billing/costDistrube', query);
     },
     select(data) {
       const _data = data.data;
-      return [
-        // @ts-ignore
-        _data['0'],
-        // @ts-ignore
-        _data['1'],
-        // @ts-ignore
-        _data['2'],
-        // @ts-ignore
-        _data['3'],
-        // @ts-ignore
-        _data['4']
-      ];
+      return [_data['0'], _data['1'], _data['2'], _data['3'], _data['4'], _data['5']];
     }
   });
   return (
@@ -83,7 +71,7 @@ export const Cost = function Cost() {
           <Notfound></Notfound>
         </Flex>
       ) : (
-        <Chart data={data || [0, 0, 0, 0, 0]} appName={getAppName()}></Chart>
+        <Chart data={data || [0, 0, 0, 0, 0, 0]} appName={getAppName()}></Chart>
       )}
     </Flex>
   );