feat: 添加国际化支持，更新 RWA 申购页面和相关文本，优化用户体验

src/components/subscribe-rwa/index.vue

@@ -5,10 +5,13 @@ const props = defineProps<{
   unitPrice: number;
   max: number;
 }>();
+
 const emit = defineEmits<{
   (e: "subscribed", value: number): void;
 }>();
 
+const { t } = useI18n();
+
 const walletStore = useWalletStore();
 const { balances } = storeToRefs(walletStore);
 const currentUSDTBalance = computed(() => balances.value[0].available);
@@ -18,7 +21,7 @@ const num = ref<number | null>(null);
 async function handleSubscribe() {
   if (!num.value || num.value <= 0) {
     const toast = await toastController.create({
-      message: "请输入申购数量",
+      message: t("market.subscribeRwa.enterQuantityError"),
       duration: 2000,
       position: "bottom",
       color: "warning",
@@ -32,26 +35,26 @@ async function handleSubscribe() {
 
 <template>
   <div class="space-y-5 mt-3 ion-padding">
-    <div>申购RWA</div>
+    <div>{{ t('market.subscribeRwa.title') }}</div>
 
     <ion-input
       v-model="num"
-      :placeholder="`最大可申购数量: ${max}`"
+      :placeholder="t('market.subscribeRwa.maxSubscribePlaceholder', { max })"
       type="number"
       inputmode="numeric"
       :max="max"
     />
 
     <div class="mt-4 text-sm color-(--ion-text-color-secondary)">
-      单价: ${{ unitPrice }}
+      {{ t('market.subscribeRwa.unitPrice') }}: ${{ unitPrice }}
     </div>
 
     <div class="mt-4 text-sm color-(--ion-text-color-secondary)">
-      可用余额: ${{ Number(currentUSDTBalance) }}
+      {{ t('market.subscribeRwa.availableBalance') }}: ${{ Number(currentUSDTBalance) }}
     </div>
 
     <ion-button expand="block" class="mt-6 ui-button" color="primary" @click="handleSubscribe">
-      确认申购
+      {{ t('market.subscribeRwa.confirmSubscribe') }}
     </ion-button>
   </div>
 </template>

src/locales/en-US.json

@@ -227,6 +227,36 @@
       "issueDate": "Issue Date",
       "subscriptionPrice": "Subscription Price"
     },
+    "tradeRwa": {
+      "tabs": {
+        "overview": "Overview",
+        "moment": "Moment"
+      },
+      "fields": {
+        "productCode": "Product Code",
+        "valuation": "Valuation",
+        "unitPrice": "Unit Price",
+        "totalSupply": "Total Supply",
+        "perUserLimit": "Per User Limit",
+        "launchDate": "Launch Date",
+        "subscriptionDeadline": "Subscription Deadline"
+      },
+      "units": {
+        "shares": "shares"
+      },
+      "about": "About",
+      "noDescription": "No description available.",
+      "subscribe": "Subscribe",
+      "subscribeSuccess": "Subscription successful"
+    },
+    "subscribeRwa": {
+      "title": "Subscribe RWA",
+      "maxSubscribePlaceholder": "Max quantity: {max}",
+      "unitPrice": "Unit Price",
+      "availableBalance": "Available Balance",
+      "confirmSubscribe": "Confirm Subscribe",
+      "enterQuantityError": "Please enter quantity"
+    },
     "loading": {
       "loadingMore": "Loading more..."
     }

src/locales/index.ts

@@ -6,7 +6,7 @@ export type MessageSchema = typeof enUS;
 
 const i18n = createI18n<MessageSchema, "en-US" | "zh-CN">({
   legacy: false,
-  locale: "zh-CN",
+  locale: "en-US",
   fallbackLocale: "en-US",
   messages: {
     "en-US": enUS,

src/locales/zh-CN.json

@@ -227,6 +227,36 @@
       "issueDate": "发行日期",
       "subscriptionPrice": "申购单价"
     },
+    "tradeRwa": {
+      "tabs": {
+        "overview": "概览",
+        "moment": "动态"
+      },
+      "fields": {
+        "productCode": "产品编号",
+        "valuation": "估值",
+        "unitPrice": "单价",
+        "totalSupply": "总发行量",
+        "perUserLimit": "每人限量",
+        "launchDate": "发行时间",
+        "subscriptionDeadline": "认购截止时间"
+      },
+      "units": {
+        "shares": "份"
+      },
+      "about": "About",
+      "noDescription": "暂无描述。",
+      "subscribe": "申购",
+      "subscribeSuccess": "申购成功"
+    },
+    "subscribeRwa": {
+      "title": "申购RWA",
+      "maxSubscribePlaceholder": "最大可申购数量: {max}",
+      "unitPrice": "单价",
+      "availableBalance": "可用余额",
+      "confirmSubscribe": "确认申购",
+      "enterQuantityError": "请输入申购数量"
+    },
     "loading": {
       "loadingMore": "加载更多..."
     }

src/views/trade-rwa/index.vue

@@ -7,6 +7,8 @@ const props = defineProps<{
   id: string;
 }>();
 
+const { t } = useI18n();
+
 const { data } = safeClient(client.api.rwa.subscription.available_editions({ editionId: props.id }).get());
 const model = useTemplateRef<ModalInstance>("model");
 
@@ -16,7 +18,7 @@ async function handleSubscribe(val: number) {
     quantity: String(val),
   }));
   const toast = await toastController.create({
-    message: "申购成功",
+    message: t("market.tradeRwa.subscribeSuccess"),
     duration: 2000,
     position: "bottom",
     color: "success",
@@ -37,8 +39,8 @@ async function handleSubscribe(val: number) {
         </ion-title>
       </ion-toolbar>
       <ui-tabs size="small" class="px-4">
-        <ui-tab-pane name="overview" title="Overview" />
-        <ui-tab-pane name="moment" title="Moment" />
+        <ui-tab-pane name="overview" :title="t('market.tradeRwa.tabs.overview')" />
+        <ui-tab-pane name="moment" :title="t('market.tradeRwa.tabs.moment')" />
       </ui-tabs>
     </ion-header>
     <ion-content :fullscreen="true" class="ion-padding">
@@ -53,13 +55,13 @@ async function handleSubscribe(val: number) {
           <ion-row>
             <ion-col>
               <div class="label">
-                产品编号
+                {{ t('market.tradeRwa.fields.productCode') }}
               </div>
               <div>{{ data?.product.code }}</div>
             </ion-col>
             <ion-col>
               <div class="label">
-                估值
+                {{ t('market.tradeRwa.fields.valuation') }}
               </div>
               <div>${{ formatAmount(data?.product.estimatedValue) }}</div>
             </ion-col>
@@ -67,27 +69,27 @@ async function handleSubscribe(val: number) {
           <ion-row>
             <ion-col>
               <div class="label">
-                单价
+                {{ t('market.tradeRwa.fields.unitPrice') }}
               </div>
               <div>${{ formatAmount(data?.unitPrice) }}</div>
             </ion-col>
             <ion-col>
               <div class="label">
-                总发行量
+                {{ t('market.tradeRwa.fields.totalSupply') }}
               </div>
-              <div>{{ Number(data?.totalSupply) }}份</div>
+              <div>{{ Number(data?.totalSupply) }}{{ t('market.tradeRwa.units.shares') }}</div>
             </ion-col>
           </ion-row>
           <ion-row>
             <ion-col>
               <div class="label">
-                每人限量
+                {{ t('market.tradeRwa.fields.perUserLimit') }}
               </div>
-              <div>{{ Number(data?.perUserLimit) }}份</div>
+              <div>{{ Number(data?.perUserLimit) }}{{ t('market.tradeRwa.units.shares') }}</div>
             </ion-col>
             <ion-col>
               <div class="label">
-                发行时间
+                {{ t('market.tradeRwa.fields.launchDate') }}
               </div>
               <div>{{ useDateFormat(data?.launchDate || '', 'YYYY/MM/DD') }}</div>
             </ion-col>
@@ -95,7 +97,7 @@ async function handleSubscribe(val: number) {
           <ion-row>
             <ion-col>
               <div class="label">
-                认购截止时间
+                {{ t('market.tradeRwa.fields.subscriptionDeadline') }}
               </div>
               <div>{{ useDateFormat(data?.subscriptionDeadline || '', 'YYYY/MM/DD') }}</div>
             </ion-col>
@@ -104,10 +106,10 @@ async function handleSubscribe(val: number) {
 
         <div class="mt-5">
           <div class="font-semibold">
-            About
+            {{ t('market.tradeRwa.about') }}
           </div>
           <div class="text-xs mt-2">
-            {{ data?.product.description || 'No description available.' }}
+            {{ data?.product.description || t('market.tradeRwa.noDescription') }}
           </div>
         </div>
       </div>
@@ -117,7 +119,7 @@ async function handleSubscribe(val: number) {
       <ion-toolbar class="ion-padding-horizontal ui-toolbar">
         <div class="flex justify-center my-2 gap-5">
           <ion-button id="open-modal" shape="round" expand="block" color="success">
-            申购
+            {{ t('market.tradeRwa.subscribe') }}
           </ion-button>
 
           <ion-modal ref="model" trigger="open-modal" :initial-breakpoint="0.4" :breakpoints="[0, 0.4]">