feat: add switch languages

gtech-world · Jun 25, 2024 · fb24f2f · fb24f2f
1 parent e5f6e8f
commit fb24f2f
Show file tree

Hide file tree

Showing 6 changed files with 84 additions and 38 deletions.
diff --git a/public/label.jpg b/public/label.jpg
diff --git a/src/components/common/header.tsx b/src/components/common/header.tsx
@@ -1,12 +1,14 @@
 import { Aicp } from '@/components/svgr';
-import { useIntl } from '@umijs/max';
+import { SelectLang, useIntl } from '@umijs/max';
 import classNames from 'classnames';
 import { HTMLAttributes } from 'react';
 import { useTitle } from 'react-use';
 import { WrapLink } from '../ant/Link';
 import MenuAction from '../ant/MenuAction';
 import { useIsMobile } from './context';
 import { HEADER_HEIGHT } from '../../../config/defaultSettings';
+import { LngList, LngsText } from '../const';
+import { Button } from './button';
 
 export function HeaderTitle() {
   const { locale } = useIntl();
@@ -29,6 +31,7 @@ export function HeaderTitle() {
 export function Header(p: HTMLAttributes<HTMLDivElement>) {
   const { className, ...props } = p;
   const isMobile = useIsMobile();
+
   return (
     <div
       {...props}
@@ -37,9 +40,13 @@ export function Header(p: HTMLAttributes<HTMLDivElement>) {
     >
       <WrapLink to={isMobile ? '#' : '/'} className="flex gap-3 items-center !text-white">
         <Aicp height="30" />
-        <HeaderTitle />
       </WrapLink>
-      {!isMobile && <MenuAction key="menu" />}
+
+      <div className="flex items-center gap-5">
+        <SelectLang postLocalesData={() => LngList} reload={false} />
+
+        {!isMobile && <MenuAction key="menu" />}
+      </div>
     </div>
   );
 }
@@ -54,7 +61,7 @@ export function HomeHeader(p: HTMLAttributes<HTMLDivElement>) {
         'h-[6.75rem] z-50 max-w-[75rem] mx-auto bg-transparent w-full text-white flex justify-between items-center px-5 mo:h-[56px] mo:sticky mo:top-0 mo:bg-white mo:text-green-2',
       )}
     >
-      <WrapLink to="/" className="flex gap-3 items-center">
+      <WrapLink to="/" className="flex items-center gap-3">
         <Aicp height="32" />
         <HeaderTitle />
       </WrapLink>

diff --git a/src/components/const.ts b/src/components/const.ts
@@ -8,3 +8,18 @@ export const SIZE = {
   small: 'py-1',
   big: 'py-3',
 };
+
+export const LngList = [
+  {
+    lang: 'en-US',
+    label: 'English',
+    icon: '🇺🇸',
+    title: 'Language',
+  },
+  {
+    lang: 'zh-CN',
+    label: '简体中文',
+    icon: '🇨🇳',
+    title: '语言',
+  },
+];
diff --git a/src/components/routes/chain.tsx b/src/components/routes/chain.tsx
@@ -209,7 +209,9 @@ export function Blockchain() {
                     </span>
                     {!isMobile && <p>#{tokenId}</p>}
                   </div>
-                  <span className="text-sm ml-3 mo:ml-0 mt-[0.3rem] mo:mt-2 mo:text-gray-6">{t('by AIAG')}</span>
+                  <span className="text-sm ml-3 mo:ml-0 mt-[0.3rem] mo:mt-2 mo:text-gray-6">
+                    {t('Recognized by AIAG & IAOB')}
+                  </span>
                 </div>
               </div>
               <div className="px-12 py-5 bg-white rounded-lg mo:pl-10 mo:pr-3">

diff --git a/src/components/routes/label.tsx b/src/components/routes/label.tsx
@@ -13,6 +13,8 @@ export function Label() {
   const [sq] = useSearchParams();
   const vin: string = sq.get('vin') as string;
   const { data: tagInfo, isLoading } = useTagInfo(vin);
+  const { t } = useT();
+
   const {
     evaluationAgency = '-',
     evaluationExpireTime = '-',
@@ -26,65 +28,65 @@ export function Label() {
     evaluationBoundary = '-',
     evaluationBasis = '-',
     pcfResult = '-',
-    certificateNumber = '当前无证书',
+    certificateNumber = t('0000001'),
   } = tagInfo || {};
+
   const productInfo = [
-    { text: '标签编号', value: uuid },
-    { text: '产品型号', value: productName },
-    { text: '产品唯一标识符', value: loadNumber },
-    { text: '标签申请主体', value: orgName },
+    { text: t('Label Number'), value: uuid },
+    { text: t('Product System'), value: productName },
+    { text: t('Product UID'), value: loadNumber },
+    { text: t('Label Applicant'), value: orgName },
   ];
 
   const productTagInfo = [
-    { text: '评价类型', value: evaluationType !== 'aicp' ? '第三方认证' : 'AICP平台审核' },
-    { text: '证书编号', value: certificateNumber },
-    { text: '功能单位', value: functionalUnit },
-    { text: '评价边界', value: evaluationBoundary },
-    { text: '评价依据', value: evaluationBasis },
-    { text: '评价机构', value: evaluationAgency },
-    { text: '评价有效期', value: evaluationExpireTime },
+    { text: t('Evaluation'), value: evaluationType !== 'aicp' ? t('Third-party Certification') : 'AICP平台审核' },
+    { text: t('Certification Number'), value: certificateNumber },
+    { text: t('Functional Unit'), value: functionalUnit },
+    { text: t('Assessment Boundary'), value: evaluationBoundary },
+    { text: t('Reference Standard'), value: evaluationBasis },
+    { text: t('Evaluation by'), value: evaluationAgency },
+    { text: t('Effective Date'), value: evaluationExpireTime },
     {
-      text: '区块链SBT证书编号',
+      text: t('Blockchain SBT Number'),
       value: tokenId,
       link: genScanUrl('address', '0x7BC6afe0cDc6DE9191dfC6d68A3bad45E270F695'),
     },
   ];
 
-  const { t } = useT();
-
   const noHeader = () => {
     return (
       <Fragment>
         <div className="flex w-full gap-5 mo:flex-none mo:flex-col ">
-          <div className="w-[420px] max-h-[450px] p-5 mo:h-auto  bg-[#FFFFFF] text-center  flex justify-center mo:justify-start   mo:flex-row mo:w-full flex-col items-center rounded-lg ">
-            <SVGCarbon3 className="text-[5.375rem] w-[5.375rem] mt-[.625rem] mb-5 mo:mb-2  shrink-0" />
+          <div className="w-[420px] max-h-[480px] p-5 mo:h-auto  bg-[#FFFFFF] text-center  flex justify-center mo:justify-start   mo:flex-row mo:w-full flex-col items-center rounded-lg ">
+            <img src="label.jpg" className="text-[5.375rem] w-[5.375rem] mt-[.625rem] mb-5 mo:mb-2  shrink-0" />
             <div className="mo:ml-[2.5rem] mo:flex-1 ">
               <div className="text-[#29953A] text-[1.75rem] leading-8 font-semibold max-w-full break-all">
                 {pcfResult}
               </div>
-              <div className="font-[1.75rem] leading-8   ">二氧化碳等效排放</div>
+              <div className="font-[1.75rem] leading-8   ">{t('Cradle-to-Grave Footprint')}</div>
             </div>
           </div>
-          <div className="w-[420px]  mo:w-full  max-h-[450px] bg-[#FFFFFF] mo:max-h-[350px] rounded-lg">
+          <div className="w-[420px]  mo:w-full  max-h-[480px] bg-[#FFFFFF] mo:max-h-[350px] rounded-lg">
             <div className="mx-5 mt-5 mb-5 mmd:mt-10">
               <div className="mb-5 mo:mb-[15px]  md:text-[18px]   font-bold mo:text-[18px] text-[20px] leading-7">
-                产品信息
+                {t('Product Info')}
               </div>
               <DivText textArray={productInfo} />
             </div>
           </div>
-          <div className="w-[420px]  mo:w-full  max-h-[450px] bg-[#FFFFFF] mo:max-h-[370px] rounded-lg">
+          <div className="w-[420px]  mo:w-full  max-h-[480px] bg-[#FFFFFF] mo:max-h-[370px] rounded-lg">
             <div className="mx-5 mt-5 mb-5 mmd:mt-10">
               <div className="mb-5 mo:mb-[15px] md:text-[18px]   font-bold mo:text-[18px] text-[20px] leading-7">
-                产品碳足迹评价信息
+                {t('Product Carbon Footprint')}
               </div>
               <DivText textArray={productTagInfo} />
             </div>
           </div>
         </div>
         <div className="flex gap-5 mt-5 mo:flex-none mo:flex-col ">
           <div className="w-[640px] py-5 mo:pt-[1.875rem] mo:w-full bg-[#FFFFFF] flex flex-col items-center rounded-lg gap-5 mo:gap-[.9375rem]">
-            <SVGCarbon3 className="text-[5.375rem] w-[5.375rem]" />
+            {/* <SVGCarbon3 className="text-[5.375rem] w-[5.375rem]" /> */}
+            <img src="label.jpg" className="text-[5.375rem] w-[5.375rem]" />
             <div
               className="text-lg font-bold mo:mx-5 "
               dangerouslySetInnerHTML={{
@@ -96,7 +98,7 @@ export function Label() {
               dangerouslySetInnerHTML={{
                 __html: handleCarbonStr(
                   t(
-                    'The AIAG Digital3 Carbon Trust Label is an industry-level certification framework for every vehicle produced under {{value}}. The Trust Label guarantees that any raw data behind the label is verified and recorded in an immutable manner for the ultimate transparency and traceability for the vehicle’s carbon performance.',
+                    'An AIAG EPD/CFP Label stands for an EPD/CFP declaration that is registered on the AIAG EPD Platform and recognized by AIAG and IAOB.',
                   ).replace(
                     '{{value}}',
                     `<a class="text-green-2 cursor-pointer" target="_blank" href="https://aiag.org.cn/ACAC/Automotive-Carbon-Advisory-Committee" rel="noreferrer">${t(
@@ -115,7 +117,7 @@ export function Label() {
               className="text-[.9375rem] font-normal text-center mx-5"
               dangerouslySetInnerHTML={{
                 __html: t(
-                  'A Soul-bounded Token (a special type of NFT that is not allowed to transfer after created) has been generated on blockchain to make sure the information in this label is immutable and will be maintain for traceability forever. Check {{value}} to verify the SBT on blockchain explorer.',
+                  'Every AIAG EPD/CFP Label is backed by an dedicated NFT on blockchain to guarantee long term immutability and traceability on the underlying data. Check {{value}} to view NFT information from the blockchain explorer.',
                 ).replace(
                   '{{value}}',
                   `<a class="text-green-2 cursor-pointer" href="${wrapPath(
@@ -145,7 +147,7 @@ export function Label() {
           ) : (
             <Fragment>
               <div className="mb-5 text-2xl font-bold leading-normal">
-                {t('Product Carbon Footprint Certified')} <span className="text-base font-medium">{t('by AIAG')}</span>
+                {t('CFP Label')} <span className="text-base font-medium">{t('Recognized by AIAG & IAOB')}</span>
               </div>
               {noHeader()}
             </Fragment>

diff --git a/src/locales/zh-CN-frontend.json b/src/locales/zh-CN-frontend.json
@@ -39,7 +39,6 @@
   "PRODUCT BOM": "产品BOM定义",
   "Product Name": "产品名",
   "Display Name": "产品展示名",
-  "Product UID": "产品唯一编码",
   "From Organization": "来自组织机构",
   "Product Type": "产品类型",
   "PCF Accountable": "是否可计算碳足迹",
@@ -67,8 +66,8 @@
   "Emission Scope": "产品碳足迹范围",
   "Overall Data Quality": "总体数据质量",
   "INVENTORY BREAKDOWN": "产品碳足迹数据下钻",
-  "Product Carbon Footprint Certified": "产品碳足迹标签",
-  "by AIAG": "由AIAG认可颁发",
+  "CFP Label": "产品碳足迹标签",
+  "Recognized by AIAG & IAOB": "由AIAG认可颁发",
   "Check Details": "查看更多信息",
   "tonnes of CO2e Cradle-to-Gate emission": "全生命周期二氧化碳等效排放(吨)",
   "trees (8-yr old) to absorbe for one year": "这些二氧化碳需要多少颗树吸收一年",
@@ -92,7 +91,7 @@
   "here": "此处",
   "AICD is the global, industry-level database for long-term carbon performance traceability and visibility under the 2050 Net Zero commitment. The data on this label is supported by the Automotive Industry Carbon Database. Click {{value}} to query information about this vehicle.": "AICD是全球性的行业级数据库，帮助汽车行业在2050年净零排放承诺下追踪和展示长期的碳排放表现。此“可信标签”的数据是基于AICD内的数据计算生成的。查看{{value}}，您可以在AICD中查询关于该车辆的碳表现数据。",
   "Immutability and Traceability": "不可篡改性和可追溯性",
-  "A Soul-bounded Token (a special type of NFT that is not allowed to transfer after created) has been generated on blockchain to make sure the information in this label is immutable and will be maintain for traceability forever. Check {{value}} to verify the SBT on blockchain explorer.": "关于此标签的“灵魂绑定证明”在区块链上生成，以确保标签中的信息和数据都不可篡改、且可被永久追溯。“灵魂绑定证明”是一种区块链上的特殊NFT，在生成后就不可被转移和销毁。点击{{value}}在区块链浏览器中查看该标签。",
+  "Every AIAG EPD/CFP Label is backed by an dedicated NFT on blockchain to guarantee long term immutability and traceability on the underlying data. Check {{value}} to view NFT information from the blockchain explorer.": "关于此标签的“灵魂绑定证明”在区块链上生成，以确保标签中的信息和数据都不可篡改、且可被永久追溯。“灵魂绑定证明”是一种区块链上的特殊NFT，在生成后就不可被转移和销毁。点击{{value}}在区块链浏览器中查看该标签。",
   "Back": "返回",
   "Account": "账户",
   "Password": "密码",
@@ -106,7 +105,7 @@
   "＊ AICD Pro Accounts only serve enterprise-level users within the automotive supply chain. To learn more about Pro Accounts, please contact [email protected].": "＊ 专业账户面向汽车供应链内的企业级用户。了解更多关于专业账户，请联系GTech（邮箱：[email protected]）。",
   "The AICD site is under development. This version is for demonstration purpose only and the data is not real. For more information, please contract email [email protected].": "AICD网站正在建设中，此版本仅用于演示目的，数据不具有任何真实意义。任何疑问或洽谈需求，请联系邮箱 [email protected]。",
   "Automotive Carbon Footprint Trust Label": "汽车行业产品碳足迹可信标签",
-  "Certified by AIAG": "由AIAG认证",
+  "Certified Recognized by AIAG & IAOB": "由AIAG认证",
   "Label Details": "可信标签信息",
   "SBT Token ID": "SBT凭证编号",
   "Label Owner": "标签拥有者",
@@ -150,7 +149,7 @@
   "AICP is the global, industry-level platform for long-term carbon performance traceability and visibility under the 2050 Net Zero commitment.": "AICP是全球性的行业级服务平台，帮助汽车行业在2050年净零排放承诺下追踪和展示长期的碳排放表现。",
   "Learn More about AIAG’s Digital3 Carbon Trust Label": "了解更多关于AIAG Digital3 Carbon可信标签",
   "What is AIAG Digital3 Carbon Trust Label?": "什么是AIAG Digital3 Carbon可信标签？",
-  "The AIAG Digital3 Carbon Trust Label is an industry-level certification framework for every vehicle produced under {{value}}. The Trust Label guarantees that any raw data behind the label is verified and recorded in an immutable manner for the ultimate transparency and traceability for the vehicle’s carbon performance.": "AIAG的“Digital3 Carbon可信标签”是在{{value}}下建立的行业级车辆碳排放数据标签。“Digital3 Carbon可信标签”在技术上保证了标签数据以及背后的所有原始数据都被妥善记录并不可篡改，为追踪车辆的碳排放表现提供极佳的可见性和可追溯性。",
+  "An AIAG EPD/CFP Label stands for an EPD/CFP declaration that is registered on the AIAG EPD Platform and recognized by AIAG and IAOB. ": "AIAG的“Digital3 Carbon可信标签”是在{{value}}下建立的行业级车辆碳排放数据标签。“Digital3 Carbon可信标签”在技术上保证了标签数据以及背后的所有原始数据都被妥善记录并不可篡改，为追踪车辆的碳排放表现提供极佳的可见性和可追溯性。",
   "AICP is the global, industry-level platform for long-term carbon performance traceability and visibility under the 2050 Net Zero commitment. The data on this label is supported by the Automotive Industry Carbon Platform. Click {{value}} to query information about this vehicle.": "AICP是全球性的行业级服务平台，帮助汽车行业在2050年净零排放承诺下追踪和展示长期的碳排放表现。此“可信标签”的数据是基于AICP内的数据计算生成的。查看{{value}}，您可以在AICP中查询关于该车辆的碳表现数据。",
   "AICP Supply Chain Traceability System": "AICP供应链可追溯系统",
   "＊ AICP Pro Accounts only serve enterprise-level users within the automotive supply chain. To learn more about Pro Accounts, please contact [email protected].": "＊ 专业账户面向汽车供应链内的企业级用户。了解更多关于专业账户，请联系GTech（邮箱：[email protected]）。",
@@ -168,5 +167,26 @@
   "GGX Blockchain": "GGX区块链",
   "Product UUID": "产品唯一标识符",
   "GGX (GTech Green Chain) is a shared digital space for the automotive industry. GGX offers 3T (Transparency, Traceability, Trust) featured data as a solid foundation for cross-boundary collaboration between automotive value chain players.": "GGX（GTech Green-chain）是一个服务于汽车供应链的共享数字空间。GGX为汽车供应链用户提供跨组织的3T（代表Transparency可见性、Traceability可追溯、Trusted可信性）数据协作基础。",
-  "Data not available for this imput.": "您查询的数据不存在。"
+  "Data not available for this imput.": "您查询的数据不存在。",
+  "Cradle-to-Grave Footprint": "二氧化碳等效排放",
+  "Product Info": "产品信息",
+  "Label Number": "标签编号",
+  "Product System": "产品型号",
+  "Product UID": "产品唯一标识符",
+  "Label Applicant": "标签申请主体",
+  "Product Carbon Footprint": "产品碳足迹评价信息",
+  "Evaluation": "评价类型",
+  "Certification Number": "证书编号",
+  "Functional Unit": "功能单位",
+  "Assessment Boundary": "评价边界",
+  "Reference Standard": "评价依据",
+  "Evaluation by": "评价机构",
+  "Effective Date": "评价有效期",
+  "Blockchain SBT Number": "区块链SBT证书编号",
+  "What is AIAG EPD/CFP Label?": "什么是AIAG Digital3 Carbon可信标签？",
+  "Immutability & Traceability": "不可篡改性和可追溯性",
+  "Every AIAG EPD/CFP Label is backed by an dedicated NFT on blockchain to guarantee long term immutability and traceability on the underlying data. Check ## to view NFT information from the blockchain explorer. ": "关于此标签的“灵魂绑定证明”在区块链上生成，以确保标签中的信息和数据都不可篡改、且可被永久追溯。“灵魂绑定证明”是一种区块链上的特殊NFT，在生成后就不可被转移和销毁。点击##在区块链浏览器中查看该标签。",
+  "An AIAG EPD/CFP Label stands for an EPD/CFP declaration that is registered on the AIAG EPD Platform and recognized by AIAG and IAOB.": "AIAG的“Digital3 Carbon可信标签”是在AIAG汽车行业净零排放愿景下建立的行业级车辆碳排放数据标签。“Digital3 Carbon可信标签”在技术上保证了标签数据以及背后的所有原始数据都被妥善记录并不可篡改，为追踪车辆的碳排放表现提供极佳的可见性和可追溯性。",
+  "Third-party Certification": "第三方认证",
+  "0000001": "当前无证书"
 }