upadte CurrencySymbol

labring · Nov 20, 2024 · 0da2320 · 0da2320
1 parent ab5fcd6
commit 0da2320
Show file tree

Hide file tree

Showing 8 changed files with 103 additions and 64 deletions.
diff --git a/frontend/desktop/src/components/LangSelect/simple.tsx b/frontend/desktop/src/components/LangSelect/simple.tsx
@@ -1,11 +1,32 @@
+import { useConfigStore } from '@/stores/config';
 import { setCookie } from '@/utils/cookieUtils';
 import { Flex, FlexProps } from '@chakra-ui/react';
 import { useTranslation } from 'next-i18next';
+import { useEffect } from 'react';
 import { EVENT_NAME } from 'sealos-desktop-sdk';
 import { masterApp } from 'sealos-desktop-sdk/master';
 
 export default function LangSelectSimple(props: FlexProps) {
   const { t, i18n } = useTranslation();
+  const { layoutConfig } = useConfigStore();
+
+  useEffect(() => {
+    if (layoutConfig?.forcedLanguage && i18n?.language !== layoutConfig.forcedLanguage) {
+      masterApp?.sendMessageToAll({
+        apiName: 'event-bus',
+        eventName: EVENT_NAME.CHANGE_I18N,
+        data: {
+          currentLanguage: layoutConfig.forcedLanguage
+        }
+      });
+      setCookie('NEXT_LOCALE', layoutConfig.forcedLanguage, {
+        expires: 30,
+        sameSite: 'None',
+        secure: true
+      });
+      i18n?.changeLanguage(layoutConfig.forcedLanguage);
+    }
+  }, [layoutConfig?.forcedLanguage, i18n]);
 
   return (
     <Flex
@@ -20,21 +41,25 @@ export default function LangSelectSimple(props: FlexProps) {
       cursor={'pointer'}
       fontWeight={500}
       {...props}
-      onClick={() => {
-        masterApp?.sendMessageToAll({
-          apiName: 'event-bus',
-          eventName: EVENT_NAME.CHANGE_I18N,
-          data: {
-            currentLanguage: i18n?.language === 'en' ? 'zh' : 'en'
-          }
-        });
-        setCookie('NEXT_LOCALE', i18n?.language === 'en' ? 'zh' : 'en', {
-          expires: 30,
-          sameSite: 'None',
-          secure: true
-        });
-        i18n?.changeLanguage(i18n?.language === 'en' ? 'zh' : 'en');
-      }}
+      onClick={
+        layoutConfig?.forcedLanguage
+          ? undefined
+          : () => {
+              masterApp?.sendMessageToAll({
+                apiName: 'event-bus',
+                eventName: EVENT_NAME.CHANGE_I18N,
+                data: {
+                  currentLanguage: i18n?.language === 'en' ? 'zh' : 'en'
+                }
+              });
+              setCookie('NEXT_LOCALE', i18n?.language === 'en' ? 'zh' : 'en', {
+                expires: 30,
+                sameSite: 'None',
+                secure: true
+              });
+              i18n?.changeLanguage(i18n?.language === 'en' ? 'zh' : 'en');
+            }
+      }
     >
       {i18n?.language === 'en' ? 'En' : '中'}
     </Flex>

diff --git a/frontend/desktop/src/components/account/cost.tsx b/frontend/desktop/src/components/account/cost.tsx
@@ -16,15 +16,15 @@ import {
   Text,
   useBreakpointValue
 } from '@chakra-ui/react';
-import { MonitorIcon } from '@sealos/ui';
+import { CurrencySymbol, MonitorIcon } from '@sealos/ui';
 import { useQuery } from '@tanstack/react-query';
 import { Decimal } from 'decimal.js';
 import { useTranslation } from 'next-i18next';
 import { useMemo } from 'react';
 import CustomTooltip from '../AppDock/CustomTooltip';
 import { blurBackgroundStyles } from '../desktop_content';
 import Monitor from '../desktop_content/monitor';
-import { ClockIcon, DesktopSealosCoinIcon, HelpIcon, InfiniteIcon } from '../icons';
+import { ClockIcon, HelpIcon, InfiniteIcon } from '../icons';
 
 export default function Cost() {
   const { t } = useTranslation();
@@ -34,6 +34,9 @@ export default function Cost() {
   const { session } = useSessionStore();
   const user = session?.user;
   const isLargerThanXl = useBreakpointValue({ base: true, xl: false });
+  const currencySymbol = useConfigStore(
+    (state) => state.layoutConfig?.currencySymbol || 'shellCoin'
+  );
 
   const { data } = useQuery({
     queryKey: ['getAmount', { userId: user?.userCrUid }],
@@ -113,7 +116,7 @@ export default function Cost() {
               <Text fontSize={'20px'} color={'#7CE7FF'}>
                 {formatMoney(balance).toFixed(2)}
               </Text>
-              <DesktopSealosCoinIcon />
+              <CurrencySymbol type={currencySymbol} color={'white'} />
             </Flex>
           </Box>
           {rechargeEnabled && (
@@ -178,7 +181,7 @@ export default function Cost() {
               <Text mr={'4px'} ml={'auto'} color={'white'} fontSize={'14px'} fontWeight={700}>
                 {formatMoney(calculations.prevMonthAmount).toFixed(2)}
               </Text>
-              <DesktopSealosCoinIcon />
+              <CurrencySymbol type={currencySymbol} color={'white'} />
             </Flex>
             <Flex alignItems={'center'} px={'16px'} py={'18px'}>
               <Center
@@ -201,7 +204,7 @@ export default function Cost() {
               <Text mr={'4px'} ml={'auto'} color={'white'} fontSize={'14px'} fontWeight={700}>
                 {formatMoney(calculations.estimatedNextMonthAmount).toFixed(2)}
               </Text>
-              <DesktopSealosCoinIcon />
+              <CurrencySymbol type={currencySymbol} color={'white'} />
             </Flex>
           </Flex>
         )}

diff --git a/frontend/desktop/src/components/icons/index.tsx b/frontend/desktop/src/components/icons/index.tsx
@@ -170,45 +170,6 @@ export function ClockIcon(props: IconProps) {
   );
 }
 
-export function DesktopSealosCoinIcon(props: IconProps) {
-  return (
-    <Icon
-      xmlns="http://www.w3.org/2000/svg"
-      width="14px"
-      height="14px"
-      viewBox="0 0 14 14"
-      fill="none"
-      {...props}
-    >
-      <g style={{ mixBlendMode: 'hard-light' }}>
-        <circle cx="7" cy="7" r="6.762" fill="#E8E8E8" stroke="#37383A" strokeWidth="0.476" />
-        <circle cx="6.9999" cy="7.00002" r="6.11562" fill="#CFCFCF" />
-        <path
-          d="M6.99978 13.1156C10.3773 13.1156 13.1154 10.3776 13.1154 7.00002C13.1154 5.61364 12.6541 4.335 11.8766 3.30923C11.4852 3.25402 11.0853 3.22546 10.6787 3.22546C6.2888 3.22546 2.6764 6.55431 2.22803 10.8254C3.34887 12.2218 5.06993 13.1156 6.99978 13.1156Z"
-          fill="#BEBEBE"
-        />
-        <circle cx="7.00017" cy="6.99992" r="4.74284" fill="#828386" />
-        <path
-          d="M5.04555 6.78559C5.439 7.36085 6.25304 7.3098 6.25304 7.3098C6.04953 7.11237 5.91725 6.93196 5.90368 6.41797C5.89011 5.90398 5.59842 5.76783 5.59842 5.76783C6.12076 5.43765 5.93421 5.08024 5.91725 4.68198C5.90707 4.4335 6.05292 4.24969 6.16824 4.14417C5.50449 4.24395 4.90473 4.59698 4.49399 5.12967C4.08325 5.66237 3.89324 6.3336 3.96357 7.00344C4.01105 6.87069 4.68263 6.25459 5.04555 6.78559Z"
-          fill="#E8E8E8"
-        />
-        <path
-          d="M9.86536 5.76104C9.84782 5.7051 9.82628 5.6505 9.80092 5.59766V5.59425C9.68254 5.35256 9.48628 5.1581 9.24395 5.0424C9.00163 4.9267 8.72746 4.89655 8.46592 4.95685C8.20439 5.01715 7.97082 5.16435 7.8031 5.37458C7.63539 5.58482 7.54337 5.84575 7.54197 6.11505C7.54199 6.19975 7.55109 6.2842 7.56911 6.36694C7.56919 6.36807 7.56919 6.36921 7.56911 6.37034C7.57589 6.40438 7.58606 6.43842 7.59624 6.47246C7.65678 6.71225 7.66856 6.96181 7.63088 7.20627C7.59319 7.45073 7.50682 7.68506 7.37692 7.89528C7.24701 8.1055 7.07624 8.2873 6.87479 8.42983C6.67333 8.57236 6.44533 8.6727 6.20439 8.72486C5.96345 8.77701 5.7145 8.77992 5.47241 8.73341C5.23033 8.68689 5.00006 8.5919 4.79536 8.45412C4.59065 8.31633 4.41571 8.13857 4.28096 7.93144C4.14622 7.72431 4.05443 7.49206 4.01109 7.24855C4.07238 7.67066 4.22132 8.07514 4.44825 8.43582C4.67519 8.79649 4.97507 9.10532 5.32848 9.34231C5.68189 9.5793 6.08095 9.73917 6.49984 9.81157C6.91872 9.88396 7.34808 9.86727 7.76012 9.76257C8.17217 9.65788 8.55771 9.46751 8.8918 9.20379C9.22588 8.94008 9.50106 8.60889 9.69952 8.23168C9.89797 7.85447 10.0153 7.43963 10.0438 7.01404C10.0724 6.58844 10.0116 6.16156 9.86536 5.76104Z"
-          fill="#E8E8E8"
-        />
-        <path
-          d="M9.35991 6.58134C9.35991 8.0646 8.16176 9.26702 6.68377 9.26702C5.89932 9.26702 5.19371 8.9283 4.70422 8.38865C4.73387 8.41135 4.7643 8.43322 4.79536 8.45412C5.00006 8.5919 5.23033 8.68689 5.47241 8.73341C5.7145 8.77992 5.96345 8.77701 6.20439 8.72486C6.44533 8.6727 6.67333 8.57236 6.87479 8.42983C7.07624 8.2873 7.24701 8.1055 7.37692 7.89528C7.50682 7.68506 7.59319 7.45073 7.63088 7.20627C7.66856 6.96181 7.65678 6.71225 7.59624 6.47246C7.58606 6.43842 7.57589 6.40438 7.56911 6.37034C7.56919 6.36921 7.56919 6.36807 7.56911 6.36694C7.55109 6.2842 7.54199 6.19975 7.54197 6.11505C7.54337 5.84575 7.63539 5.58482 7.8031 5.37458C7.97082 5.16435 8.20439 5.01715 8.46592 4.95685C8.57382 4.93197 8.6838 4.92245 8.79286 4.92802C9.14815 5.38384 9.35991 5.95777 9.35991 6.58134Z"
-          fill="#E8E8E8"
-        />
-        <path
-          d="M9.47934 2.44482L9.75865 2.94614L10.26 3.22544L9.75865 3.50474L9.47934 4.00605L9.20004 3.50474L8.69873 3.22544L9.20004 2.94614L9.47934 2.44482Z"
-          fill="#F0F0F0"
-        />
-      </g>
-    </Icon>
-  );
-}
-
 export function DesktopExchangeIcon(props: IconProps) {
   return (
     <Icon

diff --git a/frontend/desktop/src/types/system.ts b/frontend/desktop/src/types/system.ts
@@ -62,6 +62,8 @@ export type LayoutConfigType = {
   backgroundImage: string;
   meta: MetaConfigType;
   customerServiceURL?: string;
+  forcedLanguage?: string;
+  currencySymbol?: 'shellCoin' | 'cny' | 'usd';
 
   protocol?: ProtocolConfigType;
   common: {

diff --git a/frontend/packages/ui/src/components/icons/CurrencySymbol.tsx b/frontend/packages/ui/src/components/icons/CurrencySymbol.tsx
@@ -0,0 +1,46 @@
+import { Icon, Text, TextProps } from '@chakra-ui/react';
+
+export default function CurrencySymbol({
+  type = 'shellCoin',
+  ...props
+}: {
+  type?: 'shellCoin' | 'cny' | 'usd';
+} & Pick<Parameters<typeof Icon>[0], 'w' | 'h' | 'color'>) {
+  return type === 'shellCoin' ? (
+    <Icon
+      xmlns="http://www.w3.org/2000/svg"
+      width="14px"
+      height="14px"
+      viewBox="0 0 20 20"
+      fill="none"
+    >
+      <circle cx="10" cy="10" r="9.66" fill="#E8E8E8" stroke="#37383A" strokeWidth="0.68" />
+      <circle cx="9.99995" cy="10" r="8.7366" fill="#CFCFCF" />
+      <path
+        d="M10.0001 18.7366C14.8252 18.7366 18.7367 14.8251 18.7367 10C18.7367 8.01946 18.0776 6.19283 16.9669 4.72746C16.4078 4.64858 15.8365 4.60779 15.2557 4.60779C8.98439 4.60779 3.82381 9.36328 3.18328 15.4649C4.78448 17.4596 7.24314 18.7366 10.0001 18.7366Z"
+        fill="#BEBEBE"
+      />
+      <circle cx="10.0001" cy="9.99998" r="6.77549" fill="#828386" />
+      <path
+        d="M7.20815 9.69376C7.77022 10.5156 8.93312 10.4426 8.93312 10.4426C8.6424 10.1606 8.45342 9.90286 8.43404 9.16859C8.41466 8.43431 7.99795 8.23981 7.99795 8.23981C8.74415 7.76812 8.47765 7.25754 8.45342 6.6886C8.43889 6.33362 8.64724 6.07103 8.81199 5.92029C7.86377 6.06283 7.00696 6.56717 6.4202 7.32816C5.83343 8.08915 5.56198 9.04805 5.66245 10.005C5.73028 9.81533 6.68968 8.93517 7.20815 9.69376Z"
+        fill="#E8E8E8"
+      />
+      <path
+        d="M14.0936 8.23012C14.0685 8.1502 14.0378 8.07219 14.0015 7.99671V7.99184C13.8324 7.64657 13.552 7.36876 13.2059 7.20348C12.8597 7.03819 12.468 6.99513 12.0944 7.08126C11.7208 7.1674 11.3871 7.37769 11.1475 7.67803C10.9079 7.97836 10.7765 8.35112 10.7745 8.73584C10.7745 8.85683 10.7875 8.97747 10.8132 9.09568C10.8133 9.0973 10.8133 9.09892 10.8132 9.10054C10.8229 9.14917 10.8374 9.1978 10.852 9.24642C10.9385 9.58898 10.9553 9.9455 10.9015 10.2947C10.8476 10.6439 10.7242 10.9787 10.5387 11.279C10.3531 11.5793 10.1091 11.8391 9.82133 12.0427C9.53354 12.2463 9.20783 12.3896 8.86362 12.4641C8.51942 12.5386 8.16378 12.5428 7.81795 12.4763C7.47211 12.4099 7.14315 12.2742 6.85072 12.0774C6.55828 11.8805 6.30836 11.6266 6.11587 11.3307C5.92338 11.0348 5.79226 10.703 5.73035 10.3551C5.8179 10.9581 6.03066 11.536 6.35486 12.0512C6.67905 12.5665 7.10745 13.0077 7.61233 13.3462C8.1172 13.6848 8.68729 13.9132 9.28569 14.0166C9.88409 14.12 10.4975 14.0962 11.0861 13.9466C11.6747 13.797 12.2255 13.5251 12.7028 13.1483C13.18 12.7716 13.5732 12.2985 13.8567 11.7596C14.1402 11.2207 14.3078 10.6281 14.3486 10.0201C14.3894 9.41211 14.3025 8.80228 14.0936 8.23012Z"
+        fill="#E8E8E8"
+      />
+      <path
+        d="M13.3715 9.40197C13.3715 11.5209 11.6599 13.2387 9.54846 13.2387C8.42782 13.2387 7.41979 12.7548 6.72052 11.9838C6.76288 12.0163 6.80636 12.0475 6.85072 12.0774C7.14315 12.2742 7.47211 12.4099 7.81795 12.4763C8.16378 12.5428 8.51942 12.5386 8.86362 12.4641C9.20783 12.3896 9.53354 12.2463 9.82133 12.0427C10.1091 11.8391 10.3531 11.5793 10.5387 11.279C10.7242 10.9787 10.8476 10.6439 10.9015 10.2947C10.9553 9.9455 10.9385 9.58898 10.852 9.24642C10.8374 9.1978 10.8229 9.14917 10.8132 9.10054C10.8133 9.09892 10.8133 9.0973 10.8132 9.09568C10.7875 8.97747 10.7745 8.85683 10.7745 8.73584C10.7765 8.35112 10.9079 7.97836 11.1475 7.67803C11.3871 7.37769 11.7208 7.1674 12.0944 7.08126C12.2485 7.04573 12.4056 7.03213 12.5614 7.04008C13.069 7.69125 13.3715 8.51116 13.3715 9.40197Z"
+        fill="#E8E8E8"
+      />
+      <path
+        d="M13.5419 3.49261L13.9409 4.20878L14.6571 4.60778L13.9409 5.00678L13.5419 5.72294L13.1429 5.00678L12.4268 4.60778L13.1429 4.20878L13.5419 3.49261Z"
+        fill="#F0F0F0"
+      />
+    </Icon>
+  ) : type === 'cny' ? (
+    <Text {...props}>￥</Text>
+  ) : (
+    <Text {...props}>$</Text>
+  );
+}
diff --git a/frontend/packages/ui/src/components/icons/SealosCoin.tsx b/frontend/packages/ui/src/components/icons/SealosCoin.tsx
@@ -1,5 +1,8 @@
 import { Icon, IconProps } from '@chakra-ui/react';
 
+/**
+ * @deprecated
+ */
 export default function SealosCoin(props: IconProps) {
   return (
     <Icon

diff --git a/frontend/packages/ui/src/components/index.ts b/frontend/packages/ui/src/components/index.ts
@@ -51,6 +51,8 @@ import EditTabs from './EditTabs';
 import YamlCode from './YamlCode';
 import ProviderIcon from './icons/ProviderIcon';
 import WarnTriangeIcon from './icons/line/WarnTriange';
+import CurrencySymbol from './icons/CurrencySymbol';
+
 export { SealosMenu } from './Menu';
 export { Tabs } from './Tabs';
 export { MyRangeSlider } from './RangeSlider';
@@ -116,5 +118,6 @@ export {
   SortPolygonDownIcon,
   ProviderIcon,
   WebHostIcon,
-  WarnTriangeIcon
+  WarnTriangeIcon,
+  CurrencySymbol
 };
diff --git a/frontend/providers/applaunchpad/src/hooks/useDriver.tsx b/frontend/providers/applaunchpad/src/hooks/useDriver.tsx
@@ -3,7 +3,6 @@ import { useGuideStore } from '@/store/guide';
 import { formatMoney } from '@/utils/tools';
 import { Flex, FlexProps, Icon, Text } from '@chakra-ui/react';
 import { driver } from '@sealos/driver';
-import { SealosCoin } from '@sealos/ui';
 import { useTranslation } from 'next-i18next';
 import { useCallback, useEffect, useState } from 'react';
 
@@ -146,9 +145,6 @@ export default function useDriver({
             <Flex gap={'6px'} alignItems={'center'} fontSize={'13px'} fontWeight={500}>
               <DriverStarIcon />
               <Text color={'#24282C'}>{t('guide_deploy_button')}</Text>
-              {/* <Text>{reward}</Text>
-              <SealosCoin />
-              <Text>{t('balance')}</Text> */}
             </Flex>
           )
         }