fix: desktop update translation (#5216)

* fix: desktop update translation * upadte CurrencySymbol * add CurrencySymbol * update aiproxy * update aiproxy
labring · Nov 20, 2024 · f5569ff · f5569ff
1 parent 3f07d76
commit f5569ff
Show file tree

Hide file tree

Showing 17 changed files with 134 additions and 85 deletions.
diff --git a/frontend/desktop/public/locales/en/common.json b/frontend/desktop/public/locales/en/common.json
@@ -70,7 +70,7 @@
   "enterprise_name": "Company name",
   "enterprise_name_required": "Please enter the correct company name",
   "enterprise_verification": "Enterprise real name",
-  "expected_to_use_next_month": "Estimated Next Invoice",
+  "expected_to_use_next_month": "Usage for the next 30 days",
   "expected_used": "Estimated Runaway",
   "face_recognition_failed": "Personal real name failed",
   "face_recognition_success": "Personal real-name success",
@@ -152,7 +152,7 @@
   "official_account_login": "Official account login",
   "old_email": "Old email",
   "old_phone": "old mobile number",
-  "online_service": "Online Service",
+  "online_service": "Help",
   "operating": "Operating",
   "order_number": "Order Number",
   "password": "Password",
@@ -238,7 +238,7 @@
   "under_active_development": "Under active development 🚧",
   "unread": "Unread",
   "upload_success": "Upload successful",
-  "used_last_month": " Last Invoice",
+  "used_last_month": "Usage for the last 30 days",
   "used_resources": "Resources Used",
   "user_name": "User Name",
   "username": "Username",
@@ -268,4 +268,4 @@
   "you_can_view_fees_through_the_fee_center": "You can view fees through the fee center",
   "you_have_not_purchased_the_license": "You have not purchased the License",
   "yuan": "Yuan"
-}
+}
diff --git a/frontend/desktop/public/locales/zh/common.json b/frontend/desktop/public/locales/zh/common.json
@@ -67,7 +67,7 @@
   "enterprise_name": "企业名称",
   "enterprise_name_required": "请输入正确的企业名字",
   "enterprise_verification": "企业实名",
-  "expected_to_use_next_month": "下月预计使用",
+  "expected_to_use_next_month": "未来30天预计使用",
   "expected_used": "预计还能使用",
   "face_recognition_failed": "个人实名失败",
   "face_recognition_success": "个人实名成功",
@@ -231,7 +231,7 @@
   "under_active_development": "正在积极开发中 🚧",
   "unread": "未读",
   "upload_success": "上传成功",
-  "used_last_month": "上月已使用",
+  "used_last_month": "过去30天已使用",
   "used_resources": "已用资源",
   "user_name": "用户名",
   "username": "用户名",

diff --git a/frontend/desktop/src/components/LangSelect/simple.tsx b/frontend/desktop/src/components/LangSelect/simple.tsx
@@ -1,11 +1,36 @@
+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();
+
+  const switchLanguage = (targetLang: string) => {
+    masterApp?.sendMessageToAll({
+      apiName: 'event-bus',
+      eventName: EVENT_NAME.CHANGE_I18N,
+      data: {
+        currentLanguage: targetLang
+      }
+    });
+    setCookie('NEXT_LOCALE', targetLang, {
+      expires: 30,
+      sameSite: 'None',
+      secure: true
+    });
+    i18n?.changeLanguage(targetLang);
+  };
+
+  useEffect(() => {
+    if (layoutConfig?.forcedLanguage && i18n?.language !== layoutConfig.forcedLanguage) {
+      switchLanguage(layoutConfig.forcedLanguage);
+    }
+  }, [layoutConfig?.forcedLanguage, i18n]);
 
   return (
     <Flex
@@ -20,21 +45,11 @@ 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
+          : () => switchLanguage(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'} fontSize={'16px'} />
             </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'} fontSize={'14px'} />
             </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'} fontSize={'14px'} />
             </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';
+} & TextProps) {
+  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/aiproxy/api/platform.ts b/frontend/providers/aiproxy/api/platform.ts
@@ -4,7 +4,10 @@ import { QueryParams as KeysQueryParams } from '@/app/api/get-keys/route'
 import { GET, POST, DELETE } from '@/utils/request'
 import { ModelPrice } from '@/types/backend'
 
-export const initAppConfig = () => GET<{ aiproxyBackend: string }>('/api/init-app-config')
+export const initAppConfig = () =>
+  GET<{ aiproxyBackend: string; currencySymbol: 'shellCoin' | 'cny' | 'usd' }>(
+    '/api/init-app-config'
+  )
 
 export const getModels = () => GET<string[]>('/api/get-models')
 

diff --git a/frontend/providers/aiproxy/app/[lng]/(user)/layout.tsx b/frontend/providers/aiproxy/app/[lng]/(user)/layout.tsx
@@ -18,7 +18,7 @@ export default function UserLayout({ children }: { children: React.ReactNode })
   const pathname = usePathname()
   const { lng } = useI18n()
   const { i18n } = useTranslationClientSide(lng)
-  const { setAiproxyBackend } = useBackendStore()
+  const { setAiproxyBackend, setCurrencySymbol } = useBackendStore()
 
   const handleI18nChange = useCallback(
     (data: { currentLanguage: string }) => {
@@ -65,8 +65,9 @@ export default function UserLayout({ children }: { children: React.ReactNode })
   // init config and language
   useEffect(() => {
     const initConfig = async () => {
-      const { aiproxyBackend } = await initAppConfig()
+      const { aiproxyBackend, currencySymbol } = await initAppConfig()
       setAiproxyBackend(aiproxyBackend)
+      setCurrencySymbol(currencySymbol)
     }
 
     initConfig()

diff --git a/frontend/providers/aiproxy/app/[lng]/(user)/logs/page.tsx b/frontend/providers/aiproxy/app/[lng]/(user)/logs/page.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import { Box, Flex, Text, Button, Icon } from '@chakra-ui/react'
-import { MySelect, MyTooltip, SealosCoin } from '@sealos/ui'
+import { CurrencySymbol, MySelect, MyTooltip } from '@sealos/ui'
 import { useMemo, useState } from 'react'
 
 import { getKeys, getLogs, getModels } from '@/api/platform'
@@ -13,6 +13,7 @@ import { useI18n } from '@/providers/i18n/i18nContext'
 import { LogItem } from '@/types/log'
 import { useQuery } from '@tanstack/react-query'
 import { ColumnDef, getCoreRowModel, useReactTable } from '@tanstack/react-table'
+import { useBackendStore } from '@/store/backend'
 
 const mockStatus = ['all', 'success', 'failed']
 
@@ -32,6 +33,7 @@ export default function Home(): React.JSX.Element {
   const [pageSize, setPageSize] = useState(10)
   const [logData, setLogData] = useState<LogItem[]>([])
   const [total, setTotal] = useState(0)
+  const { currencySymbol } = useBackendStore()
 
   const { data: models = [] } = useQuery(['getModels'], () => getModels())
   const { data: tokenData } = useQuery(['getKeys'], () => getKeys({ page: 1, perPage: 100 }))
@@ -116,7 +118,7 @@ export default function Home(): React.JSX.Element {
               <MyTooltip placement="bottom-end" label={t('logs.total_price_tip')}>
                 <Flex alignItems={'center'} gap={'4px'}>
                   {t('logs.total_price')}
-                  <SealosCoin />
+                  <CurrencySymbol type={currencySymbol} />
                 </Flex>
               </MyTooltip>
             </Box>